/* Mastering Claude, mise en page. Charge APRES figures.css, dont il reprend les jetons.

   Refonte du 2026-09-14, demandee par Pierre (« design en refonte complete »). Direction : la
   planche de dessin technique, papier et cuivre, deja posee par IDENTITE.md et jamais executee
   jusque-la. Ce qui change, mesure sur la production avant la refonte :
   - un seul systeme de rayons (0 et 2 px), il en cohabitait huit, de 2 a 22 px ;
   - un seul accent, le cuivre du robot, a la place du jaune qui lui disputait la place ;
   - une grille imprimee sur le papier, la page etait un aplat de 2824 px ;
   - un en-tete-cartouche sur une ligne, il faisait 120 px au bureau et 185 px au telephone ;
   - aucun libelle en capitales espacees, et aucun texte sous 13 px au bureau, 14 px au telephone.
   L historique de chaque regle conservee reste dans git, avant le commit de refonte. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* La grille est IMPRIMEE sur le papier, a deux pas, 24 et 96 px, comme un calque millimetre. Elle
   reste sous 7 % d opacite : un fond qui se lit avant le texte n est plus un fond. */
body{margin:0;color:var(--ink);font-family:var(--f-read);font-size:18px;line-height:1.6;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;background-position:-1px -1px}

:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.saut{position:absolute;left:-9999px;top:0;background:var(--paper-raise);color:var(--ink);
  padding:12px 16px;z-index:100;font-family:var(--f-display);font-weight:600}
.saut:focus{left:8px;top:8px}

/* ---------- en-tete, cartouche sur une ligne, trois controles au maximum ---------- */
.tete{position:sticky;top:0;z-index:20;background:var(--paper-raise);
  border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:12px;
  padding:8px 24px;min-height:60px}
.marque{display:inline-flex;align-items:center;gap:10px;min-height:46px;
  font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.marque-robot{width:28px;height:28px;display:block;flex:none}
.marque:hover .marque-nom{box-shadow:inset 0 -2px 0 var(--copper)}
.tete form{flex:1;max-width:440px;margin-left:auto}
.tete input[type=search]{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--rule);
  border-radius:var(--r0);background:var(--paper);color:var(--ink);font-family:var(--f-read);font-size:16px;
  transition-property:border-color;transition-duration:var(--d-fast)}
.tete input[type=search]:hover{border-color:var(--ink-soft)}
.tete input[type=search]:focus-visible{border-color:var(--ink);outline-offset:0}
/* Le selecteur de langue est un seul controle segmente : trois boutons voisins sans cadre se
   lisaient comme trois liens de texte perdus. */
.langues{display:flex;border:1px solid var(--rule)}
.langues a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-data);font-size:14px;text-decoration:none;color:var(--ink-soft);
  transition-property:color,background-color;transition-duration:var(--d-fast)}
.langues a+a{border-left:1px solid var(--rule)}
.langues a:hover{color:var(--ink);background:var(--paper)}
.langues a[aria-current=true]{color:var(--paper);background:var(--ink)}

/* ---------- progression, a la place de la marque sur le seul accueil ---------- */
.tete-prog{margin:0;display:flex;flex-direction:column;gap:0;position:relative;padding:0;line-height:1.25}
.tete-prog-lib{font-family:var(--f-data);font-size:13px;color:var(--ink-soft)}
.tete-prog-val{font-family:var(--f-data);font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tete-prog-barre{display:block;height:3px;width:120px;background:var(--rule);position:relative;margin-top:2px}
.tete-prog-barre::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--part,0%);
  background:var(--copper)}

/* ---------- compte ---------- */
.compte-btn{min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r0);
  background:transparent;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:14px;
  cursor:pointer;white-space:nowrap;
  transition-property:color,background-color;transition-duration:var(--d-fast);transition-timing-function:var(--ease)}
.compte-btn:hover,.compte-btn:focus-visible{color:var(--paper);background:var(--ink)}
.compte-btn:active{transform:scale(.97)}

.compte-modale{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.compte-fond{position:absolute;inset:0;background:rgba(19,26,23,.55)}
.compte-boite{position:relative;width:min(420px,100%);max-height:90vh;overflow:auto;
  background:var(--paper-raise);border:1px solid var(--ink);border-top:4px solid var(--copper);
  border-radius:var(--r0);padding:28px 24px;box-shadow:var(--sh-modal)}
.compte-boite h2{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 8px}
.compte-sous{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.compte-boite label{display:block;font-family:var(--f-data);font-size:13px;color:var(--ink-soft);margin:0 0 6px}
/* 16 px sur les champs : en dessous, iOS zoome de force a la mise au point. */
.compte-boite input{width:100%;height:48px;padding:0 14px;margin:0 0 16px;font-size:16px;
  font-family:var(--f-display);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r0)}
.compte-boite input:focus-visible{border-color:var(--ink);outline-offset:0}
.compte-prim{width:100%;min-height:48px;border-radius:var(--r0);background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);font-family:var(--f-display);font-weight:700;font-size:16px;cursor:pointer;
  transition-property:background-color,border-color,color;transition-duration:var(--d-fast)}
.compte-prim:hover,.compte-prim:focus-visible{background:var(--copper);border-color:var(--copper);color:#131A17}
.compte-alt{width:100%;min-height:44px;margin-top:10px;background:none;border:0;cursor:pointer;
  color:var(--ink-soft);font-family:var(--f-read);font-size:15px;text-decoration:underline;
  text-decoration-color:var(--copper);text-underline-offset:3px}
.compte-alt:hover,.compte-alt:focus-visible{color:var(--ink)}
.compte-msg{margin:12px 0 0;font-size:14px;line-height:1.45;min-height:1px}
.compte-msg.ko{color:var(--refuted)}
.compte-msg.ok{color:var(--proved)}
.compte-rgpd{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.compte-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:130;
  margin:0;padding:12px 20px;border-radius:var(--r0);background:var(--ink);color:var(--paper);
  border-left:4px solid var(--copper);font-family:var(--f-data);font-size:14px;box-shadow:var(--sh-modal)}

/* ---------- structure ---------- */
/* La page de lecture est une FEUILLE posee sur la table quadrillee : la grille reste visible dans
   les marges et ne passe jamais derriere le texte long, qu elle rendait plus penible a lire. */
.page{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;
  max-width:1240px;margin:0 auto;padding:40px 32px 96px;background:var(--paper);
  border-inline:1px solid var(--rule);min-height:calc(100vh - 61px)}
/* Barre de defilement fine et gouttiere stable : la barre grise par defaut apparaissait a 1440 px
   au milieu du plan lateral. */
.cote-gauche{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 108px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;scrollbar-gutter:stable;padding-right:4px}
main{min-width:0}
/* Pages sans plan lateral, examen et recherche : sans cette classe leur `main` tombait dans la
   colonne de 280 px reservee au plan (28 caracteres par ligne a 1440 px, mesure du 2026-09-04). */
.page-seule{grid-template-columns:minmax(0,1fr);max-width:920px}
.page-seule>main{margin-inline:auto;width:100%}

/* Superposition des modales du socle d examen (`showModal` dans socle-examen.js). */
.ov{position:fixed;inset:0;z-index:120;display:none;padding:5vh 16px;overflow:auto;background:rgba(19,26,23,.6)}
.ov.show{display:flex;align-items:flex-start;justify-content:center}
.ov .modal{position:relative;width:100%;max-width:560px;background:var(--paper-raise);
  border:1px solid var(--ink);border-top:4px solid var(--copper);border-radius:var(--r0);
  padding:28px 28px 32px;box-shadow:var(--sh-modal)}
.ov .modal h2{font-family:var(--f-display);font-size:24px;font-weight:800;margin:0 0 12px;padding-right:40px}
.ov .modal p{margin:0 0 12px;line-height:1.55}
.ov .modal .sub{font-family:var(--f-data);font-size:13px;color:var(--copper-ink);margin-bottom:12px}
.ov .modal .x{position:absolute;top:10px;right:10px;min-width:44px;min-height:44px;
  border:none;background:none;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer}
.ov .modal .x:hover{color:var(--ink)}

/* ---------- panneau des modules ----------
   `.plan-mod` et non h2 : une navigation ne porte pas de titres de niveau 2 (135 quasi-doublons
   supprimes le 2026-09-04). */
.plan .plan-mod,.plan h2{font-family:var(--f-data);font-size:13px;letter-spacing:.01em;
  color:var(--copper-ink);margin:28px 0 8px;font-weight:500}
.plan ol{list-style:none;margin:0;padding:0}
.plan a{min-height:44px;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 14px;text-decoration:none;color:var(--ink);font-family:var(--f-display);
  font-size:15px;border-left:1px solid var(--rule);line-height:1.35;
  transition-property:background-color,border-color,box-shadow;transition-duration:var(--d-fast)}
.plan a:hover{background:var(--paper-raise);border-left-color:var(--copper);box-shadow:inset 2px 0 0 var(--copper)}
.plan a[aria-current=page]{border-left-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink);
  font-weight:700;background:var(--paper-raise)}
.plan a .n{font-family:var(--f-data);font-size:13px;color:var(--ink-soft);flex:0 0 auto;font-variant-numeric:tabular-nums}
.plan a.fait .n::after{content:" \2713";color:var(--proved)}

/* ---------- fil d ariane ---------- */
.fil{font-family:var(--f-data);font-size:13px;color:var(--ink-soft);margin-bottom:12px}
.fil a{color:var(--ink-soft);display:inline-block;padding:14px 2px;text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--rule)}
.fil a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--copper)}

/* ---------- lecon ----------
   min-width:0 est indispensable : sans lui, une figure large empeche la colonne de retrecir. */
.lecon{max-width:68ch;min-width:0}
.lecon .fig{min-width:0;max-width:100%}
.lecon h1{font-family:var(--f-display);font-size:clamp(32px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;margin:10px 0 18px;text-wrap:balance}
.idee{font-family:var(--f-read);font-size:22.5px;line-height:1.45;font-style:italic;
  border-left:3px solid var(--copper);padding-left:18px;margin:0 0 36px;color:var(--ink);text-wrap:pretty}
.lecon h2{font-family:var(--f-display);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  margin:48px 0 14px;padding-top:14px;border-top:1px solid var(--ink);text-wrap:balance}
.lecon h3{font-family:var(--f-display);font-size:19px;font-weight:700;margin:30px 0 8px}
.lecon p{margin:0 0 16px}
.lecon ul,.lecon ol{margin:0 0 16px;padding-left:24px}
.lecon li{margin-bottom:8px}
.lecon li::marker{color:var(--copper-ink)}
.lecon a{color:var(--ink);text-decoration-color:var(--copper);text-decoration-thickness:2px;
  text-underline-offset:3px;transition-property:color;transition-duration:var(--d-fast)}
.lecon a:hover{color:var(--copper-ink)}
.lecon code{font-family:var(--f-data);font-size:.9em;background:var(--paper-raise);
  border:1px solid var(--rule);border-radius:var(--r1);padding:1px 5px}
/* `pre-wrap` : les exemples du cours sont des demandes en prose, pas du code a colonnes. En `pre`,
   la phrase que la lecon veut montrer sortait du cadre sans aucun signe qu on pouvait defiler
   (1144 px de contenu pour 670 visibles, revue du 2026-09-14). */
.lecon pre{font-family:var(--f-data);font-size:14.5px;background:var(--night);color:var(--night-ink);
  padding:18px 20px;border-radius:var(--r0);border-left:3px solid var(--copper);overflow-x:auto;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}
.lecon pre code{background:none;border:none;padding:0;color:inherit}

/* ---------- blocs de fin de lecon ---------- */
.bloc{border:1px solid var(--rule);border-radius:var(--r0);background:var(--paper-raise);padding:24px;margin:32px 0}
.bloc-h{font-family:var(--f-data);font-size:13px;color:var(--copper-ink);margin-bottom:12px}
.cles ul{list-style:none;padding:0;margin:0}
.cles li{padding-left:26px;position:relative;margin-bottom:8px}
.cles li::before{content:"\2713";position:absolute;left:0;color:var(--proved);font-weight:700}
.geste{border-left:3px solid var(--proved)}
.geste .bloc-h{color:var(--proved)}

/* ---------- quiz ---------- */
.quiz-opt{display:block;width:100%;text-align:left;min-height:44px;padding:12px 16px;margin-bottom:8px;
  border:1px solid var(--rule);border-radius:var(--r0);background:var(--paper);color:var(--ink);
  font-family:var(--f-read);font-size:16px;cursor:pointer;
  transition-property:border-color,background-color;transition-duration:var(--d-fast)}
.quiz-opt:hover{border-color:var(--ink);background:var(--paper-raise)}
.quiz-opt[data-etat=juste]{border-color:var(--proved);box-shadow:inset 0 0 0 1px var(--proved)}
.quiz-opt[data-etat=faux]{border-color:var(--refuted);box-shadow:inset 0 0 0 1px var(--refuted)}
.quiz-retour{margin-top:12px;font-family:var(--f-read);font-size:16px}

/* ---------- ce qui reste a verifier, servi au lecteur ---------- */
.reserve{border-left:3px solid var(--copper);background:var(--paper)}
.reserve .bloc-h{color:var(--copper-ink)}
.reserve p{font-family:var(--f-read);font-size:16px;color:var(--ink-soft);margin:0 0 12px}
.reserve ul{margin:0;padding-left:20px;font-family:var(--f-read);font-size:16px;line-height:1.6}
.reserve li{margin-bottom:6px}

/* Les references publiques portent leur soulignement et leur date de consultation. */
.refs{border-left:3px solid var(--proved);background:var(--paper)}
.refs .bloc-h{color:var(--proved)}
.refs p{font-family:var(--f-read);font-size:16px;color:var(--ink-soft);margin:0 0 12px}
.refs ul{margin:0;padding-left:20px;font-family:var(--f-read);font-size:16px;line-height:1.6}
.refs li{margin-bottom:6px}
.refs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:2px}
.ref-date{font-family:var(--f-data);font-size:13px;color:var(--ink-soft);white-space:nowrap}

/* ---------- exercice de calibrage : le corrige reste masque tant qu il n a pas clique ---------- */
.calibrage .cal-situation{font-family:var(--f-read);font-size:16px;line-height:1.6;margin:0 0 12px}
.calibrage .cal-consigne{font-family:var(--f-read);font-size:16px;margin:0 0 12px}
.cal-zone{width:100%;min-height:96px;padding:12px;border:1px solid var(--rule);border-radius:var(--r0);
  background:var(--paper);color:var(--ink);font-family:var(--f-read);font-size:16px;line-height:1.6;resize:vertical}
.cal-zone:focus-visible{border-color:var(--ink);outline-offset:0}
.cal-voir{min-height:44px;padding:0 18px;margin-top:12px;border:1px solid var(--ink);border-radius:var(--r0);
  background:var(--paper);color:var(--ink);font-family:var(--f-display);font-size:15px;font-weight:700;cursor:pointer;
  transition-property:background-color,color;transition-duration:var(--d-fast)}
.cal-voir:hover{background:var(--ink);color:var(--paper)}
.cal-corrige{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--f-read);font-size:16px;line-height:1.6}
.cal-corrige b{font-family:var(--f-data);font-size:13px;color:var(--copper-ink);display:block;margin-bottom:2px;font-weight:500}
.cal-faux{list-style:none;padding:0;margin:8px 0 0}
.cal-faux li{padding-left:16px;border-left:2px solid var(--refuted);margin-bottom:8px}
.cal-faux b{color:var(--refuted)}

/* ---------- navigation de bas de page ---------- */
.nav-lecon{display:flex;gap:16px;margin-top:56px;padding-top:24px;border-top:2px solid var(--ink)}
.nav-lecon a{flex:1;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:14px 18px;border:1px solid var(--rule);border-radius:var(--r0);text-decoration:none;color:var(--ink);
  background:var(--paper-raise);transition-property:border-color,box-shadow;transition-duration:var(--d-fast)}
.nav-lecon a:hover{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--copper)}
.nav-lecon .sens{font-family:var(--f-data);font-size:13px;color:var(--copper-ink)}
.nav-lecon .titre{font-family:var(--f-display);font-size:15px;font-weight:700;line-height:1.3}
.nav-lecon .suiv{text-align:right}

/* ---------- liste des lecons d un module ---------- */
.liste-lecons{list-style:none;margin:32px 0 0;padding:0;border-bottom:1px solid var(--rule)}
.carte-lecon{border-top:1px solid var(--rule);padding:16px 0}
.carte-lecon a{display:flex;align-items:baseline;gap:14px;min-height:44px;text-decoration:none;
  color:var(--ink);font-family:var(--f-display)}
.carte-lecon .n{font-family:var(--f-data);font-size:13px;color:var(--copper-ink);flex:0 0 26px;font-variant-numeric:tabular-nums}
.carte-lecon .t{font-size:19px;font-weight:700;flex:1;line-height:1.3;text-wrap:balance}
.carte-lecon .d{font-family:var(--f-data);font-size:13px;color:var(--ink-soft);white-space:nowrap}
.carte-lecon a:hover .t{box-shadow:inset 0 -2px 0 var(--copper)}
.carte-idee{font-family:var(--f-read);font-size:16px;color:var(--ink-soft);margin:4px 0 0 40px;
  line-height:1.5;max-width:66ch;text-wrap:pretty}

/* ---------- page de recherche ---------- */
.rech-form{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.rech-form label{font-family:var(--f-data);font-size:13px;color:var(--ink-soft)}
.rech-form input{width:100%;max-width:520px;height:52px;padding:0 16px;font-size:17px;
  font-family:var(--f-display);color:var(--ink);background:var(--paper-raise);
  border:1px solid var(--ink);border-radius:var(--r0)}
.rech-form input:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.rech-compte{font-family:var(--f-data);font-size:13px;color:var(--ink-soft);
  min-height:18px;margin:0 0 18px;max-width:70ch;font-variant-numeric:tabular-nums}
/* Une seule colonne a la largeur de lecture (93 caracteres par ligne en grille, mesure du 2026-09-03). */
.rech-liste{list-style:none;margin:0;padding:0;max-width:70ch}
.rech-liste li{padding:16px 0;border-top:1px solid var(--rule)}
.rech-liste li[hidden]{display:none}
.rech-liste a{display:flex;align-items:center;min-height:44px;font-family:var(--f-display);
  font-weight:600;font-size:18px;line-height:1.3;color:var(--ink);text-decoration:none}
.rech-liste a:hover,.rech-liste a:focus-visible{color:var(--copper-ink)}
.rech-mod{display:block;margin-top:4px;font-family:var(--f-data);font-size:13px;color:var(--copper-ink)}
.rech-liste p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft);max-width:60ch}

/* Sur la page de recherche, le champ de l en-tete doublait celui de la page : deux champs visibles
   pour une meme action (revue du 2026-09-14). */
body:has(.rech-form) .tete form{visibility:hidden}

/* ---------- pied de page ---------- */
.pied{border-top:2px solid var(--ink);background:var(--paper-raise);margin-top:0;
  padding:40px max(24px,calc((100% - 1192px)/2)) 48px;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;gap:24px 48px;align-items:center}
.pied-marque{display:flex;align-items:center;gap:14px;min-width:0}
.pied-marque img{width:32px;height:32px;flex:none}
.pied-marque b{display:block;font-family:var(--f-display);font-size:18px;font-weight:800;letter-spacing:-.02em}
.pied-marque span span{display:block;font-family:var(--f-read);font-size:15px;color:var(--ink-soft);line-height:1.4}
.pied-liens{display:flex;flex-wrap:wrap;gap:4px 24px}
.pied-liens a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-display);font-weight:600;
  font-size:15px;color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--rule)}
.pied-liens a:hover,.pied-liens a:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}
@media (max-width:900px){.pied{grid-template-columns:1fr;padding:32px 16px 40px}}
@media print{.pied{display:none}}

/* Lien de contenu vers la recherche : un vrai lien du corps, suivable par un moteur. */
.vers-recherche{margin:24px 0 0;font-family:var(--f-data);font-size:14px}
.vers-recherche a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);
  text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink-soft)}
.vers-recherche a:hover,.vers-recherche a:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}

/* ---------- libelle de section ----------
   Le TYPE de section en Plex Mono, en casse normale, suivi d un filet qui court jusqu au bord. */
.eyebrow{font-family:var(--f-data);font-size:14px;color:var(--copper-ink);margin:0 0 12px;
  display:flex;align-items:center;gap:14px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

/* =============================== ACCUEIL =============================== */
.accueil{max-width:1240px;margin:0 auto;padding:64px 24px 120px}

/* Hero : le nom tient l axe de lecture a gauche, le robot occupe la droite, decision de Pierre du
   2026-09-04. `minmax(0,1fr)` : sans le minimum a zero, le titre pousse la page en debordement. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(28px,5vw,80px);margin:0 0 56px}
.hero-mot{min-width:0}
.accueil h1{font-family:var(--f-display);font-size:clamp(48px,8.2vw,116px);font-weight:800;
  letter-spacing:-.055em;line-height:.88;margin:0 0 24px;text-wrap:balance}
.these{font-family:var(--f-read);font-size:clamp(20px,2.1vw,26px);line-height:1.4;max-width:30ch;
  margin:0;color:var(--ink);text-wrap:pretty;padding-left:18px;border-left:3px solid var(--copper)}

/* Entree dans le cours depuis le haut de page (revue du 2026-09-14). */
.hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:32px 0 0}
.hero-action .cta-exam{border-color:var(--ink)}
.hero-libre{font-family:var(--f-data);font-size:14px;color:var(--ink-soft);max-width:28ch}

/* Le cadre de mesure du robot, la piece memorable de la page. Reperes d angle en encre, deux regles
   graduees en cuivre, le bas et la droite, comme les cotes d une piece sur un plan. Le cadre est le
   PARENT de l hote du shader et jamais l hote lui-meme, qui doit rester carre (voir plus bas). */
.hero-cadre{position:relative;padding:30px 42px 42px 30px;background:var(--paper-raise);
  border:1px solid var(--rule)}
.cadre-coin{position:absolute;width:16px;height:16px;border:0 solid var(--ink)}
.c-hg{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.c-hd{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.c-bg{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.c-bd{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.cadre-regle{position:absolute;pointer-events:none}
.r-bas{left:30px;right:42px;bottom:14px;height:10px;border-top:1px solid var(--copper);
  background:repeating-linear-gradient(90deg,var(--copper) 0 1px,transparent 1px 10%) top left/100% 6px no-repeat,
    linear-gradient(var(--copper),var(--copper)) right top/1px 10px no-repeat}
.r-droite{top:30px;bottom:42px;right:14px;width:10px;border-left:1px solid var(--copper);
  background:repeating-linear-gradient(180deg,var(--copper) 0 1px,transparent 1px 10%) top left/6px 100% no-repeat,
    linear-gradient(var(--copper),var(--copper)) left bottom/10px 1px no-repeat}

/* La cote du programme devient une bande de planche : filet d encre dessus, filet fin dessous. */
.accueil>.cote{padding:14px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);font-size:14px}
.accueil>.cote .cote-val{color:var(--copper-ink)}

/* Les voies en compartiments : un seul cadre, des cloisons de 1 px obtenues par l ecart de grille
   sur un fond d encre. Six voies, donc jamais de rangee orpheline a 1, 2 ou 3 colonnes ; la
   largeur maximale de 1240 px interdit la quatrieme. */
.voies{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:1px;
  background:var(--ink);border:1px solid var(--ink);margin-top:32px}
.carte-voie{position:relative;background:var(--paper-raise);padding:26px 28px 22px;min-width:0;
  display:flex;flex-direction:column}
.voie-num{position:absolute;top:14px;right:22px;font-family:var(--f-display);font-weight:800;
  font-size:64px;line-height:.9;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.2px var(--rule);pointer-events:none;
  transition-property:-webkit-text-stroke-color;transition-duration:var(--d-base)}
.carte-voie:hover .voie-num{-webkit-text-stroke-color:var(--copper)}
.carte-voie .cote{margin-right:64px}
/* Chaque valeur de cote tient sur une ligne : a 768 px, `Voie / 1` et `17 / leçons` se coupaient. */
.cote>span:not(.cote-line){white-space:nowrap}
.carte-voie h2{font-family:var(--f-display);font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.12;
  margin:14px 56px 10px 0;text-wrap:balance}
.carte-voie p{font-family:var(--f-read);font-size:16px;color:var(--ink-soft);margin:0 0 16px;line-height:1.5}
/* La liste suit le titre et ne descend pas au pied de la case : poussee en bas, elle laissait des
   trous differents d une case a l autre et les listes ne s alignaient plus (capture du 2026-09-14). */
.carte-voie .mods{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.carte-voie .mods a{min-height:46px;display:flex;align-items:center;gap:10px;
  padding:9px 0;font-family:var(--f-display);font-size:15.5px;line-height:1.3;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);
  transition-property:padding-left,box-shadow,color;transition-duration:var(--d-base);transition-timing-function:var(--ease)}
.carte-voie .mods li:last-child a{border-bottom:0}
.carte-voie .mods a:hover,.carte-voie .mods a:focus-visible{padding-left:12px;box-shadow:inset 3px 0 0 var(--copper);color:var(--ink)}

/* ---------- realisations, planches ---------- */
.bloc-refs{margin:104px 0 0}
.bloc-refs h2,.bloc-exam h2{font-family:var(--f-display);font-size:clamp(28px,3.4vw,44px);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;margin:0 0 28px;max-width:26ch;text-wrap:balance}
/* Quatre sites : 4 colonnes, puis 2, puis 1. Une grille auto-remplie donnait 3 + 1 vers 900 px. */
.refs-grille{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}
.ref-carte{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-height:44px;
  background:var(--paper-raise);border:1px solid var(--rule);border-radius:var(--r0);padding:10px;
  transition-property:transform,box-shadow,border-color;transition-duration:var(--d-base);
  transition-timing-function:var(--ease)}
.ref-carte:hover,.ref-carte:focus-visible{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--sh-lift)}
.ref-vue{display:block;aspect-ratio:8/5;overflow:hidden;background:var(--paper);border-radius:var(--r0);position:relative}
/* Contour interieur neutre, noir transparent : une capture claire ne fond pas dans le papier. */
.ref-vue img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  outline:1px solid rgba(19,26,23,.12);outline-offset:-1px;
  transition-property:transform;transition-duration:600ms;transition-timing-function:var(--ease)}
.ref-carte:hover .ref-vue img{transform:scale(1.03)}
.ref-sans-image{display:grid;place-items:center;background:var(--copper-pale)}
.ref-nom-large{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--ink);text-align:center;padding:0 12px}
/* `flex:1` et `margin-top:auto` : les quatre pieds de carte restent alignes (mesure du 2026-09-04). */
.ref-txt{display:flex;flex-direction:column;gap:6px;padding:14px 8px 6px;flex:1}
/* Nom et domaine empiles : sur une ligne, le domaine se tronquait en `totemsauvage.co...`. */
.ref-tete{display:flex;flex-direction:column;gap:3px}
.ref-txt b{font-family:var(--f-display);font-size:18px;letter-spacing:-.015em;line-height:1.15}
.ref-dom{font-family:var(--f-data);font-size:13px;color:var(--copper-ink)}
.ref-desc{font-size:15px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty}
.ref-lien{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:600;font-size:14px;
  color:var(--ink);margin-top:auto;padding-top:12px;
  transition-property:gap;transition-duration:var(--d-base);transition-timing-function:var(--ease)}
.ref-carte:hover .ref-lien{gap:10px}

/* ---------- inspiration, credit discret ---------- */
.bloc-inspo{margin:80px 0 0}
.inspo-corps{border-left:3px solid var(--copper);padding:2px 0 2px 22px;max-width:68ch}
.bloc-inspo h2{font-family:var(--f-display);font-size:clamp(20px,2.1vw,24px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.bloc-inspo p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.inspo-liens{display:flex;flex-wrap:wrap;gap:24px;margin-top:14px !important}
.inspo-liens a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-display);font-weight:600;
  font-size:15px;color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink-soft);
  transition-property:box-shadow;transition-duration:var(--d-fast)}
.inspo-liens a:hover,.inspo-liens a:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}

/* ---------- examen, sur l accueil ----------
   La seule sequence sombre de la page, reservee a la mesure par IDENTITE.md. La regle graduee porte
   le SEUIL REEL applique par le code, 80 (EXAM_SEUIL dans gabarit.cjs, PASS dans exam.js). */
.bloc-exam{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(28px,5vw,72px);margin:104px 0 0;padding:clamp(28px,4.4vw,56px);
  border:1px solid var(--night);border-top:4px solid var(--copper);border-radius:var(--r0);
  background:var(--night);color:var(--night-ink)}
.bloc-exam .eyebrow{color:var(--copper)}
.bloc-exam .eyebrow::after{background:rgba(231,235,230,.18)}
.bloc-exam h2{color:var(--night-ink);margin-bottom:14px}
.exam-mot{min-width:0}
.exam-note{margin:0 0 28px;max-width:46ch;color:rgba(231,235,230,.78);font-size:17px;line-height:1.55;text-wrap:pretty}

/* Bouton rectangulaire cuivre, fleche dans son propre bloc. Encre sur cuivre : 5,8 de contraste. */
.cta-exam{display:inline-flex;align-items:stretch;min-height:54px;padding:0;border-radius:var(--r0);
  background:var(--copper);color:#131A17;text-decoration:none;font-family:var(--f-display);font-weight:700;
  font-size:16px;border:1px solid var(--copper);
  transition-property:background-color,border-color,transform;transition-duration:var(--d-base);
  transition-timing-function:var(--ease)}
.cta-exam>span:first-child{display:flex;align-items:center;padding:0 22px}
.cta-exam:hover,.cta-exam:focus-visible{background:#E8987A;border-color:#E8987A}
.cta-exam:active{transform:scale(.98)}
.cta-fleche{display:grid;place-items:center;width:54px;flex:none;border-left:1px solid rgba(19,26,23,.25);
  transition-property:transform;transition-duration:var(--d-base);transition-timing-function:var(--ease)}
.cta-exam:hover .cta-fleche svg{transform:translateX(3px)}
.cta-fleche svg{transition:transform var(--d-base) var(--ease)}
.exam-second{display:inline-flex;align-items:center;min-height:44px;margin-left:20px;
  font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--night-ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(231,235,230,.4)}
.exam-second:hover,.exam-second:focus-visible{box-shadow:inset 0 -2px 0 var(--copper)}
.exam-libre{margin:18px 0 0;font-size:15px;line-height:1.5;color:rgba(231,235,230,.7);max-width:46ch}

/* La regle graduee : tout est en pourcentage de la piste, le repere et la portion atteinte partent
   de la MEME valeur que celle imprimee, donc ils ne peuvent pas diverger. */
.exam-regle{margin:0;width:100%;max-width:460px;justify-self:end}
.rg{position:relative;padding:34px 0 0}
.rg-piste{position:relative;height:12px;border-radius:var(--r0);background:rgba(231,235,230,.14);overflow:hidden}
.rg-atteint{position:absolute;inset:0 auto 0 0;background:var(--night-ink);border-radius:var(--r0)}
.rg-grads{position:relative;height:14px;margin-top:8px}
.rg-t{position:absolute;top:0;width:1px;height:8px;background:rgba(231,235,230,.4);transform:translateX(-.5px)}
.rg-t-seuil{height:14px;width:2px;background:var(--copper)}
.rg-repere{position:absolute;top:0;transform:translateX(-50%);display:inline-flex;align-items:baseline;
  gap:1px;padding:4px 10px;border-radius:var(--r0);background:var(--copper);color:#131A17;
  font-family:var(--f-data);font-variant-numeric:tabular-nums;line-height:1}
.rg-repere b{font-size:16px;font-weight:700}
.rg-repere i{font-size:13px;font-style:normal}
.rg-bornes{display:flex;justify-content:space-between;margin-top:2px;font-family:var(--f-data);
  font-size:13px;color:rgba(231,235,230,.7);font-variant-numeric:tabular-nums}
.rg-leg{margin-top:14px;font-family:var(--f-data);font-size:14px;color:rgba(231,235,230,.78)}

/* Entre 560 et 1000 px, le libelle du bouton passait sur deux lignes (mesure du 2026-09-04) : le bloc
   repasse en une colonne bien avant le point de rupture du telephone. */
@media (max-width:1000px){
  .bloc-exam{grid-template-columns:1fr;gap:32px}
  .exam-regle{max-width:none;justify-self:stretch}
  .refs-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Le sceau que `socle-examen.js` substitue au canvas mort de exam.js. `position:relative` le fait
   passer au-dessus de `.examcard::before`, qui lui peignait le fond de la carte par-dessus
   (mesure du 2026-09-03). */
.seal3d{display:block;position:relative;z-index:1;width:136px;height:136px;margin:0 auto 4px}
.seal3d svg,.seal3d img{width:100%;height:100%;display:block}

/* ---------- chrome liquide ----------
   L hote doit etre CARRE : la librairie dimensionne son tampon sur la boite de l HOTE (un hote de
   866 x 242 donnait une image ecrasee au ratio 3,58, mesure du 2026-09-03). */
.chrome-hero{position:relative;display:grid;place-items:center;margin:0;
  width:clamp(180px,22vw,300px);height:clamp(180px,22vw,300px)}
.chrome-hero canvas{width:100%;height:100%;display:block;grid-area:1/1;position:relative!important;z-index:1}
.chrome-hero .chrome-repli{grid-area:1/1;width:clamp(140px,18vw,210px);height:auto;opacity:.9;transition:opacity .4s ease}
/* Teinte Claude sur le metal, decision de Pierre du 2026-09-04, posee ici et non par `u_colorTint`
   qui brule le metal. Parametres balayes contre #d97757 : ecart de 13 sur 255. */
.chrome-hero{filter:sepia(1) saturate(2.7) hue-rotate(-30deg) brightness(.96) contrast(1.05)}
/* Le logo statique ne s efface que sur `chrome-peint`, pose apres LECTURE des pixels du tampon. */
.chrome-hero.chrome-peint .chrome-repli{opacity:0}
.chrome-hero.chrome-attente .chrome-repli{opacity:0;transition:none}

/* =============================== TABLETTE =============================== */
.ouvre-plan{display:none}
@media (max-width:900px){
  .page{grid-template-columns:1fr;gap:0;padding:20px 16px 96px}
  .cote-gauche{position:static;max-height:none;order:2;margin-top:56px;border-top:2px solid var(--ink);padding-right:0}
  .ouvre-plan{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
    font-family:var(--f-display);font-size:15px;background:var(--paper-raise);
    border:1px solid var(--ink);border-radius:var(--r0);color:var(--ink);text-decoration:none}
  .tete{padding:8px 16px;gap:10px}
  .tete form{max-width:none}
  .idee{font-size:19px}
  .accueil{padding:40px 16px 96px}
  .hero{margin-bottom:40px}
  .these{font-size:19px}
  /* Barre d action mobile : deux actions, libelles courts, hauteur bornee. */
  .nav-lecon{position:sticky;bottom:0;background:var(--paper);margin-top:40px;padding:8px 0;border-top:1px solid var(--ink)}
  .nav-lecon .titre{display:none}
  .nav-lecon a{flex-direction:row;align-items:center;justify-content:center;min-height:48px}
}

/* =============================== TELEPHONE ===============================
   Mesure du 2026-09-03 sur une lecon a 390 px, avant correction : 16 textes sous 14 px, cibles de
   16 px, champ de recherche tronque a trois lettres. Refonte du 2026-09-14 : l en-tete faisait
   185 px sur trois rangees, il en fait deux. */
@media (max-width:560px){
  /* Le bouton de compte descend a cote de la recherche : sur la premiere ligne, `Iniciar sesión`
     portait l accueil espagnol a 379 px pour un ecran de 320 (matrice du 2026-09-14). */
  .tete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"marque . langues" "rech rech compte";
    gap:8px;padding:5px 12px}
  .tete .marque,.tete .tete-prog{grid-area:marque;align-self:center}
  .tete .langues{grid-area:langues;align-self:center}
  .tete .compte-btn{grid-area:compte;padding:0 12px;font-size:14px}
  .tete form{grid-area:rech;width:100%;max-width:none}
  .tete input[type="search"]{width:100%;min-height:44px;font-size:16px}
  /* Le nom reste lu par les lecteurs d ecran : seul le robot s affiche, faute de place. */
  .marque-nom{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .marque-robot{width:32px;height:32px}
  .tete .marque{min-width:46px;justify-content:center}
  .tete-prog-lib{font-size:13px}
  .tete-prog-val{font-size:14px}
  .tete-prog-barre{width:84px}

  /* Aucun texte sous 14 px au telephone. */
  .fil,.cote,.cote-val,.ref-date,.nav-lecon .sens,.f-u,.fig-num,.f-src,.f-legend-d,.ref-dom,
  .rech-mod,.rech-compte,.carte-lecon .n,.plan a .n,.plan .plan-mod,.bloc-h,.rg-bornes{font-size:14px}
  .fil{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;line-height:1.3}
  .fil a{padding:10px 2px;min-height:44px;display:inline-flex;align-items:center}
  /* Le fil porte deja le nom du module : la cote le repetait juste en dessous. */
  .lecon .cote>span:first-child{display:none}
  .cote{flex-wrap:wrap;row-gap:4px}
  /* Les filets de cote cedent leur place au texte : a 40 px minimum, la derniere valeur passait seule
     sur une seconde ligne. */
  .cote-line{min-width:12px}

  .nav-lecon{background:var(--paper);box-shadow:0 -8px 20px rgba(19,26,23,.08);padding:8px 12px}
  .nav-lecon a{min-height:48px;font-size:15px}
  .page{padding-bottom:120px}

  .seal3d{display:block;width:112px;height:112px;margin:0 auto}
  .examcard{padding-top:18px}
  .carte-lecon .d{white-space:normal}
  .carte-idee{margin-left:0}
  .refs li a{display:inline-flex;align-items:center;min-height:44px}
  .refs li{line-height:1.4}

  .lecon h1{font-size:29px;line-height:1.1}
  .idee,.these{font-size:18px}
  /* Le hero repasse sur une colonne, le robot DEVANT le titre, reduit : pousse sous un titre de deux
     lignes, il passerait sous la ligne de flottaison. */
  .hero{grid-template-columns:1fr;gap:24px;margin-bottom:32px}
  .hero-mot{order:2}
  .hero-cadre{order:1;justify-self:start;padding:18px 30px 30px 18px}
  .r-bas{left:18px;right:30px;bottom:10px}
  .r-droite{top:18px;bottom:30px;right:10px}
  .accueil h1{font-size:clamp(40px,12vw,54px)}
  .these{max-width:none}
  .voies{grid-template-columns:1fr}
  .carte-voie{padding:22px 18px 16px}
  .voie-num{font-size:52px;right:16px}
  .carte-voie h2{font-size:22px}
  .bloc-exam,.bloc-refs{margin-top:64px}
  .bloc-exam{gap:28px;padding:26px 18px}
  .exam-regle{max-width:none;justify-self:stretch}
  .bloc-exam h2,.bloc-refs h2{font-size:28px}
  .cta-exam{width:100%;justify-content:space-between}
  .exam-second{margin:12px 0 0}
  .eyebrow,.rg-leg{font-size:14px}
  .refs-grille{grid-template-columns:1fr}
  .chrome-hero{width:clamp(130px,38vw,170px);height:clamp(130px,38vw,170px)}
}
@media (max-width:360px){
  .langues a{min-width:40px}
  .tete .compte-btn{padding:0 10px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:none}.tete,.cote-gauche,.nav-lecon,.saut{display:none}.page{display:block}
  .bloc-refs,.bloc-exam,.hero-cadre{display:none}}