/* SEQ-PORTE — l'arrivée au Palais, en haut de la page Salle.
   Tout ce qui concerne la séquence vit ici et dans seq-porte.js. Retirer les deux
   balises de la page et les deux fichiers suffit à revenir à l'état d'avant :
   aucune règle de site.css n'a été modifiée, seulement redéfinie depuis ici.

   Le plan : une section très haute, un panneau collant plein écran à l'intérieur,
   et dedans trois couches qui ne se recouvrent jamais par hasard —
     1. le canevas, dans son arche, sur le brun profond du site ;
     2. les mots, posés dessous ;
     3. la salle, découpée en arche par clip-path, qui s'ouvre et avale l'écran.
   La salle est au-dessus du reste : c'est elle qui « ouvre », donc c'est elle qui
   grandit, et rien n'a besoin de disparaître sous elle. */

.seq-porte {
  --emerald: #1d3b35;
  --seq-ar: 832 / 464;        /* la proportion du jeu chargé */
  --seq-k: 1.7931;            /* la même, en nombre, pour le calc */
  --seq-reserve: 260px;       /* place gardée : en-tête, mots, indication */
  --seq-top: 46%;
  --seq-h: 280vh;
  position: relative;
  height: var(--seq-h);
  background: var(--ink);
}

.seq-colle {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

/* La séquence n'est plus en haut de page : quand on l'atteint, on a forcément
   défilé, donc l'en-tête porte déjà son fond plein et se détache du brun. La
   règle qui la forçait à être pleine dès le premier pixel n'a plus d'objet —
   elle ne servait qu'à éviter du brun sur du brun à l'arrivée. */

/* Le cadre en arche. Sa largeur est bornée trois fois : par la source (960 px,
   au-delà on agrandit une vidéo de 832 px et ça se voit), par la largeur de la
   fenêtre, et par sa hauteur — sur un écran court, c'est la hauteur qui décide.
   Le poster est posé en fond : tant qu'aucune image n'est arrivée, le cadre
   montre déjà quelque chose, et il ne peut jamais être vide. */
.seq-cadre {
  position: absolute; left: 50%; top: var(--seq-top);
  transform: translate(-50%, -50%);
  /* Trois réglages en variables, parce que trois contextes les changent : la
     largeur de fenêtre choisit le recadrage, la hauteur de fenêtre choisit la
     réserve verticale, et le script confirme le jeu réellement chargé. */
  width: min(960px, 86vw, calc((100svh - var(--seq-reserve)) * var(--seq-k)));
  aspect-ratio: var(--seq-ar);
  border-radius: var(--arch);
  overflow: hidden;
  background: #16100E url(seq-porte_v1/poster.webp) center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--emerald), 0 40px 90px rgba(0, 0, 0, .45);
}
/* Le nom de passage est revenu à l'arche du hero, et il n'a plus à être retiré
   d'ici : depuis que la séquence est passée sous le hero, c'est l'arche du hero
   que la carte de l'accueil rejoint — c'est elle qui est à l'écran à l'arrivée.
   Le cadre de la séquence, lui, est à deux écrans plus bas ; l'y envoyer faisait
   voyager la photo vers un point invisible. */

.seq-toile { display: block; width: 100%; height: 100%; }

/* Les mots. Ils passent sous l'arche, jamais dessus : le texte blanc sur une image
   qui bouge n'a aucun contraste garanti, alors qu'ici il est sur le brun plein. */
.seq-mots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(74px, 13svh, 128px);
  width: min(520px, 86vw);
  margin: 0; display: grid; text-align: center;
  font: 400 var(--t-h5)/1.25 var(--f-display); letter-spacing: -.02em;
  color: var(--bg);
  pointer-events: none;
}
/* Les deux lignes sont écrites ici, en `content`, et non dans la page. Ce ne sont
   pas des informations — l'adresse est déjà dans le hero, en texte réel — mais de
   la matière qui accompagne l'image. Écrites dans le HTML, elles finissaient le
   défilement à `opacity: 0` et tout détecteur de « reveal mort » les comptait,
   à raison, comme du contenu devenu invisible. En pseudo-élément, il n'y a plus
   de contenu du tout : juste un décor qui s'éteint. */
.seq-mots .m1::before { content: "5 rue du Garet, " }
.seq-mots .m1::after { content: "Lyon 1er" }
.seq-mots .m2::before { content: "Poussez " }
.seq-mots .m2::after { content: "la porte" }
.seq-mots span::after { font-style: italic; color: var(--bg); opacity: .82 }
.seq-mots span { display: block; grid-area: 1 / 1; transition: opacity .35s linear }
.seq-mots .m1 { opacity: var(--o1, 1) }
.seq-mots .m2 { opacity: var(--o2, 0) }

/* L'indication de défilement : sans elle, un visiteur qui arrive sur une image
   fixe ne sait pas qu'il y a quelque chose à faire. */
.seq-indice {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(24px, 4svh, 44px);
  margin: 0; display: flex; align-items: center; gap: 10px;
  font: 400 var(--t-micro)/1 var(--f-body); letter-spacing: .04em;
  color: rgba(245, 237, 224, .72);
  opacity: var(--oi, 1); transition: opacity .3s linear;
  pointer-events: none;
}
.seq-indice svg { width: 11px; height: 16px; animation: seq-appel 2.4s var(--ease) infinite }
@keyframes seq-appel { 0%, 70%, 100% { transform: translateY(0); opacity: .55 } 35% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .seq-indice svg { animation: none } }

/* La salle, au-dessus de tout, découpée en arche. Par défaut la découpe est
   refermée sur elle-même : avant que le script ne parle, la photo n'occupe
   aucun pixel. Sans JS, la règle plus bas la rend pleine et la séquence
   devient une simple image en haut de page. */
.seq-salle {
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(50% 50% 50% 50% round 0);
  will-change: clip-path;
}
.seq-salle img { width: 100%; height: 100%; object-fit: cover; display: block }
.js .seq-salle { clip-path: inset(var(--ct, 50%) var(--cr, 50%) var(--cb, 50%) var(--cl, 50%) round var(--cra, 0px) var(--cra, 0px) 0 0) }

/* Repli : pas de JS, ou mouvement réduit. Pas de séquence du tout — la salle en
   haut de page, à hauteur d'écran, et le hero enchaîne dessous. */
@media (prefers-reduced-motion: reduce) {
  .seq-porte { height: auto }
  .seq-colle { position: static; height: 86svh }
  .seq-cadre, .seq-mots, .seq-indice { display: none }
  .js .seq-salle, .seq-salle { clip-path: none }
}
html:not(.js) .seq-porte { height: auto }
html:not(.js) .seq-colle { position: static; height: 86svh }
html:not(.js) .seq-cadre, html:not(.js) .seq-mots, html:not(.js) .seq-indice { display: none }
html:not(.js) .seq-salle { clip-path: none }

/* En portrait étroit, la vidéo est recadrée en 3/4 : l'arche reprend la proportion
   des autres arches du site, et l'image la remplit au lieu de flotter dans une bande.
   La condition d'orientation est la même que celle du script, au mot près : c'est ce
   qui garantit que le cadre dessiné avant l'exécution du JS est déjà le bon. */
@media (max-width: 759.98px) and (orientation: portrait) {
  .seq-porte { --seq-h: 240vh; --seq-ar: 348 / 464; --seq-k: .75; --seq-reserve: 196px; --seq-top: 43% }
  .seq-cadre { width: min(88vw, calc((100svh - var(--seq-reserve)) * var(--seq-k))) }
  .seq-mots { font-size: var(--t-base); bottom: clamp(62px, 11svh, 96px) }
}

/* Le jeu réellement chargé a le dernier mot sur la proportion du cadre. Le script
   choisit une fois pour toutes, à l'arrivée ; tourner le téléphone ensuite ne
   retélécharge rien, et sans cette ligne le cadre basculerait en 16/9 devant des
   images en 3/4 — l'image flotterait au milieu, bordée du poster. */
.seq-porte[data-jeu="desktop"] { --seq-ar: 832 / 464; --seq-k: 1.7931 }
.seq-porte[data-jeu="mobile"] { --seq-ar: 348 / 464; --seq-k: .75 }

/* Téléphone couché, ou fenêtre basse. La réserve verticale était taillée pour un
   écran debout : sur 390 px de haut elle ne laissait qu'un cadre de 233 px de large
   au milieu d'un écran de 844 — une vignette perdue dans du brun. Les mots et
   l'indication n'ont de toute façon plus la place, on leur reprend la leur. */
@media (max-height: 520px) {
  .seq-porte { --seq-reserve: 128px; --seq-top: 50% }
  .seq-cadre { width: min(960px, 86vw, calc((100svh - var(--seq-reserve)) * var(--seq-k))) }
  .seq-mots, .seq-indice { display: none }
}