/* Identité : monochrome par défaut, teinte personnalisable par l'utilisateur.
   Les variables --hue et --lum sont écrites par js/theme.js depuis les réglages. */

:root {
  --hue: 0;
  --lum: 0;            /* -100 (sombre) → +100 (clair) ; 0 = monochrome pur */

  --bg:#0C0E11; --surface:#14171C; --surface-2:#1A1E25; --surface-3:#20252E;
  /* LES GRIS DE TEXTE SE LISENT AVEC UNE VUE FAIBLE (13/10/2026, demande de Bilel : « on doit penser
     aux gens qui ont des problèmes de vue »). WCAG 1.4.6, contraste renforcé : 7:1 au moins, le niveau
     prévu pour une acuité d'environ 20/80 sans aide technique. Le gris secondaire tient 9:1 et le
     tertiaire 7:1 sur le fond le PLUS DÉFAVORABLE de chaque thème (surface-3) ; ils étaient à 5,0 et
     2,5:1 ici, 4,7 et 2,1:1 en clair. Même teinte, seule la clarté a bougé. */
  --ink:#F1F3F6; --ink-2:#BDC7D5; --ink-3:#A7B0BD; --line:#262B34;
  --accent:#EDEFF2; --on-accent:#101318;
  --accent-soft:color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 40%, transparent);

  /* L'OR DES COURBES (13/10/2026, demande de Bilel : « un doré parfait, étincelant » au maximum).
     Le dégradé va de --or-bas (le plus bas score du contexte) à --or (le maximum de l'épreuve).
     Une ligne se lit à 3:1 au moins sur chaque fond de carte (WCAG 1.4.11) : calculé sur les
     quatre fonds de CHAQUE thème — ici 9,2 à 11,5:1 ; le gris du bas est --ink-3 (7:1). */
  --or:#F2C230; --or-bas:var(--ink-3);
  --good:#37B98C; --good-soft:color-mix(in srgb, var(--good) 15%, transparent);
  --miss:#E4726F; --miss-soft:color-mix(in srgb, var(--miss) 15%, transparent);
  --warn:#D9A441;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.55);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --pad:20px;
  --tap:48px;          /* cible tactile minimale, utilisable avec des gants */

  /* LA BANDE VERT KAKI EN HAUT DE CHAQUE ÉCRAN (12/10/2026, demande de Bilel). La couleur est
     `darkolivegreen` des feuilles de style, la teinte nommée la plus proche du vert kaki militaire
     (les « khaki » du web tirent sur le jaune). Une seule ligne à changer pour une autre teinte. */
  --kaki:#4B5320; --on-kaki:#FFFFFF;   /* plus foncé le 12/10/2026 au soir (demande de Bilel) : vert armée, au lieu de #556B2F */
  --bande:14px;        /* hauteur de la bande, sous la barre d'état */
}

/* LE FOND BLANC (12/10/2026, demande de Bilel : « le fond blanc doit y être, comme pour tous les
   grands sites »). La page est BLANCHE ; les cartes, d'un gris très clair, gardent la structure
   qu'elles avaient quand c'était l'inverse (fond gris, cartes blanches). Le clair est le thème par
   défaut depuis ce jour. */
:root[data-theme="light"] {
  --bg:#FFFFFF; --surface:#F4F5F7; --surface-2:#ECEEF1; --surface-3:#E4E7EB;
  --ink:#10151D; --ink-2:#333C48; --ink-3:#444C57; --line:#E1E4E9;   /* gris de texte à 9 et 7:1 au moins (13/10/2026, voir :root) */
  /* LES BOUTONS DE VALIDATION PRENNENT LA COULEUR DE LA MARQUE (12/10/2026, demande de Bilel : « il n'y a
     pas de fond noir » chez les grands sites — Facebook, Instagram, Booking mettent leur couleur sur leurs
     boutons d'action, texte blanc dessus). L'accent était #111417, presque noir ; il devient le kaki de la
     bande. Blanc sur ce kaki : contraste 8,2:1 (calculé). */
  --accent:var(--kaki); --on-accent:#FFFFFF;
  --or:#A87B00;   /* l'or le plus vif qui tient 3:1 sur le fond le plus clair de ce thème (3,08:1 sur --surface-3) */
  --good:#1E9A70; --miss:#C9504D;
  --shadow:0 1px 2px rgba(15,21,29,.06), 0 12px 34px rgba(15,21,29,.14);
}

/* LE THÈME GRIS (12/10/2026, demande de Bilel : « un thème couleurs gris […] pour être neutre »).
   Tout en gris moyens, l'accent compris : rien ne ressort que le contenu. C'est un thème CLAIR par
   sa lisibilité — encre foncée sur fond gris —, donc il suit le clair partout où l'app distingue
   les deux (logo, impression, teinte personnalisée). */
:root[data-theme="gris"] {
  --bg:#E6E8EB; --surface:#F1F2F4; --surface-2:#E9EBEE; --surface-3:#DFE2E6;
  --ink:#1B1F24; --ink-2:#313942; --ink-3:#424850; --line:#D3D7DC;   /* gris de texte à 9 et 7:1 au moins (13/10/2026, voir :root) */
  --accent:#34383E; --on-accent:#FFFFFF;   /* #4A5059 jusqu'au 13/10/2026 : l'accent de ce thème EST un gris de texte (pastille cochée, score), il tombait à 5,1:1 ; 7:1 au moins désormais, blanc dessus 11,8:1 */
  --or:#9C7200;   /* 3,35:1 au moins sur les quatre fonds de ce thème */
  --good:#3D7F68; --miss:#A65552;
  --shadow:0 1px 2px rgba(20,24,30,.07), 0 12px 30px rgba(20,24,30,.12);
}

/* Teinte personnalisée : appliquée seulement si l'utilisateur a bougé le curseur.
   La luminosité est bornée pour garantir le contraste avec le fond. */
:root[data-tint="on"] {
  --accent: hsl(var(--hue) 62% calc(72% + var(--lum) * 0.18%));
  --on-accent:#0B0D10;
}
:root[data-theme="light"][data-tint="on"],
:root[data-theme="gris"][data-tint="on"] {
  --accent: hsl(var(--hue) 58% calc(34% + var(--lum) * 0.14%));
  --on-accent:#FFFFFF;
}

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