:root {
	--hh: 56px;
	--bh: 32px;
	--g: var(--wp--custom--gouttiere);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ardoise: var(--wp--preset--color--ardoise);
	--cyan: var(--wp--preset--color--cyan);
	--bleu: var(--wp--preset--color--bleu-moyen);
	--gris-bleu: var(--wp--preset--color--gris-bleu);
	--gris: var(--wp--preset--color--fond-gris);
	--blanc: var(--wp--preset--color--blanc);
	--f-titre: var(--wp--preset--font-family--titres);
	--f-texte: var(--wp--preset--font-family--texte);
	/* Content width: 1 240 px up to a 1 440 px viewport, then growing to 1 680 px at 2 560 px (theme.json wideSize). */
	--largeur: var(--wp--style--global--wide-size);
	--gain: calc(var(--largeur) - 77.5rem);
	/* 1 rem that grows like the type scale above 1 440 px (x1.15 at 1 920 px), for the sizes set outside the scale. */
	--rem: calc(1rem + var(--wp--custom--croissance));
}

@media (min-width: 900px) {
	:root {
		--hh: 72px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--hh) + 8px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

a {
	color: inherit;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--ardoise);
	outline-offset: 3px;
	border-radius: 2px;
}

.sombre :focus-visible {
	outline-color: var(--cyan);
}

.contenu {
	width: min(100% - 2 * var(--g), var(--largeur));
	margin-inline: auto;
}

.bouton,
.lien-bouton a,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--ardoise);
	border-radius: 4px;
	font: 600 calc(1 * var(--rem))/1.2 var(--f-titre);
	text-decoration: none;
	white-space: nowrap;
}

.bouton-plein,
.lien-bouton-plein a,
.wp-block-button__link {
	background: var(--ardoise);
	color: var(--blanc);
}

/* Primary button hover (design system § 6.4): a 3 px cyan line under the label, never a cyan button. */
.lien-bouton-plein a:hover,
.wp-block-button__link:hover {
	text-decoration: underline 3px var(--cyan);
	text-underline-offset: .3em;
}

.lien-48 {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.visuellement-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Only blocks below the fold at load wait for their reveal (.anim-attente, set by apparitions.js): what is on screen
   at the first paint is never hidden, so it never waits for the script and the fade (largest paint, 24/10). The fade
   itself starts one frame later (.anim-pret), so a block hidden at load disappears at once instead of fading out. */
@media (prefers-reduced-motion: no-preference) {
	.anim-pret .anim-monte.anim-attente {
		transition: opacity 2000ms ease, transform 2000ms ease;
		transition-delay: var(--anim-delai, 0ms);
	}

	/* Shift by the block's own height, capped so a tall block stays on screen while hidden (TEC-51). */
	.anim-monte.anim-attente:not(.est-visible) {
		opacity: 0;
		transform: translateY(min(100%, 20vh));
	}

	.anim-monte.anim-attente[data-sortie="haut"]:not(.est-visible) {
		transform: translateY(max(-100%, -20vh));
	}
}

main[tabindex="-1"]:focus {
	outline: none;
}