/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.15
*/

/* Header logo size (class-based so it also covers the sticky header's cloned logo item).
   Header = pictogramme MFA seul (logo-mfa-mark, ~2:1) — pas de baseline.
   Hauteur plafonnée, largeur auto pour ne pas déformer. */
.column_header_logo .logo-wrapper {
	padding-left: 0;
	padding-right: 4px;
}
.column_header_logo .logo-wrapper img {
	/* Mark ~2:1 → à 72px de haut ≈ 145px de large. Pictogramme lisible sans écriture. */
	max-height: 72px;
	width: auto;
	height: auto;
	display: block;
}

/* Restore the rounded white "pill" background behind the main nav menu
   (lost from BeTheme's compiled CSS cache after a cache-clear regression;
   the underlying builder config still has this, the compiled cache just
   didn't rebuild it — reproducing it here directly, reliably).
   Largeur = contenu (max-content), sans min-width fixe : le burger
   prend le relais ≤1240px (aligné sur le panneau sidebar déjà en 1240). */
.mcb-item-kvyr9u4pf .mcb-column-inner-kvyr9u4pf,
.mcb-item-dwewtnq5 .mcb-column-inner-dwewtnq5 {
	background-color: #FFFFFF;
	border-radius: 38px;
	padding: 4px 6px;
	margin-left: 12px;
	margin-right: 12px;
	min-width: 0;
	width: max-content;
	max-width: none;
	box-sizing: border-box;
}

/* Restore the filled pill on hover/active nav items + 1 ligne sans troncature. */
.mcb-item-kvyr9u4pf .mfn-header-menu,
.mcb-item-dwewtnq5 .mfn-header-menu {
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	width: max-content;
	gap: 0;
}
.mcb-item-kvyr9u4pf .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link,
.mcb-item-dwewtnq5 .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-right: 15px !important;
	padding-left: 15px !important;
	border-radius: 38px;
	white-space: nowrap !important;
	font-size: 16px !important;
	line-height: 1.2;
}
.mcb-item-kvyr9u4pf .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link .menu-label,
.mcb-item-dwewtnq5 .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link .menu-label {
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}
.mcb-item-kvyr9u4pf .mfn-header-menu > li.mfn-menu-li:hover > a.mfn-menu-link,
.mcb-item-dwewtnq5 .mfn-header-menu > li.mfn-menu-li:hover > a.mfn-menu-link {
	background-color: #285A9E !important;
	color: #FFFFFF !important;
}

/* Desktop large (≥1241) : logo | menu pill CENTRÉ | CTA
   Grid auto / 1fr / auto : logo et CTA gardent leur largeur naturelle
   (alignés sur la grille contenu), la pill se centre dans la zone
   centrale sans coller au logo. CTA sans marge droite (top + sticky) :
   les socials hero restent absolute coin haut-droit, hors flux.
   Burger ≤1240 inchangé.

   Container : même max-width que Elementor boxed (--container-max-width
   1330px) pour que logo / Devis collent aux bords des cartes Univers.

   Une seule ligne : logo | menu (centre) | loupe + Devis (+ burger).
   Flex plutôt que grid 3 cols — sinon la loupe pousse le CTA à la ligne. */
@media (min-width: 1241px) {
	.mfn-header-tmpl .mcb-header-section > .mcb-section-inner.mfn-wrapper-for-wraps {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start;
		gap: 10px;
		max-width: 1330px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_logo) {
		width: auto !important;
		min-width: 0;
		flex: 0 0 auto !important;
		order: 1;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_menu) {
		width: auto !important;
		max-width: 100%;
		min-width: 0;
		flex: 1 1 auto !important;
		display: flex !important;
		justify-content: center;
		align-items: center;
		overflow: visible;
		position: relative;
		left: auto;
		transform: none;
		z-index: 2;
		order: 2;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_menu) .mcb-wrap-inner,
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_menu) .column_header_menu {
		width: max-content !important;
		max-width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* Cluster droite : loupe → Devis → burger, même ligne */
	.mfn-header-tmpl .mcb-header-section .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_search) {
		width: auto !important;
		min-width: 0;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		order: 3;
	}
	.mfn-header-tmpl .mcb-header-section .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_button, .column_header_button) {
		width: auto !important;
		min-width: 0;
		flex: 0 0 auto !important;
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		margin-left: 0 !important;
		margin-right: 0 !important;
		order: 4;
	}
	.mfn-header-tmpl .mcb-header-section .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_burger) {
		width: auto !important;
		flex: 0 0 auto !important;
		order: 5;
	}
	/* Sticky : socials masqués (pas de hero derrière). Overlay les garde. */
	.mfn-header-tmpl .mfn-header-sticky-section .mfa-header-socials {
		display: none !important;
	}
	.mfn-header-tmpl .column_header_logo,
	.mfn-header-tmpl .column_header_menu {
		width: auto !important;
		overflow: visible;
	}
	/* CTA « Devis gratuit → » : assorti au menu (~16px), hauteur pill. */
	.mfn-header-tmpl .column_button .button,
	.mfn-header-tmpl .column_header_button .button {
		padding: 12px 22px !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
	}
}

/* Serrage progressif du pill avant le bascule burger (évite Recru… / wrap).
   Polices un cran au-dessus (15 / 14) pour rester lisibles sans forcer
   le burger trop tôt — padding horizontal réduit en compensation. */
@media (min-width: 1241px) and (max-width: 1360px) {
	.mcb-item-kvyr9u4pf .mcb-column-inner-kvyr9u4pf,
	.mcb-item-dwewtnq5 .mcb-column-inner-dwewtnq5 {
		padding: 3px 4px;
		margin-left: 6px;
		margin-right: 6px;
	}
	.mcb-item-kvyr9u4pf .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link,
	.mcb-item-dwewtnq5 .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		padding-left: 11px !important;
		padding-right: 11px !important;
		font-size: 15px !important;
	}
	.mfn-header-tmpl .column_button .button,
	.mfn-header-tmpl .column_header_button .button {
		padding: 10px 18px !important;
		font-size: 15px !important;
	}
	.column_header_logo .logo-wrapper img {
		max-height: 64px;
	}
}

@media (min-width: 1241px) and (max-width: 1280px) {
	.mcb-item-kvyr9u4pf .mcb-column-inner-kvyr9u4pf,
	.mcb-item-dwewtnq5 .mcb-column-inner-dwewtnq5 {
		padding: 2px 3px;
		margin-left: 4px;
		margin-right: 4px;
	}
	.mcb-item-kvyr9u4pf .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link,
	.mcb-item-dwewtnq5 .mfn-header-menu > li.mfn-menu-li > a.mfn-menu-link {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		padding-left: 9px !important;
		padding-right: 9px !important;
		font-size: 15px !important;
	}
	.mfn-header-tmpl .column_button .button,
	.mfn-header-tmpl .column_header_button .button {
		padding: 8px 14px !important;
		font-size: 15px !important;
	}
	.column_header_logo .logo-wrapper img {
		max-height: 56px;
	}
}

/* Mega menu Prestations : panneau détaché (ombre + bordure), aligné à
   gauche sous le parent. Le gap VISUEL est rendu via padding-top
   transparent (pont hover) — jamais via `top: calc(100% + Npx)`, sinon
   le curseur traverse une zone morte, :hover du li tombe, menu se ferme.
   Pont = padding pill bas (4px) + ~6px de respiration. */
.mfn-header-menu > .mfn-menu-item-has-megamenu {
	position: relative;
}
.mfn-header-menu > .mfn-menu-item-has-megamenu > .mfn-menu-item-megamenu.mfn-megamenu-custom-width {
	left: 0;
	right: auto;
	top: 100%;
	transform: none;
	margin-top: 0;
	/* Pont hit-area : garde li:hover pendant le trajet vers le panneau. */
	padding-top: 10px;
	/* Coque transparente — le look “carte” est sur .mfn-builder-content. */
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}
.mfn-menu-item-megamenu {
	z-index: 100;
}
.mfn-menu-item-megamenu > .mfn-builder-content {
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid rgba(18, 42, 77, 0.08);
	box-shadow: 0 16px 40px rgba(18, 42, 77, 0.14);
	overflow: hidden;
}
/* Marge builder BeTheme (~16px) : faux gap entre la barre et le panneau. */
.mfn-menu-item-megamenu > .mfn-builder-content > .section,
.mfn-menu-item-megamenu > .mfn-builder-content > .mcb-section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.mfn-menu-li.mfn-li-hover,
.mfn-menu-li:hover {
	z-index: 101;
}
.mfn-menu-item-megamenu .mfn-icon-box .icon-wrapper {
	border-radius: 10px;
	overflow: hidden;
}
.mfn-menu-item-megamenu .mfn-icon-box .icon-wrapper img {
	border-radius: 10px;
	display: block;
}

/* =========================================================
   Widget "Demander un devis" — assistant multi-étapes
   Utilisé par functions/mfa-devis-widget.js
   ========================================================= */

.mfa-devis {
	scroll-margin-top: 130px;
	max-width: 760px;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 24px;
	padding: 48px;
	box-shadow: 0 12px 40px rgba(18, 42, 77, 0.10);
}
@media (max-width: 767px) {
	/* Règle transversale (2026-07-19) : un widget/bloc de contenu classique
	   sur fond de couleur doit occuper toute la largeur de l'écran, sans
	   arrondi ni marge visible. Deux fonds de couleur imbriqués ici :
	   1) la section #devis-widget elle-même (fond bleu clair, hérite un
	      border-radius:24px du desktop, jamais neutralisé sur mobile) ;
	   2) .mfa-devis (fond blanc du formulaire) à l'intérieur.
	   Les deux sont sorties du gutter de page (padding 16px du thème,
	   posé sur .section_wrapper, un ancêtre commun à toutes les
	   sections — pas seulement celle-ci) via la technique
	   100vw/marge négative, indépendamment l'une de l'autre : la section
	   garde son propre padding_mobile Elementor (20px) pour que son
	   texte ("Estimez votre projet") ne colle pas aux bords, tandis que
	   .mfa-devis gère son propre padding interne (20px) séparément. */
	#devis-widget {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-radius: 0 !important;
	}
	.mfa-devis {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 20px;
		border-radius: 0;
	}
}

.mfa-devis-progress {
	height: 6px;
	background: #EAF2FB;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 36px;
}
.mfa-devis-progress-bar {
	height: 100%;
	width: 20%;
	background: linear-gradient(90deg, #285A9E, #3B7BC4);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.mfa-devis-step-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #DC0B15;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.mfa-devis-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #122A4D;
	margin: 0 0 8px;
	line-height: 1.25;
}
.mfa-devis-title-spaced { margin-top: 32px; }

.mfa-devis-sub {
	font-size: 15px;
	color: #5B6472;
	margin: 0 0 28px;
}

.mfa-devis-step {
	display: none;
	animation: mfaDevisFadeIn 0.35s ease;
}
.mfa-devis-step.active { display: block; }

@keyframes mfaDevisFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.mfa-devis-substep { display: none; }
.mfa-devis-substep.active { display: block; animation: mfaDevisFadeIn 0.3s ease; }

/* Card-style radio/checkbox options */
.mfa-devis-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.mfa-devis-cards-inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 600px) {
	.mfa-devis-cards { grid-template-columns: 1fr; }
}

.mfa-devis .wpcf7-list-item {
	margin: 0;
}
/* !important : BeTheme pose des styles globaux sur `button` / `input[type=submit]`
   (variables --mfn-button-*) qui gagnent sinon sur fond + couleur → bleu sur bleu. */
.mfa-devis-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 14px 20px;
	background-color: #FFFFFF !important;
	background-image: none !important;
	border: 2px solid #E2E8F0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #122A4D !important;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.15s;
}
.mfa-devis-choice:hover,
.mfa-devis-choice:focus,
.mfa-devis-choice:active {
	border-color: #285A9E !important;
	background-color: #FFFFFF !important;
	background-image: none !important;
	color: #122A4D !important;
	transform: translateY(-1px);
}
.mfa-devis-choice.is-selected,
.mfa-devis-choice.is-selected:hover,
.mfa-devis-choice.is-selected:focus,
.mfa-devis-choice.is-selected:active {
	border-color: #285A9E !important;
	background-color: #EAF2FB !important;
	background-image: none !important;
	color: #122A4D !important;
}
.mfa-devis-choice.is-selected::after {
	content: '';
	margin-left: auto;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #285A9E;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.mfa-devis-choice-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: #285A9E;
}
.mfa-devis-choice-icon svg { width: 100%; height: 100%; }
.mfa-devis-cards-icon .mfa-devis-choice { min-height: 64px; }

/* Étape 5 du widget : les champs texte (nom, tél, email...) n'avaient
   qu'un placeholder, qui disparaît dès la saisie — aucun repère visuel
   une fois le champ rempli. Label toujours visible au-dessus, cf.
   fix-betheme dans _form du CF7 id 369. */
.mfa-devis-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4A5568;
	margin-bottom: 6px;
}
.mfa-devis-field { margin-top: 24px; margin-bottom: 16px; }
.mfa-devis-cards + .mfa-devis-field { margin-top: 24px; }
.mfa-devis-field .mfa-devis-input,
.mfa-devis-field textarea,
.mfa-devis input.mfa-devis-input,
.mfa-devis textarea.mfa-devis-input {
	width: 100% !important;
	padding: 16px 20px !important;
	background: #FFFFFF !important;
	border: 2px solid #E2E8F0 !important;
	border-radius: 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #122A4D !important;
	transition: border-color 0.2s;
}
.mfa-devis-field .mfa-devis-input:focus,
.mfa-devis-field textarea:focus {
	outline: none;
	border-color: #285A9E !important;
}
.mfa-devis textarea { min-height: 100px; resize: vertical; }

.mfa-devis-acceptance { font-size: 13px; color: #5B6472; }
.mfa-devis-acceptance .wpcf7-list-item-label { border: none; padding: 0; min-height: 0; font-weight: 400; }
.mfa-devis-acceptance input[type="checkbox"] { position: static; width: 16px; height: 16px; opacity: 1; margin-right: 8px; }

.mfa-devis-nav {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 36px;
	gap: 12px;
}
.mfa-devis-reassure {
	display: none;
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
	color: #5B6472;
}
.mfa-devis-step[data-step="4"].active ~ .mfa-devis-reassure {
	display: block;
}
.mfa-devis.is-sent .mfa-devis-reassure {
	display: none;
}
.mfa-devis .mfa-devis-btn,
.mfa-devis .wpcf7-form-control.wpcf7-submit,
.mfa-devis input.wpcf7-submit[type="submit"] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	min-height: 52px;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	border-radius: 38px !important;
	padding: 16px 32px !important;
	border-width: 1px !important;
	border-style: solid !important;
	box-shadow: none !important;
	background-image: none !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.mfa-devis .mfa-devis-btn-back {
	background-color: transparent !important;
	color: #5B6472 !important;
	border-color: #E2E8F0 !important;
	margin-right: auto;
}
.mfa-devis .mfa-devis-btn-back:hover,
.mfa-devis .mfa-devis-btn-back:focus,
.mfa-devis .mfa-devis-btn-back:active {
	background-color: transparent !important;
	border-color: #285A9E !important;
	color: #285A9E !important;
}
.mfa-devis .mfa-devis-btn-back.is-hidden { display: none; }

/* Suivant + Envoyer : même CTA primaire (blanc sur bleu MFA) */
.mfa-devis .mfa-devis-btn-next,
.mfa-devis .wpcf7-form-control.wpcf7-submit,
.mfa-devis input.wpcf7-submit[type="submit"] {
	background-color: #285A9E !important;
	color: #FFFFFF !important;
	border-color: #285A9E !important;
	margin-left: auto;
}
.mfa-devis .mfa-devis-btn-next:hover,
.mfa-devis .mfa-devis-btn-next:focus,
.mfa-devis .mfa-devis-btn-next:active,
.mfa-devis .wpcf7-form-control.wpcf7-submit:hover,
.mfa-devis .wpcf7-form-control.wpcf7-submit:focus,
.mfa-devis .wpcf7-form-control.wpcf7-submit:active,
.mfa-devis input.wpcf7-submit[type="submit"]:hover,
.mfa-devis input.wpcf7-submit[type="submit"]:focus,
.mfa-devis input.wpcf7-submit[type="submit"]:active {
	background-color: #122A4D !important;
	background-image: none !important;
	border-color: #122A4D !important;
	color: #FFFFFF !important;
}
.mfa-devis .mfa-devis-btn-next.is-hidden,
.mfa-devis .wpcf7-form-control.wpcf7-submit.is-hidden,
.mfa-devis input.wpcf7-submit[type="submit"].is-hidden {
	display: none;
}

/* Mobile : les deux boutons (Précédent + Suivant) ensemble avec padding
   32px + white-space:nowrap débordent du viewport dès l'étape 2. On réduit
   le padding/police d'abord, et sur les très petits écrans on empile les
   boutons pleine largeur (plus robuste si les libellés changent). */
@media (max-width: 767px) {
	.mfa-devis .mfa-devis-btn,
	.mfa-devis .wpcf7-form-control.wpcf7-submit,
	.mfa-devis input.wpcf7-submit[type="submit"] {
		padding: 14px 20px !important;
		font-size: 14px !important;
	}
}
@media (max-width: 480px) {
	.mfa-devis-nav {
		flex-wrap: wrap;
	}
	.mfa-devis .mfa-devis-btn,
	.mfa-devis .wpcf7-form-control.wpcf7-submit,
	.mfa-devis input.wpcf7-submit[type="submit"] {
		flex: 1 1 100%;
		text-align: center;
	}
	.mfa-devis .mfa-devis-btn-back {
		margin-right: 0;
		order: 2;
	}
	.mfa-devis .mfa-devis-btn-next,
	.mfa-devis .wpcf7-form-control.wpcf7-submit,
	.mfa-devis input.wpcf7-submit[type="submit"] {
		margin-left: 0;
		order: 1;
	}
}

.mfa-devis-error { color: #DC0B15; font-size: 13px; margin: 8px 0 0; }
.mfa-devis .wpcf7-not-valid-tip { font-size: 12px; margin-top: 4px; }
.mfa-devis .wpcf7-response-output,
.mfa-devis ~ .wpcf7-response-output { display: none !important; }
.mfa-devis form.invalid .mfa-devis-nav,
.mfa-devis form.sent .mfa-devis-nav { display: flex; }
.mfa-devis .ajax-loader { margin-left: 12px; }

.mfa-devis-success {
	display: none;
	text-align: center;
	padding: 20px 0;
}
.mfa-devis-success.active { display: block; animation: mfaDevisFadeIn 0.4s ease; }
.mfa-devis-success-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #EAF2FB;
	color: #285A9E;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 32px;
}
.mfa-devis-success h3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #122A4D;
	margin: 0 0 12px;
}
.mfa-devis-success p {
	color: #5B6472;
	font-size: 15px;
	max-width: 420px;
	margin: 0 auto;
}

/* =========================================================
   Centrage des éléments dans les sections hero (fil d'Ariane,
   eyebrow, H1, intro) — pages prestation + hubs univers.
   Le texte lui-même était déjà centré (text-align), mais les blocs à
   largeur personnalisée (ex. le paragraphe d'intro à 65%) restaient
   collés à gauche : il leur faut une vraie marge automatique pour que
   la BOÎTE elle-même soit centrée, pas seulement le texte dedans.
   ========================================================= */
.mfa-hero-centered > .elementor-widget-wrap {
	align-items: center !important;
}

/* Centrage horizontal du texte : héros des pages hub univers
   (classe dédiée) + fiches prestation (même rendu que les univers).
   .mfa-hero-centered reste partagée avec la homepage, volontairement
   alignée à gauche — d'où le sélecteur .single-prestation plutôt
   qu'un élargissement global de .mfa-hero-centered. */
.mfa-hub-hero-centered > .elementor-widget-wrap > .elementor-element,
.single-prestation .mfa-hero-centered > .elementor-widget-wrap > .elementor-element {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================
   Lignes "photo / carte prestation" des pages hub univers :
   image et carte de même hauteur (étirées sur la plus grande).
   Chaîne : section(row) > .elementor-container > .elementor-column
   > .elementor-widget-wrap > .elementor-widget-image > img.
   Chaque maillon doit explicitement propager height:100%, sinon un
   des styles Elementor/BeTheme par défaut (ou l'aspect-ratio auto-
   généré depuis les attributs width/height du <img>) reprend la main.
   ========================================================= */
.mfa-univers-row,
.mfa-univers-row > .elementor-container {
	align-items: stretch !important;
}
.mfa-univers-row > .elementor-container {
	gap: 40px;
}
.mfa-univers-row > .elementor-container > .elementor-column {
	position: relative !important;
	overflow: hidden;
}
/* Carte texte (celle qui n'a pas d'image) : contenu vraiment centré
   verticalement une fois la colonne étirée à la hauteur de la photo,
   et padding généreux. Ciblée via :not(:has(...)) pour fonctionner
   aussi bien à gauche qu'à droite selon l'alternance des lignes. */
.mfa-univers-row .elementor-column:not(:has(.elementor-widget-image)) > .elementor-widget-wrap {
	align-content: center !important;
	justify-content: center !important;
	padding: 72px !important;
}
@media (max-width: 767px) {
	.mfa-univers-row .elementor-column:not(:has(.elementor-widget-image)) > .elementor-widget-wrap {
		padding: 24px !important;
	}
}
/* La colonne image est vidée de son flux normal : l'image est positionnée en
   absolu pour remplir exactement la hauteur réelle de la colonne (calculée
   par le stretch flex du parent), ce qui contourne les soucis de résolution
   de height:% en cascade à travers plusieurs niveaux imbriqués. */
.mfa-univers-row .elementor-widget-image {
	position: absolute !important;
	inset: 0 !important;
}
.mfa-univers-row .elementor-widget-image .elementor-widget-container {
	height: 100%;
	width: 100%;
}
.mfa-univers-row .elementor-widget-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	display: block;
}
/* Sur mobile, la ligne passe en flex-direction:column : align-items:stretch
   n'égalise plus les hauteurs entre éléments empilés, et la colonne image
   (qui n'a aucune hauteur intrinsèque puisque sa seule image est en
   position:absolute) s'effondre à ~0px. On lui redonne une hauteur propre
   via aspect-ratio pour que l'image absolue ait un bloc à remplir. */
@media (max-width: 767px) {
	.mfa-univers-row > .elementor-container {
		flex-direction: column;
	}
	.mfa-univers-row .elementor-column:has(.elementor-widget-image) {
		height: auto !important;
		aspect-ratio: 4 / 3;
		min-height: 260px;
	}
}

/* =========================================================
   Cartes "univers" / familles sur mobile (accueil + /univers/,
   même ID f596040) : stack verticale — toutes les cartes visibles
   au scroll, sans rail horizontal ni peek (retour client Bu4hPpBL).
   Les 6 cartes (5 univers + CTA devis) sont dans une seule section ;
   desktop (min-width: 768px) restaure la grille 3×2 plus bas.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-f596040 > .elementor-container {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		overflow: visible !important;
		scroll-snap-type: none;
		gap: 16px;
	}
	.elementor-element-f596040 > .elementor-container > .elementor-column {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		scroll-snap-align: none;
	}
}
/* Desktop : la fusion des 2 sections en une seule (6 colonnes dans le
   même conteneur flex) fait que les colonnes à 33% se réduisent toutes
   pour tenir sur une seule ligne de 6, au lieu du grid 2x3 d'origine.
   On restaure explicitement 3 colonnes par ligne + retour à la ligne. */
@media (min-width: 768px) {
	.elementor-element-f596040 > .elementor-container {
		flex-wrap: wrap !important;
	}
	.elementor-element-f596040 > .elementor-container > .elementor-column {
		flex: 0 0 33.333% !important;
		width: 33.333% !important;
		max-width: 33.333% !important;
	}
}

/* =========================================================
   Slider logos partenaires (Elementor image-carousel #b4ee650).
   Hauteur fixe + flex center : logos centrés H/V, taille homogène.
   ========================================================= */
.elementor-element-b4ee650.mfa-partners-carousel,
.elementor-element-b4ee650 {
	--mfa-partner-slide-h: 120px;
	--mfa-partner-logo-h: 52px;
	--mfa-partner-logo-w: 150px;
}
.elementor-element-b4ee650 .swiper {
	/* Padding latéral + masque doux : évite les logos « coupés » au bord du viewport. */
	padding: 4px 12px 8px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 18px,
		#000 calc(100% - 18px),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 18px,
		#000 calc(100% - 18px),
		transparent 100%
	);
}
.elementor-element-b4ee650 .swiper-wrapper {
	align-items: stretch !important;
}
.elementor-element-b4ee650 .swiper-slide {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: var(--mfa-partner-slide-h) !important;
	box-sizing: border-box !important;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(18, 42, 77, 0.06);
	padding: 16px 18px !important;
	margin-top: 0 !important;
}
.elementor-element-b4ee650 .swiper-slide > a,
.elementor-element-b4ee650 .swiper-slide > figure,
.elementor-element-b4ee650 .swiper-slide .swiper-slide-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	height: 100%;
	margin: 0;
}
/* Boîte logo fixe : même emprise visuelle, quel que soit le ratio. */
.elementor-element-b4ee650 .swiper-slide-image,
.elementor-element-b4ee650 .swiper-slide img {
	display: block !important;
	width: var(--mfa-partner-logo-w) !important;
	max-width: 100% !important;
	height: var(--mfa-partner-logo-h) !important;
	max-height: var(--mfa-partner-logo-h) !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 auto !important;
	flex: 0 0 auto;
}
/* Défilement continu (marquee) : easing linéaire, pas de « pas » visible. */
.elementor-element-b4ee650 .mfa-partners-marquee .swiper-wrapper,
.elementor-element-b4ee650.mfa-partners-carousel .mfa-partners-marquee .swiper-wrapper {
	transition-timing-function: linear !important;
}
@media (max-width: 1024px) {
	.elementor-element-b4ee650 {
		--mfa-partner-slide-h: 108px;
		--mfa-partner-logo-h: 46px;
		--mfa-partner-logo-w: 130px;
	}
}
@media (max-width: 767px) {
	.elementor-element-b4ee650 {
		--mfa-partner-slide-h: 96px;
		--mfa-partner-logo-h: 42px;
		--mfa-partner-logo-w: 120px;
	}
	.elementor-element-b4ee650 .swiper {
		padding: 4px 16px 8px;
		-webkit-mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 22px,
			#000 calc(100% - 22px),
			transparent 100%
		);
		mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 22px,
			#000 calc(100% - 22px),
			transparent 100%
		);
	}
	.elementor-element-b4ee650 .swiper-slide {
		padding: 12px 16px !important;
	}
	.elementor-element-b4ee650 .swiper-slide-image,
	.elementor-element-b4ee650 .swiper-slide img {
		/* Contenir entièrement dans la carte (pas de crop latéral). */
		object-fit: contain !important;
		object-position: center !important;
	}
}

/* =========================================================
   Cartes matériaux/options (3 colonnes) sur chaque fiche prestation :
   hauteur égale. Structure : section.mfa-card-row > container > column
   (vide, non stylée) > widget-wrap > section.mfa-card-inner (la vraie
   carte blanche) > container > column > contenu.
   ========================================================= */
.mfa-card-row,
.mfa-card-row > .elementor-container {
	align-items: stretch !important;
}
.mfa-card-row > .elementor-container > .elementor-column {
	display: flex !important;
}
.mfa-card-row > .elementor-container > .elementor-column > .elementor-widget-wrap {
	width: 100%;
	height: auto;
	align-self: stretch;
	display: flex;
}
.mfa-card-row > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-section {
	height: 100% !important;
	width: 100%;
}
.mfa-card-inner {
	height: 100% !important;
	display: flex !important;
}
@media (max-width: 767px) {
	/* Padding Elementor natif de la section (32px haut/bas, 28px
	   gauche/droite) légèrement asymétrique — repéré en QA croisée,
	   uniformisé ici plutôt que de retoucher les 34 fiches prestation
	   qui partagent cette même valeur. Ciblé sur les sections carte
	   uniquement : sur apporteur d'affaires la même classe vit aussi
	   sur des colonnes (étapes, programmes). */
	section.mfa-card-inner,
	.mfa-card-row section.mfa-card-inner {
		padding: 28px !important;
	}
}
.mfa-card-inner > .elementor-container {
	width: 100%;
	align-items: stretch !important;
}
.mfa-card-inner > .elementor-container > .elementor-column > .elementor-widget-wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 4 cartes matériaux en 2×2 desktop ; mobile = stack verticale
   (.mfa-card-row). Sans wrap-2 : 2 rangées Elementor séparées. */
@media (min-width: 768px) {
	.mfa-card-row.mfa-card-row--wrap-2 > .elementor-container {
		flex-wrap: wrap !important;
		align-items: stretch !important;
		row-gap: 24px;
	}
	.mfa-card-row.mfa-card-row--wrap-2 > .elementor-container > .elementor-column {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
	}
}

/* =========================================================
   Bouton "Devis gratuit" du header (BeTheme Muffin Builder, pas
   Elementor) : sur mobile la colonne qui le contient est trop étroite
   pour son padding desktop (16px 32px), il déborde hors de l'écran sur
   toutes les pages (confirmé sur home + les 34 fiches prestation).
   ========================================================= */
@media (max-width: 767px) {
	.mfn-header-tmpl .column_button .button,
	.mfn-header-tmpl .column_header_button .button {
		/* padding vertical calé pour une hauteur de cible tactile ~44px
		   (Apple HIG / WCAG 2.2 min touch target), même si ça dépasse
		   légèrement la cible de hauteur de header (44-56px) — l'accessibilité
		   du CTA principal prime sur ce dernier pixel. 13px mesurait 42.4px
		   (QA croisée) : +1px pour passer la barre des 44px. */
		padding: 14px !important;
		font-size: 12px !important;
	}
}

/* =========================================================
   Système mobile — bandeau cookies (BeTheme GDPR notice, #mfn-gdpr)
   En layout par défaut (colonne centrée + icône 64px + gros padding),
   le bandeau mesure 307px de haut sur un écran de 667-844px de haut :
   il recouvre le CTA "Demander mon devis gratuit" du hero au premier
   chargement (confirmé : CTA bottom=507px, bandeau top=360px sur
   375×667). Repli en barre basse compacte : icône masquée, texte +
   lien + bouton sur une ligne dense.
   ========================================================= */
@media (max-width: 767px) {
	#mfn-gdpr {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		padding: 14px 16px !important;
		gap: 10px 14px;
	}
	#mfn-gdpr .mfn-gdpr-image { display: none !important; }
	#mfn-gdpr .mfn-gdpr-content {
		flex: 1 1 100%;
		margin: 0 !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		text-align: left !important;
	}
	#mfn-gdpr .mfn-gdpr-readmore {
		font-size: 11px !important;
		margin: 0 !important;
	}
	#mfn-gdpr .mfn-gdpr-button {
		margin: 0 0 0 auto !important;
		padding: 10px 20px !important;
		height: auto !important;
		line-height: normal !important;
	}
}

/* Le header "sticky" (qui apparaît après un scroll) est transparent par
   défaut : le contenu de la page défile visible en dessous du logo/menu,
   illisible. Fond blanc + légère ombre pour le détacher proprement. */
.mfn-header-sticky-section {
	background-color: #FFFFFF !important;
	box-shadow: 0 2px 12px rgba(18, 42, 77, 0.08);
}

/* Répartition header mobile : Logo | Devis compact | Burger (grille 3).
   La loupe est hors barre (≤1240) — pas de 4e wrap qui cassait la grille. */
@media (max-width: 767px) {
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center;
		min-height: 56px;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_logo) {
		justify-self: start;
		align-self: center;
		grid-column: 1;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_button, .column_header_button) {
		justify-self: center;
		align-self: center;
		grid-column: 2;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_burger) {
		justify-self: end;
		align-self: center;
		grid-column: 3;
	}
	.mfn-header-tmpl .column_header_logo {
		width: auto !important;
	}
	.mfn-header-tmpl .column_button .mcb-column-inner,
	.mfn-header-tmpl .column_header_button .mcb-column-inner,
	.mfn-header-tmpl .column_header_burger .mcb-column-inner {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* ≤1240 : burger visible, pill menu masqué (avant chevauchement CTA/socials).
   Corrige aussi le trou BeTheme 768–959 (hide-tablet sur le menu + ancien
   hide burger ≥768 → ni menu ni burger).
   Loupe hors barre : Logo | Devis compact | Burger — recherche via drawer. */
@media (max-width: 1240px) {
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_menu) {
		display: none !important;
	}
	/* Loupe hors barre sticky (accès via drawer uniquement). */
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_search) {
		display: none !important;
	}
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_burger) {
		display: block !important;
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.mfn-header-tmpl .column_header_burger {
		display: block !important;
	}
	/* Tablette / laptop étroit : logo | CTA | burger. */
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_button, .column_header_button) {
		margin-right: 0;
	}
	/* CTA compact en mode burger. */
	.mfn-header-tmpl .column_button .button,
	.mfn-header-tmpl .column_header_button .button {
		padding: 10px 14px !important;
		font-size: 13px !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
	}
}

/* ≥1241 : pill desktop — le wrap burger (hide-desktop BeTheme) ne doit pas occuper d'espace. */
@media (min-width: 1241px) {
	.mfn-header-tmpl .mcb-section-inner.mfn-wrapper-for-wraps > .mcb-wrap:has(.column_header_burger) {
		display: none !important;
	}
}

/* Logo footer (fond clair → logo couleur complet + baseline, lisible). */
.mfn-footer .mcb-item-q1cn5vtnl img,
#Footer .mcb-item-q1cn5vtnl img {
	max-width: 240px;
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}

/* Liens sociaux footer (Facebook + LinkedIn + Instagram) : icône seule, côte à côte. */
.mfn-footer .mcb-item-zcdg2nul9 .desc-wrapper,
.mfn-footer .mcb-item-mfa2linkedin .desc-wrapper,
.mfn-footer .mcb-item-mfa2instagram .desc-wrapper,
#Footer .mcb-item-zcdg2nul9 .desc-wrapper,
#Footer .mcb-item-mfa2linkedin .desc-wrapper,
#Footer .mcb-item-mfa2instagram .desc-wrapper {
	display: none;
}
.mfn-footer .mcb-wrap-htpwcszx7 .mcb-wrap-inner,
#Footer .mcb-wrap-htpwcszx7 .mcb-wrap-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.mfn-footer .mcb-item-zcdg2nul9,
.mfn-footer .mcb-item-mfa2linkedin,
.mfn-footer .mcb-item-mfa2instagram,
#Footer .mcb-item-zcdg2nul9,
#Footer .mcb-item-mfa2linkedin,
#Footer .mcb-item-mfa2instagram {
	width: auto !important;
	flex: 0 0 auto;
}
/* Taille icônes LinkedIn / Instagram footer (= Facebook). */
.mfn-footer .mcb-item-mfa2linkedin .icon-wrapper,
.mfn-footer .mcb-item-mfa2instagram .icon-wrapper,
#Footer .mcb-item-mfa2linkedin .icon-wrapper,
#Footer .mcb-item-mfa2instagram .icon-wrapper {
	width: 48px !important;
	height: 48px !important;
	margin-bottom: 0 !important;
	background-color: #F2F6FA !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.mfn-footer .mcb-item-mfa2linkedin .icon-wrapper i,
.mfn-footer .mcb-item-mfa2instagram .icon-wrapper i,
#Footer .mcb-item-mfa2linkedin .icon-wrapper i,
#Footer .mcb-item-mfa2instagram .icon-wrapper i {
	font-size: 16px !important;
	color: #122A4D !important;
	line-height: 1 !important;
}
.mfn-footer .mcb-item-mfa2linkedin .mfn-icon-box:hover .icon-wrapper i,
.mfn-footer .mcb-item-mfa2instagram .mfn-icon-box:hover .icon-wrapper i,
#Footer .mcb-item-mfa2linkedin .mfn-icon-box:hover .icon-wrapper i,
#Footer .mcb-item-mfa2instagram .mfn-icon-box:hover .icon-wrapper i {
	color: #285A9E !important;
}

/* Réseaux sociaux header / burger — même rendu que Facebook footer
   (icon-box + icon-*-primary). Header : hors conteneur, tout à droite. */
.mfa-social {
	display: inline-flex !important;
	text-decoration: none;
	flex: 0 0 auto;
	line-height: 0;
}
.mfa-social .desc-wrapper {
	display: none !important;
}
.mfa-social .mfn-icon-box {
	margin: 0 !important;
}
.mfa-social .icon-wrapper {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #F2F6FA !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}
.mfa-social .icon-wrapper i,
.mfa-social .icon-wrapper i:before {
	font-size: 15px !important;
	line-height: 1 !important;
	margin: 0 !important;
	width: auto !important;
	color: #122A4D !important;
}
.mfa-social:hover .icon-wrapper i,
.mfa-social:hover .icon-wrapper i:before,
.mfa-social:focus-visible .icon-wrapper i,
.mfa-social:focus-visible .icon-wrapper i:before {
	color: #285A9E !important;
}

/* Réseaux : coin haut-droit DU HERO (pas du viewport).
   Header overlay pleine largeur ; heroes MFA = margin 24px.
   → right = 24 (marge hero) + 24 (air intérieur) pour rester dans le cadre.
   → top au-dessus du menu, avec air vs bord haut du banner. */
.mfn-header-tmpl .mcb-header-section {
	position: relative;
}
.mfa-header-socials {
	position: absolute;
	top: 20px;
	right: 48px; /* 24px marge hero + 24px safe area */
	transform: none;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 5;
}
/* Socials header masqués dès le burger (≤1240) — basculent dans le panneau. */
@media (max-width: 1240px) {
	.mfa-header-socials {
		display: none !important;
	}
}

/* Burger : FB + LinkedIn + Instagram au-dessus du CTA. */
.mfa-burger-socials {
	display: none;
	align-items: center;
	gap: 8px;
	order: -1;
}
@media (max-width: 1240px) {
	/* Uniquement le drawer actif (overlay ≠ sticky — 2 barres en DOM). */
	.mfn-header-tmpl-menu-active .mfa-burger-bottom-bar .mfa-burger-socials {
		display: flex !important;
	}
}

/* =========================================================
   Système mobile — hauteur du header
   Option A : pictogramme seul (logo-mfa-mark). À ~40px le monogramme
   reste lisible ; la baseline n’est plus dans le header.
   ========================================================= */
@media (max-width: 767px) {
	.mfn-header-tmpl .column_header_logo img {
		max-height: 44px !important;
		width: auto !important;
	}
}

/* =========================================================
   Système mobile — socle typographique
   BeTheme a une option globale "Responsive font sizes" (ON, réglage
   client existant) qui ignore TOUTE valeur personnalisée par breakpoint
   (les champs "font-size-hN-mobile" de l'option `betheme`) et auto-scale
   les tailles desktop par un ratio fixe (~0.6× pour <479px, confirmé par
   mesure : desktop 65px -> mobile rendu 39px). Désactiver ce toggle
   casserait le scaling de tous les autres textes non renseignés par
   breakpoint (body, menu, title, h4-h6, intro), donc on surcharge ici en
   CSS, scopé mobile, avec !important pour battre le style inline généré
   par le thème (et les tailles custom par widget Elementor, souvent trop
   grandes elles aussi — à ajuster au cas par cas si un titre héro en a
   légitimement besoin, cf. passes de vérification par page).
   ========================================================= */
@media (max-width: 767px) {
	h1, .elementor-widget-heading h1.elementor-heading-title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	h2, .elementor-widget-heading h2.elementor-heading-title {
		font-size: 24px !important;
		line-height: 1.25 !important;
	}
	h3, .elementor-widget-heading h3.elementor-heading-title {
		font-size: 19px !important;
		line-height: 1.3 !important;
	}
}

/* =========================================================
   Système mobile — hero homepage en superposition (comme desktop)
   Sur desktop, texte et photo de Maxime sont côte à côte, donc visibles
   ensemble sans scroll. Sur mobile, les 2 colonnes Elementor empilées
   forçaient à scroller toute la hauteur de l'image avant de voir le
   texte (ou l'inverse). La photo (mfa-portrait-maxime-sourire-doux.png)
   a un fond noir / cutout : on la fait flotter en fond du bloc,
   le texte par-dessus en s'appuyant sur l'espace vide au-dessus des
   épaules du sujet — même esprit que le desktop, "tout visible d'un
   coup", sans reproduire littéralement une mise en page 2 colonnes
   impossible en largeur mobile.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-70c3c39 {
		position: relative;
	}
	.elementor-element-70c3c39 > .elementor-container {
		display: block !important;
		position: relative;
	}
	/* Colonne photo (4435377) : positionnée en absolute, ancrée juste
	   sous le H1 (top ~150px) plutôt qu'après le paragraphe/bouton — la
	   position du H1 varie peu selon la largeur d'écran (contrairement à
	   la fin du paragraphe, qui wrap très différemment), donc cette
	   ancre est bien plus stable sur toute la plage mobile. Résultat :
	   Maxime apparaît VRAIMENT à côté du texte (paragraphe/bouton/
	   légende continuent en dessous de lui à gauche), pas après un bloc
	   de texte qui le repousse tout en bas — corrige le retour utilisateur
	   "Maxime pas en bas mais à droite". Largeur volontairement modeste
	   (55vw) pour ne pas empiéter sur le paragraphe, qui occupe la
	   gauche. */
	.elementor-element-70c3c39 > .elementor-container > .elementor-element-4435377 {
		position: absolute !important;
		top: 130px;
		right: -78px;
		z-index: 2;
		width: 96vw !important;
		max-width: 400px;
		height: 96vw;
		max-height: 620px;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		overflow: hidden;
	}
	.elementor-element-70c3c39 > .elementor-container > .elementor-element-4435377 img {
		height: 118vw;
		max-height: 770px;
		width: auto !important;
		max-width: none !important;
		display: block;
		margin-left: auto;
	}
	/* Le conteneur doit désormais prévoir explicitement assez de place
	   pour Maxime (sorti du flux normal en absolute ci-dessus), en plus
	   du texte qui continue de définir sa propre hauteur naturelle. */
	.elementor-element-70c3c39 > .elementor-container {
		min-height: 460px;
	}
}
/* Sur les écrans les plus étroits (<400px), le paragraphe wrap sur des
   lignes plus courtes qui croisent davantage Maxime à 55vw de large —
   légèrement réduit pour limiter le chevauchement avec le texte tout
   en gardant "à côté", pas "en dessous". */
@media (max-width: 399px) {
	.elementor-element-70c3c39 > .elementor-container > .elementor-element-4435377 {
		width: 82vw !important;
		right: -68px;
	}
}
@media (max-width: 767px) {
	/* Colonne texte (62a70df) : dans le flux normal, la photo vient juste
	   après elle. Largeur réduite (pas pleine largeur) pour décaler
	   visuellement le contenu vers la gauche, comme sur desktop. */
	.elementor-element-70c3c39 > .elementor-container > .elementor-element-62a70df {
		position: relative !important;
		z-index: 3;
		width: 88% !important;
	}
	/* Le texte du hero (H1, paragraphe, etc.) démarrait à 80px du bord
	   (24px de gutter de section + 56px de padding interne propre à
	   cette colonne, hérité du réglage desktop) alors que le logo du
	   header n'est qu'à 37px — décalage visible signalé par l'utilisateur.
	   Padding interne ramené à 13px pour aligner les deux (24+13≈37). */
	.elementor-element-70c3c39 > .elementor-container > .elementor-element-62a70df > .elementor-widget-wrap {
		padding-left: 13px !important;
	}
	/* Le bloc de texte (eyebrow > H1 > paragraphe > bouton > légende)
	   avait de gros espacements verticaux hérités du desktop (44px sous
	   le paragraphe, 40px sous le bouton) — sur mobile, avec Maxime
	   positionné juste après par marge négative, ça faisait un bloc très
	   haut où Maxime finit par apparaître "en bas" plutôt qu'à côté du
	   texte, et poussait les cartes de réassurance sous la ligne de
	   flottaison sur les écrans courants. Resserré pour un ensemble plus
	   compact, plus proche du repère desktop où tout tient dans un seul
	   écran. */
	.elementor-element-1ba11e1 {
		margin-bottom: 20px !important;
	}
	.elementor-element-5970f90 {
		margin-bottom: 16px !important;
	}
	.elementor-element-cb74f0f {
		margin-top: 8px !important;
	}
	/* Tentative précédente : recadrer la photo de fond du hero
	   (mfa-hero-background.jpg) à droite pour révéler le chantier flou.
	   Résultat sur écran réel : texture beaucoup trop présente,
	   illisible sous le texte sur toute la hauteur du bloc — désactivée,
	   on revient au cadrage centre par défaut (partagé avec le desktop,
	   beaucoup plus discret en `cover` sur un format mobile étroit). */

	/* =========================================================
	   Refonte "photo pleine largeur + voile sombre + texte blanc",
	   inspirée d'un concurrent (kpark.fr) analysé en détail à la
	   demande : une seule photo de fond derrière tout le bloc, un
	   double dégradé sombre (vertical ET horizontal — plus sombre en
	   haut/bas et à gauche où le texte doit rester lisible, plus clair
	   à droite pour laisser deviner la photo/Maxime), texte en blanc.
	   Seule différence assumée avec la référence : on garde Maxime
	   (détouré) au premier plan à droite du texte plutôt qu'une photo
	   de scène complète, faute d'avoir ce type de visuel en stock.
	   ========================================================= */
	.elementor-element-968a580 > .elementor-widget-wrap {
		position: relative;
	}
	.elementor-element-968a580 > .elementor-widget-wrap::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(180deg, rgba(18,42,77,0.55) 0%, rgba(18,42,77,0.22) 35%, rgba(18,42,77,0.32) 75%, rgba(18,42,77,0.78) 100%),
			linear-gradient(90deg, rgba(18,42,77,0.62) 0%, rgba(18,42,77,0.28) 55%, rgba(18,42,77,0.05) 100%);
	}
	.elementor-element-70c3c39 {
		z-index: 2;
	}
	.elementor-element-70c3c39 h1,
	.elementor-element-70c3c39 .elementor-widget-text-editor p {
		color: #FFFFFF !important;
	}
	.elementor-element-70c3c39 .elementor-element-cb74f0f p {
		color: rgba(255,255,255,0.72) !important;
	}
}

/* =========================================================
   Icônes du panneau "Pourquoi choisir MFA Travaux ?" (colonne
   5382649). Fond clair (#EFF1F4) : SVG colorés (#285A9E) natifs,
   pastille soft #EAF2FB — plus de filtre invert (réservé à l'ancien
   panneau sombre).
   ========================================================= */
.elementor-element-03a8aec .elementor-icon-box-icon img,
.elementor-element-e7a9442 .elementor-icon-box-icon img,
.elementor-element-39b9089 .elementor-icon-box-icon img {
	filter: none;
}

/* =========================================================
   Système mobile — cartes réassurance homepage, intégrées au même
   panneau sombre que le hero (section 52ebb3f : "Devis gratuit" /
   "Zéro surprise" / "Entreprise locale" / "Artisans certifiés").
   Avant : bloc empilé vertical sur fond clair, visuellement détaché du
   hero. Repris dans le même esprit que la référence concurrente :
   panneau sombre continu directement sous la photo (pas de "carte
   blanche" séparée), grille 2x2, icônes sur pastille translucide,
   texte blanc.
   ========================================================= */
@media (max-width: 767px) {
	/* Couleurs remises "comme au début" sur demande (pas de panneau
	   sombre façon kpark pour cette partie) : fond clair d'origine,
	   texte navy, icônes telles quelles — seule la mise en page (grille
	   2x2 + flottement au-dessus de la photo) est conservée. */
	.elementor-element-66238c9 {
		margin-top: -60px !important;
		position: relative;
		z-index: 4;
		/* Padding d'origine (24px) réduit pour gagner de la place — objectif
		   "tout visible sans scroll" (référence kpark), sans toucher aux
		   couleurs. */
		padding: 14px !important;
	}
	.elementor-element-52ebb3f > .elementor-container {
		flex-wrap: wrap !important;
	}
	.elementor-element-52ebb3f > .elementor-container > .elementor-column {
		width: 50% !important;
	}
	.elementor-element-52ebb3f .elementor-widget-wrap.elementor-element-populated {
		padding: 8px 10px !important;
	}
	.elementor-element-52ebb3f .elementor-image-box-title {
		margin-bottom: 6px !important;
	}
}

/* =========================================================
   Strate "MFA TRAVAUX EN VIDÉO" (homepage + page À propos)
   Classes partagées : .mfa-video-strate / -inner / -media
   Même comportement que "Nos prestations" :
   - texte large mais inset (gutter ~24px, pas full width)
   - vidéo full bleed bord à bord, comme le slider
   ========================================================= */
@media (max-width: 767px) {
	/* Colonnes spacer 15/70/15 : on garde uniquement la centrale. */
	.mfa-video-strate-inner > .elementor-container {
		flex-wrap: wrap !important;
	}
	.mfa-video-strate-inner > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.mfa-video-strate-inner > .elementor-container > .elementor-column:first-child,
	.mfa-video-strate-inner > .elementor-container > .elementor-column:last-child {
		display: none !important;
	}
	.mfa-video-strate-inner > .elementor-container > .elementor-column > .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Texte inset : neutralise le padding 30px du widget-wrap colonne. */
	.mfa-video-strate > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.mfa-video-strate {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.mfa-video-strate .elementor-widget-heading,
	.mfa-video-strate .elementor-widget-text-editor {
		width: 100% !important;
		max-width: 100% !important;
	}
	.mfa-video-strate .elementor-widget-text-editor {
		font-size: 16px !important;
		line-height: 1.55 !important;
		color: #5B6472 !important;
	}

	/* Vidéo seule en full bleed (même technique que le slider).
	   Note : Elementor n'émet pas css_classes sur le widget video,
	   donc on cible via .mfa-video-strate-inner .elementor-widget-video. */
	.mfa-video-strate-inner .elementor-widget-video {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.mfa-video-strate-inner .elementor-widget-video,
	.mfa-video-strate-inner .elementor-widget-video .elementor-wrapper,
	.mfa-video-strate-inner .elementor-widget-video iframe {
		border-radius: 0 !important;
	}
}

/* =========================================================
   Système mobile — paragraphes alignés à gauche par défaut
   Constat d'audit : la majorité des paragraphes de contenu (descriptions
   de cartes univers, intro "À propos", intro témoignages...) héritaient
   d'un centrage desktop pensé pour de courtes lignes, mais deviennent
   illisibles une fois centrés sur 3-5 lignes en colonne étroite mobile.
   Exception explicite : les taglines/CTA courts des sections hero
   (.mfa-hero-centered, .mfa-hub-hero-centered) restent centrés, c'est
   voulu pour ces blocs précis.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-widget-text-editor p {
		text-align: left !important;
	}
	/* Exception : uniquement les widgets à largeur par défaut (fil d'Ariane,
	   courtes taglines) — PAS les widgets à largeur personnalisée
	   (`__width-initial`, réglage Elementor "largeur en %"), qui signalent
	   systématiquement un vrai paragraphe d'intro multi-lignes et doivent
	   rester alignés à gauche même dans un bloc hero. */
	.mfa-hero-centered .elementor-widget-text-editor:not(.elementor-widget__width-initial):not([data-id="1ba11e1"]):not([data-id="cb74f0f"]) p,
	.mfa-hub-hero-centered .elementor-widget-text-editor:not(.elementor-widget__width-initial) p {
		text-align: center !important;
	}
	/* Cas particulier trouvé en re-audit : ces 2 widgets du hero homepage
	   ont un réglage Elementor explicite align:left/align_mobile (corrigé
	   nativement dans _elementor_data) qui contredit l'exception
	   générique ci-dessus — exclus explicitement plutôt que recentrés. */
}

/* =========================================================
   Système mobile — boutons anti-retour à la ligne
   Plusieurs CTA (bouton header "Devis gratuit", "Découvrir cette
   prestation" sur les hubs univers) se cassent sur 2 lignes sur mobile
   faute de largeur suffisante pour leur padding desktop. Règle générique :
   ne jamais wrapper le texte, laisser le bouton s'élargir à son contenu.
   ========================================================= */
@media (max-width: 767px) {
	.mfn-header-tmpl .button,
	.elementor-button,
	a.button,
	button.button {
		white-space: nowrap !important;
		width: auto !important;
		max-width: 100%;
	}
	.elementor-button .elementor-button-text {
		white-space: nowrap !important;
	}
	/* Bouton CTA du hero homepage (widget 5970f90) : le libellé est
	   désormais court ("Devis gratuit"), plus besoin du forçage
	   width:100% / wrap sur 2 lignes prévu pour l'ancien texte long.
	   On le laisse à la largeur de son contenu, comme les autres CTA. */
	.elementor-element-5970f90 {
		width: auto !important;
		max-width: 100%;
	}
	.elementor-element-5970f90 .elementor-button {
		width: auto !important;
		min-width: 0 !important;
		white-space: nowrap !important;
	}
	.elementor-element-5970f90 .elementor-button-text {
		white-space: nowrap !important;
	}
}

/* =========================================================
   Colonnes pleine largeur (elementor-col-100) dont le widget-wrap
   porte à la fois margin-left ET margin-right hérités du desktop
   (24px chacun) tout en gardant une largeur de 100% du parent flex :
   en flexbox, une largeur en % ne se réduit PAS automatiquement pour
   compenser les marges du même élément, donc le total marge+largeur+
   marge dépasse le conteneur de 48px — débordement invisible (pas de
   scrollbar, juste du texte silencieusement rogné au bord de l'écran,
   ex. "Nos 5 univers d'expertise" : le paragraphe d'intro était coupé
   à droite). Repéré via audit automatisé (Playwright) de toutes les
   colonnes 100% de la home, pas seulement celle signalée par le
   client. Fix : largeur explicite qui soustrait les deux marges.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-d88c61b > .elementor-widget-wrap,
	.elementor-element-575c8a1 > .elementor-widget-wrap {
		width: calc(100% - 48px) !important;
	}
	/* Carte CTA "N'attendez plus" (236e82f) : héritait d'une largeur/
	   marge desktop asymétrique (54px à gauche, 13px à droite) au lieu
	   du gutter standard 24px/24px utilisé partout ailleurs sur la home
	   — signalé par le client comme "pas assez large". Le premier essai
	   (calc(100% - 48px) sur la section) résolvait son % contre le
	   CONTENU du wrapper parent, qui a lui-même 30px de padding hérité
	   du desktop (jamais neutralisé sur mobile) — d'où une carte encore
	   trop étroite (234px) malgré la règle. Padding parent neutralisé +
	   gutter recalculé contre la vraie largeur disponible (342px). */
	.elementor-element-575c8a1 > .elementor-widget-wrap {
		padding: 0 !important;
	}
	.elementor-element-236e82f {
		flex: 0 0 calc(100% - 48px) !important;
		width: calc(100% - 48px) !important;
		max-width: calc(100% - 48px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* =========================================================
   Padding vertical excessif hérité du desktop sur plusieurs sections
   homepage — repéré par le client sur "Ils nous font confiance"
   (80px haut/bas, soit 160px de vide avant même le contenu) ; audit
   étendu aux autres sections avec le même souci.
   ========================================================= */
@media (max-width: 767px) {
	/* "Ils nous font confiance" (logos partenaires) : 80px 0px -> 40px 0px */
	.elementor-element-99f46e6 {
		padding: 40px 0px !important;
	}
	/* Strate Actualités (home + about) : 60px 0px 100px -> 40px 0px 48px */
	.elementor-element-32f6302,
	.mfa-actu-teaser-section {
		padding: 40px 0px 48px !important;
	}
	/* Widget devis (formulaire multi-étapes) : 48px 8px -> 32px 8px */
	.elementor-element-974af18 {
		padding: 32px 8px !important;
	}
}

/* =========================================================
   Section "Ils nous recommandent" (avis clients) : la photo du
   couple (colonne 39bd640, image d1f527a) était petite et inset dans
   sa colonne, avec la pastille "4.5/5" (icon-box 3277c4f, position
   absolute top:93px) qui recouvrait près des 2/3 de sa hauteur —
   client : "l'image du couple doit être plus visible". Photo agrandie
   en plein cadre (object-fit:cover) et badge repositionné en bas
   (au lieu d'un top fixe hérité du desktop) pour libérer tout le haut
   de la photo, quelle que soit la hauteur.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-39bd640,
	.elementor-element-39bd640 > .elementor-widget-wrap {
		height: 360px !important;
	}
	.elementor-element-d1f527a {
		position: absolute !important;
		inset: 0 !important;
		height: 100% !important;
	}
	.elementor-element-d1f527a .elementor-widget-container,
	.elementor-element-d1f527a img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	.elementor-element-3277c4f {
		top: auto !important;
		bottom: 0 !important;
	}
}

/* =========================================================
   Bouton "Demander mon devis gratuit" de la carte CTA finale
   (widget 3968b4e) : le widget lui-même (pas seulement le <a> interne)
   a une largeur fixe de 186px héritée du desktop, plus étroite que son
   texte sur 1 ligne (209px) — débordement du texte hors de la pastille
   blanche des deux côtés malgré la règle anti-wrap générique (qui ne
   touche que le bouton, pas son wrapper widget). Élargi à son contenu,
   comme le bouton hero (5970f90) plus haut sur la page.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-3968b4e {
		width: auto !important;
		max-width: 100% !important;
	}
}

/* =========================================================
   Icône burger du header transparent (état "non scrollé", avant que
   le header sticky blanc ne prenne le relais) : couleur navy foncée
   (#122A4D) héritée du header scrollé/blanc, quasi invisible sur les
   héros photo sombres du site (homepage + pages hub/prestation) —
   signalé par le client. Le header sticky (classe
   mfn-header-sticky-section, fond blanc) garde sa couleur navy
   d'origine, seul l'état transparent passe en blanc.
   ========================================================= */
.mcb-header-section:not(.mfn-header-sticky-section) .mfn-header-menu-burger i {
	color: #FFFFFF !important;
}

/* =========================================================
   Héros photo des 5 pages hub univers (Menuiseries Extérieures,
   Couverture & Zinguerie, Chauffage & Ventilation, Rénovation
   Intérieure/Extérieure) : carte à coins arrondis avec 24px de marge
   sur les 4 côtés — cohérent et voulu en desktop (vérifié), mais sur
   mobile ça laisse une bande de fond clair tout autour et un vrai
   "cadre" au lieu d'un héros plein cadre — signalé par le client
   ("faire en sorte que le fond prenne toute la largeur et la
   hauteur"). Marge neutralisée sur mobile pour un héros bord à bord
   comme sur la homepage ; arrondi gardé en bas uniquement (coins du
   haut carrés), même traitement que le héros des pages prestation.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-b925444 > .elementor-widget-wrap,
	.elementor-element-3404749 > .elementor-widget-wrap,
	.elementor-element-ed665ab > .elementor-widget-wrap,
	.elementor-element-e99f330 > .elementor-widget-wrap,
	.elementor-element-1b448c7 > .elementor-widget-wrap {
		margin: 0 !important;
		border-radius: 0 0 24px 24px !important;
	}
}

/* =========================================================
   Menu mobile — refonte inspirée de kpark.fr (structure, pas les
   couleurs : on garde la palette MFA existante, demande explicite du
   client "surtout pas changement de couleur").
   Le menu mobile utilise désormais SA PROPRE liste ("Main menu mob",
   assignée via l'option native betheme['mobile-menu']) plutôt que de
   dupliquer le menu desktop : les 5 univers sont sortis de sous
   "Prestations" pour apparaître à plat (pas de sous-menu à ouvrir),
   classes mfa-mm-* ajoutées par item pour cibler chaque icône, plus 2
   items ajoutés (mfa-mm-cta "Devis gratuit", mfa-mm-phone téléphone).
   Bugs corrigés au passage : panneau à 350px (bande de page visible à
   droite) -> pleine largeur ; texte centré (justify-content:center
   hérité du thème) -> aligné à gauche comme demandé.
   ========================================================= */
@media (max-width: 1240px) {
	/* Bandeau : le panneau ne couvre pas 100% de la largeur — une fine
	   bande de 56px reste visible à gauche pour laisser entrevoir le
	   site en arrière-plan (comportement voulu, cf. référence kpark). */
	.mfn-header-tmpl-menu-sidebar {
		width: calc(100vw - 56px) !important;
		/* 100vh Safari = sous la barre URL → bouton bas invisible.
		   svh = hauteur visible réelle ; overflow hidden, scroll interne. */
		height: 100vh !important;
		height: 100dvh !important;
		height: 100svh !important;
		max-height: 100svh !important;
		overflow: hidden !important;
		/* Overlay + sticky : même chrome (sticky n'avait ni fond blanc
		   ni typo 20px dans le Header Builder). */
		background-color: #FFFFFF !important;
	}
	.mfn-header-tmpl-menu-sidebar .mfn-header-menu > li > a.mfn-menu-link,
	ul[id^="menu-main-menu-mob"] .mfn-menu-link {
		font-size: 20px !important;
		line-height: 28px !important;
		font-weight: 500 !important;
		letter-spacing: -1px !important;
		color: #122A4D !important;
	}
	.mfn-header-tmpl-menu-sidebar .mfn-header-menu > li:hover > a.mfn-menu-link,
	.mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.current-menu-item > a.mfn-menu-link,
	ul[id^="menu-main-menu-mob"] .mfn-menu-li:hover > a.mfn-menu-link,
	ul[id^="menu-main-menu-mob"] .mfn-menu-li.current-menu-item > a.mfn-menu-link {
		color: #285A9E !important;
	}
	.mfn-header-tmpl-menu-sidebar-left {
		/* Fermé : hors écran à droite (entrée depuis la droite). */
		left: 100vw !important;
		right: auto !important;
	}
	.mfn-header-tmpl-menu-active .mfn-header-tmpl-menu-sidebar-left {
		left: 56px !important;
	}
	/* Croix de fermeture : par défaut le thème la place en haut à
	   gauche (.mfn-close-icon-pos-default -> left:10px). Déplacée en
	   haut à droite, alignée avec le logo sur la même ligne. */
	.mfn-header-tmpl-menu-sidebar .mfn-close-icon {
		top: 16px !important;
		left: auto !important;
		right: 20px !important;
		z-index: 3;
	}
	/* Loupe recherche — haut du drawer (à gauche de la croix). */
	.mfn-header-tmpl-menu-sidebar .mfa-drawer-search {
		position: absolute;
		top: 12px;
		right: 56px;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 50%;
		background: #EAF2FB;
		color: #122A4D;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}
	.mfn-header-tmpl-menu-sidebar .mfa-drawer-search:hover,
	.mfn-header-tmpl-menu-sidebar .mfa-drawer-search:focus-visible {
		background: #d6e6f7;
		color: #285A9E;
		outline: none;
	}
	.mfn-header-tmpl-menu-sidebar .mfa-drawer-search i {
		font-size: 22px;
		line-height: 1;
		color: inherit;
		-webkit-text-stroke: 0.35px currentColor;
	}
	.mfn-header-tmpl-menu-sidebar-wrapper {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		height: 100% !important;
		max-height: 100% !important;
		padding: 12px 20px calc(140px + env(safe-area-inset-bottom, 0px)) !important;
		position: relative !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		box-sizing: border-box;
	}
	/* Logo MFA en haut du panneau — laisse la place loupe + croix à droite. */
	.mfn-header-tmpl-menu-sidebar-wrapper::before {
		content: "";
		display: block;
		width: 100%;
		max-width: calc(100% - 112px);
		flex: 0 0 auto;
		height: 56px;
		margin-bottom: 8px;
		background-image: url("/wp-content/uploads/2026/07/logo-mfa-mark.png");
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
	}
	ul[id^="menu-main-menu-mob"] {
		width: 100% !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		/* Liste centrée verticalement dans l'espace sous le logo. */
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
	}
	ul[id^="menu-main-menu-mob"] .mfn-menu-li {
		width: 100% !important;
		display: flex !important;
		justify-content: flex-start !important;
	}
	/* Liens alignés à gauche (icône + label). */
	ul[id^="menu-main-menu-mob"] .mfn-menu-link {
		justify-content: flex-start !important;
		width: 100% !important;
		padding: 9px 0 !important;
		gap: 12px;
	}
	/* Pas de sous-menu dans cette liste à plat : la flèche générique
	   du thème n'a plus lieu d'être sur aucun item. */
	ul[id^="menu-main-menu-mob"] .menu-sub {
		display: none !important;
	}
	/* Icône à gauche de chaque item — set d'icônes ligne (chantier 11),
	   + Actualités / Recrutement (cokSzeLe). Les 5 univers réutilisent
	   les PNG du widget devis. */
	ul[id^="menu-main-menu-mob"] .mfn-menu-link::before {
		width: 22px;
		flex-shrink: 0;
		text-align: center;
		color: #285A9E;
	}
	.mfa-mm-accueil .mfn-menu-link::before,
	.mfa-mm-prestations .mfn-menu-link::before,
	.mfa-mm-realisations .mfn-menu-link::before,
	.mfa-mm-apropos .mfn-menu-link::before,
	.mfa-mm-contact .mfn-menu-link::before,
	.mfa-mm-menuiseries .mfn-menu-link::before,
	.mfa-mm-couverture .mfn-menu-link::before,
	.mfa-mm-chauffage .mfn-menu-link::before,
	.mfa-mm-renovint .mfn-menu-link::before,
	.mfa-mm-renovext .mfn-menu-link::before,
	.mfa-mm-actualites .mfn-menu-link::before,
	.mfa-mm-recrutement .mfn-menu-link::before {
		content: "";
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		height: 22px;
	}
	.mfa-mm-accueil .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-accueil.png"); }
	.mfa-mm-prestations .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-prestations.png"); }
	.mfa-mm-realisations .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-realisations.png"); }
	.mfa-mm-apropos .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-apropos.png"); }
	.mfa-mm-contact .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-apropos.png"); }
	.mfa-mm-menuiseries .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-devis-menuiseries-1.png"); }
	.mfa-mm-couverture .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-devis-couverture-1.png"); }
	.mfa-mm-chauffage .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-devis-chauffage-1.png"); }
	.mfa-mm-renovint .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-devis-interieur-1.png"); }
	.mfa-mm-renovext .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-devis-exterieur-1.png"); }
	.mfa-mm-actualites .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-actualites.png"); }
	.mfa-mm-recrutement .mfn-menu-link::before { background-image: url("/wp-content/uploads/2026/07/mfa-icon-menu-recrutement.png"); }
	/* CTA + réseaux : fixés en bas, uniquement pour le drawer ouvert
	   (2 burgers overlay/sticky → 2 barres ; ne pas les afficher via
	   html.mfn-header-tmpl-burger-sidebar-opened sinon doublon). */
	.mfa-burger-bottom-bar {
		display: none;
	}
	.mfn-header-tmpl-menu-active .mfa-burger-bottom-bar {
		position: fixed !important;
		left: calc(56px + 20px) !important;
		right: auto !important;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px;
		width: auto !important;
		margin: 0 !important;
		z-index: 10050 !important;
	}
	.mfn-header-tmpl-menu-active .mfa-burger-bottom-bar .mfa-mm-cta {
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		width: auto !important;
		margin: 0 !important;
		z-index: auto !important;
	}
	/* Bandeau cookies masqué quand le burger est ouvert (#mfn-gdpr
	   z-index 10000 passe au-dessus du header et cachait le CTA).
	   WhatsApp reste visible. */
	html.mfn-header-tmpl-burger-sidebar-opened #mfn-gdpr,
	body:has(.mfn-header-tmpl-menu-active) #mfn-gdpr {
		display: none !important;
	}
	.mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.mfa-mm-cta > a.mfn-menu-link,
	ul[id^="menu-main-menu-mob"] .mfa-mm-cta .mfn-menu-link {
		background-color: #285A9E !important;
		color: #FFFFFF !important;
		border-radius: 999px;
		padding: 14px 26px !important;
		justify-content: center !important;
		/* Même police que les boutons BeTheme (button-font-family). */
		font-family: "Plus Jakarta Sans", sans-serif !important;
		font-weight: 600;
		font-size: 15px !important;
		line-height: 1.2 !important;
		letter-spacing: normal;
		width: max-content !important;
		max-width: 100%;
		flex: 0 0 auto !important;
		box-sizing: border-box;
	}
	.mfa-mm-cta .mfn-menu-link::before {
		display: none;
	}
	.mfn-header-tmpl-menu-sidebar .mfn-header-menu > li.mfa-mm-cta > a.mfn-menu-link .menu-label,
	.mfa-mm-cta .menu-label {
		color: #FFFFFF !important;
		font-family: "Plus Jakarta Sans", sans-serif !important;
		font-weight: 600 !important;
		font-size: 15px !important;
		line-height: 1.2 !important;
		letter-spacing: normal;
	}
	/* Pas de numéro de téléphone dans le menu mobile MFA. */
	ul[id^="menu-main-menu-mob"] .mfa-mm-phone,
	.mfa-mm-phone {
		display: none !important;
	}
}

/* =========================================================
   Section "Nos derniers chantiers" de la page à propos (mobile) :
   contrairement à la homepage (widget slider natif), cette section
   était une simple grille de 4 colonnes qui s'empile verticalement au
   lieu de slider — cassé, pas juste inesthétique. Corrigé en
   réutilisant EXACTEMENT la même technique que le slider "univers"
   (scroll horizontal + snap) plutôt qu'un nouveau composant, cf.
   .elementor-element-f596040 plus bas dans ce fichier.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-b080335 > .elementor-container {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 16px;
		padding-bottom: 6px !important;
	}
	.elementor-element-b080335 > .elementor-container::-webkit-scrollbar {
		display: none;
		height: 0;
	}
	.elementor-element-b080335 > .elementor-container > .elementor-column {
		flex: 0 0 82% !important;
		width: 82% !important;
		max-width: 82% !important;
		scroll-snap-align: start;
	}
	.elementor-element-b080335 img {
		border-radius: 16px !important;
	}
}

/* =========================================================
   Page à propos (mobile) : section "Notre méthode" (4 étapes
   numérotées) — les cards s'empilaient avec un chevauchement (effet
   sticky/scroll cassé). Transformées en slider horizontal, en
   réutilisant EXACTEMENT la même technique que le slider "univers"
   (.elementor-element-f596040 plus bas dans ce fichier).
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-42a190f > .elementor-container {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 16px;
		padding-bottom: 6px !important;
	}
	.elementor-element-42a190f > .elementor-container::-webkit-scrollbar {
		display: none;
		height: 0;
	}
	.elementor-element-42a190f > .elementor-container > .elementor-column {
		flex: 0 0 82% !important;
		width: 82% !important;
		max-width: 82% !important;
		scroll-snap-align: start;
	}
}

/* =========================================================
   .mfa-card-row sur mobile : stack verticale (matériaux PVC/bois/alu,
   options type moustiquaires, etc.) — plus de rail peek 82%.
   Retour client Bu4hPpBL : choix produits lisibles haut→bas.

   Exclusions (gardent leur carrousel interne dédié) :
   - .mfa-home-real-wrap → track .mfa-home-real__track (réalisations)
   - .mfa-home-actu-wrap → track .mfa-home-actu__track (actualités)
   Ces wraps n'ont qu'1 colonne Elementor : le stack 100% ne casse
   pas le slider JS/CSS interne. Partenaires = .mfa-partners-carousel
   (hors .mfa-card-row). Avis shortcode = .mfa-avis-elementor /
   .mfa-reviews-list (hors ce bloc). Les rangées Elementor « avis »
   plain .mfa-card-row s'empilent aussi (lecture verticale OK).
   ========================================================= */
@media (max-width: 767px) {
	.mfa-card-row > .elementor-container {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		overflow: visible !important;
		scroll-snap-type: none;
		gap: 16px !important;
	}
	.mfa-card-row > .elementor-container > .elementor-column {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		scroll-snap-align: none;
	}
}

/* =========================================================
   MFA slider arrows — pattern unique (réf. avis / témoignages)
   Cercle blanc 44px + ombre, chevron navy, hover fill navy.
   Layout (absolute / gutter) reste dans chaque CSS composant.
   ========================================================= */
:root {
	--mfa-slider-arrow-size: 44px;
	--mfa-slider-arrow-navy: #122A4D;
	--mfa-slider-arrow-bg: #ffffff;
	--mfa-slider-arrow-shadow: 0 6px 18px rgba(18, 42, 77, 0.14);
	--mfa-slider-arrow-shadow-hover: 0 8px 22px rgba(18, 42, 77, 0.22);
	--mfa-slider-arrow-shadow-disabled: 0 4px 12px rgba(18, 42, 77, 0.08);
}

.mfa-home-real__btn,
.mfa-reviews-list__btn,
.mfa-lightbox__nav,
.mfa-lightbox__close,
.elementor-element-379c07b .slider_prev,
.elementor-element-379c07b .slider_next {
	box-sizing: border-box;
	width: var(--mfa-slider-arrow-size);
	height: var(--mfa-slider-arrow-size);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--mfa-slider-arrow-bg);
	color: var(--mfa-slider-arrow-navy);
	box-shadow: var(--mfa-slider-arrow-shadow);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.mfa-home-real__btn:hover:not(:disabled),
.mfa-home-real__btn:focus-visible:not(:disabled),
.mfa-reviews-list__btn:hover:not(:disabled),
.mfa-reviews-list__btn:focus-visible:not(:disabled),
.mfa-lightbox__nav:hover,
.mfa-lightbox__nav:focus-visible,
.mfa-lightbox__close:hover,
.mfa-lightbox__close:focus-visible,
.elementor-element-379c07b .slider_prev:hover,
.elementor-element-379c07b .slider_next:hover {
	background: var(--mfa-slider-arrow-navy);
	color: #ffffff;
	box-shadow: var(--mfa-slider-arrow-shadow-hover);
	outline: none;
}

.mfa-home-real__btn:disabled,
.mfa-reviews-list__btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
	background: var(--mfa-slider-arrow-bg);
	color: var(--mfa-slider-arrow-navy);
	box-shadow: var(--mfa-slider-arrow-shadow-disabled);
}

.mfa-home-real__btn.is-hidden,
.mfa-reviews-list__btn.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.mfa-home-real__btn-icon,
.mfa-reviews-list__btn-icon {
	display: grid;
	place-items: center;
	line-height: 0;
}

.mfa-home-real__btn-icon--prev,
.mfa-reviews-list__btn-icon--prev {
	transform: scaleX(-1);
}

/* Legacy BeTheme portfolio_slider (si encore présent) */
.elementor-element-379c07b .slider_prev,
.elementor-element-379c07b .slider_next {
	top: 50% !important;
	margin-top: calc(var(--mfa-slider-arrow-size) / -2) !important;
	opacity: 1 !important;
	background-color: var(--mfa-slider-arrow-bg) !important;
	color: var(--mfa-slider-arrow-navy) !important;
}
.elementor-element-379c07b .slider_prev { left: 12px !important; }
.elementor-element-379c07b .slider_next { right: 12px !important; }
.elementor-element-379c07b .slider_prev i,
.elementor-element-379c07b .slider_next i {
	line-height: var(--mfa-slider-arrow-size) !important;
	font-size: 15px !important;
	color: inherit !important;
}
.elementor-element-379c07b .slider_prev:hover,
.elementor-element-379c07b .slider_next:hover {
	background-color: var(--mfa-slider-arrow-navy) !important;
	color: #ffffff !important;
}
@media (max-width: 767px) {
	.elementor-element-379c07b .image_frame,
	.elementor-element-379c07b .image_wrapper,
	.elementor-element-379c07b img {
		border-radius: 16px !important;
	}
}

/* =========================================================
   Bloc "Notre engagement" homepage (mobile) : l'image du haut était
   à 75% de largeur, centrée avec marge — demandée en pleine largeur,
   bord à bord. Le widget est imbriqué dans un container "boxed" avec
   son propre gutter (colonne/section) ; on sort de ce gutter avec la
   technique 100vw/marge négative plutôt que de toucher tous les
   parents en cascade.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-45c4e6c {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.elementor-element-45c4e6c img {
		width: 100% !important;
		border-radius: 0 !important;
	}
}

/* =========================================================
   Bloc réassurance 4 items (Devis gratuit / Zéro surprise / Entreprise
   locale / Artisans certifiés — homepage x2 + les 34 pages prestation)
   sur mobile : doit TOUJOURS être en grille 2x2, jamais empilé en une
   seule colonne verticale. Classe partagée "mfa-reassurance-row"
   ajoutée directement dans _elementor_data de chaque occurrence pour
   cibler ce bloc de façon uniforme, quel que soit l'ID Elementor
   (généré différemment par page).
   ========================================================= */
@media (max-width: 767px) {
	.mfa-reassurance-row > .elementor-container {
		flex-wrap: wrap !important;
		row-gap: 28px;
	}
	.mfa-reassurance-row > .elementor-container > .elementor-column {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
	}
}

/* =========================================================
   Page devis : réassurance 3 items (Devis gratuit / Réponse 48h /
   Sans engagement) — 3 colonnes desktop ET mobile, padding serré.
   ========================================================= */
.mfa-reassurance-3 > .elementor-container {
	flex-wrap: nowrap !important;
	gap: 4px;
}
.mfa-reassurance-3 > .elementor-container > .elementor-column {
	width: 33.333% !important;
	max-width: 33.333% !important;
	flex: 0 0 33.333% !important;
}
.mfa-reassurance-3 .elementor-column > .elementor-element-populated {
	padding: 4px 6px !important;
}
.mfa-reassurance-3 .elementor-image-box-title,
.mfa-reassurance-3 .elementor-icon-box-title {
	font-size: 16px !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}
.mfa-reassurance-3 .elementor-image-box-description,
.mfa-reassurance-3 .elementor-icon-box-description {
	display: none !important;
}
/* Desktop : icônes plus petites, titre centré verticalement à côté,
	   bloc icône+texte centré dans la colonne */
@media (min-width: 768px) {
	.mfa-reassurance-3 .elementor-widget-image-box .elementor-widget-container,
	.mfa-reassurance-3 .elementor-widget-icon-box .elementor-widget-container {
		display: flex !important;
		justify-content: center !important;
	}
	.mfa-reassurance-3 .elementor-image-box-wrapper,
	.mfa-reassurance-3 .elementor-icon-box-wrapper {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px;
		width: auto !important;
		max-width: max-content;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.mfa-reassurance-3 .elementor-image-box-img,
	.mfa-reassurance-3 .elementor-icon-box-icon {
		margin: 0 !important;
		float: none !important;
		flex-shrink: 0;
	}
	.mfa-reassurance-3 .elementor-image-box-img img,
	.mfa-reassurance-3 .elementor-icon-box-icon img {
		width: 44px !important;
		max-width: 44px !important;
		height: auto !important;
	}
	.mfa-reassurance-3 .elementor-image-box-content,
	.mfa-reassurance-3 .elementor-icon-box-content {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}
}
@media (max-width: 767px) {
	.mfa-reassurance-3 > .elementor-container {
		flex-wrap: nowrap !important;
		gap: 2px;
		row-gap: 0 !important;
	}
	.mfa-reassurance-3 > .elementor-container > .elementor-column {
		width: 33.333% !important;
		max-width: 33.333% !important;
		flex: 0 0 33.333% !important;
	}
	.mfa-reassurance-3 .elementor-column > .elementor-element-populated {
		padding: 2px 2px !important;
	}
	.mfa-reassurance-3 .elementor-image-box-img,
	.mfa-reassurance-3 .elementor-icon-box-icon {
		margin-bottom: 6px !important;
	}
	.mfa-reassurance-3 .elementor-image-box-img img,
	.mfa-reassurance-3 .elementor-icon-box-icon img {
		max-width: 40px !important;
		width: 40px !important;
	}
	.mfa-reassurance-3 .elementor-image-box-title,
	.mfa-reassurance-3 .elementor-icon-box-title {
		font-size: 12px !important;
		line-height: 1.2 !important;
	}
}

/* =========================================================
   "Ce qui nous anime" (page à propos, section 7d4b711) : grille
   2x2 (comme le rendu cible), icônes plus grandes, gaps resserrés.
   max-width pour éviter que la grille s'étire trop en grand écran.
   ========================================================= */
.elementor-element-7d4b711 > .elementor-container {
	max-width: 520px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	flex-wrap: wrap !important;
	row-gap: 12px !important;
}
.elementor-element-7d4b711 > .elementor-container > .elementor-column {
	width: 50% !important;
	max-width: 50% !important;
	flex: 0 0 50% !important;
}
.elementor-element-7d4b711 .elementor-column > .elementor-element-populated {
	padding: 4px 8px !important;
}
.elementor-element-7d4b711 .elementor-icon-box-icon .elementor-icon {
	font-size: 56px !important;
	padding: 14px !important;
}
.elementor-element-7d4b711 .elementor-icon-box-wrapper {
	gap: 6px !important;
}
@media (max-width: 767px) {
	.elementor-element-7d4b711 > .elementor-container {
		row-gap: 10px !important;
		max-width: 100% !important;
	}
	.elementor-element-7d4b711 .elementor-column > .elementor-element-populated {
		padding: 4px 6px !important;
	}
}

/* =========================================================
   Pages univers (mobile) : présentation des prestations en checkerboard
   image/texte. L'ordre alterné devient incohérent une fois empilé sur
   mobile (une rangée sur deux montre le texte avant l'image) — corrigé
   via reverse_order_mobile par rangée directement dans _elementor_data.
   Ici : réduction du gap Elementor ("extended" = 40px) entre l'image et
   sa card de texte, trop grand pour un lien visuel clair entre les deux.
   ========================================================= */
@media (max-width: 767px) {
	.mfa-univers-row > .elementor-container {
		gap: 12px !important;
	}
}

/* =========================================================
   Full-bleed 100vw pour les rails peek ENCORE horizontaux :
   partenaires, méthode (à propos), chantiers à propos, et wraps
   home dont le slider vit DANS le shortcode (réalisations /
   actualités). Univers (f596040) et .mfa-card-row « choix » sont
   passés en stack verticale → plus de full-bleed (padding boxed OK).
   ========================================================= */
@media (max-width: 767px) {
	.mfa-partners-carousel,
	.mfa-card-row.mfa-home-real-wrap,
	.mfa-card-row.mfa-home-actu-wrap,
	.elementor-element-42a190f,
	.elementor-element-b080335 {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	.mfa-card-row.mfa-home-real-wrap > .elementor-container,
	.mfa-card-row.mfa-home-actu-wrap > .elementor-container,
	.elementor-element-42a190f > .elementor-container,
	.elementor-element-b080335 > .elementor-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		scroll-padding-left: 0 !important;
	}
}

/* =========================================================
   Alignement mobile "largeur classique" (= logo header ~37px) :
   le gutter de PAGE (.section_wrapper, padding 16px du thème) se
   cumule avec le padding_mobile Elementor (souvent 24px) + padding
   de colonne (~15px) → titres/textes/images à ~55px, alors que les
   strates .mfa-fullbleed-strate (déjà sorties du gutter) et le logo
   header sont à ~37-39px. On sort les sections top boxed du gutter
   page (même technique 100vw que devis/sliders/fullbleed), sans
   toucher au padding du section_wrapper (qui casserait les sections
   Elementor "stretched").

   Sélecteur volontairement limité à `.elementor > …` : certaines
   sections IMBRIQUÉES (statsrow01 à propos, reassurance/card rows
   homepage) sont mal taguées `elementor-top-section` par Elementor
   alors qu'elles vivent dans une colonne — la règle large les
   envoyait bord à bord (marge négative -29/-39px), plus larges que
   le logo↔burger. Les sliders qui DOIVENT coller au bord gardent
   leur propre règle 100vw (mfa-card-row, etc.) plus bas.
   ========================================================= */
@media (max-width: 767px) {
	.elementor > .elementor-top-section.elementor-section-boxed,
	.mfa-fullbleed-strate {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
}

/* =========================================================
   Bloc CTA final avec photo ("N'attendez plus, demandez votre devis
   gratuit") de la homepage : plus étroit (marge de 24px de chaque
   côté) que son équivalent sur la page à propos ("Envie de valoriser
   votre habitation ?", marge de 16px = gutter de page normal). La
   source du 24px n'est ni un margin ni un radius du composant
   (déjà neutralisés côté mobile) mais le "gap" hérité de la colonne
   parente (section imbriquée seule dans sa colonne, structure propre
   à la homepage) — sortie directe du gutter, comme les autres blocs
   pleine largeur du fichier, pour aligner sur la largeur de la
   version à propos.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-236e82f {
		flex: 0 0 auto !important;
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
		margin-left: 16px !important;
		margin-right: 16px !important;
	}
}

/* =========================================================
   Duo CTA homepage (reco + devis) : côte à côte desktop, empilés
   mobile. Wrapper a7c2e91.mfa-cta-duo — remplace les 2 sections
   full-width empilées qui se ressemblaient trop.
   ========================================================= */
.elementor-section.mfa-cta-duo > .elementor-container {
	align-items: stretch;
}

.elementor-section.mfa-cta-duo .elementor-element-f342978,
.elementor-section.mfa-cta-duo .elementor-element-236e82f {
	height: 100%;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	flex: 1 1 auto !important;
}

.elementor-section.mfa-cta-duo .elementor-element-f342978 > .elementor-container,
.elementor-section.mfa-cta-duo .elementor-element-236e82f > .elementor-container,
.elementor-section.mfa-cta-duo .elementor-element-58fa142,
.elementor-section.mfa-cta-duo .elementor-element-299808d,
.elementor-section.mfa-cta-duo .elementor-element-58fa142 > .elementor-widget-wrap,
.elementor-section.mfa-cta-duo .elementor-element-299808d > .elementor-widget-wrap {
	height: 100%;
}

.elementor-section.mfa-cta-duo .elementor-element-58fa142 > .elementor-widget-wrap,
.elementor-section.mfa-cta-duo .elementor-element-299808d > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.elementor-section.mfa-cta-duo .elementor-widget-heading {
	width: 100% !important;
	max-width: 100%;
}

.elementor-section.mfa-cta-duo .elementor-widget-button {
	width: auto !important;
	max-width: 100% !important;
}

.elementor-section.mfa-cta-duo .elementor-button {
	width: auto !important;
	justify-content: center;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

/* Hiérarchie conversion : bouton devis = accent rouge charte */
.elementor-section.mfa-cta-duo .elementor-element-3968b4e .elementor-button {
	background-color: #DC0B15 !important;
	border-color: #DC0B15 !important;
	color: #FFFFFF !important;
}

.elementor-section.mfa-cta-duo .elementor-element-3968b4e .elementor-button:hover,
.elementor-section.mfa-cta-duo .elementor-element-3968b4e .elementor-button:focus {
	background-color: #122A4D !important;
	border-color: #122A4D !important;
	color: #FFFFFF !important;
}

@media (min-width: 768px) {
	.elementor-section.mfa-cta-duo > .elementor-container {
		gap: 24px;
	}

	.elementor-section.mfa-cta-duo > .elementor-container > .elementor-column {
		padding: 0 !important;
	}
}

@media (max-width: 767px) {
	.elementor-section.mfa-cta-duo > .elementor-container {
		flex-direction: column;
		gap: 16px;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.elementor-section.mfa-cta-duo > .elementor-container > .elementor-column {
		width: 100% !important;
		padding: 0 !important;
	}

	.elementor-section.mfa-cta-duo .elementor-element-f342978,
	.elementor-section.mfa-cta-duo .elementor-element-236e82f {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
}

/* =========================================================
   Bandeaux CTA finaux pages prestation ("N'attendez plus…") —
   Elementor droppe les margins L/R sur les top-sections boxed, donc
   le fond navy partait en full-bleed desktop alors que la home
   (sections imbriquées 236e82f / f342978) reste ~1270px à 1440.
   Classe mfa-cta-bandeau posée sur les 34 fiches prestation.
   Bouton bleu : largeur au contenu, centrée — évite les largeurs
   Elementor hétérogènes d'une fiche à l'autre.
   ========================================================= */
@media (min-width: 768px) {
	.elementor-section.mfa-cta-bandeau {
		width: calc(100% - 60px) !important;
		max-width: 1270px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.elementor-section.mfa-cta-bandeau .elementor-widget-button {
		width: auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.elementor-section.mfa-cta-bandeau .elementor-button {
		width: auto !important;
		min-width: 280px;
		justify-content: center;
	}

	/* CTA photo (home clone) sur /univers/ + pages univers */
	.elementor-section.mfa-cta-photo {
		width: calc(100% - 60px) !important;
		max-width: 1270px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.elementor-section.mfa-cta-photo .elementor-widget-button {
		width: auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.elementor-section.mfa-cta-photo .elementor-button {
		width: auto !important;
		min-width: 280px;
		justify-content: center;
	}
}

/* Carte CTA flottante : air sous le bandeau avant le footer. */
.elementor-section.mfa-cta-bandeau,
.elementor-section.mfa-cta-photo {
	margin-bottom: 60px !important;
}

@media (max-width: 767px) {
	.elementor-section.mfa-cta-bandeau,
	.elementor-section.mfa-cta-photo {
		margin-bottom: 40px !important;
	}
}

/* Empile logo / titre / bouton (le wrap Elementor est en flex-row par défaut) */
.elementor-section.mfa-cta-photo .mfa-cta-photo-inner .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.elementor-section.mfa-cta-photo .mfa-cta-photo-inner .elementor-widget-heading {
	width: 100% !important;
	max-width: 640px;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 767px) {
	.elementor-section.mfa-cta-photo {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.elementor-section.mfa-cta-photo .mfa-cta-photo-inner {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* =========================================================
   Cartes avis clients (slider "Ils nous font confiance", pages
   prestation + à propos) : longueur des témoignages très inégale
   d'une carte à l'autre (une carte quasi vide, une autre pleine de
   texte) — tronqué à 4 lignes maximum partout pour une hauteur de
   carte cohérente au sein d'un même slider. Ciblé via la structure
   (le texte du témoignage suit toujours l'icône guillemets, contrairement
   à la ligne nom/ville qui suit le témoignage) plutôt que par ID,
   pour s'appliquer uniformément sur les 34 pages prestation.
   ========================================================= */
.mfa-card-row .elementor-widget-icon + .elementor-widget-text-editor p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================
   Checklist des teasers de prestation (widget icon-list, pages
   univers) : la taille de police définie dans _elementor_data
   (typography_font_size_mobile) n'est, pour ce type de widget,
   jamais traduite dans le CSS compilé par Elementor (bug/limite
   du widget icon-list — le contrôle typography n'émet pas la règle
   font-size pour .elementor-icon-list-text, seule la couleur
   l'est). Override CSS direct, plus fiable, pour aligner sur la
   taille du texte paragraphe classique du site.
   ========================================================= */
/* =========================================================
   Titres/textes des blocs "icon-box" (sections "Pourquoi... avec MFA
   Travaux ?" et "Notre méthode" des pages prestation) : le titre de
   chaque item rendait à la même taille que sa description en dessous
   (13px les deux), aucune hiérarchie visuelle. Titre remonté à une
   taille de titre cohérente avec le reste du site (h4 côté méthode =
   17px), description gardée proche de sa taille actuelle.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-icon-box-title {
		font-size: 16px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
	}
	.elementor-icon-box-description {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}

@media (max-width: 767px) {
	.elementor-icon-list-text {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
}

/* =========================================================
   Fiches prestation — titres de strate (h2) : même échelle que
   .mfa-prestation-real__title (« Nos réalisations sur ce type… »).
   Couvre Elementor headings + composants PHP (témoignages, vidéo,
   FAQ section title). N’atteint pas les questions accordion
   (.elementor-tab-title / .elementor-accordion-title = pas des h2).
   Spécificité + !important : bat BeTheme responsive + override
   mobile global h2 24px (L1282) et les clamps locaux témoignages/vidéo.
   ========================================================= */
.single-prestation h2,
.single-prestation .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
}

/* =========================================================
   FAQ prestations — même tête que .mfa-faq (réalisations / conseils) :
   cards blanches bordées, question navy à gauche, rond bleu pâle +/−
   à droite. Typo h2 gérée ci-dessus ; ici alignement + rythme seulement.
   Scopé .single-prestation pour ne pas toucher l’apporteur d’affaires.
   ========================================================= */
.single-prestation .elementor-widget-heading:has(+ .elementor-widget-accordion) .elementor-heading-title {
	text-align: left !important;
	color: #122A4D !important;
	margin: 0 0 16px !important;
}

.single-prestation .elementor-widget-accordion .elementor-accordion {
	border: 0 !important;
}

.single-prestation .elementor-widget-accordion .elementor-accordion-item {
	border: 1px solid #E2E8F0 !important;
	border-radius: 12px;
	margin: 0 0 10px !important;
	overflow: hidden;
	background: #fff;
}

.single-prestation .elementor-widget-accordion .elementor-accordion-item:last-child {
	margin-bottom: 0 !important;
}

.single-prestation .elementor-widget-accordion .elementor-tab-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	padding: 16px 18px !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #122A4D !important;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.single-prestation .elementor-widget-accordion .elementor-accordion-title {
	flex: 1 1 auto;
	order: 1;
	padding: 0 !important;
	margin: 0 !important;
	font: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* Icône → droite, dans un rond bleu pâle (parité .mfa-faq__question::after) */
.single-prestation .elementor-widget-accordion .elementor-accordion-icon {
	order: 2;
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background-color: #EAF2FB;
	background-image:
		linear-gradient(#285A9E, #285A9E),
		linear-gradient(#285A9E, #285A9E);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 1.5px, 1.5px 11px;
	color: transparent !important;
	float: none !important;
}

.single-prestation .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background-image: linear-gradient(#285A9E, #285A9E);
	background-size: 11px 1.5px;
}

.single-prestation .elementor-widget-accordion .elementor-accordion-icon-left,
.single-prestation .elementor-widget-accordion .elementor-accordion-icon-right {
	margin: 0 !important;
}

/* Masquer les SVG Font Awesome (viewBox 448×512 asymétrique → croix décentrée) */
.single-prestation .elementor-widget-accordion .elementor-accordion-icon .elementor-accordion-icon-closed,
.single-prestation .elementor-widget-accordion .elementor-accordion-icon .elementor-accordion-icon-opened {
	display: none !important;
}

.single-prestation .elementor-widget-accordion .elementor-tab-content {
	border: 0 !important;
	padding: 0 18px 16px !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: #5B6472 !important;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.single-prestation .elementor-widget-accordion .elementor-tab-content p {
	margin: 0 0 0.6em;
}

.single-prestation .elementor-widget-accordion .elementor-tab-content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.single-prestation .elementor-widget-accordion .elementor-tab-title {
		padding: 14px 16px !important;
		font-size: 0.9375rem !important;
	}

	.single-prestation .elementor-widget-accordion .elementor-tab-content {
		padding: 0 16px 14px !important;
		font-size: 0.875rem !important;
	}
}

/* =========================================================
   Bloc stats "Depuis 2018 / Rhône-Alpes / RGE" (page à propos) :
   sous la photo — titres h3 réduits, icône recentrée au-dessus.
   ========================================================= */
@media (min-width: 768px) {
	.elementor-element-statsrow01 {
		margin-top: 24px;
	}
	.elementor-element-statsrow01 .elementor-icon-box-wrapper {
		text-align: center;
	}
	.elementor-element-statsrow01 .elementor-icon-box-icon {
		margin-left: auto;
		margin-right: auto;
	}
	.elementor-element-statsrow01 .elementor-icon-box-title {
		font-size: 20px !important;
		text-align: center;
	}
	.elementor-element-statsrow01 .elementor-icon-box-description {
		font-size: 14px !important;
		text-align: center;
	}
}

/* Colonne "Notre histoire" (page à propos) : resserrer l'espace
   entre les 3 paragraphes (widgets text-editor empilés). */
.elementor-element-a4cdc7f > .elementor-widget-wrap > .elementor-widget-text-editor {
	margin-bottom: 8px !important;
}
.elementor-element-a4cdc7f > .elementor-widget-wrap > .elementor-widget-text-editor:last-child {
	margin-bottom: 0 !important;
}
.elementor-element-a4cdc7f .elementor-widget-text-editor p {
	margin-bottom: 0 !important;
}

/* Stats "Depuis 2018 / Rhône-Alpes / RGE" : resserrer titre → sous-titre. */
.elementor-element-statsrow01 .elementor-icon-box-title {
	margin-bottom: 2px !important;
	padding-bottom: 0 !important;
}
.elementor-element-statsrow01 .elementor-icon-box-description {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* =========================================================
   Cartes équipe (page à propos) — alignées sur les cards "univers"
   de la homepage (mesures prises via getComputedStyle) :
   - Card : bordure #E5E9F0, radius 24px, overflow hidden
   - Image bord à bord : le gap Elementor default (padding 10px sur
     .elementor-widget-wrap) est annulé — c'était la cause de l'inset
   - Titre card (h5) : 28px / 700 comme le h4 univers
   - Texte card : 17px / line-height 1.6 comme le texte univers
   - Header section : margin eyebrow→titre 20px, titre→cards 32px
     (comme NOS PRESTATIONS / Nos 5 univers) — les anciens
     `margin-bottom: 0` / `padding: 0 20px` sur TOUS les headings
     de teamsec01 écrasaient ce rythme.
   ========================================================= */
.elementor-element-tm1s,
.elementor-element-tm2s,
.elementor-element-tm3s,
.elementor-element-tm4s {
	border: 1px solid #E5E9F0 !important;
	box-shadow: none !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	padding-bottom: 28px !important;
}
/* Annule le padding 10px du gap Elementor "default" qui empêchait
   l'image d'être bord à bord en haut de la carte. */
.elementor-element-tm1s > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-tm2s > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-tm3s > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-tm4s > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0 !important;
}
/* Rythme vertical calqué sur les cards univers (/univers/) :
   image → titre = 32px, titre → texte = 20px. */
.elementor-element-teamsec01 .elementor-widget-image {
	margin: 0 0 32px !important;
}
.elementor-element-teamsec01 .elementor-widget-image img {
	/* Pas de radius propre : la card (overflow:hidden + radius 24px)
	   clippe l'image. Un radius sur l'img en plus créait un croissant
	   blanc aux coins (faux "inset"). */
	border-radius: 0 !important;
	width: 100% !important;
	display: block;
}
/* Contenu texte des cards uniquement (pas le header de section) */
.elementor-element-tm1s .elementor-widget-heading,
.elementor-element-tm2s .elementor-widget-heading,
.elementor-element-tm3s .elementor-widget-heading,
.elementor-element-tm4s .elementor-widget-heading,
.elementor-element-tm1s .elementor-widget-text-editor,
.elementor-element-tm2s .elementor-widget-text-editor,
.elementor-element-tm3s .elementor-widget-text-editor,
.elementor-element-tm4s .elementor-widget-text-editor {
	padding-left: 20px !important;
	padding-right: 20px !important;
	text-align: center !important;
}
.elementor-element-tm1s .elementor-widget-heading,
.elementor-element-tm2s .elementor-widget-heading,
.elementor-element-tm3s .elementor-widget-heading,
.elementor-element-tm4s .elementor-widget-heading {
	margin: 0 0 20px !important;
}
.elementor-element-tm1s h5.elementor-heading-title,
.elementor-element-tm2s h5.elementor-heading-title,
.elementor-element-tm3s h5.elementor-heading-title,
.elementor-element-tm4s h5.elementor-heading-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	margin: 0 !important;
}
.elementor-element-tm1s .elementor-widget-text-editor,
.elementor-element-tm2s .elementor-widget-text-editor,
.elementor-element-tm3s .elementor-widget-text-editor,
.elementor-element-tm4s .elementor-widget-text-editor {
	margin: 0 !important;
}
.elementor-element-tm1s .elementor-widget-text-editor p,
.elementor-element-tm2s .elementor-widget-text-editor p,
.elementor-element-tm3s .elementor-widget-text-editor p,
.elementor-element-tm4s .elementor-widget-text-editor p {
	font-size: 17px !important;
	line-height: 1.6 !important;
	text-align: center !important;
	margin: 0 !important;
}
/* Maxime seul a un sous-titre "rôle" entre le nom et la bio —
   resserré sous le titre, puis 12px avant la description. */
.elementor-element-tm1s .elementor-widget-heading {
	margin-bottom: 6px !important;
}
.elementor-element-tm1s .elementor-element-tm1r {
	margin: 0 0 12px !important;
}

/* Note sous le titre ("Notre équipe évolue…") : corps 17px,
   centrée, puis 32px avant la grille de cartes. */
.elementor-element-teamnote01 {
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: #5B6472 !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	text-align: center !important;
}
.elementor-element-teamnote01 p {
	font-size: 17px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Header de section : eyebrow mb 20px, titre → note 20px
   (comme titre → texte ailleurs), note → cards 32px. */
.elementor-element-teameye01 {
	margin: 0 0 20px !important;
	padding: 0 !important;
	text-align: center !important;
}
.elementor-element-teamtitle01 {
	margin: 0 0 20px !important;
	padding: 0 !important;
	text-align: center !important;
}
.elementor-element-teameye01 .elementor-heading-title,
.elementor-element-teamtitle01 .elementor-heading-title {
	text-align: center !important;
}

@media (min-width: 768px) {
	/* Hauteurs image égales (Maxime portrait vs photos paysage) */
	.elementor-element-teamsec01 .elementor-widget-image,
	.elementor-element-teamsec01 .elementor-widget-image .elementor-widget-container,
	.elementor-element-teamsec01 .elementor-widget-image img {
		height: 260px !important;
	}
	.elementor-element-teamsec01 .elementor-widget-image img {
		object-fit: cover !important;
		object-position: top center;
	}
	.elementor-element-tm1img,
	.elementor-element-tm1img .elementor-widget-container {
		background-color: #DCE9F7;
		background-image: url("/wp-content/uploads/2026/07/mfa-maxime-bg.png");
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}
	/* Maxime desktop : même logique que mobile — pas de scale
	   ancré en bas (ne montrait que le buste). Spécificité >
	   teamsec01 .widget-image img. */
	.elementor-element-teamsec01 .elementor-element-tm1img img {
		object-fit: cover !important;
		object-position: center 15% !important;
		transform: none !important;
	}
}

/* =========================================================
   "Notre méthode" (page à propos) en desktop : les 6 étapes
   s'affichaient sur une seule ligne de 6 colonnes très étroites —
   passées en grille 3 colonnes x 2 lignes, plus lisible.
   ========================================================= */
/* =========================================================
   Intros de section sous titre centré (fiches prestation + à propos) :
   ex. "NOS SOLUTIONS" → paragraphe 70% largeur. text-align:center
   seul ne suffit pas — la boîte custom-width reste collée à gauche
   du flex parent. Même correctif que .mfa-hub-hero-centered /
   .diffgrowth01 : auto-margins + align-self.
   Ciblage : text-editor à largeur Elementor "initial" (%) dans une
   strate .mfa-fullbleed-strate (pattern commun aux ~34 fiches).
   ========================================================= */
.mfa-fullbleed-strate .elementor-widget-text-editor.elementor-widget__width-initial {
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center !important;
}
.mfa-fullbleed-strate .elementor-widget-text-editor.elementor-widget__width-initial,
.mfa-fullbleed-strate .elementor-widget-text-editor.elementor-widget__width-initial .elementor-widget-container,
.mfa-fullbleed-strate .elementor-widget-text-editor.elementor-widget__width-initial p {
	text-align: center !important;
}

/* =========================================================
   Pages prestation (+ à propos) : icon-boxes empilées
   (sections "Pourquoi confier…", "Notre méthode", etc.).
   Elementor force text_align:left — icône + titre + description
   recentrés dans chaque colonne pour un bloc cohérent.
   ========================================================= */
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-block-start .elementor-icon-box-wrapper,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-top .elementor-icon-box-wrapper,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-block-start .elementor-icon-box-content,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-top .elementor-icon-box-content,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-block-start .elementor-icon-box-title,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-top .elementor-icon-box-title,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-block-start .elementor-icon-box-description,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-top .elementor-icon-box-description {
	text-align: center !important;
}
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-block-start .elementor-icon-box-icon,
body:has(.mfa-card-row) .elementor-widget-icon-box.elementor-view-stacked.elementor-position-top .elementor-icon-box-icon {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}

/* =========================================================
   "Ce qui nous différencie" (page à propos) : paragraphe sous le
   titre ("De 150 000 €…"). Largeur custom Elementor 70% le collait
   à gauche de la section — recentré via auto-margins, texte centré,
   corps classique du site (17px).
   ========================================================= */
.elementor-element-diffgrowth01 {
	margin-left: auto !important;
	margin-right: auto !important;
	align-self: center !important;
}
.elementor-element-diffgrowth01,
.elementor-element-diffgrowth01 .elementor-widget-container,
.elementor-element-diffgrowth01 p {
	text-align: center !important;
	font-size: 17px !important;
}

/* =========================================================
   "Ce qui nous différencie" (page à propos) : descriptions des
   6 icon-boxes centrées sous leurs titres (tous breakpoints).
   ========================================================= */
.elementor-element-diffrow01 .elementor-icon-box-wrapper,
.elementor-element-diffrow01 .elementor-icon-box-content,
.elementor-element-diffrow01 .elementor-icon-box-title,
.elementor-element-diffrow01 .elementor-icon-box-description {
	text-align: center !important;
}

/* Pastille "100% fabrication française" : drapeau généré (image). */
.elementor-element-diffb3 .elementor-icon {
	background-color: transparent !important;
	background-image: url("assets/drapeau-france.png") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none !important;
}
/* Garder le SVG en place (invisible) pour conserver la même
   taille que les autres pastilles (icon_size + padding). */
.elementor-element-diffb3 .elementor-icon i,
.elementor-element-diffb3 .elementor-icon svg {
	opacity: 0 !important;
}

/* =========================================================
   "Ce qui nous différencie" (page à propos) en desktop : les 6
   items sur une seule ligne — passés en grille 3 x 2.
   ========================================================= */
@media (min-width: 1025px) {
	.elementor-element-diffrow01 > .elementor-container {
		flex-wrap: wrap !important;
		row-gap: 32px;
	}
	.elementor-element-diffrow01 > .elementor-container > .elementor-column {
		width: 33.333% !important;
		max-width: 33.333% !important;
	}
}

@media (min-width: 1025px) {
	.elementor-element-42a190f > .elementor-container {
		flex-wrap: wrap !important;
		row-gap: 24px;
		max-width: 1220px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.elementor-element-42a190f > .elementor-container > .elementor-column {
		width: 33.333% !important;
		max-width: 33.333% !important;
	}
}

/* =========================================================
   Slider "Notre méthode" (page à propos) : les colonnes du slider
   ont une hauteur égale (stretch), mais la card interne (bordure +
   ombre) ne remplissait pas cette hauteur — restait à sa hauteur de
   contenu naturelle, donnant des cards de hauteur visuellement
   différente d'une étape à l'autre. Même technique que
   .mfa-card-inner (matériaux/avis) appliquée ici à la structure du
   slider méthode.
   ========================================================= */
.elementor-element-42a190f > .elementor-container > .elementor-column {
	display: flex !important;
}
.elementor-element-42a190f > .elementor-container > .elementor-column > .elementor-widget-wrap {
	width: 100%;
	align-self: stretch;
}
.elementor-element-42a190f > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-section {
	height: 100% !important;
	display: flex !important;
}

/* Règle carte contact ac0165d retirée : l'ID ciblait aussi à tort
   le paragraphe Zone d'intervention (d6547f0 → margin-left:-39px).
   L'adresse est désormais le widget HTML 244ad97. */

/* Page Contact : intro + boutons carte/WhatsApp côte à côte */
.elementor-element-cintro02 {
	color: #5B6472;
}
.elementor-element-cintro02 p {
	margin: 0;
	line-height: 1.55;
}

/* Contact — tailles standard (évite h4/h3 Elementor trop gros) */
.elementor-19 .elementor-element-cintro01,
.elementor-19 .elementor-element-cintro01 p {
	font-size: 13px !important;
	line-height: 1.4 !important;
}
.elementor-19 .elementor-element-cintro02,
.elementor-19 .elementor-element-cintro02 p {
	font-size: 15px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
}
/* Labels ADRESSE / ÉCRIVEZ-NOUS */
.elementor-19 .elementor-element-720f12a .elementor-heading-title,
.elementor-19 .elementor-element-f3a7e43 .elementor-heading-title {
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
}
/* Adresse (était h4 28px) */
.elementor-19 .elementor-element-fbc37be .elementor-heading-title {
	font-size: 16px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}
/* Horaires */
.elementor-19 .elementor-element-87482b3,
.elementor-19 .elementor-element-87482b3 p {
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
}
/* Tél / e-mail (étaient h4 28px) */
.elementor-19 .elementor-element-053c4fa .elementor-image-box-title,
.elementor-19 .elementor-element-91c793f .elementor-image-box-title {
	font-size: 16px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}
/* Titre formulaire (était h3 38px) */
.elementor-19 .elementor-element-6fd8247 .elementor-heading-title {
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}
@media (max-width: 767px) {
	.elementor-19 .elementor-element-d0d76c7 .elementor-heading-title {
		font-size: 28px !important;
	}
	.elementor-19 .elementor-element-6fd8247 .elementor-heading-title {
		font-size: 20px !important;
	}
}
/* Hero contact : renforcer un peu le voile si le CSS Elementor
   n'applique pas correctement l'alpha 8 chiffres. */
.mfa-contact-hero > .elementor-background-overlay {
	background-color: rgba(242, 246, 250, 0.82) !important;
}
.elementor-element-02c0e5d > .elementor-widget-wrap {
	flex-wrap: wrap;
}
.elementor-element-02c0e5d > .elementor-widget-wrap > .elementor-element {
	width: 100%;
}
.elementor-element-02c0e5d > .elementor-widget-wrap > .elementor-element-560bdcb,
.elementor-element-02c0e5d > .elementor-widget-wrap > .elementor-element-cwa0001 {
	width: auto !important;
	flex: 0 0 auto;
	max-width: none;
}
.elementor-element-560bdcb .elementor-button,
.elementor-element-cwa0001 .elementor-button {
	width: auto;
}

/* Contact mobile : alignement unique + icônes compactes */
@media (max-width: 767px) {
	/* Gouttière unique 20px pour tout le hero Contact */
	.elementor-19 .elementor-element-3baee6d {
		margin: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.elementor-19 .elementor-element-3baee6d > .elementor-widget-wrap {
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.elementor-19 .elementor-element-cintro01,
	.elementor-19 .elementor-element-cintro02,
	.elementor-19 .elementor-element-d0d76c7 {
		max-width: 100% !important;
		width: 100% !important;
	}
	.elementor-19 .elementor-element-7e7d0a6 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.elementor-19 .elementor-element-02c0e5d.elementor-element,
	.elementor-19 .elementor-element-02c0e5d > .elementor-widget-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Carte formulaire plein bord : texte aligné avec ADRESSE (gouttière 20px) */
	.elementor-19 .elementor-element-daf67af.elementor-element {
		padding: 0 !important;
		margin: 12px -20px 0 !important;
		width: calc(100% + 40px) !important;
	}
	.elementor-19 .elementor-element-daf67af > .elementor-widget-wrap {
		padding: 28px 20px !important;
		border-radius: 24px 24px 0 0 !important;
	}

	/* Icônes tél / mail — colonne fixe 18px, texte aligné */
	.elementor-19 .elementor-element.elementor-element-053c4fa .elementor-image-box-wrapper,
	.elementor-19 .elementor-element.elementor-element-91c793f .elementor-image-box-wrapper {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px;
		text-align: left !important;
	}
	.elementor-19 .elementor-element.elementor-element-053c4fa .elementor-image-box-wrapper .elementor-image-box-img,
	.elementor-19 .elementor-element.elementor-element-91c793f .elementor-image-box-wrapper .elementor-image-box-img {
		width: 18px !important;
		max-width: 18px !important;
		min-width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		flex: 0 0 18px !important;
		line-height: 0 !important;
	}
	.elementor-19 .elementor-element.elementor-element-053c4fa .elementor-image-box-img img,
	.elementor-19 .elementor-element.elementor-element-91c793f .elementor-image-box-img img {
		width: 16px !important;
		height: 16px !important;
		max-width: 16px !important;
		object-fit: contain !important;
		display: block !important;
		margin: 1px auto !important;
	}
	.elementor-19 .elementor-element.elementor-element-053c4fa .elementor-image-box-content,
	.elementor-19 .elementor-element.elementor-element-91c793f .elementor-image-box-content {
		margin: 0 !important;
		text-align: left !important;
		flex: 1 1 auto;
		min-width: 0;
	}
	.elementor-19 .elementor-element.elementor-element-053c4fa .elementor-image-box-title,
	.elementor-19 .elementor-element.elementor-element-91c793f .elementor-image-box-title {
		margin: 0 !important;
		line-height: 1.25 !important;
	}
	.elementor-19 .elementor-element-053c4fa,
	.elementor-19 .elementor-element-91c793f {
		margin-bottom: 4px !important;
	}

	/* Boutons carte / WhatsApp : même largeur, gouttière régulière */
	.elementor-19 .elementor-element-02c0e5d > .elementor-widget-wrap {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
	}
	.elementor-19 .elementor-element-560bdcb,
	.elementor-19 .elementor-element-cwa0001 {
		flex: 1 1 calc(50% - 5px) !important;
		width: calc(50% - 5px) !important;
		max-width: calc(50% - 5px) !important;
		margin: 10px 0 0 !important;
	}
	.elementor-19 .elementor-element-560bdcb {
		margin-right: 10px !important;
	}
	.elementor-19 .elementor-element-560bdcb .elementor-button,
	.elementor-19 .elementor-element-cwa0001 .elementor-button {
		width: 100% !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}

	/* Formulaire CF7 : colonnes BeTheme sans décalage */
	.elementor-19 .wpcf7 .column {
		float: none !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		padding: 0 !important;
	}
	.elementor-19 .wpcf7 input[type="text"],
	.elementor-19 .wpcf7 input[type="email"],
	.elementor-19 .wpcf7 input[type="tel"],
	.elementor-19 .wpcf7 textarea,
	.elementor-19 .wpcf7 input[type="submit"],
	.elementor-19 .wpcf7 .wpcf7-submit {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* =========================================================
   Cartes équipe (mobile) : images 220px ; Maxime 200px avec
   cadrage vérifié en viewport 390px (tête entière visible).
   Spécificité Maxime > teamsec01 .widget-image (sinon 220 gagne).
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-teamsec01 > .elementor-container {
		align-items: stretch !important;
	}
	.elementor-element-tm1s,
	.elementor-element-tm2s,
	.elementor-element-tm3s,
	.elementor-element-tm4s {
		height: auto !important;
		align-self: stretch !important;
	}
	.elementor-element-tm1s > .elementor-container,
	.elementor-element-tm2s > .elementor-container,
	.elementor-element-tm3s > .elementor-container,
	.elementor-element-tm4s > .elementor-container,
	.elementor-element-tm1s > .elementor-container > .elementor-column,
	.elementor-element-tm2s > .elementor-container > .elementor-column,
	.elementor-element-tm3s > .elementor-container > .elementor-column,
	.elementor-element-tm4s > .elementor-container > .elementor-column,
	.elementor-element-tm1s > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.elementor-element-tm2s > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.elementor-element-tm3s > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.elementor-element-tm4s > .elementor-container > .elementor-column > .elementor-widget-wrap {
		height: 100% !important;
	}
	.elementor-element-teamsec01 .elementor-widget-image,
	.elementor-element-teamsec01 .elementor-widget-image .elementor-widget-container,
	.elementor-element-teamsec01 .elementor-widget-image img {
		height: 220px !important;
	}
	.elementor-element-teamsec01 .elementor-widget-image img {
		width: 100% !important;
		object-fit: cover !important;
		object-position: top center;
	}
	.elementor-element-tm1img,
	.elementor-element-tm1img .elementor-widget-container {
		background-color: #DCE9F7;
		background-image: url("/wp-content/uploads/2026/07/mfa-maxime-bg.png");
		background-size: cover;
		background-position: center center;
		overflow: hidden;
	}
	/* Maxime seul : plus bas + cadrage tête (sans transform —
	   le scale coupait le crâne). */
	.elementor-element-teamsec01 .elementor-element-tm1img,
	.elementor-element-teamsec01 .elementor-element-tm1img .elementor-widget-container,
	.elementor-element-teamsec01 .elementor-element-tm1img img {
		height: 200px !important;
	}
	.elementor-element-teamsec01 .elementor-element-tm1img img {
		object-fit: cover !important;
		/* Légèrement remonté (12 → 18) : moins de ciel au-dessus. */
		object-position: center 18% !important;
		transform: none !important;
	}
}

/* Photo "Notre histoire" : plus de sortie pleine largeur — elle suit
   désormais le même inset ~39px que titre/texte (règle boxed ci-dessus). */

/* =========================================================
   Bloc stats "8 ans / Ain & Rhône / RGE" (page à propos) : les 3
   items doivent rester côte à côte sur mobile (grille 3 colonnes),
   pas empilés verticalement — même logique que le bloc réassurance
   2x2, adaptée à 3 colonnes égales. Largeur calée sur la colonne
   parente (pas de sortie 100vw — cf. règle boxed ci-dessus).
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-statsrow01 {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.elementor-element-statsrow01 > .elementor-container {
		flex-wrap: nowrap !important;
		gap: 8px;
	}
	.elementor-element-statsrow01 > .elementor-container > .elementor-column {
		width: 33.333% !important;
		max-width: 33.333% !important;
		flex: 0 0 33.333% !important;
	}
	.elementor-element-statsrow01 .elementor-icon-box-icon {
		margin: 0 auto 10px !important;
	}
	.elementor-element-statsrow01 .elementor-icon-box-title,
	.elementor-element-statsrow01 .elementor-icon-box-description,
	.elementor-element-statsrow01 .elementor-icon-box-content {
		text-align: center !important;
	}
	.elementor-element-statsrow01 .elementor-icon-box-title {
		font-size: 15px !important;
	}
	.elementor-element-statsrow01 .elementor-icon-box-description {
		font-size: 12px !important;
	}
}

/* =========================================================
   Page Réalisations : espace insuffisant entre la carte "Ain &
   Rhône" (r1trip0) et le sur-titre "RÉALISATIONS" (r1galeye).
   Sur mobile Elementor ramène le padding de r1gal0 à 24px
   (desktop : 40px) et les deux sections sont collées (gap 0) —
   le sur-titre se retrouve trop près du bloc du dessus.
   ========================================================= */
@media (max-width: 767px) {
	.elementor-element-r1gal0 {
		padding-top: 56px !important;
	}
}

/* =========================================================
   Flèche "→" injectée par mfa-cta-arrow.js dans tous les boutons
   "Devis gratuit" du site (header, menu mobile, footer, CTA...).
   ========================================================= */
.mfa-cta-arrow {
	display: inline-block;
	margin-left: 6px;
}

/* =========================================================
   Bouton WhatsApp flottant — bas droite, site-wide
   ========================================================= */
.mfa-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 8px 24px rgba(18, 42, 77, 0.22);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.mfa-whatsapp-float:hover,
.mfa-whatsapp-float:focus {
	background: #1EBE57;
	color: #FFFFFF;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 12px 28px rgba(18, 42, 77, 0.28);
	outline: none;
}
.mfa-whatsapp-float:focus-visible {
	outline: 3px solid #122A4D;
	outline-offset: 3px;
}
.mfa-whatsapp-float svg {
	display: block;
}
@media (max-width: 767px) {
	.mfa-whatsapp-float {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 54px;
		height: 54px;
	}
}
@media print {
	.mfa-whatsapp-float { display: none !important; }
}

/* =========================================================
   Page "Apporteur d'affaires" (/apporteur-d-affaires/)
   ========================================================= */

/* Hero: 2 CTA côte à côte, wrap sur mobile */
.mfa-hero-cta-row.elementor-section > .elementor-container {
	flex-wrap: wrap;
	row-gap: 12px;
}
@media (max-width: 767px) {
	.mfa-hero-cta-row.elementor-section > .elementor-container > .elementor-column {
		width: 100% !important;
	}
	.mfa-hero-cta-row .elementor-button {
		width: 100%;
		justify-content: center !important;
	}
}

/* Numéros d'étape "Comment ça marche" : neutralise la marge par défaut
   du <p> (le widget text-editor n'a pas de reset sur son propre <p>,
   ce qui créait un grand vide entre le chiffre et l'icône en dessous). */
/* Numéros d'étape "Comment ça marche" : badge plein (pas juste un chiffre
   flottant) pour être visible comme un vrai repère d'étape. */
.mfa-step-number {
	margin-bottom: 20px !important;
}
.mfa-step-number p {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto !important;
	border-radius: 50%;
	background: #DC0B15;
	color: #FFFFFF !important;
	font-size: 18px !important;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(220, 11, 21, 0.25);
}

/* Badge flottant "Cumulable / Sans limite / Sans engagement" */
.mfa-hero-badge {
	display: inline-block !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 10px 24px !important;
	border-radius: 999px !important;
}

/* Liste de récompenses (cartes programmes) */
.mfa-reward-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mfa-reward-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	line-height: 1.5;
}
.mfa-reward-list li::before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	color: #285A9E;
	font-size: 14px;
}
.mfa-programme-card:nth-of-type(2) .mfa-reward-list li::before,
#programme-professionnels .mfa-reward-list li::before {
	color: #DC0B15;
}

/* ---------- Simulateur de gains ---------- */
.mfa-simulateur {
	max-width: 640px;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.mfa-sim-toggle-row {
	display: flex;
	gap: 8px;
	background: #EAF2FB;
	border-radius: 999px;
	padding: 6px;
	margin-bottom: 28px;
}
.mfa-sim-toggle-btn {
	flex: 1 1 0;
	border: none;
	background: transparent;
	color: #122A4D;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mfa-sim-toggle-btn.active {
	background: #285A9E;
	color: #FFFFFF;
}
.mfa-sim-label {
	display: block;
	font-weight: 700;
	color: #122A4D;
	font-size: 15px;
	margin-bottom: 12px;
}
.mfa-sim-range-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.mfa-sim-range {
	flex: 1 1 auto;
	appearance: none;
	-webkit-appearance: none;
	height: 6px;
	border-radius: 999px;
	background: #EAF2FB;
	outline: none;
}
.mfa-sim-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #DC0B15;
	cursor: pointer;
	border: 3px solid #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.mfa-sim-range::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #DC0B15;
	cursor: pointer;
	border: 3px solid #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.mfa-sim-range-value {
	min-width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #122A4D;
	color: #FFFFFF;
	font-weight: 700;
	border-radius: 50%;
	font-size: 16px;
}
.mfa-sim-pro-only {
	margin-bottom: 24px;
}
.mfa-sim-choice-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.mfa-sim-choice {
	flex: 1 1 auto;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	color: #122A4D;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 16px;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mfa-sim-choice.active {
	border-color: #285A9E;
	background: #EAF2FB;
	color: #285A9E;
}
.mfa-sim-result {
	background: #EAF2FB;
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	margin-bottom: 24px;
}
.mfa-sim-result p {
	margin: 0;
	font-size: 19px;
	color: #122A4D;
	line-height: 1.5;
}
.mfa-sim-result strong {
	color: #DC0B15;
}
.mfa-sim-cta {
	display: block;
	text-align: center;
	background: #DC0B15;
	color: #FFFFFF !important;
	font-weight: 700;
	padding: 16px 24px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.mfa-sim-cta:hover {
	background: #B80912;
	transform: translateY(-2px);
}
@media (max-width: 480px) {
	.mfa-simulateur {
		padding: 24px 20px;
	}
	.mfa-sim-toggle-btn {
		font-size: 13px;
		padding: 10px 8px;
	}
}

/* ---------- Formulaire de recommandation ----------
   Réutilise entièrement le moteur multi-étapes et le style ".mfa-devis"
   du widget "Demander un devis" (mfa-devis-widget.js) — la racine porte
   les deux classes ".mfa-devis mfa-referral-form", donc aucun style de
   layout dédié n'est nécessaire ici, seulement la largeur du conteneur. */
.mfa-referral-form {
	max-width: 640px;
	margin: 0 auto;
}

/* ---------- Mobile finishing pass (2026-07-20) ---------- */

/* Hero : recentrer la photo sur le personnage souriant (situé aux 2/3
   droite de l'image d'origine 1920px) — en "center center" le crop mobile
   étroit/haut ne montrait quasiment plus que son épaule. */
@media (max-width: 767px) {
	.mfa-apporteur-hero > .elementor-widget-wrap {
		background-position: 88% center !important;
	}
}

/* "Comment ça marche" : numéros uniquement (icônes image-box masquées). */
.mfa-steps-row .elementor-image-box-img {
	display: none !important;
}

/* "Comment ça marche" : grille 2+1 (2 étapes en haut, la 3e en dessous),
   calquée sur le bloc réassurance homepage (grille 2x2, padding serré). */
@media (max-width: 767px) {
	.elementor-element-bc20c5c {
		padding-top: 32px !important;
		padding-bottom: 16px !important;
	}
	.elementor-element-ad3519b {
		margin-bottom: 20px !important;
	}
	.mfa-steps-row > .elementor-container {
		flex-wrap: wrap !important;
		row-gap: 0;
	}
	.mfa-steps-row > .elementor-container > .elementor-column:nth-child(1),
	.mfa-steps-row > .elementor-container > .elementor-column:nth-child(2) {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
		margin-bottom: 0 !important;
	}
	.mfa-steps-row > .elementor-container > .elementor-column:nth-child(3) {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		border-top: 1px solid #E2E8F0;
		padding-top: 12px;
	}
	.mfa-steps-row .elementor-column > .elementor-element-populated {
		padding: 8px 10px !important;
	}
	.mfa-steps-row > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-text-editor:first-child p {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		margin: 0 auto 6px !important;
		border-radius: 50%;
		background: #DC0B15;
		color: #FFFFFF !important;
		font-size: 12px !important;
		font-weight: 700;
	}
	/* Typo calquée sur le bloc réassurance homepage (52ebb3f) : titre
	   et description à 13px, titre en gras, description en gris secondaire. */
	.mfa-steps-row .elementor-image-box-title {
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		margin-bottom: 6px !important;
		color: #122A4D !important;
	}
	.mfa-steps-row .elementor-image-box-description {
		font-size: 13px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
		color: #5B6472 !important;
	}
	.mfa-steps-row .elementor-image-box-description p {
		margin: 0 !important;
	}
}

/* "Deux façons de vous récompenser" : cartes programmes pleine largeur
   empilées (plus de colonnes 50/50 étroites), padding resserré. */
@media (max-width: 767px) {
	.elementor-element-9192b80 {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}
	.elementor-element-48b8f99 {
		margin-bottom: 24px !important;
	}
	.elementor-element-71a8980,
	.elementor-element-71a8980 > .elementor-container {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-element-71a8980 > .elementor-container {
		flex-wrap: wrap !important;
		gap: 16px;
	}
	.elementor-element-71a8980 > .elementor-container > .elementor-column.mfa-programme-card {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	.elementor-element-836a5cc > .elementor-element-populated,
	.elementor-element-75f4d3e > .elementor-element-populated {
		padding: 20px !important;
	}
	.mfa-programme-card .elementor-widget-heading .elementor-heading-title {
		font-size: 19px !important;
		line-height: 1.3 !important;
	}
}

/* Boutons des cards "programmes" : alignés à gauche sur desktop mais leur
   texte (assez long, "Devenir apporteur d'affaires") déborde du cadre de
   la card sur mobile avec la règle sitewide white-space:nowrap — le texte
   se fait couper visuellement aux deux bords plutôt que de wrapper.
   Même correctif que les CTA du hero : pleine largeur + texte centré. */
@media (max-width: 767px) {
	.mfa-programme-card .elementor-button {
		width: 100% !important;
		justify-content: center !important;
		white-space: normal !important;
		height: auto !important;
		text-align: center;
	}
	.mfa-programme-card .elementor-button .elementor-button-text {
		white-space: normal !important;
	}
}

/* FAQ : tailles question/réponse cohérentes avec le reste du design
   system mobile (H3 19px / corps 15px), plutôt que les tailles kit par
   défaut qui rendaient les deux quasi identiques et trop grandes. */
@media (max-width: 767px) {
	.mfa-apporteur-faq .elementor-tab-title {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}
	.mfa-apporteur-faq .elementor-tab-content {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}
}

/* =========================================================
   Zone d'intervention (page À propos) — liste départements + carte
   Section Elementor a55b088 : texte 60% / carte 40% (alternance
   comme Notre histoire / Votre interlocuteur).
   Remplacer la carte : assets/maps/zone-intervention.svg
   ========================================================= */
.mfa-zone-depts {
	list-style: none;
	/* Annule le margin-left ~30px des ul Elementor/BeTheme */
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	width: 100%;
	max-width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	box-sizing: border-box;
}
.mfa-zone-depts li {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 17px;
	line-height: 1.45;
	color: #122A4D;
	font-weight: 500;
}
.mfa-zone-depts__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1em;
	padding: 2px 8px;
	border-radius: 6px;
	background: #DC0B15;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.4;
	flex-shrink: 0;
}
.mfa-zone-note {
	margin: 0;
	color: #5B6472;
	font-size: 17px;
	line-height: 1.6;
}
.mfa-zone-map {
	margin: 0 auto !important;
	width: 100%;
	max-width: 100%;
	display: block;
	text-align: center;
}
.mfa-zone-map__media,
.mfa-zone-map__placeholder {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 24px;
}
.mfa-zone-map__media {
	height: auto;
	overflow: hidden;
}
/* Colonne carte Elementor : pas de décalage latéral du shortcode */
.elementor-element-cc3234e .elementor-widget-shortcode,
.elementor-element-cc3234e .elementor-shortcode,
.elementor-element-cc3234e .elementor-widget-wrap {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}
.mfa-zone-map__placeholder {
	aspect-ratio: 600 / 560;
	background: #E8ECF1;
	border: 2px dashed #C5CDD8;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}
.mfa-zone-map__placeholder-label {
	font-size: 16px;
	font-weight: 600;
	color: #5B6472;
	line-height: 1.4;
	max-width: 14em;
	white-space: normal;
	overflow-wrap: anywhere;
}
@media (min-width: 1025px) {
	.mfa-zone-map__placeholder-label {
		font-size: 18px;
	}
}
@media (max-width: 767px) {
	/* 2 lignes × 3 colonnes, même largeur que le paragraphe sous-texte */
	.mfa-zone-depts {
		width: 100%;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px 10px;
		margin-bottom: 20px;
	}
	.mfa-zone-depts li {
		font-size: 13px;
		gap: 6px;
		min-width: 0;
	}
	.mfa-zone-depts__num {
		min-width: 1.85em;
		padding: 2px 5px;
		font-size: 11px;
	}
	.mfa-zone-note {
		width: 100%;
		font-size: 15px;
	}
	/* Espace entre colonne texte et carte une fois empilées */
	.elementor-element-a55b088 > .elementor-container > .elementor-element-cc3234e {
		margin-top: 28px;
	}
}

/* =========================================================
   Fiches prestation — fond « méthode » : aplat #EAF2FB + motif
   mesh technique discret (filet). Classe ajoutée via migration
   (test Moustiquaires d’abord). Overlay ::before pour ne pas
   écraser le background-color Elementor.
   ========================================================= */
.mfa-section-mesh {
	position: relative;
	isolation: isolate;
}
.mfa-section-mesh::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("assets/mfa-mesh-pattern.svg");
	background-repeat: repeat;
	background-size: 56px 56px;
	opacity: 0.55;
}
.mfa-section-mesh > .elementor-container {
	position: relative;
	z-index: 1;
}

/* Pages légales : hero comme Contact / hubs (englobe le menu, arrondis 24px) */
#Content:has(.mfa-legal) {
	padding-top: 0;
}
#Content:has(.mfa-legal) .section_wrapper,
#Content:has(.mfa-legal) .the_content_wrapper {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mfa-legal {
	margin: 0;
	padding: 0 0 56px;
	color: #122A4D;
	font-size: 1.05rem;
	line-height: 1.65;
}

.mfa-legal__hero {
	background: linear-gradient(120deg, #122A4D 0%, #1a3d6e 45%, #285A9E 100%);
	color: #fff;
	text-align: center;
	/* Même gabarit que Univers / hubs : marge 24px + contenu centré */
	margin: 24px;
	border-radius: 24px;
	padding: 160px 64px 100px;
	box-shadow: 0 12px 32px rgba(18, 42, 77, 0.12);
}
@media (max-width: 1024px) {
	.mfa-legal__hero {
		padding: 130px 40px 72px;
	}
}
@media (max-width: 767px) {
	.mfa-legal__hero {
		margin: 0;
		border-radius: 0 0 24px 24px;
		padding: 110px 20px 48px;
		box-shadow: none;
	}
}
.mfa-legal__hero-inner {
	max-width: 820px;
	margin: 0 auto;
}
.mfa-legal__nav {
	margin: 0 0 1.15rem;
}
.mfa-legal__nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mfa-legal__nav li {
	margin: 0;
}
.mfa-legal__nav a,
.mfa-legal__nav span {
	display: inline-block;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	line-height: 1.2;
	border-radius: 999px;
	padding: 8px 16px;
	color: rgba(255, 255, 255, 0.88);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mfa-legal__nav a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.35);
}
.mfa-legal__nav span[aria-current="page"] {
	color: #122A4D;
	font-weight: 600;
	background: #fff;
	border-color: #fff;
}
.mfa-legal__hero h1 {
	margin: 0;
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
}

.mfa-legal__body {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 24px 0;
}
@media (max-width: 767px) {
	.mfa-legal__body {
		padding: 28px 20px 0;
	}
}
.mfa-legal__body h2 {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
	color: #122A4D;
}
.mfa-legal__body ul {
	margin: 0.5rem 0 1rem 1.25rem;
	padding: 0;
}
.mfa-legal__body li {
	margin: 0.35rem 0;
}
.mfa-legal__body a {
	color: #285A9E;
}
.mfa-legal__body a:hover {
	color: #122A4D;
}
.mfa-legal__intro,
.mfa-legal__updated {
	color: #4a5a70;
}
.mfa-legal__updated {
	margin-top: 2.5rem;
	font-size: 0.95rem;
}
.mfa-legal__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1rem 0 1.25rem;
	font-size: 0.95rem;
	border: 1px solid #d8e0ea;
	border-radius: 14px;
	overflow: hidden;
}
.mfa-legal__table th,
.mfa-legal__table td {
	border: none;
	border-bottom: 1px solid #d8e0ea;
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}
.mfa-legal__table tr:last-child td {
	border-bottom: none;
}
.mfa-legal__table th {
	background: #EAF2FB;
	color: #122A4D;
	font-weight: 600;
}
.mfa-legal__table th:first-child {
	border-top-left-radius: 13px;
}
.mfa-legal__table th:last-child {
	border-top-right-radius: 13px;
}

/* =========================================================
   Recherche native — loupe overlay + page résultats cards
   ========================================================= */

/* Masquer le Subheader BeTheme (double H1) sur les pages search */
body.search #Subheader,
body.search-results #Subheader,
.search #Subheader,
.search-results #Subheader {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	line-height: 0 !important;
}
body.search #Subheader .title,
body.search-results #Subheader .title {
	display: none !important;
}

/* Header : loupe compacte, juste avant le CTA (cluster droite) */
.mfn-header-tmpl .mcb-wrap-mfa2srchw0,
.mfn-header-tmpl .mcb-wrap-mfa2srchw1 {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 48px;
}
.mfn-header-tmpl .column_header_search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	max-width: 44px;
	flex: 0 0 auto;
	position: relative;
	z-index: 5;
}
.mfn-header-tmpl .column_header_search .search_wrapper {
	position: relative;
	width: 40px;
	height: 40px;
}
.mfn-header-tmpl .column_header_search .form-searchform {
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0;
}
.mfn-header-tmpl .column_header_search .search_wrapper .icon_search {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.mfn-header-tmpl .column_header_search .search_wrapper .icon_search:hover,
.mfn-header-tmpl .column_header_search .search_wrapper .icon_search:focus-visible {
	background: #EAF2FB;
	outline: none;
}
.mfn-header-tmpl .column_header_search .search_wrapper .icon_search,
.mfn-header-tmpl .column_header_search .search_wrapper .icon_search i {
	color: #285A9E;
	font-size: 22px;
	line-height: 1;
	-webkit-text-stroke: 0.35px currentColor;
}
/* Header transparent : pastille claire + loupe bleu MFA.
   Blanc seul disparaît sur ciel clair (homepage) ; la pastille reste
   lisible sur héros dark et light, sans concurrencer le CTA Devis. */
.mcb-header-section:not(.mfn-header-sticky-section) .column_header_search .search_wrapper .icon_search {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px rgba(18, 42, 77, 0.14);
}
.mcb-header-section:not(.mfn-header-sticky-section) .column_header_search .search_wrapper .icon_search,
.mcb-header-section:not(.mfn-header-sticky-section) .column_header_search .search_wrapper .icon_search i {
	color: #285A9E !important;
	filter: none;
}
.mcb-header-section:not(.mfn-header-sticky-section) .column_header_search .search_wrapper .icon_search:hover,
.mcb-header-section:not(.mfn-header-sticky-section) .column_header_search .search_wrapper .icon_search:focus-visible {
	background: #FFFFFF;
	box-shadow: 0 3px 12px rgba(18, 42, 77, 0.18);
}
/* Header sticky / fond clair : bleu MFA. */
.mfn-header-sticky-section .column_header_search .search_wrapper .icon_search,
.mfn-header-sticky-section .column_header_search .search_wrapper .icon_search i {
	color: #285A9E !important;
}
.mfn-header-sticky-section .column_header_search .search_wrapper .icon_search:hover,
.mfn-header-sticky-section .column_header_search .search_wrapper .icon_search:focus-visible {
	background: #EAF2FB;
}
.mfn-header-tmpl .column_header_search:not(.mfa-search-open) .form-searchform input.field,
.mfn-header-tmpl .column_header_search:not(.mfa-search-open) .form-searchform .icon_close,
.mfn-header-tmpl .column_header_search:not(.mfa-search-open) .mfn-live-search-box {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
}

/* Panneau overlay — colonne reste 44px */
.mfn-header-tmpl .column_header_search.mfa-search-open {
	max-width: 44px;
	z-index: 40;
}
.mfn-header-tmpl .mcb-wrap-mfa2srchw0,
.mfn-header-tmpl .mcb-wrap-mfa2srchw1,
.mfn-header-tmpl .column_header_search,
.mfn-header-tmpl .column_header_search .search_wrapper,
.mfn-header-tmpl .column_header_search .mcb-column-inner {
	overflow: visible !important;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .search_wrapper {
	width: 40px;
	height: 40px;
	overflow: visible !important;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .form-searchform {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	width: min(400px, calc(100vw - 24px));
	height: auto;
	padding: 14px 44px 14px 44px;
	background: #fff;
	border: 1px solid #d8e4ef;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(18, 42, 77, 0.14);
	/* Au-dessus du dropdown : l’input reste toujours visible / éditable */
	z-index: 52;
}
/* Quand le live box est visible : une seule carte (input au-dessus, résultats en dessous) */
.mfn-header-tmpl .column_header_search.mfa-search-open .search_wrapper:has(.mfn-live-search-box[style*="display: block"]) .form-searchform,
.mfn-header-tmpl .column_header_search.mfa-search-open .search_wrapper:has(.mfn-live-search-box[style*="display:block"]) .form-searchform {
	border-radius: 12px 12px 0 0;
	border-bottom-color: #e8eef5;
	box-shadow: none;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .form-searchform input.field {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 10px 8px;
	border: none;
	border-bottom: 1px solid #d5e5ee;
	border-radius: 0;
	background: transparent;
	color: #122A4D;
	font-size: 15px;
	box-shadow: none;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .form-searchform input.field:focus {
	border-color: #285A9E;
	color: #285A9E;
	outline: none;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .search_wrapper .icon_search {
	left: 18px;
	top: 28px;
	transform: none;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .form-searchform .icon_close {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 12px;
	top: 22px;
	left: auto;
	width: 28px;
	height: 28px;
	cursor: pointer;
	color: #5a6f88;
	z-index: 3;
}
/* Dropdown live : strictement sous l’input (jamais par-dessus), 1 scrollbar + CTA sticky */
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box {
	position: absolute;
	/* Fallback ~ form (10+70) ; JS affine via --mfa-live-top (= bas du form, jointure flush) */
	top: var(--mfa-live-top, calc(100% + 80px));
	right: 0;
	left: auto;
	width: min(400px, calc(100vw - 24px));
	min-width: 0;
	max-height: min(70vh, 480px);
	padding: 4px 0 0;
	overflow: hidden !important; /* pas de scrollbar externe */
	background: #fff;
	border: 1px solid #d8e4ef;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 16px 40px rgba(18, 42, 77, 0.14);
	text-align: left;
	z-index: 51;
	transform: none !important;
}
/* Place pour le CTA sticky (évite le conflit display:block de jQuery slideDown) */
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box:has(> a.button:not(.hidden)) {
	padding-bottom: 48px;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box .mfn-live-search-list {
	max-height: min(calc(70vh - 56px), 424px) !important; /* annule style.php 300px */
	margin: 0;
	padding: 0 0 4px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box:has(> a.button:not(.hidden)) .mfn-live-search-list {
	max-height: min(calc(70vh - 104px), 376px) !important;
}
.mfn-header-tmpl .column_header_search .mfn-live-search-list-categories,
.mfn-header-tmpl .column_header_search .mfn-live-search-list-shop {
	display: none !important;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list > li {
	margin: 0;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list > li > ul {
	margin: 0;
	padding: 0;
}
.mfn-header-tmpl .column_header_search .mfn-live-search-heading {
	padding: 10px 16px 6px !important;
	color: #285A9E;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 1 !important;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list ul li:not([data-category="info"]) {
	align-items: flex-start;
	gap: 12px;
	padding: 10px 16px;
	border-bottom-color: #eef3f8;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list ul li:not([data-category="info"]):hover {
	background: #f5f9fc;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list ul li img {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	max-height: 48px;
	margin: 0;
	object-fit: cover;
	border-radius: 8px;
	background: #eef3f8;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-list .mfn-live-search-texts {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	min-width: 0;
}
.mfn-header-tmpl .column_header_search .mfn-live-search-texts a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: #122A4D;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-texts p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin: 2px 0 0;
	color: #5a6f88;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box .mfn-live-search-noresults {
	padding: 16px;
	color: #5a6f88;
	font-size: 14px;
	text-align: center;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box > a.button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	border-radius: 0 0 11px 11px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: #285A9E;
	border-color: #285A9E;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	z-index: 2;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box > a.button:hover,
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box > a.button:focus {
	background: #1f4a86;
	border-color: #1f4a86;
	color: #fff;
}
.mfn-header-tmpl .column_header_search.mfa-search-open .mfn-live-search-box > a.button.hidden {
	display: none !important;
}

/* ---- Page résultats : hero type Actualités / Recrutement ---- */
body.search #Content {
	padding-top: 0;
}
body.search .content_wrapper {
	max-width: none;
	width: 100%;
}
.mfa-search-page {
	padding-bottom: 56px;
	color: #122A4D;
}
.mfa-search-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 24px;
	padding: 160px 48px 120px;
	min-height: 480px;
	border-radius: 24px;
	background: #122A4D center / cover no-repeat;
	overflow: hidden;
	text-align: center;
}
.mfa-search-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14, 34, 71, 0.82);
	pointer-events: none;
}
.mfa-search-hero__inner {
	position: relative;
	z-index: 1;
	width: min(720px, 100%);
	margin: 0 auto;
	color: #fff;
}
.mfa-search-hero__crumbs {
	margin: 0 0 18px;
}
.mfa-search-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.4;
}
.mfa-search-hero__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #d7dee9;
}
.mfa-search-hero__crumbs li:not(:last-child)::after {
	content: "›";
	opacity: 0.7;
}
.mfa-search-hero__crumbs a {
	color: #d7dee9;
	text-decoration: none;
}
.mfa-search-hero__crumbs a:hover {
	color: #fff;
	text-decoration: underline;
}
.mfa-search-hero__crumbs [aria-current="page"] {
	color: #fff;
}
.mfa-search-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #DC0B15;
}
.mfa-search-hero__title {
	margin: 0 0 14px;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}
.mfa-search-hero__sub {
	margin: 0 auto 22px;
	max-width: 36rem;
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.55;
	color: #d7dee9;
	font-weight: 400;
}
.mfa-search-hero__form {
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
}
.mfa-search-hero__form .form-searchform {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 46px;
	padding: 0 12px 0 40px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.mfa-search-hero__form .form-searchform .icon_search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #285A9E;
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}
.mfa-search-hero__form .form-searchform input.field {
	width: 100%;
	height: 100%;
	border: none !important;
	box-shadow: none !important;
	padding: 0 4px;
	margin: 0;
	color: #122A4D;
	background: transparent !important;
	font-size: 15px;
	line-height: 1.2;
}
.mfa-search-hero__form .form-searchform input.field::placeholder {
	color: #5a6f88;
}
.mfa-search-hero__form .form-searchform .icon_close {
	display: none !important;
}
.mfa-search-body {
	padding-top: 0 !important;
	padding-bottom: 24px !important;
}
.mfa-search-body > .section_wrapper {
	width: min(1120px, calc(100% - 32px));
	margin-inline: auto;
	padding-top: 16px;
}
@media (max-width: 1024px) {
	.mfa-search-hero {
		padding: 130px 32px 90px;
		min-height: 400px;
	}
}
@media (max-width: 767px) {
	.mfa-search-hero {
		margin: 0;
		border-radius: 0 0 24px 24px;
		padding: 110px 20px 64px;
		min-height: 360px;
	}
	/* Air sous la courbe du hero — aligné sur le rythme mobile (~32px) */
	.mfa-search-body > .section_wrapper {
		padding-top: 32px;
	}
}

.mfa-search-page .mfa-search-group {
	margin-bottom: 32px;
}
.mfa-search-page .mfa-search-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e6eef5;
	color: #122A4D;
	font-size: 18px;
}
.mfa-search-page .mfa-search-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: #EAF2FB;
	color: #285A9E;
	font-size: 12px;
	font-weight: 600;
}

/* Grille uniforme — neutralise BeTheme .search-item / .post floats */
.mfa-search-page .mfa-search-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}
.mfa-search-page .mfa-search-card,
.mfa-search-page .mfa-search-grid > .mfa-search-card {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	border: 1px solid #e1ebf3;
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mfa-search-page .mfa-search-card:hover {
	border-color: #b9cee3;
	box-shadow: 0 10px 28px rgba(18, 42, 77, 0.08);
	transform: translateY(-2px);
}
.mfa-search-page .mfa-search-card::before,
.mfa-search-page .mfa-search-card::after {
	display: none !important;
	content: none !important;
}

/* Zone média TOUJOURS même hauteur (avec ou sans image) */
.mfa-search-page .mfa-search-card__media {
	display: block !important;
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: 180px;
	background: #EAF2FB;
	overflow: hidden;
}
.mfa-search-page .mfa-search-card__media img:not(.live-search-thumbnail) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mfa-search-page .mfa-search-card__media .live-search-thumbnail {
	display: none !important;
}
.mfa-search-page .mfa-search-card__placeholder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	color: #285A9E;
	font-size: 32px;
	opacity: 0.45;
	background: linear-gradient(145deg, #EAF2FB 0%, #dce8f4 100%);
}
.mfa-search-page .mfa-search-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 18px;
	flex: 1 1 auto;
	min-height: 148px;
}
.mfa-search-page .mfa-search-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}
.mfa-search-page .mfa-search-badge--prestation {
	background: #EAF2FB;
	color: #285A9E;
}
.mfa-search-page .mfa-search-badge--actu {
	background: #eef6f0;
	color: #2f6b45;
}
.mfa-search-page .mfa-search-badge--chantier {
	background: #f3efe8;
	color: #8a5a2b;
}
.mfa-search-page .mfa-search-card__title {
	margin: 0;
}
.mfa-search-page .mfa-search-card__title h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
}
.mfa-search-page .mfa-search-card__title a {
	color: #122A4D;
	text-decoration: none;
}
.mfa-search-page .mfa-search-card__title a:hover {
	color: #285A9E;
}
.mfa-search-page .mfa-search-card__excerpt,
.mfa-search-page .mfa-search-card__excerpt p {
	margin: 0;
	color: #5a6f88;
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mfa-search-page .mfa-search-card__link {
	margin-top: auto;
	padding-top: 8px;
	color: #285A9E;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.mfa-search-page .mfa-search-card__link:hover {
	color: #122A4D;
}

.mfa-search-page .mfa-search-empty {
	padding: 48px 24px 56px;
	text-align: center;
	background: #f7fafc;
	border: 1px solid #e1ebf3;
	border-radius: 16px;
}
.mfa-search-page .mfa-search-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #EAF2FB;
	color: #285A9E;
	font-size: 28px;
}
.mfa-search-page .mfa-search-empty__title {
	margin: 0 0 10px;
	color: #122A4D;
	font-size: 24px;
}
.mfa-search-page .mfa-search-empty__text {
	max-width: 460px;
	margin: 0 auto 22px;
	color: #5a6f88;
	font-size: 15px;
	line-height: 1.55;
}
.mfa-search-page .mfa-search-empty__hints {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mfa-search-page .mfa-search-empty__hints a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #d5e5ee;
	color: #285A9E;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.mfa-search-page .mfa-search-empty__hints a:hover {
	border-color: #285A9E;
	background: #EAF2FB;
}

@media (max-width: 1024px) {
	.mfa-search-page .mfa-search-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 767px) {
	.mfa-search-page .mfa-search-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.mfa-search-page .mfa-search-card__media {
		height: 160px;
	}
}

/* Overlay recherche mobile — sheet plein écran opaque + suggestions live. */
.mfa-mobile-search {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10080;
	flex-direction: column;
	box-sizing: border-box;
	background: #FFFFFF;
}
.mfa-mobile-search.is-open {
	display: flex;
}
.mfa-mobile-search__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	min-height: 64px;
	padding: max(10px, env(safe-area-inset-top, 0px)) 8px 10px 12px;
	box-sizing: border-box;
	background: #FFFFFF;
	border-bottom: 1px solid #E4EEF6;
}
.mfa-mobile-search__form {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 8px 0 14px;
	box-sizing: border-box;
	background: #F4F8FC;
	border: 1px solid #D5E5EE;
	border-radius: 999px;
	box-shadow: none;
	overflow: hidden;
}
.mfa-mobile-search__icon {
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 10px 0 0;
	color: #285A9E;
	font-size: 18px;
	line-height: 1;
	pointer-events: none;
}
/* Reset marges mfn-icons (:before) qui décalent la loupe. */
.mfa-mobile-search__icon::before {
	margin: 0;
	width: 1em;
	line-height: 1;
}
.mfa-mobile-search input.mfa-mobile-search__input {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0 !important; /* bat BeTheme input[type=text] margin-bottom */
	padding: 0 !important; /* bat BeTheme padding:10px */
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	color: #122A4D;
	font-size: 16px; /* ≥16px : évite zoom iOS */
	line-height: normal;
	box-shadow: none !important;
	outline: none;
	display: block;
	-webkit-appearance: none;
	appearance: none;
}
.mfa-mobile-search__input::-webkit-search-cancel-button,
.mfa-mobile-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.mfa-mobile-search__input::placeholder {
	color: #5a6f88;
	line-height: normal;
	opacity: 1;
}
.mfa-mobile-search__input:focus {
	color: #122A4D;
	outline: none;
	box-shadow: none;
}
.mfa-mobile-search__clear {
	position: static;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 0 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #5a6f88;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.mfa-mobile-search__clear[hidden] {
	display: none !important;
}
.mfa-mobile-search__clear:hover,
.mfa-mobile-search__clear:focus-visible {
	background: #EAF2FB;
	color: #285A9E;
	outline: none;
}
/* Touch ≥44px ; reset BeTheme button (padding/line-height) pour centrer le ×. */
.mfa-mobile-search__close {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	right: auto;
	top: auto;
	transform: none;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
	color: #122A4D;
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	line-height: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
/* Le glyphe × a une encre plus basse que sa métrique : nudge optique, hit-area inchangée. */
.mfa-mobile-search__close-icon {
	display: block;
	line-height: 1;
	transform: translateY(-4px);
}
.mfa-mobile-search__close:hover,
.mfa-mobile-search__close:focus-visible {
	background: #EAF2FB !important;
	color: #285A9E;
	outline: none;
}
.mfa-mobile-search__panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0 max(16px, env(safe-area-inset-bottom, 0px));
	background: #FFFFFF;
}
.mfa-mobile-search__panel.is-loading {
	opacity: 0.72;
}
.mfa-mobile-search__hint {
	margin: 28px 20px 0;
	padding: 0;
	color: #5a6f88;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}
.mfa-mobile-search__list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}
.mfa-mobile-search__list[hidden],
.mfa-mobile-search__empty[hidden],
.mfa-mobile-search__all[hidden],
.mfa-mobile-search__hint[hidden] {
	display: none !important;
}
.mfa-mobile-search__item {
	margin: 0;
	border-bottom: 1px solid #EEF3F8;
}
.mfa-mobile-search__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	text-decoration: none;
	color: #122A4D;
}
.mfa-mobile-search__link:hover,
.mfa-mobile-search__link:focus-visible {
	background: #F4F8FC;
	outline: none;
}
.mfa-mobile-search__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	background: #EAF2FB;
}
.mfa-mobile-search__thumb--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #285A9E;
	font-size: 18px;
}
.mfa-mobile-search__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}
.mfa-mobile-search__meta .mfa-search-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.mfa-mobile-search__meta .mfa-search-badge--prestation {
	background: #EAF2FB;
	color: #285A9E;
}
.mfa-mobile-search__meta .mfa-search-badge--actu {
	background: #EEF7F0;
	color: #2F6B45;
}
.mfa-mobile-search__meta .mfa-search-badge--chantier {
	background: #F3EEF8;
	color: #6B4A8A;
}
.mfa-mobile-search__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #122A4D;
}
.mfa-mobile-search__empty {
	margin: 28px 20px 0;
	padding: 0;
	color: #5a6f88;
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}
.mfa-mobile-search__all {
	display: block;
	margin: 12px 16px 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: #285A9E;
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.mfa-mobile-search__all:hover,
.mfa-mobile-search__all:focus-visible {
	background: #122A4D;
	outline: none;
}
/* Search open : lock scroll + masque header / drawer (plus de fantôme). */
body.mfa-mobile-search-active {
	overflow: hidden !important;
}
body.mfa-mobile-search-active .mfn-header-tmpl,
body.mfa-mobile-search-active .mfn-header-tmpl-menu-sidebar,
body.mfa-mobile-search-active .mfn-header-overlay {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Légendes d'images Elementor (.widget-image-caption.wp-caption-text) :
   BeTheme force background:#f8f8f8 + color:#A6A6A6 → bandeau gris sous les photos.
   On retire le fond et on adoucit la typo (légende, pas un carton). */
.elementor-widget-image .widget-image-caption.wp-caption-text,
.elementor-widget-image figcaption.wp-caption-text {
	background: transparent;
	color: #5a6a7a;
	padding: 10px 4px 0;
	font-size: 14px;
	line-height: 1.45;
	font-style: italic;
}