/* Style « alive » : actif seulement sous .alive (leçons avec "style":"alive"). La leçon Make n'est pas touchée. */
:root{
  --c-purple:#5b3fd1; --c-purple-bg:#ebe8fb; --c-purple-ink:#3b2a99;
  --c-blue:#2563eb;   --c-blue-bg:#e8f0fe;   --c-blue-ink:#1e3a8a;
  --c-green:#17794a;  --c-green-bg:#e4f6ec;  --c-green-ink:#0f5132;
  --c-orange:#c2410c; --c-orange-bg:#ffedd5; --c-orange-ink:#7c2d12;
  --c-pink:#be185d;   --c-pink-bg:#fce7f3;   --c-pink-ink:#831843;
  --c-teal:#0f766e;   --c-teal-bg:#ccfbf1;   --c-teal-ink:#134e4a;
  --c-red:#b3261e;    --c-red-bg:#fdeceb;    --c-red-ink:#7f1d1d;
}
@media (prefers-color-scheme: dark){
  :root{
    --c-purple:#9a86ff; --c-purple-bg:#262245; --c-purple-ink:#d9d1ff;
    --c-blue:#8ab4ff;   --c-blue-bg:#1c2a4a;   --c-blue-ink:#cfe0ff;
    --c-green:#5fd59a;  --c-green-bg:#16301f;  --c-green-ink:#c8f2dc;
    --c-orange:#ffb27a; --c-orange-bg:#3b2412; --c-orange-ink:#ffd9bd;
    --c-pink:#ff8fc0;   --c-pink-bg:#3a1730;   --c-pink-ink:#ffd0e6;
    --c-teal:#5eead4;   --c-teal-bg:#12332f;   --c-teal-ink:#c9f7ef;
    --c-red:#ff8a80;    --c-red-bg:#3a1b1a;    --c-red-ink:#ffd0cc;
  }
}
.c-purple{--cc:var(--c-purple);--cb:var(--c-purple-bg);--ci:var(--c-purple-ink)}
.c-blue{--cc:var(--c-blue);--cb:var(--c-blue-bg);--ci:var(--c-blue-ink)}
.c-green{--cc:var(--c-green);--cb:var(--c-green-bg);--ci:var(--c-green-ink)}
.c-orange{--cc:var(--c-orange);--cb:var(--c-orange-bg);--ci:var(--c-orange-ink)}
.c-pink{--cc:var(--c-pink);--cb:var(--c-pink-bg);--ci:var(--c-pink-ink)}
.c-teal{--cc:var(--c-teal);--cb:var(--c-teal-bg);--ci:var(--c-teal-ink)}
.c-red{--cc:var(--c-red);--cb:var(--c-red-bg);--ci:var(--c-red-ink)}

/* ---- barre de progression + en-tête de section ---- */
.alive .lprog{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:0 0 18px}
.alive .lprog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c-purple),var(--c-blue),var(--c-teal));transition:width .6s ease}
.alive .sec-title{display:flex;align-items:center;gap:14px;margin:0 0 .5em}
.alive .sec-ico{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:var(--cb);border:2px solid var(--cc);animation:wobble 3.2s ease-in-out infinite}
.alive main>*{animation:rise .45s ease both}
.alive main>*:nth-child(2){animation-delay:.04s}.alive main>*:nth-child(3){animation-delay:.08s}.alive main>*:nth-child(4){animation-delay:.12s}
.alive .toc li a .ti{flex:none;font-size:17px;width:24px;text-align:center}
.alive .toc li a.cur{background:var(--cb);color:var(--ci)}
.alive .btn{border-radius:12px;transition:transform .15s ease,filter .15s ease}
.alive .btn:hover:not([aria-disabled=true]){transform:translateY(-2px)}
.alive .card{border-radius:18px}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg) scale(1.05)}}
@keyframes pop{0%{transform:scale(.96)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ---- prose et glossaire ---- */
.alive .prose{font-size:17.5px}
.alive .prose h3{display:flex;align-items:center;gap:8px}
.alive .gl{border-bottom:2px dotted var(--c-purple);cursor:help;position:relative;color:inherit}
.alive .gl::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:min(320px,80vw);
  background:var(--c-purple-ink);color:#fff;font:14px/1.45 system-ui;padding:8px 11px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20;text-align:left}
@media (prefers-color-scheme: dark){.alive .gl::after{background:var(--c-purple);color:#14131f}}
.alive .gl:hover::after,.alive .gl:focus::after{opacity:1;transform:translateX(-50%)}

/* ---- encadrés ---- */
.alive .callout{display:flex;gap:12px;border-left:0;border:2px solid var(--cc);background:var(--cb);border-radius:14px;padding:14px 16px;margin:1.2em 0;--cc:var(--c-purple);--cb:var(--c-purple-bg);--ci:var(--c-purple-ink)}
.alive .callout .cico{font-size:26px;line-height:1.2}
.alive .callout b.k{color:var(--ci)}
.alive .callout.warn{--cc:var(--c-orange);--cb:var(--c-orange-bg);--ci:var(--c-orange-ink)}
.alive .callout.try{--cc:var(--c-green);--cb:var(--c-green-bg);--ci:var(--c-green-ink)}
.alive .callout.analogy{--cc:var(--c-pink);--cb:var(--c-pink-bg);--ci:var(--c-pink-ink)}
.alive .callout.zero{--cc:var(--c-teal);--cb:var(--c-teal-bg);--ci:var(--c-teal-ink)}
.alive .callout.why{--cc:var(--c-blue);--cb:var(--c-blue-bg);--ci:var(--c-blue-ink)}
.alive .callout>div:last-child{min-width:0}

/* ---- blocs de code ---- */
.alive .codebox{margin:1em 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--code-bg)}
.alive .codebar{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 14px;background:#2a2a40;color:#c8c8e6;font:600 12.5px system-ui}
.alive .codebar .lamps{display:flex;gap:5px}.alive .codebar .lamps i{width:11px;height:11px;border-radius:50%;background:#ff5f56}
.alive .codebar .lamps i:nth-child(2){background:#ffbd2e}.alive .codebar .lamps i:nth-child(3){background:#27c93f}
.alive .codebar .lbl{flex:1;text-transform:uppercase;letter-spacing:.7px;font-size:11.5px}
.alive .copy{appearance:none;border:1px solid #5a5a80;background:#35354f;color:#e6e6f5;font:600 13px system-ui;padding:5px 11px;border-radius:8px;cursor:pointer;transition:background .15s}
.alive .copy:hover{background:#4a4a70}.alive .copy.done{background:#1f6b45;border-color:#37c47f}
.alive .codebox pre{margin:0;border-radius:0}
.alive .codebox .outlbl{padding:6px 14px;background:#232338;color:#a9a9c9;font:600 12px system-ui;text-transform:uppercase;letter-spacing:.6px}
.alive .codebox pre.out{background:#171724;color:#cfe8cf;border-top:0}

/* ---- cartes à icônes ---- */
.alive .icards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:1.1em 0}
.alive .icard{background:var(--cb);border:2px solid var(--cc);border-radius:16px;padding:14px 16px;transition:transform .2s ease,box-shadow .2s ease}
.alive .icard:hover{transform:translateY(-4px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.alive .icard .ico{font-size:34px;line-height:1;animation:wobble 4s ease-in-out infinite}
.alive .icard h4{margin:.4em 0 .2em;color:var(--ci);font-size:18px}
.alive .icard>div:last-child{font-size:15.5px}

/* ---- repli ---- */
.alive details.deep{border:2px dashed var(--c-blue);border-radius:14px;padding:4px 16px;margin:1.1em 0;background:var(--c-blue-bg)}
.alive details.deep summary{cursor:pointer;font-weight:700;padding:10px 0;color:var(--c-blue-ink)}
.alive details.deep[open] summary{border-bottom:1px solid var(--line);margin-bottom:8px}

/* ---- codes de statut ---- */
.alive .stgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.alive .stchip{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:2px solid var(--cc);background:var(--cb);color:var(--ci);border-radius:14px;padding:10px 12px;cursor:pointer;font:inherit;transition:transform .15s}
.alive .stchip b{font-size:24px;line-height:1}.alive .stchip span{font-size:14px;font-weight:600}
.alive .stchip:hover{transform:translateY(-3px)}.alive .stchip.on{outline:3px solid var(--cc);outline-offset:2px;animation:pop .3s ease}
.alive .stchip.k2,.alive .stinfo.k2{--cc:var(--c-green);--cb:var(--c-green-bg);--ci:var(--c-green-ink)}
.alive .stchip.k3,.alive .stinfo.k3{--cc:var(--c-blue);--cb:var(--c-blue-bg);--ci:var(--c-blue-ink)}
.alive .stchip.k4,.alive .stinfo.k4{--cc:var(--c-orange);--cb:var(--c-orange-bg);--ci:var(--c-orange-ink)}
.alive .stchip.k5,.alive .stinfo.k5{--cc:var(--c-red);--cb:var(--c-red-bg);--ci:var(--c-red-ink)}
.alive .stchip.k1,.alive .stinfo.k1{--cc:var(--c-purple);--cb:var(--c-purple-bg);--ci:var(--c-purple-ink)}
.alive .stinfo{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--cb,var(--tip-bg));color:var(--ci,var(--ink));border:2px solid var(--cc,var(--line))}
.alive .status{margin:1.1em 0}

/* ---- message HTTP annoté ---- */
.alive .anatomy{margin:1.1em 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--code-bg)}
.alive pre.anat{margin:0;border-radius:0;color:#e6e6f5;line-height:1.9}
.alive .ap{border-radius:6px;padding:1px 3px;cursor:pointer;transition:background .15s;outline:none}
.alive .ap.k-method{color:#ffb86b;font-weight:700}.alive .ap.k-path{color:#7ee2a8}.alive .ap.k-version{color:#9aa5ff}
.alive .ap.k-hname{color:#7cc7ff}.alive .ap.k-hval{color:#f5a3d6}.alive .ap.k-status{color:#ff9a8f;font-weight:700}
.alive .ap.k-reason{color:#ffd37a}.alive .ap.k-body{color:#b5f0ff}.alive .ap.k-blank{color:#a9a9c9}
.alive .ap:hover,.alive .ap:focus,.alive .ap.on{background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.alive .alegend{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px;background:#232338}
.alive .alegend .ap{font:600 12.5px system-ui;background:#2e2e48;cursor:default}
.alive .anote{padding:12px 16px;background:var(--c-purple-bg);color:var(--c-purple-ink);font-size:16px;min-height:52px}

/* ---- diagramme pas à pas ---- */
.alive .stepper{margin:1.3em 0;border:2px solid var(--c-purple);border-radius:18px;padding:16px;background:var(--card)}
.alive .stitle{margin:0 0 10px;color:var(--c-purple-ink)}
.alive .track{position:relative;height:200px;margin:6px 0 10px}
.alive .actor{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:130px;display:flex;flex-direction:column;align-items:center;gap:2px}
.alive .actor .ico{font-size:34px;width:62px;height:62px;display:grid;place-items:center;border-radius:18px;background:var(--c-purple-bg);border:2px solid var(--c-purple)}
.alive .actor b{font-size:14.5px;line-height:1.25}.alive .actor small{color:var(--muted);font-size:12.5px;line-height:1.2}
.alive .lane{position:absolute;top:140px;height:6px;border-radius:99px;background:var(--line);opacity:.0;transition:all .5s ease}
.alive .lane.on{opacity:1;background:var(--c-blue)}.alive .lane.back{background:var(--c-green)}
.alive .packet{position:absolute;top:118px;transform:translateX(-50%);font-size:28px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));z-index:2}
.alive .alabel{position:absolute;top:158px;transform:translateX(-50%);font:700 13px system-ui;background:var(--c-blue-bg);color:var(--c-blue-ink);border:1.5px solid var(--c-blue);padding:3px 10px;border-radius:99px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.alive .sctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.alive .sctl .btn[disabled]{opacity:.4}
.alive .sdots{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.alive .sdot{appearance:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:700 13px system-ui;cursor:pointer}
.alive .sdot.past{background:var(--c-green-bg);border-color:var(--c-green);color:var(--c-green-ink)}
.alive .sdot.on{background:var(--c-purple);border-color:var(--c-purple);color:#fff;transform:scale(1.12)}
@media (prefers-color-scheme: dark){.alive .sdot.on{color:#14131f}}
.alive .sdetail{background:var(--c-purple-bg);border-radius:14px;padding:12px 16px;color:var(--c-purple-ink)}
.alive .sdetail.pop{animation:pop .35s ease}
.alive .sdetail h4{margin:.2em 0 .3em}.alive .snum{font:700 12px system-ui;text-transform:uppercase;letter-spacing:.8px;opacity:.8}
.alive .sdetail code{background:rgba(0,0,0,.08)}
.alive .sdetail .codebox{color:var(--code-ink)}.alive .sdetail .codebox code{background:none}
@media (max-width:620px){.alive .actor{width:84px}.alive .actor b{font-size:12px}.alive .actor .ico{width:48px;height:48px;font-size:26px}.alive .alabel{font-size:11px}}

/* ---- cascade ---- */
.alive .waterfall{margin:1.2em 0;border:2px solid var(--c-teal);border-radius:16px;padding:14px 16px;background:var(--card)}
.alive .wrow{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:12px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.alive .wrow:first-of-type{border-top:0}
.alive .wlbl{display:flex;flex-direction:column;line-height:1.3}.alive .wlbl small{color:var(--muted)}
.alive .wtrack{display:flex;align-items:center;gap:8px;height:26px}
.alive .wbar{display:block;height:22px;width:0;border-radius:99px;background:var(--cc);transition:width 1s ease .1s;flex:none}
.alive .waterfall.in .wbar{width:var(--w)}
.alive .wval{font:700 13px ui-monospace,monospace;color:var(--ink);white-space:nowrap}
@media (max-width:620px){.alive .wrow{grid-template-columns:1fr}}

/* ---- QCM plus vivant ---- */
.alive .qcm{border-radius:18px;border-width:2px;background:linear-gradient(180deg,var(--c-purple-bg),var(--card) 90px)}
.alive .qcm .tag{display:inline-block;background:var(--c-purple);color:var(--accent-ink);padding:3px 10px;border-radius:99px}
.alive .opt{border-radius:12px;transition:transform .15s,border-color .15s}
.alive .opt:hover:not([disabled]){transform:translateX(4px)}
.alive .opt.good{animation:pop .4s ease}
.alive .opt.wrong{animation:shake .35s ease}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---- confettis ---- */
.alive .confhost{position:relative;height:0;overflow:visible}
.alive .conf{position:absolute;top:-10px;animation:fall 2.4s ease-in forwards;pointer-events:none;z-index:30}
@keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .alive *,.alive *::before,.alive *::after{animation:none!important;transition:none!important}
  .alive .waterfall .wbar{width:var(--w)}
}

/* ---- anti-débordement ---- */
.alive main{min-width:0;overflow-x:clip}
.alive :not(pre)>code{overflow-wrap:anywhere}
.alive .prose,.alive .callout,.alive .icard,.alive .sdetail,.alive .stinfo,.alive .anote{overflow-wrap:anywhere}
.alive .prose table{display:block;overflow-x:auto}