/* ==========================================================================
   === Page Économie de la construction ===
   --------------------------------------------------------------------------
   Sections (dans l'ordre du DOM) :
     1. .bmf-economie-hero    — image (qui passe DERRIÈRE le menu transparent)
                                + bande #4C5C66 (titre, ancres, picto+texte)
     2. .bmf-economie-jobs    — 4 cartes métiers + toggle « Lire plus »
     3. .bmf-economie-quote   — bande grise #F5F5F5 (max-width contenue)
     4. .bmf-economie-approach— texte + image 2 cols, puis accordéon
     5. .bmf-economie-cta     — 2 blocs gris #F5F5F5 avec coins arrondis
                                vers l'intérieur (gap central, full-width body)

   Réutilise les fontes et la max-width du thème (--bmf-home-content-max).
   Variables locales préfixées --bmf-eco-* pour les couleurs spécifiques.
   ========================================================================== */

:root {
	--bmf-eco-ink: #1d1d1b;
	--bmf-eco-white: #ffffff;
	--bmf-eco-band: #4c5c66;        /* hero band + titres H2 + titres H3 cartes */
	--bmf-eco-gray-light: #f5f5f5;  /* fonds citation & CTA */
	--bmf-eco-gray-line: #abb2af;   /* filets de séparation */
	--bmf-eco-gray-meta: #949494;   /* sous-titres H4 mots-clés */
	--bmf-eco-content-max: var(--bmf-home-content-max, 1200px);
	--bmf-eco-serif: "Self Modern", "Cormorant Garamond", Georgia, serif;
	--bmf-eco-sans: "Inter", system-ui, sans-serif;
	--bmf-eco-radius-corner: 20px;  /* arrondi haut-droit des images + arrondis CTA */
	--bmf-eco-hero-offset: 100px;   /* hauteur approximative du menu sticky pour le tirage du hero */
	--bmf-eco-menu-bar-h: 44px;
	--bmf-eco-menu-pad-block: var(--bmf-space-xs);
	/* Mobile / tablette ≤1023 : hauteur fixe du menu burger (Économie = Management). */
	--bmf-eco-hero-offset-compact: calc(var(--bmf-eco-menu-pad-block) * 2 + var(--bmf-eco-menu-bar-h));
	--bmf-eco-hero-h: clamp(600px, 70vh, 720px);
	--bmf-eco-hero-band-overlap: 0px;
	--bmf-eco-hero-picto-size: 96px;
	--bmf-eco-card-media-max-h-mobile: 240px;
}

.bmf-economie {
	color: var(--bmf-eco-ink);
	font-family: var(--bmf-eco-sans);
	background: var(--bmf-eco-white);
}

/*
 * Pages métier (hero image + menu transparent) : le menu est injecté AVANT
 * #main (hook ocean_before_main). On remonte le <main> pour caler l’image
 * sous le menu. overflow:visible sur les ancêtres → main-menu.css (global).
 */
body.bmf-site.bmf-has-job-hero #main,
body.bmf-site.bmf-has-job-hero main.site-content.bmf-economie {
	overflow: visible !important;
}

body.bmf-site.bmf-has-job-hero #site-header,
body.bmf-site.bmf-has-job-hero #site-header-inner,
body.bmf-site.bmf-has-job-hero #site-header-wrap,
body.bmf-site.bmf-has-job-hero #transparent-header-wrap,
body.bmf-site.bmf-has-job-hero #top-bar-wrap {
	display: none !important;
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

body.bmf-site.bmf-has-job-hero #content-wrap,
body.bmf-site.bmf-has-job-hero #content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.bmf-site.bmf-has-job-hero #main.site-content.bmf-economie {
	margin-top: calc(var(--bmf-eco-hero-offset) * -1);
	padding-top: 0;
}

body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent {
	margin-top: 0;
}

/* Barre admin WP : l’image fixed ne doit pas passer sous elle (évite la bande vide). */
body.bmf-site.bmf-has-job-hero.admin-bar .bmf-economie-hero__media {
	top: var(--bmf-main-menu-sticky-top, 32px);
}

.bmf-economie h1,
.bmf-economie h2,
.bmf-economie h3,
.bmf-economie h4 {
	margin: 0;
}

.bmf-economie em {
	font-style: italic;
}

/* =========================================================================
   1. HERO
   ----
   L'image principale est positionnée en `fixed` : elle reste collée en haut
   de l'écran pendant tout le scroll, et le reste du document (band #4C5C66
   + sections suivantes) défile PAR-DESSUS grâce à un z-index supérieur.
   - .bmf-economie-hero          → placeholder qui réserve la hauteur visuelle
                                   de l'image (hero-h = 70vh, min 600 / max 720).
   - .bmf-economie-hero__media   → fixed top:0 — l'image reste « parallax » :
                                   on la voit pendant les premiers pixels de
                                   scroll, puis le band #4C5C66 vient la cacher.
   - .bmf-economie-hero__band et toutes les sections suivantes → relative +
     z-index:1 + background opaque, pour passer par-dessus l'image fixed.
   ========================================================================= */
.bmf-economie-hero {
	position: relative;
	z-index: 0;
	background: transparent;
	margin-top: calc(var(--bmf-eco-hero-offset) * -1);
	/* Hauteur = spacer (::before) + bande bleue — pas de height fixe qui
	   laisserait un vide entre l'image et la section blanche suivante. */
	height: auto;
}

body.bmf-site.bmf-has-job-hero .bmf-economie-hero {
	margin-top: 0;
}

/* Réserve l'espace de l'image hero en flux (l'image fixed ne contribue pas). */
.bmf-economie-hero::before {
	content: '';
	display: block;
	height: var(--bmf-eco-hero-h);
}

/* Image fixée à l'écran : reste en place pendant tout le scroll, masquée
   progressivement par le band #4C5C66 qui passe au-dessus. */
.bmf-economie-hero__media {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--bmf-eco-hero-h);
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	background: #ebe7e1;
	isolation: isolate;
}

.bmf-economie-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Hero entièrement scrollé : masquer l’image fixed (évite les fuites dans les
   interstices transparents en bas de page — Safari, Firefox, arrondis sub-pixel). */
.bmf-economie-hero__media.is-scrolled-past {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Band qui passe au-dessus de l'image fixed (et la masque au scroll). */
.bmf-economie-hero__band {
	position: relative;
	z-index: 1;
	background: var(--bmf-eco-band);
	width: 100%;
	color: var(--bmf-eco-white);
	padding: 56px 20px 64px;
	box-sizing: border-box;
	margin-top: var(--bmf-eco-hero-band-overlap);
}

/* Filet anti-fuite (subpixels / fixed vs flux) entre image et bandeau. */
.bmf-economie-hero__band::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -4px;
	height: 4px;
	background: var(--bmf-eco-band);
	pointer-events: none;
}

/* Toutes les sections post-hero passent au-dessus de l'image fixed. */
.bmf-economie-jobs,
.bmf-economie-quote,
.bmf-economie-approach,
.bmf-economie-cta,
.bmf-equipe-section,
.bmf-engagements-section {
	position: relative;
	z-index: 1;
}

.bmf-economie-hero__band-inner {
	max-width: var(--bmf-eco-content-max);
	margin: 0 auto;
	width: 100%;
}

.bmf-economie-hero__title {
	font-family: var(--bmf-eco-serif);
	font-size: 60px;
	font-weight: 400;
	line-height: 1.05;
	color: var(--bmf-eco-white);
	margin: 0 0 24px;
}

/* Ancres :
   - Marge au-dessus pour respirer sous le H1.
   - Wrap autorisé : aucune ancre n'est cachée (pas d'overflow:hidden).
   - Le séparateur est un trait vertical de 1px (et non plus le caractère « | »). */
.bmf-economie-hero__anchors {
	margin: 28px 0 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	color: var(--bmf-eco-white);
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: normal;
	overflow: visible;
}

.bmf-economie-hero__anchor {
	color: var(--bmf-eco-white);
	text-decoration: none;
	padding: 4px 8px;
	transition: opacity 180ms ease, text-decoration-color 180ms ease;
}

.bmf-economie-hero__anchor:first-child {
	padding-left: 0;
}

.bmf-economie-hero__anchor:hover,
.bmf-economie-hero__anchor:focus-visible {
	color: var(--bmf-eco-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Séparateur : trait vertical blanc de 1px (le caractère "|" issu du HTML est masqué). */
.bmf-economie-hero__anchor-sep {
	display: inline-block;
	width: 1px;
	height: 12px;
	background: rgba(255, 255, 255, 0.7);
	margin: 0 4px;
	text-indent: 9999px;
	overflow: hidden;
	user-select: none;
	vertical-align: middle;
}

/* Bloc picto + texte d'introduction : picto taille fixe, texte à droite (tous breakpoints). */
.bmf-economie-hero__intro {
	display: grid;
	grid-template-columns: var(--bmf-eco-hero-picto-size) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.bmf-economie-hero__intro-picto {
	flex-shrink: 0;
	width: var(--bmf-eco-hero-picto-size);
	min-width: var(--bmf-eco-hero-picto-size);
}

.bmf-economie-hero__intro-picto img {
	display: block;
	width: var(--bmf-eco-hero-picto-size);
	max-width: var(--bmf-eco-hero-picto-size);
	height: auto;
}

.bmf-economie-hero__intro-text {
	font-family: var(--bmf-eco-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eco-white);
}

.bmf-economie-hero__intro-text p {
	margin: 0 0 0.8em;
}

.bmf-economie-hero__intro-text p:last-child {
	margin-bottom: 0;
}

.bmf-economie-hero__intro-text strong {
	font-weight: 600;
}

/* =========================================================================
   2. NOS MÉTIERS
   ========================================================================= */
.bmf-economie-jobs {
	padding: 96px 20px 64px;
	background: var(--bmf-eco-white);
}

.bmf-economie-jobs__inner {
	max-width: var(--bmf-eco-content-max);
	margin: 0 auto;
}

.bmf-economie-jobs__title {
	font-family: var(--bmf-eco-serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-eco-band);
}

/* Texte intro : pleine largeur du conteneur (pas de max-width interne) */
.bmf-economie-jobs__intro {
	margin: 24px 0 0;
	width: 100%;
	font-family: var(--bmf-eco-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eco-ink);
}

.bmf-economie-jobs__intro p {
	margin: 0 0 0.8em;
}

.bmf-economie-jobs__intro p:last-child {
	margin-bottom: 0;
}

.bmf-economie-jobs__list {
	margin-top: 56px;
	display: flex;
	flex-direction: column;
}

.bmf-economie-card {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 40px;
	align-items: start;
	padding: 36px 0 14px;
	border-bottom: 1px solid var(--bmf-eco-gray-line);
	scroll-margin-top: 120px;
	min-height: 0;
}

.bmf-economie-card:first-child {
	padding-top: 0;
}

/* --- Média gauche (image + légende) ---
   Desktop : hauteur calée jusqu’au bas du « Lire plus » (JS). Mobile : aspect-ratio. */
.bmf-economie-card__media {
	margin: 0;
	align-self: start;
	min-height: 0;
}

.bmf-economie-card__media-img {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: #ebe7e1;
	border-top-right-radius: var(--bmf-eco-radius-corner);
	min-height: 0;
}

.bmf-economie-card__media-img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 768px) {
	.bmf-economie-jobs .bmf-economie-card {
		align-items: start;
	}

	.bmf-economie-jobs .bmf-economie-card__body {
		box-sizing: border-box;
	}

	.bmf-economie-jobs .bmf-economie-card__media {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.bmf-economie-jobs .bmf-economie-card__media-img {
		flex: 1 1 auto;
		min-height: 0;
		aspect-ratio: unset;
	}

	.bmf-economie-jobs .bmf-economie-card__media-img img {
		position: absolute;
		inset: 0;
	}
}

/* Légende image : version grisée moins contrastée que le corps de texte. */
.bmf-economie-card__caption {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	text-align: right;
	color: #767676;
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* --- Corps droit ---
   Maquette : espace entre extrait et « Lire plus », lien en bas à droite,
   peu de marge sous le lien avant le filet de séparation. */
.bmf-economie-card__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	align-self: start;
	min-height: 0;
}

.bmf-economie-card__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bmf-economie-card__body > .bmf-economie-toggle {
	align-self: flex-end;
	margin-top: auto;
	margin-bottom: 0;
	padding-bottom: 0;
}

.bmf-economie-card__title {
	font-family: var(--bmf-eco-serif);
	font-size: 35px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-eco-band);
}

.bmf-economie-card__meta {
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bmf-eco-gray-meta);
	margin: 0;
}

/* Marge légèrement réduite entre meta et extrait (alignée sur l'écart titre↔meta) */
.bmf-economie-card__excerpt {
	font-family: var(--bmf-eco-sans);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bmf-eco-ink);
	margin-top: 4px;
}

.bmf-economie-card__excerpt p {
	margin: 0 0 0.7em;
}

.bmf-economie-card__excerpt p:last-child {
	margin-bottom: 0;
}

.bmf-economie-card__details {
	font-family: var(--bmf-eco-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bmf-eco-ink);
	overflow: hidden;
	transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bmf-economie-card__details[hidden] {
	display: none;
}

.bmf-economie-card__details p {
	margin: 0.8em 0 0;
}

.bmf-economie-card__details p:first-child {
	margin-top: 0.8em;
}

/* --- Toggle « Lire plus / Lire moins » ---
   Aligné à DROITE de la cellule de droite (pas à gauche).
   Flèche par défaut = fleche-grise-bas.png  (vers le bas).
   Quand l'encart est ouvert = fleche-grise-droite.png (vers la droite). */
.bmf-economie-toggle {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-eco-ink);
	transition: color 180ms ease;
}

.bmf-economie-toggle:focus-visible {
	outline: 2px solid var(--bmf-eco-band);
	outline-offset: 4px;
}

.bmf-economie-toggle__icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url("../../images/fleche-grise-bas.png") center / contain no-repeat;
	transition: transform 220ms ease, background-image 0s 0s, width 0s 0s, height 0s 0s;
}

/* Encart ouvert : flèche vers le HAUT (fleche-grise-haut.png), 15×9 px,
   indique au visiteur qu'il peut réduire le contenu. */
.bmf-economie-toggle[aria-expanded="true"] .bmf-economie-toggle__icon {
	width: 15px;
	height: 9px;
	background-image: url("../../images/fleche-grise-haut.png");
}

.bmf-economie-toggle:hover .bmf-economie-toggle__icon,
.bmf-economie-toggle:focus-visible .bmf-economie-toggle__icon {
	transform: translateY(2px);
}

.bmf-economie-toggle[aria-expanded="true"]:hover .bmf-economie-toggle__icon,
.bmf-economie-toggle[aria-expanded="true"]:focus-visible .bmf-economie-toggle__icon {
	transform: translateY(-2px);
}

/* =========================================================================
   3. CITATION
   ----
   Bloc gris contenu dans le max-width.
   La section porte un padding vertical et le bloc gris a un padding interne
   généreux. Un sous-conteneur centre la grille picto + texte avec une largeur
   inférieure au bloc gris (donc le contenu n'est pas collé aux bords).
   ========================================================================= */
.bmf-economie-quote {
	padding: 0 20px;
	background: var(--bmf-eco-white);
}

.bmf-economie-quote__inner {
	max-width: var(--bmf-eco-content-max);
	margin: 0 auto;
	background: var(--bmf-eco-gray-light);
	padding: 48px 24px;
	box-sizing: border-box;
}

.bmf-economie-quote__content {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 87px 1fr;
	gap: 40px;
	align-items: center;
}

.bmf-economie-quote__picto {
	width: 87px;
	height: 87px;
}

.bmf-economie-quote__picto img {
	display: block;
	width: 87px;
	height: 87px;
	object-fit: contain;
}

.bmf-economie-quote__text {
	font-family: var(--bmf-eco-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--bmf-eco-ink);
}

.bmf-economie-quote__text p {
	margin: 0 0 0.6em;
}

.bmf-economie-quote__text p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   4. NOTRE APPROCHE
   ========================================================================= */
.bmf-economie-approach {
	padding: 80px 20px 100px;
	background: var(--bmf-eco-white);
}

.bmf-economie-approach__inner {
	max-width: var(--bmf-eco-content-max);
	margin: 0 auto;
}

.bmf-economie-approach__title {
	font-family: var(--bmf-eco-serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-eco-band);
}

/* --- Top : texte (gauche) + image avec légende (droite) -------------------- */
.bmf-economie-approach__top {
	margin-top: 36px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.bmf-economie-approach__text {
	font-family: var(--bmf-eco-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eco-ink);
}

.bmf-economie-approach__text p {
	margin: 0 0 0.9em;
}

.bmf-economie-approach__text p:last-child {
	margin-bottom: 0;
}

.bmf-economie-approach__visual {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Même arrondi 20px haut-droit que les images d'encarts */
.bmf-economie-approach__visual-img {
	overflow: hidden;
	width: 100%;
	background: #ebe7e1;
	border-top-right-radius: var(--bmf-eco-radius-corner);
}

.bmf-economie-approach__visual-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bmf-economie-approach__visual-caption {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	text-align: right;
	color: #767676;
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* --- Accordéon items 3 colonnes -------------------------------------------
   Chaque item est une rangée flex :
     - Colonne 1 (tête) : titre (kicker uppercase) + flèche → bouton cliquable
       de largeur fixe ~320px qui pilote l'ouverture (aria-expanded).
     - Colonne 2 (panneau) : image + texte en 2 sous-colonnes, caché par
       défaut, dévoilé au clic avec animation max-height.
   L'ordre image / texte dans le panneau dépend de data-img-position
   (left = image gauche, texte droite ; right = texte gauche, image droite).
   Filets 1px #ABB2AF entre items + après le dernier, pas avant le 1er. */
.bmf-economie-approach__list {
	list-style: none;
	margin: 56px 0 0;
	padding: 0;
}

.bmf-economie-approach__item {
	border-bottom: 1px solid var(--bmf-eco-gray-line);
}

.bmf-economie-approach__row {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/* --- Tête cliquable (titre + flèche) --- */
.bmf-economie-approach__head {
	flex: 0 0 320px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--bmf-eco-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-eco-ink);
	transition: color 180ms ease;
}

.bmf-economie-approach__head-label {
	flex: 1 1 auto;
	min-width: 0;
}

.bmf-economie-approach__head:focus-visible {
	outline: 2px solid var(--bmf-eco-band);
	outline-offset: 4px;
}

/* Flèche : droite par défaut, bas quand l'item est ouvert.
   Animation légère au survol (translateX au repos, translateY quand ouvert). */
.bmf-economie-approach__head-icon {
	flex-shrink: 0;
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url("../../images/fleche-grise-droite.png") center / contain no-repeat;
	transition: transform 220ms ease, background-image 0s 0s;
}

.bmf-economie-approach__head[aria-expanded="true"] .bmf-economie-approach__head-icon {
	background-image: url("../../images/fleche-grise-bas.png");
}

.bmf-economie-approach__head:hover .bmf-economie-approach__head-icon,
.bmf-economie-approach__head:focus-visible .bmf-economie-approach__head-icon {
	transform: translateX(3px);
}

.bmf-economie-approach__head[aria-expanded="true"]:hover .bmf-economie-approach__head-icon,
.bmf-economie-approach__head[aria-expanded="true"]:focus-visible .bmf-economie-approach__head-icon {
	transform: translateY(3px);
}

/* --- Panneau (image + texte en 2 colonnes) --- */
.bmf-economie-approach__panel {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bmf-economie-approach__panel[hidden] {
	display: none;
}

.bmf-economie-approach__panel-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	/* start : le texte garde sa hauteur naturelle (sinon stretch = hauteur
	   image et le JS mesure une fausse valeur). L'image est recadrée en JS. */
	align-items: start;
	padding: 22px 0;
}

.bmf-economie-approach__row-image {
	margin: 0;
	overflow: hidden;
	background: #ebe7e1;
	display: block;
	min-height: 0;
	max-height: none;
}

.bmf-economie-approach__row-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	min-height: 0;
	object-fit: cover;
}

.bmf-economie-approach__row-text {
	font-family: var(--bmf-eco-sans);
	font-size: 16px;
	font-weight: 300;        /* Inter light */
	line-height: 1.5;        /* 150 % */
	color: var(--bmf-eco-ink); /* #1D1D1B */
	letter-spacing: 0;
	text-transform: none;
}

.bmf-economie-approach__row-text p {
	margin: 0 0 0.9em;
}

.bmf-economie-approach__row-text p:last-child {
	margin-bottom: 0;
}

.bmf-economie-approach__row-text strong {
	font-weight: 600;
}

/* Variante : texte à gauche, image à droite (image_position = right) */
.bmf-economie-approach__item[data-img-position="right"] .bmf-economie-approach__row-image {
	order: 2;
}

.bmf-economie-approach__item[data-img-position="right"] .bmf-economie-approach__row-text {
	order: 1;
}

/* =========================================================================
   5. CTA BAS DE PAGE
   ----
   Le fond gris de chaque bouton va jusqu'au bord de l'écran (pas de
   max-width sur le conteneur). Gap central de 64px entre les deux blocs.
   - Bloc gauche  → coin haut-droit  arrondi (intérieur)
   - Bloc droit   → coin haut-gauche arrondi (intérieur)
   Flèches PNG 17×29 placées AVANT le label, animées au survol.
   Mise en page identique sur tous les breakpoints (pas d’empilement mobile).

   L’image hero est en position:fixed (z-index:0). Un fond transparent sur
   cette section laissait la voir dans le gap de grille et sous les boutons
   (comportement variable selon le navigateur).
   ========================================================================= */
.bmf-economie-cta {
	width: 100%;
	background: var(--bmf-eco-white);
	padding: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	isolation: isolate;
}

/* Filet anti-fuite entre la dernière section blanche et le CTA (sub-pixel). */
.bmf-economie > .bmf-economie-cta,
.bmf-economie > * + .bmf-economie-cta {
	margin-top: -2px;
	padding-top: 2px;
}

.bmf-economie-cta__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;            /* marge centrale entre les deux blocs (augmentée) */
	align-items: stretch;
	box-sizing: border-box;
	/* Le fond du conteneur remplit le gap : l’image fixed ne transparaît plus. */
	background: var(--bmf-eco-white);
}

.bmf-economie-cta__btn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 16px;
	padding: 24px 32px;
	background: var(--bmf-eco-gray-light);
	color: var(--bmf-eco-ink);
	text-decoration: none;
	border: 0;
	transition: color 180ms ease, background-color 180ms ease;
	box-sizing: border-box;
	min-width: 0;
}

/* Bouton gauche : contenu (flèche + label) collé vers l'intérieur (côté droit du bloc).
   Marge interne 50px du bord gris droit pour ne pas être collé à la zone de gap. */
.bmf-economie-cta__btn--coral {
	border-top-right-radius: var(--bmf-eco-radius-corner);
	justify-content: flex-end;
	padding-right: 50px;
}

/* Bouton droit : contenu collé vers l'intérieur (côté gauche du bloc).
   Même marge interne 50px du bord gris gauche. */
.bmf-economie-cta__btn--gold {
	border-top-left-radius: var(--bmf-eco-radius-corner);
	justify-content: flex-start;
	padding-left: 50px;
}

.bmf-economie-cta__btn:hover,
.bmf-economie-cta__btn:focus,
.bmf-economie-cta__btn:active,
.bmf-economie-cta__btn:visited {
	color: var(--bmf-eco-ink) !important;
	text-decoration: none;
}

.bmf-economie-cta__label {
	font-family: var(--bmf-eco-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--bmf-eco-ink);
	letter-spacing: 0;
	text-transform: none;
	min-width: 0;
}

.bmf-economie-cta__label em {
	font-style: italic;
}

/* Flèche AVANT le label (::before), PNG 17×29 */
.bmf-economie-cta__btn::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 29px;
	background: center / contain no-repeat;
	transition: transform 220ms ease;
	flex-shrink: 0;
}

.bmf-economie-cta__btn--coral::before {
	background-image: url("../../images/fleche-rouge-droite.png");
}

.bmf-economie-cta__btn--gold::before {
	background-image: url("../../images/fleche-or-droite.png");
}

.bmf-economie-cta__btn:hover::before,
.bmf-economie-cta__btn:focus::before {
	transform: translateX(4px);
}

/* =========================================================================
   RESPONSIVE — points de rupture cohérents avec le reste du thème
   ========================================================================= */
@media (max-width: 1023px) {
	.bmf-economie {
		--bmf-eco-hero-h: clamp(480px, 62svh, 620px);
		--bmf-eco-hero-band-overlap: clamp(-40px, -6svh, -16px);
	}

	/*
	 * Offset hero identique sur toutes les pages métier (Économie, Management…).
	 * Évite les écarts de position sticky dus au mesurage JS variable (logo, contenu).
	 */
	body.bmf-site.bmf-has-job-hero {
		--bmf-eco-hero-offset: var(--bmf-eco-hero-offset-compact);
	}

	/* Menu compact (barre burger) : même hauteur que les autres pages + fond semi-transparent au chargement. */
	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu {
		padding: var(--bmf-eco-menu-pad-block) var(--bmf-space-md);
		margin-top: 0;
		box-sizing: border-box;
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent:not(.is-menu-open) {
		min-height: var(--bmf-eco-hero-offset-compact);
		/*
		 * Centrage vertical de la barre sans flex sur __inner : un flex horizontal
		 * sur __inner rétrécissait __bar au contenu (burger + logo à gauche).
		 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent:not(.is-stuck):not(.is-menu-open) {
		background: rgba(255, 255, 255, 0.65);
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent.is-stuck:not(.is-menu-open) {
		background: #ffffff;
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent .bmf-main-menu__inner {
		display: block;
		width: 100%;
		min-height: 0;
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent .bmf-main-menu__bar {
		width: 100%;
		min-height: var(--bmf-eco-menu-bar-h);
		height: var(--bmf-eco-menu-bar-h);
		max-height: var(--bmf-eco-menu-bar-h);
		box-sizing: border-box;
	}

	body.bmf-site.bmf-has-job-hero #bmf-main-menu-root.bmf-main-menu--transparent.is-menu-open {
		min-height: 0;
	}

	/* Mobile admin WP : pas de top supplémentaire sur l’image fixed (html margin-top déjà appliqué). */
	body.bmf-site.bmf-has-job-hero.admin-bar .bmf-economie-hero__media {
		top: 0;
	}

	.bmf-economie-hero__title {
		font-size: 48px;
		margin-bottom: 24px;
	}

	.bmf-economie-hero__anchors {
		margin-bottom: 36px;
	}

	.bmf-economie-hero__intro {
		gap: 32px;
	}

	.bmf-economie-jobs__title,
	.bmf-economie-approach__title {
		font-size: 42px;
	}

	.bmf-economie-card {
		grid-template-columns: minmax(220px, 320px) 1fr;
		gap: 32px;
	}

	.bmf-economie-card__title {
		font-size: 30px;
	}

	.bmf-economie-approach__top {
		gap: 36px;
	}

	/* Approche : sur tablette, on garde le head 280px fixe + panel à droite,
	   mais à l'intérieur du panel l'image et le texte passent sur 1 colonne. */
	.bmf-economie-approach__row {
		gap: 32px;
	}

	.bmf-economie-approach__head {
		flex: 0 0 280px;
	}

	.bmf-economie-approach__panel-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 767px) {
	/* Hero plus haut (crop latéral via object-fit: cover) — bande texte un peu plus basse. */
	.bmf-economie {
		--bmf-eco-hero-h: clamp(360px, 58svh, 500px);
		--bmf-eco-hero-band-overlap: clamp(-56px, -9svh, -28px);
	}

	.bmf-economie-hero__band {
		padding: 40px 20px 48px;
	}

	.bmf-economie-hero__title {
		font-size: 40px;
		margin-bottom: 20px;
	}

	.bmf-economie-hero__anchors {
		flex-wrap: wrap;
		white-space: normal;
		overflow-x: visible;
		margin-bottom: 28px;
		letter-spacing: 0.2em;
	}

	.bmf-economie-hero__anchor {
		padding: 4px 8px;
	}

	.bmf-economie-hero__intro {
		grid-template-columns: var(--bmf-eco-hero-picto-size) minmax(0, 1fr);
		gap: 24px;
	}

	.bmf-economie-hero__intro-text {
		font-size: 16px;
		min-width: 0;
	}

	.bmf-economie-jobs {
		padding: 64px 20px 48px;
	}

	.bmf-economie-jobs__title,
	.bmf-economie-approach__title {
		font-size: 36px;
	}

	.bmf-economie-jobs__intro {
		font-size: 16px;
	}

	.bmf-economie-card {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 28px 0;
	}

	/* Mobile : image plus basse (16/10 + plafond) — Économie + Management (même CSS). */
	.bmf-economie-jobs .bmf-economie-card__media {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	.bmf-economie-jobs .bmf-economie-card__media-img {
		aspect-ratio: 16 / 10;
		width: 100%;
		max-height: var(--bmf-eco-card-media-max-h-mobile);
		height: auto;
		flex: 0 0 auto;
		min-height: 0;
	}

	.bmf-economie-jobs .bmf-economie-card__media-img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 100%;
		object-fit: cover;
	}

	.bmf-economie-card__title {
		font-size: 28px;
	}

	.bmf-economie-card__excerpt,
	.bmf-economie-card__details {
		font-size: 15px;
	}

	.bmf-economie-quote {
		padding: 0 20px;
	}

	.bmf-economie-quote__inner {
		padding: 32px 20px;
	}

	.bmf-economie-quote__content {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.bmf-economie-quote__picto img {
		max-width: 72px;
	}

	.bmf-economie-approach {
		padding: 56px 20px 72px;
	}

	.bmf-economie-approach__top {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bmf-economie-approach__text {
		font-size: 16px;
	}

	.bmf-economie-approach__list {
		margin-top: 40px;
	}

	/* Approche : sur mobile, le row passe en colonne (head au-dessus, panel
	   en dessous). Le panel-content reste en 1 colonne (déjà fixé en 1024px). */
	.bmf-economie-approach__row {
		flex-direction: column;
		gap: 0;
	}

	.bmf-economie-approach__head {
		flex: 1 1 auto;
		width: 100%;
		max-width: 320px;
	}

	.bmf-economie-approach__row-text {
		font-size: 15px;
	}

	/* CTA bas : pleine largeur viewport (blocs gris jusqu’aux bords). */
	.bmf-economie-cta {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	.bmf-economie-cta__inner {
		gap: 16px;
		padding-inline: 0;
	}

	.bmf-economie-cta__btn {
		padding-block: 16px;
		padding-inline: 0;
		gap: 8px;
	}

	.bmf-economie-cta__btn--coral {
		padding-right: 12px;
		padding-left: 14px;
	}

	.bmf-economie-cta__btn--gold {
		padding-left: 12px;
		padding-right: 14px;
	}

	.bmf-economie-cta__label {
		font-size: 17px;
		line-height: 1.2;
	}

	.bmf-economie-cta__btn::before {
		width: 14px;
		height: 22px;
	}
}

/* Mobile paysage / écran peu haut : remonter encore le bandeau pour le H1. */
@media (max-width: 767px) and (max-height: 740px) {
	.bmf-economie {
		--bmf-eco-hero-h: clamp(280px, 48svh, 380px);
		--bmf-eco-hero-band-overlap: clamp(-72px, -12svh, -36px);
	}
}

@media (min-width: 768px) and (max-width: 1023px) and (max-height: 800px) {
	.bmf-economie {
		--bmf-eco-hero-h: clamp(360px, 52svh, 500px);
		--bmf-eco-hero-band-overlap: clamp(-88px, -14svh, -40px);
	}
}

@media (max-width: 480px) {
	.bmf-economie {
		--bmf-eco-hero-h: clamp(320px, 54svh, 440px);
		--bmf-eco-hero-band-overlap: clamp(-64px, -11svh, -32px);
	}

	.bmf-economie-hero__band {
		padding: 32px 16px 40px;
	}

	.bmf-economie-hero__title {
		font-size: 32px;
	}

	.bmf-economie-hero__anchors {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.bmf-economie-hero__anchor {
		padding: 2px 0;
	}

	.bmf-economie-hero__anchor-sep {
		display: none;
	}

	.bmf-economie-jobs,
	.bmf-economie-approach {
		padding-left: 16px;
		padding-right: 16px;
	}

	.bmf-economie-jobs {
		padding-top: 48px;
		padding-bottom: 32px;
		--bmf-eco-card-media-max-h-mobile: 220px;
	}

	.bmf-economie-jobs__title,
	.bmf-economie-approach__title {
		font-size: 30px;
	}

	.bmf-economie-card__title {
		font-size: 24px;
	}

	.bmf-economie-quote {
		padding: 0 16px;
	}

	.bmf-economie-quote__inner {
		padding: 24px 16px;
	}

	.bmf-economie-cta__inner {
		gap: 12px;
	}

	.bmf-economie-cta__btn {
		padding-block: 14px;
		gap: 6px;
	}

	.bmf-economie-cta__btn--coral {
		padding-right: 10px;
		padding-left: 12px;
	}

	.bmf-economie-cta__btn--gold {
		padding-left: 10px;
		padding-right: 12px;
	}

	.bmf-economie-cta__label {
		font-size: 15px;
	}

	.bmf-economie-cta__btn::before {
		width: 12px;
		height: 20px;
	}
}

/* =========================================================================
   Variante : page « Management de projet »
   --------------------------------------------------------------------------
   Le template page-management-projet.php reprend EXACTEMENT la même
   structure que la page « Économie de la construction » (mêmes classes
   bmf-economie-*). Toutes les règles responsive ci-dessus (hero, encarts
   métiers, approche, CTA…) s’appliquent donc aussi au Management. Les seules
   différences visuelles sont gérées ici :
     1. Bande de couleur du hero (+ titres H2/H3 cartes) en #51675A au lieu
        de #4C5C66 → on redéfinit la variable --bmf-eco-band sur le <body>.
     2. Picto de la citation à DROITE au lieu de gauche → on inverse les
        colonnes du sous-conteneur .bmf-economie-quote__content et on
        repositionne picto/texte via grid-column.
   ========================================================================= */
body.page-template-page-management-projet {
	--bmf-eco-band: #51675a;
}

/* Filet de sécurité : on force la couleur explicitement sur les H2 et le H3
   de carte, au cas où la cascade de la variable --bmf-eco-band serait
   neutralisée par une feuille tierce (cache navigateur compris). */
body.page-template-page-management-projet .bmf-economie-jobs__title,
body.page-template-page-management-projet .bmf-economie-approach__title,
body.page-template-page-management-projet .bmf-economie-card__title {
	color: #51675a;
}

body.page-template-page-management-projet .bmf-economie-quote__content {
	grid-template-columns: 1fr 87px;
}

body.page-template-page-management-projet .bmf-economie-quote__text {
	grid-column: 1;
	grid-row: 1;
}

body.page-template-page-management-projet .bmf-economie-quote__picto {
	grid-column: 2;
	grid-row: 1;
}

/* Sur mobile, le sous-conteneur de la citation est déjà passé en 1 colonne
   (cf. media query 768px). On force l'ordre picto-en-dessous-du-texte sur
   cette variante pour rester cohérent avec « picto à droite ». */
@media (max-width: 767px) {
	body.page-template-page-management-projet .bmf-economie-quote__content {
		grid-template-columns: 1fr;
	}

	body.page-template-page-management-projet .bmf-economie-quote__text {
		grid-column: 1;
		grid-row: 1;
	}

	body.page-template-page-management-projet .bmf-economie-quote__picto {
		grid-column: 1;
		grid-row: 2;
		justify-self: end;
	}
}