/* ============================================================
   Pronovo — Design System
   Aigile Stack · Version 1.0 · 2026-07-04
   ============================================================ */

/* ------------------------------------------------------------
   PALETTE — Primaire : Vert émeraude jewel-tone (WCAG AA ≥ 4.5:1 sur blanc)
   Teinte de base : hsl(160, 55%, 30%) — #1c6b52, profond et saturé sans être criard
   ------------------------------------------------------------ */
:root {
  --couleur-primaire-50:   hsl(160, 45%, 96%);
  --couleur-primaire-100:  hsl(160, 42%, 90%);
  --couleur-primaire-300:  hsl(160, 45%, 62%);
  --couleur-primaire-500:  hsl(160, 55%, 30%); /* #1c6b52 · ~7:1 sur blanc ✅ WCAG AA */
  --couleur-primaire-600:  hsl(160, 58%, 25%);
  --couleur-primaire-700:  hsl(160, 62%, 20%);
  --couleur-primaire-900:  hsl(162, 65%, 11%);

  /* Secondaire : Ambre désaturé (énergie, compétition, victoire — accent, pas flashy) */
  --couleur-secondaire-100: hsl(38, 55%, 92%);
  --couleur-secondaire-300: hsl(38, 58%, 70%);
  --couleur-secondaire-500: hsl(36, 62%, 47%);
  --couleur-secondaire-700: hsl(32, 65%, 34%);

  /* Bronze — statut podium 3e place uniquement */
  --couleur-bronze-700: hsl(25, 75%, 31%);

  /* Texte sur fond ambre plein (contraste garanti sur secondaire-500) */
  --couleur-ambre-texte: hsl(28, 100%, 8%);

  /* Avatars sans photo — teintes neutres additionnelles, contraste vérifié ≥ 4.5:1 */
  --couleur-avatar-bleu-fond:   hsl(200, 40%, 90%);
  --couleur-avatar-bleu-texte:  hsl(200, 60%, 28%);
  --couleur-avatar-rose-fond:   hsl(340, 40%, 90%);
  --couleur-avatar-rose-texte:  hsl(340, 60%, 32%);
  --couleur-avatar-violet-fond: hsl(280, 35%, 90%);
  --couleur-avatar-violet-texte: hsl(280, 50%, 32%);

  /* Neutres : slate légèrement teintés vert */
  --couleur-neutre-50:   hsl(160, 14%, 97%);
  --couleur-neutre-100:  hsl(160, 12%, 94%);
  --couleur-neutre-200:  hsl(160, 10%, 88%);
  --couleur-neutre-300:  hsl(160, 8%,  72%);
  --couleur-neutre-400:  hsl(160, 6%,  55%);
  --couleur-neutre-500:  hsl(160, 5%,  40%);
  --couleur-neutre-600:  hsl(160, 6%,  28%);
  --couleur-neutre-700:  hsl(160, 7%,  20%);
  --couleur-neutre-800:  hsl(160, 8%,  14%);
  --couleur-neutre-900:  hsl(160, 9%,   9%);

  /* Statuts (stables, semi-standard) */
  --couleur-succes-500:    hsl(160, 55%, 30%); /* = primaire */
  --couleur-attention-500: hsl(38, 92%, 50%);  /* = secondaire */
  --couleur-erreur-500:    hsl(0, 72%, 50%);
  --couleur-info-500:      hsl(210, 88%, 47%);

  --couleur-succes-100:    hsl(160, 45%, 93%);
  --couleur-attention-100: hsl(38, 100%, 92%);
  --couleur-erreur-100:    hsl(0, 86%, 95%);
  --couleur-info-100:      hsl(210, 100%, 94%);

  /* ------------------------------------------------------------
     TYPOGRAPHIE — Inter (Google Fonts)
     ------------------------------------------------------------ */
  --police-principale: 'Inter', system-ui, -apple-system, sans-serif;
  --police-scores:     'Inter', system-ui, sans-serif; /* tabular-nums activé */

  /* Échelle */
  --taille-texte-xs:   0.75rem;  /* 12px */
  --taille-texte-sm:   0.875rem; /* 14px */
  --taille-texte-base: 1rem;     /* 16px — minimum mobile (anti-zoom iOS) */
  --taille-texte-lg:   1.125rem; /* 18px */
  --taille-texte-xl:   1.5rem;   /* 24px */
  --taille-texte-2xl:  2rem;     /* 32px */
  --taille-texte-3xl:  2.5rem;   /* 40px */

  /* Icônes hors Lucide (emoji, glyphes) */
  --taille-icone-moyenne: 1.25rem; /* 20px — nav mobile, drapeaux emoji */
  --taille-icone-decorative: 2.25rem; /* 36px — illustrations emoji type prochain-match */

  /* Graisse */
  --graisse-normal:     400;
  --graisse-medium:     500;
  --graisse-semi-gras:  600;
  --graisse-gras:       700;
  --graisse-extra-gras: 800;

  /* ------------------------------------------------------------
     ESPACEMENTS — Grille de 4px
     ------------------------------------------------------------ */
  --espace-1:  0.25rem;  /* 4px */
  --espace-2:  0.5rem;   /* 8px */
  --espace-3:  0.75rem;  /* 12px */
  --espace-4:  1rem;     /* 16px */
  --espace-5:  1.25rem;  /* 20px */
  --espace-6:  1.5rem;   /* 24px */
  --espace-8:  2rem;     /* 32px */
  --espace-10: 2.5rem;   /* 40px */
  --espace-12: 3rem;     /* 48px */
  --espace-16: 4rem;     /* 64px */

  /* ------------------------------------------------------------
     ARRONDIS
     ------------------------------------------------------------ */
  --arrondi-sm:   0.25rem;  /* 4px — badges inline */
  --arrondi-md:   0.5rem;   /* 8px — inputs, boutons sm */
  --arrondi-lg:   0.75rem;  /* 12px — cards */
  --arrondi-xl:   1rem;     /* 16px — modals, panels */
  --arrondi-2xl:  1.5rem;   /* 24px — bottom sheets mobile */
  --arrondi-full: 9999px;   /* pills, avatars */

  /* ------------------------------------------------------------
     OMBRES
     ------------------------------------------------------------ */
  --ombre-sm:   0 1px 2px 0 hsl(160 8% 20% / 0.06);
  --ombre-md:   0 4px 6px -1px hsl(160 8% 20% / 0.08), 0 2px 4px -2px hsl(160 8% 20% / 0.05);
  --ombre-lg:   0 10px 15px -3px hsl(160 8% 20% / 0.10), 0 4px 6px -4px hsl(160 8% 20% / 0.05);
  --ombre-xl:   0 20px 25px -5px hsl(160 8% 20% / 0.10), 0 8px 10px -6px hsl(160 8% 20% / 0.05);
  --anneau-focus-primaire: hsl(160 55% 30% / 0.18);

  /* ------------------------------------------------------------
     SURFACES — Mode clair (défaut)
     ------------------------------------------------------------ */
  --surface-fond:       var(--couleur-neutre-50);
  --surface-carte:      #ffffff;
  --surface-surbrillance: var(--couleur-primaire-50);
  --surface-separateur: var(--couleur-neutre-200);

  --texte-principal:    var(--couleur-neutre-900);
  --texte-secondaire:   var(--couleur-neutre-500);
  --texte-desactive:    var(--couleur-neutre-300);
  --texte-inverse:      #ffffff;
  --texte-lien:         var(--couleur-primaire-500);

  /* ------------------------------------------------------------
     INTERACTIONS
     ------------------------------------------------------------ */
  --cible-tactile-min:  3rem;    /* 48px — touch targets */
  --duree-transition:   150ms;
  --easing-transition:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------ */
  --z-fond:       -1;
  --z-base:        0;
  --z-survol:     10;
  --z-fixe:      100;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* ------------------------------------------------------------
   MODE SOMBRE
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-fond:       var(--couleur-neutre-900);
    --surface-carte:      var(--couleur-neutre-800);
    --surface-surbrillance: hsl(160, 30%, 16%);
    --surface-separateur: var(--couleur-neutre-700);

    --texte-principal:    var(--couleur-neutre-50);
    --texte-secondaire:   var(--couleur-neutre-400);
    --texte-desactive:    var(--couleur-neutre-600);
    --texte-inverse:      var(--couleur-neutre-900);
    --texte-lien:         var(--couleur-primaire-300);
  }
}

:root[data-theme="dark"] {
  --surface-fond:       var(--couleur-neutre-900);
  --surface-carte:      var(--couleur-neutre-800);
  --surface-surbrillance: hsl(160, 30%, 16%);
  --surface-separateur: var(--couleur-neutre-700);

  --texte-principal:    var(--couleur-neutre-50);
  --texte-secondaire:   var(--couleur-neutre-400);
  --texte-desactive:    var(--couleur-neutre-600);
  --texte-inverse:      var(--couleur-neutre-900);
  --texte-lien:         var(--couleur-primaire-300);
}

:root[data-theme="light"] {
  --surface-fond:       var(--couleur-neutre-50);
  --surface-carte:      #ffffff;
  --surface-surbrillance: var(--couleur-primaire-50);
  --surface-separateur: var(--couleur-neutre-200);

  --texte-principal:    var(--couleur-neutre-900);
  --texte-secondaire:   var(--couleur-neutre-500);
  --texte-desactive:    var(--couleur-neutre-300);
  --texte-inverse:      #ffffff;
  --texte-lien:         var(--couleur-primaire-500);
}

/* ------------------------------------------------------------
   RESET MINIMAL
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-principale);
  font-size: var(--taille-texte-base);
  font-weight: var(--graisse-normal);
  color: var(--texte-principal);
  background-color: var(--surface-fond);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--texte-lien);
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

/* Chiffres tabulaires pour scores / rangs */
.scores,
[class*="__score"],
[class*="__rang"],
[class*="__points"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}