/* Orion Lab — direction « Dojo » (docs/maquettes/index.html, direction C).
   Sombre, dense, accent vermillon, IBM Plex. Aucune dépendance. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../polices/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../polices/ibm-plex-sans-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../polices/ibm-plex-mono-600.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --bg:#121316; --surface:#1B1C20; --surface-2:#25262B; --line:#313238; --text:#E7E7EA; --muted:#9C9DA6;
  /* Le vermillon des boutons est assombri pour tenir 4,5:1 avec le texte blanc ;
     les liens prennent une teinte plus claire, lisible sur le fond. */
  --primary:#CF3F24; --primary-ink:#FFFFFF; --primary-soft:rgba(222,74,46,.15); --lien:#FF8466;
  --accent:#E9B929; --accent-soft:rgba(233,185,41,.12);
  --success:#3DBE63; --success-ink:#07140B; --success-soft:rgba(61,190,99,.13);
  --danger:#FF5A5F; --danger-soft:rgba(255,90,95,.12);
  --warning:#E9B929; --warning-soft:rgba(233,185,41,.12);
  --input-bg:#0F1013;
  --radius:6px; --radius-btn:4px;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-code:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --code-bg:#0D0E10; --code-text:#D6D6DA; --code-gutter:#4A4B52;
  --code-k:#FF7A59; --code-t:#E9B929; --code-s:#8BD17C; --code-n:#C792EA; --code-c:#63656E; --code-f:#7FB2FF;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;line-height:1.2}
h1{font-size:27px}
h2{font-size:22px}
h3{font-size:15.5px}
p{margin:0}
a{color:var(--lien)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lien);outline-offset:2px}
[hidden]{display:none!important}
.masque{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.doux{color:var(--muted)}
.petit{font-size:12.5px}
.espace{flex:1}
.mono{font-family:var(--font-code);font-size:13px}
.centre{text-align:center}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-s{width:15px;height:15px}
.ic-l{width:34px;height:34px;stroke-width:1.8}

/* ------------------------------------------------------------ Mise en page élève */
.colonne{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.barre{display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:62px;border-bottom:1px solid var(--line)}
.barre .titre{flex:1;font-weight:600;font-size:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre .compteur-etape{width:40px;text-align:right;color:var(--muted);font-size:12.5px}
.icone-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-btn);background:var(--surface-2);color:var(--text);flex:none;border:0;text-decoration:none;cursor:pointer}
.contenu{padding:16px 18px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.formulaire{display:flex;flex-direction:column;flex:1}
.intro{display:flex;flex-direction:column;gap:6px}
.pied{padding:18px;border-top:1px solid var(--line);display:flex;justify-content:center;gap:16px;font-size:13px}
.pied a{color:var(--muted)}

.logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:17px;line-height:1;color:var(--text);text-decoration:none}
.logo svg{width:26px;height:26px}
.logo path{stroke:var(--primary);stroke-width:1.2;opacity:.5;fill:none}
.logo circle{fill:var(--primary)}
.logo em{font-style:normal;color:var(--lien)}
.logo-grand{flex-direction:column;font-size:22px;gap:10px}
.logo-grand svg{width:52px;height:52px}

.surtitre{font:600 11px/1.3 var(--font-code);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.surtitre::before{content:"// ";opacity:.7}

/* ------------------------------------------------------------ Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--radius-btn);font:600 15px/1 var(--font);border:0;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primaire{background:var(--primary);color:var(--primary-ink)}
.btn-primaire:hover:not(:disabled){background:#DC4A2E}
.btn-secondaire{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.btn-secondaire:hover:not(:disabled){border-color:var(--muted)}
.btn-succes{background:var(--success);color:var(--success-ink)}
.btn-danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.btn-petit{min-height:36px;padding:0 13px;font-size:13px}
.btn-plein{width:100%}
.pile{display:flex;flex-direction:column;gap:12px}
.lien{color:var(--lien);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.lien:hover{text-decoration:underline}
.lien-petit{font-size:13.5px}
.droite{align-self:flex-end}

/* ------------------------------------------------------------ Cartes, puces, alertes */
.carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 10px;border-radius:3px;background:var(--surface-2);font-size:12.5px;font-weight:600;white-space:nowrap}
.puce-attente{background:var(--warning-soft);color:var(--warning)}
.puce-succes{background:var(--success-soft);color:var(--success)}
.puce-danger{background:var(--danger-soft);color:var(--danger)}
.alerte{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);border:1px solid;font-size:14px}
.alerte-succes{background:var(--success-soft);border-color:rgba(61,190,99,.4);color:var(--text)}
.alerte-succes .ic{color:var(--success)}
.alerte-erreur{background:var(--danger-soft);border-color:rgba(255,90,95,.45)}
.alerte-erreur .ic{color:var(--danger)}
.alerte-info{background:var(--accent-soft);border-color:rgba(233,185,41,.35)}
.alerte-info .ic{color:var(--accent)}
.lang{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;font:700 9px/1 var(--font-code);color:#fff;flex:none}
.lang-cs{background:#7A3E9D}
.lang-py{background:#3572A5}
.lang-sh{background:#2B333D;color:#7EE787}
.lang-sql{background:#C8660A}
.rang{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:3px;font:700 12px/1 var(--font-code);color:var(--rc);box-shadow:inset 0 0 0 1.5px var(--rc)}
.rang-m{--rc:#E5533D}

/* ------------------------------------------------------------ Accueil */
.hero-texte h1::after{content:"_";color:var(--lien);animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-texte h1::after{animation:none}}
.carte-code{padding:0;overflow:hidden;background:var(--code-bg);border-color:var(--line)}
.carte-code-tete{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--code-gutter);font:12px var(--font-code);border-bottom:1px solid rgba(255,255,255,.06)}
.carte-code-tete .rang{margin-left:auto}
.points{display:inline-flex;gap:6px}
.points i{width:10px;height:10px;border-radius:50%;background:#FF5F57}
.points i+i{background:#FEBC2E}
.points i+i+i{background:#28C840}
.code{margin:0;padding:10px 0;background:var(--code-bg);color:var(--code-text);font:12.5px/1.7 var(--font-code);font-variant-ligatures:none;overflow-x:auto}
.code{counter-reset:ligne}
.code .l{display:block;white-space:pre;padding:0 14px}
.code.numeros .l::before{counter-increment:ligne;content:counter(ligne);display:inline-block;width:2ch;margin-right:16px;text-align:right;color:var(--code-gutter)}
.code .ind{display:inline-block;width:4ch}
.code .s{color:var(--code-s)}
.code .k{color:var(--code-k)}
.code .t{color:var(--code-t)}
.code .n{color:var(--code-n)}
.code .f{color:var(--code-f)}
.carte-code-pied{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--success);font-size:13px;font-weight:600;border-top:1px solid rgba(255,255,255,.06)}
.bloc{display:flex;flex-direction:column;gap:10px}
.marche{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.marche li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.num{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:var(--primary-soft);color:var(--lien);font:600 14px/1 var(--font-code);flex:none}
.marche b{display:block;font-size:14.5px}
.marche span:not(.num){font-size:13px;color:var(--muted)}

/* ------------------------------------------------------------ Formulaires */
.etapes-form{list-style:none;margin:0;padding:12px 18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.etapes-form li{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.etapes-form i{height:6px;border-radius:99px;background:var(--surface-2)}
.etapes-form .fait i{background:var(--success)}
.etapes-form .encours{color:var(--text)}
.etapes-form .encours i{background:var(--primary)}
.champ{display:flex;flex-direction:column;gap:6px}
.etiquette{font-size:13px;font-weight:600}
.saisie{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;background:var(--input-bg);border:1px solid var(--line);border-radius:var(--radius-btn);color:var(--text)}
.saisie:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.saisie input,.saisie select{flex:1;min-width:0;min-height:46px;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;outline:none;appearance:none;-webkit-appearance:none;padding:0}
.saisie select option{background:var(--surface);color:var(--text)}
.saisie input::-webkit-calendar-picker-indicator{filter:invert(.8)}
.saisie>.ic{color:var(--muted)}
.champ.erreur .saisie{border-color:var(--danger)}
.message{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.message .ic{margin-top:1px}
.champ.erreur .message{color:var(--danger)}
.prefixe{padding-right:10px;border-right:1px solid var(--line);font-weight:600;color:var(--muted);font-size:13.5px;white-space:nowrap}
.voir-mdp{background:none;border:0;color:var(--muted);padding:6px;margin-right:-6px;cursor:pointer;display:grid;place-items:center}
.voir-mdp[aria-pressed="true"]{color:var(--lien)}
.force{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.force i{height:4px;border-radius:99px;background:var(--surface-2)}
.force[data-niveau="1"] i:nth-child(-n+1){background:var(--danger)}
.force[data-niveau="2"] i:nth-child(-n+2){background:var(--warning)}
.force[data-niveau="3"] i:nth-child(-n+3){background:var(--success)}
.force[data-niveau="4"] i{background:var(--success)}
.case-ligne{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.case-ligne input,input[type="checkbox"]{width:18px;height:18px;margin:1px 0 0;accent-color:var(--primary);flex:none;cursor:pointer}
.case-ligne.erreur{color:var(--danger)}
.note{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.separateur{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--line)}
.connexion-tete{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 0 8px}
.barre-bas{position:sticky;bottom:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);display:flex;gap:10px;z-index:3}
.barre-bas .btn{flex:1}

/* ------------------------------------------------------------ Attente, fiche élève */
.halo{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:10px auto 2px;background:var(--warning-soft);color:var(--warning);box-shadow:0 0 0 10px rgba(233,185,41,.05)}
.halo-danger{background:var(--danger-soft);color:var(--danger);box-shadow:0 0 0 10px rgba(255,90,95,.05)}
.halo-succes{background:var(--success-soft);color:var(--success);box-shadow:0 0 0 10px rgba(61,190,99,.05)}
.eleve{display:flex;align-items:center;gap:10px;min-width:0}
.eleve b{display:block;font-size:14px}
.eleve small{display:block;color:var(--muted);font-size:12.5px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--lien);font-weight:700;font-size:12px;flex:none}
.recap dl{margin:14px 0;display:grid;gap:8px}
.recap dl div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.recap dt{color:var(--muted)}
.recap dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.suivi{list-style:none;margin:0;padding:0}
.suivi li{display:flex;gap:12px;position:relative;padding-bottom:14px}
.suivi li:not(:last-child)::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--line)}
.suivi i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none}
.suivi i .ic{width:12px;height:12px;stroke-width:3}
.suivi .fait i{background:var(--success);border-color:var(--success);color:var(--success-ink)}
.suivi .encours i{border-color:var(--warning);background:var(--warning);box-shadow:inset 0 0 0 4px var(--surface)}
.suivi b{display:block;font-size:14px}
.suivi span{font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------------ Pages d'erreur */
.page-erreur{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:40px 24px}
.page-erreur .code-erreur{font:600 44px/1 var(--font-code);color:var(--lien)}

/* ------------------------------------------------------------ Console enseignant */
.console{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.lateral>.logo{padding:4px 10px 22px}
.lateral nav{display:flex;flex-direction:column;gap:3px}
.lateral nav a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--radius-btn);color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}
.lateral nav a:hover{color:var(--text)}
.lateral nav a.actif{background:var(--primary-soft);color:var(--lien)}
.badge{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--primary);color:var(--primary-ink);font-size:11px;display:grid;place-items:center}
.lateral-bas{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:14px 6px 0;border-top:1px solid var(--line)}
.principal{padding:26px 30px 40px;display:flex;flex-direction:column;gap:16px;min-width:0}
.tete-principal{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tete-principal h1{font-size:26px;margin-bottom:4px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;min-width:118px}
.stat b{display:block;font:600 22px/1.15 var(--font)}
.stat span{font-size:12px;color:var(--muted)}
.onglets-statut{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.onglets-statut a{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;color:var(--muted);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.onglets-statut a.actif{color:var(--text);box-shadow:inset 0 -2px 0 var(--primary)}
.onglets-statut .n{font:600 12px var(--font-code);color:var(--muted)}
.filtres{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filtres .saisie{min-height:40px}
.filtres .saisie input,.filtres .saisie select{font-size:14px;min-height:38px}
.filtres .recherche{flex:1 1 260px}
.filtres .choix{flex:0 1 210px}
.lot{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:var(--radius);background:var(--primary-soft);font-weight:600;font-size:14px;flex-wrap:wrap}
.lot label{display:flex;align-items:center;gap:10px;cursor:pointer}
.tableau-cadre{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tableau{width:100%;min-width:900px;border-collapse:collapse;font-size:13.5px}
.tableau th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);font-weight:600}
.tableau td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tableau td.col-eleve{white-space:normal;min-width:240px}
.tableau tr:last-child td{border-bottom:0}
.tableau tr:has(input[name="ids"]:checked) td{background:var(--primary-soft)}
.tableau tr.doublon td{background:var(--warning-soft)}
.tableau tr.decidee td{background:var(--surface-2);color:var(--muted)}
.tableau .col-case{width:44px}
.tableau .col-actions{text-align:right;width:1%}
.sous{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.alerte-texte{display:flex;align-items:center;gap:5px;color:var(--warning);font-size:12px;font-weight:600;margin-top:3px}
.actions{display:flex;gap:6px;justify-content:flex-end;align-items:flex-start}
.mini-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-btn);border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;list-style:none}
.mini-btn.ok{color:var(--success);border-color:var(--success)}
.mini-btn.ok:hover{background:var(--success-soft)}
.mini-btn.non{color:var(--danger)}
.mini-btn.non:hover{background:var(--danger-soft)}
.refus summary{list-style:none}
.refus summary::-webkit-details-marker{display:none}
.refus[open] summary{background:var(--danger-soft);border-color:var(--danger)}
.refus-pop{margin-top:8px;width:250px;display:flex;flex-direction:column;gap:8px;text-align:left;white-space:normal}
.refus-pop input{min-height:36px;padding:0 10px;background:var(--input-bg);border:1px solid var(--line);border-radius:var(--radius-btn);color:var(--text);font:inherit;font-size:14px}
.mdp-provisoire{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:normal}
.mdp-provisoire code{font:600 16px var(--font-code);color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:4px;letter-spacing:.04em}
.mdp-provisoire small{font-size:12px;color:var(--muted);max-width:220px;text-align:right}
.vide{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.pagination nav{display:flex;gap:8px}
.grille-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.grille-deux .carte{display:flex;flex-direction:column;gap:14px}
.ajout{display:flex;gap:10px;align-items:flex-start}
.ajout .champ{flex:1}
.ajout .btn{margin-top:25px}
.liste-ref{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.liste-ref li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.liste-ref li span:first-child{flex:1;font-weight:600}
.liste-ref li.inactif span:first-child{color:var(--muted);font-weight:400}
.connexion-enseignant{max-width:420px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 18px;gap:16px}

@media (max-width:900px){
  .console{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .lateral>.logo{padding:0}
  .lateral nav{flex-direction:row;flex-wrap:wrap}
  .lateral-bas{margin:0 0 0 auto;border:0;padding:0;flex-direction:row;align-items:center}
  .lateral-bas .eleve div{display:none}
  .principal{padding:18px 14px 32px}
  .stats{width:100%}
  .stat{flex:1;min-width:0;padding:8px 10px}
  .filtres .choix{flex:1 1 140px}
  .ajout{flex-direction:column;align-items:stretch}
  .ajout .btn{margin-top:0}
}

/* ------------------------------------------------------------ Compléments */
.h3{font-size:15.5px}
.erreur-texte{color:var(--danger)}
.halo-petit{width:40px;height:40px;margin:0;box-shadow:none}
.nom-decide{margin-left:10px}
fieldset.groupe{border:0;margin:0;padding:0;min-width:0}
fieldset.groupe legend{padding:0;margin-bottom:6px}
.telephone-ligne{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:8px}
.saisie-pays select{text-overflow:ellipsis}
.etat-courriel{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:600;white-space:nowrap}
.courriel-envoye{color:var(--success)}
.courriel-attente{color:var(--warning)}
.courriel-echec{color:var(--danger)}
.courriel-aucun{color:var(--muted)}
.etat-courriel .lien{font-size:12px;margin-left:4px}
.saisie-lot{min-height:36px;flex:0 1 190px}
.saisie-lot select{min-height:34px;font-size:13.5px}

/* ------------------------------------------------------------ Accueil (vitrine) */
.site{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.site main{flex:1}
.conteneur{width:100%;max-width:1240px;margin:0 auto;padding:0 18px}
.entete-site{position:sticky;top:0;z-index:10;background:rgba(18,19,22,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.entete-site .conteneur{display:flex;align-items:center;gap:16px;min-height:62px}
.nav-site{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav-site .btn{display:none}
.hero-site{display:grid;gap:22px;padding:24px 18px 8px}
.hero-texte{display:flex;flex-direction:column;gap:16px}
.cta{display:flex;flex-direction:column;gap:12px}
.section-site{display:flex;flex-direction:column;gap:14px;padding:28px 18px 40px}
.section-site h2{font-size:15.5px}
.pied-site{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pied-site .conteneur{display:flex;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.pied-site a{color:var(--muted)}

/* ------------------------------------------------------------ Panneau latéral (ordinateur) */
.panneau{display:none}
.panneau-in{width:100%;max-width:520px;display:flex;flex-direction:column;gap:32px}
.panneau-texte{display:flex;flex-direction:column;gap:12px}
.panneau-titre{font-size:36px;font-weight:600;line-height:1.12;letter-spacing:-.015em}
.panneau-texte .doux{font-size:16px;max-width:460px}
.etapes-panneau{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.etapes-panneau li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--muted)}
.etapes-panneau li b{display:block;color:var(--text);font-size:15px}
.etapes-panneau li span:not(.num){font-size:13.5px}
.etapes-panneau li.encours{border-color:var(--primary);background:var(--primary-soft)}
.etapes-panneau li.fait .num{background:var(--success-soft);color:var(--success)}
.points-forts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.points-forts li{display:flex;gap:12px;align-items:center;font-size:15px}
.points-forts .ic{color:var(--lien)}

@media (min-width:1024px){
  /* Vitrine : pleine largeur, accroche et code côte à côte. */
  .conteneur{padding:0 40px}
  .entete-site .conteneur{min-height:72px}
  .nav-site .btn{display:inline-flex}
  .bande-hero{background:radial-gradient(900px 520px at 85% 10%,rgba(207,63,36,.14),transparent 65%),radial-gradient(700px 480px at 0% 100%,rgba(233,185,41,.05),transparent 60%);border-bottom:1px solid var(--line)}
  .hero-site{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:72px;padding-top:96px;padding-bottom:96px}
  .hero-texte{gap:22px}
  .hero-texte h1{font-size:clamp(40px,4vw,58px);line-height:1.06;letter-spacing:-.02em}
  .hero-texte>.doux{font-size:18px;max-width:560px}
  .cta{flex-direction:row}
  .cta .btn{min-width:210px}
  .hero-visuel .code{font-size:14.5px;padding:16px 0}
  .section-site{gap:22px;padding-top:64px;padding-bottom:80px}
  .section-site h2{font-size:26px}
  .section-site .marche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .section-site .marche li{padding:22px;flex-direction:column;gap:14px}
  .section-site .marche b{font-size:17px}
  .section-site .marche div span{font-size:14.5px}

  /* Écrans élève : le panneau à gauche, le contenu à droite. */
  .ecran-eleve{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
  .panneau{display:flex;position:sticky;top:0;height:100vh;align-items:center;justify-content:center;padding:48px 56px;border-right:1px solid var(--line);
    background:radial-gradient(800px 520px at 100% 0%,rgba(207,63,36,.12),transparent 65%),#16171B}
  .ecran-eleve .colonne{max-width:none;margin:0;padding:6vh 40px 0}
  .ecran-eleve .colonne>*{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
  .ecran-eleve .barre{border-bottom:0;padding-left:18px;padding-right:18px}
  .ecran-eleve .barre>.logo,.ecran-eleve .connexion-tete .logo{display:none}
  .ecran-eleve .barre:has(>.logo:only-child){display:none}
  .ecran-eleve .etapes-form{display:none}
  .ecran-eleve .formulaire .contenu{flex:0 0 auto}
  .ecran-eleve .barre-bas{position:static;border-top:0;background:none;padding:8px 18px 48px}
  .ecran-eleve .page-erreur{justify-content:flex-start;padding-top:12vh}
  .connexion-enseignant{min-height:auto;padding-top:10vh}
}

/* ------------------------------------------------------------ Écrans de cours */
.nav-app{display:flex;gap:6px;margin-left:12px}
.nav-app a{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:var(--radius-btn);color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}
.nav-app a:hover{color:var(--text);background:var(--surface-2)}
.menu-compte{position:relative}
.menu-compte summary{list-style:none;cursor:pointer}
.menu-compte summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column}
.menu>div{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu b{display:block;font-size:14px}
.menu small{color:var(--muted);font-size:12.5px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;background:none;border-radius:var(--radius-btn);color:var(--text);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-2)}
.menu .ic{color:var(--muted)}
.app-main{flex:1}
.page-app{display:flex;flex-direction:column;gap:22px;padding-top:24px;padding-bottom:48px}

progress.jauge{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:99px;background:var(--surface-2);overflow:hidden;margin:4px 0 6px}
progress.jauge::-webkit-progress-bar{background:var(--surface-2);border-radius:99px}
progress.jauge::-webkit-progress-value{background:var(--success);border-radius:99px}
progress.jauge::-moz-progress-bar{background:var(--success);border-radius:99px}

.grille-cours{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.carte-cours{display:flex;flex-direction:column;gap:14px}
.carte-cours-tete{display:flex;gap:14px;align-items:flex-start}
.carte-cours h2{font-size:19px}
.carte-cours h2 a{color:var(--text);text-decoration:none}
.carte-cours .btn{white-space:normal;text-align:center;line-height:1.3;padding-top:10px;padding-bottom:10px}
.carte-bientot{display:flex;flex-direction:column;gap:8px;border-style:dashed;background:transparent;color:var(--muted)}
.carte-bientot b{color:var(--text)}

.tete-cours{display:grid;gap:18px;padding-top:24px;padding-bottom:24px}
.tete-cours h1{font-size:30px}
.resume-cours{display:flex;flex-direction:column;gap:8px}
.resume-cours .btn{white-space:normal;text-align:center;line-height:1.3;padding-top:10px;padding-bottom:10px}
.niveau{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.niveau-tete h2{font-size:22px}
.grille-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-items:start}
.module{display:flex;flex-direction:column;gap:10px}
.module-tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.module h3{font-size:16.5px}
.module-bientot{background:transparent;border-style:dashed}
.module-bientot h3{color:var(--muted)}

.lecons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lecon a,.lecon .lecon-lien{display:grid;grid-template-columns:24px 30px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border-radius:var(--radius-btn);color:var(--text);text-decoration:none;font-size:14.5px}
.lecon a:hover{background:var(--surface-2)}
.etat-lecon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.etat-lecon i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line)}
.lecon-numero{font:600 12.5px var(--font-code);color:var(--muted)}
.lecon-duree{font-size:12px;color:var(--muted);white-space:nowrap}
.lecon-faite .etat-lecon{background:var(--success-soft);color:var(--success)}
.lecon-suivante a{background:var(--primary-soft)}
.lecon-suivante .etat-lecon,.lecon-courante .etat-lecon{color:var(--lien)}
.lecon-courante a{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--primary)}
.lecon-bientot .lecon-lien{color:var(--muted)}

/* Page de leçon : sommaire du module à gauche sur ordinateur, texte au centre. */
.lecon-page{display:grid;gap:24px;padding-top:20px;padding-bottom:0}
.sommaire{display:none}
.lecon-article{min-width:0;display:flex;flex-direction:column;gap:18px}
.lecon-tete{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lecon-tete h1{font-size:28px;line-height:1.15}
.fil{font-size:13px;color:var(--muted)}
.fil a{color:var(--muted)}
.lecon-nav{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);margin-top:8px}
.lecon-nav form{flex:1;display:flex}
.lecon-nav form .btn{flex:1}
.lecon-nav .texte-large{display:none}

.lecon-corps{font-size:16.5px;line-height:1.72;color:#DCDCE0}
.lecon-corps>*{margin:0 0 16px}
.lecon-corps h2{font-size:22px;color:var(--text);margin:36px 0 12px;line-height:1.25}
.lecon-corps h3{font-size:18px;color:var(--text);margin:28px 0 10px}
.lecon-corps strong{color:var(--text)}
.lecon-corps em{color:var(--text)}
.lecon-corps a{color:var(--lien)}
.lecon-corps ul,.lecon-corps ol{padding-left:22px}
.lecon-corps li{margin:4px 0}
.lecon-corps li::marker{color:var(--lien)}
.lecon-corps code{font-family:var(--font-code);font-size:.88em;background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:4px;color:var(--text);font-variant-ligatures:none}
.lecon-corps pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;overflow-x:auto;font:14px/1.65 var(--font-code);font-variant-ligatures:none;color:var(--code-text)}
.lecon-corps pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.lecon-corps blockquote{border-left:3px solid var(--primary);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;color:var(--text)}
.lecon-corps blockquote>*{margin:0 0 8px}
.lecon-corps blockquote>*:last-child{margin-bottom:0}
.lecon-corps blockquote ul{padding-left:20px}
/* Le premier encadré d'une leçon, ce sont ses objectifs. */
.lecon-corps>blockquote:first-child{border-left-color:var(--accent);background:var(--accent-soft)}
.lecon-corps img{display:block;width:100%;max-width:900px;height:auto;border-radius:12px;border:1px solid var(--line)}
.lecon-corps table{display:block;overflow-x:auto;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.lecon-corps th,.lecon-corps td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.lecon-corps th{background:var(--surface-2);color:var(--text)}

/* Coloration du code C# (classes chroma, sans style en ligne). */
.chroma{color:var(--code-text)}
.chroma .k,.chroma .kd,.chroma .kn,.chroma .kr,.chroma .kc,.chroma .kp{color:var(--code-k)}
.chroma .kt,.chroma .nc,.chroma .nn{color:var(--code-t)}
.chroma .nf,.chroma .fm,.chroma .nb,.chroma .bp{color:var(--code-f)}
.chroma .s,.chroma .s1,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd,.chroma .se,.chroma .si,.chroma .sx{color:var(--code-s)}
.chroma .m,.chroma .mi,.chroma .mf,.chroma .mh,.chroma .il{color:var(--code-n)}
.chroma .c,.chroma .c1,.chroma .cm,.chroma .cs,.chroma .cp,.chroma .ch{color:var(--code-c);font-style:italic}
.chroma .p,.chroma .o,.chroma .ow{color:#B7B8BF}
.chroma .err{color:var(--danger)}

@media (min-width:1024px){
  .page-app{padding-top:40px;gap:28px}
  .tete-cours{grid-template-columns:minmax(0,1fr) 380px;align-items:end;padding-top:56px;padding-bottom:48px}
  .tete-cours h1{font-size:44px}
  .lecon-page{grid-template-columns:280px minmax(0,1fr);gap:56px;padding-top:36px}
  .sommaire{display:flex;flex-direction:column;gap:10px;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
  .sommaire-titre{font-weight:600;font-size:15px;margin-bottom:4px}
  .lecons-compactes .lecon a,.lecons-compactes .lecon .lecon-lien{grid-template-columns:24px 28px minmax(0,1fr);font-size:13.5px}
  .lecons-compactes .lecon-duree{display:none}
  .lecon-article{max-width:780px}
  .lecon-tete h1{font-size:38px}
  .lecon-corps{font-size:17px}
  .lecon-nav{position:static;border-top:1px solid var(--line);padding:22px 0 64px;margin-top:20px}
  .lecon-nav form{flex:0 1 auto;margin-left:auto}
  .lecon-nav .texte-large{display:inline}
}

/* ------------------------------------------------------------ Quiz */
.lecon-quiz a{border-top:1px dashed var(--line);border-radius:0 0 var(--radius-btn) var(--radius-btn);margin-top:4px}
.lecon-quiz .lecon-numero{color:var(--accent)}
.quiz-reussi .etat-lecon{background:var(--success-soft);color:var(--success)}
.quiz-reussi .lecon-duree{color:var(--success)}
.quiz-afaire .etat-lecon,.quiz-essaye .etat-lecon{color:var(--accent)}
.quiz-page{display:flex;flex-direction:column;gap:18px;padding-top:24px;padding-bottom:56px;max-width:860px}
.quiz{display:flex;flex-direction:column;gap:16px}
.question{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
.question legend{float:left;width:100%;margin-bottom:4px}
.question .enonce{font-size:16px}
.question .enonce>*{margin-bottom:10px}
.question .enonce>*:last-child{margin-bottom:0}
.choix{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.choix-ligne{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--input-bg);cursor:pointer;font-size:15px;line-height:1.5}
.choix-ligne:hover{border-color:var(--muted)}
.choix-ligne:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.choix-ligne input{margin-top:3px;width:18px;height:18px;accent-color:var(--primary);flex:none}
.choix code,.explication code{font-family:var(--font-code);font-size:.9em;background:var(--surface-2);border:1px solid var(--line);padding:1px 5px;border-radius:4px}
.quiz-actions{display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:12px 0 calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.quiz-actions .btn{min-width:220px}
.bilan{display:grid;gap:14px;align-items:center;border-color:var(--warning)}
.bilan-reussi{border-color:var(--success);background:var(--success-soft)}
.bilan-score{font:600 38px/1 var(--font-code);color:var(--warning)}
.bilan-reussi .bilan-score{color:var(--success)}
.bilan-texte b{font-size:17px}
.bilan-actions{display:flex;gap:10px;flex-wrap:wrap}
.bilan-actions .btn{white-space:normal;text-align:center;line-height:1.3;flex:1 1 200px}
.verdict{margin-left:8px;padding:2px 8px;border-radius:3px;font-size:11px}
.verdict.juste{background:var(--success-soft);color:var(--success)}
.verdict.faux{background:var(--danger-soft);color:var(--danger)}
.question-fausse{border-color:rgba(255,90,95,.35)}
.corrige li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-btn);color:var(--muted);font-size:15px}
.corrige li .ic{margin-top:3px}
.corrige li .sans-icone{width:15px;flex:none}
.corrige li.bonne{border-color:var(--success);background:var(--success-soft);color:var(--text)}
.corrige li.bonne .ic{color:var(--success)}
.corrige li.choisie:not(.bonne){border-color:var(--danger);background:var(--danger-soft);color:var(--text)}
.corrige li.choisie:not(.bonne) .ic{color:var(--danger)}
.explication{font-size:15px;border-left:3px solid var(--accent);padding-left:14px}
@media (min-width:1024px){
  .quiz-page{padding-top:40px;margin-left:auto;margin-right:auto}
  .bilan{grid-template-columns:auto minmax(0,1fr) auto}
  .bilan-actions .btn{flex:0 1 auto}
  .quiz-actions{position:static;border-top:0}
}