/* Scénographie des pages Terrae — MOTEUR COMMUN (Claude, 02/10/2026 ; v2 le même jour). Grammaire partagée par toutes les pages :
   jetons de rythme et de courbe, états des révélations (attente → joue → fait), lignes de texte, filets, plans,
   voile, porte, mode calme. Les partitions de page (scenographie-<page>.css) n'ajoutent que leurs propres plans.
   Rien ici ne touche une carte d'archive : ni filter, ni mix-blend-mode, ni voile teinté sur elles ou leurs parents.
   Les états cachés n'existent qu'en mode « plein » (html[data-sc-mode="plein"]) : en mouvement réduit, en contraste
   renforcé ou si le moteur ne démarre pas, la page reste exactement composée, immobile et complète. */

:root {
  /* Durées : silence, souffle, révélation, respiration (0,8 à 2,4 s) */
  --sc-silence: 280ms;
  --sc-souffle: 800ms;
  --sc-revelation: 1250ms;
  --sc-respiration: 2400ms;
  --sc-pas-ligne: 115ms;
  /* Courbes douces : la révélation ralentit longuement à l'arrivée ; le voile flotte ; la porte accélère puis glisse. */
  --sc-courbe: cubic-bezier(.22, .72, .18, 1);
  --sc-courbe-lente: cubic-bezier(.16, .84, .24, 1);
  --sc-courbe-voile: cubic-bezier(.45, .05, .25, 1);
  --sc-courbe-porte: cubic-bezier(.7, 0, .2, 1);
  /* Matières. Ors : sRGB ici, display-p3 plus bas pour les écrans qui le savent (aux seuls endroits où l'or apparaît). */
  --sc-or: #c9a46a;
  --sc-or-pale: #e4cf9e;
  --sc-or-vif: #d8ad5f;
  --sc-or-sombre: #8d6a35;
  --sc-encre: var(--tc-ink, #06100c);
  --sc-papier: var(--tc-paper, #f4f0e8);
}

/* ── v2 · Ors en display-p3 (repli sRGB ci-dessus) ─────────────────────────────────────────────────────────────── */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --sc-or: color(display-p3 .776 .64 .43);
      --sc-or-pale: color(display-p3 .9 .82 .64);
      --sc-or-vif: color(display-p3 .89 .68 .33);
      --sc-or-sombre: color(display-p3 .55 .42 .22);
    }
  }
}

/* ── v2 · Propriétés animées typées (@property) : le navigateur les interpole (CSS, Web Animations, défilement natif) ── */
@property --sc-p { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --sc-c { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sc-m { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --sc-axe { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sc-reflet { syntax: "<number>"; inherits: true; initial-value: .5; }

/* ── v2 · La couche GPU : UN canvas fixe, transparent aux clics, caché hors des transitions ─────────────────────────
   Plan 16 : au-dessus des actes (les sections sont des contextes d'empilement de rang 0), sous l'éclat de la météo (18),
   les bandes de cinéma (40), le rail (110), l'en-tête et les curseurs. Un élément du DOM peut passer AU-DESSUS du canvas
   (plan 17) : la matière est alors « entre les plans » (la dalle sous la date, le texte au-dessus). */
.sc-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 16; pointer-events: none; display: block; contain: strict; }
.sc-gl[hidden] { display: none; }

/* ── v2 · Révélation par masque, liée au défilement natif (animation-timeline: view()) ──────────────────────────────
   [data-sc-masque] : un bord de lumière découvre la ligne de gauche à droite pendant que le plan entre dans l'écran ;
   le même fil anime l'axe de la police (--sc-axe, 0 → 1), que la partition traduit en graisse. Repli (sans défilement
   natif) : la régie joue le même geste dans le temps (data-sc-etat). */
html[data-sc-mode="plein"] [data-sc-masque] {
  -webkit-mask-image: linear-gradient(100deg, #000 0 calc(var(--sc-m) * 130% - 30%), transparent calc(var(--sc-m) * 130%));
          mask-image: linear-gradient(100deg, #000 0 calc(var(--sc-m) * 130% - 30%), transparent calc(var(--sc-m) * 130%));
}
@supports (animation-timeline: view()) {
  html[data-sc-mode="plein"][data-sc-defilement="natif"] [data-sc-masque] {
    animation: sc-masque linear both; animation-timeline: view(); animation-range: entry 35% cover 42%;
  }
}
html[data-sc-mode="plein"]:not([data-sc-defilement="natif"]) [data-sc-masque][data-sc-etat="attente"] { --sc-m: 0; --sc-axe: 0; }
html[data-sc-mode="plein"]:not([data-sc-defilement="natif"]) [data-sc-masque][data-sc-etat="joue"] { transition: --sc-m 1.8s var(--sc-courbe-lente), --sc-axe 2.1s var(--sc-courbe); }
html[data-sc-mode="plein"] [data-sc-masque][data-sc-etat="fait"] { -webkit-mask-image: none; mask-image: none; }
@keyframes sc-masque { from { --sc-m: 0; --sc-axe: 0; } to { --sc-m: 1; --sc-axe: 1; } }

/* ── Révélations ─────────────────────────────────────────────────────────────────────────────────────────────────
   attente : position de départ ; joue : transition vers l'état naturel ; fait : état naturel (aucune propriété). */
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="fondu"] { opacity: 0; }
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="monte"] { opacity: 0; transform: translate3d(0, 28px, 0); }
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="plan"] { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); }
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="sceau"] { opacity: 0; transform: scale(1.08); }
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="trace"] { clip-path: inset(0 100% 0 0); }
html[data-sc-mode="plein"] [data-sc-etat="joue"]:is([data-sc-revele="fondu"], [data-sc-revele="monte"], [data-sc-revele="plan"], [data-sc-revele="sceau"]) {
  transition: opacity calc(var(--sc-revelation) * var(--sc-presse, 1)) var(--sc-courbe),
              transform calc(var(--sc-revelation) * 1.15 * var(--sc-presse, 1)) var(--sc-courbe-lente);
}
html[data-sc-mode="plein"] [data-sc-etat="joue"][data-sc-revele="trace"] {
  transition: clip-path calc(var(--sc-revelation) * 1.2 * var(--sc-presse, 1)) var(--sc-courbe-lente);
  clip-path: inset(0 0 0 0);
}

/* Registre : une ligne de registre s'écrit de gauche à droite (filet et texte), puis la suivante. */
html[data-sc-mode="plein"] [data-sc-etat="attente"][data-sc-revele="registre"] { opacity: 0; clip-path: inset(0 100% 0 0); }
html[data-sc-mode="plein"] [data-sc-etat="joue"][data-sc-revele="registre"] {
  transition: opacity calc(var(--sc-revelation) * .8 * var(--sc-presse, 1)) var(--sc-courbe),
              clip-path calc(var(--sc-revelation) * 1.3 * var(--sc-presse, 1)) var(--sc-courbe-lente);
}

/* Lignes : chaque mot porte l'indice de sa ligne (--sc-i) ; une ligne monte après l'autre, d'un souffle. */
.sc-mot { display: inline-block; }
[data-sc-plat] .sc-mot { display: inline; }
html[data-sc-mode="plein"] [data-sc-revele="lignes"][data-sc-etat="attente"] .sc-mot { opacity: 0; transform: translate3d(0, .62em, 0); }
html[data-sc-mode="plein"] [data-sc-revele="lignes"][data-sc-etat="joue"] .sc-mot {
  transition: opacity calc(var(--sc-revelation) * .9 * var(--sc-presse, 1)) var(--sc-courbe) calc(var(--sc-i, 0) * var(--sc-pas-ligne) * var(--sc-presse, 1)),
              transform calc(var(--sc-revelation) * var(--sc-presse, 1)) var(--sc-courbe-lente) calc(var(--sc-i, 0) * var(--sc-pas-ligne) * var(--sc-presse, 1));
}

/* ── Le voile (matière Voile) : organza réel, couche décorative sans clic ni lecture ─────────────────────────────── */
.sc-voile { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; contain: layout paint; }
.sc-voile video, .sc-voile img { position: absolute; inset: -6% -4%; width: 108%; height: 112%; object-fit: cover; display: block; }

/* ── L'écran : commande de la Maison à la place du lecteur natif (vidéos des pages) ───────────────────────────────── */
.sc-ecran-commande {
  align-self: end; justify-self: end;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 46px; padding: 0 22px 0 18px; margin: 0;
  border: 1px solid rgba(244, 240, 232, .32); border-radius: 0; background: transparent; color: var(--tf-ivory, var(--tc-paper, #f4f0e8));
  font: 400 11px/1 var(--tc-sans, sans-serif); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: border-color .5s var(--sc-courbe), background-color .5s var(--sc-courbe);
}
.sc-ecran-commande:hover { border-color: var(--sc-or); background-color: rgba(201, 164, 106, .08); }
.sc-ecran-commande:focus-visible { outline: 2px solid var(--tf-orange, #f37021); outline-offset: 4px; }
.sc-ecran-signe { position: relative; width: 10px; height: 12px; flex: none; }
.sc-ecran-commande:is([data-etat="lire"], [data-etat="reprendre"], [data-etat="revoir"]) .sc-ecran-signe::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sc-ecran-commande[data-etat="suspendre"] .sc-ecran-signe::before,
.sc-ecran-commande[data-etat="suspendre"] .sc-ecran-signe::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.sc-ecran-commande[data-etat="suspendre"] .sc-ecran-signe::before { left: 1px; }
.sc-ecran-commande[data-etat="suspendre"] .sc-ecran-signe::after { right: 1px; }
video[data-sc-ecran] { cursor: pointer; }
@media (max-width: 760px) { .sc-ecran-commande { justify-self: start; } }

/* ── Ce que la scénographie retire ou neutralise sur toutes ses pages (consignes du propriétaire, 02/10) ─────────────
   1. Le balayage « rayons X » (scanner.mjs) met l'écran en négatif, cartes comprises : masqué (le module n'est pas touché).
   2. Aucun filtre ni mélange sur une carte ou sur son parent : ombre portée de l'ouverture (drop-shadow), lumière rasante
      et reflets en soft-light posés sur les planches, écho de carte sépia, fragments de notes grisés. Les ombres restent
      celles des feuilles (box-shadow).
   3. L'arche blanche en 3D des galeries (même objet sur quatre pages) : retirée. */
.tc-xray { display: none !important; }
body .tc-scene > :is(.pe-opening, .ip-opening) { filter: none !important; }
body :is(.pe-art, .ip-arch) > .es-raking-light { display: none !important; }
body .va-mount .tc-cp-reflet { display: none !important; }
body .tc-material-echo::before { display: none !important; }
body .tc-note-fragment img { filter: none !important; }
body .iv-gallery .iv-volume { display: none !important; }
/* Verrou de l'invitation (invitation-maison.mjs lit [data-invitation-block]) : présent, invisible, inerte. */
.sc-verrou-invitation { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── La porte (épilogue) : le travelling de départ ──────────────────────────────────────────────────────────────── */
html.sc-porte, html.sc-porte body { cursor: progress; }

/* ── Mode calme (mouvement réduit, contraste renforcé) : composition complète, immobile ─────────────────────────── */
html[data-sc-mode="calme"] .sc-voile { display: none !important; }
html[data-sc-mode="calme"] .sc-gl { display: none !important; }
html[data-sc-mode="calme"] [data-sc-masque] { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
html[data-sc-mode="calme"] [data-sc-camera] { --sc-p: .5 !important; --sc-c: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .sc-voile, .sc-gl { display: none !important; }
  [data-sc-masque] { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
  [data-sc-etat] { transition: none !important; }
}
@media (forced-colors: active) {
  .sc-voile, .sc-gl { display: none !important; }
}