/* Scénographie — PARTITION de « La Maison » (Claude, 02/10/2026 ; v2 le même jour). Moteur commun : scenographie.css.
   v2 : couche GPU (scenographie-gl.mjs) pour le voile, la pierre et le papier ; défilement natif (view(), @property) pour
   la porte et l'ancre ; axes de police (Terrae Times, Bodoni Moda) ; ors display-p3. Sans GPU : la v1, intacte.
   Prologue (le voile se lève sur la planche de Florence), acte I (la Maison, l'écran du film), acte II (l'ancre des
   planches), acte III (l'or de 1948), épilogue (la porte). Aucune carte n'est filtrée, fondue ni teintée : la planche
   est seulement découpée (clip-path) puis découverte sous un voile qui se retire ; elle garde ses couleurs. */

/* ── PROLOGUE · avant le moteur : la planche attend sous sa découpe, le chapeau et l'appel attendent ──────────────────
   Secours sans JavaScript : tout réapparaît de lui-même à 3,6 s (animation à pas). Arrivée directe seulement : une
   arrivée par la porte d'une autre page (raccords-maison, « arrivee ») garde son propre geste. */
@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (forced-colors: none) {
  html[data-tc-raccord="direct"]:not(.sc-moteur) body.page-la-maison .ed-house-hero .pe-sheet { animation: sc-secours-plaque 3.6s step-end both; }
  html[data-tc-raccord="direct"]:not(.sc-moteur) body.page-la-maison .ed-house-hero :is(.ed-lead, .pe-discover, .pe-opening figcaption) { animation: sc-secours-texte 3.6s step-end both; }
  html.sc-moteur[data-sc-prologue="attente"] body.page-la-maison .ed-house-hero .pe-sheet { clip-path: inset(0 0 100% 0); }
  html.sc-moteur:is([data-sc-prologue="attente"], [data-sc-prologue="voile"], [data-sc-prologue="leve"]) body.page-la-maison .ed-house-hero :is(.ed-lead, .pe-discover, .pe-opening figcaption):not([data-sc-revele]) { opacity: 0; }
}
@keyframes sc-secours-plaque { from { clip-path: inset(0 0 100% 0); } to { clip-path: none; } }
@keyframes sc-secours-texte { from { opacity: 0; } to { opacity: 1; } }

/* Le voile d’organza (réel) posé sur la planche : toute l’emprise de .pe-art (la carte et la bande des façades). */
body.page-la-maison .ed-house-hero .sc-voile-plaque {
  inset: 0; z-index: 6; background: #0a1a15;
  -webkit-mask-image: linear-gradient(to top, transparent 0 40%, #000 60% 100%);
          mask-image: linear-gradient(to top, transparent 0 40%, #000 60% 100%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .06);
}
body.page-la-maison .ed-house-hero .sc-voile-plaque img { opacity: .94; }
body.page-la-maison .ed-house-hero .sc-voile-plaque video { opacity: 0; transition: opacity .9s ease; }
body.page-la-maison .ed-house-hero .sc-voile-plaque.sc-voile-vivant video { opacity: 1; }
/* Le voile se lève : son bord doux monte du pied au sommet de la planche ; il s'élève en même temps (2,4 s). */
html[data-sc-prologue="leve"] body.page-la-maison .ed-house-hero .sc-voile-plaque {
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transform: translate3d(0, -7%, 0);
  transition: -webkit-mask-position 2.4s var(--sc-courbe-voile), mask-position 2.4s var(--sc-courbe-voile), transform 2.7s var(--sc-courbe-voile);
}
/* La planche se pose : un léger recul de la caméra pendant que le voile se retire (la feuille, jamais l'image). */
html.sc-moteur[data-sc-prologue="voile"] body.page-la-maison .ed-house-hero .pe-sheet { transform: scale(1.045); transform-origin: 50% 42%; }
html.sc-moteur[data-sc-prologue="leve"] body.page-la-maison .ed-house-hero .pe-sheet { transform: none; transform-origin: 50% 42%; transition: transform 3.4s var(--sc-courbe-lente); }

/* ── ACTE I · L'écran du film : la commande commune (scenographie.css, .sc-ecran-commande) prend la légende ─────────── */

/* ── ACTE II · L'année de la planche, gravée en ancre dans le fond du cabinet ──────────────────────────────────────── */
body.page-la-maison .va-cabinet[data-sc-ancre] { isolation: isolate; }
body.page-la-maison .sc-ancre { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-Roman-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
body.page-la-maison .sc-ancre-date {
  position: sticky; top: 16vh; display: block; width: max-content; margin: 0 0 0 auto; padding: 0 var(--tc-gutter, 5vw) 0 0;
  font: 400 clamp(118px, 21vw, 340px)/.82 "Bodoni Moda", var(--tc-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums;
  /* v2 : l'axe de graisse de Bodoni Moda grave la date (400 → 570) ; il retombe puis remonte au changement de planche. */
  --sc-axe: 1; font-variation-settings: "wght" calc(400 + 170 * var(--sc-axe));
  color: transparent; -webkit-text-stroke: 1px rgba(7, 30, 24, .14);
  background: linear-gradient(100deg, transparent 0 41%, color-mix(in srgb, var(--sc-or) 55%, transparent) 50%, transparent 59% 100%) no-repeat;
  background-size: 280% 100%; background-position: 125% 0;
  -webkit-background-clip: text; background-clip: text;
  translate: 0 calc((var(--sc-p, .5) - .5) * -10vh);
  user-select: none;
}
html[data-sc-mode="plein"] body.page-la-maison .sc-ancre-date[data-sc-etat="attente"] { opacity: 0; --sc-axe: 0; }
html[data-sc-mode="plein"] body.page-la-maison .sc-ancre-date[data-sc-etat="joue"] {
  transition: opacity 1.6s var(--sc-courbe), --sc-axe 2.8s var(--sc-courbe-lente);
  animation: sc-or-passe 3s var(--sc-courbe) .35s both;
}
@keyframes sc-or-passe { from { background-position: 125% 0; } to { background-position: -25% 0; } }

/* ── ACTE III · 1948 : l'or court dans la date (pseudo-élément ; nom accessible vide) ──────────────────────────────── */
body.page-la-maison .ed-origin .ed-date[data-sc-or] { position: relative; }
body.page-la-maison .ed-origin .ed-date[data-sc-or]::after {
  content: attr(data-sc-or) / "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; -webkit-text-stroke: 0;
  /* Une bande de lumière étroite (150 px) qui court dans les chiffres, de gauche à droite : l'or se pose dans la gravure. */
  background: linear-gradient(100deg, transparent 0 22%, color-mix(in srgb, var(--sc-or-pale) 95%, transparent) 50%, transparent 78% 100%) no-repeat;
  background-size: 150px 100%; background-position: -170px 0;
  -webkit-background-clip: text; background-clip: text;
}
html[data-sc-mode="plein"] body.page-la-maison .ed-origin .ed-date[data-sc-or-etat="joue"]::after { animation: sc-or-1948 2.6s var(--sc-courbe-voile) both; }
@keyframes sc-or-1948 { 0% { opacity: 0; background-position: -170px 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; background-position: calc(100% + 170px) 0; } }

/* ── ÉPILOGUE · La porte : travelling avant, le voile monte, puis la page suivante ─────────────────────────────────── */
html.sc-porte body.page-la-maison .ed-next { transform: scale(1.07); transform-origin: 50% 58%; transition: transform 1.15s var(--sc-courbe-porte); }
body.page-la-maison .sc-voile-porte {
  position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; background: #07130f;
  transform: translate3d(0, 100%, 0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}
body.page-la-maison .sc-voile-porte img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .9; }
body.page-la-maison .sc-voile-porte.sc-monte { transform: translate3d(0, 0, 0); transition: transform 1.15s var(--sc-courbe-voile); }

/* La porte s'ouvre sur LES TERRES : la Champagne se coud à la Toscane, de la droite vers le centre (--sc-c). */
body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-porte-terre {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  clip-path: inset(0 0 0 calc(100% - 50% * var(--sc-c, 1)));
}
body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-porte-terre img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
/* La couture : un calque pleine largeur déplacé par transform (aucun décalage de mise en page), filet à son bord gauche. */
body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-couture {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(calc((1 - .5 * var(--sc-c, 1)) * 100%), 0, 0);
  opacity: calc(.35 + .65 * var(--sc-c, 1));
}
body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-couture::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: linear-gradient(to bottom, transparent 0, rgba(255, 244, 222, .8) 22%, rgba(255, 244, 222, .8) 78%, transparent 100%);
  box-shadow: 0 0 22px 3px rgba(255, 232, 190, .28);
}
html.sc-porte body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-couture { opacity: 1; transition: opacity .9s var(--sc-courbe); }
html.sc-porte body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-couture::before { box-shadow: 0 0 40px 8px rgba(255, 232, 190, .45); transition: box-shadow .9s var(--sc-courbe); }

/* Cartes sans filtre (consigne du propriétaire) : la frise des façades de l'origine garde ses couleurs et sa pleine encre. */
body.pz-atelier.page-la-maison:not(#pz) .ed-origin::before { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; }

/* ── v2 · ACTE III · La dalle de 1948 (couche GPU sous la date ; la date et sa légende au-dessus du canvas) ───────────
   Le canvas (plan 16) peint le marbre dans le colophon ; la date, la légende et le cadre de cuivre passent au plan 17 :
   la matière est « entre les plans ». La date réelle reste dans le DOM (lue, sélectionnable), transparente : ce que l'on
   voit est son double doré (::after, nom accessible vide), dont la graisse et le reflet suivent la lumière de la pierre. */
body.page-la-maison .ed-colophon[data-sc-pierre] > * { position: relative; z-index: 17; }
body.page-la-maison .ed-colophon[data-sc-pierre]::before { z-index: 17; }
body.page-la-maison .ed-colophon[data-sc-pierre] .ed-date { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
body.page-la-maison .ed-colophon[data-sc-pierre] .ed-date[data-sc-or]::after {
  opacity: calc(.4 + .6 * var(--sc-eclat, 0)); animation: none;
  font-variation-settings: "wght" calc(200 + 100 * var(--sc-eclat, 0));
  background: linear-gradient(100deg, var(--sc-or-sombre) 0%, var(--sc-or) 28%, var(--sc-or-pale) 45%, #fff6df 50%, var(--sc-or-pale) 55%, var(--sc-or) 72%, var(--sc-or-sombre) 100%) no-repeat;
  background-size: 320% 100%; background-position: calc((1 - var(--sc-reflet, .5)) * 100%) 0;
  -webkit-background-clip: text; background-clip: text;
}
/* La légende passe du papier à la pierre : la couleur de la feuille de la page perdrait sa lecture sur le marbre. */
body.page-la-maison .ed-colophon[data-sc-pierre] .ed-caption { color: color-mix(in srgb, var(--sc-or-pale) 40%, rgba(244, 240, 232, .55)) !important; transition: color 1.8s var(--sc-courbe); }
body.page-la-maison .ed-colophon[data-sc-pierre="allumee"] .ed-caption { color: color-mix(in srgb, var(--sc-or-pale) 72%, rgba(244, 240, 232, .92)) !important; }

/* ── v2 · Titres hors lettres.mjs : l'axe de graisse suit le masque (--sc-axe, 0 → 1 ; 1 = graisse publiée) ───────── */
body.page-la-maison #iv-title[data-sc-masque] { --sc-axe: 1; font-variation-settings: "wght" calc(330 + 70 * var(--sc-axe)); }
body.page-la-maison #tf-film-title[data-sc-masque] { --sc-axe: 1; font-variation-settings: "wght" calc(230 + 70 * var(--sc-axe)); }

/* ── v2 · Défilement natif : la porte et l'ancre suivent le défilement sur le fil du compositeur ───────────────────── */
@supports (animation-timeline: view()) {
  html[data-sc-mode="plein"][data-sc-defilement="natif"] body.page-la-maison .ed-next[data-sc-porte="terres"] { animation: sc-porte-couture linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  html[data-sc-mode="plein"][data-sc-defilement="natif"] body.page-la-maison .va-cabinet[data-sc-ancre] { animation: sc-traversee linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes sc-porte-couture { from { --sc-c: 0; } to { --sc-c: 1; } }
@keyframes sc-traversee { from { --sc-p: 0; } to { --sc-p: 1; } }
/* La couture de lumière de la porte : un filet d'or pâle (display-p3 quand l'écran le sait). */
body.page-la-maison .ed-next[data-sc-porte="terres"] .sc-couture::before { background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--sc-or-pale) 55%, #fff4de) 22%, color-mix(in srgb, var(--sc-or-pale) 55%, #fff4de) 78%, transparent 100%); }

/* ── Mode calme : rien de caché, rien qui bouge ─────────────────────────────────────────────────────────────────── */
html[data-sc-mode="calme"] body.page-la-maison .sc-voile-plaque { display: none !important; }
html[data-sc-mode="calme"] body.page-la-maison .sc-ancre-date { --sc-axe: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-la-maison .sc-ancre-date { translate: none; }
  html.sc-porte body.page-la-maison .ed-next { transform: none; }
  body.page-la-maison .sc-voile-porte { display: none; }
}