/* ---- Police Inter (400 à 800, sans Black) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2')}
/* ============================================================
   Succès Exaucé — Design system (couleurs chaudes)
   Palette : terre cuite, ambre, ocre, crème, brun chaud
   ============================================================ */
:root{
  --bg:#FBF3E9; --surface:#FFFDF9; --surface-2:#F6EADA; --surface-3:#EEDCC8;
  --primary:#C0532B; --primary-strong:#9E3F1E; --accent:#D98A2B; --gold:#C0902B;
  --text:#3A2A20; --text-2:#7A6656; --text-3:#9C8877;
  --line:#E7D6C1; --line-2:#DCC6AC;
  --success:#6E8B3D; --success-bg:#EEF1DF; --error:#B23A2E; --error-bg:#FBE7E2;
  --warn-bg:#FBEBCF; --warn-tx:#7A5A1E; --focus:#9E3F1E;
  --shadow:0 1px 2px rgba(80,45,20,.06),0 8px 24px rgba(120,60,20,.06);
  --shadow-lg:0 12px 40px rgba(120,60,20,.14);
  --fs:16px; --dur:200ms; --radius:16px; --nav-w:248px;
  --c-svt:#6E8B3D; --c-maths:#C0532B; --c-pct:#D98A2B; --c-fr:#9C5A3C;
  --c-ang:#3E7C74; --c-philo:#7A5AA6; --c-eco:#B8862B;
}
html[data-theme="dark"]{
  --bg:#211812; --surface:#2C2019; --surface-2:#382A20; --surface-3:#453427;
  --primary:#E9895A; --primary-strong:#F2A57B; --accent:#E6AC55; --gold:#DDB159;
  --text:#F4E9DB; --text-2:#C7B29C; --text-3:#A28C77;
  --line:#493829; --line-2:#5A4632;
  --success:#AAC46E; --success-bg:#2E3320; --error:#E88C7D; --error-bg:#3A241F;
  --warn-bg:#3E3018; --warn-tx:#EAD3A2; --focus:#F2A57B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:0 14px 44px rgba(0,0,0,.5);
  --c-svt:#9FC062; --c-maths:#E9895A; --c-pct:#E6AC55; --c-fr:#C98A66;
  --c-ang:#66B3A9; --c-philo:#A98FD4; --c-eco:#DDB159;
}

/* ---- Couleur caractéristique par série (colore tout l'espace) ---- */
:root{--serie:#C0532B;--serie-2:#9E3F1E}
html[data-serie="A"]{--serie:#8E5AA6;--serie-2:#6D3F85;--primary:#8E5AA6;--primary-strong:#6D3F85;--accent:#8E5AA6;--focus:#6D3F85}
html[data-serie="B"]{--serie:#0E8F8F;--serie-2:#0A6E6E;--primary:#0E8F8F;--primary-strong:#0A6E6E;--accent:#0E8F8F;--focus:#0A6E6E}
html[data-serie="C"]{--serie:#2F6BD4;--serie-2:#1F51AC;--primary:#2F6BD4;--primary-strong:#1F51AC;--accent:#2F6BD4;--focus:#1F51AC}
html[data-serie="D"]{--serie:#2E9E5B;--serie-2:#1F7A44;--primary:#2E9E5B;--primary-strong:#1F7A44;--accent:#2E9E5B;--focus:#1F7A44}
html[data-serie="G"]{--serie:#D9480F;--serie-2:#A8380C;--primary:#D9480F;--primary-strong:#A8380C;--accent:#D9480F;--focus:#A8380C}
/* Le fond de l'espace suit la teinte de la série (aplats, sans dégradé) */
html[data-serie]{
  --bg:color-mix(in srgb,var(--serie) 9%,#FDF8F1);
  --surface:color-mix(in srgb,var(--serie) 3%,#FFFDF9);
  --surface-2:color-mix(in srgb,var(--serie) 9%,#FAF1E6);
  --surface-3:color-mix(in srgb,var(--serie) 15%,#EFE1CF);
  --line:color-mix(in srgb,var(--serie) 14%,#E7D6C1);
  --line-2:color-mix(in srgb,var(--serie) 20%,#DCC6AC);
}
/* variantes claires pour le thème sombre (meilleur contraste) */
html[data-theme="dark"][data-serie="A"]{--serie:#B98AD0;--serie-2:#CBA6DE;--primary:#B98AD0;--primary-strong:#CBA6DE;--accent:#B98AD0}
html[data-theme="dark"][data-serie="B"]{--serie:#38B5B5;--serie-2:#5FC9C9;--primary:#38B5B5;--primary-strong:#5FC9C9;--accent:#38B5B5}
html[data-theme="dark"][data-serie="C"]{--serie:#6C9BEC;--serie-2:#8FB4F1;--primary:#6C9BEC;--primary-strong:#8FB4F1;--accent:#6C9BEC}
html[data-theme="dark"][data-serie="D"]{--serie:#5BC489;--serie-2:#7FD3A3;--primary:#5BC489;--primary-strong:#7FD3A3;--accent:#5BC489}
html[data-theme="dark"][data-serie="G"]{--serie:#F0824F;--serie-2:#F4A079;--primary:#F0824F;--primary-strong:#F4A079;--accent:#F0824F}
html[data-theme="dark"][data-serie]{
  --bg:color-mix(in srgb,var(--serie) 12%,#1A120D);
  --surface:color-mix(in srgb,var(--serie) 8%,#2B1F18);
  --surface-2:color-mix(in srgb,var(--serie) 11%,#372A20);
  --surface-3:color-mix(in srgb,var(--serie) 15%,#443426);
  --line:color-mix(in srgb,var(--serie) 16%,#493829);
  --line-2:color-mix(in srgb,var(--serie) 22%,#5A4632);
}
html[data-text="1"]{--fs:17.5px} html[data-text="2"]{--fs:19px}
html[data-motion="reduced"] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--text);font-size:var(--fs);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;cursor:pointer;color:inherit;border:none;background:none}
a{color:var(--primary-strong);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
svg{display:block}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.skip{position:absolute;left:12px;top:-64px;background:var(--primary);color:#fff;padding:10px 16px;border-radius:10px;z-index:200;font-weight:700;transition:top var(--dur)}
.skip:focus{top:12px}
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--nav-w);flex-shrink:0;position:sticky;top:0;height:100vh;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;gap:4px;overflow-y:auto}
.brand{display:flex;gap:11px;align-items:center;padding:6px 8px 16px}
.brand .mark{width:42px;height:42px;border-radius:12px;flex-shrink:0;background:var(--serie);
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
.brand .txt b{display:block;font-size:1.02rem;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.1}
.brand .txt small{display:block;font-size:.68rem;color:var(--text-2);font-weight:600;margin-top:2px}
.nav-group{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:12px 12px 4px}
.navlink{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--text-2);
  font-weight:600;font-size:.92rem;width:100%;text-align:left;position:relative;transition:background var(--dur),color var(--dur)}
.navlink:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.navlink[aria-current="page"]{background:color-mix(in srgb,var(--serie) 14%,transparent);color:var(--serie-2)}
.navlink[aria-current="page"] svg{color:var(--serie)}
.navlink .nb{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center}
.sidebar .series-pill{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.series-pill small{color:var(--text-2);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.series-pill .cur{display:flex;align-items:center;gap:8px;margin-top:6px;font-weight:800;color:var(--primary-strong)}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none}
main{flex:1;padding:28px 32px 40px;max-width:1080px;width:100%;margin:0 auto}
.bottomnav{display:none}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;line-height:1.15}
h2{font-size:1.15rem;font-weight:800;margin:26px 0 12px;letter-spacing:-.01em}
h3{font-size:1rem;font-weight:700;margin-bottom:6px}
p{margin-bottom:10px} .muted{color:var(--text-2);font-size:.9rem}
.lead{color:var(--text-2);font-size:1rem;margin-bottom:8px;max-width:66ch}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--primary);margin-bottom:10px}
.disclaimer{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn-tx);font-size:.82rem;padding:11px 14px;border-radius:12px;margin-bottom:20px;line-height:1.5}
.disclaimer svg{flex-shrink:0;margin-top:1px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
.card.pad-sm{padding:15px}
.card.hero{background:color-mix(in srgb,var(--serie) 8%,var(--surface));border-color:var(--line-2)}
.grid{display:grid;gap:14px}
.grid.cols{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid.stat{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.statbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.statbox b{display:block;font-size:1.7rem;font-weight:800;color:var(--primary);line-height:1}
.statbox .sl{display:flex;align-items:center;gap:7px;color:var(--text-2);font-size:.82rem;font-weight:600;margin-top:8px}
.notion{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:16px;border:1px solid var(--line);
  border-radius:15px;background:var(--surface);box-shadow:var(--shadow);transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur)}
.notion:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.notion .ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;color:#fff}
.notion .meta{flex:1;min-width:0}
.notion .meta b{display:block;font-weight:700;margin-bottom:5px;line-height:1.25}
.notion .meta .sub{font-size:.78rem;color:var(--text-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--surface-3);color:var(--text-2);letter-spacing:.02em}
.tag.SVT{background:color-mix(in srgb,var(--c-svt) 18%,transparent);color:var(--c-svt)}
.tag.Maths{background:color-mix(in srgb,var(--c-maths) 16%,transparent);color:var(--c-maths)}
.tag.PCT{background:color-mix(in srgb,var(--c-pct) 20%,transparent);color:color-mix(in srgb,var(--c-pct) 78%,var(--text))}
.tag.Français{background:color-mix(in srgb,var(--c-fr) 18%,transparent);color:var(--c-fr)}
.tag.Anglais{background:color-mix(in srgb,var(--c-ang) 18%,transparent);color:var(--c-ang)}
.tag.Philosophie{background:color-mix(in srgb,var(--c-philo) 18%,transparent);color:var(--c-philo)}
.tag.Économie{background:color-mix(in srgb,var(--c-eco) 20%,transparent);color:color-mix(in srgb,var(--c-eco) 80%,var(--text))}
.tag.s{background:var(--surface-3);color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;
  background:var(--primary);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:background var(--dur),transform var(--dur)}
.btn:hover{background:var(--primary-strong);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--primary-strong);border:1.5px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{min-height:38px;padding:0 14px;font-size:.86rem}
.btn.gold{background:var(--gold)} .btn.gold:hover{filter:brightness(.94)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.reason{display:flex;gap:9px;align-items:flex-start;background:var(--surface-2);border-left:3px solid var(--accent);
  padding:11px 14px;border-radius:0 10px 10px 0;font-size:.88rem;color:var(--text-2);margin:12px 0;line-height:1.5}
.reason svg{flex-shrink:0;color:var(--accent);margin-top:2px}
.reason.ok{border-color:var(--success)} .reason.ok svg{color:var(--success)}
.lesson h3{margin-top:16px;display:flex;align-items:center;gap:8px}
.lesson h3 .dot{width:7px;height:7px;border-radius:2px;background:var(--accent);flex-shrink:0}
.lesson p{color:var(--text);margin-bottom:2px}
.checkbox{background:var(--success-bg);border:1px solid color-mix(in srgb,var(--success) 30%,transparent);border-radius:12px;padding:12px 14px;margin:12px 0}
.checkbox .q{font-weight:700;display:flex;gap:8px;align-items:flex-start}
.checkbox .q svg{color:var(--success);flex-shrink:0;margin-top:2px}
.checkbox .a{color:var(--text-2);font-size:.9rem;margin-top:6px;padding-left:26px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--surface);margin-bottom:10px;min-height:46px;transition:border-color var(--dur),background var(--dur)}
.opt:hover:not(:disabled){border-color:var(--primary)}
.opt .mk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0;display:grid;place-items:center;margin-top:1px;color:transparent}
.opt.correct{border-color:var(--success);background:var(--success-bg)}
.opt.correct .mk{background:var(--success);border-color:var(--success);color:#fff}
.opt.wrong{border-color:var(--error);background:var(--error-bg)}
.opt.wrong .mk{background:var(--error);border-color:var(--error);color:#fff}
.opt .ol{flex:1}
.opt .fb{display:none;margin-top:7px;font-size:.83rem;color:var(--text-2);line-height:1.45}
.opt.reveal .fb{display:block}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.qcard .qh{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:8px}
.qcard .qs{font-weight:600;margin-bottom:12px}
.exo{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:12px;overflow:hidden}
.exo summary{padding:14px 16px;font-weight:600;cursor:pointer;display:flex;gap:10px;align-items:center;list-style:none}
.exo summary::-webkit-details-marker{display:none}
.exo summary .lvl{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.exo summary .chev{margin-left:auto;transition:transform var(--dur);color:var(--text-3)}
.exo[open] summary .chev{transform:rotate(90deg)}
.exo .sol{padding:0 16px 16px;color:var(--text-2);font-size:.92rem;border-top:1px solid var(--line);padding-top:12px}
.exo .sol b{color:var(--success)}
.progress{height:9px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--serie);transition:width 400ms}
.ring{flex-shrink:0}
.seg{display:inline-flex;border:1.5px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--surface);flex-wrap:wrap}
.seg button{padding:10px 16px;min-height:44px;border-right:1px solid var(--line);font-weight:600;color:var(--text-2);transition:background var(--dur)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--primary);color:#fff;font-weight:700}
.field{display:block;margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:6px;color:var(--text-2)}
input[type=search],input[type=date],input[type=text],select{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;min-height:46px}
.searchwrap{position:relative}
.searchwrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.searchwrap input{padding-left:42px}
.setting{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:none}
.setting .lbl{flex:1}.setting .lbl b{display:block}.setting .lbl small{color:var(--text-2);font-size:.82rem}
.switch{position:relative;width:52px;height:30px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .tr{position:absolute;inset:0;background:var(--surface-3);border-radius:999px;transition:background var(--dur)}
.switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:left var(--dur);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.tr{background:var(--primary)}
.switch input:checked+.tr::after{left:25px}
.crumb{display:inline-flex;align-items:center;gap:5px;color:var(--primary-strong);font-size:.88rem;font-weight:600;padding:8px 0;margin-bottom:8px}
.crumb:hover{text-decoration:underline}
.empty{text-align:center;color:var(--text-2);padding:44px 16px}
.empty svg{color:var(--line-2);margin:0 auto 12px}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.9rem;color:var(--primary)}
.timer.warn{color:var(--error)}
.divider{height:1px;background:var(--line);margin:22px 0}
.serie-card{text-align:left;padding:20px;border:1.5px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur);width:100%}
.serie-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.serie-card[data-active="true"]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.serie-card .sh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.serie-card .sbadge{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;background:var(--serie)}
.serie-card h3{margin:0}
.serie-card .desc{color:var(--text-2);font-size:.88rem}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:300;box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.scrim{position:fixed;inset:0;background:rgba(40,20,10,.45);z-index:150;opacity:0;pointer-events:none;transition:opacity var(--dur)}
.scrim.open{opacity:1;pointer-events:auto}
@media (max-width:820px){
  :root{--radius:15px}
  .sidebar{position:fixed;left:0;top:0;z-index:160;transform:translateX(-102%);transition:transform var(--dur);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 14px}
  .topbar .mbtn{width:44px;height:44px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;border:1px solid var(--line)}
  .topbar .tt{font-weight:800;color:var(--primary);font-size:.98rem;letter-spacing:-.01em}
  .topbar .tt small{display:block;font-size:.62rem;color:var(--text-2);font-weight:600}
  .topbar .sp{margin-left:auto}
  main{padding:18px 16px 96px}
  h1{font-size:1.45rem}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px env(safe-area-inset-bottom)}
  .bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;min-height:56px;color:var(--text-3);font-size:.64rem;font-weight:700;border-radius:10px;position:relative}
  .bottomnav button[aria-current="page"]{color:var(--serie)}
  .bottomnav button .nb{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--error);color:#fff;font-size:.58rem;font-weight:800;display:grid;place-items:center}
}
@media (min-width:821px){ .scrim{display:none} }
@media (max-width:400px){ .bottomnav button span.lb{font-size:.56rem} }

/* ============ Barre de navigation contextuelle ============ */
.pagebar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ibtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;min-height:40px;border-radius:10px;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--text-2);font-weight:600;font-size:.85rem;box-shadow:var(--shadow);transition:background var(--dur),color var(--dur),border-color var(--dur)}
.ibtn:hover{background:var(--surface-2);color:var(--text);border-color:var(--serie)}
.ibtn.accent{color:var(--serie-2);border-color:color-mix(in srgb,var(--serie) 40%,var(--line-2))}
.ibtn.primary{background:var(--primary);color:#fff;border-color:transparent}
.ibtn.primary:hover{background:var(--primary-strong);color:#fff}
.ibtn.danger{color:var(--error);border-color:color-mix(in srgb,var(--error) 40%,var(--line-2))}
.spacerx{margin-left:auto}

/* ============ Landing page ============ */
.landing{max-width:1120px;margin:0 auto;padding:0}
.landing .hero{position:relative;overflow:hidden;border-radius:26px;padding:56px 40px;margin-bottom:32px;
  background:color-mix(in srgb,var(--serie) 12%,var(--surface));
  border:1px solid var(--line-2)}
.landing .hero::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;
  background:color-mix(in srgb,var(--serie) 14%,transparent);pointer-events:none}
.landing .hlogo{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;color:#fff;margin-bottom:22px;
  background:var(--serie);box-shadow:var(--shadow-lg)}
.landing .hero h1{font-size:2.5rem;line-height:1.08;letter-spacing:-.03em;margin-bottom:14px;max-width:16ch}
.landing .hero p.sub{font-size:1.12rem;color:var(--text-2);max-width:54ch;margin-bottom:26px}
.landing .cta{display:flex;flex-wrap:wrap;gap:12px}
.landing .btn.xl{min-height:54px;padding:0 26px;font-size:1.02rem;border-radius:14px}
.landing .kpis{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px}
.landing .kpi b{font-size:1.9rem;font-weight:800;color:var(--serie-2);display:block;line-height:1}
.landing .kpi span{font-size:.82rem;color:var(--text-2);font-weight:600}
.section-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px}
.section-sub{color:var(--text-2);max-width:60ch;margin-bottom:20px}
.feature{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);transition:transform var(--dur),box-shadow var(--dur)}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature .fi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:14px;background:var(--serie)}
.feature h3{font-size:1.05rem;margin-bottom:6px}
.feature p{color:var(--text-2);font-size:.9rem;margin:0}
.subject-pill{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;font-size:.9rem;box-shadow:var(--shadow)}
.subject-pill .si{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.serie-mini{padding:18px;border-radius:16px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.serie-mini b{font-size:1.5rem;font-weight:800;display:block}
.serie-mini span{opacity:.92;font-size:.86rem}
.landing-footer{margin-top:40px;padding:28px 24px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.landing-footer .cols2{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.landing-footer a{color:var(--text-2);font-weight:600;font-size:.88rem;display:block;padding:3px 0}
.landing-footer a:hover{color:var(--serie-2)}

/* ============ Prose légale / aide ============ */
.prose{max-width:74ch}
.prose h2{font-size:1.2rem;margin:26px 0 8px}
.prose h3{font-size:1rem;margin:18px 0 4px;color:var(--serie-2)}
.prose p{color:var(--text);margin-bottom:10px}
.prose ul{margin:6px 0 12px;padding-left:22px}
.prose li{margin-bottom:6px}
.contact-card{display:flex;flex-wrap:wrap;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);margin:14px 0}
.contact-card a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--serie-2)}
.copyright{color:var(--text-3);font-size:.82rem;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}

/* ============ Glossaire ============ */
.gloss-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px;box-shadow:var(--shadow)}
.gloss-item .gt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gloss-item .gt b{font-size:1.02rem}
.gloss-item .gd{color:var(--text-2);font-size:.92rem;margin-top:6px}
.gloss-letter{font-size:1.4rem;font-weight:800;color:var(--serie);margin:18px 0 8px;letter-spacing:-.02em}

/* ============ Assistant IA ============ */
.chat{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.msg{max-width:88%;padding:13px 16px;border-radius:16px;line-height:1.55;box-shadow:var(--shadow);white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.bot .src{margin-top:10px;font-size:.8rem;color:var(--text-2)}
.msg.bot .src a{font-weight:700;color:var(--serie-2)}
.composer{border:1.5px solid var(--line-2);border-radius:16px;background:var(--surface);padding:12px;box-shadow:var(--shadow)}
.composer textarea{width:100%;border:none;background:none;resize:vertical;min-height:64px;color:var(--text);font:inherit;outline:none}
.composer .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.suggests{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.suggests button{padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font-size:.82rem;font-weight:600}
.suggests button:hover{border-color:var(--serie);color:var(--serie-2)}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--serie) 16%,transparent);color:var(--serie-2)}

/* ============ Divers ============ */
.footer-mini{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--text-3);font-size:.8rem;text-align:center}
.footer-mini a{color:var(--text-2)}
.sidebar .copyr{padding:10px 12px 2px;color:var(--text-3);font-size:.68rem;line-height:1.4}
.install-cta{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--serie) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--serie) 30%,var(--line));margin-bottom:16px}
.install-cta .ii{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--serie);flex-shrink:0}
@media (max-width:820px){
  .landing .hero{padding:38px 22px;border-radius:20px}
  .landing .hero h1{font-size:1.9rem}
  .landing .kpis{gap:18px}
}

/* Couleurs des étiquettes matières additionnelles */
.tag.Informatique{background:color-mix(in srgb,var(--c-ang) 18%,transparent);color:var(--c-ang)}
.tag.Comptabilité{background:color-mix(in srgb,var(--c-eco) 20%,transparent);color:color-mix(in srgb,var(--c-eco) 80%,var(--text))}
.tag.Droit{background:color-mix(in srgb,var(--c-fr) 18%,transparent);color:var(--c-fr)}
.tag.HistoireGéo{background:color-mix(in srgb,var(--c-pct) 20%,transparent);color:color-mix(in srgb,var(--c-pct) 78%,var(--text))}
.tag.Espagnol{background:color-mix(in srgb,var(--c-maths) 16%,transparent);color:var(--c-maths)}

/* Explications + */
.plus-card{background:color-mix(in srgb,var(--serie) 6%,var(--surface));border-color:color-mix(in srgb,var(--serie) 28%,var(--line))}
.plus-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--serie-2);margin-bottom:10px;font-size:1rem}
.plus-block{margin-bottom:8px}
.plus-block h3{font-size:.96rem;margin:12px 0 4px;color:var(--text)}
.plus-block p{color:var(--text);margin:0}

/* Illustrations / schémas */
.figure{margin:0 0 14px}
.figbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;justify-content:center;color:var(--serie)}
.figbox svg{max-width:100%;height:auto}
.figure figcaption{display:flex;align-items:center;gap:6px;justify-content:center;color:var(--text-2);font-size:.82rem;margin-top:8px;font-style:italic}
/* Exemples concrets */
.ex-card{background:color-mix(in srgb,var(--serie) 5%,var(--surface))}
.ex-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--serie-2);margin-bottom:10px;font-size:1rem}
.ex-item{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px;line-height:1.5}
.ex-item svg{color:var(--serie);flex-shrink:0;margin-top:3px}
/* Points d'attention */
.att-card{background:var(--warn-bg);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.att-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--warn-tx);margin-bottom:10px;font-size:1rem}
.att-item{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px;line-height:1.5;color:var(--warn-tx)}
.att-item svg{flex-shrink:0;margin-top:3px}
/* Astuce + */
.astuce{display:flex;gap:11px;align-items:flex-start;background:color-mix(in srgb,var(--serie) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--serie) 32%,var(--line));border-radius:14px;padding:14px 16px}
.astuce svg{color:var(--serie);flex-shrink:0;margin-top:2px}
.astuce b{color:var(--serie-2)}
/* Exercices enrichis */
.exo-body{padding:14px 16px 16px}
.consigne{margin-bottom:12px;line-height:1.55}
.cbadge{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:6px;background:var(--serie);color:#fff;margin-right:8px;vertical-align:1px}
.exo .sol{margin:0 0 0;border-top:1px solid var(--line);padding-top:12px}
.exo-tip{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--serie) 8%,var(--surface));font-size:.9rem;line-height:1.5}
.exo-tip svg{color:var(--serie);flex-shrink:0;margin-top:2px}.exo-tip b{color:var(--serie-2)}
.exo-warn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-tx);font-size:.9rem;line-height:1.5}
.exo-warn svg{flex-shrink:0;margin-top:2px}