/**
 * Direct Habitat 66
 * Couche 2 : fondations, rythme éditorial et utilitaires de composition.
 */

:where(.dh66-design-system, .editor-styles-wrapper),
:where(.dh66-design-system, .editor-styles-wrapper) *,
:where(.dh66-design-system, .editor-styles-wrapper) *::before,
:where(.dh66-design-system, .editor-styles-wrapper) *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dh66-header-height) + var(--dh66-space-4));
}

body.dh66-design-system,
.editor-styles-wrapper {
	min-width: 20rem;
	background: var(--dh66-bg);
	color: var(--dh66-text);
	font-family: var(--dh66-font-sans);
	font-size: var(--dh66-text-base);
	line-height: var(--dh66-leading-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body.dh66-design-system {
	overflow-x: clip;
}

/*
 * Sur mobile, un fond appliqué directement au body d'une page longue est
 * agrandi sur toute sa hauteur et devient presque uni. Ce calque fixe reprend
 * l'image administrable sans modifier le fond spécifique de l'accueil.
 */
@media (max-width: 51.25rem) {
	body.dh66-design-system:not(.home) {
		position: relative;
		isolation: isolate;
		background-color: transparent !important;
		background-image: none !important;
	}

	body.dh66-design-system:not(.home)::before {
		position: fixed;
		inset: 0;
		z-index: 0;
		background-color: #071b29;
		background-image:
			linear-gradient(rgb(4 18 29 / 0.18), rgb(4 18 29 / 0.3)),
			var(--dh66-site-background-image);
		background-repeat: no-repeat;
		background-position: center right;
		background-size: cover;
		content: "";
		pointer-events: none;
	}
}

::selection {
	background: var(--dh66-selection-bg);
	color: var(--dh66-selection-text);
}

:where(.dh66-design-system, .editor-styles-wrapper) :is(img, video, svg) {
	display: block;
	max-width: 100%;
}

:where(.dh66-design-system, .editor-styles-wrapper) img {
	height: auto;
}

:where(.dh66-design-system, .editor-styles-wrapper) :is(button, input, textarea, select) {
	font: inherit;
}

:where(.dh66-design-system, .editor-styles-wrapper) :is(button, a, summary) {
	-webkit-tap-highlight-color: transparent;
}

:where(.dh66-design-system, .editor-styles-wrapper) a {
	color: var(--dh66-link);
	text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition:
		color var(--dh66-duration-fast) ease,
		text-decoration-color var(--dh66-duration-fast) ease;
}

:where(.dh66-design-system, .editor-styles-wrapper) a:hover {
	color: var(--dh66-link-hover);
	text-decoration-color: currentColor;
}

:where(.dh66-design-system, .editor-styles-wrapper) :focus-visible {
	outline: 3px solid var(--dh66-focus);
	outline-offset: 4px;
}

:where(.dh66-design-system, .editor-styles-wrapper) :is(h1, h2, h3) {
	max-width: 22ch;
	margin-block: 0;
	color: var(--dh66-text-strong);
	font-weight: 800;
	letter-spacing: var(--dh66-tracking-tight);
	text-wrap: balance;
}

:where(.dh66-design-system, .editor-styles-wrapper) h1 {
	font-size: var(--dh66-heading-1);
	line-height: var(--dh66-leading-tight);
}

:where(.dh66-design-system, .editor-styles-wrapper) h2 {
	font-size: var(--dh66-heading-2);
	line-height: var(--dh66-leading-heading);
}

:where(.dh66-design-system, .editor-styles-wrapper) h3 {
	font-size: var(--dh66-heading-3);
	line-height: var(--dh66-leading-heading);
}

:where(.dh66-design-system, .editor-styles-wrapper) :is(p, ul, ol, blockquote) {
	margin-block: 0;
}

:where(.dh66-design-system, .editor-styles-wrapper) p {
	max-width: 65ch;
}

.dh66-lead {
	max-width: 58ch;
	color: var(--dh66-text);
	font-size: var(--dh66-text-lead);
	line-height: 1.55;
}

.dh66-kicker {
	max-width: max-content;
	color: var(--dh66-accent);
	font-size: var(--dh66-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dh66-meta {
	color: var(--dh66-text-muted);
	font-size: var(--dh66-text-sm);
}

.dh66-text-positive {
	color: var(--dh66-positive);
}

.dh66-shell,
.dh66-shell--wide,
.dh66-shell--full {
	width: calc(100% - (2 * var(--dh66-gutter)));
	margin-inline: auto;
}

.dh66-shell {
	max-width: var(--dh66-wide);
}

.dh66-shell--wide {
	max-width: var(--dh66-full);
}

.dh66-shell--full {
	max-width: none;
}

.dh66-prose {
	width: min(100%, var(--dh66-content));
}

.dh66-section {
	padding-block: var(--dh66-space-section);
}

.dh66-section--compact {
	padding-block: clamp(3rem, 2.25rem + 3vw, 5.5rem);
}

.dh66-flow > * + * {
	margin-block-start: var(--dh66-flow-space, var(--dh66-space-6));
}

.dh66-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dh66-cluster-gap, var(--dh66-space-4));
	align-items: center;
}

.dh66-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
	gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.dh66-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: clamp(1rem, 0.75rem + 1.4vw, 1.75rem);
}

.dh66-stack {
	display: grid;
	gap: var(--dh66-stack-gap, var(--dh66-space-6));
}

.dh66-surface {
	background: var(--dh66-surface);
}

.dh66-surface--raised {
	background: var(--dh66-surface-raised);
}

.dh66-surface--navy {
	background: var(--dh66-navy-900);
	color: #f1f6f8;
}

.dh66-surface--navy :is(h1, h2, h3) {
	color: #f1f6f8;
}

.dh66-visually-hidden,
.dh66-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.dh66-skip-link {
	position: fixed;
	z-index: var(--dh66-layer-skip);
	inset: var(--dh66-space-3) auto auto var(--dh66-space-3);
	padding: var(--dh66-space-3) var(--dh66-space-5);
	border-radius: var(--dh66-radius-sm);
	background: var(--dh66-surface-raised);
	box-shadow: var(--dh66-shadow-md);
	color: var(--dh66-text-strong);
	font-weight: 800;
	transform: translateY(-180%);
	transition: transform var(--dh66-duration-fast) ease;
}

.dh66-skip-link:focus {
	transform: translateY(0);
}

@media (max-width: 47.99rem) {
	.dh66-section {
		padding-block: clamp(3.75rem, 3rem + 4vw, 5rem);
	}

	.dh66-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dh66-space-8);
	}
}

@supports not (overflow: clip) {
	body.dh66-design-system {
		overflow-x: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	:where(.dh66-design-system, .editor-styles-wrapper) *,
	:where(.dh66-design-system, .editor-styles-wrapper) *::before,
	:where(.dh66-design-system, .editor-styles-wrapper) *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}