/* =========================================================================
   DOSSIER DU MEMOIRE CTPEA
   Systeme visuel « Note de travail ».
   Reference : ../../DESIGN.md (racine du dossier THESIS).

   Contrainte structurante : aucune dependance reseau. Pas de police
   distante, pas de CDN. Le fichier s'ouvre en double-clic depuis le disque.

   Le fond est blanc, franc, sans trame ni cadre. La hierarchie tient au
   filet, a l'espace et a quatre encres de renvoi dont le sens ne varie
   jamais d'une page a l'autre.
   ========================================================================= */

/* ---------- 1. Jetons ---------------------------------------------------- */

:root {
  /* Papier et encre */
  --papier:      #ffffff;
  --creux:       #f4f6f4;
  --creux-fort:  #eaeeeb;
  --encre:       #171c1f;
  --encre-douce: #3d474b;
  --sourdine:    #5c696e;
  --filet:       #dde2dd;
  --filet-fort:  #bcc6be;

  /* Quatre encres de renvoi, sens fixe dans tout le dossier */
  --vert:        #0f5257;  /* role, resultat etabli, verdict */
  --vert-fond:   #e4efee;
  --vert-filet:  #9cc3c0;
  --ocre:        #8a5324;  /* vigilance, alternative ecartee, limite */
  --ocre-fond:   #f7efe4;
  --ocre-filet:  #d9b892;
  --indigo:      #3b4c7e;  /* origine, provenance, genealogie */
  --indigo-fond: #e9ecf5;
  --indigo-filet:#aab6d6;
  --rouge:       #a4231b;  /* revision ouverte : faille, a-faire, decision */
  --rouge-fond:  #faeae8;
  --rouge-filet: #e3b3ae;

  --noir-impression: #000000;  /* impression seulement : les liens passent au noir franc */

  /* Rampes de donnees. Confinees aux cartes, tableaux et legendes. */
  --sev-1: #f3e4c4; --sev-2: #e2b678; --sev-3: #cd7f45;
  --sev-4: #a94f22; --sev-5: #8c2f14;
  --dep-1: #dce9f2; --dep-2: #a9c6dd; --dep-3: #6f9cc0;
  --dep-4: #3e6d99; --dep-5: #10263c;

  /* Lettrage */
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "IBM Plex Sans", "Segoe UI", system-ui, -apple-system,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono",
           ui-monospace, "Liberation Mono", monospace;

  /* Rythme, base 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 34px; --e7: 52px; --e8: 76px;

  --rail: 264px;
  --colonne: 820px;
  --mesure: 68ch;

  color-scheme: light;
}

/* ---------- 2. Socle ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 2px;
}

p { margin: 0 0 1.05em; max-width: var(--mesure); }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; max-width: var(--mesure); }
li { margin-bottom: .42em; }
li > ul, li > ol { margin-top: .42em; }
strong, b { font-weight: 600; }
em { font-style: italic; }
abbr { text-decoration: none; border-bottom: 1px dotted var(--filet-fort); cursor: help; }
hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e7) 0; }

code, kbd, samp { font-family: var(--mono); font-size: .86em; }
code {
  background: var(--creux); border: 1px solid var(--filet);
  border-radius: 2px; padding: 1px 5px; word-break: break-word;
}
pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--creux); border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e4) var(--e4); overflow-x: auto; margin: var(--e4) 0;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

img, svg { max-width: 100%; height: auto; }

.saut-contenu {
  position: absolute; left: -9999px; z-index: 60;
  background: var(--encre); color: #fff;
  padding: var(--e2) var(--e4); border-radius: 2px;
  font-family: var(--sans); font-size: 13.5px; text-decoration: none;
}
.saut-contenu:focus { left: var(--e4); top: var(--e4); }

.cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Charpente ------------------------------------------------- */

.page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
}

.colonne { min-width: 0; padding: 0 var(--e6); }
.wrap { max-width: var(--colonne); min-width: 0; margin: 0 auto; padding-bottom: var(--e8); }
.wrap > main { min-width: 0; }

/* Rail d'index -------------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--filet);
  padding: var(--e6) var(--e5) var(--e6) var(--e5);
  font-family: var(--sans);
}

.rail__marque { display: block; margin: 0 0 var(--e5); text-decoration: none; color: inherit; }
.rail__marque:hover .rail__titre { color: var(--vert); }
.rail__sur {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sourdine); display: block; margin-bottom: 5px;
}
.rail__titre {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  line-height: 1.25; display: block;
}
.rail__millesime { font-family: var(--mono); font-size: 10.5px; color: var(--sourdine); display: block; margin-top: 6px; }

.rail__groupe {
  font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sourdine);
  margin: var(--e5) 0 var(--e2);
  padding-bottom: 5px; border-bottom: 1px solid var(--filet);
}
.rail__groupe:first-of-type { margin-top: 0; }

.rail__liste { list-style: none; margin: 0; padding: 0; max-width: none; }
.rail__liste li { margin: 0; }

.rail__lien {
  display: grid; grid-template-columns: 1.9em 1fr auto;
  gap: 0 var(--e2); align-items: baseline;
  padding: 5px var(--e2) 5px 0;
  text-decoration: none; color: var(--encre-douce);
  font-size: 13.5px; line-height: 1.34;
  border-radius: 2px;
}
.rail__lien:hover { color: var(--vert); background: var(--creux); }
.rail__num { font-family: var(--mono); font-size: 10.5px; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.rail__lien[aria-current="page"] { color: var(--encre); font-weight: 600; background: var(--creux); }
.rail__lien[aria-current="page"] .rail__num { color: var(--vert); }
.rail__rev { font-family: var(--mono); font-size: 10.5px; color: var(--rouge); }

.rail__fermer { display: none; }

/* Barre mobile -------------------------------------------------------- */

.barre { display: none; }

/* Masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--filet-fort);
  padding: var(--e8) 0 var(--e5);
  margin-bottom: var(--e7);
}
.eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sourdine); margin: 0 0 var(--e4);
}
h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.7rem, 5.2vw, 2.9rem); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 var(--e4); text-wrap: balance;
  max-width: 20ch;
}
.standfirst {
  font-size: 1.12rem; color: var(--encre-douce); max-width: 58ch;
  margin: 0 0 var(--e5);
}

/* Cartouche editorial : l'ancien cartouche, mis a plat en bandeau */
.byline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e4) var(--e5);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
  padding-top: var(--e4); border-top: 1px solid var(--filet);
  color: var(--encre-douce);
}
.byline > div { min-width: 0; }
.byline b {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sourdine); margin-bottom: 3px;
}
.byline ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.byline li { margin: 0 0 2px; font-family: var(--mono); font-size: 10.5px; word-break: break-word; }
/* Les sources sont le champ le plus long : elles prennent la fin de la rangee. */
.byline__src { grid-column: span 2; }
@media (max-width: 719px) { .byline__src { grid-column: auto; } }
.byline .rev-ouvertes { color: var(--rouge); font-family: var(--mono); }

/* Bandeau d'archive ---------------------------------------------------- */

/* Pose en tete de <body> par le script, sur les seules pages archivees.
   L'ocre est l'encre de la vigilance : une archive n'est pas une faille. */
.bandeau-archive {
  position: sticky; top: 0; z-index: 45;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3) var(--e4);
  padding: var(--e3) var(--e5);
  background: var(--ocre-fond);
  border-bottom: 1px solid var(--ocre-filet);
  font-family: var(--sans); font-size: 12.5px; color: var(--ocre);
}
.bandeau-archive b { font-weight: 700; }
.bandeau-archive .bouton { border-color: var(--ocre); color: var(--ocre); flex: none; }
.bandeau-archive .bouton:hover { background: var(--ocre); color: var(--papier); }
/* Le rail est deja collant : il repart sous le bandeau. */
.est-archive .rail { top: 49px; height: calc(100vh - 49px); }
@media (max-width: 1099px) { .est-archive .barre { top: 49px; } }

.byline a { color: var(--vert); }
.byline .maj-lien { font-family: var(--mono); font-size: 11px; }

/* Sommaire de page ---------------------------------------------------- */

.toc {
  border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e4) var(--e5) var(--e4);
  margin: 0 0 var(--e7);
}
.toc__titre {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sourdine); margin: 0 0 var(--e3);
}
.toc ol { margin: 0; padding: 0; list-style: none; max-width: none; }
.toc li {
  display: flex; gap: var(--e3); align-items: baseline;
  border-bottom: 1px dotted var(--filet); margin: 0;
}
.toc li:last-child { border-bottom: 0; }
.toc a {
  flex: 1 1 auto; padding: 6px 0; text-decoration: none; color: var(--encre);
  font-size: 15.5px; border-left: 2px solid transparent; padding-left: var(--e3);
  margin-left: -14px; transition: border-color 160ms ease-out, color 160ms ease-out;
}
.toc a:hover { color: var(--vert); }
.toc a[aria-current="true"] { border-left-color: var(--vert); color: var(--vert); }
.toc .tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--sourdine);
  flex: 0 0 auto; padding: 6px 0;
}

/* Sections et titres --------------------------------------------------- */

section { margin-bottom: var(--e8); scroll-margin-top: var(--e5); }
section > *:first-child { margin-top: 0; }

.sec-head {
  margin-bottom: var(--e5); padding-bottom: var(--e3);
  border-bottom: 2px solid var(--encre);
}
.sec-head p { margin: var(--e2) 0 0; color: var(--sourdine); font-size: 15.5px; }

h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 3.6vw, 1.65rem);
  line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: balance;
  max-width: 28ch;
}
/* Un h2 pose directement dans une section porte lui-meme le filet de tete. */
section > h2 {
  margin: 0 0 var(--e5); padding-bottom: var(--e3);
  border-bottom: 2px solid var(--encre); max-width: none;
}
h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.18rem;
  margin: var(--e6) 0 var(--e3); text-wrap: balance; max-width: var(--mesure);
}
h4 {
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sourdine);
  margin: var(--e5) 0 var(--e3);
}

/* Ancre de citation : remplace les reperes de bordure */
.ancre {
  font-family: var(--mono); font-size: .62em; font-weight: 400;
  color: var(--filet-fort); text-decoration: none; margin-left: .55em;
  opacity: 0; transition: opacity 140ms ease-out, color 140ms ease-out;
  vertical-align: .12em;
}
h2:hover .ancre, h3:hover .ancre, .ancre:focus-visible { opacity: 1; }
.ancre:hover { color: var(--vert); }

/* Colophon et navigation de page --------------------------------------- */

.suite {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4);
  margin: var(--e8) 0 var(--e6);
}
.suite a {
  display: block; padding: var(--e4) var(--e4);
  border: 1px solid var(--filet); border-radius: 2px;
  text-decoration: none; color: var(--encre);
  transition: border-color 160ms ease-out;
}
.suite a:hover { border-color: var(--filet-fort); }
.suite a:hover .suite__t { color: var(--vert); }
.suite__sens {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sourdine);
  margin-bottom: 5px;
}
.suite__t { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.3; }
.suite--fin { grid-column: 2; text-align: right; }
.suite__vide { border: 0; }

.colophon {
  padding-top: var(--e4); border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3);
  font-family: var(--mono); font-size: 10.5px; color: var(--sourdine);
}
.colophon a { color: var(--sourdine); }
.colophon .reprise { color: var(--vert); }

/* ---------- 4. Encadres a sens fixe -------------------------------------- */

.boxes { display: grid; gap: var(--e4); margin: var(--e5) 0 var(--e6); }
@media (min-width: 760px) { .boxes.two { grid-template-columns: 1fr 1fr; } }

.box {
  border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e4) var(--e5); background: var(--creux);
  max-width: var(--mesure);
}
.boxes .box { max-width: none; }
.box > *:last-child { margin-bottom: 0; }
.box p, .box ul, .box ol { font-size: 15.5px; max-width: none; }
.box .lbl {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 var(--e3);
  color: var(--encre-douce);
}
.box .tblwrap { margin-top: var(--e3); }

.b-origin { background: var(--indigo-fond); border-color: var(--indigo-filet); }
.b-origin .lbl { color: var(--indigo); }
.b-role   { background: var(--vert-fond);   border-color: var(--vert-filet); }
.b-role .lbl { color: var(--vert); }
.b-warn   { background: var(--ocre-fond);   border-color: var(--ocre-filet); }
.b-warn .lbl { color: var(--ocre); }
.b-plain  { background: var(--creux);       border-color: var(--filet); }
.b-plain .lbl { color: var(--encre-douce); }

/* Verdict : un resultat etabli, enonce en une ligne */
.verdict {
  border: 1px solid var(--vert-filet); border-radius: 2px;
  background: var(--vert-fond);
  padding: var(--e3) var(--e4); margin: 0 0 var(--e3); max-width: var(--mesure);
}
.verdict > *:last-child { margin-bottom: 0; }
.verdict p { font-size: 15.5px; max-width: none; }
.verdict__cle {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--vert);
  margin-right: var(--e2); white-space: nowrap;
}

/* Revision : faille, a-faire, decision en attente. Rouge reserve. */
.revision {
  border: 1px solid var(--rouge-filet); border-radius: 2px;
  background: var(--rouge-fond);
  padding: var(--e4) var(--e5); margin: 0 0 var(--e4); max-width: var(--mesure);
}
.revision > *:last-child { margin-bottom: 0; }
.revision p, .revision ul { font-size: 15.5px; max-width: none; }
.revision__titre {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--rouge);
  margin: 0 0 var(--e3);
}
.revision[data-indice] .revision__titre::before {
  content: attr(data-indice);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0;
  border: 1px solid var(--rouge); border-radius: 2px;
  padding: 1px 5px; margin-right: var(--e2);
}

.liste-revisions { list-style: none; padding: 0; margin: 0 0 var(--e5); max-width: var(--mesure); }
.liste-revisions li {
  display: grid; grid-template-columns: 2.8em 1fr; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--filet); margin: 0;
  font-size: 15.5px;
}
.liste-revisions li:first-child { border-top: 1px solid var(--filet); }
.marque-rev {
  font-family: var(--mono); font-size: 10.5px; color: var(--rouge);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: .28em;
}

/* Citation detachee */
.pull {
  margin: var(--e6) 0; padding-top: var(--e4);
  max-width: 54ch; font-size: 1.12rem; line-height: 1.5;
  color: var(--encre-douce); font-style: italic;
  position: relative;
}
.pull::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 42px; height: 2px; background: var(--vert);
}

/* ---------- 5. Tampons d'etat -------------------------------------------- */

.tampon {
  display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid currentColor; border-radius: 2px;
  white-space: nowrap;
}
.tampon--redige, .tampon--mesure { color: var(--vert); }
.tampon--encours { color: var(--encre-douce); }
.tampon--aecrire { color: var(--sourdine); border-style: dashed; }
.tampon--fige    { color: var(--ocre); }
.tampon--alerte  { color: var(--rouge); }

/* ---------- 6. Tableaux -------------------------------------------------- */

.tbl { margin: 0 0 var(--e6); }
.tbl-titre {
  display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce);
  margin: 0 0 var(--e3);
}
.tblwrap {
  overflow-x: auto; margin: var(--e4) 0 var(--e2);
  border: 1px solid var(--filet); border-radius: 2px;
}
.tbl .tblwrap { margin-top: 0; }

table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; }
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sourdine); background: var(--creux);
  border-bottom: 1px solid var(--filet-fort); white-space: nowrap; vertical-align: bottom;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th[scope="row"] { font-weight: 600; color: var(--encre); }
tr.souligne td, tr.souligne th { border-bottom: 1px solid var(--encre); }
tr.souligne { background: var(--creux); }

.n { font-variant-numeric: tabular-nums; }
td.n, th.n {
  font-family: var(--mono); font-size: 12px;
  text-align: right; white-space: nowrap;
}
thead th.n { text-align: right; font-family: var(--sans); }
td.mono, th.mono { font-family: var(--mono); font-size: 12px; }
td.sym, th.sym {
  font-family: var(--serif); font-style: italic; font-size: 15.5px;
  white-space: nowrap; color: var(--vert);
}

.cap {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--sourdine); margin: var(--e2) 0 0; max-width: var(--mesure);
}
.cap b { color: var(--encre-douce); font-weight: 600; }

/* ---------- 7. Chiffres cles --------------------------------------------- */

.keyfig {
  display: grid; gap: 1px; background: var(--filet);
  border: 1px solid var(--filet); border-radius: 2px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: var(--e5) 0 var(--e6);
}
.keyfig > div { background: var(--papier); padding: var(--e3) var(--e4) var(--e4); }
.keyfig .k {
  display: block; font-family: var(--mono); font-size: 1.38rem; font-weight: 700;
  color: var(--vert); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.keyfig .l {
  display: block; font-family: var(--sans); font-size: 11px; line-height: 1.4;
  color: var(--sourdine); margin-top: 6px;
}

/* ---------- 8. Equations ------------------------------------------------- */

/* Fiche d'equation : la plaque, l'intitule, la formule au centre */
.fiche-eq {
  border: 1px solid var(--filet-fort); border-radius: 2px;
  margin: 0 0 var(--e4); overflow: hidden;
}
.fiche-eq__tete {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e5);
  background: var(--vert-fond); border-bottom: 1px solid var(--vert-filet);
}
.plaque {
  flex: 0 0 auto; font-family: var(--mono); font-size: 15.5px; font-weight: 700;
  color: var(--vert); background: var(--papier);
  border: 1px solid var(--vert-filet); border-radius: 2px; padding: 5px 11px;
}
.fiche-eq__t { font-family: var(--sans); font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.fiche-eq__t .s {
  display: block; font-weight: 400; font-size: 12.5px; color: var(--sourdine); margin-top: 2px;
}
.eqbox { padding: var(--e6) var(--e5); text-align: center; overflow-x: auto; }

.eq { font-family: var(--serif); font-size: 1.26rem; line-height: 1.9; white-space: nowrap; display: inline-block; }
.eq.sm { font-size: 1.08rem; }
.v { font-style: italic; }
.fn { font-style: normal; }
.op { margin: 0 .34em; }
.op-t { margin: 0 .2em; }
sub, sup { font-size: .66em; line-height: 0; }
.sum { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .18em; line-height: 1; }
.sum .b { font-size: 2em; font-weight: 300; }
.sum .top, .sum .bot { font-size: .52em; font-style: italic; }
.sum .top { margin-bottom: -.1em; }
.sum .bot { margin-top: .05em; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .3em; line-height: 1.3; }
.frac__h { padding: 0 .35em .12em; }
.frac__b { padding: .12em .35em 0; border-top: 1.4px solid currentColor; }
.tag-eq { font-family: var(--mono); font-size: .6em; color: var(--sourdine); margin-left: 1.4em; vertical-align: middle; }

/* Equation en ligne de specification, sans fiche */
.equation {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e4); align-items: center;
  border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e3) var(--e4); margin: 0 0 var(--e4);
  max-width: var(--mesure); overflow-x: auto;
}
.equation__corps { font-family: var(--mono); font-size: 15.5px; line-height: 1.85; }
.equation__num { font-family: var(--mono); font-size: 12px; color: var(--sourdine); white-space: nowrap; }
var { font-family: var(--serif); font-style: italic; }

/* Liste de notation compacte */
.notation { list-style: none; padding: 0; margin: 0 0 var(--e5); max-width: var(--mesure); }
.notation li {
  display: grid; grid-template-columns: 6em 1fr; gap: var(--e3);
  padding: var(--e2) 0; border-bottom: 1px solid var(--filet); margin: 0;
  font-size: 15.5px;
}
.notation li:first-child { border-top: 1px solid var(--filet); }
.notation code { background: none; border: 0; padding: 0; font-style: italic; }

/* ---------- 9. Genealogie ------------------------------------------------ */

.gen { margin: var(--e5) 0 var(--e6); border-left: 1px solid var(--filet-fort); max-width: var(--mesure); }
.gen-row {
  display: grid; grid-template-columns: 58px 1fr; gap: 0 var(--e4);
  padding: 0 0 var(--e4) var(--e5); position: relative;
}
.gen-row::before {
  content: ""; position: absolute; left: -4.5px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--filet-fort);
}
.gen-row.key::before { background: var(--vert); border-color: var(--vert); }
.gen-yr {
  font-family: var(--mono); font-size: 12px; color: var(--sourdine);
  padding-top: 3px; font-variant-numeric: tabular-nums;
}
.gen-row.key .gen-yr { color: var(--vert); font-weight: 700; }
.gen-who { font-family: var(--sans); font-size: 13.5px; font-weight: 600; margin: 0 0 2px; line-height: 1.35; max-width: none; }
.gen-what { font-size: 15.5px; color: var(--encre-douce); margin: 0; max-width: 58ch; line-height: 1.5; }
.gen-what em { color: var(--sourdine); }

/* ---------- 10. Figures et cartes ---------------------------------------- */

figure { margin: var(--e6) 0; }
.grille-figures {
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: var(--e5) 0 var(--e6);
}
.figure {
  margin: 0; border: 1px solid var(--filet); border-radius: 2px; overflow: hidden;
  background: var(--papier);
}
.figure img { display: block; width: 100%; height: auto; background: #fff; }
.figure figcaption {
  padding: var(--e3) var(--e4) var(--e4);
  border-top: 1px solid var(--filet);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.45;
}
.figure figcaption b {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-douce); margin-bottom: 4px;
}
.figure__source { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--sourdine); margin-top: var(--e2); }

/* ---------- 11. Fiches de variable et champs ----------------------------- */

.fiches { display: grid; gap: var(--e4); margin: var(--e5) 0 var(--e6); }
.fiche {
  border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e3) var(--e4) var(--e4);
}
.fiche__entete {
  display: flex; flex-wrap: wrap; gap: var(--e3); align-items: baseline;
  justify-content: space-between; margin-bottom: var(--e3);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--filet);
}
.fiche__nom { font-family: var(--mono); font-size: 13.5px; font-weight: 700; margin: 0; word-break: break-word; max-width: none; }
.fiche__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e3) var(--e5); }
.fiche__cle {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sourdine);
}
.fiche__val { font-size: 15.5px; }
.fiche__val--mono { font-family: var(--mono); font-size: 12px; word-break: break-word; }

.champs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); max-width: none; }
.champs li { margin: 0; }
.champ {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  padding: 2px 6px; border: 1px solid var(--filet); border-radius: 2px;
  background: var(--creux); color: var(--sourdine); white-space: nowrap;
}
.champ--utilise { border-color: var(--vert-filet); background: var(--vert-fond); color: var(--vert); font-weight: 700; }

/* ---------- 12. Question de soutenance ----------------------------------- */

.qr { margin: 0 0 var(--e6); max-width: var(--mesure); padding-top: var(--e4); border-top: 1px solid var(--filet); }
.qr__q {
  font-family: var(--serif); font-weight: 600; font-size: 1.18rem; line-height: 1.35;
  margin: 0 0 var(--e3); max-width: none; color: var(--encre);
}
.qr__appui {
  font-family: var(--sans); font-size: 12.5px; color: var(--sourdine);
  border-top: 1px solid var(--filet); padding-top: var(--e2);
  margin: var(--e3) 0 0; max-width: none;
}
.qr__appui b {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-right: var(--e2); color: var(--encre-douce);
}

/* ---------- 13. Legende, pastilles, echelle ------------------------------ */

.legende {
  border: 1px solid var(--filet); border-radius: 2px;
  padding: var(--e4) var(--e5); margin: var(--e5) 0 var(--e6); max-width: var(--mesure);
}
.legende__titre {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--encre-douce); margin: 0 0 var(--e3);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--filet);
}
.legende__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); max-width: none; }
.legende__liste li { display: grid; grid-template-columns: 3.2em 1fr; gap: var(--e3); align-items: start; margin: 0; font-size: 15.5px; }
.legende__ech { display: block; margin-top: 5px; }

.pastille {
  display: inline-block; width: 12px; height: 12px; margin-right: var(--e2);
  border: 1px solid var(--filet-fort); vertical-align: -1px;
}
.pastille--sev1 { background: var(--sev-1); } .pastille--sev2 { background: var(--sev-2); }
.pastille--sev3 { background: var(--sev-3); } .pastille--sev4 { background: var(--sev-4); }
.pastille--sev5 { background: var(--sev-5); }
.pastille--dep1 { background: var(--dep-1); } .pastille--dep2 { background: var(--dep-2); }
.pastille--dep3 { background: var(--dep-3); } .pastille--dep4 { background: var(--dep-4); }
.pastille--dep5 { background: var(--dep-5); }
.rampe { display: inline-flex; gap: 2px; vertical-align: -2px; }
.rampe .pastille { margin-right: 0; }

.echelle { margin: var(--e5) 0 var(--e6); max-width: var(--mesure); }
.echelle__legende {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3);
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sourdine); margin-bottom: var(--e3);
}
.echelle__valeur { font-family: var(--mono); font-size: 12px; color: var(--encre); letter-spacing: 0; text-transform: none; }

/* ---------- 14. Boutons, PDF, depliants ---------------------------------- */

.bouton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--encre); border-radius: 2px;
  background: transparent; color: var(--encre); text-decoration: none; cursor: pointer;
  transition: background 140ms ease-out, color 140ms ease-out;
}
.bouton:hover { background: var(--encre); color: #fff; }
.bouton svg { flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e5) 0; }

details {
  border: 1px solid var(--filet); border-radius: 2px;
  margin: var(--e3) 0; max-width: var(--mesure);
}
summary {
  cursor: pointer; padding: 12px var(--e4);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: var(--e3); align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--vert); font-size: 17px; }
details[open] summary::after { content: "\2013"; }
details[open] summary { border-bottom: 1px solid var(--filet); }
.det-body { padding: var(--e4) var(--e4) var(--e2); }
.det-body p, .det-body ul { font-size: 15.5px; }
.det-body > *:last-child { margin-bottom: var(--e2); }

.lecteur-pdf { margin: var(--e5) 0 var(--e6); max-width: none; }
.lecteur-pdf iframe {
  display: block; width: 100%; height: min(78vh, 900px);
  border: 1px solid var(--filet); border-top: 0; background: #fff;
}
@media (max-width: 719px) { .lecteur-pdf iframe { height: 62vh; } }

/* ---------- 15. Sommaire du dossier (page d'accueil) --------------------- */

.sommaire { border-top: 2px solid var(--encre); margin: var(--e5) 0 var(--e6); }
.sommaire__ligne {
  display: grid; grid-template-columns: 3em minmax(0, 1fr) 7.5em 5.5em;
  gap: var(--e3); align-items: baseline;
  padding: var(--e3) var(--e2); border-bottom: 1px solid var(--filet);
  text-decoration: none; color: var(--encre);
}
.sommaire__ligne:hover { background: var(--creux); }
.sommaire__ligne:hover .sommaire__titre { color: var(--vert); }
.sommaire__num { font-family: var(--mono); font-size: 12px; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.sommaire__titre { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.25; }
.sommaire__desc {
  display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 400;
  color: var(--sourdine); margin-top: 3px; line-height: 1.45;
}
.sommaire__meta { font-family: var(--mono); font-size: 10.5px; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.sommaire__groupe {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sourdine);
  padding: var(--e5) var(--e2) var(--e2); border-bottom: 1px solid var(--filet-fort);
}

/* ---------- 16. Adaptation ----------------------------------------------- */

@media (max-width: 1099px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .colonne { padding: 0 var(--e5); }

  .rail {
    position: fixed; inset: 0; z-index: 50; height: auto;
    border-right: 0; background: var(--papier);
    padding: var(--e5) var(--e5) var(--e8);
    display: none;
  }
  .rail.est-ouvert { display: block; }
  .rail__liste { max-width: 34rem; }
  .rail__lien { font-size: 15.5px; padding: 9px var(--e2) 9px 0; }
  .rail__fermer {
    display: inline-flex; position: sticky; top: 0; float: right;
    margin: 0 0 var(--e3) var(--e3); background: var(--papier);
  }

  .barre {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    position: sticky; top: 0; z-index: 40;
    background: var(--papier); border-bottom: 1px solid var(--filet);
    padding: var(--e2) var(--e5);
  }
  /* Le titre se tronque : le bouton Sommaire ne doit jamais sortir du champ. */
  .barre__pos {
    font-family: var(--mono); font-size: 12.5px; color: var(--sourdine);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .barre__pos b { font-family: var(--sans); font-weight: 600; color: var(--encre); }
  .barre .bouton { flex: none; }

  .masthead { padding-top: var(--e6); }
}

@media (min-width: 1100px) {
  .barre, .rail__fermer { display: none; }
}

@media (max-width: 719px) {
  :root { --mesure: 100%; --e6: 26px; --e7: 40px; --e8: 56px; }
  .colonne { padding: 0 var(--e4); }
  .barre { padding: var(--e2) var(--e4); }
  .keyfig { grid-template-columns: repeat(2, 1fr); }
  .grille-figures { grid-template-columns: 1fr; }
  .suite { grid-template-columns: 1fr; }
  .suite--fin { grid-column: 1; text-align: left; }
  .equation { grid-template-columns: 1fr; gap: var(--e2); }
  .sommaire__ligne { grid-template-columns: 2.6em minmax(0, 1fr); }
  .sommaire__meta { grid-column: 2; }
  .gen-row { grid-template-columns: 50px 1fr; gap: 0 var(--e3); padding-left: var(--e4); }
  .notation li { grid-template-columns: 1fr; gap: 2px; }
  .toc .tag { display: none; }
  .box { padding: var(--e4); }
  .eqbox { padding: var(--e5) var(--e3); }

  /* Tableaux : bascule en fiches, ligne par ligne */
  table.responsif thead { display: none; }
  table.responsif, table.responsif tbody, table.responsif tr,
  table.responsif td, table.responsif th { display: block; width: auto; }
  table.responsif tr { border-bottom: 1px solid var(--filet-fort); padding: var(--e3) 0; }
  table.responsif tr:last-child { border-bottom: 0; }
  table.responsif td, table.responsif tbody th {
    border-bottom: 0; padding: 2px var(--e3);
    display: grid; grid-template-columns: 9.5em 1fr; gap: var(--e2); text-align: left;
  }
  table.responsif td::before, table.responsif tbody th::before {
    content: attr(data-cle);
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--sourdine);
    padding-top: 3px;
  }
  table.responsif td.n { text-align: left; }
}

/* ---------- 17. Impression ----------------------------------------------- */

@media print {
  body { font-size: 11pt; }
  .rail, .barre, .saut-contenu, .toc, .suite, .ancre { display: none !important; }
  .page { display: block; }
  .colonne { padding: 0; }
  .wrap { max-width: none; }
  .masthead { padding-top: 0; }
  a { color: var(--noir-impression); }
  section { margin-bottom: 28px; }
  .figure, .revision, .qr, .fiche, .fiche-eq, .legende, .echelle, .box,
  .gen-row, .tbl, figure, details { break-inside: avoid; }
  details:not([open]) .det-body { display: block; }
  h2, h3 { break-after: avoid; }
  .tblwrap { overflow: visible; }
}