/* tokens.css — variables de thème, reset et primitives typographiques. Chargé en premier. */
:root{
  /* --blue2 assombri de #5980a6 à #4f7099 : c'est le fond des boutons primaires et des badges,
     toujours avec du texte blanc, et il ne donnait que 4,15:1 — sous le seuil AA de 4,5. À
     #4f7099 il donne 5,11:1. Même famille bleu-ardoise, l'écart est imperceptible à l'œil mais
     décisif à la mesure. Le token étant partagé, la correction profite aussi aux badges .tag,
     au compteur .chip .n et à l'accent-color des cases et curseurs.
     --warn reste tel quel : il ne sert QUE de fond ou de pastille, jamais de texte. Les rares
     endroits où il servait de couleur de texte utilisent #8f5424 (5,5:1 sur crème). */
  --bg:#f2f2f3; --ink:#1d1f20; --blue:#416180; --blue2:#4f7099; --deep:#2c455d;
  --grey:#5d5d60; --line:#d9d9dc; --card:#ffffff; --soft:#ececed; --ok:#3f7a4f; --warn:#a8632b;
  --warn-ink:#8f5424; --warn-bg:#fbf3ea; --warn-line:#e8d9c4;
  /* Rouge d'erreur : messages de formulaire, favori actif, retrait du panier.
     5,44:1 sur blanc. Il traînait en littéral dans deux CSS et un template JS. */
  --danger:#c0392b;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:"Barlow",system-ui,sans-serif;font-size:15px;line-height:1.4}
h1,h2,h3,.cond{font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:600}
.mono{font-variant-numeric:tabular-nums}

/* --- Accessibilité : socle commun --- */

/* Indicateur de focus UNIQUE pour toute l'application. `:focus-visible` (et non `:focus`)
   pour ne l'afficher qu'à la navigation clavier, sans cerner les éléments au clic souris.
   --deep sur fond clair = 9,9:1, très au-dessus du 3:1 exigé pour un indicateur non-textuel.
   Sur les rares surfaces sombres (boutons de galerie sur photo), l'outline reste visible
   grâce à l'offset qui le décolle du fond de l'élément. */
:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:2px}

/* Texte réservé aux lecteurs d'écran : retiré du flux visuel sans être retiré de
   l'arbre d'accessibilité (contrairement à `display:none` ou `visibility:hidden`). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Lien d'évitement : premier élément focusable de la page, invisible jusqu'à ce qu'il
   reçoive le focus. Sans lui, un utilisateur clavier retraverse header + 9 groupes de
   filtres à chaque chargement avant d'atteindre les résultats. */
.skip{position:absolute;left:8px;top:-60px;z-index:300;background:var(--deep);color:var(--card);
  padding:11px 18px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  transition:top .12s}
.skip:focus{top:8px}

/* Respect de `prefers-reduced-motion`. L'application utilise trois scrollTo({behavior:'smooth'})
   et quelques transitions — peu de chose, mais le réglage système existe pour des troubles
   vestibulaires réels, et l'ignorer n'a aucune justification ici.
   On NEUTRALISE sans supprimer : durées ramenées à 1ms plutôt que `transition:none`, pour que
   les changements d'état (chevron d'accordéon, apparition du lien d'évitement) restent
   perceptibles au lieu de disparaître. scroll-behavior:auto coupe le défilement animé, que le
   JS demande explicitement — la déclaration CSS l'emporte sur l'option passée à scrollTo. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}