/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — Jeu de jetons unique de l'application.

   Avant ce fichier, la coquille et le canvas définissaient chacun leurs
   variables sous les mêmes noms avec des valeurs différentes (--alps-dark
   valait #16161d d'un côté et #1a1a1a de l'autre) : deux gris, deux bordures,
   deux échelles de couleur de note pour un seul produit. Un seul jeu ici,
   importé par toutes les feuilles.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Marque ─────────────────────────────────────────────────────────── */
    --alps-red:      #b5122e;
    --alps-red-hi:   #e0173a;
    --alps-dark:     #16161d;
    --alps-grey:     #4a4a52;
    --alps-grey-lt:  #8a8a94;
    --alps-border:   #e3e3e8;
    --alps-light:    #f6f6f8;
    --alps-surface:  #ffffff;
    --grad-red:      linear-gradient(135deg, #e0173a 0%, #b5122e 60%, #8e0e24 100%);
    --grad-header:   linear-gradient(135deg, #1a1a2e 0%, #b5122e 100%);

    /* ── Notes — HÉRITAGE ────────────────────────────────────────────────
       Plus aucun consommateur direct depuis la migration scoreClass (09/2026) :
       l'échelle sémantique vit dans les jetons --sc-1..4 de theme-hud.css,
       seuils 40/60/75 dans core/format.js. Valeurs alignées sur les variantes
       claires AA au cas où un style externe s'y référerait encore. */
    --score-high:    #1F7A50;
    --score-mid:     #A85614;
    --score-low:     #B2312A;
    --score-na:      #9a9aa2;   /* non évaluable — jamais rouge (cf. plan v3 §4.2) */

    /* ── Accents secondaires ────────────────────────────────────────────── */
    --tour-blue:     #0277bd;
    --focus-ring:    #1d4ed8;

    /* ── Rayons et ombres ───────────────────────────────────────────────── */
    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     16px;
    --shadow-sm:     0 1px 3px rgba(22,22,29,.07), 0 1px 2px rgba(22,22,29,.05);
    --shadow-md:     0 6px 22px rgba(22,22,29,.10);
    --shadow-lg:     0 20px 60px rgba(0,0,0,.28);

    /* ── Espacement (échelle de 4) ──────────────────────────────────────── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    /* ── Typographie ────────────────────────────────────────────────────── */
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    /* ── Gabarit ────────────────────────────────────────────────────────── */
    --header-h:   58px;
    --panel-w:    340px;
}

/* L'attribut hidden doit gagner contre toute règle display du composant :
   sans cela un bouton masqué en HTML réapparaît dès qu'une classe le met en
   display:flex — c'était le cas du bouton « Recommandations ». */
[hidden] { display: none !important; }

/* Anneau de focus visible et homogène — condition de la navigation au clavier. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}