/* Bloc « Bandeau d'accueil » (hf/hero)
   Couches (de bas en haut) : photo traitée → voile de lisibilité → trame de lignes → contenu.
   Variables posées par render.php / edit.js :
     --hf-hero-overlay  intensité du voile (0 à 1, attribut « overlay ») ;
     --hf-hero-n        nombre de chiffres clés (colonnes de la bande et de la trame) ;
     --hf-stat-len      longueur du chiffre le plus long (taille commune des chiffres).
   Premier écran : la bande de chiffres reste visible sans défiler sur les écrans d'ordinateur
   courants (1440 × 900, 1440 × 780, 1536 × 730, 1280 × 800, 1024 × 768…) : les espacements
   verticaux et la taille du titre suivent la hauteur de l'écran (svh) autant que sa largeur.
   base.css est chargé avant ce fichier : une classe du bloc suffit pour ajuster une classe partagée
   (.hf-display, .hf-lead, .hf-eyebrow) ; les règles globales de base.css (img…) sont sans spécificité. */
.hf-hero {
	--hf-hero-overlay: 0.72;
	--hf-hero-cols: var(--hf-hero-n, 4);
	--hf-hero-pad: clamp(20px, 2.2vw, 34px);
	--hf-hero-bottom: clamp(20px, 3.4svh, 52px);
	--hf-hero-line: rgba(255, 255, 255, 0.12);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--hf-header-h) + clamp(16px, 3.5svh, 104px));
	padding-bottom: clamp(48px, 9svh, 112px);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--hf-bg);
}
/* Avec chiffres clés : la bande (et ses filets séparateurs) descend jusqu'au bas du bandeau */
.hf-hero--has-stats {
	padding-bottom: 0;
}
.hf-hero--large {
	min-height: min(88vh, 900px);
	min-height: min(88svh, 900px);
}

/* ---------- Photo traitée ----------
   Traitement photographique unique du site (jetons de base.css) : désaturation + lavis bleu nuit.
   Le voile (.hf-hero__veil) n'est qu'un dégradé de lisibilité propre au bandeau (texte posé dessus). */
.hf-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--hf-navy-950);
	animation: hf-hero-fade 1.6s var(--hf-ease) both;
}
.hf-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	filter: var(--hf-photo-filter);
	transform-origin: 64% 40%;
	animation: hf-hero-kenburns 36s ease-in-out infinite alternate;
	will-change: transform;
}
.hf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hf-photo-wash);
	mix-blend-mode: color;
	pointer-events: none;
}

/* ---------- Voile : lisibilité du titre (gauche), de l'en-tête (haut, toujours assuré) et des chiffres (bas) ---------- */
.hf-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgb(2 20 49 / max(0.45, calc(var(--hf-hero-overlay) * 0.8))) 0%, rgb(2 20 49 / 0) 24%),
		linear-gradient(0deg, rgb(2 20 49 / min(1, calc(var(--hf-hero-overlay) * 1.3))) 0%, rgb(2 20 49 / calc(var(--hf-hero-overlay) * 0.6)) 30%, rgb(2 20 49 / 0) 62%),
		linear-gradient(90deg, rgb(2 20 49 / var(--hf-hero-overlay)) 0%, rgb(2 20 49 / calc(var(--hf-hero-overlay) * 0.72)) 42%, rgb(2 20 49 / calc(var(--hf-hero-overlay) * 0.18)) 100%);
}
/* Halo de lumière bleue, discret, en haut à droite */
.hf-hero__veil::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(46% 58% at 84% 14%, rgba(3, 89, 247, 0.2), rgba(3, 89, 247, 0) 70%);
}
/* Sans photo : bleu nuit profond et halo un peu plus présent */
.hf-hero:not(.hf-hero--has-image) .hf-hero__veil {
	background: radial-gradient(70% 90% at 90% 0%, rgba(3, 89, 247, 0.16), rgba(3, 89, 247, 0) 65%);
}

/* ---------- Trame de lignes verticales (grand écran) ----------
   Une ligne au début de chaque colonne de la bande de chiffres, dans l'alignement de ses filets
   séparateurs. Elle commence sous l'en-tête fixe (aucune ligne dans la barre de navigation) et
   n'apparaît que sur la photo, en haut à droite : jamais derrière le titre, le chapeau ou les boutons. */
.hf-hero__lines {
	position: absolute;
	top: var(--hf-header-h);
	bottom: 0;
	left: 0;
	right: 0;
	width: min(100% - 2 * var(--hf-gutter), var(--hf-container));
	margin-inline: auto;
	pointer-events: none;
	background-image: repeating-linear-gradient(90deg, var(--hf-hero-line) 0 1px, transparent 1px calc(100% / var(--hf-hero-cols)));
	-webkit-mask-image: radial-gradient(85% 75% at 100% 30%, rgb(0 0 0 / 0.85) 20%, transparent 72%);
	mask-image: radial-gradient(85% 75% at 100% 30%, rgb(0 0 0 / 0.85) 20%, transparent 72%);
}

/* ---------- Contenu ---------- */
.hf-hero__inner {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: clamp(24px, 4.6svh, 96px);
}
.hf-hero__main {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3rem;
}
.hf-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 1040px;
}
.hf-hero__eyebrow {
	margin-bottom: clamp(0.875rem, 2.2svh, 2.25rem);
}
/* Taille du titre : la plus petite de la taille « display » (largeur) et de 7,8 % de la hauteur d'écran */
.hf-hero__title {
	max-width: 16ch;
	font-size: max(2.5rem, min(var(--hf-fs-display), 7.8svh));
	text-shadow: 0 1px 24px rgba(2, 20, 49, 0.25);
}
.hf-hero__lead {
	max-width: 50ch;
	margin-top: clamp(1rem, 2.2svh, 2rem);
	color: var(--hf-fg-2);
}
.hf-hero__actions {
	margin-top: clamp(1.25rem, 3.4svh, 2.75rem);
}
/* Bouton contour : léger fond translucide pour se détacher de la photo */
.hf-hero__actions .hf-btn--outline {
	background-color: rgb(2 20 49 / 0.28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* ---------- Indicateur de défilement ---------- */
.hf-hero__scroll {
	flex: none;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
	padding: 0.5rem 0.25rem 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hf-fg-muted);
	transition: color var(--hf-dur) var(--hf-ease);
	animation: hf-hero-fade 1.2s 1.2s var(--hf-ease) both;
}
.hf-hero__scroll:hover {
	color: var(--hf-fg);
}
.hf-hero__scroll-label {
	writing-mode: vertical-rl;
}
.hf-hero__scroll-line {
	position: relative;
	display: block;
	width: 1px;
	height: 76px;
	overflow: hidden;
	background: var(--hf-border);
}
.hf-hero__scroll-line::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 44%;
	background: var(--hf-white);
	animation: hf-hero-scroll 2.6s var(--hf-ease-in-out) infinite;
}
.hf-hero__end {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

/* ---------- Bande de chiffres clés ----------
   Filet horizontal en tête, filets verticaux entre les colonnes (jusqu'au bas du bandeau). */
.hf-hero__stats {
	--hf-reveal-base: 3;
	--hf-stat-room: calc(100cqi / var(--hf-hero-cols) - 1.5 * var(--hf-hero-pad) - 2px);
	--hf-stat-min: 1.375rem;
	--hf-stat-max: 2.875rem;
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(var(--hf-hero-cols), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hf-border);
}
.hf-hero__stats > .hf-stat {
	padding: clamp(14px, 2.4svh, 34px) calc(var(--hf-hero-pad) / 2) var(--hf-hero-bottom) var(--hf-hero-pad);
}
.hf-hero__stats > .hf-stat:first-child {
	padding-left: 0;
}
.hf-hero__stats > .hf-stat + .hf-stat {
	border-left: 1px solid var(--hf-border);
}
.hf-hero__stats .hf-stat__label {
	margin-top: 0.875rem;
}

/* ---------- Animations ---------- */
@keyframes hf-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes hf-hero-kenburns {
	from { transform: scale(1.02) translate3d(0, 0, 0); }
	to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}
@keyframes hf-hero-scroll {
	0% { transform: translateY(-100%); }
	65%,
	100% { transform: translateY(230%); }
}
@media (prefers-reduced-motion: reduce) {
	.hf-hero__media,
	.hf-hero__img,
	.hf-hero__scroll,
	.hf-hero__scroll-line::after {
		animation: none;
	}
	.hf-hero__img {
		transform: none;
	}
	.hf-hero__scroll-line::after {
		top: 28%;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.hf-hero__title {
		max-width: 15ch;
	}
}
@media (max-width: 900px) {
	/* Chiffres sur deux colonnes ; le titre occupe toute la largeur : pas de trame décorative */
	.hf-hero {
		--hf-hero-cols: min(var(--hf-hero-n, 4), 2);
	}
	.hf-hero__lines {
		display: none;
	}
	.hf-hero__stats > .hf-stat {
		padding-block: clamp(16px, 2.6svh, 28px);
	}
	.hf-hero__stats > .hf-stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.hf-hero__stats > .hf-stat:nth-child(even) {
		padding-left: var(--hf-hero-pad);
	}
	.hf-hero__stats > .hf-stat:nth-child(n + 3) {
		border-top: 1px solid var(--hf-border);
	}
	/* Nombre impair de chiffres : le dernier, seul sur sa ligne, en occupe toute la largeur
	   (dans l'éditeur, il est suivi du bouton d'ajout) */
	.hf-hero__stats > .hf-stat:nth-child(odd):is(:last-child, :has(+ .block-list-appender:last-child)) {
		grid-column: 1 / -1;
	}
}
@media (max-width: 640px) {
	.hf-hero {
		padding-top: calc(var(--hf-header-h) + 24px);
	}
	.hf-hero:not(.hf-hero--has-stats) {
		padding-bottom: 32px;
	}
	.hf-hero__inner {
		gap: 32px;
	}
	.hf-hero__scroll {
		display: none;
	}
	.hf-hero__title {
		max-width: none;
	}
	.hf-hero__actions {
		width: 100%;
	}
	.hf-hero__actions .hf-btn {
		flex: 1 1 100%;
		justify-content: space-between;
	}
	.hf-hero__veil {
		background:
			linear-gradient(180deg, rgb(2 20 49 / max(0.45, calc(var(--hf-hero-overlay) * 0.8))) 0%, rgb(2 20 49 / 0) 22%),
			linear-gradient(0deg, rgb(2 20 49 / min(1, calc(var(--hf-hero-overlay) * 1.3))) 0%, rgb(2 20 49 / calc(var(--hf-hero-overlay) * 0.95)) 45%, rgb(2 20 49 / calc(var(--hf-hero-overlay) * 0.35)) 100%);
	}
}

/* ---------- Éditeur ---------- */
/* Pas d'animation pendant l'édition */
.editor-styles-wrapper .hf-hero__media,
.editor-styles-wrapper .hf-hero__img,
.editor-styles-wrapper .hf-hero__scroll {
	animation: none;
}
.editor-styles-wrapper .hf-hero__scroll {
	cursor: default;
}
/* Bouton « Remplacer » / « Choisir la photo » en haut à droite, au-dessus du voile */
.editor-styles-wrapper .hf-hero .hf-inline-image__replace,
.editor-styles-wrapper .hf-hero .hf-inline-image__empty {
	top: 24px;
	right: var(--hf-gutter);
	left: auto;
	transform: none;
}
.editor-styles-wrapper .hf-hero .hf-inline-image__empty {
	background-color: var(--hf-white);
}
/* Bouton d'ajout d'un chiffre : au-dessus de la bande, sans la décaler (le canevas garde la mesure du site ;
   la règle :has() annule la marge basse qu'editor.css réserve aux zones munies d'un bouton d'ajout) */
.editor-styles-wrapper .hf-hero__stats {
	position: relative;
}
.editor-styles-wrapper .hf-hero .hf-hero__stats:has(> .block-list-appender) {
	padding-bottom: 0;
}
.editor-styles-wrapper .hf-hero__stats > .block-list-appender {
	position: absolute;
	top: -44px;
	right: 0;
	margin: 0;
}
.editor-styles-wrapper .hf-hero__stats > .block-list-appender .block-editor-button-block-appender {
	width: 32px;
	min-height: 32px;
	height: 32px;
	padding: 0;
}