/**
 * Hero — visuel de fond, voile de lisibilité, calage sur la grille.
 */

.hero {
	position: relative;
	isolation: isolate;
	border-block-end: var(--line-width) solid var(--color-accent);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.hero__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center right;
}

/* Voile : le texte doit rester lisible quelle que soit l'image. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to right,
		var(--color-base) 0%,
		color-mix(in srgb, var(--color-base) 88%, transparent) 45%,
		color-mix(in srgb, var(--color-base) 45%, transparent) 100%
	);
}

.hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	min-block-size: min(80vh, 46rem);
	justify-content: center;
	padding-block: var(--space-4xl);
}

.hero__title {
	max-width: 14ch;
}

.hero__title em {
	font-style: normal;
	color: var(--color-accent);
}

@media (max-width: 767px) {
	.hero__media img {
		object-position: center;
	}

	.hero__media::after {
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--color-base) 92%, transparent) 0%,
			color-mix(in srgb, var(--color-base) 70%, transparent) 100%
		);
	}

	.hero__inner {
		min-block-size: auto;
		padding-block: var(--space-3xl);
	}
}
/* Bloc Cover utilisé comme hero éditable.

   Le conteneur interne est calé sur la même gouttière que le reste du site
   (largeur wide + padding racine) : le texte du hero s'aligne alors
   verticalement avec le logo du header et le contenu des sections.
   Sans ça, le layout « constrained » centre sur 1200px et le hero flotte.

   Le voile est un noir léger posé en CSS (voir plus bas), pas le dimRatio
   du bloc : celui-ci appliquerait la couleur de palette et teinterait
   l'image en brun. Le réglage vit dans le token --overlay-hero. */
.wp-block-cover.hero {
	padding: 0;
	border-block-end: var(--line-width) solid var(--color-accent);
	/* 101vh : un cran au-delà du pli pour que le filet accent ne dépasse pas. */
	--hero-min-height: 101vh;
	min-height: var(--hero-min-height) !important;
}

/* Le voile est géré par le bloc lui-même : couleur « Voile noir » de la
   palette + curseur d'opacité. Aucune règle CSS ici, sinon le réglage
   deviendrait inaccessible au client depuis l'éditeur. */

.wp-block-cover.hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-xl);
	inline-size: 100%;
	max-inline-size: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--space-page);
	padding-block: var(--space-4xl);
	text-align: start;
}

/* Une seule origine horizontale pour tous les éléments du hero.
   WordPress pose margin-left/right: auto !important sur les enfants d'un
   layout « constrained » : le bloc est donc passé en layout « flow ».
   Le !important ci-dessous n'est là que pour tenir si l'éditeur restaure
   le layout d'origine lors d'une récupération de bloc. */
.wp-block-cover.hero .wp-block-cover__inner-container > * {
	margin-inline: 0 !important;
	max-inline-size: 100%;
	text-align: start;
}

.wp-block-cover.hero .display {
	max-inline-size: 16ch;
}

.wp-block-cover.hero .lede {
	max-inline-size: 52ch;
}

.wp-block-cover.hero .lede + .wp-block-buttons {
	margin-block-start: var(--space-md);
}

.wp-block-cover.hero .wp-block-cover__image-background {
	object-position: center right;
}

@media (max-width: 767px) {
	/* En dessous de --bp-mobile, le hero occupe la fenetre visible. La
	   valeur 76dvh vient de l'editeur et vise un ecran de bureau, ou une
	   bande sous le pli reste lisible ; sur telephone elle raccourcit le
	   cadre avant que le texte ait pris sa place. 100dvh, mesuree barre
	   d'adresse retractee, le pose pile sur le premier ecran. */
	/* Un cran sous le plein écran : l'image reste sous le chrome Safari. */
	.wp-block-cover.hero {
		--hero-min-height: 90svh;
	}

	.wp-block-cover.hero .wp-block-cover__inner-container {
		padding-block-start: calc(
			var(--space-4xl) +
			var(--header-height, 0px) +
			env(safe-area-inset-top, 0px)
		);
		padding-block-end: calc(
			var(--space-4xl) +
			env(safe-area-inset-bottom, 0px)
		);
	}

	.wp-block-cover.hero .wp-block-cover__image-background {
		object-position: center;
	}
}

/* Pages internes : même hero photo que l'accueil, moins haut. */
body:not(.home) .wp-block-cover.hero {
	--hero-min-height: 75vh;
}

body:not(.home) .wp-block-cover.hero .wp-block-cover__inner-container {
	justify-content: center;
	padding-block-start: calc(
		var(--header-height, 5rem) +
		var(--space-2xl) +
		env(safe-area-inset-top, 0px)
	);
	padding-block-end: var(--space-3xl);
}

@media (max-width: 767px) {
	body:not(.home) .wp-block-cover.hero {
		--hero-min-height: 75svh;
	}
}