/* ============================================================
   Charte graphique : néo-brutalisme doux.

   Un fond crème, des bordures noires franches, des ombres
   décalées pleines, et quatre aplats de couleur : jaune, rose,
   bleu, vert. Changer une valeur ici recolore tout le site.

   Les aplats vifs portent toujours du texte noir : le blanc
   sur ces couleurs ne serait pas lisible. Le vert reste réservé
   au juste et le rouge à l'erreur ; le rose, le jaune et le bleu
   sont décoratifs et ne signalent jamais une faute.
   ============================================================ */
:root{
  --paper:#FFFDF5;--carte:#FFFFFF;--surface:#F6F1E3;--surface-2:#E9E2CF;
  --ink:#111111;--muted:#4A4A4A;--rule:#111111;--rule-doux:#DDD5C0;
  --jaune:#FFD23F;--jaune-clair:#FFF1BF;
  --rose:#FF8FAB;--rose-clair:#FFE0E8;
  --bleu:#7AA2FF;--bleu-clair:#DFE8FF;
  --vert:#3DDC97;
  --accent:#2F55C8;--accent-soft:#DFE8FF;--accent-fonce:#1E3A94;
  --ok:#0B7A4B;--ok-soft:#D6F8E8;--ok-encre:#0B3D27;
  --alerte:#C8102E;--alerte-soft:#FFE1E1;--alerte-vif:#FFB3B3;
  --measure:44rem;
  --rayon:14px;--rayon-petit:10px;--rayon-pilule:999px;
  --bord:2px solid var(--ink);
  --ombre:4px 4px 0 var(--ink);
  --ombre-forte:6px 6px 0 var(--ink);
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --titre:"Space Grotesk","Public Sans",system-ui,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --vitesse:.45s;--courbe:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Toutes les animations se coupent si le système le demande. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .revele{opacity:1!important;transform:none!important}
}

/* Un bouton qui s'enfonce : il remonte au survol, touche le
   fond au clic. Partagé par tous les boutons du site. */
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}

/* ---------- barre de progression de lecture ---------- */
#progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--rose);border-right:2px solid var(--ink);z-index:60;transition:width .15s linear}

/* ---------- barre de navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:.9rem;
  padding:.75rem clamp(1.25rem,4vw,2.5rem);
  background:var(--jaune);border-bottom:var(--bord);
  font-size:.875rem;
}
.nav-retour{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--titre);font-weight:700;color:var(--ink);text-decoration:none;
  background:var(--paper);border:var(--bord);border-radius:var(--rayon-petit);
  padding:.4rem .8rem;box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--courbe),box-shadow .15s var(--courbe);
}
.nav-retour:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.nav-retour:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.nav-retour span{font-size:1.1em;line-height:1}
.nav-titre{font-family:var(--titre);color:var(--ink);margin-left:auto;font-weight:500}
.nav-titre b{font-weight:700}
.nav button{
  font-family:var(--titre);font-size:inherit;font-weight:700;
  background:var(--ink);color:var(--paper);border:var(--bord);
  border-radius:var(--rayon-petit);padding:.45rem .95rem;
  cursor:pointer;transition:transform .15s var(--courbe),box-shadow .15s var(--courbe);
}
.nav button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--paper)}
@media (min-width:901px){.nav .toc-bouton{display:none}}
@media (max-width:620px){
  .nav-titre{display:none}.nav .toc-bouton{margin-left:auto}
  /* sur téléphone, le retour redevient un simple lien pour tenir sur une ligne */
  .nav{gap:.6rem;padding:.6rem 1rem}
  .nav-retour{white-space:nowrap;background:transparent;border:0;box-shadow:none;padding:.4rem 0}
  .nav-retour:hover,.nav-retour:active{transform:none;box-shadow:none}
}

.shell{display:grid;grid-template-columns:15.5rem minmax(0,var(--measure));gap:clamp(2rem,5vw,5rem);max-width:80rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem) 8rem}

/* ---------- sommaire ---------- */
.toc{position:sticky;top:3.75rem;align-self:start;max-height:calc(100vh - 4.5rem);overflow-y:auto;padding:2.5rem .4rem 3rem 0}
.toc-head{font-size:.75rem;color:var(--muted);padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:var(--bord);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.toc-head strong{display:block;font-family:var(--titre);color:var(--ink);font-size:1rem;font-weight:700;text-transform:none;letter-spacing:-.01em;margin-bottom:.15rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin:0}
.toc a{
  position:relative;display:grid;grid-template-columns:1.5rem 1fr;gap:.5rem;align-items:start;
  padding:.45rem .65rem;margin-bottom:.2rem;border-radius:var(--rayon-petit);border:2px solid transparent;
  color:var(--muted);text-decoration:none;font-size:.875rem;line-height:1.35;
  transition:background .2s var(--courbe),color .2s var(--courbe),border-color .2s var(--courbe);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--titre);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:700;
  color:var(--muted);padding-top:.08em;transition:color .2s var(--courbe);
}
.toc a:hover{background:var(--surface);color:var(--ink)}
.toc a.on{background:var(--jaune);border-color:var(--ink);color:var(--ink);font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.toc a.on::before{color:var(--ink)}
/* section déjà parcourue : la puce devient une coche */
.toc a.fait::before{content:"\2713";color:var(--ok);font-size:.875rem}
/* section pas encore ouverte par « Suivant » : grisée, inactive */
.toc a.verrouille{opacity:.4;cursor:not-allowed}
.toc a.verrouille:hover{background:transparent;color:var(--muted)}
.toc .atelier .lib::after{
  content:"atelier";display:inline-block;vertical-align:.1em;
  font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);background:var(--bleu);border:1.5px solid var(--ink);
  border-radius:var(--rayon-pilule);padding:.05rem .4rem;margin-left:.4rem;
}
.toc-foot{margin-top:1.25rem;padding-top:1rem;border-top:var(--bord);font-size:.75rem;color:var(--muted);line-height:1.5}
/* le lien du pied n'est pas une entrée du sommaire : ni numéro, ni cadre */
.toc .toc-qcm{display:inline;padding:0;margin:0;border:0;font-size:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.toc .toc-qcm::before{content:none}
.toc .toc-qcm:hover{background:transparent}

article{padding:3rem 0 0;min-width:0}

/* ---------- titres ---------- */
.eyebrow{
  display:inline-block;font-family:var(--titre);font-size:.8125rem;font-weight:700;color:var(--ink);
  background:var(--rose);border:var(--bord);border-radius:var(--rayon-pilule);
  padding:.2rem .8rem;margin:0 0 1rem;letter-spacing:.02em;
}
h1{font-family:var(--titre);font-size:clamp(2.4rem,6vw,3.9rem);line-height:1;letter-spacing:-.04em;font-weight:700;margin:0 0 1.1rem}
.meta{font-size:.9375rem;color:var(--muted);margin:0 0 2.5rem}
/* dans un chapitre, le titre n'a plus de ligne .meta sous lui : il reprend son espace */
article > h1{margin-bottom:2.5rem}
.hook{
  background:var(--jaune-clair);border:var(--bord);border-radius:var(--rayon);box-shadow:var(--ombre-forte);
  padding:1.75rem;margin:0 0 3.5rem;font-family:var(--titre);font-size:1.3rem;line-height:1.4;
  letter-spacing:-.02em;font-weight:500;
}
.hook p{margin:0 0 .7rem}
.hook p:last-child{margin:0;font-family:var(--sans);font-size:1rem;color:var(--muted);font-weight:400}

section{padding-top:3.5rem;margin-top:3.5rem;border-top:2px dashed var(--ink)}
section:first-of-type{border-top:0;margin-top:0;padding-top:0}
h2{font-family:var(--titre);font-size:clamp(1.7rem,3.2vw,2.25rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;margin:0 0 1.2rem}
h2 .num{
  display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-bottom:.9rem;
  font-variant-numeric:tabular-nums;font-size:1.0625rem;font-weight:700;letter-spacing:0;color:var(--ink);
  background:var(--bleu);border:var(--bord);border-radius:12px;box-shadow:3px 3px 0 var(--ink);
}
h3{font-family:var(--titre);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;margin:2rem 0 .6rem}
p{margin:0 0 1.1rem}
strong{font-weight:700}
ul{list-style:none;margin:0 0 1.2rem;padding-left:0}
ul li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}
ul li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.55rem;height:.55rem;border-radius:2px;background:var(--rose);border:1.5px solid var(--ink)}

.ref{
  font-size:.9375rem;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;transition:color .2s var(--courbe);
}
.ref:hover{color:var(--accent-fonce);text-decoration-thickness:2px}

/* ---------- encadré latéral ---------- */
.note{
  background:var(--rose-clair);border:var(--bord);border-radius:var(--rayon);
  padding:1.1rem 1.25rem;margin:0 0 1.5rem;font-size:.875rem;line-height:1.5;
}
.note b{display:block;margin-bottom:.3rem;font-family:var(--titre);font-weight:700;color:var(--ink)}
.note p{margin:0;color:var(--ink)}
/* L'encadré ne part en marge que s'il y a vraiment la place :
   en dessous il reste dans le flux, sinon il dépasse de la page. */
@media (min-width:1440px){
  .note{float:right;clear:right;width:13.5rem;margin:.3rem -15.5rem 1.3rem 2rem;transform:rotate(1deg)}
}

/* ---------- tableaux ---------- */
.table-wrap{overflow-x:auto;margin:0 0 1.75rem;border-radius:var(--rayon);border:var(--bord);background:var(--carte);box-shadow:var(--ombre)}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--rule-doux);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
thead th{font-family:var(--titre);font-weight:700;font-size:.8125rem;color:var(--ink);background:var(--jaune);border-bottom:var(--bord)}
tbody tr{transition:background .2s var(--courbe)}
tbody tr:hover{background:var(--jaune-clair)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

figure{margin:0 0 1.75rem}
figcaption{font-size:.875rem;color:var(--muted);margin-top:.9rem;line-height:1.5}
.fig-svg{width:100%;height:auto;display:block;background:var(--carte);border:var(--bord);border-radius:var(--rayon);box-shadow:var(--ombre)}
@media (max-width:759px){.fig-cycle{display:none}}
@media (min-width:760px){.cycle-list{display:none}}

/* ---------- liste du cycle ---------- */
ol.cycle{list-style:none;margin:0 0 1.75rem;padding:0;counter-reset:cy}
ol.cycle li{counter-increment:cy;padding-left:2.9rem;position:relative;margin-bottom:1rem}
ol.cycle li::before{
  content:counter(cy);position:absolute;left:0;top:-.1em;
  width:2rem;height:2rem;border-radius:9px;
  background:var(--bleu);color:var(--ink);border:var(--bord);
  display:grid;place-items:center;font-family:var(--titre);font-size:.875rem;font-weight:700;
}
ol.cycle li b{font-weight:700}

/* ---------- matrice ---------- */
.matrix{display:grid;grid-template-columns:7.5rem 1fr 1fr;font-size:.875rem;margin:0 0 .8rem;border-radius:var(--rayon);overflow:hidden;border:var(--bord);background:var(--carte);box-shadow:var(--ombre)}
.matrix > div{padding:.9rem;border-bottom:var(--bord);border-right:var(--bord)}
.matrix > div:nth-child(3n){border-right:0}
.matrix > div:nth-last-child(-n+3){border-bottom:0}
.matrix .mh{font-family:var(--titre);font-weight:700;color:var(--ink);font-size:.8125rem;line-height:1.3;background:var(--jaune)}
.matrix .mr{font-family:var(--titre);font-weight:700;color:var(--ink);font-size:.8125rem;line-height:1.3;background:var(--jaune)}
.matrix .cell b{display:block;font-family:var(--titre);font-weight:700;margin-bottom:.2rem}
.matrix .cell span{color:var(--muted);line-height:1.45;display:block}
.matrix .good{background:var(--ok-soft)}
.matrix .star{background:var(--bleu-clair)}

/* ---------- schéma de flux ---------- */
.flow{font-size:.875rem;margin:0 0 1.25rem}
.flow .fbox{
  border:var(--bord);border-radius:var(--rayon-petit);background:var(--carte);
  padding:.85rem 1rem;margin-bottom:.5rem;
  transition:transform .2s var(--courbe),box-shadow .2s var(--courbe);
}
.flow .fbox:hover{transform:translate(-2px,-2px);box-shadow:var(--ombre)}
.flow .fbox b{display:block;font-family:var(--titre);font-weight:700;font-size:.9375rem;margin-bottom:.1rem}
.flow .fbox span{color:var(--muted);font-variant-numeric:tabular-nums}
.flow .fsplit{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.flow .fstep{background:var(--bleu-clair)}
.flow .fstep b{color:var(--ink)}
.flow .ffix{background:var(--rose-clair)}
.flow .conn{height:1.1rem;width:3px;background:var(--ink);margin-left:1.4rem;margin-bottom:.5rem}

/* ---------- calculettes ---------- */
.calc{
  border:var(--bord);border-radius:16px;overflow:hidden;
  margin:0 0 2rem;background:var(--carte);box-shadow:7px 7px 0 var(--bleu);
}
.calc-head{
  background:var(--bleu);padding:.85rem 1.1rem;font-family:var(--titre);font-size:1rem;font-weight:700;
  color:var(--ink);border-bottom:var(--bord);
}
.calc-body{padding:1.25rem 1.1rem}
.calc-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem;margin-bottom:1.25rem}
.calc-in label{display:block;font-size:.75rem;color:var(--ink);font-weight:700;margin-bottom:.35rem}
.calc-in input,.calc-in select{
  width:100%;font-family:var(--titre);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:.6rem .7rem;border:var(--bord);background:var(--paper);
  color:var(--ink);border-radius:var(--rayon-petit);
  transition:box-shadow .15s var(--courbe);
}
.calc-in input:focus,.calc-in select:focus{outline:0;box-shadow:0 0 0 3px var(--jaune),0 0 0 5px var(--ink)}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1rem;border-top:var(--bord);padding-top:1.1rem}
.calc-out div span{display:block;font-size:.75rem;color:var(--muted);font-weight:700;margin-bottom:.2rem}
.calc-out div b{
  display:block;font-family:var(--titre);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1.1;letter-spacing:-.02em;
}
.calc-out div.hi{background:var(--jaune);border:var(--bord);border-radius:var(--rayon-petit);padding:.5rem .7rem;margin:-.5rem -.2rem}
.calc-out div.hi span{color:var(--ink)}
/* petit flash quand une valeur calculée change */
@keyframes flash-valeur{0%{background:var(--rose)}100%{background:transparent}}
.calc-out div b.maj{animation:flash-valeur .6s var(--courbe);border-radius:6px}
.calc-note{font-size:.8125rem;color:var(--muted);margin:1.1rem 0 0;line-height:1.5}

.formula{
  font-family:var(--titre);font-size:1rem;font-weight:500;background:var(--jaune);
  border:var(--bord);border-radius:var(--rayon);box-shadow:5px 5px 0 var(--ink);
  padding:1rem 1.2rem;margin:0 0 1.5rem;font-variant-numeric:tabular-nums;line-height:1.8;
}
.formula em{font-style:normal;color:var(--ink);font-weight:700}

/* ---------- boutons d'action ---------- */
.exo button,.lock button,.q-next,.q-again,.btn-suite{
  font-family:var(--titre);font-size:.9375rem;font-weight:700;
  border:var(--bord);border-radius:var(--rayon-petit);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s var(--courbe),box-shadow .12s var(--courbe),background .2s var(--courbe);
}
.exo button:hover:not(:disabled),.lock button:hover,.q-next:hover,.q-again:hover,.btn-suite:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.exo button:active:not(:disabled),.lock button:active,.q-next:active,.q-again:active,.btn-suite:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* ---------- exercices ---------- */
.exo{
  background:var(--carte);border:var(--bord);border-radius:var(--rayon);box-shadow:5px 5px 0 var(--ink);
  padding:1.25rem;margin:0 0 1.5rem;
  transition:box-shadow .3s var(--courbe);
}
.exo .q{font-size:.9375rem;font-weight:600;margin:0 0 .9rem;line-height:1.45}
.exo .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.exo input{
  font-family:var(--titre);font-size:1.0625rem;font-weight:700;font-variant-numeric:tabular-nums;width:7.5rem;
  padding:.5rem .7rem;border:var(--bord);background:var(--paper);
  color:var(--ink);border-radius:var(--rayon-petit);
  transition:box-shadow .15s var(--courbe),background .2s var(--courbe);
}
.exo input:focus{outline:0;box-shadow:0 0 0 3px var(--jaune),0 0 0 5px var(--ink)}
.exo .unit{font-size:.875rem;color:var(--muted)}
.exo button{padding:.5rem 1.2rem;background:var(--rose);color:var(--ink)}
.exo .fb{
  font-size:.875rem;line-height:1.55;margin-top:1rem;padding:.85rem 1rem;
  border-radius:var(--rayon-petit);border:1.5px solid var(--ink);display:none;
}
@keyframes apparait-fb{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.exo .fb.show{display:block;animation:apparait-fb .35s var(--courbe)}
.exo .fb.ok{background:var(--ok-soft);color:var(--ok-encre)}
.exo .fb.ok b{color:var(--ok)}
.exo .fb.no{background:var(--alerte-soft);color:#6B0F1A}
.exo .fb.no b{color:var(--alerte)}

/* Exercice terminé : il se fige. Juste, il passe au vert, son
   ombre aussi, et le bouton reste enfoncé ; corrigé, le bouton
   s'efface. */
.exo button:disabled{cursor:default}
.exo.exo-juste{box-shadow:5px 5px 0 var(--vert)}
.exo.exo-juste input{background:var(--ok-soft)}
.exo.exo-donne{box-shadow:5px 5px 0 var(--alerte-vif)}
.exo.exo-donne input{background:var(--alerte-soft)}
.exo.exo-juste .row > button,.exo.exo-juste .row > button:hover{background:var(--vert);color:var(--ink);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.exo.exo-donne .row > button,.exo.exo-donne .row > button:hover{background:var(--surface-2);color:var(--muted);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
/* réussite : la carte saute et son ombre passe au vert */
@keyframes halo-ok{0%{transform:none;box-shadow:5px 5px 0 var(--ink)}45%{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--vert)}100%{transform:none;box-shadow:5px 5px 0 var(--vert)}}
.exo.fete{animation:halo-ok .6s var(--courbe)}
/* mauvaise réponse : la ligne de saisie secoue la tête */
.exo .row.secoue{animation:secousse .4s var(--courbe)}
.exo .row.secoue input{background:var(--alerte-soft);border-color:var(--alerte)}

/* Indices et « Recommencer » : deux petits boutons calés à
   droite de la ligne de saisie. Les indices s'affichent sur
   fond jaune, décoratif : un indice n'est pas une faute. */
.exo-outils{display:inline-flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.exo .exo-outils button{padding:.35rem .8rem;font-size:.8125rem;box-shadow:2px 2px 0 var(--ink)}
.exo .exo-outils button[hidden]{display:none}
.exo .btn-indice{background:var(--jaune)}
.exo .btn-raz{background:var(--paper)}
.exo .exo-outils button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.exo .exo-outils button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.exo .indice{
  font-size:.875rem;line-height:1.55;margin:.9rem 0 0;padding:.7rem 1rem;
  background:var(--jaune-clair);border:1.5px solid var(--ink);border-radius:var(--rayon-petit);
  animation:apparait-fb .35s var(--courbe);
}
.exo .indice b{font-family:var(--titre);font-weight:700;margin-right:.3rem}
.exo .indice b::after{content:" :"}

/* Exercice en plusieurs questions : un énoncé commun, puis un
   bloc .exo auto-corrigé par question. Le conteneur ne porte pas
   la classe .exo, sinon le moteur le prendrait pour une question. */
.cas{background:var(--surface);border:var(--bord);border-radius:16px;padding:1.25rem;margin:0 0 1.75rem}
.cas > .q{font-size:.9375rem;font-weight:700;margin:0 0 1rem;line-height:1.45}
.cas .exo{padding:1rem 1.1rem;margin:0 0 .9rem;box-shadow:3px 3px 0 var(--ink)}
.cas .exo.exo-juste{box-shadow:3px 3px 0 var(--vert)}
.cas .exo.exo-donne{box-shadow:3px 3px 0 var(--alerte-vif)}
.cas .exo:last-child{margin-bottom:0}
.cas .exo .q{font-weight:600;margin-bottom:.7rem}
.cas-aide{font-size:.875rem;color:var(--muted);line-height:1.5;margin:1rem 0 .8rem}
.cas-aide b{color:var(--ink);font-weight:700}

/* ---------- bloc « Suivant » de fin de section ---------- */
.suite{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.75rem;
  background:var(--bleu);border:var(--bord);border-radius:16px;box-shadow:var(--ombre);
  padding:1rem 1rem 1rem 1.25rem;
}
.suite-libelle{font-size:.8125rem;color:var(--ink);font-weight:600;line-height:1.35;margin:0}
.suite-libelle b{display:block;font-family:var(--titre);color:var(--ink);font-weight:700;font-size:1.125rem}
.btn-suite{
  display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
  padding:.7rem 1.4rem;background:var(--ink);color:var(--paper);text-decoration:none;
}
.btn-suite .fleche{transition:transform .2s var(--courbe)}
.btn-suite:hover .fleche{transform:translateX(4px)}
.btn-suite.termine{background:var(--vert);color:var(--ink)}
.bilan{
  background:var(--ok-soft);border:var(--bord);border-radius:var(--rayon);padding:1rem 1.25rem;
  margin:2.5rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--ok-encre);
}
.bilan b{display:block;font-family:var(--titre);font-size:.8125rem;font-weight:700;color:var(--ok);margin-bottom:.25rem}
.bilan + .suite{margin-top:1.25rem}

/* ---------- la touche ludique ---------- */
.bump{animation:bump .45s var(--courbe)}

/* compteur d'exercices réussis, dans la barre du haut */
.nav-score{
  display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0;
  background:var(--paper);border:var(--bord);border-radius:var(--rayon-pilule);padding:.25rem .75rem .25rem .35rem;
  font-family:var(--titre);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);
  transition:background .3s var(--courbe);
}
.nav-score svg{width:1.2rem;height:1.2rem;transform:rotate(-90deg)}
.nav-score circle{fill:none;stroke-width:3.5}
.nav-score .fond{stroke:var(--surface-2)}
.nav-score .plein{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .6s var(--courbe)}
.nav-score span{color:var(--muted);font-weight:500}
.nav-score.complet{background:var(--vert)}
.nav-score.complet .plein{stroke:var(--ink)}
/* remise à zéro des exercices du chapitre, à côté du compteur */
.nav .nav-raz{flex-shrink:0;background:var(--paper);color:var(--ink);border-radius:var(--rayon-pilule);padding:.3rem .8rem}
.nav .nav-raz:hover{box-shadow:3px 3px 0 var(--ink)}
@media (max-width:620px){
  .nav .nav-score{margin-left:auto}
  .nav .nav-score + .toc-bouton,.nav .nav-raz + .toc-bouton{margin-left:0}
  .nav-raz-lib{display:none}
}

/* confettis : une gerbe qui monte puis retombe */
.confettis{position:fixed;inset:0;pointer-events:none;z-index:75;overflow:hidden}
.confettis i{
  position:absolute;left:0;top:0;width:9px;height:12px;border-radius:2px;opacity:0;border:1.5px solid var(--ink);
  animation:confetti var(--duree,1.1s) linear var(--delai,0s) forwards;
}
.confettis i.rond{width:10px;height:10px;border-radius:50%}
@keyframes confetti{
  0%{opacity:1;transform:translate(var(--x),var(--y)) rotate(0) scale(.5);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  45%{opacity:1;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(calc(var(--rot) * .5)) scale(1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  100%{opacity:0;transform:translate(calc(var(--x) + var(--dx) * 1.3),calc(var(--y) + var(--dy) + var(--chute))) rotate(var(--rot)) scale(1)}
}

/* message en bas d'écran */
.toast{
  position:fixed;left:50%;bottom:1.5rem;z-index:80;max-width:calc(100% - 2rem);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);text-align:center;
  border:var(--bord);border-radius:12px;padding:.7rem 1.25rem;
  font-family:var(--titre);font-size:.9375rem;font-weight:700;box-shadow:5px 5px 0 var(--rose);
  transition:opacity .3s var(--courbe),transform .3s var(--courbe);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- apparition au défilement ---------- */
.revele{opacity:0;transform:translateY(24px);transition:opacity .6s var(--courbe),transform .6s var(--courbe)}
.revele.vu{opacity:1;transform:none}

/* ---------- carte du semestre ---------- */
.map{margin:0 0 1.5rem}
.map-bloc{margin-bottom:2.25rem}
.map-bloc > h4{
  display:inline-block;margin:0 0 .9rem;font-family:var(--titre);font-size:.8125rem;font-weight:700;color:var(--ink);
  background:var(--jaune);border:var(--bord);border-radius:var(--rayon-pilule);padding:.2rem .8rem;
}
.map-row{
  display:grid;grid-template-columns:2.75rem 1fr;gap:.75rem;align-items:start;
  padding:.9rem;border-radius:var(--rayon);border:2px solid transparent;margin-bottom:.6rem;
  transition:background .2s var(--courbe);
}
.map-row:hover{background:var(--surface)}
.map-n{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;
  font-family:var(--titre);font-variant-numeric:tabular-nums;font-size:.9375rem;font-weight:700;color:var(--ink);
  background:var(--bleu);border:var(--bord);border-radius:10px;
}
.map-t{font-family:var(--titre);font-size:1.0625rem;font-weight:700;line-height:1.3;margin:0 0 .2rem;letter-spacing:-.01em}
.map-d{font-size:.8125rem;color:var(--muted);line-height:1.5;margin:0}
.map-row.here{background:var(--jaune-clair);border-color:var(--ink)}
.map-row.here .map-n{background:var(--jaune)}
.map-row.here .map-d{color:var(--ink)}

/* ---------- blocs de contenu ---------- */
.company{background:var(--surface);border:var(--bord);border-radius:16px;padding:1.75rem;margin:0 0 1.75rem}
.company h3{margin-top:0}
.recap{border:var(--bord);border-radius:16px;padding:1.75rem 1.75rem 1rem;background:var(--carte);box-shadow:7px 7px 0 var(--vert)}
.recap h3{margin-top:0}
.soon{border:2px dashed var(--ink);border-radius:var(--rayon);padding:1.5rem;font-size:.9375rem;color:var(--muted)}
.soon b{display:block;color:var(--ink);font-weight:700;margin-bottom:.3rem;font-size:1rem}
footer{margin-top:4rem;padding-top:1.5rem;border-top:var(--bord);font-size:.8125rem;color:var(--muted)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- QCM ---------- */
.lock{
  border:var(--bord);border-radius:16px;padding:1.75rem;
  background:var(--carte);box-shadow:7px 7px 0 var(--rose);
}
.lock > b{display:block;font-family:var(--titre);font-size:1.25rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.015em}
.lock p{font-size:.9375rem;color:var(--muted);margin:0 0 1.25rem;line-height:1.5}
.lock p:last-child,.lock p:has(+ button[hidden]){margin-bottom:0}
.lock button{padding:.55rem 1.4rem;background:var(--ink);color:var(--paper)}
.lock button[hidden]{display:none}
/* L'état posé par qcm-acces.js : une pastille devant le titre,
   pleine quand le QCM est ouvert, creuse quand il est fermé. Le
   bloc fermé prend le pointillé des chapitres « à venir ». */
.lock[data-etat] > b::before{
  content:"";display:inline-block;width:.6em;height:.6em;margin-right:.5em;vertical-align:.08em;
  border:2px solid var(--ink);border-radius:50%;
}
.lock[data-etat="ouvert"] > b::before{background:var(--ok);border-color:var(--ok)}
.lock[data-etat="ferme"]{border-style:dashed;box-shadow:none;background:var(--surface)}
.lock[data-etat="erreur"] > b::before{border-color:var(--alerte)}
@keyframes secousse{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.quiz{display:none;border:var(--bord);border-radius:18px;overflow:hidden;background:var(--carte);box-shadow:8px 8px 0 var(--rose)}
@keyframes ouvre-quiz{from{opacity:0;transform:scale(.98) translateY(10px)}to{opacity:1;transform:none}}
.quiz.open{display:block;animation:ouvre-quiz .5s var(--courbe)}
.q-head{
  background:var(--jaune);padding:.8rem 1.1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;
  font-family:var(--titre);font-size:.875rem;font-weight:700;color:var(--ink);border-bottom:var(--bord);
}
.q-bar{height:10px;background:var(--surface-2);border-bottom:var(--bord)}
.q-bar i{display:block;height:100%;background:var(--rose);width:0;transition:width .4s var(--courbe)}
.q-body{padding:1.5rem 1.25rem}
@keyframes apparait-q{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.q-text{font-family:var(--titre);font-size:1.3125rem;font-weight:700;line-height:1.3;margin:0 0 1.25rem;letter-spacing:-.02em;animation:apparait-q .4s var(--courbe)}
.q-opts{display:grid;gap:.7rem;margin-bottom:1.1rem}
.q-opts button{
  font:inherit;font-size:.9375rem;text-align:left;line-height:1.45;
  padding:.85rem 1rem;border:var(--bord);background:var(--paper);
  color:var(--ink);border-radius:12px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--courbe),box-shadow .15s var(--courbe),background .18s var(--courbe);
}
.q-opts button:hover:not(:disabled){background:var(--jaune-clair);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.q-opts button:disabled{cursor:default}
.q-opts button.good{background:var(--vert);font-weight:700;transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.q-opts button.bad{background:var(--alerte-vif);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.q-opts button.good::after,.q-opts button.bad::after{float:right;margin-left:.75rem;font-weight:700;animation:bump .35s var(--courbe)}
.q-opts button.good::after{content:"\2713";color:var(--ink)}
.q-opts button.bad::after{content:"\2715";color:var(--alerte)}
@keyframes pop{0%,100%{transform:translate(3px,3px) scale(1)}40%{transform:translate(3px,3px) scale(1.035)}}
.q-opts button.pop{animation:pop .45s var(--courbe)}
.q-opts button.secoue{animation:secousse .4s var(--courbe)}
/* série de bonnes réponses, au milieu de l'en-tête du QCM */
.q-serie[hidden]{display:none}
.q-serie{display:inline-block;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--rayon-pilule);padding:0 .6rem}
.q-record{font-family:var(--titre);font-size:.9375rem;font-weight:700;color:var(--ok);margin:0 0 1rem}
.q-exp{
  font-size:.875rem;line-height:1.6;background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--rayon-petit);
  padding:.9rem 1rem;margin-bottom:1.1rem;display:none;color:var(--muted);
}
.q-exp.show{display:block;animation:apparait-fb .35s var(--courbe)}
.q-exp b{color:var(--ink)}
.q-next{padding:.65rem 1.5rem;background:var(--ink);color:var(--paper);display:none}
.q-next.show{display:inline-block}

.q-end{display:none;padding:2rem 1.25rem}
.q-end.show{display:block;animation:apparait-fb .45s var(--courbe)}
.q-score{font-family:var(--titre);font-size:3.75rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;margin:0 0 .5rem;letter-spacing:-.04em}
.q-verdict{font-size:1rem;color:var(--muted);margin:0 0 1.5rem;line-height:1.55}
.q-miss{font-size:.875rem;line-height:1.55;border-top:var(--bord);padding-top:1.1rem;margin-bottom:1.5rem}
.q-miss b{display:block;margin-bottom:.7rem;font-family:var(--titre);font-size:.8125rem;color:var(--ink)}
.q-miss li{padding-left:1.5rem;margin-bottom:.7rem}
.q-miss li::before{background:var(--alerte-vif)}
.q-again{padding:.65rem 1.5rem;background:var(--paper);color:var(--ink)}

/* ---------- téléphone et tablette ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:0;padding:0 1.25rem 5rem}
  .toc{position:static;max-height:none;padding:1.5rem 0;border-bottom:var(--bord)}
  .toc[hidden]{display:none}
  article{padding-top:2rem}
  .hook{font-size:1.15rem;padding:1.35rem;margin-bottom:2.5rem}
  .matrix{grid-template-columns:5.5rem 1fr 1fr;font-size:.8125rem}
  .matrix > div{padding:.7rem}
  .flow .fsplit{grid-template-columns:1fr}
  .suite{flex-direction:column;align-items:stretch;gap:.75rem}
  .btn-suite{justify-content:center}
  .q-score{font-size:3rem}
  /* les ombres se resserrent pour ne pas déborder de l'écran */
  .exo,.formula{box-shadow:3px 3px 0 var(--ink)}
  .exo.exo-juste{box-shadow:3px 3px 0 var(--vert)}
  .exo.exo-donne{box-shadow:3px 3px 0 var(--alerte-vif)}
  .calc{box-shadow:4px 4px 0 var(--bleu)}
  .quiz,.lock{box-shadow:4px 4px 0 var(--rose)}
  .recap{box-shadow:4px 4px 0 var(--vert)}
}
@media (min-width:901px){.toc[hidden]{display:block}}

/* ============================================================
   Page d'accueil
   ============================================================ */
.accueil{max-width:72rem;margin:0 auto;padding:4.5rem clamp(1.25rem,4vw,2rem) 6rem}
.accueil .map{margin-bottom:0}
/* chaque bloc aligne ses chapitres en cartes côte à côte ;
   auto-fill garde la même largeur de colonne d'un bloc à l'autre */
.accueil .map-bloc{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));
  gap:1.1rem;align-items:stretch;
}
.accueil .map-bloc > h4{grid-column:1/-1;justify-self:start;margin-bottom:0}
.accueil .map-bloc:last-child{margin-bottom:0}
.accueil .map-row{display:flex;flex-direction:column;gap:.8rem;padding:1.1rem;margin-bottom:0}
.accueil .map-row > div:last-child{display:flex;flex-direction:column;flex:1}
.accueil .map-qcm{margin-top:auto;padding-top:.75rem}
.chap-ouvert .map-row,.map-row.chap-ouvert{
  border-color:var(--ink);background:var(--carte);box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s var(--courbe),box-shadow .15s var(--courbe);
}
.map-row.chap-ouvert:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:var(--carte)}
.map-row.chap-ouvert .map-t a{
  color:var(--ink);text-decoration:none;
  transition:color .2s var(--courbe);
}
.map-row.chap-ouvert:hover .map-t a{color:var(--accent)}
.map-row.chap-ouvert .map-t a::after{content:" \2192";color:var(--ink);font-weight:700}
.map-row.chap-a-venir{border:2px dashed #B8AF98}
.map-row.chap-a-venir:hover{background:transparent}
.chap-a-venir .map-n{background:var(--surface);border-color:#B8AF98;color:var(--muted)}
.chap-a-venir .map-t{color:var(--muted)}
.chap-a-venir .map-t::after{
  content:"à venir";display:inline-block;vertical-align:.15em;
  font-family:var(--sans);font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);background:var(--surface-2);border:1.5px solid #B8AF98;
  border-radius:var(--rayon-pilule);padding:.05rem .45rem;margin-left:.5rem;
}
@media (max-width:900px){.accueil{padding:2.5rem 1.25rem 4rem}}

/* Entrée en cascade des chapitres, en CSS seul : la page
   d'accueil ne charge aucun JavaScript. */
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.accueil .eyebrow,.accueil h1,.accueil .meta,.accueil .map-bloc,.accueil footer{
  animation:monte .6s var(--courbe) both;
}
.accueil h1{animation-delay:.05s}
.accueil .meta{animation-delay:.1s}
.accueil .map-bloc:nth-of-type(1){animation-delay:.16s}
.accueil .map-bloc:nth-of-type(2){animation-delay:.24s}
.accueil .map-bloc:nth-of-type(3){animation-delay:.32s}
.accueil footer{animation-delay:.4s}

/* ---------- page du QCM seul ---------- */
.accueil.qcm-page{max-width:var(--measure)}
.qcm-page .lock,.qcm-page .quiz{margin-top:2rem}
.qcm-page .retour-cours{margin-top:2.5rem;font-size:.9375rem;color:var(--muted)}
.qcm-page .retour-cours a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.qcm-page .retour-cours a:hover{color:var(--accent-fonce)}
/* accès direct au QCM, depuis le sommaire et depuis l'accueil */
.toc-qcm,.map-qcm a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.toc-qcm:hover,.map-qcm a:hover{color:var(--accent-fonce)}
.map-qcm{margin:.5rem 0 0;font-size:.8125rem}

/* ---------- impression ---------- */
@media print{
  .toc,.nav,#progress,.exo button,.indices,.quiz,.lock,.suite,.toast,.confettis{display:none}
  .shell{display:block;max-width:none;padding:0}
  body{background:#fff;font-size:11pt}
  .note{float:none;width:auto;margin:0 0 1rem;transform:none}
  .revele{opacity:1!important;transform:none!important}
  .calc,.recap,.quiz,.exo,.formula,.table-wrap,.matrix,.fig-svg{box-shadow:none}
}