/* Spliff — Feature « Vidéo à la place de l'image dans les listes »
 *
 * L'image native du produit reste en flux normal : elle dimensionne la vignette,
 * sert de poster visuel et de repli si la vidéo ne charge pas. La vidéo se
 * superpose en object-fit:cover et apparaît en fondu quand elle démarre
 * (classe .is-playing posée par feature.js). Le clic traverse la vidéo
 * (pointer-events:none) → il suit le lien produit de la vignette.
 *
 * Aucune dépendance au markup du thème : on n'enveloppe QUE le thumbnail.
 */

.spliff-lv {
    position: relative;
    display: block;
    line-height: 0; /* supprime le petit gap inline sous l'image */
}

/* L'image garde le dimensionnement du thème ; on neutralise juste le gap inline. */
.spliff-lv img {
    display: block;
}

.spliff-lv__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* la vidéo remplit la boîte de l'image quel que soit son ratio */
    margin: 0;
    background: transparent;
    border-radius: inherit;  /* suit l'arrondi éventuel posé par le thème sur la vignette */
    pointer-events: none;    /* le clic va au lien produit, pas à la vidéo */
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 1;
}

/* Fondu d'apparition dès que la lecture démarre (sinon l'image reste seule). */
.spliff-lv.is-playing .spliff-lv__video {
    opacity: 1;
}

/* Accessibilité : pas d'animation → on garde l'image fixe, la vidéo est masquée. */
@media (prefers-reduced-motion: reduce) {
    .spliff-lv__video {
        display: none;
    }
}