/* Chronique de Valeria
   Papier et encre (Yoshida) pour le récit ; panneaux nuit à filet d'or (Minagawa) pour les choix ;
   cartons de chapitre peints plein écran ; carte qui suit Denam au défilement.

   Animations liées au défilement : script.js pose sur chaque [data-scroll]
     --p : 0 quand l'élément entre par le bas de l'écran, 1 quand il sort par le haut ;
     --e : 0 → 1 pendant son entrée (atteint 1 vers le milieu de l'écran).
   Sans script, les valeurs par défaut (1 ou .5) laissent tout visible. */

:root {
  --papier: #ede4d0;
  --papier-clair: #f5efe0;
  --vieilli: #d8c9a8;
  --encre: #2b2420;
  --sepia: #6b4f3a;
  --or: #a8894a;
  --or-clair: #d3bb85;
  --nuit: #1b2230;
  --nuit-2: #10141d;
  --sang: #7a2318;

  --law: #3f5a7a;
  --neutral: #7a6a4f;
  --chaos: #8a3b32;
  --route: var(--law);
  --trait: var(--sang);

  --titre: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --caps: 'Cormorant SC', 'Cormorant Garamond', Garamond, serif;
  --texte: 'EB Garamond', 'Cormorant Garamond', Garamond, Georgia, serif;

  --bar-h: 3.25rem;
  --switch-h: 0px;
  --mesure: 34rem;
  --doux: cubic-bezier(.2, .7, .2, 1);
}
html[data-route="neutral"] { --route: var(--neutral); }
html[data-route="chaos"] { --route: var(--chaos); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1rem); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1.06rem, 0.96rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Grain de papier, posé sur toute la page. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .11; /* pas de mode de fusion : trop coûteux sur un calque fixe plein écran */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--or); text-underline-offset: .18em; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.over {
  font-family: var(--caps); font-weight: 600; font-size: .82em;
  letter-spacing: .16em; text-transform: lowercase; color: var(--route);
  transition: color .6s;
}

/* ── Barre ─────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem;
  background: color-mix(in srgb, var(--nuit-2) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  color: var(--papier);
  font-family: var(--caps); font-weight: 500; letter-spacing: .12em; font-size: .9rem;
  transform: translateY(-100%); transition: transform .5s var(--doux);
}
.bar.is-on { transform: none; }
.bar a { text-decoration: none; }
.bar-title { color: var(--or-clair); white-space: nowrap; }
.bar-nav { display: flex; gap: clamp(.6rem, 1.6vw, 1.5rem); margin-inline: auto; }
.bar-nav a { opacity: .62; padding: .2rem 0; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.bar-nav a:hover, .bar-nav a.is-here { opacity: 1; border-color: var(--or); }
.bar-routes { display: flex; gap: .35rem; }
/* Fil d'or : avancement de la lecture */
.bar-fil { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--or), var(--or-clair)); transform-origin: 0 50%; transform: scaleX(var(--page, 0)); }

/* Sceaux des trois routes (redessinés) */
.sceau {
  --c: var(--law);
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--papier) 35%, transparent);
  color: color-mix(in srgb, var(--papier) 70%, transparent);
  transition: background .4s, color .4s, border-color .4s, transform .3s;
}
.sceau[data-route-btn="neutral"] { --c: var(--neutral); }
.sceau[data-route-btn="chaos"] { --c: var(--chaos); }
.sceau svg { width: 1.15rem; height: 1.15rem; }
.sceau:hover { transform: translateY(-1px); border-color: var(--or-clair); }
.sceau[aria-pressed="true"] { background: var(--c); color: var(--papier-clair); border-color: var(--or-clair); }

/* ── Ouverture ─────────────────────────────────────── */
.hero {
  position: relative; min-height: min(100svh, 68rem); display: grid; align-items: end;
  background: var(--nuit-2); color: var(--papier); overflow: hidden; isolation: isolate;
}
.hero-art {
  position: absolute; inset: -6% 0 -6% 0; z-index: -3;
  background: url('images/opt/promo/gly-viewer-0009-result.webp') 22% 40% / cover no-repeat;
  transform: scale(calc(1 + var(--h, 0) * .22)) translateY(calc(var(--h, 0) * 9%));
  animation: lever 2.6s var(--doux) both;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, var(--nuit-2) 2%, transparent 46%),
    linear-gradient(to left, color-mix(in srgb, var(--nuit-2) 82%, transparent) 18%, transparent 70%),
    linear-gradient(rgba(16,20,29, calc(var(--h, 0) * .9)), rgba(16,20,29, calc(var(--h, 0) * .9)));
}
.hero-text {
  justify-self: end; text-align: right; padding: 0 clamp(1.25rem, 6vw, 6rem) clamp(5rem, 13vh, 9rem); max-width: 50rem;
  transform: translateY(calc(var(--h, 0) * -22vh)); opacity: calc(1 - var(--h, 0) * 2.4);
}
.hero-text > * { animation: monter 1.3s var(--doux) both; }
.hero-kicker { font-family: var(--caps); letter-spacing: .2em; font-size: .86em; color: var(--or-clair); animation-delay: .6s; }
.hero-kicker--sous { margin-top: .35rem; font-size: .74em; color: color-mix(in srgb, var(--papier) 70%, transparent); animation-delay: .8s; }
.hero h1 {
  font-family: var(--titre); font-weight: 500; line-height: .84;
  font-size: clamp(4.6rem, 15vw, 14.5rem); letter-spacing: -.02em; margin: .12em 0 .08em;
  animation: titre 2.2s var(--doux) .5s both; text-wrap: balance;
  text-shadow: 0 .05em .5em rgba(0, 0, 0, .55);
}
.hero h1 img { width: clamp(17rem, 52vw, 50rem); height: auto; margin-left: auto; filter: drop-shadow(0 .4rem 1.6rem rgba(0, 0, 0, .75)); }
.hero-sub { font-family: var(--titre); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--papier); animation-delay: 1.3s; }
.hero-credits { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 2.2rem; font-size: .92em; animation-delay: 1.6s; }
.hero-credits span { display: block; font-family: var(--caps); font-size: .78em; letter-spacing: .16em; color: color-mix(in srgb, var(--papier) 55%, transparent); }
.hero-cue {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  font-family: var(--caps); letter-spacing: .3em; font-size: .8rem; text-decoration: none; color: var(--or-clair);
  padding-bottom: 2.2rem; animation: monter 1s 2s both; opacity: calc(1 - var(--h, 0) * 6);
}
.hero-cue::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 1.8rem; background: var(--or-clair); animation: goutte 2.2s 2.4s infinite; transform-origin: top; }

@keyframes lever { from { opacity: 0; scale: 1.12; } }
@keyframes monter { from { opacity: 0; transform: translateY(1.4rem); } }
@keyframes titre { from { opacity: 0; letter-spacing: .12em; transform: translateY(2rem); } }
@keyframes goutte { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Braises : petites étincelles qui montent (ouverture, Balmamusa) */
.braises { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.braises i {
  position: absolute; bottom: -2%; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%;
  background: #ffb86b; box-shadow: 0 0 .5rem .1rem rgba(255, 140, 60, .7);
  animation: braise var(--d) linear var(--r) infinite; opacity: 0;
}
@keyframes braise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translate(var(--dx), -110vh); opacity: 0; }
}

/* ── Feuilles de papier ────────────────────────────── */
.sheet { position: relative; padding: clamp(4rem, 10vw, 8rem) 0; }
.sheet--serre { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.sec-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 44rem; }
.sec-head h2 { font-family: var(--titre); font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -.01em; margin-top: .25em; text-wrap: balance; }
.sec-head--sub { margin-top: clamp(2rem, 6vw, 5rem); }
.sec-lede { margin-top: .8rem; font-style: italic; color: var(--sepia); }

/* Bandeau d'ouverture du prologue */
.bandeau { text-align: center; padding: clamp(2rem, 8vw, 6rem) 1.25rem clamp(1rem, 4vw, 3rem); }
.bandeau h2 {
  font-family: var(--titre); font-weight: 500; line-height: .9; text-wrap: balance;
  font-size: clamp(3.4rem, 11vw, 10rem);
  letter-spacing: -.02em;
}
.bandeau .over { letter-spacing: .4em; }
.bandeau-lede { font-family: var(--titre); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--sepia); max-width: 34rem; margin: 1.2rem auto 0; line-height: 1.25; text-wrap: balance; }
.bandeau::after { content: ''; display: block; height: 1px; width: calc(var(--e, 1) * min(60rem, 80vw)); margin: 2.2rem auto 0; background: linear-gradient(90deg, transparent, var(--or), transparent); }

/* Factions */
.factions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; }
.faction { display: grid; grid-template-rows: 19rem auto; }
.faction img { height: 100%; width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 .8rem .7rem rgba(43,36,32,.22)); }
.factions .faction { transform: translateY(calc((1 - var(--e, 1)) * (3rem + var(--i, 0) * 2.2rem))); opacity: calc(var(--e, 1) * 1.6 - var(--i, 0) * .12); }
.faction > div { border-top: 1px solid var(--encre); padding-top: .8rem; }
.faction { position: relative; }
.faction-etendard { position: absolute; top: 0; right: 0; height: 9.5rem !important; width: auto !important; filter: drop-shadow(0 .5rem .5rem rgba(43,36,32,.3)) !important; transform-origin: 50% 0; transform: rotate(calc((1 - var(--e, 1)) * 10deg)); }
.faction-peuple, .faction-siege { font-family: var(--caps); letter-spacing: .14em; font-size: .78em; color: var(--sepia); }
.faction h3 { font-family: var(--titre); font-weight: 600; font-size: 1.3em; line-height: 1.1; margin: .1em 0 .4em; }
.faction p { font-size: .86em; line-height: 1.48; }
.faction-siege { margin-top: .6em; color: var(--or); }

/* Le trio : les trois figures convergent */
.trio { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 1rem; width: min(78rem, 100% - 2.5rem); margin: clamp(5rem, 12vw, 10rem) auto 0; position: relative; }
.trio-mot {
  position: absolute; left: 50%; top: 4%; z-index: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--titre); font-weight: 600; font-size: clamp(8rem, 30vw, 26rem); line-height: .8; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--sepia) 45%, transparent);
  transform: translateX(calc(-50% + (.5 - var(--p, .5)) * 30vw));
}
.trio figure { text-align: center; position: relative; z-index: 1; }
.trio img { height: clamp(18rem, 44vw, 36rem); width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 1rem 1rem rgba(43,36,32,.25)); }
.trio-c img { height: clamp(21rem, 52vw, 42rem); }
.trio-g { transform: translateX(calc((1 - var(--e, 1)) * -22vw)); opacity: var(--e, 1); }
.trio-d { transform: translateX(calc((1 - var(--e, 1)) * 22vw)); opacity: var(--e, 1); }
.trio-c { transform: translateY(calc((1 - var(--e, 1)) * 4rem)); opacity: calc(.3 + var(--e, 1) * .7); }
.trio figcaption { font-size: .86em; color: var(--sepia); max-width: 16rem; margin: .8rem auto 0; line-height: 1.4; }
.trio figcaption strong { display: block; font-family: var(--titre); font-size: 1.5em; font-weight: 600; color: var(--encre); }
.trio-loi { grid-column: 1 / -1; text-align: center; font-family: var(--titre); font-style: italic; font-size: clamp(1.9rem, 5vw, 4.2rem); line-height: 1.05; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--encre); text-wrap: balance; position: relative; z-index: 1; }

/* ── Carton de chapitre : plein écran, peint ───────── */
.chapitre { position: relative; }
.carton {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 64rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 5vw, 5rem);
  padding: 9rem clamp(1.25rem, 6vw, 6rem) clamp(3.5rem, 9vh, 6.5rem);
  background: var(--nuit-2); color: var(--papier);
  border-block: 1px solid var(--or);
}
.carton-fond {
  position: absolute; inset: -10% 0; z-index: -3;
  background: center / cover no-repeat;
  transform: scale(calc(1.26 - var(--p, .5) * .26)) translateY(calc((var(--p, .5) - .5) * 7%));
  filter: saturate(.8) contrast(1.05);
}
.carton::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, var(--nuit-2) 3%, rgba(16,20,29,.62) 46%, rgba(16,20,29,.3)),
    linear-gradient(115deg, color-mix(in srgb, var(--trait) 55%, transparent), transparent 62%);
  transition: background .8s;
}
.carton::before {
  content: attr(data-numeral); position: absolute; right: 3vw; top: 50%; z-index: -1;
  font-family: var(--titre); font-weight: 500; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(15rem, 46vw, 42rem);
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--or-clair) 45%, transparent);
  transform: translateY(calc(-50% + (.5 - var(--p, .5)) * 26vh));
  pointer-events: none;
}
.carton .over { color: var(--or-clair); letter-spacing: .3em; }
.carton-texte { max-width: 52rem; }
.ch-titre .en { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: clamp(2.3rem, 6vw, 5.2rem); line-height: 1; text-wrap: balance; margin-top: .3em; text-shadow: 0 .06em .6em rgba(0,0,0,.6); }
.ch-titre .fr { margin-top: .9em; color: var(--or-clair); max-width: var(--mesure); font-size: 1.05em; }
.ch-intro { margin-top: 1.1em; max-width: var(--mesure); color: color-mix(in srgb, var(--papier) 82%, transparent); }
/* Les mots du titre montent un à un */
.mot { display: inline-block; }
.js .mot { opacity: 0; transform: translateY(.7em) rotate(2deg); transition: opacity .9s var(--doux), transform .9s var(--doux); transition-delay: calc(var(--i) * 75ms + .15s); }
.is-in .mot { opacity: 1; transform: none; }
.js .carton .ch-titre .fr, .js .carton .ch-intro, .js .carton .over { opacity: 0; transition: opacity 1.2s .9s; }
.carton.is-in .ch-titre .fr, .carton.is-in .ch-intro, .carton.is-in .over { opacity: 1; }
.tarot {
  width: clamp(8rem, 17vw, 14rem); aspect-ratio: 2 / 3; object-fit: cover;
  border: .45rem solid var(--papier-clair); outline: 1px solid var(--or);
  box-shadow: 0 2rem 3rem -1rem rgba(0,0,0,.8);
  transform: translateY(calc((.55 - var(--p, .5)) * 14rem)) rotate(calc(14deg - var(--p, .5) * 22deg));
}

/* ── Atlas : la carte suit le récit ────────────────── */
.atlas {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  width: min(94rem, 100% - 2.5rem); margin-inline: auto;
}
.routes { --switch-h: 3.4rem; --trait: var(--route); }
.atlas-carte {
  position: sticky; z-index: 1; align-self: start;
  top: calc(var(--bar-h) + var(--switch-h) + .9rem);
  height: calc(100svh - var(--bar-h) - var(--switch-h) - 1.8rem);
  max-height: 60rem; padding: .5rem; margin-block: clamp(2rem, 5vw, 4rem);
}
.carte-cadre {
  position: relative; height: 100%; overflow: hidden; background: #cbb689;
  border: 1px solid var(--or);
  box-shadow: 0 0 0 .45rem var(--nuit-2), 0 0 0 calc(.45rem + 1px) var(--or), 0 2.5rem 4rem -1.5rem rgba(0,0,0,.75);
}
.carte-cam { position: absolute; left: 0; top: 0; width: 1000px; height: 600px; transform-origin: 0 0; } /* pas de will-change : il figerait la carte en basse définition pendant le zoom */
.carte-cam img { width: 100%; height: 100%; max-width: none; }
.carte-cam svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.carte-voile { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(30,20,10,.5) 100%); box-shadow: inset 0 0 5rem rgba(30,20,10,.55); }
.carte-lieu {
  position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; white-space: nowrap;
  padding: .45rem 1.4rem .5rem; background: color-mix(in srgb, var(--nuit-2) 92%, transparent); color: var(--papier);
  border: 1px solid var(--or); box-shadow: 0 0 0 3px var(--nuit-2), 0 0 0 4px color-mix(in srgb, var(--or) 55%, transparent);
  font-family: var(--caps); letter-spacing: .16em; font-size: .92rem;
}
.carte-lieu small { display: block; text-align: center; font-size: .72em; letter-spacing: .2em; color: var(--or-clair); }

.trace { fill: none; stroke: var(--trait); stroke-width: calc(3px * var(--k, 1)); stroke-dasharray: calc(8px * var(--k, 1)) calc(7px * var(--k, 1)); stroke-linecap: round; transition: stroke .6s; }
.trace-halo { fill: none; stroke: rgba(245,239,224,.8); stroke-width: calc(7px * var(--k, 1)); stroke-linecap: round; }
.trace-masque { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.pin-in, .jalon-in { transform: scale(var(--k, 1)); }
.routes .carte-cam svg { --trait: color-mix(in srgb, var(--route) 70%, #000); } /* plus sombre que la couleur de route, pour rester lisible sur le parchemin */
.pin circle { fill: var(--papier-clair); stroke: var(--encre); stroke-width: 1.5; transition: fill .5s; }
.pin text { font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .08em; fill: var(--encre); paint-order: stroke; stroke: rgba(245,239,224,.92); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .6s; }
.pin.vu circle { fill: var(--trait); }
.pin.ici text { opacity: 1; }
.jalon-point { fill: var(--trait); stroke: var(--papier-clair); stroke-width: 2.5; transition: fill .6s; }
.jalon-halo { fill: none; stroke: var(--trait); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: onde 2.2s ease-out infinite; }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }

/* Scènes */
.atlas .scenes { position: relative; z-index: 2; padding-block: 12vh 22vh; padding-left: clamp(0rem, 3vw, 4rem); }
.scene {
  position: relative; min-height: 78vh; padding: 2.5rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 15vw, 14rem); column-gap: 1.2rem; align-content: center; align-items: center;
  transition: opacity .7s;
}
.js .scene { opacity: .32; }
.js .scene.is-active { opacity: 1; }
html:not(.js) .atlas { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.scene-corps { max-width: 31rem; }
.scene-meta { font-family: var(--caps); letter-spacing: .12em; font-size: .86em; color: var(--trait); line-height: 1.3; transition: color .6s; display: flex; align-items: baseline; gap: .7rem; }
.scene-n { font-family: var(--titre); font-style: italic; font-size: 2.6em; letter-spacing: 0; color: var(--or); line-height: .9; }
.scene-meta::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--sepia) 45%, transparent); transform-origin: 0 50%; transform: scaleX(var(--e, 1)); }
.scene h3 { font-family: var(--titre); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.02; margin: .25em 0 .4em; text-wrap: balance; }
.scene-fig {
  grid-column: 2; grid-row: 1; text-align: center; margin-right: clamp(-7rem, -6vw, -2rem);
  transform: translateY(calc((1 - var(--e, 1)) * 7rem)); opacity: calc(var(--e, 1) * 1.4);
}
.scene-fig img { height: clamp(16rem, 30vw, 26rem); width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 1.2rem 1rem rgba(43,36,32,.35)); }
.scene-fig figcaption { font-family: var(--caps); letter-spacing: .12em; font-size: .72em; color: var(--sepia); margin-top: .5rem; }
.scene-decor { margin-top: 1.2rem; aspect-ratio: 21 / 9; background: var(--vieilli) center / cover no-repeat; border: 1px solid var(--or); outline: .3rem solid var(--papier-clair); outline-offset: -.35rem; clip-path: inset(0 calc((1 - var(--e, 1)) * 100%) 0 0); }

/* Champ de bataille en pixel art (version de 1995) : posé sur le papier, pixels nets */
.scene-diorama {
  display: block; margin: 1.4rem 0 0 -1rem; width: min(100%, 24rem); height: auto;
  image-rendering: pixelated; filter: drop-shadow(0 1.2rem .9rem rgba(43,36,32,.3));
  transform: translateY(calc((1 - var(--e, 1)) * 3rem)) scale(calc(.86 + var(--e, 1) * .14)); transform-origin: 30% 100%;
  opacity: calc(var(--e, 1) * 1.5);
}
.citation { margin-top: 1rem; padding-left: 1.1rem; border-left: 2px solid var(--trait); transition: border-color .6s; }
.citation .en { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: 1.4em; line-height: 1.15; }
.citation .fr { font-size: .9em; color: var(--sepia); margin-top: .2em; }
.citation cite { font-family: var(--caps); font-style: normal; letter-spacing: .14em; font-size: .76em; color: var(--trait); }


/* ── Panneaux nuit ─────────────────────────────────── */
.night {
  position: relative; isolation: isolate; color: var(--papier); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #26304a 0%, var(--nuit) 45%, var(--nuit-2) 100%);
  padding: clamp(5rem, 13vw, 11rem) 0;
  border-block: 1px solid var(--or);
}
.night .over { color: var(--or-clair); letter-spacing: .3em; }
.night .sec-head { margin-inline: auto; text-align: center; }
.night .sec-head h2 { font-size: clamp(3rem, 8vw, 7rem); }
.night .sec-lede { color: var(--or-clair); }
.night-decor { position: absolute; inset: -6% 0; z-index: -3; background: center / cover no-repeat; opacity: .34; transform: scale(calc(1.18 - var(--p, .5) * .18)); }
.fins .night-decor { opacity: .2; }
/* Balmamusa brûle */
.brasier {
  position: absolute; inset: auto -10% -35% -10%; height: 85%; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, rgba(214, 84, 34, .55), rgba(138, 59, 50, .28) 45%, transparent 72%);
  opacity: calc(.25 + var(--p, .5) * 1.1); animation: flamme 5s ease-in-out infinite alternate;
}
@keyframes flamme { 0% { transform: scale(1, 1); } 35% { transform: scale(1.06, 1.1); } 70% { transform: scale(.97, .94); } 100% { transform: scale(1.04, 1.06); } }

.dialogue {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: end;
  max-width: 48rem; margin-inline: auto; padding: 1.4rem 1.7rem 1.5rem;
  background: linear-gradient(180deg, rgba(16,20,29,.86), rgba(16,20,29,.96));
  border: 1px solid var(--or); box-shadow: 0 0 0 3px var(--nuit-2), 0 0 0 4px color-mix(in srgb, var(--or) 55%, transparent), 0 2rem 3rem -1.5rem #000;
  position: relative;
  opacity: var(--e, 1); transform: translateY(calc((1 - var(--e, 1)) * 4rem));
}
.dialogue::before, .dialogue::after { content: ''; position: absolute; width: .6rem; height: .6rem; background: var(--or); rotate: 45deg; }
.dialogue::before { top: -.34rem; left: 1.4rem; }
.dialogue::after { bottom: -.34rem; right: 1.4rem; }
.dialogue img { width: 10rem; margin: -3.4rem 0 -1.5rem -.4rem; }
.dialogue img.dialogue-petit { width: 5.2rem; margin: 0; image-rendering: pixelated; border: 1px solid var(--or); }
.dialogue-nom { font-family: var(--caps); letter-spacing: .16em; font-size: .86em; color: var(--or-clair); margin-bottom: .25rem; }

.reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 48rem; margin: 2rem auto 0; }
.reponse {
  --c: var(--law);
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; text-align: left; align-content: start;
  padding: 1.3rem 1.4rem 1.4rem; border: 1px solid color-mix(in srgb, var(--papier) 28%, transparent);
  background: color-mix(in srgb, var(--nuit-2) 78%, transparent);
  transition: border-color .35s, background .35s, box-shadow .35s;
  opacity: var(--e, 1);
}
.reponse--g { transform: translateX(calc((1 - var(--e, 1)) * -14vw)); }
.reponse--d { transform: translateX(calc((1 - var(--e, 1)) * 14vw)); }
.reponse[data-pick="chaos"] { --c: var(--chaos); }
.reponse[data-pick="neutral"] { --c: var(--neutral); }
.reponse[data-fin="reine"] { --c: var(--or); }
.reponse[data-fin="roi"] { --c: var(--chaos); }
.reponse > :not(.reponse-n) { grid-column: 2; }
.reponse-n { grid-row: 1 / span 3; font-family: var(--titre); font-style: italic; font-size: 2.8em; line-height: .9; color: var(--or-clair); }
.reponse-en { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: 1.9em; line-height: 1.05; }
.reponse-fr { font-size: .92em; color: color-mix(in srgb, var(--papier) 70%, transparent); }
.reponse-fr--seul { font-family: var(--titre); font-weight: 500; font-size: 1.9em; line-height: 1.05; color: var(--papier); }
.reponse-suite { font-size: .84em; line-height: 1.4; color: color-mix(in srgb, var(--papier) 62%, transparent); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .5s, margin .5s; margin-top: 0; }
.reponse:hover, .reponse:focus-visible { border-color: var(--or-clair); box-shadow: 0 0 2.5rem -.5rem var(--c); }
.reponse:hover .reponse-suite, .reponse:focus-visible .reponse-suite, .reponse[aria-pressed="true"] .reponse-suite { max-height: 8rem; opacity: 1; margin-top: .7rem; }
.reponse[aria-pressed="true"] { background: var(--c); border-color: var(--or-clair); box-shadow: 0 0 3rem -.5rem var(--c); }
.reponse[aria-pressed="true"] .reponse-fr, .reponse[aria-pressed="true"] .reponse-suite { color: var(--papier-clair); }
.reponses:has([aria-pressed="true"]) .reponse[aria-pressed="false"] { opacity: calc(var(--e, 1) * .45); }

.sentence {
  text-align: center; font-family: var(--titre); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.3;
  margin-top: clamp(3rem, 8vw, 6rem); text-wrap: balance; opacity: var(--e, 1);
}
.sentence strong { display: block; font-style: normal; font-weight: 500; font-size: clamp(2.6rem, 8.5vw, 7.5rem); line-height: 1; margin: .15em 0; color: var(--papier-clair); text-shadow: 0 0 1.2em rgba(214, 84, 34, .65); }
.note { max-width: 38rem; margin: 1.6rem auto 0; text-align: center; font-size: .84em; color: color-mix(in srgb, var(--papier) 55%, transparent); }

/* ── Sélecteur de route ────────────────────────────── */
.switch { position: sticky; top: var(--bar-h); z-index: 30; height: var(--switch-h); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--papier-clair); border-bottom: 1px solid var(--encre); }
.switch .onglet { --c: var(--law); display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 0 .6rem; border-left: 1px solid color-mix(in srgb, var(--sepia) 35%, transparent); transition: background .5s, color .5s; }
.switch .onglet:first-child { border-left: 0; }
.switch .onglet[data-route-btn="neutral"] { --c: var(--neutral); }
.switch .onglet[data-route-btn="chaos"] { --c: var(--chaos); }
.switch .onglet svg { width: 1.5rem; height: 1.5rem; color: var(--c); transition: color .5s; flex: none; }
.switch .onglet b { font-family: var(--titre); font-weight: 600; font-size: 1.35em; line-height: 1; }
.switch .onglet i { font-family: var(--caps); font-style: normal; letter-spacing: .14em; font-size: .78em; color: var(--sepia); transition: color .5s; }
.switch .onglet:hover { background: color-mix(in srgb, var(--c) 12%, var(--papier-clair)); }
.switch .onglet[aria-pressed="true"] { background: var(--c); color: var(--papier-clair); }
.switch .onglet[aria-pressed="true"] svg, .switch .onglet[aria-pressed="true"] i { color: var(--papier-clair); }

.route-tete { padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.route-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: end; }
.route-intro h2 {
  font-family: var(--titre); font-weight: 500; font-size: clamp(5rem, 19vw, 17rem); line-height: .8; letter-spacing: -.03em;
  color: var(--route); transition: color .6s; margin-left: -.05em;
}
.route-intro h2 em { display: block; font-size: .3em; color: var(--encre); letter-spacing: 0; margin: .2em 0 0 .12em; }
.route-phrase { font-size: 1.15em; line-height: 1.45; margin-top: 1.6rem; max-width: var(--mesure); }
.route-unique { font-size: .9em; color: var(--sepia); border-top: 1px solid var(--encre); padding-top: .8rem; }
.route-unique strong { display: block; font-family: var(--caps); font-weight: 600; letter-spacing: .14em; font-size: .86em; color: var(--route); transition: color .6s; }

.cast { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin-top: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--encre); }
.cast figure { text-align: center; display: grid; grid-template-rows: 15rem auto; transform: translateY(calc((1 - var(--e, 1)) * (2rem + var(--i, 0) * 1.6rem))); opacity: calc(var(--e, 1) * 1.8 - var(--i, 0) * .12); }
.cast img { height: 100%; width: 100%; object-fit: contain; object-position: bottom; transition: filter 1.2s, opacity 1.2s; }
.cast figcaption { border-top: 1px solid var(--encre); padding: .5rem .2rem .9rem; font-size: .76em; line-height: 1.3; color: var(--sepia); }
.cast figcaption strong { display: block; font-family: var(--titre); font-size: 1.45em; font-weight: 600; color: var(--encre); }
.cast .est-mort img { filter: grayscale(1) contrast(.9) brightness(1.08); opacity: .5; }
.cast .est-mort strong::after { content: ' †'; color: var(--chaos); font-weight: 400; }

.offre[hidden] { display: none; }

.propre { padding: 1.4rem 1.6rem; border: 1px solid var(--route); background: color-mix(in srgb, var(--route) 7%, transparent); max-width: 46rem; transition: border-color .6s, background .6s; }
.propre li { position: relative; padding-left: 1.2rem; margin-top: .5rem; font-size: .94em; }
.propre li::before { content: ''; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; background: var(--route); rotate: 45deg; transition: background .6s; }

/* ── Fins ──────────────────────────────────────────── */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); perspective: 1600px; max-width: 58rem; margin-inline: auto; }
.carte {
  position: relative; aspect-ratio: 3 / 5; transform-style: preserve-3d; text-align: center; color: var(--encre);
  transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .6s;
  /* éventail qui s'ouvre à l'entrée */
  translate: calc((1 - var(--e, 1)) * (1 - var(--i, 1)) * 9rem) calc((1 - var(--e, 1)) * 8rem);
  rotate: calc((1 - var(--e, 1)) * (var(--i, 1) - 1) * 12deg);
}
.carte[aria-pressed="true"] { transform: rotateY(180deg); }
.carte-dos, .carte-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--or); box-shadow: 0 1.6rem 2.6rem -1.2rem rgba(0,0,0,.8); }
.carte-dos {
  display: grid; place-items: center; color: var(--or-clair); font-family: var(--caps); letter-spacing: .18em; font-size: 1.05em; line-height: 1.5;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42%, color-mix(in srgb, var(--or) 70%, transparent) 42% calc(42% + 1px), transparent calc(42% + 1px)),
    repeating-linear-gradient(45deg, rgba(168,137,74,.16) 0 1px, transparent 1px 1rem),
    repeating-linear-gradient(-45deg, rgba(168,137,74,.16) 0 1px, transparent 1px 1rem),
    var(--nuit);
  outline: 1px solid color-mix(in srgb, var(--or) 60%, transparent); outline-offset: -.7rem; transition: outline-offset .4s;
}
.carte-dos small { font-size: .7em; letter-spacing: .1em; opacity: .75; }
.carte:hover .carte-dos { outline-offset: -1rem; }
.carte-face { transform: rotateY(180deg); background: var(--papier-clair); padding: .7rem .7rem 1.2rem; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: .5rem; overflow: hidden; }
.carte-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carte-face strong { font-family: var(--titre); font-weight: 600; font-size: 1.5em; line-height: 1.1; margin-top: .3rem; }
.carte-face span { font-size: .8em; line-height: 1.4; padding-inline: .5rem; }
.carte-face em { font-size: .76em; color: var(--law); padding-inline: .5rem; }
html:not([data-route="law"]) [data-fin-law] { display: none; }
.fins[data-fin="reine"] .carte[data-carte="roi"], .fins[data-fin="roi"] .carte[data-carte="reine"] { opacity: .35; }

.epilogue { text-align: center; margin: clamp(3.5rem, 8vw, 6rem) auto 0; max-width: 48rem; }
.epilogue .en { font-family: var(--titre); font-style: italic; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.1; text-wrap: balance; }
.epilogue .fr { color: var(--or-clair); margin-top: .8rem; }

/* ── Pied ──────────────────────────────────────────── */
.pied { background: var(--nuit-2); color: color-mix(in srgb, var(--papier) 72%, transparent); padding: 3rem 0 4rem; font-size: .84em; }
.pied p { max-width: 46rem; margin-top: .7rem; }
.pied-logo { width: min(22rem, 70%); height: auto; margin: 0 0 1.5rem -1rem; opacity: .9; }
.pied-titre { font-family: var(--caps); letter-spacing: .16em; color: var(--or-clair); }
.pied-droits { opacity: .7; }
.pied-contact { color: var(--papier); }
.pied-contact a { color: var(--or-clair); }
.lien { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .18em; }

/* ── Apparitions simples ───────────────────────────── */
/* Apparition unique, déclenchée à l'entrée dans l'écran ; les grands titres n'ont pas d'autre animation. */
.js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity 1s var(--doux), transform 1s var(--doux); }
.reveal.is-in { opacity: 1; transform: none; }
.change { animation: change .7s var(--doux) both; }
@keyframes change { from { opacity: 0; transform: translateY(.8rem); } }

/* ── Écrans étroits ────────────────────────────────── */
@media (max-width: 60rem) {
  .route-intro { grid-template-columns: 1fr; }
  .factions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cast { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 0; }
  .bar-title { display: none; }
  /* La carte passe au-dessus du texte et reste collée en haut */
  .atlas { grid-template-columns: 1fr; gap: 0; }
  .atlas-carte { order: -1; z-index: 3; height: 38svh; margin-block: 0; padding: .5rem 0; top: calc(var(--bar-h) + var(--switch-h)); background: var(--papier); }
  .atlas .scenes { padding-block: 2rem 6rem; }
  .scene { min-height: 0; opacity: 1; padding: 2rem 0; border-top: 1px solid color-mix(in srgb, var(--sepia) 40%, transparent); }
  .scene-fig { margin-right: 0; }
  .carte-lieu { font-size: .78rem; bottom: .6rem; padding: .3rem .9rem; }
}
@media (max-width: 40rem) {
  .bar { gap: .6rem; padding: 0 .7rem; }
  .bar-nav { gap: .55rem; font-size: .8rem; }
  .bar-nav a:first-child, .bar-nav a:nth-child(3) { display: none; }
  .sceau { width: 1.7rem; height: 1.7rem; }
  .hero-text { text-align: left; justify-self: start; }
  .hero h1 img { margin-left: -.6rem; width: min(100%, 24rem); }
  .hero-credits { justify-content: flex-start; }
  .hero-veil { background: linear-gradient(to top, var(--nuit-2) 12%, color-mix(in srgb, var(--nuit-2) 50%, transparent) 60%, transparent); }
  .carton { grid-template-columns: 1fr; padding-top: 6rem; }
  .carton .tarot { width: 6.5rem; justify-self: end; grid-row: 1; }
  .scene { grid-template-columns: 1fr; }
  .scene-fig { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  .scene-fig img { height: 15rem; }
  .reponses, .cartes { grid-template-columns: 1fr; }
  .reponse--g, .reponse--d { transform: none; }
  .cartes { max-width: 19rem; }
  .carte { translate: 0 calc((1 - var(--e, 1)) * 4rem); rotate: none; }
  .dialogue { grid-template-columns: 1fr; }
  .dialogue img { width: 7rem; margin: -3rem 0 0; }
  .switch .onglet { flex-direction: column; gap: .1rem; }
  .switch .onglet i { display: none; }
  .switch .onglet svg { width: 1.1rem; height: 1.1rem; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio-c { grid-column: 1 / -1; grid-row: 1; }
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cast figure { grid-template-rows: 9rem auto; }
  .factions { grid-template-columns: 1fr; }
  .faction { grid-template-columns: 6.5rem 1fr; grid-template-rows: auto; gap: 1rem; align-items: end; }
  .faction img { height: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .mot, .carton .ch-titre .fr, .carton .ch-intro, .carton .over { opacity: 1; transform: none; }
  .braises { display: none; }
}

/* ── Le récit en texte seul (écrit dans la page par construire.py) ── */

/* ── Langue, masquage ──────────────────────────────── */
[hidden] { display: none !important; }
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.langue { font-family: var(--caps); letter-spacing: .14em; font-size: .86rem; text-decoration: none; color: var(--or-clair); border: 1px solid color-mix(in srgb, var(--or) 55%, transparent); padding: .2rem .5rem; transition: background .3s, color .3s; }
.langue:hover, .langue:focus-visible { background: var(--or); color: var(--nuit-2); }
.hero-langues { position: absolute; top: 1.2rem; right: clamp(1rem, 4vw, 3rem); z-index: 2; font-family: var(--caps); letter-spacing: .14em; font-size: .86rem; color: color-mix(in srgb, var(--papier) 70%, transparent); display: flex; align-items: center; gap: .5rem; }
.hero-langues [aria-current] { color: var(--papier); }

html:not(.js) .switch, html:not(.js) .bar-routes { display: none; } /* sans script, les trois routes sont affichées l'une après l'autre */