:root{
  --black:#0b0b0d; --ink:#0c0c0f; --white:#fff; --paper:#f6f5f2; --line:#e7e5e1; --line2:#d3d1cc;
  --muted:#5a606b; --faint:#8a909b; --red:#e11d2a; --red-lift:#f23545; --red-soft:#fdeced;
  --ok:#15803d; --ok-bg:#e8f5ec; --warn:#b45309; --warn-bg:#fdf3e2; --bad:#c81e1e; --bad-bg:#fdecec;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(16px,5vw,60px); --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:#f1f2f5;font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(28px,3.6vw,44px)}
h2 em,h1 em{font-style:normal;color:var(--red)}
.tag{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.tag::before{content:"";width:28px;height:3px;background:var(--red)}
.lead{color:#a3a8b1;font-size:clamp(16px,1.4vw,19px);margin-top:18px;max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--red);color:#fff;font:700 16px var(--body);padding:15px 24px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--red-lift)}
.btn:disabled{opacity:.6;cursor:wait}
.btn--ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
.btn--ghost:hover{background:rgba(127,127,127,.12)}

/* barre */
.bar{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.bar img{height:58px;width:auto;filter:brightness(1.18) contrast(1.06)}
.bar .btn{padding:11px 18px;font-size:15px}

/* sections claires */
.sec{padding:clamp(56px,8vh,100px) 0}
.sec--white{background:var(--white);color:var(--ink)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--white .lead,.sec--paper .lead{color:var(--muted)}

footer{background:var(--black);border-top:1px solid rgba(255,255,255,.12);padding:30px 0;color:#7c828c;font-size:15px}
footer .in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer img{height:52px;width:auto;filter:brightness(1.15)}
footer a{color:#c3c7ce}

/* pastilles d'état : toujours icône + libellé */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.pill svg{width:14px;height:14px;flex:none}
.pill--ok{color:var(--ok);background:var(--ok-bg)}
.pill--attention{color:var(--warn);background:var(--warn-bg)}
.pill--critique{color:var(--bad);background:var(--bad-bg)}
.pill--neutre{color:var(--muted);background:#efeeea}

@media (max-width:640px){
  body{font-size:16px}
  .bar img{height:44px}
  .bar .btn{padding:10px 14px;font-size:14px}
  footer img{height:42px}
}
@media print{
  .bar,footer,.no-print{display:none!important}
  body{background:#fff;color:#000}
}