/* WAHOME public : tokens, reset, typographie, utilitaires */
/* Polices : Anton et Archivo Black (SIL OFL) hébergées localement dans assets/fonts/ ; aucun CDN tiers.
   Si le fichier manque, repli sur Impact / Arial Black / police système. DM Sans : police de l'appareil si présente, sinon police système. */
@font-face{font-family:"Anton";src:local("Anton"),local("Anton Regular"),url("../fonts/Anton-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Archivo Black";src:local("Archivo Black"),local("ArchivoBlack-Regular"),url("../fonts/ArchivoBlack-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Mr Dafoe";src:local("Mr Dafoe"),local("MrDafoe-Regular"),url("../fonts/MrDafoe-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"DM Sans";src:local("DM Sans");font-weight:100 1000;font-display:swap}

:root{
  --cream:#F7F1E5; --cream-2:#EFE7D6; --ink:#111111; --red:#F1392D; --red-deep:#C62A1F;
  --yellow:#F8D52A; --blue:#2056C9; --paper:#FFFFFF; --muted:#665F56; --border:#1B1B1B; --line:#D9D0BE;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius:2px; --max-width:1440px; --gutter:clamp(16px,3vw,40px);
  --font-display:"Anton","Impact","Haettenschweiler","Arial Narrow Bold",sans-serif;
  --font-heavy:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --font-body:"DM Sans","Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-signature:"Mr Dafoe","Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  --font-mono:ui-monospace,"SF Mono","Space Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.55 var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em}
p,h1,h2,h3,h4,ul,ol,dl,dd,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.005em}
mark{background:var(--yellow);color:var(--ink);padding:0 .2em}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:1px}
.on-dark :focus-visible,.dark-focus:focus-visible{outline-color:var(--yellow)}

.wrap{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:200;background:var(--yellow);color:var(--ink);padding:var(--space-3) var(--space-4);font-weight:700;border:2px solid var(--ink)}
.skip-link:focus{top:var(--space-4)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.kicker{font:700 .75rem/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep)}
.kicker--yellow{color:var(--yellow)}
.stretched::after{content:"";position:absolute;inset:0}
.dev-banner{margin:0;padding:6px var(--gutter);background:var(--yellow);border-bottom:2px solid var(--ink);font:600 .75rem/1.3 var(--font-body);text-align:center}

.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}