/* Thermo — « le four ». Direction taste-skill « One motif » (seed 590949892), couleurs prises au sujet :
   brique réfractaire, blanc d'incandescence, ambre de la flamme ; le froid en bleu. Motif : la boucle du cycle de Stirling.
   Une seule famille, Mona Sans, dont l'axe de largeur sert à « dilater » le texte avec la température. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../vendor/fonts/mona-sans-latin-standard-normal.woff2") format("woff2"); }
@font-face { font-family: "Mona Sans"; font-style: italic; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../vendor/fonts/mona-sans-latin-standard-italic.woff2") format("woff2"); }

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url("../vendor/fonts/anybody-latin-standard-normal.woff2") format("woff2"); }

/* Trois températures. Le décor (src/decor.js) règle html[data-temp] selon la section lue.
   Couleurs conventionnelles : rouge-orangé pour le chaud, bleu pour le froid. */
:root, html[data-temp="chaud"] {
  --bg: #120806; --surface: rgba(38, 16, 10, 0.84); --surface-2: #3b1a10; --well: #0b0403;
  --ink: #ffefe0; --muted: #e8c2a8; --line: rgba(255, 239, 224, 0.16);
  --hot: #ff7a2a; --hot-ink: #1c0703; --hot-2: #ffb347;
  --glow: 255, 110, 40;
}
html[data-temp="tiede"] {
  --bg: #120d0c; --surface: rgba(33, 25, 24, 0.84); --surface-2: #362926; --well: #080606;
  --ink: #fbefe6; --muted: #dcc4b6; --line: rgba(251, 239, 230, 0.16);
  --hot: #ff9a52; --hot-ink: #1c0b03; --hot-2: #ffc98a;
  --glow: 255, 150, 80;
}
html[data-temp="froid"] {
  --bg: #050d14; --surface: rgba(11, 27, 40, 0.84); --surface-2: #163246; --well: #02070b;
  --ink: #eaf6ff; --muted: #acc9dd; --line: rgba(234, 246, 255, 0.16);
  --hot: #5cc8ff; --hot-ink: #021320; --hot-2: #b8e8ff;
  --glow: 92, 200, 255;
}
:root {
  --chaleur: #ff8a3d; --travail: #9fd4ff; --courant: #ffd166;
  --ok-bg: #1f4a2c; --ok-ink: #c9f2c1; --ko-bg: #6b1b14; --ko-ink: #ffd0c4; --warn-bg: #5e3c0c; --warn-ink: #ffe2a6;
  --sans: "Mona Sans", system-ui, sans-serif;
  --display: "Anybody", "Mona Sans", system-ui, sans-serif;
  --m: clamp(16px, 2.6vw, 40px);
  --r: 18px;
  --s-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --s-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --s-display: clamp(2.9rem, 6.4vw, 7.4rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --hit: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #8a3a26 var(--bg); scroll-padding-top: 84px; }
body { margin: 0; transition: background-color 900ms ease, color 900ms ease; background: var(--bg); color: var(--ink); font: 400 var(--s-body)/1.55 var(--sans); letter-spacing: -0.005em; caret-color: var(--hot); overflow-x: clip; }
::selection { background: var(--hot); color: var(--hot-ink); }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; font-stretch: 108%; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; background: var(--hot); color: var(--hot-ink); padding: 12px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
.num, output, .kpi b, td.n { font-variant-numeric: tabular-nums; font-stretch: 92%; }
.unit { color: var(--muted); font-size: 0.78em; margin-left: 0.22em; font-weight: 400; }
.muted, .note, .src { color: var(--muted); }
.note, .src { font-size: var(--s-small); }
.src a { color: var(--ink); }

/* ── Barre de navigation ── */
.topnav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--m); background: var(--bg); transition: background-color 900ms ease; }
.mark { font-family: var(--display); display: inline-flex; align-items: center; gap: 10px; min-height: var(--hit); text-decoration: none; font-weight: 650; font-size: 1.35rem; letter-spacing: -0.04em; font-stretch: 100%; transition: font-stretch 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mark:hover { font-stretch: 125%; } }
.mark svg { flex: none; }
.links { display: flex; gap: 4px; align-items: center; }
.links a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 0.97rem; color: var(--muted); }
.links a[aria-current="page"] { color: var(--ink); background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .links a:hover { color: var(--ink); } }
.topnav .menu-btn { display: none; }
dialog.menu { border: 0; margin: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: var(--bg); color: var(--ink); }
dialog.menu::backdrop { background: transparent; }
dialog.menu nav { display: grid; gap: 4px; padding: 20px var(--m); }
dialog.menu a { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; padding: 8px 0; text-decoration: none; }
dialog.menu[open] { transition: opacity 240ms var(--ease-drawer), transform 240ms var(--ease-drawer); }
@starting-style { dialog.menu[open] { opacity: 0; transform: translateY(-14px); } }

/* ── Cadre et grille ── */
main { display: block; padding: 0 var(--m) 0; }
main:focus { outline: none; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.sect { padding-block: clamp(80px, 12vw, 180px); }
.sect-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 48px; }
.sect-head h2 { font-size: var(--s-head); }
.lead { font-size: var(--s-lead); line-height: 1.35; max-width: 36ch; }

/* ── Boutons et contrôles ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 560; font-size: 0.98rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 160ms ease, font-stretch 300ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--hot); color: var(--hot-ink); font-weight: 650; }
.btn.small { min-height: var(--hit); padding: 0 16px; font-size: 0.92rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .btn:not([disabled]):hover { font-stretch: 112%; } .btn:not(.primary):not([disabled]):hover { background: #7d2d1c; } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stack { display: grid; gap: 16px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: 999px; background: var(--well); }
.seg label { position: relative; display: flex; align-items: center; min-height: var(--hit); padding: 0 14px; border-radius: 999px; font-size: 0.93rem; cursor: pointer; color: var(--muted); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--hot); color: var(--hot-ink); font-weight: 600; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--hot); outline-offset: 2px; }
.field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; }
.field label { font-size: 0.95rem; }
.field output { font-size: 1.05rem; font-weight: 560; }
.field input[type="range"] { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: var(--hit); margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--surface-2); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 5px solid var(--well); transition: transform 140ms var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 5px solid var(--well); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--hot); } /* taste-skill-ignore : anneau de focus, pas une ombre */
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--hot); } /* taste-skill-ignore : anneau de focus */
input[type="range"]:disabled { opacity: 0.4; }
select, input[type="text"], input[type="search"] { min-height: var(--hit); padding: 0 16px; border: 0; border-radius: 999px; background: var(--well); color: var(--ink); font-size: 1rem; }
select option { background: var(--well); }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--hit); font-size: 0.95rem; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--hot); }

/* ── Accueil : le motif géant, vivant ── */
.hero { position: relative; min-height: calc(100svh - 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); overflow: hidden; }
.hero-text { grid-column: 1 / span 6; position: relative; z-index: 2; display: grid; gap: 28px; padding-block: 40px; }
.hero h1 { font-size: clamp(2.6rem, 4.7vw, 5.8rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 800; }
.hero h1 span { display: block; white-space: nowrap; font-stretch: var(--dilat, 100%); transition: font-stretch 260ms var(--ease-out); }
.hero .lead { max-width: 34ch; }
.hero-shape { position: absolute; z-index: 1; width: min(62vw, 122vh); aspect-ratio: 1; left: 46vw; top: 50%; transform: translateY(-55%); touch-action: none; cursor: ns-resize; }
.hero-shape svg { width: 100%; height: 100%; overflow: visible; }
.hero-shape path.boucle { transition: fill 300ms ease; }
.hero-live { display: grid; gap: 12px; max-width: 420px; }
.readouts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 32px; }
.readouts div { display: grid; }
.readouts span { font-size: var(--s-small); color: var(--muted); }
.readouts b { font-size: 1.7rem; font-weight: 560; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ── Phrase avec vignettes ── */
.statement { max-width: 30ch; margin-inline: auto; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2; font-weight: 520; letter-spacing: -0.025em; text-align: center; }
.thumb { display: inline-block; width: 1.7em; height: 1.05em; vertical-align: -0.12em; margin-inline: 0.12em; border-radius: 0.16em; object-fit: cover; background: var(--surface); filter: sepia(0.35) contrast(1.05); }

/* ── Vitrine des ateliers : plaque carrée ── */
.plate { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; margin-inline: calc(-1 * var(--m)); background: var(--surface); }
.plate-pic { display: grid; place-items: center; padding: 40px; background: var(--well); }
.plate-pic img { width: 100%; max-width: 640px; aspect-ratio: 1; object-fit: cover; clip-path: url(#motif); filter: sepia(0.55) saturate(1.4) contrast(1.05); }
.plate-pic canvas { width: 100%; max-width: 640px; aspect-ratio: 1; }
.plate-text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 5vw, 72px); }
.plate-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.plate-tabs button { border: 0; background: none; padding: 8px 0; min-height: var(--hit); font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.plate-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; text-decoration: underline 2px var(--hot); text-underline-offset: 0.4em; }
.plate-body h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); margin-bottom: 24px; }
.plate-body p { max-width: 38ch; }
.plate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.plate-actions a { display: flex; align-items: flex-end; min-height: 96px; padding: 18px; background: var(--surface-2); text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: background-color 160ms ease; }
.plate-actions a:first-child { background: var(--hot); color: var(--hot-ink); border-radius: var(--r) 0 0 var(--r); }
.plate-actions a:last-child { border-radius: 0 var(--r) var(--r) 0; }

/* ── Menu des chapitres, puces = la boucle ── */
.menu-cat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 40px; }
.menu-cat h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.menu-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; text-decoration: none; }
.menu-item svg { grid-row: 1 / span 2; width: 56px; height: 56px; }
.menu-item b { display: flex; justify-content: space-between; gap: 12px; font-size: 1.12rem; font-weight: 620; letter-spacing: -0.02em; }
.menu-item b span { font-weight: 400; color: var(--muted); white-space: nowrap; font-size: 0.95rem; }
.menu-item small { font-size: 0.97rem; color: var(--muted); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .menu-item:hover b { text-decoration: underline 2px var(--hot); text-underline-offset: 0.3em; } }

/* ── Méthode de travail : accordéon de panneaux teintés ── */
.how-intro { margin-bottom: 64px; }
.how-intro h2 { grid-column: 1 / span 5; font-size: clamp(2.2rem, 4vw, 3.75rem); }
.how-intro p { grid-column: 7 / span 5; font-size: 1.12rem; }
.accordion { display: flex; height: 520px; border-radius: var(--r); overflow: hidden; }
.acc { position: relative; flex: 0 0 76px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; transition: flex-basis 420ms var(--ease-drawer); color: var(--hot-ink); }
.acc[data-open="true"] { flex: 1 1 58%; }
.acc button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.acc .acc-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.acc:not([data-open="true"]) .acc-name { position: absolute; left: 24px; bottom: 22px; transform: rotate(-90deg); transform-origin: left bottom; translate: 1.1em 0; }
.acc .acc-body { display: none; max-width: 46ch; font-size: 1.05rem; }
.acc[data-open="true"] .acc-body { display: grid; gap: 14px; }
.acc[data-open="true"] .acc-name { font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; }
.acc .acc-body a { color: inherit; font-weight: 600; }

/* ── Conventions : fiches à onglets ── */
.drawer { max-width: 820px; margin-inline: auto; }
.drawer h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 48px; }
.tabcard { position: relative; margin-top: -24px; padding-top: 40px; }
.tabcard:first-of-type { margin-top: 0; }
.tabcard .tab { position: absolute; top: 0; left: calc(var(--i) * 118px); height: 42px; padding: 10px 22px; border-radius: 14px 14px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--hot-ink); background: var(--c); }
.tabcard button { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 22px 26px 34px; border-radius: 0 var(--r) var(--r) var(--r); background: var(--c); color: var(--hot-ink); font-size: 1.22rem; font-weight: 560; letter-spacing: -0.015em; }
.tabcard .answer { display: none; padding: 0 26px 30px; margin-top: -14px; border-radius: 0 0 var(--r) var(--r); background: var(--c); color: var(--hot-ink); font-size: 1.05rem; max-width: none; }
.tabcard[data-open="true"] .answer { display: block; }
.tabcard .answer p { max-width: 52ch; }

/* ── Pied de page : la marque construite en blocs ── */
.foot { padding: 64px var(--m) 32px; background: var(--well); }
.blocks { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 180px; }
.blocks span { flex: 1; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px 10px 0 0; color: var(--well); font-weight: 800; font-size: clamp(3rem, 12vw, 13rem); line-height: 0.8; letter-spacing: -0.05em; font-stretch: 112%; overflow: hidden; }
.foot-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 56px; font-size: 0.97rem; }
.foot-cols ul { display: grid; gap: 8px; grid-column: span 2; }
.foot-cols a { color: var(--muted); text-decoration: none; }
.foot-cols .credits { grid-column: 7 / -1; color: var(--muted); font-size: var(--s-small); }
.foot-cols .credits a { color: var(--ink); }

/* ── Chapitre ── */
.chap-head { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; min-height: 78svh; align-content: end; padding-block: 56px 72px; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); overflow: hidden; }
.chap-head .shape { position: absolute; right: -4vw; top: 4vh; width: min(56vw, 820px); aspect-ratio: 1; }
.chap-head-text { grid-column: 1 / span 8; position: relative; z-index: 1; display: grid; gap: 22px; }
.chap-num { font-size: var(--s-lead); color: var(--muted); }
.chap-head h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6.4rem); line-height: 0.92; letter-spacing: -0.045em; }
.chap-head .lead { max-width: 40ch; }
.chap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-bottom: 120px; }
.rail { grid-column: 1 / span 3; }
.rail-in { position: sticky; top: 92px; display: grid; gap: 18px; padding-right: 8px; }
.rail svg { width: 120px; height: 120px; }
.rail ol { display: grid; gap: 2px; counter-reset: s; }
.rail a { display: block; padding: 6px 0; font-size: 0.95rem; color: var(--muted); text-decoration: none; line-height: 1.3; }
.rail a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.chap-body { grid-column: 4 / -1; min-width: 0; }
.sec { padding-block: 72px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.sec.solo { grid-template-columns: minmax(0, 1fr); }
.sec.solo > .sec-text { max-width: 70ch; }
.sec-text { display: grid; gap: 18px; min-width: 0; }
.sec h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); }
.sec h2:focus { outline: none; }
.renvois { font-size: var(--s-small); color: var(--muted); }
.renvois a { color: var(--ink); }
.prose p, .prose li { max-width: 66ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul li { position: relative; padding-left: 26px; margin-top: 8px; }
.prose ul li::before, .hyp li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 12px; background: var(--hot); clip-path: url(#motif); }
.eq { overflow-x: auto; overflow-y: hidden; padding: 6px 0; }
.katex { font-size: 1.08em; }
.fig { position: sticky; top: 92px; display: grid; gap: 12px; min-width: 0; }
.fig-well { border-radius: var(--r); background: var(--well); padding: 18px; display: grid; gap: 14px; }
.fig figcaption { font-size: var(--s-small); color: var(--muted); }
.fig figcaption b { color: var(--ink); font-weight: 600; }
.bench-wrap { grid-column: 1 / -1; padding-top: 16px; }
.chap-body .title-row h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.pic { margin: 0; display: grid; gap: 10px; }
.pic img { width: 100%; border-radius: var(--r); filter: sepia(0.5) saturate(1.3); background: var(--well); }

.formule { border-radius: var(--r); background: var(--surface); padding: 24px; display: grid; gap: 18px; }
.formule .eq { font-size: 1.25rem; }
.formule .eq .t { border-radius: 6px; padding: 0 2px; transition: background-color 160ms ease, color 160ms ease; }
.formule .eq .t.on { background: var(--hot); color: var(--hot-ink); }
.termes { display: grid; gap: 6px; }
.termes button { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 14px; align-items: baseline; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 0.98rem; color: var(--muted); }
.termes button .k { color: var(--ink); font-size: 1.05rem; }
.termes button[aria-pressed="true"], .termes button:focus-visible { background: var(--surface-2); color: var(--ink); }
.retenir { border-radius: var(--r); background: var(--hot); color: var(--hot-ink); padding: 22px 24px; display: grid; gap: 10px; }
.retenir h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.retenir li { position: relative; padding-left: 22px; }
.retenir li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 9px; background: var(--hot-ink); clip-path: url(#motif); }
.question { border-radius: var(--r); background: var(--surface); padding: 22px 24px; display: grid; gap: 14px; }
.question fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.question legend { font-weight: 600; margin-bottom: 8px; font-size: 1.05rem; }
.question label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); cursor: pointer; min-height: var(--hit); }
.question label input { margin-top: 0.3em; accent-color: var(--hot); width: 18px; height: 18px; flex: none; }
.question label.ok { background: var(--ok-bg); color: var(--ok-ink); }
.question label.ko { background: var(--ko-bg); color: var(--ko-ink); }
.feedback { font-size: 1rem; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .feedback { opacity: 0; transform: translateY(6px); } }
.feedback.ok { background: var(--ok-bg); color: var(--ok-ink); }
.feedback.ko { background: var(--ko-bg); color: var(--ko-ink); }
.chap-suite { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 72px; }
.chap-suite > div { border-radius: var(--r); background: var(--surface); padding: 24px; display: grid; gap: 14px; align-content: start; }
.chap-suite h2 { font-size: 1.5rem; }
.chap-next { background: var(--hot) !important; color: var(--hot-ink); text-decoration: none; }
.chap-next b { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.035em; line-height: 1; font-weight: 650; }

/* ── Listes : exercices, ateliers, méthodes ── */
.page-head { padding-block: clamp(56px, 9vw, 120px) 48px; display: grid; gap: 20px; }
.page-head h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.6rem); letter-spacing: -0.045em; line-height: 0.92; }
.entries { display: grid; gap: 6px; }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 18px 20px; border-radius: 14px; background: var(--surface); text-decoration: none; transition: background-color 160ms ease; }
.entry small { grid-column: 1; color: var(--muted); font-size: 0.95rem; }
.entry .pill { grid-row: 1 / span 2; grid-column: 2; }
@media (hover: hover) and (pointer: fine) { .entry:hover { background: var(--surface-2); } }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; font-size: 0.85rem; font-weight: 560; white-space: nowrap; flex: none; background: var(--surface-2); color: var(--ink); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill.ko { background: var(--ko-bg); color: var(--ko-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card { border-radius: var(--r); background: var(--surface); padding: 22px; display: grid; gap: 10px; align-content: start; }
.card h2, .card h3 { font-size: 1.3rem; letter-spacing: -0.025em; line-height: 1.1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.toolbar input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.steps { counter-reset: e; display: grid; gap: 10px; }
.steps li { counter-increment: e; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 12px; }
.steps li::before { content: counter(e); font-weight: 700; color: var(--hot); font-size: 1.2rem; }
.callout { border-radius: var(--r); background: var(--surface); padding: 20px 24px; }
.step { padding: 22px 0; display: grid; gap: 12px; }
.step + .step { margin-top: 8px; padding-top: 30px; }
.answer-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.answer-row input { width: 11em; }
details { border-radius: 14px; background: var(--surface); padding: 0 20px; }
details + details { margin-top: 6px; }
details summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 560; }
details[open] { padding-bottom: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th { text-align: left; font-weight: 400; color: var(--muted); font-size: 0.85rem; padding: 8px 12px 8px 0; }
td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
th.n, td.n { text-align: right; padding-right: 0; padding-left: 12px; white-space: nowrap; }
tr.total td { border-top-color: var(--muted); font-weight: 600; }
tr.on td { background: rgba(255, 181, 71, 0.12); }
.table-wrap { overflow-x: auto; }
.progress { height: 8px; border-radius: 4px; background: var(--well); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--hot); border-radius: 4px; }

/* ── Paillasse : les ateliers 3D (vues de src/views/labo.js) ── */
.lab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.lab > .stage { grid-column: 1 / span 7; grid-row: 1; }
.lab > .wide { grid-column: 1 / span 7; grid-row: 2; }
.lab > .side { grid-column: 8 / -1; grid-row: 1 / span 2; display: grid; gap: 20px; }
.lab > .full { grid-column: 1 / -1; }
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.title-row h1, .title-row h3 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem); letter-spacing: -0.045em; }
.title-row p { color: var(--muted); max-width: 62ch; margin-top: 12px; }
.title-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stage { border-radius: var(--r); overflow: hidden; background: var(--well); }
.stage-view { position: relative; height: 440px; background: var(--well); }
.stage-view canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline-offset: -3px; }
.stage-view canvas:active { cursor: grabbing; }
.stage-view .fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.stage-view .fallback svg { max-width: 100%; max-height: 100%; }
.stage-view .fallback text { fill: var(--ink); }
.stage-tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stage-tools .btn { min-width: var(--hit); padding: 0 12px; background: rgba(92, 29, 18, 0.9); }
.stage-foot { padding: 14px 18px 16px; font-size: var(--s-small); color: var(--muted); display: grid; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 18px; height: 8px; border-radius: 4px; display: inline-block; flex: none; }
.scale { display: inline-flex; border-radius: 4px; overflow: hidden; }
.scale i { width: 16px; height: 8px; }
.panel { border-radius: var(--r); background: var(--surface); padding: 22px; min-width: 0; }
.panel > h2, .panel > h4 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1.1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-head h2, .panel-head h4 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.1; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; }
.kpi { background: var(--well); padding: 12px 14px; display: grid; gap: 2px; border-radius: 12px; }
.kpi span { font-size: 0.82rem; color: var(--muted); }
.kpi b { font-size: 1.45rem; font-weight: 560; letter-spacing: -0.02em; white-space: nowrap; }
.kpi small { font-size: 0.8rem; color: var(--muted); }
.ledger { display: grid; gap: 10px; }
.ledger-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 7.8em; gap: 12px; align-items: center; font-size: 0.95rem; }
.ledger-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.ledger .bar { position: relative; height: 16px; background: none; padding: 0; }
.ledger .bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--line); }
.ledger .bar i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--c, var(--ink)); }
.verdict { font-size: var(--s-small); color: var(--muted); }
.hyp li { position: relative; padding-left: 26px; margin-top: 8px; font-size: 0.97rem; }
.hyp.deux { columns: 2; column-gap: 48px; }
.hyp.deux li { break-inside: avoid; }
.plot { width: 100%; height: auto; display: block; overflow: visible; }
.plot text { font: 12px var(--sans); fill: var(--muted); }
.plot .axis-title { font-size: 12.5px; fill: var(--ink); }
.plot .g-grid { stroke: rgba(252, 235, 213, 0.1); }
.plot .g-base { stroke: rgba(252, 235, 213, 0.45); }

/* ── Animations d'entrée (une fois, sans masquer le contenu si le script échoue) ── */
.reveal { opacity: 0; transform: translateY(22px); }
html.sans-gsap .reveal { transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ── Tablette et téléphone ── */
@media (max-width: 1100px) {
  .links { display: none; }
  .topnav .menu-btn { display: inline-flex; }
  .lab > .stage, .lab > .side, .lab > .wide { grid-column: 1 / -1; grid-row: auto; }
  .hyp.deux { columns: 1; }
  .rail { display: none; }
  .chap-body { grid-column: 1 / -1; }
  .sec { grid-template-columns: minmax(0, 1fr); }
  .fig { position: static; }
  .chap-suite { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { align-items: start; min-height: calc(100svh - 72px); grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero h1 span { white-space: normal; }
  .chap-head h1 { font-size: 8.6vw; }
  .chap-head { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: 10vw; }
  .hero-text { grid-column: 1 / -1; padding-top: 6svh; gap: 20px; }
  .hero h1 { font-size: 11vw; }
  .hero-shape { position: relative; grid-column: 1 / -1; width: calc(100% + 2 * var(--m)); left: auto; top: auto; margin: 8% calc(-1 * var(--m)) 4%; transform: none; }
  .readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
  .readouts b { font-size: 1.3rem; }
  .hero-live { max-width: none; }
  .statement { text-align: left; font-size: 1.5rem; margin-inline: 0; }
  .plate { grid-template-columns: 1fr; min-height: 0; }
  .plate-pic { padding: 16px; }
  .plate-text { padding: 24px 16px 32px; }
  .menu-cols { grid-template-columns: 1fr; gap: 28px; }
  .menu-item { grid-template-columns: 44px minmax(0, 1fr); }
  .menu-item svg { width: 44px; height: 44px; }
  .how-intro h2, .how-intro p { grid-column: 1 / -1; }
  .accordion { flex-direction: column; height: auto; }
  .acc { flex: none; min-height: 64px; justify-content: center; }
  .acc[data-open="true"] { flex: none; padding-block: 24px; }
  .acc:not([data-open="true"]) .acc-name { position: static; transform: none; translate: none; font-size: 1.1rem; }
  .tabcard .tab { left: calc(var(--i) * 40px); padding-inline: 14px; }
  .blocks { height: 22svh; }
  .foot-cols ul { grid-column: span 6; }
  .foot-cols .credits { grid-column: 1 / -1; }
  .chap-head { min-height: 64svh; }
  .chap-head .shape { width: 120vw; right: -40vw; top: -12vh; }
  .chap-head-text { grid-column: 1 / -1; }
  .stage-view { height: 340px; }
  .panel { padding: 18px; }
  .seg { display: flex; border-radius: 22px; }
  .seg label { flex: 1 1 auto; justify-content: center; }
  .ledger-row { grid-template-columns: 3.6em minmax(0, 1fr) 7em; }
  .entry { padding: 16px; }
  .grid > * { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity 200ms ease; transform: none; }
  .btn:active, input[type="range"]:active::-webkit-slider-thumb { transform: none; }
  .acc, dialog.menu[open], .feedback { transition-property: opacity; }
  .mark, .hero h1 span, .btn { transition: none; }
}
@media print { .topnav, .rail, .stage-tools, .foot { display: none; } body { background: #fff; color: #000; } }

/* ── Forge et givre : décor, portraits, faisceau ── */
.decor { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: -1; pointer-events: none; }
html:has(.decor) body { background: transparent; }
html:has(.decor) .topnav { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.panel, .card, .formule, .question, .callout, .entry, .chap-suite > div, details { transition: background-color 900ms ease; }


/* Portraits gravés, teintés par la température de la section : orange à la forge, bleu au givre. */
.portrait { position: relative; margin: 0; background: var(--hot); overflow: hidden; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.25) brightness(1.05); transition: none; }
.portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: var(--well); color: var(--ink); font-size: var(--s-small); }
.chap-head .portrait { position: absolute; right: 0; top: 0; bottom: 0; width: min(44vw, 640px); background: var(--hot); opacity: 0.9;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent); mask-image: linear-gradient(to left, #000 45%, transparent); } /* taste-skill-ignore : fondu du portrait dans le décor */
.chap-head .portrait figcaption { background: transparent; text-align: right; color: var(--hot-ink); font-weight: 600; }
.chap-head .shape { display: none; }
.pantheon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: end; }
.pantheon li { grid-column: span 3; display: grid; gap: 12px; }
.pantheon li:nth-child(4n + 2) { transform: translateY(-48px); }
.pantheon li:nth-child(4n + 3) { transform: translateY(-96px); }
.pantheon li:nth-child(4n + 4) { transform: translateY(-24px); }
.pantheon .portrait { aspect-ratio: 4 / 5; border-radius: var(--r); }
.pantheon b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.05; }
.pantheon small { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.pantheon a { color: var(--ink); }


@media (max-width: 760px) {
  .chap-head .portrait { width: 100%; opacity: 0.35; }
  .pantheon { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
  .pantheon li { flex: 0 0 72%; scroll-snap-align: start; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) { :root, html[data-temp] { --surface: var(--surface-2); } }

/* SplitText : un mot ne se coupe jamais entre deux lettres. */
.hero h1 span > div, .chap-head h1 > div, .page-head h1 > div { white-space: nowrap; }

/* ═══ Format de lecture sans cartes, labo pleine largeur (inspiré de l'économie de Flux, au monde de la thermo) ═══ */
:root { --r: 0px; }
.formule { background: none; border-block: 1px solid var(--line); padding: 22px 0; gap: 14px; }
.formule .eq { font-size: 1.35rem; }
.termes { gap: 0; }
.termes button { border-radius: 0; padding: 10px 0; border-top: 1px solid var(--line); grid-template-columns: 6em minmax(0, 1fr); }
.termes button .k { color: var(--hot); }
.termes button[aria-pressed="true"], .termes button:focus-visible { background: none; color: var(--ink); }
.retenir { background: none; color: var(--ink); padding: 0; gap: 8px; }
.retenir h3 { color: var(--hot); font-size: 1rem; }
.retenir li::before { background: var(--hot); }
.question { background: none; border: 1px solid var(--line); padding: 20px; }
.question legend::before { content: "Question "; color: var(--hot); }
.question label { border-radius: 0; background: none; border: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .question label:hover { border-color: var(--hot); } }
.question label.ok { background: var(--ok-bg); border-color: transparent; }
.question label.ko { background: var(--ko-bg); border-color: transparent; }
.feedback { border-radius: 0; }
.callout { background: none; border: 1px solid var(--line); }
.card { background: none; border-top: 1px solid var(--line); padding: 22px 0 0; }
.cards { gap: 40px 32px; }
.entry { background: none; border-radius: 0; border-top: 1px solid var(--line); padding: 16px 0; }
@media (hover: hover) and (pointer: fine) { .entry:hover { background: none; color: var(--hot); } }
.chap-suite > div { background: none; border-top: 2px solid var(--hot); padding: 20px 0 0; }
.chap-next { border-radius: 0 !important; }
details { background: none; border-radius: 0; border-top: 1px solid var(--line); padding: 0; }
.pill { border-radius: 2px; }
.btn, .seg, .seg label, select, input[type="text"], input[type="search"] { border-radius: 4px; }
.renvois::before { content: "Renvois  "; color: var(--hot); font-weight: 600; }
.sec h2 { counter-increment: sec; }
.chap-body { counter-reset: sec fig; }
.sec h2::before { content: var(--ch, "") "." counter(sec) "  "; color: var(--hot); }
figure.fig { counter-increment: fig; }
.fig figcaption b::after { content: " " counter(fig) "."; }

/* Le labo occupe toute la largeur : scène au centre, réglages posés sur la scène, courbes et bilans à droite. */
.lab { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 0; margin-inline: calc(-1 * var(--m)); border-block: 1px solid var(--line); background: color-mix(in srgb, var(--well) 70%, transparent); }
.lab > .stage { grid-column: 1; grid-row: 1; border-radius: 0; background: none; align-self: start; display: flex; flex-direction: column; }
.lab > .stage .stage-view { height: min(76vh, 740px); background: none; }
.lab > .side { display: contents; }
.lab > .side > .panel:first-child { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; z-index: 4; width: min(360px, 42%); max-height: 58vh; overflow: auto; margin: 0 0 84px 20px; background: color-mix(in srgb, var(--well) 88%, transparent); border: 1px solid var(--line); }
.lab > .side > .panel:last-child { grid-column: 2; grid-row: 1; align-self: stretch; max-height: calc(min(76vh, 740px) + 64px); overflow: auto; border-left: 1px solid var(--line); }
.lab > .wide { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
.lab > .full { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.lab .panel { border-radius: 0; background: none; padding: 20px; }
.lab > .side > .panel:first-child { background: color-mix(in srgb, var(--well) 88%, transparent); }
.lab .stage-foot { padding: 12px 20px; }
.stage-tools .btn { background: color-mix(in srgb, var(--well) 80%, transparent); border: 1px solid var(--line); }
.kpi { border-radius: 0; background: none; border-top: 1px solid var(--line); padding: 10px 0; }
.kpis { gap: 0 16px; }
.lab .eq { font-size: 1.05rem; padding: 4px 0 10px; }
.masque { position: relative; }
.masque > :not(.voile) { filter: blur(7px); opacity: 0.35; pointer-events: none; }
.voile { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 10px; padding: 20px; text-align: center; }
.predire { border: 1px solid var(--hot); padding: 16px; display: grid; gap: 10px; }
.predire p b { color: var(--hot); }
.predire .row { gap: 6px; }

/* Le dock des chapitres : un thermomètre dont le mercure monte jusqu'au chapitre lu. */
.dock { position: fixed; left: 50%; bottom: 14px; z-index: 25; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: color-mix(in srgb, var(--well) 92%, transparent); border: 1px solid var(--line); }
.dock .tube { position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; margin-top: -2px; background: var(--line); z-index: -1; }
.dock .tube i { display: block; height: 100%; width: var(--niveau, 0%); background: var(--hot); transition: width 600ms var(--ease-out); }
.dock a { display: grid; place-items: center; min-width: 44px; height: 44px; font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--muted); background: var(--well); border: 1px solid var(--line); }
.dock a[aria-current="page"] { background: var(--hot); color: var(--hot-ink); border-color: var(--hot); }
.dock a.bulbe { min-width: 44px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .dock a:not([aria-current]):hover { color: var(--ink); border-color: var(--hot); } }
body { padding-bottom: 80px; }

@media (max-width: 1100px) {
  .lab { grid-template-columns: minmax(0, 1fr); }
  .lab > .stage, .lab > .side > .panel:first-child, .lab > .side > .panel:last-child, .lab > .wide { grid-column: 1; grid-row: auto; width: auto; max-height: none; margin: 0; justify-self: stretch; border-left: 0; }
  .lab > .stage .stage-view { min-height: 360px; }
}
@media (max-width: 760px) { .dock { bottom: 8px; gap: 2px; padding: 4px; } .dock a { min-width: 34px; height: 44px; font-size: 0.9rem; } }
/* Réglages dans la colonne de droite, sous le diagramme : la scène reste dégagée. */
.lab > .side { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
.lab > .side > .panel:first-child { order: 2; grid-column: auto; grid-row: auto; align-self: stretch; width: auto; max-height: none; overflow: visible; margin: 0; z-index: auto; border: 0; border-top: 1px solid var(--line); background: none; }
.lab > .side > .panel:last-child { order: 1; max-height: none; overflow: visible; border-left: 0; }
@media (max-width: 1100px) { .lab > .side { grid-column: 1; grid-row: auto; border-left: 0; } }

/* ═══ Identité « diagramme indicateur » (14 novembre) ═══
   Fond graphite, accent cuivre et laiton. Les graphes et figures sont des cartes d'indicateur (papier, encre),
   comme celles que traçait l'indicateur de Watt. Rouge-orangé = chaud, bleu = froid, seulement sur les données. */
/* Planche d'ingénieur (14 novembre, choisie par l'utilisateur) : la page entière est le papier de l'indicateur.
   Crème, grille millimétrée imprimée en vermillon, encre brun-noir. Les scènes 3D gardent une fenêtre sombre et chaude. */
:root, html[data-temp], html[data-temp="chaud"], html[data-temp="tiede"], html[data-temp="froid"] {
  --bg: #f3ead8; --surface: #fbf6eb; --surface-2: #e8dcc3; --well: #241b16;
  --ink: #2a1f17; --muted: #6a5646; --line: rgba(42, 31, 23, 0.16);
  --hot: #b9421a; --hot-ink: #fff8ee; --hot-2: #9c6b1c; --glow: 185, 66, 26;
  --grille: 185, 66, 26;
  --carte: #fbf7ee; --carte-encre: #2a1f17; --carte-gris: #85796a; --carte-stylet: #c0392b;
  --chaleur: #c8401a; --travail: #2a62a8;
  --ok-bg: #d9ecd2; --ok-ink: #1f4a2c; --ko-bg: #f6d5cc; --ko-ink: #6b1b14; --warn-bg: #f4e1b5; --warn-ink: #5e3c0c;
}
/* Le papier est sur la racine : le décor (z-index −1) se peint au-dessus, sous le contenu. */
html:has(.decor) body, body { background: transparent; }
html { scrollbar-color: #b9421a var(--bg);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(var(--grille), 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grille), 0.11) 1px, transparent 1px),
    linear-gradient(rgba(var(--grille), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grille), 0.05) 1px, transparent 1px);
  background-size: 220px 220px, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
::selection { background: #f0c9a8; color: var(--ink); }
.fig-well, .lab > .side > .panel:last-child, .carte {
  background: var(--carte); color: var(--carte-encre); box-shadow: 0 1px 2px rgba(42, 31, 23, 0.08), 0 8px 24px -12px rgba(42, 31, 23, 0.25);
  --ink: var(--carte-encre); --muted: #6b6052; --line: rgba(42, 31, 23, 0.16);
  --well: #efe5d1; --surface-2: #e3d6bb; --hot: #b05a22; --hot-ink: #fff6ea;
}
.fig-well .plot text, .lab .plot text { fill: #6b6052; }
.fig-well .plot .axis-title, .lab .plot .axis-title { fill: var(--carte-encre); }
.plot .g-grid { stroke: rgba(42, 31, 23, 0.12); }
.plot .g-base { stroke: rgba(42, 31, 23, 0.55); }
.lab > .side > .panel:last-child h2, .lab > .side > .panel:last-child h4 { color: var(--carte-encre); }
.fig-well input[type="range"]::-webkit-slider-thumb { background: var(--carte-encre); border-color: var(--carte); }
/* Ce qui supposait un fond sombre. */
html:has(.decor) .topnav { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .btn:not(.primary):not([disabled]):hover { background: #ddcdb0; } }
.foot { background: #e9dcc2; border-top: 1px solid var(--line); }
.portrait figcaption { background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); }
.dock { background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 6px 20px -10px rgba(42, 31, 23, 0.4); }
.dock a { background: var(--surface); }
.lab > .stage { background: var(--well); color: #f3ead8; --ink: #f3ead8; --muted: #c9b9a6; --line: rgba(243, 234, 216, 0.16); }
/* Le réseau de Clapeyron en décor : isothermes vermillon, adiabatiques à l'encre, gravés en traits fins. */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor svg { position: absolute; right: -6vw; top: 6vh; width: min(78vw, 1100px); height: auto; -webkit-mask-image: linear-gradient(105deg, transparent 8%, #000 55%); mask-image: linear-gradient(105deg, transparent 8%, #000 55%); }
.decor .iso { fill: none; stroke: rgb(var(--grille)); stroke-width: 1.4; opacity: 0.28; transition: opacity 400ms ease, stroke-width 400ms ease; }
.decor .iso.lue { opacity: 0.75; stroke-width: 2.6; }
.decor .adia { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.16; stroke-dasharray: 1 5; stroke-linecap: round; }
.decor text { fill: var(--ink); opacity: 0.35; font: 600 22px var(--display); }
@media (max-width: 760px) { .decor svg { right: -40vw; top: 18vh; width: 150vw; opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .decor .iso { transition: none; } }
.stage-tools [data-vue="plein"] { min-width: auto; }
.lab.plein { position: fixed; inset: 0; z-index: 60; }
.lab.plein > .wide, .lab.plein > .full, .lab:fullscreen > .wide, .lab:fullscreen > .full { display: none; }
@media (prefers-reduced-motion: reduce) { .decor .aiguille { transition: none; } }

/* La carte d'indicateur de l'accueil, posée de biais comme une carte épinglée. */
.hero-shape svg { transform: rotate(-4deg); filter: drop-shadow(0 22px 28px rgba(42, 31, 23, 0.2)); }
/* Gravures et portraits imprimés sur kraft : niveaux de gris multipliés sur un ton sépia, comme une planche. */
.plate-pic { background: #e2d0ad; }
.plate-pic img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.portrait, .chap-head .portrait { background: #dcc6a0; }
.chap-head .portrait figcaption { color: var(--ink); }
/* Paillasse : la fenêtre 3D reste sombre, la colonne des réglages est sur le papier de la page. */
.lab { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.lab.plein, .lab:fullscreen { background: var(--bg); }
/* Creux sur papier (sélecteurs, champs, lectures) : distinct de la fenêtre sombre des scènes 3D (--well). */
:root { --creux: #e6d8bd; }
.seg, select, input[type="text"], input[type="search"], select option, .progress, .kpi, .pic img { background: var(--creux); }
input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb { border-color: var(--bg); }
.lab > .side > .panel:first-child { background: transparent; }
.fig-well .seg, .fig-well .kpi, .carte .kpi, .lab > .side > .panel:last-child .kpi { background: #efe5d1; }
.chap-head > :not(.portrait) { position: relative; z-index: 1; }

/* Plein écran : scène à gauche, réglages à droite ; sur écran étroit ou vertical, scène en haut, réglages dessous. */
html:has(.lab.plein) { overflow: hidden; }
.lab.plein, .lab:fullscreen { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 38vw); grid-template-rows: 100dvh; width: 100vw; height: 100dvh; margin: 0; overflow: hidden; border: 0; }
.lab.plein > .stage, .lab:fullscreen > .stage { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; height: 100dvh; border-radius: 0; }
.lab.plein > .stage .stage-view, .lab:fullscreen > .stage .stage-view { flex: 1; height: auto; min-height: 0; }
.lab.plein > .side, .lab:fullscreen > .side { grid-column: 2; grid-row: 1; max-height: 100dvh; overflow: auto; border-left: 1px solid var(--line); }
@media (max-width: 760px), (max-aspect-ratio: 1 / 1) {
  .lab.plein, .lab:fullscreen { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58dvh 42dvh; }
  .lab.plein > .stage, .lab:fullscreen > .stage { height: 58dvh; }
  .lab.plein > .side, .lab:fullscreen > .side { grid-column: 1; grid-row: 2; max-height: 42dvh; border-left: 0; border-top: 1px solid var(--line); }
  .lab.plein .stage-foot, .lab:fullscreen .stage-foot { display: none; } /* la légende reste visible hors plein écran */
}

/* Source de l'accueil : un (i) en bas à droite, la fiche s'ouvre au survol, au focus clavier ou au toucher. */
.hero .info { position: absolute; right: var(--m); bottom: 28px; z-index: 3; }
.info-btn { display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink); cursor: help; box-shadow: 0 1px 2px rgba(42, 31, 23, 0.12), 0 6px 16px -8px rgba(42, 31, 23, 0.35); }
.info-btn svg { width: 22px; height: 22px; }
.info-fiche { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 2 * var(--m))); padding: 14px 16px; background: var(--surface); color: var(--ink); font-size: var(--s-small); line-height: 1.5; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 4px rgba(42, 31, 23, 0.08), 0 14px 30px -14px rgba(42, 31, 23, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(0.97); transform-origin: bottom right; transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms; }
.info-fiche p + p { margin-top: 8px; }
.info:hover .info-fiche, .info:focus-within .info-fiche { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .info-fiche { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; } }
@media (max-width: 760px) { .hero .info { bottom: 84px; } }