/* =========================================================
   SOURIRE PRESTIGE — Design Tokens
   Palette, typographie, espacements, rayons, ombres, transitions.
   Ce fichier est la seule source de vérité visuelle du thème.
   ========================================================= */

/* ---- Fontes auto-hébergées (aucune requête externe) ---- */
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}

:root {
	/* ---- Couleurs de marque ----
	   Palette bleu/blanc épuré (alignée sur l'identité existante du client,
	   cf. retour du 2026-07-13). Les noms de variables/classes gardent le
	   suffixe historique "gold" pour ne pas casser des dizaines de fichiers,
	   mais portent désormais des valeurs bleues. */
	--sp-white: #ffffff;
	--sp-sand: #f7fafd;
	--sp-off-white: var(--sp-sand);
	--sp-grey-50: #f3f6fa;
	--sp-grey-100: #e7edf3;
	--sp-grey-200: #d6dee8;
	--sp-grey-300: #b9c6d6;
	--sp-grey-400: #94a3b8;
	--sp-grey-500: #64748b;
	--sp-grey-600: #45566e;
	--sp-charcoal: #142c4f;
	--sp-black: #0a1f3a;

	/* Bleu marine échantillonné directement sur la plaquette tarifs réelle du
	   client (en-têtes de tableau ~#063875, bandeaux sombres ~#021f40). */
	--sp-gold: #0f4e8c;
	--sp-gold-light: #3d7bc2;
	--sp-gold-dim: rgba(15, 78, 140, 0.32);
	/* Conforme WCAG AA (8.7:1 sur blanc) pour le texte courant ; --sp-gold
	   reste réservé aux icônes, larges titres et fonds sombres. */
	--sp-gold-text: #0b4a87;

	/* Rôles sémantiques */
	--sp-bg: var(--sp-white);
	--sp-bg-alt: var(--sp-sand);
	--sp-bg-dark: var(--sp-black);
	--sp-text: var(--sp-black);
	--sp-text-muted: var(--sp-grey-600);
	--sp-text-on-dark: var(--sp-white);
	--sp-border: var(--sp-grey-200);
	--sp-accent: var(--sp-gold);

	/* ---- Typographie ----
	   Échelle large mais lisible : le titre reste un élément fort sans
	   déséquilibrer la page ni couper les accents (line-height jamais < 1). */
	--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-hero: clamp(2.75rem, 1.9rem + 3.4vw, 5.5rem);
	--fs-h1: clamp(2.25rem, 1.7rem + 2vw, 4rem);
	--fs-h2: clamp(1.9rem, 1.55rem + 1.4vw, 3.15rem);
	--fs-h3: clamp(1.45rem, 1.25rem + 0.8vw, 2rem);
	--fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
	--fs-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-caption: 0.75rem;
	/* Numéros / citations géantes traités comme motif graphique. */
	--fs-display-num: clamp(4rem, 2.5rem + 6vw, 9rem);
	--fs-statement: clamp(1.85rem, 1.5rem + 2vw, 3.5rem);

	--lh-tight: 1.08;
	--lh-heading: 1.15;
	--lh-body: 1.65;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.06em;
	--tracking-widest: 0.22em;

	/* ---- Espacements (échelle base 8px) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--space-10: 5rem;
	--space-12: 6rem;
	--space-14: 8rem;
	--space-16: 10rem;

	/* Resserré (retour client 2026-07-13 : trop de blanc entre les blocs). */
	--section-padding-y: clamp(3rem, 2.25rem + 2.5vw, 5.5rem);
	--section-padding-x: clamp(1.25rem, 1rem + 2vw, 3rem);

	/* ---- Grille / conteneurs ---- */
	--container-max: 1320px;
	--container-narrow: 860px;
	--container-wide: 1720px;
	--gutter: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	/* Marge de sécurité pour les compositions plein-écran / débordements volontaires. */
	--bleed-margin: clamp(1.25rem, 1rem + 2vw, 4rem);

	/* ---- Rayons (arrondis, pas de coins vifs) ---- */
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 999px;
	--radius-btn: 14px;

	/* ---- Ombres (douces mais visibles, pour que les boutons "existent") ---- */
	--shadow-soft: 0 20px 60px -25px rgba(10, 10, 9, 0.18);
	--shadow-card: 0 12px 32px -18px rgba(10, 10, 9, 0.16);
	--shadow-lift: 0 30px 80px -30px rgba(10, 10, 9, 0.28);
	--shadow-btn: 0 10px 28px -10px rgba(10, 10, 9, 0.35);
	--shadow-btn-gold: 0 10px 26px -8px rgba(15, 78, 140, 0.55);

	/* ---- Transitions / easing premium (partagé avec GSAP, cf. CustomEase "sp-signature") ---- */
	--ease-premium: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 0.25s;
	--duration-base: 0.5s;
	--duration-slow: 0.9s;

	/* ---- Z-index ---- */
	--z-navbar: 100;
	--z-cursor: 90;
	--z-modal: 300;
	--z-lightbox: 320;
	--z-toast: 340;
	--z-transition: 400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0.001s;
		--duration-base: 0.001s;
		--duration-slow: 0.001s;
	}
}