/* =====================================================
   CONSEIL SNDGK — Lecteur vidéo du //02 de Constellation

   Fichier AUTONOME, chargé par constellation.html et constellation-en.html :
   ne modifie ni premium.css ni premium-themes.css.
   Dépend de lecteur.js, qui construit la surcouche.

   POURQUOI REMPLACER LES CONTRÔLES NATIFS. La barre du navigateur est une
   pilule noire translucide aux icônes du système : sur une page à plat,
   crème, sans dégradé ni ombre, elle est le seul élément qui vienne d'ailleurs.

   AMÉLIORATION PROGRESSIVE. L'attribut `controls` reste écrit dans le HTML ;
   c'est le script qui le retire une fois la surcouche en place. Sans
   JavaScript, le visiteur garde donc un lecteur complet — jamais une vidéo
   sans commande.

   PAS DE BARRE SOMBRE. Le film est sur fond crème ; une barre noire aurait
   creusé un trou en bas de l'image. On reprend --bg-2, très opaque, avec un
   filet supérieur — la même matière que les encadrés du site.
===================================================== */

.media-frame:has(video) { position: relative; }

/* Repli pour les navigateurs sans :has() — la classe est posée par le script. */
.lecteur-cadre { position: relative; }


/* ---------- État au repos : le bouton de lecture ---------- */

.lecteur-demarrer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.lecteur-demarrer .rond {
  width: clamp(58px, 7vw, 78px);
  height: clamp(58px, 7vw, 78px);
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(227, 6, 19, 0.28);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.lecteur-demarrer:hover .rond,
.lecteur-demarrer:focus-visible .rond {
  transform: scale(1.07);
  box-shadow: 0 14px 38px rgba(227, 6, 19, 0.38);
}

.lecteur-demarrer .rond svg { width: 26%; height: 26%; margin-left: 8%; fill: #fff; }

.lecteur-demarrer .duree {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.86);
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
}

.lecteur-demarrer:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }


/* ---------- La barre de commande ---------- */

.lecteur-barre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  /* Elle s'efface pendant la lecture et revient au survol ou au clavier :
     un film de 2 min 37 ne doit pas être barré en permanence. */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.lecteur-cadre:hover .lecteur-barre,
.lecteur-cadre:focus-within .lecteur-barre,
.lecteur-cadre.est-en-pause .lecteur-barre {
  opacity: 1;
  transform: translateY(0);
}

.lecteur-barre button {
  border: 0;
  background: transparent;
  padding: 0.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--fg);
  border-radius: 4px;
}
.lecteur-barre button svg { width: 18px; height: 18px; fill: currentColor; }
.lecteur-barre button:hover { color: var(--red); }
.lecteur-barre button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.lecteur-temps {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------- La progression ---------- */

.lecteur-progression {
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.lecteur-progression:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }

.lecteur-piste {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}

.lecteur-fait {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--red);
  border-radius: 2px;
}

/* Le point de tête n'apparaît qu'au survol : en lecture, un curseur permanent
   attire l'oeil hors de l'image. */
.lecteur-fait::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-50%) scale(0);
  background: var(--red);
  border-radius: 50%;
  transition: transform 0.2s var(--ease);
}
.lecteur-progression:hover .lecteur-fait::after,
.lecteur-progression:focus-visible .lecteur-fait::after { transform: translateY(-50%) scale(1); }


@media (max-width: 619px) {
  .lecteur-barre { gap: 0.55rem; padding: 0.55rem 0.6rem; }
  .lecteur-temps { font-size: 0.68rem; }
}


/* ---------- Écrans tactiles ----------

   LE DÉFAUT QU'ON CORRIGE. Sur iPhone, toucher un élément qui porte une règle
   :hover déclenche un survol simulé, le temps de l'appui. La barre
   apparaissait donc, puis se dissipait d'elle-même — le survol retombait, et
   la transition de 0,3 s achevait de l'effacer. Environ huit dixièmes de
   seconde en tout : juste assez pour la voir, jamais assez pour s'en servir.

   Ce n'était pas un réglage à ajuster : sur un écran sans souris, :hover ne
   veut rien dire. On pilote donc la barre explicitement depuis lecteur.js,
   par la classe .barre-visible, avec un délai tenable.

   (hover: none) plutôt qu'une largeur en pixels : une tablette ou un grand
   téléphone en paysage dépasse 620 px tout en restant tactile. C'est le mode
   de pointage qui compte, pas la taille de l'écran. */

@media (hover: none) {
  /* Neutralise le survol simulé — et le focus. Même spécificité que les
     règles d'origine, mais déclarées après : ce sont celles-ci qui l'emportent.
     :focus-within compte autant que :hover ici : au toucher, appuyer sur un
     bouton de la barre lui donne le focus, et la barre resterait alors
     affichée indéfiniment. Sur un écran tactile, c'est le minuteur de
     lecteur.js qui décide, personne d'autre. */
  .lecteur-cadre:hover .lecteur-barre,
  .lecteur-cadre:focus-within .lecteur-barre {
    opacity: 0;
    transform: translateY(100%);
  }

  /* Neutralise aussi la pause seule. Cette règle doit exister : celle du haut
     de fichier, `.lecteur-cadre.est-en-pause .lecteur-barre`, pèse (0,3,0) et
     passait donc au-dessus des deux sélecteurs ci-dessus, qui ne pèsent que
     (0,2,0). Même poids ici, mais déclarée plus bas : c'est celle-ci qui
     l'emporte. La règle suivante, plus lourde d'une classe, la rétablira pour
     le seul cas qui compte. */
  .lecteur-cadre.est-en-pause .lecteur-barre {
    opacity: 0;
    transform: translateY(100%);
  }

  /* Les deux seuls états qui montrent la barre au doigt.

     .a-demarre EST LA CORRECTION. Sans elle, la barre s'affichait dès le
     chargement : la vidéo est en pause tant qu'on ne l'a pas lancée, donc
     .est-en-pause était posée d'emblée, et la barre ne partait jamais. On
     voyait à la fois le gros bouton rouge au centre et la barre en bas, en
     permanence. Sur ordinateur c'est une affordance utile ; au doigt, c'est
     un doublon qui mange l'image.

     .a-demarre n'apparaît qu'au premier démarrage du film et repart à la fin.
     Une pause EN COURS de lecture rappelle donc la barre, comme il se doit —
     c'est le moment où l'on cherche une commande. Avant le premier appui, le
     bouton rouge suffit. */
  .lecteur-cadre.a-demarre.est-en-pause .lecteur-barre,
  .lecteur-cadre.barre-visible .lecteur-barre {
    opacity: 1;
    transform: translateY(0);
  }

  /* Cibles au doigt, pas au curseur. */
  .lecteur-barre button { padding: 0.45rem; }
  .lecteur-barre button svg { width: 22px; height: 22px; }
  .lecteur-progression { height: 30px; }
  .lecteur-piste { height: 4px; }
  /* Le point de tête ne dépend plus du survol : il guide le pouce. */
  .lecteur-fait::after { transform: translateY(-50%) scale(1); width: 14px; height: 14px; right: -7px; }
}