/* =========================================================
   Thème : Ce qui vit dans les bois
   Carnet de terrain d'un biologiste. Pins, trembles dorés,
   télémétrie GPS. La lumière baisse de la station au poste :
   station → sentier → lisière → vallée (nuit) → matin → crépuscule → poste
   ========================================================= */

@property --bg     { syntax: "<color>"; inherits: true; initial-value: #1b211e; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #d4ae3a; }

.theme-bois {
  --bg: #1b211e;
  --surface: #222a25;
  --ink: #e4e0d4;
  --ink-muted: #9aa096;
  --accent: #d4ae3a;           /* feuillage de tremble */
  --accent-2: #8fb3a3;         /* sauge */
  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --measure: 35em;

  transition: --bg 2.2s ease, --accent 2.2s ease;
}
.theme-bois[data-mood="station"]    { --bg: #1b211e; }
.theme-bois[data-mood="sentier"]    { --bg: #18201b; }
.theme-bois[data-mood="lisiere"]    { --bg: #171b14; }
.theme-bois[data-mood="vallee"]     { --bg: #0c110e; --accent: #9fc48a; }
.theme-bois[data-mood="matin"]      { --bg: #141714; }
.theme-bois[data-mood="crepuscule"] { --bg: #130e0c; --accent: #e08a4a; }
.theme-bois[data-mood="poste"]      { --bg: #0a0b0a; --accent: #b8b39f; }

/* ---------- Ouverture : la meute regarde vers le texte ---------- */
.theme-bois .hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden;
}
.theme-bois .hero__bg { position: absolute; inset: 0; z-index: -1; }
.theme-bois .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.theme-bois .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #0e120f 0%, rgb(14 18 15 / .55) 35%, transparent 65%);
}
@media (min-width: 60rem) {
  .theme-bois .hero { align-items: center; }
  .theme-bois .hero::after {
    background: linear-gradient(to left, rgb(14 18 15 / .92) 0%, rgb(14 18 15 / .6) 32%, transparent 58%),
                linear-gradient(to top, #0e120f 0%, transparent 22%);
  }
}
.theme-bois .hero__content {
  position: relative; z-index: 1;
  width: min(100%, 76rem); margin: 0 auto;
  padding: 6rem var(--gutter) clamp(2.5rem, 8vh, 5rem);
}
@media (min-width: 60rem) {
  /* Deux colonnes : la gauche reste vide pour les loups, le texte va à droite */
  .theme-bois .hero__content {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    width: min(100%, 100rem);
    justify-items: start; align-content: center;
    padding-bottom: 6rem;
  }
  .theme-bois .hero__content > * { grid-column: 2; }
}
.hero__kicker { font-style: italic; color: var(--ink); font-size: var(--step-0); line-height: 1.5; }
.theme-bois .hero__title {
  margin-top: .6em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem);
  line-height: .95; letter-spacing: -.01em;
}
.theme-bois .hero__meta { margin-top: 1rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.theme-bois .hero__start {
  display: inline-block; margin-top: 1.6rem;
  padding: .75rem 1.2rem; border-radius: 2px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #15180f; background: var(--accent);
}
.theme-bois .hero__start:hover { background: #e6c252; }

/* ---------- Sommaire et titres ---------- */
.theme-bois .toc { padding-top: clamp(3rem, 8vh, 5rem); }
.theme-bois .toc a { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.theme-bois .toc a::before { color: var(--accent); font-family: var(--font-ui); font-size: .9rem; }
.theme-bois .chapter__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.theme-bois .chapter__num { color: var(--accent); }
.theme-bois .dialogue { padding-left: 0; text-indent: 0; }
.lead { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.2; }

/* ---------- Carte de télémétrie (le moment fort) ---------- */
.telemetry { margin-block: 2.4rem !important; font-size: var(--step-0); }
@media (min-width: 60rem) {
  .telemetry { margin-inline: calc((min(var(--illu-max), 100vw - 2 * var(--gutter)) - 100%) / -2) !important; }
}
.telemetry svg {
  display: block; width: 100%; height: auto;
  background: #e9e5d8;                          /* papier d'impression */
  border-radius: 4px;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / .7);
}
.telemetry__grid line { stroke: #1b211e; stroke-opacity: .07; stroke-width: 1; }
.telemetry__relief path { fill: none; stroke: #1b211e; stroke-opacity: .16; stroke-width: 1.2; }
.telemetry__valley { fill: #d4ae3a; fill-opacity: .1; stroke: #1b211e; stroke-width: 1.4; stroke-dasharray: 6 5; }
.telemetry__creek { fill: none; stroke: #5d7f8f; stroke-width: 2; stroke-linecap: round; }
.telemetry__pond { fill: #5d7f8f; }
.telemetry__dots circle { fill: #b0261c; fill-opacity: .85; }
.telemetry__label { font: 600 15px/1 var(--font-ui); fill: #1b211e; fill-opacity: .7; letter-spacing: .02em; }
.telemetry figcaption {
  margin-top: .6rem; text-align: center;
  font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted);
}
/* Les points s'impriment un à un, sans jamais entrer dans la vallée */
.js-fx .telemetry__dots circle { opacity: 0; transition: opacity .25s ease; transition-delay: calc(var(--i) * 7ms); }
.js-fx .telemetry.is-seen .telemetry__dots circle { opacity: 1; }

/* ---------- Illustrations ---------- */
.theme-bois .illu__frame { background: #0d100e; }


/* Vision nocturne : la même photo, vue à travers la caméra */
.illu--nv .illu__frame img { filter: grayscale(1) brightness(1.25) contrast(1.35) sepia(1) hue-rotate(55deg) saturate(2.6); }
.illu--nv .illu__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / .75) 100%);
  animation: nv-flicker 4s steps(3) infinite;
}
@keyframes nv-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }

/* ---------- Voix, radio, mot ---------- */
.static {
  padding: .4em .7em;
  color: var(--ink-muted); font-style: italic;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 5px);
  border-left: 2px solid rgb(255 255 255 / .15);
}
.note { text-align: center; margin-block: 2em !important; }
.note__paper {
  display: inline-block; padding: .9rem 1.3rem;
  background: #ebe6d6; color: #222;
  font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
  transform: rotate(-1.5deg);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .8);
}
/* L'imitation : juste, mais sans cadence ni émotion */
.mimic {
  font-style: normal;
  color: #a7aa9f;
  letter-spacing: .14em; word-spacing: .5em;
  font-variant-numeric: tabular-nums;
}
/* Le faux Will : un léger dédoublement vert-jaune derrière les lettres */
.wrong { text-shadow: 1.5px 0 rgb(180 196 70 / .45); }

/* ---------- La porte et la fin ---------- */
.door { position: relative; height: 5rem; margin-block: 4rem 3rem !important; }
.door__light {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #f0c97a 15%, #f0c97a 85%, transparent);
  box-shadow: 0 -6px 18px rgb(240 201 122 / .35);
  animation: breath 4.2s ease-in-out infinite;
}
.door__feet {
  position: absolute; bottom: 0; left: 38%; width: 24%; height: 3px;
  background: linear-gradient(90deg, transparent, #050505 18%, #050505 40%, transparent 46%, transparent 54%, #050505 60%, #050505 82%, transparent);
}
.js-fx .door__feet { transform: translateX(-140%); opacity: 0; transition: transform 3s ease-out, opacity 1.5s; }
.js-fx .door.is-seen .door__feet { transform: none; opacity: 1; }
@keyframes breath { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

.last-line {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1.05 !important;
}
.last-line--2 { font-size: var(--step-1); font-weight: 500; color: var(--ink-muted); margin-top: .8em !important; }

.fx-off .illu--nv .illu__frame::after { animation: none; }