@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,900;1,900&family=Inter:wght@400;600;800&display=swap");

:root { color-scheme: dark; --acid: #c7ff19; --ink: #0b0d0c; --paper: #f3f5f1; --muted: #99a099; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b0d0c; color: var(--paper); font-family: Inter, Arial, sans-serif; }
header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px,5vw); border-bottom: 1px solid #2d332e; background: rgba(11,13,12,.96); }
header a { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font: 900 20px "Barlow Condensed",Impact,sans-serif; }
header img { width: 35px; height: 35px; border-radius: 8px; }
header b { color: var(--acid); }
header .back { padding: 9px 12px; border: 1px solid #3a423b; color: #bbc1bb; font: 800 8px Inter,sans-serif; text-transform: uppercase; }
main { width: min(820px,calc(100% - 36px)); margin: 0 auto; padding: 70px 0 90px; }
.eyebrow { margin: 0 0 12px; color: var(--acid); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 0; font: 900 clamp(56px,10vw,100px)/.78 "Barlow Condensed",Impact,sans-serif; letter-spacing: -.04em; }
h1 em { color: var(--acid); }
.intro { max-width: 700px; margin: 25px 0 10px; color: #b5bbb5; font-size: 14px; line-height: 1.7; }
.updated { color: #6f776f; font-size: 9px; text-transform: uppercase; }
section { margin-top: 38px; padding: 25px; border: 1px solid #303731; background: #121512; }
section h2 { margin: 0 0 13px; font: 900 25px "Barlow Condensed",Impact,sans-serif; text-transform: uppercase; }
section p, section li { color: #a5ada6; font-size: 12px; line-height: 1.75; }
section ul { margin: 0; padding-left: 19px; }
a { color: var(--acid); }
.danger { border-color: #7d352d; background: linear-gradient(120deg,rgba(173,48,37,.12),#121512); }
.danger > a { display: inline-block; margin-top: 8px; padding: 12px 15px; background: var(--acid); color: var(--ink); font-size: 9px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
footer { display: flex; justify-content: space-between; padding: 24px max(24px,5vw); border-top: 1px solid #2d332e; color: #737a74; font-size: 8px; text-transform: uppercase; }
@media (max-width: 600px) {
  header { height: 59px; padding: 0 14px; }
  header a { font-size: 16px; }
  header .back { font-size: 0; }
  header .back::after { content: "Retour"; font-size: 8px; }
  main { padding-top: 45px; }
  section { padding: 19px; }
}