/* ============================================================
   AUREA — journee.css  « Vivre la maison » (spec 15, chantier 4)
   Pile de cartes 3D au scroll : chaque carte monte du bas, se pose, puis recule
   d'un cran par carte posee apres elle. Transforms + clip uniquement. Le seul
   fondu du module est le voile interne Brun mineral des cartes (.jn-recede),
   pilote par JS. Aucun autre fondu d'element.
   ============================================================ */
.c-journee{position:relative;background:var(--blanc);padding:0}
/* E : trois colonnes fixes dans la scene collee (titre | pile | mini-plan).
   Les cartes sont dimensionnees et centrees DANS la colonne centrale (insets
   left/right ci-dessous), jamais a partir de la fenetre. */
.journee-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  --jn-title-w:180px; --jn-plan-w:200px; --jn-gutter:clamp(20px,2vw,36px); --jn-edge:clamp(20px,2.5vw,44px)}

/* En-tete de section SUPPRIMEE (01/10) : la galerie s'ouvre directement sur les
   cartes. Le gros titre (« Vivre la ... ») et son surtitre ne sont plus affiches ;
   le chapitre en cours (colonne de gauche) suffit a situer la pile. */
.journee-head{display:none}
.journee-head .jh-line{display:block;overflow:hidden}
.journee-head .jh-in{display:block;transform:translateY(110%);will-change:transform;
  transition:transform .9s var(--ease-cine)}
.c-journee.is-in .journee-head .jh-in{transform:translateY(0)}
.jh-eyebrow{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
  letter-spacing:.28em;font-size:.7rem;color:var(--bronze)}
.jh-title{font-family:var(--font-title);text-transform:none;letter-spacing:.01em;color:var(--ink);
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin:.35em 0 0}

/* E : colonne titre a gauche, largeur 22 % de la scene (min 260 px), centree
   verticalement. z-index SUPERIEUR aux cartes : jamais recouverte. */
.journee-counter{position:absolute;left:var(--jn-edge);top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;color:var(--ink);
  width:var(--jn-title-w);max-width:none}

/* La pile de cartes, confinee a la COLONNE CENTRALE (entre la colonne titre et le
   mini-plan). Perspective sur la scene, cartes empilees dans la meme cellule. */
.journee-cards{position:absolute;top:0;bottom:0;z-index:3;
  left:calc(var(--jn-edge) + var(--jn-title-w) + var(--jn-gutter));
  right:calc(var(--jn-edge) + var(--jn-plan-w) + var(--jn-gutter));
  perspective:1800px;display:grid;place-items:center}
/* Largeur de carte calculee a partir de la colonne centrale (100 %), jamais de la
   fenetre. Les transforms 3D ne reduisent la carte que vers le bas (scale <= 1) :
   aucune carte ne deborde sur les colonnes laterales. Plafond en hauteur de fenetre
   (16:9 sur 100vh - 12vh), aucun plafond en pixels. */
.jn-card{grid-area:1/1;width:min(100%,calc((100vh - 12vh) * 16 / 9));aspect-ratio:16/9;transform-origin:50% 100%;
  transform:translateY(105vh);border-radius:18px;overflow:hidden;background:var(--sable-clair)}
.jn-card.is-top{box-shadow:0 40px 80px -30px rgba(42,32,24,.35)}
.jn-imgwrap{position:absolute;inset:0;overflow:hidden;border-radius:18px}
/* Pas de will-change sur l'image : la spec le reserve aux cartes (celle qui monte
   et les deux du dessus). En faire un calque separe forcerait un re-masquage
   arrondi couteux a chaque frame. */
.jn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14)}
/* Voile interne Brun mineral (recul dans la pile) : seul fondu du module. */
.jn-recede{position:absolute;inset:0;background:#2A2018;opacity:0;pointer-events:none}
/* Voile degrade bas pour la legende (identique au Parcours, en rgba, aucun fondu). */
.jn-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(74,59,44,.62) 0%, rgba(74,59,44,.30) 30%, rgba(74,59,44,0) 58%)}
.jn-cap{position:absolute;left:clamp(20px,3vw,42px);right:clamp(20px,3vw,42px);bottom:clamp(20px,3.2vh,40px);
  z-index:2;font-family:var(--font-title);color:var(--blanc);text-shadow:0 1px 2px rgba(20,14,8,.34);
  font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.25}
.jn-name-m{display:none}

/* ============================================================
   Passe 11 (C4) : « Vivre la maison » en 60/40 sur ordinateur (>=1024 px).
   La pile a gauche sur ~60 % de la largeur de contenu, le plan a droite sur ~40 %,
   grand et centre verticalement dans la scene collee. Le titre du chapitre, le compteur
   (progression) et le nom du niveau rejoignent la colonne du plan, au-dessus de lui
   (DOM : .journee-aside, voir journee-stack.js). Sous 1024 px et en reduced-motion :
   inchange (regles plus bas). ============================================================ */
@media (min-width:1024px){
  .journee-scene{--jn-plan-frac:.4}
  /* Colonne de droite : compteur (titre + progression) puis mini-plan, centres. */
  .journee-aside{position:absolute;top:0;bottom:0;right:var(--jn-edge);z-index:6;
    width:calc((100% - 2 * var(--jn-edge)) * var(--jn-plan-frac));
    display:flex;flex-direction:column;justify-content:center;align-items:stretch;
    gap:clamp(12px,2vh,26px);pointer-events:none}
  .journee-aside > *{pointer-events:auto}
  /* Le compteur n'est plus une colonne a part : il coiffe le plan dans l'aside. */
  .journee-counter{position:static;transform:none;width:auto;max-width:none;
    align-items:flex-start;flex:none}
  .journee-chapter{max-width:none}
  .jch-titre{font-size:clamp(18px,1.5vw,24px);-webkit-line-clamp:2}
  .jch-rule{margin:clamp(10px,1.4vh,18px) 0}
  /* La pile a gauche, ~60 % du contenu, contre le plan a droite (~40 %). */
  .journee-cards{top:0;bottom:0;left:var(--jn-edge);
    right:calc(var(--jn-edge) + (100% - 2 * var(--jn-edge)) * var(--jn-plan-frac) + var(--jn-gutter))}
}

/* Repli < 1024 px : pile en CSS pur (sticky), sans JS. Nom au-dessus de chaque carte. */
@media (max-width:1023px){
  .journee-scene{position:static;height:auto;overflow:visible}
  .journee-head{position:static;top:auto;padding:clamp(40px,8vh,90px) 24px clamp(12px,2vh,22px)}
  .journee-head .jh-in{transform:none}
  .journee-counter{display:none}
  .journee-cards{position:static;inset:auto;perspective:none;display:block;
    padding:0 clamp(16px,5vw,40px) clamp(40px,8vh,90px)}
  .jn-card{position:sticky;top:calc(10vh + var(--i,0) * 10px);width:min(92vw,900px);margin:0 auto clamp(24px,5vh,60px);
    transform:none;box-shadow:0 24px 60px -30px rgba(42,32,24,.3)}
  .jn-img{transform:none}
  .jn-recede{opacity:0}
  .jn-name-m{display:block;font-family:var(--font-body);font-weight:300;text-transform:uppercase;
    letter-spacing:.14em;font-size:11px;color:var(--ink-soft);margin:0 auto clamp(8px,1.4vh,14px);width:min(92vw,900px)}
}

/* ============================================================
   v2 : titre de chapitre, mini-plan desktop, barre mobile.
   ============================================================ */

/* Titre du chapitre en cours (revelation par masque au changement de chapitre). */
.journee-chapter{margin:0;max-width:var(--jn-title-w)}
.jch-line{display:block;overflow:hidden}
.jch-in{display:block;transform:translateY(115%);will-change:transform;
  transition:transform .8s var(--ease-cine)}
.journee-chapter.show .jch-in{transform:translateY(0)}
.journee-chapter .jch-line:nth-child(2) .jch-in{transition-delay:.07s}
.jch-sous{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:11px;color:var(--bronze)}
.jch-titre{font-family:var(--font-title);color:var(--ink);letter-spacing:.01em;
  font-size:clamp(16px,1.4vw,20px);line-height:1.12;margin-top:.12em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* E.2 : filet fin + progression discrete des chapitres (un trait par chapitre,
   celui en cours plus long), sans chiffres. Sous le titre, colonne titre. */
.jch-rule{width:44px;height:1px;background:var(--bronze);opacity:.5;margin:clamp(16px,2.4vh,26px) 0}
.jch-prog{display:flex;gap:7px;align-items:center}
.jch-tick{display:block;width:14px;height:2px;background:var(--ink);opacity:.22;
  transition:width .4s var(--ease-cine),opacity .4s var(--ease-cine)}
.jch-tick.is-current{width:30px;opacity:.9;background:var(--bronze)}

/* Mini-plan desktop (passe 11 C4) : grand encart dans la colonne de droite (.journee-aside),
   largeur de l'aside, plan grand et lisible. Le positionnement vertical est pris en charge
   par le flex centre de l'aside. */
.journee-miniplan{width:100%;max-width:none;background:var(--blanc);
  border:1px solid var(--bronze);border-radius:6px;
  padding:clamp(14px,1.3vw,22px);box-shadow:0 16px 44px -22px rgba(74,59,44,.32)}
.mp-levelname{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(11px,.9vw,13px);color:var(--bronze);text-align:center;margin:0 0 clamp(8px,1vw,12px)}
/* Stage au ratio du plan (viewBox 860x550) : le SVG remplit l'encart sans bande vide. */
.mp-stage{position:relative;width:100%;aspect-ratio:860/550}
/* Libelles des pieces sur le plan (point C4 b) : noms AGRANDIS pour etre lisibles
   (>=11px rendu a 1440), surfaces (m²) masquees pour ne pas encombrer (la surface
   reste sous le plan, mp-surf). Classes posees par journee-stack.js ; on ne touche
   PAS aux SVG sources. Libelles masques par defaut (barre mini-plan mobile incluse),
   reveles uniquement dans le GRAND mini-plan de bureau. */
.mp-level #labels{display:none}
.journee-miniplan .mp-level #labels{display:inline}
.journee-miniplan #labels .mp-surf-label{display:none}
.journee-miniplan #labels .mp-room-label{font-size:14px;letter-spacing:.2px;paint-order:stroke;
  stroke:var(--blanc);stroke-width:2.2px;stroke-linejoin:round}
.mp-level{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease;pointer-events:none}
.mp-level.is-shown{opacity:1;pointer-events:auto}
.mp-level svg{width:100%;height:100%;display:block}
/* Extinction de l'ancienne piece en 250 ms (point D.2). */
.mp-level polygon[data-piece]{transition:fill .25s ease,fill-opacity .25s ease,stroke .25s ease,stroke-width .25s ease}
.mp-level polygon[data-piece].mp-click{cursor:pointer}
/* Piece active : accent net, contour bronze fonce (point D.2). */
.mp-level polygon[data-piece].is-lit{fill:#C79A64;fill-opacity:.85;stroke:#6E4F2A;
  stroke-width:1.4;vector-effect:non-scaling-stroke}
/* Pulsation unique de 500 ms au changement de carte active, puis etat stable. */
@keyframes mp-pulse{0%{stroke-width:1.4}35%{stroke-width:3.6}100%{stroke-width:1.4}}
.mp-level polygon[data-piece].mp-pulse{animation:mp-pulse .5s ease}
.mp-info{margin-top:10px;text-align:center}
.mp-name{font-family:var(--font-title);color:var(--ink);font-size:14px;line-height:1.2}
.mp-surf{font-family:var(--font-body);font-size:11px;color:var(--ink-soft);margin-top:2px;letter-spacing:.04em}

/* D : carte d'exterieur. Les plans s'effacent en fondu, la mention « Extérieurs »
   (surtitre) et le nom de la carte prennent leur place, au meme endroit. */
.mp-exter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 8px;opacity:0;transition:opacity .3s ease;pointer-events:none}
.mp-exter-eyebrow{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:10px;color:var(--bronze);margin-bottom:8px}
.mp-exter-name{font-family:var(--font-title);color:var(--ink);font-size:15px;line-height:1.25}
.journee-miniplan.is-exter .mp-level,.journee-minibar.is-exter .mp-level{opacity:0}
.journee-miniplan.is-exter .mp-exter,.journee-minibar.is-exter .mp-exter{opacity:1}
.journee-miniplan.is-exter .mp-levelname,.journee-minibar.is-exter .mp-levelname{opacity:0}
.journee-miniplan.is-exter .mp-info,.journee-minibar.is-exter .mp-info{opacity:0}

/* Separateurs de chapitre et meta (affiches seulement mobile / reduced). */
.jn-chap{display:none}
.jn-meta{display:none}

/* Barre mini-plan mobile (construite seulement < 1024px). */
.journee-minibar{display:none}

/* Sous 1024 px : barre compacte collee en haut, chapitres intercales. */
@media (max-width:1023px){
  .journee-minibar{display:grid;position:sticky;top:0;z-index:30;
    grid-template-columns:112px 1fr;column-gap:14px;align-items:center;
    height:96px;padding:10px 16px;background:var(--blanc);border-bottom:1px solid var(--bronze)}
  .journee-minibar .mp-stage{grid-column:1;grid-row:1/3;height:76px;width:112px;aspect-ratio:auto}
  .journee-minibar .mp-info{grid-column:2;grid-row:1;align-self:end;text-align:left}
  .journee-minibar .mp-name{font-size:15px}
  .journee-minibar .mp-surf{display:none}
  .journee-minibar .mp-levelname{grid-column:2;grid-row:2;align-self:start;text-align:left;margin:2px 0 0}
  .jn-chap{display:block;width:min(92vw,900px);margin:clamp(30px,6vh,70px) auto clamp(14px,2vh,24px)}
  .jn-chap-sous{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
    letter-spacing:.2em;font-size:11px;color:var(--bronze)}
  .jn-chap-titre{font-family:var(--font-title);color:var(--ink);line-height:1.1;margin-top:.1em;
    font-size:clamp(1.5rem,5vw,2rem)}
}

/* Reduced-motion : liste verticale simple des cartes. */
@media (prefers-reduced-motion:reduce){
  .journee-scene{position:static;height:auto;overflow:visible}
  .journee-head{position:static;top:auto;padding:clamp(40px,8vh,90px) 24px clamp(12px,2vh,22px)}
  .journee-head .jh-in{transform:none;transition:none}
  .journee-counter{display:none}
  .journee-cards{position:static;inset:auto;perspective:none;display:block;
    padding:0 clamp(16px,5vw,40px) clamp(40px,8vh,90px)}
  .jn-card{position:relative;width:min(92vw,900px);margin:0 auto clamp(24px,5vh,60px);transform:none;box-shadow:none}
  .jn-img{transform:none}
  .jn-recede{opacity:0}
  .jn-name-m{display:block;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;
    font-size:11px;color:var(--ink-soft);margin:0 auto 10px;width:min(92vw,900px)}
  .journee-minibar{display:none}
  .jn-chap{display:block;width:min(92vw,900px);margin:clamp(30px,6vh,70px) auto clamp(14px,2vh,24px)}
  .jn-chap-sous{font-family:var(--font-body);font-weight:500;text-transform:uppercase;
    letter-spacing:.2em;font-size:11px;color:var(--bronze)}
  .jn-chap-titre{font-family:var(--font-title);color:var(--ink);line-height:1.1;margin-top:.1em;
    font-size:clamp(1.5rem,5vw,2rem)}
  .jn-meta{display:block;width:min(92vw,900px);margin:8px auto 0;font-family:var(--font-body);
    text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--ink-soft)}
}