/* ============ Tokens (UI UX Pro Max : Educational App + Quiz Game → Claymorphism + Micro-interactions) ============ */
:root{
  --paper:#F5F6FF; --grid:#E5E8FB; --surface:#FFFFFF; --surface-2:#EFF0FD; --surface-3:#E2E5FB;
  --ink:#1E1B4B; --ink-2:#47457A; --ink-3:#62608F;
  --line:#D7DAF5; --edge:#C1C5EE;
  --primary:#4F46E5; --primary-ink:#FFFFFF; --primary-soft:#E3E4FD; --primary-edge:#3730A3;
  --cta:#F97316; --cta-ink:#1E1B4B; --cta-edge:#C2410C; --cta-soft:#FFEDD5;
  --ok:#16A34A; --ok-ink:#15803D; --ok-soft:#DCFCE7;
  --bad:#DC2626; --bad-ink:#B91C1C; --bad-soft:#FEE2E2;
  --gold:#F59E0B; --gold-ink:#92400E; --gold-soft:#FEF3C7;
  --sky:#DCE6FF; --sky-2:#F0F4FF; --hill:#C4E6CC; --ground:#93CFA0; --ground-2:#7BBF8A; --water:#7DB7F0; --water-2:#5B9BE0;
  --road:#3F3D63; --road-line:#F5F6FF; --bridge:#9EA3D8; --sun:#FCD34D;
  --w-adv:#15803D; --w-space:#4338CA; --w-build:#B45309; --w-shop:#0F766E; --w-lab:#A21CAF; --w-race:#C2410C;
  --w-market:#1D4ED8; --w-climate:#0E7490; --w-signal:#6D28D9; --w-py:#047857; --w-sql:#9A3412;
  --code-bg:#16153A; --code-line:#201F4A; --code-ink:#E9EAFF; --code-gut:#7678B0; --code-kw:#C9A8FF; --code-str:#A7F0BA; --code-num:#FFC583; --code-com:#9093C8; --code-fn:#86D8FF; --code-err:#FF9A9A;
  --f-code:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --shadow-clay:0 3px 0 var(--edge), 0 14px 28px -16px rgba(30,27,75,.35);
  --r-sm:12px; --r-md:16px; --r-lg:24px;
  --f-display:"Fredoka","Nunito",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --t-press:120ms; --t-feedback:200ms; --t-pop:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121130; --grid:#1A1940; --surface:#1C1B42; --surface-2:#25244F; --surface-3:#302E5E;
    --ink:#EEF0FF; --ink-2:#C2C4EA; --ink-3:#9C9ECB;
    --line:#34326B; --edge:#0A0921;
    --primary:#8E92FB; --primary-ink:#12112F; --primary-soft:#2D2B66; --primary-edge:#5A5EE0;
    --cta:#FB923C; --cta-ink:#1A1033; --cta-edge:#B4470F; --cta-soft:#3B2618;
    --ok:#4ADE80; --ok-ink:#86EFAC; --ok-soft:#133323;
    --bad:#F87171; --bad-ink:#FCA5A5; --bad-soft:#3D1A24;
    --gold:#FBBF24; --gold-ink:#FCD34D; --gold-soft:#3A2E12;
    --sky:#1D2454; --sky-2:#283068; --hill:#22464C; --ground:#2B5A45; --ground-2:#234B39; --water:#2A4E8C; --water-2:#203F75;
    --road:#0D0C25; --road-line:#C9CBEF; --bridge:#5C609E; --sun:#E8E9FF;
    --shadow-clay:0 3px 0 var(--edge), 0 16px 30px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121130; --grid:#1A1940; --surface:#1C1B42; --surface-2:#25244F; --surface-3:#302E5E;
  --ink:#EEF0FF; --ink-2:#C2C4EA; --ink-3:#9C9ECB;
  --line:#34326B; --edge:#0A0921;
  --primary:#8E92FB; --primary-ink:#12112F; --primary-soft:#2D2B66; --primary-edge:#5A5EE0;
  --cta:#FB923C; --cta-ink:#1A1033; --cta-edge:#B4470F; --cta-soft:#3B2618;
  --ok:#4ADE80; --ok-ink:#86EFAC; --ok-soft:#133323;
  --bad:#F87171; --bad-ink:#FCA5A5; --bad-soft:#3D1A24;
  --gold:#FBBF24; --gold-ink:#FCD34D; --gold-soft:#3A2E12;
  --sky:#1D2454; --sky-2:#283068; --hill:#22464C; --ground:#2B5A45; --ground-2:#234B39; --water:#2A4E8C; --water-2:#203F75;
  --road:#0D0C25; --road-line:#C9CBEF; --bridge:#5C609E; --sun:#E8E9FF;
  --shadow-clay:0 3px 0 var(--edge), 0 16px 30px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:clamp(28px,3.2vw,38px)}
h2{font-size:clamp(21px,2vw,24px)}
h3{font-size:18px}
h4{font-size:16px}
p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:10px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.icon{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.icon.sm{width:16px; height:16px}
.icon.lg{width:24px; height:24px}
.num{font-family:var(--f-display); font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.small{font-size:14px}

/* ============ Shell ============ */
.app{display:grid; grid-template-columns:252px minmax(0,1fr); min-height:100vh}
.rail{
  position:sticky; top:env(safe-area-inset-top,0px); height:100vh; z-index:40;
  display:flex; flex-direction:column; gap:22px; padding:22px 16px;
  background:var(--surface); border-right:2px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:22px; padding-inline:6px}
.brand-mark{width:40px; height:40px; display:block; flex:none}
.brand-mark svg{display:block; width:100%; height:100%}
.nav{display:flex; flex-direction:column; gap:6px}
.nav-btn{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px;
  border:2px solid transparent; border-radius:14px; background:none; cursor:pointer;
  color:var(--ink-2); font-weight:800; font-size:15px; text-align:left;
  transition:background var(--t-feedback) var(--ease-out), color var(--t-feedback);
}
.nav-btn:hover{background:var(--surface-2); color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--primary-soft); border-color:var(--primary); color:var(--ink)}
.nav-btn[aria-current="page"] .icon{color:var(--primary)}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.mini-player{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:var(--r-md); background:var(--surface-2); border:2px solid var(--line)}
.mini-player .row{display:flex; align-items:center; gap:10px}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; font-family:var(--f-display); font-weight:700; font-size:15px; background:var(--cta); color:var(--cta-ink); border:2px solid var(--cta-edge)}
.theme-btn{display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; font-size:14px; color:var(--ink-2)}
.theme-btn:hover{color:var(--ink); border-color:var(--edge)}
.mobile-top{display:none}
.language-picker{display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13px; font-weight:800; white-space:nowrap}
.language-picker select{min-height:44px; max-width:120px; padding:8px 28px 8px 10px; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.rail-foot .language-picker{flex-wrap:wrap}
.language-picker.compact select{max-width:72px; padding-inline:8px}
.language-picker select:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
@media (max-width:380px){.lp-top .language-picker select{max-width:88px; padding-inline:5px; font-size:12px}}
main{padding-block:28px 72px; padding-inline:clamp(16px,3.5vw,44px); min-width:0}
.view{max-width:1180px; margin-inline:auto; display:flex; flex-direction:column; gap:28px}
.view[hidden]{display:none!important}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.page-head > div{display:flex; flex-direction:column; gap:6px}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed; top:auto; bottom:0; left:0; right:0; height:auto; flex-direction:row; gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); border-right:0; border-top:2px solid var(--line);
  }
  .rail .brand,.rail .rail-foot{display:none}
  .nav{flex-direction:row; width:100%; gap:2px}
  .nav-btn{flex:1; flex-direction:column; justify-content:center; gap:2px; min-height:58px; padding:4px 2px; font-size:12px; text-align:center}
  .mobile-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px}
  main{padding-block:16px 112px}
}

/* ============ Components ============ */
.clay{background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-clay)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px;
  border-radius:14px; border:2px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--f-display); font-weight:600; font-size:16px; cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 0 var(--line);
  transition:transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out), background var(--t-feedback);
}
.btn:hover{background:var(--surface-2)}
.btn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--line)}
.btn-cta{background:var(--cta); color:var(--cta-ink); border-color:var(--cta-edge); box-shadow:0 4px 0 var(--cta-edge)}
.btn-cta:hover{background:var(--cta); filter:brightness(1.06)}
.btn-cta:active:not(:disabled){box-shadow:0 1px 0 var(--cta-edge)}
.btn-primary{background:var(--primary); color:var(--primary-ink); border-color:var(--primary-edge); box-shadow:0 4px 0 var(--primary-edge)}
.btn-primary:hover{background:var(--primary); filter:brightness(1.08)}
.btn-primary:active:not(:disabled){box-shadow:0 1px 0 var(--primary-edge)}
.btn-ok{background:var(--ok); color:#0B2614; border-color:var(--ok-ink); box-shadow:0 4px 0 var(--ok-ink)}
.btn-ok:hover{background:var(--ok); filter:brightness(1.06)}
.btn-lg{min-height:56px; font-size:18px; width:100%}
.btn-sm{min-height:44px; padding:0 14px; font-size:15px; box-shadow:0 3px 0 var(--line)}
.btn-text{background:none; border:0; box-shadow:none; min-height:44px; padding:0 8px; color:var(--primary); font-family:var(--f-body); font-weight:800; font-size:14px}
.btn-text:hover{background:none; text-decoration:underline}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none}
.icon-btn{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-2); box-shadow:0 3px 0 var(--line); flex:none}
.icon-btn:hover{color:var(--ink)}
.icon-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--line)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:800; background:var(--surface-2); color:var(--ink-2); border:1.5px solid var(--line); white-space:nowrap}
.chip.gold{background:var(--gold-soft); color:var(--gold-ink); border-color:var(--gold)}
.chip.ok{background:var(--ok-soft); color:var(--ok-ink); border-color:var(--ok)}
.chip.bad{background:var(--bad-soft); color:var(--bad-ink); border-color:var(--bad)}
.chip.prim{background:var(--primary-soft); color:var(--ink); border-color:var(--primary)}
.chip.solid{background:var(--surface); box-shadow:0 2px 0 var(--line)}
.bar{display:block; height:12px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.bar > span{display:block; height:100%; border-radius:99px; background:var(--primary); box-shadow:inset 0 -3px 0 rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.3); transition:width 600ms var(--ease-out)}
.bar.gold > span{background:var(--gold)}
.bar.ok > span{background:var(--ok)}
.seg{display:inline-flex; padding:4px; gap:4px; border-radius:14px; background:var(--surface); border:2px solid var(--line); flex-wrap:wrap}
.seg button{min-height:44px; padding:0 14px; border:0; border-radius:10px; background:none; cursor:pointer; font-weight:800; font-size:14px; color:var(--ink-2)}
.seg button:hover{color:var(--ink); background:var(--surface-2)}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"],.seg button[aria-selected="true"]{background:var(--ink); color:var(--paper)}

/* Math rendering */
.m{font-family:var(--f-math); font-size:1.12em; white-space:nowrap; font-weight:500}
.m i{font-style:italic}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 .12em; font-size:.9em; line-height:1.15}
.frac > span{padding:0 .2em}
.frac > span:first-child{border-bottom:1.5px solid currentColor}
.m sup{font-size:.7em; vertical-align:.7em; line-height:0}
.sqrt{display:inline-flex; align-items:stretch}
.sqrt > span{border-top:1.5px solid currentColor; padding:0 .12em}
mjx-container{font-size:106% !important}
mjx-container[display="true"]{display:block; overflow-x:auto; overflow-y:hidden; max-width:100%; padding-block:4px; margin:.4em 0 !important}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:300;
  transform:translate(-50%,16px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
  padding:12px 18px; border-radius:14px; background:var(--ink); color:var(--paper); font-weight:700; font-size:15px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.45); transition:opacity var(--t-feedback), transform var(--t-pop) var(--ease-bounce);
}
.toast.show{opacity:1; transform:translate(-50%,0)}
@media (max-width:900px){.toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}


/* ============ Accueil ============ */
.home-hero{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr); gap:20px}
.resume{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); overflow:hidden}
.resume .thumb{position:relative; background:var(--sky); min-height:230px; border-right:2px solid var(--line)}
.resume .thumb svg{position:absolute; inset:0; width:100%; height:100%}
.resume .thumb .chip{position:absolute; top:12px; left:12px}
.resume .body{padding:24px; display:flex; flex-direction:column; gap:12px}
.resume .body .chips{display:flex; gap:6px; flex-wrap:wrap}
.resume .body .actions{margin-top:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.player{padding:22px; display:flex; flex-direction:column; gap:16px}
.player .who{display:flex; align-items:center; gap:14px}
.lvl-hex{width:58px; height:64px; flex:none; position:relative; display:grid; place-items:center}
.lvl-hex svg{position:absolute; inset:0; width:100%; height:100%}
.lvl-hex b{position:relative; font-family:var(--f-display); font-size:24px; font-weight:700; color:#3B2300}
.xp-line{display:flex; justify-content:space-between; font-size:14px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.stats4{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); display:flex; flex-direction:column; gap:2px}
.stat .num{font-size:24px; font-weight:600; line-height:1.1; display:flex; align-items:center; gap:6px}
.stat .lbl{font-size:13px; font-weight:700; color:var(--ink-2)}
.worlds{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.world{
  display:flex; flex-direction:column; padding:0; overflow:hidden; text-align:left; cursor:pointer;
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-clay);
  transition:transform var(--t-pop) var(--ease-bounce), box-shadow var(--t-feedback);
}
.world:hover{transform:translateY(-4px)}
.world:active{transform:translateY(1px)}
.world .art{display:block; position:relative; height:132px; background:var(--wc); border-bottom:2px solid var(--line); overflow:hidden}
.world .art svg{position:absolute; inset:0; width:100%; height:100%}
.world .art .chip{position:absolute; top:10px; right:10px}
.world .wbody{padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; width:100%}
.world .wtitle{display:flex; align-items:center; justify-content:space-between; gap:8px}
.world .topics{display:flex; gap:6px; flex-wrap:wrap}
.world .topics .chip{font-size:12px; padding:3px 9px}
.world .wfoot{margin-top:auto; display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2)}
.world.locked .art{filter:saturate(.15) brightness(.9)}
.world.locked .wtitle h3{color:var(--ink-2)}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.task{padding:20px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px}
.task .ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; border:2px solid}
.task .ico.gold{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink)}
.task .ico.prim{background:var(--primary-soft); border-color:var(--primary); color:var(--primary)}
.task .t{display:flex; flex-direction:column; gap:6px}
@media (max-width:1100px){.home-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){
  .resume{grid-template-columns:minmax(0,1fr)}
  .resume .thumb{border-right:0; border-bottom:2px solid var(--line); min-height:180px}
  .task{grid-template-columns:auto minmax(0,1fr)}
  .task .btn{grid-column:1 / -1}
}

/* ============ Mission ============ */
.mission-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.mission-top .title{display:flex; flex-direction:column; gap:2px; min-width:0}
.scene-steps{display:flex; gap:6px; flex:1; min-width:180px; max-width:420px; margin-inline:auto}
.scene-steps span{flex:1; height:12px; border-radius:99px; background:var(--surface-3); border:2px solid var(--line)}
.scene-steps .done{background:var(--ok); border-color:var(--ok-ink)}
.scene-steps .current{background:var(--cta); border-color:var(--cta-edge)}
.mission-meta{display:flex; gap:8px; flex-wrap:wrap}
.mission-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); gap:20px; align-items:start}
.mission-left{display:flex; flex-direction:column; gap:20px; min-width:0}
.stage{position:relative; overflow:hidden; aspect-ratio:800/320; width:100%; background:var(--sky); padding:0}
.stage svg{display:block; width:100%; height:100%}
.hud{position:absolute; top:12px; left:12px; display:flex; gap:8px; flex-wrap:wrap}
.hud .chip{background:var(--surface); box-shadow:0 2px 0 var(--line); font-variant-numeric:tabular-nums}
.stage-flag{position:absolute; top:12px; right:12px}
.stage-flag .chip{background:var(--cta); color:var(--cta-ink); border-color:var(--cta-edge); box-shadow:0 2px 0 var(--cta-edge)}
.stage-note{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); max-width:calc(100% - 24px)}
.stage-note .chip{white-space:normal; text-align:center; background:var(--surface); box-shadow:0 2px 0 var(--line)}
.mission-card{padding:22px 24px; display:flex; flex-direction:column; gap:14px}
.story{color:var(--ink-2); max-width:64ch}
.givens{display:flex; gap:10px; flex-wrap:wrap}
.given{font-family:var(--f-math); font-size:20px; padding:6px 14px; border-radius:12px; background:var(--surface-2); border:2px dashed var(--edge); color:var(--ink)}
.given.ask{border-style:solid; border-color:var(--cta); background:var(--cta-soft)}
.question{font-family:var(--f-display); font-weight:600; font-size:20px; line-height:1.35; max-width:52ch}
.solve{padding:22px; display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(16px + env(safe-area-inset-top,0px))}
.solve-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lbl{font-weight:800; font-size:14px; color:var(--ink)}
.answer-row{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.field{flex:1 1 170px; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:6px 14px; border-radius:14px; border:2px solid var(--edge); background:var(--surface); transition:border-color var(--t-feedback), box-shadow var(--t-feedback)}
.field:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.field input{border:0; outline:0; background:transparent; color:var(--ink); width:100%; min-height:40px; font-family:var(--f-display); font-size:24px; font-weight:600; padding:0}
.field input::placeholder{color:var(--ink-3); font-weight:500}
.field .pv{min-height:26px; color:var(--ink-2); font-size:17px; overflow-x:auto}
.field.is-error{border-color:var(--bad)}
.field.is-ok{border-color:var(--ok); background:var(--ok-soft)}
.units{align-self:stretch}
.units button{min-height:100%; font-family:var(--f-math); font-size:16px}
.msg{font-size:14px; color:var(--ink-2); display:flex; gap:6px; align-items:flex-start}
.msg.err{color:var(--bad-ink); font-weight:800}
.keypad{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px}
.key{min-height:44px; border-radius:10px; border:2px solid var(--line); background:var(--surface); box-shadow:0 3px 0 var(--line); cursor:pointer; color:var(--ink); font-family:var(--f-display); font-size:18px; font-weight:600; transition:transform var(--t-press) var(--ease-out), box-shadow var(--t-press)}
.key.op{background:var(--surface-2); font-family:var(--f-math); font-size:19px}
.key.wide{font-family:var(--f-body); font-size:13px; font-weight:800}
.key:hover{border-color:var(--edge)}
.key:active{transform:translateY(2px); box-shadow:0 1px 0 var(--line)}
.help-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.help-row .btn{white-space:normal; line-height:1.15; padding:6px 12px}
.panel{border-radius:var(--r-md); padding:16px; border:2px solid; display:flex; flex-direction:column; gap:10px; animation:pop var(--t-pop) var(--ease-bounce)}
.panel h4{display:flex; align-items:center; gap:8px}
.panel.ok{background:var(--ok-soft); border-color:var(--ok)}
.panel.ok h4{color:var(--ok-ink)}
.panel.bad{background:var(--bad-soft); border-color:var(--bad)}
.panel.bad h4{color:var(--bad-ink)}
.panel.hint{background:var(--gold-soft); border-color:var(--gold)}
.panel.hint h4{color:var(--gold-ink)}
.panel.explain{background:var(--primary-soft); border-color:var(--primary)}
.panel .acts{display:flex; gap:8px; flex-wrap:wrap}
.xsteps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; counter-reset:xs}
.xsteps li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; counter-increment:xs}
.xsteps li::before{content:counter(xs); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:var(--primary-ink); font-family:var(--f-display); font-weight:600; font-size:14px}
.reward{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.xp-pop{font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--gold-ink); animation:float-up 900ms var(--ease-out)}
.plot{border-top:2px dashed var(--line); padding-top:12px}
.plot summary{cursor:pointer; font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; min-height:44px; list-style:none}
.plot summary::-webkit-details-marker{display:none}
.plot summary .chev{margin-left:auto; transition:transform var(--t-feedback)}
.plot[open] summary .chev{transform:rotate(180deg)}
.plot-row{display:flex; align-items:center; gap:8px; margin-block:8px}
.plot-row label{font-family:var(--f-math); font-size:18px; white-space:nowrap}
.plot-row input{flex:1; min-width:0; min-height:44px; border-radius:12px; border:2px solid var(--edge); background:var(--surface); color:var(--ink); padding:0 12px; font-family:var(--f-display); font-size:17px}
.plot-row input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.plot canvas{width:100%; height:200px; display:block; border-radius:12px; background:var(--surface-2)}
.plot .readout{font-size:13px; font-weight:700; color:var(--ink-2); min-height:20px; margin-top:6px; font-variant-numeric:tabular-nums}
@media (max-width:1050px){.mission-grid{grid-template-columns:minmax(0,1fr)} .solve{position:static}}

/* Résumé de mission */
.overlay{position:fixed; inset:0; z-index:200; background:rgba(14,13,40,.6); display:grid; place-items:center; padding:16px; overflow:auto}
.modal{width:100%; max-width:540px; padding:28px; display:flex; flex-direction:column; gap:18px; animation:pop var(--t-pop) var(--ease-bounce)}
.modal .medal{width:88px; height:88px; margin-inline:auto}
.modal h2{text-align:center}
.sum-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.sum-grid .stat{align-items:center; text-align:center}
.gains{display:flex; flex-direction:column; gap:10px}
.gain{display:grid; grid-template-columns:150px minmax(0,1fr) 54px; align-items:center; gap:10px; font-size:14px; font-weight:700}
.gain .d{color:var(--ok-ink); text-align:right; font-variant-numeric:tabular-nums}
.modal .acts{display:flex; gap:10px; flex-wrap:wrap}
.modal .acts .btn{flex:1}
@media (max-width:480px){.sum-grid{grid-template-columns:1fr 1fr} .gain{grid-template-columns:1fr 54px} .gain .bar{grid-column:1 / -1; grid-row:2}}

@keyframes pop{from{transform:scale(.96); opacity:0} to{transform:none; opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}}
@keyframes float-up{from{transform:translateY(10px); opacity:0} to{transform:none; opacity:1}}
@keyframes spark{from{transform:translate(0,0) scale(1); opacity:1} to{transform:translate(var(--dx),var(--dy)) scale(.4); opacity:0}}
.shake{animation:shake 380ms ease-out}
.spark{position:fixed; width:10px; height:10px; border-radius:3px; pointer-events:none; z-index:250; animation:spark 800ms var(--ease-out) forwards}

/* ============ Progression ============ */
.prog-top{display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:20px}
.profile{padding:22px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.ring{width:150px; height:150px; position:relative}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .in b{font-family:var(--f-display); font-size:40px; font-weight:600; line-height:1}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px}
.tile{padding:18px; display:flex; flex-direction:column; gap:6px}
.tile .num{font-size:32px; font-weight:600; line-height:1.05}
.tile .delta{font-size:13px; font-weight:800; color:var(--ok-ink)}
.tile .delta.flat{color:var(--ink-3)}
.prog-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; align-items:start}
.card{padding:22px; display:flex; flex-direction:column; gap:16px}
.mastery{display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none}
.mrow{display:grid; grid-template-columns:150px minmax(0,1fr) 44px 128px; gap:12px; align-items:center}
.mrow .name{font-weight:800; font-size:15px}
.mrow .pct{font-family:var(--f-display); font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.mrow .chip{justify-self:start}
.chart-wrap{position:relative}
.chart-wrap svg{width:100%; height:auto; display:block; overflow:visible}
.chart-tip{position:absolute; pointer-events:none; transform:translate(-50%,-100%); padding:6px 10px; border-radius:10px; background:var(--ink); color:var(--paper); font-size:13px; font-weight:800; white-space:nowrap; opacity:0; transition:opacity 120ms}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px}
.badge{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 6px; border-radius:var(--r-md); background:var(--surface-2); font-size:12.5px; font-weight:800; color:var(--ink-2)}
.badge svg{width:56px; height:56px}
.badge.off{opacity:.55}
.badge.new{background:var(--gold-soft); outline:2px solid var(--gold)}
.league{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.league li{display:grid; grid-template-columns:28px 36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:12px}
.league li.me{background:var(--primary-soft); outline:2px solid var(--primary)}
.league .rk{font-family:var(--f-display); font-weight:600; text-align:center; color:var(--ink-3)}
.league .avatar{width:34px; height:34px; font-size:13px; background:var(--surface-3); color:var(--ink); border-color:var(--line)}
.league .up .rk{color:var(--ok-ink)}
.switch{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink-2); cursor:pointer; min-height:44px}
.switch input{appearance:none; width:44px; height:26px; border-radius:99px; background:var(--surface-3); border:2px solid var(--edge); position:relative; cursor:pointer; transition:background var(--t-feedback); flex:none; margin:0}
.switch input::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform var(--t-feedback) var(--ease-bounce)}
.switch input:checked{background:var(--primary); border-color:var(--primary-edge)}
.switch input:checked::after{transform:translateX(18px)}
@media (max-width:1000px){.prog-top,.prog-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.mrow{grid-template-columns:minmax(0,1fr) 44px} .mrow .bar{grid-column:1 / -1; grid-row:2} .mrow .chip{grid-column:1 / -1}}

/* ============ Studio ============ */
.tabs{display:flex; gap:4px; border-bottom:2px solid var(--line); overflow-x:auto}
.tabs button{min-height:46px; padding:0 16px; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; font-weight:800; font-size:15px; color:var(--ink-2); display:flex; align-items:center; gap:8px; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--primary)}
.studio-meta{display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); gap:14px; padding:18px 20px}
.studio-grid{display:grid; grid-template-columns:240px minmax(0,1fr) 320px; gap:18px; align-items:start}
.scene-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.scene-item{display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 8px 8px 10px; border-radius:12px; border:2px solid transparent; cursor:pointer}
.scene-item:hover{background:var(--surface-2)}
.scene-item.active{background:var(--primary-soft); border-color:var(--primary)}
.scene-item .sname{display:flex; flex-direction:column; min-width:0}
.scene-item .sname b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scene-item .sname span{font-size:12px; color:var(--ink-3); font-weight:700}
.scene-item .grip{color:var(--ink-3)}
.mv{display:flex; gap:2px}
.mv button{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:0; background:none; cursor:pointer; color:var(--ink-3)}
.mv button:hover{background:var(--surface); color:var(--ink)}
.mv button:disabled{opacity:.3; cursor:default}
.form{display:flex; flex-direction:column; gap:18px}
.fgroup{display:flex; flex-direction:column; gap:12px; padding-bottom:18px; border-bottom:2px dashed var(--line)}
.fgroup:last-child{border-bottom:0; padding-bottom:0}
.fgroup > h3{display:flex; align-items:center; gap:8px}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
.f label,.f .flabel{font-weight:800; font-size:14px}
.f .help{font-size:13px; color:var(--ink-3)}
.inp{font-family:var(--f-body); font-size:15px; font-weight:600; color:var(--ink); background:var(--surface); border:2px solid var(--edge); border-radius:12px; padding:9px 12px; min-height:44px; width:100%}
textarea.inp{resize:vertical; min-height:76px; line-height:1.45}
.inp:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.inp.math{font-family:var(--f-math); font-size:17px}
.f2{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.drows{display:flex; flex-direction:column; gap:8px}
.drow{display:grid; grid-template-columns:70px minmax(0,1fr) 80px 44px; gap:8px; align-items:center}
.erow{display:grid; grid-template-columns:110px minmax(0,1fr) 44px; gap:8px; align-items:start}
.lrow{display:grid; grid-template-columns:28px minmax(0,1fr) 44px; gap:8px; align-items:start}
.lrow .n{width:28px; height:28px; margin-top:8px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:13px; background:var(--gold-soft); color:var(--gold-ink); border:2px solid var(--gold)}
.lrow.ex .n{background:var(--primary-soft); color:var(--ink); border-color:var(--primary)}
.del{width:44px; height:44px; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-3); display:grid; place-items:center}
.del:hover{color:var(--bad-ink); border-color:var(--bad)}
.checks{display:flex; gap:8px; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:12px; border:2px solid var(--line); background:var(--surface); font-weight:700; font-size:14px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--primary)}
.stars{display:inline-flex; gap:4px}
.stars button{width:40px; height:44px; border:0; background:none; cursor:pointer; color:var(--surface-3); display:grid; place-items:center}
.stars button.on{color:var(--gold)}
.stars button svg{width:28px; height:28px; fill:currentColor; stroke:var(--gold-ink); stroke-width:1.2}
.preview-col{position:sticky; top:16px; display:flex; flex-direction:column; gap:12px}
.pv-card{padding:16px; display:flex; flex-direction:column; gap:10px; font-size:14px}
.pv-card .question{font-size:16px}
.pv-card .given{font-size:16px; padding:4px 10px}
.save-state{font-size:13px; font-weight:700; color:var(--ink-3); display:flex; align-items:center; gap:6px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:720px}
.tbl th{text-align:left; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:10px 12px; border-bottom:2px solid var(--line)}
.tbl td{padding:12px; border-bottom:1.5px solid var(--line); vertical-align:middle}
.tbl td.n{font-variant-numeric:tabular-nums; font-weight:700}
.tbl .rate{display:grid; grid-template-columns:42px 90px; gap:8px; align-items:center; font-weight:800; font-variant-numeric:tabular-nums}
.tbl .bar{height:8px}
.insight{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r-md); background:var(--gold-soft); border:2px solid var(--gold)}
.insight .icon{color:var(--gold-ink)}
@media (max-width:1250px){.studio-grid{grid-template-columns:230px minmax(0,1fr)} .preview-col{grid-column:1 / -1; position:static}}
@media (max-width:820px){.studio-grid,.studio-meta{grid-template-columns:minmax(0,1fr)} .insight{grid-template-columns:auto minmax(0,1fr)} .insight .btn{grid-column:1 / -1}}
@media (max-width:520px){.drow{grid-template-columns:56px minmax(0,1fr) 64px 44px} .erow{grid-template-columns:minmax(0,1fr) 44px} .erow .inp:first-child{grid-column:1 / -1}}

/* ============ Guide ============ */
.guide-intro{padding:24px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px}
.reason{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.reason li{display:grid; grid-template-columns:130px minmax(0,1fr); gap:12px; font-size:14px; padding-bottom:10px; border-bottom:1.5px solid var(--line)}
.reason li:last-child{border-bottom:0}
.reason b{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.sw{border-radius:var(--r-md); overflow:hidden; border:2px solid var(--line); background:var(--surface)}
.sw .c{height:72px; border-bottom:2px solid var(--line)}
.sw .t{padding:10px 12px; display:flex; flex-direction:column; gap:2px; font-size:13px}
.sw .t b{font-size:14px}
.sw .t code{font-size:12.5px; color:var(--ink-2)}
.type-spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.spec{padding:20px; display:flex; flex-direction:column; gap:8px}
.spec .big{font-size:44px; line-height:1.05}
.comp-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px}
.rule{display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:2px solid var(--line)}
.rule .ri{width:32px; height:32px; border-radius:10px; display:grid; place-items:center}
.rule .ri.ok{background:var(--ok-soft); color:var(--ok-ink)}
.rule .ri.no{background:var(--bad-soft); color:var(--bad-ink)}
.rule b{display:block; font-size:15px}
.rule span{font-size:14px; color:var(--ink-2)}
.motion-tbl{width:100%; border-collapse:collapse; font-size:14px}
.motion-tbl td{padding:10px 12px; border-bottom:1.5px solid var(--line)}
.motion-tbl td:first-child{font-weight:800}
.motion-tbl code{font-size:13px}
@media (max-width:860px){.guide-intro{grid-template-columns:minmax(0,1fr)} .reason li{grid-template-columns:minmax(0,1fr); gap:2px}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}


/* ============ Cours : bibliothèque ============ */
.lib-tools{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.search{display:flex; align-items:center; gap:8px; flex:1 1 260px; min-height:48px; padding:0 14px; border-radius:14px; border:2px solid var(--edge); background:var(--surface)}
.search:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.search input{border:0; outline:0; background:transparent; color:var(--ink); font:600 16px var(--f-body); width:100%; min-height:44px}
.domains{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; max-width:100%}
.domains button{flex:none; min-height:44px; padding:0 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; font-size:14px; color:var(--ink-2)}
.domains button:hover{color:var(--ink); border-color:var(--edge)}
.domains button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tree-card{padding:18px 18px 12px; display:flex; flex-direction:column; gap:12px}
.tree-wrap{overflow-x:auto; padding-bottom:6px}
.tree-wrap svg{display:block; min-width:100%}
.tree-node{cursor:pointer}
.tree-node:focus{outline:none}
.tree-node:focus-visible rect.box{stroke:var(--primary); stroke-width:3.5}
.tree-node:hover rect.box{stroke:var(--primary)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; font-weight:700; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:14px; height:14px; border-radius:5px; border:2px solid; display:inline-block}
.course-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px}
.ccard{padding:20px; display:flex; flex-direction:column; gap:10px}
.ccard .top{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.ccard h3{font-size:19px}
.ccard h3 button{all:unset; cursor:pointer}
.ccard h3 button:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.ccard h3 button:focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:6px}
.ccard .chips{display:flex; gap:6px; flex-wrap:wrap}
.ccard .pre{font-size:13px; color:var(--ink-2)}
.ccard .acts{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; padding-top:4px}
.ccard .acts .btn{flex:1}
.chip.cta{background:var(--cta-soft); color:var(--ink); border-color:var(--cta)}
.note-line{display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); border:2px dashed var(--edge); font-size:14px; color:var(--ink-2)}

/* ============ Cours : lecteur ============ */
.reader{display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; align-items:start}
.toc{position:sticky; top:calc(16px + env(safe-area-inset-top,0px)); padding:16px; display:flex; flex-direction:column; gap:10px}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.toc li button{display:flex; gap:8px; align-items:flex-start; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; color:var(--ink-2); font-weight:700; font-size:14px; line-height:1.3}
.toc li button:hover{background:var(--surface-2); color:var(--ink)}
.toc li button b{font-family:var(--f-display); color:var(--ink-3); font-weight:600; min-width:16px}
.crumbs{display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--ink-3)}
.crumbs button{all:unset; cursor:pointer; color:var(--primary); font-weight:800}
.crumbs button:hover{text-decoration:underline}
.crumbs button:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px}
.course-head{padding:24px 26px; display:flex; flex-direction:column; gap:12px}
.course-head .chips{display:flex; gap:6px; flex-wrap:wrap}
.course-body{display:flex; flex-direction:column; gap:16px; font-size:17px; line-height:1.62; padding:26px; min-width:0}
.course-body > *{max-width:76ch}
.course-body h2{font-size:24px; margin-top:12px; padding-top:6px; scroll-margin-top:20px}
.course-body p + p{margin-top:.7em}
.course-body ul{margin:.3em 0; padding-left:1.3em}
.course-body .tx{min-width:0}
.blk{border-radius:16px; min-width:0}
.blk.box{border:2px solid var(--bc); background:var(--bg); padding:14px 18px}
.blk .lab{font-family:var(--f-display); font-weight:600; font-size:17px; margin-right:.35em}
.blk .lab em{font-family:var(--f-body); font-style:italic; font-weight:600; color:var(--ink-2)}
.t-definition{--bc:var(--primary); --bg:var(--primary-soft)}
.t-theoreme,.t-proposition,.t-lemme,.t-corollaire{--bc:var(--cta); --bg:var(--cta-soft)}
.t-exemple{--bc:var(--ok); --bg:var(--ok-soft)}
.t-remarque{--bc:var(--line); --bg:var(--surface-2)}
.t-exercice{--bc:var(--gold); --bg:var(--gold-soft)}
.t-quiz{--bc:var(--primary); --bg:var(--surface)}
.proof{border:2px dashed var(--edge); border-radius:14px; padding:0 16px; background:var(--surface)}
.proof > summary,.sub > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:600; list-style:none}
.proof > summary::-webkit-details-marker,.sub > summary::-webkit-details-marker{display:none}
.proof > summary .chev,.sub > summary .chev{transition:transform var(--t-feedback)}
.proof[open] > summary .chev,.sub[open] > summary .chev{transform:rotate(180deg)}
.proof .pbody{padding-bottom:14px}
.qed{text-align:right; font-size:18px; color:var(--ink-3)}
.sub{margin-top:10px; border-top:1.5px dashed var(--gold); padding-top:2px}
.quiz-opts{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.qopt{display:flex; gap:10px; align-items:flex-start; text-align:left; min-height:48px; padding:10px 14px; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font:inherit; color:var(--ink); box-shadow:0 3px 0 var(--line)}
.qopt:hover{border-color:var(--edge)}
.qopt .k{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:13px; background:var(--surface-2); color:var(--ink-2)}
.qopt.ok{border-color:var(--ok); background:var(--ok-soft)}
.qopt.ok .k{background:var(--ok); color:#0B2614}
.qopt.bad{border-color:var(--bad); background:var(--bad-soft)}
.qopt.bad .k{background:var(--bad); color:#fff}
.qopt:disabled{cursor:default}
.qfb{margin-top:10px}
.mission-link{padding:18px 20px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center}
.mission-link .ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--cta-soft); border:2px solid var(--cta); color:var(--cta-edge)}
.course-end{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.course-exercises{display:flex; flex-direction:column; gap:18px; scroll-margin-top:20px}
.course-exercises-head{padding:22px 26px; display:flex; flex-direction:column; gap:10px}
.course-exercise-list{display:flex; flex-direction:column; gap:18px}
.course-exercises .exercise-work{display:flex; flex-direction:column; gap:10px; border-top:2px dashed var(--line); padding-top:14px; margin-top:14px}
.course-exercises .exercise-work .acts{display:flex; gap:8px; flex-wrap:wrap}
.course-exercises .exercise-state{margin-left:auto}
.course-exercises .exercise-feedback:empty{display:none}
.course-exercises .course-exercise-generator{display:flex; flex-direction:column; gap:12px}
@media (max-width:980px){.reader{grid-template-columns:minmax(0,1fr)} .toc{position:static}}
@media (max-width:620px){.course-body{padding:18px 16px; font-size:16px} .mission-link{grid-template-columns:auto minmax(0,1fr)} .mission-link .btn{grid-column:1 / -1}}

/* ============ Figures interactives ============ */
.widget{border:2px solid var(--line); border-radius:16px; background:var(--surface); padding:14px; display:flex; flex-direction:column; gap:10px; max-width:100%}
.widget .wh{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
.widget .wh b{font-family:var(--f-display); font-weight:600; font-size:16px; display:flex; gap:8px; align-items:center}
.widget canvas{width:100%; height:260px; display:block; border-radius:12px; background:var(--surface-2); touch-action:none}
.wctl{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:700; color:var(--ink-2)}
.wctl label{display:flex; align-items:center; gap:8px; min-height:44px}
.wctl input[type="range"]{accent-color:var(--primary); width:130px}
.wctl select{min-height:44px; border-radius:12px; border:2px solid var(--edge); background:var(--surface); color:var(--ink); font:700 14px var(--f-body); padding:0 10px; max-width:100%}
.wctl output{font-family:var(--f-display); font-variant-numeric:tabular-nums; color:var(--ink); min-width:3ch}
.wread{font-size:14px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; min-height:20px}
.wread b{color:var(--ink)}
.wread .warn{color:var(--bad-ink)}

/* ============ Studio : éditeur de cours ============ */
.ced{display:grid; grid-template-columns:220px minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
.clist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.clist button{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; flex-direction:column; padding:8px 10px; border-radius:12px; border:2px solid transparent}
.clist button:hover{background:var(--surface-2)}
.clist button:focus-visible{outline:3px solid var(--primary); outline-offset:2px}
.clist button[aria-current="true"]{background:var(--primary-soft); border-color:var(--primary)}
.clist b{font-size:14px; line-height:1.3}
.clist span{font-size:12px; font-weight:700; color:var(--ink-3)}
.ced-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tex-bar{display:flex; gap:6px; flex-wrap:wrap; padding:10px; border-radius:14px; background:var(--surface-2); border:2px solid var(--line); position:sticky; top:calc(8px + env(safe-area-inset-top,0px)); z-index:5}
.tex-bar .tl{font-size:12px; font-weight:800; color:var(--ink-3); width:100%; letter-spacing:.06em; text-transform:uppercase}
.texk{min-height:40px; min-width:40px; padding:0 10px; border-radius:10px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-family:var(--f-math); font-size:17px; color:var(--ink); box-shadow:0 2px 0 var(--line)}
.texk:hover{border-color:var(--edge)}
.texk:active{transform:translateY(2px); box-shadow:none}
.code{font-family:ui-monospace,"Cascadia Code","Consolas","Menlo",monospace !important; font-size:14px !important; line-height:1.5}
.blk-list{display:flex; flex-direction:column; gap:12px}
.blk-ed{border:2px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--surface)}
.blk-ed.t-definition,.blk-ed.t-theoreme,.blk-ed.t-proposition,.blk-ed.t-lemme,.blk-ed.t-corollaire,.blk-ed.t-exemple,.blk-ed.t-exercice{border-color:var(--bc)}
.blk-ed .bh{display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:8px; align-items:center}
.blk-ed .bh .mv{display:flex; gap:2px}
.blk-ed .bh .mv button{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:0; background:none; cursor:pointer; color:var(--ink-3)}
.blk-ed .bh .mv button:hover{background:var(--surface-2); color:var(--ink)}
.blk-ed .bh .mv button:disabled{opacity:.3; cursor:default}
.blk-ed .bh .mv button.rm:hover{color:var(--bad-ink)}
.blk-ed .sublbl{font-size:12px; font-weight:800; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase}
.add-bar{display:flex; gap:6px; flex-wrap:wrap; padding:12px; border-radius:14px; border:2px dashed var(--edge)}
.add-bar .tl{width:100%; font-size:13px; font-weight:800; color:var(--ink-2)}
.add-bar button{min-height:40px; padding:0 12px; border-radius:10px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; font-size:13px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px}
.add-bar button:hover{color:var(--ink); border-color:var(--edge)}
.prq{display:flex; gap:6px; flex-wrap:wrap}
.prq label{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px; border-radius:10px; border:2px solid var(--line); background:var(--surface); font-weight:700; font-size:13px; cursor:pointer}
.prq input{accent-color:var(--primary); width:16px; height:16px}
.import{padding:16px; display:flex; flex-direction:column; gap:10px; border-radius:16px; border:2px solid var(--primary); background:var(--primary-soft)}
.ced-preview{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; padding:0}
.ced-preview .course-body{padding:18px; font-size:15.5px}
.ced-preview .pvh{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 18px; background:var(--surface); border-bottom:2px solid var(--line)}
.db-state{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--ink-3)}
.db-state.on{color:var(--ok-ink)}
@media (max-width:1300px){.ced{grid-template-columns:200px minmax(0,1fr)} .ced-preview{grid-column:1 / -1; position:static; max-height:none}}
@media (max-width:820px){.ced{grid-template-columns:minmax(0,1fr)} .blk-ed .bh{grid-template-columns:minmax(0,1fr) auto} .blk-ed .bh .inp:nth-child(2){grid-column:1 / -1; grid-row:2}}

/* ============ Tomes d'exercices ============ */
.tome-shelf{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px}
.tome-spine{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border-radius:var(--r-md); border:2px solid var(--line); border-left:8px solid var(--primary); background:var(--surface); box-shadow:0 3px 0 var(--line); cursor:pointer; text-align:left; color:var(--ink); font:inherit; min-width:0}
.tome-spine:nth-child(2){border-left-color:var(--cta)}
.tome-spine:nth-child(3){border-left-color:var(--gold)}
.tome-spine:nth-child(4){border-left-color:var(--bad)}
.tome-spine:hover{border-top-color:var(--edge); border-right-color:var(--edge); border-bottom-color:var(--edge)}
.tome-spine[aria-selected="true"]{background:var(--primary-soft); border-top-color:var(--primary); border-right-color:var(--primary); border-bottom-color:var(--primary)}
.tome-spine .tome-num{font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.tome-spine b{font-family:var(--f-display); font-size:18px; font-weight:600}
.tome-spine .bar{width:100%; margin-top:4px}
.tome-panel{padding:22px 26px; display:flex; flex-direction:column; gap:14px; min-width:0}
.tome-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start}
.tome-top > div{display:flex; flex-direction:column; gap:4px; min-width:0}
.tome-top > .tome-index{gap:8px}
.tome-pager{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tome-pager .small{font-weight:700}
.tome-steps{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.tome-steps button{width:44px; height:44px; border-radius:50%; border:2px solid var(--line); background:var(--surface); font-weight:800; font-size:15px; cursor:pointer; color:var(--ink-2)}
.tome-steps button.ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok-ink)}
.tome-steps button.skip{background:var(--surface-2); border-style:dashed; border-color:var(--ink-3)}
.tome-steps button[aria-current="step"]{box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--primary); color:var(--ink)}
.tome-flash{margin:0; padding:8px 12px; border-radius:10px; background:var(--primary-soft); font-weight:700}
.tome-flash:empty{display:none}
.tome-ex{display:flex; flex-direction:column; gap:10px; min-width:0}
.tome-ex h3{font-size:20px}
.tome-ex h3:focus{outline:none}
.tome-nav{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; border-top:2px dashed var(--line); padding-top:14px; margin-top:4px}
@media (max-width:560px){.tome-panel{padding:18px 16px}}


/* ============ Académie du code ============ */
.sagas{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.saga{display:grid; grid-template-columns:150px minmax(0,1fr); overflow:hidden}
.saga-art{background:var(--sc); display:grid; place-items:center; border-right:2px solid var(--line); min-height:220px}
.saga-art svg{width:110px; height:110px}
.saga-body{padding:22px; display:flex; flex-direction:column; gap:10px}
.saga-body .acts{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.how ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; counter-reset:how}
.how li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start; counter-increment:how; font-size:15px}
.how li::before{content:counter(how); width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); border:2px solid var(--primary); font-family:var(--f-display); font-weight:600}
.how li b{display:block; font-family:var(--f-display); font-weight:600}
.saga-banner{display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:20px; padding:26px 28px; background:var(--sc); color:#fff; border-color:transparent}
.saga-banner .eyebrow{color:rgba(255,255,255,.85)}
.saga-banner h1{color:#fff}
.saga-banner .tale{font-size:17px; line-height:1.6; max-width:62ch; color:rgba(255,255,255,.95)}
.saga-banner svg{width:130px; height:130px; align-self:center}
.saga-banner .chip{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.4)}
.quest-path{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; position:relative}
.quest-path::before{content:""; position:absolute; left:33px; top:24px; bottom:24px; width:4px; border-radius:4px; background:var(--line)}
.qnode button{all:unset; box-sizing:border-box; position:relative; width:100%; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 18px 14px 12px; border-radius:var(--r-lg); background:var(--surface); border:2px solid var(--line); box-shadow:var(--shadow-clay); transition:transform var(--t-pop) var(--ease-bounce)}
.qnode button:hover{transform:translateX(4px)}
.qnode button:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
.qnode .qn{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:18px; background:var(--surface-2); border:3px solid var(--edge); color:var(--ink); z-index:1}
.qnode.done .qn{background:var(--ok); border-color:var(--ok-ink); color:#0B2614}
.qnode.current .qn{background:var(--cta); border-color:var(--cta-edge); color:var(--cta-ink)}
.qnode .qt b{display:block; font-family:var(--f-display); font-weight:600; font-size:18px}
.qnode .qt span{font-size:14px; color:var(--ink-2); font-weight:700}
.qnode .qs{display:flex; gap:6px; align-items:center}
.code-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.chap-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; align-items:start}
.chap-left{display:flex; flex-direction:column; gap:18px; min-width:0}
.chap-right{position:sticky; top:calc(14px + env(safe-area-inset-top,0px)); display:flex; flex-direction:column; gap:14px; min-width:0}
.story-card{padding:22px 24px; display:flex; flex-direction:column; gap:10px; background:var(--sc); color:#fff; border-color:transparent}
.story-card .eyebrow{color:rgba(255,255,255,.85)}
.story-card h1{color:#fff; font-size:clamp(24px,2.6vw,32px)}
.story-card .tale{font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.95); font-style:italic}
.lesson{padding:22px 24px}
.lesson.course-body{font-size:16px}
.ex-card{padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.ex-tabs{display:flex; gap:6px; flex-wrap:wrap}
.ex-tabs button{min-height:44px; padding:0 14px; border-radius:12px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; font-size:14px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px}
.ex-tabs button[aria-selected="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.ex-tabs button .icon{color:var(--ok)}
.ex-tabs button[aria-selected="true"] .icon{color:var(--paper)}
.tests{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.tests li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; padding:8px 12px; border-radius:12px; background:var(--surface-2); font-size:14px}
.tests li .ti{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-3)}
.tests li.ok .ti{background:var(--ok); color:#0B2614}
.tests li.bad .ti{background:var(--bad); color:#fff}
.tests li b{font-weight:800}
.tests li code{font-size:12.5px}
.ex-actions{display:flex; gap:8px; flex-wrap:wrap}
.diff{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; font-size:13.5px; margin-top:6px}
.diff b{font-weight:800}
.diff code{white-space:pre-wrap; word-break:break-word}
code,.course-body code{font-family:var(--f-code); font-size:.9em; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:.05em .35em}
.code-ex{position:relative; margin:0; border-radius:14px; background:var(--code-bg); color:var(--code-ink); padding:14px 16px; overflow-x:auto; font:14px/1.6 var(--f-code); white-space:pre; max-width:100%}
.code-ex code{background:none; border:0; padding:0; font-size:inherit; color:inherit}
.code-wrap{display:flex; flex-direction:column; gap:6px; max-width:100%}
.code-wrap .try{align-self:flex-end}
.h-k{color:var(--code-kw)} .h-s{color:var(--code-str)} .h-n{color:var(--code-num)} .h-c{color:var(--code-com); font-style:italic} .h-f{color:var(--code-fn)}

/* Éditeur */
.ed-card{padding:16px; display:flex; flex-direction:column; gap:12px}
.ed-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ed-top .title{font-family:var(--f-display); font-weight:600; font-size:17px; margin-right:auto; display:flex; align-items:center; gap:8px}
.ed{border:2px solid var(--code-line); border-radius:14px; background:var(--code-bg); overflow:hidden; transition:border-color var(--t-feedback), box-shadow var(--t-feedback)}
.ed:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.ed-scroll{display:flex; overflow:auto; max-height:430px; min-height:200px}
.ed-gut{position:sticky; left:0; z-index:2; flex:none; padding:12px 8px 12px 12px; display:flex; flex-direction:column; text-align:right; color:var(--code-gut); background:var(--code-bg); font:14px/1.6 var(--f-code); user-select:none; border-right:1px solid var(--code-line); min-width:42px}
.ed-gut span.err{color:var(--code-err); font-weight:600}
.ed-wrap{position:relative; flex:1 0 auto; min-width:0}
.ed-hl,.ed-ta{margin:0; padding:12px 16px 12px 12px; font:14px/1.6 var(--f-code); tab-size:4; white-space:pre; letter-spacing:0; border:0; word-wrap:normal}
.ed-hl{pointer-events:none; color:var(--code-ink); min-height:100%; background:none}
.ed-ta{position:absolute; inset:0; width:100%; height:100%; resize:none; overflow:hidden; background:transparent; color:transparent; caret-color:#fff; outline:none; -webkit-text-fill-color:transparent}
.ed-ta::selection{background:rgba(142,146,251,.38)}
.ed-help{font-size:12.5px; color:var(--ink-3); font-weight:700}
.stdin summary{cursor:pointer; min-height:40px; display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; list-style:none}
.stdin summary::-webkit-details-marker{display:none}
.stdin textarea{width:100%; min-height:64px; font:14px/1.5 var(--f-code); color:var(--ink); background:var(--surface); border:2px solid var(--edge); border-radius:12px; padding:8px 10px; resize:vertical}
.stdin textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.console{border-radius:14px; background:var(--code-bg); color:var(--code-ink); min-height:96px; max-height:300px; overflow:auto; font:13.5px/1.55 var(--f-code)}
.console .ch{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--code-line); font:800 12px var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--code-gut); position:sticky; top:0; background:var(--code-bg)}
.console pre{margin:0; padding:10px 14px; white-space:pre-wrap; word-break:break-word; font:inherit}
.console .placeholder{color:var(--code-gut); font-style:italic}
.console .cerr{margin:8px 12px 12px; padding:10px 12px; border-radius:10px; background:rgba(255,120,120,.12); border:1px solid rgba(255,140,140,.45); color:#FFD2D2; font-family:var(--f-body); font-size:14px}
.console .cerr b{color:#FFB4B4}
.console .cerr .tip{display:block; margin-top:4px; color:#E9EAFF; opacity:.9}
.console .cmsg{padding:6px 14px; color:#A7F0BA; font-family:var(--f-body); font-size:13.5px; font-weight:700}
.res-wrap{overflow-x:auto; padding:8px 12px 12px}
.res{border-collapse:collapse; font:13px/1.4 var(--f-code); min-width:100%}
.res th{text-align:left; color:var(--code-fn); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--code-line); white-space:nowrap}
.res td{padding:5px 10px; border-bottom:1px solid var(--code-line); white-space:nowrap}
.res td.num{text-align:right; color:var(--code-num)}
.res td .null{color:var(--code-com); font-style:italic}
.res caption{caption-side:bottom; text-align:left; padding-top:6px; color:var(--code-gut); font-family:var(--f-body); font-size:12.5px; font-weight:700}
.schema{display:flex; flex-direction:column; gap:8px}
.schema details{border-radius:12px; background:var(--surface-2); border:2px solid var(--line)}
.schema summary{cursor:pointer; min-height:42px; display:flex; align-items:center; gap:8px; padding:0 12px; font-weight:800; font-size:14px; list-style:none}
.schema summary::-webkit-details-marker{display:none}
.schema summary .cnt{margin-left:auto; font-size:12px; color:var(--ink-3)}
.schema ul{list-style:none; margin:0; padding:0 12px 10px; display:flex; flex-wrap:wrap; gap:6px}
.schema li{font:12.5px var(--f-code); padding:2px 8px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
.schema li.pk{border-color:var(--gold); background:var(--gold-soft)}
.chap-nav{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.correction .code-ex{max-height:320px}
@media (max-width:1100px){.chap-grid{grid-template-columns:minmax(0,1fr)} .chap-right{position:static}}
@media (max-width:620px){.saga{grid-template-columns:minmax(0,1fr)} .saga-art{min-height:120px; border-right:0; border-bottom:2px solid var(--line)} .saga-banner{grid-template-columns:minmax(0,1fr)} .saga-banner svg{display:none} .qnode button{grid-template-columns:44px minmax(0,1fr)} .qnode .qs{grid-column:2}}

@media (max-width:440px){.mobile-top .brand{font-size:0; gap:0} .mobile-top{gap:8px}}
/* Studio : éditeur de chapitres de code */
.cx-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; align-items:start}
.cx-ex{border:2px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface)}
.cx-ex .bh{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center}
.cx-ex .bh .tag{font-family:var(--f-display); font-weight:600; white-space:nowrap}
.cx-ex .mv{display:flex; gap:2px}
.cx-ex .mv button{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:0; background:none; cursor:pointer; color:var(--ink-3)}
.cx-ex .mv button:hover{background:var(--surface-2); color:var(--ink)}
.cx-ex .mv button:disabled{opacity:.3; cursor:default}
.cx-tests{display:flex; flex-direction:column; gap:8px}
.cx-test{display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:start; padding:10px; border-radius:12px; background:var(--surface-2)}
.cx-test .fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px}
.cx-out{font:12.5px/1.5 var(--f-code); white-space:pre-wrap; background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:8px 10px; max-height:160px; overflow:auto}
.cx-out.err{color:#FFD2D2}
@media (max-width:900px){.cx-grid{grid-template-columns:minmax(0,1fr)}}


/* ============ Page d'accueil publique ============ */
#landing{min-height:100vh}
.lp-top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:2px solid var(--line)}
.lp-top .in{max-width:1180px; margin-inline:auto; padding:12px clamp(16px,3.5vw,44px); display:flex; align-items:center; gap:14px}
.lp-links{display:flex; gap:4px; margin-left:12px}
.lp-links a{min-height:44px; display:inline-flex; align-items:center; padding:0 12px; border-radius:12px; color:var(--ink-2); font-weight:800; font-size:15px; text-decoration:none}
.lp-links a:hover{background:var(--surface-2); color:var(--ink)}
.lp-top .acts{margin-left:auto; display:flex; gap:8px; align-items:center}
.lp{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,3.5vw,44px); padding-block:28px 64px; display:flex; flex-direction:column; gap:56px}
.lp-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:center; padding-top:12px}
.lp-hero h1{font-size:clamp(34px,5vw,58px); line-height:1.02; letter-spacing:-.02em}
.lp-hero h1 em{font-style:normal; color:var(--primary)}
.lp-hero .lead{font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:46ch; line-height:1.55}
.lp-hero .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.lp-proof{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; font-weight:800; color:var(--ink-2)}
.lp-proof span{display:inline-flex; gap:6px; align-items:center}
.lp-visual{position:relative}
.lp-visual .stage{border-radius:var(--r-lg)}
.lp-float{position:absolute; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:14px; background:var(--surface); border:2px solid var(--line); box-shadow:var(--shadow-clay); font-weight:800; font-size:14px}
.lp-float.f1{top:-18px; right:18px} .lp-float.f2{bottom:-20px; left:16px} .lp-float.f3{bottom:26%; right:-14px}
.lp-sec{display:flex; flex-direction:column; gap:20px}
.lp-sec > header{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.lp-sec h2{font-size:clamp(26px,3vw,36px)}
.lvl-pick{display:flex; gap:6px; flex-wrap:wrap}
.lvl-pick button{min-height:44px; padding:0 14px; border-radius:999px; border:2px solid var(--line); background:var(--surface); cursor:pointer; font-weight:800; font-size:14px; color:var(--ink-2)}
.lvl-pick button:hover{border-color:var(--edge); color:var(--ink)}
.lvl-pick button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.subj{display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-clay); transition:transform var(--t-pop) var(--ease-bounce); font:inherit; color:inherit}
.subj:hover{transform:translateY(-4px)}
.subj .art{display:block; position:relative; height:120px; background:var(--wc); border-bottom:2px solid var(--line)}
.subj .art svg{position:absolute; inset:0; width:100%; height:100%}
.subj .art .chip{position:absolute; top:10px; right:10px}
.subj .sb{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; width:100%}
.subj .sb .nm{font-family:var(--f-display); font-weight:600; font-size:21px; line-height:1.15}
.subj .sb .ds{font-size:14px; color:var(--ink-2)}
.subj .sb .ft{margin-top:auto; display:flex; gap:6px; flex-wrap:wrap; padding-top:4px}
.subj.dim{opacity:.45}
.lp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; counter-reset:st}
.lp-steps li{padding:20px; display:flex; flex-direction:column; gap:8px; counter-increment:st}
.lp-steps li::before{content:counter(st); width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--cta); color:var(--cta-ink); border:2px solid var(--cta-edge); font-family:var(--f-display); font-weight:600; font-size:18px}
.lp-steps b{font-family:var(--f-display); font-weight:600; font-size:19px}
.lp-ai{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:center; scroll-margin-top:110px}
.lp-tutor-copy{display:flex; flex-direction:column; gap:18px; min-width:0}
.lp-ai h2{font-family:var(--f-display); font-size:clamp(32px,3.8vw,48px); font-weight:700; line-height:1.08; letter-spacing:-.02em; text-wrap:initial}
.lp-ai h2 em{display:block; font-style:normal; color:var(--primary)}
.lp-tutor-intro{color:var(--ink-2); font-size:clamp(17px,1.6vw,20px); line-height:1.55; max-width:46ch}
.lp-ai .muted{display:block; margin-top:3px; color:var(--ink-2); font-size:15px; line-height:1.5}
.lp-ai ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.lp-ai li{display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start}
.lp-ai li .ic{display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--primary); box-shadow:0 3px 0 var(--line)}
.lp-ai li b{display:block; font-family:var(--f-display); font-weight:600; font-size:19px; line-height:1.3}
.lp-ai .btn{max-width:100%; white-space:normal; margin-top:4px}
.lp-review{min-width:0; display:flex; flex-direction:column; gap:18px; padding:clamp(18px,2.5vw,28px); border:2px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-clay); font-size:15px; line-height:1.6}
.lp-review-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:16px; border-bottom:2px solid var(--line)}
.lp-review h3{font-family:var(--f-display); font-size:21px; font-weight:600; line-height:1.2}
.lp-review-topic{padding:4px 10px; border:2px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-size:12px; font-weight:800; line-height:1.6}
.lp-review-question{font-size:17px; font-weight:700; line-height:1.5}
.lp-review-attempt{padding:12px 14px; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2)}
.lp-review-label{margin-bottom:5px; color:var(--ink-2); font-size:13px; font-weight:800}
.lp-review-calculation{color:var(--ink-2); font-family:var(--f-math); font-size:20px; font-variant-numeric:tabular-nums}
.lp-review-explanation{display:flex; flex-direction:column; gap:6px}
.lp-review-explanation .lp-review-label{margin:0}
.lp-review-result{margin-top:6px; padding:10px 14px; border:2px solid var(--line); border-radius:var(--r-sm); background:var(--primary-soft); color:var(--ink); font-family:var(--f-math); font-size:clamp(20px,2vw,24px); font-variant-numeric:tabular-nums; line-height:1.5}
.lp-review-result strong{font-weight:700; color:var(--primary)}
.lp-review-note{display:flex; gap:8px; align-items:flex-start; padding-top:14px; border-top:2px solid var(--line); color:var(--ink-2); font-size:13px; font-weight:700; line-height:1.5}
.lp-review-note .icon{flex:none; margin-top:2px; color:var(--primary)}
.lp-foot{border-top:2px solid var(--line); padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); font-weight:700}
.lp-foot-brand{display:flex; align-items:center; gap:12px}
.lp-foot .brand-mark{width:32px; height:32px}
.lp-foot-links a{color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px}
@media (max-width:900px){.lp-hero,.lp-ai{grid-template-columns:minmax(0,1fr)} .lp-links{display:none} .lp-float.f3{display:none}}
@media (max-width:560px){.lp-top .acts [data-install]{display:none}}
@media (max-width:560px){.lp-top .brand{font-size:0; gap:0; padding-inline:0} .lp-top .brand-mark{width:34px; height:34px} .lp-top .in{gap:8px} .lp-float{font-size:12.5px}}

/* ============ Inscription / connexion ============ */
.auth{width:100%; max-width:560px; padding:26px; display:flex; flex-direction:column; gap:16px; animation:pop var(--t-pop) var(--ease-bounce); max-height:calc(100vh - 32px); overflow:auto}
.auth .tabs{border-bottom:2px solid var(--line); overflow:visible}
.auth .x{margin-left:auto}
.auth .head{display:flex; align-items:center; gap:10px}
.auth .brand-mark{width:36px; height:36px}
.steps-dots{display:flex; gap:6px}
.steps-dots span{width:28px; height:8px; border-radius:99px; background:var(--surface-3)}
.steps-dots span.on{background:var(--primary)}
.lvl-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px}
.lvl-cards label{position:relative; display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:14px; border:2px solid var(--line); background:var(--surface); cursor:pointer; min-height:64px}
.lvl-cards label:hover{border-color:var(--edge)}
.lvl-cards input{position:absolute; opacity:0; pointer-events:none}
.lvl-cards label:has(input:checked){border-color:var(--primary); background:var(--primary-soft); box-shadow:0 3px 0 var(--primary-edge)}
.lvl-cards label:has(input:focus-visible){outline:3px solid var(--primary); outline-offset:2px}
.lvl-cards b{font-family:var(--f-display); font-weight:600; font-size:16px}
.lvl-cards span{font-size:12px; font-weight:700; color:var(--ink-3)}
.int-chips{display:flex; flex-wrap:wrap; gap:6px}
.int-chips label{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border-radius:999px; border:2px solid var(--line); background:var(--surface); font-weight:800; font-size:13px; cursor:pointer}
.int-chips input{accent-color:var(--primary)}
.int-chips label:has(input:checked){border-color:var(--primary); background:var(--primary-soft)}
.f .err-line{font-size:13px; font-weight:800; color:var(--bad-ink)}
.btn-danger{color:var(--bad-ink); border-color:var(--bad-ink); box-shadow:0 4px 0 var(--bad-ink)}
.auth .account-zone{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-top:14px; border-top:2px solid var(--line)}
.auth .account-zone h3{flex-basis:100%; margin:0; font-size:16px}
.proto-note{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); padding:10px 12px; border-radius:12px; background:var(--surface-2)}
.lvl-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; border-radius:999px; background:var(--surface); border:2px solid var(--line); font-weight:800; font-size:14px}
.lvl-badge button{min-height:32px; padding:0 10px; border-radius:999px; border:0; background:var(--surface-2); cursor:pointer; font-weight:800; font-size:13px; color:var(--primary)}
.lvl-badge button:hover{background:var(--primary-soft)}
.sheet{width:100%; max-width:640px; padding:24px; display:flex; flex-direction:column; gap:16px; animation:pop var(--t-pop) var(--ease-bounce); max-height:calc(100vh - 32px); overflow:auto}
.sheet .items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.sheet .items li{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:14px; background:var(--surface-2)}
.sheet .items .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:2px solid var(--line)}
.sheet .items b{display:block}
.sheet .items .meta{font-size:13px; color:var(--ink-3); font-weight:700}
.sheet .install-steps{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:10px; font-weight:700; line-height:1.45}

/* ============ IA ============ */
.panel.ai{background:var(--surface); border-color:var(--primary); border-style:solid}
.panel.ai h4{color:var(--ink)}
.panel.ai h4 .icon{color:var(--primary)}
.ai-think{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink-2)}
.ai-dots{display:inline-flex; gap:4px}
.ai-dots i{width:7px; height:7px; border-radius:50%; background:var(--primary); animation:aidot 1s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s} .ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)}}
.ai-kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; font-size:14.5px}
.ai-kv b{font-weight:800; color:var(--ink-2)}
.btn-ai{border-color:var(--primary); box-shadow:0 3px 0 var(--primary-edge)}
.btn-ai .icon{color:var(--primary)}
.ai-ex{padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.ai-ex .top{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
.diff-dots{display:inline-flex; gap:4px; align-items:center}
.diff-dots i{width:10px; height:10px; border-radius:50%; background:var(--surface-3); border:2px solid var(--edge)}
.diff-dots i.on{background:var(--cta); border-color:var(--cta-edge)}
.ai-answer{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch}
.ai-answer .inp{flex:1 1 200px}
.ai-ex textarea.inp{min-height:110px}
.score{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; font-family:var(--f-display); font-weight:600; font-size:20px; border:3px solid}
.score.ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ok-ink)}
.score.mid{background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink)}
.score.bad{background:var(--bad-soft); border-color:var(--bad); color:var(--bad-ink)}
.ai-set{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; align-items:start}
.prov{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px}
.prov label{position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:14px; border:2px solid var(--line); background:var(--surface); cursor:pointer}
.prov input{position:absolute; opacity:0; pointer-events:none}
.prov label:has(input:checked){border-color:var(--primary); background:var(--primary-soft)}
.prov label:has(input:focus-visible){outline:3px solid var(--primary); outline-offset:2px}
.prov b{font-family:var(--f-display); font-weight:600}
.prov span{font-size:12.5px; color:var(--ink-3); font-weight:700}
.flow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:800}
.flow .node{padding:8px 12px; border-radius:12px; background:var(--surface-2); border:2px solid var(--line)}
.flow .node.key{border-color:var(--gold); background:var(--gold-soft)}
.toggles{display:flex; flex-direction:column; gap:4px}
@media (max-width:980px){.ai-set{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.ai-dots i{animation:none; opacity:.7}}



/* ============ Administration : tableau de bord, génération IA, dons ============ */
[hidden]{display:none!important}
.nav-short{display:none}
@media (max-width:900px){.nav-long{display:none} .nav-short{display:inline}}
.search-inp{position:relative; display:flex; align-items:center}
.search-inp .icon{position:absolute; left:12px; color:var(--ink-3); pointer-events:none}
.search-inp .inp{padding-left:36px; width:min(260px,100%)}
.dash-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start}
.dash-grid.wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.dash-grid .card{gap:14px}
.dash-grid h2{font-size:20px}
.site-stats-toolbar,.site-stats-controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px}
.site-stats-controls .inp{width:auto; max-width:100%}
.site-stats-toolbar h2{font-size:24px}
.site-stats-toolbar p{margin-top:6px}
.site-stats-kpis .num{font-size:clamp(24px,2.4vw,36px)}
.site-stats-help{gap:10px}
.site-stats-help p{margin:0}
.site-stats-example summary{cursor:pointer; font-weight:800; min-height:28px}
.site-stats-example:not([open])>:not(summary){display:none}
.site-stats-example[open]>*+*{margin-top:18px}
.lvlbars{display:flex; flex-direction:column; gap:10px}
.lvlbars .row{display:grid; grid-template-columns:72px minmax(0,1fr) 32px; align-items:center; gap:10px; font-weight:800; font-size:14px}
.lvlbars .num{text-align:right; font-variant-numeric:tabular-nums}
.feed{list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; margin:0; max-height:460px; overflow:auto}
.feed li{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45}
.feed .avatar{width:32px; height:32px; font-size:12px; background:var(--primary-soft); color:var(--ink); border-color:var(--primary)}
.feed time{display:block; color:var(--ink-3); font-size:13px; font-weight:700}
#dash-users td{vertical-align:top}
.ai-gen{padding:18px 20px; display:flex; flex-direction:column; gap:12px; border-color:var(--primary)}
.ai-gen-head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.ai-gen h3{display:flex; gap:8px; align-items:center; font-size:18px}
.ai-gen h3 .icon{color:var(--primary)}
.f3{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.studio-meta.two{grid-template-columns:minmax(200px,300px) minmax(0,1fr); align-items:end}
.don-set{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:20px; align-items:start}
.don-set .card{gap:12px}
.don-set h4{font-size:15px; margin-top:6px}
.don-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:22px; align-items:start}
.creator{padding:24px; display:flex; flex-direction:column; gap:10px}
.creator .ph,.creator-photo-preview{position:relative; width:104px; height:104px; flex:none; overflow:hidden; border-radius:24px; display:grid; place-items:center; font-family:var(--f-display); font-size:32px; font-weight:700;
  background:var(--cta); color:var(--cta-ink); border:2px solid var(--cta-edge); box-shadow:0 4px 0 var(--cta-edge)}
.creator .ph img,.creator-photo-preview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.creator-photo-editor{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.creator-photo-controls{display:flex; flex:1 1 200px; flex-direction:column; align-items:flex-start; gap:10px; min-width:0}
.creator-photo-controls .inp{width:100%; min-width:0; font-size:13px; padding:8px}
.creator-photo-controls input::file-selector-button{border:0; border-radius:8px; padding:8px 10px; margin-right:8px; background:var(--primary-soft); color:var(--ink); font:inherit; font-weight:800; cursor:pointer}
.creator-photo-preview[aria-busy="true"]{opacity:.6}
.creator h2,.creator h3{font-size:24px; line-height:1.2}
.creator .tags{display:flex; flex-wrap:wrap; gap:6px}
.don-card{padding:24px; display:flex; flex-direction:column; gap:14px}
.don-card h2,.don-card h3{font-size:24px}
.support-prompt{max-width:500px}
.support-prompt-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.support-prompt-icon{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--cta-soft); color:var(--ink); border:2px solid var(--cta-edge)}
.support-prompt-icon .icon{width:28px; height:28px}
.support-prompt h2{font-size:26px; line-height:1.2}
.support-prompt-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.support-prompt-actions .btn{flex:1 1 auto}
.amounts{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.amounts button{min-height:44px; padding:0 16px; border-radius:12px; border:2px solid var(--line); background:var(--surface); font-weight:800; font-size:15px; cursor:pointer; color:var(--ink);
  transition:background var(--t-feedback) var(--ease-out), border-color var(--t-feedback)}
.amounts button:hover{border-color:var(--edge)}
.amounts button[aria-pressed="true"]{background:var(--cta); border-color:var(--cta-edge); color:var(--cta-ink); box-shadow:0 3px 0 var(--cta-edge)}
.pay{border:2px solid var(--line); border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--surface-2)}
.pay .lbl{display:flex; gap:6px; align-items:center; font-weight:800; margin:0}
.pay .row{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:14px}
.pay code{font-family:var(--f-mono); font-size:14px; overflow-wrap:anywhere; background:var(--surface); padding:6px 8px; border-radius:8px; border:1px solid var(--line)}
.copy{min-height:36px; padding:0 12px; border-radius:10px; border:2px solid var(--line); background:var(--surface); font-weight:800; cursor:pointer; font-size:13px; color:var(--ink)}
.copy:hover{border-color:var(--edge)}
@media (max-width:1000px){.dash-grid,.dash-grid.wide{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.don-grid{grid-template-columns:minmax(0,1fr)} .studio-meta.two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.pay .row{grid-template-columns:minmax(0,1fr) auto} .pay .row b{grid-column:1 / -1} .search-inp,.search-inp .inp{width:100%}}
#view-studio .tabs{scrollbar-width:thin}
@media (max-width:680px){#dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} #dash-kpis .tile{padding:14px} #dash-kpis .num{font-size:26px}}
.panel.quota{border-color:var(--cta-edge); background:var(--cta-soft)}
.panel.quota h4 .icon{color:var(--cta-edge)}
.pass-card{padding:24px; display:flex; flex-direction:column; gap:14px; margin-top:22px}
.pass-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.pass-card h2{font-size:24px}
.meter{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; max-width:460px}
.bar.cta > span{background:var(--cta)}
.pass-steps{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px}
.pass-steps li > span{margin-right:8px}
.pass-steps code,.pcode{font-family:var(--f-mono); font-size:13px; background:var(--surface-2); padding:2px 6px; border-radius:6px; border:1px solid var(--line); overflow-wrap:anywhere}
.pass-cell{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:150px}
.bank-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; max-height:380px; overflow:auto}
.bank-list li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--surface)}
.bank-list li > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.bank-list li b{overflow-wrap:anywhere}
.f3 .f{min-width:0}
.f3{align-items:end}
.bank-fill{display:flex; flex-direction:column; gap:12px; padding:14px; border:2px dashed var(--edge); border-radius:var(--r-md)}
.bank-fill h4{font-size:15px}
.resume .course-thumb{background:var(--wc)}
.resume .course-thumb svg{opacity:.95}
.notion-help{padding:22px 24px; display:flex; flex-direction:column; gap:14px; border-color:var(--gold)}
.nh-head{display:flex; gap:14px; align-items:center}
.nh-head h2{font-size:22px}
.nh-ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none; background:var(--gold-soft, var(--surface-2)); color:var(--gold-ink); border:2px solid var(--gold)}
.nh-sugg{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.nh-sugg .chip{cursor:pointer; min-height:32px}
.nh-sugg .chip:hover{border-color:var(--edge)}
.nh-acts{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.nh-ready:empty{display:none}
.nh-ready{display:flex; flex-direction:column; gap:8px}
.fiche{display:flex; flex-direction:column; gap:16px; padding:18px; border-radius:var(--r-md); border:2px solid var(--line); background:var(--surface-2)}
.fiche header h3{font-size:22px}
.fpart{display:flex; flex-direction:column; gap:10px}
.fpart h4{display:flex; gap:8px; align-items:center; font-size:17px}
.fpart.p1 h4 .icon{color:var(--ok)} .fpart.p2 h4 .icon{color:var(--primary)} .fpart.p3 h4 .icon{color:var(--gold-ink)}
.fpart > p{margin:0}
.fx{padding:14px; border-radius:12px; border:2px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:8px}
.fx-n{margin:0; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.fbody{padding:0; font-size:16px; gap:8px; box-shadow:none; border:0; background:none}
.fiche-foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-weight:700; border-top:2px solid var(--line); padding-top:12px}
.ask-row{display:flex; justify-content:flex-end; margin-top:4px}
.ask-row .btn-text{min-height:32px; font-size:14px}
.toc-ask{margin-top:10px; width:100%; justify-content:center}
.req-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-height:420px; overflow:auto}
.req-list li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--surface)}
.req-list li > span{display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere}
@media (max-width:560px){.req-list li{flex-direction:column; align-items:stretch} .notion-help{padding:18px 16px}}
.ex-filters{display:flex; gap:14px; align-items:end; flex-wrap:wrap}
.ex-filters .domains{flex:1 1 auto}
.ex-filters .f{min-width:220px; max-width:360px; flex:1 1 220px}
.ex-bank{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); gap:16px; align-items:start}
.xcard{padding:18px 20px; display:flex; flex-direction:column; gap:10px; min-width:0}
.xhead{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.xhead .diff-dots{margin-left:auto}
.xcard h3{font-size:18px}

/* ============ Suggestions d'amélioration ============ */
.sugg-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:900px){.sugg-grid{grid-template-columns:minmax(0,1fr)}}
.sugg-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.sugg-list.admin{max-height:640px; overflow:auto}
.sugg-item{display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:2px solid var(--line); border-radius:12px; background:var(--surface); overflow-wrap:anywhere}
.sugg-top{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.sugg-top .small{margin-left:auto}
.sugg-text{white-space:pre-line; margin:0}
.sugg-reply{display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:var(--primary-soft); border-left:4px solid var(--primary)}
.sugg-admin{display:grid; grid-template-columns:minmax(130px,170px) minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:4px}
@media (max-width:640px){.sugg-admin{grid-template-columns:minmax(0,1fr)}}


/* ============ Assistante personnelle ============ */
.assistant-toggle{
  position:fixed; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:70;
  max-width:calc(100vw - 32px); min-height:50px; border-radius:999px; padding-inline:18px;
}
.assistant-toggle[aria-expanded="true"]{background:var(--primary-soft); color:var(--ink)}
.assistant-panel{
  position:fixed; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(88px + env(safe-area-inset-bottom,0px)); z-index:80;
  display:flex; flex-direction:column; width:min(390px,calc(100vw - 32px)); max-height:calc(100vh - 112px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 112px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow:hidden;
  border-color:var(--primary); box-shadow:0 3px 0 var(--primary-edge),0 18px 42px -14px rgba(14,13,40,.35);
}
.assistant-head{display:flex; align-items:center; gap:10px; padding:16px; border-bottom:2px solid var(--line); background:var(--surface-2); flex:none}
.assistant-head > div{min-width:0; flex:1}
.assistant-head .eyebrow{font-size:10px; letter-spacing:.06em; margin-bottom:4px}
.assistant-head h2{font-size:22px; line-height:1.2}
.assistant-head .icon-btn{margin-left:auto}
.assistant-emblem{width:44px; height:44px; flex:none; display:grid; place-items:center; border:2px solid var(--primary); border-radius:14px; background:var(--primary-soft); color:var(--primary)}
.assistant-body{display:flex; flex-direction:column; gap:16px; padding:18px; overflow:auto; overscroll-behavior:contain; min-height:0; scrollbar-width:thin}
.assistant-greeting{font-weight:700; line-height:1.55; overflow-wrap:anywhere}
.assistant-location{padding:12px 14px; border:1.5px solid var(--line); border-radius:14px; background:var(--surface-2); font-size:14px; line-height:1.5; overflow-wrap:anywhere}
.assistant-location:empty,.assistant-output:empty{display:none}
.assistant-location > * + *{margin-top:5px}
.assistant-location time{color:var(--ink-3); font-size:13px}
.assistant-actions{display:flex; flex-direction:column; gap:10px}
.assistant-actions .btn{width:100%; white-space:normal; text-align:center; padding-block:8px; line-height:1.3}
.assistant-actions .btn .icon{flex:none}
.assistant-help{line-height:1.5; font-size:12.5px}
.assistant-output{min-width:0; overflow-wrap:anywhere; font-size:14px}
.assistant-output .panel{margin:0; padding:14px; gap:12px}
.assistant-output h3,.assistant-output h4{font-size:18px; line-height:1.25}
.assistant-output p{line-height:1.55}
.assistant-output > * + *, .assistant-output .panel > * + *{margin-top:10px}
.assistant-output ul,.assistant-output ol{margin:0; padding-left:22px}
.assistant-output li + li{margin-top:7px}
.assistant-output .acts{display:flex; flex-wrap:wrap; gap:8px}
.assistant-output .btn{max-width:100%; white-space:normal}
.assistant-output mjx-container{max-width:100%; overflow-x:auto; overflow-y:hidden}
@media (max-width:900px){
  .assistant-toggle{right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(88px + env(safe-area-inset-bottom,0px)); min-height:48px; font-size:15px}
  .assistant-panel{right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(148px + env(safe-area-inset-bottom,0px)); width:min(390px,calc(100vw - 24px - env(safe-area-inset-right,0px))); max-height:calc(100vh - 164px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); max-height:calc(100dvh - 164px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
@media (max-width:380px){
  .assistant-head{gap:8px; padding:12px}
  .assistant-head h2{font-size:20px}
  .assistant-head .eyebrow{font-size:9px}
  .assistant-emblem{width:36px; height:36px; border-radius:12px}
  .assistant-body{padding:14px}
}