:root{--bg:#0b1020;--bg2:#10172b;--card:#151e36;--line:#26324f;--tx:#eef1f8;--mu:#93a0bd;--ac:#ffc83d;--ok:#3ddc84}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 Archivo,system-ui,sans-serif}
a{color:var(--ac)}h1{font-size:clamp(38px,7vw,72px);line-height:1;letter-spacing:-.035em;margin:0 0 18px;font-weight:800}
h2{font-size:20px;margin:0 0 8px}.wrap{max-width:900px;margin:0 auto;padding:0 20px}.mu{color:var(--mu)}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0}nav b{font-size:20px;letter-spacing:-.02em}nav a{text-decoration:none;margin-left:18px;color:var(--mu)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;margin:16px 0}
label{display:block;font-size:13px;color:var(--mu);margin:12px 0 4px}
input{width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--tx);font:inherit}
.btn{display:inline-block;margin-top:16px;padding:12px 22px;border:0;border-radius:8px;background:var(--ac);color:#1a1300;font:700 15px Archivo,sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.s{background:var(--line);color:var(--tx)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:640px){.g{grid-template-columns:1fr 1fr}}
.r{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:700px){.r{grid-template-columns:1fr}}
ol.st{padding-left:20px}ol.st li{margin:8px 0}code,pre{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:13px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.lg{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;color:var(--tx)}nav a.lg{margin:0;color:var(--tx)}.lg img{width:34px;height:34px}
.sec{font-size:28px;letter-spacing:-.02em;margin:56px 0 6px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:30px 0 10px}@media(max-width:760px){.hero{grid-template-columns:1fr}}
.rt{stroke:var(--ac);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:2 12;animation:fl 1.2s linear infinite}@keyframes fl{to{stroke-dashoffset:-14}}
.pulse{animation:pl 1.6s infinite}@keyframes pl{50%{opacity:.3}}
.stp{display:grid;grid-template-columns:48px 1fr;gap:16px;transition:opacity .3s}.stp.off{opacity:.4;pointer-events:none}
.num{width:44px;height:44px;border-radius:50%;background:var(--ac);color:#1a1300;font-weight:800;display:grid;place-items:center;font-size:20px}
.ck{list-style:none;padding:0;margin:10px 0}.ck li{display:flex;gap:12px;align-items:center;padding:6px 0}
.ok{color:var(--ok);font-weight:700}.ko{color:var(--mu)}.spin{width:18px;height:18px;flex:none;border:3px solid var(--line);border-top-color:var(--ac);border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-weight:600}
.tip{border-left:3px solid var(--ac);padding:8px 14px;background:var(--bg);border-radius:0 8px 8px 0;margin:12px 0}
.tree{width:100%;max-width:360px;margin:8px 0}.pop{animation:pop .4s}@keyframes pop{from{transform:scale(.8);opacity:0}}
/* ---- refonte visuelle ---- */
body{background:radial-gradient(900px 520px at 88% -8%,#ffc83d26,transparent 60%),radial-gradient(760px 520px at -10% 28%,#5b8cff22,transparent 60%),#0b1020;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(#000,transparent 75%);mask-image:linear-gradient(#000,transparent 75%)}
nav{position:sticky;top:0;z-index:10;margin:0 -20px;padding:14px 20px;background:#0b1020b8;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff0d}
h1{font-size:clamp(42px,7.2vw,80px);line-height:.98}
.card{background:linear-gradient(160deg,#19233f,#121a30);box-shadow:0 12px 32px #0006}
.btn{border-radius:10px;box-shadow:0 8px 26px #ffc83d40}.btn.s{box-shadow:none}
.num{box-shadow:0 0 0 6px #ffc83d24}
.hero{padding:44px 0 20px}.hero svg{width:100%;height:auto;filter:drop-shadow(0 24px 44px #000a)}
.hero>div:first-child{animation:up .8s both}@keyframes up{from{opacity:0;transform:translateY(18px)}}
.sec{margin-top:72px}