/* Identité visuelle du duel — tirée des maquettes validées par Aymeric le 23/10/2026
   (https://claude.ai/artifact/PrFZbUH5J6zeLkyraxiNMU). Sombre d'abord, accent feu. Ne pas inventer d'autres couleurs. */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&display=swap");
:root{
  --fond:#110e0d; --carte:#1c1816; --carte-2:#241a14; --bord:#342d2a; --bord-2:#2d2624; --piste:#2d2624;
  --texte:#f3ede6; --texte-2:#d8cdbf; --muet:#a99f96; --muet-2:#8a8078;
  --feu:#ff6a1a; --feu-2:#ff8a3d; --feu-3:#ffb347; --sur-feu:#1a0f08;
  --ok:#34d27b; --ko:#ff4d5e; --or:#f2b84b; --bleu:#6c8cff;
  --ok-fond:#13241b; --ok-bord:#1f5a3a; --ko-fond:#241418; --ko-bord:#5a2330; --or-fond:#2a2216; --or-bord:#6b5420;
  --police:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --chiffres:'Rajdhani','Hanken Grotesk',system-ui,sans-serif;
  --rayon:18px; --rayon-s:14px; --gouttiere:16px;
  --haut-nav:78px;
}
@media (prefers-color-scheme: light){ :root[data-theme="auto-clair"]{ /* le duel reste sombre ; pas de thème clair */ } }
html,body{background:var(--fond);color:var(--texte);font-family:var(--police);margin:0}
.chiffre{font-family:var(--chiffres);font-weight:700;line-height:1}
.titre-ecran{font-family:var(--chiffres);font-weight:700;font-size:38px;line-height:1;margin:0}
.sous-titre{font-size:13px;color:var(--muet);margin-top:4px}
.etiquette{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--muet);text-transform:uppercase}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:14px}
.pastille{font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--carte);border:1px solid var(--bord);color:var(--muet)}
.pastille.actif{background:var(--feu);color:var(--sur-feu);border-color:var(--feu);font-weight:700}
.bouton{background:var(--feu);color:var(--sur-feu);font-weight:700;font-size:15px;border:0;border-radius:14px;padding:13px 18px;min-height:44px}
.bouton.discret{background:transparent;color:var(--texte);border:1px solid #4a403b;font-weight:600}
.positif{color:var(--ok)} .negatif{color:var(--ko)} .or{color:var(--or)}