/* Bloc « En-tête de page » (hf/page-hero)
   Variantes : fond navy | deep | ivory ; taille default | compact ; avec ou sans image.
   Sans image : titre à gauche, chapeau à droite porté par un filet vertical à amorce tricolore.
   Avec image : photo traitée en colonne droite, pleine hauteur, jusqu'au bord de l'écran. */
.hf-page-hero {
	--hf-ph-container: min(100% - 2 * var(--hf-gutter), var(--hf-container));
	--hf-ph-line: rgba(255, 255, 255, 0.09);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: calc(var(--hf-header-h) + clamp(32px, 5vw, 80px));
	padding-bottom: clamp(64px, 8vw, 128px);
}
.hf-page-hero.hf-surface--ivory {
	--hf-ph-line: rgba(4, 32, 79, 0.07);
}

/* ---------- Décor : filet de la grille + halo ----------
   Un seul filet vertical, sur la ligne des trois quarts du conteneur (en écho au filet du quart
   de la citation forte) : il commence sous l'en-tête fixe du site et s'efface vers le bas.
   Il n'est tracé qu'à droite du texte : jamais avec une photo (c'est le bord de la photo qui marque
   la ligne centrale de la grille), ni quand le chapeau occupe la colonne droite (son filet à amorce
   tricolore en tient lieu), ni sur écran étroit (le texte occupe alors toute la largeur). */
.hf-page-hero__decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.hf-page-hero__decor::before {
	content: "";
	position: absolute;
	top: var(--hf-header-h);
	bottom: 0;
	left: 0;
	right: 0;
	width: var(--hf-ph-container);
	margin-inline: auto;
	background-image: linear-gradient(90deg, transparent calc(75% - 1px), var(--hf-ph-line) calc(75% - 1px) 75%, transparent 75%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%);
	mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 92%);
}
.hf-page-hero--has-image .hf-page-hero__decor::before,
.hf-page-hero--default:not(.hf-page-hero--no-lead) .hf-page-hero__decor::before {
	display: none;
}
/* Quand le filet est tracé, le texte (surtitre, titre, chapeau) s'arrête 48 px avant lui */
@media (min-width: 901px) {
	.hf-page-hero--no-image:is(.hf-page-hero--compact, .hf-page-hero--no-lead) .hf-page-hero__body {
		padding-right: calc(25% + 3rem);
	}
}
.hf-page-hero:is(.hf-surface--navy, .hf-surface--deep) .hf-page-hero__decor::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(52% 85% at 90% 0%, rgba(3, 89, 247, 0.2), rgba(3, 89, 247, 0) 70%);
}
.hf-page-hero.hf-surface--ivory .hf-page-hero__decor::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 80% at 92% 0%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%);
}

/* ---------- Fil d'Ariane ---------- */
.hf-page-hero__crumbs {
	margin-bottom: clamp(40px, 5.5vw, 84px);
}
.hf-page-hero__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--hf-fs-xs);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--hf-fg-muted);
}
.hf-page-hero__crumb {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.hf-page-hero__crumb + .hf-page-hero__crumb::before {
	content: "›";
	content: "›" / "";
	margin: 0 0.6875rem;
	opacity: 0.7;
}
.hf-page-hero__crumb a,
.hf-page-hero__crumb span {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--hf-dur) var(--hf-ease), border-color var(--hf-dur) var(--hf-ease);
}
.hf-page-hero__crumb a:hover {
	color: var(--hf-fg);
	border-bottom-color: currentColor;
}
.hf-page-hero__crumb [aria-current="page"] {
	overflow: hidden;
	max-width: 44ch;
	font-weight: 500;
	color: var(--hf-fg-2);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- Titre et chapeau ---------- */
.hf-page-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	column-gap: clamp(40px, 6vw, 112px);
	row-gap: 2.25rem;
}
.hf-page-hero__heading {
	display: grid;
	justify-items: start;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	min-width: 0;
}
.hf-page-hero__title {
	max-width: 17ch;
}
.hf-page-hero__aside {
	position: relative;
	min-width: 0;
	padding: 0.25rem 0 0.375rem clamp(24px, 2.4vw, 36px);
	border-left: 1px solid var(--hf-border-strong);
}
/* Amorce tricolore du filet (bleu, blanc, rouge de haut en bas) */
.hf-page-hero__mark {
	position: absolute;
	top: 0;
	left: -1px;
	width: 3px;
	height: 60px;
	background: linear-gradient(180deg, var(--hf-blue) 0 33.333%, var(--hf-tricolor-mid) 33.333% 66.666%, var(--hf-red) 66.666% 100%);
}
.hf-page-hero__lead {
	max-width: 46ch;
}
/* Sans chapeau : le titre prend toute la largeur */
.hf-page-hero--no-lead .hf-page-hero__body {
	grid-template-columns: minmax(0, 1fr);
}
.hf-page-hero--no-lead .hf-page-hero__title {
	max-width: 20ch;
}

/* ---------- Avec image : photo traitée en colonne droite pleine hauteur ----------
   Le bord gauche de la photo tombe exactement au milieu de l'écran, c'est-à-dire sur la ligne
   centrale de la grille du conteneur (la même que celle de la trame du bandeau d'accueil). */
.hf-page-hero--has-image {
	display: flex;
	flex-direction: column;
	min-height: clamp(540px, 74vh, 780px);
}
.hf-page-hero--has-image .hf-page-hero__inner {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.hf-page-hero--has-image .hf-page-hero__crumbs {
	max-width: 50%;
	padding-right: clamp(24px, 3.5vw, 64px);
}
.hf-page-hero--has-image .hf-page-hero__body {
	flex: 1 0 auto;
	grid-template-columns: minmax(0, 1fr);
	align-content: end;
	width: 50%;
	padding-right: clamp(24px, 3.5vw, 64px);
}
.hf-page-hero--has-image .hf-page-hero__title {
	max-width: 18ch;
}
.hf-page-hero--has-image .hf-page-hero__aside {
	max-width: 52ch;
}
.hf-page-hero__media {
	position: absolute;
	top: var(--hf-header-h);
	right: 0;
	bottom: 0;
	width: 50%;
	margin: 0;
	overflow: hidden;
	background-color: var(--hf-navy-900);
	animation: hf-page-hero-reveal 1.4s var(--hf-ease) both;
}
/* Traitement photographique unique du site (jetons de base.css) : désaturation + lavis bleu nuit.
   Aucun texte n'est posé sur la photo : pas de dégradé de lisibilité supplémentaire. */
.hf-page-hero__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	filter: var(--hf-photo-filter);
}
.hf-page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hf-photo-wash);
	mix-blend-mode: color;
	pointer-events: none;
}

/* ---------- Compact (pages légales, contact) ---------- */
.hf-page-hero--compact {
	padding-top: calc(var(--hf-header-h) + clamp(28px, 4vw, 56px));
	padding-bottom: clamp(48px, 5.5vw, 80px);
}
.hf-page-hero--compact .hf-page-hero__crumbs {
	margin-bottom: clamp(32px, 4.5vw, 56px);
}
.hf-page-hero--compact .hf-page-hero__title {
	max-width: 24ch;
	font-size: clamp(2.25rem, 1.55rem + 2.4vw, 3.625rem);
	line-height: 1.08;
}
.hf-page-hero--compact.hf-page-hero--no-image .hf-page-hero__body {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 1.75rem;
}
.hf-page-hero--compact .hf-page-hero__aside {
	padding: 0;
	border: 0;
}
.hf-page-hero--compact .hf-page-hero__mark {
	display: none;
}
.hf-page-hero--compact .hf-page-hero__lead {
	max-width: 62ch;
}
.hf-page-hero--compact.hf-page-hero--has-image {
	min-height: clamp(420px, 54vh, 580px);
}

/* ---------- Animations ---------- */
@keyframes hf-page-hero-reveal {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
	.hf-page-hero__media {
		animation: none;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.hf-page-hero__body {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}
@media (max-width: 900px) {
	.hf-page-hero__decor::before {
		display: none;
	}
	/* Écrans tactiles : zone de toucher d'au moins 44 px de haut, sans décaler le fil d'Ariane */
	.hf-page-hero__crumb a {
		position: relative;
	}
	.hf-page-hero__crumb a::after {
		content: "";
		position: absolute;
		inset: -13px -6px;
	}
	.hf-page-hero--has-image .hf-page-hero__crumbs {
		max-width: none;
		padding-right: 0;
	}
	.hf-page-hero__body,
	.hf-page-hero--has-image .hf-page-hero__body {
		grid-template-columns: minmax(0, 1fr);
		width: auto;
		padding-right: 0;
	}
	.hf-page-hero__title,
	.hf-page-hero--has-image .hf-page-hero__title {
		max-width: 18ch;
	}
	.hf-page-hero--has-image {
		min-height: 0;
		padding-bottom: 0;
	}
	.hf-page-hero__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: clamp(48px, 9vw, 72px);
		aspect-ratio: 16 / 10;
	}
	.hf-page-hero__img {
		position: absolute;
		inset: 0;
	}
}
@media (max-width: 640px) {
	.hf-page-hero {
		padding-top: calc(var(--hf-header-h) + 24px);
		padding-bottom: 64px;
	}
	.hf-page-hero--compact {
		padding-bottom: 48px;
	}
	.hf-page-hero--has-image {
		padding-bottom: 0;
	}
	.hf-page-hero__crumbs {
		margin-bottom: 40px;
	}
	.hf-page-hero__crumb [aria-current="page"] {
		max-width: 24ch;
	}
	.hf-page-hero__media {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Éditeur ---------- */
.editor-styles-wrapper .hf-page-hero__media {
	animation: none;
}
.editor-styles-wrapper .hf-page-hero .hf-inline-image__replace {
	top: 16px;
	right: 16px;
}