/* EX’SIE — accueil. */

/* =====================================================================
   1. HERO — reprise de reference/hero.html, mêmes temps, mêmes courbes.
   ===================================================================== */
.hero { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 30px; align-items: center; padding-block: clamp(28px, 4vw, 54px) clamp(40px, 5vw, 64px); }
.hero-texte { position: relative; z-index: 2; }
.hero .surtitre { opacity: 0; animation: h-fondu .8s .1s forwards; }
.hero h1 { margin-top: 22px; }
.h-ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.h-ligne > span { display: inline-block; transform: translateY(105%); animation: h-monte 1s var(--c-entree) forwards; }
.h-ligne:nth-child(1) > span { animation-delay: .25s; }
.h-ligne:nth-child(2) > span { animation-delay: .38s; }
.h-ligne:nth-child(3) > span { animation-delay: .51s; }
.h-ligne:nth-child(4) > span { animation-delay: .64s; }
.h-net { display: inline-block; font-weight: 700; filter: blur(14px); opacity: .25; animation: h-net 1.4s 2.3s var(--c-entree) forwards; }
.h-avance { display: inline-block; font-weight: 700; color: var(--accent); opacity: 0; transform: translateX(-46px); animation: h-avance 1.3s 2.8s var(--c-elan) forwards; }
.hero .chapo { margin-top: 30px; max-width: 46ch; opacity: 0; animation: h-leve .9s 1.4s forwards; }
.hero-actions { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; opacity: 0; animation: h-leve .9s 1.6s forwards; }
.hero-partenaire { margin-top: 44px; display: flex; gap: 18px; align-items: center; font-size: .8rem; color: var(--muted); opacity: 0; animation: h-fondu 1s 1.9s forwards; }
.hero-partenaire .logo-sage { height: 30px; color: #16b04a; }
.hero-partenaire span { border-left: 1px solid var(--line-fort); padding-left: 18px; line-height: 1.6; }

@keyframes h-monte { to { transform: translateY(0); } }
@keyframes h-net { to { filter: blur(0); opacity: 1; } }
@keyframes h-avance { to { opacity: 1; transform: translateX(0); } }
@keyframes h-fondu { to { opacity: 1; } }
@keyframes h-leve { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Scène 3D */
.hero-visuel { position: relative; height: 640px; perspective: 1500px; perspective-origin: 50% 38%; }
.h-cadre { position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; transform-style: preserve-3d; transform: scale(var(--k, 1)); }
.h-plan { position: absolute; left: 30px; top: 70px; width: 560px; height: 440px; transform-style: preserve-3d; will-change: transform; }
.h-sol {
  position: absolute; left: -200px; top: -160px; width: 960px; height: 760px; transform: translateZ(-70px); pointer-events: none;
  background: radial-gradient(circle, var(--point) 1.3px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent);
  opacity: 0; animation: h-fondu 2s .2s forwards;
}
.h-anneau { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed var(--accent); opacity: 0; pointer-events: none; }
.h-anneau.a1 { --o: .28; width: 620px; height: 620px; margin: -310px; transform: translateZ(-60px); animation: h-vers 2s 1s forwards, h-tourne 60s linear infinite; }
.h-anneau.a2 { --o: .14; width: 760px; height: 760px; margin: -380px; border-style: solid; border-width: 1px; transform: translateZ(-65px); animation: h-vers 2s 1.3s forwards, h-tourne 90s linear infinite reverse; }
@keyframes h-vers { to { opacity: var(--o, .2); } }
@keyframes h-tourne { from { rotate: 0deg; } to { rotate: 360deg; } }
.hero-visuel.en-pause .h-anneau { animation-play-state: paused; }

/* Une carte = un document qui devient une tuile. Seuls transform, opacity et filter bougent. */
.h-carte { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.h-papier { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; border-radius: 4px; background: var(--papier); box-shadow: var(--flottant); }
.h-tuile {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 18px; opacity: 0;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--flottant);
}
/* Un document arrive : la tuile réagit d’un battement, sans halo. */
.h-carte.touche .h-tuile { transform-origin: 50% 50%; animation: h-touche .55s var(--c-elan); }
@keyframes h-touche { 0% { scale: 1; } 35% { scale: 1.035; } 100% { scale: 1; } }

.h-doc { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--papier-encre); pointer-events: none; font-weight: 500; line-height: 1.35; }
.h-doc.fac { width: 190px; height: 250px; padding: 16px 15px; }
.h-doc.tic { width: 130px; height: 230px; padding: 14px 12px; text-align: center; }
.h-doc b { display: block; font-size: 14px; font-weight: 700; }
.h-doc.tic b { font-size: 12px; }
.h-doc .ref { font-size: 9px; color: #6b7c83; margin-top: 2px; }
.h-doc .client { font-size: 9.5px; margin-top: 10px; font-weight: 700; }
.h-doc .bande { height: 5px; width: 28px; background: #1E87AE; border-radius: 2px; margin-bottom: 9px; }
.h-doc.tic .bande { margin: 0 auto 8px; }
.h-doc .lignes { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.h-doc .l { display: flex; justify-content: space-between; gap: 8px; }
.h-doc .l i { height: 4px; background: var(--papier-trait); border-radius: 2px; }
.h-doc .total { position: absolute; left: 15px; right: 15px; bottom: 16px; border-top: 1px solid var(--papier-trait); padding-top: 7px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; }
.h-doc.tic .total { left: 12px; right: 12px; bottom: 14px; border-top: 1px dashed #9aa7ad; font-size: 9.5px; }
.h-doc .tirets { border-top: 1px dashed #9aa7ad; margin: 9px 0; }
.h-doc .tl { display: flex; justify-content: space-between; font-size: 8.5px; color: #55666d; margin: 5px 0; }

.h-contenu { position: absolute; inset: 0; padding: 18px 20px; opacity: 0; display: flex; flex-direction: column; color: var(--ink); line-height: 1.35; }
.h-contenu .lb { font-size: 13px; font-weight: 700; color: var(--muted); }
.h-contenu .sb { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.h-contenu .nm { font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.h-contenu .nm small { font-size: 12.5px; font-weight: 700; color: var(--accent-texte); margin-left: 5px; }
.h-contenu.A .nm { font-size: 36px; }
.h-contenu .rang { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.h-contenu .cote { text-align: right; font-size: 12px; color: var(--muted); }
.h-contenu .cote strong { display: block; font-size: 30px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.h-contenu svg.courbe { position: absolute; left: 20px; bottom: 16px; width: calc(100% - 40px); height: var(--h-courbe, 86px); overflow: visible; }
.h-contenu .courbe .trait { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.h-contenu .courbe .aire { fill: var(--accent); opacity: 0; }
.h-contenu .courbe .bout { fill: var(--accent); opacity: 0; }
.h-contenu .barres { display: flex; align-items: flex-end; gap: 9px; height: 100px; margin-top: auto; }
.h-contenu .barres i { flex: 1; background: var(--accent); border-radius: 4px 4px 2px 2px; transform-origin: bottom; transform: scaleY(0); }
.h-contenu .anneau { position: relative; margin: auto; width: 118px; height: 118px; }
.h-contenu .anneau svg { width: 118px; height: 118px; }
.h-contenu .anneau .piste { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 13; }
.h-contenu .anneau .arc { fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round; }
.h-contenu .anneau > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-contenu .jauge { margin-top: auto; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.h-contenu .jauge span { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 4px; transform-origin: left center; transform: scaleX(0); }
.hero-note { position: absolute; right: 0; bottom: 0; z-index: 3; }

/* Sous 1020 px : une vraie composition, à taille réelle. Quatre tuiles lisibles, caméra presque de face.
   De 761 à 1020 px elle reste à côté du texte ; en dessous, elle passe sous le texte. */
@media (max-width: 1020px) {
  .hero { grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; }
  .hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.1rem); }
  .hero-visuel { height: 520px; perspective: 1000px; perspective-origin: 50% 42%; }
  .h-cadre { width: 340px; height: 440px; margin: -224px 0 0 -170px; }
  .h-plan { left: 0; top: 0; width: 340px; height: 424px; }
  .h-sol { left: -110px; top: -90px; width: 560px; height: 600px; }
  .h-anneau.a1 { width: 430px; height: 430px; margin: -215px; }
  .h-anneau.a2 { width: 540px; height: 540px; margin: -270px; }
  .h-contenu { --h-courbe: 62px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 26px; }
  .hero h1 { margin-top: 16px; font-size: var(--t-h1); }
  .hero .chapo { margin-top: 20px; }
  .hero-actions { margin-top: 24px; gap: 16px; }
  .hero-partenaire { margin-top: 28px; }
  .hero-visuel { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-ligne > span { transform: none; opacity: 0; animation-name: h-fondu; animation-duration: .6s; }
  /* Version douce : mêmes temps (le titre reste calé sur la scène), des fondus à la place des glissements. */
  .h-avance { transform: none; animation-name: h-fondu; }
  .hero .chapo, .hero-actions { animation-name: h-fondu; }
  .h-anneau { animation: h-vers 1s .4s forwards !important; }
}

/* =====================================================================
   2. ENGAGEMENTS — bloc calme
   ===================================================================== */
.engagements { padding-block: clamp(40px, 5vw, 72px); border-block: 1px solid var(--line); background: var(--surface); }
.engagements-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: var(--e-6); }
.engagement { display: grid; grid-template-columns: 34px 1fr; gap: 6px 14px; }
.engagement h3 { align-self: center; }
.engagement p { grid-column: 2; font-size: .97rem; }
.coche { width: 34px; height: 34px; }
.coche circle { fill: none; stroke: var(--line-fort); stroke-width: 1.5; }
.coche path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.est-vu .coche path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--c-trajet); transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
@media (max-width: 900px) { .engagements-liste { grid-template-columns: 1fr; gap: 26px; } }

/* =====================================================================
   3. UN ERP, POUR QUOI FAIRE ? — scène « Trois saisies deviennent une »
   ===================================================================== */
.saisies { position: relative; }
.saisies-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.saisies-etapes { padding-block: 12vh 18vh; }
.saisies-etape { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: var(--e-5); }
.saisies-etape:first-child { min-height: 66vh; justify-content: flex-start; }
.saisies-scene { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.s-cadre { position: relative; width: 560px; height: 560px; transform: scale(var(--k, 1)); }
.s-fen {
  position: absolute; left: 0; top: 0; width: 250px; border-radius: var(--r-3); will-change: transform;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--flottant); padding: 14px 16px 16px; color: var(--ink); line-height: 1.3;
}
.s-fen-titre { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s-fen-titre::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.s-fen-corps { display: grid; gap: 6px; margin-top: 12px; }
.s-fen-corps i { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.s-val { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: var(--bg-doux); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 37px; }
.s-val .s-nom, .s-val .s-mnt { white-space: nowrap; }
.s-val small { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.s-ecart { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ambre); opacity: 0; }
.s-pouls { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); opacity: 0; }
.s-curseur { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; background: var(--accent); vertical-align: -2px; opacity: 0; }
.s-noeud { position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: var(--accent-fonce); opacity: 0; display: grid; place-items: center; }
.s-noeud::before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: #fff; }
.s-lien { position: absolute; left: 0; top: 0; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); transform-origin: left center; opacity: 0; }
.s-legende { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; }
.s-etat { position: absolute; left: 0; right: 0; top: -4px; display: flex; justify-content: center; gap: 8px; }
.s-etat span { padding: 5px 12px; border-radius: var(--r-pilule); font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); opacity: .45; transition: opacity var(--d-2), color var(--d-2); }
.s-etat span.actif { opacity: 1; color: var(--accent-texte); box-shadow: inset 0 0 0 1.5px var(--accent); }

.benefices { display: grid; gap: 18px; }
.benefice { display: grid; grid-template-columns: 10px 1fr; gap: 4px 14px; }
.benefice::before { content: ""; width: 7px; height: 7px; margin-top: .62em; background: var(--accent); }
.benefice strong { color: var(--ink); }
.objection { padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .saisies-in { grid-template-columns: 1fr; gap: 0; }
  .saisies-scene { order: -1; top: 0; height: 48svh; min-height: 330px; z-index: 2; background: linear-gradient(var(--bg) 88%, transparent); }
  .saisies-etapes { padding-block: 4vh 6vh; }
  .saisies-etape, .saisies-etape:first-child { min-height: 62svh; justify-content: flex-start; padding-top: 4vh; }
  .s-cadre { width: 340px; height: 300px; }
  .s-fen { width: 280px; padding: 10px 14px 12px; }
  .s-fen-corps { display: none; }
  .s-val { margin-top: 8px; }
}

/* =====================================================================
   4. VOS MÉTIERS — onglets et vignette de parcours
   ===================================================================== */
.metier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(28px, 4vw, 52px); }
.metier-texte { display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start; }
.metier-situation { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); font-weight: 300; line-height: 1.35; color: var(--ink); }
.metier-situation strong { font-weight: 700; }
.vignette { position: relative; padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 36px); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--line); }
.vignette .parcours li { padding-top: 64px; font-size: .9rem; }
.vignette .parcours li::before { top: 34px; }
.vignette .parcours li::after { top: 40px; }
.v-rail { position: absolute; left: calc(12.5% + clamp(16px, 3vw, 36px) * .75); right: calc(12.5% + clamp(16px, 3vw, 36px) * .75); top: clamp(28px, 4vw, 48px); height: 30px; pointer-events: none; }
.v-course { position: absolute; inset: 0; transform: translateX(0); }
.v-jeton { position: absolute; left: -17px; top: -6px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-fonce); color: #fff; opacity: 0; }
.v-jeton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vignette.joue .v-course { animation: v-course 2.6s var(--c-trajet) .35s both; }
.vignette.joue .v-jeton { animation: v-jeton 2.6s linear .35s both; }
@keyframes v-course { 0% { transform: translateX(0); } 22% { transform: translateX(33.33%); } 30% { transform: translateX(33.33%); } 52% { transform: translateX(66.66%); } 60% { transform: translateX(66.66%); } 82%, 100% { transform: translateX(100%); } }
@keyframes v-jeton { 0% { opacity: 0; scale: .5; } 8% { opacity: 1; scale: 1; } 82% { opacity: 1; scale: 1; } 90% { scale: 1.18; } 100% { opacity: 1; scale: 1; } }
.vignette-legende { margin-top: var(--e-5); text-align: center; font-size: var(--t-petit); color: var(--muted); max-width: none; }
@media (max-width: 900px) { .metier { grid-template-columns: 1fr; } .vignette { order: -1; } }

/* 5. EXPERTISES — les pictogrammes sont dans pages/pictos.css */

/* =====================================================================
   6. MÉTHODE — rail à six crans
   ===================================================================== */
.rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-top: 34px; }
.rail::-webkit-scrollbar { display: none; }
.rail::before { content: ""; position: absolute; left: 0; top: 16px; height: 3px; width: max(100%, 720px); border-radius: 3px; background: var(--line-fort); }
.rail-plein { position: absolute; left: 0; top: 16px; width: 1px; height: 3px; border-radius: 3px; background: var(--accent); transform-origin: left center; transform: scaleX(var(--cx, 0)); transition: transform var(--d-4) var(--c-elan); }
.rail-jeton { z-index: 2; position: absolute; left: -11px; top: 6.5px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-fonce); box-shadow: 0 0 0 5px var(--bg-doux); transform: translateX(calc(var(--cx, 0) * 1px)); transition: transform var(--d-4) var(--c-elan); }
.cran { position: relative; padding: 14px 10px 6px; text-align: left; scroll-snap-align: center; color: var(--muted); transition: color var(--d-2); }
.cran::before { content: ""; position: absolute; left: 50%; top: -21px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--bg-doux); box-shadow: inset 0 0 0 2px var(--line-fort); }
.cran small { display: block; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-align: center; }
.cran b { display: block; font-size: 1.05rem; font-weight: 600; text-align: center; }
.cran:hover, .cran[aria-selected="true"] { color: var(--ink); }
.cran[aria-selected="true"] b { font-weight: 700; }
.etape { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(28px, 4vw, 48px); }
.etape h3 { font-size: var(--t-h2); font-weight: 300; line-height: 1.1; }
.etape h3 strong { font-weight: 700; }
.etape-trois { display: grid; gap: 14px; }
.etape-trois div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.etape-trois dt { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .3em; }
.etape-trois dd { margin: 0; color: var(--ink); font-weight: 600; }
.etape-trois dl { margin: 0; }
@media (max-width: 760px) { .etape { grid-template-columns: 1fr; } .etape-trois div { grid-template-columns: 1fr; gap: 2px; } }

/* =====================================================================
   7. ANCRAGE LOCAL — scène « Le territoire se dessine »
   ===================================================================== */
.territoire-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.territoire-texte { display: flex; flex-direction: column; gap: var(--e-5); }
.zones { display: grid; gap: 4px; }
.zone { position: relative; padding: 14px 16px 14px 44px; border-radius: var(--r-2); transition: opacity var(--d-3); }
.zone::before { content: ""; position: absolute; left: 16px; top: 22px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-fort); transition: transform var(--d-3) var(--c-elan); }
.zone::after { content: ""; position: absolute; left: 16px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--d-3) var(--c-elan); }
.zone.allumee::after { transform: scale(1); }
.zone strong { display: block; color: var(--ink); }
.zone span { font-size: .95rem; }
.depuis { display: flex; align-items: baseline; gap: 12px; color: var(--muted); font-weight: 600; }
.depuis b { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.territoire-scene { position: relative; aspect-ratio: 990 / 720; } /* hauteur réservée : aucun saut de mise en page */
.t-carte { width: 100%; height: auto; overflow: visible; }
.t-carte .ile { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.t-carte .lieu { fill: var(--accent); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.t-carte .onde { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.t-carte .zone-trait { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.t-carte text { font-family: var(--police); font-size: 24px; font-weight: 700; fill: var(--ink); opacity: 0; }
.t-carte text.petit { font-size: 19px; font-weight: 600; fill: var(--muted); }
.t-carte .capitale { fill: var(--accent-fonce); }
.t-rose { position: absolute; right: 4%; top: 2%; width: 34px; height: 34px; color: var(--muted); opacity: .8; }
@media (max-width: 900px) { .territoire-in { grid-template-columns: 1fr; } .territoire-scene { order: -1; max-width: 420px; margin-inline: auto; width: 100%; aspect-ratio: 835 / 1000; } .t-carte text { font-size: 36px; } .t-carte text.petit { font-size: 29px; } }

/* =====================================================================
   8. ATELIER — trois tuiles, dont une simulation réelle
   ===================================================================== */
.outil { min-height: 250px; }
.outil-quoi { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texte); }
.simu { display: grid; gap: 10px; margin-top: auto; }
.simu label { display: flex; justify-content: space-between; font-size: var(--t-petit); font-weight: 600; color: var(--muted); }
.simu output { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.simu .reglage { position: relative; z-index: 2; }
.simu-res { display: flex; align-items: baseline; gap: 8px; }
.simu-res b { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }

/* =====================================================================
   9. CARNET — la carte s’entrouvre comme un carnet
   ===================================================================== */
.carnet { position: relative; min-height: 290px; perspective: 1200px; border-radius: var(--r-3); }
.carnet-page, .carnet-couv { position: absolute; inset: 0; border-radius: var(--r-3); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: var(--e-3); }
.carnet-page { background: var(--bg-doux); border: 1px solid var(--line); justify-content: flex-end; padding-left: 42%; font-size: .93rem; color: var(--text); }
.carnet-page p { font-size: .93rem; }
.carnet-couv {
  background: var(--surface); border: 1px solid var(--line);
  transform-origin: left center; transition: transform var(--d-4) var(--c-elan); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.carnet-couv::before { content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--accent); }
.carnet-couv > * { padding-left: 14px; }
.carnet-couv h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
.carnet-couv .lien { margin-top: auto; margin-left: 14px; padding-left: 0; align-self: flex-start; }
.carnet-meta { display: flex; gap: 10px; align-items: center; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) { .carnet:is(:hover, :focus-within) .carnet-couv { transform: rotateY(-24deg); } }
.carnet:has(.carte-cible:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* =====================================================================
   10. QUESTIONS
   ===================================================================== */
.questions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.questions-titre { position: sticky; top: calc(var(--h-entete) + 32px); display: flex; flex-direction: column; gap: var(--e-5); align-items: flex-start; }
@media (max-width: 900px) { .questions { grid-template-columns: 1fr; } .questions-titre { position: static; } }

/* =====================================================================
   11. APPEL FINAL — scène de convergence
   ===================================================================== */
.appel-scene { position: absolute; inset: 0; pointer-events: none; perspective: 1000px; }
.c-embleme { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent); opacity: 0; will-change: transform, opacity; }
.c-embleme svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.c-eclat { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: var(--r-pilule); box-shadow: 0 0 0 2px var(--accent); opacity: 0; }

/* Firefox, thème sombre : l’ombre portée d’un élément en 3D est rendue comme un halo noir à bord net. Un filet la remplace. */
@supports (-moz-appearance: none) {
  :root[data-theme="dark"] .h-papier { box-shadow: none; outline: 1px solid var(--line-fort); outline-offset: -1px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h-papier { box-shadow: none; outline: 1px solid var(--line-fort); outline-offset: -1px; } }
}

/* Fenêtre basse : même règle que pour les récits, la scène des saisies ne reste pas collée. */
@media (max-width: 900px) and (max-height: 640px) {
  .saisies-scene { position: static; height: 330px; min-height: 0; }
  .saisies-etape, .saisies-etape:first-child { min-height: 0; padding-block: 28px; }
}