/* L'Hexagone décodé — maquette « L'Atelier »
   Inspiration : les expériences à manipuler des musées de sciences.
   Bleu marine partout (fond, plaques, cartels), ambre pour ce qui se manipule ou ce qui est actif.
   Le crème ne sert qu'aux touches et aux petites étiquettes. */

:root {
  --nuit: #0a1029;
  --marine: #0f1838;
  --plaque: #16214a;
  --plaque-2: #1d2a5c;
  --cartel: #1b2754;
  --trait: #34447f;
  --trait-doux: #26346a;
  --texte: #f3efe4;
  --texte-2: #c3c9e2;
  --texte-3: #9aa3c7;
  --papier: #f4f1e8;
  --encre: #111a3a;
  --encre-2: #434c6e;
  --ambre: #ffa21f;
  --ambre-fonce: #b86500;
  --touche: #ebe7da;
  --touche-bord: #8d92a8;
  /* données : France en ambre, un seul pays comparé en cyan « bleu d'architecte »,
     le reste en gris-bleu. Paire France / comparaison validée sur #16214a
     (validate_palette.js --mode dark --surface "#16214a" : tout passe). */
  --d-france: #d07f00;
  --d-autre: #1a9db5;
  --d-moy: #8d99c9;
  --d-gris: #4f5d93;
  --d-grille: #2a376b;

  --f-signal: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-texte: "Inria Sans", "Trebuchet MS", sans-serif;
  --f-mono: "Barlow Condensed", "Arial Narrow", sans-serif;

  --largeur: 1240px;
  --gouttiere: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--marine);
  color: var(--texte);
  font: 400 19px/1.55 var(--f-texte);
  font-kerning: normal;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .8em; }
h1, h2, h3, h4 { font-family: var(--f-signal); font-weight: 600; line-height: 1.02; margin: 0; hyphens: manual; text-wrap: balance; }
h1 { font-size: clamp(42px, 6.2vw, 76px); letter-spacing: -.005em; }
h2 { font-size: clamp(34px, 4.2vw, 50px); }
h3 { font-size: clamp(25px, 2.5vw, 31px); line-height: 1.08; }
h4 { font-size: 22px; }
small { font-size: 15px; }
abbr { text-decoration: none; font-variant-caps: all-small-caps; letter-spacing: .03em; }
.sc { font-variant-caps: all-small-caps; letter-spacing: .03em; }
.nb { white-space: nowrap; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }

.page { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------- Bandeau ---------- */
.bandeau { background: var(--nuit); border-bottom: 1px solid var(--trait-doux); }
.bandeau .page { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; flex-wrap: wrap; }
/* logotype composé : le nom seul, coupé comme une plaque de musée */
.marque { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; padding: 12px 0; font: 600 28px/1 var(--f-signal); letter-spacing: .005em; }
.marque-nom { display: inline-block; padding: 6px 12px 6px 0; border-right: 2px solid var(--texte); }
.marque-suite { display: inline-block; padding: 6px 0 6px 12px; font-weight: 500; color: var(--texte-2); }
.nav { display: flex; gap: 6px 26px; flex-wrap: wrap; font: 500 19px/1 var(--f-signal); }
.nav a { text-decoration: none; padding: 12px 0 9px; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--trait); }
.nav a[aria-current] { border-bottom-color: var(--ambre); }

/* ---------- Signes numérotés (signalétique) ---------- */
/* plaques de signalétique : chiffres crème sur marine, angles droits.
   L'ambre n'y apparaît pas : il reste réservé à ce qui se manipule. */
.signe {
  display: inline-grid; place-items: center; flex: none;
  min-width: 52px; height: 52px; padding: 0 8px;
  background: var(--texte); color: var(--encre);
  font: 700 32px/1 var(--f-signal); border-radius: 0;
}
.signe.petit { min-width: 36px; height: 36px; font-size: 22px; }
.signe.creux { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 2px var(--texte); }

/* ---------- Étiquettes Fait / Projection / Débat ---------- */
.etiquette {
  width: fit-content;
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 16px/1 var(--f-signal); letter-spacing: .01em;
  padding: 5px 9px 5px 7px; border: 1.5px solid currentColor; border-radius: 2px;
  vertical-align: middle; white-space: nowrap;
}
.etiquette::before { content: ""; width: 10px; height: 10px; flex: none; }
.etiquette.fait::before { background: currentColor; }
.etiquette.projection { border-style: dashed; }
.etiquette.projection::before { width: 14px; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px); }
.etiquette.debat::before { border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.etiquette.fort::before, .etiquette.faible::before { display: none; }
.marque-signe-pm { font: 700 20px/1 var(--f-signal); width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 2px; flex: none; }
.marque-signe-pm.plus { background: var(--texte); color: var(--encre); }
.marque-signe-pm.moins { box-shadow: inset 0 0 0 2px var(--texte); color: var(--texte); }

/* ---------- Sources ---------- */
.source { font-size: 15px; line-height: 1.45; color: var(--texte-2); margin: 0; }
.source b { font: 600 16px/1 var(--f-signal); color: var(--texte); margin-right: 4px; }
.source a { color: var(--texte); }
.pied-exp { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 16px; }

/* =========================================================
   LA FAMILLE DE COMMANDES : des touches rectangulaires
   (une touche d'action, des touches de choix, la glissière),
   et un seul geste spécial, le sélecteur rotatif de la dette.
   ========================================================= */

/* 1. Touche d'action (déclencher) : la même touche, plus large, avec son pictogramme.
   Elle s'allume en ambre le temps de l'appui. */
.poussoir {
  display: inline-flex; flex-direction: row; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 20px 0 14px; margin: 0 0 4px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--touche); color: var(--encre); font: 600 20px/1.05 var(--f-signal); text-align: left;
  box-shadow: 0 4px 0 var(--touche-bord), 0 4px 0 1px var(--nuit);
  -webkit-tap-highlight-color: transparent; text-decoration: none;
  transition: transform .06s ease-out, box-shadow .06s ease-out, background .1s;
}
.poussoir.grand { min-height: 64px; font-size: 22px; padding-right: 24px; }
.poussoir .cap { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--encre); }
.poussoir .cap svg { width: 22px; height: 22px; fill: none; stroke: var(--touche); stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; }
.poussoir:hover { background: #fffaf0; }
.poussoir:active, .poussoir.enfonce { transform: translateY(3px); background: var(--ambre); box-shadow: 0 1px 0 var(--ambre-fonce), 0 1px 0 1px var(--nuit); }
.poussoir[aria-pressed="true"] { background: var(--ambre); transform: translateY(3px); box-shadow: 0 1px 0 var(--ambre-fonce), 0 1px 0 1px var(--nuit); }
.poussoir:focus-visible { outline: 3px solid var(--texte); outline-offset: 4px; }
.poussoir[disabled] { cursor: not-allowed; opacity: .45; }
.poussoir .legende-btn { max-width: 190px; }

/* voyant (lampe témoin) */
.voyant { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #2c3866; box-shadow: inset 0 0 0 2px #0a1029; flex: none; vertical-align: middle; }
.voyant.allume { background: var(--ambre); box-shadow: inset 0 0 0 2px #7a4300; }

/* 2. Touches (choisir) */
.touches { display: flex; flex-wrap: wrap; gap: 14px 12px; margin: 0; padding: 0; list-style: none; }
.touche {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: 52px; min-width: 52px; padding: 9px 14px 11px; margin: 0 0 4px;
  background: var(--touche); color: var(--encre); border: 0; border-radius: 3px;
  box-shadow: 0 4px 0 var(--touche-bord), 0 4px 0 1px var(--nuit);
  font: 600 19px/1.05 var(--f-signal); text-align: left; cursor: pointer;
  transition: transform .06s ease-out, box-shadow .06s ease-out, background .1s;
  -webkit-tap-highlight-color: transparent;
}
.touche::before { content: ""; width: 20px; height: 5px; border-radius: 2px; background: #c3bfb0; }
.touche.sans-voyant::before { display: none; }
.touche:hover { background: #fffaf0; }
.touche:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--touche-bord), 0 1px 0 1px var(--nuit); }
.touche[aria-pressed="true"], .touche[aria-checked="true"], .touche[aria-selected="true"] {
  background: var(--ambre); transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ambre-fonce), 0 1px 0 1px var(--nuit);
}
.touche[aria-pressed="true"]::before, .touche[aria-checked="true"]::before, .touche[aria-selected="true"]::before { background: var(--encre); }
.touche small { font: 400 14px/1.2 var(--f-texte); color: var(--encre-2); }
.touche[aria-pressed="true"] small, .touche[aria-checked="true"] small { color: var(--encre); }
.touche.carree { align-items: center; justify-content: center; width: 52px; padding: 0; font-size: 28px; }
.touche.carree::before { display: none; }
.touche[disabled] { opacity: .45; cursor: not-allowed; }
.touche .val { font: 600 15px/1 var(--f-mono); }
.touche.sombre { background: var(--plaque-2); color: var(--texte); box-shadow: 0 4px 0 var(--nuit), 0 4px 0 1px var(--nuit); }
.touche.sombre::before { background: #3a4987; }
.touche.sombre small { color: var(--texte-2); }
.touche.sombre:hover { background: #24336d; }
.touche.sombre[aria-pressed="true"], .touche.sombre[aria-checked="true"] { background: var(--ambre); color: var(--encre); }
.touche.sombre[aria-pressed="true"] small, .touche.sombre[aria-checked="true"] small { color: var(--encre); }
.touche:focus-visible { outline: 3px solid var(--texte); outline-offset: 4px; }

/* 3. Interrupteur à bascule (deux positions) */
.bascule-bloc { display: inline-flex; flex-direction: column; gap: 8px; }
.bascule-titre { font: 600 17px/1 var(--f-signal); color: var(--texte-2); }
.bascule { width: fit-content; display: inline-flex; padding: 5px; gap: 5px; background: var(--nuit); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--trait); }
.bascule button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 15px;
  background: var(--plaque-2); color: var(--texte); border: 0; border-radius: 2px;
  font: 600 19px/1 var(--f-signal); cursor: pointer;
  box-shadow: inset 0 -4px 0 #0c1431; transition: transform .06s, box-shadow .06s, background .1s;
}
.bascule button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #34427a; box-shadow: inset 0 0 0 2px #0a1029; }
.bascule button[aria-checked="true"] { background: var(--ambre); color: var(--encre); box-shadow: inset 0 2px 0 var(--ambre-fonce); transform: translateY(1px); }
.bascule button[aria-checked="true"]::before { background: var(--encre); box-shadow: none; }
.bascule button:hover:not([aria-checked="true"]) { background: #24336d; }
.bascule button:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }
.bascule-note { font-size: 15px; color: var(--texte-2); max-width: 30ch; margin: 0; }

/* 4. Sélecteur rotatif (étapes) */
.rotatif { position: relative; width: 260px; height: 182px; flex: none; }
.rotatif .bouton-rond {
  position: absolute; left: 50%; top: 108px; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; background: var(--plaque-2); border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 6px var(--nuit), 0 0 0 7px var(--trait), inset 0 -5px 0 #0c1431;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.rotatif .bouton-rond::before { /* l'index */
  content: ""; position: absolute; left: 50%; top: 9px; width: 6px; height: 32px; margin-left: -3px; border-radius: 3px; background: var(--ambre);
}
.rotatif .bouton-rond::after { /* le creux central */
  content: ""; position: absolute; inset: 30px; border-radius: 50%; background: #18234f; box-shadow: inset 0 2px 3px #070c22;
}
.rotatif .bouton-rond:focus-visible { outline: none; box-shadow: 0 0 0 6px var(--nuit), 0 0 0 9px var(--texte), inset 0 -5px 0 #0c1431; }
.rotatif .pos {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  border: 0; background: var(--nuit); color: var(--texte-2); cursor: pointer;
  font: 700 21px/1 var(--f-signal); box-shadow: inset 0 0 0 2px var(--trait);
}
.rotatif .pos[aria-checked="true"] { background: var(--ambre); color: var(--encre); box-shadow: none; }
.rotatif .pos:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 2px var(--texte-3); color: var(--texte); }
.rotatif .pos:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }
.rotatif .graduation { position: absolute; left: 50%; top: 108px; width: 2px; height: 62px; margin-left: -1px; background: var(--trait); transform-origin: 50% 0; }
.commande-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.commande-etapes .fleches { display: flex; gap: 12px; }

/* 5. Glissière (estimer) */
.glissiere { display: flex; align-items: center; gap: 14px; width: 100%; }
.glissiere .rail { position: relative; flex: 1; min-width: 0; padding: 6px 0 28px; }
.glissiere input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 52px; margin: 0; background: transparent; cursor: pointer;
}
.glissiere input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--trait), inset 0 2px 2px #050817; }
.glissiere input[type="range"]::-moz-range-track { height: 12px; border-radius: 6px; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--trait); }
.glissiere input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 50px; margin-top: -19px; border-radius: 4px; border: 0;
  background: linear-gradient(90deg, transparent 13px, var(--encre) 13px 17px, transparent 17px), var(--touche);
  box-shadow: 0 4px 0 var(--touche-bord), 0 4px 0 1px var(--nuit);
}
.glissiere input[type="range"]::-moz-range-thumb {
  width: 30px; height: 50px; border-radius: 4px; border: 0;
  background: linear-gradient(90deg, transparent 13px, var(--encre) 13px 17px, transparent 17px), var(--touche);
  box-shadow: 0 4px 0 var(--touche-bord);
}
.glissiere input[type="range"]:focus-visible { outline: none; }
.glissiere input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 4px 0 var(--touche-bord), 0 0 0 3px var(--marine), 0 0 0 6px var(--texte); }
.glissiere input[type="range"]:active::-webkit-slider-thumb { background: linear-gradient(90deg, transparent 13px, var(--encre) 13px 17px, transparent 17px), var(--ambre); box-shadow: 0 2px 0 var(--ambre-fonce); }
.glissiere .graduations { position: absolute; left: 15px; right: 15px; bottom: 0; height: 26px; font: 500 13px/1 var(--f-mono); color: var(--texte-3); }
.glissiere .graduations span { position: absolute; top: 10px; transform: translateX(-50%); white-space: nowrap; }
.glissiere .graduations span::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 6px; background: var(--trait); }

/* Afficheur (lecture numérique) */
.afficheur {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px 9px; min-width: 200px; font-variant-numeric: tabular-nums;
  background: var(--nuit); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--trait), inset 0 3px 6px #050817;
  font: 600 36px/1 var(--f-mono); color: var(--ambre); letter-spacing: .01em;
}
.afficheur small { font: 500 15px/1.2 var(--f-texte); color: var(--texte-2); letter-spacing: 0; }

/* =========================================================
   EXPÉRIENCES (manips)
   ========================================================= */
.exp { margin: 56px 0; scroll-margin-top: 90px; }
.exp-tete { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin-bottom: 18px; max-width: 900px; }
.consigne { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--texte-2); margin: 0 0 14px; }
.consigne::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ambre); transform: translateY(1px); }

/* Console : plaque (le schéma) + pupitre (les commandes) + cartel (l'explication).
   Angles droits, pas d'ombre : des panneaux fixés au mur. */
.console { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; background: var(--plaque); border: 1px solid var(--trait-doux); }
.console > .plaque { grid-column: 1; }
.console > .cartel { grid-column: 2; grid-row: 1 / span 2; }
.console > .pupitre { grid-column: 1; }
.console.pleine { grid-template-columns: minmax(0, 1fr); }
.console.pleine > .cartel { grid-column: 1; grid-row: auto; }

.plaque { position: relative; padding: 26px 28px; min-width: 0; }
.pupitre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px;
  padding: 22px 28px 26px; background: var(--plaque-2); border-top: 1px solid var(--trait);
}
.pupitre-groupe { display: flex; flex-direction: column; gap: 10px; }
.pupitre-titre { font: 600 16px/1 var(--f-signal); color: var(--texte-3); margin: 0; }

/* Cartel : une plaque marine plus claire, texte crème, filet en tête comme un cartel imprimé */
.cartel {
  background: var(--cartel); color: var(--texte); padding: 22px 26px 24px; border-left: 1px solid var(--trait);
  font-size: 17px; line-height: 1.5; min-width: 0; box-shadow: inset 0 3px 0 var(--texte);
}
.cartel h4 { font-size: 25px; margin-bottom: 8px; }
.cartel .cartel-mot { font: 600 15px/1 var(--f-signal); color: var(--texte-3); margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.cartel .gros { font: 600 34px/1.05 var(--f-signal); margin: 4px 0 8px; }
.cartel ul { padding-left: 1.1em; margin: 0 0 .8em; }
.cartel li { margin-bottom: .3em; }
.cartel hr { border: 0; border-top: 1px solid var(--trait); margin: 16px 0; }
.cartel p { color: var(--texte); }
.cartel strong { color: var(--texte); }

.niv-approfondie { display: none; }
[data-niveau="approfondie"] .niv-approfondie { display: block; }
[data-niveau="approfondie"] span.niv-approfondie { display: inline; }
[data-niveau="approfondie"] .niv-decouverte { display: none; }
.approfondi-bloc { border-left: 3px solid var(--ambre); padding: 4px 0 4px 16px; margin: 14px 0; }
.approfondi-bloc .niv-titre { font: 600 15px/1 var(--f-signal); color: var(--ambre); margin-bottom: 6px; display: block; }

/* ---------- Graphiques ---------- */
.graph { position: relative; }
.graph svg { overflow: visible; }
.graph-titre { font: 600 22px/1.15 var(--f-signal); margin: 0 0 4px; }
.graph-sous { font-size: 15px; color: var(--texte-2); margin: 0 0 14px; }
.graph text { font-family: var(--f-texte); fill: var(--texte-2); }
.graph .axe text { font: 500 14px var(--f-mono); fill: var(--texte-3); font-variant-numeric: tabular-nums; }
.graph .grille line { stroke: var(--d-grille); stroke-width: 1; }
.graph .zero { stroke: var(--texte-3); stroke-width: 1; }
.info-bulle {
  position: absolute; pointer-events: none; z-index: 5; background: var(--papier); color: var(--encre);
  padding: 8px 11px; border-radius: 4px; font-size: 15px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(5, 8, 23, .5); transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .1s;
}
.info-bulle.visible { opacity: 1; }
.info-bulle b { font: 600 18px/1 var(--f-signal); display: block; margin-bottom: 2px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 15px; color: var(--texte-2); }
.legende li { display: flex; align-items: center; gap: 7px; }
.legende i { width: 14px; height: 14px; border-radius: 2px; background: var(--c); flex: none; }
.legende i.trait { height: 3px; border-radius: 2px; }
.legende i.rond { border-radius: 50%; }
.legende i.losange { transform: rotate(45deg) scale(.82); border-radius: 1px; }

details.donnees { margin-top: 12px; font-size: 15px; }
details.donnees summary { cursor: pointer; font: 600 17px/1 var(--f-signal); color: var(--texte-2); display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; min-height: 44px; }
details.donnees summary::marker { content: ""; }
details.donnees summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 17px; }
details.donnees[open] summary::before { content: "−"; }
details.donnees table { border-collapse: collapse; width: 100%; max-width: 560px; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
details.donnees th, details.donnees td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--trait-doux); }
details.donnees td:last-child, details.donnees th:last-child { text-align: right; }
details.donnees .table-defile { max-height: 280px; overflow: auto; }
.lien-csv { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1 var(--f-signal); }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); border-top: 1px solid var(--trait-doux); padding: 44px 0 52px; font-size: 16px; color: var(--texte-2); }
.pied .page { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 40px; }
.pied h2, .pied-titre { font: 700 24px/1.1 var(--f-signal); color: var(--texte); margin: 0 0 10px; }
.pied-rubrique { font: 600 15px/1.2 var(--f-signal); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); margin: 0 0 12px; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: var(--texte); }
.pied p { margin-bottom: .5em; }
.a-remplir { display: inline-block; background: var(--ambre); color: var(--encre); padding: 2px 8px; border-radius: 2px; font-weight: 700; outline: 2px dashed var(--ambre); outline-offset: 3px; }

/* =========================================================
   ACCUEIL
   ========================================================= */
.entree { padding: 44px 0 56px; }
.entree-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 56px; align-items: end; margin-bottom: 30px; }
.entree h1 { font-size: clamp(40px, 5.4vw, 68px); }
.chapo { font-size: 21px; line-height: 1.5; color: var(--texte); margin: 0 0 14px; max-width: 34ch; }
.entree .chapo { font-size: 18px; color: var(--texte-2); margin: 0; max-width: 40ch; }

/* Plan des salles : un plan d'architecte, tracé en SVG (murs épais, portes, couloir, entrée) */
.section { padding: 64px 0; border-top: 1px solid var(--trait-doux); }
.section-tete { display: grid; grid-template-columns: 7fr 5fr; gap: 12px 48px; align-items: end; margin-bottom: 28px; }
.section-tete p { margin: 0; color: var(--texte-2); font-size: 17px; }
.plan-zone { display: grid; grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); gap: 0; align-items: stretch; border: 1px solid var(--trait-doux); }
.plan { min-width: 0; padding: 18px 18px 14px; background: var(--marine); }
.plan svg { width: 100%; height: auto; overflow: visible; }
.p-mur { fill: #cdd3ea; }
.p-sol { fill: var(--marine); }
.p-couloir { fill: #0c1431; }
.p-grille line { stroke: #1a2652; stroke-width: 1; }
.p-cote { stroke: #6b77a8; stroke-width: 1; }
text.p-cote-t { font: 500 12px var(--f-mono); fill: #8d96bd; }
.p-salle { cursor: pointer; outline: none; }
.p-salle .p-fond { fill: var(--marine); transition: fill .12s; }
.p-salle:hover .p-fond { fill: #15214a; }
.p-salle.choisie .p-fond { fill: #1b2754; }
.p-salle .p-cadre { fill: none; stroke: transparent; stroke-width: 4; }
.p-salle.choisie .p-cadre { stroke: var(--ambre); }
.p-salle:focus-visible .p-cadre { stroke: var(--texte); stroke-width: 4; stroke-dasharray: 8 5; }
.p-salle.choisie:focus-visible .p-cadre { stroke: var(--ambre); }
.p-num { fill: var(--texte); }
.p-salle.choisie .p-num { fill: var(--ambre); }
text.p-num-t { font: 700 22px var(--f-signal); fill: var(--encre); }
.p-salle.fermee .p-num { fill: none; stroke: var(--texte-2); stroke-width: 1.5; }
.p-salle.fermee.choisie .p-num { fill: var(--ambre); stroke: none; }
.p-salle.fermee text.p-num-t { fill: var(--texte-2); }
.p-salle.fermee.choisie text.p-num-t { fill: var(--encre); }
text.p-nom { font: 600 26px var(--f-signal); fill: var(--texte); }
.p-salle.fermee text.p-nom { fill: var(--texte-2); }
text.p-etat { font: 400 14px var(--f-texte); fill: var(--texte-3); }
.p-station { fill: none; stroke: var(--texte-2); stroke-width: 1.5; }
.p-salle.choisie .p-station { fill: var(--ambre); stroke: var(--ambre); }
text.p-station-t { font: 700 13px var(--f-signal); fill: var(--texte); }
.p-salle.choisie text.p-station-t { fill: var(--encre); }
.p-chemin { fill: none; stroke: #4b5785; stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.p-porte { fill: none; stroke: #cdd3ea; stroke-width: 2; }
.p-arc { fill: none; stroke: #8d96bd; stroke-width: 1.2; stroke-dasharray: 3 3; }
.p-travaux-fond { fill: #e9e4d6; }
.p-travaux-raie { fill: #111a3a; }
text.p-travaux-t { font: 700 12px var(--f-signal); fill: var(--encre); letter-spacing: .04em; }
.p-ici { fill: var(--ambre); }
.p-ici-anneau { fill: none; stroke: var(--ambre); stroke-width: 2; }
text.p-ici-t { font: 600 18px var(--f-signal); fill: var(--texte); }
text.p-couloir-t { font: 500 14px var(--f-signal); fill: #8d96bd; letter-spacing: .12em; }
.p-fleche { fill: none; stroke: var(--ambre); stroke-width: 2.5; }
.p-cartouche rect { fill: none; stroke: #6b77a8; stroke-width: 1; }
.p-cartouche line { stroke: #6b77a8; stroke-width: 1; }
.p-cartouche text { font: 500 12px var(--f-mono); fill: #8d96bd; }
.p-cartouche text.fort { font: 600 14px var(--f-signal); fill: var(--texte-2); }
.plan-cartel { display: flex; flex-direction: column; border-left: 1px solid var(--trait); }
.plan-cartel .salle-liste { list-style: none; padding: 0; margin: 4px 0 16px; counter-reset: ch; }
.plan-cartel .salle-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--trait); font-size: 16px; line-height: 1.3; }
.plan-cartel .salle-liste li b { font: 700 18px/1.1 var(--f-signal); }
.plan-cartel .salle-liste li span { color: var(--texte-2); }
.plan-cartel .salle-liste li strong { color: var(--texte); font-weight: 700; }
.plan-cartel .action { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 18px; }
.barriere { display: inline-block; width: 26px; height: 9px; background: repeating-linear-gradient(-45deg, var(--encre) 0 3px, #e9e4d6 3px 6px); }

/* Repères */
.reperes { display: grid; grid-template-columns: 4fr 4.2fr 3.8fr; gap: 0; border-top: 2px solid var(--texte); }
.repere { padding: 22px 26px 26px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.repere + .repere { padding-left: 26px; border-left: 1px solid var(--trait); }
.repere .chiffre { font: 600 64px/.95 var(--f-signal); letter-spacing: -.01em; }
.repere .chiffre sup { font-size: .5em; vertical-align: .9em; }
.repere p { margin: 0; font-size: 17px; }
.repere .lien-exp { font: 600 18px/1.1 var(--f-signal); margin-top: auto; display: inline-flex; align-items: center; gap: 8px; }
.repere svg text { font-family: var(--f-texte); }

/* Règles d'impartialité */
.regles-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.regle { display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--trait); }
.regle:first-child { border-top: 0; padding-top: 0; }
.regle .signe { grid-row: span 3; }
.regle h3 { font-size: 26px; margin-bottom: 4px; }
.regle p { color: var(--texte-2); font-size: 17px; margin: 0 0 10px; }
.specimen { background: var(--plaque); padding: 14px 16px; border: 1px solid var(--trait-doux); }
.miroir { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.miroir > div { padding: 4px 14px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.miroir > div + div { padding: 4px 0 4px 14px; border-left: 1px dashed var(--trait); }
.miroir .t { display: flex; align-items: center; gap: 8px; font: 600 17px/1 var(--f-signal); }
.miroir .v { font: 600 30px/1 var(--f-signal); }
.miroir p { font-size: 14px; margin: 0; color: var(--texte-2); line-height: 1.35; }
.compare-ligne { display: grid; grid-template-columns: 96px 1fr 62px; align-items: center; gap: 10px; font-size: 15px; margin: 4px 0; }
.compare-ligne .barre { height: 14px; background: var(--d-gris); border-radius: 0 2px 2px 0; }
.compare-ligne.fr .barre { background: var(--d-france); }
.compare-ligne.moy .barre { background: var(--d-moy); }
.compare-ligne .valeur { font: 500 14px var(--f-mono); text-align: right; }

/* Tri des étiquettes */
.tri { position: sticky; top: 16px; }
.affirmation { background: var(--nuit); color: var(--texte); border-left: 3px solid var(--texte); padding: 22px 24px; font: 500 22px/1.35 var(--f-texte); min-height: 132px; display: flex; align-items: center; position: relative; margin: 0; }
.affirmation::before { content: attr(data-num); position: absolute; top: 10px; right: 14px; font: 600 15px/1 var(--f-signal); color: var(--texte-3); }
.tri .touches { margin: 18px 0 6px; }
.tri .touche { min-width: 104px; }
.tri-retour { min-height: 4.6em; margin: 14px 0 0; font-size: 17px; color: var(--texte); display: flex; gap: 12px; align-items: flex-start; }
.tri-retour .voyant { margin-top: 6px; }

/* Enseignants */
.ens-grille { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.fiche { list-style: none; padding: 0; margin: 0; counter-reset: f; border-top: 2px solid var(--texte); }
.fiche > li { display: grid; grid-template-columns: 52px 1fr minmax(0, 17.5em); gap: 6px 18px; padding: 18px 0; border-bottom: 1px solid var(--trait); align-items: start; }
.fiche h3 { font-size: 24px; margin-bottom: 4px; }
.fiche p { margin: 0; font-size: 17px; color: var(--texte-2); }
.fiche .exemple { font-size: 15px; }
.fiche code { font: 500 14px/1.4 var(--f-mono); background: var(--nuit); color: var(--texte); padding: 2px 6px; word-break: break-all; }
.bouton-csv { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--touche); color: var(--encre); border-radius: 3px; font: 600 17px/1 var(--f-signal); text-decoration: none; box-shadow: 0 4px 0 var(--touche-bord), 0 4px 0 1px var(--nuit); min-height: 44px; }
.bouton-csv:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--touche-bord); }
.bouton-csv svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* =========================================================
   ÉCONOMIE
   ========================================================= */
.ouverture { padding: 44px 0 34px; }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 56px; align-items: end; }
.fil { font-size: 15px; color: var(--texte-3); margin: 0 0 22px; display: flex; gap: 10px; align-items: center; }
.fil a { color: var(--texte-2); }
.ouverture h1 { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.ouverture h1 .signe { min-width: 64px; height: 64px; font-size: 40px; }
.reglages { display: flex; flex-direction: column; gap: 20px; padding: 22px 24px; background: var(--plaque); border: 1px solid var(--trait-doux); }
.cles-etiquettes { display: grid; gap: 8px; margin: 0; }
.cles-etiquettes div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center; font-size: 15px; color: var(--texte-2); }

/* Parcours (navigation des chapitres) */
.parcours { position: sticky; top: 0; z-index: 20; background: var(--nuit); border-top: 1px solid var(--trait-doux); border-bottom: 1px solid var(--trait-doux); }
.parcours .page { display: flex; align-items: center; gap: 18px; }
.parcours ol { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; position: relative; overflow-x: auto; scrollbar-width: none; }
.parcours ol::-webkit-scrollbar { display: none; }
.parcours li { flex: 1 0 auto; position: relative; }
.parcours li::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--trait); z-index: 0; }
.parcours li:first-child::before { left: 50%; }
.parcours li:last-child::before { right: 50%; }
.parcours a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; text-decoration: none; font: 500 15px/1 var(--f-signal); color: var(--texte-2); min-width: 64px; }
.parcours a .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--nuit); box-shadow: inset 0 0 0 2px var(--trait); font: 700 16px/1 var(--f-signal); color: var(--texte); }
.parcours a:hover .n { box-shadow: inset 0 0 0 2px var(--texte-3); }
.parcours a[aria-current="step"] { color: var(--texte); }
.parcours a[aria-current="step"] .n { background: var(--ambre); color: var(--encre); box-shadow: 0 0 0 4px var(--nuit), 0 0 0 6px var(--ambre); }
.parcours .vu .n { background: #2a376b; }
.parcours-niveau { flex: none; }
.parcours-niveau .bascule button { min-height: 44px; font-size: 16px; padding: 0 10px; }

/* Chapitres */
.chapitre { padding: 64px 0 24px; border-top: 1px solid var(--trait-doux); scroll-margin-top: 70px; }
.chap-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; margin-bottom: 26px; align-items: center; }
.chap-tete .signe { min-width: 72px; height: 72px; font-size: 46px; }
.chap-tete .chap-mot { margin: 0 0 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chap-tete h2 { max-width: 26ch; }
.chap-intro { max-width: 64ch; color: var(--texte); font-size: 19px; }
.chap-intro p:last-child { margin-bottom: 0; }
.deux-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }

/* S1 : dans le PIB ou pas */
.pib-cadre { position: relative; }
.pib-schema svg { width: 100%; height: auto; }
.pib-exemples .touche { min-width: 0; }
.pib-exemples .touche svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.pib-exemples .touche .ligne { display: flex; align-items: center; gap: 9px; }
.pib-exemples .touche.place { opacity: .55; }
.pib-exemples .touche.place[aria-pressed="true"] { opacity: 1; }
.verdict { display: inline-flex; align-items: center; gap: 8px; font: 600 18px/1 var(--f-signal); padding: 6px 10px; }
.verdict.oui { background: var(--texte); color: var(--encre); }
.verdict.non { box-shadow: inset 0 0 0 2px var(--texte); color: var(--texte); }

.devine { display: grid; gap: 18px; }
.devine-rangee { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.devine .glissiere { max-width: 640px; }
.revelation[hidden] { display: none; }
.revelation { margin-top: 8px; }
.ecart-barres { display: grid; gap: 8px; margin: 12px 0 4px; max-width: 640px; }
.ecart-barres .l { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; font-size: 15px; color: var(--texte-2); }
.ecart-barres .b { height: 18px; border-radius: 0 3px 3px 0; background: var(--d-gris); position: relative; transition: width .6s ease-out; }
.ecart-barres .b.reel { background: var(--d-france); }
.ecart-barres .b span { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font: 500 14px var(--f-mono); color: var(--texte); white-space: nowrap; }

/* S3 dette */
.s3-schema svg { width: 100%; height: auto; }
.s3 .etape-titre { font: 600 15px/1 var(--f-signal); color: var(--encre-2); }

/* S4 */
.gaufre-zone { display: grid; gap: 14px; }
.gaufre svg { width: 100%; height: auto; }
.gaufre rect { transition: fill .25s; }
.postes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
.postes .touche { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; font-size: 18px; }
.postes .touche::before { position: absolute; left: 14px; top: 6px; width: 16px; height: 4px; }
.postes .touche .nom { padding-top: 5px; }
.postes .touche .val { flex: none; padding-top: 5px; }

/* Duel */
.duel-lignes { display: grid; gap: 4px; }
.duel-ligne { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 6px 22px; padding: 12px 0; border-top: 1px solid var(--trait-doux); align-items: center; }
.duel-ligne:first-child { border-top: 0; }
.duel-nom { font: 600 20px/1.1 var(--f-signal); }
.duel-nom small { display: block; font: 400 14px/1.3 var(--f-texte); color: var(--texte-3); margin-top: 3px; }
.duel-barres { display: grid; gap: 6px; }
.duel-b { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15px; color: var(--texte-2); }
.duel-piste { position: relative; height: 18px; }
.duel-piste .b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: var(--d-france); transition: width .45s ease-out; }
.duel-b.autre .b { background: var(--d-autre); }
.duel-piste .v { position: absolute; top: 50%; transform: translateY(-50%); font: 500 14px var(--f-mono); color: var(--texte); white-space: nowrap; transition: left .45s ease-out; }
.duel-phrase { min-height: 3em; font-size: 17px; }

/* Bilan */
.bilan { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 0; align-items: stretch; }
.bilan-col h3 { display: flex; align-items: center; gap: 12px; font-size: 30px; padding-bottom: 14px; border-bottom: 3px solid var(--texte); margin-bottom: 4px; }
.bilan-axe { position: relative; }
.bilan-axe::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--trait); }
.point { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px 18px; padding: 18px 0; border-bottom: 1px solid var(--trait-doux); }
.point h4 { font-size: 23px; line-height: 1.1; margin-bottom: 6px; }
.point .fig { font: 600 34px/1 var(--f-signal); margin-bottom: 6px; display: block; }
.point p { font-size: 16px; color: var(--texte-2); margin: 0 0 8px; }
.point .mini svg { width: 100%; height: auto; }
.point .meta { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Débat */
.debat-plateaux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--plaque); border: 1px solid var(--trait-doux); border-bottom: 0; }
.plateau { padding: 22px 26px 26px; min-width: 0; }
.plateau + .plateau { border-left: 1px solid var(--trait); }
.plateau h3 { font-size: 27px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.plateau h3 .cote { font: 700 16px/1 var(--f-signal); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--texte); flex: none; }
.plateau ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plateau li { background: var(--cartel); color: var(--texte); padding: 12px 14px; border-left: 3px solid var(--texte); font-size: 16px; line-height: 1.45; display: grid; grid-template-columns: 26px 1fr; gap: 8px; animation: tombe .35s ease-out; }
.plateau li b { font: 700 18px/1.2 var(--f-signal); }
.plateau li.vide { background: transparent; border-left: 0; box-shadow: inset 0 0 0 1.5px var(--trait); color: var(--texte-3); animation: none; min-height: 56px; display: flex; align-items: center; justify-content: center; font: 500 15px/1 var(--f-signal); }
@keyframes tombe { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.debat-pupitre { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; border: 1px solid var(--trait-doux); border-top: 1px solid var(--trait); }
.accord { margin-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; max-width: 860px; }

/* Demain */
.prevision-zone { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }

/* Retenir */
.retenir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--texte); }
.retenir li { list-style: none; padding: 16px 20px 18px 0; font-size: 17px; color: var(--texte-2); }
.retenir li + li { padding-left: 20px; border-left: 1px solid var(--trait); }
.retenir b { display: block; font: 600 34px/1 var(--f-signal); margin-bottom: 6px; color: var(--texte); }

/* Erreur de chargement des données */
.erreur-donnees { background: var(--ambre); color: var(--encre); font: 600 18px/1.35 var(--f-signal); padding: 14px 0; }
.erreur-schema { border: 1px dashed var(--texte-3); color: var(--texte-2); padding: 14px 16px; font-size: 16px; }

/* Mode projection : une seule expérience à l'écran */
[data-projeter] .chapitre, [data-projeter] .ouverture, [data-projeter] .parcours, [data-projeter] .pied, [data-projeter] .suite, [data-projeter] .a-retenir { display: none; }
[data-projeter] .chapitre.projete { display: block; border-top: 0; padding-top: 28px; }
[data-projeter] .chapitre.projete > .page > *:not(.projete):not(:has(.projete)) { display: none; }
[data-projeter] .chapitre.projete .deux-col > :not(.projete) { display: none; }
[data-projeter] .chapitre.projete .deux-col { grid-template-columns: minmax(0, 1fr); }
[data-projeter] .chapitre.projete .exp.projete { margin-top: 0; }
.projection-bandeau { display: none; }
[data-projeter] .projection-bandeau { display: flex; background: var(--ambre); color: var(--encre); font: 600 17px/1.2 var(--f-signal); padding: 10px 0; }
[data-projeter] .projection-bandeau .page { display: flex; justify-content: space-between; gap: 16px; width: 100%; }

/* =========================================================
   TÉLÉPHONE ET TABLETTE
   ========================================================= */
@media (max-width: 1080px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console > .cartel { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--trait); }
  .point { grid-template-columns: minmax(0, 1fr) 150px; }
  .plan-zone { grid-template-columns: minmax(0, 1fr); }
  .plan-cartel { border-left: 0; border-top: 1px solid var(--trait); }
}
@media (max-width: 900px) {
  :root { --gouttiere: 20px; }
  .entree-tete, .regles-grille, .ens-grille, .ouverture-grille, .section-tete, .deux-col, .prevision-zone { grid-template-columns: minmax(0, 1fr); }
  .reperes { grid-template-columns: minmax(0, 1fr); }
  .repere, .repere + .repere { padding: 22px 0; border-left: 0; border-top: 1px solid var(--trait); }
  .repere:first-child { border-top: 0; }
  .bilan { grid-template-columns: minmax(0, 1fr); }
  .bilan-axe { height: 30px; }
  .bilan-axe::before { display: none; }
  .retenir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .retenir li:nth-child(3) { padding-left: 0; border-left: 0; }
  .tri { position: static; }
  .pied .page { grid-template-columns: minmax(0, 1fr); }
  .parcours-niveau { display: none; }
}
@media (max-width: 620px) {
  :root { --gouttiere: 16px; }
  body { font-size: 17px; }
  .bandeau .page { min-height: 0; padding-top: 4px; padding-bottom: 6px; gap: 0; }
  .marque { font-size: 25px; padding: 10px 0 6px; }
  .nav { gap: 2px 18px; font-size: 17px; width: 100%; }
  .nav a { padding: 10px 0 8px; }
  .entree { padding: 26px 0 40px; }
  .entree-tete { margin-bottom: 20px; gap: 12px; }
  .chapo { font-size: 19px; }
  .entree .chapo { font-size: 17px; }
  .section { padding: 44px 0; }
  .plan { padding: 10px 6px 8px; }
  .plaque { padding: 20px 16px; }
  .pupitre { padding: 18px 16px 22px; gap: 18px; }
  .cartel { padding: 20px 18px; }
  .exp-tete .signe { min-width: 44px; height: 44px; font-size: 26px; }
  .chap-tete { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chap-tete .signe { min-width: 56px; height: 56px; font-size: 36px; justify-self: start; }
  .chap-intro { font-size: 18px; }
  .postes { grid-template-columns: minmax(0, 1fr); }
  .duel-ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .duel-b { grid-template-columns: 6.4em minmax(0, 1fr); }
  .point { grid-template-columns: minmax(0, 1fr); }
  .point .mini { max-width: 280px; }
  .debat-plateaux { grid-template-columns: minmax(0, 1fr); }
  .plateau + .plateau { border-left: 0; border-top: 1px solid var(--trait); }
  .retenir { grid-template-columns: minmax(0, 1fr); }
  .retenir li, .retenir li + li { padding: 14px 0; border-left: 0; border-top: 1px solid var(--trait); }
  .retenir li:first-child { border-top: 0; }
  .fiche > li { grid-template-columns: 44px minmax(0, 1fr); }
  .fiche > li > .exemple { grid-column: 2; }
  .ouverture h1 .signe { min-width: 52px; height: 52px; font-size: 32px; }
  .affirmation { font-size: 19px; min-height: 120px; padding: 18px; }
  .tri .touche { min-width: 0; flex: 1; }
  .regle { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .regle .signe { min-width: 36px; height: 36px; font-size: 22px; }
  .rotatif { transform: scale(.94); transform-origin: top center; }
  .afficheur { font-size: 25px; min-width: 0; }
  .cles-etiquettes div { grid-template-columns: 110px minmax(0, 1fr); }
  .parcours a { min-width: 56px; padding: 7px 4px; }
  .poussoir { font-size: 19px; }
  .poussoir.grand { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* =========================================================
   MARQUES DES GRAPHIQUES ET DES SCHÉMAS (SVG)
   ========================================================= */
.graph svg:focus-visible { outline: 3px solid var(--texte); outline-offset: 4px; border-radius: 2px; }
.m-fr { fill: var(--d-france); }
.m-autre { fill: var(--d-gris); }
.m-moy { fill: var(--d-moy); }
.m-compare { fill: var(--d-autre); }
.m-eteint { fill: #2c3868; }
.m-clair { fill: var(--texte); }
.m-vide { fill: #26336a; }
.m-actif { fill: var(--ambre); }
.rangee.survol .m, path.m.survol { filter: brightness(1.25); }
.rangee.survol .nom { fill: var(--texte); }
.graph text.nom { fill: var(--texte-2); }
.graph text.val { fill: var(--texte-2); font-family: var(--f-mono); }
.graph text.fort { fill: var(--texte); font-weight: 700; }
.repere-ligne { stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 2 3; }
.segment { stroke: var(--texte-2); stroke-width: 2; stroke-linecap: round; }
.segment.actif { stroke: var(--texte); stroke-width: 3; }
.graph text.segment-val { fill: var(--texte-2); font-family: var(--f-mono); font-weight: 600; paint-order: stroke; stroke: var(--plaque); stroke-width: 5px; stroke-linejoin: round; }
.graph text.segment-val.actif { fill: var(--texte); font-weight: 600; }
.annot text, .graph .annot text { fill: var(--texte-3); }
.annot-trait { stroke: var(--texte-3); stroke-width: 1; }
path.ligne { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
path.ligne.s-fr { stroke: var(--d-france); }
path.ligne.s-autre { stroke: var(--d-autre); }
path.ligne.s-moy { stroke: var(--d-moy); stroke-width: 2; }
path.ligne.tirets { stroke-dasharray: 6 5; }
path.aire.s-fr { fill: var(--texte); opacity: .06; }
circle.point { stroke: var(--plaque); stroke-width: 2; }
circle.point.s-fr { fill: var(--d-france); }
circle.point.s-autre { fill: var(--d-autre); }
.viseur { stroke: var(--texte-3); stroke-width: 1; }
.prev .pt { stroke: var(--plaque); stroke-width: 2; fill: var(--d-france); }
.prev.eteint { opacity: .22; }

/* S1 */
.s1-cadre { fill: #1c2858; stroke: var(--texte); stroke-width: 2; }
.s1-dehors { stroke: #4b5785; stroke-width: 1.5; }
text.s-titre { font: 600 21px var(--f-signal); fill: var(--texte); }
text.s-titre.faible { fill: var(--texte-2); }
text.s-sous { font: 400 14px var(--f-texte); fill: var(--texte-2); }
text.s-somme { font: 600 16px var(--f-signal); fill: var(--texte-3); }
.emplacement { fill: none; stroke: #3a4882; stroke-width: 1.5; stroke-dasharray: 4 4; }
text.emplacement-t { font: 600 20px var(--f-signal); fill: #3a4882; }
.jeton-fond { fill: var(--touche); }
.jeton.dernier .jeton-fond { fill: var(--ambre); }
.jeton-icone { fill: var(--encre); stroke: none; }
text.jeton-t { font: 600 16px var(--f-signal); fill: var(--encre); }
.jeton.arrive { animation: arrive .45s cubic-bezier(.2, .9, .3, 1.2); transform-box: fill-box; }
@keyframes arrive { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
.jeton.pose:hover .jeton-fond { fill: #fffaf0; }
.jeton.dernier.pose:hover .jeton-fond { fill: var(--ambre); }
.va-ajout { fill: var(--ambre); }
.va-ancien { fill: #3a4882; }
.va-fleche { fill: none; stroke: var(--texte-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* S3 */
.s3-g { transition: opacity .35s; }
.s3-g.futur { opacity: .1; }
.s3-g.futur text { opacity: 0; }
.s3-g.passe { opacity: .78; }
.s3-dep { fill: #4b5b9a; }
.s3-rec { fill: #8d99c9; }
.s3-trou { stroke: var(--ambre); stroke-width: 2; }
.s3-g.passe .s3-trou, .s3-g.futur .s3-trou { fill: #3a4882; stroke: #8d99c9; }
text.s-val { font: 600 15px var(--f-mono); fill: var(--texte); }
text.s-etiq { font: 600 17px var(--f-signal); fill: var(--texte); }
.s3-g.actuel text.s-etiq { fill: var(--ambre); }
text.s-dans { font: 600 17px var(--f-signal); fill: var(--encre); }
.s3-boite { fill: var(--plaque-2); stroke: var(--texte-2); stroke-width: 1.5; }
.s3-g.actuel .s3-boite { stroke: var(--ambre); stroke-width: 2.5; }
.s3-fleche { fill: none; stroke: #c3c9e2; stroke-width: 2.5; stroke-linecap: round; }
.s3-g.actuel .s3-fleche { stroke: var(--ambre); stroke-width: 3.5; }
.s3-g.actuel .s3-fleche { stroke-dasharray: 10 7; animation: defile 1s linear infinite; }
@keyframes defile { to { stroke-dashoffset: -17; } }
.s3-cuve { fill: none; stroke: var(--texte); stroke-width: 2.5; stroke-linejoin: round; }
.s3-dette { fill: #8d99c9; }
.s3-g.actuel .s3-dette { fill: var(--ambre); }
.s3-cent { stroke: var(--texte); stroke-width: 1.5; stroke-dasharray: 3 3; }
.s3-interets { fill: #8d99c9; }
.s3-g.actuel .s3-interets { fill: var(--ambre); }

/* S2 */
.s2-ligne { fill: none; stroke: #9aa3c7; stroke-width: 2; stroke-linecap: round; }
.s2-flux.actif .s2-ligne { stroke: var(--ambre); stroke-width: 3; }
.s2-flux.eteint .s2-ligne { stroke: #2f3c74; }
text.s2-etiq { font: 600 16px var(--f-signal); fill: var(--texte-2); }
.s2-flux.actif text.s2-etiq { fill: var(--texte); }
.s2-flux.eteint text.s2-etiq { fill: #6b77a8; }
.s2-noeud { cursor: pointer; outline: none; }
.s2-boite { fill: var(--plaque-2); stroke: var(--texte-2); stroke-width: 1.5; transition: fill .15s; }
.s2-noeud:hover .s2-boite { fill: #26346d; }
.s2-noeud:focus-visible .s2-boite { stroke: var(--texte); stroke-width: 4; }
.s2-noeud.choisi .s2-boite { fill: var(--ambre); stroke: var(--ambre); }
.s2-noeud.retrait { opacity: .55; }
text.s2-nom { font: 600 21px var(--f-signal); fill: var(--texte); pointer-events: none; }
text.s2-sous { font: 400 13px var(--f-texte); fill: var(--texte-2); pointer-events: none; }
.s2-noeud.choisi text.s2-nom, .s2-noeud.choisi text.s2-sous, .s2-noeud.choisi text.s2-puce-t { fill: var(--encre); }
.s2-puce { fill: var(--marine); stroke: var(--trait); }
.s2-noeud.choisi .s2-puce { fill: #ffc56e; stroke: var(--ambre-fonce); }
text.s2-puce-t { font: 500 15px var(--f-signal); fill: var(--texte); pointer-events: none; }
.s2-piece { fill: var(--ambre); stroke: var(--nuit); stroke-width: 2; }

/* S4 */
.w { cursor: default; }
.w-vide { fill: #26336a; }
.w-estime { fill: var(--texte-2); }
.w-a { fill: #5868a6; cursor: pointer; }
.w-b { fill: #34447f; cursor: pointer; }
.w-choisi { fill: var(--ambre); cursor: pointer; }
.w-point { fill: var(--plaque); }
.w-point.sur-choisi { fill: var(--encre); }
.w-accolade { stroke: var(--texte-3); stroke-width: 1.5; }
text.w-etiq { font: 600 15px var(--f-signal); fill: var(--texte-2); }
text.w-etiq.fort { fill: var(--ambre); }
text.w-val { font: 500 13px var(--f-mono); fill: var(--texte-3); }

[hidden] { display: none !important; }
button, .touche, .poussoir, .bascule button { hyphens: manual; -webkit-hyphens: manual; }
.bascule button { white-space: nowrap; }
.touche.deja::before { background: #5868a6; }
.touche.deja[aria-pressed="true"]::before { background: var(--encre); }
.repere .etiquette, .pied-exp .etiquette { flex: none; }
.fiche code { display: inline-block; line-height: 1.5; }
.graph text { font-variant-numeric: tabular-nums; }
.graph text.val { font-weight: 600; font-size: 15px; }
.interets-mini { margin-top: 34px; }

.bilan { margin-top: 30px; }
@media (max-width: 620px) {
  .pib-exemples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; width: 100%; }
  .pib-exemples .touche { font-size: 16px; padding: 8px 10px 10px; width: 100%; }
  .pib-exemples .touche .ligne { align-items: flex-start; gap: 7px; }
  .pib-exemples .touche svg { width: 22px; height: 22px; flex: none; }
  .tri .touches { width: 100%; }
  .tri .touche { flex: 1 1 0; padding: 9px 8px 11px; font-size: 18px; }
  .exp { margin: 44px 0; }
  .chapitre { padding-top: 48px; }
  .devine-rangee { gap: 16px; }
  .duel-ligne { padding: 10px 0; }
  .point { padding: 14px 0; }
  .postes .touche { min-height: 46px; }
  .graph-sous { font-size: 15px; }
}

.etapes-liste { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 4px; }
.etapes-liste li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; font-size: 16px; color: var(--texte-3); }
.etapes-liste li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--f-signal); box-shadow: inset 0 0 0 1.5px var(--texte-3); }
.etapes-liste li.en-cours { color: var(--texte); font-weight: 700; }
.etapes-liste li.en-cours b { background: var(--ambre); color: var(--encre); box-shadow: none; }
.etapes-liste li.fait { color: var(--texte-2); }
.etapes-liste li.fait b { background: var(--trait); box-shadow: none; color: var(--texte); }

text.s-sous.s-clair { fill: var(--texte); }
.s3-g.actuel text.s-sous.s-clair { fill: var(--texte); font-weight: 700; }

.retenir { padding: 0; margin: 0; }
.a-remplir { margin-left: 6px; }
.console.pupitre-haut > .pupitre { grid-row: 1; border-top: 0; border-bottom: 1px solid var(--trait); }
.console.pupitre-haut > .plaque { grid-row: 2; }
@media (max-width: 1080px) {
  .console.pupitre-haut > .cartel { grid-row: 3; }
}
@media (max-width: 620px) {
  .debat-plateaux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plateau { padding: 16px 10px 18px; }
  .plateau + .plateau { border-left: 1px solid var(--trait); border-top: 0; }
  .plateau h3 { font-size: 19px; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 4.4em; }
  .plateau li { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14.5px; padding: 10px; hyphens: auto; }
  .plateau li.vide { min-height: 64px; text-align: center; }
}

/* Glissière logarithmique : la note qui explique l'échelle */
.note-echelle { font-size: 14px; color: var(--texte-3); margin: -2px 0 0; max-width: 60ch; }

/* S3 : échelle commune */
text.s3-echelle { font: 500 13px var(--f-texte); fill: var(--texte-3); }

/* S4 : estimation dessinée sur la gaufre */
.w-estim-contour { fill: none; stroke: var(--texte); stroke-width: 1.6; }
.gaufre-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--texte-2); }
.gaufre-legende li { display: flex; align-items: center; gap: 8px; }
.gaufre-legende i { width: 13px; height: 13px; flex: none; }
.gaufre-legende i.reel { background: var(--ambre); }
.gaufre-legende i.estim { box-shadow: inset 0 0 0 2px var(--texte); }
.legende i.trait.pointilles { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); }
.compte-deco { font-variant-numeric: tabular-nums; }

/* =========================================================
   MAILLAGE : sommaire des salles (accueil), « Continuer la visite », « Voir aussi »
   (blocs écrits par scripts/seo.py)
   ========================================================= */
/* le numéro d'une plaque peut venir de data-n : il est dessiné, pas lu comme du texte */
.signe[data-n]::before { content: attr(data-n); }

.sommaire-grille, .suite-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.sommaire-salle, .suite-carte { background: var(--plaque, #17204a); border: 1px solid var(--trait-doux); padding: 22px; min-width: 0; }
.sommaire-salle h3 { margin: 0 0 8px; font-size: 24px; }
.sommaire-salle h3 a { color: var(--texte); text-decoration: none; display: flex; gap: 12px; align-items: center; }
.sommaire-salle h3 a:hover, .sommaire-salle h3 a:focus-visible { text-decoration: underline; }
.sommaire-salle > p { color: var(--texte-2); margin: 0 0 14px; }
.sommaire-chap { margin: 0; padding: 0; list-style: none; counter-reset: chap; display: grid; gap: 2px; }
.sommaire-chap li { counter-increment: chap; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 7px 0; border-top: 1px solid var(--trait-doux); }
.sommaire-chap li::before { content: counter(chap); font: 700 16px/1.4 var(--f-signal); color: var(--texte-2); }
.sommaire-chap a { color: var(--texte); }

.suite-carte > a { display: flex; gap: 14px; align-items: flex-start; color: var(--texte); text-decoration: none; }
.suite-carte > a:hover strong, .suite-carte > a:focus-visible strong { text-decoration: underline; }
.suite-texte { display: grid; gap: 6px; min-width: 0; }
.suite-texte strong { font: 700 22px/1.15 var(--f-signal); }
.suite-texte span { color: var(--texte-2); }
.suite-chap { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--trait-doux); font-size: 15px; color: var(--texte-2); line-height: 1.9; }
.suite-chap a { color: var(--texte); }

.voir-aussi { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--texte-2); font-size: 16px; color: var(--texte-2); max-width: 72ch; }
.voir-aussi b { color: var(--texte); font-family: var(--f-signal); font-weight: 600; letter-spacing: .02em; margin-right: 6px; }
.voir-aussi a { color: var(--texte); }

/* Contact (accueil, section enseignants) */
.ens-contact { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--trait-doux); color: var(--texte-2); font-size: 17px; }
.ens-contact a, .pied a[href^="mailto:"] { color: var(--texte); font-weight: 700; overflow-wrap: anywhere; }