/**
 * Jetons de design — le seul fichier à toucher pour changer l'identité d'un site.
 *
 * Tout le thème s'exprime en variables : les kits (épuré, éditorial, sombre,
 * moderne) n'ont qu'à en redéfinir quelques-unes pour changer entièrement
 * l'allure du site, et les réglages du client viennent par-dessus.
 */

:root {
	/* ---------- Couleurs ---------- */
	--si-color-primary: #0f2b46;
	--si-color-primary-dark: #0a1e31;
	--si-color-accent: #c8a86b;
	--si-color-accent-soft: #f4ede0;
	--si-color-ink: #16181d;
	--si-color-ink-soft: #3d4450;
	--si-color-muted: #6b7280;
	--si-color-line: #e5e7eb;
	--si-color-surface: #f7f7f5;
	--si-color-surface-2: #eeeeea;
	--si-color-base: #ffffff;
	--si-color-success: #1c7c54;
	--si-color-danger: #b4232b;

	/* Voile posé sur une photo pour que le texte reste lisible quoi qu'il arrive. */
	--si-voile: linear-gradient(180deg, rgba(10, 22, 36, 0.10) 0%, rgba(10, 22, 36, 0.72) 100%);

	/* Étiquettes DPE / GES — couleurs réglementaires, à ne pas retoucher */
	--si-dpe-a: #319834;
	--si-dpe-b: #33cc31;
	--si-dpe-c: #cbfc34;
	--si-dpe-d: #fbfe06;
	--si-dpe-e: #fbcc05;
	--si-dpe-f: #fc9935;
	--si-dpe-g: #fc0205;

	/* Le GES a sa propre échelle, du bleu pâle au violet sombre : la confondre
	   avec celle de l'énergie ferait lire une passoire là où il n'y en a pas. */
	--si-ges-a: #a5dbf2;
	--si-ges-b: #7fbcdd;
	--si-ges-c: #6f9fc8;
	--si-ges-d: #5f7fb4;
	--si-ges-e: #52619f;
	--si-ges-f: #3c4585;
	--si-ges-g: #1b1035;

	/* ---------- Typographie ---------- */
	--si-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--si-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

	/*
	 * Échelle fluide : chaque taille s'adapte à la largeur de l'écran plutôt que
	 * de sauter à un point de rupture. C'est ce qui donne l'impression d'une mise
	 * en page dessinée pour chaque appareil.
	 */
	--si-text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8rem);
	--si-text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
	--si-text-base: clamp(0.98rem, 0.95rem + 0.18vw, 1.06rem);
	--si-text-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
	--si-text-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
	--si-text-2xl: clamp(1.55rem, 1.35rem + 0.9vw, 2rem);
	--si-text-3xl: clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem);
	--si-text-4xl: clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);

	--si-leading-tight: 1.12;
	--si-leading: 1.65;
	--si-leading-loose: 1.8;
	--si-tracking-tight: -0.02em;
	--si-tracking-wide: 0.09em;

	/* Longueur de ligne confortable à la lecture : au-delà, l'œil se perd. */
	--si-mesure: 68ch;

	/* ---------- Espacements ---------- */
	--si-space-1: 0.25rem;
	--si-space-2: 0.5rem;
	--si-space-3: 0.75rem;
	--si-space-4: 1rem;
	--si-space-5: 1.5rem;
	--si-space-6: 2rem;
	--si-space-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--si-space-8: clamp(3.5rem, 2.6rem + 3.5vw, 5.5rem);
	--si-space-9: clamp(4.5rem, 3rem + 5vw, 8rem);

	/* Écart d'une grille de vignettes : les lignes respirent plus que les
	   colonnes, parce qu'une vignette finit par du texte et que la suivante
	   commence par une photo. Une seule valeur pour tout le site. */
	--si-gap-vignettes-x: var(--si-space-6);
	--si-gap-vignettes-y: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem);

	/* ---------- Formes ---------- */
	--si-radius: 10px;
	--si-radius-lg: 18px;
	--si-radius-xl: 28px;
	--si-radius-full: 999px;
	--si-border: 1px solid var(--si-color-line);

	/*
	 * Ombres en couches : une ombre unique paraît toujours plate ou sale. Deux
	 * ombres superposées — une courte et dense, une longue et diffuse — imitent
	 * la façon dont la lumière tombe réellement, et c'est ce détail qui sépare
	 * une interface soignée d'une interface bricolée.
	 */
	--si-shadow-sm:
		0 1px 2px rgba(16, 24, 40, 0.05),
		0 1px 3px rgba(16, 24, 40, 0.04);
	--si-shadow:
		0 2px 4px rgba(16, 24, 40, 0.04),
		0 8px 20px rgba(16, 24, 40, 0.07);
	--si-shadow-md:
		0 4px 8px rgba(16, 24, 40, 0.05),
		0 16px 32px rgba(16, 24, 40, 0.09);
	--si-shadow-lg:
		0 8px 16px rgba(16, 24, 40, 0.06),
		0 28px 64px rgba(16, 24, 40, 0.14);
	--si-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--si-color-primary) 22%, transparent);

	/* ---------- Structure ---------- */
	--si-container: 1280px;
	--si-container-large: 1480px;
	--si-container-narrow: 720px;
	--si-header-height: 84px;

	/* ---------- Mouvement ---------- */
	--si-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--si-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--si-transition: 220ms var(--si-ease);
	--si-transition-lent: 480ms var(--si-ease-out);
}

/*
 * Certains visiteurs demandent explicitement moins d'animation — mal des
 * transports, troubles vestibulaires, préférence. On coupe tout mouvement
 * plutôt que de l'atténuer.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--si-transition: 0ms;
		--si-transition-lent: 0ms;
	}

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}