:root{
  --bg:#F6F3EC; --surface:#FFFFFF; --ink:#20242B; --ink-soft:#5C6169;
  --navy:#23324A; --teal:#2E6B62; --amber:#B9741E; --plum:#6E5087; --rose:#9C4B4B;
  --good:#2E7D4F; --bad:#B23A3A; --line:#E2DBC9; --focus:#23324A;
  --font-mono:"Space Mono",monospace; --font-sans:"Public Sans",system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#161A21; --surface:#1E2431; --ink:#ECE8DF; --ink-soft:#9BA1AC;
  --navy:#8AA0C4; --teal:#6FB6A9; --amber:#E0A155; --plum:#BE9BCB; --rose:#D18888;
  --good:#5FBE85; --bad:#E17272; --line:#2B3240; --focus:#8AA0C4;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
[hidden]{display:none!important;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-mono);}
::selection{background:var(--amber); color:#fff;}
.hidden{display:none!important;}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:baseline; gap:10px;}
.logo{font-family:var(--font-mono); font-weight:700; color:var(--navy); font-size:1.05rem;}
.brand-sub{font-size:.82rem; color:var(--ink-soft);}
.topbar-right{display:flex; align-items:center; gap:14px;}
.hud{display:flex; align-items:center; gap:14px;}
.hud-item{font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.hud-item.timer{color:var(--amber);}
.hud-item.timer.warning{color:var(--rose);}
.hud-item.timer.danger{color:var(--bad); font-weight:700;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-sans); font-weight:600; font-size:.88rem; border-radius:9px;
  padding:10px 16px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.btn:hover{border-color:var(--navy);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn-primary{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn-primary:hover{opacity:.9;}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-soft); text-decoration:underline;}
.btn-ghost:hover{color:var(--ink); border-color:transparent;}
.btn-accent{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn-sm{padding:6px 12px; font-size:.8rem;}
.btn-lg{padding:14px 20px; font-size:.95rem; width:100%;}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.btn.on{background:var(--amber); border-color:var(--amber); color:#fff;}

/* ---------- layout ---------- */
main{max-width:900px; margin:0 auto; padding:24px 20px 60px;}
.view{display:block;}
.grid-2{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;}
@media (max-width:760px){ .grid-2{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:18px;}
.card h2{font-size:1rem; color:var(--navy); margin:0 0 14px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h2{margin:0;}
.head-actions{display:flex; gap:8px;}

.banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:color-mix(in srgb, var(--amber) 12%, var(--surface)); border:1px solid var(--amber);
  border-radius:12px; padding:14px 18px; margin-bottom:18px; flex-wrap:wrap;
}
.banner-actions{display:flex; gap:8px;}
.muted{color:var(--ink-soft); font-size:.86rem;}

/* ---------- modes ---------- */
.modes{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.mode{display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer;}
.mode:has(input:checked){border-color:var(--navy); background:color-mix(in srgb, var(--navy) 6%, var(--surface));}
.mode input{margin-top:3px; accent-color:var(--navy);}
.mode-body{display:flex; flex-direction:column; gap:3px;}
.mode-title{font-weight:700; font-size:.92rem;}
.mode-desc{font-size:.8rem; color:var(--ink-soft); line-height:1.4;}

/* ---------- fields ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px;}
.row{display:flex; align-items:center; gap:12px;}
input[type="range"]{flex:1; accent-color:var(--amber);}
.pill{
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--navy);
  background:color-mix(in srgb, var(--navy) 10%, var(--surface)); border-radius:99px; padding:3px 11px; min-width:2.4em; text-align:center;
}
.hint{font-size:.8rem; color:var(--ink-soft); margin:6px 0 0; line-height:1.5;}
.check{display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:.9rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; margin-bottom:8px;}
.check input{accent-color:var(--amber); width:16px; height:16px;}

/* ---------- category (module) list ---------- */
.modules{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto;}
.mod{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; cursor:pointer; font-size:.88rem;
}
.mod:has(input:checked){border-color:var(--cat-color,var(--navy));}
.mod[data-cat="entreprise"]{--cat-color:var(--navy);}
.mod[data-cat="technique"]{--cat-color:var(--teal);}
.mod[data-cat="gestion"]{--cat-color:var(--amber);}
.mod[data-cat="experience"]{--cat-color:var(--plum);}
.mod input{accent-color:var(--cat-color,var(--navy));}
.mod.empty{opacity:.4; cursor:not-allowed;}
.mod-name{flex:1; font-weight:600;}
.mod-count{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft);}

/* ---------- stats ---------- */
.stat-row{display:flex; gap:10px; flex-wrap:wrap;}
.stat{flex:1; min-width:100px; text-align:center; background:var(--bg); border-radius:10px; padding:12px 8px;}
.stat-v{display:block; font-family:var(--font-mono); font-size:1.4rem; color:var(--navy); font-variant-numeric:tabular-nums;}
.stat-l{display:block; font-size:.72rem; color:var(--ink-soft); margin-top:2px;}
.bar{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.82rem;}
.bar-name{width:170px; flex:none; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-track{flex:1; height:7px; background:var(--line); border-radius:99px; overflow:hidden;}
.bar-fill{display:block; height:100%; background:var(--good); border-radius:99px;}
.bar-fill.mid{background:var(--amber);}
.bar-fill.low{background:var(--bad);}
.bar-val{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); width:110px; text-align:right; flex:none;}

/* ---------- quiz ---------- */
.quiz-wrap{max-width:640px; margin:0 auto;}
.qmeta{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.tags{display:flex; gap:6px;}
.tag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
  background:color-mix(in srgb, var(--navy) 10%, var(--surface)); border-radius:99px; padding:3px 10px;}
.badge{font-size:.72rem; color:var(--ink-soft);}
.qtext{font-size:1.2rem; font-weight:600; line-height:1.5; margin:0 0 18px;}

.choices{display:flex; flex-direction:column; gap:9px; margin-bottom:6px;}
.choice{
  display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; background:var(--surface);
}
.choice:hover:not(.locked){border-color:var(--navy);}
.choice input{margin-top:3px; accent-color:var(--navy);}
.choice-text{font-size:.92rem; line-height:1.45;}
.choice.locked{cursor:default;}
.choice.is-correct{border-color:var(--good); background:color-mix(in srgb, var(--good) 12%, var(--surface));}
.choice.is-wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, var(--surface));}

.feedback{border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:14px 0; font-size:.9rem; line-height:1.55;}
.feedback.good{border-color:var(--good); background:color-mix(in srgb, var(--good) 8%, var(--surface));}
.feedback.bad{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 8%, var(--surface));}
.feedback h3{margin:0 0 6px; font-size:.95rem;}

.quiz-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.quiz-nav .btn{flex:1; min-width:110px;}

.palette{display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; justify-content:center;}
.pdot{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); font-family:var(--font-mono); font-size:.78rem; cursor:pointer;
}
.pdot.answered{border-color:var(--good); color:var(--good);}
.pdot.current{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---------- results ---------- */
.result-head{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.ring{
  width:96px; height:96px; border-radius:50%; flex:none;
  background:conic-gradient(var(--amber) calc(var(--p,0)*1%), var(--line) 0);
  display:flex; align-items:center; justify-content:center;
}
.ring::before{content:""; position:absolute;}
.ring span{background:var(--surface); width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:var(--navy); font-size:1.1rem;}
.result-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}

.review{display:flex; flex-direction:column; gap:14px;}
.ritem{border:1px solid var(--line); border-left:4px solid var(--line); border-radius:10px; padding:14px 16px;}
.ritem.ok{border-left-color:var(--good);}
.ritem.ko{border-left-color:var(--bad);}
.ritem h4{margin:0 0 8px; font-size:.95rem;}
.rline{font-size:.85rem; padding:4px 0; color:var(--ink-soft);}
.rline.good{color:var(--good); font-weight:600;}
.rline.bad{color:var(--bad); font-weight:600;}
.rexpl{margin-top:8px; font-size:.85rem; color:var(--ink-soft); line-height:1.5;}

/* ---------- resources tab ---------- */
.reslist{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.checkrow{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-left:4px solid var(--rose); border-radius:10px; padding:13px 15px; background:var(--surface);}
.checkrow input{margin-top:3px; accent-color:var(--rose); width:16px; height:16px; flex:none;}
.checkrow .why{font-size:.83rem; color:var(--ink-soft); margin-top:3px;}
.guide ol{margin:0 0 14px; padding-left:1.2em;}
.guide li{margin-bottom:10px; line-height:1.55; font-size:.92rem;}
textarea{
  width:100%; min-height:80px; resize:vertical; font-family:var(--font-sans); font-size:.92rem; line-height:1.5;
  padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
}

@media (max-width:480px){
  .quiz-nav .btn{min-width:80px;}
  .bar-name{width:120px;}
}