/**
 * Direct Habitat 66
 * Couche 1 : valeurs brutes, rôles sémantiques et contrats de composants.
 *
 * La palette reprend les maquettes H : bleu nuit, gris minéral, blanc cassé
 * et orange chantier. Le thème clair est la valeur sûre pour les anciens
 * contenus. Le thème sombre est activable à la racine d'une page.
 */

:root {
	color-scheme: light;

	/* Valeurs brutes : couleur. */
	--dh66-navy-950: #001a3a;
	--dh66-navy-900: #002858;
	--dh66-navy-800: #0b3e73;
	--dh66-navy-700: #1e5688;
	--dh66-gray-050: #fbfbfb;
	--dh66-gray-100: #f5f5f5;
	--dh66-gray-200: #e7e7e7;
	--dh66-gray-300: #d1d5da;
	--dh66-gray-500: #607681;
	--dh66-gray-700: #334f5e;
	--dh66-white: #ffffff;
	--dh66-orange-400: #ff9a4a;
	--dh66-orange-500: #ff7300;
	--dh66-orange-600: #e86600;
	--dh66-green-500: #4caf00;
	--dh66-green-700: #2d7300;
	--dh66-error-600: #b42318;
	--dh66-success-700: var(--dh66-green-700);

	/* Valeurs brutes : typographie. */
	--dh66-font-sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--dh66-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--dh66-text-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
	--dh66-text-sm: clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
	--dh66-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--dh66-text-lead: clamp(1.1rem, 1.02rem + 0.36vw, 1.35rem);
	--dh66-heading-3: clamp(1.35rem, 1.12rem + 0.9vw, 2rem);
	--dh66-heading-2: clamp(1.9rem, 1.42rem + 1.85vw, 3.25rem);
	--dh66-heading-1: clamp(2.55rem, 1.78rem + 3vw, 4.75rem);
	--dh66-leading-tight: 1.04;
	--dh66-leading-heading: 1.12;
	--dh66-leading-body: 1.65;
	--dh66-tracking-tight: -0.035em;

	/* Valeurs brutes : espace, forme, profondeur et mouvement. */
	--dh66-space-1: 0.25rem;
	--dh66-space-2: 0.5rem;
	--dh66-space-3: 0.75rem;
	--dh66-space-4: 1rem;
	--dh66-space-5: 1.25rem;
	--dh66-space-6: 1.5rem;
	--dh66-space-8: 2rem;
	--dh66-space-10: 2.5rem;
	--dh66-space-12: 3rem;
	--dh66-space-16: 4rem;
	--dh66-space-20: 5rem;
	--dh66-space-section: clamp(4.5rem, 3rem + 5vw, 8.5rem);
	--dh66-gutter: clamp(1rem, 0.55rem + 2vw, 2.25rem);
	--dh66-radius-sm: 0.5rem;
	--dh66-radius-md: 0.75rem;
	--dh66-radius-lg: 1rem;
	--dh66-radius-pill: 999px;
	--dh66-shadow-sm: 0 10px 28px rgb(11 45 66 / 0.08);
	--dh66-shadow-md: 0 22px 62px rgb(11 45 66 / 0.13);
	--dh66-shadow-lg: 0 30px 78px rgb(11 45 66 / 0.17);
	--dh66-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dh66-duration-fast: 160ms;
	--dh66-duration-base: 260ms;
	--dh66-duration-slow: 520ms;
	--dh66-content: 48rem;
	--dh66-wide: 77.5rem;
	--dh66-full: 90rem;
	--dh66-touch: 2.75rem;
	--dh66-layer-base: 0;
	--dh66-layer-sticky: 20;
	--dh66-layer-overlay: 80;
	--dh66-layer-dialog: 90;
	--dh66-layer-skip: 100;

	/* Rôles sémantiques : thème clair. */
	--dh66-bg: var(--dh66-gray-100);
	--dh66-surface: var(--dh66-gray-050);
	--dh66-surface-raised: var(--dh66-white);
	--dh66-surface-soft: var(--dh66-gray-200);
	--dh66-text: var(--dh66-gray-700);
	--dh66-text-strong: var(--dh66-navy-900);
	--dh66-text-muted: #566474;
	--dh66-border: var(--dh66-gray-300);
	--dh66-border-strong: #9aa7b4;
	--dh66-accent: var(--dh66-orange-500);
	--dh66-accent-hover: color-mix(in srgb, var(--dh66-orange-500) 86%, var(--dh66-navy-900));
	--dh66-on-accent: var(--dh66-navy-900);
	--dh66-positive: color-mix(in srgb, var(--dh66-green-500) 72%, var(--dh66-navy-900));
	--dh66-focus: var(--dh66-navy-900);
	--dh66-link: var(--dh66-navy-900);
	--dh66-link-hover: var(--dh66-orange-600);
	--dh66-selection-bg: var(--dh66-orange-400);
	--dh66-selection-text: var(--dh66-navy-900);
	--dh66-scrim: rgb(0 26 58 / 0.68);

	/* Rôles sémantiques : approximation web du verre liquide. */
	--dh66-glass-fill: rgb(255 255 255 / 0.54);
	--dh66-glass-fill-soft: rgb(223 231 235 / 0.24);
	--dh66-glass-border: rgb(255 255 255 / 0.78);
	--dh66-glass-edge: rgb(255 255 255 / 0.92);
	--dh66-glass-shadow: 0 20px 58px rgb(11 45 66 / 0.14);

	/* Contrats de composants. */
	--dh66-button-height: 3rem;
	--dh66-button-padding: 1.25rem;
	--dh66-button-radius: var(--dh66-radius-md);
	--dh66-card-padding: clamp(1.25rem, 0.95rem + 1.2vw, 2rem);
	--dh66-card-radius: var(--dh66-radius-lg);
	--dh66-input-height: 3.25rem;
	--dh66-header-height: 4.5rem;
	--dh66-nav-font-family: inherit;
	--dh66-nav-font-size: 13px;
	--dh66-nav-font-weight: 700;
	--dh66-nav-text-transform: uppercase;
	--dh66-nav-text-color: var(--dh66-navy-900);
	--dh66-nav-active-color: var(--dh66-orange-500);
}

:is(
	:root[data-dh66-theme="dark"],
	.dh66-theme--dark
) {
	color-scheme: dark;
	--dh66-bg: color-mix(in srgb, var(--dh66-navy-900) 72%, #00101f);
	--dh66-surface: var(--dh66-navy-900);
	--dh66-surface-raised: color-mix(in srgb, var(--dh66-navy-900) 88%, var(--dh66-white));
	--dh66-surface-soft: color-mix(in srgb, var(--dh66-navy-900) 78%, var(--dh66-white));
	--dh66-text: #dbe7f2;
	--dh66-text-strong: #f1f6f8;
	--dh66-text-muted: #b7c8d8;
	--dh66-border: #3e6084;
	--dh66-border-strong: #6886a4;
	--dh66-accent: var(--dh66-orange-500);
	--dh66-accent-hover: color-mix(in srgb, var(--dh66-orange-500) 78%, var(--dh66-white));
	--dh66-on-accent: var(--dh66-navy-900);
	--dh66-positive: color-mix(in srgb, var(--dh66-green-500) 78%, var(--dh66-white));
	--dh66-focus: color-mix(in srgb, var(--dh66-orange-500) 72%, var(--dh66-white));
	--dh66-link: color-mix(in srgb, var(--dh66-orange-500) 72%, var(--dh66-white));
	--dh66-link-hover: #ffc08c;
	--dh66-selection-bg: var(--dh66-orange-500);
	--dh66-selection-text: var(--dh66-navy-900);
	--dh66-scrim: rgb(1 13 18 / 0.76);
	--dh66-shadow-sm: 0 10px 28px rgb(1 13 18 / 0.2);
	--dh66-shadow-md: 0 22px 62px rgb(1 13 18 / 0.32);
	--dh66-shadow-lg: 0 30px 78px rgb(1 13 18 / 0.42);
	--dh66-glass-fill: rgb(255 255 255 / 0.1);
	--dh66-glass-fill-soft: rgb(8 31 44 / 0.32);
	--dh66-glass-border: rgb(255 255 255 / 0.2);
	--dh66-glass-edge: rgb(255 255 255 / 0.28);
	--dh66-glass-shadow: 0 20px 58px rgb(1 13 18 / 0.36);
}

:is(
	:root[data-dh66-theme="light"],
	.dh66-theme--light
) {
	color-scheme: light;
}