/**
 * DJ Lecteur d'extrait — skin maison
 * ----------------------------------
 * Chargé par includes/dj-lecteur.php. Le balisage est construit par js/dj-lecteur.js.
 *
 * ⚠️ CACHE-BUSTER : la constante DJ_LECTEUR_VERSION (includes/dj-lecteur.php) est le
 * ?ver= de cette feuille. À CHAQUE retouche : bumper la constante ET la ligne
 * « @version » ci-dessous, puis purger LiteSpeed + le cache statique Divi
 * (Options du thème → Builder → Avancé).
 *
 * @version 1.1.7
 *
 * PARTI PRIS
 * - Zéro « !important ». La spécificité vient du préfixe « html body », parce que
 *   l'ordre d'impression des feuilles n'est pas garanti sur ce site.
 * - Zéro rayon : le site est anguleux par construction.
 * - Couleurs relevées sur les sources, jamais choisies à l'œil : tokens --dj-* du
 *   :root de style.css, et le doré global #B8956A (celui des prix).
 * - La barre de progression et le volume sont de vrais input[type=range] : on hérite
 *   du glisser, du clavier et de l'accessibilité au lieu de les réécrire.
 * - ⚠️ WP Grid Builder impose top:0 à tout div enfant du lecteur des cartes par un
 * sélecteur plus fort : la barre compacte le contre explicitement.
 *
 * SOMMAIRE
 *   1. Le lecteur d'origine, mis de côté
 *   2. Bloc fiche audio
 *   3. Barre de progression et volume (input[type=range])
 *   4. Fin d'extrait
 *   4 bis. Le bandeau sur petit écran (container query)
 *   5. Barre compacte des cartes WP Grid Builder
 *   6. Affiche d'entrée des vidéos
 */

/* =========================================================================
   1. LE LECTEUR D'ORIGINE, MIS DE CÔTÉ
   Posé PAR LE SCRIPT : si le JS ne tourne pas, cette classe n'existe nulle part
   et MediaElement reste visible et utilisable. C'est le filet de sécurité.
   On masque à la vue sans retirer du flux : l'élément <audio> continue de jouer
   (le son ne dépend pas du rendu) et MediaElement garde des mesures finies.
   Le script pose aussi « inert » pour que le clavier ne tombe pas dedans.
   ========================================================================= */
html body .dj-lect-source {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    pointer-events: none;
}

/* Le <p>&nbsp;</p> fantôme que le contenu des fiches laisse derrière le lecteur
   (68 fiches sur 179). Le script ne pose cette classe que sur un paragraphe
   RÉELLEMENT vide — un paragraphe de texte n'est jamais touché. */
html body .dj-lect-vide {
    display: none;
}

/* =========================================================================
   2. BLOC FICHE AUDIO
   ========================================================================= */
/* Le composant pose son propre box-sizing : il ne présume pas de la remise à zéro
   globale du thème. Sans ça, en content-box, la barre des cartes débordait de sa
 carte et gonflait à 107 px au lieu de 46. */
html body .dj-lect,
html body .dj-lect * {
    box-sizing: border-box;
}

html body .dj-lect {
    --dj-lect-accent: #B8956A;        /* doré : celui des prix (style.css) */
    --dj-lect-accent-hi: #A8825A;
    --dj-lect-piste: var(--dj-bordure, #E8D5CF);

    background: linear-gradient(135deg, var(--dj-fond-clair, #FAF5F3) 0%, var(--dj-fond-secondaire, #F5EAE6) 100%);
    border: 1px solid var(--dj-bordure, #E8D5CF);
    border-left: 3px solid var(--dj-lect-accent);
    border-radius: 0;
    padding: 14px 16px 15px;
    margin: 8px 0 26px;
    box-shadow: 0 6px 18px rgba(212, 165, 165, 0.16);
    transition: box-shadow 0.25s ease;
}

html body .dj-lect.dj-lect-joue {
    box-shadow: 0 6px 20px rgba(184, 149, 106, 0.22);
}

html body .dj-lect .dj-lect-label {
    font-family: 'Lora', serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #B09090;                    /* signature reprise de .dj-share-label */
    margin: 0 0 11px;
    line-height: 1.4;
}

html body .dj-lect .dj-lect-duree {
    color: var(--dj-lect-accent);
    font-variant-numeric: tabular-nums;
}

html body .dj-lect .dj-lect-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* La piste — tout ce qui n'est pas le bouton. S'efface à la fin de l'extrait
   pour laisser la place au bandeau de bascule, à hauteur constante. */
html body .dj-lect .dj-lect-piste {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Bouton lecture/pause — 48px, au-dessus de la cible tactile minimale de 44 */
html body .dj-lect .dj-lect-play {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--dj-lect-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(184, 149, 106, 0.32);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

html body .dj-lect .dj-lect-play:hover {
    background: var(--dj-lect-accent-hi);
    transform: scale(1.05);
}

html body .dj-lect .dj-lect-play:focus-visible {
    outline: 2px solid var(--dj-lect-accent);
    outline-offset: 3px;
}

html body .dj-lect .dj-lect-play svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    pointer-events: none;
}

html body .dj-lect .dj-lect-temps {
    flex: 0 0 auto;
    font-family: 'Lora', serif;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--dj-texte-fonce, #8B7E7E);
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   3. BARRE DE PROGRESSION ET VOLUME
   ⚠️ Les pseudo-éléments -webkit- et -moz- ne se mélangent JAMAIS dans une même
   règle : un sélecteur inconnu invalide le bloc entier dans les deux moteurs.
   Chaque famille a donc sa propre règle, volontairement dupliquée.
   La progression est peinte par --dj-lect-p, mis à jour par le script.
   ========================================================================= */
html body .dj-lect .dj-lect-rail,
html body .dj-lect .dj-lect-vol {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    height: 24px;
}

html body .dj-lect .dj-lect-rail {
    flex: 1 1 auto;
    min-width: 40px;
    width: auto;
}

html body .dj-lect .dj-lect-vol {
    flex: 0 0 56px;
    width: 56px;
}

html body .dj-lect .dj-lect-rail:focus-visible,
html body .dj-lect .dj-lect-vol:focus-visible {
    outline: 2px solid var(--dj-lect-accent);
    outline-offset: 2px;
}

/* -- WebKit / Blink -- */
html body .dj-lect .dj-lect-rail::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        var(--dj-rose-principal, #D4A5A5) 0 var(--dj-lect-p, 0%),
        var(--dj-lect-piste) var(--dj-lect-p, 0%) 100%
    );
}

html body .dj-lect .dj-lect-rail::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--dj-lect-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

html body .dj-lect .dj-lect-vol::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        var(--dj-rose-desature, #C9A89B) 0 var(--dj-lect-p, 70%),
        var(--dj-lect-piste) var(--dj-lect-p, 70%) 100%
    );
}

html body .dj-lect .dj-lect-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--dj-rose-desature, #C9A89B);
    border: 0;
}

/* -- Gecko -- */
html body .dj-lect .dj-lect-rail::-moz-range-track {
    height: 6px;
    border-radius: 0;
    background: var(--dj-lect-piste);
}

html body .dj-lect .dj-lect-rail::-moz-range-progress {
    height: 6px;
    border-radius: 0;
    background: var(--dj-rose-principal, #D4A5A5);
}

html body .dj-lect .dj-lect-rail::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--dj-lect-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

html body .dj-lect .dj-lect-vol::-moz-range-track {
    height: 4px;
    background: var(--dj-lect-piste);
}

html body .dj-lect .dj-lect-vol::-moz-range-progress {
    height: 4px;
    background: var(--dj-rose-desature, #C9A89B);
}

html body .dj-lect .dj-lect-vol::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dj-rose-desature, #C9A89B);
    border: 0;
}

html body .dj-lect .dj-lect-bloc-vol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

html body .dj-lect .dj-lect-bloc-vol svg {
    width: 16px;
    height: 16px;
    fill: var(--dj-texte-fonce, #8B7E7E);
    opacity: 0.45;
}

/* Sur téléphone le bloc volume ne sert à rien — iOS ignore le réglage de volume
   par script — et il volait 88 px sur 388, réduisant la barre à 147 px. */
@media only screen and (max-width: 980px) {
    html body .dj-lect .dj-lect-bloc-vol {
        display: none;
    }
}

/* =========================================================================
   4. FIN D'EXTRAIT
   Le moment de bascule — mais SANS doublonner le vrai bouton d'achat, qui est
   juste en dessous. Deux surfaces pleines qui disent la même chose se
 concurrencent. Donc :
   - le bandeau tient sur UNE ligne, celle de la barre ;
   - le libellé du haut s'efface, la phrase le remplace. Mesuré au banc : le bloc
     passe de 105 px à 79 px. Il RÉTRÉCIT d'une ligne — il ne grandit jamais,
     donc rien ne saute vers le bas au moment où l'extrait s'arrête ;
   - le bouton lecture reste en place et sert de « réécouter » ;
   - la bascule d'achat est un bouton FANTÔME (contour), pas une surface pleine.
     Elle déclenche le bouton « Je me l'offre » déjà présent : un seul parcours d'achat.
   ========================================================================= */
html body .dj-lect .dj-lect-fin {
    display: none;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

html body .dj-lect.dj-lect-fini .dj-lect-piste {
    display: none;
}

html body .dj-lect.dj-lect-fini .dj-lect-fin {
    display: flex;
}

/* Le libellé « Écoute un extrait » n'a plus rien à dire : la phrase le remplace. */
html body .dj-lect.dj-lect-fini .dj-lect-label {
    display: none;
}

html body .dj-lect .dj-lect-fin p {
    margin: 0;
    flex: 1 1 150px;
    min-width: 0;
    font-family: 'Lora', serif;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--dj-texte-fonce, #8B7E7E);
}

html body .dj-lect .dj-lect-offre {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    max-width: 100%;
    border: 1px solid var(--dj-lect-accent);
    border-radius: 0;
    background: transparent;
    color: var(--dj-lect-accent);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;
    padding: 9px 16px;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

html body .dj-lect .dj-lect-offre:hover {
    background: var(--dj-lect-accent);
    color: #fff;
}

html body .dj-lect .dj-lect-offre:focus-visible {
    outline: 2px solid var(--dj-lect-accent);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 4 bis. LE BANDEAU SUR PETIT ÉCRAN
   -------------------------------------------------------------------------
   ⚠️ MESURÉ EN LIGNE, pas déduit : sous ~360 px de BLOC, le bouton passait sur
   une deuxième ligne de flex et le bloc GRANDISSAIT de 11 px (105 → 116) au lieu
   de rétrécir. Exactement l'inverse de la promesse du bandeau — « il ne grandit
   jamais, rien ne saute ». Sur iPhone le bloc tombe vers 310-350 px : le défaut
   touchait donc tous les téléphones, à chaque fin d'extrait.

   🔑 C'EST UNE CONTAINER QUERY, PAS UNE MEDIA QUERY, ET C'EST VOULU.
   Ce qui casse la mise en page est la largeur du BLOC, pas celle du viewport :
   la même fiche donne 593 px en bureau et ~330 px sur téléphone, et c'est Divi
   qui décide (colonnes côte à côte puis empilées). Une media query devrait donc
   deviner ce rapport, et se tromperait au premier changement de gabarit.
   ⛔ Ne pas « simplifier » en @media (max-width: …) : le seuil deviendrait faux.

   Sans support de @container (Safari < 16), rien ne s'applique : on retombe sur
   le comportement actuel, dégradation acceptable.

   Le bouton passe en pleine largeur : il perd quelques pixels de hauteur mais
   gagne toute la largeur du bloc — la cible tactile est plus confortable qu'avant.

   Mesures après correctif, des deux branches de texte : de 600 à 260 px le bloc
   ne grandit JAMAIS (105 → 79 en large, 105 → 92 en étroit). À 240 px il reste
   1 px, sous la largeur de tout téléphone en service.
   ------------------------------------------------------------------------- */
html body .dj-lect {
    container-type: inline-size;
    container-name: dj-lect;
}

@container dj-lect (max-width: 400px) {
    html body .dj-lect .dj-lect-fin {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        flex-wrap: nowrap;
    }

    html body .dj-lect .dj-lect-fin p {
        flex: 0 1 auto;
        font-size: 12.5px;
        line-height: 1.35;
    }

    html body .dj-lect .dj-lect-offre {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        padding: 8px 12px;
        white-space: normal;   /* le libellé peut se couper : il a la largeur pour lui */
    }
}

/* Les plus petits écrans encore en service (viewport ~320 px). */
@container dj-lect (max-width: 310px) {
    html body .dj-lect .dj-lect-fin {
        gap: 5px;
    }

    html body .dj-lect .dj-lect-fin p {
        font-size: 11px;
        line-height: 1.3;
    }

    html body .dj-lect .dj-lect-offre {
        padding: 6px 10px;
    }
}

/* =========================================================================
   5. BARRE COMPACTE DES CARTES WP GRID BUILDER
   WPGB révèle .wpgb-card-media-player au clic sur l'icône de la carte, en
   posant « wpgb-card-playing » : notre barre vit dedans et suit ce mécanisme.
   La photo reste visible (WPGB bascule data-wpgb-poster en background-image).
   ========================================================================= */
/* ⚠️⚠️ SPÉCIFICITÉ — NE PAS ALLÉGER CE SÉLECTEUR.
   WP Grid Builder pose sur TOUT div enfant direct du lecteur :

     .wp-grid-builder .wpgb-card .wpgb-card-media-player>div {
         position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover }

   soit (0,3,1) — c'est sa façon d'étaler l'affiche des cartes audio sur toute la
   zone. Notre barre EST un div enfant direct : elle héritait donc de « top:0 » et
   s'étirait sur toute la photo, son fond à 92 % d'opacité masquant complètement
 l'extrait vidéo.
   Le préfixe ci-dessous vaut (0,4,2) et reprend la main proprement, sans !important.

   ⚠️ Ce défaut avait échappé au banc : j'y avais écrit une doublure de WPGB en
   (0,1,1), plus faible que la vraie feuille. Le banc charge désormais la feuille
   du plugin telle quelle.

   La barre porte AUSSI la classe .dj-lect : on défait donc aussi ce que le bloc de
   fiche pose (marge, cadre, ombre) — sa marge basse de 26 px la décollait du bas. */
/* -------------------------------------------------------------------------
 5 bis. LA MÊME BARRE, SUR LA FICHE VIDÉO
   -------------------------------------------------------------------------
   ⚠️ Tout le style de la barre ci-dessus était préfixé par « .wpgb-card » :
   HORS de la grille, rien ne s'appliquait. Sur la fiche vidéo la barre retombait
   donc sur le style du bloc audio — 79 px de haut au lieu de 48, une bordure, une
 ombre, et 8 px de marge qui la décollaient du bas de la vidéo (relevé :
   « margin top à 0px ce serait mieux »). Les sélecteurs de style sont désormais
   en « .dj-lect.dj-lect-carte », qui vaut dans les deux contextes.

   Ne reste ici que ce qui est PROPRE à la fiche : le positionnement. Dans la
   grille il faut battre WPGB (0,4,2) ; ici, personne à combattre.
   ------------------------------------------------------------------------- */
html body .dj-video-preview-container {
    position: relative;
}

html body .dj-video-preview-container > .dj-lect-carte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 4;
    margin: 0;
    border: 0;
    border-top: 2px solid #B8956A;
    box-shadow: none;
}


html body .wp-grid-builder .wpgb-card .wpgb-card-media-player > .dj-lect-carte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    background: rgba(250, 245, 243, 0.92);
    border: 0;
    border-top: 2px solid #B8956A;
    box-shadow: none;
}

/* ⚠️ Sans cette contrainte, la rangée garde sa largeur de contenu (284 px mesurés
   dans une carte de 250) et le temps de droite sort de la carte. Une carte de
   grille est étroite : on serre aussi les écarts. */
html body .dj-lect.dj-lect-carte .dj-lect-row {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    gap: 8px;
}

html body .dj-lect.dj-lect-carte .dj-lect-piste {
    gap: 8px;
}

html body .dj-lect.dj-lect-carte .dj-lect-play {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    box-shadow: none;
}

html body .dj-lect.dj-lect-carte .dj-lect-play svg {
    width: 11px;
    height: 11px;
}

html body .dj-lect.dj-lect-carte .dj-lect-temps {
    font-size: 11px;
}

html body .dj-lect.dj-lect-carte .dj-lect-rail {
    min-width: 16px;
    height: 18px;
}

html body .dj-lect.dj-lect-carte .dj-lect-rail::-webkit-slider-runnable-track {
    height: 5px;
}

html body .dj-lect.dj-lect-carte .dj-lect-rail::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -3px;
}

html body .dj-lect.dj-lect-carte .dj-lect-rail::-moz-range-track,
html body .dj-lect.dj-lect-carte .dj-lect-rail::-moz-range-progress {
    height: 5px;
}

html body .dj-lect.dj-lect-carte .dj-lect-rail::-moz-range-thumb {
    width: 11px;
    height: 11px;
}

/* Plein écran — cartes vidéo. On retire les commandes natives pour habiller la
   carte : c'est la seule capacité qu'on perdrait, on la rend. Bouton fantôme :
   la seule surface pleine de la barre reste le bouton de lecture. */
html body .dj-lect .dj-lect-fs {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.18s ease;
}

html body .dj-lect .dj-lect-fs:hover {
    opacity: 1;
}

html body .dj-lect .dj-lect-fs:focus-visible {
    outline: 2px solid var(--dj-lect-accent);
    outline-offset: 2px;
}

html body .dj-lect .dj-lect-fs svg {
    width: 14px;
    height: 14px;
    fill: var(--dj-texte-fonce, #8B7E7E);
    pointer-events: none;
}

/* =========================================================================
   5 ter. L'OPACITÉ DE LA BARRE — commune aux CARTES et à la FICHE VIDÉO
   =========================================================================
 Demande : « ça masque beaucoup l'extrait vidéo », puis « reporte cette
   opacité sur les cards de la grid, il faut uniformiser ». La barre est un outil,
   pas un décor : elle n'a pas à occuper le bas de l'image en permanence.

   DEUX ÉTATS, et c'est la nuance qui compte :
   - à l'arrêt, survoler le MÉDIA suffit à la ramener ;
   - EN LECTURE, il faut pointer la BARRE elle-même. Sans cette distinction,
     cliquer sur play laissait la barre pleine — la souris est encore sur la
 vidéo — et elle ne s'effaçait jamais (relevé : « à la lecture il
     devrait repasser en opacité réduite aussi »).

   ⚠️ TROIS GARDE-FOUS, sans lesquels ce réglage se retourne contre nous :
   1. `:focus-within` — au clavier il n'y a pas de survol : sans lui, qui tabule
      jusqu'au bouton lecture piloterait une barre à demi effacée.
   2. `@media (hover: none)` — sur un téléphone il n'y a pas de survol DU TOUT :
      la barre resterait délavée en permanence, sans moyen de la réveiller.
   3. L'ordre ci-dessous est délibéré : « .dj-lect-joue » a la MÊME spécificité
      (0,3,2) que le survol du média, donc il doit venir APRÈS pour gagner.
      Ne pas le remonter.

   La transition est neutralisée par le bloc « prefers-reduced-motion » en fin de
   feuille, qui vise déjà .dj-lect.
   ========================================================================= */
html body .dj-lect.dj-lect-carte {
    opacity: 0.55;
    transition: opacity 0.22s ease;
}

/* À l'arrêt : survoler le média la ramène entièrement. */
html body .dj-video-preview-container:hover > .dj-lect-carte,
html body .wpgb-card-media-player:hover > .dj-lect-carte {
    opacity: 1;
}

/* En lecture : elle s'efface davantage… */
html body .dj-lect.dj-lect-carte.dj-lect-joue {
    opacity: 0.38;
}

/* …et ne revient que si on pointe la barre, ou au clavier. */
html body .dj-lect.dj-lect-carte.dj-lect-joue:hover,
html body .dj-lect.dj-lect-carte:focus-within {
    opacity: 1;
}

/* Tactile : aucun survol possible, donc jamais d'effacement. */
@media (hover: none) {
    html body .dj-lect.dj-lect-carte {
        opacity: 1;
    }
}

/* =========================================================================
   6. AFFICHE D'ENTRÉE DES VIDÉOS
   La vidéo GARDE ses contrôles natifs : plein écran, AirPlay, sous-titres.
   On habille seulement l'affiche, et l'entrée s'efface au premier lancement.
   ========================================================================= */
html body .dj-video-entree {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(180deg, rgba(20, 16, 18, 0) 40%, rgba(20, 16, 18, 0.42) 100%);
    font-family: inherit;
}

html body .dj-video-entree:focus-visible {
    outline: 2px solid #B8956A;
    outline-offset: -4px;
}

html body .dj-video-entree .dj-video-rond {
    width: 68px;
    height: 68px;
    border-radius: 0;
    background: #B8956A;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

html body .dj-video-entree:hover .dj-video-rond {
    transform: scale(1.07);
}

html body .dj-video-entree svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

html body .dj-video-entree .dj-video-label {
    font-family: 'Lora', serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    html body .dj-lect,
    html body .dj-lect .dj-lect-play,
    html body .dj-lect .dj-lect-offre,
    html body .dj-video-entree .dj-video-rond {
        transition: none;
    }
}