@layer tokens {
/**
 * Design tokens — Maison / Moulin Marion.
 * Source : variables Figma (fichier "Moulin Marion — Version 2").
 *
 * Organisation en 3 niveaux :
 *   1. PRIMITIVES  → valeurs brutes, noms Figma (--mm-printemps-500…).
 *   2. RÔLES       → sémantique utilisée dans le code (--mm-color-primary…).
 *   3. ALIAS       → compat avec les noms génériques du thème (--mm-space-md…).
 *
 * Règle : le code n'utilise QUE les rôles/alias, jamais les primitives ni de
 * valeur en dur. Ajuster la charte = éditer les primitives ici uniquement.
 */

:root {
	/* =============================================================== *
	 * 1. PRIMITIVES (Figma)
	 * =============================================================== */

	/* --- Primary « PRINTEMPS » (vert lime) --- */
	--mm-printemps-50:  #f8f9f6;
	--mm-printemps-500: #95eb2c;
	--mm-printemps-600: #7bd014;
	--mm-printemps-900: #304713;

	/* --- Secondary « FEUILLE » (vert forêt) --- */
	--mm-feuille-800: #445d41;
	--mm-feuille-900: #324030;
	--mm-feuille-950: #252d24;

	/* --- « SAUGE » (verts doux — fonds de sections/cartes) --- */
	--mm-sauge-700: #4a6a44; /* vert foncé — texte accentué sur fond clair (contraste ≈ 6:1) */
	--mm-sauge-400: #85ac81;
	--mm-sauge-200: #c1d8bc;
	--mm-sauge-50:  #ecefeb; /* gris-vert très clair (fond FAQ) */
	--mm-sauge-25:  #f7f8f7; /* quasi-blanc verdâtre (texte sur fond olive) */

	/* --- « OLIVE » (texte/titres sur fonds verts) --- */
	--mm-olive-900: #334800;

	/* --- Neutral --- */
	--mm-neutral-50:  #f7f7f7;
	--mm-neutral-100b: #f2f2f2; /* gris de panneau (fond formulaire, cf. maquette) */
	--mm-neutral-600: #707070;
	--mm-neutral-700: #545454; /* gris foncé — aides/hints lisibles sur fond clair */
	--mm-neutral-900: #1e1e1e;
	--mm-neutral-950: #111111;
	--mm-white:       #ffffff;

	/* Pas (encore) définis dans Figma — dérivés raisonnables, à confirmer. */
	--mm-neutral-100: #ececec;
	--mm-neutral-300: #d9d9d9;

	/* =============================================================== *
	 * 2. RÔLES SÉMANTIQUES (utilisés dans le code)
	 * =============================================================== */

	/* Textes */
	--mm-color-text:        var(--mm-neutral-950);
	--mm-color-text-muted:  var(--mm-neutral-600);

	/* Fonds */
	--mm-color-bg:          var(--mm-white);
	--mm-color-bg-alt:      var(--mm-neutral-50);

	/* Marque / accent (le lime PRINTEMPS) */
	--mm-color-primary:        var(--mm-printemps-500);
	--mm-color-primary-strong: var(--mm-printemps-600);
	/* Le lime est clair → texte foncé par-dessus. */
	--mm-color-on-primary:     var(--mm-feuille-950);

	/* Surfaces sombres (header, footer, sections « dark », badges) */
	--mm-color-surface-dark:    var(--mm-feuille-950);
	--mm-color-surface-dark-alt: var(--mm-feuille-900);
	--mm-color-on-surface-dark: var(--mm-neutral-50);

	/* Fonds « teintés » (sections/cartes vertes) + texte associé */
	--mm-color-tint-1:   var(--mm-printemps-500); /* lime */
	--mm-color-tint-2:   var(--mm-sauge-400);     /* vert moyen */
	--mm-color-tint-3:   var(--mm-sauge-200);     /* vert clair */
	--mm-color-on-tint:  var(--mm-olive-900);     /* texte/titres sur ces fonds */

	/* Overlay du hero (voile sombre neutre à 40 % — contraste texte RGAA) */
	--mm-color-hero-overlay: rgb(17 17 17 / 40%);

	/* États */
	--mm-color-focus: var(--mm-printemps-600);
	--mm-color-error: #b3261e;

	/* Alias historiques → mappés sur la vraie palette (ne pas supprimer). */
	--mm-color-brand:      var(--mm-printemps-500);
	--mm-color-brand-dark: var(--mm-printemps-900);
	--mm-color-accent:     var(--mm-printemps-600);
	--mm-color-black:      var(--mm-neutral-950);
	--mm-color-gray-100:   var(--mm-neutral-100);
	--mm-color-gray-300:   var(--mm-neutral-300);
	--mm-color-gray-600:   var(--mm-neutral-600);
	--mm-color-gray-900:   var(--mm-feuille-900);

	/* =============================================================== *
	 * TYPOGRAPHIE
	 * =============================================================== */
	/* Polices À AUTO-HÉBERGER dans assets/fonts/ (RGPD : pas de CDN Google).
	   Déclarer les @font-face correspondants puis les précharger dans
	   inc/enqueue.php. Fallbacks proches en attendant. */
	--mm-font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--mm-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mm-font-base:    var(--mm-font-body);
	--mm-font-sans:    var(--mm-font-body);  /* alias */
	--mm-font-serif:   Georgia, "Times New Roman", serif;

	/* Tailles Figma : p16 · lg18 · h6 20 · h3 39 · h2 49 · xxl 95 (fluides). */
	--mm-fs-h6:  1.25rem;   /* 20px */
	--mm-fs-lg:  1.125rem;  /* 18px (corps large : boutons lg, descriptions) */
	--mm-fs-p:   1rem;      /* 16px */

	--mm-fs-100: 0.875rem;  /* petit */
	--mm-fs-200: 1rem;      /* corps 16px */
	/* Tailles fluides calées sur la maquette 1920px : valeur Figma atteinte à
	   1920, proportionnellement plus petite en dessous (comme un design "fit"). */
	--mm-fs-300: clamp(1.3rem, 2.03vw, 2.4375rem);  /* → 39px @1920 (h3) */
	--mm-fs-400: clamp(1.9rem, 2.55vw, 3.0625rem);  /* → 49px @1920 (h2) */
	--mm-fs-500: clamp(2.5rem, 4.95vw, 5.9375rem);  /* → 95px @1920 (xxl/h1) */

	--mm-lh-tight: 1.1;   /* titres Barlow Condensed */
	--mm-lh-base:  1.5;   /* 150 % (corps de texte) */

	/* =============================================================== *
	 * ESPACEMENTS (échelle Figma)
	 * =============================================================== */
	--mm-space-micro:    0.25rem;  /* 4  */
	--mm-space-s:        0.75rem;  /* 12 */
	--mm-space-m:        1rem;     /* 16 */
	--mm-space-l:        1.25rem;  /* 20 */
	--mm-space-list:     1.5rem;   /* 24 */
	--mm-space-bloc:     2rem;     /* 32 */
	--mm-space-xl:       3rem;     /* 48 */
	--mm-space-page:     3.5rem;   /* 56 */
	--mm-space-hero:     4rem;     /* 64 */
	--mm-space-section:  2.5rem;   /* 40 (gap grille de solutions) */
	--mm-space-large:    5rem;     /* 80 */
	--mm-space-big-hero: 6rem;     /* 96 */
	--mm-space-big-page: 8rem;     /* 128 */

	/* Alias génériques → valeurs Figma (utilisés dans le reste du CSS). */
	--mm-space-3xs: var(--mm-space-micro); /* 4  */
	--mm-space-2xs: 0.5rem;                /* 8 (confort) */
	--mm-space-xs:  var(--mm-space-s);     /* 12 */
	--mm-space-sm:  var(--mm-space-m);     /* 16 */
	--mm-space-md:  var(--mm-space-list);  /* 24 */
	--mm-space-lg:  var(--mm-space-bloc);  /* 32 */
	/* --mm-space-xl déjà défini (48) */
	--mm-space-2xl: var(--mm-space-large); /* 80 */

	/* Espacement entre paragraphes du texte courant. */
	--mm-paragraph-gap: 1.5rem; /* 24px */

	/* Espacement vertical des sections (contrôle ACF haut/bas). */
	--mm-section-space-none:    0;
	--mm-section-space-default: 6rem;      /* 96px */
	--mm-section-space-large:   12rem;     /* 192px */

	/* =============================================================== *
	 * LAYOUT / RAYONS / OMBRES / DIVERS
	 * =============================================================== */
	--mm-container-max: 93.1rem;  /* 1490px = 1920 − 2×215px (marges Figma) */
	--mm-container-pad: var(--mm-space-list);
	--mm-header-h:      5.75rem;  /* 92px : hauteur de l'en-tête sticky */

	--mm-radius-xxs:  0.25rem;    /* 4px (Figma) */
	--mm-radius-full: 99999px;    /* Figma "full" */
	--mm-radius-sm:   var(--mm-radius-xxs);
	--mm-radius-md:   0.5rem;     /* 8px (dérivé) */
	--mm-radius-lg:   1rem;       /* 16px (dérivé) */

	--mm-shadow-1: 0 1px 2px rgb(0 0 0 / 8%), 0 2px 8px rgb(0 0 0 / 6%);

	/* Breakpoints (référence @media). */
	--mm-bp-sm: 40rem;
	--mm-bp-md: 48rem;
	--mm-bp-lg: 64rem;
	--mm-bp-xl: 80rem;

	--mm-focus-width: 3px;
	--mm-transition:  200ms ease;
}

/* =================================================================== *
 * ESPACEMENTS RESPONSIVES
 * Les grands espaceurs sont réduits progressivement (≈0,75× tablette,
 * ≈0,55× mobile). Seules les GROSSES valeurs sont touchées ; les petits
 * espaceurs (≤ 32px) restent stables. Les alias (--mm-space-2xl, etc.)
 * héritent automatiquement via var().
 * =================================================================== */

/* Tablette / petit portable (≤ 1024px). */
@media (max-width: 64rem) {
	:root {
		--mm-section-space-default: 4.5rem;  /* 96 → 72 */
		--mm-section-space-large:   7.5rem;  /* 192 → 120 */
		--mm-space-big-page: 6rem;    /* 128 → 96 */
		--mm-space-big-hero: 4.5rem;  /* 96 → 72 */
		--mm-space-hero:     3rem;    /* 64 → 48 */
		--mm-space-large:    3.5rem;  /* 80 → 56 (→ 2xl) */
		--mm-space-page:     3rem;    /* 56 → 48 */
		--mm-space-xl:       2.5rem;  /* 48 → 40 */
		--mm-space-section:  2rem;    /* 40 → 32 */
	}
}

/* Mobile (≤ 768px). */
@media (max-width: 48rem) {
	:root {
		--mm-section-space-default: 3.5rem;  /* 96 → 56 */
		--mm-section-space-large:   5rem;    /* 192 → 80 */
		--mm-space-big-page: 4rem;    /* 128 → 64 */
		--mm-space-big-hero: 3.5rem;  /* 96 → 56 */
		--mm-space-hero:     2.5rem;  /* 64 → 40 */
		--mm-space-large:    2.5rem;  /* 80 → 40 (→ 2xl) */
		--mm-space-page:     2rem;    /* 56 → 32 */
		--mm-space-xl:       2rem;    /* 48 → 32 */
		--mm-space-section:  1.5rem;  /* 40 → 24 */
		--mm-space-bloc:     1.5rem;  /* 32 → 24 */
	}
}

/* Sections marquées « sombre » (theme=dark) → surfaces FEUILLE. */
.mm-section--theme-dark {
	--mm-color-text:       var(--mm-color-on-surface-dark);
	--mm-color-text-muted: var(--mm-neutral-300);
	--mm-color-bg:         var(--mm-color-surface-dark);
	--mm-color-bg-alt:     var(--mm-color-surface-dark-alt);
}

/* Sections « fond vert clair » (theme=tint) → fond SAUGE-200 (#c1d8bc).
   Textes foncés pour le contraste RGAA :
   feuille-950 sur sauge-200 ≈ 9,3:1 · feuille-900 ≈ 7,2:1 · olive-900 ≈ 6,7:1. */
.mm-section--theme-tint {
	--mm-color-text:       var(--mm-feuille-950);
	--mm-color-text-muted: var(--mm-feuille-900);
	--mm-color-bg:         var(--mm-sauge-200);
	--mm-color-bg-alt:     var(--mm-sauge-50);
}
}