/* =========================================================================
   Droit belge, expliqué — feuille de style unique
   Direction : un code de lois annoté. Papier gris‑vert, encre profonde,
   laiton (jaune belge vieilli), cire à cacheter (rouge). Références
   marginales en monospace, filets fins, aucune ombre portée décorative.
   ========================================================================= */

/* L'attribut HTML `hidden` doit toujours l'emporter. Sans cette règle, toute
   déclaration `display` de cette feuille (ex. .searchbox { display: grid })
   écrase la règle du navigateur `[hidden] { display: none }` : l'élément reste
   affiché et, s'il est en position fixe, il intercepte tous les clics. */
[hidden] { display: none !important; }

:root {
  --paper:        #EFEEE7;
  --paper-2:      #E7E6DC;
  --raised:       #F8F7F2;
  --ink:          #191B16;
  --ink-2:        #5B5F52;
  --ink-3:        #83887A;
  --rule:         #D2D2C4;
  --rule-2:       #C0C0B0;
  --brass:        #A97C0E;
  --brass-soft:   #F0E4C2;
  --seal:         #9C2B24;
  --seal-soft:    #F3DFDC;
  --azure:        #2A4C63;
  --azure-soft:   #DCE6EC;

  --f-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --rail-l: 15.5rem;
  --rail-r: 13.5rem;
  --gut: clamp(1.1rem, 3.2vw, 2.6rem);
  --r: 2px;
}

html[data-theme="dark"] {
  --paper:        #141610;
  --paper-2:      #1B1D16;
  --raised:       #1E211A;
  --ink:          #E9E9DE;
  --ink-2:        #A6AA9A;
  --ink-3:        #868A7B;
  --rule:         #32362A;
  --rule-2:       #434839;
  --brass:        #D8AB44;
  --brass-soft:   #33290F;
  --seal:         #DE7367;
  --seal-soft:    #3A211E;
  --azure:        #9CC0D6;
  --azure-soft:   #1D2A33;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --paper:#141610; --paper-2:#1B1D16; --raised:#1E211A; --ink:#E9E9DE;
    --ink-2:#A6AA9A; --ink-3:#868A7B; --rule:#32362A; --rule-2:#434839;
    --brass:#D8AB44; --brass-soft:#33290F; --seal:#DE7367; --seal-soft:#3A211E;
    --azure:#9CC0D6; --azure-soft:#1D2A33;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* trame de papier très légère */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--rule) 30%, transparent) 1px, transparent 1px);
  background-size: 100% 100%;
  opacity: .0;
}

img, svg { max-width: 100%; }
a { color: var(--azure); text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { color: var(--seal); }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem;
  font-family: var(--f-mono); font-size: .78rem;
}
.skip:focus { left: .6rem; top: .6rem; }

/* ------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--gut);
  max-width: 100rem; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-bars { display: flex; gap: 2px; height: 1.35rem; }
.brand-bars i { display: block; width: 3px; height: 100%; }
.brand-bars i:nth-child(1) { background: var(--ink); }
.brand-bars i:nth-child(2) { background: var(--brass); }
.brand-bars i:nth-child(3) { background: var(--seal); }
.brand-txt {
  font-family: var(--f-mono); font-weight: 600; font-size: .8rem;
  letter-spacing: .11em; text-transform: uppercase; line-height: 1.1;
}
.brand-sub {
  display: block; font-weight: 400; font-size: .62rem; color: var(--ink-3);
  letter-spacing: .22em;
}
.topnav { display: flex; gap: 1.35rem; margin-left: auto; }
.topnav a {
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  padding: .3rem 0; border-bottom: 1.5px solid transparent;
}
.topnav a:hover, .topnav a.on { color: var(--ink); border-color: var(--brass); }
.topbar-tools { display: flex; gap: .25rem; margin-left: .4rem; }
.ico {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--ink-2); cursor: pointer;
}
.ico:hover { color: var(--ink); border-color: var(--rule-2); background: var(--raised); }
.ico svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.i-moon { display: none; }
html[data-theme="dark"] .i-sun { display: none; }
html[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .i-sun { display: none; }
  html[data-theme="auto"] .i-moon { display: block; }
}
.only-mob { display: none; }

.readbar { height: 2px; background: transparent; }
.readbar span { display: block; height: 100%; width: 0; background: var(--brass); }

/* ------------------------------------------------------------- shell */

.shell {
  display: grid;
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  gap: 0;
  max-width: 100rem; margin: 0 auto;
  align-items: start;
}

.sidenav {
  position: sticky; top: 3.4rem;
  max-height: calc(100vh - 3.4rem); overflow-y: auto;
  border-right: 1px solid var(--rule);
  padding: 1.8rem 1rem 3rem var(--gut);
  scrollbar-width: thin;
}
.rail-title {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 1rem;
}
.rail-part {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2);
  margin: 1.5rem 0 .5rem; display: flex; gap: .5rem; align-items: baseline;
}
.rail-part span { color: var(--brass); font-weight: 600; }
.rail-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.rail-list a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem 0 .3rem .7rem; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .875rem; line-height: 1.35; text-decoration: none; color: var(--ink-2);
}
.rail-list a b { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; color: var(--ink-3); flex: none; }
.rail-list a:hover { color: var(--ink); border-left-color: var(--rule-2); }
.rail-list a.on { color: var(--ink); border-left-color: var(--seal); font-weight: 500; }
.rail-list a.on b { color: var(--seal); }

.onthis {
  position: sticky; top: 3.4rem;
  max-height: calc(100vh - 3.4rem); overflow-y: auto;
  padding: 1.8rem var(--gut) 3rem 1.2rem;
  border-left: 1px solid var(--rule);
}
.onthis ol { list-style: none; margin: 0; padding: 0; }
.onthis li { margin: 0; }
.onthis a {
  display: flex; gap: .5rem; padding: .28rem 0; font-size: .82rem; line-height: 1.35;
  text-decoration: none; color: var(--ink-2);
}
.onthis .lv3 a { padding-left: 1.1rem; font-size: .78rem; }
.ot-ref { font-family: var(--f-mono); font-size: .64rem; color: var(--ink-3); flex: none; padding-top: .18em; }
.onthis a:hover { color: var(--ink); }
.onthis a.on { color: var(--seal); }
.onthis a.on .ot-ref { color: var(--seal); }

/* ------------------------------------------------------------- chapter */

.chapter { padding: 2.6rem var(--gut) 5rem; min-width: 0; }
.chapter > article, .chapter > * { max-width: var(--measure); }
.chapter.wide > * { max-width: 74ch; }

.ch-head { margin-bottom: 2.4rem; }
.eyebrow {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin: 0 0 1rem;
}
.eb-num { color: var(--seal); font-weight: 600; }
.eb-sep { color: var(--rule-2); }

h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.3rem, 5.6vw, 3.6rem); line-height: 1.03;
  letter-spacing: -.012em; margin: 0 0 .9rem;
  text-wrap: balance;
}
.lede {
  font-size: 1.22rem; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 1.2rem; font-weight: 300; text-wrap: pretty;
}
.meta {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; gap: .6rem; margin: 0;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
.dot { color: var(--rule-2); }

.chapter h2, .chapter h3 { position: relative; scroll-margin-top: 5rem; }
.chapter h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.65rem, 3.3vw, 2.15rem); line-height: 1.12;
  margin: 3.2rem 0 1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  letter-spacing: -.008em;
}
.chapter h3 {
  font-family: var(--f-body); font-weight: 600;
  font-size: 1.16rem; line-height: 1.3; margin: 2.1rem 0 .7rem;
}
.h-anchor .h-text { display: block; }
.sec-ref {
  display: block; font-family: var(--f-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .07em; color: var(--ink-3); text-decoration: none;
  margin-bottom: .35rem;
}
.sec-ref:hover { color: var(--seal); }
.sec-ref span { color: var(--brass); }
@media (min-width: 1140px) {
  .sec-ref {
    position: absolute; left: -6.2rem; top: .1rem; width: 5.2rem;
    text-align: right; margin: 0;
  }
  .chapter h2 .sec-ref { top: 1.35rem; }
  .chapter { padding-left: calc(var(--gut) + 4.6rem); }
}

.chapter p { margin: 0 0 1.15rem; text-wrap: pretty; }
.chapter ul, .chapter ol { margin: 0 0 1.3rem; padding-left: 1.25rem; }
.chapter li { margin: 0 0 .5rem; }
.chapter ul { list-style: none; padding-left: 1.1rem; }
.chapter ul > li { position: relative; }
.chapter ul > li::before {
  content: "—"; position: absolute; left: -1.1rem; color: var(--brass); font-family: var(--f-mono); font-size: .8em;
}
.chapter ol { list-style: none; counter-reset: li; padding-left: 1.9rem; }
.chapter ol > li { position: relative; counter-increment: li; }
.chapter ol > li::before {
  content: counter(li) "."; position: absolute; left: -1.9rem; width: 1.5rem; text-align: right;
  font-family: var(--f-mono); font-size: .78em; color: var(--brass); padding-top: .18em;
}
.chapter strong { font-weight: 600; }
.chapter em { font-style: italic; }

blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.3rem;
  border-left: 2px solid var(--brass);
  font-size: 1.08rem; color: var(--ink-2); font-style: italic;
}
blockquote cite { display: block; font-style: normal; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: .6rem; }

/* --- encadrés ----------------------------------------------------- */

.box {
  margin: 1.9rem 0; padding: 1.15rem 1.25rem;
  background: var(--raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--brass); border-radius: var(--r);
}
.box > :last-child { margin-bottom: 0; }
.box-t {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 .55rem; font-weight: 600;
}
.box.key { border-left-color: var(--seal); }
.box.key .box-t { color: var(--seal); }
.box.case { border-left-color: var(--azure); background: var(--azure-soft); }
.box.case .box-t { color: var(--azure); }
.box.warn { border-left-color: var(--seal); background: var(--seal-soft); }
.box.warn .box-t { color: var(--seal); }

.chapter .box ul { margin-bottom: 0; }

/* --- tableaux ----------------------------------------------------- */

.tbl-wrap { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--rule); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: .62rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper-2); font-weight: 600;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--raised); }
td code, p code, li code {
  font-family: var(--f-mono); font-size: .84em; background: var(--paper-2);
  padding: .08em .34em; border-radius: var(--r);
}

/* --- figures / schémas -------------------------------------------- */

figure { margin: 2.1rem 0; }
figure svg { width: 100%; height: auto; display: block; }
figcaption {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ink-3); margin-top: .7rem; line-height: 1.5;
}
.fig-frame { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.2rem; background: var(--raised); }

/* couleurs utilisables dans les SVG inline */
.s-ink   { fill: var(--ink); }
.s-ink2  { fill: var(--ink-2); }
.s-brass { fill: var(--brass); }
.s-seal  { fill: var(--seal); }
.s-paper { fill: var(--raised); }
.st-rule { stroke: var(--rule-2); fill: none; stroke-width: 1.2; }
.st-ink  { stroke: var(--ink); fill: none; stroke-width: 1.4; }
.st-brass{ stroke: var(--brass); fill: none; stroke-width: 1.6; }
.svg-txt { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-2); letter-spacing: .04em; }
.svg-ttl { font-family: var(--f-mono); font-size: 11px; font-weight: 600; fill: var(--ink); letter-spacing: .06em; }
.svg-sm  { font-family: var(--f-mono); font-size: 8.5px; fill: var(--ink-3); }

/* --- définitions cliquables --------------------------------------- */

dfn {
  font-style: normal; border-bottom: 1px dotted var(--brass); cursor: help;
}
dfn:hover { color: var(--brass); }
.dfn-pop {
  position: absolute; z-index: 90; max-width: 22rem;
  background: var(--raised); border: 1px solid var(--rule-2); border-top: 2px solid var(--brass);
  padding: .8rem .9rem; border-radius: var(--r); font-size: .88rem; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
.dfn-pop b { display: block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: .3rem; }

/* --- navigation chapitres ----------------------------------------- */

.pagenav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: 3.5rem; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r);
  max-width: var(--measure);
}
.pn { background: var(--paper); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); display: block; }
.pn:hover { background: var(--raised); }
.pn span { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.pn b { font-weight: 500; font-size: 1rem; line-height: 1.25; display: block; }
.pn.next { text-align: right; }
.pn.empty { background: var(--paper); }

/* ------------------------------------------------------------- home */

.home { padding: 0 0 4rem; }
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 var(--gut); }

.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 7.2vw, 5rem); margin-bottom: 1.1rem; }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero .lede { font-size: clamp(1.15rem, 2.1vw, 1.4rem); max-width: 34ch; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .07em; color: var(--ink-3);
  text-transform: uppercase;
}
.hero-facts b { display: block; font-size: 1.5rem; font-family: var(--f-display); color: var(--ink); letter-spacing: 0; text-transform: none; font-weight: 400; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.btn {
  display: inline-block; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .72rem 1.25rem; border-radius: var(--r);
  background: var(--ink); color: var(--paper); text-decoration: none; border: 1px solid var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn.ghost { background: none; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { background: var(--raised); color: var(--ink); border-color: var(--ink); }

/* pile de la hiérarchie des normes — élément signature */
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack-lbl { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .8rem; }
.lvl {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule-2); border-left: 3px solid var(--brass);
  background: var(--raised); color: var(--ink);
  padding: .62rem .9rem; border-radius: var(--r);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lvl i { font-style: normal; color: var(--ink-3); font-size: .64rem; }
.lvl:hover, .lvl[aria-expanded="true"] { background: var(--brass-soft); border-left-color: var(--seal); transform: translateX(4px); }
.lvl-1 { margin-right: 0; }
.lvl-2 { margin-right: 1.1rem; }
.lvl-3 { margin-right: 2.2rem; }
.lvl-4 { margin-right: 3.3rem; }
.lvl-5 { margin-right: 4.4rem; }
.stack-note {
  margin-top: 1rem; padding: .85rem 1rem; border: 1px dashed var(--rule-2);
  border-radius: var(--r); font-size: .92rem; color: var(--ink-2); min-height: 5.2rem;
}
.stack-note b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lvl { transition: none; } .lvl:hover { transform: none; } }

.sec-title {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 .6rem; line-height: 1.1;
}
.sec-sub { color: var(--ink-2); max-width: 52ch; margin: 0 0 2.6rem; font-size: 1.08rem; }

.threeq { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--rule); background: var(--paper-2); }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); }
.q-grid a { background: var(--paper); padding: 1.5rem 1.35rem; text-decoration: none; color: var(--ink); display: block; }
.q-grid a:hover { background: var(--raised); }
.q-grid p { margin: 0; }
.q-q { font-family: var(--f-display); font-size: 1.28rem; line-height: 1.2; margin-bottom: .5rem !important; }
.q-a { color: var(--ink-2); font-size: .95rem; }
.q-go { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-top: .8rem !important; }

.sommaire { padding: clamp(3rem, 7vw, 5rem) 0; }
.part { margin-bottom: 3.2rem; }
.part-head { margin-bottom: 1.2rem; }
.part-num { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--seal); margin: 0 0 .3rem; }
.part-head h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; margin: 0 0 .25rem; }
.part-head p { color: var(--ink-2); margin: 0; font-size: .98rem; }
.ch-grid { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ch-grid li { margin: 0; }
.ch-grid a {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1rem .4rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.ch-grid a:hover { background: var(--raised); }
.ch-grid a:hover .cg-num { color: var(--seal); }
.cg-num { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); }
.cg-body b { display: block; font-weight: 500; font-size: 1.12rem; line-height: 1.25; margin-bottom: .18rem; }
.cg-body em { font-style: normal; color: var(--ink-2); font-size: .94rem; line-height: 1.45; display: block; }
.cg-min { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-3); white-space: nowrap; }

.notfound { padding: 5rem 0; }

/* ------------------------------------------------------------- foot */

.foot { border-top: 1px solid var(--rule); background: var(--paper-2); }
.foot-in {
  max-width: 100rem; margin: 0 auto; padding: 2.4rem var(--gut) 3rem;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem;
}
.foot-mark { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .7rem; }
.foot-note { color: var(--ink-2); font-size: .88rem; max-width: 58ch; margin: 0; line-height: 1.6; }
.foot nav { display: flex; flex-direction: column; gap: .45rem; }
.foot nav a { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--seal); }

/* ------------------------------------------------------------- search */

.searchbox { position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--ink) 42%, transparent); display: grid; place-items: start center; padding: 8vh 1rem 1rem; }
.searchbox-panel { width: min(42rem, 100%); background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.25); }
.searchbox-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.sb-ico { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; flex: none; }
#search-input { flex: 1; border: none; background: none; font-family: var(--f-body); font-size: 1.05rem; color: var(--ink); outline: none; }
.sb-close { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-3); padding: .28rem .5rem; border-radius: var(--r); cursor: pointer; }
.searchbox-results { max-height: 60vh; overflow-y: auto; }
.sb-item { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.sb-item:last-child { border-bottom: none; }
.sb-item:hover, .sb-item.on { background: var(--raised); }
.sb-src { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: .25rem; }
.sb-txt { font-size: .9rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.sb-txt mark { background: var(--brass-soft); color: var(--ink); padding: 0 .1em; }
.sb-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-3); font-size: .92rem; }

/* ------------------------------------------------------------- glossaire */

.gl-tools { display: flex; gap: 1rem; align-items: center; margin: 0 0 1.2rem; }
#gl-filter { flex: 1; padding: .65rem .8rem; border: 1px solid var(--rule-2); background: var(--raised); color: var(--ink); font-family: var(--f-body); font-size: 1rem; border-radius: var(--r); }
.gl-count { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); margin: 0; white-space: nowrap; }
.gl-alpha { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.gl-alpha a { font-family: var(--f-mono); font-size: .74rem; padding: .22rem .45rem; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: var(--ink-2); }
.gl-alpha a:hover { border-color: var(--brass); color: var(--brass); }
.gl-letter { font-family: var(--f-display) !important; font-size: 2rem !important; color: var(--brass); border-top: 1px solid var(--rule); padding-top: .8rem !important; margin: 2.4rem 0 .8rem !important; }
dl.gl { margin: 0; }
.gl-item { padding: .9rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 5.5rem; }
.gl-item dt { font-weight: 600; font-size: 1.06rem; margin-bottom: .25rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.gl-item dd { margin: 0; color: var(--ink-2); }
.gl-ch { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; border: 1px solid var(--rule); padding: .1rem .38rem; border-radius: var(--r); }
.gl-ch:hover { border-color: var(--brass); color: var(--brass); }
.gl-see { display: block; margin-top: .35rem; font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }
.gl-item[hidden] { display: none; }

/* ------------------------------------------------------------- quiz */

.quiz-setup { border: 1px solid var(--rule); background: var(--raised); border-radius: var(--r); padding: 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: end; }
.qs-row { display: flex; flex-direction: column; gap: .35rem; }
.qs-row label { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qs-row select { padding: .55rem .6rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: .95rem; border-radius: var(--r); min-width: 12rem; }
.q-card { border: 1px solid var(--rule); border-radius: var(--r); padding: 1.4rem; margin-top: 1.6rem; background: var(--raised); }
.q-prog { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .8rem; display: flex; justify-content: space-between; }
.q-txt { font-size: 1.16rem; line-height: 1.4; margin: 0 0 1.1rem; font-weight: 500; }
.q-opts { display: flex; flex-direction: column; gap: .5rem; }
.q-opt { text-align: left; padding: .7rem .9rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: var(--r); cursor: pointer; font-family: var(--f-body); font-size: 1rem; line-height: 1.4; }
.q-opt:hover:not(:disabled) { border-color: var(--brass); background: var(--brass-soft); }
.q-opt:disabled { cursor: default; }
.q-opt.good { border-color: #3f7d4e; background: color-mix(in srgb, #3f7d4e 14%, var(--paper)); }
.q-opt.bad { border-color: var(--seal); background: var(--seal-soft); }
.q-exp { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--brass); background: var(--paper); border-radius: var(--r); font-size: .95rem; }
.q-exp p { margin: 0 0 .5rem; }
.q-exp a { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.q-next { margin-top: 1rem; }
.quiz-result { margin-top: 2rem; padding: 1.6rem; border: 1px solid var(--rule); border-top: 3px solid var(--brass); border-radius: var(--r); background: var(--raised); }
.qr-score { font-family: var(--f-display); font-size: 3rem; line-height: 1; margin: 0 0 .4rem; }
.qr-bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; margin: 1rem 0; }
.qr-bar span { display: block; height: 100%; background: var(--brass); }

/* ------------------------------------------------------------- outil */

.tool { border: 1px solid var(--rule); border-radius: var(--r); background: var(--raised); padding: 1.3rem; margin: 2rem 0; }
.tool h4 { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 1rem; }
.tool-q { font-size: 1.06rem; font-weight: 500; margin: 0 0 .9rem; }
.tool-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-opt { padding: .5rem .8rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: var(--r); cursor: pointer; font-family: var(--f-body); font-size: .95rem; }
.tool-opt:hover { border-color: var(--brass); background: var(--brass-soft); }
.tool-res { margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--seal); background: var(--paper); border-radius: var(--r); }
.tool-res b { display: block; font-size: 1.1rem; margin-bottom: .35rem; }
.tool-restart { margin-top: .9rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: none; color: var(--azure); cursor: pointer; text-decoration: underline; padding: 0; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--rail-l) minmax(0, 1fr); }
  .onthis { display: none; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .only-mob { display: grid; }
  .topnav { display: none; }
  .sidenav {
    position: fixed; inset: 3.4rem 0 0 auto; width: min(20rem, 86vw); z-index: 55;
    background: var(--paper); border-left: 1px solid var(--rule-2); border-right: none;
    transform: translateX(102%); transition: transform .22s ease;
    padding: 1.5rem 1.3rem 4rem; max-height: none; height: calc(100dvh - 3.4rem);
  }
  .sidenav.open { transform: none; box-shadow: -18px 0 40px rgba(0,0,0,.16); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .pagenav { grid-template-columns: minmax(0, 1fr); }
  .pn.next { text-align: left; }
  .chapter { padding-left: var(--gut); }
}

@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }

/* ------------------------------------------------------------- print */

@media print {
  .topbar, .sidenav, .onthis, .foot, .pagenav, .searchbox, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .shell { display: block; }
  .chapter { padding: 0; max-width: none; }
  .chapter > article { max-width: none; }
  .sec-ref { position: static; text-align: left; }
  a { color: #000; text-decoration: none; }
  .box, .tbl-wrap, figure { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}