/* ============================================================
   Arkane Risk — feuille de style des guides/articles
   Reprend les tokens du design Coinbase de la page principale.
   ============================================================ */
:root{
  --primary:#0052ff; --primary-active:#003ecc;
  --ink:#0a0b0d; --body:#5b616e; --body-strong:#0a0b0d;
  --muted:#7c828a; --muted-soft:#a8acb3;
  --hairline:#dee1e6; --hairline-soft:#eef0f3;
  --canvas:#ffffff; --surface-soft:#f7f7f7; --surface-strong:#eef0f3;
  --surface-dark:#0a0b0d; --surface-dark-elev:#16181c;
  --on-dark:#ffffff; --on-dark-soft:#a8acb3;
  --up:#05b169; --down:#cf202f; --yellow:#f4b000;
  --maxw:1200px; --readw:760px;
  --rs:8px; --rm:12px; --rl:16px; --rxl:24px; --pill:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--body);line-height:1.5;font-size:16px;background:var(--canvas);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative}

h1,h2,h3{font-weight:400;color:var(--ink);letter-spacing:-0.015em;line-height:1.05}
h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-0.025em}
h2{font-size:clamp(1.65rem,3vw,2.4rem);letter-spacing:-0.02em;line-height:1.1}
h3{font-size:1.25rem;font-weight:600;letter-spacing:0;line-height:1.3}
p{margin-bottom:1em;color:var(--body)}
strong{color:var(--body-strong);font-weight:700}
em{font-style:normal;color:var(--primary);font-weight:500}
a{color:var(--primary);text-decoration:none}
/* surcharge du surlignage natif (sélection + « scroll-to-text » de Chrome, or moche par défaut) */
::selection{background:rgba(91,140,255,.30);color:inherit}
::-moz-selection{background:rgba(91,140,255,.30);color:inherit}
::target-text{background:rgba(91,140,255,.30);color:inherit}
a:hover{text-decoration:underline;text-underline-offset:2px}
.mono{font-family:'JetBrains Mono',monospace;font-weight:500}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--surface-strong);border-radius:var(--pill);padding:5px 14px;margin-bottom:22px;
}
.eyebrow.on-dark{background:rgba(255,255,255,.1);color:var(--on-dark)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.15;letter-spacing:0;
  background:var(--primary);color:var(--on-dark);border:1px solid transparent;
  padding:16px 32px;border-radius:var(--pill);cursor:pointer;
  transition:background .18s ease,transform .18s ease;text-decoration:none;
}
.btn:hover{background:var(--primary-active);transform:translateY(-1px);text-decoration:none}
.btn-on-dark{background:var(--surface-dark-elev);color:var(--on-dark)}
.btn-on-dark:hover{background:#22252b}
.btn-sec{background:var(--surface-strong);color:var(--ink)}
.btn-sec:hover{background:#e3e7ec}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:60;background:rgba(10,11,13,.86);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.logo{font-weight:700;font-size:1.15rem;color:var(--on-dark);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo i{width:10px;height:10px;background:var(--primary);border-radius:50%;display:inline-block;font-style:normal}
.nav .navcta{background:var(--primary);color:#fff;padding:10px 20px;border-radius:var(--pill);font-weight:600;font-size:14px;transition:background .18s}
.nav .navcta:hover{background:var(--primary-active);text-decoration:none}

/* ============ ARTICLE HERO ============ */
.ahero{background:var(--surface-dark);color:var(--on-dark);padding:64px 0 72px}
.ahero .wrap{max-width:880px}
.breadcrumb{font-size:13px;color:var(--on-dark-soft);margin-bottom:24px}
.breadcrumb a{color:var(--on-dark-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.breadcrumb span{color:var(--muted-soft);margin:0 8px}
.ahero h1{color:var(--on-dark);max-width:20ch;margin-bottom:.45em}
.ahero .standfirst{font-size:1.2rem;color:var(--on-dark-soft);line-height:1.5;max-width:60ch}
.ahero .standfirst strong{color:var(--on-dark)}
.ameta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;font-size:13px;color:var(--muted-soft)}
.ameta .mono{color:var(--on-dark-soft)}

/* ============ ARTICLE BODY ============ */
.article{padding:72px 0 88px}
.article .wrap{max-width:var(--readw)}
.toc{background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--rl);padding:24px 28px;margin-bottom:48px}
.toc b{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:10px}
.toc li{counter-increment:toc;position:relative;padding-left:30px;font-size:15px}
.toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--primary);top:2px}
.toc a{color:var(--ink)}

.prose h2{margin:48px 0 16px;scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 12px}
.prose p{font-size:1.0625rem;line-height:1.65;margin-bottom:1.1em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:28px;margin-bottom:12px;font-size:1.0625rem;line-height:1.6;color:var(--body)}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--primary)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:0;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--primary)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--body-strong)}

/* callout / encadré */
.callout{border:1px solid var(--hairline);border-left:3px solid var(--primary);background:var(--surface-soft);border-radius:var(--rl);padding:22px 26px;margin:32px 0}
.callout p{margin-bottom:0;font-size:1rem}
.callout.warn{border-left-color:var(--down)}
.callout.warn b{color:var(--down)}
.callout .lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* stat inline */
.statline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.statline .s{border:1px solid var(--hairline);border-radius:var(--rl);padding:22px}
.statline .s b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:1.9rem;color:var(--primary);display:block;line-height:1;letter-spacing:-.02em}
.statline .s span{display:block;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.4}
.statline .s a{color:var(--muted);text-decoration:underline}

/* mid-article CTA */
.midcta{border:1px solid var(--hairline);border-radius:var(--rxl);padding:32px;margin:48px 0;background:var(--canvas)}
.midcta h3{margin-bottom:8px}
.midcta p{font-size:15px;margin-bottom:20px}

blockquote{border-left:3px solid var(--primary);padding:4px 0 4px 22px;margin:28px 0;font-size:1.2rem;color:var(--ink);line-height:1.4}

/* ============ RELATED ============ */
.related{padding:0 0 88px}
.related .wrap{max-width:var(--readw)}
.related h2{font-size:1.5rem;margin-bottom:24px}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rcard{display:block;border:1px solid var(--hairline);border-radius:var(--rxl);padding:26px;transition:box-shadow .2s,transform .2s;text-decoration:none}
.rcard:hover{box-shadow:0 4px 12px rgba(0,0,0,.04);transform:translateY(-2px);text-decoration:none}
.rcard .k{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--primary);display:block;margin-bottom:10px}
.rcard h3{font-size:1.05rem;margin-bottom:6px}
.rcard p{font-size:14px;margin:0;color:var(--body)}

/* ============ FAQ ============ */
.faq{max-width:var(--readw)}
details{border-bottom:1px solid var(--hairline-soft)}
summary{padding:24px 4px;font-size:1.0625rem;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .18s}
summary:hover{color:var(--primary)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'JetBrains Mono',monospace;color:var(--primary);font-size:1.4rem;line-height:1;flex-shrink:0}
details[open] summary::after{content:"−"}
details > div{padding:0 4px 26px;color:var(--body);max-width:72ch;font-size:15px;line-height:1.6}

/* ============ FINAL CTA ============ */
section{position:relative}
.section-pad{padding:88px 0}
.final{background:var(--surface-dark);color:var(--on-dark);text-align:center;padding:88px 0}
.final h2{color:var(--on-dark);max-width:18ch;margin:0 auto .5em}
.final .lede{color:var(--on-dark-soft);margin:0 auto 2em;text-align:center;font-size:1.125rem;max-width:62ch;line-height:1.5}
.final .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============ DISCLAIMER + FOOTER ============ */
.disclaimer{padding:48px 0;background:var(--surface-soft);border-top:1px solid var(--hairline-soft)}
.disclaimer .wrap{max-width:920px}
.disclaimer p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}
.disclaimer b{color:var(--body-strong)}
footer{padding:64px 0;background:var(--canvas);border-top:1px solid var(--hairline)}
footer .logo{color:var(--ink);margin-bottom:18px}
footer .logo i{background:var(--primary)}
footer p{font-size:14px;color:var(--body);margin-bottom:8px}
footer .mono{font-size:13px;color:var(--muted)}
footer a{color:var(--primary)}

/* ============ REVEAL ============ */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}
@media(max-width:860px){
  .section-pad,.final{padding:64px 0}
  .article{padding:56px 0 64px}
  .statline,.rgrid{grid-template-columns:1fr}
}