/* Classy — feuille de style (design « Azur » : bleu et blanc, barre latérale, grille de blocs) */
/* --- Mécanique : vidéo, graphes, animations --- */
[hidden]{display:none!important}
body{overflow-x:hidden}
.app>*{min-width:0}
.vis{width:100%;height:auto;display:block;overflow:hidden}
.vis line,.vis path{fill:none;stroke-linecap:round}
.vis .ax{stroke:var(--ax);stroke-width:1.5}
.vis .gl{stroke:var(--ax);opacity:.18}
.vis line.d{stroke:var(--d);stroke-width:3.5}
.vis line.o{stroke:var(--o);stroke-width:3.5}
.vis .ghost{opacity:.3;stroke-dasharray:6 6}
.vis .guide{stroke:var(--ax);stroke-dasharray:3 4;stroke-width:1.2}
.vis .arrow{stroke:var(--tx);stroke-width:2}
.vis text{fill:var(--tx);font-size:11px;font-family:inherit}
.vis text.tk{opacity:.6;font-size:10px}
.vis text.tl{font-weight:700;font-size:13px}
.vis text.d{fill:var(--d)}
.vis text.o{fill:var(--o)}
.vis text.big{font-size:14px;font-weight:700}
.vis .e{fill:var(--e)}
.vis .fd{fill:var(--d)} .vis .fo{fill:var(--o)}
.vis .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:cl-draw 1.1s ease forwards}
.vis .pop{opacity:0;animation:cl-pop .5s ease forwards;animation-delay:1s}
.vis .pulse{animation:cl-pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes cl-draw{to{stroke-dashoffset:0}}
@keyframes cl-pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cl-pulse{50%{transform:scale(1.35)}}
.player .stage{position:relative;overflow:hidden}
.player .scene{position:absolute;inset:0;display:flex;flex-direction:column}
.player .scene .vis{flex:1;min-height:0}
.player .cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;cursor:pointer;font:inherit}
.player .controls{display:flex;align-items:center;gap:10px}
.player .controls button{cursor:pointer}
.player .segs{display:flex;gap:4px;flex:1}
.player .segs span{flex:1;height:5px;overflow:hidden;cursor:pointer}
.player .segs i{display:block;height:100%;width:0}
.chart .ctrls label{display:flex;align-items:center;gap:10px}
.chart .ctrls input{flex:1}
.opt{cursor:pointer;text-align:left;font:inherit}
.opt:disabled{cursor:default}
@media (prefers-reduced-motion:reduce){.vis .draw{animation:none;stroke-dashoffset:0}.vis .pop{animation:none;opacity:1}.vis .pulse{animation:none}}

/* --- Design --- */
/* Modèle 4 — « Azur » : mix du 1 (clair, cartes douces, arrondies) et du 3 (barre latérale de
   progression, grille de blocs, graphe avec réglages à droite). Palette bleu et blanc. */
:root{
  --bg:#f3f7ff; --surface:#fff; --ink:#0f1f3d; --muted:#5c6b87; --line:#dfe7f5;
  --blue:#2563eb; --blue-d:#1d3fae; --navy:#0f2a5f; --sky:#38bdf8; --sky-soft:#e0f2fe; --blue-soft:#e6eeff;
  --d:#1d4ed8; --o:#38bdf8; --e:#0f1f3d; --ax:#94a3bf; --tx:#0f1f3d;
  --up:#0f9f6e; --up-soft:#dff7ee; --down:#e5484d; --down-soft:#ffe8e8;
  --r:22px; --shadow:0 1px 2px rgba(15,42,95,.05),0 10px 30px rgba(15,42,95,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;min-height:100vh}
button{font:inherit;color:inherit}
b{font-weight:700;color:var(--blue-d)}
.app{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
body[data-step="home"] .app,body[data-step="loading"] .app{grid-template-columns:1fr}

/* Barre latérale bleue */
.top{position:sticky;top:0;height:100vh;padding:26px 18px;background:linear-gradient(170deg,var(--blue) 0%,var(--navy) 100%);color:#fff;display:flex;flex-direction:column;gap:22px}
body[data-step="home"] .top,body[data-step="loading"] .top{position:absolute;height:auto;background:none;color:var(--ink);padding:24px 32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800;font-size:25px;letter-spacing:-.03em}
.logo-mark{width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 6px 16px rgba(15,42,95,.25);position:relative}
.logo-mark::after{content:"C";position:absolute;inset:0;display:grid;place-items:center;color:var(--blue);font-size:18px}
body[data-step="home"] .logo-mark,body[data-step="loading"] .logo-mark{background:linear-gradient(135deg,var(--blue),var(--sky))}
body[data-step="home"] .logo-mark::after,body[data-step="loading"] .logo-mark::after{color:#fff}
.course-tag{font-size:13px;line-height:1.45;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12)}
.course-tag::before{content:"COURS ACTUEL";display:block;font-size:10px;font-weight:700;letter-spacing:.14em;color:#bfe3ff;margin-bottom:4px}
.steps{display:flex;flex-direction:column;position:relative}
.steps::before{content:"";position:absolute;left:16px;top:18px;bottom:18px;width:2px;background:rgba(255,255,255,.18)}
.step{position:relative;display:flex;align-items:center;gap:12px;padding:9px 8px;text-decoration:none;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;border-radius:12px}
.step:hover{background:rgba(255,255,255,.08)}
.step .sn{position:relative;z-index:1;flex:none;width:20px;height:20px;margin-left:-1px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:var(--navy);border:2px solid rgba(255,255,255,.35)}
.step.done{color:#fff}
.step.done .sn{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.step.current{background:#fff;color:var(--blue);font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.step.current .sn{background:var(--blue);border-color:var(--blue);color:#fff}

.view{padding:34px 44px 150px;max-width:1080px;width:100%}

/* Accueil */
body[data-step="home"] .view,body[data-step="loading"] .view{max-width:none;min-height:100vh;display:grid;place-items:center;padding:90px 20px 40px;
  background:radial-gradient(620px 420px at 30% 30%,rgba(56,189,248,.18),transparent 70%),radial-gradient(620px 420px at 75% 70%,rgba(37,99,235,.14),transparent 70%)}
.home{width:min(740px,100%);text-align:center}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.home .kicker{margin-bottom:16px}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:66px 32px;border-radius:32px;background:var(--surface);box-shadow:0 30px 70px rgba(37,99,235,.16);cursor:pointer;isolation:isolate;transition:.25s}
.drop::before{content:"";position:absolute;inset:-3px;border-radius:35px;z-index:-1;background:linear-gradient(135deg,var(--sky),var(--blue),var(--navy))}
.drop::after{content:"";position:absolute;inset:0;border-radius:32px;background:var(--surface);z-index:-1}
.drop:hover,.drop.over,.drop:focus-visible{transform:translateY(-4px);box-shadow:0 36px 80px rgba(37,99,235,.26);outline:none}
.drop-icon{width:86px;height:86px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;box-shadow:0 12px 26px rgba(37,99,235,.35)}
.drop-title{font-size:clamp(34px,6vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1.05;background:linear-gradient(90deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.drop-sub{color:var(--muted);max-width:440px}
.drop-btn{margin-top:8px;padding:13px 28px;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 10px 24px rgba(37,99,235,.35)}
.drop-formats{font-size:12px;color:var(--muted)}
.demo{margin-top:20px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px}
.demo u{color:var(--blue);text-underline-offset:3px;font-weight:600}

/* Chargement */
.loading{width:min(440px,100%);text-align:center}
.loader{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;border:6px solid var(--blue-soft);border-top-color:var(--blue);border-right-color:var(--sky);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading h2{font-size:30px;letter-spacing:-.03em}
.file{color:var(--muted);font-size:14px;margin:4px 0 20px}
.lsteps{list-style:none;text-align:left;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 20px}
.lsteps li{padding:9px 0 9px 32px;position:relative;color:var(--muted)}
.lsteps li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:var(--line)}
.lsteps li.now{color:var(--ink);font-weight:600}
.lsteps li.now::before{background:var(--blue);box-shadow:0 0 0 5px var(--blue-soft)}
.lsteps li.done{color:var(--ink)}
.lsteps li.done::before{content:"✓";background:var(--sky);color:#fff;font-size:11px;display:grid;place-items:center}
.note{font-size:12px;color:var(--muted);margin-top:14px}

.page-head{margin-bottom:26px}
.page-head h1{font-size:clamp(32px,5vw,48px);line-height:1.06;letter-spacing:-.04em;margin:6px 0 10px;max-width:820px}
.lead{color:var(--muted);font-size:17px;max-width:660px}

/* Lecteur */
.player{background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:10px;margin-bottom:22px}
.player .stage{aspect-ratio:16/9;max-height:520px;width:100%;border-radius:18px;background:linear-gradient(160deg,#f8fbff,#e3eeff);--bg-vis:#eef4ff}
.player .scene{padding:18px 26px 10px}
.scene-t{font-size:21px;letter-spacing:-.02em;color:var(--navy);animation:fade .5s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.player .cover{background:linear-gradient(135deg,rgba(37,99,235,.93),rgba(56,189,248,.88));color:#fff}
.bigplay{width:80px;height:80px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:27px;padding-left:5px;box-shadow:0 12px 30px rgba(15,42,95,.3);transition:.2s}
.cover:hover .bigplay{transform:scale(1.08)}
.cover-t{font-weight:700;font-size:17px}
.caption{min-height:54px;padding:12px 14px 4px;font-size:15px}
.controls{padding:6px 8px 4px}
.controls button{border:0;background:var(--blue-soft);color:var(--blue);border-radius:99px;height:34px;min-width:34px;padding:0 12px;font-size:13px;font-weight:700}
.controls .snd.on{background:var(--blue);color:#fff}
.segs span{background:var(--line);border-radius:5px} .segs i{background:linear-gradient(90deg,var(--blue),var(--sky));border-radius:5px}
.keys{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.keys h3{grid-column:1/-1;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.keys ul{display:contents}
.keys li{list-style:none;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;font-size:15px;counter-increment:k}
.keys li::before{content:counter(k);display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-weight:800;margin-bottom:8px}

/* Plan */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan-item{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;padding:22px;background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--shadow);cursor:pointer;transition:.2s;min-height:230px;position:relative;overflow:hidden}
.plan-item::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--sky))}
.plan-item:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(37,99,235,.18)}
.plan-item .num{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}
.plan-txt{display:flex;flex-direction:column;gap:4px;flex:1}
.plan-txt b{font-size:20px;color:var(--ink);letter-spacing:-.02em}
.plan-txt span{color:var(--muted);font-size:14px}
.plan-txt small{color:var(--blue);font-weight:600;font-size:12px;margin-top:auto}
.plan-item .go{align-self:flex-end;width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800}

/* Grille de blocs */
.blocks{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.blk{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;grid-column:span 3}
.blk h4{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--blue));margin-bottom:10px}
.blk .ic{width:32px;height:32px;border-radius:10px;background:var(--cs,var(--blue-soft));display:grid;place-items:center;font-size:16px}
.blk-point{grid-column:1/-1;background:linear-gradient(135deg,var(--blue) 0%,#3b82f6 55%,var(--sky) 100%);color:#fff;box-shadow:0 18px 40px rgba(37,99,235,.28)}
.blk-point h4{color:#dbeafe} .blk-point .ic{background:rgba(255,255,255,.2)}
.blk-point p{font-size:21px;line-height:1.5;font-weight:500}
.blk-point b{color:#fff;background:rgba(255,255,255,.18);border-radius:6px;padding:0 5px}
.blk-intuition{--c:#0369a1;--cs:var(--sky-soft);border-top:4px solid var(--sky)}
.blk-analogie{--c:var(--blue);--cs:var(--blue-soft);border-top:4px solid var(--blue)}
.blk-graph{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr;gap:6px 28px;align-items:start}
.blk-graph h4,.blk-graph .hint{grid-column:1/-1}
.blk-graph .chart-slot,.blk-graph .chart{display:contents}
.blk-graph .vis{grid-row:span 3}
.blk-exemple{grid-column:span 4;--c:var(--navy);--cs:var(--blue-soft)}
.blk-exemple ol{padding-left:22px}
.blk-exemple li{padding:3px 0}
.blk-piege{grid-column:span 2;--c:var(--down);--cs:var(--down-soft);border:2px solid var(--down-soft)}
.blk-piege b{color:var(--down)}
.blk-retenir{grid-column:1/-1;background:var(--navy);color:#fff}
.blk-retenir h4{color:#bfe3ff} .blk-retenir .ic{background:rgba(255,255,255,.12)}
.blk-retenir ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none}
.blk-retenir li{font-weight:600;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.08);border-left:3px solid var(--sky)}
.src{font-size:12px;color:var(--muted);margin-top:10px}
.hint{color:var(--muted);font-size:14px}

/* Graphe */
.ctrls{display:flex;flex-direction:column;gap:10px;align-self:center}
.ctrls label{font-size:14px;font-weight:600;flex-wrap:wrap}
.ctl-l{width:72px}
.ctrls input{accent-color:var(--blue)}
.ctrls output{min-width:70px;text-align:right;color:var(--blue);font-weight:800}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.readout div{background:var(--bg);border-radius:14px;padding:12px 14px}
.readout small{display:block;color:var(--muted);font-size:12px}
.readout b{font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.readout em{font-style:normal;color:var(--blue)}
.chain-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{padding:5px 12px;border-radius:99px;font-size:13px;font-weight:700}
.c-up{background:var(--up-soft);color:var(--up)} .c-down{background:var(--down-soft);color:var(--down)} .c-neu{background:var(--blue-soft);color:var(--blue)}
.arr{color:var(--muted);font-weight:800}
.chain-why,.chain-hint{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* Quiz */
.quiz{margin-top:44px;padding:30px;border-radius:28px;background:linear-gradient(160deg,#dbe8ff,#f3f7ff 55%)}
.quiz-head h2{font-size:32px;letter-spacing:-.035em;margin:4px 0}
.qcms{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
.qcm,.open{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.open{margin-top:16px}
.q{font-weight:700;font-size:16px;margin-bottom:12px;display:flex;gap:10px;align-items:baseline}
.qn{flex:none;font-size:12px;background:var(--blue);color:#fff;border-radius:8px;padding:2px 8px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-size:14px;transition:.15s}
.opt:not(:disabled):hover{border-color:var(--blue);background:var(--blue-soft)}
.opt .k{flex:none;width:28px;height:28px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--blue)}
.opt.ok{border-color:var(--up);background:var(--up-soft)} .opt.ok .k{background:var(--up);color:#fff}
.opt.ko{border-color:var(--down);background:var(--down-soft)} .opt.ko .k{background:var(--down);color:#fff}
.fb{margin-top:10px;padding:12px 14px;border-radius:14px;font-size:14px}
.fb-ok{background:var(--up-soft)} .fb-ko{background:var(--down-soft)}
.fb b{color:inherit}
textarea{width:100%;border-radius:14px;border:2px solid var(--line);padding:12px 14px;font:15px/1.5 "Plus Jakarta Sans",sans-serif;resize:vertical;background:var(--surface);color:var(--ink)}
textarea:focus{outline:none;border-color:var(--blue)}
.check{margin-top:10px;border:0;background:var(--blue);color:#fff;padding:11px 20px;border-radius:99px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(37,99,235,.3)}
.correction{margin-top:12px;background:var(--bg);border-radius:16px;padding:14px 16px}
.cor-head{display:flex;justify-content:space-between;margin-bottom:6px}
.cor-head b{color:var(--ink)}
.score{background:var(--blue);color:#fff;font-weight:800;border-radius:99px;padding:2px 12px}
.crit{display:flex;gap:10px;font-size:14px;padding:4px 0}
.crit.ok .mk{color:var(--up);font-weight:800} .crit.ko .mk{color:var(--down);font-weight:800} .crit.ko{color:var(--muted)}
details{margin-top:8px;font-size:14px} summary{cursor:pointer;color:var(--blue);font-weight:600} details p{margin-top:6px;color:var(--muted)}
.cor-warn{font-size:14px;color:var(--muted)}

/* Bilan */
.score-big{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.score-big b{font-size:88px;line-height:.9;letter-spacing:-.06em;background:linear-gradient(90deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.score-big span{color:var(--muted)}
.fin{display:grid;gap:10px}
.fin-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:14px 18px}
.fin-row .num{width:34px;height:34px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800}
.fin-row b{flex:1;color:var(--ink)}
.pill{font-size:12px;font-weight:700;background:var(--bg);border-radius:99px;padding:4px 10px}
.again{color:var(--blue);font-weight:700;font-size:14px}
.fin-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn-main,.btn-sec{border:0;border-radius:99px;padding:13px 22px;font-weight:700;cursor:pointer}
.btn-main{background:var(--blue);color:#fff} .btn-sec{background:var(--surface);box-shadow:var(--shadow)}

/* Navigation */
.nav{position:fixed;left:272px;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:18px 44px 26px;pointer-events:none;background:linear-gradient(transparent,var(--bg) 62%)}
.nav button{pointer-events:auto;cursor:pointer}
.prev{border:0;background:var(--surface);box-shadow:var(--shadow);border-radius:99px;padding:12px 18px;font-weight:600;color:var(--muted)}
.next{margin-left:auto;display:flex;align-items:center;gap:14px;border:0;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;border-radius:22px;padding:12px 14px 12px 24px;box-shadow:0 14px 34px rgba(37,99,235,.4);transition:.2s;text-align:left}
.next:hover{transform:translateY(-3px)}
.next-txt{display:flex;flex-direction:column;line-height:1.2}
.next-txt small{font-size:12px;opacity:.85}
.next-txt b{font-size:18px;color:#fff}
.next .arrow{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:22px;font-weight:800;transition:.2s}
.next:hover .arrow{transform:translateX(4px)}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .top{position:sticky;height:auto;flex-direction:row;align-items:center;padding:10px 16px;z-index:5}
  .course-tag{display:none}
  .steps{flex-direction:row;margin-left:auto;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:none}
  .steps::before{display:none}
  .step{padding:4px} .step .st{display:none} .step .sn{margin:0}
  .step.current{box-shadow:none}
  .view{padding:20px 16px 140px}
  .nav{left:0;padding:14px 16px 18px}
  .blk,.blk-exemple,.blk-piege{grid-column:1/-1}
  .blk-graph{grid-template-columns:1fr} .blk-graph .vis{grid-row:auto}
  .blk-retenir ul,.keys{grid-template-columns:1fr}
  .qcms{grid-template-columns:1fr}
  .quiz{padding:20px 14px}
}

/* ==================== Application (en plus des maquettes) ==================== */

/* Barre du haut sur l'accueil : compte de l'élève */
.compte-menu{position:absolute;top:22px;right:28px;display:flex;align-items:center;gap:10px;z-index:6}
.compte-menu .moi{font-weight:700;font-size:14px;background:var(--surface);box-shadow:var(--shadow);border-radius:99px;padding:8px 14px}
.compte-menu button{border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;font-size:14px}
body:not([data-step="home"]):not([data-step="auth"]):not([data-step="loading"]):not([data-step="tarifs"]):not([data-step="compte"]) .compte-menu{display:none}

/* Connexion / inscription */
body[data-step="auth"] .app{grid-template-columns:1fr}
body[data-step="auth"] .top{position:absolute;height:auto;background:none;color:var(--ink);padding:24px 32px}
body[data-step="auth"] .logo-mark{background:linear-gradient(135deg,var(--blue),var(--sky))}
body[data-step="auth"] .logo-mark::after{color:#fff}
body[data-step="auth"] .view{max-width:none;min-height:100vh;display:grid;place-items:center;padding:90px 20px 40px}
.auth{width:min(420px,100%);background:var(--surface);border-radius:28px;box-shadow:0 30px 70px rgba(37,99,235,.16);padding:30px}
.auth h1{font-size:28px;letter-spacing:-.03em;margin-bottom:4px}
.auth p.lead{font-size:15px;margin-bottom:18px}
.onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:14px;padding:4px;margin-bottom:18px}
.onglets button{border:0;background:none;border-radius:10px;padding:9px;font-weight:700;color:var(--muted);cursor:pointer}
.onglets button.on{background:var(--surface);color:var(--blue);box-shadow:var(--shadow)}
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:14px;font-weight:600}
.champ input,.champ select,.champ textarea{border:2px solid var(--line);border-radius:12px;padding:11px 13px;font:15px "Plus Jakarta Sans",sans-serif;background:var(--surface);color:var(--ink)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--blue)}
.champ small{font-weight:400;color:var(--muted)}
.btn-plein{width:100%;border:0;border-radius:99px;background:var(--blue);color:#fff;font-weight:700;padding:13px;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.3)}
.btn-plein:disabled{opacity:.6;cursor:wait}
.erreur-form{background:var(--down-soft);color:var(--down);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:12px}

/* Accueil connecté : options du dépôt et « Mes cours » */
.options-depot{display:grid;grid-template-columns:200px 1fr;gap:12px;margin-top:18px;text-align:left}
.options-depot .champ{margin:0}
.mes-cours{margin-top:40px;text-align:left}
.mes-cours h2{font-size:20px;letter-spacing:-.02em;margin-bottom:12px}
.liste-cours{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.carte-cours{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);border:0;border-radius:18px;box-shadow:var(--shadow);padding:16px 18px;cursor:pointer;transition:.2s;position:relative}
.carte-cours:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(37,99,235,.16)}
.carte-cours b{font-size:16px;line-height:1.3;color:var(--ink)}
.carte-cours small{color:var(--muted);font-size:12px}
.statut{align-self:flex-start;font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px;background:var(--blue-soft);color:var(--blue)}
.statut.pret{background:var(--up-soft);color:var(--up)} .statut.erreur{background:var(--down-soft);color:var(--down)}
.vide{color:var(--muted);font-size:14px}

/* Préparation : progression réelle */
.lsteps li .det{display:block;font-size:12px;color:var(--muted);font-weight:500}
.barre{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:6px}
.barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--sky));transition:width .3s}
.loading .erreur-form{text-align:left;margin-top:16px}

/* Plan : sujets prêts ou en préparation */
.plan-item .etat{font-size:11px;font-weight:700;color:var(--muted)}
.plan-item .etat.pret{color:var(--up)}
.partie-titre{grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-top:8px}
.attente{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:70px 20px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.attente .loader{margin:0}
.attente p{color:var(--muted);max-width:420px}

/* Scènes de la vidéo (générées) */
.player .scene{justify-content:center;align-items:center;text-align:center;gap:14px;padding:24px 34px}
.player .scene-t{font-size:clamp(20px,3.2vw,30px);font-weight:800;letter-spacing:-.03em;max-width:90%}
.scene-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:92%}
.scene-points span{background:var(--surface);color:var(--blue-d);font-weight:700;border-radius:14px;padding:8px 14px;box-shadow:var(--shadow);font-size:clamp(13px,1.8vw,17px);opacity:0;animation:cl-pop .5s ease forwards}
.scene-formule{font-size:clamp(18px,3vw,28px);font-weight:700;color:var(--navy);background:rgba(255,255,255,.7);border-radius:14px;padding:8px 18px;opacity:0;animation:cl-pop .6s ease forwards;animation-delay:1.2s}
.scene-num{position:absolute;top:14px;left:18px;font-size:12px;font-weight:700;color:var(--blue);opacity:.7}
.player.mini .stage{max-height:340px}

/* Sections d'un sujet */
.section{margin-bottom:34px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-num{flex:none;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;display:grid;place-items:center;font-weight:800}
.sec-head h2{font-size:24px;letter-spacing:-.03em;line-height:1.2}
.blk-explication{grid-column:span 4}
.blk-explication p+p{margin-top:10px}
.blk-intuition{grid-column:span 2}
.blk.large{grid-column:1/-1}
.blk.moitie{grid-column:span 3}
.formule{margin-top:12px;background:var(--blue-soft);color:var(--navy);border-radius:12px;padding:10px 14px;font-weight:700;font-size:17px;overflow-x:auto}
.blk-exemple{--c:var(--navy);--cs:var(--blue-soft)}
.blk-chaine{grid-column:1/-1;--c:var(--blue)}
.blk-chaine .chain-row{gap:8px}
.blk-pieges{grid-column:span 3;--c:var(--down);--cs:var(--down-soft);border:2px solid var(--down-soft)}
.blk-pieges li,.blk-liens li{margin:6px 0 6px 18px}
.blk-liens{grid-column:span 3;--c:#0369a1;--cs:var(--sky-soft)}
.blk-exercice{grid-column:1/-1;--c:var(--navy);--cs:var(--blue-soft);border:2px dashed var(--line)}
.blk-exercice details{margin-top:12px}
.blk-exercice ol{padding-left:22px;margin-top:8px}
.blk-exercice li{padding:3px 0}
.graphe-legende{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;font-weight:600;margin-top:4px}
.graphe-legende span::before{content:"";display:inline-block;width:14px;height:4px;border-radius:2px;background:currentColor;margin-right:6px;vertical-align:middle}
.lecture{font-size:14px;color:var(--muted)}

/* Quiz : auto-évaluation (exemple sans compte) */
.auto-eval label{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:5px 0;cursor:pointer}
.auto-eval input{margin-top:4px;accent-color:var(--blue)}
.cor-conseil{margin-top:8px;font-size:14px;color:var(--ink);background:var(--blue-soft);border-radius:12px;padding:10px 12px}

/* Messages */
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:50;background:var(--ink);color:#fff;border-radius:14px;padding:12px 18px;font-size:14px;font-weight:600;box-shadow:0 16px 40px rgba(0,0,0,.25);max-width:min(560px,calc(100vw - 32px))}
.toast.erreur{background:var(--down)}

@media (max-width:960px){
  .blk-explication,.blk-intuition,.blk.moitie,.blk-pieges,.blk-liens{grid-column:1/-1}
  .options-depot{grid-template-columns:1fr}
  .compte-menu{top:12px;right:16px}
  .compte-menu .facultatif{display:none}
}
.vis .fantome{stroke:var(--ax);stroke-width:2;opacity:.45;stroke-dasharray:6 6}
.blk-graph .vis{grid-row:span 4}

/* Annales et examen blanc */
.options-depot .annales-champ{grid-column:1/-1}
.options-depot input[type=file]{padding:9px;font-size:13px}
.annales{margin-top:40px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.annales .lead{font-size:15px;margin-bottom:14px}
.annales-liste{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.annale{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600}
.annale span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.annale small{color:var(--muted);font-weight:500}
.annale .retirer{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px}
.annales-ajout{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.annales-ajout details{flex:1;min-width:240px}
.annales-ajout summary{cursor:pointer;color:var(--blue);font-weight:600;padding:12px 0}
.ajout-fichier{display:inline-block;cursor:pointer}
.ajout-fichier.occupe{opacity:.6;pointer-events:none}
.blk-exo .questions{padding-left:22px;margin-top:12px}
.blk-exo .questions>li{padding:8px 0;border-top:1px solid var(--line)}
.q-enonce .pts{display:inline-block;font-size:11px;font-weight:700;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:1px 8px;margin-left:6px}
.blk-exo details{margin-top:6px}
.blk-exo details ol{padding-left:20px;margin-top:6px}
.bareme{margin-top:6px;font-size:14px;color:var(--muted)}

/* ==================== Maths : formules et calculs en grand, hors du texte ==================== */
.katex{font-size:1.08em}
.formule{margin:14px 0 4px;padding:14px 18px;border-radius:14px;background:var(--blue-soft);color:var(--navy);overflow-x:auto;overflow-y:hidden;font-size:1.25em}
.formule .katex-display{margin:0}
.blk-point .formule{background:rgba(255,255,255,.16);color:#fff}
.etapes{list-style:none;counter-reset:etape;padding:0;margin-top:6px;display:flex;flex-direction:column;gap:10px}
.etapes>li{counter-increment:etape;position:relative;padding:2px 0 2px 38px}
.etapes>li::before{content:counter(etape);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:12px;display:grid;place-items:center}
.etapes>li>p{font-size:14px;color:var(--muted);margin:0 0 4px}
.calcul{font-size:1.3em;padding:8px 14px;border-left:3px solid var(--sky);background:var(--bg);border-radius:0 10px 10px 0;overflow-x:auto;overflow-y:hidden}
.calcul .katex-display{margin:0;text-align:left}
.calcul .katex-display>.katex{text-align:left}
.scene-formule .katex-display{margin:0}
.scene-formule{font-size:clamp(20px,3.4vw,34px)}

/* ==================== Mouvement ==================== */
/* Sous-titres : les mots s'allument au rythme de la voix */
.caption span{color:var(--muted);transition:color .25s}
.caption span.dit{color:var(--ink)}
/* Titre des scènes : les mots arrivent un par un */
.scene-t .mot{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(10px);animation:mot .55s cubic-bezier(.2,.7,.2,1) forwards;white-space:pre}
@keyframes mot{to{opacity:1;filter:none;transform:none}}
/* Voix en préparation */
.player.chargement .stage::after{content:"";position:absolute;right:16px;bottom:14px;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
/* Les blocs apparaissent quand on arrive dessus */
.js-mouvement .revele{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js-mouvement .revele.visible{opacity:1;transform:none}
/* Transitions entre pages (navigateurs compatibles) */
::view-transition-old(root){animation:sortie .22s ease both}
::view-transition-new(root){animation:entree .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes sortie{to{opacity:0;transform:translateY(-8px)}}
@keyframes entree{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  .scene-t .mot{animation:none;opacity:1;filter:none;transform:none}
  .js-mouvement .revele{opacity:1;transform:none;transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Choix du design */

/* ==================== Formules et compte ==================== */
body[data-step="tarifs"] .app,body[data-step="compte"] .app{grid-template-columns:1fr}
body[data-step="tarifs"] .top,body[data-step="compte"] .top{position:absolute;height:auto;background:none;color:var(--ink);padding:24px 32px;border:none}
body[data-step="tarifs"] .view,body[data-step="compte"] .view{max-width:1040px;margin:0 auto;padding:110px 24px 80px}
body[data-step="tarifs"] .compte-menu,body[data-step="compte"] .compte-menu{display:flex}
.compte-menu .moi{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lien-menu{color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}
.lien-menu:hover{color:var(--blue)}
.badge-pro{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:#fff;border-radius:99px;padding:2px 8px;vertical-align:middle}
.quota{margin-top:16px;font-size:14px;color:var(--muted)}
.quota b{color:var(--ink)}
.quota a{color:var(--blue);font-weight:600}
.bascule{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:24px}
.bascule button{border:0;background:none;border-radius:99px;padding:9px 18px;font-weight:600;color:var(--muted);cursor:pointer}
.bascule button.on{background:var(--blue);color:#fff}
.bascule small{font-size:11px;opacity:.85;margin-left:4px}
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.offre{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:28px 26px;border:1px solid var(--line)}
.offre.mise-en-avant{border:2px solid var(--blue);box-shadow:0 24px 60px rgba(37,99,235,.18)}
.ruban{position:absolute;top:-12px;left:26px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 12px}
.offre h2{font-size:22px;letter-spacing:-.02em}
.prix{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:10px}
.prix-detail{color:var(--muted);font-size:13px;min-height:38px}
.offre ul{list-style:none;margin:18px 0 22px;flex:1}
.offre li{padding:7px 0 7px 26px;position:relative;font-size:14px;border-top:1px solid var(--line)}
.offre li::before{content:"✓";position:absolute;left:2px;color:var(--blue);font-weight:800}
.offre .btn-plein,.offre .btn-sec{width:100%}
.actuelle{text-align:center;font-weight:700;color:var(--blue);padding:12px;border-radius:12px;background:var(--blue-soft)}
.page-tarifs .note{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
.page-compte .blocks{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--muted);font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn-plein.inline{width:auto;padding:11px 22px}
.membres{list-style:none;margin:14px 0}
.membres li{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600}
.membres small{color:var(--muted);font-weight:500}
.membres .retirer{border:0;background:none;color:var(--down);font-weight:600;cursor:pointer}
.ajout-membre,.suppression,.form-ligne{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ajout-membre input,.suppression input,.form-ligne input{flex:1;min-width:200px;border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.btn-sec.danger{color:var(--down);border-color:var(--down)}
.page-compte details summary{cursor:pointer;color:var(--down);font-weight:600;margin-top:8px}
@media (max-width:860px){.offres{grid-template-columns:1fr}.prix-detail{min-height:0}}

/* ==================== Version 1.1 : présentation, outils, assistant ==================== */
/* Page de présentation (visiteurs) */
body[data-step="home"] .view:has(.presentation){display:block;max-width:1120px;margin:0 auto;padding:100px 24px 60px;min-height:0}
.presentation{display:flex;flex-direction:column;gap:56px}
.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.04em;margin:8px 0 14px}
.hero .lead{font-size:18px}
.hero .actions{margin-top:22px}
.hero .muted{margin-top:10px}
.etapes-presentation{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.etapes-presentation div{background:var(--surface);border-radius:var(--r);padding:22px;border:1px solid var(--line)}
.etapes-presentation span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;margin-bottom:10px}
.etapes-presentation h3{font-size:18px;margin-bottom:4px}
.etapes-presentation p,.fonction p{color:var(--muted);font-size:14.5px}
.titre-section{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;text-align:center}
.fonctions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-30px}
.fonction{background:var(--surface);border-radius:var(--r);padding:22px;border:1px solid var(--line)}
.fonction h3{font-size:17px;margin:8px 0 4px}
.offres-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-30px}
.offres-mini div{background:var(--surface);border-radius:var(--r);padding:22px;border:1px solid var(--line);text-align:center}
.offres-mini .mise-en-avant{border:2px solid var(--blue)}
.offres-mini .prix{font-size:38px}
.offres-mini small{font-size:14px;color:var(--muted)}
.centre{text-align:center;margin-top:-36px}
.centre a{color:var(--blue);font-weight:600}
.faq{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:-30px auto 0;width:100%}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin-top:8px}
.cta-final{text-align:center;background:linear-gradient(135deg,var(--blue),#3b82f6);color:#fff;border-radius:var(--r);padding:44px 24px}
.cta-final h2{color:#fff;font-size:clamp(28px,4vw,42px);margin-bottom:16px}
.cta-final .btn-plein{background:#fff;color:var(--blue)}

/* Pied de page */
.pied{display:none;justify-content:center;gap:22px;padding:30px 16px 110px;font-size:13px}
.pied a{color:var(--muted);text-decoration:none}
.pied a:hover{color:var(--blue)}
body[data-step="home"] .pied,body[data-step="tarifs"] .pied,body[data-step="compte"] .pied,body[data-step="defi"] .pied,body[data-step="revue"] .pied{display:flex;grid-column:1/-1}

/* Pages hors cours (défis, révisions du jour) : sans barre latérale */
body[data-step="defi"] .app,body[data-step="revue"] .app{grid-template-columns:1fr}
body[data-step="defi"] .top,body[data-step="revue"] .top{position:absolute;height:auto;background:none;color:var(--ink);padding:24px 32px;border:none}
body[data-step="defi"] .view,body[data-step="revue"] .view{max-width:820px;margin:0 auto;padding:110px 24px 80px}
body[data-step="defi"] .compte-menu,body[data-step="revue"] .compte-menu{display:flex}

/* Barre latérale : outils */
.steps-titre{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:18px 0 4px 6px}
.step.outil .sn{border:none;background:none;font-size:13px}

/* Sources cliquables, signalements */
button.src{border:0;background:none;padding:0;cursor:pointer;color:var(--muted);font:inherit;font-size:12px;margin-top:10px;text-decoration:underline dotted;text-underline-offset:3px}
button.src:hover{color:var(--blue)}
.signaler{display:block;margin:8px 0 0 auto;border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}
.signaler:hover{color:var(--down)}

/* Assistant */
.bouton-assistant{position:fixed;right:28px;bottom:104px;z-index:20;border:0;border-radius:99px;background:var(--ink);color:#fff;font:600 14px inherit;font-family:inherit;padding:12px 18px;cursor:pointer;box-shadow:0 12px 30px rgba(15,31,61,.3)}
.bulle-selection{position:absolute;z-index:30;border:0;border-radius:10px;background:var(--blue);color:#fff;font:600 13px inherit;font-family:inherit;padding:8px 12px;cursor:pointer;box-shadow:0 8px 20px rgba(37,99,235,.35)}
.tiroir{position:fixed;right:16px;bottom:16px;top:16px;width:min(420px,calc(100vw - 32px));z-index:40;background:var(--surface);border-radius:18px;box-shadow:0 30px 80px rgba(15,31,61,.3);display:flex;flex-direction:column;overflow:hidden;animation:entree .3s ease both}
.tiroir header,.fenetre header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.tiroir .fermer,.fenetre .fermer{border:0;background:none;font-size:16px;cursor:pointer;color:var(--muted)}
.tiroir .fil{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.msg.moi{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.msg.ia{align-self:flex-start;background:var(--bg);border-bottom-left-radius:4px}
.msg.ia p+p{margin-top:8px}
.msg.erreur{background:var(--down-soft);color:var(--down)}
.msg .calcul{font-size:1.1em;margin:6px 0}
.points i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--muted);animation:pulse 1s infinite}
.points i:nth-child(2){animation-delay:.2s}.points i:nth-child(3){animation-delay:.4s}
@keyframes pulse{50%{opacity:.25}}
.tiroir form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.tiroir textarea{flex:1;border-radius:12px;font-size:14px;padding:8px 10px;resize:none}
.tiroir .budget{padding:0 16px 10px;font-size:12px}

/* Fenêtres */
.fenetre-fond{position:fixed;inset:0;z-index:50;background:rgba(15,31,61,.35);display:grid;place-items:center;padding:16px;animation:entree .2s ease both}
.fenetre{width:min(560px,100%);max-height:85vh;overflow:auto;background:var(--surface);border-radius:18px;box-shadow:0 30px 80px rgba(15,31,61,.3)}
.fenetre-corps{padding:18px}
.form-fenetre{display:flex;flex-direction:column;gap:12px}
.form-fenetre textarea,.form-fenetre select,.form-fenetre input{width:100%}
.extrait{font-size:14.5px;white-space:normal}
.extrait p+p{margin-top:8px}

/* Exercices à volonté, défis */
.exos{margin-top:40px}
.exo-boutons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.exo-liste{display:flex;flex-direction:column;gap:14px}
.exo-carte details{margin-top:10px}
.exo-carte summary{cursor:pointer;color:var(--blue);font-weight:600}
.a-retenir-exo{margin-top:10px;font-weight:600}
.defier{margin-top:10px}
.defi-cree{margin-top:12px;background:var(--blue-soft);border-radius:12px;padding:14px 16px}
.code{font-size:22px;letter-spacing:.15em;color:var(--blue)}
.defi-code{display:flex;gap:10px;flex-wrap:wrap}
.defi-code input{flex:1;min-width:200px;border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;text-transform:uppercase}
.defi-jeu{background:var(--surface);border-radius:var(--r);padding:22px;border:1px solid var(--line);margin-bottom:24px}
.classement{list-style:none;counter-reset:rang}
.classement li{counter-increment:rang;display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.classement li::before{content:counter(rang);width:26px;font-weight:800;color:var(--blue)}
.classement li span{flex:1;font-weight:600}
.classement li.moi{background:var(--blue-soft);border-radius:8px;padding:10px}

/* Questions probables */
.probables{margin-top:40px}
.liste-probables{list-style:none;display:flex;flex-direction:column;gap:12px;margin:14px 0}
.liste-probables li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.liste-probables .q{margin:6px 0}
.liste-probables a{color:var(--blue)}
.proba{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:99px;padding:3px 10px}
.proba.forte{background:var(--down-soft);color:var(--down)}
.proba.moyenne{background:var(--blue-soft);color:var(--blue)}

/* Carte mentale */
/* Carte mentale : le cours au centre, une couleur par sujet, liens tracés en SVG (outils.js) */
.cm{--cm-0:#2563eb;--cm-1:#0891b2;--cm-2:#7c3aed;--cm-3:#0d9488;--cm-4:#ea580c;--cm-5:#db2777;
  position:relative;display:grid;grid-template-columns:1fr minmax(0,210px) 1fr;align-items:center;gap:44px;padding:28px 0 48px}
.cm-liens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cm-liens path{fill:none;stroke-linecap:round}
.cm-cote,.cm-centre{position:relative;z-index:1}
.cm-cote{display:flex;flex-direction:column;gap:40px}
.cm-racine{text-align:center;background:var(--navy);color:#fff;border-radius:20px;padding:22px 20px;font-size:21px;line-height:1.15;box-shadow:0 18px 40px rgba(15,42,95,.25)}
.cm-racine small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#bfe3ff;margin-bottom:8px}
.cm-branche{display:flex;align-items:center;gap:30px}
.cm-gauche .cm-branche{flex-direction:row-reverse}
.cm-sujet{flex:0 1 190px;display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);border:2px solid var(--c);border-radius:14px;padding:12px 14px;
  font:600 15px/1.25 inherit;font-family:inherit;color:var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s}
.cm-sujet:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,31,61,.12)}
.cm-num{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:12px;font-weight:700}
.cm-notions{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cm-gauche .cm-notions{align-items:flex-end}
.cm-notion{max-width:100%;font-size:13px;line-height:1.3;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 12px}
@media (max-width:1100px){
  .cm{grid-template-columns:1fr;gap:22px}
  .cm-liens{display:none}
  .cm-centre{order:-1;display:flex;justify-content:center}
  .cm-cote{gap:18px}
  .cm-branche,.cm-gauche .cm-branche{flex-direction:column;align-items:stretch;gap:10px;border-left:3px solid var(--c);padding-left:14px}
  .cm-sujet{flex:none}
  .cm-notions,.cm-gauche .cm-notions{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}

/* Icônes au trait et bouton d'inscription du menu */
.icone{flex:none;vertical-align:-.2em}
.ic-fonction{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue)}
.step.outil .sn .icone{width:15px;height:15px}
.bouton-assistant{display:inline-flex;align-items:center;gap:8px}
.bouton-assistant[hidden]{display:none}
.btn-menu{background:var(--blue);color:#fff;border-radius:99px;padding:9px 16px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn-menu:hover{background:var(--blue-d)}
.src,.snd,.defier{display:inline-flex;align-items:center;gap:6px}

/* Podcast */
.podcast-lecteur{display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:var(--r);padding:18px 22px}
.pod-lire{width:56px;height:56px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:20px;cursor:pointer;flex:none}
.pod-infos{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pod-segment{font-size:13px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-infos .barre{background:rgba(255,255,255,.2)}
.pod-vitesse{border-radius:8px;border:0;padding:6px}
.page-podcast.chargement .pod-lire{animation:pulse 1s infinite}
.pod-liste{list-style:none;margin-top:16px}
.pod-liste li{display:flex;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line);cursor:pointer}
.pod-liste li.actif{color:var(--blue);font-weight:700}
.pod-num{width:24px;color:var(--muted)}

/* Planning et révisions */
.date-examen{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}
.date-examen .champ{margin:0}
.planning{list-style:none;display:flex;flex-direction:column}
.planning li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.planning li.aujourdhui{background:var(--blue-soft);border-radius:12px;padding:14px;border:none}
.planning .jour{font-weight:700;text-transform:capitalize}
.planning .taches{display:flex;flex-direction:column;gap:4px}
.planning .taches a{color:var(--ink)}
.planning .taches a:hover{color:var(--blue)}
.seance{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:28px}
.seance h2{font-size:20px;margin-bottom:12px}
.seance h2 small{font-size:13px;background:var(--blue);color:#fff;border-radius:99px;padding:2px 9px;vertical-align:middle}
.seance .q{font-weight:600;margin:6px 0 12px}
.seance-fin{font-size:18px}
.revue-accueil{display:flex;flex-direction:column;gap:2px;text-align:left;margin-top:30px;background:var(--blue);color:#fff;border-radius:var(--r);padding:16px 20px;text-decoration:none}
.revue-accueil span{opacity:.85;font-size:14px}

/* Fiche de révision */
.fiche{background:#fff;color:#111;border:1px solid var(--line);border-radius:var(--r);padding:34px;columns:2 320px;column-gap:34px}
.fiche header{column-span:all;border-bottom:2px solid #111;margin-bottom:16px;padding-bottom:8px}
.fiche header h2{font-size:26px}
.fiche header p{color:#555;font-size:13px}
.fiche section{break-inside:avoid;margin-bottom:16px}
.fiche h3{font-size:15px;margin-bottom:4px;color:var(--blue)}
.fiche ul{padding-left:18px;font-size:13.5px}
.fiche .formule{font-size:1em;padding:6px 10px;margin:6px 0}
.fiche-piege{font-size:12.5px;color:#9a3412;margin-top:4px}

/* Progression */
.maitrise{display:flex;flex-direction:column;gap:8px}
.maitrise-ligne{display:grid;grid-template-columns:30px 1fr 220px 70px;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--ink)}
.maitrise-ligne .num{color:var(--blue);font-weight:800}
.jauge{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.jauge i{display:block;height:100%;border-radius:8px}
.jauge i.bon{background:var(--up)} .jauge i.moyen{background:#f59e0b} .jauge i.faible{background:var(--down)}
.maitrise-ligne .pct{text-align:right;font-weight:700;font-size:14px}
.faibles{margin-top:30px}
.faibles h2{font-size:22px;margin-bottom:10px}
.faibles li{margin:8px 0 8px 18px}
.faibles a{color:var(--ink)}
.faibles small{color:var(--down);margin-left:8px}

@media (max-width:860px){
  .hero,.etapes-presentation,.fonctions,.offres-mini{grid-template-columns:1fr}
  .planning li{grid-template-columns:1fr;gap:6px}
  .maitrise-ligne{grid-template-columns:24px 1fr 60px}
  .maitrise-ligne .jauge{grid-column:1/-1;order:5}
  .bouton-assistant{right:16px;bottom:96px}
}

/* Impression de la fiche : rien d'autre que la fiche */
@media print{
  body *{visibility:hidden}
  .fiche,.fiche *{visibility:visible}
  .fiche{position:absolute;left:0;top:0;width:100%;border:none;padding:0}
  body{background:#fff}
}

/* Page d'accueil : aperçu du produit, construit avec le cours d'exemple */
.apercu{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:-30px}
.apercu-carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 44px rgba(15,42,95,.07)}
.apercu-carte .etiquette{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.apercu-point{background:linear-gradient(135deg,var(--blue-d) 0%,var(--blue) 60%,#3b82f6 100%);color:#fff;border-radius:calc(var(--r) - 2px);padding:22px}
.apercu-point small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:10px}
.apercu-point p{font-size:22px;line-height:1.3}
.apercu-point b{color:#fff;text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:4px}
.apercu-point .formule{margin-top:14px}
.apercu-q{font-weight:600;font-size:16px;line-height:1.4}
.apercu-opts{display:flex;flex-direction:column;gap:8px}
.apercu-opt{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;color:var(--muted);background:var(--bg)}
.apercu-opt.ok{border-color:var(--up);background:var(--up-soft);color:var(--ink);font-weight:600}
.apercu-suite{font-size:14px;color:var(--muted);line-height:1.55}
.apercu-suite b{color:var(--ink)}
.pied span{color:var(--muted)}
@media (max-width:960px){ .apercu{grid-template-columns:1fr} }

/* ==================== Cours en plusieurs fichiers ==================== */
.depot{margin-top:16px;text-align:left;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px}
.depot-liste{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.depot-liste li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--bg);font-size:14px}
.depot-ic{flex:none;display:grid;place-items:center;color:var(--blue)}
.depot-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.depot-liste small{flex:none;color:var(--muted)}
.depot-liste .retirer{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.depot-liste .retirer:hover{background:var(--down-soft);color:var(--down)}
.depot-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:12px}

/* ==================== Sujet : comprendre en profondeur ==================== */
/* La question de départ, la vérification de compréhension, et le cours lu page par page */
.blk-question,.blk-verifier{grid-column:1/-1}
.blk-question p{font-size:18px;font-weight:600;line-height:1.45}
.blk-verifier{--c:#6d28d9;border:2px dashed var(--line)}
.blk-verifier>p{font-weight:600}
.blk-verifier details p{color:var(--ink)}
.fil{margin-bottom:40px}
.fil-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px;padding:0}
.fil-item details{margin:0;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);font-size:15px}
.fil-item summary{list-style:none;display:flex;gap:14px;align-items:baseline;padding:16px 18px;cursor:pointer;color:var(--ink);font-weight:500}
.fil-item summary::-webkit-details-marker{display:none}
.fil-repere{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:99px;padding:3px 10px}
.fil-dit{flex:1;min-width:0}
.fil-corps{padding:4px 18px 18px;border-top:1px solid var(--line)}
.fil-corps p{margin-top:10px;color:var(--ink);line-height:1.65}
.fil-corps .fil-idee{background:var(--blue-soft);border-radius:12px;padding:10px 12px}
.notions-titre{margin:8px 0 18px}
@media (max-width:960px){.fil-item summary{flex-direction:column;gap:6px}.fil-repere{max-width:100%}}