/* ==========================================================================
   === Page « Nos engagements » ===
   --------------------------------------------------------------------------
   Cette page reprend, sans duplication, le HERO et le CTA bas de page des
   autres templates « métier » via les classes `bmf-economie-hero*` et
   `bmf-economie-cta*` (fichier templates/economie-construction.css). Le seul
   override visuel sur le hero est la couleur de la bande, gérée ici via
   redéfinition de la variable `--bmf-eco-band` au scope du body de cette page.

   Les sections internes (Vision, Transitions, Clients, RSE, Collaborateur,
   Logos partenaires) sont propres à cette page et utilisent le namespace
   `bmf-engagements-*` avec ses propres variables `--bmf-eng-*`.
   ========================================================================== */

:root {
	--bmf-eng-ink: #1d1d1b;
	--bmf-eng-white: #ffffff;
	--bmf-eng-band: #5c7d8f;            /* bleu sombre principal (hero + bande RSE) */
	--bmf-eng-encart-bg: #eff2f4;       /* fond clair des encarts à liseret jaune */
	--bmf-eng-rse-card-bg: #f2ede8;     /* cartes RSE — beige hero Contact (#F2EDE8) */
	--bmf-eng-yellow: #e6c436;          /* jaune accent / lisérets */
	--bmf-eng-content-max: var(--bmf-home-content-max, 1200px);
	--bmf-eng-serif: "Self Modern", "Cormorant Garamond", Georgia, serif;
	--bmf-eng-sans: "Inter", system-ui, sans-serif;
	--bmf-eng-radius-corner: 20px;      /* arrondi des "coins intérieurs" */
	--bmf-eng-bar-width: 6px;           /* épaisseur du liseret jaune */
	--bmf-eng-text-col: 1.08fr;         /* colonne texte (léger décalage vs image) */
	--bmf-eng-media-col: 0.92fr;        /* colonne image */
	--bmf-eng-text-inner-max: 94%;      /* contenu texte un peu moins large que la colonne */
	--bmf-eng-collab-head-max: min(480px, 78%); /* bandeau + H2 collaborateur */
	--bmf-eng-h3-gap: 20px;             /* espace sous les h3 de la page */
	--bmf-eng-partners-pad-top: 40px;    /* espace au-dessus des logos */
	--bmf-eng-partners-pad-top-in-rse: 64px; /* logos sous la bande RSE */
	--bmf-eng-partners-pad-bottom: 96px; /* espace sous les logos (avant CTA) */
	--bmf-eng-partners-logo-max-w: 300px;
	--bmf-eng-partners-logo-max-h: 165px;
	--bmf-eng-rse-band-margin-top: 32px;  /* texte → bande bleue */
	--bmf-eng-rse-band-pad: 20px;         /* padding du conteneur bleu (tous côtés) */
	--bmf-eng-rse-cards-gap: 40px;        /* espace entre les cartes blanches */
	--bmf-eng-rse-section-pad-bottom: 48px; /* #engagements-responsabilite → #engagements-culture */
	/* Logo Hub (Transitions bloc 2) : largeur max ≈ colonne image bureau */
	--bmf-eng-hub-logo-max-w: min(520px, 46vw);
	/* Vision : cadre image (portrait) — plafond pour rester lisible à côté du texte */
	--bmf-eng-vision-figure-max-h: min(520px, 62vh);
	/* Culture : cadre image un peu plus étroit que la colonne (bureau) */
	--bmf-eng-collab-figure-max-w: 80%;
}

/* ----------------------------------------------------------------------
 * Override : bande du hero en #5C7D8F sur cette page uniquement.
 * Les autres variantes de page « métier » sont en #4C5C66 ou #51675A.
 * ---------------------------------------------------------------------- */
body.page-template-page-nos-engagements {
	--bmf-eco-band: var(--bmf-eng-band);
}

/* Filet de sécurité (couleur explicite si la variable est neutralisée par
   une feuille tierce / cache navigateur). */
body.page-template-page-nos-engagements .bmf-economie-hero__band,
body.page-template-page-nos-engagements .bmf-economie-hero {
	background: var(--bmf-eng-band);
}

/* Ancres hero : 14 px sur cette page (12 px par défaut dans economie-construction.css). */
body.page-template-page-nos-engagements .bmf-economie-hero__anchors {
	font-size: 14px;
}

/* Sous-titre du hero (gras), affiché au-dessus du paragraphe d'introduction.
   On reste dans la cellule droite de la grille .bmf-economie-hero__intro. */
.bmf-engagements-hero__subtitle {
	margin: 0 0 0.6em;
	font-family: var(--bmf-eng-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bmf-eng-white);
}

/* ==========================================================================
   Wrapper commun aux sections internes
   ========================================================================== */
.bmf-engagements {
	color: var(--bmf-eng-ink);
	font-family: var(--bmf-eng-sans);
	background: var(--bmf-eng-white);
}

.bmf-engagements h2,
.bmf-engagements h3 {
	margin: 0;
}

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

.bmf-engagements-section {
	padding: 80px 20px;
	background: var(--bmf-eng-white);
	scroll-margin-top: 120px;
}

/* Filet d’1px : l’image hero fixed (economie-construction.css) peut apparaître
   entre deux sections blanches contiguës — chevauchement léger + fond opaque. */
.bmf-engagements .bmf-engagements-section + .bmf-engagements-section {
	margin-top: -2px;
}

.bmf-engagements .bmf-engagements-section h3 {
	margin-bottom: var(--bmf-eng-h3-gap);
}

.bmf-engagements-section__inner {
	max-width: var(--bmf-eng-content-max);
	margin: 0 auto;
	width: 100%;
}

/* Libellé d’ancre (VISION, TRANSITIONS…) — typo inversée avec le H2 de section */
.bmf-engagements-section-label {
	display: block;
	margin: 0 0 24px;
	font-family: var(--bmf-eng-serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bmf-eng-band);
}

/* Petit titre uppercase (H2 de section, titres Transitions) */
.bmf-engagements-h2:not(.bmf-engagements-transition__h3),
.bmf-engagements .bmf-engagements-transitions h3.bmf-engagements-transition__h3 {
	margin: 0 0 16px;
	font-family: var(--bmf-eng-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-eng-ink);
}

.bmf-engagements-section-label em,
.bmf-engagements-h2:not(.bmf-engagements-transition__h3) em,
.bmf-engagements .bmf-engagements-transitions h3.bmf-engagements-transition__h3 em {
	font-style: italic;
}

/* Texte de corps « éditorial » par défaut : Inter Light 18 px, 150 % */
.bmf-engagements-text {
	font-family: var(--bmf-eng-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eng-ink);
}

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

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

.bmf-engagements-text ul,
.bmf-engagements-text ol {
	margin: 0 0 0.9em;
	padding-left: 1.4em;
}

.bmf-engagements-text li {
	margin: 0 0 0.3em;
}

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

/* Puces listes : jaune #E6C436 sur cette page. */
.bmf-engagements .bmf-engagements-text li::marker,
.bmf-engagements .bmf-engagements-transition__text li::marker,
.bmf-engagements .bmf-engagements-clients__highlight-text li::marker {
	color: var(--bmf-eng-yellow);
}

/* Grille 50/50 commune (Vision, Clients, Collab) */
.bmf-engagements-cols {
	display: grid;
	gap: 48px;
	align-items: start;
}

.bmf-engagements-cols--50-50 {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.bmf-engagements-cols__col {
	min-width: 0;
}

/* ==========================================================================
   Encarts à liseret jaune (Vision colonne droite, Clients sous-paragraphe)
   --------------------------------------------------------------------------
   Fond clair #EFF2F4, texte hérité des mêmes specs typo que .bmf-engagements-text
   (Inter Light 18 px / 150 % / #1D1D1B) — seul l'alignement passe en centré.
   Le conteneur est un flex column centré verticalement pour que, lorsque la
   colonne s'étire à la hauteur de sa voisine (cf. Vision), le contenu reste
   visuellement centré dans le bloc.

   Variantes :
     - .bmf-engagements-encart--bar-left  : liseret jaune sur le côté gauche
     - .bmf-engagements-encart--bar-top   : liseret jaune en haut
     - .bmf-engagements-encart--radius-tr : coin haut-droit arrondi
     - .bmf-engagements-encart--radius-bl : coin bas-gauche arrondi
   ========================================================================== */
.bmf-engagements-encart {
	position: relative;
	background: var(--bmf-eng-encart-bg);
	color: var(--bmf-eng-ink);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.bmf-engagements-encart__inner {
	padding: 56px 72px;
	font-family: var(--bmf-eng-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bmf-eng-ink);
	text-align: justify;
	/* Adoucit les espaces de justification et évite les coupures hostiles aux mots accentués. */
	text-justify: inter-word;
	hyphens: none;
	box-sizing: border-box;
	width: 100%;
}

.bmf-engagements-encart__inner p {
	margin: 0 0 0.8em;
}

.bmf-engagements-encart__inner p:last-child {
	margin-bottom: 0;
}

.bmf-engagements-encart__inner strong {
	font-weight: 600;
}

/* Liseret jaune — gauche (Vision) */
.bmf-engagements-encart--bar-left::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--bmf-eng-bar-width);
	background: var(--bmf-eng-yellow);
}

.bmf-engagements-encart--bar-left .bmf-engagements-encart__inner {
	padding-left: calc(72px + var(--bmf-eng-bar-width));
}

/* Liseret jaune — haut (Clients) */
.bmf-engagements-encart--bar-top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--bmf-eng-bar-width);
	background: var(--bmf-eng-yellow);
}

.bmf-engagements-encart--bar-top .bmf-engagements-encart__inner {
	padding-top: calc(56px + var(--bmf-eng-bar-width));
}

/* Variantes border-radius : un seul coin arrondi à 20 px. */
.bmf-engagements-encart--radius-tr {
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-encart--radius-bl {
	border-bottom-left-radius: var(--bmf-eng-radius-corner);
}

/* ==========================================================================
   Légendes images (sous figures)
   ========================================================================== */
.bmf-engagements-caption {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	text-align: right;
	color: #767676;
	font-family: var(--bmf-eng-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* ==========================================================================
   Figures (Clients, Collab) — image + légende
   Border-radius haut-droit cohérent avec le reste du site.
   ========================================================================== */
.bmf-engagements-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bmf-engagements-figure__img {
	overflow: hidden;
	width: 100%;
	background: var(--bmf-eng-white);
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-figure__img img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==========================================================================
   2. VISION — même répartition texte/image que Transitions (alignement vertical
   de l’encart droit avec les images de la section suivante).
   ========================================================================== */
.bmf-engagements-vision .bmf-engagements-cols--50-50 {
	grid-template-columns: minmax(0, var(--bmf-eng-text-col)) minmax(0, var(--bmf-eng-media-col));
	align-items: stretch;
}

.bmf-engagements-vision .bmf-engagements-cols__col {
	display: flex;
	flex-direction: column;
}

.bmf-engagements-vision .bmf-engagements-section-label,
.bmf-engagements-clients .bmf-engagements-section-label,
.bmf-engagements-collab .bmf-engagements-section-label {
	max-width: var(--bmf-eng-text-inner-max);
}

.bmf-engagements-vision .bmf-engagements-section-label,
.bmf-engagements-vision .bmf-engagements-cols__col .bmf-engagements-text {
	max-width: var(--bmf-eng-text-inner-max);
}

.bmf-engagements-vision .bmf-engagements-cols__col .bmf-engagements-text {
	margin-top: 0;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

.bmf-engagements-vision .bmf-engagements-section-label {
	margin-bottom: 24px;
}

.bmf-engagements-vision .bmf-engagements-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-self: start;
	width: 100%;
}

.bmf-engagements-vision .bmf-engagements-figure__img {
	overflow: hidden;
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	max-height: var(--bmf-eng-vision-figure-max-h);
	background: var(--bmf-eng-white);
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-vision .bmf-engagements-figure__img img {
	object-fit: contain;
	object-position: top center;
}

/* ==========================================================================
   3. TRANSITIONS — grille asymétrique, image = hauteur du bloc texte (CSS)
   ========================================================================== */
.bmf-engagements-transitions {
	padding-top: 40px;
	padding-bottom: 80px;
}

.bmf-engagements-transitions__list {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 24px;
}

.bmf-engagements-transitions .bmf-engagements-section-label {
	margin-bottom: 24px;
}

.bmf-engagements-transition {
	display: grid;
	grid-template-columns: minmax(0, var(--bmf-eng-text-col)) minmax(0, var(--bmf-eng-media-col));
	gap: 48px;
	align-items: stretch;
}

.bmf-engagements-transition[data-layout="image_gauche"] {
	grid-template-columns: minmax(0, var(--bmf-eng-media-col)) minmax(0, var(--bmf-eng-text-col));
}

/* Layout par défaut : texte gauche, image droite. Layout image_gauche : invert. */
.bmf-engagements-transition[data-layout="image_gauche"] .bmf-engagements-transition__body {
	order: 2;
}

.bmf-engagements-transition[data-layout="image_gauche"] .bmf-engagements-transition__media {
	order: 1;
}

.bmf-engagements-transition[data-layout="texte_seul"] {
	grid-template-columns: minmax(0, 1fr);
}

.bmf-engagements-transition[data-layout="texte_seul"] .bmf-engagements-transition__body {
	max-width: 100%;
}

/* La hauteur de ligne = contenu texte ; la colonne image s’étire sur cette hauteur. */
.bmf-engagements-transition__body {
	display: flex;
	flex-direction: column;
	align-self: start;
	max-width: var(--bmf-eng-text-inner-max);
}

.bmf-engagements-transition__text {
	margin: 0;
}

/* Image = hauteur du texte ; légende en flux sous l’image (marge 10px comme partout). */
.bmf-engagements-transition__media {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-self: start;
}

.bmf-engagements-transition__media-img {
	overflow: hidden;
	width: 100%;
	flex: 0 0 auto;
	background: var(--bmf-eng-white);
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-transition__media-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Bloc 2 (logo Hub) : taille naturelle, pas d’étirement pleine largeur (bureau + responsive). */
.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media {
	align-self: start;
}

.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media-img {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	max-width: var(--bmf-eng-hub-logo-max-w);
	aspect-ratio: auto;
	flex: 0 0 auto;
}

.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media-img img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

/* La légende image utilise déjà .bmf-engagements-caption (12px right). */

/* ==========================================================================
   4. CLIENTS — texte plus large, image à hauteur de la colonne gauche
   ========================================================================== */
.bmf-engagements-clients .bmf-engagements-cols--50-50,
.bmf-engagements-collab .bmf-engagements-cols--50-50 {
	grid-template-columns: minmax(0, var(--bmf-eng-text-col)) minmax(0, var(--bmf-eng-media-col));
	align-items: start;
}

.bmf-engagements-clients .bmf-engagements-cols__col,
.bmf-engagements-collab .bmf-engagements-cols__col {
	display: flex;
	flex-direction: column;
	min-height: 0;
	align-self: start;
}

.bmf-engagements-clients .bmf-engagements-section-label,
.bmf-engagements-clients .bmf-engagements-h2:not(.bmf-engagements-transition__h3),
.bmf-engagements-clients .bmf-engagements-text,
.bmf-engagements-clients .bmf-engagements-clients__highlight {
	max-width: var(--bmf-eng-text-inner-max);
}

.bmf-engagements-clients .bmf-engagements-text + .bmf-engagements-clients__highlight,
.bmf-engagements-clients .bmf-engagements-cols__col > .bmf-engagements-clients__highlight {
	margin-top: 32px;
}

/* Clients : même duo label + H2 que RSE (grand libellé, petit H2, marges inchangées) */
.bmf-engagements-clients .bmf-engagements-section-label {
	margin-bottom: 24px;
}

.bmf-engagements-clients .bmf-engagements-h2:not(.bmf-engagements-transition__h3) {
	margin-bottom: 16px;
}

.bmf-engagements-clients .bmf-engagements-cols__col .bmf-engagements-text {
	margin-top: 0;
}

/* Encart clients : picto équerre à gauche, texte Self Modern à droite (hauteur picto = texte). */
.bmf-engagements-clients__highlight {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	box-sizing: border-box;
}

.bmf-engagements-clients__highlight-picto {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: center;
	width: auto;
	min-width: 0;
	min-height: 0;
	flex-shrink: 0;
	line-height: 0;
}

/* Hauteur calée en JS ; centrage vertical via la grille + flex du picto. */
.bmf-engagements-clients__highlight-picto img {
	display: block;
	width: auto !important;
	max-width: none !important;
	height: auto;
	min-height: 0;
	object-fit: unset;
	object-position: left center;
}

.bmf-engagements-clients__highlight-text,
.bmf-engagements-clients__highlight-text.bmf-engagements-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--bmf-eng-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

.bmf-engagements-clients__highlight-text p {
	margin: 0 0 0.8em;
}

.bmf-engagements-clients__highlight-text p:last-child {
	margin-bottom: 0;
}

.bmf-engagements-clients__highlight-text em {
	font-style: italic;
}

.bmf-engagements-clients__highlight-text strong {
	font-weight: 600;
}

.bmf-engagements-clients .bmf-engagements-figure,
.bmf-engagements-collab .bmf-engagements-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bmf-engagements-clients .bmf-engagements-figure {
	align-self: stretch;
}

.bmf-engagements-collab .bmf-engagements-figure {
	align-self: start;
}

/* Bureau : cadre image à droite de la colonne (arrondi = coin haut-droit du conteneur) */
@media (min-width: 1025px) {
	.bmf-engagements-collab .bmf-engagements-cols__col:last-child {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		min-width: 0;
	}

	.bmf-engagements-collab .bmf-engagements-figure {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bmf-engagements-collab .bmf-engagements-figure__img {
		flex: 0 0 auto;
		width: 100%;
		max-width: var(--bmf-eng-collab-figure-max-w);
		margin-left: 0;
		margin-right: 0;
	}

	.bmf-engagements-collab .bmf-engagements-figure__img img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: contain;
		object-position: top right;
		border-top-right-radius: 0;
	}
}

.bmf-engagements-clients .bmf-engagements-figure__img,
.bmf-engagements-vision .bmf-engagements-figure__img {
	overflow: hidden;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-collab .bmf-engagements-figure__img {
	overflow: hidden;
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	border-top-right-radius: var(--bmf-eng-radius-corner);
}

.bmf-engagements-clients .bmf-engagements-figure__img img,
.bmf-engagements-vision .bmf-engagements-figure__img img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.bmf-engagements-collab .bmf-engagements-figure__img img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	object-fit: contain;
	object-position: top center;
}

/* ==========================================================================
   5. RESPONSABLE
   --------------------------------------------------------------------------
   Grille des 4 cartes : largeur max du conteneur principal, fond transparent,
   cartes beige (#F2EDE8, identique aux encarts / hero Contact).
   ========================================================================== */
.bmf-engagements-rse,
#engagements-responsabilite {
	padding-bottom: var(--bmf-eng-rse-section-pad-bottom);
}

.bmf-engagements-rse__text {
	margin-top: 0;
}

.bmf-engagements-rse .bmf-engagements-h2:not(.bmf-engagements-transition__h3) {
	margin-bottom: 16px;
}

.bmf-engagements-rse .bmf-engagements-section-label {
	margin-bottom: 24px;
}

.bmf-engagements-rse__band {
	margin: var(--bmf-eng-rse-band-margin-top) auto 0;
	padding: 0;
	max-width: var(--bmf-eng-content-max);
	box-sizing: border-box;
}

.bmf-engagements-rse__band-inner {
	max-width: 100%;
	margin: 0 auto;
	width: 100%;
}

.bmf-engagements-rse__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bmf-eng-rse-cards-gap);
	align-items: stretch;
}

.bmf-engagements-rse__card {
	background: var(--bmf-eng-rse-card-bg);
	color: var(--bmf-eng-ink);
	padding: 24px 20px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-family: var(--bmf-eng-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	box-sizing: border-box;
	min-height: 100%;
}

/* Flèche jaune en dur : 12×20 px, alignée avec la première ligne de texte. */
.bmf-engagements-rse__card-arrow {
	display: block;
	width: 12px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 6px;        /* aligne visuellement avec la 1re ligne (~150 % de 18 px) */
}

.bmf-engagements-rse__card-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

/* ==========================================================================
   6. COLLABORATEUR / CULTURE
   ========================================================================== */
.bmf-engagements-collab .bmf-engagements-section-label {
	max-width: var(--bmf-eng-collab-head-max);
}

.bmf-engagements-collab .bmf-engagements-text {
	max-width: var(--bmf-eng-text-inner-max);
}

.bmf-engagements-collab .bmf-engagements-cols__col .bmf-engagements-text {
	margin-top: 0;
}

.bmf-engagements-collab .bmf-engagements-section-label {
	margin-bottom: 24px;
}

/* ==========================================================================
   7. LOGOS PARTENAIRES — centrés, taille maquette, marges verticales asymétriques
   ========================================================================== */
.bmf-engagements-partners {
	padding-top: var(--bmf-eng-partners-pad-top);
	padding-bottom: var(--bmf-eng-partners-pad-bottom);
}

/* Logos sous la bande de cartes RSE (#engagements-responsabilite) */
.bmf-engagements-partners.bmf-engagements-partners--in-rse {
	width: 100%;
	padding-top: var(--bmf-eng-partners-pad-top-in-rse);
	padding-bottom: 0;
	box-sizing: border-box;
}

.bmf-engagements-partners--in-rse .bmf-engagements-partners__wrap {
	max-width: var(--bmf-eng-content-max);
	margin: 0 auto;
	width: 100%;
}

.bmf-engagements-partners__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 48px 88px;
}

.bmf-engagements-partners__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.bmf-engagements-partners__item img,
.bmf-engagements-partners__link img {
	display: block;
	max-width: var(--bmf-eng-partners-logo-max-w);
	max-height: var(--bmf-eng-partners-logo-max-h);
	width: auto;
	height: auto;
	object-fit: contain;
}

.bmf-engagements-partners__link {
	display: inline-flex;
	transition: opacity 180ms ease;
}

.bmf-engagements-partners__link:hover,
.bmf-engagements-partners__link:focus-visible {
	opacity: 0.7;
}

/* ==========================================================================
   RESPONSIVE — mêmes breakpoints que economie-construction.css
   ========================================================================== */
@media (max-width: 1023px) {
	/*
	 * Anti-débordement horizontal (mobile / tablette) :
	 * - CTA bas en 100vw + margin négatif (economie-construction.css) élargit le document ;
	 * - titres hero / libellés de section peuvent dépasser si non contraints.
	 */
	body.page-template-page-nos-engagements .bmf-economie {
		overflow-x: clip;
		max-width: 100%;
	}

	body.page-template-page-nos-engagements .bmf-economie-hero__band,
	body.page-template-page-nos-engagements .bmf-economie-hero__band-inner,
	body.page-template-page-nos-engagements .bmf-engagements-section,
	body.page-template-page-nos-engagements .bmf-engagements-section__inner {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.page-template-page-nos-engagements .bmf-economie-hero__title,
	body.page-template-page-nos-engagements .bmf-engagements-section-label {
		overflow-wrap: break-word;
		word-break: normal;
		max-width: 100%;
	}

	body.page-template-page-nos-engagements .bmf-economie-hero__anchors {
		max-width: 100%;
		min-width: 0;
	}

	.bmf-engagements-section {
		padding: 64px 20px;
	}

	.bmf-engagements-vision .bmf-engagements-section-label,
	.bmf-engagements-transitions .bmf-engagements-section-label,
	.bmf-engagements-rse .bmf-engagements-section-label,
	.bmf-engagements-clients .bmf-engagements-section-label,
	.bmf-engagements-collab .bmf-engagements-section-label {
		font-size: 42px;
	}

	.bmf-engagements-cols--50-50,
	.bmf-engagements-vision .bmf-engagements-cols--50-50 {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.bmf-engagements-transitions__list {
		gap: 56px;
		margin-top: 40px;
	}

	.bmf-engagements-transition,
	.bmf-engagements-transition[data-layout="image_gauche"],
	.bmf-engagements-transition[data-layout="texte_seul"] {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bmf-engagements-clients .bmf-engagements-cols--50-50,
	.bmf-engagements-collab .bmf-engagements-cols--50-50 {
		grid-template-columns: 1fr;
	}

	/* Encart équerre + citation : empilés (picto au-dessus, texte pleine largeur). */
	.bmf-engagements-clients__highlight {
		grid-template-columns: 1fr;
		gap: 20px;
		align-items: start;
	}

	.bmf-engagements-clients__highlight-picto {
		justify-content: center;
		width: 100%;
		height: auto !important;
		min-height: 0;
	}

	.bmf-engagements-clients__highlight-picto img {
		display: block;
		width: auto !important;
		max-width: min(72vw, 200px) !important;
		height: auto !important;
		max-height: 140px !important;
		margin: 0 auto;
		object-fit: contain !important;
		object-position: center;
	}

	.bmf-engagements-clients__highlight-text,
	.bmf-engagements-clients__highlight-text.bmf-engagements-text {
		width: 100%;
		text-align: left;
	}

	.bmf-engagements-clients .bmf-engagements-figure,
	.bmf-engagements-collab .bmf-engagements-figure {
		flex: 0 0 auto;
		height: auto;
		min-height: 0;
	}

	.bmf-engagements-clients .bmf-engagements-figure__img,
	.bmf-engagements-vision .bmf-engagements-figure__img {
		flex: 0 0 auto;
		max-height: none;
	}

	.bmf-engagements-clients .bmf-engagements-figure__img img,
	.bmf-engagements-vision .bmf-engagements-figure__img img {
		height: auto;
		min-height: 0;
		max-height: none;
	}

	.bmf-engagements-vision .bmf-engagements-figure__img {
		max-height: var(--bmf-eng-vision-figure-max-h);
	}

	.bmf-engagements-vision .bmf-engagements-figure__img img {
		max-height: var(--bmf-eng-vision-figure-max-h);
		width: 100%;
		object-fit: contain;
		object-position: top center;
	}

	/* Sur tablette, on bascule en 1 colonne : on remet l'image après le texte
	   indépendamment du data-layout, pour conserver l'ordre logique de lecture. */
	.bmf-engagements-transition[data-layout="image_gauche"] .bmf-engagements-transition__body,
	.bmf-engagements-transition[data-layout="image_droite"] .bmf-engagements-transition__body {
		order: 1;
	}

	.bmf-engagements-transition[data-layout="image_gauche"] .bmf-engagements-transition__media,
	.bmf-engagements-transition[data-layout="image_droite"] .bmf-engagements-transition__media {
		order: 2;
	}

	.bmf-engagements-transition__body {
		align-self: auto;
	}

	.bmf-engagements-transition__media {
		height: auto;
		min-height: 0;
		max-height: none;
		align-self: auto;
	}

	.bmf-engagements .bmf-engagements-transitions h3.bmf-engagements-transition__h3 {
		margin-bottom: 18px;
	}

	.bmf-engagements-rse__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 1023px) {
	/* Encart : sur tablette, on réduit légèrement le padding pour rester aéré
	   sans déborder visuellement vu que la colonne fait désormais 100% de la
	   largeur (grille repassée en 1 col plus haut). */
	.bmf-engagements-encart__inner {
		padding: 48px 48px;
	}

	.bmf-engagements-encart--bar-left .bmf-engagements-encart__inner {
		padding-left: calc(48px + var(--bmf-eng-bar-width));
	}

	.bmf-engagements-encart--bar-top .bmf-engagements-encart__inner {
		padding-top: calc(48px + var(--bmf-eng-bar-width));
	}

	/* Transitions : photos en 4/3 ; le logo Hub garde sa taille bureau (voir --hub). */
	.bmf-engagements-transition:not(.bmf-engagements-transition--hub-visual) .bmf-engagements-transition__media-img {
		flex: 0 0 auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	/* Logo Hub : centré horizontalement en colonne pleine largeur. */
	.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media {
		width: 100%;
		align-items: center;
	}

	.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media-img {
		justify-content: center;
		margin-inline: auto;
	}

	.bmf-engagements-transition--hub-visual .bmf-engagements-transition__media-img img {
		object-position: center;
	}

	.bmf-engagements .bmf-engagements-transitions h3.bmf-engagements-transition__h3 {
		margin-bottom: 18px;
	}

	.bmf-engagements .bmf-engagements-section h3 {
		margin-bottom: 18px;
	}

	.bmf-engagements-rse,
	#engagements-responsabilite {
		--bmf-eng-rse-section-pad-bottom: 40px;
		--bmf-eng-partners-pad-top-in-rse: 56px;
	}

	.bmf-engagements-rse__band {
		--bmf-eng-rse-band-margin-top: 28px;
		--bmf-eng-rse-band-pad: 20px;
		--bmf-eng-rse-cards-gap: 28px;
	}

	.bmf-engagements-partners {
		--bmf-eng-partners-pad-top: 36px;
		--bmf-eng-partners-pad-bottom: 80px;
		--bmf-eng-partners-logo-max-w: 260px;
		--bmf-eng-partners-logo-max-h: 140px;
	}

	.bmf-engagements-partners__list {
		gap: 40px 64px;
	}
}

@media (max-width: 767px) {
	/* CTA : annuler le full-bleed 100vw (source de scroll horizontal sur toute la page). */
	body.page-template-page-nos-engagements .bmf-economie-cta {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.bmf-engagements-section {
		padding: 56px 20px;
	}

	.bmf-engagements-vision .bmf-engagements-section-label,
	.bmf-engagements-transitions .bmf-engagements-section-label,
	.bmf-engagements-rse .bmf-engagements-section-label,
	.bmf-engagements-clients .bmf-engagements-section-label,
	.bmf-engagements-collab .bmf-engagements-section-label {
		font-size: 36px;
	}

	.bmf-engagements-text,
	.bmf-engagements-encart__inner,
	.bmf-engagements-rse__card,
	.bmf-engagements-clients__highlight-text {
		font-size: 16px;
	}

	.bmf-engagements-encart__inner {
		padding: 36px 32px;
	}

	.bmf-engagements-encart--bar-left .bmf-engagements-encart__inner {
		padding-left: calc(32px + var(--bmf-eng-bar-width));
	}

	.bmf-engagements-encart--bar-top .bmf-engagements-encart__inner {
		padding-top: calc(36px + var(--bmf-eng-bar-width));
	}

	.bmf-engagements-rse,
	#engagements-responsabilite {
		--bmf-eng-rse-section-pad-bottom: 36px;
		--bmf-eng-partners-pad-top-in-rse: 48px;
	}

	.bmf-engagements-rse__band {
		--bmf-eng-rse-band-margin-top: 24px;
		--bmf-eng-rse-band-pad: 20px;
		--bmf-eng-rse-cards-gap: 20px;
	}

	.bmf-engagements-rse__card {
		padding: 22px 18px;
	}

	.bmf-engagements-partners__list {
		gap: 32px 40px;
	}

	.bmf-engagements-partners {
		--bmf-eng-partners-pad-top: 32px;
		--bmf-eng-partners-pad-bottom: 72px;
		--bmf-eng-partners-logo-max-w: 220px;
		--bmf-eng-partners-logo-max-h: 120px;
	}

	.bmf-engagements .bmf-engagements-transitions h3.bmf-engagements-transition__h3 {
		margin-bottom: 16px;
	}

	.bmf-engagements .bmf-engagements-section h3 {
		margin-bottom: 16px;
	}

	.bmf-engagements-rse,
	#engagements-responsabilite {
		--bmf-eng-rse-section-pad-bottom: 32px;
		--bmf-eng-partners-pad-top-in-rse: 40px;
	}

	.bmf-engagements-rse__band {
		--bmf-eng-rse-band-margin-top: 20px;
		--bmf-eng-rse-band-pad: 20px;
		--bmf-eng-rse-cards-gap: 16px;
	}

	.bmf-engagements-rse__cards {
		grid-template-columns: 1fr;
	}

	.bmf-engagements-partners__list {
		gap: 28px 36px;
	}
}

@media (max-width: 480px) {
	.bmf-engagements-section {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.bmf-engagements-vision .bmf-engagements-section-label,
	.bmf-engagements-transitions .bmf-engagements-section-label,
	.bmf-engagements-rse .bmf-engagements-section-label,
	.bmf-engagements-clients .bmf-engagements-section-label,
	.bmf-engagements-collab .bmf-engagements-section-label {
		font-size: 30px;
	}

	.bmf-engagements-encart__inner {
		padding: 32px 24px;
		/* Sur très petit écran, le justify donne souvent des lignes hachées :
		   on revient à un alignement à gauche, plus lisible. */
		text-align: left;
	}

	.bmf-engagements-encart--bar-left .bmf-engagements-encart__inner {
		padding-left: calc(24px + var(--bmf-eng-bar-width));
	}

	.bmf-engagements-encart--bar-top .bmf-engagements-encart__inner {
		padding-top: calc(32px + var(--bmf-eng-bar-width));
	}

	.bmf-engagements-partners {
		--bmf-eng-partners-pad-top: 28px;
		--bmf-eng-partners-pad-bottom: 64px;
		--bmf-eng-partners-logo-max-w: 180px;
		--bmf-eng-partners-logo-max-h: 96px;
	}

	.bmf-engagements-rse,
	#engagements-responsabilite {
		--bmf-eng-rse-section-pad-bottom: 28px;
		--bmf-eng-partners-pad-top-in-rse: 32px;
	}

	.bmf-engagements-rse__band {
		--bmf-eng-rse-band-margin-top: 18px;
		--bmf-eng-rse-band-pad: 20px;
		--bmf-eng-rse-cards-gap: 16px;
	}

	.bmf-engagements-rse__card {
		padding: 20px 16px;
	}

	.bmf-engagements-partners__list {
		gap: 24px 32px;
	}
}

/* ==========================================================================
   Bouton flottant « Haut de page »
   --------------------------------------------------------------------------
   Reprend le même composant que `archive-projet.php` (CSS dans projets.css
   inclus uniquement pour le CPT). On le redéfinit ici à l'identique pour que
   le bouton soit autonome sur la page « Nos engagements ».
   ========================================================================== */
.bmf-engagements ~ .haut-de-page,
.haut-de-page#bmf-haut-de-page {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.haut-de-page#bmf-haut-de-page.is-visible,
.haut-de-page#bmf-haut-de-page.visible {
	opacity: 1;
	visibility: visible;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 4px;
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--bmf-eng-sans);
	font-weight: 600;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--bmf-eng-ink);
}

.haut-de-page#bmf-haut-de-page .haut-de-page__label span {
	display: block;
	line-height: 1.4;
}