/* =========================================================
   CAP STMG — Prépa Première STMG
   Design system : 4 thèmes commutables via [data-theme]
   ========================================================= */

/* ---------- Tokens partagés ---------- */
:root{
  /* Couleurs par matière (constantes sur tous les thèmes) */
  --sgn:#2F6BFF;
  --mng:#8B5CF6;
  --droit:#E8476E;
  --eco:#12A87C;

  --sp-1:.4rem; --sp-2:.75rem; --sp-3:1.1rem; --sp-4:1.6rem; --sp-5:2.4rem; --sp-6:3.4rem;
  --maxw:1120px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   THÈME 1 — FUN & COLORÉ  (par défaut)
   ========================================================= */
html[data-theme="fun"]{
  --bg:#F5F1FF;
  --bg-2:#ECE6FF;
  --surface:#FFFFFF;
  --surface-2:#FBF9FF;
  --line:#EAE2FF;
  --text:#241B4D;
  --muted:#7E76A6;
  --primary:#7C5CFF;
  --primary-ink:#FFFFFF;
  --primary-soft:#EFE9FF;
  --accent:#FF5C8A;
  --accent-2:#FFB02E;
  --good:#12A87C;
  --radius:22px;
  --radius-sm:14px;
  --radius-pill:999px;
  --shadow:0 14px 30px -16px rgba(124,92,255,.45);
  --shadow-lg:0 26px 60px -22px rgba(124,92,255,.5);
  --font-head:"Fredoka",system-ui,sans-serif;
  --font-body:"Fredoka",system-ui,sans-serif;
  --head-weight:600;
  --hero-bg:radial-gradient(120% 120% at 12% 0%, #EEE7FF 0%, #F8E9FF 45%, #FFEFE6 100%);
}

/* =========================================================
   THÈME 2 — ÉPURÉ
   ========================================================= */
html[data-theme="epure"]{
  --bg:#F7F7F8;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --line:#ECECEF;
  --text:#16161A;
  --muted:#8A8A93;
  --primary:#14141A;
  --primary-ink:#FFFFFF;
  --primary-soft:#F1F1F3;
  --accent:#4F46E5;
  --accent-2:#16161A;
  --good:#16A34A;
  --radius:14px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow:0 8px 24px -16px rgba(20,20,26,.28);
  --shadow-lg:0 18px 48px -24px rgba(20,20,26,.3);
  --font-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --head-weight:700;
  --hero-bg:linear-gradient(180deg,#FFFFFF,#F4F4F6);
}

/* =========================================================
   THÈME 3 — STUDIEUX  (rassurant, scolaire chaleureux)
   ========================================================= */
html[data-theme="studieux"]{
  --bg:#F4EEE3;
  --bg-2:#EFE7D7;
  --surface:#FFFDF8;
  --surface-2:#FBF6EC;
  --line:#E6DBC6;
  --text:#2E2718;
  --muted:#8C7E62;
  --primary:#1F4D5A;
  --primary-ink:#FBF6EC;
  --primary-soft:#E4EEEF;
  --accent:#B6792B;
  --accent-2:#8C3B3B;
  --good:#3C7A4E;
  --radius:12px;
  --radius-sm:9px;
  --radius-pill:7px;
  --shadow:0 12px 28px -18px rgba(70,55,25,.4);
  --shadow-lg:0 22px 50px -24px rgba(70,55,25,.4);
  --font-head:"Lora",Georgia,serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --head-weight:600;
  --hero-bg:linear-gradient(180deg,#FBF6EC,#F1E7D4);
}

/* =========================================================
   THÈME 4 — GAMING / ARCADE
   ========================================================= */
html[data-theme="gaming"]{
  --bg:#07060B;
  --bg-2:#0C0910;
  --surface:#131019;
  --surface-2:#1A141C;
  --line:#34222C;
  --text:#F7F1F4;
  --muted:#9E8A93;
  --primary:#FF2740;
  --primary-ink:#FFFFFF;
  --primary-soft:#2B0E15;
  --accent:#FF3D5A;
  --accent-2:#FF1744;
  --good:#22E0A0;
  --radius:14px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow:0 0 0 1px rgba(255,39,64,.26), 0 0 26px -8px rgba(255,39,64,.5), 0 18px 44px -22px rgba(255,39,64,.55);
  --shadow-lg:0 0 0 1px rgba(255,39,64,.34), 0 0 48px -8px rgba(255,39,64,.6), 0 26px 64px -20px rgba(255,39,64,.6);
  --font-head:"Chakra Petch","Space Grotesk",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --head-weight:700;
  --hero-bg:radial-gradient(120% 130% at 82% -12%, #3C0A15 0%, #1A060C 46%, #07060B 100%);
}
/* Halos lumineux du thème gaming */
html[data-theme="gaming"] body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 32% at 10% 6%, rgba(255,39,64,.20), transparent 70%),
    radial-gradient(42% 38% at 92% 2%, rgba(255,39,64,.16), transparent 70%),
    radial-gradient(55% 45% at 50% 116%, rgba(255,39,64,.14), transparent 70%);
}
html[data-theme="gaming"] .topbar,
html[data-theme="gaming"] .screen{position:relative;z-index:1}
html[data-theme="gaming"] .brand{text-shadow:0 0 18px rgba(255,39,64,.55)}
/* Titres Orbitron : un peu d'air + glow arcade */
html[data-theme="gaming"] h1,
html[data-theme="gaming"] h2,
html[data-theme="gaming"] h3,
html[data-theme="gaming"] h4{letter-spacing:.01em}
html[data-theme="gaming"] .hero h1{letter-spacing:.005em;text-shadow:0 0 26px rgba(255,39,64,.35)}
html[data-theme="gaming"] .eyebrow{letter-spacing:.2em}
html[data-theme="gaming"] .mission-tag,
html[data-theme="gaming"] .node-state{font-family:"Chakra Petch",var(--font-body);letter-spacing:.06em}
html[data-theme="gaming"] .lvl,
html[data-theme="gaming"] .score-ring b,
html[data-theme="gaming"] .xp-gain{font-family:"Chakra Petch",var(--font-body)}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:var(--sp-3);height:68px}
.brand{display:flex;align-items:center;gap:.6rem;white-space:nowrap;font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.22rem;letter-spacing:-.02em}
.logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--primary);color:var(--primary-ink);flex:none;box-shadow:var(--shadow)}
.logo svg{width:21px;height:21px}
.spacer{flex:1}

/* ---------- Sélecteur de thème ---------- */
.switcher{display:flex;align-items:center;gap:.3rem;background:var(--surface);border:1px solid var(--line);padding:.28rem;border-radius:var(--radius-pill);box-shadow:var(--shadow)}
.switcher button{
  display:flex;align-items:center;gap:.4rem;
  padding:.42rem .72rem;border-radius:var(--radius-pill);
  font-size:.82rem;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.switcher button .dot{width:13px;height:13px;border-radius:50%;flex:none}
.switcher button[aria-pressed="true"]{background:var(--primary-soft);color:var(--text)}
.switcher button:hover{color:var(--text)}
.sw-label{display:inline}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.5rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:1rem;font-family:var(--font-body);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
  will-change:transform;
}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-block{width:100%}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.08rem}
.btn-sm{padding:.6rem 1rem;font-size:.88rem}

/* ---------- Cartes & champs ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--sp-3)}
.field label{font-size:.84rem;font-weight:600;color:var(--muted)}
.field input,.field select{
  font-family:var(--font-body);font-size:1rem;color:var(--text);
  background:var(--surface-2);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:.85rem 1rem;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);background:var(--surface)}
.muted{color:var(--muted)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- Barres de progression ---------- */
.bar{height:9px;border-radius:999px;background:var(--primary-soft);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;width:0}

/* =========================================================
   ÉCRANS
   ========================================================= */
.screen{display:none}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- HOME ---------- */
.hero{background:var(--hero-bg);border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-6);align-items:center;padding-block:var(--sp-6)}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.hero .lead{font-size:1.18rem;color:var(--muted);margin-top:var(--sp-3);max-width:34ch}
.hero-cta{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}
.hero-stats{display:flex;gap:var(--sp-5);margin-top:var(--sp-5)}
.hero-stats b{display:block;font-family:var(--font-head);font-size:1.5rem}
.hero-stats span{font-size:.85rem;color:var(--muted)}

/* Carte aperçu (mini dashboard) */
.preview{position:relative}
.preview .card{padding:var(--sp-4)}
.subj-mini{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-top:1px solid var(--line)}
.subj-mini:first-of-type{border-top:none}
.subj-mini .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem;flex:none}
.subj-mini .nm{flex:1;font-weight:600;font-size:.92rem}
.subj-mini .bar{width:80px;flex:none}
.float-badge{position:absolute;right:-14px;top:-18px;background:var(--accent);color:#fff;padding:.5rem .85rem;border-radius:var(--radius-pill);font-weight:700;font-size:.85rem;box-shadow:var(--shadow);transform:rotate(4deg)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-4)}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);font-size:.88rem;font-weight:600}
.chip .dot{width:9px;height:9px;border-radius:50%}

/* ---------- AUTH (login / inscription) ---------- */
.auth{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:var(--sp-5) var(--sp-4)}
.auth-card{width:100%;max-width:430px}
.auth-card h2{font-size:1.75rem}
.auth-head{margin-bottom:var(--sp-4)}
.auth-foot{margin-top:var(--sp-3);text-align:center;font-size:.92rem;color:var(--muted)}
.auth-foot a{color:var(--accent);font-weight:700}
.link{color:var(--accent);font-weight:600;cursor:pointer}

/* ---------- DASHBOARD ---------- */
.dash{padding-block:var(--sp-5) var(--sp-6)}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dash-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
.level{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem 1rem;box-shadow:var(--shadow)}
.level .lvl{width:42px;height:42px;border-radius:12px;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;flex:none}
.level .xp{min-width:150px}
.level .xp .row{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;margin-bottom:.3rem}

.grid{display:grid;gap:var(--sp-3)}
.g-main{grid-template-columns:1.4fr .9fr;align-items:start}
@media(max-width:860px){.g-main{grid-template-columns:1fr}}

/* Leçon du jour */
.today{background:var(--primary);color:var(--primary-ink);border:none;overflow:hidden;position:relative}
.today .eyebrow{color:color-mix(in srgb,var(--primary-ink) 75%, transparent)}
.today h3{font-size:1.5rem;margin:.4rem 0 .2rem}
.today p{color:color-mix(in srgb,var(--primary-ink) 80%, transparent)}
.today .row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.today .meta{display:flex;gap:1rem;font-size:.9rem;font-weight:600;opacity:.9}
.today .btn-primary{background:var(--primary-ink);color:var(--primary)}
.glow{position:absolute;width:240px;height:240px;border-radius:50%;background:var(--accent);filter:blur(60px);opacity:.4;right:-60px;bottom:-90px}

/* Anneau de progression globale */
.ring-card{display:flex;align-items:center;gap:var(--sp-4)}
.ring{--p:0;width:120px;height:120px;border-radius:50%;flex:none;
  background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--primary-soft) 0);
  display:grid;place-items:center}
.ring::after{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font-family:var(--font-head);font-size:1.7rem}
@property --p{syntax:'<number>';inherits:false;initial-value:0}

/* Matières */
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)}
.section-title h3{font-size:1.25rem}
.subjects{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(max-width:680px){.subjects{grid-template-columns:1fr}}
.subj{display:block;text-align:left;transition:transform .15s var(--ease),box-shadow .2s}
.subj:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.subj .top{display:flex;align-items:center;gap:.8rem;margin-bottom:var(--sp-3)}
.subj .top > span:not([class]){flex:1;min-width:0}
.subj .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.subj .ic svg{width:24px;height:24px}
.subj .nm{display:block;font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.05rem;line-height:1.15}
.subj .sub{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem}
.subj .pct{margin-left:auto;font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.subj .lessons{font-size:.82rem;color:var(--muted);margin-top:.5rem}

/* Objectif hebdo + stats */
.objective .obj-row{display:flex;align-items:center;gap:.7rem;padding:.55rem 0}
.objective .check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;transition:.2s}
.objective .check.done{background:var(--good);border-color:var(--good);color:#fff}
.objective .obj-row.done span{color:var(--muted);text-decoration:line-through}
.objective .obj-row span{font-weight:600;font-size:.95rem}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:var(--sp-3)}
.stat b{display:block;font-family:var(--font-head);font-size:1.7rem}
.stat span{font-size:.82rem;color:var(--muted)}

/* ---------- Modale leçon/quiz ---------- */
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(10,8,24,.55);backdrop-filter:blur(4px);display:none;place-items:center;padding:var(--sp-4)}
.modal-bg.open{display:grid}
.modal{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--sp-5);position:relative}
.modal .close{position:absolute;top:14px;right:16px;font-size:1.4rem;color:var(--muted);width:34px;height:34px;border-radius:10px}
.modal .close:hover{background:var(--surface-2)}
.quiz-opt{display:block;width:100%;text-align:left;padding:.95rem 1.1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);font-weight:600;margin-bottom:.6rem}
.quiz-opt:not(.correct):not(.wrong):hover{border-color:var(--primary)}
.quiz-opt.correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--surface));font-weight:700}
.quiz-opt.wrong{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 15%,var(--surface))}
.reward{text-align:center}
.reward .big{font-size:3rem}
.reward h3{font-size:1.5rem;margin:.5rem 0}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--text);color:var(--bg);padding:.85rem 1.3rem;border-radius:var(--radius-pill);font-weight:700;z-index:80;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Confettis ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;width:9px;height:14px;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:var(--sp-4);padding-block:var(--sp-5)}
  .preview{order:-1;max-width:420px}
  .hero-stats{gap:var(--sp-4)}
}
@media(max-width:560px){
  .sw-label{display:none}
  .switcher button{padding:.45rem}
  .topbar .wrap{gap:.5rem}
  .hero-stats b{font-size:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =========================================================
   DASHBOARD GUIDÉ — v2
   ========================================================= */
.dash-head{align-items:flex-start}
.dash-hello h2{font-size:clamp(1.6rem,3.5vw,2.1rem)}
.global{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;font-size:.85rem;font-weight:700;max-width:380px}
.global .muted{font-weight:600}
.global .bar{flex:1;min-width:110px}
.global #global-bar{background:var(--primary)}

/* --- Mission du jour --- */
.mission{position:relative;overflow:hidden;padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);box-shadow:var(--shadow-lg)}
.mission-tag{align-self:flex-start;white-space:nowrap;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-ink);background:var(--primary);padding:.42rem .85rem;border-radius:var(--radius-pill);box-shadow:var(--shadow)}
.mission-body{display:flex;gap:var(--sp-3);align-items:flex-start;position:relative;z-index:1}
.mission-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;flex:none;box-shadow:var(--shadow)}
.mission-txt{min-width:0}
.mission-txt h3{font-size:clamp(1.35rem,3vw,1.85rem);margin:.3rem 0 .5rem}
.mission-txt p{color:var(--muted);max-width:62ch;line-height:1.55}
.mission-txt p b{color:var(--text)}
.mission-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.9rem;font-size:.88rem;font-weight:600;color:var(--muted)}
.mission-cta{align-self:flex-start;position:relative;z-index:1}
.mission-glow{position:absolute;right:-70px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--accent);filter:blur(75px);opacity:.22;pointer-events:none}
.mission-done{display:flex;gap:var(--sp-3);align-items:center}
.mission-done .md-emoji{font-size:2.8rem;flex:none}
.mission-done h3{font-size:1.4rem;margin:.2rem 0}
.mission-done p{color:var(--muted)}

/* --- Parcours (timeline verticale) --- */
.roadmap{position:relative;display:flex;flex-direction:column;gap:.25rem;padding:.2rem 0}
.roadmap::before{content:"";position:absolute;left:calc(.8rem + 19px);top:30px;bottom:30px;width:2px;background:var(--line);z-index:0}
.node{display:flex;align-items:center;gap:1rem;padding:.55rem .8rem;border-radius:var(--radius-sm);background:transparent;border:1px solid transparent;text-align:left;width:100%;position:relative;transition:transform .12s var(--ease)}
.node:hover{transform:translateX(2px)}
.node-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none;position:relative;z-index:1;background:var(--surface-2);color:var(--muted);border:2px solid var(--line)}
.node-label{flex:1;min-width:0;font-weight:700;font-size:.98rem}
.node-state{white-space:nowrap;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--muted);flex:none}
.node-done .node-dot{background:var(--c);color:#fff;border-color:transparent}
.node-done .node-state{color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent)}
.node-current{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.node-current .node-dot{background:var(--primary);color:var(--primary-ink);border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)}
.node-current .node-state{background:var(--primary);color:var(--primary-ink)}
.node-locked,.node-soon{cursor:default}
.node-locked .node-label,.node-soon .node-label{color:var(--muted);font-weight:600}
.node-locked .node-dot,.node-soon .node-dot{opacity:.7}

/* --- Sélecteur de matières --- */
.subjects-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.subj-pill{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:left;transition:transform .15s var(--ease),box-shadow .2s,border-color .2s}
.subj-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.subj-pill.is-active{border-color:var(--primary)}
.sp-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.78rem;flex:none}
.sp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45rem}
.sp-txt b{font-size:.95rem}
.sp-txt .bar{width:100%}
.sp-pct{font-family:var(--font-head);font-weight:700;font-size:1.05rem}
.logout{text-align:center;margin-top:var(--sp-5)}

/* =========================================================
   LECTEUR D'ACTIVITÉ
   ========================================================= */
.activity{position:fixed;inset:0;z-index:90;background:var(--bg);display:none;flex-direction:column}
.activity.open{display:flex}
.act-bar{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.act-bar-in{display:flex;align-items:center;gap:1rem;height:62px}
.act-close{width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--line);font-size:1.05rem;color:var(--text);flex:none}
.act-close:hover{background:var(--surface-2)}
.act-title{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.05rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-spacer{width:40px;flex:none}
.act-prog{height:5px;background:var(--primary-soft)}
.act-prog > i{display:block;height:100%;width:0;background:var(--primary)}
.act-body{flex:1;overflow-y:auto;padding:var(--sp-5) var(--sp-4) var(--sp-6)}
.stage{max-width:720px;margin:0 auto}

/* Étape notion */
.notion h2{font-size:clamp(1.6rem,4vw,2.2rem);margin:.4rem 0 .7rem}
.notion .lead{font-size:1.12rem;color:var(--text);margin-bottom:var(--sp-4);line-height:1.6}
.concepts{display:flex;flex-direction:column;gap:var(--sp-3)}
.concept{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.concept h4{font-size:1.05rem;margin-bottom:.35rem}
.concept p{color:var(--muted);line-height:1.55}
.takeaway{margin-top:var(--sp-4);background:var(--primary-soft);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.takeaway b{display:block;margin-bottom:.35rem}
.takeaway p{color:var(--text);opacity:.9;line-height:1.55}
.stage-foot{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.small{font-size:.85rem}

/* Étape QCM */
.quiz .q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);font-weight:700;font-size:.9rem}
.q-num{color:var(--primary)}
.q-score{color:var(--muted)}
.q-text{font-size:clamp(1.15rem,2.6vw,1.35rem);margin-bottom:var(--sp-4);line-height:1.35}
.q-opts{display:flex;flex-direction:column;gap:.7rem}
.q-opts .quiz-opt{margin-bottom:0}
.q-feedback{display:none;margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);font-size:.95rem;line-height:1.5}
.q-feedback.show{display:block}
.q-feedback b{display:block;margin-bottom:.2rem}
.q-feedback.ok{background:color-mix(in srgb,var(--good) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--good) 40%,transparent)}
.q-feedback.ko{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent-2) 38%,transparent)}
.quiz .stage-foot{align-items:stretch}

/* Étape résultat */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding-top:var(--sp-4)}
.res-emoji{font-size:3.2rem}
.score-ring{--p:0;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;position:relative;margin:.3rem 0;background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--primary-soft) 0)}
.score-ring.pass{background:conic-gradient(var(--good) calc(var(--p)*1%),var(--primary-soft) 0)}
.score-ring.fail{background:conic-gradient(var(--accent-2) calc(var(--p)*1%),var(--primary-soft) 0)}
.score-ring::after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:var(--bg)}
.score-ring b{position:relative;font-family:var(--font-head);font-size:2rem}
.score-ring small{font-size:1rem;opacity:.55;font-weight:600}
.result h2{font-size:1.6rem}
.res-msg{color:var(--muted);max-width:48ch;line-height:1.55}
.res-msg b{color:var(--text)}
.xp-gain{font-family:var(--font-head);font-weight:700;font-size:1.8rem;color:var(--accent);margin:.2rem 0}
.res-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:var(--sp-3);width:100%;max-width:430px}
.res-actions .btn{flex:1;min-width:160px}

/* ===== Parcours guidé enrichi (1.1.x) ===== */
.act-step{font-size:.82rem;font-weight:700;color:var(--muted);flex:none;white-space:nowrap}
.act-body.stage-in .stage{animation:stage-fade .28s ease}
@keyframes stage-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage .eyebrow{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.act-dur{display:inline-block;font-size:.82rem;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--pill);padding:.15rem .7rem;margin-bottom:var(--sp-3)}
.stage.notion > p{color:var(--text);line-height:1.65;margin-bottom:var(--sp-3);font-size:1.04rem}

/* Vidéo intégrée (16:9 responsive) */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 var(--sp-4);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Points-clés */
.key-points{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0}
.key-points b{display:block;font-family:var(--font-head);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:.5rem}
.key-points ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.key-points li{line-height:1.5;color:var(--text)}

/* Mini-vérification de compréhension */
.concept-check{margin-top:var(--sp-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.concept-check.nudge{animation:nudge .5s ease}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cc-q{font-weight:700;line-height:1.45;margin-bottom:.8rem}
.cc-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:var(--primary-soft);border-radius:var(--pill);padding:.15rem .55rem;margin-right:.5rem}
.cc-opts{display:flex;flex-direction:column;gap:.5rem}
.cc-opt{text-align:left;padding:.65rem .9rem;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--surface);font-size:.94rem;font-weight:600;transition:border-color .12s,background .12s}
.cc-opt:hover:not(:disabled){border-color:var(--primary)}
.cc-opt:disabled{cursor:default}
.cc-opt.ok{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.cc-opt.ko{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));color:var(--accent-2)}
.cc-fb{margin-top:.8rem;padding:.65rem .9rem;border-radius:var(--radius-sm);font-size:.9rem;line-height:1.5}
.cc-fb.ok{background:var(--good-soft);color:var(--good)}
.cc-fb.ko{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));color:var(--accent-2)}

/* QCM final */
.quiz-prog{display:flex;gap:5px;margin-bottom:var(--sp-4)}
.quiz-prog .qp{flex:1;height:6px;border-radius:999px;background:var(--line)}
.quiz-prog .qp.cur{background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary) inset}
.quiz-prog .qp.ok{background:var(--good)}
.quiz-prog .qp.ko{background:var(--accent-2)}
.q-prompt{font-size:clamp(1.15rem,2.6vw,1.35rem);margin-bottom:var(--sp-4);line-height:1.35}
.q-opt{text-align:left;padding:.85rem 1rem;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--surface);font-size:.98rem;font-weight:600;transition:border-color .12s,background .12s;width:100%}
.q-opt:hover:not(:disabled){border-color:var(--primary)}
.q-opt.chosen{border-color:var(--primary)}
.q-opt:disabled{cursor:default}
.q-opt.ok{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.q-opt.ko{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));color:var(--accent-2)}
.q-fb{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);font-size:.95rem;line-height:1.5}
.q-fb b{margin-right:.3rem}
.q-fb.ok{background:var(--good-soft);color:var(--good)}
.q-fb.ko{background:color-mix(in srgb,var(--accent-2) 12%,var(--surface));color:var(--accent-2)}

/* Note guide (intro) */
.guide-note{margin-top:var(--sp-4);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.guide-note b{display:block;margin-bottom:.3rem;font-family:var(--font-head)}
.guide-note p{color:var(--muted);line-height:1.55;font-size:.95rem}

/* Résultat enrichi */
.result-badge{font-size:3.4rem;line-height:1}
.result-badge.win{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.score-big{font-size:2.6rem;font-family:var(--font-head);margin:.2rem 0}
.score-big b{color:var(--primary)}
.result .lead{color:var(--muted);max-width:48ch;line-height:1.55}
.xp-pop{font-family:var(--font-head);font-weight:800;font-size:1.9rem;color:var(--accent);margin:.3rem 0;animation:pop .45s ease}
.result-meta{display:flex;gap:1.4rem;justify-content:center;margin:.6rem 0;font-weight:700;font-size:.9rem;color:var(--muted)}
.result-foot{flex-direction:row !important;justify-content:center;flex-wrap:wrap;width:100%;max-width:460px;margin-left:auto;margin-right:auto}
.result-foot .btn{flex:1;min-width:150px}
.result-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:var(--sp-6) 0;color:var(--muted)}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--primary-soft);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notion .stage-foot,.quiz .stage-foot:has(.q-prompt){flex-direction:row;justify-content:space-between;align-items:center;width:100%}
.stage-foot{flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:1rem}
.stage-foot .muted.small{flex:1}

@media(max-width:680px){
  .subjects-row{grid-template-columns:1fr}
}
@media(max-width:560px){
  .mission{padding:var(--sp-4)}
  .mission-body{flex-direction:column}
  .mission-cta{align-self:stretch}
  .node-label{font-size:.92rem}
}

/* =========================================================
   AJOUTS — version PHP (messages d'erreur d'auth, divers)
   ========================================================= */
.auth-error{
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  color:var(--text);
  padding:.7rem .9rem;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:600;margin-bottom:var(--sp-3);
}
.auth-notice{
  background:color-mix(in srgb, var(--good) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--good) 40%, var(--line));
  color:var(--text);
  padding:.7rem .9rem;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:600;margin-bottom:var(--sp-3);
}
.btn-soft{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
}
.btn-soft:hover{background:var(--primary-soft);border-color:var(--primary)}
.logout{margin-top:var(--sp-5);text-align:center}

/* ===== Landing page (sections de valorisation) ===== */
.lp-section{padding:var(--sp-6) var(--sp-4)}
.lp-h2{font-size:clamp(1.5rem,3.5vw,2.1rem);text-align:center;margin-bottom:.6rem}
.lp-sub{text-align:center;color:var(--muted);max-width:60ch;margin:0 auto var(--sp-5);line-height:1.6;font-size:1.05rem}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);max-width:1000px;margin:0 auto}
.lp-feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);text-align:center}
.lp-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin:0 auto .9rem;font-size:1.4rem;font-weight:800;color:#fff}
.lp-feat h3{font-size:1.1rem;margin-bottom:.4rem}
.lp-feat p{color:var(--muted);line-height:1.55;font-size:.95rem}
.lp-band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);max-width:900px;margin:0 auto}
.lp-step{text-align:center;padding:var(--sp-3)}
.lp-num{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.3rem;margin-bottom:.8rem}
.lp-step h3{font-size:1.1rem;margin-bottom:.35rem}
.lp-step p{color:var(--muted);line-height:1.55;font-size:.95rem}
.lp-faq{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.lp-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem}
.lp-faq summary{cursor:pointer;font-weight:700;font-family:var(--font-head)}
.lp-faq details[open] summary{margin-bottom:.5rem}
.lp-faq details p{color:var(--muted);line-height:1.6}
.lp-footer{border-top:1px solid var(--line);padding:var(--sp-5) var(--sp-4);text-align:center;color:var(--text)}
.lp-footer p{margin:.2rem 0}