:root{
  --ink:#171310; --paper:#faf6ec; --paper-warm:#f3ead4;
  --amber:#e8920c; --amber-dark:#b8590a; --amber-pale:#fbe3ae;
  --olive:#4b5d3a; --olive-dark:#34412a; --danger:#b3121c;
  --line:rgba(23,19,16,.15); --line-soft:rgba(23,19,16,.08);
  --max:1120px; --radius:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;font-weight:400;line-height:1.05;margin:0}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dark);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber-dark)}
.hazard-rule{height:8px;background:repeating-linear-gradient(135deg,var(--amber) 0 18px,var(--ink) 18px 36px)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 20px;border-radius:var(--radius);border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{background:var(--amber-dark);border-color:var(--amber-dark)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.amber:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* header (identique homepage) */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.logo{font-family:'Bebas Neue';font-size:1.5rem;letter-spacing:.04em;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.logo span{color:var(--amber-dark)}
nav.links{display:flex;gap:26px;font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase}
nav.links a{text-decoration:none;color:var(--ink);opacity:.75;padding:4px 0}
nav.links a:hover{opacity:1;color:var(--amber-dark)}
.menu-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:var(--radius);width:42px;height:42px;padding:0;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--ink)}
.disclosure-bar{background:var(--ink);color:var(--paper-warm);font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.03em;text-align:center;padding:7px 12px}
.disclosure-bar a{color:var(--amber)}

/* breadcrumb */
.breadcrumb{font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#7a7266;padding:18px 0;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:#7a7266;text-decoration:none}
.breadcrumb a:hover{color:var(--amber-dark)}

/* article hero */
.article-hero{padding:10px 0 30px;max-width:78ch}
.article-hero h1{font-size:clamp(2.1rem,5vw,3.2rem);margin-bottom:18px}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:.74rem;color:#7a7266;text-transform:uppercase;letter-spacing:.03em;margin-top:16px}
.article-lede{font-size:1.1rem;color:#3a332c;max-width:70ch}

/* layout: article + toc */
.article-layout{display:grid;grid-template-columns:1fr 240px;gap:56px;padding-bottom:70px;align-items:start}
.toc{position:sticky;top:90px;border-left:2px solid var(--line);padding-left:18px}
.toc .eyebrow{font-size:.66rem}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:12px;font-size:.86rem}
.toc a{text-decoration:none;color:#463f36}
.toc a:hover{color:var(--amber-dark)}
.toc li::before{content:counter(toc,decimal-leading-zero)" ";font-family:'JetBrains Mono';color:var(--amber-dark);font-weight:700;margin-right:4px}

/* prose */
.prose{max-width:72ch}
.prose h2{font-size:1.7rem;margin:2.2em 0 .5em;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.18rem;font-family:'Inter';font-weight:700;letter-spacing:0;margin:1.6em 0 .5em}
.prose p{margin:0 0 1.15em;color:#2c2721}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em;color:#2c2721}
.prose li{margin-bottom:.4em}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0 1.8em;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--paper-warm);font-family:'JetBrains Mono';font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}

.callout{border-radius:var(--radius);padding:20px 22px;margin:1.8em 0;border-left:5px solid var(--ink)}
.callout h4{font-family:'JetBrains Mono';font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.callout p{margin:0;font-size:.95rem}
.callout.danger{background:#fdeceb;border-color:var(--danger)}
.callout.danger h4{color:var(--danger)}
.callout.tip{background:#eef2ea;border-color:var(--olive)}
.callout.tip h4{color:var(--olive-dark)}
.callout.info{background:var(--paper-warm);border-color:var(--amber-dark)}
.callout.info h4{color:var(--amber-dark)}

.cta-card{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:28px 30px;margin:2.4em 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-card h4{font-family:'Bebas Neue';font-size:1.5rem;margin:0 0 6px;letter-spacing:.02em}
.cta-card p{margin:0;color:#cfc7b8;font-size:.92rem;max-width:46ch}

/* related */
.related{padding:50px 0 80px;border-top:1px solid var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);background:var(--paper);transition:.15s;display:block}
.related-card:hover{border-color:var(--amber-dark);transform:translateY(-2px)}
.related-card .eyebrow{margin-bottom:10px;font-size:.62rem}
.related-card h5{font-family:'Inter';font-weight:700;font-size:1rem;margin:0}

/* blog index */
.blog-hero{padding:50px 0 20px;max-width:70ch}
.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:20px 0 80px}
.article-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);text-decoration:none;color:var(--ink);padding:26px;display:flex;flex-direction:column;transition:.15s}
.article-card:hover{border-color:var(--amber-dark);transform:translateY(-2px)}
.article-card h3{font-family:'Inter';font-weight:800;font-size:1.25rem;letter-spacing:0;margin:0 0 10px}
.article-card p{color:#463f36;font-size:.92rem;flex:1;margin:0 0 14px}
.article-card .rd{font-family:'JetBrains Mono';font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--amber-dark)}

/* footer */
footer{background:var(--ink);color:#b9b0a0;padding:50px 0 30px;font-size:.86rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:34px}
footer h5{font-family:'JetBrains Mono';font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--paper);margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
footer a{text-decoration:none;color:#b9b0a0}
footer a:hover{color:var(--amber)}
footer .legal{border-top:1px solid #3a352d;padding-top:22px;font-size:.76rem;color:#8a8172;line-height:1.7}

.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--ink);padding:10px;z-index:100}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--amber-dark);outline-offset:2px}

@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .toc{position:static;border-left:none;border-top:2px solid var(--line);padding-left:0;padding-top:16px;margin-bottom:10px}
  .toc ol{display:grid;grid-template-columns:1fr 1fr;gap:6px}
}
@media(max-width:760px){
  .menu-toggle{display:flex}
  nav.links{position:fixed;top:0;right:0;height:100vh;width:min(78vw,300px);background:var(--paper);flex-direction:column;gap:0;padding:90px 28px 28px;transform:translateX(100%);transition:transform .25s ease;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
  nav.links.open{transform:translateX(0)}
  nav.links a{font-size:.95rem;padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .wrap{padding:0 18px}
  .article-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .toc ol{grid-template-columns:1fr}
  .cta-card{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){.disclosure-bar{font-size:.62rem;line-height:1.5;padding:8px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}