:root {
  --ground:#F5F2EC; --panel:#FFFFFF; --panel-2:#FBF8F1; --sidebar:#221F19;
  --ink:#23201A; --ink-soft:#6A6355; --ink-faint:#9A9280;
  --accent:#9A7A2E; --accent-soft:#C9A961; --accent-ink:#241d07;
  --line:#E7DFCE; --line-strong:#D6CAB0;
  --ok:#3B6E45; --ok-bg:#E7EFE6; --warn:#9A6A16; --warn-bg:#F6ECD6; --crit:#A8442A; --crit-bg:#F6E7E1;
  --track:#EAE3D3;
  --shadow:0 1px 2px rgba(60,48,20,.05), 0 8px 22px rgba(60,48,20,.05);
  --serif:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#161B20; --panel:#1F272D; --panel-2:#1B2227; --sidebar:#12171B;
    --ink:#ECE7DC; --ink-soft:#A6ADAB; --ink-faint:#727B79;
    --accent:#D9BE84; --accent-soft:#C9A961;
    --line:#2C353C; --line-strong:#3A444B;
    --ok:#7FBF8B; --ok-bg:#20302522; --warn:#E0B15E; --warn-bg:#332a1622; --crit:#E39479; --crit-bg:#3a241c33;
    --track:#2A333A; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.3);
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
.loading { padding:60px; text-align:center; color:var(--ink-soft); }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:34px 30px; max-width:400px; width:100%; text-align:center; }
.login .mk { width:52px; height:52px; border-radius:13px; border:2px solid var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 16px; }
.login h1 { font-family:var(--serif); font-size:23px; margin:0 0 4px; }
.login p { color:var(--ink-soft); margin:0 0 22px; font-size:13.5px; }
.login label { display:block; text-align:left; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.login input { width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink); font-size:15px; font-family:inherit; }
.login button { width:100%; margin-top:14px; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; border:none; border-radius:10px; padding:13px; font-size:14.5px; cursor:pointer; font-family:inherit; }
.login button:disabled { opacity:.6; cursor:default; }
.login .msg { margin-top:16px; font-size:13px; padding:12px; border-radius:9px; }
.login .msg.ok { background:var(--ok-bg); color:var(--ok); }
.login .msg.err { background:var(--crit-bg); color:var(--crit); }

/* App shell */
.app { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
@media(max-width:760px){ .app{ grid-template-columns:1fr; } .side{ display:none; } }
.side { background:var(--sidebar); color:#DAD3C4; padding:22px 16px; display:flex; flex-direction:column; gap:4px; }
.brand { display:flex; align-items:center; gap:9px; padding:0 8px 18px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:14px; }
.brand .mk { width:30px; height:30px; border-radius:8px; border:1.5px solid var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:15px; }
.brand b { font-family:var(--serif); font-size:16px; color:#F3EEE2; }
.brand small { display:block; font-size:10.5px; color:#8C857A; font-family:var(--mono); letter-spacing:.04em; }
.navlbl { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#7C756A; padding:12px 8px 4px; }
.nav { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#C8C1B2; cursor:pointer; font-size:13.5px; border:none; background:none; width:100%; text-align:left; font-family:inherit; }
.nav:hover { background:rgba(255,255,255,.05); color:#F3EEE2; }
.nav.on { background:var(--accent-soft); color:var(--accent-ink); font-weight:650; }
.side .who { margin-top:auto; padding:12px 8px 0; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#9A9285; }
.side .who b { color:#DAD3C4; display:block; font-size:13px; }
.side .who button { margin-top:8px; background:none; border:1px solid rgba(255,255,255,.14); color:#9A9285; border-radius:7px; padding:6px 10px; font-size:12px; cursor:pointer; font-family:inherit; }

.main { min-width:0; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--panel-2); flex-wrap:wrap; }
.crumbs { font-size:12.5px; color:var(--ink-soft); font-family:var(--mono); }
.crumbs b { color:var(--ink); }
.lic { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:7px 13px; font-size:12.5px; box-shadow:var(--shadow); }
.lic .dot { width:8px; height:8px; border-radius:50%; background:var(--ok); }
.lic em { font-style:normal; color:var(--ink-soft); }

.view { padding:28px; max-width:1000px; }
h1 { font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 4px; }
.subtitle { color:var(--ink-soft); margin:0 0 24px; }
.back { background:none; border:none; color:var(--accent); font-family:inherit; font-size:13px; cursor:pointer; padding:0; margin:0 0 14px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.ccard { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow); cursor:pointer; transition:border-color .15s, transform .15s; }
.ccard:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.ccard h3 { margin:0 0 2px; font-size:17px; font-family:var(--serif); }
.ccard .prog-name { color:var(--ink-soft); font-size:12.5px; margin-bottom:16px; }
.ccard .rowk { display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; border-top:1px solid var(--line); }
.ccard .rowk span { color:var(--ink-soft); }
.ccard .rowk b { font-variant-numeric:tabular-nums; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.kpi u { display:block; text-decoration:none; color:var(--ink-soft); font-size:12px; margin-bottom:6px; }
.kpi strong { font-size:26px; font-family:var(--serif); font-variant-numeric:tabular-nums; }
.kpi.alert strong { color:var(--crit); }

.tablewrap { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:560px; }
thead th { text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td { padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr.clic { cursor:pointer; } tbody tr.clic:hover { background:var(--panel-2); }
.totem { display:flex; align-items:center; gap:10px; }
.totem .em { font-size:19px; } .totem b { font-weight:600; }
.num { font-variant-numeric:tabular-nums; }
.bar { height:7px; width:100px; background:var(--track); border-radius:4px; overflow:hidden; display:inline-block; vertical-align:middle; }
.bar i { display:block; height:100%; background:var(--accent-soft); }
.bar i.hi { background:var(--ok); } .bar i.lo { background:var(--crit); }
.barnum { font-size:12px; color:var(--ink-soft); margin-left:8px; font-variant-numeric:tabular-nums; }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650; padding:3px 9px; border-radius:20px; }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.warn { background:var(--warn-bg); color:var(--warn); } .pill.mut { background:var(--track); color:var(--ink-soft); }

.empty { background:var(--panel); border:1px dashed var(--line-strong); border-radius:12px; padding:40px; text-align:center; color:var(--ink-soft); }
.note { font-size:12.5px; color:var(--ink-faint); margin-top:20px; line-height:1.5; }

/* Fiche élève */
.fhead { display:flex; align-items:center; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); margin-bottom:20px; flex-wrap:wrap; }
.fhead .big { font-size:38px; } .fhead h2 { margin:0; font-family:var(--serif); font-size:22px; }
.fhead .meta { color:var(--ink-soft); font-size:12.5px; margin-top:2px; }
.fhead .stat { margin-left:auto; text-align:right; }
.fhead .stat u { text-decoration:none; color:var(--ink-faint); font-size:11px; display:block; }
.fhead .stat b { font-size:20px; font-family:var(--serif); font-variant-numeric:tabular-nums; }
.mods { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.mod { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--line); }
.mod:last-child { border-bottom:0; }
.mod .mt { font-size:13.5px; } .mod .mn { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.pips { display:flex; gap:6px; }
.pip { width:30px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.pip.pass { background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent); }
.pip.try { background:var(--crit-bg); color:var(--crit); border:1px solid color-mix(in srgb,var(--crit) 30%,transparent); }
.pip.none { background:var(--track); color:var(--ink-faint); }