/* Contrôle Blanc : socle (tokens, typographie, tampons) */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-400-900.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-400-900-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("../fonts/courier-prime-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("../fonts/courier-prime-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --papier:oklch(97.6% 0.012 88);
  --papier-2:oklch(94.5% 0.018 86);
  --kraft:oklch(86% 0.062 80);
  --kraft-2:oklch(80% 0.074 76);
  --kraft-fonce:oklch(62% 0.08 70);
  --filet:oklch(84% 0.02 85);
  --encre:oklch(24% 0.03 268);
  --encre-doux:oklch(44% 0.028 268);
  --tampon:oklch(45% 0.17 266);
  --tampon-fonce:oklch(37% 0.15 266);
  --tampon-pale:oklch(93% 0.035 266);
  --rouge:oklch(50% 0.19 27);
  --rouge-pale:oklch(94% 0.035 27);
  --ambre:oklch(55% 0.13 65);
  --ambre-pale:oklch(94.5% 0.05 85);
  --vert:oklch(48% 0.12 152);
  --vert-pale:oklch(94% 0.04 152);
  --gris-na:oklch(60% 0.015 268);

  --texte:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --machine:"Courier Prime","Courier New",ui-monospace,monospace;
  --gout:clamp(1rem,.5rem + 2.6vw,3rem);
  --large:76rem;
  --doux:cubic-bezier(.16,1,.3,1);
  --ombre:0 1px 0 oklch(80% 0.03 85),0 18px 40px -24px oklch(30% 0.04 268 / .35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--tampon)}
a:hover{color:var(--tampon-fonce)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--tampon);outline-offset:3px}
::selection{background:var(--tampon);color:var(--papier)}
.env{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gout)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.machine{font-family:var(--machine)}
.sur{font-family:var(--machine);font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-doux)}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.8rem 1.5rem;border:2px solid var(--encre);border-radius:.6rem;background:var(--encre);color:var(--papier);font:700 1rem/1.2 var(--texte);text-decoration:none;cursor:pointer;transition:transform .2s var(--doux),background .2s var(--doux),box-shadow .2s var(--doux);box-shadow:0 3px 0 var(--encre)}
.bouton:hover{color:var(--papier);background:var(--tampon-fonce);border-color:var(--tampon-fonce);box-shadow:0 3px 0 var(--encre)}
.bouton:active{transform:translateY(2px);box-shadow:0 1px 0 var(--encre)}
.bouton--tampon{background:var(--tampon);border-color:var(--tampon-fonce);box-shadow:0 3px 0 var(--tampon-fonce)}
.bouton--tampon:hover{background:var(--tampon-fonce)}
.bouton--clair{background:var(--papier);color:var(--encre)}
.bouton--clair:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.bouton[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.bouton .fleche{transition:transform .25s var(--doux)}
.bouton:hover .fleche{transform:translateX(4px)}

/* Tampons de statut */
.tampon{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .6rem .2rem;border:2.5px solid currentColor;border-radius:.35rem;font:700 .8125rem/1.1 var(--machine);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:rotate(-4deg);mix-blend-mode:multiply;position:relative}
.tampon::after{content:"";position:absolute;inset:2px;border:1px solid currentColor;border-radius:.2rem;opacity:.45}
.tampon--ok{color:var(--vert)}
.tampon--attention{color:var(--ambre)}
.tampon--ko{color:var(--rouge)}
.tampon--na{color:var(--gris-na)}
.tampon.frappe{animation:frappe .55s var(--doux) both}
@keyframes frappe{0%{opacity:0;transform:rotate(-14deg) scale(1.9)}60%{opacity:1;transform:rotate(-3deg) scale(.94)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}

/* En-tête commun */
.tete{position:sticky;top:0;z-index:30;background:var(--papier);border-bottom:1px solid var(--filet)}
.tete__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--encre);text-decoration:none;font-weight:900;font-size:1.15rem;letter-spacing:-.02em}
.logo:hover{color:var(--encre)}
.logo__marque{width:34px;height:34px;flex:none}
.logo span small{display:block;font:700 .625rem/1 var(--machine);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-doux);margin-top:.15rem}
.nav{display:none;gap:1.75rem}
.nav a{color:var(--encre);text-decoration:none;font-weight:600;font-size:.9375rem}
.nav a:hover{color:var(--tampon)}
.tete .bouton{min-height:2.75rem;padding:.55rem 1.1rem;font-size:.9375rem}
@media (min-width:900px){.nav{display:flex}}

/* Pied */
.pied{background:var(--encre);color:oklch(82% 0.02 268);padding-block:2.75rem;font-size:.875rem}
.pied a{color:var(--papier)}
.pied__in{display:grid;gap:1.5rem}
.pied__liens{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.pied__avert{max-width:62ch}
@media (min-width:800px){.pied__in{grid-template-columns:1fr auto;align-items:start}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (max-width:480px){
  .logo{font-size:1rem;gap:.45rem}
  .logo span{white-space:nowrap}
  .logo__marque{width:28px;height:28px}
  .tete .bouton{min-height:2.4rem;padding:.4rem .7rem;font-size:.8125rem;box-shadow:0 2px 0 var(--encre)}
}