/* ballottement.fr — « Calmer l'eau qui ballotte »
   Banc d'essai : fond blanc de rétroéclairage, papier millimétré orangé derrière les réservoirs,
   eau teintée au bleu de méthylène, encre noire ; une couleur par pilote. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-italique.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-grec.woff2") format("woff2");
  font-weight: 200 900;
  unicode-range: U+0370-03FF, U+1F00-1FFF;
  font-display: swap;
}

:root {
  --fond: #f6f7f5;
  --planche: #fcfcfa;
  --encre: #14161a;
  --encre-2: #474c55;
  --encre-3: #6c727c;
  --filet: #d6d9d4;
  --papier: rgba(222, 104, 46, 0.16);
  --papier-cm: rgba(222, 104, 46, 0.36);
  --eau: #1f47c4;
  --eau-surface: #0d2a86;
  --eau-reflet: #4c72e6;
  --c0: #737882;
  --c1: #cf4419;
  --c3: #7a3db3;
  --c4: #0b7a66;
  --commande: #cf4419;
  --selection: #c9d6ff;

  --sans: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mesure: 40rem;
  --gouttiere: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --espace-chapitre: clamp(5rem, 3rem + 7vw, 10rem);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  /* hauteur du bandeau collant (pages + sommaire) ; navigation.js la remplace par la hauteur mesurée */
  --hauteur-bandeau: 4.95rem;
  /* marge des lignes du bandeau et du pied : alignées sur la colonne de 88rem du contenu */
  --marge-ligne: max(var(--gouttiere), calc((100% - 88rem) / 2 + var(--gouttiere)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Une cible (ancre, élément qui reçoit le focus, planche et scène de /biblio) arrive sous le bandeau collant. Le
   décalage est porté par les cibles (scroll-margin), pas par la page : avec un scroll-padding-top sur html, Chromium
   juge masqués les liens du bandeau collant et fait remonter la page à chaque Tab. Chapitres : voir .chapitre. */
#contenu, main [id], main .planche, main :focus, .pied :focus, .biblio__scene { scroll-margin-top: calc(var(--hauteur-bandeau) + 0.75rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); color: var(--encre); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--encre-3); }
a:hover { text-decoration-color: var(--encre); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }

var, .equation { font-family: var(--serif); font-style: italic; }
sub { font-size: 0.7em; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.86em; }
math { font-family: "Source Serif 4", math; font-size: 1.12em; }

.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--encre); color: var(--fond); padding: 0.6rem 1rem;
  font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----- Bandeau : deux niveaux de navigation, de même structure sur les trois pages -----
   Ligne 1, « Pages du site » : le nom du site et les trois pages ; la page courante en gras, soulignée d'encre.
   Ligne 2, « Sommaire de la page » : les chapitres de la page, numérotés comme leurs rubriques, plus petits et gris ;
   le chapitre en cours est souligné de bleu (navigation.js). Sous 72rem, le sommaire se replie en un bouton
   « Cette page · chapitre en cours » qui ouvre la liste ; sans JavaScript, il reste une liste de liens. */
.bandeau {
  position: sticky; top: 0; z-index: 10;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
  font-family: var(--sans);
}
.bandeau__pages {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding-inline: var(--marge-ligne);
  border-bottom: 1px solid var(--filet);
}
.bandeau__pages:last-child { border-bottom: 0; }  /* page sans sommaire (404) */
/* Écran bas (téléphone à l'horizontale) : la ligne des pages part avec la page, seul le sommaire reste collé.
   2.75rem = hauteur de .bandeau__pages, bordure comprise ; navigation.js publie la partie qui reste à l'écran. Les
   pages restent en haut de page et dans le pied ; au clavier, la ligne revient tant qu'un de ses liens a le focus
   (sinon le navigateur ferait défiler la page pour montrer un lien qui resterait caché). */
@media (max-height: 31.25rem) {
  .bandeau { top: -2.75rem; }
  .bandeau:has(.bandeau__pages :focus-visible) { top: 0; }
}
.bandeau__nom {
  display: flex; align-items: baseline; align-self: center; gap: 0.6rem; min-width: 0;
  font-weight: 700; font-stretch: 88%; font-size: 1rem; line-height: 1.15; letter-spacing: 0.01em; text-decoration: none;
}
.bandeau__titre { white-space: nowrap; }
.bandeau__cadre { font-weight: 450; color: var(--encre-2); white-space: nowrap; }
.pages, .pages ul, .pages li { display: flex; }
.pages ul { gap: clamp(1rem, 0.4rem + 1.6vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.pages a {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 2px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-size: 0.9375rem; font-weight: 560; font-stretch: 90%; line-height: 1.2; white-space: nowrap;
  color: var(--encre-2); text-decoration: none;
}
/* largeur du gras réservée : la page courante ne décale pas les autres d'une page à l'autre */
.pages a::after {
  content: attr(data-texte); content: attr(data-texte) / "";
  height: 0; overflow: hidden; visibility: hidden; font-weight: 720; pointer-events: none; user-select: none;
}
.pages a:hover { color: var(--encre); border-bottom-color: var(--encre-3); }
.pages a[aria-current="page"] { color: var(--encre); font-weight: 720; border-bottom-color: var(--encre); }

.sommaire { position: relative; display: flex; align-items: stretch; min-height: 2.125rem; padding-inline: var(--marge-ligne); }
.sommaire__titre, .sommaire__mot, .sommaire__action {
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3); white-space: nowrap;
}
.sommaire__titre { flex: none; align-self: center; margin: 0 1.1rem 0 0; padding-right: 1.1rem; border-right: 1px solid var(--filet); line-height: 1.6; }
.sommaire__liste { display: flex; gap: clamp(0.9rem, 0.1rem + 1vw, 1.75rem); min-width: 0; margin: 0; padding: 0; list-style: none; }
.sommaire__liste li { display: flex; }
.sommaire__liste a {
  display: flex; align-items: center; gap: 0.4em;
  padding-top: 2px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-size: 0.8125rem; font-weight: 470; font-stretch: 92%; line-height: 1.2; white-space: nowrap;
  color: var(--encre-2); text-decoration: none;
}
.sommaire__num { font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: 0.02em; color: var(--encre-3); }
.sommaire__liste a:hover { color: var(--encre); }
.sommaire__liste a[aria-current] { color: var(--encre); border-bottom-color: var(--eau); }
.sommaire__liste a[aria-current] .sommaire__num, .sommaire__courant .sommaire__num { color: var(--eau); }
.sommaire__bouton { display: none; }
@media (max-width: 71.99rem) {
  /* sans JavaScript : la liste défile en largeur sur une ligne */
  .sommaire__liste { overflow-x: auto; scrollbar-width: none; }
  .sommaire__liste::-webkit-scrollbar { display: none; }
  .sommaire__liste a:focus-visible { outline-offset: -2px; }
}
/* Sommaire replié (navigation.js) : un bouton texte, la liste s'ouvre sous le bandeau */
@media (scripting: enabled) and (max-width: 71.99rem) {
  .sommaire__titre { display: none; }
  .sommaire__bouton {
    display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; margin: 0; padding: 0.4rem 0;
    border: 0; border-radius: 0; background: none; color: var(--encre); font: inherit; font-size: 0.8125rem; line-height: 1.2;
    text-align: left; cursor: pointer;
  }
  .sommaire__bouton:focus-visible { outline-offset: -2px; }
  .sommaire__point { color: var(--encre-3); }
  .sommaire__courant { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; font-stretch: 92%; }
  .sommaire__courant .sommaire__num { margin-right: 0.3em; }
  .sommaire__action { flex: none; padding-left: 0.75rem; border-left: 1px solid var(--filet); color: var(--encre-2); }
  .sommaire__bouton:hover .sommaire__action, .sommaire__bouton[aria-expanded="true"] .sommaire__action { color: var(--encre); }
  .sommaire__liste { display: none; }
  .sommaire--ouvert .sommaire__liste {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); column-gap: var(--gouttiere); align-content: start;
    max-height: calc(100svh - var(--bas-sommaire, var(--hauteur-bandeau))); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 0.25rem var(--marge-ligne) 1rem; background: var(--fond); border-bottom: 1.5px solid var(--encre);
  }
  /* sur plusieurs colonnes, la liste se lit de haut en bas puis colonne suivante (navigation.js compte les lignes) */
  .sommaire--ouvert .sommaire__liste.par-colonnes { grid-auto-flow: column; grid-template-rows: repeat(var(--lignes), auto); }
  .sommaire--ouvert .sommaire__liste li { border-bottom: 1px solid var(--filet); }
  .sommaire--ouvert .sommaire__liste a {
    flex: 1; gap: 0.75rem; padding: 0.7rem 0; margin: 0; border: 0; font-size: 0.9375rem; white-space: normal;
  }
  .sommaire--ouvert .sommaire__liste a[aria-current] { font-weight: 650; }
}
@media (max-width: 47.99rem) {
  .bandeau__cadre { display: none; }
  .bandeau__nom { font-size: 0.9375rem; }
  .pages a { font-size: 0.875rem; }
}
/* téléphone : le nom du site sur deux lignes, les trois pages tiennent sur la ligne jusqu'à 320 px */
@media (max-width: 29.99rem) {
  .bandeau__nom { padding-block: 0.4rem; font-size: 0.8125rem; line-height: 1.05; }
  .bandeau__titre { white-space: normal; width: 6.2em; }
  .pages ul { gap: clamp(0.7rem, 0.2rem + 2.5vw, 1.1rem); }
  .pages a { font-size: 0.8125rem; }
}

/* ----- Ouverture ----- */
.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: center;
  max-width: 88rem;
  margin: 0 auto;
  padding: clamp(2rem, 1rem + 4vw, 5rem) var(--gouttiere) clamp(3rem, 2rem + 4vw, 6rem);
  min-height: calc(100svh - var(--hauteur-bandeau));
}
.ouverture h1 {
  font-family: var(--sans);
  font-weight: 780;
  font-stretch: 72%;
  font-size: clamp(3rem, 1.6rem + 5.2vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.chapo { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); line-height: 1.5; margin: 0 0 2rem; max-width: 34rem; text-wrap: pretty; }
.signature { font-family: var(--sans); font-weight: 650; font-size: 1rem; margin: 0; padding-top: 1rem; border-top: 1.5px solid var(--encre); max-width: 34rem; }
.signature span { font-weight: 420; color: var(--encre-2); }
@media (max-width: 900px) {
  .ouverture { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* ----- Récit ----- */
.recit { max-width: 88rem; margin: 0 auto; padding: 0 var(--gouttiere); }
.chapitre {
  padding-top: var(--espace-chapitre);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: start;
}
.chapitre > h2 { grid-column: 1 / span 5; }
.chapitre > .texte { grid-column: 6 / -1; }
.chapitre > .planche, .chapitre > .references, .chapitre > .rubrique { grid-column: 1 / -1; }
/* une ancre de chapitre amène sa rubrique 1.25rem sous le bandeau, pas le blanc qui la précède (plus spécifique que
   « main [id] ») ; de même pour le graphe de /biblio, qui n'a pas ce blanc */
main .chapitre[id] { scroll-margin-top: calc(var(--hauteur-bandeau) + 1.25rem - var(--espace-chapitre)); }
main .biblio[id] { scroll-margin-top: calc(var(--hauteur-bandeau) + 1.25rem); }
.chapitre > * { min-width: 0; }
/* Rubrique : numéro et nom court du chapitre, les mêmes que dans le sommaire du bandeau */
.rubrique {
  display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 clamp(1.25rem, 0.8rem + 1.2vw, 2.25rem); padding-top: 0.65rem;
  border-top: 1px solid var(--filet);
  font-family: var(--sans); font-size: 0.75rem; font-weight: 640; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2);
}
.rubrique__num { font-variant-numeric: tabular-nums; font-weight: 720; letter-spacing: 0.04em; color: var(--eau); }
@media (max-width: 1000px) {
  .chapitre > h2, .chapitre > .texte { grid-column: 1 / -1; }
}
.chapitre--fin { padding-bottom: var(--espace-chapitre); }
.chapitre h2 {
  font-family: var(--sans);
  font-weight: 760;
  font-stretch: 75%;
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.75rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
  max-width: 14ch;
  text-wrap: balance;
}
.chapitre h3 {
  font-family: var(--sans); font-weight: 700; font-stretch: 85%;
  font-size: 1.375rem; line-height: 1.15; margin: 2.75rem 0 0.75rem;
}
.texte { max-width: var(--mesure); }
.texte p { margin: 0 0 1.1rem; text-wrap: pretty; hanging-punctuation: first; }
.texte em { font-style: italic; }
.renvoi {
  font-family: var(--sans); font-size: 0.68em; font-weight: 650; vertical-align: super; line-height: 0;
  margin-left: 0.1em; text-decoration: none; color: var(--eau);
}
.equation { margin: 1.5rem 0 1.75rem; padding: 1.25rem 0; border-block: 1px solid var(--filet); overflow-x: auto; font-style: normal; }
@media (max-width: 26rem) { .equation math { font-size: 1em; } }
.approfondir { margin: 1.5rem 0; border-top: 1.5px solid var(--encre); }
.approfondir summary {
  font-family: var(--sans); font-weight: 650; font-stretch: 90%; cursor: pointer; padding: 0.75rem 0; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline;
}
.approfondir summary::-webkit-details-marker { display: none; }
.approfondir summary::after { content: "+"; font-weight: 500; font-size: 1.3rem; line-height: 1; }
.approfondir[open] summary::after { content: "−"; }
.liste-filets { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.liste-filets li { padding: 0.65rem 0 0.65rem 1.4rem; border-top: 1px solid var(--filet); position: relative; }
.liste-filets li::before { content: ""; position: absolute; left: 0.1rem; top: 1.35rem; width: 0.55rem; height: 1.5px; background: var(--encre); }
.liste-filets li:last-child { border-bottom: 1px solid var(--filet); }

/* ----- Planches (figures) ----- */
.planche {
  position: relative;
  margin: 2.5rem 0 3rem;
  padding: clamp(0.9rem, 0.5rem + 1.2vw, 1.75rem);
  background: var(--planche);
  border: 1px solid var(--filet);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 2rem;
}
.planche::before, .planche::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--encre); pointer-events: none;
}
.planche::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.planche::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.planche--ouverture { margin: 0; }
.planche--double { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.planche--double > .commandes, .planche--double > .lectures, .planche--double > figcaption,
.planche--double > .alerte { grid-column: 1 / -1; }
@media (max-width: 900px) { .planche--double { grid-template-columns: minmax(0, 1fr); } }

.planche__scene { position: relative; min-width: 0; }
.planche__graphe, .planche__reglages, .planche__texte { min-width: 0; }
.planche__texte { font-size: 1rem; line-height: 1.55; align-self: center; }
.planche__texte p { margin: 0 0 0.9rem; }

.toile { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: pan-y; }
.planche--ouverture .toile { aspect-ratio: 16 / 11; }
.planche:not(.planche--double):not(.planche--ouverture) > .planche__scene .toile { aspect-ratio: 21 / 9; }
@media (max-width: 700px) {
  .planche:not(.planche--double):not(.planche--ouverture) > .planche__scene .toile { aspect-ratio: 4 / 3; }
  .planche--ouverture .toile { aspect-ratio: 1 / 1.02; }
}
.toile--graphe { aspect-ratio: 5 / 4; }
.toile--courbes { aspect-ratio: 21 / 8; }
.toile--barres { aspect-ratio: 21 / 7; }
.toile--carte { aspect-ratio: 1 / 1; cursor: crosshair; }
.toile--reseau { aspect-ratio: 5 / 4; }
@media (max-width: 700px) {
  .toile--courbes { aspect-ratio: 4 / 3; }
  .toile--barres { aspect-ratio: 4 / 5; }
}
.planche__scene--saisie .toile { cursor: grab; touch-action: none; }
.planche__scene--saisie .toile.saisi { cursor: grabbing; }

.consigne {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%);
  margin: 0; padding: 0.35rem 0.7rem;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.01em;
  width: max-content; max-width: calc(100% - 1.5rem); text-align: center; text-wrap: balance;
  background: var(--encre); color: var(--fond); pointer-events: none;
  transition: opacity 400ms var(--sortie), transform 400ms var(--sortie);
}
.consigne.masquee { opacity: 0; transform: translate(-50%, 6px); }

figcaption {
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--encre-2);
  max-width: 62rem; padding-top: 0.9rem; border-top: 1px solid var(--filet); text-wrap: pretty;
}
figcaption b { color: var(--encre); font-weight: 700; margin-right: 0.35em; }

.alerte {
  margin: 0; font-family: var(--sans); font-size: 0.875rem; font-weight: 560;
  color: var(--c1); padding-left: 0.9rem; border-left: 1.5px solid var(--c1);
}
.note { font-family: var(--sans); font-size: 0.8125rem; color: var(--encre-3); margin: 0.75rem 0 0; }

/* ----- Commandes ----- */
.commandes { display: flex; flex-wrap: wrap; align-items: end; gap: 0.9rem 1.25rem; font-family: var(--sans); }
.commandes--conditions { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); align-items: end; }

.choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.choix legend, .reglette__nom, .liste > span {
  display: block; padding: 0; margin-bottom: 0.4rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2);
}
.choix > label { position: relative; display: inline-block; }
.choix > label + label { margin-left: -1.5px; }
.choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choix span {
  display: inline-block; padding: 0.55rem 0.95rem; border: 1.5px solid var(--encre); font-family: var(--sans);
  font-size: 0.9375rem; font-weight: 560; font-stretch: 92%; line-height: 1.2;
  transition: background-color 160ms var(--sortie), color 160ms var(--sortie);
  user-select: none;
}
.choix input:hover + span { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.choix input:checked + span { background: var(--encre); color: var(--fond); }
.choix input:focus-visible + span { outline: 2px solid var(--c1); outline-offset: 3px; position: relative; z-index: 1; }
.choix--colonne > label { display: block; }
.choix--colonne > label + label { margin: -1.5px 0 0; }
.choix--colonne span { display: block; }

.bouton {
  appearance: none; border: 1.5px solid var(--encre); background: transparent; color: var(--encre);
  font: 560 0.9375rem/1.2 var(--sans); font-stretch: 92%;
  padding: 0.55rem 0.95rem; cursor: pointer;
  transition: background-color 160ms var(--sortie), color 160ms var(--sortie), transform 120ms var(--sortie);
}
.bouton:hover { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.bouton:active { transform: translateY(1px); }
.bouton--fort { background: var(--encre); color: var(--fond); }
.bouton--fort:hover { background: #2b2f36; }
.bouton--bascule[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.bouton:disabled { opacity: 0.45; cursor: default; }

.reglette { display: grid; grid-template-columns: auto 3.2rem; grid-template-rows: auto auto; column-gap: 0.75rem; min-width: 15rem; flex: 1 1 15rem; max-width: 26rem; }
.reglette__nom { grid-column: 1 / -1; }
.reglette__nom var, .choix legend var { text-transform: none; letter-spacing: 0; font-size: 1.1em; }
.reglette output { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; align-self: center; font-size: 0.9375rem; }
.reglette input { grid-column: 1; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2rem;
  background:
    linear-gradient(var(--encre), var(--encre)) 0 50% / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--encre-3) 0 1px, transparent 1px 10%) 0 50% / 100% 9px no-repeat;
}
input[type="range"]::-moz-range-track {
  height: 2rem;
  background:
    linear-gradient(var(--encre), var(--encre)) 0 50% / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--encre-3) 0 1px, transparent 1px 10%) 0 50% / 100% 9px no-repeat;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.85rem; height: 1.6rem; margin-top: 0.2rem;
  background: var(--encre); border: 2px solid var(--planche); box-shadow: 0 0 0 1px var(--encre);
}
input[type="range"]::-moz-range-thumb {
  width: 0.7rem; height: 1.45rem; border-radius: 0; background: var(--encre); border: 2px solid var(--planche); box-shadow: 0 0 0 1px var(--encre);
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--c1); }
input[type="range"]:focus-visible::-moz-range-thumb { background: var(--c1); }

.liste { display: block; }
.liste select {
  appearance: none; width: 100%; font: 520 0.9375rem/1.2 var(--sans); font-stretch: 94%; color: var(--encre);
  padding: 0.55rem 2rem 0.55rem 0.7rem; border: 1.5px solid var(--encre); border-radius: 0; cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--encre) 50%) calc(100% - 15px) 52% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--encre) 50%) calc(100% - 9px) 52% / 6px 6px no-repeat,
    var(--planche);
}

/* ----- Lectures (valeurs en direct) ----- */
.lectures { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin: 0; font-family: var(--sans); }
.lectures > div { min-width: 7.5rem; }
.lectures dt { font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); }
.lectures dt var { text-transform: none; }
.lectures dd { margin: 0.15rem 0 0; font-size: 1.5rem; font-weight: 640; font-stretch: 86%; font-variant-numeric: tabular-nums; line-height: 1.15; }
.lectures--empilees { flex-direction: column; margin-top: 1.25rem; }

/* ----- Réglages du PID ----- */
.planche__reglages { display: grid; gap: 0.35rem 1rem; align-content: center; }
.gain { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.75rem; font-family: var(--sans); }
.gain__nom { font-size: 0.9375rem; font-weight: 600; line-height: 1.15; }
.gain__nom small { display: block; font-weight: 420; font-size: 0.75rem; color: var(--encre-2); }
.gain output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.gain__repere { position: relative; }
.gain__repere i { position: absolute; top: 0.2rem; width: 2px; height: 1.6rem; background: var(--c1); pointer-events: none; transform: translateX(-1px); }

/* ----- Schéma de la boucle ----- */
.schema { width: 100%; }
.schema svg { display: block; width: 100%; height: auto; overflow: visible; }
.schema .bloc rect { fill: var(--planche); stroke: var(--encre); stroke-width: 1.5; }
.schema .bloc--procede rect { fill: color-mix(in srgb, var(--eau) 8%, var(--planche)); }
.schema .bloc text { font-family: var(--sans); fill: var(--encre); }
.schema .bloc .titre { font-size: 15px; font-weight: 700; font-stretch: 85%; }
.schema .bloc .valeur { font-size: 13px; font-weight: 520; font-variant-numeric: tabular-nums; fill: var(--encre-2); }
.schema .fleche { fill: none; stroke: var(--encre); stroke-width: 1.5; }
.schema .pointe { fill: var(--encre); }
.schema .impulsion { fill: var(--c1); }
.schema .etiquette { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--encre-2); letter-spacing: 0.02em; }

/* ----- Duel ----- */
.duel__reservoirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.duel__reservoir { margin: 0; }
.duel__reservoir canvas { aspect-ratio: 1 / 1.05; }
.duel__nom { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.875rem; font-weight: 650; margin: 0 0 0.4rem; }
.duel__nom i { width: 1.4rem; height: 3px; display: inline-block; }
@media (max-width: 800px) { .duel__reservoirs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tableau { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.tableau caption { text-align: left; font-size: 0.75rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); padding-bottom: 0.4rem; }
.tableau th, .tableau td { padding: 0.55rem 0.75rem 0.55rem 0; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: baseline; }
.tableau thead th { font-size: 0.75rem; font-weight: 600; color: var(--encre-2); border-bottom: 1.5px solid var(--encre); }
.tableau td:not(:first-child), .tableau th:not(:first-child) { text-align: right; }
.tableau .meilleur { font-weight: 750; }
.tableau .pastille { display: inline-block; width: 0.8rem; height: 3px; margin-right: 0.5rem; vertical-align: middle; }
@media (max-width: 640px) { .tableau { font-size: 0.8125rem; } .tableau thead th { font-size: 0.6875rem; } }

/* ----- Références et pied ----- */
.references { max-width: 52rem; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: ref; font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); }
.references li { counter-increment: ref; position: relative; padding: 0.7rem 0 0.7rem 2rem; border-top: 1px solid var(--filet); }
.references li::before { content: counter(ref); position: absolute; left: 0; top: 0.7rem; font-weight: 700; color: var(--encre); }
.references li:target { background: color-mix(in srgb, var(--eau) 7%, transparent); }
.references a { overflow-wrap: anywhere; }
/* Lien vers une autre page du site, dans le texte : « Aller à la page … » avec le nom du bandeau, souligné, sous un
   filet ; jamais l'apparence d'un bouton, réservée aux actions sur les figures */
.vers-page, .texte .vers-page {
  margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1.5px solid var(--encre);
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2);
}
.chapitre > .vers-page { grid-column: 1 / -1; max-width: 52rem; }
.vers-page a {
  font-weight: 650; font-stretch: 92%; color: var(--encre);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
}
.vers-page a:hover { text-decoration-thickness: 2.5px; }

/* ----- À propos (accueil) : auteurs, encadrement, agent IA, sources -----
   Une grille éditoriale sous des filets, alignée sur celle du chapitre : l'intitulé du bloc dans les colonnes du
   titre (1 à 5), le contenu dans celles du texte (6 à 12) ; tout empilé sous 1000 px, comme le chapitre. Les portraits
   sont posés comme une planche (repères d'angle), sans cadre ni ombre. */
.chapitre > .equipe { grid-column: 1 / -1; }
.equipe { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.equipe__bloc {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--gouttiere);
  padding-top: 0.9rem; border-top: 1.5px solid var(--encre);
}
.equipe__bloc + .equipe__bloc { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.equipe__tete { grid-column: 1 / span 5; }
.equipe__corps { grid-column: 6 / -1; min-width: 0; }
@media (max-width: 1000px) {
  .equipe__tete, .equipe__corps { grid-column: 1 / -1; }
}
.chapitre .equipe__tete h3 { margin: 0; }
.equipe__tete p { margin: 0.35rem 0 0; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.45; color: var(--encre-2); }

.profils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem var(--gouttiere); }
@media (max-width: 33.99rem) { .profils { grid-template-columns: minmax(0, 1fr); } }
.profil { min-width: 0; font-family: var(--sans); }
.profil__photo { position: relative; display: block; width: min(100%, 9.5rem); margin: 0.4rem 0 1.1rem 0.4rem; }
.profil__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--filet); }
.profil__photo::before, .profil__photo::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--encre); pointer-events: none;
}
.profil__photo::before { top: -6px; left: -6px; border-top-width: 1.5px; border-left-width: 1.5px; }
.profil__photo::after { bottom: -6px; right: -6px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.profil__nom { margin: 0; font-family: var(--sans); font-size: 1.375rem; font-weight: 700; font-stretch: 85%; line-height: 1.15; }
.profil__titre { margin: 0.25rem 0 0.9rem; font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--encre-2); }
.profil__lignes { margin: 0; }
.profil__lignes > div { padding: 0.5rem 0; border-top: 1px solid var(--filet); }
.profil__lignes > div:last-child { border-bottom: 1px solid var(--filet); }
.profil__lignes dt { font-size: 0.6875rem; font-weight: 620; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); }
.profil__lignes dd { margin: 0.15rem 0 0; font-size: 0.9375rem; font-weight: 520; line-height: 1.35; }
.profil__lien { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.4; }
.profil__lignes a, .profil__lien a {
  font-weight: 650; font-stretch: 92%; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
}
.profil__lignes a:hover, .profil__lien a:hover { text-decoration-thickness: 2.5px; }

.encadrants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (max-width: 33.99rem) { .encadrants { grid-template-columns: minmax(0, 1fr); } }
.encadrants li { min-width: 0; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.4; color: var(--encre-2); }
.encadrants p { margin: 0; }
.encadrants .encadrant__nom { margin-bottom: 0.2rem; font-size: 1.125rem; font-weight: 700; font-stretch: 88%; color: var(--encre); }

.agent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gouttiere); }
.agent__intro { grid-column: 1 / -1; max-width: var(--mesure); margin: 0 0 1.5rem; text-wrap: pretty; }
.agent__part { min-width: 0; }
.agent__part h4 {
  margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 640; line-height: 1.3;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2);
}
.agent__part .liste-filets { margin: 0; font-size: 1rem; line-height: 1.5; }
@media (max-width: 39.99rem) {
  .agent { grid-template-columns: minmax(0, 1fr); }
  .agent__part + .agent__part { margin-top: 1.75rem; }
}

/* les sources dans un bloc : sous le filet du bloc, pas de second filet au-dessus de la première */
.equipe__corps > .references { margin: 0; }
.equipe__corps > .references li:first-child { padding-top: 0; border-top: 0; }
.equipe__corps > .references li:first-child::before { top: 0; }
/* Pied de page commun aux trois pages : le plan du site (les trois pages et ce qu'on y trouve), puis les mentions */
.pied { border-top: 1.5px solid var(--encre); font-family: var(--sans); font-size: 0.8125rem; color: var(--encre-2); }
.pied p { margin: 0; }
.pied__plan {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem var(--gouttiere);
  padding: 1.75rem var(--marge-ligne) 1.75rem;
}
.pied__nom { display: grid; gap: 0.15rem; align-content: start; line-height: 1.45; }
.pied__nom a { justify-self: start; font-size: 1rem; font-weight: 700; font-stretch: 88%; color: var(--encre); text-decoration: none; }
.pied__nom a:hover { text-decoration: underline; }
.pied__pages ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem var(--gouttiere); margin: 0; padding: 0; list-style: none; }
.pied__pages li { display: grid; gap: 0.2rem; align-content: start; padding-top: 0.6rem; border-top: 1px solid var(--filet); line-height: 1.45; }
.pied__pages li:has(> a[aria-current="page"]) { padding-top: calc(0.6rem - 1px); border-top: 2px solid var(--encre); }
.pied__pages a { justify-self: start; font-size: 0.9375rem; font-weight: 600; font-stretch: 90%; color: var(--encre); text-decoration: none; }
.pied__pages a:hover { text-decoration: underline; }
.pied__pages a[aria-current="page"] { font-weight: 750; }
.pied__mentions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 1rem var(--marge-ligne) 2rem; border-top: 1px solid var(--filet); }
.pied__signature { color: var(--encre); font-weight: 600; }
@media (max-width: 47.99rem) {
  .pied__plan { grid-template-columns: minmax(0, 1fr); }
  .pied__pages ul { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}
.sans-js { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding: 0.75rem var(--gouttiere); background: var(--encre); color: var(--fond); font-family: var(--sans); font-size: 0.875rem; }

/* ----- Apparition des chapitres (le contenu reste visible sans JavaScript) ----- */
@media (prefers-reduced-motion: no-preference) {
  .js .chapitre > .rubrique, .js .chapitre > h2, .js .chapitre > .texte, .js .chapitre > .planche {
    transition: opacity 700ms var(--sortie), transform 700ms var(--sortie), clip-path 900ms var(--sortie);
  }
  .js .chapitre:not(.vu) > h2, .js .chapitre:not(.vu) > .rubrique { opacity: 0; transform: translateY(18px); }
  .js .chapitre:not(.vu) > .texte { opacity: 0; transform: translateY(18px); }
  .js .chapitre:not(.vu) > .planche { clip-path: inset(0 0 100% 0); }
  .js .chapitre.vu > .texte { transition-delay: 90ms; }
  .js .chapitre.vu > .planche { transition-delay: 160ms; }
}

/* ----- Écran tactile : des cibles d'au moins 44 px, sans changer l'apparence à la souris -----
   Boutons, segments, listes déroulantes, réglettes, bouton du sommaire, liens du pied. Le survol n'existe pas au doigt :
   la teinte de survol resterait collée au dernier bouton touché ; on la remplace par un retour au moment du toucher. */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; touch-action: manipulation; }
  .choix > label > span { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .choix--colonne > label > span { display: flex; }
  .choix input { touch-action: manipulation; }
  .liste select { min-height: 2.75rem; font-size: 1rem; }  /* 16 px : sous cette taille, iOS zoome sur la liste ouverte */
  .sommaire__bouton { min-height: 2.75rem; }
  .pied__pages a, .pied__nom a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pied__pages li { gap: 0; }
  .approfondir summary { padding-block: 0.9rem; }
  /* réglettes : piste de 44 px, curseur plus large à attraper */
  input[type="range"] { height: 2.75rem; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2.75rem; }
  input[type="range"]::-moz-range-track { height: 2.75rem; }
  input[type="range"]::-webkit-slider-thumb { width: 1.25rem; height: 2.25rem; margin-top: 0.25rem; }
  input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 2.1rem; }
  .gain__repere i { top: 0.35rem; height: 2.05rem; }
}
@media (hover: none) {
  .bouton:hover { background: transparent; }
  .bouton--fort:hover, .bouton--bascule[aria-pressed="true"]:hover { background: var(--encre); }
  .choix input:not(:checked):hover + span { background: transparent; }
  .bouton:active, .choix input:active + span { background: color-mix(in srgb, var(--encre) 12%, transparent); }
  .bouton--fort:active { background: #2b2f36; }
}

/* ----- Téléphone : commandes des figures sur toute la largeur -----
   Les boutons s'étirent pour remplir leur ligne (deux par ligne s'ils tiennent, sinon un seul), les segments d'un
   choix se partagent la ligne à parts égales : plus de bouton isolé au bout d'une ligne à moitié vide. */
@media (max-width: 33.99rem) {
  .commandes { gap: 0.6rem; }
  .commandes > .bouton, .choix--boutons > .bouton { flex: 1 1 auto; padding-inline: 0.75rem; }
  .commandes > .choix, .commandes > .reglette { flex: 1 1 100%; max-width: none; min-width: 0; }
  .commandes > .choix:not(.choix--boutons):not(.choix--cases):not(.choix--colonne) { display: flex; flex-wrap: wrap; }
  .commandes > .choix:not(.choix--boutons):not(.choix--cases):not(.choix--colonne) > legend { width: 100%; }
  .commandes > .choix:not(.choix--boutons):not(.choix--cases):not(.choix--colonne) > label { flex: 1 1 auto; }
  .commandes > .choix:not(.choix--boutons):not(.choix--cases):not(.choix--colonne) > label > span {
    display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; padding-inline: 0.6rem;
  }
  .commandes--conditions { grid-template-columns: minmax(0, 1fr); }
  .lectures { gap: 0.75rem 1.5rem; }
  /* gains du PID : le nom et la valeur sur une ligne, la réglette sur toute la largeur en dessous */
  .planche__reglages { gap: 0.85rem; }
  .gain { grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.75rem; }
  .gain__repere { grid-column: 1 / -1; grid-row: 2; }
  .gain output { grid-column: 2; grid-row: 1; align-self: end; }
  /* duel : les noms sur une ou deux lignes, les réservoirs alignés en bas */
  .duel__reservoir { display: flex; flex-direction: column; }
  .duel__nom { flex: 1; align-items: flex-end; line-height: 1.25; }
  .duel__nom i { flex: none; margin-bottom: 0.45em; }
}
/* schéma de la boucle : en dessous de 48rem, ses étiquettes deviendraient illisibles ; il garde sa taille et défile
   en largeur, avec une consigne */
@media (max-width: 47.99rem) {
  .schema { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.4rem; }
  .schema svg { width: 46rem; max-width: none; }
  .schema::before {
    content: "Faites glisser le schéma de côté →"; display: block; position: sticky; left: 0; margin-bottom: 0.5rem;
    font-family: var(--sans); font-size: 0.8125rem; font-weight: 560; color: var(--encre-2);
  }
}

@media print {
  .bandeau, .commandes, .evitement, .pied__plan { display: none; }
  .planche { break-inside: avoid; }
}

/* ----- Page introuvable ----- */
.introuvable { max-width: 44rem; margin: 0 auto; padding: 18vh var(--gouttiere) 4rem; }
.introuvable h1 { font-family: var(--sans); font-weight: 780; font-stretch: 72%; font-size: clamp(2.6rem, 2rem + 3vw, 4.5rem); line-height: 0.95; margin: 0 0 1.5rem; }
.introuvable .bouton { display: inline-block; text-decoration: none; }