/* ============================================================================
   contrast-aa.css — extension de contraste WCAG AA
   LOT CONTRASTE-COMPARATEUR · 2026-08-12

   POURQUOI CETTE FEUILLE EXISTE
   -----------------------------
   `maquette/css/footlab.css` est le MIROIR du projet Claude Design : il fait foi
   et ne se modifie pas. Or un de ses tokens est sous le seuil AA en thème clair
   sur ses PROPRES fonds de carte.

   Cette feuille est donc chargée APRÈS le miroir et n'y touche pas — même règle
   et même modèle que `plan-rail.css` et `fixtures-card.css`.

   Écart de maquette assumé, détaillé en DoD : docs/ai/dod-contraste-aa.md
   Mesures : docs/rapports/2026-08-12-lot-contraste-comparateur.md
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. `--muted-foreground` en thème clair : #64748b → #556173
   ---------------------------------------------------------------------------
   #64748b tient 4,55:1 sur le fond de page nu (#f8fafc) — donc « AA » si on le
   mesure là. Mais AUCUNE carte n'est un fond nu : dès qu'un composant pose son
   voile, le token décroche. Mesuré en production le 2026-08-12 :

       #f8fafc  fond de page nu ......... 4,55:1  ✅   (3 nœuds)
       #f3f6fa  carte voilée légère ..... 4,39:1  ❌
       #f2f5f9  carte voilée ............ 4,35:1  ❌  (35 nœuds)
       #f0f3f8  carte voilée dense ...... 4,28:1  ❌  (612 nœuds)
       #f4f0ed  bandeau légal ........... 4,20:1  ❌
       #e2e8f0  puce .................... 3,86:1  ❌
       #e8ded6  voile ambré ............. 3,59:1  ❌

   Sur /ligue-1/bilans : 649 nœuds sur 652 sous le seuil.

   C'est EXACTEMENT le défaut que le HOTFIX landing-polish avait diagnostiqué et
   corrigé côté legacy — « #64748b tenait 4,55:1 sur le fond de page nu, mais
   retombait sous AA dès qu'un composant posait son propre voile clair » — en
   retenant #556173. Le token MAQUETTE n'avait jamais suivi.

   On reprend donc #556173, déjà validé par le projet et déjà la valeur de
   `--muted-text` : aucune teinte inventée, les deux familles de tokens
   convergent. Min mesuré sur l'ensemble des fonds clairs réels : 4,74:1.

   Le thème SOMBRE n'est pas touché (#a1afc2, min 7,02:1) : il est sain.

   Qualifié par `:root` — leçon du HOTFIX landing-polish : `theme-vars` repasse
   APRÈS cette feuille et la reprendrait à spécificité égale.
   `html.theme-light:root` (0,2,1) passe au-dessus quel que soit l'ordre. */
html.theme-light:root {
    --muted-foreground: #556173;
}


/* ---------------------------------------------------------------------------
   2. Onglets de statistiques — indicateur d'état et focus visible
   ---------------------------------------------------------------------------
   Deux défauts distincts, mesurés sur la piste d'onglets partagée
   (comparateur, /stats, classements — cf. partials/stats/tabs-styles) :

   a) L'ÉTAT ACTIF ne se lisait QUE PAR ACCIDENT. L'onglet actif était à 17,8:1
      et les inactifs à 1,09:1 : « l'onglet lisible est l'onglet actif ». Les
      indices propres à l'état actif, eux, sont sous le seuil composant (3:1) :
          fond actif vs fond inactif ... 1,13:1  ❌
          bordure de l'onglet actif .... 1,28:1  ❌
      Rendre les inactifs lisibles — ce que fait ce lot — SUPPRIME donc la seule
      différence visible. L'indicateur ci-dessous n'est pas un embellissement :
      il remplace ce que la correction retire.

      Choix : un liseré inférieur sur l'accent de marque. Le contraste porte sur
      la BORDURE et non sur le texte, qui reste sur `--text` — c'est le corollaire
      de design consigné dans CLAUDE.md, valide dans les deux thèmes par
      construction (--accent : 9,95:1 sombre / 4,80:1 clair contre le fond nu,
      au-dessus du seuil 3:1 des composants d'interface).

   b) AUCUN FOCUS VISIBLE : `outline-style: none` était servi en production, et
      `outline-color` héritait de `color` — donc invisible même s'il avait été
      dessiné (WCAG 2.4.7 en échec). */
.stats-tab.is-active,
.stats-subtab.is-active {
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
    box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.12), inset 0 -2px 0 0 var(--accent);
}

.stats-tab:focus-visible,
.stats-subtab:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   3. Sélecteur de contexte — alphas trop faibles en thème clair
   ---------------------------------------------------------------------------
   Ces libellés sont peints en `rgba(--text-rgb, α)` avec un alpha en dur. Sur
   fond blanc, mesuré en production :

       .ctx-switch__grouplabel  α 0,50 → 3,41:1  ❌
       .ctx-switch__code        α 0,55 → 3,99:1  ❌
       .ctx-switch__season      α 0,58 → 4,26:1  ❌

   Le composant est rendu dans l'en-tête de TOUTES les surfaces publiques : le
   défaut se voit sur les 6 surfaces mesurées.

   α 0,72 porte le pire cas à 5,07:1 sur blanc tout en gardant la hiérarchie
   visuelle voulue (ces libellés restent plus discrets que le texte courant). */
html.theme-light:root .ctx-switch__grouplabel,
html.theme-light:root .ctx-switch__code,
html.theme-light:root .ctx-switch__season {
    color: rgba(var(--text-rgb), 0.72);
}