/* =====================================================================
   sequence.css — LE CHÂSSIS GÉNÉRIQUE DU SÉQUENÇAGE (huit écrans).

   DEPUIS LA CORRECTION D'ARCHITECTURE (mandat sortir-les-ecrans-du-socle-
   puis-ecran-4-fenetre3-09092026) : cette feuille ne pose QUE ce qui est
   commun à TOUS les écrans, jamais une règle propre à UN seul. Une règle
   ici est une règle que quatre fenêtres qui écrivent leurs écrans en
   parallèle risqueraient de vouloir modifier en même temps — le style
   PROPRE à un écran (son fondu, sa grille, ses couleurs) vit désormais
   DANS le fichier de cet écran (une balise <style> qu'il injecte
   lui-même dans son hôte), jamais ici. Les classes utilitaires génériques
   ci-dessous (`.ecran-surtitre`, `.ecran-titre`, `.ecran-objet`,
   `.ecran-cta`) restent partagées : elles n'ont pas de contenu propre à un
   écran, seulement une mise en forme commune, réutilisable par tous.

   LE DÉFAUT DÉTRUIT ICI, MOT POUR MOT DE CÉDRIC : « on arrête de cumuler
   les apparitions sur la même page, ça fait vraiment merdique ». Un seul
   `.ecran` n'a jamais `hidden` en même temps qu'un autre — c'est
   sequence.js qui l'impose, cette feuille ne fait que dessiner l'écran qui
   reste.

   AUCUNE COULEUR NOUVELLE. Mêmes jetons que demo.css et index.html (charte
   sombre, --or:#EAB939 — pas #d9ad5c, voir la mémoire dédiée). */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(80vw 70vh at 12% 0%, rgba(95,47,138,.18), transparent 68%),
    radial-gradient(70vw 60vh at 100% 100%, rgba(234,185,57,.08), transparent 68%),
    var(--mrs-encre, #1A1A1A);
  color: var(--mrs-creme, #F4F1E0);
  font-family: var(--mrs-police, 'Atkinson Hyperlegible', system-ui, sans-serif);
  line-height: 1.5;
  overflow: hidden; /* LA PAGE NE S'ALLONGE PLUS — c'est exactement le défaut détruit */
}

/* ── LE CHÂSSIS : UNE FENÊTRE, PAS UNE PAGE ─────────────────────────────
   `100dvh` pour la hauteur RÉELLEMENT utile sur téléphone (barres d'adresse
   qui vont et viennent) ; `100vh` en repli pour les moteurs qui ne
   connaissent pas encore l'unité dynamique. */
.chassis {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* ── LES HUIT EMPLACEMENTS ───────────────────────────────────────────────
   Empilés en `position:absolute`, jamais dans le flux : un écran masqué
   n'ajoute aucune hauteur, il n'existe pas pour la mise en page. Un seul
   perd `[hidden]` à la fois (sequence.js), donc un seul est réellement là.
   Chaque `.ecran` est vide au chargement de la page : sequence.js y monte
   un `.ecran-hote` (vide lui aussi) que le fichier de cet écran remplit —
   voir le contrat en tête de sequence.js. */
.ecran {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    max(clamp(9px, 1.5vw, 20px), env(safe-area-inset-top))
    clamp(9px, 1.5vw, 20px)
    max(32px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.ecran-hote {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(18px, 2.4vw, 32px);
  outline: 1px solid rgba(234,185,57,.16);
  box-shadow:
    0 24px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(244,241,224,.06);
}

.ecran-hote::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(244,241,224,.035);
}

@media (max-width: 600px) {
  .ecran-hote { border-radius: 20px; }
}

/* La conclusion est volontairement plein cadre : le fond intégré à la vidéo
   doit se prolonger jusqu'aux bords, sans deuxième plaque ni contour du socle. */
.ecran[data-ecran="7"] {
  padding: 0;
  background: #0E0C14;
}
.ecran[data-ecran="7"] .ecran-hote {
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}
.ecran[data-ecran="7"] .ecran-hote::after { display: none; }

/* Sophie reprend exactement la teinte de ses clips sur mobile. Le léger
   recadrage interne masque les traits techniques aux bords de la source. */
@media (max-width: 600px) {
  .ecran[data-ecran="4"],
  .ecran[data-ecran="4"] .ecran-hote {
    background: #17131D;
  }
}

/* ── L'OBJET CENTRAL — LE POINT D'ANCRAGE DE LA TRANSFORMATION ──────────
   Chaque écran DÉSIGNE éventuellement son objet central via
   [data-objet-central], quelque part dans ce qu'il construit ; à défaut,
   sequence.js utilise son `.ecran-hote` lui-même (voir objetCentral() dans
   sequence.js). Ce n'est pas un habillage : c'est ce que sequence.js nomme
   temporairement (même `view-transition-name`) pendant la bascule, pour
   que le navigateur le morphe visuellement en l'objet central de l'écran
   suivant, au lieu de faire disparaître l'un et apparaître l'autre. Zone
   flexible : elle prend ce qui reste une fois l'en-tête et l'action posés
   — utilitaire optionnel, un écran peut aussi construire sa propre mise en
   page sans cette classe. */
.ecran-objet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecran-surtitre {
  margin: 0 0 4px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or, #EAB939);
}

.ecran-titre {
  margin: 0 0 12px;
  font-family: var(--mrs-police-titre, 'Playfair Display', serif);
  font-size: 1.5rem;
  line-height: 1.25;
}

/* ── UN SEUL CTA VISIBLE À LA FOIS ────────────────────────────────────────
   Un écran ne porte jamais plus d'UN bouton d'action dans `.ecran-cta` —
   ce n'est pas seulement une convention CSS, sequence.js le vérifie à
   l'exécution (verifierUnSeulCta), en DOM léger uniquement (voir le
   contrat en tête de sequence.js). */
.ecran-cta {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.ecran-cta > * { margin: 0; }

/* ── LA TRANSFORMATION, PAS LE DIAPORAMA ─────────────────────────────────
   Rien ici ne pose de fondu par défaut : c'est
   ::view-transition-old/new(mr-objet-central) qui prend le relais dès que
   sequence.js pose le nom (voir sequence.js, demarrerTransition()). Ce
   bloc reste un RENFORT visuel discret, jamais une condition de
   fonctionnement — la bascule marche identiquement sans lui sur un moteur
   sans l'API. */
/* Le calque de capture de l'API View Transitions ne doit jamais avaler un
   tap rapide sur le nouvel écran. Le DOM entrant reste donc interactif
   pendant toute la transformation, notamment le bouton du poireau. */
::view-transition {
  pointer-events: none;
}

::view-transition-group(mr-objet-central) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Ancien raccord Sophie → rayons X, conservé uniquement comme repli pour
   les variantes historiques. La séquence actuelle utilise le fondu croisé
   Sophie → température de cuisson piloté directement par sequence.js. */
/* Sophie → rayons X : les deux écrans restent superposés pendant que
   le nouveau contenu est révélé de gauche à droite. Aucun visuel
   intermédiaire n'est ajouté : le mouvement ne fait que relier les deux
   contenus réels déjà présents. */
html[data-mr-transition="4-5"]::view-transition-group(mr-objet-central) {
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(.2,.72,.18,1);
}

html[data-mr-transition="4-5"]::view-transition-image-pair(mr-objet-central) {
  isolation: isolate;
  background: radial-gradient(circle at 50% 48%, rgba(95,47,138,.26), #1a1a1a 70%);
}

html[data-mr-transition="4-5"]::view-transition-old(mr-objet-central) {
  transform-origin: center;
  animation: mr-sophie-sortie 1100ms cubic-bezier(.2,.72,.18,1) both;
}

html[data-mr-transition="4-5"]::view-transition-new(mr-objet-central) {
  transform-origin: center;
  animation: mr-rayons-entree 1100ms cubic-bezier(.2,.72,.18,1) both;
}

@keyframes mr-sophie-sortie {
  0%, 20% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
  44% { opacity: .22; filter: brightness(.42) blur(5px); transform: scale(1.018); }
  52%, 100% { opacity: 0; filter: brightness(.28) blur(8px); transform: scale(1.026); }
}

@keyframes mr-rayons-entree {
  0%, 42% { opacity: 0; clip-path:circle(0% at 50% 48%); filter:brightness(.58) saturate(.7) drop-shadow(0 0 0 rgba(234,185,57,0)); transform:scale(1.026); }
  54% { opacity: .94; clip-path:circle(13% at 50% 48%); filter:brightness(.78) saturate(.84) drop-shadow(0 0 24px rgba(234,185,57,.42)); }
  78% { opacity: 1; clip-path:circle(68% at 50% 48%); filter:brightness(.96) saturate(.96) drop-shadow(0 0 12px rgba(234,185,57,.18)); }
  100% { opacity: 1; clip-path:circle(105% at 50% 48%); filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(234,185,57,0)); transform:scale(1); }
}

/* ── LE SON EST NOMINAL, LE MUET RESTE LISIBLE ───────────────────────────
   Rien dans cette feuille ne dépend du son : aucune information n'apparaît
   ou ne disparaît sur un signal audio. Utilitaire générique, réutilisable
   par tout écran qui porte une légende de ce type. */
.ecran-legende-son {
  font-size: .78rem;
  opacity: .72;
}

/* ── LE MOUVEMENT RÉDUIT EST RESPECTÉ, PAS CONTOURNÉ ─────────────────────
   sequence.js lit déjà prefers-reduced-motion pour couper la transformation
   elle-même (bascule nette) et le transmet à chaque écran via
   `options.reduit`. Cette règle coupe en plus toute micro-animation posée
   directement en CSS légère sur un écran (celles injectées en Shadow DOM
   doivent porter leur propre garde, cette règle ne les atteint pas). */
@media (prefers-reduced-motion: reduce) {
  .ecran * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}