/* Page « La forêt des Landes en chiffres ».
   Chargée uniquement sur /foret/ : s'appuie sur les couleurs et composants de site.css. */

/* ---------- Ouverture ---------- */
.hero--page .hero-text { max-width: 50rem; }
/* ---------- Chapitres ---------- */
.chap { position: relative; border-top: 1px solid var(--line); padding-block: clamp(4rem, 10vw, 7.5rem); }
.chap-grid { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) {
  .chap-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .chap-grid--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .chap-grid--flip > .viz { order: -1; }
  .chap-grid--solo { grid-template-columns: minmax(0, 1fr); }
}
.chap-num {
  font-family: 'Literata', Georgia, serif; font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 500;
  font-variation-settings: 'opsz' 72; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--resin); margin-bottom: .6rem;
}
.chap h2 {
  font-size: clamp(2rem, 4.5vw, 3rem); font-variation-settings: 'opsz' 60; letter-spacing: -.015em;
  max-width: 18ch; margin-bottom: 1.6rem;
}
.chap-grid--solo h2 { max-width: none; }
.chap-p { color: var(--ink-2); max-width: 52ch; }
.chap-p + .chap-p { margin-top: 1rem; }
.chap-sources { margin-top: 1.4rem; font-size: .92rem; color: var(--mist); }

/* Chiffre clé */
.kpi-block { margin-bottom: 1.6rem; padding-left: 1rem; border-left: 3px solid var(--resin); }
.kpi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
  font-family: 'Literata', Georgia, serif; font-size: clamp(3rem, 7vw, 5.2rem); font-weight: 500; line-height: 1;
  font-variation-settings: 'opsz' 72; font-feature-settings: 'lnum', 'tnum'; color: var(--pine);
}
.kpi-pre { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: max(1rem, .28em); color: var(--ink-2); align-self: center; }
.kpi-unit { font-size: .38em; color: var(--ink-2); }
.kpi-label { margin-top: .55rem; color: var(--ink-2); max-width: 36ch; }
.kpi-duo { display: grid; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 48rem) { .kpi-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-duo .kpi { font-size: clamp(2.8rem, 6vw, 4.6rem); }

/* ---------- Graphiques ---------- */
.viz { margin: 0; }
.viz figcaption { margin-top: 1rem; font-size: .95rem; color: var(--mist); max-width: 50ch; }
.viz--waffle .waffle { max-width: 25rem; }
.viz--waffle figcaption, .viz--waffle .waffle { margin-inline: auto; }
.viz--waffle figcaption { text-align: center; }

/* Le cube et la tour */
.cube { width: 100%; height: auto; max-width: 30rem; margin-inline: auto; overflow: visible; }
.cube-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.cube-front { fill: var(--pine); }
.cube-top { fill: color-mix(in srgb, var(--pine) 62%, #fff); }
.cube-side { fill: color-mix(in srgb, var(--pine) 72%, #000); }
.cube-label { fill: var(--paper); font: 700 22px 'Atkinson Hyperlegible', system-ui, sans-serif; }
.tower path, .tower rect { fill: var(--mist); }
.tower-label { fill: var(--ink-2); font: 700 17px 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* Dix pins */
.pines { width: 100%; height: auto; max-width: 34rem; margin-inline: auto; }
.p-tree.is-private { color: var(--pine); }
.p-tree.is-public { color: var(--resin); }
.p-brace { fill: none; stroke-width: 2.5; }
.p-brace.is-private { stroke: var(--pine); }
.p-brace.is-public { stroke: var(--resin); }
.p-label { font: 700 20px 'Atkinson Hyperlegible', system-ui, sans-serif; }
.p-label.is-private { fill: var(--pine); }
.p-label.is-public { fill: var(--resin-text); }

/* Barres */
.bars { display: grid; gap: 1.6rem; }
.bar-label { font-weight: 700; margin-bottom: .45rem; }
.bar-note { display: block; font-weight: 400; font-size: .92rem; color: var(--mist); }
.bar-line, .bar-axis { display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem; gap: .9rem; align-items: center; }
.bar { width: 100%; height: 2.75rem; border-radius: 6px; }
.bar-track { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.bar-row:nth-child(1) .bar-fill { fill: var(--pine); }
.bar-row:nth-child(2) .bar-fill { fill: var(--resin); }
.bar-value { font-family: 'Literata', Georgia, serif; font-size: 1.75rem; font-weight: 600; font-feature-settings: 'lnum', 'tnum'; }
.bar-axis { font-size: .85rem; color: var(--mist); }
.bar-ticks { display: flex; justify-content: space-between; border-top: 1px solid var(--line-strong); padding-top: .3rem; }

/* La vie d'une parcelle */
.chap-extra { margin-top: clamp(3.5rem, 9vw, 6rem); }
.life-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .life-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; } }
.extra-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-variation-settings: 'opsz' 48; margin-bottom: 1rem; }
.chap-extra .chap-text > p:not(.chap-sources) { color: var(--ink-2); max-width: 46ch; }
.chap-extra .chap-text > p + p { margin-top: 1rem; }
.viz--life { background: var(--paper-2); border-radius: 18px; padding: clamp(1rem, 3vw, 1.75rem); }
.life-age {
  font-family: 'Literata', Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1;
  font-feature-settings: 'lnum', 'tnum'; color: var(--pine);
}
.life { width: 100%; height: auto; margin-top: .5rem; overflow: visible; }
.l-tree, .l-sapling { color: var(--pine); }
.l-ground, .l-axis { stroke: var(--line-strong); stroke-width: 2; }
.l-band { fill: var(--resin); }
.l-cursor { fill: var(--paper-3); stroke: var(--ink); stroke-width: 3; }
.l-tick { fill: var(--mist); font: 18px 'Atkinson Hyperlegible', system-ui, sans-serif; }
@media (max-width: 40rem) { .l-tick { font-size: 30px; } }
.life-stages { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; font-size: 1rem; }
.life-stages li { transition: color .3s; }
.life-stages li.is-dim { color: var(--mist); }
.stage-when { display: inline-block; min-width: 8.5rem; font-weight: 700; }
.viz--life figcaption { font-size: .9rem; }

/* Surfaces à l'échelle */
.viz--squares { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .viz--squares { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
  .viz--squares figcaption { grid-column: 1 / -1; }
}
.squares { width: 100%; height: auto; max-width: 24rem; overflow: visible; }
.sq--storm { fill: color-mix(in srgb, var(--pine) 22%, transparent); stroke: var(--pine); stroke-width: 1.5; }
.sq--fire { fill: var(--resin); }
.sq--dot { fill: var(--danger); }
.sq-ring { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 3 3; }
.sq-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.sq-key { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .1rem .65rem; }
.sq-key strong { grid-column: 2; font-family: 'Literata', Georgia, serif; font-size: 1.4rem; font-weight: 600; font-feature-settings: 'lnum'; }
.sq-swatch { width: 1rem; height: 1rem; margin-top: .3rem; border-radius: 3px; }
.sq-key--storm .sq-swatch { background: color-mix(in srgb, var(--pine) 22%, transparent); border: 1.5px solid var(--pine); }
.sq-key--fire .sq-swatch { background: var(--resin); }
.sq-key--dot .sq-swatch { width: .6rem; height: .6rem; margin: .5rem 0 0 .2rem; border-radius: 50%; background: var(--danger); }

/* ---------- Fin de page ---------- */
.cta-box {
  background: var(--paper-2); border-left: 4px solid var(--resin); border-radius: 0 18px 18px 0;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.cta-box .actions { margin-top: 1.6rem; }
.sources-grid { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .sources-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.foret-sources h2 { margin-bottom: 1.25rem; }
.method { margin: 0; padding-left: 1.1rem; display: grid; gap: .85rem; font-size: 1rem; color: var(--ink-2); }
.sources { margin: 0; padding-left: 1.5rem; display: grid; gap: 1.1rem; font-size: 1rem; }
.sources li { scroll-margin-top: 6rem; }
.sources li::marker { color: var(--resin-text); font-weight: 700; }
.sources li:target { background: var(--resin-wash); border-radius: 6px; outline: 6px solid var(--resin-wash); }
.src-used { display: block; margin-top: .15rem; font-size: .94rem; color: var(--mist); }

@media print {
  .viz--life .life-age, .scroll-cue { display: none !important; }
  .chap { break-inside: avoid; padding-block: 8mm; }
}