:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#f3f5fb;--card:#fff;--tx:#1b2140;--mu:#66708f;--bd:#e3e7f2;--bd2:#cdd4e8;
--pr:#5b4be8;--pr2:#8b6cf8;--prs:#eeecff;--tg:#eeecff;
--ok:#12a36b;--oks:#e1f6ec;--wa:#c27b00;--was:#fff1d6;--ko:#e5484d;--kos:#fde8e9;
--in:#2169d1;--ins:#e4efff;--vi:#7c4ddb;--vis:#f0e8ff;
--sh:0 1px 2px rgba(24,30,70,.06),0 8px 22px rgba(24,30,70,.07);--r:14px;
--nav:linear-gradient(115deg,#3426c4 0%,#5b4be8 55%,#8b6cf8 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1120;--card:#171b30;--tx:#e8ebfa;--mu:#98a2c8;--bd:#272d4a;--bd2:#353c5f;--pr:#8c80ff;--pr2:#a99bff;--prs:#252a52;--tg:#252a52;--ok:#4ade9b;--oks:#12332a;--wa:#fbbf4a;--was:#35290f;--ko:#ff7b80;--kos:#3a1a1e;--in:#7db2ff;--ins:#16294a;--vi:#b79cff;--vis:#2a2150;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);--nav:linear-gradient(115deg,#1d1670 0%,#3b30a8 55%,#5a47c9 100%)}}
:root[data-theme="dark"]{--bg:#0e1120;--card:#171b30;--tx:#e8ebfa;--mu:#98a2c8;--bd:#272d4a;--bd2:#353c5f;--pr:#8c80ff;--pr2:#a99bff;--prs:#252a52;--tg:#252a52;--ok:#4ade9b;--oks:#12332a;--wa:#fbbf4a;--was:#35290f;--ko:#ff7b80;--kos:#3a1a1e;--in:#7db2ff;--ins:#16294a;--vi:#b79cff;--vis:#2a2150;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);--nav:linear-gradient(115deg,#1d1670 0%,#3b30a8 55%,#5a47c9 100%)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
code{background:var(--prs);color:var(--pr);padding:1px 6px;border-radius:6px;font-size:13px}
/* barre de navigation */
header.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 22px;min-height:60px;background:var(--nav);color:#fff;box-shadow:0 4px 18px rgba(52,38,196,.28)}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;letter-spacing:.2px;margin-right:8px}
.brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);font-size:18px}
.brand b{font-weight:800}
nav#nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header.top button{background:transparent;border:0;color:rgba(255,255,255,.82);padding:8px 13px;border-radius:10px;font-weight:500}
header.top button:hover{background:rgba(255,255,255,.14);color:#fff}
header.top button.on{background:rgba(255,255,255,.22);color:#fff;font-weight:600}
header.top button.out{margin-left:6px;border:1px solid rgba(255,255,255,.35)}
.who{display:flex;gap:4px;margin-left:auto;background:rgba(0,0,0,.18);padding:3px;border-radius:12px}
main{max-width:1280px;margin:0 auto;padding:22px}main.stu{max-width:700px}
/* cartes et titres */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:16px}
h2{font-size:17px;margin:0 0 12px;font-weight:700}
h2 .cnt{font-size:12px;background:var(--prs);color:var(--pr);border-radius:20px;padding:2px 10px;margin-left:6px;vertical-align:middle}
.mu{color:var(--mu);font-size:13px}.low{color:var(--ko);font-weight:600}
/* boutons et champs */
button{font:inherit;cursor:pointer;border:1px solid var(--bd2);background:var(--card);color:var(--tx);border-radius:10px;padding:8px 14px;font-weight:500;transition:background .12s,border-color .12s,transform .05s}
button:hover:not(:disabled){border-color:var(--pr);color:var(--pr)}button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
button.p{background:linear-gradient(120deg,var(--pr),var(--pr2));border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(91,75,232,.28)}
button.p:hover:not(:disabled){color:#fff;filter:brightness(1.07)}
button.d{color:var(--ko);border-color:color-mix(in srgb,var(--ko) 35%,var(--bd2))}
button.d:hover:not(:disabled){background:var(--kos);border-color:var(--ko);color:var(--ko)}
button.on{border-color:var(--pr);color:var(--pr);font-weight:600;background:var(--prs)}
input,textarea,select{font:inherit;width:100%;padding:9px 11px;border:1px solid var(--bd2);border-radius:10px;background:var(--card);color:var(--tx);transition:border-color .12s,box-shadow .12s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--pr);box-shadow:0 0 0 3px color-mix(in srgb,var(--pr) 22%,transparent)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--pr)}
label{display:block;font-size:13px;font-weight:500;color:var(--mu);margin:10px 0 4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>*{flex:1;min-width:90px}.row>button{flex:0 0 auto}
/* interrupteurs */
label.tg{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--tx);font-size:14px;font-weight:500;margin:6px 0}
label.tg input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:0 0 40px;width:40px!important;min-width:40px;height:23px;border-radius:23px;background:var(--bd2);position:relative;cursor:pointer;transition:background .15s;padding:0;border:0}
label.tg input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
label.tg input[type=checkbox]:checked{background:var(--pr)}label.tg input[type=checkbox]:checked::after{transform:translateX(17px)}
/* mise en page : barre latérale + contenu */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
aside{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:16px;position:sticky;top:78px}
.sec{margin-bottom:18px}.sec:last-child{margin-bottom:0}
.sec h4{margin:0 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mu)}
.srch{display:flex;gap:6px}.srch input{flex:1}.srch button{padding:8px 11px}
.tl{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow:auto}
.tl button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border-color:transparent;background:transparent;padding:7px 10px}
.tl button:hover{background:var(--prs)}.tl button.on{background:var(--prs);color:var(--pr);font-weight:600}
.tl i{font-style:normal;font-size:12px;background:var(--bg);color:var(--mu);border-radius:20px;padding:0 8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.stats>div{background:var(--bg);border-radius:12px;padding:9px 11px}.stats b{display:block;font-size:20px;color:var(--pr);line-height:1.2}.stats span{font-size:12px;color:var(--mu)}
.stats.wide{margin-bottom:16px;gap:12px}.stats.wide>div{background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px 16px}.stats.wide b{font-size:28px}
/* accordéons */
details.acc{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
details.acc>summary{cursor:pointer;list-style:none;padding:13px 18px;font-weight:700;background:linear-gradient(90deg,var(--prs),transparent 80%);display:flex;align-items:center;gap:9px;user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸";color:var(--pr);transition:transform .15s}details.acc[open]>summary::before{transform:rotate(90deg)}
.accb{padding:4px 18px 18px}
details.mini{box-shadow:none;margin:8px 0 0;border-radius:11px}details.mini>summary{padding:9px 13px;font-size:13px;font-weight:600}details.mini .accb{padding:2px 13px 12px}
/* cartes d'examens */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.xc{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:15px;display:flex;flex-direction:column;gap:7px;transition:transform .12s,box-shadow .12s}
.xc:hover{transform:translateY(-2px)}
.xc header{display:flex;align-items:flex-start;gap:10px}.xc h3{margin:0;font-size:15px;line-height:1.35}
.badge{flex:0 0 auto;background:linear-gradient(120deg,var(--pr),var(--pr2));color:#fff;border-radius:20px;padding:2px 11px;font-size:12px;font-weight:700;letter-spacing:.05em}
.pill{border-radius:9px;padding:6px 11px;font-size:13px;font-weight:500}
.pv{background:var(--vis);color:var(--vi)}.pb{background:var(--ins);color:var(--in)}.pg{background:var(--oks);color:var(--ok)}
.st-ok{background:var(--oks);color:var(--ok)}.st-wait{background:var(--was);color:var(--wa)}.st-off{background:var(--kos);color:var(--ko)}
.stat{display:flex;align-items:center;justify-content:space-between;gap:10px}.stat button{flex:0 0 auto;padding:4px 11px;font-size:12px;font-weight:700;border-radius:8px;background:var(--card);color:var(--ko);border-color:var(--ko)}
.stat.st-off button,.stat.st-wait button{color:var(--ok);border-color:var(--ok)}
.lnk{border:0!important;background:none!important;box-shadow:none!important;padding:0 0 0 6px!important;color:var(--pr)!important;text-decoration:underline;font-size:12px;font-weight:600}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.acts button{flex:1;padding:7px 10px;font-size:13px}.acts button.d{flex:0 0 auto}
/* étiquettes, questions, tableaux */
.tag{display:inline-block;background:var(--tg);color:var(--pr);border-radius:20px;padding:1px 10px;font-size:12px;font-weight:600;margin:2px 4px 2px 0;cursor:pointer}
.q{border-bottom:1px solid var(--bd);padding:11px 4px}.q:last-child{border-bottom:0}.q:hover{background:color-mix(in srgb,var(--prs) 45%,transparent);border-radius:10px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);background:var(--bg)}
th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--bd);font-size:14px;vertical-align:top}tr:hover td{background:color-mix(in srgb,var(--prs) 35%,transparent)}
/* passage d'examen */
.opt{display:flex;gap:11px;align-items:center;padding:12px 14px;border:1.5px solid var(--bd);border-radius:12px;margin:8px 0;cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--pr);background:var(--prs)}
.opt.ok{border-color:var(--ok);background:var(--oks)}.opt.ko{border-color:var(--ko);background:var(--kos)}
.timers{display:flex;gap:10px;font-weight:700;font-variant-numeric:tabular-nums}
.timers span:not(:empty){background:var(--prs);color:var(--pr);border-radius:20px;padding:3px 12px}.timers .low{background:var(--kos);color:var(--ko)}
.bar{height:8px;background:var(--bd);border-radius:8px;overflow:hidden;margin:10px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pr),var(--pr2));border-radius:8px}
.big{font-size:46px;font-weight:800;background:linear-gradient(120deg,var(--pr),var(--pr2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:860px){.layout{grid-template-columns:1fr}aside{position:static}header.top{padding:8px 14px}main{padding:14px}}