/* G4G — design tokens (SOURCE DE VÉRITÉ VISUELLE).
 *
 * Origine : livraison Claude Design du 2026-07-15
 * (« Plateforme web G4G » → docs/design-tokens.css + G4G Design System.dc.html).
 * Les 22 maquettes .dc.html utilisent EXACTEMENT ces noms → ils sont canoniques.
 * Aucune couleur ne doit être écrite en dur ailleurs : tout passe par ces variables.
 *
 * ┌ DÉCISION (tranchée en session, cf. prompt 05 §1) ───────────────────────────┐
 * │ Les noms de la livraison (« --g4g-primary ») remplacent les nôtres, qui      │
 * │ portaient un segment « color » (« --g4g-color-primary »). La livraison est   │
 * │ la source et ses 22 maquettes utilisent ses noms ; notre surface CSS était   │
 * │ minuscule (~275 réf.) → renommage mécanique, zéro dette.                     │
 * └─────────────────────────────────────────────────────────────────────────────┘
 *
 * ÉCARTS RELEVÉS DANS LA LIVRAISON (documentés au rapport retour) :
 *  1. `docs/design-tokens.css` OMET les 4 tokens identitaires « 4P »
 *     (people/planet/prosperity/purpose) alors que les maquettes les utilisent
 *     166 fois sur 22 écrans → réintégrés ici depuis le Design System.
 *  2. `--g4g-info` et `--g4g-accent-hover` sont définis dans le Design System
 *     mais utilisés 0 fois → conservés (créneaux sémantiques utiles).
 *  3. Les squelettes de chargement codent leurs gris EN DUR (#e8ecf0/#dce2e8)
 *     dans les maquettes → promus en tokens ici.
 *  4. Aucune maquette ne définit d'anneau de focus visible → token créé
 *     (exigence WCAG 2.2 AA, non spécifiée par le design → à confirmer).
 *  5. Le mode sombre EST livré (Design System, `[data-theme="dark"]`) mais AUCUN
 *     des 22 écrans n'est maquetté en sombre → HORS PÉRIMÈTRE V1 (décision
 *     Alexandre 2026-07-15). Palette consignée au rapport, pas ici.
 */
:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --g4g-surface: #ffffff;
  --g4g-surface-alt: #eef1f4;
  --g4g-surface-sunken: #f6f8fa;
  --g4g-ink: #062a3c; /* encre de marque — fond des sections sombres (héro, témoignages) ; constante clair/sombre */
  --g4g-news-panel: #004d71; /* [2026-09-10] encadré du hub « Nouvelles » = bleu marine officiel (--g4g-primary), demande Alexandre (avant : #4e738a gris-bleu) */

  /* ── Primaire & accent ────────────────────────────────────────────────── */
  --g4g-primary: #004d71; /* bleu marine — actions, titres, navigation */
  --g4g-primary-hover: #013a57;
  --g4g-primary-contrast: #ffffff;
  --g4g-accent: #007298;
  --g4g-accent-hover: #005f7e;
  /* Bleu primaire très clair — teinte de fond des états actifs (nav), des cartes
   * de mise en avant (« Global Vision », callout 4P) et du survol des boutons
   * secondaires. Déclaré dans le Design System et sur CHAQUE maquette du site
   * (`--g4g-primary-soft:#e6eff4`, utilisé 20+ fois) mais OMIS de
   * docs/design-tokens.css → promu ici, même logique que les tints ci-dessous. */
  --g4g-primary-soft: #e6eff4;

  /* ── Les 4 P — accents identitaires ───────────────────────────────────────
   * People / Planet / Prosperity / Purpose : la signature de marque G4G
   * (méthode 4P). Absents de docs/design-tokens.css mais utilisés partout
   * dans les maquettes — source : G4G Design System.dc.html.
   * Ce sont des couleurs IDENTITAIRES : elles ne remplacent pas les
   * sémantiques ci-dessous, même quand la valeur coïncide.
   */
  --g4g-people: #ce0e2d;
  --g4g-planet: #007298;
  --g4g-prosperity: #00953b;
  --g4g-purpose: #eba900;

  /* Certification ESG — dégradé vert des 4 niveaux (n1 clair → n4 foncé, Lot 4). */
  --g4g-esg-n1: #5cb385;
  --g4g-esg-n2: #2f9c5f;
  --g4g-esg-n3: #0f8a44;
  --g4g-esg-n4: #006a2f;

  /* ── Décoratifs de marque (sections bespoke de l'accueil) ─────────────────
   * NON livrés en tokens par Claude Design, promus ici pour respecter la règle
   * « aucune couleur littérale hors tokens.css » (garde-fou common/tests_tokens).
   * Roue conique du sigle « GL◉BAL » = 4 couleurs officielles ODD (S4 Programmes) ;
   * accent-on-dark = sur-ligne turquoise clair sur bande sombre (S11 Témoignages) ;
   * ink-raised = 2ᵉ stop des dégradés de chargement sur --g4g-ink ; wordmark-muted =
   * gris du sigle. Les alphas sombres (overlays héro, scrims vidéo, ombres) dérivent
   * de --g4g-ink / black par color-mix directement dans sections.css.
   */
  --g4g-sdg-yellow: #fcc30b;
  --g4g-sdg-red: #e5243b;
  --g4g-sdg-blue: #0a97d9;
  --g4g-sdg-green: #4c9f38;
  --g4g-accent-on-dark: #7fc4d8;
  --g4g-ink-raised: #0a3a52;
  --g4g-slider-shade: #141414; /* noir NEUTRE pour ombrer la couleur du P sans virage pourpre (slider 4P) — ≠ ink teinté bleu */
  --g4g-wordmark-muted: #9aa1a8;
  /* Encre foncée de repli sur les surfaces ODD (couleurs ONU) : sur les mi-teintes,
   * le blanc et le gris de charte #2b3138 échouent WCAG (≤4,0:1) → #101820 prend le
   * relais (règle : blanc si ≥4,5:1, sinon cette encre). Réservé aux surfaces ODD. */
  --g4g-odd-ink: #101820;

  /* ── Teintes translucides ────────────────────────────────────────────────
   * Utilisées telles quelles dans les maquettes mais JAMAIS tokenisées par la
   * livraison : l'item de nav actif porte `rgba(0,77,113,.08)` (= primaire à 8 %)
   * et le surlignage `<mark>` de l'autocomplétion `rgba(0,114,152,.18)`
   * (= accent à 18 %). Promus en tokens pour rester ré-habillables.
   */
  --g4g-primary-tint: rgba(0, 77, 113, 0.08);
  --g4g-accent-tint: rgba(0, 114, 152, 0.18);

  /* ── Texte ────────────────────────────────────────────────────────────── */
  --g4g-text: #2b3138;
  --g4g-text-muted: #5e656c;
  /* Assombri de la livraison #8a8f96 (WCAG : 3,26:1, ÉCHEC AA) : #6b7178 = 4,93:1
     sur blanc / 4,63:1 sur surface-sunken. `text-subtle` sert du TEXTE (horodatages,
     méta, aides) → doit atteindre 4,5:1. Même logique que --g4g-success-text. */
  --g4g-text-subtle: #6b7178;

  /* ── Bordures ─────────────────────────────────────────────────────────── */
  --g4g-border: #dde3e8;
  --g4g-border-strong: #c4ccd3;

  /* ── Statuts ──────────────────────────────────────────────────────────── */
  --g4g-success: #00953b;
  --g4g-warning: #eba900;
  --g4g-danger: #ce0e2d;
  --g4g-info: #007298;

  /* ── Variantes ACCESSIBLES des statuts (écart assumé, à confirmer) ────────
   * Le vert et le jaune de la charte ne passent PAS le contraste WCAG AA en
   * TEXTE (mesuré) :
   *   · #00953b sur la teinte verte du badge « Certifié durable » = 3,36:1 ;
   *   · #00953b avec du blanc dessus                              = 3,92:1 ;
   *   · #eba900 avec du blanc dessus                              = 2,06:1.
   * (4,5:1 requis pour du texte normal.)
   *
   * `--g4g-success-text` est le vert de marque à 80 % de luminosité — MÊME
   * teinte (144°), même saturation — qui atteint 4,90:1 sur la teinte du badge.
   * Il ne sert QU'AU TEXTE ; les aplats gardent `--g4g-success`.
   * Pour `--g4g-warning`, aucune variante n'est nécessaire : il suffit d'y poser
   * du texte FONCÉ (6,38:1) plutôt que du blanc.
   * → À faire trancher par Claude Design (rapport retour, §Couleurs).
   */
  --g4g-success-text: #00772f;
  --g4g-success-tint: rgba(0, 149, 59, 0.12);
  --g4g-success-tint-border: rgba(0, 149, 59, 0.28);

  /* ── Teintes du mode révision (livraison « Mode révision » 2026-09-14) ─────
   * NOTE-LIVRAISON-2026-09-14-mode-revision.md §3.2 : quatre tokens, aucune autre couleur.
   *  · danger-tint  : texte retiré de l'écart, statut Rejetée, motif (texte --g4g-danger
   *    dessus : 4,75:1 ; même alpha que .g4g-admin-status--out) ;
   *  · warning-tint (+ border) : Périmée, brouillon non publié, permission modifiée non
   *    confirmée (texte --g4g-text dessus ; même alpha que le badge « Featured ») ;
   *  · on-primary-line : contours sur fond bleu (Quitter, fermer du tiroir et de la fenêtre),
   *    valeur reprise de cms_front.css. */
  --g4g-danger-tint: rgba(206, 14, 45, 0.1);
  --g4g-warning-tint: rgba(235, 169, 0, 0.16);
  --g4g-warning-tint-border: rgba(235, 169, 0, 0.4);
  --g4g-on-primary-line: rgba(255, 255, 255, 0.45);

  /* ── Ombres ───────────────────────────────────────────────────────────── */
  --g4g-shadow-sm: 0 1px 2px rgba(16, 33, 42, 0.06);
  --g4g-shadow-md: 0 3px 12px rgba(16, 33, 42, 0.1);
  --g4g-shadow-lg: 0 12px 32px rgba(16, 33, 42, 0.14);

  /* ── Focus & halos ───────────────────────────────────────────────────────
   * Les maquettes emploient QUATRE halos proches sans jamais les tokeniser :
   *   · champ de recherche en saisie   rgba(0,77,113,.15)
   *   · focus d'un champ de formulaire rgba(0,77,113,.18)
   *   · focus d'un champ en erreur     rgba(206,14,45,.16)
   *   · survol du bouton secondaire    rgba(0,77,113,.07)  → cf. --g4g-primary-tint
   * On les nomme ici. `--g4g-focus-ring` est NOTRE anneau de focus (aucune
   * maquette n'en spécifie un) : exigence WCAG 2.2 AA, à confirmer au design.
   */
  --g4g-halo: 0 0 0 3px rgba(0, 77, 113, 0.15);
  --g4g-field-focus: 0 0 0 3px rgba(0, 77, 113, 0.18);
  --g4g-field-focus-error: 0 0 0 3px rgba(206, 14, 45, 0.16);
  --g4g-focus-ring: 0 0 0 3px rgba(0, 114, 152, 0.45);
  /* Piste du spinner sur fond primaire (bouton « Chargement… »). */
  --g4g-spinner-track: rgba(255, 255, 255, 0.45);

  /* ── Squelettes de chargement ─────────────────────────────────────────────
   * Codés en dur dans les maquettes (#e8ecf0 / #dce2e8) — promus en tokens.
   */
  --g4g-skeleton-base: #e8ecf0;
  --g4g-skeleton-highlight: #dce2e8;

  /* ── Rayons ───────────────────────────────────────────────────────────── */
  --g4g-radius-sm: 6px;
  /* Rayon des CARTES = 10px (valeur dominante des maquettes, ×18 ; cf.
   * docs/protocole-miroir.md Porte 1). Distinct de radius-md (12px), conservé
   * pour les éléments que le design dessine bien à 12px. */
  --g4g-radius-card: 10px;
  --g4g-radius-md: 12px;
  --g4g-radius-lg: 20px;
  --g4g-radius-pill: 999px; /* défaut du composant Bouton (décision imposée) */

  /* ── Espacement (base 4px) ────────────────────────────────────────────── */
  --g4g-space-0: 0;
  --g4g-space-1: 4px;
  --g4g-space-2: 8px;
  --g4g-space-3: 12px;
  --g4g-space-4: 16px;
  --g4g-space-5: 20px;
  --g4g-space-6: 24px;
  --g4g-space-8: 32px;
  --g4g-space-10: 40px;
  --g4g-space-12: 48px;
  --g4g-space-16: 64px;

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --g4g-font-sans: "Poppins", system-ui, sans-serif;
  --g4g-font-heading: var(--g4g-font-sans); /* une seule famille dans la livraison */

  /* 300 = graisse d'AFFICHAGE des grands titres du site vitrine (Poppins Light).
   * Auto-hébergée depuis 2026-08 (latin + latin-ext) via frontend/build-fonts.mjs. */
  --g4g-weight-light: 300;
  --g4g-weight-regular: 400;
  --g4g-weight-medium: 500;
  --g4g-weight-semibold: 600;
  --g4g-weight-bold: 700;

  /* Échelle de taille — base 15 px (décision client 2026-07-27, accessibilité ;
   * réf. docs/QUESTIONS-POUR-CLAUDE-DESIGN.md §C-7 / REPONSES-DESIGN.md). Le point
   * d'a11y « échelle trop petite » (base 14 px) signalé dans le rapport retour est
   * TRANCHÉ : on monte le corps à 15 px (sm 14, xs 12,5, md 17, lg 19). Les
   * maquettes .dc.html affichent encore 14 px par endroits — les tokens font foi,
   * pas le pixel du proto.
   */
  --g4g-text-xs: 12.5px;
  --g4g-text-sm: 14px;
  --g4g-text-base: 15px;
  --g4g-text-md: 17px;
  --g4g-text-lg: 19px;
  --g4g-text-xl: 22px;
  --g4g-text-2xl: 28px;
  --g4g-text-3xl: 34px;

  /* [2026-09-04] Barème typographique PILOTABLE par le CMS (super-admin, bande bleue).
   * Défauts ici (repli) ; le super-admin les remplace via un <style nonce> (theme.py +
   * common/typography.py). Appliqués aux éléments de base h1–h4/p et aux classes
   * utilitaires .g4g-t-* (base.css). Voir common/typography.py::DEFAULTS. */
  --g4g-h1-size: 34px;
  --g4g-h1-weight: 700;
  --g4g-h2-size: 28px;
  --g4g-h2-weight: 700;
  --g4g-h3-size: 22px;
  --g4g-h3-weight: 600;
  --g4g-h4-size: 19px;
  --g4g-h4-weight: 600;
  --g4g-subtitle-size: 17px;
  --g4g-subtitle-weight: 400;
  --g4g-body-size: 15px;
  --g4g-body-weight: 400;
  /* [2026-09-07] Couleur par niveau (demande Alexandre) : `inherit` par défaut (= comportement
   * actuel, le texte hérite de sa couleur) ; le panneau Typographie émet un hex (via <style
   * nonce>) qui prend le dessus quand une couleur est choisie. */
  --g4g-h1-color: inherit;
  --g4g-h2-color: inherit;
  /* [2026-09-08 · #13] Couleur de titre SECONDAIRE (fond non blanc) — défaut « inherit »
     (aucune bascule) ; le panneau typographie injecte un hex quand l'admin en règle une.
     `--g4g-title-color` = couleur des titres bespoke, bascule posée par g4g-cms-bg-* ; par
     défaut = couleur de texte normale. */
  --g4g-h1-color-2: inherit;
  --g4g-h2-color-2: inherit;
  --g4g-h3-color-2: inherit;
  --g4g-h4-color-2: inherit;
  --g4g-title-color: var(--g4g-text);
  --g4g-h3-color: inherit;
  --g4g-h4-color: inherit;
  --g4g-subtitle-color: inherit;
  --g4g-body-color: inherit;
  /* [#10a lot 2] Échelle globale des titres « bespoke » des sections (héro/titres de
   * section). 1 = taille d'origine ; le super-admin l'ajuste (panneau Typographie) via un
   * <style nonce>. Appliquée : font-size: calc(clamp(...) * var(--g4g-title-scale)). */
  --g4g-title-scale: 1;

  --g4g-leading-tight: 1.2;
  --g4g-leading-snug: 1.35;
  --g4g-leading-normal: 1.55;

  --g4g-tracking-tight: -0.01em;
  --g4g-tracking-caps: 0.07em;

  /* ── Z-index (les nôtres — absents de la livraison, conservés) ─────────── */
  --g4g-z-dropdown: 100;
  --g4g-z-sticky: 200;
  /* Hauteur de la bande 1 de l en-tete, posee a l execution par header.js (retraction). */
  --g4g-header-top-h: 0px;
  --g4g-z-modal: 300;
  --g4g-z-toast: 400;

  /* Hauteur de l'en-tête collant (2 bandes, mesurée à 126 px sur desktop 1280) :
   * offset de référence pour les éléments collants qui doivent se caler DESSOUS
   * (barre de pastilles du répertoire). L'en-tête n'a pas de hauteur fixe ; sur
   * mobile il enveloppe (recherche sur sa ligne) → les collants s'y désactivent. */
  --g4g-header-height: 126px;

  /* ── Mouvement (chantier « G4G en mouvement », 2026-09) ───────────────────
   * Socle motion : durées, courbes et distances des reveals/micro-interactions.
   * Consommés par static/css/motion.css et posés par static/js/motion.js.
   * Ce ne sont PAS des couleurs → hors périmètre du garde-fou tokens couleurs,
   * mais ils vivent ici parce que tokens.css est la source de vérité visuelle :
   * aucune durée/courbe d'animation « signature » ne doit être écrite en dur.
   *
   * Distance de reveal validée par Alexandre : 44px (les 24px d'essai étaient
   * trop discrets). Décalage de cascade 110ms. Courbes : `ease-out` = sortie
   * douce (décélération) pour les reveals ; `ease-pop` = léger rebond pour les
   * apparitions ludiques (pastilles ODD) ; `ease-sweep` = balayage des rideaux.
   */
  --g4g-dur-fast: 180ms;        /* micro-transitions (survols de boutons, focus) */
  --g4g-dur-base: 300ms;        /* transitions standard (cartes, liens animés) */
  --g4g-dur-highlight: 700ms;   /* surlignage animé du titre du héro */
  --g4g-dur-reveal: 800ms;      /* entrée des sections/cartes au défilement */
  --g4g-dur-signature: 1200ms;  /* moments signature (compteurs, orchestration) */

  --g4g-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --g4g-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --g4g-ease-sweep: cubic-bezier(0.7, 0, 0.2, 1);

  --g4g-reveal-dist: 44px;      /* montée d'un reveal `data-anim` (défaut) */
  --g4g-reveal-dist-x: 28px;    /* glissement latéral des variantes left/right */
  --g4g-stagger-step: 110ms;    /* pas de cascade entre items d'un `data-anim-group` */

  /* ── Presets d'animation PAR AUDIENCE (chantier « Animation par audience », 2026-09)
   * Le rythme d'un reveal dépend de l'AUDIENCE de sa section/page (décision Alexandre,
   * maquette Communauté). Deux presets, posés comme variables `--anim-*` par
   * `[data-audience]` dans motion.css ; les reveals génériques les consomment (repli =
   * tokens ci-dessus → zéro régression sans audience). Les animations SPÉCIFIQUES
   * (compteur, surlignage, parallaxe, .g4g-pop, rideau) ne lisent PAS `--anim-*` → elles
   * gardent leur rythme.
   *
   *   Entreprise = POSÉ : fondu lent, décélération douce, SANS rebond. C'est le DÉFAUT
   *     DE SITE (décision `audience.default_slug = entreprises`). Durée/cascade
   *     VOLONTAIREMENT plus lentes que le socle reveal (Alexandre 2026-09-10 : creuser le
   *     contraste avec le citoyen). Tuner dur/seq ici pour ajuster le ressenti.
   *   Citoyen = DYNAMIQUE : rapide, léger rebond (ease-pop), petit pop d'échelle.
   *     Valeurs issues de la maquette validée — à confirmer au ressenti (tuner ici). */
  --g4g-anim-dur-ent: 1150ms;                    /* entrée POSÉE, volontairement lente (contraste ↑ vs citoyen — Alexandre 2026-09-10) */
  --g4g-anim-ease-ent: var(--g4g-ease-out);     /* décélération douce, sans rebond */
  --g4g-anim-dist-ent: var(--g4g-reveal-dist);  /* 44px (distance validée Alexandre) */
  --g4g-anim-scale-ent: 1;                       /* aucun pop d'échelle */
  --g4g-anim-seq-ent: 160ms;                     /* cascade lente et délibérée (vs 90ms citoyen) */

  --g4g-anim-dur-cit: var(--g4g-dur-base);      /* 300ms — entrée rapide */
  --g4g-anim-ease-cit: var(--g4g-ease-pop);     /* léger rebond */
  --g4g-anim-dist-cit: 32px;                     /* montée un peu plus courte */
  --g4g-anim-scale-cit: 0.93;                    /* léger pop d'échelle à l'entrée */
  --g4g-anim-seq-cit: 90ms;                      /* cascade plus serrée = plus vive */

  /* Offsets de PARALLAXE posés à l'exécution par motion.js (par élément, en px) ;
   * défaut 0 = aucun décalage (état initial + hors mouvement). motion.css applique
   * `transform: translate3d(var(--g4g-px-x), var(--g4g-px-y), 0)` sur les [data-px].
   * Passer par des variables CSS (et non `el.style.transform`) garde le JS lisible. */
  --g4g-px-x: 0px;
  --g4g-px-y: 0px;
}