/* =====================================================================
   TAG BRUSSELS — LES JETONS DE LA CHARTE
   ---------------------------------------------------------------------
   ⚠️ MEME STRUCTURE QUE web_garden ET web_moving, PALETTE PROPRE A CE
   BUSINESS. Les 72 noms du noyau commun sont ici, dans le meme ordre et
   avec les memes sections. Un developpeur qui passe d'un site a l'autre
   retrouve son vocabulaire ; seules les couleurs changent.

   Le noyau est passe de 65 a 72 noms le 09/08/2026 : l'echelle
   d'espacement a gagne --space-9, 12, 14, 15, 16, 18 et 20, les sept
   crans qui manquaient pour exprimer sans valeur en dur les rythmes
   verticaux des trois sites.

   Les jetons STRUCTURELS — espacements, durees, z-index, rayons de
   pilule, echelle de texte — portent les MEMES VALEURS que les deux
   autres sites. Ce ne sont pas des choix de marque, ce sont des choix de
   systeme, et un systeme qui varie d'un site a l'autre n'en est pas un.

   ⚠️ CE FICHIER EST LA SEULE SOURCE DU VISUEL. Aucune couleur, taille,
   espacement ou duree en dur dans styles.css. Aucun `style=` dans le HTML.

   Pose le 09/08/2026 : ce depot etait le dernier a porter son propre
   vocabulaire (--navy, --ink, --blue-pale, --fs-*). Le renommage a ete
   verifie par tools/moteur/css_resolu.js — variables resolues des deux
   cotes, aucune declaration differente.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     MARQUE — l'orange de Tag Brussels sur le bleu nuit
     --------------------------------------------------------------- */
  --primary: oklch(0.72 0.11 45);              /* #e08050 : accent principal */
  --primary-foreground: oklch(1 0 0);
  --primary-mid: oklch(0.65 0.13 40);          /* survol */
  --primary-soft: oklch(0.94 0.035 55);        /* fonds orange pale (pastilles) */

  --accent: oklch(0.63 0.065 245);             /* le bleu des illustrations */
  --accent-foreground: oklch(1 0 0);

  /* ⚠️ Propres a ce site, comme `--lime` l'est au jardin : le bleu acier
     a trois variantes que le noyau commun ne nomme pas. */
  --accent-strong: oklch(0.55 0.075 245);      /* survol du bleu */
  --accent-deep: oklch(0.63 0.065 245);        /* fonds bleus soutenus */

  /* Le pendant bleu de --primary-soft : une SURFACE pale, pour du texte
     fonce. Posee le 12/08/2026 pour les cartes de FAQ.
     ⚠️ IL EXISTE PARCE QUE --muted NE POUVAIT PAS SERVIR ICI. Les cartes de
     FAQ se posent sur une section en --muted : leur donner --muted revenait
     a les faire disparaitre (1.00:1). --accent-soft s'en detache de 1.12:1,
     et la bordure fait le reste.
     ⚠️ IL NE PORTE JAMAIS D'ICONE NI DE TEXTE BLANC : sur blanc il plafonne
     a 1.19:1, tres au-dessous des 3:1 exiges pour un objet graphique. Avec
     --foreground il donne 11.29:1. La regle vaut pour tous les bleus pales
     du site, --muted compris (1.07:1) : un fond bleu clair impose un texte
     et des icones FONCES, et ca s'arrete de se discuter des qu'on le
     calcule. */
  --accent-soft: oklch(0.935 0.028 240);       /* fonds bleu pale (cartes de FAQ) */

  --whatsapp: oklch(0.72 0.17 145);
  --whatsapp-foreground: oklch(1 0 0);

  /* ---------------------------------------------------------------
     SURFACES ET TEXTE
     --------------------------------------------------------------- */
  --background: oklch(1 0 0);
  --foreground: oklch(0.30 0.06 250);          /* #16324a : titres et texte */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.30 0.06 250);
  --muted: oklch(0.975 0.008 240);             /* fonds bleu pale : alternance */
  --muted-foreground: oklch(0.44 0.03 250);
  --border: oklch(0.90 0.025 242);
  --input: oklch(0.90 0.025 242);

  /* ⚠️ L'anneau de focus est ORANGE sur ce site, et c'est deliberé : sur
     un fond bleu nuit, un anneau bleu ne se voit pas. */
  --ring: oklch(0.72 0.11 45);

  --success: oklch(0.55 0.12 150);
  --destructive: oklch(0.55 0.20 27);

  --overlay: oklch(0.3 0.05 250 / 0.5);
  --overlay-soft: color-mix(in oklab, oklch(0 0 0) 20%, transparent);

  /* ---------------------------------------------------------------
     RAYONS
     --------------------------------------------------------------- */
  --radius: 10px;                              /* petits elements */
  --radius-card: 16px;                         /* cartes, pop-up, sections */
  --radius-pill: 9999px;

  /* ---------------------------------------------------------------
     OMBRES
     --------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0.30 0.05 250 / 0.10);
  --shadow-md: 0 8px 24px oklch(0.30 0.05 250 / 0.16);
  --shadow-lg: 0 12px 32px oklch(0.3 0.05 250 / 0.16);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);

  /* ⚠️ Propre a ce site : l'ombre douce des cartes, plus legere que
     `--shadow-sm` et posee au repos. */
  --shadow-card: 0 2px 10px oklch(0.3 0.05 250 / 0.08), 0 1px 3px oklch(0.3 0.05 250 / 0.06);

  /* ---------------------------------------------------------------
     TYPOGRAPHIE
     ---------------------------------------------------------------
     ⚠️ DEUX ECHELLES, et elles ne servent pas a la meme chose.
     `--step-*` est FLUIDE : elle suit la largeur de l'ecran, pour le
     texte de document. `--text-*` est FIXE : elle sert a l'interface,
     dont les libelles ne doivent pas grandir avec la fenetre.
     --------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);   /* 13-15px */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);   /* 16-18px : texte courant */
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);   /* 19-23px : h3 */
  --step-2:  clamp(1.50rem, 1.30rem + 0.90vw, 2.00rem);   /* 24-32px */
  --step-3:  clamp(2.05rem, 1.65rem + 1.80vw, 3.10rem);   /* 33-50px : h2 */
  --step-4:  clamp(2.45rem, 1.85rem + 2.80vw, 4.00rem);   /* 39-64px : h1 */

  --text-3xs: 0.66rem;
  --text-2xs: 0.74rem;
  --text-xs: 0.84rem;
  --text-sm: var(--step--1);
  --text-md: 1.05rem;
  --text-lg: var(--step-1);
  --text-btn-lg: clamp(1.02rem, 0.97rem + 0.22vw, 1.14rem);

  /* ---------------------------------------------------------------
     ESPACEMENTS — grille de 4 px, identique sur les trois sites
     --------------------------------------------------------------- */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* ⚠️ L'ECHELLE S'ARRETAIT A 2.5rem, et les trois sites avaient besoin de
     plus haut : 24 espacements etaient ecrits en dur alors qu'ils tombaient
     PILE sur la grille de 4 px. Ce n'etait pas une faute dans les feuilles,
     c'etait un trou dans l'echelle.
     Le nom suit la meme regle que les autres : N = valeur / 0.25rem. */
  --space-9: 2.25rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-15: 3.75rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;

  /* ---------------------------------------------------------------
     MOUVEMENT — identique sur les trois sites
     --------------------------------------------------------------- */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.5s;
  --ease: ease;
  --delay-hover-grace: 0.3s;

  /* ---------------------------------------------------------------
     MISE EN PAGE
     --------------------------------------------------------------- */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(2.5rem, 6vw, 4.5rem);
  --header-h: 4rem;

  --z-header: 100;
  --z-mobilebar: 110;
  --z-overlay: 200;
}