/*
 * Design tokens — valeurs relevées dans Figma V4 (voir docs/figma-map.md).
 * Toute couleur/taille/espacement/rayon/ombre utilisé dans le thème doit passer par une
 * variable de ce fichier. Ne jamais coder une valeur en dur dans un composant.
 */

:root {
	/* Couleurs de marque et neutres */
	--color-navy-900: #2a236a;
	--color-mint-500: #5fc49b; /* fond sombre uniquement (footer) — jamais en texte sur fond clair */
	--color-mint-300: #30c9a0;
	--color-mint-200: #45deb5; /* texte sur fond navy (ex. titres de colonnes du footer) */
	--color-mint-100: #e3f6ee;
	/* mint-800 (Figma mint/800, 2026-09-25) : SEULE teinte mint autorisée en texte ou symbole
	   sur fond clair — 4,63:1 sur blanc, 4,36:1 sur bg-light, 4,12:1 sur mint-100 */
	--color-mint-800: #1f8462;
	/* mint-700 resynchronisé sur Figma (#3c9672, avant #2c7759) : 3,62:1 sur blanc, jamais en
	   texte ; aucun usage dans le thème au 2026-09-25 — voir docs/decisions.md */
	--color-mint-700: #3c9672;
	--color-purple-500: #8953ec; /* variable présente dans Figma, non utilisée en V4 (voir decisions.md) */
	--color-white: #ffffff;
	--color-bg-light: #f7f8fc;
	--color-gray-200: #e9e9f2;
	--color-gray-400: #c9c8d6; /* variable neutral/gray-400 (resynchronisée le 2026-09-24, avant #d4d4e3) */
	--color-gray-600: #6d6c83; /* placeholders, valeurs « Actuel », étapes à venir */
	--color-gray-700: #4f4e63; /* resynchronisée le 2026-09-24 (avant #5b5a72) */
	--color-gray-800: #424157;
	--color-dark: #0d0d0d; /* variable neutral/Dark */

	/* États d'erreur de formulaire — non maquettés dans Figma (voir docs/decisions.md) :
	   rouge sombre, contraste 6,5:1 sur blanc et 5,9:1 sur fond d'erreur */
	--color-error: #b3261e;
	--color-error-bg: #fdecea;

	/* Couleurs par domaine (fond des vignettes/tags ; texte navy dessus) */
	--domain-neurodegenerescence: #e7d8fa;
	--domain-voix: #b4efef;
	--domain-langage-oral: #dee9ff;
	--domain-langage-ecrit: #ffcad4;
	--domain-articulation: #c7e3f9;
	--domain-deglutition: #fcd7d0;
	--domain-logico-mathematiques: #f7eeb0;
	--domain-accompagnement-parental: #b3f0e1;
	--domain-bien-etre-professionnel: #f9d2f5;
	--domain-autres-domaines: #c5edb4;

	/* Espacements — échelle officielle (variables Figma spacing-0/1/3/4/5/7/9) */
	--space-0: 0px;
	--space-4: 4px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-64: 64px;
	--space-96: 96px;
	/* Espacements — paliers intermédiaires constatés dans les composants (non tokenés dans
	   Figma mais réutilisés à plusieurs endroits), ajoutés à l'échelle plutôt que codés en
	   dur (voir docs/decisions.md) */
	--space-2: 2px;
	--space-3: 3px;
	--space-6: 6px;
	--space-8: 8px;
	--space-9: 9px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-18: 18px;
	--space-20: 20px;
	--space-28: 28px;
	--space-36: 36px;
	--space-40: 40px;
	--space-48: 48px;
	--space-56: 56px;
	--space-80: 80px; /* À propos : récit | En bref */
	--space-88: 88px; /* À propos : marge haute de « Nos engagements » */

	/* Rayons */
	--radius-full: 999px; /* boutons, chips, badges, avatars circulaires */
	--radius-lg: 20px; /* formation card */
	--radius-md: 18px; /* domain card, carte organisme */
	--radius-card-mobile: 16px; /* cartes du formulaire de demande en mobile */
	--radius-option: 14px; /* Checkbox Option, liste de suggestions */
	--radius-field: 12px; /* Form Field, Organisme/Formation Sélectionné(e), Champ Modifié */
	--radius-suggestion: 10px; /* option de la liste de suggestions */
	--radius-checkbox: 6px;
	--radius-bar: 3px; /* barre de progression */

	/* Ombres */
	--shadow-card: 0 8px 12px rgba(41, 36, 107, 0.06);
	--shadow-panel: 0 8px 24px rgba(42, 35, 106, 0.06);
	--shadow-badge: 0 3px 8px rgba(42, 35, 106, 0.1);
	--shadow-search: 0 6px 20px rgba(41, 36, 107, 0.1);
	--shadow-search-mobile: 0 6px 10px rgba(41, 36, 107, 0.1);
	--shadow-chip-active: 0 4px 10px rgba(42, 35, 106, 0.18);
	--shadow-header: 0 2px 5px rgba(42, 35, 106, 0.05);
	--shadow-dropdown: 0 12px 16px rgba(41, 36, 107, 0.1); /* liste de suggestions (combobox) */
	--shadow-focus-field: 0 0 0 4px rgba(95, 196, 155, 0.25); /* halo Form Field / Focus */

	/* Polices */
	--font-heading: "Baloo 2", "Baloo 2 Fallback", sans-serif;
	--font-body: "Inter", "Inter Fallback", sans-serif;

	/* Styles de texte nommés — desktop */
	--text-eyebrow-size: 12px;
	--text-eyebrow-line: normal;
	--text-h1-size: 52px;
	--text-h1-line: 63px;
	--text-h2-size: 36px;
	--text-h2-line: 44px;
	--text-h3-size: 22px;
	--text-h3-line: 28px;
	--text-body-lg-size: 18px;
	--text-body-lg-line: 28px;
	--text-body-base-size: 16px;
	--text-body-base-line: 24px;
	--text-body-sm-size: 14px;
	--text-body-sm-line: 20px;
	--text-caption-size: 12px;
	--text-caption-line: 16px;
	--text-nav-link-size: 15px;
	--text-nav-link-line: 20px;
	--text-button-size: 15px;
	--text-button-line: 20px;
	--text-badge-size: 11px;
	--text-badge-line: 14px;
	--text-badge-tracking: 0.44px;
	--text-chip-size: 13.5px;
	--text-chip-line: normal;
	--text-fact-label-size: 12px;
	--text-fact-value-size: 18px;
	--text-stat-value-size: 18px;
	--text-card-price-size: 19px;
	--text-card-title-size: 19px;
	--text-page-title-size: 40px; /* H1 fiche formation / pages de formulaire */
	--text-page-title-line: 48px;
	--text-h4-size: 19px; /* Heading/H4 (Step Header) */
	--text-h4-line: 24px;
	--text-panel-title-size: 22px; /* titres de cartes latérales (Votre progression…) */
	--text-panel-title-line: 28px;
	--text-body-md-size: 15px; /* titres de Checkbox Option, valeurs Champ Modifié */
	--text-body-md-line: 20px;
	--text-body-md-relaxed-line: 22px;
	--text-meta-size: 13px; /* méta, descriptions d'étape, mentions */
	--text-meta-line: 18px;
	--text-micro-size: 10px; /* eyebrows « ACTUEL », « EN COURS » */
	--text-micro-line: 14px;

	/* Styles de texte nommés — mobile (Mobile/Heading/*, Mobile/Stat, Mobile/Fact,
	   Mobile/Label/Menu Link) */
	--text-mobile-h1-size: 32px;
	--text-mobile-h1-line: 38px;
	--text-mobile-h2-size: 26px;
	--text-mobile-h2-line: 32px;
	--text-mobile-h3-size: 20px;
	--text-mobile-h3-line: 26px;
	--text-mobile-stat-size: 24px;
	--text-mobile-stat-line: 28px;
	--text-mobile-fact-size: 17px;
	--text-mobile-fact-line: 22px;
	--text-mobile-menu-link-size: 18px;
	--text-mobile-menu-link-line: 24px;
	--text-mobile-eyebrow-size: 11px;

	/* Styles de texte — itération À propos (Figma « Ready to dev », 2026-09-25). Heading/H2 et
	   Heading/H3 y valent 34/42 et 24/30 ; les --text-h2/h3 historiques (36/44, 22/28, Home V4)
	   sont conservés pour ne pas modifier les pages existantes. */
	--text-heading-h2-size: 34px;
	--text-heading-h2-line: 42px;
	--text-heading-h3-size: 24px;
	--text-heading-h3-line: 30px;
	--text-kicker-tracking: 1.12px; /* eyebrow de section, Inter Medium 14/20 uppercase */
	--text-card-eyebrow-tracking: 0.88px; /* eyebrow des cartes CTA, Inter SemiBold 11/14 */

	/* Repères de mise en page (à utiliser dans les media queries — les custom properties ne
	   sont pas lisibles dans un sélecteur @media, ces valeurs sont donc dupliquées en dur
	   dans base.css/pages.css aux points de rupture, mais consignées ici comme référence) */
	--container-max: 1200px;
	--container-gutter-desktop: 120px;
	--container-gutter-mobile: 16px;
	--header-height-desktop: 89px;
	--header-height-mobile: 64px;
	--width-intro: 760px; /* intro des héros de page */
	--width-aside: 400px; /* colonne latérale (« En bref », sidebars) */

	/* Tailles d'éléments — itération À propos */
	--size-member-photo: 123px; /* Carte membre Horizontal (123,066 dans Figma) */
	--size-member-photo-mobile: 114px; /* Carte membre Vertical (114,301) */
	--size-step-badge: 48px; /* pastille numérotée des cartes engagement */
	--size-step-badge-mobile: 40px;
}

/* Couleur de domaine active, appliquée via data-domain="<slug>" (jamais de style="" inline) */
[data-domain="neurodegenerescence"] {
	--domain-color: var(--domain-neurodegenerescence);
}
[data-domain="voix"] {
	--domain-color: var(--domain-voix);
}
[data-domain="langage-oral"] {
	--domain-color: var(--domain-langage-oral);
}
[data-domain="langage-ecrit"] {
	--domain-color: var(--domain-langage-ecrit);
}
[data-domain="articulation"] {
	--domain-color: var(--domain-articulation);
}
[data-domain="deglutition"] {
	--domain-color: var(--domain-deglutition);
}
[data-domain="logico-mathematiques"] {
	--domain-color: var(--domain-logico-mathematiques);
}
[data-domain="accompagnement-parental"] {
	--domain-color: var(--domain-accompagnement-parental);
}
[data-domain="bien-etre-professionnel"] {
	--domain-color: var(--domain-bien-etre-professionnel);
}
[data-domain="autres-domaines"] {
	--domain-color: var(--domain-autres-domaines);
}