/* Polices : League Spartan — The League Spartan Project Authors (The League of Moveable Type) ;
   Atkinson Hyperlegible Next — Braille Institute. Toutes deux sous SIL Open Font License 1.1 (détail : CREDITS). */
/* claude.deskio.io — styles v2 (design/BRIEF.md « manuel de poche »). D'abord le téléphone,
   puis le grand écran (≥ 960 px). Toutes les valeurs viennent de /tokens.css. */
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--brume);color:var(--terminal);font-family:var(--f-texte);font-size:var(--t-texte);line-height:var(--l-texte);letter-spacing:var(--ls-texte);-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:100;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--curseur);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0;font-family:var(--f-titre)}
p,li,dd,figcaption{text-wrap:pretty}
code,kbd{font-family:var(--f-code);font-size:.88em}
code{background:var(--brume-2);padding:.08em .32em;border-radius:var(--r-champ);overflow-wrap:anywhere}
kbd{border:1px solid var(--filet);border-bottom-width:2px;padding:.02em .38em;border-radius:var(--r-champ);white-space:nowrap;font-family:var(--f-texte);font-weight:700;font-size:.82em}
svg{flex:0 0 auto}
.evitement{position:absolute;left:var(--marge);top:-4rem;background:var(--terminal);color:var(--brume);padding:var(--e2) var(--e3);z-index:90}
.evitement:focus{top:var(--e3)}
.visuel-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{min-height:100dvh;display:flex;flex-direction:column}

/* ── Boutons et champs ── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:var(--cible);padding:0 var(--e4);border:0;border-radius:var(--r-champ);
  background:var(--terminal);color:var(--brume);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.bouton:hover{background:var(--terminal-2)}
label{display:block;font-weight:700;font-size:var(--t-petit);margin:var(--e3) 0 var(--e1)}
input[type=email],input[type=password],input[type=text],input:not([type]){width:100%;min-height:var(--cible);padding:0 var(--e3);border:1px solid var(--filet);border-radius:var(--r-champ);
  background:var(--brume);color:var(--terminal);font:inherit;font-size:max(1rem,var(--t-texte))}
input:focus{border-color:var(--terminal);outline:none}
input:focus-visible{outline:3px solid var(--curseur);outline-offset:1px}
.erreur{color:var(--erreur);font-weight:700;margin:var(--e3) 0}

/* ── Barre du haut + LE GESTE (fil de progression) ── */
.barre{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--e2);
  min-height:var(--barre);padding:env(safe-area-inset-top) var(--marge) 0 calc(var(--marge) - var(--e2));background:var(--terminal);color:var(--terminal-texte)}
.barre-sommaire{display:grid;place-items:center;width:var(--cible);height:var(--cible);border:0;border-radius:var(--r-champ);background:none;color:var(--brume);cursor:pointer}
.barre-sommaire svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.barre-sommaire:hover{background:var(--terminal-2)}
.barre-titre{margin:0;font-weight:700;font-size:.95rem;color:var(--brume);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-compte[hidden]{display:none}
.barre-compte{margin:0;font-size:var(--t-petit);color:var(--terminal-gris);font-variant-numeric:tabular-nums}
.barre-compte span[data-lecons-faites]{color:var(--brume);font-weight:700}
.fil{position:absolute;left:0;right:0;bottom:calc(var(--fil) * -1);width:100%;height:var(--fil);display:block;border:0;-webkit-appearance:none;appearance:none;
  background:var(--filet);color:var(--curseur)}
.fil::-webkit-progress-bar{background:var(--filet)}
.fil::-webkit-progress-value{background:var(--curseur);transition:width .45s ease}
.fil::-moz-progress-bar{background:var(--curseur)}

/* ── Sommaire : panneau qui monte du bas (téléphone) ── */
.voile{position:fixed;inset:0;z-index:55;background:var(--voile)}
.voile[hidden]{display:none}
.sommaire{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:column;max-height:86dvh;
  padding:var(--e3) var(--marge) calc(var(--e4) + env(safe-area-inset-bottom));background:var(--terminal);color:var(--terminal-texte);
  border-radius:var(--r-panneau) var(--r-panneau) 0 0;transform:translateY(102%);visibility:hidden;transition:transform var(--duree),visibility 0s linear var(--duree)}
.sommaire.ouvert{transform:none;visibility:visible;transition:transform var(--duree)}
.sommaire a{text-decoration:none}
.sommaire-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding-bottom:var(--e3);border-bottom:1px solid var(--terminal-2)}
.sommaire-marque{display:flex;flex-direction:column;font-family:var(--f-titre);font-weight:700;font-size:1.25rem;line-height:1.1;color:var(--brume)}
.sommaire-marque span{font-family:var(--f-texte);font-weight:400;font-size:var(--t-petit);color:var(--terminal-gris)}
.sommaire-fermer{display:grid;place-items:center;width:var(--cible);height:var(--cible);border:0;border-radius:var(--r-pastille);background:var(--terminal-2);color:var(--brume);cursor:pointer}
.sommaire-fermer svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sommaire-lecons{list-style:none;margin:0;padding:var(--e2) 0;overflow-y:auto;overscroll-behavior:contain}
.sommaire-lecons a{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:var(--e2);min-height:var(--cible);padding:var(--e2);border-radius:var(--r-champ);font-size:.95rem;line-height:1.3}
.sommaire-lecons a:hover{background:var(--terminal-2)}
.sommaire-lecons a[aria-current=page]{background:var(--terminal-2);color:var(--brume);font-weight:700}
.sommaire-num{font-variant-numeric:tabular-nums;color:var(--terminal-gris);font-size:var(--t-petit)}
.sommaire-coche{width:1.1rem;height:1.1rem;fill:none;stroke:var(--sortie-clair);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sommaire-compte{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e1) var(--e4);padding-top:var(--e3);border-top:1px solid var(--terminal-2);font-size:var(--t-petit)}
.sommaire-compte p{margin:0;flex:1 0 100%;color:var(--brume);font-weight:700}
.sommaire-compte a,.sommaire-compte button{display:inline-flex;align-items:center;min-height:var(--cible);background:none;border:0;padding:0;color:var(--terminal-texte);font:inherit;cursor:pointer}
.sommaire-compte a:hover,.sommaire-compte button:hover{color:var(--brume);text-decoration:underline}
.sommaire-compte a[aria-current=page]{color:var(--brume);text-decoration:underline}

.pied{margin-top:auto;padding:var(--e5) var(--marge) var(--e4);font-size:var(--t-petit);color:var(--gris)}
.pied p{margin:0}

/* ── Accueil ── */
.accueil-tete{padding:var(--e5) var(--marge) var(--e4)}
.accueil-salut{margin:0 0 var(--e2);color:var(--gris);font-weight:700}
.accueil-titre{font-size:var(--t-accueil);line-height:var(--l-accueil);letter-spacing:var(--ls-accueil);font-weight:700;max-width:18ch;margin-bottom:var(--e4)}
.accueil-tete .bouton{width:100%}
.accueil-suite{margin:var(--e2) 0 0;color:var(--gris);font-size:var(--t-petit)}
.lecons{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.lecon-ligne a{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:var(--e1) var(--e3);padding:var(--e4) var(--marge);border-bottom:1px solid var(--filet);text-decoration:none}
.lecon-ligne a:hover{background:var(--brume-2)}
.lecon-num{grid-row:span 3;font-family:var(--f-titre);font-weight:700;font-size:var(--t-num);line-height:1;color:var(--gris);font-variant-numeric:tabular-nums}
.lecon-ligne.faite .lecon-num{color:var(--sortie)}
.lecon-titre{font-family:var(--f-titre);font-weight:600;font-size:var(--t-h3);line-height:var(--l-h2)}
.lecon-resume{color:var(--gris);font-size:.95rem;line-height:1.45}
.lecon-etat{font-size:var(--t-petit);color:var(--gris)}
.lecon-ligne.faite .lecon-etat{color:var(--sortie);font-weight:700}
.lecon-corps{display:contents}

/* ── Leçon ── */
.lecon-tete{padding:var(--e5) var(--marge) var(--e3)}
.lecon-surtitre{margin:0 0 var(--e1);font-weight:700;color:var(--gris);font-size:var(--t-petit)}
.lecon-tete h1{font-size:var(--t-titre);line-height:var(--l-titre);letter-spacing:var(--ls-titre);font-weight:700;max-width:22ch}
.lecon-meta{margin:var(--e2) 0 0;color:var(--gris);font-size:var(--t-petit)}
.lecon-texte{padding:var(--e3) var(--marge) var(--e4)}
.lecon-texte > *{max-width:var(--mesure)}
.lecon-texte p,.lecon-texte ul,.lecon-texte ol{margin-top:0;margin-bottom:var(--e3)}
.lecon-texte ul,.lecon-texte ol{padding-left:1.3em}
.lecon-texte h2{font-size:var(--t-h2);line-height:var(--l-h2);letter-spacing:var(--ls-h2);font-weight:600;margin:var(--e6) 0 var(--e3)}
.lecon-texte h3{font-family:var(--f-texte);font-size:var(--t-h3);line-height:var(--l-h3);margin:var(--e5) 0 var(--e2)}
.lecon-texte li{margin-bottom:var(--e1)}
.chapo{font-size:1.1em;line-height:1.55}
.lecon-texte table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:var(--e4) 0;font-size:.92rem}
.lecon-texte th,.lecon-texte td{text-align:left;padding:var(--e2) var(--e3) var(--e2) 0;border-bottom:1px solid var(--filet);vertical-align:top;min-width:7rem}
.lecon-texte th{font-weight:700}

/* Carte de commande */
.cmd{margin:var(--e4) 0}
.cmd-carte{background:var(--terminal);color:var(--terminal-texte);border-radius:var(--r-carte);overflow:hidden}
.cmd-tete{display:flex;align-items:center;gap:var(--e2);padding:var(--e1) var(--e1) var(--e1) var(--e3);border-bottom:1px solid var(--terminal-2)}
.cmd-nature{font-size:var(--t-petit);color:var(--terminal-gris)}
.cmd-etat{margin-left:auto;font-size:var(--t-petit);font-weight:700;color:var(--sortie-clair)}
.cmd-copier{min-height:var(--cible);padding:0 var(--e3);border:0;border-radius:var(--r-champ);background:none;color:var(--brume);font:inherit;font-size:var(--t-petit);font-weight:700;cursor:pointer}
.cmd-etat:empty + .cmd-copier{margin-left:auto}
.cmd-copier:hover{background:var(--terminal-2)}
.cmd pre{margin:0;padding:var(--e3);overflow-x:auto;font-family:var(--f-code);font-size:var(--t-code);line-height:var(--l-code);white-space:pre;-webkit-overflow-scrolling:touch}
.cmd pre:focus-visible{outline-offset:-3px}
.cmd code{background:none;padding:0;font-size:inherit;color:inherit;overflow-wrap:normal}
.cmd-ligne{display:block}
.cmd-invite{color:var(--terminal-gris);user-select:none}
.cmd figcaption{margin:var(--e2) 0 0;font-size:var(--t-petit);line-height:var(--l-petit);color:var(--gris)}

.sortie{margin:var(--e3) 0 var(--e4);padding:var(--e3);background:var(--brume-2);border-left:3px solid var(--filet);border-radius:0 var(--r-champ) var(--r-champ) 0;overflow-x:auto;
  font-family:var(--f-code);font-size:var(--t-petit);line-height:var(--l-code)}
.sortie code{background:none;padding:0;overflow-wrap:normal}
.attention{margin:var(--e4) 0;padding:var(--e3) var(--e4);border-left:4px solid var(--erreur);background:color-mix(in srgb,var(--erreur) 7%,var(--brume));border-radius:0 var(--r-carte) var(--r-carte) 0}
.attention-titre{margin:0 0 var(--e1);font-weight:700;color:var(--erreur)}
.attention p:last-child,.remarque p:last-child{margin-bottom:0}
.remarque{margin:var(--e4) 0;padding:var(--e3) var(--e4);border-left:4px solid var(--filet);border-radius:0 var(--r-carte) var(--r-carte) 0}
.lexique{margin:var(--e4) 0}
.lexique div{display:grid;grid-template-columns:1fr;gap:var(--e1);padding:var(--e3) 0;border-bottom:1px solid var(--filet)}
.lexique dt{font-weight:700}
.lexique dd{margin:0}

/* Exercices */
.exercice{margin:var(--e5) 0;padding:var(--e4);border:1px solid var(--filet);border-radius:var(--r-exercice)}
.exercice.fait{border-color:var(--sortie)}
.exercice-num{margin:0 0 var(--e1);font-size:var(--t-petit);font-weight:700;color:var(--gris)}
.exercice.fait .exercice-num{color:var(--sortie)}
.exercice h3{margin:0 0 var(--e3);font-family:var(--f-titre);font-weight:600;font-size:1.15rem}
.exercice-etapes,.lecon-texte .exercice-etapes{list-style:none;margin:0 0 var(--e3);padding:0}
.exercice-etapes li{display:flex;gap:var(--e3);align-items:flex-start;margin-bottom:var(--e2)}
.exercice-etapes input{flex:0 0 auto;width:var(--case);height:var(--case);margin:.25rem 0 0;accent-color:var(--terminal)}
.exercice-etapes label{font-weight:400;font-size:inherit;margin:0;cursor:pointer}
.exercice-etapes input:checked + label{color:var(--gris);text-decoration:line-through;text-decoration-color:var(--filet)}
.exercice-solution{margin:0 0 var(--e3);border-top:1px solid var(--filet)}
.exercice-solution summary{display:flex;align-items:center;min-height:var(--cible);cursor:pointer;font-weight:700}
.exercice-fait{width:100%;min-height:var(--cible);padding:0 var(--e4);border:1px solid var(--terminal);border-radius:var(--r-pastille);background:none;color:var(--terminal);font:inherit;font-weight:700;cursor:pointer}
.exercice-fait:hover{background:var(--brume-2)}
.exercice-fait[aria-pressed=true]{background:var(--sortie);border-color:var(--sortie);color:var(--brume)}

/* Navigation entre leçons : barre basse au pouce (téléphone) */
.lecon-suite{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(var(--nav-bas) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--brume);border-top:1px solid var(--filet)}
.lecon-suite a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:var(--e2) var(--marge);text-decoration:none;font-size:var(--t-petit);line-height:1.3}
.lecon-suite .nav-sens{color:var(--gris)}
.lecon-suite .nav-titre{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.lecon-suite .nav-titre b{font-variant-numeric:tabular-nums;margin-right:.3em}
.lecon-suite .suivante{grid-column:2;text-align:right;align-items:flex-end;border-left:1px solid var(--filet)}
.lecon-suite a:hover{background:var(--brume-2)}
body:has(.lecon-suite) .pied{padding-bottom:calc(var(--nav-bas) + var(--e4) + env(safe-area-inset-bottom))}

/* ── Porte (connexion, invitation) ── */
.porte{display:grid;gap:var(--e5);padding:var(--e7) var(--marge) var(--e5)}
.porte-titre{font-weight:700;font-size:clamp(2.6rem,9vw,5.5rem);line-height:.98;letter-spacing:-.025em}
.porte-titre span{display:block}
.porte-titre span+span{color:var(--gris)}
.porte-form .bouton{width:100%;margin-top:var(--e4)}
.porte-aide{color:var(--gris);font-size:var(--t-petit)}

/* ── Administration ── */
.admin-tete{padding:var(--e5) var(--marge) var(--e3)}
.admin-tete h1{font-size:var(--t-titre);line-height:var(--l-titre);letter-spacing:var(--ls-titre);margin-bottom:var(--e3)}
.admin-tete p{margin:0;max-width:var(--mesure);color:var(--gris)}
.admin-lien{padding:0 var(--marge)}
.admin-lien h2{font-size:var(--t-h3);margin:var(--e4) 0 0}
.admin-form{display:grid;gap:var(--e2);margin:var(--e4) var(--marge);padding:var(--e4);border:1px solid var(--filet);border-radius:var(--r-carte)}
.admin-form label{margin-top:0}
.admin-case{display:flex;align-items:center;gap:var(--e2);min-height:var(--cible)}
.admin-case label{margin:0;font-weight:400;font-size:inherit}
.admin-case input{width:var(--case);height:var(--case);accent-color:var(--terminal)}
.admin-table{width:calc(100% - var(--marge) * 2);margin:var(--e4) var(--marge) var(--e5);border-collapse:collapse;font-size:.95rem}
.admin-table thead{display:none}
.admin-table tr{display:block;padding:var(--e3) 0;border-bottom:1px solid var(--filet)}
.admin-table td{display:block;padding:var(--e1) 0}
.admin-table tr.coupe td{color:var(--gris)}
.etiquette{display:inline-block;margin-left:var(--e1);padding:0 var(--e2);border:1px solid var(--filet);border-radius:var(--r-pastille);font-size:var(--t-petit);color:var(--gris)}
.admin-actions form{display:flex;gap:var(--e2);flex-wrap:wrap}
.admin-actions button{min-height:var(--cible);padding:0 var(--e3);border:1px solid var(--filet);border-radius:var(--r-champ);background:none;color:var(--terminal);font:inherit;font-size:var(--t-petit);cursor:pointer}
.admin-actions button:hover{border-color:var(--terminal)}
.introuvable{padding:var(--e6) var(--marge)}
.introuvable h1{font-size:var(--t-titre);margin-bottom:var(--e4)}

/* ── Tablette ── */
@media (min-width:640px){
  :root{--marge:var(--e5)}
  .accueil-tete .bouton{width:auto}
  .lecon-ligne a{grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:baseline}
  .lecon-num{grid-row:auto}
  .lecon-corps{display:flex;flex-direction:column;gap:var(--e1)}
  .lecon-etat{white-space:nowrap}
  .lexique div{grid-template-columns:minmax(8rem,12rem) 1fr;gap:var(--e4)}
  .exercice-fait{width:auto}
  .admin-form{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto auto;align-items:end}
  .porte{grid-template-columns:minmax(0,1.2fr) minmax(18rem,24rem);align-items:center;gap:var(--e6)}
}
@media (min-width:640px) and (min-height:600px){.porte{min-height:80dvh}}

/* ── Grand écran : le sommaire devient une colonne fixe, la navigation un pied de leçon ── */
@media (min-width:960px){
  body.connecte{padding-left:var(--rail)}
  .barre-sommaire{display:none}
  .barre{grid-template-columns:minmax(0,1fr) auto;padding-left:var(--marge)}
  .voile{display:none}
  .sommaire{top:0;right:auto;width:var(--rail);max-height:none;border-radius:0;transform:none;visibility:visible;transition:none;padding:var(--e4)}
  .sommaire-fermer{display:none}
  .sommaire-tete{border-bottom:0;padding-bottom:var(--e2)}
  .sommaire-lecons{flex:1}
  .lecon-tete{padding:var(--e6) var(--e7) var(--e3)}
  .lecon-texte{padding:var(--e3) var(--e7) var(--e4)}
  .lecon-suite{position:static;display:flex;justify-content:space-between;min-height:0;margin:0 var(--e7);padding:var(--e4) 0 0;background:none}
  .lecon-suite a{max-width:22rem;padding:var(--e3) 0;font-size:.95rem}
  .lecon-suite .suivante{border-left:0;margin-left:auto}
  .lecon-suite a:hover{background:none;text-decoration:underline}
  body:has(.lecon-suite) .pied{padding-bottom:var(--e4)}
  .pied{padding-left:var(--e7)}
  .accueil-tete,.admin-tete{padding:var(--e6) var(--e7) var(--e4)}
  .lecon-ligne a{padding:var(--e4) var(--e7)}
  .admin-lien{padding:0 var(--e7)}
  .admin-form{margin:var(--e4) var(--e7)}
  .admin-table{width:calc(100% - var(--e7) * 2);margin:var(--e4) var(--e7) var(--e5)}
  .admin-table thead{display:table-header-group}
  .admin-table tr{display:table-row;padding:0}
  .admin-table td,.admin-table th{display:table-cell;text-align:left;padding:var(--e3) var(--e3) var(--e3) 0;border-bottom:1px solid var(--filet);vertical-align:middle}
  .admin-table th{font-size:var(--t-petit);color:var(--gris);font-weight:700}
  .admin-actions form{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .sommaire,.sommaire.ouvert{transition:none}
  .fil::-webkit-progress-value{transition:none}
  @view-transition{navigation:none}
}