/* ==========================================================================
   layers.css — vidéos plein écran « en couche », verrouillées à l'écran
   pendant que la section défile derrière/devant elles.

   Patron mesuré sur stanford.edu (audit-stanford/scroll-mechanics-v2.json,
   rm-video-8 et rm-video-10) : un ancêtre position:fixed maintient chaque
   vidéo plein écran le temps que la section défile, avant de la relâcher.
   Écarté à tort dans une passe précédente (vérifié sur un seul point
   elementFromPoint, au centre du viewport — insuffisant) : repris ici
   comme un effet réel à reproduire. Durée du plateau ajustée ensuite par
   retour direct (voir le commentaire sur .layer-section plus bas) : la
   mécanique reproduit celle de Stanford, pas la durée précise mesurée.

   Technique CSS pure (aucun JS ne pilote le positionnement) : clip-path
   sur .layer-section fait de cette boîte le référentiel de clip pour tout
   ce qu'elle contient, y compris un descendant position:fixed — la vidéo
   reste donc géométriquement fixe au viewport (son getBoundingClientRect
   reste `top: 0` en permanence, voir le rapport de vérification), mais
   n'est PEINTE que tant que la boîte de .layer-section recoupe le
   viewport. C'est ce recouvrement, pas la position déclarée, qui crée
   l'effet d'apparition/disparition en bord de section.

   Progressive enhancement, à l'image de .js .reveal (components.css) :
   sans JS, ou si layers.js désactive l'effet (clip-path non supporté, ou
   iOS — voir le commentaire dans layers.js), la vidéo reste un média de
   flux normal. Pleine largeur nativement : .layer-section est un enfant
   direct de <main>, sans .container, donc pas besoin de l'utilitaire
   .full-bleed (qui ne sert qu'à faire sortir un média de SON .container).
   ========================================================================== */

.layer-section {
  position: relative;
  background-color: var(--black);
}

.layer-section__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Effet activé — uniquement si .js ET .layer-fx sont posées sur <html>
   (voir layers.js : détection synchrone, avant peinture, pas de flash).
   -------------------------------------------------------------------------- */
.js.layer-fx .layer-section {
  /* Correction après retour utilisateur : la durée de plateau 2000-2600px
     mesurée chez Stanford (367vh, essayé d'abord) rendait la section trop
     longue à traverser — la vidéo doit occuper tout l'écran puis céder
     immédiatement la place à la section suivante, pas rester figée sur
     plusieurs écrans de scroll. hauteur = 100vh : la boîte de clip fait
     exactement un viewport, donc la couverture plein écran n'existe qu'à
     l'instant précis où le scroll aligne les deux — pas de palier, la
     vidéo sert de transition (« wipe ») d'un écran plein à l'autre plutôt
     que d'un long verrouillage. Voir le rapport pour la mesure. */
  height: 100vh;
  clip-path: inset(0);
}

.js.layer-fx .layer-section__video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}