/* ==========================================================================
   Bloc « Section » (hf/section)
   Conteneur générique : en-tête (.hf-head) + corps libre (.hf-section__body.hf-prose).
   Important : aucun « overflow: hidden » ici, l'en-tête collant (split) en dépend.
   ========================================================================== */

.hf-section {
	position: relative;
	isolation: isolate;
	--hf-section-head-gap: clamp(48px, 5.5vw, 88px);
	--hf-section-block-gap: clamp(56px, 6vw, 96px);
	/* Mesure de lecture du texte courant des sections (≈ 65 à 75 signes en Inter 17 px) */
	--hf-section-measure: 38rem;
}

/* Halo très discret sur les fonds sombres (même famille que la citation forte) */
.hf-section:is(.hf-surface--navy, .hf-surface--deep)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(52% 70% at 92% 0%, rgba(3, 89, 247, 0.16), transparent 62%);
	pointer-events: none;
}

/* ---------- En-tête ---------- */
.hf-section__head {
	min-width: 0;
}
.hf-section--stack .hf-section__head {
	margin-bottom: var(--hf-section-head-gap);
}
.hf-section--no-body .hf-section__head,
.hf-section--stack .hf-section__head:last-child {
	margin-bottom: 0;
}

/* Surtitre numéroté : « — 01 | Le groupe » */
.hf-section__eyebrow-text {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
}
.hf-eyebrow__num + .hf-section__eyebrow-text::before {
	content: "";
	flex: none;
	width: 1px;
	height: 0.875rem;
	background: var(--hf-border-strong);
}

/* ---------- Corps ---------- */
.hf-section__body {
	min-width: 0;
}

/* Blocs imbriqués Holding France (sociétés, atouts, chaîne de valeur, chiffres…) :
   respiration plus généreuse qu'entre deux paragraphes. */
.hf-section__body > [class*="wp-block-hf-"]:not(:first-child),
.hf-section__body > [class*="wp-block-hf-"] + * {
	margin-top: var(--hf-section-block-gap);
}
.hf-section--compact .hf-section__body {
	--hf-section-block-gap: clamp(40px, 4.5vw, 72px);
}

/* Disposition « stack » : le texte courant suit la même mesure de lecture que la disposition
   « split » (--hf-section-measure, 65 à 75 signes ; les 70ch de base.css donnent près de 90 signes en
   Inter) ; intertitres, accordéons et fichiers suivent la colonne de lecture ; les blocs riches
   (grilles, colonnes, images) prennent toute la largeur. */
.hf-section--stack .hf-section__body > :is(p, ul, ol, blockquote, .wp-block-quote) {
	max-width: var(--hf-section-measure);
}
.hf-section--stack .hf-section__body > :is(h2, h3, h4, h5, h6, .wp-block-details, .wp-block-file) {
	max-width: var(--hf-container-narrow);
}

/* En-tête centré : textes et boutons natifs suivent l'axe */
.hf-section--center .hf-section__head {
	max-width: 900px;
}
.hf-section--center .hf-section__body > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-quote, .wp-block-details, .wp-block-file) {
	margin-inline: auto;
}
.hf-section--center .hf-section__body > :is(p, h2, h3, h4, h5, h6) {
	text-align: center;
}
.hf-section--center .hf-section__body > .wp-block-buttons {
	justify-content: center;
}

/* ---------- Disposition « split » : en-tête collant à gauche, contenu à droite ----------
   Même grille de 12 colonnes que « Image et texte », la lettre et l'appel à l'action :
   en-tête sur 5 colonnes, une colonne d'air, contenu sur 6 colonnes (bord droit = conteneur). */
.hf-section--split .hf-section__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	align-items: start;
}
.hf-section--split .hf-section__head {
	grid-column: 1 / span 5;
	position: sticky;
	top: calc(var(--hf-header-h) + var(--hf-adminbar-h, 0px) + 32px);
	align-self: start;
}
.hf-section--split .hf-section__body {
	grid-column: 7 / span 6;
}
/* Titre : la colonne de 5/12 fixe la mesure (plus de plafond en « ch » qui l'étriquait).
   Les lignes restent équilibrées (text-wrap: balance de .hf-h2) : comparé à « pretty »,
   moins de lignes et pas de « de » / « la » laissé seul en fin de ligne. */
.hf-section--split .hf-head__title {
	font-size: clamp(2rem, 1.45rem + 1.55vw, 2.875rem);
	max-width: none;
}
.hf-section--split .hf-head__intro {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	max-width: 44ch;
}
/* Le contenu s'aligne sur le titre plutôt que sur le surtitre */
.hf-section--split .hf-section__head:has(.hf-section__eyebrow) + .hf-section__body {
	padding-top: calc(var(--hf-fs-eyebrow) * 1.3 + 1.375rem);
}
.hf-section--split .hf-section__body > p:first-child {
	font-size: var(--hf-fs-lead);
	line-height: 1.6;
	color: var(--hf-fg);
}
/* Texte courant : mesure de lecture de 65 à 75 signes (--hf-section-measure), y compris
   quand la disposition se replie ; les blocs riches (sociétés, atouts, chiffres, colonnes,
   images) gardent toute la largeur de la colonne. */
.hf-section--split .hf-section__body > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-quote, .wp-block-details, .wp-block-file) {
	max-width: var(--hf-section-measure);
}
/* Sans en-tête : le contenu occupe toute la largeur */
.hf-section--split.hf-section--no-head .hf-section__inner {
	display: block;
}

/* ---------- Deux sections consécutives sur le même fond ----------
   Pas de double marge : un filet fin marque la transition. */
.hf-block.hf-surface--white + .hf-section.hf-surface--white,
.hf-block.hf-surface--ivory + .hf-section.hf-surface--ivory,
.hf-block.hf-surface--navy + .hf-section.hf-surface--navy,
.hf-block.hf-surface--deep + .hf-section.hf-surface--deep {
	padding-top: 0;
}
.hf-block.hf-surface--white + .hf-section.hf-surface--white > .hf-section__inner,
.hf-block.hf-surface--ivory + .hf-section.hf-surface--ivory > .hf-section__inner,
.hf-block.hf-surface--navy + .hf-section.hf-surface--navy > .hf-section__inner,
.hf-block.hf-surface--deep + .hf-section.hf-surface--deep > .hf-section__inner {
	padding-top: var(--hf-section-y);
	border-top: 1px solid var(--hf-border);
}
.hf-block.hf-surface--white + .hf-section--compact.hf-surface--white > .hf-section__inner,
.hf-block.hf-surface--ivory + .hf-section--compact.hf-surface--ivory > .hf-section__inner,
.hf-block.hf-surface--navy + .hf-section--compact.hf-surface--navy > .hf-section__inner,
.hf-block.hf-surface--deep + .hf-section--compact.hf-surface--deep > .hf-section__inner {
	padding-top: var(--hf-section-y-compact);
}

/* ---------- Éditeur ---------- */
/* Pas d'en-tête de site fixe dans l'éditeur */
.editor-styles-wrapper .hf-section--split .hf-section__head {
	top: 32px;
}
.editor-styles-wrapper .hf-section__body > .block-list-appender {
	margin-top: 1.5rem;
}
.editor-styles-wrapper .hf-section__eyebrow [data-rich-text-placeholder] {
	min-width: 1.5em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hf-section--split .hf-section__inner {
		display: block;
	}
	.hf-section--split .hf-section__head {
		position: static;
		margin-bottom: clamp(36px, 7vw, 56px);
	}
	.hf-section--split .hf-section__head:has(.hf-section__eyebrow) + .hf-section__body {
		padding-top: 0;
	}
	/* En-tête au-dessus du contenu : même mesure de titre que les sections empilées ;
	   chapeau et paragraphes partagent la même mesure de lecture. */
	.hf-section--split .hf-head__title {
		max-width: 22ch;
	}
	.hf-section--split .hf-head__intro {
		max-width: var(--hf-section-measure);
	}
}
@media (max-width: 640px) {
	.hf-section {
		--hf-section-head-gap: 40px;
		--hf-section-block-gap: 48px;
	}
}