/* ==========================================================================
   Bloc « Image et texte » (hf/split)
   Grille de 12 colonnes : image 5/12 (portrait, carré) ou 6/12 (paysage),
   texte sur 5 à 6 colonnes, une colonne d'air entre les deux.
   ========================================================================== */

.hf-split {
	position: relative;
	--hf-split-badge-shift: clamp(24px, 3vw, 48px);
}

.hf-split__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	align-items: center;
}

/* ---------- Placement ---------- */
.hf-split__figure,
.hf-split__content {
	grid-row: 1;
	min-width: 0;
}
/* Image à droite */
.hf-split--image-right .hf-split__content {
	grid-column: 1 / span 6;
}
.hf-split--image-right .hf-split__figure {
	grid-column: 8 / span 5;
}
.hf-split--image-right.hf-split--landscape .hf-split__content {
	grid-column: 1 / span 5;
}
.hf-split--image-right.hf-split--landscape .hf-split__figure {
	grid-column: 7 / span 6;
}
/* Image à gauche */
.hf-split--image-left .hf-split__figure {
	grid-column: 1 / span 5;
}
.hf-split--image-left .hf-split__content {
	grid-column: 7 / span 6;
}
.hf-split--image-left.hf-split--landscape .hf-split__figure {
	grid-column: 1 / span 6;
}
.hf-split--image-left.hf-split--landscape .hf-split__content {
	grid-column: 8 / span 5;
}
/* Sans image : texte seul en colonne de lecture */
.hf-split--no-image .hf-split__content {
	grid-column: 1 / -1;
	max-width: var(--hf-container-narrow);
}

/* Texte décalé verticalement : il s'ancre dans la moitié basse de l'image */
.hf-split--portrait .hf-split__content,
.hf-split--square .hf-split__content {
	align-self: end;
	padding-bottom: clamp(0px, 5.5vw, 96px);
}

/* ---------- Image ---------- */
.hf-split__figure {
	position: relative;
	margin: 0;
}
.hf-split__frame {
	position: relative;
}
.hf-split__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--hf-radius);
}
.hf-split--landscape .hf-split__media {
	aspect-ratio: 3 / 2;
}
.hf-split--square .hf-split__media {
	aspect-ratio: 1 / 1;
}
/* Traitement photo unique du site : .hf-media--tint (base.css) applique le filtre
   --hf-photo-filter et le lavis --hf-photo-wash ; aucun traitement propre au bloc.
   La photo remplit toujours son cadre (taille et recadrage : .hf-media > img). */
.hf-split__media > img {
	position: absolute;
	inset: 0;
	transform: scale(1.001);
	transition: transform 1.6s var(--hf-ease);
}
.hf-split__figure:hover .hf-split__media > img {
	transform: scale(1.035);
}

/* Légende : filet fin + texte discret, du côté opposé au badge */
.hf-split__caption {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	max-width: 34rem;
	margin: 1rem 0 0;
	line-height: 1.5;
}
.hf-split__caption::before {
	content: "";
	flex: none;
	width: 24px;
	height: 1px;
	background: var(--hf-border-strong);
	transform: translateY(-0.3em);
}
.hf-split--image-right .hf-split__caption {
	margin-left: auto;
	justify-content: flex-end;
	text-align: right;
	max-width: 62%;
}
@media (min-width: 1101px) {
	.hf-split__figure:has(.hf-split__badge) .hf-split__caption {
		max-width: 48%;
	}
}

/* Badge chiffré, à cheval sur le bord intérieur de l'image */
.hf-split__badge {
	position: absolute;
	z-index: 2;
	bottom: clamp(-40px, -2.8vw, -24px);
	display: grid;
	gap: 0.625rem;
	width: max-content;
	min-width: 176px;
	max-width: min(280px, 80%);
	padding: 1.625rem 1.75rem 1.5rem;
	color: var(--hf-white);
	background: var(--hf-navy-900);
	border-radius: var(--hf-radius);
	box-shadow: var(--hf-shadow);
}
.hf-split__badge::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.75rem;
	width: 40px;
	height: 3px;
	background: linear-gradient(90deg, var(--hf-blue) 0 33.333%, var(--hf-split-badge-mid, #fff) 33.333% 66.666%, var(--hf-red) 66.666% 100%);
}
.hf-split--image-right .hf-split__badge {
	left: calc(-1 * var(--hf-split-badge-shift));
}
.hf-split--image-left .hf-split__badge {
	right: calc(-1 * var(--hf-split-badge-shift));
}
.hf-split__badge-value {
	font-family: var(--hf-font-serif);
	font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: lining-nums;
	color: inherit;
}
.hf-split__badge-label {
	font-size: var(--hf-fs-xs);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.74);
}
/* Sur fond sombre, le badge s'inverse */
.hf-split:is(.hf-surface--navy, .hf-surface--deep) .hf-split__badge {
	color: var(--hf-navy-900);
	background: var(--hf-white);
}
.hf-split:is(.hf-surface--navy, .hf-surface--deep) .hf-split__badge::before {
	--hf-split-badge-mid: #d2d8e4;
}
.hf-split:is(.hf-surface--navy, .hf-surface--deep) .hf-split__badge-label {
	color: var(--hf-slate);
}

/* ---------- Texte ---------- */
.hf-split__eyebrow {
	margin-bottom: 1.75rem;
}
.hf-split__title {
	font-size: clamp(2rem, 1.35rem + 2vw, 3.125rem);
	max-width: 18ch;
}
.hf-split__title + .hf-split__body {
	margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
}
.hf-split__body {
	max-width: 36rem;
}
.hf-split__body > p:first-child {
	font-size: var(--hf-fs-lead);
	line-height: 1.6;
	color: var(--hf-fg);
}
.hf-split__body > .wp-block-buttons {
	margin-top: 2.25rem;
}

/* ---------- Éditeur ---------- */
.editor-styles-wrapper .hf-split__badge.is-placeholder {
	opacity: 0.72;
	outline: 1px dashed currentColor;
	outline-offset: -6px;
}
.editor-styles-wrapper .hf-split__badge [data-rich-text-placeholder]::after {
	color: inherit;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	/* La colonne d'air est conservée : le badge déborde moins vers le texte */
	.hf-split {
		--hf-split-badge-shift: 12px;
	}
	/* Avec badge : la légende passe sous le badge, alignée à gauche */
	.hf-split__figure:has(.hf-split__badge) .hf-split__caption {
		margin-top: calc(40px + 0.75rem);
		margin-left: 0;
		justify-content: flex-start;
		text-align: left;
		max-width: none;
	}
	.hf-split--portrait .hf-split__content,
	.hf-split--square .hf-split__content {
		padding-bottom: 0;
		align-self: center;
	}
}
@media (max-width: 900px) {
	.hf-split__inner {
		display: block;
	}
	/* Une seule colonne : l'image occupe toute la largeur du conteneur (bords alignés
	   sur le texte et sur les autres sections), quel que soit son format. */
	.hf-split__figure {
		margin-bottom: clamp(56px, 10vw, 72px);
	}
	.hf-split__badge,
	.hf-split--image-right .hf-split__badge,
	.hf-split--image-left .hf-split__badge {
		left: 16px;
		right: auto;
		bottom: -28px;
	}
	/* Une seule colonne : légende alignée à gauche, sous l'image (et sous le badge) */
	.hf-split__caption,
	.hf-split--image-right .hf-split__caption {
		margin-left: 0;
		justify-content: flex-start;
		text-align: left;
		max-width: none;
	}
	.hf-split__figure:has(.hf-split__badge):has(.hf-split__caption) {
		margin-bottom: clamp(40px, 8vw, 56px);
	}
	/* Texte sous l'image : titre à la mesure des en-têtes de section, corps à une
	   mesure de lecture de 65 à 75 signes (il ne s'étale pas sur toute la largeur). */
	.hf-split__title {
		max-width: 22ch;
	}
	.hf-split__body {
		max-width: 38rem;
	}
}
/* Tablette : portrait et carré recadrés en paysage, pour que la photo pleine largeur
   ne repousse pas le texte de tout un écran. */
@media (min-width: 641px) and (max-width: 900px) {
	.hf-split--portrait .hf-split__media,
	.hf-split--square .hf-split__media {
		aspect-ratio: 3 / 2;
	}
}
@media (max-width: 640px) {
	/* Portrait un peu moins haut sur téléphone (paysage et carré conservent leur format) */
	.hf-split--portrait .hf-split__media {
		aspect-ratio: 4 / 4.4;
	}
	.hf-split__badge {
		min-width: 0;
		max-width: calc(100% - 64px);
		padding: 1.25rem 1.375rem 1.125rem;
	}
	.hf-split__badge::before {
		left: 1.375rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hf-split__media > img {
		transition: none;
	}
	.hf-split__figure:hover .hf-split__media > img {
		transform: none;
	}
}