/* ==========================================================================
   LE LECTEUR VIDEO — feuille de style   (version propre du 08/09/2026)

   Cette feuille habille les commandes posees sur la video :
     - le bouton du son (« Turn on sound ») et sa pastille de texte,
     - les fleches PRECEDENT / SUIVANT,
     - le bouton LECTURE / PAUSE,
     - le bouton AGRANDISSEMENT (telephone seulement),
     - l'anneau multicolore tournant, la trame de points,
     - le panneau « ... Please wait ... » cree par le script,
     - le voile sombre du telephone,
     - le plein ecran.

   DEUX MONDES, DEUX BLOCS :
     1. ORDINATEUR (souris) : les fleches sont toujours visibles, le
        bouton lecture/pause n'apparait qu'au survol, PAS de bouton plein
        ecran (choix de David : la video fait deja 1397 px de large).
        Les regles de SURVOL sont toutes prefixees `html:not(.appareil-tactile)` :
        un doigt laisse un faux survol colle a l'ecran, elles ne doivent
        pas s'appliquer au telephone.
     2. TELEPHONE : tout est pilote par des CLASSES posees par le script
        (`html.appareil-tactile`, `son-actif`, `commandes-visibles`,
        `est-en-pause`, `est-plein-ecran`). Un toucher fait apparaitre
        les commandes facon YouTube ; elles s'effacent d'elles-memes.

   REGLES QUI ONT COUTE CHER (ne pas y revenir) :
     - JAMAIS `:has()` pour du fonctionnel : Firefox d'avant dec. 2023
       jette la regle ENTIERE. Le script pose des classes a la place.
     - JAMAIS `:fullscreen` : applique inegalement. Le script pose
       `est-plein-ecran`.
     - Le tactile n'est pas devine une fois pour toutes au chargement :
       le script pose `appareil-tactile` d'apres `(hover: none)` (suivi
       en direct, il change si l'appareil change de mode) ET au premier
       doigt qui touche l'ecran (Firefox en simulation tactile n'annonce
       pas toujours un pointeur grossier).
   ========================================================================== */


/* ==========================================================================
   1. LE BOUTON DU SON  —  « Turn on sound »
   La lecture demarre forcement en muet (regle des navigateurs). Ce bouton
   invite a activer le son ; il s'efface une fois clique (`is-hidden`).
   ========================================================================== */
.tch-sound-cta-big {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(234,229,222,.55);
  background: rgba(4,4,4,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--tch-text);
  cursor: pointer;
  transition: transform .3s var(--tch-ease), opacity .3s var(--tch-ease),
              background .3s var(--tch-ease), border-color .3s var(--tch-ease);
  z-index: 3;
}
.tch-sound-cta-big svg { width: 44px; height: 44px; }
html:not(.appareil-tactile) .tch-sound-cta-big:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(4,4,4,.65);
}
.tch-sound-cta-big.is-hidden {
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
}

/* la pastille « Turn on sound », sous le bouton */
.tch-sound-hint {
  position: absolute; left: 50%; top: calc(50% + 82px);
  transform: translateX(-50%);
  display: inline-block;
  padding: 10px 24px; border-radius: 999px;
  border: 1px solid rgba(234,229,222,.24);
  background: rgba(4,4,4,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--tch-text);
  font-family: var(--font-ui); font-size: .95rem; letter-spacing: .08em; line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 3;
}
.tch-sound-hint.is-hidden { opacity: 0; }


/* ==========================================================================
   2. LES FLECHES PRECEDENT / SUIVANT   (ordinateur : toujours visibles)
   `.tch-video-nav` est la classe commune des QUATRE boutons ronds
   (fleches, lecture/pause, agrandissement) : meme disque, meme anneau.
   ========================================================================== */
.tch-video-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(234,229,222,.35);
  background: rgba(4,4,4,.5); background-clip: padding-box;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--tch-text);
  cursor: pointer;
  transition: border-color .3s var(--tch-ease), background .3s var(--tch-ease),
              transform .3s var(--tch-ease), opacity .25s var(--tch-ease);
  z-index: 2;
}
html:not(.appareil-tactile) .tch-video-nav:hover {
  background: rgba(4,4,4,.75);
  transform: translateY(-50%) scale(1.06);
}
.tch-video-nav-prev { left: 16px; }
.tch-video-nav-next { right: 16px; }


/* ==========================================================================
   3. LE BOUTON LECTURE / PAUSE   (ordinateur : au survol seulement)
   Il n'apparait qu'une fois le son active (`son-actif`) et quand la
   souris survole la video — ou au clavier (`:focus-visible`).
   ========================================================================== */
.tch-video-play-pause {
  top: 50%; bottom: auto; left: 50%; right: auto;
  width: 108px; height: 108px;
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
  border-width: 1.5px;
  background: rgba(4,4,4,.45);
  transition: opacity .25s var(--tch-ease), transform .3s var(--tch-ease), background .3s;
  z-index: 4;
}
.tch-video-play-pause svg { width: 44px; height: 44px; }
html:not(.appareil-tactile) .tch-video-play-pause:hover,
.tch-video-play-pause:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(4,4,4,.65);
}
html:not(.appareil-tactile) .cadre-video.son-actif:hover .tch-video-play-pause,
.tch-video-play-pause:focus-visible {
  opacity: 1; pointer-events: auto;
}


/* ==========================================================================
   4. LE BOUTON AGRANDISSEMENT   —  ABSENT sur ordinateur (choix de David).
   Il n'existe que sur telephone : voir le bloc 10.
   ========================================================================== */
.tch-video-plein { display: none; z-index: 5; }


/* ==========================================================================
   5. L'ANNEAU MULTICOLORE TOURNANT et LA TRAME DE POINTS
   L'anneau est le meme que sur les fleches du site. Sur ordinateur il ne
   s'allume qu'au survol (ou au clavier) et remplace alors le contour gris.
   La trame de points (grille de 2 px) donne le grain du site aux disques.
   ========================================================================== */
.tch-sound-cta-big::before,
.tch-video-nav::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  padding: 3px;                          /* = l'epaisseur de l'anneau */
  background: conic-gradient(from var(--tch-angle),
    var(--pal-prune-clair)     0deg,
    var(--pal-prune-vif)      50deg,
    var(--pal-bordeaux)       95deg,
    var(--pal-grenat)        135deg,
    var(--pal-rouille-vif)   165deg,
    var(--pal-rouille-clair) 185deg,
    var(--pal-rouille-vif)   205deg,
    var(--pal-grenat)        245deg,
    var(--pal-bordeaux)      290deg,
    var(--pal-prune-vif)     325deg,
    var(--pal-prune-clair)   360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--tch-ease);
  pointer-events: none;
}
html:not(.appareil-tactile) .tch-sound-cta-big:hover::before, .tch-sound-cta-big:focus-visible::before,
html:not(.appareil-tactile) .tch-video-nav:hover::before,     .tch-video-nav:focus-visible::before {
  opacity: 1;
  animation: tch-filament 3s linear infinite;
}
html:not(.appareil-tactile) .tch-sound-cta-big:hover,
html:not(.appareil-tactile) .tch-video-nav:hover { border-color: transparent; }   /* l'anneau fait le contour */

@keyframes tch-filament { to { --tch-angle: 360deg; } }

.tch-video-nav,
.tch-sound-cta-big {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23EAE5DE' fill-opacity='.20'/%3E%3C/svg%3E");
  background-size: 2px 2px;
  background-position: 0 0;
}


/* ==========================================================================
   6. LE PANNEAU « ... Please wait ... »   (cree par le script)
   Il n'apparait qu'apres 400 ms d'attente, jamais au premier chargement.
   Pendant qu'il est la, rien ne vient se superposer.
   ========================================================================== */
.tch-video-loading {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.97);
  min-width: 190px; padding: 18px 22px 16px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--tch-text);
  background: rgba(4,4,4,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--tch-ease), transform .3s var(--tch-ease), visibility 0s linear .3s;
  z-index: 6;
}
.is-video-loading .tch-video-loading {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .3s var(--tch-ease), transform .3s var(--tch-ease), visibility 0s;
}
.tch-video-loading-texte {
  font-family: var(--font-ui); font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.tch-video-loading-filament {
  display: block; width: 140px; height: 3px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, var(--pal-prune-vif) 22%,
    var(--pal-bordeaux) 38%, var(--pal-rouille-vif) 55%, var(--pal-prune-clair) 72%, transparent 100%);
  background-size: 220% 100%;
  animation: tch-video-attente 1.35s linear infinite;
  box-shadow: 0 0 14px rgba(186,27,73,.28);
}
@keyframes tch-video-attente {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.is-video-loading .tch-video-play-pause,
.is-video-loading .tch-sound-cta-big { opacity: 0 !important; pointer-events: none !important; }
.is-video-loading .tch-sound-hint   { opacity: 0 !important; pointer-events: none !important; }


/* ==========================================================================
   7. LE VOILE SOMBRE   (telephone seulement, voir le bloc 10)
   Il existe partout mais ne s'affiche que sur telephone, sous les
   commandes. Il ne recoit aucun toucher : c'est le cadre qui les recoit.
   ========================================================================== */
.mv-voile {
  position: absolute; inset: 0;
  border-radius: var(--tch-radius-lg);
  background: rgba(0,0,0,.38);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--tch-ease);
  z-index: 1;
}


/* ==========================================================================
   8. FENETRE ETROITE SUR ORDINATEUR   (moins de 560 px, a la souris)
   ========================================================================== */
@media (max-width: 560px) {
  .tch-sound-cta-big       { width: clamp(44px, 14vw, 68px); height: clamp(44px, 14vw, 68px); }
  .tch-sound-cta-big svg   { width: clamp(18px, 5.7vw, 28px); height: clamp(18px, 5.7vw, 28px); }
  .tch-sound-hint          { padding: 6px 14px; font-size: .74rem; letter-spacing: .05em;
                             top: calc(50% + clamp(34px, 9.5vw, 48px)); }
  .tch-video-nav-prev,
  .tch-video-nav-next      { width: clamp(40px, 11vw, 46px); height: clamp(40px, 11vw, 46px); }
  .tch-video-nav-prev svg,
  .tch-video-nav-next svg  { width: 16px; height: 16px; }
  .tch-video-nav-prev      { left: 6px; }
  .tch-video-nav-next      { right: 6px; }
  .tch-video-play-pause    { width: clamp(48px, 14vw, 64px); height: clamp(48px, 14vw, 64px); }
  .tch-video-play-pause svg{ width: clamp(19px, 5.6vw, 26px); height: clamp(19px, 5.6vw, 26px); }
}


/* ==========================================================================
   9. LE PLEIN ECRAN   (classe `est-plein-ecran` posee par le script)
   C'est LE CADRE qui passe en plein ecran, pas la balise video : nos
   boutons restent donc utilisables. Bloc simple + `object-fit: contain`
   (pas de `place-items: center`, qui empechait la video de s'etirer).
   ========================================================================== */
.cadre-video.est-plein-ecran {
  position: fixed; inset: 0;
  width: 100vw;  height: 100vh;
  width: 100dvw; height: 100dvh;          /* telephone : la vraie hauteur visible */
  max-width: none; max-height: none;
  display: block; padding: 0; margin: 0;
  background: #000; border-radius: 0; overflow: hidden;
  z-index: 2147483647;
}
.cadre-video.est-plein-ecran video {
  display: block;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  aspect-ratio: auto !important;          /* la regle 16/9 du cadre ne vaut plus ici */
  object-fit: contain; object-position: center;
  border-radius: 0;
}
.cadre-video.est-plein-ecran::after { display: none; }   /* le liseret du cadre */

/* souris immobile 2,5 s en plein ecran : les commandes s'effacent
   (pose par le script ; ne concerne que les appareils a souris) */
.cadre-video.est-plein-ecran.souris-immobile .tch-video-nav {
  opacity: 0 !important; pointer-events: none !important;
}
.cadre-video.est-plein-ecran.souris-immobile { cursor: none; }


/* ==========================================================================
   10. TELEPHONE   —  les commandes « facon YouTube »   (08/09, David)
   `html.appareil-tactile` est pose par le script des que l'appareil ne
   sait pas survoler, ou des qu'un doigt touche l'ecran.
     - avant le son : seul le bouton du son (anneau allume) et sa pastille ;
     - son actif, image nue ; un toucher pose `commandes-visibles` :
         voile sombre + fleche . lecture/pause . agrandissement . fleche
         (fleches aux bords, tailles de l'ordinateur ; en plein ecran
         paysage elles tombent dans les bandes noires) ;
     - 3 s sans toucher (lecture) : le script retire la classe ;
       en pause, elle reste.
   Les tailles sont en `vmin` : elles suivent l'ecran, portrait comme
   paysage. Mesure sur 320 px : tout tient dans l'image.
   ========================================================================== */

/* --- l'habillage : plus de trame (grain sale sur petit ecran), anneau
       allume, contour gris efface, ombre douce --- */
html.appareil-tactile .cadre-video .tch-video-nav,
html.appareil-tactile .cadre-video .tch-sound-cta-big {
  background-image: none;
  background-color: rgba(4,4,4,.62);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
html.appareil-tactile .cadre-video .tch-video-nav::before,
html.appareil-tactile .cadre-video .tch-sound-cta-big::before {
  inset: -2px; padding: 2px;
}
html.appareil-tactile .cadre-video.commandes-visibles .tch-video-nav::before,
html.appareil-tactile .cadre-video .tch-sound-cta-big::before {
  opacity: 1;
  animation: tch-filament 3s linear infinite;
}
html.appareil-tactile .cadre-video .tch-video-nav svg path[stroke]   { stroke-width: 2.4; }
html.appareil-tactile .cadre-video .tch-video-plein svg path[stroke] { stroke-width: 2.2; }
html.appareil-tactile .cadre-video .tch-video-nav-prev svg { margin-left: -2px; }  /* recentrage optique des chevrons */
html.appareil-tactile .cadre-video .tch-video-nav-next svg { margin-left:  2px; }

/* --- affichage / effacement : tout part de `commandes-visibles` --- */
html.appareil-tactile .cadre-video .tch-video-nav,
html.appareil-tactile .cadre-video .mv-voile {
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--tch-ease);
}
html.appareil-tactile .cadre-video.commandes-visibles .tch-video-nav { opacity: 1; pointer-events: auto; }
html.appareil-tactile .cadre-video.commandes-visibles .mv-voile     { opacity: 1; }

/* --- la rangee : fleche . lecture/pause . agrandissement . fleche --- */
html.appareil-tactile .cadre-video .tch-video-nav-prev,
html.appareil-tactile .cadre-video .tch-video-nav-next {
  top: 50%; transform: translate(0, -50%);
  width: clamp(40px, 12vmin, 48px); height: clamp(40px, 12vmin, 48px);
}
html.appareil-tactile .cadre-video .tch-video-nav-prev { left: clamp(8px, 2.4vmin, 24px); right: auto; }
html.appareil-tactile .cadre-video .tch-video-nav-next { right: clamp(8px, 2.4vmin, 24px); left: auto; }
html.appareil-tactile .cadre-video .tch-video-nav-prev svg,
html.appareil-tactile .cadre-video .tch-video-nav-next svg { width: 18px; height: 18px; }

html.appareil-tactile .cadre-video .tch-video-play-pause {
  top: 50%; left: 50%; bottom: auto; right: auto;
  transform: translate(-50%, -50%);
  width: clamp(54px, 15vmin, 84px); height: clamp(54px, 15vmin, 84px);
}
html.appareil-tactile .cadre-video .tch-video-play-pause svg {
  width: clamp(22px, 6.4vmin, 36px); height: clamp(22px, 6.4vmin, 36px);
}

html.appareil-tactile .cadre-video .tch-video-plein {
  display: flex;
  top: 50%; left: 50%; bottom: auto; right: auto;
  width: clamp(34px, 10vmin, 50px); height: clamp(34px, 10vmin, 50px);
  /* a droite du bouton central : sa moitie + un ecart + notre moitie */
  transform: translate(calc(-50% + clamp(27px, 7.5vmin, 42px) + clamp(8px, 2.2vmin, 12px) + clamp(17px, 5vmin, 25px)), -50%);
}
html.appareil-tactile .cadre-video .tch-video-plein svg {
  width: clamp(15px, 4.4vmin, 24px); height: clamp(15px, 4.4vmin, 24px);
}


/* ==========================================================================
   11. MOUVEMENT REDUIT   (reglage d'accessibilite du visiteur)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tch-sound-cta-big, .tch-video-nav { transition: none; }
  .tch-sound-cta-big::before, .tch-video-nav::before { animation: none !important; --tch-angle: 180deg; }
  .tch-video-loading { transition: none; }
  .tch-video-loading-filament { animation: none; background-position: 50% 0; }
}