/* ============================================================
   AUREA, parcours.css  (V7, reprise complete)
   Module « Le Parcours ». UN CANVAS PAR CHAPITRE, dans sa section de 300 vh,
   en position:sticky, plein cadre : aucune marge, aucun coin arrondi, aucune
   ombre, aucun canvas fixe partage, aucune bascule d'opacite/z-index.
   Le poster du chapitre est le fond CSS du conteneur : jamais de noir.
   Repli editorial (poster + texte, sans canvas) sous 1024 px et reduced-motion.
   Aucun fondu nulle part : revelation du texte par masque et translation seuls.

   REGLE DE TEXTE DES CHAPITRES (passe 7c) :
   par chapitre, SURTITRE, TITRE, CHAPEAU et UN PARAGRAPHE au plus. La colonne est
   CENTREE verticalement dans la partie visible de l'image (sous le header), a gauche
   ou a droite selon le chapitre, meme regle pour tous les chapitres des deux villas.
   Les tailles, interlignages et marges de texte sont ceux d'AVANT la passe 7b (le bloc
   « hauteur fixe + resserrement sur ecrans bas » de la 7b a ete retire en 7c : le texte
   etait devenu trop petit et trop haut). Doit tenir en entier a 1366x768 sous le header,
   sans passer sous la pastille de contact ni sous les elements de station (.ps-invite,
   .ps-continue). Le controle (point 6) ECHOUE si une ligne sort du cadre. Un texte
   deplace ou nouveau (la suite Terra) s'y plie.
   ============================================================ */

/* ---- Racine : fond Blanc coquille ----------------------------------------
   Rythme du parcours : vh de scroll par seconde de clip. 85 = rythme actuel.
   Monter pour ralentir (plus de scroll par clip), baisser pour accelerer. */
.parcours{ position:relative; background:var(--blanc); --parcours-rythme:85vh; --parcours-rythme-compo:57vh; }
/* Passe 13 (point 1a) : RYTHME des CHAPITRES COMPOSITES (enchainements d'un seul mouvement),
   en vh de scroll par seconde de footage (speed 1). Cale sur le composite approuve de la
   passe 11 (piscine -> Klein, ~57 vh/s) pour une allure identique. La hauteur d'un composite
   est calculee par parcours-scroll.js (somme des durees x ce rythme + tenues) et posee en
   style inline : aucune hauteur de composite ecrite en dur dans le HTML. speed 0.8 (Solstice)
   -> 1/0.8 = +25 % de scroll. */

/* ---- Chapitre : hauteur pilotee par --chap-dur (duree du master, en secondes,
   lue dans manifest.json et ecrite sur chaque section). height = duree x rythme,
   bornee [280vh, 480vh]. La section suivante recouvre en defilant. Repli 5 s si
   la variable est absente. (Avant : 60 vh/s, bornes [200,340].) */
.parcours-chap{
  position:relative;
  height:calc(clamp(280vh, calc(var(--chap-dur, 5) * var(--parcours-rythme)), 480vh) + var(--hold-extra, 0vh));
  background:var(--blanc);
}
/* Passe 7c (point 3) : les chapitres a station (data-station) gagnent 220vh (au lieu
   de 140vh) pour que la derniere image soit TENUE sur exactement 220vh de scroll, le
   temps d'ouvrir PLUSIEURS pieces. L'ordre est pilote en pixels dans parcours-scroll.js :
   le texte s'efface AVANT le debut de la tenue (holdStartNow), puis l'image s'arrete, puis
   les points et l'invite apparaissent ~10vh plus tard ; la jauge et « Continuer » suivent
   ces 220vh. Desktop + mouvement uniquement (repli mobile/reduced : height auto). */
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .parcours-chap[data-station]{
    height:calc(clamp(280vh, calc(var(--chap-dur, 5) * var(--parcours-rythme)), 480vh) + 220vh);
  }
}
/* Passe 12 (point 1e) : RAMPES courtes de Casa Solstice (P2, P3 et leurs inverses,
   2,6 a 2,8 s). Leur hauteur bornee a 280vh minimum ferait defiler leurs secondes a
   vitesse normale PLUS LENTEMENT que la camera des chapitres voisins (environ 85vh/s).
   Cette classe retire le plancher de 280vh pour elles SEULES : hauteur = duree x rythme
   (+ leur tenue), donc la rampe passe d'un trait et les secondes normales defilent au
   meme rythme que les voisins. Ordinateur + mouvement uniquement ; les autres chapitres,
   dont les chapitres a station, ne sont pas touches (specificite [data-station] superieure). */
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .parcours-chap--rampe{
    height:calc(calc(var(--chap-dur, 5) * var(--parcours-rythme)) + var(--hold-extra, 0vh));
  }
}

/* Fenetre collee : canvas plein cadre + poster en fond CSS (garde-fou anti-noir
   et repli sans JS). Aucune marge, aucun coin, aucune ombre. */
.parcours-sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  width:100%;
  overflow:hidden;
  background-color:var(--blanc);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;             /* poster (inline style) en fond, sous le canvas */
}
.parcours-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* Calque station (crochet prompt 3) : par-dessus le canvas, meme cadrage cover.
   Vide et inerte aujourd'hui, inactif tant qu'il porte l'attribut hidden. */
.parcours-station{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  object-fit:cover;
}
.parcours-station[hidden]{ display:none; }

/* Voile de lisibilite : RETIRE en passe 7b (demande Louis, jamais demande par le
   client). Plus aucun fond noirci derriere les textes du parcours : ni .parcours-veil,
   ni .parcours-chap--veilplus. Le texte reste blanc avec son ombre de lettres
   (text-shadow de .parcours-col ci-dessous), rien de plus. Ne pas remettre de fond
   en passe 8 : le gabarit de _splice-parcours.py n'injecte plus de voile. */

/* Colonne 4/12, au-dessus du canvas. Passe 7c : CENTREE verticalement dans la partie
   visible de l'image (sous le header). Le padding-top de .parcours-inner = hauteur du
   header decale la zone de centrage vers le bas, et align-items:center centre la colonne
   dedans : le centre du bloc tombe au milieu de l'image visible sous le header. Remplace
   l'ancrage en haut (padding-top) de la 7b. Meme regle colonne gauche comme droite. */
.parcours-inner{
  position:absolute; inset:0; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(24px,6vw,72px);
  padding-top:var(--header-h);
  display:flex; align-items:center;
}
.parcours-col{
  width:33.3333%;
  max-width:440px; min-width:300px;
  padding-top:0;
  padding-bottom:0;
  color:var(--blanc);
  /* Passe 7c (point 2d) : lisibilite SANS voile. Ombre renforcee des LETTRES seulement,
     courte et douce, collee aux lettres ; jamais une zone sombre visible autour du bloc.
     Passe 10 (1.4) : liseré sombre plus serré (2-3 px, colle aux lettres) pour le texte
     blanc sur les images claires de la visite (chambres, murs ivoire) ou le ratio
     brut blanc/image tombe sous 4,5:1. Toujours une ombre de LETTRES, aucun voile de
     bloc (la 7b les a retires) ; mesures et captures dans _review/passe-10/. */
  text-shadow:0 0 2px rgba(8,5,3,.95), 0 0 3px rgba(10,7,4,.8), 0 1px 2px rgba(20,14,8,.7), 0 2px 6px rgba(20,14,8,.5), 0 0 16px rgba(20,14,8,.34);
  transition:opacity .3s ease;
}
/* Exception bar (vh-08 / cs-07) : la colonne s'efface en fondu a partir de 80 %
   pour liberer la derniere image (portes cliquables). Revient sous 80 %. */
.parcours-col.is-faded{ opacity:0; }
/* Surtitre : rendu plus lisible (ivoire plein, un cran plus grand). Reste en capitales. */
.pc-space{
  font-family:var(--font-body); font-weight:400;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:12px; line-height:1.2;
  color:var(--blanc);
  margin:0 0 14px;
}
/* Titre : casse normale (telle que le client l'ecrit), ~30 % plus petit (point 2c).
   text-transform:none annule les capitales heritees (le titre etait rendu en
   GRANDES CAPITALES, constat client du 09/10). */
.pc-title{
  font-family:var(--font-title); font-weight:400;
  text-transform:none;
  font-size:clamp(1.5rem,2.5vw,2.5rem);
  line-height:1.04; letter-spacing:.01em;
  color:var(--blanc); margin:0 0 18px;
  text-wrap:balance; hyphens:none;
}
.pc-text{
  font-family:var(--font-body); font-weight:300;
  font-size:16px; line-height:1.72;
  color:var(--blanc);
  max-width:44ch; margin:0;
  text-wrap:pretty; hyphens:none;
}
/* A. Chapeau d'accroche (en Bentham, plus grand que le corps). Phrase d'ouverture. */
.pc-lede{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.35; letter-spacing:.005em;
  color:var(--blanc);
  max-width:30ch; margin:0 0 1em;
  text-wrap:pretty; hyphens:none;
}
/* A. Paragraphe de corps (Poppins 300, mesure courte 40-46 car/ligne). Le premier
   .pc-para colle au chapeau (l'espace vient du margin-bottom du chapeau) ; les
   suivants prennent ~1em de respiration. */
.pc-para{
  font-family:var(--font-body); font-weight:300;
  font-size:16.5px; line-height:1.7;
  color:var(--blanc);
  max-width:44ch; margin:0;
  text-wrap:pretty; hyphens:none;
}
.pc-para ~ .pc-para{ margin-top:1em; }
/* Colonne ancree a droite (chapitre vh-p9 : laisse les portes cliquables a gauche). */
.parcours-col--right{ margin-left:auto; }

/* ---- Passe 7c (point 2a) : le bloc « hauteur fixe + resserrement sur ecrans bas »
   de la 7b est RETIRE. Les tailles, interlignages et marges de .pc-space, .pc-title,
   .pc-lede, .pc-para et .pc-text reviennent a leurs valeurs d'avant la 7b (les regles
   de base ci-dessus, inchangees depuis 869a9b8). Le texte retrouve sa taille d'avant,
   et la colonne est centree (voir .parcours-inner). ---------------------------------- */

/* ---- Revelation par masque UNIQUEMENT (transitions CSS) ------------------ */
.js-reveal .ln{ display:block; overflow:hidden; }
.js-reveal .ln > span{
  display:block; will-change:transform;
  transform:translateY(110%);
  /* A2 (v8) : la SORTIE (effacement) est portee par l'etat de BASE -> courte
     (260 ms), courbe d'acceleration, SANS decalage entre les lignes. Les textes
     s'effacent alors au rythme des autres elements quand on remonte. */
  transition:transform 260ms cubic-bezier(.4,0,1,1);
  transition-delay:0ms;
}
/* A. Revelation PAR ELEMENT : la classe is-revealed est portee par chaque bloc
   (pc-space / pc-title / pc-lede / pc-text / pc-para), plus par la colonne.
   A2 (v8) : l'ENTREE (revelation) est portee par l'etat REVELE -> longue
   (900 ms), decalage de 80 ms par ligne. Inchangee ; seule la sortie raccourcit.
   Paliers-sas : is-revealed reste porte par le conteneur .js-reveal lui-meme. */
.js-reveal .is-revealed .ln > span,
.js-reveal.is-revealed .ln > span{
  transform:translateY(0);
  transition:transform 900ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* Poster de repli (mobile / reduced-motion) : masque en desktop. */
.parcours-poster{ display:none; }

/* ==========================================================================
   C. PANNEAU-PLAN : une transition entre deux chapitres. 160 vh ; contenu
   colle sur 100 vh, fond --blanc OPAQUE (masque les decalages entre deux clips).
   ========================================================================== */
.parcours-plan{ position:relative; height:160vh; background:var(--blanc); }
.parcours-plan-sticky{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  background:var(--blanc);
  display:flex; align-items:center; justify-content:center;
}
/* Nom de la villa et niveau, discret, en haut a gauche. */
.pp-head{
  position:absolute; top:clamp(18px,3vh,34px); left:clamp(20px,4vw,52px); z-index:4;
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.18em;
  font-size:11px; color:var(--ink-soft);
}
.pp-head b{ display:block; font-weight:500; color:var(--ink); letter-spacing:.14em; margin-top:2px; }
/* Mention de changement de niveau (petites capitales), au fondu enchaine. */
.pp-levelchange{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; font-family:var(--font-body); text-transform:uppercase;
  letter-spacing:.24em; font-size:13px; color:var(--bronze);
  opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:5;
}
.pp-levelchange.show{ opacity:1; }
/* Scene du plan : centree, large (jusqu'a 62vw et 70vh). */
.pp-stage{ position:relative; width:min(62vw,1000px); height:70vh; }
.pp-level{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .22s ease; pointer-events:none;
}
.pp-level.is-shown{ opacity:1; }
.pp-level svg{ width:100%; height:100%; max-height:70vh; display:block; }
/* Etiquettes masquees par defaut ; visibles en mode station. */
.pp-level #labels{ display:none; }
.pp-level.show-labels #labels{ display:inline; }
/* Murs en encre, sols neutres (les polygones de pieces gardent leur creme). */
.pp-level #murs path, .pp-level #murs polygon{ fill:var(--ink); }
/* Piece allumee : bronze, contour bronze fonce. Transition d'extinction douce. */
.pp-level polygon[data-piece]{ transition:fill .3s ease, fill-opacity .3s ease; }
.pp-level polygon[data-piece].is-lit{
  fill:#C79A64; fill-opacity:.85; stroke:#6E4F2A; stroke-width:1.2; vector-effect:non-scaling-stroke;
}
/* Trace : polyline arrondie, bronze fonce, 2 px non-scaling, pilotee par dashoffset. */
.pp-traj{
  fill:none; stroke:#6E4F2A; stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
}
.pp-traj-head{ fill:#6E4F2A; }
.pp-dot{ fill:#C79A64; }
/* Nom de la piece a cote du point (texte SVG, en unites du plan). */
.pp-roomlabel{
  fill:var(--ink); font-family:var(--font-title); font-weight:400;
  paint-order:stroke; stroke:var(--blanc); stroke-width:2.4; stroke-linejoin:round;
}

/* ---- Paliers-sas : 115 vh, opaques, phrase + texte centres ------------- */
.parcours-palier{
  position:relative;
  min-height:115vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--blanc);
  padding:0 clamp(24px,10vw,160px);
  content-visibility:auto;
  contain-intrinsic-size:auto 115vh;
}
.parcours-palier-in{ max-width:600px; text-align:center; }
.pp-phrase{
  font-family:var(--font-title); font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.02; letter-spacing:.03em;
  color:var(--ink); margin:0 0 clamp(20px,3vh,34px);
  text-wrap:balance; hyphens:none;
}
.pp-text{
  font-family:var(--font-body); font-weight:300;
  font-size:15px; line-height:1.85; letter-spacing:.005em;
  color:var(--ink-soft); margin:0 auto; max-width:52ch;
  text-wrap:pretty; hyphens:none;
}

/* ---- Paliers COURTS : un sas blanc entre CHAQUE clip ---------------------
   Meme fond blanc opaque, meme typo, meme revelation par masque. min-height:100vh
   pour que le blanc couvre tout l'ecran a un moment donne (sinon la coupure entre
   deux clips se voit). Masques sous 1024 px et en reduced-motion (voir medias). */
.parcours-palier--court{
  min-height:100vh;
  contain-intrinsic-size:auto 100vh;
}

/* ==========================================================================
   Repli editorial : sous 1024 px OU prefers-reduced-motion.
   Aucun canvas, aucun chargement de sequence. Poster plein cadre + texte.
   ========================================================================== */
@media (max-width:1023px){
  .parcours-chap{ height:auto; }
  /* Chapitres sans colonne de texte : masques pour ne pas empiler des posters repetes. */
  .parcours-chap--notext{ display:none; }
  .parcours-sticky{ position:static; height:auto; min-height:0; overflow:visible; }
  .parcours-sticky::before{ content:""; display:block; width:100%; aspect-ratio:16/9; background:inherit; }
  .parcours-canvas{ display:none; }
  .parcours-inner{ position:static; display:block; padding:0; }
  .parcours-col{
    width:100%; max-width:none; min-width:0;
    color:var(--ink); text-shadow:none;
    background:var(--blanc);
    padding:clamp(28px,7vw,56px) clamp(24px,6vw,48px) clamp(48px,10vw,88px);
  }
  .pc-space{ color:var(--ink-soft); }
  .pc-title{ color:var(--ink); }
  .pc-text{ color:var(--ink); max-width:60ch; }
  .pc-lede{ color:var(--ink); font-size:1.25rem; max-width:none; margin:0 0 .9em; }
  .pc-para{ color:var(--ink); font-size:16px; max-width:60ch; margin:0; }
  .pc-para ~ .pc-para{ margin-top:.9em; }
  .parcours-palier{ min-height:0; padding:clamp(64px,14vh,140px) clamp(24px,8vw,64px); }
  /* Sur mobile : seuls les 4 paliers longs restent ; pas de pages de texte empilees. */
  .parcours-palier--court{ display:none; }
  /* Pas de panneau-plan sur mobile. */
  .parcours-plan{ display:none; }
  /* Repli statique (aucun rAF) : la colonne de chaque chapitre, posee sous son
     poster, est affichee sans animation de masque (point de verification mobile). */
  .js-reveal .ln > span{ transform:none; transition:none; }
}

@media (prefers-reduced-motion:reduce){
  .parcours-chap{ height:auto; }
  .parcours-chap--notext{ display:none; }
  .parcours-sticky{ position:static; height:auto; min-height:0; overflow:visible; }
  .parcours-sticky::before{ content:""; display:block; width:100%; aspect-ratio:16/9; background:inherit; }
  .parcours-canvas{ display:none; }
  .parcours-inner{ position:static; display:block; padding:0; }
  .parcours-col{
    width:100%; max-width:none; min-width:0; color:var(--ink); text-shadow:none;
    background:var(--blanc);
    padding:clamp(28px,7vw,56px) clamp(24px,6vw,48px) clamp(48px,10vw,88px);
  }
  .pc-space{ color:var(--ink-soft); }
  .pc-title{ color:var(--ink); }
  .pc-text{ color:var(--ink); max-width:60ch; }
  .pc-lede{ color:var(--ink); font-size:1.25rem; max-width:none; margin:0 0 .9em; }
  .pc-para{ color:var(--ink); font-size:16px; max-width:60ch; margin:0; }
  .pc-para ~ .pc-para{ margin-top:.9em; }
  .parcours-palier{ min-height:0; padding:clamp(64px,14vh,140px) clamp(24px,8vw,64px); }
  .parcours-palier--court{ display:none; }
  .js-reveal .ln > span{ transform:none; transition:none; }
  .parcours-plan{ display:none; }
}