/* ------------------------------------------------------------------
   Atelier de revue — même système de design que la page de synthèse
   (DESIGN.md, Mistral AI) : palette sunset, display near-serif, bande
   de clôture dégradée. Mono-thème clair.
   ------------------------------------------------------------------ */
:root{
  --primary:#fa520f; --primary-deep:#cc3a05; --on-primary:#ffffff;
  --sunshine-300:#ffd06a; --sunshine-500:#ffb83e; --sunshine-700:#ffa110;
  --yellow:#ffd900;
  --cream:#fff8e0; --cream-light:#fffaeb; --cream-deeper:#fff0c2; --beige-deep:#e6d5a8;
  --ink:#1f1f1f; --ink-tint:#3d3d3d; --charcoal:#2c2c2c; --slate:#4a4a4a;
  /* Les gris de la charte s'arrêtaient à #8a8a8a, soit 3,45:1 sur blanc —
     sous le plancher de 4,5:1. Assombris juste assez pour le franchir en
     gardant les trois paliers de hiérarchie. */
  --steel:#6a6a6a; --stone:#6e6e6e; --muted:#767676;
  /* L'orange de marque ne fait que 3,34:1, dans les deux sens : il reste la
     teinte des aplats décoratifs et des grands nombres. Deux variantes tirées
     de la même famille portent le texte — l'une en couleur sur fond clair,
     l'autre en aplat sous du blanc. */
  --primary-text:#c23805;
  --primary-solid:#cc3a05;
  --hairline:#e5e5e5; --hairline-soft:#ededed; --hairline-strong:#c7c7c7;
  --canvas:#ffffff; --surface:#fafafa;
  --ok:#1f7a4d; --ok-soft:#f1f8f4; --ok-line:#bcdccb;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:9999px;
  --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:20px; --s-xl:24px; --s-xxl:32px;
  --s-xxxl:40px; --s-sec:64px; --s-sec-lg:96px;

  --display:"PP Editorial Old",Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --max:1360px;

  --sunset:linear-gradient(90deg,var(--primary) 0%,var(--sunshine-700) 32%,
           var(--sunshine-500) 56%,var(--yellow) 78%,var(--cream) 100%);
  --shadow-card:rgba(0,0,0,.04) 0 4px 12px 0;
}

*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
p{margin:0}
a{color:var(--primary-text)}
code{font-family:var(--mono);font-size:.86em}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,60px);
  line-height:1.08;letter-spacing:-1px}
h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);
  line-height:1.15;letter-spacing:-.5px}
h3{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.3}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--s-xxl)}
/* Sections de premier niveau seulement : les <section> imbriquées (un bloc de
   sous-module, un niveau de quiz) posent leur propre espacement. */
main > section{padding-block:var(--s-sec)}
/* Mesure de lecture tenue autour de 70 caractères. */
.lede{font-size:17px;line-height:1.6;color:var(--slate);max-width:68ch;margin-top:var(--s-md)}
.ref{font-family:var(--mono);font-size:12px;color:var(--stone)}
.empty{color:var(--stone);font-size:14px;padding:var(--s-lg) 0}

/* ------------------------------------------------------------- barre */
.bar{position:sticky;top:0;z-index:40;background:var(--canvas);
  border-bottom:1px solid var(--hairline-soft)}
.bar__in{max-width:var(--max);margin-inline:auto;padding:0 var(--s-xxl);height:64px;
  display:flex;align-items:center;gap:var(--s-lg)}
.bar__mark{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.bar__mark span{color:var(--steel);font-weight:400}
.bar__nav{margin-left:auto;display:flex;gap:var(--s-lg);align-items:center}
.bar__nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.bar__nav a:hover{color:var(--primary-text)}
.bar__nav a.bar__cta{background:var(--ink);color:var(--on-primary);border-radius:var(--r-md);
  padding:10px 18px}
.bar__nav a.bar__cta:hover{background:var(--charcoal);color:var(--on-primary)}

/* --------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);
  padding:9px 18px;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn--primary{background:var(--primary-solid);color:var(--on-primary)}
.btn--primary:hover{background:#a82f04}
.btn--secondary{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong)}
.btn--secondary:hover{border-color:var(--primary);color:var(--primary-text)}
.btn--ghost{background:transparent;color:var(--steel);padding:9px 12px}
.btn--ghost:hover{color:var(--primary-text)}
.btn:focus-visible,.tab:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn[disabled]{background:var(--hairline);color:var(--muted);cursor:progress;
  border-color:transparent}

/* ------------------------------------------------------- accueil */
.hero{padding-block:var(--s-sec-lg) var(--s-sec)}
/* Les compteurs sont une liste de définitions : le libellé nomme la mesure au
   dessus du nombre, plutôt qu'une grille de tuiles interchangeables. */
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-lg) var(--s-xxl);margin:var(--s-xxxl) 0 0;
  padding-top:var(--s-lg);border-top:1px solid var(--hairline)}
.total{display:grid;gap:6px;align-content:start}
.total dt{font-size:13px;font-weight:500;color:var(--steel);order:1}
.total dd{margin:0;order:2;font-family:var(--display);font-size:40px;line-height:1;
  letter-spacing:-.5px;color:var(--ink);display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap}
.total dd span{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--steel);
  letter-spacing:0}
.total--lead dd{color:var(--primary)}

.explore{background:var(--surface);border-top:1px solid var(--hairline-soft)}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--s-md);margin-top:var(--s-xl)}
/* Une seule élévation déclarée : la bordure. Le survol la renforce au lieu
   d'empiler une ombre par-dessus. */
.modcard{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-lg);text-decoration:none;color:var(--ink);
  display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:var(--s-sm);
  transition:border-color .18s ease,background-color .18s ease}
.modcard:hover{border-color:var(--ink);background:var(--cream-light)}
.modcard:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.modcard__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-xs)}
.modcard__num{font-family:var(--display);font-size:30px;line-height:1;color:var(--primary)}
.modcard__pages{font-family:var(--mono);font-size:12px;color:var(--stone)}
.modcard__name{font-size:17px;font-weight:500;line-height:1.35;min-height:2.7em}
.modcard__stats{display:flex;gap:var(--s-sm);flex-wrap:wrap;font-size:13px;color:var(--steel)}
.modcard__stats b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.modcard__go{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  color:var(--primary-text);padding-top:var(--s-xs);border-top:1px solid var(--hairline-soft)}

.track{height:6px;background:var(--hairline);border-radius:var(--r-full);overflow:hidden}
.track--empty{background:var(--hairline-soft)}
.track__fill{display:block;height:100%;background:var(--primary)}
.levels{display:flex;gap:6px;flex-wrap:wrap}
.lvl{font-size:11px;font-weight:500;border-radius:var(--r-full);padding:3px 9px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--steel);
  display:flex;gap:5px}
.lvl b{font-variant-numeric:tabular-nums;color:var(--ink)}
.lvl--done{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.lvl--done b{color:var(--ok)}
.lvl--in_progress{background:var(--cream);border-color:var(--beige-deep);color:var(--ink)}

/* --------------------------------------------------------- onglets */
.modpage{padding-block:var(--s-xxl) var(--s-sec)}
/* Le numéro appartient au titre : il remplace l'étiquette qui le surplombait. */
.modpage__num{color:var(--primary)}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--hairline);margin-top:var(--s-xl);
  overflow-x:auto}
.tab{flex:none;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:var(--s-sm) var(--s-md);cursor:pointer;color:var(--steel);font-family:var(--sans);
  font-size:15px;font-weight:500;display:flex;align-items:center;gap:var(--s-xs);
  white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--primary-text);border-bottom-color:var(--primary)}
.tab__count{background:var(--cream-deeper);color:var(--ink);font-size:12px;font-weight:600;
  border-radius:var(--r-full);padding:2px 8px;font-variant-numeric:tabular-nums}
.tab__count--none{background:var(--surface);border:1px solid var(--hairline);
  color:var(--stone);font-weight:500}
.dim{color:var(--stone)}
.tabpanel{display:none;padding-top:var(--s-xl)}
.tabpanel.is-active{display:block}
.panel-intro{display:flex;gap:var(--s-lg);align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:var(--s-lg)}
.panel-intro__action{display:grid;gap:6px;justify-items:end}
.panel-intro__note{font-size:13px;color:var(--steel);text-align:right}

.linkbtn{background:none;border:0;padding:0;font-family:var(--sans);font-size:inherit;
  color:var(--primary-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--primary-deep)}

/* ------------------------------- références et durées, en saisie directe */
.metabar{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
  padding:var(--s-sm) var(--s-md);background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-md);margin-top:var(--s-md)}
.metabar--inline{margin-top:0;background:transparent;border-color:transparent;
  padding:0;gap:var(--s-sm)}
.metabar__hint{font-size:13px;color:var(--steel)}
.metabar__hint b{font-variant-numeric:tabular-nums;color:var(--ink)}

.mini{display:flex;align-items:center;gap:6px;font-size:12px}
.mini > span:first-child{font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--steel);white-space:nowrap}
.mini__input{display:flex;align-items:center;gap:4px;color:var(--steel);font-size:12px}
.mini input{width:7ch;padding:4px 8px;font-family:var(--mono);font-size:13px;
  text-align:center;border-radius:var(--r-xs);border:1px solid var(--hairline-strong);
  background:var(--canvas);color:var(--ink)}
.mini input[type=text]{width:7ch}
/* Les flèches natives du champ numérique volent la moitié de la largeur et
   tronquent la valeur : on saisit au clavier. */
.mini input[type=number]{appearance:textfield;-moz-appearance:textfield}
.mini input[type=number]::-webkit-outer-spin-button,
.mini input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}
.mini input:hover{border-color:var(--stone)}
.mini input:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);outline:0}
.mini--tight > span:first-child{font-size:11px}

/* --------------------------------------------------- barre d'outils */
.toolbar{display:flex;gap:var(--s-md);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--s-lg)}
/* La barre suit le défilement : filtre et pagination restent à portée de main
   sur une longue liste. */
.toolbar--sticky{position:sticky;top:64px;z-index:20;background:var(--canvas);
  padding-block:var(--s-sm);margin-bottom:0;
  box-shadow:0 1px 0 var(--hairline),0 8px 12px -12px rgba(0,0,0,.25)}
.jump{display:flex;align-items:center;gap:var(--s-xs)}
.jump__label{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--steel);white-space:nowrap}
.jump select{width:auto;max-width:260px;height:44px;padding:0 10px}

/* ------------------------------------------------------- pagination */
.pager{display:flex;align-items:center;gap:var(--s-sm);flex-wrap:wrap;margin-left:auto}
.pager--bottom{margin:var(--s-lg) 0 0;justify-content:center;
  padding-top:var(--s-md);border-top:1px solid var(--hairline)}
.pager--quiz{margin:0;padding:var(--s-sm) var(--s-lg);background:var(--surface);
  border-bottom:1px solid var(--hairline-soft);justify-content:flex-end}
.pager__range{font-size:13px;color:var(--steel);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pager__nav{display:flex;gap:4px;align-items:center}
.pager__btn{min-width:32px;height:32px;padding:0 8px;background:var(--canvas);
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pager__btn:hover:not([disabled]){border-color:var(--primary);color:var(--primary-text)}
.pager__btn.is-current{background:var(--primary-solid);border-color:var(--primary-solid);
  color:var(--on-primary)}
.pager__btn[disabled]{color:var(--muted);border-color:var(--hairline);cursor:default}
.pager__btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pager__gap{color:var(--stone);font-size:13px;padding:0 2px}
.search{flex:1;min-width:240px;max-width:460px;display:flex;align-items:center;gap:var(--s-xs);
  background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  padding:0 var(--s-md);height:44px}
.search:focus-within{border:2px solid var(--primary);padding:0 15px}
.search__icon{color:var(--stone);font-size:18px}
.search input{flex:1;border:0;outline:0;background:transparent;font-family:var(--sans);
  font-size:16px;min-width:0}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--slate);
  cursor:pointer}
.check input{accent-color:var(--primary);width:16px;height:16px}

/* ----------------------------------------------------- champs */
.field{display:grid;gap:6px;min-width:0}
.field > span{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--steel)}
.field small{font-size:12px;color:var(--stone);line-height:1.4}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sm)}
input[type=text],input[type=password],textarea,select{width:100%;font-family:var(--sans);
  font-size:14px;
  line-height:1.5;color:var(--ink);background:var(--canvas);border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);padding:9px 12px;resize:vertical}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{
  border-color:var(--primary);outline:0;
  box-shadow:0 0 0 1px var(--primary)}
/* Sélecteur de sous-modules : des cases à cocher plutôt qu'un select multiple,
   dont le Ctrl+clic obligatoire fait perdre la sélection au premier faux pas. */
.picker{border:1px solid var(--hairline-strong);border-radius:var(--r-md);overflow:hidden}
.picker__bar{display:flex;align-items:center;gap:var(--s-sm);padding:8px 10px;
  background:var(--surface);border-bottom:1px solid var(--hairline)}
.picker__all{background:transparent;border:0;padding:0;font-family:var(--sans);font-size:13px;
  font-weight:500;color:var(--primary-text);cursor:pointer}
.picker__all:hover{text-decoration:underline}
.picker__count{margin-left:auto;font-size:12px;color:var(--stone);font-variant-numeric:tabular-nums}
.picker__list{list-style:none;margin:0;padding:4px;max-height:300px;overflow-y:auto;
  display:grid;gap:2px}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-xs);
  align-items:center;padding:7px 8px;border-radius:var(--r-xs);cursor:pointer;font-size:14px}
.pick:hover{background:var(--surface)}
.pick.is-on{background:var(--cream)}
.pick input{accent-color:var(--primary);width:16px;height:16px;margin:0}
.pick__label{line-height:1.35;min-width:0}
.pick__label b{font-family:var(--mono);font-size:12px;color:var(--steel);font-weight:600;
  margin-right:4px}
.pick.is-on .pick__label b{color:var(--primary-text)}
.pick__figs{font-size:11px;color:var(--stone);white-space:nowrap}
.pick__figs--none{font-style:italic;color:var(--muted)}
/* Sous-module détenu par un autre groupe : lisible, mais hors d'atteinte. */
.pick.is-taken{cursor:not-allowed;background:var(--surface)}
.pick.is-taken:hover{background:var(--surface)}
.pick.is-taken .pick__label{color:var(--stone)}
.pick.is-taken .pick__label b{color:var(--muted)}

/* Les sous-modules sont listés sous le module dont ils viennent : sans ce
   repère, « 3.2 Volume clamp method » et « 4.2 Sensor setup » se ressemblent. */
.picker__mod{display:flex;align-items:baseline;gap:var(--s-xs);
  padding:10px 8px 4px;position:sticky;top:0;background:var(--paper);z-index:1}
.picker__mod:first-child{padding-top:4px}
.picker__mod b{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--steel);
  letter-spacing:.4px}
.picker__mod span{font-size:12px;color:var(--stone);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.picker__mod button{margin-left:auto;background:transparent;border:0;padding:0;
  font-family:var(--sans);font-size:12px;color:var(--primary-text);cursor:pointer;
  white-space:nowrap}
.picker__mod button:hover{text-decoration:underline}
.picker__list li.picker__sub{padding-left:10px}

.actions{display:flex;gap:var(--s-xs);align-items:center;flex-wrap:wrap;margin-top:var(--s-xs)}
.saved{font-size:12px;color:var(--stone);opacity:0;transition:opacity .2s}
.saved.is-on{opacity:1}

.chip{font-size:11px;font-weight:600;letter-spacing:.3px;border-radius:var(--r-full);
  padding:3px 9px;background:var(--cream-deeper);color:var(--ink)}
.chip--ghost{background:transparent;border:1px dashed var(--hairline-strong);color:var(--steel)}
.badge{font-size:11px;font-weight:600;border-radius:var(--r-full);padding:3px 9px;
  background:var(--surface);border:1px solid var(--hairline);color:var(--steel)}
.badge--done{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.badge--in_progress{background:var(--cream);border-color:var(--beige-deep);color:var(--ink)}
.badge--edited{background:var(--primary-solid);border-color:var(--primary-solid);
  color:var(--on-primary)}

/* --------------------------------------------------------- figures */
/* Deux barres collantes se superposent au sommet (navigation + outils) : les
   cibles de défilement réservent leur hauteur pour ne pas passer dessous. */
.subblock,.fig,.q{scroll-margin-top:150px}
.subblock{padding-block:var(--s-xl);border-bottom:1px solid var(--hairline)}
.subblock__head{display:flex;justify-content:space-between;gap:var(--s-md);align-items:center;
  flex-wrap:wrap;margin-bottom:var(--s-md)}
.figs{display:grid;gap:var(--s-md)}
.fig{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s-lg);
  background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
  padding:var(--s-lg)}
/* Une fiche traitée se signale par sa surface, pas par un liseré coloré : la
   teinte porte l'information sur toute la carte. */
.fig[data-status="done"]{border-color:var(--ok-line);background:var(--ok-soft)}
.fig[data-status="done"] textarea,
.fig[data-status="done"] input[type=text]{background:var(--canvas)}
.fig__visual{background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);padding:var(--s-md);display:grid;place-items:center;
  align-self:start;position:sticky;top:80px}
.fig__visual img{max-height:300px;width:auto;object-fit:contain}
.fig__form{display:grid;gap:var(--s-sm);min-width:0}
.fig__meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fig__meta .ref{margin-left:auto}
@media (max-width:900px){.fig{grid-template-columns:1fr}
  .fig__visual{position:static}.field-row{grid-template-columns:1fr}}

/* --------------------------------------------------------- groupes */
.group{background:var(--canvas);border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg);padding:var(--s-lg);margin-bottom:var(--s-md)}
.group__head{display:flex;gap:var(--s-sm);align-items:center;flex-wrap:wrap;
  padding-bottom:var(--s-sm);border-bottom:1px solid var(--hairline-soft)}
.group__title{flex:1;min-width:180px;font-size:18px;font-weight:500;border:1px solid transparent;
  background:transparent;padding:6px 8px}
.group__title:hover{border-color:var(--hairline)}
.group__toggle{width:28px;height:28px;flex:none;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-md);cursor:pointer;
  color:var(--steel);font-size:12px;line-height:1;display:grid;place-items:center}
.group__toggle:hover{border-color:var(--primary);color:var(--primary-text)}
.group__toggle span{transition:transform .18s ease}
.group__summary{font-size:13px;color:var(--steel);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* Replié, un groupe ne montre que son en-tête : on garde la liste à portée
   sans dérouler dix formulaires complets. */
.group.is-collapsed .group__body,
.group.is-collapsed .group__actions{display:none}
.group.is-collapsed .group__head{padding-bottom:0;border-bottom:0}
.group.is-collapsed .group__toggle span{transform:rotate(-90deg)}
.group__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-lg);
  padding-block:var(--s-md)}
.group__col{display:grid;gap:var(--s-md);align-content:start}
@media (max-width:960px){.group__body{grid-template-columns:1fr}}

.imglist{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:520px;
  overflow-y:auto;border:1px solid var(--hairline);border-radius:var(--r-md);padding:6px}
.imgrow{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;gap:var(--s-sm);
  align-items:center;background:var(--canvas);border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);padding:6px 8px;cursor:grab}
.imgrow.is-dragging{opacity:.45;border-style:dashed}
.imgrow.is-off{opacity:.5;background:var(--surface)}
.imgrow__grip{color:var(--stone);font-size:14px;line-height:1}
.imgrow img{width:52px;height:44px;object-fit:contain;background:var(--surface);
  border-radius:var(--r-xs)}
.imgrow__text{font-size:13px;line-height:1.35;color:var(--steel);min-width:0}
.imgrow__text b{font-family:var(--mono);font-size:11px;color:var(--ink);display:block}
.imgrow__on{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--stone)}
.imgrow__on input{accent-color:var(--primary)}

/* ------------------------------------------------------------ quiz */
/* Un seul niveau à l'écran : 60 questions empilées rendaient l'onglet
   impraticable. */
.levelnav{display:flex;gap:var(--s-xs);flex-wrap:wrap;margin:var(--s-lg) 0}
.levelbtn{display:flex;align-items:center;gap:8px;background:var(--canvas);
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:9px 16px;
  cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink)}
.levelbtn:hover{border-color:var(--primary)}
.levelbtn.is-active{background:var(--ink);border-color:var(--ink);color:var(--on-primary)}
.levelbtn__count{font-size:12px;font-weight:600;border-radius:var(--r-full);padding:2px 8px;
  background:var(--cream-deeper);color:var(--ink);font-variant-numeric:tabular-nums}
.levelbtn.is-active .levelbtn__count{background:var(--primary-solid);color:var(--on-primary)}
.levelbtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.quiz{border:1px solid var(--hairline-soft);border-radius:var(--r-lg);overflow:hidden;
  display:none}
.quiz.is-active{display:block}
.quiz.is-busy{opacity:.6;pointer-events:none}
.quiz__head{display:flex;gap:var(--s-md);align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:var(--s-lg);background:var(--cream);
  border-bottom:1px solid var(--beige-deep)}
.quiz__actions{display:flex;gap:var(--s-xs);align-items:center;flex-wrap:wrap}
.questions{display:grid;gap:var(--s-md);padding:var(--s-lg);background:var(--surface)}
.questions:empty{padding:0}
.q{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-md);
  padding:var(--s-md);display:grid;gap:var(--s-sm)}
.q__head{display:flex;gap:var(--s-xs);align-items:center;flex-wrap:wrap}
.q__n{font-family:var(--display);font-size:26px;line-height:1;color:var(--primary);
  min-width:1.4em}
.q__head .ref{margin-left:auto}
.opts{display:grid;gap:6px}
.opt{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:var(--s-xs);
  align-items:center;border:1px solid var(--hairline-soft);border-radius:var(--r-md);
  padding:6px 10px;cursor:pointer}
.opt.is-correct{border-color:var(--ok);background:var(--ok-soft)}
.opt input{accent-color:var(--ok);width:16px;height:16px}
.opt__key{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--steel);
  width:1.2em}
.opt.is-correct .opt__key{color:var(--ok)}
.opt textarea{border:0;background:transparent;padding:4px 0;min-height:0}
.opt textarea:focus{box-shadow:none;border-bottom:1px solid var(--primary)}

.q[data-status="done"]{border-color:var(--ok)}
.q__head{position:relative}

/* ------------------------------------------------- aide raccourcis */
.help{position:fixed;inset:0;z-index:85;background:rgba(31,31,31,.55);
  display:grid;place-items:center;padding:var(--s-xl)}
.help[hidden]{display:none}
.help__box{background:var(--canvas);border-radius:var(--r-lg);max-width:520px;width:100%;
  box-shadow:rgba(0,0,0,.12) 0 16px 48px -8px;overflow:hidden}
.help__top{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-sm) var(--s-lg);border-bottom:1px solid var(--hairline-soft)}
.help__list{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s-lg);margin:0;
  padding:var(--s-lg)}
.help__list dt{display:flex;gap:4px;align-items:center}
.help__list dd{margin:0;font-size:14px;color:var(--slate)}
kbd{font-family:var(--mono);font-size:12px;background:var(--surface);
  border:1px solid var(--hairline-strong);border-bottom-width:2px;border-radius:var(--r-xs);
  padding:2px 6px;color:var(--ink)}
.help__note{padding:0 var(--s-lg) var(--s-lg);font-size:13px;color:var(--stone)}

/* ----------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 20px;z-index:90;
  background:var(--ink);color:var(--on-primary);border-radius:var(--r-md);
  padding:12px 20px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;
  transition:opacity .22s ease,translate .22s ease;max-width:min(560px,90vw)}
.toast.is-open{opacity:1;translate:-50% 0}
.toast--error{background:var(--primary-deep)}

/* --------------------------------------------------------- clôture */
/* ------------------------------------------------------- connexion */
/* La page de login n'a ni barre ni pied : rien à naviguer avant d'être entré.
   Le dégradé de clôture reste, pour que l'écran appartienne visiblement à
   l'atelier plutôt qu'à un portail générique. */
.login-body{min-height:100vh;display:flex;flex-direction:column;background:var(--cream-light)}
.login{flex:1;display:flex;align-items:center;justify-content:center;
  padding:var(--s-sec) var(--s-lg)}
.login__card{width:100%;max-width:420px;background:var(--canvas);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--s-xxxl) var(--s-xxl);box-shadow:var(--shadow-card)}
.login__mark{font-size:14px;font-weight:500;color:var(--ink)}
.login__mark span{color:var(--steel);font-weight:400}
.login__card h1{font-size:36px;margin-top:var(--s-sm)}
.login__lede{font-size:14px;line-height:1.6;color:var(--slate);margin-top:var(--s-sm)}
.login__form{display:grid;gap:var(--s-md);margin-top:var(--s-xl)}
.login__submit{justify-content:center;width:100%;padding-block:11px;margin-top:var(--s-xs)}
.login__error{margin-top:var(--s-lg);padding:10px 14px;font-size:14px;
  color:#8c1c04;background:#fdeee8;border:1px solid #f0c4b4;border-radius:var(--r-md)}
.login__foot{margin-top:var(--s-lg);padding-top:var(--s-md);
  border-top:1px solid var(--hairline);font-size:13px;color:var(--stone)}
/* Identité du relecteur connecté, dans la barre. */
.bar__who{font-size:13px;color:var(--steel);white-space:nowrap}
.bar__who b{font-weight:500;color:var(--ink)}

.sunset{height:14px;background:var(--sunset)}
footer{background:var(--cream);padding:var(--s-sec) 0}
footer .wrap{display:flex;gap:var(--s-xl);flex-wrap:wrap;justify-content:space-between}
footer p{font-size:14px;color:var(--ink-tint)}
footer code{color:var(--slate)}

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