/* Jetons de design : source unique de la direction artistique « Terrain ».
   Parti pris : la précision d'un outil professionnel, l'énergie d'un club. Surfaces blanches et froides, encre marine profonde
   pour le texte et les actions, vert pelouse pour ce qui est interactif, et une seule couleur signal (jaune volt) réservée
   aux moments qui comptent : progression, argent reçu, étape en cours. Titres en Bricolage Grotesque, texte en Hanken Grotesk.
   Toute couleur, taille, forme ou durée de l'interface vient d'ici. Le mode sombre redéfinit les mêmes jetons. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* Couleurs */
  --fond: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FB;
  --surface-verre: rgba(242, 244, 247, 0.78);
  --encre: #0B1730;
  --texte: #253149;
  --doux: #5A667E;
  --trait: #E4E8EF;
  --trait-fort: #C5CDDA;
  --accent: #00704A;
  --accent-fonce: #00563A;
  --accent-clair: #DFF4EA;
  --action: #0B1730;            /* fond des boutons principaux */
  --action-survol: #1B2B4D;
  --sur-action: #FFFFFF;
  --signal: #CDF23F;            /* jaune volt : progression, étape en cours, argent reçu */
  --sur-signal: #1A2600;
  --attention: #8F4A00;
  --attention-clair: #FDF0D9;
  --danger: #B3261E;
  --danger-clair: #FCE9E7;
  --info: #1D4ED8;
  --info-clair: #E5EDFD;
  --neutre-clair: #E9EDF2;
  --focus: #00704A;
  --voile: rgba(11, 23, 48, 0.42);
  /* Typographie */
  --police: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --police-titre: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --t-xs: 0.75rem;
  --t-s: 0.8125rem;
  --t-m: 0.9375rem;
  --t-l: 1.125rem;
  --t-xl: 1.75rem;
  --t-xxl: 2.25rem;
  --t-geant: clamp(2.5rem, 6vw, 4.5rem);
  /* Espacements (pas de 4 px) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  /* Formes : trois rayons, selon la taille de l'objet */
  --rayon-s: 10px;              /* champs, petits contrôles */
  --rayon: 18px;                /* panneaux */
  --rayon-l: 28px;              /* feuilles et grandes surfaces */
  --rayon-rond: 999px;          /* boutons, pastilles */
  /* Relief : un liseré très fin et une ombre portée basse, jamais de bordure grise épaisse */
  --ombre: 0 0 0 1px rgba(11, 23, 48, 0.06), 0 1px 2px rgba(11, 23, 48, 0.04);
  --ombre-moyenne: 0 0 0 1px rgba(11, 23, 48, 0.06), 0 6px 20px -8px rgba(11, 23, 48, 0.16);
  --ombre-haute: 0 0 0 1px rgba(11, 23, 48, 0.08), 0 24px 60px -16px rgba(11, 23, 48, 0.32);
  /* Mouvement : court, et seulement en réponse à un geste */
  --duree: 180ms;
  --duree-longue: 420ms;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --largeur-nav: 248px;
  --cible: 44px; /* taille minimale d'une cible tactile */
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0A1222; --surface: #121C30; --surface-2: #17233B; --surface-verre: rgba(10, 18, 34, 0.78);
  --encre: #F3F6FB; --texte: #D2D9E6; --doux: #94A0B8; --trait: #223049; --trait-fort: #35466A;
  --accent: #5BD9A3; --accent-fonce: #8BE8C0; --accent-clair: #123627;
  --action: #CDF23F; --action-survol: #DBF76B; --sur-action: #1A2600;
  --attention: #F2B766; --attention-clair: #3A2A10; --danger: #FF8A80; --danger-clair: #3F1815; --info: #8FB0FF; --info-clair: #162748;
  --neutre-clair: #1B2843; --focus: #5BD9A3; --voile: rgba(0, 0, 0, 0.6);
  --ombre: 0 0 0 1px rgba(255, 255, 255, 0.06); --ombre-moyenne: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 20px -8px rgba(0, 0, 0, 0.6); --ombre-haute: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -16px rgba(0, 0, 0, 0.8);
}

/* Polices proposées aux pages de collecte (chargées seulement si une page les utilise) */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/sora.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }