/*
 * Tokens du site. FICHIER DU SITE : la mise à niveau de la base n'y touche jamais.
 * Uniquement des propriétés personnalisées dans :root, en trois blocs :
 *   1. maquette : généré par outils/tokens-depuis-maquette.js, jamais modifié à la main ;
 *   2. contrat  : les noms que la base et les sections utilisent, qui renvoient à la maquette ;
 *   3. projet   : ce que la maquette ajoute et que le contrat ne couvre pas.
 */

:root {
	/* MAQUETTE:DEBUT (généré, ne pas modifier à la main) */
	/*
	 * Couleurs : charte East Coast (retour client du 26/10/2026, sources/Retours client/), thème sombre
	 * demandé par l'humain. La charte PDF étant vide, valeurs relevées à la pipette sur les aperçus web
	 * et la bâche (_analyses/cadrage-charte-couleurs.md), puis ajustées pour le contraste (WCAG AA).
	 * Le reste (police, tailles, rayons, ombres de forme) : gabarits des trois artifacts claude.ai
	 * (sources/maquette/{accueil,nos-spas,contact}/template.html, copies du 20/10/2026).
	 * Ancienne palette bleue : git, commit f0e84e9 et avant.
	 */
	--m-noir: #0B0B0A;            /* fond (aperçus : #070908 à #12110F) */
	--m-noir-alterne: #131210;    /* sections alternées */
	--m-noir-releve: #1A1916;     /* cartes, champs, pastilles */
	--m-noir-bouton: #211F1B;     /* fond des sélecteurs à pastilles */
	--m-noir-pied: #070706;       /* pied de page */
	--m-or: #C1A04D;              /* boutons, accents, icônes : or médian du logo East Coast (le #D4A752 du 26/10 était trop jaune, retour client du 27/10) */
	--m-or-clair: #D9BE7A;        /* survol (clair du logo, #E1C378) */
	--m-or-sourd: #8A7442;        /* fin du trait des étapes, bord pointillé */
	--m-or-pale: #2A2418;         /* fond d'icône, halo des numéros d'étape */
	--m-creme: #F3EBDD;           /* titres et texte (blanc cassé de la charte, #F7EFE3) */
	--m-gris-chaud: #B8B2A7;      /* texte secondaire */
	--m-gris-intro: #CFC8BB;      /* paragraphes d'introduction */
	--m-gris-attenue: #948E82;    /* mentions, pied bas */
	--m-encre: #15130F;           /* texte sur l'or */
	--m-blanc: #FFFFFF;           /* texte sur photo */
	--m-trait: #2E2B26;           /* bordures */
	--m-pied-trait: #24221E;
	--m-erreur: #EF8A73;          /* erreurs de formulaire, lisibles sur fond sombre */
	--m-voile: 8 8 7;             /* rgba(8,8,7,…) : voiles sur photo, fond du tiroir */
	--m-police: Figtree;
	--m-h1: clamp(30px, 3.8vw, 48px);
	--m-h2: clamp(28px, 3.2vw, 42px);
	--m-h3-carte: 19px;
	--m-texte: 16px;
	--m-texte-intro: 17px;
	--m-petit: 14px;
	--m-interligne-titre: 1.15;
	--m-interligne-texte: 1.65;
	--m-rayon-champ: 12px;
	--m-rayon-carte: 16px;
	--m-rayon-grande-carte: 20px;
	--m-rayon-bloc: 24px;
	--m-conteneur: 1240px;
	--m-marge: clamp(16px, 4vw, 32px);
	--m-section: clamp(72px, 9vw, 120px);
	--m-ombre-carte: 0 10px 30px rgba(0, 0, 0, 0.35);
	--m-ombre-survol: 0 22px 50px rgba(0, 0, 0, 0.5);
	--m-ombre-flottante: 0 18px 50px rgba(0, 0, 0, 0.45);
	--m-courbe-apparition: cubic-bezier(0.16, 0.84, 0.3, 1);
	/* MAQUETTE:FIN */

	/* Contrat : couleurs */
	--couleur-fond: var(--m-noir);
	--couleur-surface: var(--m-noir-releve);
	--couleur-texte: var(--m-creme);
	--couleur-texte-doux: var(--m-gris-chaud);
	--couleur-primaire: var(--m-or);
	--couleur-primaire-douce: var(--m-or-pale);
	--couleur-sur-primaire: var(--m-encre);
	--couleur-accent: var(--m-or-clair);
	--couleur-trait: var(--m-trait);
	--couleur-lien: var(--m-or);
	--couleur-lien-survol: var(--m-or-clair);
	--couleur-focus: var(--m-or);
	--couleur-erreur: var(--m-erreur);

	/* Contrat : typographie */
	--police-texte: var(--m-police), system-ui, sans-serif;
	--police-titre: var(--police-texte);
	--graisse-texte: 400;
	--graisse-forte: 700;
	--graisse-titre: 800;
	--taille-petite: var(--m-petit);
	--taille-texte: var(--m-texte);
	--taille-grande: 1.125rem;
	--taille-h4: 1.1875rem;
	--taille-h3: 1.375rem;
	--taille-h2: var(--m-h2);
	--taille-h1: var(--m-h1);
	--interligne-serre: var(--m-interligne-titre);
	--interligne-texte: var(--m-interligne-texte);

	/* Contrat : espacements (échelle de 4 px) */
	--espace-1: 4px;
	--espace-2: 8px;
	--espace-3: 12px;
	--espace-4: 16px;
	--espace-5: 24px;
	--espace-6: 32px;
	--espace-7: 48px;
	--espace-8: 64px;
	--espace-9: 96px;
	--espace-section: var(--m-section);

	/* Contrat : formes, ombres, mouvements */
	--rayon-s: var(--m-rayon-champ);
	--rayon-m: var(--m-rayon-carte);
	--rayon-l: var(--m-rayon-grande-carte);
	--rayon-pilule: 999px;
	--ombre-carte: var(--m-ombre-carte);
	--duree-rapide: 250ms;
	--duree-normale: 400ms;
	--courbe: ease;
	--focus-epaisseur: 2px;

	/* Contrat : mise en page */
	--conteneur-max: var(--m-conteneur);
	--conteneur-etroit: 760px;
	--conteneur-marge: var(--m-marge);
	--grille-espace: 20px;

	/* Projet */
	--couleur-fond-alterne: var(--m-noir-alterne);
	--couleur-texte-intro: var(--m-gris-intro);
	--couleur-texte-attenue: var(--m-gris-attenue);
	--couleur-primaire-claire: var(--m-or-sourd);
	--couleur-gris-bouton: var(--m-noir-bouton);
	--couleur-pied-fond: var(--m-noir-pied);
	--couleur-pied-trait: var(--m-pied-trait);
	--couleur-anneau-etape: var(--m-or-pale);
	--couleur-sur-photo: var(--m-blanc); /* texte posé sur une photo voilée (hero, bandeau, cartes métiers) */
	--couleur-vitrine: var(--m-blanc); /* fond des photos de modèles (Nos spas), photographiées sur blanc */
	--couleur-trait-champ: #736C60; /* bordure des champs de formulaire : 3,4:1 sur le champ (WCAG 1.4.11) */
	--voile-photo: rgb(var(--m-voile) / 0.35), rgb(var(--m-voile) / 0.62);
	--voile-cta: rgb(var(--m-voile) / 0.55), rgb(var(--m-voile) / 0.75);
	--voile-tiroir: rgb(var(--m-voile) / 0.45);
	--ombre-barre: 0 -8px 24px rgb(0 0 0 / 0.4);
	--taille-intro: var(--m-texte-intro);
	--taille-moyenne: 0.9375rem;
	--taille-mini: 0.8125rem;
	--taille-h3-carte: var(--m-h3-carte);
	--rayon-xl: var(--m-rayon-bloc);
	--ombre-survol: var(--m-ombre-survol);
	--ombre-flottante: var(--m-ombre-flottante);
	--courbe-apparition: var(--m-courbe-apparition);
	--duree-apparition: 950ms;
	--duree-devoile: 1300ms;
	--hauteur-barre-mobile: 74px;
	--duree-trait: 1400ms;
	--duree-tiroir: 500ms;
	--courbe-tiroir: cubic-bezier(0.2, 0.75, 0.2, 1);
	--graisse-moyenne: 600;
	--flou-entete: blur(10px);
	--hauteur-logo-entete: 52px;
	--hauteur-logo-pied: 60px;
	--hauteur-logo-marque: 34px;
	--taille-bouton-rond: 46px;
	--largeur-tiroir: min(86vw, 360px);
	--retrait-tiroir: 88px;
	--hauteur-ligne-tiroir: 56px;
	--taille-icone-ligne: 22px;
	--hauteur-bouton-grand: 52px;
	--hauteur-bouton-barre: 50px;
	--epaisseur-progression: 3px;
	--chevauchement: 72px;
	--hauteur-hero: min(66vh, 560px);
	--taille-icone-carte: 54px;
	--taille-pastille-icone: 52px;
	--taille-cercle: 60px;
	--taille-numero: 64px;
	--taille-chiffre: 2rem;
	--interligne-intro: var(--interligne-texte);
	--interligne-moyen: 1.5;
	--interligne-carte: 1.3;
	--largeur-hero: 880px;
	--largeur-entete: 820px;
	--largeur-titre: 760px;
	--largeur-paragraphe: 640px;
	--largeur-texte-long: 960px;
	--taille-coche: 22px;
	--taille-pastille-carree: 46px;
	--hauteur-bouton-carte: 48px;
	--base-encart: 360px;
	--hauteur-onglet: 58px;
	--taille-icone-contact: 50px;
	--hauteur-bouton-envoi: 56px;
	--bouton-padding: 15px 26px;
	--bouton-padding-petit: 11px 22px;
	--cible-tactile: 44px;
	--ecart-champs: 10px;
	--retrait-colonne-contact: 112px;
	--couleur-sur-primaire-doux: color-mix(in srgb, var(--m-encre) 85%, transparent);
	--hauteur-logo-partenaire: 50px;
	--largeur-logo-carte: 130px;
	--hauteur-logo-carte: 42px;
	--duree-zoom: 800ms;
	--base-carte-lien: 320px;
	--soulevement-court: -2px;
	--soulevement-carte: -4px;
	--soulevement-grande-carte: -6px;
	--zoom-image: 1.06;
	--ombre-bouton: 0 12px 30px color-mix(in srgb, var(--m-or) 30%, transparent);
	--ombre-pastille: 0 8px 20px color-mix(in srgb, var(--m-or) 25%, transparent);
	--voile-carte: rgb(var(--m-voile) / 0), rgb(var(--m-voile) / 0.7);
}