:root{
  --papier:#F5F3EE;
  --papier-2:#EBE8E1;
  --encre:#131A26;
  --encre-2:#39414F;
  --encre-3:#6B7382;
  --trait:#CFCBC2;
  --petrole:#101F6E;
  --orange:#C2762A;
  --rouge:#A32E22;
  --vert:#2E6B4F;
  --surface:#FFFFFF;
  --surface-2:#FAF9F6;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --grot:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --rail:280px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --papier:#0D121C; --papier-2:#141C2A; --encre:#E8EAEF; --encre-2:#A9B2C1;
    --encre-3:#727C8D; --trait:#28303F; --petrole:#7C8FE8; --orange:#E9A45C;
    --rouge:#E4705F; --vert:#5FBF92; --surface:#141C2A; --surface-2:#18212F;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--serif); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.saut{
  position:absolute;left:-9999px;top:0;background:var(--petrole);color:#fff;
  padding:10px 16px;z-index:100;font-family:var(--grot);font-size:14px;
}
.saut:focus{left:0}

.page{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
@media(max-width:900px){.page{grid-template-columns:1fr}}

/* ---------- sommaire ---------- */
.rail{
  border-right:1px solid var(--trait); padding:30px 22px 60px;
  position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--papier);
}
@media(max-width:900px){
  .rail{
    position:fixed; inset:0 auto 0 0; width:280px; z-index:40;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  .rail.ouvert{transform:none}
}
.marque{display:block;text-decoration:none;margin-bottom:30px}
.marque-nom{
  display:block; font-family:var(--grot); font-weight:700; font-size:16px;
  letter-spacing:-.01em; color:var(--encre);
}
.marque-sous{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--encre-3); margin-top:3px;
}
/* Les groupes sont des sous-niveaux du process : ils s'en rapprochent, se
   serrent entre eux et prennent un alinéa. Il y aura d'autres process au-dessus
   d'eux — la place se garde maintenant. */
.groupe{margin:0 0 1px 16px}
.groupe-nom{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--encre-3); padding:4px 10px 4px 18px;
  cursor:pointer; list-style:none; position:relative; border-radius:2px;
}
.groupe-nom::-webkit-details-marker{display:none}
.groupe-nom:hover{color:var(--encre);background:var(--papier-2)}
/* le chevron dit si le volet est ouvert, et il est seul à le dire */
.groupe-nom::before{
  content:""; position:absolute; left:4px; top:8px; width:5px; height:5px;
  border-right:1.5px solid var(--encre-3); border-bottom:1.5px solid var(--encre-3);
  transform:rotate(-45deg); transition:transform .15s ease;
}
.groupe[open] > .groupe-nom::before{transform:rotate(45deg)}
.groupe > ul{margin:1px 0 5px}
/* L'entrée principale : un lien direct, au même rang qu'un groupe. */
.entree{
  display:block; text-decoration:none; font-family:var(--grot); font-weight:600;
  font-size:14.5px; color:var(--encre); padding:8px 10px; border-radius:2px;
  margin-bottom:3px; border-left:2px solid transparent; line-height:1.3;
}
.entree:hover{background:var(--papier-2)}
.entree.actif{border-left-color:var(--orange);background:var(--papier-2)}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.rail a{
  display:block; text-decoration:none; color:var(--encre-2); font-family:var(--grot);
  font-size:14px; font-weight:500; padding:5px 10px; border-radius:2px;
  border-left:2px solid transparent; line-height:1.35;
}
.rail a:hover{background:var(--papier-2);color:var(--encre)}
.rail a.actif{
  color:var(--encre); font-weight:600; border-left-color:var(--orange);
  background:var(--papier-2);
}
.rail a:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

.bascule{
  display:none; position:fixed; top:14px; left:14px; z-index:50; width:42px; height:42px;
  border:1px solid var(--trait); background:var(--surface); border-radius:3px;
  cursor:pointer; padding:11px 10px; flex-direction:column; justify-content:space-between;
}
.bascule span{display:block;height:2px;background:var(--encre);border-radius:1px}
@media(max-width:900px){.bascule{display:flex}}

/* ---------- contenu ---------- */
main{padding:56px 40px 100px;max-width:860px}
@media(max-width:900px){main{padding:76px 22px 80px}}
h1{
  font-family:var(--grot); font-weight:700; font-size:clamp(27px,4vw,40px);
  line-height:1.08; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance;
}
.chapo{font-size:18px;color:var(--encre-2);margin:0 0 34px;max-width:60ch}
.chapo:empty{display:none}
h2{
  font-family:var(--grot); font-weight:700; font-size:23px; letter-spacing:-.012em;
  margin:46px 0 14px; padding-top:22px; border-top:1px solid var(--trait);
  text-wrap:balance;
}
h3{font-family:var(--grot);font-weight:600;font-size:17.5px;margin:30px 0 10px}
h4{font-family:var(--grot);font-weight:600;font-size:15px;margin:24px 0 8px}
p{margin:15px 0;max-width:66ch;color:var(--encre-2)}
strong{color:var(--encre);font-weight:600}
a{color:var(--petrole);text-decoration-thickness:1px;text-underline-offset:2px}
ul,ol{max-width:66ch;color:var(--encre-2);padding-left:22px}
li{margin:7px 0}
li::marker{color:var(--encre-3)}
hr{border:0;border-top:1px solid var(--trait);margin:42px 0}
blockquote{
  margin:22px 0; padding:2px 0 2px 18px; border-left:2px solid var(--orange);
  max-width:64ch;
}
blockquote p{margin:0;color:var(--encre-2)}

code{
  font-family:var(--mono); font-size:.855em; background:var(--papier-2);
  padding:1.5px 5px; border-radius:2px; color:var(--encre);
}
pre{
  background:var(--encre); color:#DCE3EE; padding:14px 16px; border-radius:3px;
  overflow-x:auto; margin:18px 0; line-height:1.68;
}
@media (prefers-color-scheme: dark){pre{background:#080C13;border:1px solid var(--trait)}}
pre code{background:none;padding:0;color:inherit;font-size:12.5px}

table{
  border-collapse:collapse; margin:22px 0; font-size:15px; width:100%;
  display:block; overflow-x:auto;
}
th,td{
  border-bottom:1px solid var(--trait); padding:9px 16px 9px 0; text-align:left;
  vertical-align:top; color:var(--encre-2);
}
th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-3); font-weight:500; border-bottom-color:var(--encre-3);
  white-space:nowrap;
}
td strong{color:var(--encre)}
td code{font-size:12px;white-space:nowrap}

footer{
  margin-top:72px; padding-top:22px; border-top:1px solid var(--trait);
  font-family:var(--mono); font-size:11px; color:var(--encre-3); line-height:1.8;
}
footer p{color:inherit;margin:0;max-width:none}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- volets : un chapitre qu'on ouvre et qu'on referme ---------- */
.volets-barre{display:flex;justify-content:flex-end;margin:26px 0 -8px}
.volets-tout{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--encre-3); background:none; border:1px solid var(--trait); border-radius:2px;
  padding:5px 11px; cursor:pointer;
}
.volets-tout:hover{color:var(--encre);border-color:var(--encre-3)}
.volets-tout:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.volet{border-top:1px solid var(--trait);margin:0}
.volet>summary{
  font-family:var(--grot); font-weight:700; font-size:23px; letter-spacing:-.012em;
  line-height:1.25; text-wrap:balance; cursor:pointer; list-style:none;
  padding:22px 30px 14px 0; position:relative; color:var(--encre);
}
.volet>summary::-webkit-details-marker{display:none}
.volet>summary:hover{color:var(--petrole)}
.volet>summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* Le chevron dit l'état, et il est seul à le dire : pas de fond, pas de bordure. */
.volet>summary::after{
  content:""; position:absolute; right:4px; top:33px; width:9px; height:9px;
  border-right:2px solid var(--encre-3); border-bottom:2px solid var(--encre-3);
  transform:rotate(45deg); transition:transform .16s ease;
}
.volet[open]>summary::after{transform:rotate(-135deg);border-color:var(--orange)}
.volet-corps{padding-bottom:10px}
.volet-corps>:first-child{margin-top:6px}
.volet-corps h3{margin-top:22px}
.volet+.volet{margin-top:0}

/* ---------- fiches : la grille cliquable d'une section ---------- */
.cartes{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:12px; margin:22px 0 34px;
}
.carte{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--surface); border:1px solid var(--trait); border-radius:3px;
  padding:15px 16px 16px; border-left:2px solid var(--trait);
  transition:border-color .14s ease, transform .14s ease;
}
.carte:hover{border-color:var(--encre-3);border-left-color:var(--orange);transform:translateY(-1px)}
.carte:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.carte-titre{
  font-family:var(--grot); font-weight:600; font-size:14.5px; line-height:1.3;
  color:var(--encre); letter-spacing:-.005em;
}
.carte-chapo{font-size:13.5px;line-height:1.5;color:var(--encre-3)}
.carte-chapo:empty{display:none}

/* Le retour à la chaîne, en pied de chaque fiche : Adrien veut y revenir sans
   avoir à replier la dernière section ni à passer par le sommaire. */
.retour-chaine{margin:46px 0 0}
.retour-chaine a{
  font-family:var(--grot); font-size:14px; font-weight:500; text-decoration:none;
  color:var(--encre-2); border-bottom:1px solid var(--trait); padding-bottom:2px;
}
.retour-chaine a:hover{color:var(--petrole);border-bottom-color:var(--petrole)}