/* ==========================================================================
   Maison-Musée du Peuple Balengou — styles & animations globaux
   Chargé sur toutes les pages. Volontairement léger (pas de framework).
   ========================================================================== */

/* Garde-fou site-wide : le tiroir de navigation mobile (.mb-primary-nav) est
   caché en position fermée via "transform: translateX(100%)" (voir plus bas).
   Même hors écran, un élément transformé agrandit dans Chrome/Firefox la
   zone de défilement (scrollable overflow) du document — sur les pages où
   ce débordement dépasse un certain seuil, cela élargit le "layout
   viewport" mobile lui-même (window.innerWidth), ce qui poussait le bouton
   flottant KAPIA (position:fixed) hors de l'écran sur téléphone (< 400px).
   "overflow-x: hidden" corrige ça mais casse le header en position:sticky
   (hidden force overflow-y à passer de "visible" à "auto", ce qui fait de
   <body> son propre conteneur de défilement et invalide le contexte de
   sticky). "overflow-x: clip" corrige le même débordement SANS ce
   changement de contexte de défilement — testé : n'affecte pas le header
   sticky. Ne pas remplacer par "hidden" sans revérifier le header sticky. */
html, body { overflow-x: clip; }

:root {
	--mb-bordeaux: #7A2A2E;
	--mb-bordeaux-fonce: #4E1519;
	--mb-or: #C9A24B;
	--mb-or-clair: #EAD9A0;
	--mb-marine: #1E2238;
	--mb-ivoire: #FBF6EC;
	--mb-font-serif: Georgia, "Times New Roman", serif;
	--mb-font-sans: Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   Header — refonte du 25/08, enrichie (v2) : plus d'éclat "royal", sous-menus
   plus doux, alignements symétriques (logo | menu centré | CTA), logo mieux
   proportionné, effets de survol raffinés.
   Markup : theme-src/hello-elementor-child/header.php
   -------------------------------------------------------------------------- */

/* ---- Liseré doré + barre utilitaire (fine, v3) ---- */
.mb-topbar { position: relative; background: linear-gradient(120deg, var(--mb-marine) 0%, #171a2c 100%); }
.mb-topbar::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--mb-or) 18%, var(--mb-or-clair) 50%, var(--mb-or) 82%, transparent);
}
.mb-topbar-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.mb-topbar-tutelle {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .7rem;
	color: rgba(234,217,160,.82);
	letter-spacing: .02em;
	overflow: hidden;
}
.mb-topbar-tutelle .mb-icon-svg {
	width: 16px;
	height: 16px;
	padding: 3px;
	flex-shrink: 0;
	color: var(--mb-or);
	background: rgba(201,162,75,.14);
	border: 1px solid rgba(201,162,75,.4);
	border-radius: 50%;
	box-sizing: border-box;
}
.mb-topbar-tutelle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-topbar-links { display: flex; align-items: center; gap: 14px; }
.mb-topbar-links a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	color: var(--mb-or-clair);
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: .01em;
	transition: color .2s ease;
}
.mb-topbar-links a .mb-icon-svg { width: 12px; height: 12px; color: var(--mb-or); flex-shrink: 0; }
.mb-topbar-links a:hover { color: #fff; }
.mb-topbar-links a:hover .mb-icon-svg { color: var(--mb-or-clair); }
.mb-topbar-sep { width: 1px; height: 12px; background: rgba(234,217,160,.25); flex-shrink: 0; }

/* ---- Header principal ---- */
.mb-site-header {
	/* Hello Elementor applique par défaut un padding vertical de 16px sur
	   .site-header (display:flex hérité) : sans ce reset, il s'ajoutait
	   invisiblement au-dessus/en dessous de .mb-header-inner, gonflant la
	   barre de 32px de "vide" alors que .mb-header-inner elle-même est déjà
	   ajustée au plus près du logo. */
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--mb-ivoire);
	box-shadow: 0 1px 0 rgba(201,162,75,.5), 0 10px 24px -18px rgba(30,34,56,.4);
	transition: box-shadow .25s ease;
}
.mb-site-header::after {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--mb-bordeaux) 0%, var(--mb-or) 50%, var(--mb-bordeaux) 100%);
	box-shadow: 0 2px 6px -1px rgba(122,42,46,.4);
	opacity: .95;
}
.mb-site-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(201,162,75,.6), 0 18px 34px -14px rgba(30,34,56,.24);
}
.mb-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 36px;
	min-height: 92px;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* ---- Identité : logo bien visible (sans cadre autour) + lockup nom / devise ---- */
.mb-header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}
.mb-header-brand .custom-logo {
	display: block;
	height: 88px;
	width: auto;
	flex-shrink: 0;
	filter: drop-shadow(0 3px 6px rgba(30,34,56,.22));
	transition: transform .3s ease;
}
.mb-header-brand:hover .custom-logo { transform: scale(1.03); }
.mb-header-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	flex-shrink: 0;
	padding-left: 16px;
	border-left: 1px solid rgba(201,162,75,.45);
}
.mb-header-brand-name {
	font-family: var(--mb-font-serif);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--mb-bordeaux);
	letter-spacing: .006em;
	text-shadow: 0 1px 0 rgba(255,255,255,.6);
	white-space: nowrap;
}
.mb-header-brand-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mb-font-serif);
	font-style: italic;
	font-size: .8rem;
	color: var(--mb-or);
	margin-top: 5px;
	letter-spacing: .04em;
}
.mb-header-brand-tag::before { content: ''; width: 16px; height: 1px; background: var(--mb-or); flex-shrink: 0; }

/* ---- Nav desktop : centrée, petites capitales, soulignement animé ---- */
.mb-primary-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.mb-menu {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.mb-menu > li { position: relative; }
.mb-menu a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 1px;
	color: var(--mb-marine);
	text-decoration: none;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	transition: color .2s ease;
	white-space: nowrap;
}
.mb-menu > li > a::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mb-or), var(--mb-bordeaux));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.mb-menu > li.menu-item-has-children > a::after {
	content: '';
	width: 6px; height: 6px;
	border-right: 1.5px solid var(--mb-or);
	border-bottom: 1.5px solid var(--mb-or);
	transform: rotate(45deg);
	margin-left: 1px;
	margin-top: -3px;
	transition: transform .25s ease, margin-top .25s ease;
}
.mb-menu > li.menu-item-has-children:hover > a::after,
.mb-menu > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg);
	margin-top: 3px;
}
.mb-menu a:hover,
.mb-menu a:focus-visible {
	color: var(--mb-bordeaux);
}
.mb-menu a:hover::before,
.mb-menu a:focus-visible::before {
	transform: scaleX(1);
}
.mb-menu li.current-menu-item > a,
.mb-menu li.current-menu-ancestor > a,
.mb-menu li.current_page_item > a {
	color: var(--mb-bordeaux);
}
.mb-menu li.current-menu-item > a::before,
.mb-menu li.current-menu-ancestor > a::before,
.mb-menu li.current_page_item > a::before {
	transform: scaleX(1);
}

/* ---- Sous-menus (desktop : au survol / focus) — plus doux, plus riches ---- */
.mb-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px;
	position: absolute;
	top: calc(100% + 24px);
	left: 50%;
	transform: translate(-50%, 8px) scale(.98);
	min-width: 250px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 24px 48px -12px rgba(30,34,56,.28), 0 2px 8px rgba(30,34,56,.08);
	border-top: 3px solid var(--mb-or);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), visibility .25s;
	z-index: 10;
}
.mb-menu li.menu-item-has-children:hover > .sub-menu,
.mb-menu li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
}
.mb-menu .sub-menu a {
	position: relative;
	padding: 11px 16px;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 600;
	border-radius: 6px;
	color: var(--mb-marine);
	transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.mb-menu .sub-menu li + li { margin-top: 2px; }
.mb-menu .sub-menu a:hover {
	background: var(--mb-or-clair);
	color: var(--mb-bordeaux-fonce);
	padding-left: 20px;
}

/* ---- Actions à droite : CTA + burger ---- */
.mb-header-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.mb-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--mb-bordeaux), var(--mb-bordeaux-fonce));
	color: var(--mb-ivoire);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid var(--mb-bordeaux);
	box-shadow: 0 10px 24px -10px rgba(122,42,46,.55), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.16);
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
	white-space: nowrap;
}
.mb-header-cta::after {
	content: '\2192';
	transition: transform .22s ease;
}
.mb-header-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -10px rgba(122,42,46,.6), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 5px rgba(0,0,0,.16);
	background: linear-gradient(135deg, var(--mb-bordeaux-fonce), var(--mb-bordeaux));
}
.mb-header-cta:hover::after { transform: translateX(3px); }

.mb-burger {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	transition: background .2s ease;
}
.mb-burger:hover { background: rgba(122,42,46,.08); }
.mb-burger span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--mb-bordeaux);
	transition: transform .3s ease, opacity .3s ease;
}
body.mb-nav-open .mb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mb-nav-open .mb-burger span:nth-child(2) { opacity: 0; }
body.mb-nav-open .mb-burger span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mb-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(30,34,56,.6);
	z-index: 997;
}

/* Croix de fermeture + CTA du tiroir mobile : masqués par défaut (desktop),
   activés uniquement dans le palier "tiroir mobile" ci-dessous. */
.mb-nav-close { display: none; }
.mb-nav-drawer-ctas { display: none; }

/* ---- Palier "bureau compact" : écrans 901-1360px (écrans "carrés"
   4:3/5:4, portables 15" redimensionnés…). Le menu complet doit rester
   visible ici — on ne bascule PAS sur le tiroir mobile, on resserre
   juste tout (logo, texte, nav, CTA) pour que ça tienne sur une ligne.
   Valeurs de base ci-dessous = pire cas (901px) ; le sous-palier suivant
   (1141-1360px) les agrandit là où il reste de la marge. */
@media (max-width: 1360px) {
	.mb-topbar-tutelle span { max-width: 220px; }
	.mb-header-inner { padding: 0 12px; min-height: 68px; gap: 8px; }
	.mb-header-brand { gap: 6px; }
	.mb-header-brand .custom-logo { height: 64px; }
	.mb-header-brand-text { padding-left: 8px; }
	.mb-header-brand-name { font-size: .84rem; }
	.mb-header-brand-tag { font-size: .6rem; margin-top: 1px; }
	.mb-header-brand-tag::before { width: 8px; }

	.mb-menu { gap: 8px; }
	.mb-menu a { font-size: .68rem; letter-spacing: .03em; gap: 3px; padding: 6px 0; }
	.mb-menu > li.menu-item-has-children > a::after { width: 5px; height: 5px; }

	.mb-header-actions { gap: 8px; }
	.mb-header-cta { padding: 7px 12px; font-size: .62rem; letter-spacing: .04em; gap: 4px; }
	.mb-header-cta::after { display: none; }

	.mb-menu .sub-menu { top: calc(100% + 14px); min-width: 210px; }
}

/* ---- Sous-palier "bureau compact large" : 1141-1360px. Le menu resserré
   ci-dessus n'a besoin que d'environ 900px pour tenir — sur la partie haute
   de la fourchette "carrée" (1280, 1366 redimensionné…) il reste largement
   la place d'agrandir le texte pour la lisibilité, tout en restant sur une
   seule ligne sans passer par le tiroir mobile. */
@media (min-width: 1141px) and (max-width: 1360px) {
	.mb-header-inner { padding: 0 24px; min-height: 86px; gap: 16px; }
	.mb-header-brand { gap: 8px; }
	.mb-header-brand .custom-logo { height: 80px; }
	.mb-header-brand-text { padding-left: 14px; }
	.mb-header-brand-name { font-size: 1rem; }
	.mb-header-brand-tag { font-size: .7rem; margin-top: 3px; }
	.mb-header-brand-tag::before { width: 14px; }

	.mb-menu { gap: 18px; }
	.mb-menu a { font-size: .76rem; letter-spacing: .05em; gap: 4px; }
	.mb-menu > li.menu-item-has-children > a::after { width: 6px; height: 6px; }

	.mb-header-actions { gap: 16px; }
	.mb-header-cta { padding: 11px 20px; font-size: .72rem; letter-spacing: .06em; }

	.mb-menu .sub-menu { top: calc(100% + 18px); min-width: 230px; }
}

/* ---- Tiroir mobile : en dessous de 900px, la souris/le survol ne sont
   plus la norme (tablette portrait, téléphone) → menu plein écran tactile. */
@media (max-width: 900px) {
	.mb-header-inner { padding: 0 14px; min-height: 80px; gap: 10px; }
	.mb-header-brand { gap: 6px; }
	/* Logo agrandi sur mobile (56px → 70px) : à cette seule largeur d'écran,
	   il paraissait nettement plus petit que sur tous les autres paliers
	   (64-88px ailleurs) alors que la place verticale ne manque pas. */
	.mb-header-brand .custom-logo { height: 70px; }
	.mb-header-brand-text { padding-left: 10px; }
	.mb-header-brand-name { font-size: .88rem; }
	.mb-header-brand-tag { font-size: .7rem; margin-top: 4px; }
	.mb-header-brand-tag::before { width: 16px; }

	/* Le CTA texte + le burger ne tiennent pas ensemble à côté du lockup
	   logo+nom sur un petit écran : on masque le CTA d'en-tête (déjà
	   présent en gros dans le hero et dans le menu "Contribuer") et on
	   ne garde que le burger. */
	.mb-header-cta { display: none; }
	.mb-burger { display: flex; }

	.mb-primary-nav {
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: min(320px, 86vw);
		background: linear-gradient(160deg, var(--mb-bordeaux-fonce), #331419);
		z-index: 998;
		padding: 90px 26px 40px;
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateX(100%);
		transition: transform .32s cubic-bezier(.4,0,.2,1);
		/* La règle desktop (display:flex, sans flex-direction → row par défaut)
		   ne posait pas de souci tant que le tiroir ne contenait que le <ul>
		   du menu. Depuis l'ajout de la croix de fermeture et des CTA comme
		   frères du <ul>, il faut explicitement empiler ces 3 blocs en
		   colonne, sinon ils s'alignent côte à côte et débordent du tiroir. */
		flex-direction: column;
		justify-content: flex-start;
		box-shadow: -20px 0 44px rgba(0,0,0,.35);
	}
	body.mb-nav-open .mb-primary-nav { transform: translateX(0); }
	body.mb-nav-open { overflow: hidden; }

	.mb-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.mb-menu a {
		color: var(--mb-or-clair);
		padding: 13px 10px;
		font-size: .85rem;
		letter-spacing: .09em;
		gap: 5px;
		/* .mb-menu a hérite "white-space: nowrap" de la règle desktop (menu sur
		   une ligne) : sur le tiroir mobile, un intitulé de sous-menu un peu
		   long ("Gouvernance & Transparence") débordait donc du tiroir au lieu
		   de passer à la ligne — texte tronqué, illisible, mal aligné. On
		   autorise ici le retour à la ligne, normal dans un menu vertical. */
		white-space: normal;
		overflow-wrap: break-word;
		text-align: left;
	}
	.mb-menu > li > a::before { display: none; }
	.mb-menu > li + li { border-top: 1px solid rgba(234,217,160,.1); }
	.mb-menu a:hover, .mb-menu a:focus-visible { color: #fff; background: rgba(255,255,255,.08); border-radius: 6px; }
	.mb-menu li.current-menu-item > a { color: var(--mb-or); }
	.mb-menu > li.menu-item-has-children > a::after { width: 6px; height: 6px; }

	.mb-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0,0,0,.18);
		border-top: none;
		border-left: 2px solid var(--mb-or);
		border-radius: 0 6px 6px 0;
		margin: 2px 0 8px 8px;
		max-height: 0;
		overflow: hidden;
		padding: 0 10px;
		transition: max-height .3s ease, padding .3s ease;
	}
	/* Bug réel trouvé le 27/08 (confirmé par simulation d'un vrai tap, pas
	   juste un .click() JS) : sur mobile, un appui laisse le <li> "coincé" en
	   :hover / :focus-within (comportement classique iOS Safari / Chrome
	   Android, l'état hover ne se relâche pas après un tap). La règle
	   desktop ".mb-menu li.menu-item-has-children:hover > .sub-menu" a une
	   spécificité plus forte que la règle mobile ci-dessus pour la seule
	   propriété "transform" : elle réappliquait donc translate(-50%,0), ce
	   qui décalait le sous-menu de plusieurs dizaines de pixels vers la
	   gauche (jusqu'à sortir de l'écran) au lieu de rester statique sous son
	   parent. On neutralise explicitement ici, avec la même sélectivité,
	   déclarée après la règle desktop → elle gagne. */
	.mb-menu li.menu-item-has-children:hover > .sub-menu,
	.mb-menu li.menu-item-has-children:focus-within > .sub-menu {
		transform: none;
	}
	li.mb-submenu-open > .sub-menu {
		/* Plafond volontairement large : avec le retour à la ligne autorisé
		   ci-dessus, un sous-menu à plusieurs items sur 2 lignes reste plus
		   haut qu'avant — la marge évite de retronquer le contenu. */
		max-height: 800px;
		padding: 8px 10px;
	}
	.mb-menu .sub-menu a { color: rgba(234,217,160,.85); padding-left: 12px; }

	/* ---- Croix de fermeture du tiroir (en plus du burger, qui redevient une
	   croix animée, mais reste hors du tiroir donc peu visible une fois le
	   panneau ouvert par-dessus lui) ---- */
	.mb-nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 1px solid rgba(234,217,160,.35);
		background: rgba(255,255,255,.06);
		color: var(--mb-or-clair);
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
		transition: background .2s ease, transform .2s ease, color .2s ease;
	}
	.mb-nav-close:hover { background: rgba(255,255,255,.16); color: #fff; transform: rotate(90deg); }

	/* ---- CTA du tiroir : contribuer + WhatsApp, toujours visibles en bas du
	   menu, sans avoir à retourner sur la page pour les retrouver ---- */
	.mb-nav-drawer-ctas {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 28px;
		padding-top: 24px;
		border-top: 1px solid rgba(234,217,160,.15);
	}
	.mb-nav-drawer-btn {
		width: 100%;
		justify-content: center;
		font-size: .82rem;
		letter-spacing: .04em;
		padding: 14px 20px;
	}
	.mb-nav-drawer-whatsapp {
		background: #25D366;
		border-color: #25D366;
		color: #0b3d1e;
	}
	.mb-nav-drawer-whatsapp:hover { background: #20bd5a; box-shadow: 0 10px 24px rgba(37,211,102,.35); }
	.mb-nav-drawer-whatsapp .mb-icon-svg { width: 18px; height: 18px; flex-shrink: 0; }
}

/* Petits mobiles : la barre utilitaire n'a pas la place pour tél + email */
@media (max-width: 640px) {
	.mb-topbar-tutelle span { max-width: 130px; }
	.mb-topbar-sep,
	.mb-topbar-links a:last-child { display: none; }
}

/* Typographie officielle de la charte, appliquée sitewide (Elementor + WP natif) */
body, p, li, .elementor-widget-text-editor, .elementor-button {
	font-family: var(--mb-font-sans);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--mb-font-serif);
}

/* --------------------------------------------------------------------------
   Icônes maison (voir plugin-src/inc/mb-icons.php) — remplacent les emoji.
   Badge circulaire dégradé, micro-interaction au survol de la carte parente,
   léger rebond à l'apparition (couplé à .mb-reveal).
   -------------------------------------------------------------------------- */
.mb-icon-badge {
	--mb-icon-size: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mb-icon-size);
	height: var(--mb-icon-size);
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 8px 18px rgba(30,34,56,.14);
	transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.mb-icon-svg { width: 46%; height: 46%; overflow: visible; }
.mb-icon-bg-bordeaux { background: linear-gradient(145deg, var(--mb-bordeaux), var(--mb-bordeaux-fonce)); color: var(--mb-or-clair); }
.mb-icon-bg-bordeaux-fonce { background: linear-gradient(145deg, var(--mb-bordeaux-fonce), #2c0c10); color: var(--mb-or-clair); }
.mb-icon-bg-marine { background: linear-gradient(145deg, var(--mb-marine), #0f1120); color: var(--mb-or-clair); }
.mb-icon-bg-or { background: linear-gradient(145deg, var(--mb-or), #b3893c); color: var(--mb-bordeaux-fonce); }
.mb-icon-bg-ivoire { background: var(--mb-ivoire); color: var(--mb-bordeaux); box-shadow: 0 8px 18px rgba(0,0,0,.22); }

/* Rebond léger à l'apparition, sur la révélation de la carte parente.
   Scopé à .mb-js pour la même raison que .mb-reveal : sans JS, l'icône doit
   rester visible à sa taille normale plutôt que de figer à scale(.6). */
.mb-js .mb-reveal .mb-icon-badge { transform: scale(.6) rotate(-8deg); }
.mb-reveal.is-visible .mb-icon-badge { transform: scale(1) rotate(0deg); transition-delay: calc(var(--mb-delay, 0ms) + 120ms); }

/* Micro-interaction au survol de la carte / du lien parent. */
.mb-card-hover:hover .mb-icon-badge,
.mb-profile-card:hover .mb-icon-badge,
.mb-trust-item:hover .mb-icon-badge,
.mb-level-card:hover .mb-icon-badge,
.mb-pillar-card:hover .mb-icon-badge,
a:hover > .mb-icon-badge {
	transform: scale(1.12) rotate(-6deg);
	box-shadow: 0 12px 26px rgba(30,34,56,.24);
}

/* --------------------------------------------------------------------------
   Révélation au scroll (fade-in / slide-in) — IntersectionObserver ajoute
   .is-visible ; voir mb-global.js. Respecte prefers-reduced-motion.

   SÉCURITÉ : l'état masqué n'existe QUE sous ".mb-js" (classe posée de façon
   synchrone, tout en haut de <head>, avant tout autre script). Si JS est
   bloqué, échoue ou n'a pas encore couru, le contenu reste visible par
   défaut — jamais de section qui reste invisible pour de vrai. mb-global.js
   pose en plus un filet de sécurité (setTimeout) qui force la révélation de
   tout élément resté masqué après 2,5s, au cas où l'observateur en raterait un.
   -------------------------------------------------------------------------- */
.mb-js .mb-reveal {
	opacity: 0;
	transform: translateY(24px);
}
.mb-reveal {
	transition: opacity .45s ease, transform .45s ease;
	transition-delay: var(--mb-delay, 0ms);
}
.mb-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Note : prefers-reduced-motion est géré en JS (mb-global.js ajoute .is-visible
   immédiatement dans ce cas) plutôt qu'ici — Autoptimize aplatit les @media
   imbriqués dans ce fichier lors de la minification et corrompait la règle. */

/* Effet Ken Burns (zoom lent) pour une image de fond en l'absence de vidéo */
.mb-kenburns {
	overflow: hidden;
}
.mb-kenburns img,
.mb-kenburns .mb-kenburns-bg {
	animation: mb-kenburns-zoom 22s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes mb-kenburns-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}

/* Compteur de collecte / chiffres animés */
.mb-counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Compteur de collecte — panneau de campagne (refonte du 25/08).
   Carte surélevée sur fond ivoire, chiffres mis à jour en quasi temps réel
   (route REST mb/v1/stats pollée par mb-global.js) dès qu'un don ou un
   partenariat est enregistré côté serveur — voir balengou-core.php.
   -------------------------------------------------------------------------- */
.mb-compteur {
	position: relative;
	text-align: center;
	max-width: 860px;
	margin: 0 auto;
	padding: 44px 44px 36px;
	background: #fff;
	border: 1px solid rgba(201,162,75,.4);
	border-radius: 20px;
	box-shadow: 0 24px 56px rgba(78,21,25,.12);
}
.mb-compteur-badge {
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--mb-bordeaux), var(--mb-bordeaux-fonce));
	box-shadow: 0 10px 24px rgba(78,21,25,.35), 0 0 0 5px #fff;
}
.mb-compteur-badge .mb-icon-svg { width: 24px; height: 24px; color: var(--mb-or-clair); }
.mb-compteur-eyebrow {
	display: block;
	font-family: var(--mb-font-sans);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mb-or);
	margin: 22px 0 8px;
}
.mb-compteur-title {
	font-family: var(--mb-font-serif);
	color: var(--mb-bordeaux);
	font-size: 1.5rem;
	margin: 0 0 26px;
}
.mb-compteur-amount {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.5rem, 3.6vw, 2.2rem);
	font-weight: 700;
	color: var(--mb-bordeaux);
	margin: 0 0 14px;
	line-height: 1.3;
}
.mb-compteur-amount-unit {
	font-family: var(--mb-font-sans);
	font-size: .58em;
	font-weight: 700;
	color: var(--mb-marine);
	opacity: .7;
	margin-right: 8px;
	vertical-align: middle;
}
.mb-compteur-amount-of {
	display: block;
	font-family: var(--mb-font-sans);
	font-size: .84rem;
	font-weight: 400;
	color: var(--mb-marine);
	opacity: .8;
	margin-top: 6px;
}
.mb-compteur-amount-of strong { color: var(--mb-bordeaux); font-weight: 700; }

.mb-progress-bar {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: 16px;
	margin: 0 auto 34px;
	background: var(--mb-or-clair);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: inset 0 1px 4px rgba(78,21,25,.2);
}
.mb-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--mb-or), var(--mb-bordeaux));
	border-radius: 999px;
	transition: width 1.6s cubic-bezier(.22,.61,.36,1);
	box-shadow: 0 0 14px rgba(201,162,75,.65);
}
.mb-progress-label {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-family: var(--mb-font-sans);
	font-size: .66rem;
	font-weight: 700;
	color: var(--mb-bordeaux-fonce);
}

.mb-compteur-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 30px;
	padding-top: 26px;
	border-top: 1px solid rgba(201,162,75,.32);
}
.mb-compteur-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 2px 10px;
}
.mb-compteur-stat + .mb-compteur-stat::before {
	content: '';
	position: absolute;
	left: 0; top: 8%;
	width: 1px;
	height: 84%;
	background: rgba(201,162,75,.32);
}
.mb-compteur-stat .mb-icon-badge { --mb-icon-size: 46px; box-shadow: none; }
.mb-compteur-stat-value .mb-counter {
	font-family: var(--mb-font-serif);
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--mb-bordeaux);
}
.mb-compteur-stat-label {
	font-family: var(--mb-font-sans);
	font-size: .78rem;
	font-weight: 600;
	color: var(--mb-marine);
	text-align: center;
}

.mb-compteur-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.mb-compteur-ctas .mb-btn { font-size: .86rem; padding: 13px 26px; }

/* Bref éclat doré quand un chiffre se met à jour de lui-même (sans
   rechargement de page) : rend visible la synchronisation temps réel. */
@keyframes mb-counter-pulse {
	0% { text-shadow: 0 0 0 rgba(201,162,75,0); }
	35% { text-shadow: 0 0 16px rgba(201,162,75,.9); }
	100% { text-shadow: 0 0 0 rgba(201,162,75,0); }
}
.mb-counter.mb-counter-live { animation: mb-counter-pulse 1.8s ease; }

@media (max-width: 640px) {
	.mb-compteur { padding: 36px 22px 28px; }
	.mb-compteur-stats { grid-template-columns: 1fr; gap: 22px; }
	.mb-compteur-stat + .mb-compteur-stat::before { left: 12%; top: 0; width: 76%; height: 1px; }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.mb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--mb-font-sans);
	font-weight: 700;
	font-size: 1rem;
	padding: 14px 30px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	/* 31/08 — un libellé long ("Recevoir le dossier par email et WhatsApp")
	   débordait du formulaire sur mobile et chevauchait le widget WhatsApp
	   flottant : .mb-btn étant en inline-flex, sa largeur suivait le contenu
	   sans jamais retourner à la ligne ni se limiter à son conteneur. */
	max-width: 100%;
	white-space: normal;
	text-align: center;
}
.mb-btn:hover { transform: translateY(-2px); }
/* Icône maison (mb_icon_svg) directement dans un bouton, sans le badge
   circulaire habituel : taille fixe plutôt que le pourcentage hérité de
   .mb-icon-svg (pensé pour un badge de 60px), sinon l'icône ne s'affiche pas. */
.mb-btn > svg.mb-icon-svg { width: 18px; height: 18px; flex-shrink: 0; overflow: visible; }
.mb-btn-primary {
	background: var(--mb-or);
	color: var(--mb-bordeaux-fonce);
}
.mb-btn-primary:hover { box-shadow: 0 10px 24px rgba(201,162,75,.4); color: var(--mb-bordeaux-fonce); }
.mb-btn-secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Formulaires (don / newsletter)
   -------------------------------------------------------------------------- */
.mb-don-form, .mb-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 480px;
	font-family: var(--mb-font-sans);
}
/* 31/08 — centrage horizontal des formulaires de contribution sur les 4
   pages (hub, particuliers, entreprises, institutions) : la classe
   "mb-form-centered" passée en css_classes du widget shortcode Elementor
   ne s'imprime pas de façon fiable sur le rendu (même bug déjà documenté
   plus haut pour les widgets natifs heading/button — cf. mb_heading() /
   mb_button() dans les scripts build-*.php), donc restait sans effet.
   Centrage posé directement sur .mb-don-form, classe commune à
   [mb_don_form] ET [mb_contact_pro] sur les 4 pages, indépendant de ce
   bug. */
.mb-don-form { margin: 0 auto; }
/* 31/08 — centrage horizontal (page /actualites, zone "Ne manquez plus une
   étape") : même bug que .mb-don-form ci-dessus — "mb-newsletter-centered"
   posée en css_classes du widget shortcode Elementor ([mb_newsletter],
   build-actualites.php) ne s'imprimait jamais sur le rendu, donc restait
   sans effet malgré la règle ci-dessous qui en dépendait. Centrage posé
   directement sur .mb-newsletter-form (seul usage du site), indépendant de
   ce bug ; justify-content:center en plus de margin:auto pour que le champ
   et le bouton restent groupés-centrés même si le flex-wrap les fait passer
   sur 2 lignes (mobile étroit). */
.mb-newsletter-form { flex-direction: row; gap: 10px; max-width: 480px; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.mb-don-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--mb-marine); font-size: .92rem; }
.mb-don-form input, .mb-don-form textarea,
.mb-newsletter-form input {
	font-family: var(--mb-font-sans);
	padding: 12px 14px;
	border: 1px solid rgba(30,34,56,.2);
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
}
.mb-newsletter-form input { flex: 1 1 220px; }
/* 08-09/09 — champ "Niveau / grade correspondant" (cf. [mb_don_form]) :
   grisé, non modifiable, purement informatif (le bon badge parmi les 5
   pré-rendus est affiché/masqué en JS selon le montant saisi, cf.
   initDonGradePreview() dans mb-global.js). Un <div> (pas un <input> : une
   icône <svg> ne peut pas vivre dans la valeur d'un champ de saisie), mais
   qui GARDE l'apparence d'un champ de formulaire — bordure/fond gris,
   hauteur alignée sur les autres champs — pour rester cohérent
   visuellement malgré la balise différente. */
.mb-don-grade-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 12px 14px;
	border: 1px solid rgba(30,34,56,.2);
	border-radius: 6px;
	background: #eef0f4;
	cursor: default;
}
/* Tiret d'état vide : discret (pas en gras/coloré comme un vrai résultat),
   masqué (cf. JS) dès qu'un badge de niveau est affiché à sa place. */
.mb-don-grade-empty { color: var(--mb-marine); opacity: .4; font-weight: 400; }
/* Badge de niveau réutilisé tel quel (icône + "Niveau X — Nom"), même style
   que sur le Mur des Mécènes (cf. .mb-mecene-grade, règles existantes plus
   bas dans ce fichier) — seule la taille de police est légèrement remontée
   ici (le contexte "résultat d'un formulaire" justifie un peu plus de
   présence que la petite pastille du mur). */
.mb-don-grade-preview .mb-mecene-grade { font-size: .8rem; }
/* Bug réel trouvé en vérification : les 5 badges s'affichaient TOUS en même
   temps malgré l'attribut natif "hidden" posé par le JS sur 4 d'entre eux.
   Cause : ".mb-mecene-grade" (règle existante, réutilisée telle quelle
   ci-dessus) fixe "display:inline-flex" avec la MÊME spécificité qu'une
   classe (0,1,0) que la règle native du navigateur "[hidden]{display:none}"
   — à spécificité égale, une règle d'auteur l'emporte toujours sur celle du
   navigateur, donc "inline-flex" gagnait et rendait "hidden" sans effet.
   Sélecteur à 3 niveaux ci-dessous (0,3,0) pour trancher sans ambiguïté. */
.mb-don-grade-preview .mb-don-grade-option[hidden] { display: none; }
.mb-form-note { font-size: .82rem; color: var(--mb-marine); opacity: .75; }
/* 31/08 — note sous le bouton CTA des blocs déroulants (grades Platine et
   Diamant sur /contribuer/entreprises, "Pas de paiement direct...") centrée
   pour accompagner le bouton lui-même, déjà centré. */
.mb-accordion-body .mb-form-note { text-align: center; }
/* 31/08 — étoile rouge sur les champs réellement obligatoires (nom complet,
   téléphone) : rouge franc choisi à dessein (hors charte graphique) pour
   rester la convention universellement reconnue "champ requis", plutôt que
   de se fondre dans le bordeaux du site et perdre en clarté. */
.mb-required-star { color: #dc2626; margin-left: 2px; }
/* 31/08 — message d'erreur budget/grade ([mb_contact_pro] entreprise) : même
   rouge que l'étoile obligatoire, gras pour bien signaler le blocage. */
.mb-pro-budget-error { color: #dc2626 !important; font-weight: 700; opacity: 1; }
/* Ville / Pays côte à côte sur desktop (cf. [mb_don_form show_location="1"]). */
.mb-form-row { display: flex; gap: 16px; }
.mb-form-row label { flex: 1; min-width: 0; }
@media (max-width: 480px) { .mb-form-row { flex-direction: column; gap: 16px; } }
.mb-form-success {
	background: var(--mb-or-clair);
	color: var(--mb-bordeaux-fonce);
	padding: 16px 20px;
	border-radius: 8px;
	font-weight: 600;
}
/* 09/09 — encaissement automatique SoleasPay (Orange Money/MTN MoMo/carte),
   cf. initSoleaspayDon() dans mb-global.js : 2 états supplémentaires en plus
   du succès ci-dessus (réutilisé tel quel pour le paiement confirmé), sur le
   même gabarit visuel (fond clair + padding + radius) pour rester cohérent
   avec le reste des messages de formulaire du site. */
.mb-don-processing {
	background: #fff8e6;
	color: var(--mb-bordeaux-fonce);
	padding: 16px 20px;
	border-radius: 8px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 12px;
}
.mb-don-processing-spinner {
	width: 20px; height: 20px; flex: none;
	border: 3px solid rgba(78,21,25,.2);
	border-top-color: var(--mb-bordeaux-fonce);
	border-radius: 50%;
	animation: mb-spin .8s linear infinite;
}
@keyframes mb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mb-don-processing-spinner { animation: none; } }
.mb-don-failed {
	background: #fee2e2;
	color: #7a2a2e;
	padding: 16px 20px;
	border-radius: 8px;
	font-weight: 600;
}
.mb-don-failed .mb-fete-ctas { margin-top: 12px; }

/* Cartes avec micro-interaction au survol */
.mb-card-hover {
	transition: transform .35s ease, box-shadow .35s ease;
}
.mb-card-hover:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(78,21,25,.16);
}

/* --------------------------------------------------------------------------
   Footer institutionnel — refonte du 25/08.
   Bandeau newsletter fonctionnel + grille éditoriale 4 colonnes + coordonnées
   avec icônes maison + barre de bas de page. Markup : footer.php
   -------------------------------------------------------------------------- */
.mb-site-footer {
	background: var(--mb-bordeaux-fonce);
	color: var(--mb-or-clair);
	font-family: var(--mb-font-sans);
}

/* ---- Bandeau newsletter ---- */
.mb-footer-newsletter {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: 60px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}
/* Séparation nette et "royale" entre le bandeau newsletter et la grille de
   colonnes en dessous : un liseré doré dégradé, pas un simple 1px discret. */
.mb-footer-newsletter::after {
	content: '';
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--mb-or) 15%, var(--mb-or-clair) 50%, var(--mb-or) 85%, transparent);
	opacity: .85;
}
.mb-footer-newsletter-text { max-width: 600px; }
.mb-footer-eyebrow {
	font-family: var(--mb-font-serif);
	font-style: italic;
	color: var(--mb-or);
	font-size: .9rem;
}
.mb-footer-newsletter-text h3 {
	font-family: var(--mb-font-serif);
	font-weight: 400;
	color: #fff;
	font-size: 1.55rem;
	line-height: 1.35;
	margin: 8px 0 0;
}
.mb-footer-newsletter-form { flex-shrink: 0; min-width: 420px; max-width: 420px; }
/* 14/09 v2 — refonte complète suite retour explicite : la v1 (pilule
   input+bouton sur une ligne, Turnstile renvoyé en dessous) gardait un
   champ SANS bordure propre ("border:none", transparent) — un choix qui
   ne fonctionnait QUE tant que le champ restait collé au bouton à
   l'intérieur d'un contour commun. Dès que Turnstile forçait un retour à
   la ligne, le champ perdait tout repère visuel : plus aucune bordure,
   juste du texte flottant, impossible à identifier comme une zone de
   saisie. Nouvelle approche, plus robuste par construction : chaque
   élément (champ, bouton, widget) porte SA PROPRE délimitation visuelle,
   empilé verticalement — ne dépend plus d'un contour partagé qui peut se
   déformer selon le contenu. Identique en mobile et desktop (empilement
   déjà naturel sur les 2, pas de logique conditionnelle fragile). */
.mb-footer-newsletter-form .mb-newsletter-form {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	max-width: none;
	background: none;
	border: none;
	padding: 0;
}
.mb-footer-newsletter-form .mb-newsletter-form input {
	/* Bordure et fond PROPRES au champ, qui ne dépendent d'aucun élément
	   voisin — c'est ce qui garantit que le champ reste visible et
	   identifiable quel que soit ce qui l'entoure. */
	background: rgba(251,246,236,.09);
	border: 1.5px solid rgba(201,162,75,.55);
	border-radius: 999px;
	padding: 14px 22px;
	color: #fff;
	font-size: .95rem;
	width: 100%;
	box-sizing: border-box;
	/* 14/09 v2 — cause réelle du champ devenu un ovale géant (diagnostiqué
	   via getComputedStyle, pas une supposition) : la règle générale
	   ".mb-newsletter-form input { flex: 1 1 220px }" (pensée pour la
	   disposition en LIGNE du formulaire de don) restait active ici : avec
	   "flex-grow:1" dans un conteneur en colonne étiré à ~440px de haut
	   (le bloc de texte à gauche du footer, via align-items:stretch du
	   grand-parent), le champ grandissait pour remplir tout cet espace
	   vertical disponible. "flex: none" fixe sa taille à son contenu
	   intrinsèque (padding + texte), sans dépendre de la hauteur du
	   conteneur autour.
	   PIÈGE À NE PAS REPRODUIRE : je pensais avoir corrigé le problème une
	   première fois (14/09 v1) sans l'avoir réellement vérifié par
	   getComputedStyle — juste une capture d'écran prise trop tôt, pendant
	   l'état "Verifying..." transitoire de Turnstile, qui masquait le vrai
	   souci. Toujours attendre l'état FINAL (widget entièrement chargé,
	   ~7-8s) avant de juger un rendu visuel correct ou non. */
	flex: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mb-footer-newsletter-form .mb-newsletter-form input::placeholder { color: rgba(251,246,236,.55); }
.mb-footer-newsletter-form .mb-newsletter-form input:focus {
	outline: none;
	border-color: var(--mb-or);
	background: rgba(251,246,236,.14);
	box-shadow: 0 0 0 4px rgba(201,162,75,.2);
}
/* 14/09 v3 — passage de "compact" (boîte carrée ~140x120px, jugée trop
   épaisse/grossière — retour explicite) à "flexible" : une fine barre
   pleine largeur, du même gabarit que le champ juste au-dessus, beaucoup
   plus plate et intégrée. width:100% explicite : le mode flexible de
   Turnstile épouse la largeur de SON PROPRE conteneur (.cf-turnstile),
   qui n'a pas de largeur définie par défaut. */
.mb-footer-newsletter-form .mb-newsletter-form .mb-turnstile-widget--flexible {
	width: 100%;
}
.mb-footer-newsletter-form .mb-newsletter-form .mb-turnstile-widget iframe {
	border-radius: 8px;
}
.mb-footer-newsletter-form .mb-newsletter-form .mb-btn {
	/* 14/09 v2 — plus de flex-shrink:0 (utile seulement à côté d'un champ
	   sur la même ligne, cf. ancienne version pilule) : en colonne, le
	   bouton s'étire naturellement en pleine largeur ("align-items:stretch",
	   comportement flex par défaut) et son texte reste centré. */
	text-align: center;
	background: linear-gradient(135deg, var(--mb-or), #b5893c);
	border: none;
	color: var(--mb-bordeaux-fonce);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 8px 18px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mb-footer-newsletter-form .mb-newsletter-form .mb-btn:hover {
	transform: translateY(-1px);
	color: var(--mb-bordeaux-fonce);
	background: linear-gradient(135deg, var(--mb-or-clair), var(--mb-or));
	box-shadow: 0 10px 22px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.mb-footer-newsletter-form .mb-form-note { display: none; }
.mb-footer-newsletter-form .mb-form-success {
	background: rgba(201,162,75,.12);
	border: 1.5px solid rgba(201,162,75,.4);
	border-radius: 999px;
	color: var(--mb-or-clair);
	padding: 14px 24px;
	font-weight: 600;
}

/* ---- Colonnes ---- */
.mb-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 40px;
	padding: 64px 40px 48px;
}
/* Fines séparations verticales entre colonnes — plus soigné qu'un simple
   espace vide, sans alourdir. */
.mb-footer-inner > div { position: relative; }
.mb-footer-inner > div + div::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: rgba(201,162,75,.18);
}
@media (max-width: 1000px) {
	.mb-footer-inner { grid-template-columns: 1fr 1fr; }
	.mb-footer-inner > div + div::before { display: none; }
}
@media (max-width: 560px) {
	.mb-footer-inner { grid-template-columns: 1fr; }
}
/* Bandeau newsletter : bascule en colonne bien AVANT que la largeur fixe du
   formulaire (min-width:420px, flex-shrink:0, cf. règle plus haut) ne dépasse
   l'espace restant. Trouvé le 26/08 : l'ancien seuil (560px) laissait une
   zone morte 561-~750px où le formulaire, encore en ligne mais déjà à
   l'étroit, débordait du viewport (scroll horizontal indésirable) — pas
   visible sur mobile/desktop "normaux", donc passé inaperçu jusqu'ici. Seuil
   aligné sur celui du menu mobile (900px) pour rester cohérent avec le reste
   du site plutôt que de chercher un seuil pile ajusté. !important : ce
   fichier a déjà montré qu'une règle non conditionnelle plus bas dans le
   fichier peut gagner sur une media query plus haute à spécificité égale. */
@media (max-width: 900px) {
	.mb-footer-newsletter { flex-direction: column !important; align-items: flex-start !important; padding: 48px 20px !important; }
	.mb-footer-newsletter::after { left: 20px !important; right: 20px !important; }
	.mb-footer-newsletter-form { min-width: 0 !important; width: 100% !important; }
}
img.mb-footer-logo { max-width: 168px; height: auto; margin-bottom: 20px; }
.mb-footer-devise {
	font-family: var(--mb-font-serif);
	font-style: italic;
	color: var(--mb-or-clair);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 30ch;
	margin: 0 0 18px;
}
.mb-footer-baseline {
	font-size: .85rem;
	line-height: 1.75;
	color: rgba(251,246,236,.5);
	max-width: 32ch;
	margin: 0;
}
.mb-footer-widget-title {
	position: relative;
	font-family: var(--mb-font-sans);
	font-weight: 700;
	color: var(--mb-or);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 24px;
	padding-bottom: 14px;
}
.mb-footer-widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	background: linear-gradient(90deg, var(--mb-or), transparent);
}
.mb-footer-links { list-style: none; margin: 0; padding: 0; }
.mb-footer-links li { margin: 0; }
.mb-footer-links a {
	display: block;
	color: rgba(251,246,236,.72);
	text-decoration: none;
	font-size: .92rem;
	line-height: 2.5;
	transition: color .15s ease;
}
.mb-footer-links a:hover { color: var(--mb-or-clair); }
.mb-footer-contact { display: flex; flex-direction: column; gap: 15px; }
.mb-footer-contact li { margin: 0; }
.mb-footer-contact a, .mb-footer-contact .mb-footer-static {
	display: flex;
	align-items: center;
	gap: 11px;
	color: rgba(251,246,236,.85);
	text-decoration: none;
	font-size: .88rem;
	line-height: 1.4;
}
.mb-footer-contact a:hover { color: var(--mb-or-clair); }
.mb-footer-contact .mb-icon-svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--mb-or); }

/* ---- Barre finale ---- */
.mb-footer-bottom {
	max-width: 1320px;
	margin: 0 auto;
	padding: 22px 40px;
	border-top: 1px solid rgba(201,162,75,.3);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	font-size: .78rem;
	color: rgba(251,246,236,.45);
}
.mb-footer-bottom a { color: rgba(251,246,236,.45); text-decoration: none; }
.mb-footer-bottom a:hover { color: var(--mb-or-clair); }

/* --------------------------------------------------------------------------
   Bouton flottant KAPIA
   -------------------------------------------------------------------------- */
.mb-kapia-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #25D366;
	color: #fff;
	border-radius: 999px;
	padding: 12px 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	text-decoration: none;
	font-family: var(--mb-font-sans);
	font-weight: 700;
	font-size: .92rem;
	transition: transform .25s ease, box-shadow .25s ease, padding .25s ease;
	max-width: 52px;
	overflow: hidden;
	white-space: nowrap;
}
.mb-kapia-fab:hover,
.mb-kapia-fab:focus-visible {
	max-width: 260px;
	padding-right: 20px;
	box-shadow: 0 10px 28px rgba(0,0,0,.32);
	color: #fff;
}
.mb-kapia-fab svg { flex: 0 0 auto; width: 26px; height: 26px; }
.mb-kapia-fab .mb-kapia-label { opacity: 0; transition: opacity .2s ease .1s; }
.mb-kapia-fab:hover .mb-kapia-label,
.mb-kapia-fab:focus-visible .mb-kapia-label { opacity: 1; }
@media (max-width: 640px) {
	.mb-kapia-fab { max-width: 52px; }
	.mb-kapia-fab .mb-kapia-label { display: none; }
}

/* 31/08 — bouton "remonter en haut de page" (demande explicite) : petit
   badge circulaire doré, même langage visuel que .mb-wall-panel-badge
   (dégradé or + liseré clair + ombre), positionné juste au-dessus du bouton
   WhatsApp KAPIA (52px de haut environ, cf. .mb-kapia-fab ci-dessus) avec un
   petit espace entre les deux. Masqué en haut de page, apparaît au scroll
   (cf. initBackToTop, mb-global.js) — pas de logique par page comme KAPIA,
   toujours présent. */
.mb-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 82px;
	z-index: 9998;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(155deg, #EAD9A0, var(--mb-or) 55%, #a97f38);
	color: var(--mb-bordeaux-fonce);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px -6px rgba(201,162,75,.6), 0 0 0 3px #fdf9ef, 0 0 0 5px rgba(201,162,75,.4);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mb-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mb-back-to-top:hover, .mb-back-to-top:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -6px rgba(201,162,75,.75), 0 0 0 3px #fdf9ef, 0 0 0 5px rgba(201,162,75,.55);
}
.mb-back-to-top svg { width: 20px; height: 20px; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
	.mb-back-to-top { transition: opacity .25s ease; }
	.mb-back-to-top:hover, .mb-back-to-top:focus-visible { transform: none; }
}

/* ==========================================================================
   PAGE ACCUEIL — blocs 1 à 14
   ========================================================================== */

/* Icônes emoji utilisées comme pictogrammes (cohérent avec le contenu source) */
.mb-emoji-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 12px; }

/* ---- Bloc 1 — Hero ---- */
.mb-hero {
	position: relative;
	background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, var(--mb-bordeaux) 65%);
	color: #fff;
	padding: 32px 24px;
	overflow: hidden;
}
.mb-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.mb-hero-inner { grid-template-columns: 1fr; }
}
.mb-hero h1 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	line-height: 1.15;
	margin: 0 0 6px;
	color: #fff;
	overflow-wrap: break-word;
	word-break: break-word;
}
.mb-hero .mb-hero-submotto {
	position: relative;
	font-family: var(--mb-font-serif);
	font-style: italic;
	color: var(--mb-or);
	font-size: 1.15rem;
	letter-spacing: .06em;
	margin: 0 0 16px;
	padding-bottom: 16px;
}
/* Petit trait doré qui se déploie sous la devise — signature "royale" à
   l'arrivée sur la page (voir animations d'entrée plus bas). */
.mb-hero .mb-hero-submotto::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 90px;
	height: 2px;
	background: linear-gradient(90deg, var(--mb-or), transparent);
}
@keyframes mb-hero-underline { from { width: 0; } to { width: 90px; } }
.mb-js .mb-hero .mb-hero-submotto::after {
	animation: mb-hero-underline 1s cubic-bezier(.16,1,.3,1) both;
	animation-delay: .75s;
}
@media (prefers-reduced-motion: reduce) {
	.mb-hero .mb-hero-submotto::after { animation: none !important; width: 90px !important; }
}
.mb-hero-accroche {
	font-family: var(--mb-font-serif);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--mb-or-clair);
	margin: 0 0 20px;
	max-width: 46ch;
}
.mb-hero-context {
	font-size: .98rem;
	line-height: 1.6;
	color: rgba(255,255,255,.82);
	max-width: 52ch;
	margin: 0 0 32px;
}
.mb-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.mb-btn-outline-white {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
}
.mb-btn-outline-white:hover { background: #fff; color: var(--mb-bordeaux); }
.mb-btn-outline-bordeaux {
	background: transparent;
	border: 2px solid var(--mb-bordeaux);
	color: var(--mb-bordeaux);
}
.mb-btn-outline-bordeaux:hover { background: var(--mb-bordeaux); color: #fff; }
.mb-hero-reassurance { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 0; }
/* Image alignée exactement sur la hauteur du bloc texte (symétrie de design
   sur écran d'ordinateur) : la colonne s'étire (align-items:stretch) et
   l'image la remplit en recadrant plutôt qu'en s'étirant. */
.mb-hero-visual {
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
	border: 1px solid rgba(234,217,160,.25);
}
.mb-hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	/* Empilé sur mobile/tablette : l'image retrouve sa hauteur naturelle,
	   la "symétrie" desktop n'a plus de sens colonne contre colonne. */
	.mb-hero-visual { height: auto; }
	.mb-hero-visual img { height: auto; object-fit: initial; }
}
/* ---- Hero accueil : diaporama animé à 4 images (28/08) ----
   Remplace l'unique composite "Roi et Musée" (quasi carré, étiré sur toute
   la hauteur de la colonne de texte via align-items:stretch, donc très
   haut) par 4 photos en fondu enchaîné. Demande : réduire la hauteur du
   visuel et le centrer verticalement dans sa zone plutôt que de l'étirer —
   d'où align-self:center + aspect-ratio (au lieu de height:100%) — et faire
   tourner 4 images avec une transition animée. Les 4 <img> sont superposées
   en position:absolute (fondu géré en JS, cf. initHeroSlideshow() dans
   mb-global.js, classe .is-active) ; aspect-ratio fixe et identique sur
   toutes les images pour qu'aucune ne "saute" en changeant de format d'une
   diapo à l'autre. object-position réglable individuellement par image
   (cf. style inline posé par build-accueil.php) pour un recadrage centré
   sur le bâtiment quel que soit son cadrage d'origine. */
.mb-hero-visual-roi {
	position: relative;
	height: auto;
	aspect-ratio: 4 / 3;
	align-self: center;
}
.mb-hero-visual-roi .mb-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.8s ease;
}
.mb-hero-visual-roi .mb-hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mb-hero-visual-roi .mb-hero-slide { transition: none; }
}

/* ---- Hero : entrée animée, échelonnée, plus "royale" ----
   Le hero est toujours au-dessus de la ligne de flottaison (visible dès le
   chargement) : on utilise une animation @keyframes qui se joue au chargement
   de la page plutôt que le système de révélation au scroll (.mb-reveal),
   pensé pour du contenu plus bas dans la page. Scopé à .mb-js : sans JS (ou
   moteur qui ignore les animations), tout reste visible par défaut — jamais
   de texte qui resterait cassé/invisible. */
@keyframes mb-hero-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mb-hero-visual-in {
	from { opacity: 0; transform: scale(1.06); }
	to   { opacity: 1; transform: scale(1); }
}
.mb-js .mb-hero h1                   { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .05s; }
.mb-js .mb-hero .mb-hero-submotto    { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .2s; }
.mb-js .mb-hero .mb-hero-accroche    { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .35s; }
.mb-js .mb-hero .mb-hero-context     { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .5s; }
.mb-js .mb-hero .mb-hero-ctas        { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .65s; }
.mb-js .mb-hero .mb-hero-reassurance { animation: mb-hero-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: .78s; }
/* Le visuel arrive en léger zoom-arrière, décalé après le texte. */
.mb-js .mb-hero .mb-hero-visual { animation: mb-hero-visual-in 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
	.mb-hero h1, .mb-hero .mb-hero-submotto, .mb-hero .mb-hero-accroche,
	.mb-hero .mb-hero-context, .mb-hero .mb-hero-ctas, .mb-hero .mb-hero-reassurance,
	.mb-hero .mb-hero-visual {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---- Bloc 2 — compteur : voir règles .mb-compteur existantes, fond dédié.
   Bloc 3 (4 cartes) partage le même fond ivoire : les deux forment une seule
   "zone 2" visuelle, séparée en sous-zones par .mb-zone-divider plutôt que
   par une rupture de couleur. ---- */
.mb-section-ivoire { background: var(--mb-ivoire); }

/* Séparateur discret et royal entre deux sous-zones d'un même bloc à fond
   commun (ex. compteur → 4 cartes du problème). */
.mb-zone-divider {
	position: relative;
	width: 90px;
	height: 3px;
	margin: 0 auto 36px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--mb-or), transparent);
}
.mb-zone-divider::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--mb-bordeaux);
}

/* ---- Bloc 3 — 4 cartes problème ---- */
/* 28/08 — audit général du site ("beaucoup de grands espaces vides
   partout") : padding par défaut réduit de 72px à 56px. Les overrides
   explicites ci-dessous (zone2/zone3/tight-top/roi-page-tight, valeurs
   absolues, pas relatives à celle-ci) ne sont pas affectés par ce
   changement — seules les sections qui n'avaient encore AUCUN resserrage
   spécifique en profitent, sur tout le site. */
.mb-section { padding: 56px 24px; }
.mb-section-inner { max-width: 1200px; margin: 0 auto; }
/* Zone 2 (compteur + 4 cartes) seulement : espaces vides resserrés, cf. demande
   du 25/08. Pas touché à .mb-section globalement pour ne pas affecter les
   autres blocs/pages qui la partagent (piliers, routeur de profils, etc.). */
.mb-section-zone2 { padding: 48px 24px 64px; }
/* /le-projet (28/08) : les 7 séparateurs .mb-zone-divider/.mb-zone4-divider
   ajoutés en tête de bloc laissaient un vide jugé "trop grand" au-dessus
   (72px de padding-bottom du bloc précédent + 72px de padding-top de celui-ci
   avant même d'atteindre le trait du séparateur). Réduit ce padding-top
   uniquement sur les blocs concernés de cette page — la marge de bas de
   bloc (souvent partagée avec un bloc suivant SANS séparateur) reste à 72px
   pour ne rien resserrer ailleurs. */
.mb-section-tight-top { padding-top: 24px; }
/* 31/08 — pendant symétrique, utilisé pour resserrer l'écart entre les deux
   panneaux du Mur des Mécènes après suppression du séparateur qui s'y
   trouvait entre-temps (cf. build-mur-des-mecenes.php). */
.mb-section-tight-bottom { padding-bottom: 24px; }
/* Page dédiée /le-projet/mot-du-roi (27/08) seulement : espaces de section
   resserrés (portrait, lettre intégrale, CTA de clôture) — cf. demande
   utilisateur, vide vertical jugé trop grand en haut et en bas de la page.
   Compound selector (.mb-section.mb-roi-page-tight) pour primer sans
   ambiguïté sur .mb-section, sans toucher cette règle globale. */
.mb-section.mb-roi-page-tight { padding-top: 44px; padding-bottom: 44px; }
.mb-section-zone2 .mb-section-subtitle { margin-bottom: 32px; }
/* Zone 3 (piliers + routeur de profils) : même logique, espaces resserrés,
   même fond ivoire partagé entre bloc4 et bloc5 (séparés par .mb-zone-divider). */
.mb-section-zone3 { padding: 48px 24px 56px; }
.mb-section-zone3 .mb-section-subtitle { margin-bottom: 40px; }
/* 28/08 — audit général : 12px entre le titre et ce qui suit (sous-titre ou
   contenu direct) collait visuellement le titre à la suite sur tout le
   site. Porté à 22px. */
.mb-section-title,
.elementor-widget-heading .mb-section-title.elementor-heading-title {
	font-family: var(--mb-font-serif) !important;
	color: var(--mb-bordeaux) !important;
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
	margin: 0 0 22px;
}
/* Titre de sous-section secondaire (ex : "Actualités du site" sous "Les
   grandes étapes du projet") : même style, taille réduite pour marquer la
   hiérarchie sans dupliquer toute la règle .mb-section-title. */
.mb-section-title-sm,
.elementor-widget-heading .mb-section-title-sm.elementor-heading-title {
	font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important;
}
.mb-section-title-light,
.elementor-widget-heading .mb-section-title-light.elementor-heading-title {
	font-family: var(--mb-font-serif) !important;
	color: #fff !important;
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
	margin: 0 0 32px;
}
.mb-section-subtitle {
	text-align: center;
	color: var(--mb-marine);
	max-width: 62ch;
	margin: 0 auto 44px;
	font-size: 1.05rem;
	opacity: .85;
}
.mb-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: mb-card;
}
@media (max-width: 900px) { .mb-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mb-card-grid { grid-template-columns: 1fr; } }
.mb-card {
	position: relative;
	overflow: hidden;
	counter-increment: mb-card;
	background: #fff;
	border: 1px solid rgba(78,21,25,.08);
	border-radius: 16px;
	padding: 40px 26px 32px;
	text-align: center;
	transition: border-color .35s ease;
}
.mb-card:hover { border-color: rgba(201,162,75,.55); }
/* Liseré doré en tête de carte + numérotation discrète en filigrane : signature
   visuelle premium, cohérente avec le reste de la charte (or/bordeaux). */
.mb-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mb-or), var(--mb-bordeaux));
}
.mb-card::after {
	content: counter(mb-card, decimal-leading-zero);
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: var(--mb-font-serif);
	font-size: 1.7rem;
	font-weight: 700;
	color: rgba(122,42,46,.07);
	line-height: 1;
}
.mb-card .mb-icon-badge { margin-bottom: 20px; }
.mb-card h4 {
	font-family: var(--mb-font-serif);
	color: var(--mb-bordeaux);
	font-size: 1.15rem;
	margin: 0 0 10px;
}
.mb-card p { color: var(--mb-marine); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ---- Bascule (transition problème → solution), refonte du 25/08 :
   double liseré doré + 2 CTA (WhatsApp / contribuer) au point de bascule
   psychologique du parcours de lecture. ---- */
.mb-bascule {
	position: relative;
	background: linear-gradient(160deg, var(--mb-bordeaux) 0%, var(--mb-bordeaux-fonce) 100%);
	color: var(--mb-or-clair);
	text-align: center;
	padding: 64px 24px 56px;
	overflow: hidden;
}
.mb-bascule::before,
.mb-bascule::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--mb-or) 18%, var(--mb-or-clair) 50%, var(--mb-or) 82%, transparent);
	opacity: .85;
}
.mb-bascule::before { top: 0; }
.mb-bascule::after { bottom: 0; }
.mb-bascule h3 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0 auto 28px;
	max-width: 46ch;
	color: #fff;
}
.mb-bascule-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* ---- Bloc 4 — 3 piliers alternés ----
   Refonte du 25/08 (zone 3) : les photos sont remplacées par des visuels
   "motion design" (SVG + CSS pure, voir .mb-pillar-motion plus bas).
   Refonte du 25/08 (v2) : visuel + texte sont désormais réunis dans UN seul
   cadre bordé/ombré par pilier (.mb-pillar devient la carte). Objectif :
   qu'on identifie sans réfléchir "cette scène animée va avec ce texte", même
   en pile mobile où l'alternance gauche/droite disparaît — un simple gap
   entre deux blocs libres ne le garantissait pas assez clairement. ---- */
.mb-pillar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	margin-bottom: 40px;
	background: linear-gradient(165deg, #fff 0%, #fdfaf1 100%);
	border: 1px solid rgba(201,162,75,.35);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 48px -18px rgba(78,21,25,.18);
}
.mb-pillar:last-child { margin-bottom: 0; }
/* .mb-pillar-visual (photo, cf. 26/08) doit alterner exactement comme
   .mb-pillar-motion — ajouté ici pour la timeline de /actualites, sinon la
   reverse ne s'appliquait qu'aux scènes animées et jamais aux vraies photos. */
.mb-pillar.mb-pillar-reverse .mb-pillar-motion,
.mb-pillar.mb-pillar-reverse .mb-pillar-visual { order: 2; }
.mb-pillar.mb-pillar-reverse .mb-pillar-text { order: 1; }
@media (max-width: 800px) {
	.mb-pillar, .mb-pillar.mb-pillar-reverse { grid-template-columns: 1fr; }
	.mb-pillar.mb-pillar-reverse .mb-pillar-motion,
	.mb-pillar.mb-pillar-reverse .mb-pillar-visual,
	.mb-pillar.mb-pillar-reverse .mb-pillar-text { order: initial; }
}

/* Panneau "motion design" : scène SVG animée en CSS pure, remplace la photo.
   100% codé (aucun fichier vidéo), léger, net à toute résolution, et chaque
   scène illustre littéralement son pilier — voir mb_motion_* dans
   build-accueil.php pour le détail des 3 compositions. Pas de coins arrondis
   ni d'ombre propres : c'est la carte .mb-pillar (overflow:hidden) qui les
   porte, pour rester correct quelle que soit la position (gauche/droite/haut
   en mobile) sans logique conditionnelle. */
.mb-pillar-motion {
	position: relative;
	/* 31/08 — 300px → 250px (demande "trop de gros espace vide"), ET
	   "min-height" changé en "height" : cause racine trouvée du problème —
	   un "min-height" seul ne fournit pas de base définie pour la résolution
	   d'un pourcentage ("height:84%" sur le SVG enfant, cf. règle suivante),
	   qui retombait alors sur sa largeur (84% de la colonne, ~590px) mise à
	   l'échelle par son propre ratio 4:3 — soit ~440px de haut, bien plus que
	   voulu (constaté : carte à 433px malgré ce min-height déjà réduit).
	   "height" fixe résout la référence de pourcentage correctement.
	   Uniquement .mb-pillar-motion (scènes SVG animées, utilisées ici sur
	   l'accueil) : .mb-pillar-visual (variante photo, /le-projet,
	   /actualites, un <img> ordinaire — pas concerné par ce problème) garde
	   son propre gabarit min-height:300px, inchangé. */
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mb-pillar-motion .mb-motion-svg { width: 84%; height: 84%; max-width: 100%; max-height: 100%; overflow: visible; }
/* Icône seule (pas de scène "motion" dédiée) : cas de l'étape sans photo ni
   composition sur-mesure (écosystème digital, /actualites). */
.mb-pillar-motion .mb-icon-svg-lg { width: 30%; height: 30%; min-width: 64px; min-height: 64px; opacity: .95; }
.mb-pillar-motion-1 { background: linear-gradient(160deg, var(--mb-bordeaux-fonce), var(--mb-bordeaux)); }
.mb-pillar-motion-2 { background: linear-gradient(160deg, var(--mb-marine), #10121e); }
.mb-pillar-motion-3 { background: linear-gradient(160deg, var(--mb-bordeaux), #2c0c10); }
/* Numéro en filigrane ancré sur le visuel lui-même : lien visuel explicite et
   immédiat entre "cette scène animée" et "ce pilier", identique en langage
   graphique à la numérotation des 4 cartes de profil plus bas (cohérence de
   zone). Se lit d'un coup d'œil, y compris quand l'ordre visuel/texte
   s'inverse ou qu'on est empilé en mobile. */
.mb-pillar-motion::after {
	content: attr(data-num);
	position: absolute;
	bottom: 12px;
	right: 18px;
	font-family: var(--mb-font-serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: rgba(255,255,255,.22);
	line-height: 1;
}
@media (max-width: 800px) { .mb-pillar-motion { height: 200px; } }

/* Variante photo de .mb-pillar-motion : même gabarit (min-height, coins gérés
   par .mb-pillar en overflow:hidden) mais une vraie image à la place de la
   scène animée — utilisée quand une photo existe pour l'étape illustrée
   (sinon on garde .mb-pillar-motion). Pas de règle avant le 26/08 : l'image
   utilisée jusque-là (bloc architecture de /le-projet) s'affichait donc à sa
   taille naturelle, non cadrée — corrigé au passage. */
.mb-pillar-visual { position: relative; min-height: 300px; overflow: hidden; }
.mb-pillar-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .mb-pillar-visual { min-height: 220px; } }

/* Pilier 1 — PRÉSERVER : halo doré qui respire, 3 anneaux concentriques qui
   tournent à des vitesses/sens différents, 2 points lumineux qui orbitent
   littéralement sur l'anneau principal, masque qui "respire" doucement, et 5
   poussières d'or qui scintillent en cascade — composition plus dense et
   plus longue à se répéter qu'avant (refonte du 25/08, v2 : "plus animé, plus
   réaliste, plus long"). */
@keyframes mb-motion-glow-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.08); } }
.mb-js .mb-motion-glow { animation: mb-motion-glow-pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mb-motion-breathe-fx { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.mb-js .mb-motion-breathe { animation: mb-motion-breathe-fx 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mb-motion-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mb-js .mb-motion-ring { animation: mb-motion-ring-spin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
.mb-js .mb-motion-ring-rev { animation-duration: 55s; animation-direction: reverse; }
.mb-js .mb-motion-ring-outer { animation: mb-motion-ring-spin 80s linear infinite; transform-box: fill-box; transform-origin: center; }
.mb-js .mb-motion-orbit { animation: mb-motion-ring-spin 20s linear infinite; transform-box: view-box; transform-origin: 200px 150px; }
.mb-js .mb-motion-orbit-2 { animation-duration: 28s; animation-direction: reverse; }
@keyframes mb-motion-sparkle-fx { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.mb-js .mb-motion-sparkle { animation: mb-motion-sparkle-fx 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mb-js .mb-motion-sparkle-2 { animation-delay: .9s; }
.mb-js .mb-motion-sparkle-3 { animation-delay: 1.7s; }
.mb-js .mb-motion-sparkle-4 { animation-delay: 2.4s; }
.mb-js .mb-motion-sparkle-5 { animation-delay: 3.2s; }

/* Pilier 2 — TRANSMETTRE : un flux de 3 lumières (pas une seule) voyage en
   continu de l'aîné vers l'enfant en suivant fidèlement l'arc dessiné
   (offset-path — la lumière longe la trajectoire visible, pas une ligne
   droite approximative), sur fond d'un lent "souffle" des deux silhouettes
   (l'aîné d'abord, l'enfant juste après, pour suggérer la transmission) et de
   3 anneaux de réception qui se propagent en cascade. */
.mb-motion-dot { offset-path: path('M150 120 Q220 60 270 138'); }
@keyframes mb-motion-breathe-fx-elder { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.mb-js .mb-motion-breathe-elder { animation: mb-motion-breathe-fx-elder 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mb-js .mb-motion-breathe-child { animation: mb-motion-breathe-fx-elder 4.6s ease-in-out infinite; animation-delay: 1.1s; transform-box: fill-box; transform-origin: center; }
@keyframes mb-motion-travel-path {
	0%   { offset-distance: 0%; opacity: 0; }
	10%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}
.mb-js .mb-motion-dot-1 { animation: mb-motion-travel-path 3.4s cubic-bezier(.45,0,.55,1) infinite; }
.mb-js .mb-motion-dot-2 { animation: mb-motion-travel-path 3.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay: 1.15s; }
.mb-js .mb-motion-dot-3 { animation: mb-motion-travel-path 3.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay: 2.3s; }
@keyframes mb-motion-pulse-fx { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
.mb-js .mb-motion-pulse { animation: mb-motion-pulse-fx 3.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mb-js .mb-motion-pulse-2 { animation-delay: 1.15s; }
.mb-js .mb-motion-pulse-3 { animation-delay: 2.3s; }
.mb-js .mb-motion-sparkle-child { animation: mb-motion-sparkle-fx 2.6s ease-in-out infinite; animation-delay: 1.8s; transform-box: fill-box; transform-origin: center; }

/* Pilier 3 — DÉVELOPPER : 5 barres de croissance (au lieu de 3) qui respirent
   en cascade, un reflet lumineux qui balaie lentement le bâtiment (clippé à
   sa silhouette), et 5 particules (visiteurs/retombées) qui s'élèvent vers
   l'entrée à des rythmes échelonnés — cycle complet nettement plus long et
   plus riche qu'avant. */
@keyframes mb-motion-bar-grow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.16); } }
.mb-js .mb-motion-bar { animation: mb-motion-bar-grow 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.mb-js .mb-motion-bar-2 { animation-delay: .3s; }
.mb-js .mb-motion-bar-3 { animation-delay: .6s; }
.mb-js .mb-motion-bar-4 { animation-delay: .9s; }
.mb-js .mb-motion-bar-5 { animation-delay: 1.2s; }
@keyframes mb-motion-sweep-fx { 0%, 15% { transform: translateX(-40px); opacity: 0; } 25% { opacity: .8; } 45%, 100% { transform: translateX(140px); opacity: 0; } }
.mb-js .mb-motion-sweep { animation: mb-motion-sweep-fx 6s ease-in-out infinite; }
@keyframes mb-motion-rise-fx {
	0%   { transform: translateY(0); opacity: 0; }
	15%  { opacity: 1; }
	90%  { opacity: 0; }
	100% { transform: translateY(-86px); opacity: 0; }
}
.mb-js .mb-motion-rise { animation: mb-motion-rise-fx 3.6s ease-in infinite; transform-box: fill-box; }
.mb-js .mb-motion-rise-2 { animation-delay: .7s; }
.mb-js .mb-motion-rise-3 { animation-delay: 1.4s; }
.mb-js .mb-motion-rise-4 { animation-delay: 2.1s; }
.mb-js .mb-motion-rise-5 { animation-delay: 2.8s; }

@media (prefers-reduced-motion: reduce) {
	.mb-motion-svg * { animation: none !important; }
}

.mb-pillar-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mb-font-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mb-bordeaux);
	background: var(--mb-or-clair);
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.mb-pillar-badge .mb-icon-svg { width: 14px; height: 14px; }
.mb-pillar-text {
	padding: 36px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mb-pillar-text h3 {
	/* 31/08 — allégé (demande "trop grossier") : 1.6rem en gras (poids par
	   défaut du navigateur sur un h3) + tout en majuscules cumulaient trop de
	   poids visuel, surtout depuis que la carte est plus compacte. Taille et
	   graisse réduites, léger espacement des lettres ajouté pour garder de
	   l'élégance sur un texte en capitales plutôt que de la lourdeur. */
	font-family: var(--mb-font-serif);
	color: var(--mb-bordeaux);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin: 0 0 12px;
}
.mb-pillar-text p { color: var(--mb-marine); font-size: .98rem; line-height: 1.6; margin: 0; }
@media (max-width: 800px) { .mb-pillar-text { padding: 32px 28px 36px; } }

/* ---- Bloc 5 — routeur de profil, 4 cartes ---- */
.mb-profile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: mb-profile;
}
.mb-profile-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .mb-profile-grid, .mb-profile-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mb-profile-grid-3 { grid-template-columns: 1fr; } }

/* Paliers de montant suggérés (chips cliquables au-dessus du champ montant) */
.mb-amount-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: -8px; }
.mb-amount-chip {
	border: 1px solid rgba(78,21,25,.25);
	background: #fff;
	color: var(--mb-bordeaux);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--mb-font-sans);
}
.mb-amount-chip:hover { background: var(--mb-or-clair); }
/* 31/08 — 6 montants (5 000 à 1 000 000 FCFA) : grille fixe à 3 colonnes sur
   mobile pour garantir 2 lignes pleines quel que soit le texte (au lieu du
   flex-wrap naturel, qui retombait à 2 par ligne et poussait à 3 lignes). */
@media (max-width: 560px) {
	.mb-amount-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 0; }
	.mb-amount-chip { padding: 10px 4px; font-size: .74rem; text-align: center; line-height: 1.25; }
}
/* 09/09 — bug réel trouvé en vérification (/dons/elites-notables, puces
   jusqu'à "2.000.000 FCFA" — plus longues que les montants des 3 autres
   landing pages) : à 320-360px, la colonne de droite de la grille 3
   colonnes ci-dessus débordait de la page de quelques px (mesuré via
   getBoundingClientRect en excluant les ancêtres à scroll interne — jamais
   scrollWidth seul, qui masque ce genre de débordement via l'overflow-x:clip
   du site). Palier supplémentaire, plus étroit, qui réduit encore un peu la
   police/le padding — bénéfice universel (aucune régression possible : du
   texte plus petit ne peut jamais créer de nouveau débordement) plutôt
   qu'un correctif isolé à une seule page. */
@media (max-width: 360px) {
	.mb-amount-chip { padding: 8px 2px; font-size: .66rem; }
}
@media (max-width: 560px) { .mb-profile-grid { grid-template-columns: 1fr; } }
/* Alignement interne strict et identique sur les 4 cartes (refonte du 25/08,
   v2) : icône et titre toujours ancrés au même point en haut, quel que soit
   le nombre de lignes du texte ; la description s'étire (flex-grow) pour
   absorber l'écart de longueur entre les 4 profils, si bien que le CTA
   retombe systématiquement à la même hauteur en bas des 4 cartes — plus de
   grille visuellement "en escalier". */
.mb-profile-card {
	position: relative;
	counter-increment: mb-profile;
	border-radius: 14px;
	padding: 32px 24px 28px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	border: 2px solid transparent;
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mb-profile-card:hover {
	border-color: var(--mb-or);
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(30,34,56,.28);
	color: #fff;
}
/* Numérotation en filigrane (même signature que .mb-card en zone 2). */
.mb-profile-card::after {
	content: counter(mb-profile, decimal-leading-zero);
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: var(--mb-font-serif);
	font-size: 1.8rem;
	font-weight: 700;
	color: rgba(255,255,255,.16);
	line-height: 1;
}
/* Reflet qui balaie la carte au survol — effet "waouh" discret et pro. */
.mb-profile-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
	transform: translateX(-130%);
	transition: transform .8s ease;
	pointer-events: none;
}
.mb-profile-card:hover::before { transform: translateX(130%); }
.mb-profile-card .mb-icon-badge { position: relative; z-index: 1; margin-bottom: 22px; flex-shrink: 0; }
.mb-profile-card .mb-emoji-icon { font-size: 2.4rem; margin-bottom: 14px; }
.mb-profile-card h4 { position: relative; font-family: var(--mb-font-serif); font-size: 1.25rem; line-height: 1.3; margin: 0 0 10px; flex-shrink: 0; }
/* flex-grow : absorbe l'écart de longueur entre les 4 textes pour que le CTA
   ci-dessous retombe toujours exactement à la même hauteur. */
.mb-profile-card p { position: relative; font-size: .9rem; line-height: 1.5; margin: 0 0 20px; color: rgba(255,255,255,.88); flex-grow: 1; }
.mb-profile-card .mb-profile-cta {
	position: relative;
	display: inline-block;
	width: fit-content;
	flex-shrink: 0;
	font-weight: 700;
	font-size: .88rem;
	color: var(--mb-or-clair);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color .3s ease;
}
.mb-profile-card:hover .mb-profile-cta { border-color: rgba(234,217,160,.6); }
.mb-profile-card .mb-profile-arrow { display: inline-block; margin-left: 2px; transition: transform .3s ease; }
.mb-profile-card:hover .mb-profile-arrow { transform: translateX(5px); }
.mb-profile-1 { background: linear-gradient(160deg, #2c3a5e, var(--mb-marine)); }
.mb-profile-2 { background: linear-gradient(160deg, #8a3438, var(--mb-bordeaux)); }
.mb-profile-3 { background: linear-gradient(160deg, var(--mb-bordeaux-fonce), #2a0d0f); }
/* Anciennement un vert hors charte (#3d7a5c) : remplacé par un dégradé or →
   bordeaux foncé, cohérent avec les 6 couleurs officielles de la charte. */
.mb-profile-4 { background: linear-gradient(160deg, #b5893c, var(--mb-bordeaux-fonce)); }

/* ---- Bloc 5b — clôture de zone 3 : CTA pour qui hésite encore entre les 4
   profils. Volontairement sobre (pas un nouveau panneau encadré) : la zone 3
   est déjà riche visuellement (piliers animés, cartes à reflet) — ce CTA de
   fin sert de respiration avant la zone suivante, sur le même fond ivoire. */
.mb-zone3-cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: 12px 24px 64px;
}
.mb-zone3-cta h3 {
	font-family: var(--mb-font-serif);
	font-weight: 400;
	color: var(--mb-bordeaux);
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	line-height: 1.4;
	margin: 0 0 24px;
}
.mb-zone3-cta-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 640px) { .mb-zone3-cta { padding: 8px 20px 48px; } }

/* ---- Bloc 6 — Fête du Bois, teaser émotionnel ----
   Refonte du 26/08 (v2) : les séparateurs inclinés de la v1 ont été retirés
   (jugés inutiles/inélégants) et l'espace vide en haut de zone réduit.
   IMPORTANT : overflow doit rester visible ici (jamais hidden) — c'est ce qui
   permet à .mb-fete-forest de déborder physiquement sous la zone, par-dessus
   le bloc 7, pour l'effet "à cheval sur 2 zones" (desktop ET mobile). */
.mb-fete-teaser {
	background: radial-gradient(120% 140% at 20% 20%, #6b2226 0%, var(--mb-bordeaux-fonce) 55%, #2a0d0f 100%);
	color: #fff;
	padding: 56px 24px 80px;
	text-align: left;
	position: relative;
	overflow: visible;
}
.mb-fete-teaser::after {
	content: '';
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(45deg, rgba(201,162,75,.05) 0 2px, transparent 2px 14px);
	pointer-events: none;
}
.mb-fete-teaser-row {
	/* PAS de position:relative ici : .mb-fete-forest doit se positionner en
	   absolu par rapport à .mb-fete-teaser (toute la zone, padding compris),
	   pas par rapport à cette rangée (qui ne fait que la hauteur du texte). */
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 40px;
}
.mb-fete-teaser-text { max-width: 620px; }
.mb-fete-eyebrow {
	display: inline-block;
	font-family: var(--mb-font-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mb-bordeaux-fonce);
	background: var(--mb-or-clair);
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.mb-fete-teaser h2 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	color: var(--mb-or);
	margin: 0 0 20px;
	line-height: 1.3;
}
.mb-fete-teaser p { font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.88); margin: 0 0 28px; }
.mb-fete-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.mb-fete-ctas .mb-btn { display: inline-flex; align-items: center; gap: 10px; }
.mb-fete-ctas .mb-icon-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Photo de la forêt sacrée, détourée en hexagone, qui déborde volontairement
   sous la zone pour chevaucher le bloc 7 — l'effet "waouh" demandé. Le cadre
   doré (::before, légèrement plus grand, même clip-path) dépasse d'un fin
   liseré tout autour, comme un médaillon. */
/* Elementor pose position:relative par défaut À LA FOIS sur le conteneur
   .e-con (.mb-fete-teaser-row) ET sur le wrapper .elementor-widget-text-editor
   de CHAQUE widget — les deux deviennent chacun un candidat "plus proche" que
   .mb-fete-teaser pour le positionnement absolu de .mb-fete-forest (d'où un
   chevauchement mal calculé la première fois). On neutralise les deux pour
   que .mb-fete-forest se positionne bien par rapport à toute la zone. */
.mb-fete-teaser-row,
.mb-fete-teaser .elementor-widget-text-editor:has(.mb-fete-forest) {
	position: static !important;
}
/* Ancré depuis le BAS (bottom négatif) plutôt que depuis le haut en % : le
   débordement reste ainsi un nombre de px fixe et prévisible, quelle que soit
   la longueur du texte au-dessus — c'est ce qui permet d'activer le même
   chevauchement sur mobile sans recalcul fragile. */
.mb-fete-forest {
	position: absolute;
	bottom: -130px;
	right: 4%;
	width: min(480px, 38vw);
	aspect-ratio: 1 / 1.05;
	z-index: 6;
	filter: drop-shadow(0 26px 40px rgba(0,0,0,.45));
}
.mb-fete-forest::before {
	content: '';
	position: absolute;
	inset: -7px;
	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
	background: linear-gradient(160deg, var(--mb-or), var(--mb-or-clair));
	z-index: -1;
}
.mb-fete-forest img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
@media (max-width: 900px) {
	/* Le padding-bottom doit réserver toute la hauteur de l'image moins la
	   part qui déborde (bottom négatif) — sinon l'image remonte dans le flux
	   et chevauche le texte/CTA au lieu de chevaucher seulement la zone
	   suivante. Avec width ~260px (h ~273px) et bottom:-90px, il faut environ
	   273-90 ≈ 183px de réserve : 190px avec un peu de marge. */
	.mb-fete-teaser { padding: 48px 24px 190px; }
	.mb-fete-teaser-row { grid-template-columns: 1fr; }
	.mb-fete-teaser-text { max-width: none; }
	/* Même logique de chevauchement qu'en desktop, juste recentré et
	   redimensionné pour l'écran mobile — plus le petit visuel purement
	   décoratif d'avant.
	   IMPORTANT : centrage via left:0/right:0/margin:auto, PAS via
	   transform:translateX(-50%) — .mb-fete-forest porte aussi la classe
	   .mb-reveal, qui anime déjà sa propre transform (translateY, apparition
	   au scroll) ; les deux transform seraient en conflit (un seul gagne, ce
	   n'est pas additif) et translateX(-50%) se faisait écraser en pratique,
	   d'où l'image décalée vers la droite au lieu d'être centrée. */
	.mb-fete-forest {
		bottom: -90px;
		right: 0;
		left: 0;
		margin: 0 auto;
		width: min(260px, 66vw);
	}
}
/* Marge de sécurité en haut du bloc 7 : le chevauchement de la forêt doit
   toujours rester dans ce coussin, jamais toucher le titre "Un lieu. Sept
   espaces..." — plus de marge que le simple padding standard de .mb-section
   (72px) pour absorber les variantes de longueur de texte de la zone Fête du
   Bois au-dessus. */
.mb-section-after-fete { padding-top: 180px; }
@media (max-width: 900px) { .mb-section-after-fete { padding-top: 130px; } }

/* =======================================================================
   ZONE 4 (blocs 7 à 10) — refonte du 26/08 (v4).
   Demande explicite : plus de photo en fond (jugée pas assez "blanc cassé
   uniforme") — chaque bloc reçoit sa propre nuance de blanc cassé, proche
   mais visiblement différente de sa voisine, dans l'esprit de la charte
   (aucune couleur hors palette). Séparateurs beaucoup plus visibles entre
   chaque bloc (médaillon doré), espaces de respiration réduits en haut/bas
   de chaque bloc, et un CTA systématique en fin de bloc. */
.mb-zone4-bg { color: var(--mb-marine); }
.mb-zone-shade-1 { background: #FFFFFF; }
.mb-zone-shade-2 { background: var(--mb-ivoire); }
.mb-zone-shade-3 { background: #F5EEDC; }
.mb-zone-shade-4 { background: #FAF8F3; }
/* .mb-zone4-first ne doit PAS redéfinir padding-top : .mb-section-after-fete
   pose déjà la marge de sécurité nécessaire (180px) sous le chevauchement de
   la forêt de la zone précédente — une redéfinition ici l'écrasait (même
   spécificité, règle plus tardive) et faisait remonter le titre "Sept
   espaces" en plein sur la photo, illisible. */
.mb-zone4-last { padding-bottom: 56px; }
/* Espaces de respiration resserrés en haut/bas de chaque bloc de la zone
   (à part le tout premier, cf. ci-dessus) — la demande du 26/08 était
   explicitement de réduire les grands vides entre ces blocs. */
/* padding-bottom seul ici (sûr pour les 4 blocs, y compris le 1er) ;
   padding-top est géré séparément par .mb-section-zone4-top pour ne PAS
   entrer en conflit avec .mb-section-after-fete (180px) sur le premier bloc
   de la zone — cf. le commentaire au-dessus. */
.mb-section-zone4 { padding-bottom: 48px; }
.mb-section-zone4-top { padding-top: 48px; }
/* Écart titre → sous-titre → contenu resserré et harmonisé sur toute la
   zone (le défaut du site, 44px, laissait un vide jugé trop grand ici,
   notamment avant les marches de la zone "Votre nom gravé..."). */
.mb-section-zone4 .mb-section-subtitle { margin-bottom: 28px; }
@media (max-width: 640px) {
	.mb-section-zone4 .mb-section-subtitle { margin-bottom: 22px; }
	/* Même écart contenu → CTA pour les 4 blocs de la zone en mobile : un peu
	   plus serré que le desktop (36px), toujours cohérent d'un bloc à l'autre. */
	.mb-section-zone4 .mb-spaces-bento,
	.mb-section-zone4 .mb-impact-grid,
	.mb-section-zone4 .mb-levels-stairs,
	.mb-section-zone4 .mb-mecenes-grid,
	.mb-section-zone4 .mb-mecenes-grid-wrap .mb-mecenes-grid { margin-bottom: 28px; }
}

/* Séparateur "médaillon" entre les blocs de la zone — beaucoup plus visible
   que le simple trait+losange utilisé ailleurs sur la page (zones 2 et 3) :
   volontairement différent pour cette zone plus riche. */
.mb-zone4-divider {
	position: relative;
	max-width: 240px;
	height: 2px;
	margin: 0 auto 40px;
	background: linear-gradient(90deg, transparent, var(--mb-or) 15%, var(--mb-or-clair) 50%, var(--mb-or) 85%, transparent);
}
.mb-zone4-divider-medal {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--mb-or), #b5893c);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px -6px rgba(201,162,75,.6), 0 0 0 5px #fff;
}
.mb-zone4-divider-medal .mb-icon-svg { width: 20px; height: 20px; color: var(--mb-bordeaux-fonce); }

/* ---- Bloc 7 — 7 espaces, mosaïque "bento" animée (au lieu d'une grille de
   cartes plates identiques) : 1 espace vedette pleine largeur + 6 cartes,
   chacune avec sa propre scène "motion design" SVG/CSS codée en grand format
   (voir mb_motion_espace_* dans build-accueil.php). ---- */
.mb-spaces-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	counter-reset: mb-space;
	margin-bottom: 36px;
}
/* Numérotation 1 à 7 en filigrane sur chaque carte — même signature que les
   autres cartes numérotées du site (zone 2, routeur de profils). */
.mb-space-card2::after {
	content: counter(mb-space, decimal-leading-zero);
	counter-increment: mb-space;
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	font-family: var(--mb-font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: rgba(255,255,255,.5);
	line-height: 1;
}
/* Sur la carte vedette, le visuel est à gauche (pas toute la carte) : le
   numéro doit rester au-dessus de lui, pas au-dessus du texte à droite (où
   un chiffre blanc semi-transparent deviendrait invisible sur fond clair). */
.mb-space-card-hero::after { top: 16px; right: auto; left: 20px; font-size: 2rem; }
.mb-space-card-hero {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
}
@media (max-width: 900px) {
	.mb-spaces-bento { grid-template-columns: 1fr 1fr; }
	.mb-space-card-hero { grid-column: 1 / -1; grid-template-columns: 1fr; }
	/* En dessous de 900px, la carte vedette repasse en une colonne comme les
	   6 autres (cf. media query juste au-dessus) : elle doit alors leur
	   ressembler en tout point, sinon elle détonne au milieu d'une simple
	   liste verticale (demande du 26/08 : harmoniser la 1ère carte aux 6
	   autres en mobile). Seul le format desktop "vedette" reste différent.
	   !important nécessaire : les règles .mb-space-card-hero .mb-space-card2-*
	   non conditionnelles (plus bas dans ce fichier, même spécificité) sont
	   plus tardives dans la cascade et l'emportaient sinon quel que soit
	   l'écran — c'est ce qui a fait échouer silencieusement une 1ère tentative
	   de correctif ici. */
	.mb-space-card-hero::after { top: 12px !important; left: auto !important; right: 16px !important; font-size: 1.5rem !important; }
	.mb-space-card-hero .mb-space-card2-visual { height: 180px !important; min-height: 0 !important; }
	.mb-space-card-hero .mb-space-card2-body h5 { font-size: 1.1rem !important; }
	.mb-space-card-hero .mb-space-card2-body p { font-size: .9rem !important; }
}
@media (max-width: 640px) { .mb-spaces-bento { grid-template-columns: 1fr; } }
.mb-space-card2 {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255,255,255,.8);
	border: 1px solid rgba(122,42,46,.14);
	box-shadow: 0 14px 30px -12px rgba(78,21,25,.18);
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mb-space-card2:hover { border-color: rgba(201,162,75,.6); transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(78,21,25,.28); }
/* Le panneau visuel reste sombre (dégradé bordeaux/marine, cf. plus bas) —
   c'est ce contraste "encart sombre dans une carte claire" qui fait ressortir
   chaque scène animée, même sur le nouveau fond clair de la carte elle-même. */
.mb-space-card2-visual {
	position: relative;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--mb-bordeaux-fonce), var(--mb-marine));
}
.mb-space-card-hero .mb-space-card2-visual { height: 100%; min-height: 260px; }
.mb-space-card2-visual .mb-motion-svg { width: 82%; height: 82%; overflow: visible; }
/* 29/08 — cartes "7 espaces" passées en vraie photo (accueil) : léger zoom
   au survol de la carte, cohérent avec le translateY déjà posé sur
   .mb-space-card2:hover, pour garder un rendu "vivant" comme les scènes
   SVG animées qu'elles remplacent. */
.mb-space-card2-visual-photo img { display: block; transition: transform .5s ease; }
.mb-space-card2:hover .mb-space-card2-visual-photo img { transform: scale(1.06); }
/* 29/08 — demande utilisateur : la partie "texte" de chaque carte se
   confondait avec le fond blanc de la zone (.mb-zone-shade-1), le fond
   translucide de .mb-space-card2 (rgba blanc) n'y faisant presque aucune
   différence. Fond ivoire (charte graphique) posé ici pour bien détacher le
   bloc de texte du fond principal, sans toucher au panneau visuel au-dessus
   (photo/scène, qui garde son propre fond). */
.mb-space-card2-body { padding: 22px 24px 26px; background: var(--mb-ivoire); }
.mb-space-card2-body h5 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.1rem; margin: 0 0 8px; }
.mb-space-card-hero .mb-space-card2-body h5 { font-size: 1.4rem; }
.mb-space-card2-body p { color: var(--mb-marine); font-size: .9rem; line-height: 1.55; margin: 0; opacity: .85; }
.mb-space-card-hero .mb-space-card2-body p { font-size: 1rem; }

/* ---- v2 (28/08, /le-projet uniquement) — 2ᵉ passe demandée sur cette zone :
   "plus épuré, plus animé, plus pro, plus sophistiqué". Scopé à
   .mb-spaces-bento-v2 pour ne rien changer à la version d'origine de
   l'accueil (numérotation en filigrane simple, groupes RDC/Étage absents
   là-bas). ---- */
.mb-spaces-bento-v2 .mb-space-card2::after { display: none; }
/* Liseré or animé en haut de carte, révélé au survol — la "signature" haut
   de gamme qui manquait le plus au retour utilisateur. */
.mb-spaces-bento-v2 .mb-space-card2::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--mb-or) 25%, var(--mb-or-clair) 50%, var(--mb-or) 75%, transparent);
	opacity: 0;
	transform: scaleX(.6);
	transform-origin: center;
	transition: opacity .4s ease, transform .5s ease;
	z-index: 3;
}
.mb-spaces-bento-v2 .mb-space-card2:hover::before { opacity: 1; transform: scaleX(1); }
.mb-spaces-bento-v2 .mb-space-card2:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -14px rgba(78,21,25,.32); }
/* Badge-anneau numéroté à cheval sur le visuel et le corps de carte — plus
   soigné qu'un simple chiffre en filigrane, et numérotation continue 1→7
   passée depuis PHP (mb_espace_cards2) au lieu d'un compteur CSS qui
   redémarrait à chaque groupe RDC / Étage. */
.mb-spaces-bento-v2 .mb-space-badge {
	position: absolute;
	top: 160px;
	left: 24px;
	z-index: 4;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--mb-or), #b5893c);
	color: var(--mb-bordeaux-fonce);
	font-family: var(--mb-font-serif);
	font-weight: 700;
	font-size: .95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px -4px rgba(201,162,75,.6), 0 0 0 4px #fff;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mb-spaces-bento-v2 .mb-space-card2:hover .mb-space-badge { transform: scale(1.1) rotate(-6deg); }
.mb-spaces-bento-v2 .mb-space-card-hero .mb-space-badge { top: auto; bottom: 24px; left: 24px; }
@media (max-width: 900px) {
	.mb-spaces-bento-v2 .mb-space-badge { top: 160px !important; bottom: auto !important; }
}
/* Entrée au scroll légèrement plus dynamique que le fondu générique
   (.mb-reveal) : un discret zoom-in en plus du glissement, réservé à ces
   cartes (spécificité 0,3,0, supérieure à .mb-js .mb-reveal en 0,2,0). */
.mb-js .mb-spaces-bento-v2 .mb-space-card2.mb-reveal { transform: translateY(24px) scale(.96); }
.mb-spaces-bento-v2 .mb-space-card2.mb-reveal.is-visible { transform: none; }
/* Groupes RDC / Étage : chip dorée encadrée de liserés au lieu du simple
   texte capitalisé d'origine — plus sophistiqué, cohérent avec les autres
   séparateurs "médaillon" du site. */
.mb-space-group { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 40px auto 20px; }
.mb-space-group:first-of-type { margin-top: 0; }
.mb-space-group-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,75,.5)); }
.mb-space-group:first-of-type .mb-space-group-line:first-child,
.mb-space-group-line:last-child { background: linear-gradient(90deg, rgba(201,162,75,.5), transparent); }
.mb-space-group-chip {
	font-family: var(--mb-font-serif);
	color: var(--mb-bordeaux);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .82rem;
	white-space: nowrap;
	padding: 6px 16px;
	border: 1px solid rgba(201,162,75,.5);
	border-radius: 999px;
	background: #fff;
}

/* ---- Bloc 8 — impact en chiffres : compteurs animés + icône, réutilisent le
   même mécanisme que le compteur de campagne (cohérence technique). ---- */
.mb-impact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
	margin-bottom: 36px;
}
@media (max-width: 700px) { .mb-impact-grid { grid-template-columns: 1fr 1fr; } }
.mb-impact-item { display: flex; flex-direction: column; align-items: center; }
.mb-impact-item .mb-icon-svg { width: 28px; height: 28px; color: var(--mb-bordeaux); margin-bottom: 12px; }
.mb-impact-figure {
	font-family: var(--mb-font-serif);
	font-weight: 700;
	color: var(--mb-or);
	-webkit-text-stroke: .5px var(--mb-bordeaux);
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	position: relative;
	padding-bottom: 10px;
}
.mb-impact-figure::after {
	content: '';
	position: absolute;
	bottom: 0; left: 50%;
	width: 36px; height: 2px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--mb-bordeaux), transparent);
}
.mb-impact-caption { color: var(--mb-marine); font-size: .9rem; margin-top: 10px; max-width: 24ch; opacity: .85; }

/* ---- Bloc 9 — 5 niveaux de contribution, en escalier ascendant : chaque
   marche s'élève un peu plus que la précédente (translateY dégressif), la
   reconnaissance grandit visuellement avec l'engagement — volontairement
   différent d'une grille de cartes identiques déjà vue ailleurs. ---- */
.mb-levels-stairs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	align-items: end;
	padding-top: 26px;
	margin-bottom: 36px;
}
/* Refonte du 26/08 (v2) : le carrousel horizontal (défilement + marches
   décalées) causait des coupures récurrentes (badges rognés, hauteurs de
   carte incohérentes selon la longueur du texte). En dessous de 900px, on
   repasse en simple liste verticale — une carte par ligne, chacune ne
   prenant que la hauteur de son propre contenu (pas de hauteur forcée
   identique) : plus robuste, plus lisible, plus symétrique. */
@media (max-width: 900px) {
	.mb-levels-stairs {
		display: flex;
		flex-direction: column;
		/* align-items reste à "end" (hérité de la règle desktop plus bas dans le
		   fichier) tant qu'on ne le réinitialise pas ici : en colonne flex, "end"
		   aligne chaque carte à DROITE et lui donne une largeur "au contenu" au
		   lieu de la pleine largeur. Sur téléphone (~375-414px) ça passait
		   inaperçu car le texte force de toute façon presque toute la largeur
		   dispo — mais entre 600 et 900px (tablette), les 5 cartes se
		   retrouvaient avec des largeurs toutes différentes, collées à droite :
		   le défaut de tablette signalé le 26/08. "stretch" force une largeur
		   fixe et identique (pleine largeur) et un alignement centré partout. */
		align-items: stretch;
		/* 18px : même rythme que les grilles voisines de la zone (mosaïque des
		   7 espaces, mur des mécènes) — harmonisé, ni trop serré ni trop large. */
		gap: 18px;
		padding-top: 8px;
	}
	.mb-level-step { transform: none !important; }
	/* Refonte du 26/08 (v3) : l'empilement centré (rang, icône, titre, texte
	   tous centrés les uns sous les autres) rendait chaque carte "haute et
	   creuse" en pleine largeur mobile, avec des hauteurs qui variaient trop
	   visiblement d'une carte à l'autre selon la longueur du texte. Nouvelle
	   disposition en ligne, alignée à gauche — rang+icône groupés à gauche,
	   titre et palier à droite, description en dessous sur toute la largeur —
	   plus compacte, plus lisible, et beaucoup moins sensible aux variations
	   de longueur de texte. Écritures agrandies comme demandé. */
	.mb-level-step {
		padding: 22px 20px !important;
		text-align: left !important;
	}
	/* !important partout ici : ce fichier a déjà montré (carte "vedette" des
	   7 espaces, plus haut) qu'une règle non conditionnelle définie PLUS LOIN
	   dans le fichier gagne sur une media query définie plus tôt, à
	   spécificité égale — quel que soit l'écran. Plutôt que de dépendre de
	   l'ordre exact des règles (fragile, déjà pris en défaut deux fois), on
	   verrouille explicitement le layout mobile ici. */
	.mb-level-step-head {
		flex-direction: row !important;
		align-items: center !important;
		gap: 16px !important;
		margin-bottom: 14px !important;
	}
	.mb-level-step-badge { flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-shrink: 0; }
	.mb-level-rank { margin: 0 !important; width: 30px !important; height: 30px !important; font-size: .8rem !important; }
	.mb-level-step .mb-icon-badge { margin: 0 !important; --mb-icon-size: 52px; }
	.mb-level-step-title { align-items: flex-start !important; text-align: left !important; }
	.mb-level-step h5 { font-size: 1.3rem !important; margin: 0 0 3px !important; }
	.mb-level-step .mb-level-seuil { font-size: 1rem !important; }
	.mb-level-step .mb-level-avantage { font-size: 1.05rem !important; margin-top: 0 !important; }
}
.mb-level-step {
	position: relative;
	border-radius: 14px;
	padding: 30px 18px 22px;
	text-align: center;
	border: 1px solid rgba(122,42,46,.14);
	background: rgba(255,255,255,.82);
	box-shadow: 0 14px 30px -14px rgba(78,21,25,.2);
}
.mb-level-step-2 { transform: translateY(-14px); }
.mb-level-step-3 { transform: translateY(-28px); }
.mb-level-step-4 { transform: translateY(-42px); }
.mb-level-step-5 { transform: translateY(-56px); }
/* Rang DANS le flux normal de la carte (plus en position:absolute à cheval
   sur le bord) : la version précédente, qui dépassait de 18px au-dessus de
   la carte, se faisait rogner par le overflow:hidden de la carte 5 (reflet
   doré) en desktop ET par le overflow-x:auto du carrousel en mobile (qui
   force aussi overflow-y à "auto", donc au rognage). En le gardant dans le
   flux, plus aucun des deux ne peut le couper. */
.mb-level-rank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--mb-or-clair);
	color: var(--mb-bordeaux-fonce);
	font-family: var(--mb-font-serif);
	font-weight: 700;
	font-size: .85rem;
	box-shadow: 0 6px 14px rgba(78,21,25,.25);
}
/* Marches "vivantes" plutôt que figées : le rang respire doucement (halo qui
   se propage, décalé marche par marche), et le niveau Fondateur reçoit en
   plus un reflet doré qui balaie la carte en continu. */
@keyframes mb-rank-pulse {
	0%   { box-shadow: 0 6px 14px rgba(78,21,25,.25), 0 0 0 0 rgba(201,162,75,.45); }
	70%  { box-shadow: 0 6px 14px rgba(78,21,25,.25), 0 0 0 10px rgba(201,162,75,0); }
	100% { box-shadow: 0 6px 14px rgba(78,21,25,.25), 0 0 0 0 rgba(201,162,75,0); }
}
.mb-js .mb-level-rank { animation: mb-rank-pulse 3.2s ease-out infinite; }
.mb-level-step-2 .mb-level-rank { animation-delay: .3s; }
.mb-level-step-3 .mb-level-rank { animation-delay: .6s; }
.mb-level-step-4 .mb-level-rank { animation-delay: .9s; }
.mb-level-step-5 .mb-level-rank { animation-delay: 1.2s; }
/* .mb-level-step-head/-badge/-title : wrappers purement structurels. En
   desktop ils reproduisent exactement l'empilement centré d'origine (rang
   au-dessus de l'icône au-dessus du titre) — le rendu desktop n'a pas changé
   d'un pixel. C'est UNIQUEMENT en mobile (plus bas) qu'ils basculent en ligne
   icône+rang / titre, cf. refonte du 26/08 (v3). */
.mb-level-step-head, .mb-level-step-badge, .mb-level-step-title {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mb-level-step .mb-icon-badge { margin: 6px auto 12px; }
.mb-level-step h5 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.05rem; margin: 0 0 4px; }
.mb-level-step .mb-level-seuil { font-size: .78rem; color: var(--mb-marine); opacity: .65; margin-bottom: 0; }
.mb-level-step .mb-level-avantage { font-size: .82rem; color: var(--mb-marine); font-weight: 600; line-height: 1.4; margin-top: 10px; }
.mb-level-step.mb-level-5 {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--mb-or-clair), #fff 70%);
	border-color: var(--mb-or);
	box-shadow: 0 22px 46px -14px rgba(201,162,75,.55);
}
.mb-level-step.mb-level-5 .mb-level-rank { background: var(--mb-or); }
.mb-level-step.mb-level-5::after {
	content: '';
	position: absolute;
	top: 0; left: -60%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
	pointer-events: none;
}
.mb-js .mb-level-step.mb-level-5::after { animation: mb-motion-sweep-fx 5s ease-in-out infinite; }
/* margin-top:0 volontaire : l'écart avec le bloc précédent est déjà porté
   par le margin-bottom de ce bloc (grille d'espaces / chiffres / marches /
   mécènes) — cumuler les deux aurait recréé l'écart "trop grand" signalé. */
.mb-levels-ctas { margin-top: 0; justify-content: center; }

/* ---- Bloc 10 — Mur des Mécènes : vraies données uniquement. ---- */
.mb-mecenes-grid, .mb-mecenes-grid-wrap .mb-mecenes-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 36px;
}
@media (max-width: 900px) { .mb-mecenes-grid, .mb-mecenes-grid-wrap .mb-mecenes-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mb-mecenes-grid, .mb-mecenes-grid-wrap .mb-mecenes-grid { grid-template-columns: 1fr; } }
.mb-mecene-plaque {
	position: relative;
	text-align: center;
	padding: 18px 16px 16px;
	border-radius: 10px;
	background: linear-gradient(165deg, #fff, rgba(201,162,75,.08));
	border: 1px solid rgba(201,162,75,.4);
	box-shadow: 0 10px 22px -12px rgba(78,21,25,.2);
	transition: transform .3s ease, box-shadow .3s ease;
}
.mb-mecene-plaque:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(78,21,25,.28); }
.mb-mecene-name { display: block; font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.05rem; margin-bottom: 4px; }
.mb-mecene-meta { display: block; font-size: .78rem; color: var(--mb-marine); opacity: .65; text-transform: uppercase; letter-spacing: .06em; }
/* 31/08 — badge "nom du niveau + symbole" demandé pour remplacer le symbole
   seul, sur le même modèle exact que le badge de grade des entreprises
   partenaires (cf. .mb-entreprise-grade) : même forme de pilule, même
   gabarit de texte/icône — seules les 5 couleurs de niveau changent (5
   niveaux particuliers contre 4 grades entreprise). */
.mb-mecene-grade {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 13px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.mb-mecene-grade .mb-icon-svg { width: 13px; height: 13px; overflow: visible; }
.mb-mecene-grade-fondateur { background: rgba(122,42,46,.1); color: var(--mb-bordeaux); }
.mb-mecene-grade-batisseur { background: rgba(30,34,56,.08); color: var(--mb-marine); }
.mb-mecene-grade-support { background: rgba(201,162,75,.16); color: #8a6a26; }
.mb-mecene-grade-soutien { background: rgba(201,162,75,.1); color: var(--mb-marine); }
.mb-mecene-grade-contributeur { background: rgba(30,34,56,.06); color: var(--mb-marine); opacity: .75; }
/* État "fondateurs" tant qu'aucun mécène n'a encore choisi d'apparaître :
   invitation positive, jamais de message d'excuse/attente. */
.mb-mecenes-founding { text-align: center; max-width: 640px; margin: 0 auto 8px; }
.mb-mecenes-founding-plaque {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1.5px dashed rgba(201,162,75,.7);
	color: var(--mb-bordeaux);
	font-family: var(--mb-font-serif);
	font-style: italic;
	margin-bottom: 24px;
}
.mb-mecenes-founding-plaque .mb-icon-svg { width: 18px; height: 18px; }
.mb-mecenes-founding h3 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 0 0 14px; }
.mb-mecenes-founding p { color: var(--mb-marine); opacity: .85; font-size: .98rem; line-height: 1.6; margin: 0 0 28px; }
.mb-mecenes-founding-ctas { justify-content: center; }

/* ---- Entreprises partenaires (Mur des Mécènes) — 31/08 : carte "carte de
   visite premium", distincte des plaques particuliers — bloc logo détaché
   au-dessus du bloc identité, effet 3D fin (relief au survol + liseré or)
   pour une présentation plus "corporate" que les plaques individuelles.
   31/08 (v1.9) — sélecteurs .mb-institution-* accolés partout : la rubrique
   "Partenaires institutionnels" ([mb_institutions_wall]) doit avoir EXACTEMENT
   le même design que "Partenaires Entreprises" (demande explicite) — un seul
   jeu de règles pour les deux évite toute dérive visuelle future entre elles. ---- */
.mb-entreprises-grid, .mb-institutions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-bottom: 36px;
}
@media (max-width: 900px) { .mb-entreprises-grid, .mb-institutions-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mb-entreprises-grid, .mb-institutions-grid { grid-template-columns: 1fr; } }
.mb-entreprise-plaque, .mb-institution-plaque {
	position: relative;
	background: #fff;
	border: 1px solid rgba(201,162,75,.35);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 34px -18px rgba(30,34,56,.35), inset 0 2px 0 rgba(201,162,75,.55);
	transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.mb-entreprise-plaque:hover, .mb-institution-plaque:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -20px rgba(30,34,56,.4), inset 0 2px 0 rgba(201,162,75,.7); }
.mb-entreprise-logo-panel, .mb-institution-logo-panel {
	height: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 28px;
	background: linear-gradient(160deg, #ffffff 0%, #f4ede0 100%);
	border-bottom: 1px solid rgba(201,162,75,.3);
}
.mb-entreprise-logo-panel img, .mb-institution-logo-panel img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(30,34,56,.14)); transition: transform .4s ease; }
.mb-entreprise-plaque:hover .mb-entreprise-logo-panel img, .mb-institution-plaque:hover .mb-institution-logo-panel img { transform: scale(1.05); }
.mb-entreprise-logo-panel.mb-entreprise-logo-placeholder, .mb-institution-logo-panel.mb-institution-logo-placeholder { background: linear-gradient(160deg, #fbf6ec 0%, #f0e2c4 100%); }
/* 31/08 — le visuel standard (v2, cf. MB_LOGO_PLACEHOLDER_ENTREPRISE) est
   désormais construit au même gabarit exact que les vrais logos conçus
   (badge 84×84 + texte 27px/16px) : plus besoin de le rétrécir/estomper ici
   comme pour le premier jet (trop petit) — il doit rester aussi net et lisible
   que les autres, juste sans "filter" de survol propre à une vraie image. */
.mb-entreprise-logo-panel.mb-entreprise-logo-placeholder img, .mb-institution-logo-panel.mb-institution-logo-placeholder img { filter: none; }
.mb-entreprise-body, .mb-institution-body { padding: 20px 22px 26px; text-align: center; }
.mb-entreprise-grade, .mb-institution-grade {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 13px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.mb-entreprise-grade .mb-icon-svg, .mb-institution-grade .mb-icon-svg { width: 13px; height: 13px; overflow: visible; }
.mb-entreprise-grade-gold { background: rgba(201,162,75,.16); color: #8a6a26; }
.mb-entreprise-grade-platine { background: rgba(30,34,56,.08); color: var(--mb-marine); }
.mb-entreprise-grade-diamant { background: rgba(122,42,46,.1); color: var(--mb-bordeaux); }
.mb-entreprise-grade-silver { background: rgba(30,34,56,.06); color: var(--mb-marine); opacity: .75; }
/* 31/08 (v1.9) — une seule teinte pour le badge institution (type d'organisme,
   pas une hiérarchie de grades comme les entreprises) : bordeaux léger,
   distinct des 4 couleurs entreprise ci-dessus pour ne pas laisser croire à
   un classement Silver/Gold entre institutions. */
.mb-institution-grade { background: rgba(122,42,46,.08); color: var(--mb-bordeaux-fonce); }
.mb-entreprise-name, .mb-institution-name { display: block; font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.1rem; line-height: 1.3; margin-bottom: 4px; }
.mb-entreprise-meta, .mb-institution-meta { display: block; font-size: .8rem; color: var(--mb-marine); opacity: .65; text-transform: uppercase; letter-spacing: .05em; }
/* 31/08 (v1.9) — secours "sans logo" pour une institution : contrairement aux
   entreprises (image partagée MB_LOGO_PLACEHOLDER_ENTREPRISE, texte "ENTREPRISE
   PARTENAIRE" qui serait faux ici), badge construit en HTML/CSS — même
   composition visuelle (badge carré + libellé 2 lignes) que cette image, sans
   dépendre d'un fichier généré à l'avance. */
.mb-institution-logo-placeholder-content { display: flex; align-items: center; gap: 16px; }
.mb-institution-logo-badge { width: 60px; height: 60px; border-radius: 16px; background: var(--mb-marine); color: var(--mb-or); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mb-institution-logo-badge .mb-icon-svg { width: 30px; height: 30px; overflow: visible; }
.mb-institution-logo-label { text-align: left; line-height: 1.2; }
.mb-institution-logo-label strong { display: block; font-family: var(--mb-font-sans); font-size: 1.05rem; font-weight: 800; color: var(--mb-marine); }
.mb-institution-logo-label span { display: block; font-family: var(--mb-font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--mb-or); text-transform: uppercase; margin-top: 3px; }

/* ---- Mur des Mécènes (page dédiée) — 31/08, repris v2 après retour "pas
   assez beau/lisible/homogène" : panneau plus riche (double liseré,
   vignette dorée, médaillon d'en-tête), titre en aplat bordeaux + relief 3D
   par empilement de couleurs (au lieu d'un dégradé texte peu lisible),
   recherche+filtre fusionnés en UNE seule pilule à deux compartiments pour
   une vraie homogénéité visuelle. ---- */
.mb-wall-panel {
	position: relative;
	background: radial-gradient(ellipse 700px 340px at 50% 0%, rgba(201,162,75,.16), transparent 70%), linear-gradient(180deg, #fffdf8 0%, #fbf3e1 100%);
	border: 1px solid rgba(201,162,75,.55);
	border-radius: 30px;
	padding: 76px 44px 56px;
	box-shadow:
		0 50px 90px -34px rgba(30,34,56,.4),
		0 0 0 7px rgba(201,162,75,.14),
		0 1px 0 rgba(255,255,255,.9) inset;
}
@media (max-width: 700px) { .mb-wall-panel { padding: 64px 20px 40px; border-radius: 22px; box-shadow: 0 30px 60px -28px rgba(30,34,56,.4), 0 0 0 5px rgba(201,162,75,.14); } }

/* Médaillon d'en-tête (un par panneau, icône propre à chaque mur) — ancre le
   titre et signale immédiatement "section distincte et valorisée", à cheval
   sur le bord supérieur du panneau pour un effet de relief plus marqué. */
.mb-wall-panel-badge {
	width: 84px; height: 84px;
	margin: -118px auto 18px;
	border-radius: 50%;
	background: linear-gradient(155deg, #EAD9A0, var(--mb-or) 55%, #a97f38);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mb-bordeaux-fonce);
	box-shadow:
		0 18px 32px -10px rgba(201,162,75,.65),
		0 0 0 7px #fdf9ef,
		0 0 0 9px rgba(201,162,75,.55);
	position: relative;
}
.mb-wall-panel-badge .mb-icon-svg { width: 38px; height: 38px; }
@media (max-width: 700px) {
	.mb-wall-panel-badge { width: 66px; height: 66px; margin: -96px auto 14px; }
	.mb-wall-panel-badge .mb-icon-svg { width: 28px; height: 28px; }
}

/* Titre : aplat bordeaux bien lisible + relief "gravé" par empilement de
   couches de couleur (technique de 3D CSS classique) au lieu d'un dégradé
   sur le texte lui-même (peu lisible sur fond clair, retour utilisateur). */
.mb-wall-title {
	text-align: center;
	font-family: var(--mb-font-serif) !important;
	font-size: clamp(2rem, 4.4vw, 2.9rem) !important;
	font-weight: 700;
	margin: 0 0 6px !important;
	color: var(--mb-bordeaux) !important;
	text-shadow:
		0 1px 0 #fff8e8,
		0 2px 0 var(--mb-or),
		0 3px 0 var(--mb-or),
		0 4px 0 #a97f38,
		0 6px 14px rgba(30,34,56,.4);
}
.mb-wall-title-underline { display: block; width: 90px; height: 3px; margin: 0 auto 30px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--mb-or), transparent); }
@media (max-width: 700px) {
	.mb-wall-title { text-shadow: 0 1px 0 #fff8e8, 0 2px 0 var(--mb-or), 0 3px 8px rgba(30,34,56,.35); }
}

/* 31/08 — séparateur entre les deux murs supprimé définitivement à la
   demande de l'utilisateur (essayé avec médaillon, puis en simple trait
   orné, jamais retenu) — écart resserré directement via
   .mb-section-tight-bottom sur le bloc 3 (cf. mb-global.css, règle de base,
   et build-mur-des-mecenes.php). Règles .mb-wall-divider* intentionnellement
   retirées : ne pas les recréer sans nouvelle demande explicite.
*/

/* Recherche + filtre fusionnés en une seule "pilule" à deux compartiments
   (bordure/fond communs, séparateur interne) — l'homogénéité visuelle
   demandée, plutôt que deux contrôles à l'allure différente côte à côte. */
.mb-wall-controls {
	display: flex;
	align-items: stretch;
	max-width: 620px;
	margin: 0 auto 34px;
	border: 1.5px solid rgba(201,162,75,.55);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 16px 32px -18px rgba(30,34,56,.35);
	overflow: hidden;
}
.mb-wall-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-right: 1.5px solid rgba(201,162,75,.4); min-width: 0; }
.mb-wall-search .mb-icon-svg { width: 17px; height: 17px; color: var(--mb-or); flex-shrink: 0; }
.mb-wall-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 0; font-size: .95rem; color: var(--mb-marine); font-family: inherit; }
.mb-wall-search-input::placeholder { color: var(--mb-marine); opacity: .45; }
.mb-wall-filter-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* flex-basis fixe (pas "auto") : un <select> non stylé calcule sinon sa
	   taille "naturelle" sur des bases très généreuses (comportement natif du
	   contrôle, même avec appearance:none) et écrasait le champ de recherche
	   voisin (constaté : select à 618px, recherche réduite à 34px). */
	flex: 0 0 190px;
	width: 190px;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2A2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center;
	background-size: 13px;
	padding: 0 44px 0 22px;
	color: var(--mb-bordeaux);
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
@media (max-width: 560px) {
	.mb-wall-controls { flex-direction: column; border-radius: 22px; }
	.mb-wall-search { border-right: 0; border-bottom: 1.5px solid rgba(201,162,75,.4); }
	.mb-wall-filter-select { flex-basis: auto; width: 100%; }
	.mb-wall-filter-select { padding: 15px 44px 15px 22px; }
}
.mb-wall-empty { text-align: center; color: var(--mb-marine); opacity: .7; font-style: italic; margin: 24px 0 0; }

/* Pagination */
.mb-wall-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.mb-wall-pager-nums { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mb-wall-pager-btn, .mb-wall-pager-num {
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border-radius: 12px;
	border: 1.5px solid rgba(201,162,75,.45);
	background: #fff;
	color: var(--mb-marine);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 14px -8px rgba(30,34,56,.25);
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.mb-wall-pager-btn:hover:not(:disabled), .mb-wall-pager-num:hover { background: rgba(201,162,75,.14); border-color: var(--mb-or); transform: translateY(-1px); }
.mb-wall-pager-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.mb-wall-pager-num.is-active { background: linear-gradient(155deg, var(--mb-bordeaux), var(--mb-bordeaux-fonce)); border-color: var(--mb-bordeaux); color: #fff; }

/* ---- Bloc 11 — confiance / gouvernance ---- */
.mb-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 800px) { .mb-trust-grid { grid-template-columns: 1fr 1fr; } }
.mb-trust-item { text-align: center; }
.mb-trust-item p { color: rgba(255,255,255,.88); font-size: .9rem; line-height: 1.5; }
.mb-trust-item strong { color: var(--mb-or); display: block; margin-bottom: 6px; font-family: var(--mb-font-serif); }

/* ---- Bloc 12 — Mot du Roi — refonte du 26/08 : zone à part entière, fond
   "royal" dégradé (distinct du bordeaux-foncé plat de la zone 11 juste
   au-dessus — chaque zone son propre fond, cf. règle d'harmonisation),
   séparateur médaillon très visible en entrée pour ne jamais coller le
   titre au bloc précédent, portrait en découpe (PNG transparent) traité
   avec halo + anneau doré animés plutôt qu'un cadre rectangulaire classique
   (qui aurait dessiné une boîte vide autour des pixels transparents). */
.mb-roi-zone {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, var(--mb-marine) 0%, #241a2e 46%, var(--mb-bordeaux-fonce) 100%);
	padding-top: 92px;
	padding-bottom: 80px;
}
/* Texture discrète, dans les couleurs de la charte uniquement (or, à très
   faible opacité) : évite un fond plat malgré le dégradé, sans image. */
.mb-roi-zone::before {
	content: '';
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(201,162,75,.05) 0 2px, transparent 2px 64px);
	pointer-events: none;
}
/* 05/09 — mot du Roi corp (entreprises UNIQUEMENT, .mb-roi-zone-corp,
   partagé aussi par diaspora/accueil via .mb-roi-zone seul — inchangé pour
   eux) : les accents ors (liseré, médaillon, guillemet, "Lire la suite")
   sont volontairement GARDÉS tels quels — sceau royal/légitimité, langage
   visuel universel qui ne doit pas varier selon le public. Seul le dégradé
   de fond bascule d'un violet/bordeaux-foncé vers un anthracite/marine
   (même ancre #0d0f18 que le compteur LED et le hero), pour rester cohérent
   avec l'identité "Marine Corporate" du reste de la page sans toucher au
   discours ni à ses accents dorés. */
.mb-roi-zone-corp {
	background: linear-gradient(150deg, var(--mb-marine) 0%, #1a1d2e 50%, #0d0f18 100%);
}
.mb-roi-divider { position: relative; height: 1px; max-width: 260px; margin: 0 auto 36px; background: linear-gradient(90deg, transparent, var(--mb-or) 15%, var(--mb-or-clair) 50%, var(--mb-or) 85%, transparent); }
.mb-roi-divider-medal {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 52px; height: 52px; border-radius: 50%;
	background: linear-gradient(155deg, var(--mb-or), #b5893c);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 6px rgba(201,162,75,.14), 0 14px 30px -8px rgba(201,162,75,.6);
}
.mb-roi-divider-medal .mb-icon-svg { width: 22px; height: 22px; color: var(--mb-bordeaux-fonce); }
/* 06/09 — oubli corrigé : le bouton doré "Mon entreprise répond à l'appel
   du Roi" gardait son texte bordeaux par défaut malgré le fond déjà marine
   de .mb-roi-zone-corp. Aligné sur le reste de la page. */
.mb-roi-zone-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-roi-zone-corp .mb-btn-primary:hover { color: var(--mb-marine); }
.mb-js .mb-roi-divider-medal { animation: mb-rank-pulse 3.4s ease-out infinite; }
.mb-roi-eyebrow {
	text-align: center; font-family: var(--mb-font-sans); font-weight: 700; letter-spacing: .16em;
	font-size: .78rem; color: var(--mb-or-clair); opacity: .85; margin: 0 0 10px; text-transform: uppercase;
}
.mb-roi-zone .mb-section-title-light { margin-bottom: 18px; }
.mb-roi-zone .mb-section-subtitle {
	color: rgba(255,255,255,.88);
	max-width: 68ch;
	margin: 0 auto 48px;
}
.mb-roi-block {
	display: grid;
	grid-template-columns: .78fr 1.22fr;
	gap: 56px;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
/* padding (27/08) : sans cette marge, l'image (mise à l'échelle par sa seule
   hauteur) occupe exactement toute la hauteur du conteneur — les coins
   "certificat", positionnés en % de ce même conteneur, retombaient alors sur
   la photo elle-même (turban en haut, robe en bas) au lieu de l'encadrer.
   La marge crée l'espace où les coins se détachent proprement autour d'elle. */
/* Marge asymétrique : le coin bas-droit est positionné plus loin du bord
   (bottom:6%) que le coin haut-gauche (top:2%) — la marge basse doit donc
   être plus généreuse pour que ce coin se détache lui aussi de la photo. */
.mb-roi-portrait { position: relative; display: flex; justify-content: center; padding: 22px 20px 38px; }
/* Halo doré respirant derrière la silhouette découpée. */
.mb-roi-portrait::before {
	content: '';
	position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
	width: 82%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(201,162,75,.35), rgba(201,162,75,0) 70%);
	z-index: 0;
}
.mb-js .mb-roi-portrait::before { animation: mb-motion-glow-pulse 5s ease-in-out infinite; }
/* Anneau doré fin, partiellement visible derrière le portrait — tourne très
   lentement, réutilise la même mécanique que les 7 espaces (zone 4). */
.mb-roi-portrait::after {
	content: '';
	position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
	width: 92%; aspect-ratio: 1; border-radius: 50%;
	border: 1px dashed rgba(201,162,75,.45);
	z-index: 0;
}
.mb-js .mb-roi-portrait::after { animation: mb-motion-ring-spin 50s linear infinite; }
.mb-roi-portrait img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	/* légèrement réduite le 27/08 (retour utilisateur : le Roi devait entrer
	   entre les 2 coins "certificat" au lieu de les déborder) — combinée à la
	   marge du conteneur ci-dessus. */
	height: clamp(260px, 31vw, 420px);
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 26px 50px rgba(0,0,0,.45));
}
/* Coins "certificat" discrets — sobriété d'un document officiel plutôt
   qu'un cadre photo classique, cohérent avec la dignité du propos. */
.mb-roi-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--mb-or); opacity: .8; z-index: 2; }
.mb-roi-corner-tl { top: 2%; left: 4%; border-right: none; border-bottom: none; }
.mb-roi-corner-br { bottom: 6%; right: 4%; border-left: none; border-top: none; }
.mb-roi-text { position: relative; z-index: 1; }
.mb-roi-text blockquote {
	position: relative;
	font-family: var(--mb-font-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.65;
	color: #fff;
	border-left: 3px solid var(--mb-or);
	padding: 4px 0 4px 28px;
	margin: 0 0 20px;
}
.mb-roi-text blockquote::before {
	content: '\201C';
	position: absolute; top: -34px; left: 6px;
	font-family: var(--mb-font-serif);
	font-size: 4.2rem;
	color: var(--mb-or);
	opacity: .5;
	line-height: 1;
}
/* 04/09 — citation diaspora passée de 1 à 4 paragraphes (discours plus long
   et plus impactant, centré sur le projet). Le blockquote ne gérait qu'un
   seul bloc de texte : on maîtrise ici l'espacement entre paragraphes plutôt
   que de subir la marge par défaut du navigateur sur <p>. */
.mb-roi-text blockquote p { margin: 0 0 16px; }
.mb-roi-text blockquote p:last-child { margin-bottom: 0; }
/* 04/09 (bis) — retour utilisateur : les 4 paragraphes affichés d'un coup
   déroulaient trop la zone dès le chargement de la page. Seul le 1er reste
   visible par défaut ; les 3 suivants (.mb-roi-more) se déploient au clic
   sur .mb-roi-readmore-btn, en JS pur (initRoiReadmore() dans
   mb-global.js), sans rechargement de page — la classe .is-open pilote
   l'ouverture via la technique grid-template-rows (0fr → 1fr), qui anime
   la hauteur sans avoir à la calculer en JS. Le texte reste présent dans
   le HTML dès le chargement (indexable/accessible), seule sa présentation
   est repliée.
   04/09 (ter) — retour utilisateur : le bouton était placé AVANT
   .mb-roi-more dans le HTML, donc coincé au milieu du texte une fois
   déplié. Déplacé APRÈS .mb-roi-more (cf. PHP) : replié, il reste juste
   sous le 1er paragraphe (.mb-roi-more pèse 0) ; déplié, il se retrouve
   naturellement tout en bas, après le dernier paragraphe. */
.mb-roi-readmore-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: none; padding: 0; margin: 16px 0 4px;
	font-family: var(--mb-font-sans, inherit);
	font-style: normal;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mb-or-clair);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
.mb-roi-readmore-btn:hover,
.mb-roi-readmore-btn:focus-visible { color: #fff; }
.mb-roi-readmore-caret { display: inline-block; font-size: .7em; transition: transform .3s ease; }
.mb-roi-readmore-btn.is-open .mb-roi-readmore-caret { transform: rotate(180deg); }
.mb-roi-more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s cubic-bezier(.4,0,.2,1);
}
.mb-roi-more.is-open { grid-template-rows: 1fr; }
.mb-roi-more-inner { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.mb-roi-more, .mb-roi-readmore-caret { transition: none; }
}
.mb-roi-text cite { color: var(--mb-or); font-weight: 700; font-style: normal; display: block; margin-bottom: 0; letter-spacing: .01em; }
.mb-roi-ctas { justify-content: center; margin-top: 40px; position: relative; z-index: 1; }
@media (max-width: 800px) {
	.mb-roi-block { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center !important; }
	.mb-roi-text { text-align: left !important; }
	/* Agrandi le 26/08 (retour utilisateur : portrait trop petit sur mobile,
	   sur les 2 pages qui partagent cette règle — accueil et page dédiée),
	   puis légèrement réduit le 27/08 (même raison que la règle desktop
	   ci-dessus : laisser un peu de marge pour que les coins "certificat"
	   encadrent la photo au lieu de la déborder). */
	.mb-roi-portrait img { height: clamp(260px, 80vw, 420px) !important; }
	.mb-roi-portrait { padding: 16px 16px 28px !important; }
}
@media (max-width: 640px) {
	.mb-roi-zone { padding-top: 64px !important; padding-bottom: 56px !important; }
	.mb-roi-block { gap: 26px !important; }
	.mb-roi-ctas { margin-top: 28px !important; }
}

/* ---- Bloc 13 — "Le projet avance" ----
   Refonte du 26/08 : les cartes accueillent désormais une vraie photo par
   étape (en plus de l'icône seule, gardée pour l'étape sans photo dispo :
   l'écosystème digital). Passage en flex column + hauteur 100% pour que les
   3 cartes restent alignées même si les textes n'ont pas la même longueur
   (le lien "Lire le détail" reste ainsi toujours ancré en bas de carte). */
.mb-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 800px) { .mb-news-grid { grid-template-columns: 1fr; } }
.mb-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(78,21,25,.1);
	background: #fff;
	/* Depuis le 27/08, la carte entière (et plus seulement le petit lien
	   "Lire le détail") est un <a> vers la page de détail de l'actualité —
	   on neutralise les styles de lien par défaut du navigateur ; chaque
	   texte interne a de toute façon sa propre couleur explicite ci-dessous. */
	text-decoration: none;
	color: inherit;
}
.mb-news-card-media { height: 170px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; position: relative; }
.mb-news-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s ease; }
.mb-news-card-media .mb-icon-svg { width: 44px; height: 44px; position: relative; z-index: 1; }
.mb-news-card-media::after {
	content: '';
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
	z-index: 1;
}
.mb-card-hover:hover .mb-news-card-media .mb-icon-svg { transform: scale(1.15) rotate(-4deg); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.mb-card-hover:hover .mb-news-card-media img { transform: scale(1.08); }
.mb-news-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.mb-news-date { font-size: .78rem; color: var(--mb-or); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mb-news-card h5 { font-family: var(--mb-font-serif); color: var(--mb-marine); font-size: 1.05rem; margin: 8px 0 10px; }
.mb-news-card-body p { color: var(--mb-marine); opacity: .85; font-size: .9rem; line-height: 1.5; margin: 0 0 14px; flex: 1; }
/* Sélecteur non qualifié par la balise ("a." retiré le 27/08) : à l'intérieur
   d'une carte .mb-news-card, ce n'est plus un <a> (la carte entière l'est
   déjà — un lien dans un lien est invalide en HTML) mais un <span> ; ce même
   style continue de s'appliquer aussi aux usages en <a> autonome (ex. les
   liens contextuels de .mb-pillar-text sur /actualites). */
.mb-news-card-body .mb-news-link,
.mb-pillar-text .mb-news-link { font-size: .85rem; font-weight: 700; color: var(--mb-bordeaux); text-decoration: none; }

/* --------------------------------------------------------------------------
   Page de détail d'une actualité (single-actualite.php) — bannière titre +
   date, image et texte intégral, puis grille "autres actualités" en bas de
   page (composant .mb-news-grid partagé, cf. plus haut) pour naviguer d'une
   actualité à l'autre sans repasser par la liste complète.
   -------------------------------------------------------------------------- */
.mb-actualite-hero {
	background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, var(--mb-bordeaux) 65%);
	color: #fff;
	padding: 40px 24px 56px;
	text-align: center;
}
.mb-actualite-hero-inner { max-width: 780px; margin: 0 auto; }
.mb-actualite-back {
	display: inline-block;
	color: var(--mb-or-clair);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 22px;
	opacity: .85;
	transition: opacity .2s ease;
}
.mb-actualite-back:hover { opacity: 1; text-decoration: underline; }
.mb-actualite-hero .mb-pillar-badge { margin: 0 auto 16px; }
.mb-actualite-hero h1 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	line-height: 1.2;
	color: #fff;
	margin: 0;
}
.mb-actualite-media {
	max-width: 900px;
	margin: -36px auto 40px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 48px -12px rgba(30,34,56,.28);
}
.mb-actualite-media img { display: block; width: 100%; max-height: 480px; object-fit: cover; }
.mb-actualite-content {
	max-width: 720px;
	margin: 0 auto;
	color: var(--mb-marine);
	font-size: 1.05rem;
	line-height: 1.75;
}
.mb-actualite-content p { margin: 0 0 20px; }
.mb-actualite-content a.mb-news-link { display: inline-block; margin-top: 4px; }
.mb-actualite-more { text-align: center; }
.mb-actualite-more .mb-news-grid { text-align: left; margin-top: 8px; }
@media (max-width: 640px) {
	.mb-actualite-media { margin-top: -24px; }
	.mb-actualite-media img { max-height: 280px; }
}

/* ---- Bloc 14 — CTA final ---- */
.mb-final-cta {
	background: linear-gradient(160deg, var(--mb-bordeaux) 0%, var(--mb-bordeaux-fonce) 100%);
	color: #fff;
	text-align: center;
	padding: 96px 24px;
}
/* 28/08 (/le-projet, corrigé alors avec un id dédié à ce bloc) puis 28/08 v2
   (généralisé à TOUTES les pages) : ce fond dégradé, dès lors qu'il tombe au
   4ᵉ conteneur Elementor d'une page ou au-delà (quasi toujours vrai pour un
   CTA de clôture juste avant le footer), se faisait neutraliser par la règle
   native d'optimisation Elementor ".e-con.e-parent:nth-of-type(n+4):not(
   .e-lazyloaded):not(.e-no-lazyload) { background-image:none !important }"
   (spécificité 0,5,0 — .e-lazyloaded n'est ajoutée par le JS d'Elementor que
   pour un fond configuré depuis SON interface, jamais pour un fond CSS à
   nous). Résultat avant correctif : fond transparent, titre bordeaux (cf.
   plus bas) illisible sur fond clair, sur TOUTES les pages qui utilisent ce
   bloc de clôture (accueil, actualités, fête du bois, gouvernance, mur des
   mécènes...), pas seulement /le-projet. Un audit du 28/08 l'a confirmé.
   Correctif générique : le sélecteur [class] répété ne change AUCUNE
   correspondance réelle (toute balise avec une classe le matche déjà) mais
   ajoute de la spécificité à volonté — 5× ici pour dépasser franchement le
   0,5,0 d'Elementor sans dépendre d'un id par page. */
.mb-final-cta[class][class][class][class][class] { background-image: linear-gradient(160deg, var(--mb-bordeaux) 0%, var(--mb-bordeaux-fonce) 100%) !important; }
/* 06/09 — variante "entreprises" (mb-final-cta-corp, présente UNIQUEMENT
   sur /dons/entreprises) : même dégradé marine que le pont émotionnel et la
   gouvernance, pour clore la page dans l'identité qui la traverse depuis la
   topbar, au lieu du bordeaux de /dons/diaspora. Sélecteur à 2 classes + 4×
   [class] : dépasse la spécificité (0,5,0) de la règle ci-dessus pour
   l'emporter de façon fiable, quel que soit l'ordre dans le fichier. */
.mb-final-cta.mb-final-cta-corp[class][class][class][class][class] { background-image: linear-gradient(160deg, var(--mb-marine) 0%, #1a1d2e 100%) !important; }
.mb-final-cta-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-final-cta-corp .mb-btn-primary:hover { color: var(--mb-marine); }
.mb-final-cta h2 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	color: #fff;
	max-width: 22ch;
	margin: 0 auto 14px;
}
/* 2ᵉ cause du même bug, elle aussi générale : le titre était bien réglé en
   blanc ci-dessus, mais la règle native Elementor ".elementor-widget-heading
   .elementor-heading-title { color: var(--e-global-color-...) }" (2 classes,
   spécificité 0,2,0) l'emportait sur ".mb-final-cta h2" (0,1,1) et appliquait
   la couleur bordeaux par défaut du kit — illisible sur ce fond bordeaux
   foncé, sur toutes les pages concernées. Même technique [class] (1 suffit
   ici, .mb-final-cta h2 n'a besoin que d'un cran de plus que 0,2,0). */
.mb-final-cta h2[class] { color: #fff !important; }
.mb-final-cta .mb-final-sub { color: var(--mb-or-clair); font-size: 1.1rem; margin-bottom: 32px; }
.mb-final-cta .mb-hero-reassurance { margin-top: 20px; }
/* Petite touche "royale" au-dessus du titre de clôture (28/08). */
.mb-final-cta-flourish { display: flex; justify-content: center; margin-bottom: 18px; }
.mb-final-cta-flourish .mb-icon-svg { width: 34px; height: 34px; color: var(--mb-or); filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.mb-js .mb-final-cta-flourish .mb-icon-svg { animation: mb-motion-breathe-fx 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ==========================================================================
   PAGES CONTRIBUER — hero simple, tableaux comparatifs, accordéons, formulaires B2B
   ========================================================================== */

/* ---- Hero simple (sans visuel latéral), pages Contribuer ---- */
.mb-hero-simple {
	background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, var(--mb-bordeaux) 65%);
	color: #fff;
	padding: 72px 24px;
	text-align: center;
}
.mb-hero-simple-inner { max-width: 780px; margin: 0 auto; }
.mb-hero-simple h1 {
	font-family: var(--mb-font-serif);
	font-size: clamp(1.8rem, 4vw, 2.7rem);
	color: #fff;
	margin: 0 0 18px;
	overflow-wrap: break-word;
	word-break: break-word;
}
.mb-hero-simple .mb-hero-accroche { color: var(--mb-or-clair); max-width: 56ch; margin: 0 auto 20px; }
.mb-hero-simple .mb-hero-reassurance { color: rgba(255,255,255,.75); margin-top: 20px; }

/* ---- Tableau comparatif ---- */
.mb-table-wrap { overflow-x: auto; margin: 0 auto 20px; }
.mb-compare-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	font-family: var(--mb-font-sans);
}
.mb-compare-table th, .mb-compare-table td {
	border: 1px solid rgba(78,21,25,.12);
	padding: 16px 14px;
	text-align: center;
	vertical-align: top;
}
.mb-compare-table thead th {
	font-family: var(--mb-font-serif);
	font-size: 1.05rem;
}
/* 05/10 — 5 colonnes à largeur égale (le texte du Club, plus long, ne doit plus élargir sa colonne) et
   symbole de chaque niveau dans une boîte de même taille et même alignement (le glyphe 🏛️ se dessine
   plus petit que les étoiles, médailles, diamants et couronnes sans cette boîte). */
.mb-compare-table { table-layout: fixed; }
.mb-compare-table th, .mb-compare-table td { width: 20%; }
.mb-cmp-sym { display: inline-block; width: 1.5em; font-size: 1.3em; line-height: 1; text-align: center; vertical-align: -.12em; }
/* 31/08 — une couleur de la charte par niveau (colonne), du plus accessible
   (Contributeur, ivoire) au plus prestigieux (Fondateur, bordeaux foncé) —
   appliquée à toute la colonne (en-tête ET les 2 lignes du corps), pas
   seulement l'en-tête, pour bien valoriser chaque niveau dans son ensemble.
   Remplace au passage un vrai défaut : l'ancienne règle ciblait la colonne
   par POSITION (:first-child / :last-child), pensée pour une colonne
   d'étiquettes + 4 colonnes de valeurs — hors ce tableau a 5 colonnes de
   niveaux strictement équivalentes. Résultat avant correctif : "Contributeur"
   (1ʳᵉ colonne) héritait par erreur d'un style de libellé (fond blanc,
   texte aligné à gauche) au lieu du même traitement que les 4 autres. */
.mb-compare-table th:nth-child(1), .mb-compare-table td:nth-child(1) { background: var(--mb-ivoire); color: var(--mb-bordeaux-fonce); }
.mb-compare-table th:nth-child(2), .mb-compare-table td:nth-child(2) { background: var(--mb-or-clair); color: var(--mb-bordeaux-fonce); }
.mb-compare-table th:nth-child(3), .mb-compare-table td:nth-child(3) { background: var(--mb-or); color: var(--mb-bordeaux-fonce); }
.mb-compare-table th:nth-child(4), .mb-compare-table td:nth-child(4) { background: var(--mb-marine); color: #fff; }
.mb-compare-table th:nth-child(5), .mb-compare-table td:nth-child(5) { background: var(--mb-bordeaux-fonce); color: #fff; }
.mb-compare-table th:nth-child(4), .mb-compare-table th:nth-child(5) { color: var(--mb-or-clair); }
.mb-compare-table td:nth-child(4) strong, .mb-compare-table td:nth-child(5) strong { color: var(--mb-or-clair); }
/* 31/08 — symbole du niveau sur sa propre ligne, nom sur la ligne suivante,
   dans la même cellule d'en-tête — demandé UNIQUEMENT sur mobile (desktop
   garde les deux côte à côte sur une seule ligne, via ce margin-right : les
   2 <span> se touchent dans le HTML, sans espace littéral entre eux). */
.mb-compare-icon { margin-right: 6px; }
@media (max-width: 700px) {
	.mb-compare-icon, .mb-compare-name { display: block; }
	.mb-compare-icon { margin-right: 0; margin-bottom: 2px; font-size: 1.3rem; }
}

/* ---- Accordéon (natif <details>/<summary>) — niveaux, grades, FAQ ---- */
.mb-accordion { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* 31/08 — bordure à effet 3D (relief + ombre portée marquée) demandée pour
   chaque bloc déroulant, désormais tous ouverts par défaut (cf. PHP) donc
   visibles en permanence comme autant de "cartes" de niveau. */
.mb-accordion-item {
	border: 1.5px solid rgba(201,162,75,.5);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 22px 40px -20px rgba(30,34,56,.35), 0 0 0 1px rgba(255,255,255,.6) inset;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mb-accordion-item:hover { transform: translateY(-3px); box-shadow: 0 30px 52px -20px rgba(30,34,56,.42), 0 0 0 1px rgba(255,255,255,.6) inset; }
.mb-accordion-item[open] { border-color: var(--mb-or); }
.mb-accordion-item summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 20px 56px 20px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--mb-font-serif);
}
.mb-accordion-item summary::-webkit-details-marker { display: none; }
/* 31/08 — le "+/×" est passé en position absolute (coin haut-droit) au lieu
   de flex + margin-left:auto : le badge de seuil, désormais bien plus
   large/coloré, avait besoin que la ligne icône+titre+badge puisse passer à
   la ligne sur mobile (flex-wrap ci-dessous) sans faire sauter le "+/×"
   n'importe où ni le pousser hors de l'écran (constaté en vérification
   visuelle : le badge débordait à droite du viewport). */
.mb-accordion-item summary::after {
	content: '+';
	position: absolute;
	right: 24px;
	top: 20px;
	font-size: 1.6rem;
	color: var(--mb-or);
	transition: transform .25s ease;
	line-height: 1;
}
.mb-accordion-item[open] summary::after { transform: rotate(45deg); }
@media (max-width: 700px) {
	.mb-accordion-item summary { flex-wrap: wrap; }
	/* 31/08 — symbole du grade (⭐/🥇/💎/🏆) sur sa propre ligne, seul, sur
	   les 5 niveaux — demande explicite, mobile uniquement (desktop garde
	   icône+titre côte à côte). width:100% force le retour à la ligne dans
	   ce conteneur flex-wrap, comme déjà fait pour .mb-compare-icon. */
	.mb-accordion-icon { display: block; width: 100%; font-size: 1.8rem; margin-bottom: 2px; }
}
.mb-accordion-icon { font-size: 1.5rem; }
.mb-accordion-title { color: var(--mb-bordeaux); font-size: 1.15rem; font-weight: 700; }
/* 31/08 — le seuil ("Tout montant", "À partir de X FCFA") était trop
   estompé (opacity:.7, texte nu) pour une info aussi clé ; converti en
   badge doré bien visible. */
.mb-accordion-seuil {
	font-family: var(--mb-font-sans);
	font-weight: 700;
	font-size: .82rem;
	color: var(--mb-bordeaux-fonce);
	background: linear-gradient(155deg, var(--mb-or-clair), var(--mb-or));
	padding: 7px 16px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 4px 10px -4px rgba(201,162,75,.6);
}
.mb-accordion-body { padding: 0 24px 24px; font-family: var(--mb-font-sans); }
.mb-accordion-body blockquote {
	font-family: var(--mb-font-serif);
	font-style: italic;
	color: var(--mb-marine);
	border-left: 3px solid var(--mb-or);
	padding-left: 16px;
	margin: 0 0 16px;
}
.mb-accordion-cumul { font-size: .88rem; color: var(--mb-bordeaux); font-weight: 600; margin-bottom: 10px; }
/* 31/08 — chaque avantage cité sur sa propre ligne en pleine largeur, avec 2
   couleurs de fond alternées au lieu d'une puce classique — demande
   explicite pour mieux détacher chaque point les uns des autres. v2 : le
   blanc pur a été écarté (retour utilisateur) au profit de 2 teintes de la
   charte (lavis or clair / lavis bordeaux), toutes deux nettement visibles
   sans jamais retomber sur du blanc. */
.mb-accordion-body ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(78,21,25,.1);
}
.mb-accordion-body li { margin: 0; padding: 13px 18px; line-height: 1.55; background: rgba(234,217,160,.35); }
.mb-accordion-body li:nth-child(even) { background: rgba(122,42,46,.12); }
.mb-accordion-body li strong { color: var(--mb-marine); }

/* FAQ = même accordéon, sans seuil/icône */
.mb-faq .mb-accordion-title { font-size: 1.05rem; }
.mb-faq .mb-accordion-body p { line-height: 1.6; color: var(--mb-marine); }

/* ---- Moyens de paiement (radios en puces) ---- */
.mb-payment-methods {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mb-payment-methods legend {
	width: 100%;
	font-weight: 700;
	color: var(--mb-marine);
	font-size: .9rem;
	margin-bottom: 4px;
	padding: 0;
}
.mb-payment-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(78,21,25,.2);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--mb-marine);
	cursor: pointer;
}
.mb-payment-option:has(input:checked) { border-color: var(--mb-or); background: var(--mb-or-clair); }
.mb-checkbox-line { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 600; color: var(--mb-marine); font-size: .92rem; }

/* ---- Choix "payer maintenant" vs "être contacté(e)" (06/09, formulaire
   entreprise [mb_contact_pro type="entreprise"]) : 2 cartes cliquables,
   même logique de sélection visuelle que .mb-payment-option ci-dessus mais
   en pleine largeur (texte descriptif sous chaque titre). ---- */
.mb-pro-finalize-choice { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-pro-finalize-choice legend { width: 100%; font-weight: 700; color: var(--mb-marine); font-size: .9rem; margin-bottom: 4px; padding: 0; }
.mb-pro-finalize-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid rgba(78,21,25,.2);
	border-radius: 14px;
	padding: 14px 16px;
	cursor: pointer;
}
.mb-pro-finalize-option:has(input:checked) { border-color: var(--mb-or); background: var(--mb-or-clair); }
.mb-pro-finalize-option input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.mb-pro-finalize-option strong { display: block; color: var(--mb-marine); font-size: .95rem; }
.mb-pro-finalize-option small { display: block; color: var(--mb-marine); opacity: .75; font-size: .82rem; line-height: 1.4; margin-top: 2px; }
/* 07/09 — correctif : .mb-pro-finalize-choice et .mb-payment-methods (juste
   au-dessus) posent un "display: flex" inconditionnel qui l'emportait sur le
   "display: none" natif de l'attribut HTML [hidden] posé/retiré par
   initProFinalizeChoice() (mb-global.js) — une règle auteur "normale"
   l'emporte toujours sur la feuille de style du navigateur, quelle que soit
   la spécificité. Résultat : les 2 champs restaient visibles à l'écran même
   une fois "hidden" reposé par le script (propriété DOM correcte, rendu
   visuel non conforme). Sans effet sur /dons/diaspora : .mb-payment-methods
   n'y est jamais togglé (fieldset toujours affiché), donc jamais concerné
   par [hidden] avant ce jour. */
.mb-pro-finalize-choice[hidden],
.mb-payment-methods[hidden] { display: none !important; }

/* ---- Numéro Orange Money/MTN MoMo dédié (17/09, demande explicite) : champ
   affiché/masqué en JS (initDonWalletNumber(), mb-global.js) selon le moyen
   de paiement choisi, cf. mb_don_form côté PHP. Même précaution que ci-dessus
   pour [hidden] : cette div n'a ici aucune règle "display" inconditionnelle
   qui l'emporterait, mais la règle explicite est posée quand même pour ne
   jamais reproduire le bug déjà rencontré sur .mb-payment-methods. */
.mb-mm-wallet-field { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.mb-mm-wallet-field[hidden] { display: none !important; }
.mb-mm-wallet-input { width: 100%; }
.mb-mm-wallet-hint { margin: 0; font-size: .82rem; color: var(--mb-marine); opacity: .7; min-height: 1.2em; }
.mb-mm-wallet-hint.is-error { color: #dc2626; opacity: 1; font-weight: 600; }

/* ---- Étapes (3 étapes de contribution) ---- */
.mb-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .mb-steps-row { grid-template-columns: 1fr; } }
.mb-step { text-align: center; }
.mb-step-number {
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--mb-bordeaux); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mb-font-serif); font-size: 1.3rem; font-weight: 700;
	margin: 0 auto 16px;
}
.mb-step h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.1rem; margin: 0 0 8px; }
.mb-step p { color: var(--mb-marine); font-size: .92rem; line-height: 1.5; }

/* ---- Grilles génériques (catégories / modalités / cartes courtes) ---- */
.mb-generic-grid { display: grid; grid-template-columns: repeat(var(--mb-cols, 3), 1fr); gap: 20px; }
@media (max-width: 900px) { .mb-generic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mb-generic-grid { grid-template-columns: 1fr; } }
.mb-generic-card {
	background: #fff;
	border: 1px solid rgba(78,21,25,.1);
	border-radius: 12px;
	padding: 24px;
}
.mb-generic-card h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.05rem; margin: 0 0 8px; }
.mb-generic-card .mb-generic-examples { font-size: .8rem; color: var(--mb-or); font-weight: 600; margin-bottom: 8px; }
.mb-generic-card p { font-size: .9rem; color: var(--mb-marine); line-height: 1.5; margin: 0; }

/* ---- /dons/diaspora — bloc 3 "agitation du problème" (04/09) : chaque
   carte reçoit une vraie photo (choisie et vérifiée visuellement) au lieu de
   la seule icône. Touche spéciale dédiée pour distinguer ces 4 cartes du
   reste du site : photo en clair-obscur (désaturée) qui retrouve sa couleur
   au survol — métaphore du patrimoine qui "reprend vie" dès qu'on agit —,
   coin biseauté (clip-path) où vient se loger le badge d'icône existant.
   Gabarit dérivé de .mb-generic-card (padding annulé, remis sur le bloc
   texte) pour ne rien changer aux usages existants de cette classe.
   04/09 (bis) : badge déplacé du coin bas-droit vers le coin bas-gauche pour
   une meilleure visibilité (moins caché par le flux de lecture naturel
   gauche→droite du texte juste en dessous) — mais le biseau (clip-path),
   volontairement, reste au coin bas-droit d'origine : il ne suit pas le
   badge, pour ne pas venir "manger" en blanc une partie du cercle déplacé. */
/* 07/09 — demande explicite : la zone jugée "trop de noir", les petits
   titres/sous-titres pas assez mis en valeur à l'intérieur des cartes.
   3 leviers, cohérents avec la palette et les gabarits déjà en place
   ailleurs sur le site (pas de nouvelle couleur introduite) :
   1) Photo nettement moins sombre (grayscale 85%→45%, brightness .96→1.04) —
      le "clair-obscur" reste lisible comme métaphore mais n'écrase plus le
      titre qui suit ; contraste au survol (0%/1/1) inchangé.
   2) Carte détachée du fond ivoire par une ombre chaude (même formule que
      .mb-pillar-card plus bas dans ce fichier : rgba(78,21,25,.18)) — élève
      visuellement la carte au lieu de la laisser "à plat".
   3) Titre agrandi/épaissi + liseré or sous le titre (::after, 28px) : signal
      visuel avant même la lecture, comme le veut la demande "valoriser les
      titres" — le liseré reprend --mb-or déjà utilisé comme accent de marque
      partout ailleurs (dividers, bordures de carte, etc.), donc rien
      d'étranger au design existant. */
.mb-lp-peril-card { padding: 0; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(78,21,25,.28); transition: box-shadow .3s ease, transform .3s ease; }
.mb-lp-peril-card:hover { box-shadow: 0 18px 34px -16px rgba(78,21,25,.34); transform: translateY(-2px); }
.mb-lp-peril-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 78% 100%, 0 100%);
}
.mb-lp-peril-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(45%) contrast(1.02) brightness(1.04);
	transition: filter .6s ease, transform .6s ease;
}
.mb-lp-peril-card:hover .mb-lp-peril-media img,
.mb-lp-peril-card:focus-within .mb-lp-peril-media img {
	filter: grayscale(0%) contrast(1) brightness(1);
	transform: scale(1.06);
}
.mb-lp-peril-badge {
	position: absolute;
	left: 12px; bottom: 10px;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--mb-bordeaux), var(--mb-bordeaux-fonce));
	color: var(--mb-or-clair);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px -2px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.85);
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mb-lp-peril-badge .mb-icon-svg { width: 20px; height: 20px; }
.mb-lp-peril-card:hover .mb-lp-peril-badge { transform: scale(1.12) rotate(-6deg); }
.mb-lp-peril-body { padding: 22px 22px 24px; }
.mb-lp-peril-body h4 {
	margin-top: 0; margin-bottom: 12px; padding-bottom: 12px;
	font-size: 1.15rem; font-weight: 700; line-height: 1.3;
	position: relative;
}
.mb-lp-peril-body h4::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 28px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--mb-or), var(--mb-or-clair));
}
.mb-lp-peril-body p { font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
	.mb-lp-peril-card { transition: none; }
	.mb-lp-peril-media img, .mb-lp-peril-badge { transition: none; }
}

/* ---- /le-projet (28/08 v2) — cartes des 3 piliers "Bien plus qu'un musée",
   refonte demandée : simples blocs de texte à l'origine, jugés en décalage
   avec le reste du site. Icône animée (mb_icon(), même trio que le pilier
   homologue de l'accueil) + liseré or au survol, sur le même gabarit que
   .mb-generic-card mais dédié pour ne rien changer ailleurs. ---- */
.mb-pillar-card {
	position: relative;
	text-align: center;
	background: linear-gradient(165deg, #fff 0%, #fdfaf1 100%);
	border: 1px solid rgba(201,162,75,.3);
	border-radius: 14px;
	padding: 34px 26px 30px;
	overflow: hidden;
	box-shadow: 0 14px 30px -16px rgba(78,21,25,.18);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mb-pillar-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mb-bordeaux), var(--mb-or), var(--mb-bordeaux));
	opacity: .5;
	transition: opacity .3s ease;
}
.mb-pillar-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 40px -16px rgba(78,21,25,.28);
	border-color: rgba(201,162,75,.6);
}
.mb-pillar-card:hover::before { opacity: 1; }
.mb-pillar-card .mb-icon-badge { margin: 0 auto 16px; }
.mb-pillar-card h4 {
	font-family: var(--mb-font-serif);
	color: var(--mb-bordeaux);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 1.05rem;
	margin: 0 0 10px;
}
.mb-pillar-card p { font-size: .92rem; color: var(--mb-marine); line-height: 1.6; margin: 0; opacity: .9; }

/* ---- /dons/diaspora (04/09) — refonte "exceptionnelle" des 3 cartes-piliers
   demandée par l'utilisateur, classe DÉDIÉE .mb-diaspora-pillar (ne touche
   pas .mb-pillar-card, réutilisée telle quelle par /le-projet/). Badge-icône
   circulaire à cheval sur le bord haut de la carte + chiffre géant en
   filigrane + accent dégradé propre à chaque carte (bordeaux / marine / or
   via :nth-child, pour casser l'effet "3 clones identiques"). ---- */
.mb-diaspora-pillars { padding-top: 44px; }
/* 04/09 — retour utilisateur : sur mobile, les cartes s'empilent sur une
   colonne (cf. .mb-generic-grid) avec seulement 20px d'écart — insuffisant
   pour le badge-icône qui déborde ~26px au-dessus du bord de sa carte
   (margin -80px sur .mb-diaspora-pillar-badge, cf. plus bas) : le badge de
   la carte suivante venait toucher/chevaucher le bas de la carte
   précédente. Corrigé UNIQUEMENT sur les gabarits où le grid empile en
   colonne (mobile + tablette, mêmes seuils que .mb-generic-grid) — le
   rendu desktop 3 colonnes, qui n'a pas ce problème, n'est pas touché. */
@media (max-width: 900px) {
	.mb-diaspora-pillars { row-gap: 56px; }
}
.mb-diaspora-pillar {
	position: relative;
	background: linear-gradient(165deg, #fff 0%, #fdfaf1 100%);
	border-radius: 20px;
	padding: 54px 28px 32px;
	text-align: center;
	box-shadow: 0 20px 44px -24px rgba(78,21,25,.32), 0 0 0 1px rgba(201,162,75,.22);
	transition: transform .45s cubic-bezier(.16,.84,.32,1), box-shadow .45s ease, border-color .45s ease;
}
.mb-diaspora-pillar:nth-child(1) { --mb-pillar-accent: var(--mb-bordeaux); --mb-pillar-accent-dark: var(--mb-bordeaux-fonce); }
.mb-diaspora-pillar:nth-child(2) { --mb-pillar-accent: var(--mb-marine); --mb-pillar-accent-dark: #0f1120; }
.mb-diaspora-pillar:nth-child(3) { --mb-pillar-accent: #b6883a; --mb-pillar-accent-dark: var(--mb-or); }
.mb-diaspora-pillar::before {
	content: attr(data-num);
	position: absolute;
	top: -8px; right: 16px;
	font-family: var(--mb-font-serif);
	font-weight: 700;
	font-size: 4.6rem;
	line-height: 1;
	color: var(--mb-pillar-accent);
	opacity: .1;
	pointer-events: none;
}
.mb-diaspora-pillar:hover {
	transform: translateY(-10px);
	box-shadow: 0 32px 60px -22px rgba(78,21,25,.4), 0 0 0 1px rgba(201,162,75,.55);
}
.mb-diaspora-pillar-badge {
	position: relative;
	z-index: 1;
	width: 78px;
	height: 78px;
	margin: -80px auto 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--mb-pillar-accent), var(--mb-pillar-accent-dark));
	box-shadow: 0 12px 26px -8px rgba(0,0,0,.4), 0 0 0 6px #fff;
	transition: transform .4s cubic-bezier(.16,.84,.32,1);
}
.mb-diaspora-pillar-badge .mb-icon-svg { width: 32px; height: 32px; color: var(--mb-or-clair); }
.mb-diaspora-pillar:nth-child(3) .mb-diaspora-pillar-badge .mb-icon-svg { color: var(--mb-bordeaux-fonce); }
.mb-diaspora-pillar:hover .mb-diaspora-pillar-badge { transform: scale(1.08) rotate(-6deg); }
.mb-diaspora-pillar h4 {
	position: relative;
	z-index: 1;
	font-family: var(--mb-font-serif);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 1.15rem;
	color: var(--mb-bordeaux);
	margin: 0;
}
.mb-diaspora-pillar-rule {
	position: relative;
	z-index: 1;
	display: block;
	width: 34px;
	height: 3px;
	margin: 14px auto 16px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mb-pillar-accent), var(--mb-or));
}
.mb-diaspora-pillar p { position: relative; z-index: 1; font-size: .95rem; color: var(--mb-marine); line-height: 1.65; margin: 0; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
	.mb-diaspora-pillar, .mb-diaspora-pillar-badge { transition: none; }
}

/* ---- Liste deux colonnes ---- */
.mb-two-col-list { columns: 2; column-gap: 40px; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px) { .mb-two-col-list { columns: 1; } }
.mb-two-col-list li { break-inside: avoid; margin-bottom: 16px; line-height: 1.55; color: var(--mb-marine); }
.mb-two-col-list li strong { color: var(--mb-bordeaux); }

/* ---- Bandeau institutionnel (mentions sobres, sans logos) ---- */
.mb-institution-banner {
	text-align: center;
	font-size: .9rem;
	color: var(--mb-marine);
	opacity: .75;
	max-width: 900px;
	margin: 24px auto 0;
	letter-spacing: .02em;
}

/* ---- Liens de sortie (renvoi vers autres profils) ---- */
.mb-exit-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 20px; }
.mb-exit-links a {
	font-weight: 700; font-size: .92rem; color: var(--mb-bordeaux);
	text-decoration: underline;
}

/* ---- Formulaire pro (entreprises/institutions) : select ---- */
.mb-contact-pro-form select {
	font-family: var(--mb-font-sans);
	padding: 12px 14px;
	border: 1px solid rgba(30,34,56,.2);
	border-radius: 6px;
	font-size: 1rem;
	background: #fff;
}

/* ==========================================================================
   PAGE LE PROJET — bandeau provisoire, timeline, budget, groupes d'espaces
   ========================================================================== */

/* ---- Bandeau "Mot du Roi" (page Le Projet) — refonte du 26/08 : le contenu
   étant désormais validé, le cadre en pointillés "en attente" est remplacé
   par un bandeau confirmé, sobre, sur fond clair. ---- */
.mb-roi-bandeau {
	display: flex;
	gap: 28px;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(201,162,75,.35);
	border-radius: 12px;
	padding: 28px 32px;
	box-shadow: 0 14px 30px -18px rgba(78,21,25,.25);
}
/* 28/08 : portrait jugé "extrêmement petit" (92px) dans ce bandeau large de
   900px — porté à 150px puis, jugé encore trop petit, à 200px (v2) : c'est
   maintenant l'élément visuel dominant du bandeau, le texte s'ajustant
   autour via flex-shrink:0 sur l'image. */
.mb-roi-bandeau img { width: 200px; height: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 10px 16px rgba(78,21,25,.25)); }
.mb-roi-bandeau p { margin: 0; color: var(--mb-marine); line-height: 1.6; }
.mb-roi-bandeau strong { color: var(--mb-bordeaux); }
@media (max-width: 640px) { .mb-roi-bandeau { flex-direction: column; text-align: center; padding: 24px; } .mb-roi-bandeau img { width: 180px; } }

/* ---- Page dédiée /le-projet/mot-du-roi — texte intégral sur fond clair :
   mêmes motifs (halo, anneau, coins) que le teaser d'accueil pour la
   cohérence visuelle du site, recolorés pour un fond blanc/ivoire. ---- */
.mb-roi-text-onlight blockquote { color: var(--mb-marine); }
.mb-roi-text-onlight cite { color: var(--mb-bordeaux); }
.mb-roi-full-text { max-width: 68ch; margin: 0 auto; }
.mb-roi-full-text p { color: var(--mb-marine); line-height: 1.85; font-size: 1.05rem; margin: 0 0 22px; }
.mb-roi-full-text p:first-of-type { font-family: var(--mb-font-serif); font-style: italic; font-size: 1.2rem; color: var(--mb-bordeaux); }
.mb-roi-full-text p:last-of-type { font-weight: 700; color: var(--mb-bordeaux); }
.mb-roi-signature {
	max-width: 68ch; margin: 40px auto 0; text-align: right;
	font-family: var(--mb-font-serif); font-style: italic; color: var(--mb-marine);
	border-top: 1px solid rgba(201,162,75,.4); padding-top: 20px;
}
.mb-roi-signature strong { display: block; font-style: normal; color: var(--mb-bordeaux); font-size: 1.1rem; }

/* ---- Timeline 5 phases ---- */
.mb-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; max-width: 1100px; margin: 0 auto; position: relative; }
.mb-timeline::before {
	content: '';
	position: absolute;
	top: 22px; left: 10%; right: 10%;
	height: 2px;
	background: rgba(78,21,25,.15);
}
@media (max-width: 900px) {
	.mb-timeline { grid-template-columns: 1fr; gap: 24px; }
	.mb-timeline::before { display: none; }
}
.mb-timeline-phase { text-align: center; position: relative; padding: 0 8px; }
.mb-timeline-dot {
	width: 44px; height: 44px; border-radius: 50%;
	background: #fff; border: 3px solid var(--mb-bordeaux);
	color: var(--mb-bordeaux);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mb-font-serif); font-weight: 700;
	margin: 0 auto 14px; position: relative; z-index: 1;
}
.mb-timeline-phase.mb-timeline-current .mb-timeline-dot { background: var(--mb-or); border-color: var(--mb-or); color: var(--mb-bordeaux-fonce); }
.mb-timeline-badge {
	display: inline-block; background: var(--mb-or); color: var(--mb-bordeaux-fonce);
	font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
	margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em;
}
.mb-timeline-phase h5 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: .98rem; margin: 0 0 6px; }
.mb-timeline-phase p { font-size: .82rem; color: var(--mb-marine); line-height: 1.4; }

/* ---- Budget ---- */
.mb-budget-table { width: 100%; max-width: 640px; margin: 0 auto; border-collapse: collapse; font-family: var(--mb-font-sans); }
.mb-budget-table td { padding: 14px 4px; border-bottom: 1px solid rgba(78,21,25,.1); color: var(--mb-marine); }
.mb-budget-table td:last-child { text-align: right; font-weight: 700; color: var(--mb-bordeaux); }
.mb-budget-table tr.mb-budget-total td { border-bottom: none; border-top: 2px solid var(--mb-bordeaux); font-family: var(--mb-font-serif); font-size: 1.15rem; padding-top: 18px; color: var(--mb-bordeaux-fonce); }
.mb-budget-table tr.mb-budget-total td:last-child { color: var(--mb-or); }
.mb-budget-bar { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--mb-bordeaux), var(--mb-or)); margin-top: 6px; }

/* ---- Carte / visuel encadré générique ---- */
.mb-framed-image { max-width: 640px; margin: 0 auto; }
.mb-framed-image img { width: 100%; border-radius: 12px; box-shadow: 0 16px 36px rgba(78,21,25,.16); }
.mb-framed-caption { text-align: center; font-size: .82rem; color: var(--mb-marine); opacity: .65; margin-top: 10px; }

/* ==========================================================================
   PAGE FÊTE DU BOIS — récit immersif
   ========================================================================== */

/* ---- Hero immersif sombre, ton narratif ---- */
.mb-hero-immersif {
	background: radial-gradient(120% 130% at 30% 0%, #5a1d21 0%, var(--mb-bordeaux-fonce) 55%, #200a0b 100%);
	color: #fff;
	padding: 110px 24px 80px;
	text-align: center;
}
.mb-hero-immersif-inner { max-width: 780px; margin: 0 auto; }
.mb-hero-immersif h1 { font-family: var(--mb-font-serif); font-size: clamp(2rem, 4.4vw, 3rem); color: #fff; margin: 0 0 6px; overflow-wrap: break-word; word-break: break-word; }
.mb-hero-immersif .mb-hero-submotto { font-family: var(--mb-font-serif); font-style: italic; color: var(--mb-or); font-size: 1.15rem; margin: 0 0 28px; }
.mb-hero-immersif .mb-hero-accroche { font-size: 1.2rem; color: var(--mb-or-clair); max-width: 46ch; margin: 0 auto 36px; line-height: 1.6; }
/* 28/08 v4 — bloc titre repris pour reprendre EXACTEMENT la structure du
   hero de /le-projet (.mb-hero-inner à 2 colonnes, cf. plus haut) : l'image
   forêt utilise donc désormais .mb-hero-visual, plus le cadre dédié
   .mb-fdb-hero-forest (retiré, devenu inutile). Ce hero ayant un texte plus
   haut que celui de /le-projet (sous-titre + accroche, vs un seul
   paragraphe), la grille (align-items:stretch) étirait l'image plus que sur
   /le-projet — plafonnée ici (via le modificateur .mb-hero-fdb posé sur le
   conteneur) à la même hauteur EXACTE que /le-projet (302px desktop, mesurée
   sur .mb-hero-visual), centrée dans la rangée ; et même ratio 16:9 forcé
   sur mobile (au lieu du ratio brut de la photo, plus haut) pour la même
   raison — demande utilisateur du 28/08. */
.mb-hero-fdb .mb-hero-visual { max-height: 302px; align-self: center; }
@media (max-width: 900px) {
	.mb-hero-fdb .mb-hero-visual { height: auto; max-height: none; aspect-ratio: 16 / 9; }
	.mb-hero-fdb .mb-hero-visual img { height: 100%; object-fit: cover; }
}
.mb-scroll-hint { color: rgba(255,255,255,.6); text-decoration: underline; font-size: .9rem; }

/* ---- Prose narrative (Bloc 2, Bloc 6) ---- */
.mb-prose { max-width: 72ch; margin: 0 auto; }
.mb-prose p { color: var(--mb-marine); line-height: 1.85; font-size: 1.05rem; margin: 0 0 22px; }
.mb-prose p:last-child { margin-bottom: 0; }

/* ---- Séquence narrative numérotée (5 temps forts) ---- */
.mb-sequence-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.mb-sequence-item { display: flex; gap: 24px; align-items: flex-start; border-left: 3px solid var(--mb-or); padding-left: 24px; }
.mb-sequence-number { font-family: var(--mb-font-serif); font-size: 2.2rem; color: var(--mb-or); font-weight: 700; line-height: 1; flex-shrink: 0; min-width: 44px; }
.mb-sequence-item h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.15rem; margin: 0 0 8px; }
.mb-sequence-item p { color: var(--mb-marine); line-height: 1.65; margin: 0; }

/* ---- Deux panneaux (instruments / danses) ---- */
.mb-two-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .mb-two-panel { grid-template-columns: 1fr; } }
.mb-panel-title { font-family: var(--mb-font-serif); color: var(--mb-or); text-align: center; font-size: 1.1rem; margin: 0 0 18px; }
.mb-def-list { list-style: none; margin: 0; padding: 0; }
.mb-def-list li { padding: 12px 0; border-bottom: 1px solid rgba(78,21,25,.1); }
.mb-def-list li:last-child { border-bottom: none; }
.mb-def-term { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-weight: 700; font-style: italic; }
.mb-def-desc { display: block; color: var(--mb-marine); font-size: .9rem; margin-top: 2px; }

/* ---- Diaspora ---- */
.mb-diaspora-block {
	background: linear-gradient(160deg, var(--mb-marine), #2c3a5e);
	color: #fff;
	border-radius: 16px;
	padding: 56px 40px;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
/* 28/08 : globe jugé pas assez visible malgré son 3rem déjà supérieur à la
   taille par défaut — porté à 4.6rem, seul usage de .mb-emoji-icon dans ce
   bloc donc aucun autre endroit affecté. */
.mb-diaspora-block .mb-emoji-icon { font-size: 4.6rem; margin-bottom: 20px; }
.mb-diaspora-block p { color: rgba(255,255,255,.9); line-height: 1.75; font-size: 1.05rem; max-width: 62ch; margin: 0 auto 16px; }
.mb-diaspora-block .mb-btn-sub { display: block; font-size: .8rem; color: rgba(255,255,255,.65); margin-top: 12px; font-weight: 400; }

/* ==========================================================================
   PAGES SECONDAIRES — Mur des Mécènes, Gouvernance, La FCPB, Contact
   ========================================================================== */

/* ---- Mur des Mécènes ---- */
.mb-mecenes-search {
	max-width: 480px; margin: 0 auto 32px;
	display: flex; gap: 10px;
}
.mb-mecenes-search input {
	flex: 1; padding: 12px 16px; border: 1px solid rgba(78,21,25,.2); border-radius: 999px;
	font-family: var(--mb-font-sans); font-size: .95rem;
}
.mb-mecenes-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.mb-mecenes-tab {
	padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(78,21,25,.2);
	font-weight: 700; font-size: .9rem; color: var(--mb-marine); background: #fff;
}
.mb-mecenes-tab.is-active { background: var(--mb-bordeaux); color: #fff; border-color: var(--mb-bordeaux); }
.mb-cta-repeat { text-align: center; color: var(--mb-marine); font-weight: 600; margin-bottom: 16px; }

/* ---- Organigramme 3 niveaux ---- */
.mb-org-chart { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; }
.mb-org-level {
	width: 100%;
	background: #fff;
	border: 2px solid var(--mb-bordeaux);
	border-radius: 12px;
	padding: 22px 28px;
	text-align: center;
	margin-bottom: 8px;
}
.mb-org-level.mb-org-1 { border-color: var(--mb-or); background: linear-gradient(160deg, var(--mb-or-clair), #fff); max-width: 500px; }
.mb-org-level.mb-org-3 { border-color: rgba(78,21,25,.3); }
.mb-org-connector { width: 2px; height: 28px; background: rgba(78,21,25,.25); margin-bottom: 8px; }
.mb-org-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mb-or); font-weight: 700; margin-bottom: 6px; }
.mb-org-level h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.1rem; margin: 0 0 8px; }
.mb-org-level p { color: var(--mb-marine); font-size: .9rem; line-height: 1.55; margin: 0; }

/* ---- Table identité (clé/valeur) ---- */
.mb-identity-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; }
.mb-identity-table td { padding: 14px 16px; border-bottom: 1px solid rgba(78,21,25,.1); color: var(--mb-marine); vertical-align: top; }
.mb-identity-table td:first-child { font-weight: 700; color: var(--mb-bordeaux); width: 34%; }

/* ---- Contact ---- */
.mb-contact-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .mb-contact-channels { grid-template-columns: minmax(0, 1fr); } }
.mb-contact-card { background: #fff; border: 1px solid rgba(78,21,25,.1); border-radius: 12px; padding: 32px 24px; text-align: center; }
.mb-contact-card .mb-emoji-icon { font-size: 2.2rem; }
.mb-contact-card h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.1rem; margin: 8px 0; }
.mb-contact-card p { color: var(--mb-marine); font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }
.mb-contact-card strong { display: block; color: var(--mb-marine); margin-bottom: 4px; }

/* ---- Landing pages publicitaires (01/09, gabarit "Elementor Canvas", sans
   header/footer du thème) : mini-bandeau de marque minimal, seule "sortie"
   possible de la page (lien logo vers l'accueil) — pas de menu, pas de
   barre utilitaire. Réutilise .mb-header-brand* déjà stylé pour l'en-tête
   normal du site (logo + nom), juste dans un bandeau plus compact. */
.mb-lp-header {
	background: var(--mb-ivoire);
	border-bottom: 3px solid var(--mb-or);
	padding: 16px 24px;
	display: flex;
	justify-content: center;
}
.mb-lp-header .mb-header-brand .custom-logo { height: 56px; }
.mb-lp-header .mb-header-brand-text { padding-left: 12px; }
.mb-lp-header .mb-header-brand-name { font-size: 1rem; }
.mb-contact-card a.mb-contact-value { color: var(--mb-bordeaux); font-weight: 700; text-decoration: none; }

/* ==========================================================================
   LANDING PAGES PRO — V2 (01/09) — refonte demandée : les 4 landing pages
   /dons/* doivent comporter toutes les zones d'une landing page à fort taux
   de conversion (hero cinématique, bandeau de confiance immédiat, agitation
   du problème, compte à rebours d'échéance, offres façon "pricing", barre
   CTA sticky), avec une identité plus marquée que le reste du site
   institutionnel — tout en restant strictement dans la charte graphique.
   Espace de classes .mb-lp-* dédié : ne modifie AUCUNE règle existante
   (mb-hero-simple, mb-generic-card, mb-accordion, mb-compteur... restent
   réutilisés tels quels partout où c'est pertinent, cf. build-dons-*.php).
   ========================================================================== */

/* ---- Petit libellé au-dessus d'un titre ("kicker"), landing pages ---- */
.mb-lp-kicker {
	display: inline-block;
	font-family: var(--mb-font-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mb-or-clair);
	background: rgba(201,162,75,.14);
	border: 1px solid rgba(201,162,75,.4);
	border-radius: 999px;
	padding: 7px 18px;
	margin: 0 0 20px;
}
.mb-lp-kicker-dark { color: var(--mb-bordeaux); background: rgba(122,42,46,.08); border-color: rgba(122,42,46,.3); }

/* ---- Hero cinématique plein écran (photo réelle + dégradé de lisibilité,
   cf. brief : "fond sombre, dégradé bordeaux en bas pour la lisibilité") ---- */
.mb-lp-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	/* 04/09 — espace vide en bas de la zone hero (après le repère de scroll,
	   avant la section suivante) jugé trop large (70px mesuré, desktop ET
	   mobile) : réduit à une valeur plus raisonnable. Le padding-top
	   (128px, tuné séparément pour l'écart avec la top bar) n'est pas
	   concerné — cf. .mb-lp-hero-under-topbar plus bas qui le surcharge. */
	padding: 128px 24px 8px;
}
.mb-lp-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(30,34,56,.6) 0%, rgba(78,21,25,.72) 55%, rgba(78,21,25,.95) 100%);
	z-index: 1;
}
/* 05/09 — hero "corp" (entreprises UNIQUEMENT, .mb-lp-hero-corp) : suite de
   la différenciation démarrée sur la topbar — même photo réelle du bâtiment
   en fond (rien ne change côté image), mais le dégradé de lisibilité passe
   du bordeaux chaud (::before ci-dessus, gardé tel quel pour diaspora) à un
   marine/anthracite froid, prolongeant l'identité "Marine Corporate" déjà
   posée sur la topbar/le compteur (#0d0f18 = même teinte que le fond du
   compteur LED). Sélecteur à 2 classes : suffisant pour l'emporter sur la
   règle 1 classe ci-dessus sans !important. */
.mb-lp-hero-corp::before {
	background: linear-gradient(180deg, rgba(30,34,56,.55) 0%, rgba(13,15,24,.78) 55%, rgba(13,15,24,.95) 100%);
}
/* 06/09 — oubli corrigé : le bouton doré "Découvrir les 4 grades de
   partenariat" gardait son texte bordeaux par défaut malgré le dégradé déjà
   marine de .mb-lp-hero-corp::before. Aligné sur le reste de la page. */
.mb-lp-hero-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-hero-corp .mb-btn-primary:hover { color: var(--mb-marine); }
/* ---- 04/09 — fond du hero : défilement de plusieurs rendus de la maquette
   en fondu enchaîné (demande explicite), au lieu d'une photo fixe unique.
   Réutilise le mécanisme de diaporama déjà existant ailleurs sur le site
   (data-mb-slideshow / .mb-hero-slide / initHeroSlideshow() dans
   mb-global.js — déjà en place sur le hero de l'accueil) : pas de nouveau
   JS. Empilement en position:absolute (toutes les images superposées,
   plein cadre) ; une seule visible à la fois via "is-active" (opacité).
   Reste SOUS le dégradé de lisibilité (::before, z-index:1) et sous le
   contenu (z-index:2). */
/* Bug réel trouvé en vérification : le widget Elementor qui contient tout
   le HTML du hero (celui-ci injecté comme un widget "texte" unique) est
   lui-même en position:relative par défaut (comportement Elementor). Sans
   cette ligne, .mb-lp-hero-bg (position:absolute, inset:0) se cale donc sur
   CE WIDGET (rétréci à la largeur/hauteur de son contenu texte, ~840px)
   plutôt que sur la pleine largeur/hauteur de .mb-lp-hero — le fond
   apparaissait comme une "vignette" encadrée au lieu d'un fond plein cadre.
   Sélecteur à 2 classes (spécificité) pour battre la règle Elementor. */
.mb-lp-hero .elementor-widget-text-editor { position: static; }
.mb-lp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.mb-lp-hero-bg .mb-hero-slide {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	transition: opacity 1.8s ease;
}
.mb-lp-hero-bg .mb-hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	/* Pas de fondu animé : la 1re image reste simplement affichée, fixe. */
	.mb-lp-hero-bg .mb-hero-slide { transition: none; }
}
.mb-lp-hero-inner { position: relative; z-index: 2; max-width: 840px; margin: 0 auto; }
.mb-lp-hero-inner h1 {
	font-family: var(--mb-font-serif);
	font-size: clamp(2rem, 5vw, 3.3rem);
	line-height: 1.16;
	color: #fff;
	margin: 0 0 18px;
	overflow-wrap: break-word;
}
.mb-lp-hero-inner .mb-hero-accroche { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--mb-or-clair); max-width: 60ch; margin: 0 auto 20px; }
/* ---- Série de phrases courtes en "machine à écrire" (04/09, demande
   explicite : chaque phrase s'écrit progressivement caractère par
   caractère, puis s'efface de la même façon avant que la suivante ne
   s'écrive à son tour, en boucle). La 1re phrase reste dans le HTML
   (visible sans JS, texte complet et statique). min-height calé pour
   qu'aucune phrase (plus longue/courte qu'une autre) ne fasse sauter la
   mise en page du reste du hero pendant la frappe/l'effacement. */
.mb-lp-hero-rotator {
	display: flex; align-items: center; justify-content: center;
	min-height: 66px;
	max-width: 620px; margin: 0 auto 22px; padding: 0 12px;
}
.mb-lp-hero-rotator-text {
	display: inline-block;
	font-family: var(--mb-font-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 2.8vw, 1.55rem);
	line-height: 1.35;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
/* Curseur clignotant — signature visuelle de l'effet machine à écrire,
   reste présent même pendant les brefs instants où le texte est vide
   (juste avant qu'une nouvelle phrase ne commence à s'écrire). */
.mb-lp-hero-rotator-text::after {
	content: '';
	display: inline-block;
	width: 2px; height: .95em;
	margin-left: 3px;
	background: var(--mb-or);
	vertical-align: -0.12em;
	animation: mb-lp-cursor-blink .9s steps(1) infinite;
}
@keyframes mb-lp-cursor-blink {
	0%, 49%  { opacity: 1; }
	50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mb-lp-hero-rotator-text::after { animation: none; }
}
/* 05/09 — variante "révélation mot par mot" (entreprises UNIQUEMENT, via
   .mb-lp-hero-rotator-corp — /dons/diaspora garde la machine à écrire
   ci-dessus, inchangée) : pas de curseur clignotant ici (signature visuelle
   de la frappe, sans objet pour un effet de fondu), la phrase entière
   s'efface/réapparaît par un fondu CSS (.is-out, posé par
   initLpRotatorCorp() dans mb-global.js) pendant que chaque mot qu'elle
   contient apparaît en cascade via .mb-lp-hero-rotator-word. */
.mb-lp-hero-rotator-corp .mb-lp-hero-rotator-text::after { display: none; }
.mb-lp-hero-rotator-corp .mb-lp-hero-rotator-text {
	transition: opacity .5s ease;
}
.mb-lp-hero-rotator-corp .mb-lp-hero-rotator-text.is-out { opacity: 0; }
/* 05/09 (v2) — cascade ralentie (demande explicite : "un peu plus lent"),
   en cohérence avec WORD_STEP_MS/FADE_OUT_MS augmentés côté JS
   (initLpRotatorCorp, mb-global.js) : durée de l'animation par mot .5s→.62s. */
.mb-lp-hero-rotator-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(10px);
	animation: mb-lp-word-in .62s ease forwards;
}
@keyframes mb-lp-word-in {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mb-lp-hero-rotator-word { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 640px) {
	.mb-lp-hero-rotator { min-height: 80px; margin-bottom: 18px; }
	.mb-lp-hero-rotator-text { font-size: 1.12rem; }
}
/* 07/09 (v3) — variante "balayage" (particuliers UNIQUEMENT, via
   .mb-lp-hero-rotator-loc) : ni la machine à écrire de diaspora, ni la
   cascade mot par mot d'entreprises. Corrige la v2 ("matérialisation" —
   flou/zoom/fondu sur la phrase ENTIÈRE en même temps, signalé : le début
   et la fin de la phrase devenaient nets au même instant, ce n'était pas
   "progressif du début vers la fin"). Ici, un clip-path révèle la phrase
   RÉELLEMENT de gauche à droite (le texte après le bord du balayage reste
   invisible jusqu'à ce que le balayage l'atteigne) — accompagné d'un filet
   de lumière dorée qui longe exactement ce bord, comme si la phrase
   s'éclairait au fur et à mesure qu'une lueur la traverse. Rythme lent
   (1,7s) et sortie tout aussi lente (1s de fondu, pas de disparition
   brusque) — mêmes exigences que la v2, seule la mécanique de l'entrée
   change. Pas de curseur clignotant (sans objet ici). */
.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text::after { display: none; }
.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text {
	position: relative;
	transition: opacity 1s ease;
}
.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.is-out { opacity: 0; }
.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.mb-lp-reveal-in {
	animation: mb-lp-reveal-wipe 1.7s cubic-bezier(.22,.61,.36,1) both;
}
.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.mb-lp-reveal-in::before {
	content: '';
	position: absolute; top: -10%; bottom: -10%; width: 40px;
	background: linear-gradient(90deg, transparent, rgba(255,224,150,.85) 45%, #fff 50%, rgba(255,224,150,.85) 55%, transparent);
	filter: blur(4px);
	mix-blend-mode: screen;
	pointer-events: none;
	animation: mb-lp-reveal-glow 1.7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mb-lp-reveal-wipe {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0% 0 0); }
}
@keyframes mb-lp-reveal-glow {
	0%   { left: -6%; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { left: 102%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text { transition: none; }
	.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.mb-lp-reveal-in,
	.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.mb-lp-reveal-in::before {
		animation: none;
	}
	.mb-lp-hero-rotator-loc .mb-lp-hero-rotator-text.mb-lp-reveal-in::before { display: none; }
}

/* ---- 2e CTA hero (04/09) — "Je veux en savoir plus", bouton secondaire
   posé à côté du CTA principal plein. Médaillon vert autour de l'icône
   WhatsApp : reprend la même exception de charte déjà validée pour la top
   bar (reconnaissance immédiate du canal).
   (v3) — jeu de couleurs volontairement inversé par rapport au bouton
   "outline-white" générique (demande explicite) : ici le bouton est PLEIN
   BLANC par défaut (bien visible sur la photo sombre du hero, distinct du
   CTA principal doré) et devient contour transparent au survol — l'inverse
   du comportement habituel de .mb-btn-outline-white. D'où des règles
   propres à .mb-lp-hero-cta-wa plutôt qu'une modification de la classe
   générique (qui reste utilisée telle quelle ailleurs sur le site). */
.mb-lp-hero-cta-wa {
	background: #fff;
	border-color: #fff;
	color: var(--mb-bordeaux);
}
.mb-lp-hero-cta-wa:hover {
	background: transparent;
	border-color: #fff;
	color: #fff;
}
.mb-lp-hero-wa-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(37,211,102,.22);
	color: #25d366;
	margin-right: 2px;
}
.mb-lp-hero-wa-icon > svg.mb-icon-svg { width: 15px; height: 15px; }
/* 04/09 (v5) — "sur WhatsApp" ajouté au libellé (demande explicite) allonge
   trop le texte pour tenir sur une ligne SUR MOBILE : même schéma full/
   short que le bouton don de la top bar. Desktop/tablette gardent le texte
   complet, mobile bascule sur la version raccourcie (qui mentionne quand
   même explicitement WhatsApp, comme demandé). */
.mb-lp-hero-wa-short { display: none; }
@media (max-width: 640px) {
	.mb-lp-hero-wa-full { display: none; }
	.mb-lp-hero-wa-short { display: inline; }
}
/* 04/09 (v6) — demande explicite : le 2e bouton doit avoir EXACTEMENT la
   même mise en forme que le 1er (même proportion/taille de bouton), sur
   mobile en particulier. Le palier ≤400px ci-dessus (police/padding/icône
   réduits rien que sur ce bouton) créait justement l'asymétrie signalée —
   supprimé : ce bouton hérite maintenant du même padding/police que le
   bouton principal (règle .mb-btn de base, non surchargée), à tous les
   paliers, comme le CTA principal. */
/* 04/09 — phrase de réassurance ("Carte bancaire · PayPal...") jugée trop
   collée aux boutons CTA juste au-dessus (0px d'écart mesuré) : léger
   espacement ajouté, scoped à ce hero (la classe générique .mb-hero-
   reassurance garde son margin-top par défaut ailleurs sur le site). */
.mb-lp-hero-inner .mb-hero-reassurance { margin-top: 14px; }
.mb-lp-hero-stats {
	display: flex;
	justify-content: center;
	gap: 34px;
	flex-wrap: wrap;
	margin: 30px 0 4px;
	padding-top: 22px;
	position: relative;
}
/* 04/09 — trait séparateur (avant simple "border-top" fixe, à peine visible)
   demandé "légèrement plus épais" et "plus visible" avec un effet animé.
   Remplacé par un pseudo-élément : ligne légèrement plus épaisse (2px au
   lieu de 1px) avec un reflet lumineux qui balaie doucement toute sa
   largeur en boucle — reste discret (charte : blanc/doré, pas de couleur
   hors charte) mais capte davantage l'œil qu'un trait statique. */
.mb-lp-hero-stats::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		rgba(255,255,255,.14) 0%,
		rgba(255,255,255,.14) 38%,
		rgba(255,255,255,.95) 50%,
		var(--mb-or-clair) 52%,
		rgba(255,255,255,.14) 62%,
		rgba(255,255,255,.14) 100%);
	background-size: 260% 100%;
	animation: mb-lp-hero-line-shine 3.6s ease-in-out infinite;
}
@keyframes mb-lp-hero-line-shine {
	0%   { background-position: 130% 0; }
	100% { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mb-lp-hero-stats::before { animation: none; background: rgba(255,255,255,.32); }
}
.mb-lp-hero-stat { display: flex; flex-direction: column; align-items: center; }
.mb-lp-hero-stat strong { font-family: var(--mb-font-serif); font-size: 1.5rem; color: var(--mb-or-clair); font-variant-numeric: tabular-nums; }
.mb-lp-hero-stat span { font-size: .76rem; color: rgba(255,255,255,.75); letter-spacing: .03em; text-transform: uppercase; margin-top: 4px; }

/* ---- Halo pulsé sur le CTA principal du hero (discret, s'arrête au survol) ---- */
@keyframes mb-lp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,75,.5); } 70% { box-shadow: 0 0 0 14px rgba(201,162,75,0); } }
.mb-js .mb-btn-pulse { animation: mb-lp-pulse 2.6s ease-out infinite; }
.mb-js .mb-btn-pulse:hover { animation: none; }

/* ---- Repère de scroll (chevron discret, sous les statistiques du hero) ----
   01/09 — repositionné en flux normal (display:block + margin auto) plutôt
   qu'en position:absolute pinné au bas du hero : sur un hero au contenu
   variable (stats vivantes en plus du texte), un positionnement absolu
   entrait en collision avec la dernière ligne de contenu (chevron chevauchant
   le chiffre "18 contributeurs" à la vérification visuelle). En flux normal,
   il se place toujours proprement après le contenu, quelle que soit sa hauteur. */
.mb-lp-scrollcue {
	display: block; margin: 28px auto 0;
	width: 26px; height: 26px; color: rgba(255,255,255,.65);
}
.mb-js .mb-lp-scrollcue { animation: mb-lp-bounce 2s ease-in-out infinite; }
@keyframes mb-lp-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---- Bandeau de confiance (juste sous le hero — lève l'objection avant
   qu'elle ne se pose, cf. doctrine 1.5) ---- */
.mb-trustbar { background: var(--mb-ivoire); padding: 26px 24px; border-bottom: 1px solid rgba(78,21,25,.08); }
.mb-trustbar-row { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
/* 04/09 — demande explicite : les 4 phrases, raccourcies, doivent tenir
   SUR UNE LIGNE chacune sur mobile. "max-width:230px" (hérité de l'époque
   des phrases longues) forçait encore un retour à la ligne au milieu du
   texte même une fois les phrases raccourcies — retiré, plus nécessaire
   (l'icône + le texte se dimensionnent naturellement). white-space:nowrap
   en sécurité pour empêcher tout retour à la ligne intempestif. */
.mb-trustbar-item { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--mb-bordeaux-fonce); font-weight: 600; white-space: nowrap; }
.mb-trustbar-item .mb-icon-svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--mb-bordeaux); }
/* 05/09 — bandeau de confiance "corp" (entreprises UNIQUEMENT,
   .mb-trustbar-corp) : suite de la différenciation — juste après le hero
   marine/anthracite, ce bandeau repassait au bordeaux (identique à
   diaspora), créant une rupture de ton immédiate. Recoloré en marine pour
   prolonger l'identité "Marine Corporate" de la topbar/hero. Fond ivoire
   inchangé (neutre, fonctionne avec les deux palettes). */
.mb-trustbar-corp .mb-trustbar-item { color: var(--mb-marine); }
.mb-trustbar-corp .mb-trustbar-item .mb-icon-svg { color: var(--mb-marine); }
@media (max-width: 640px) {
	/* 04/09 (v2) — demande explicite : 4 lignes, une phrase par ligne, sur
	   mobile. Avec flex-wrap seul, 2 phrases courtes pouvaient tenir sur la
	   même rangée (ex. "Paiement sécurisé" + "Reçu automatique"), donnant
	   3 lignes au lieu de 4 — bug réel trouvé en vérification. Colonne
	   forcée : un élément par ligne, quelle que soit sa largeur. Écart
	   vertical raisonnable entre les 4 lignes, ni collé ni exagéré.
	   (v3) — demande explicite : le DÉBUT (icône+texte) des 4 phrases doit
	   être aligné verticalement entre elles, pas chacune centrée
	   indépendamment (ce que donnait align-items:center — 4 débuts décalés
	   selon la longueur de chaque phrase). align-items:flex-start aligne
	   tous les débuts sur une même colonne ; la largeur de la colonne
	   s'ajuste à la phrase la plus longue et reste centrée dans la page via
	   margin:auto sur .mb-trustbar-row (hérité, non modifié ici). */
	/* 04/09 (v4) — demande explicite : décaler tout le bloc des 4 phrases
	   vers la droite sur mobile (marge à gauche), plutôt que de le laisser
	   centré par le margin:auto hérité. */
	.mb-trustbar-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-left: 28px; }
}

/* ---- Compte à rebours d'échéance de campagne (urgence réelle, cf. doctrine
   1.4 — jamais "plus que 3 places", une échéance de phase de collecte) ---- */
.mb-countdown-section { background: linear-gradient(160deg, var(--mb-marine) 0%, #12141f 100%); padding: 64px 24px; text-align: center; color: #fff; }
.mb-countdown-section h2 { color: #fff; }
.mb-countdown-section .mb-section-sub { color: rgba(255,255,255,.8); max-width: 62ch; margin: 0 auto 32px; }
/* 06/09 — bloc "compte à rebours" corp (entreprises UNIQUEMENT) : fond déjà
   marine partagé avec /dons/diaspora (pas un accent à distinguer) — seul le
   texte du bouton doré passe en marine. */
.mb-countdown-section-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-countdown-section-corp .mb-btn-primary:hover { color: var(--mb-marine); }
.mb-countdown { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 auto; }
.mb-countdown-unit { background: rgba(255,255,255,.06); border: 1px solid rgba(201,162,75,.4); border-radius: 14px; min-width: 88px; padding: 16px 8px 12px; }
.mb-countdown-unit strong { display: block; font-family: var(--mb-font-serif); font-size: clamp(1.7rem,4vw,2.5rem); color: var(--mb-or-clair); font-variant-numeric: tabular-nums; }
.mb-countdown-unit span { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 6px; }
.mb-countdown-expired { font-size: 1.1rem; color: var(--mb-or-clair); font-family: var(--mb-font-serif); }
/* 04/09 — retour utilisateur : sur mobile, "min-width:88px" + "flex-wrap:wrap"
   fait passer les 4 unités (Jours/Heures/Minutes/Secondes) sur 2 lignes dès
   que l'écran est trop étroit pour les 4 blocs. Corrigé UNIQUEMENT sur
   mobile : nowrap + largeur flexible (flex:1 1 0, plus de min-width) pour
   que les 4 unités se partagent la largeur disponible et tiennent toujours
   sur une seule ligne, quelle que soit l'étroitesse de l'écran — texte/
   chiffres réduits en conséquence pour rester lisibles. Le rendu desktop/
   tablette (déjà correct) n'est pas touché. */
@media (max-width: 480px) {
	.mb-countdown { flex-wrap: nowrap; gap: 6px; }
	.mb-countdown-unit { min-width: 0; flex: 1 1 0; padding: 10px 2px 8px; }
	.mb-countdown-unit strong { font-size: clamp(1.05rem, 5.5vw, 1.6rem); }
	.mb-countdown-unit span { font-size: .56rem; letter-spacing: .04em; }
}

/* ---- Offres façon "pricing" (5 niveaux de contribution, cf. doctrine 1.6
   personnalisation par cible — présentation directement comparable) ---- */
.mb-offer-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .mb-offer-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px) { .mb-offer-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.mb-offer-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(78,21,25,.12); border-radius: 14px; padding: 28px 20px 22px; text-align: center; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.mb-offer-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(78,21,25,.3); border-color: rgba(201,162,75,.6); }
.mb-offer-card.is-recommended { border-color: var(--mb-or); box-shadow: 0 20px 40px -18px rgba(201,162,75,.4); }
.mb-offer-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--mb-or); color: var(--mb-bordeaux-fonce); font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.mb-offer-symbol { font-size: 1.7rem; margin-bottom: 8px; }
.mb-offer-card h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.02rem; margin: 0 0 4px; }
.mb-offer-seuil { font-weight: 700; color: var(--mb-bordeaux-fonce); font-size: .92rem; margin-bottom: 12px; }
.mb-offer-card ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; flex-grow: 1; }
.mb-offer-card li { font-size: .8rem; color: var(--mb-marine); line-height: 1.5; padding: 5px 0 5px 20px; position: relative; }
.mb-offer-card li::before { content: '✓'; position: absolute; left: 0; color: var(--mb-or); font-weight: 700; }
.mb-offer-card .mb-btn { width: 100%; font-size: .84rem; padding: 12px 12px; }

/* ---- Barre CTA sticky bas d'écran, dédiée aux landing pages (le CTA "ne se
   cache jamais", doctrine 1.8) — décalée à droite pour ne jamais recouvrir
   la colonne KAPIA / remonter-en-haut déjà fixée en bas-droite. ---- */
.mb-lp-stickybar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9996;
	background: linear-gradient(160deg, var(--mb-bordeaux) 0%, var(--mb-bordeaux-fonce) 100%);
	padding: 12px 84px 12px 16px;
	box-shadow: 0 -8px 24px rgba(0,0,0,.25);
	transform: translateY(100%);
	transition: transform .35s ease;
}
.mb-lp-stickybar.is-visible { transform: translateY(0); }
.mb-lp-stickybar a.mb-btn { display: flex; width: 100%; max-width: 480px; margin: 0 auto; justify-content: center; }
@media (min-width: 1000px) { .mb-lp-stickybar { padding-right: 100px; } }

/* ==========================================================================
   LANDING PAGES PRO — V3 (01/09) — refonte demandée : la page ne doit plus
   faire allusion au site principal à AUCUN moment (aucun logo-lien retour,
   aucun lien vers /fete-du-bois, /contribuer/particuliers, /gouvernance,
   aucun "retour au site") — la landing page existe seule. Chaque zone reçoit
   un fond qui lui est propre, une galerie animée présente les vrais rendus
   de la maquette, et les 5 niveaux sont détaillés intégralement dans des
   cartes "3D" (relief, médaille, tous les avantages listés).
   ========================================================================== */

/* ---- Barre du haut V7 (02/09) — corrige un vrai bug visuel signalé : la
   V4/V6 posait la barre fixe (.mb-lp-topbar2) EN TANT QU'ENFANT d'un widget
   texte lui-même posé dans un container Elementor statique ; ce container
   gardait sa propre hauteur (padding par défaut d'Elementor + un div-
   espaceur en flux normal placé À CÔTÉ de la barre dans le même widget) —
   la barre fixe flottait donc AU-DESSUS d'une seconde boîte blanche, plate,
   plus épaisse, qui restait dans le flux et décalait tout le contenu vers
   le bas : deux barres superposées au lieu d'une. Corrigé en rendant le
   CONTAINER ELEMENTOR LUI-MÊME fixe (classe posée directement dessus, pas
   sur un enfant) : plus aucune boîte statique ne subsiste dans le flux. Le
   rattrapage d'espace se fait maintenant par un padding-top direct sur le
   hero qui suit (.mb-lp-hero-under-topbar), jamais via un div-espaceur.
   Logo agrandi à la même taille que l'en-tête du site (cf. .mb-header-brand
   .custom-logo), même typographie serif pour le nom, mais SANS la devise
   "Di' Manku" (demande explicite : cette page n'évoque jamais le site).
   Compte à rebours passé à 4 unités (j/h/min/s), précédé d'un court label
   d'échéance ("Clôture dans"), et rendu "3D" (pastille en léger relief,
   ombres internes + externes superposées, chiffres avec liseré clair). */
.mb-lp-topbar3 {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9995;
	background: linear-gradient(100deg, #fff 0%, var(--mb-ivoire) 100%);
	border-bottom: 1px solid rgba(201,162,75,.55);
	box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px -6px rgba(30,34,56,.24), 0 2px 0 rgba(201,162,75,.3);
}
/* 06/09 — les CTA "Découvrir les 4 grades"/"Devenir partenaire" (entreprises,
   #grades/#contact-pro) et "Je contribue"/"Oui, je donne" (diaspora,
   #niveaux/#don) sautent vers ces ancres, mais la topbar fixe ci-dessus
   (~79px de haut sur PC, ~93px sur mobile ≤900px, cf. .mb-lp-topbar3-inner
   plus bas) masquait le haut de la zone de destination juste après le saut.
   scroll-margin-top réserve l'espace nécessaire — jamais posé sur html/body
   (scroll-padding-top), ce qui décalerait aussi les ancres de toutes les
   AUTRES pages du site (mb-global.css est chargé partout).
   14/09 — élargi à TOUS les formulaires/résultats du site (don, contact,
   contact pro, RDV, newsletter), suite à un signalement explicite : après
   soumission d'un formulaire quelconque, la redirection saute vers l'ancre
   du message de résultat, mais celui-ci restait caché sous la topbar
   fixe (pages landing) OU sous le header standard sticky (.mb-site-header,
   ~96px desktop/~72px mobile, cf. plus haut dans ce fichier — même souci,
   valeur proche donc la même marge convient aux deux contextes sans
   décalage genant). Ciblé par CLASSE (.mb-don-form/.mb-form-success,
   partagées par les 4 formulaires "classiques" quel que soit leur id
   précis, souvent personnalisé par page — ex. "contact-form-particuliers")
   plutôt que par id listé un par un : reste valable pour toute page
   actuelle ou future sans avoir à retoucher cette règle. */
#grades, #contact-pro, #niveaux, #don,
.mb-don-form, .mb-form-success,
#newsletter, .mb-newsletter-form,
.mb-don-processing, .mb-don-failed { scroll-margin-top: 95px; }
@media (max-width: 900px) {
	#grades, #contact-pro, #niveaux, #don { scroll-margin-top: 108px; }
}
.mb-lp-topbar3-inner {
	/* 02/09 (v8) — centrage EXACT du compte à rebours demandé : un simple
	   "justify-content:space-between" ne centre le bloc du milieu que si les
	   deux côtés (logo+nom / bouton CTA) font la même largeur, ce qui n'est
	   jamais le cas — le compteur dérivait visuellement vers la droite.
	   Grille 3 colonnes 1fr/auto/1fr : la colonne centrale se cale
	   mathématiquement au milieu de la barre, quelle que soit la largeur
	   réelle des deux côtés. */
	/* 02/09 (v16) — barre desktop jugée trop épaisse + compteur trop gros à
	   la demande explicite ("uniquement sur PC") : min-height et padding
	   réduits, logo et compteur redimensionnés en conséquence ci-dessous.
	   Mobile (règles ≤900/≤600/≤400px plus bas) non concerné, non modifié. */
	position: relative;
	max-width: 1320px; margin: 0 auto;
	min-height: 78px;
	padding: 6px 32px;
	display: grid; grid-template-columns: minmax(min-content,1fr) auto minmax(min-content,1fr); align-items: center; gap: 20px;
	/* minmax(min-content,1fr), pas 1fr tout court : un "fr" nu peut, sous
	   contrainte d'espace, réduire un item EN DEÇÀ de son contenu naturel —
	   trouvé en vérification mobile (02/09) : le logo (élément remplacé,
	   donc "compressible" selon l'algo grid) se retrouvait écrasé à 12px de
	   large au lieu de ~60px pendant que le bouton CTA (texte, non
	   compressible) gardait sa taille pleine. minmax(min-content,1fr) fixe
	   un plancher explicite : la colonne ne descend plus sous la largeur
	   réelle de son contenu. */
}
/* liseré de brillance en haut de la barre — renforce l'effet de relief sans
   créer de boîte : pseudo-élément décoratif, aucun impact sur la hauteur
   réelle (le conteneur a déjà une hauteur propre via -inner, donc le bug de
   "widget-clipping" documenté ailleurs ne s'applique pas ici). */
.mb-lp-topbar3::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
	background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
	pointer-events: none;
}
/* min-width explicite en px (pas juste minmax(min-content,1fr) sur la
   grille) : bug réel trouvé en vérification à 320px — pour un <img>
   redimensionné par aspect-ratio (hauteur fixe, largeur auto), la "taille
   minimale automatique" que la grille utilise pour son calcul de
   min-content est proche de zéro (contrairement à un texte non-cassable
   comme le bouton CTA, dont le min-content = sa taille pleine) : sous
   contrainte d'espace, la grille écrasait donc le logo (60×66 au lieu de
   84×66) en préservant le CTA intact. Un min-width EXPLICITE fixe un
   plancher que la grille doit respecter quoi qu'il arrive. */
/* 05/09 — logo + nom cliquables (rechargent la page), demande explicite :
   text-decoration:none nécessaire (c'est maintenant un <a>, pas un <div>) —
   .mb-lp-topbar3-name a déjà sa propre couleur explicite, non affectée. */
.mb-lp-topbar3-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; z-index: 1; justify-self: start; min-width: 80px; text-decoration: none; transition: opacity .2s ease; }
.mb-lp-topbar3-brand:hover { opacity: .82; }
.mb-lp-topbar3-brand img { height: 62px; width: auto; display: block; filter: drop-shadow(0 3px 6px rgba(30,34,56,.22)); }
.mb-lp-topbar3-name {
	font-family: var(--mb-font-serif); font-weight: 700; font-size: 1.05rem; color: var(--mb-bordeaux);
	line-height: 1.25; letter-spacing: .006em; text-shadow: 0 1px 0 rgba(255,255,255,.6);
	padding-left: 14px; border-left: 1px solid rgba(201,162,75,.45); max-width: 220px;
}
.mb-lp-topbar3-count-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 1; justify-self: center; }
.mb-lp-topbar3-count-label { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mb-bordeaux); opacity: .8; white-space: nowrap; }
.mb-lp-topbar3-count-label-short { display: none; }
.mb-lp-topbar3-count {
	display: flex; align-items: stretch;
	background: linear-gradient(180deg, #fffdf7 0%, rgba(201,162,75,.14) 100%);
	border: 1px solid rgba(201,162,75,.5);
	border-radius: 10px;
	padding: 4px 3px;
	box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 4px rgba(122,42,46,.08) inset, 0 5px 12px -5px rgba(122,42,46,.3);
}
.mb-lp-topbar3-unit { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 9px; position: relative; }
.mb-lp-topbar3-unit:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: rgba(201,162,75,.5); }
.mb-lp-topbar3-unit strong { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.mb-lp-topbar3-unit span { font-size: .48rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mb-marine); opacity: .6; margin-top: 2px; }
/* 04/09 — 2 CTA dans la barre (demande explicite) : WhatsApp (secondaire,
   contour bordeaux — charte graphique, jamais le vert de marque WhatsApp) +
   don (primaire, doré, phrase volontairement plus "chaude" : "Oui, je
   donne ❤️" plutôt que le neutre "Je contribue", pour susciter davantage le
   clic/l'émotion — cf. brief). Sur mobile, où la place est quasi nulle
   (marges de 0.3 à 4px déjà mesurées avant cet ajout), le bouton WhatsApp
   perd son libellé texte et devient une pastille ronde icône seule
   (cf. @media ci-dessous) : c'est le seul moyen réaliste de loger un 2e
   bouton sans rien faire déborder. */
.mb-lp-topbar3-cta { flex-shrink: 0; position: relative; z-index: 1; justify-self: end; display: flex; align-items: center; gap: 10px; }
.mb-lp-topbar3 .mb-btn { padding: 13px 26px; font-size: .86rem; white-space: nowrap; box-shadow: 0 7px 18px -5px rgba(122,42,46,.5); }
/* Libellé du bouton don : version courte sur mobile (place très limitée dès
   qu'un 2e bouton s'ajoute), version complète ("Oui, je donne") sur
   desktop/tablette où la place ne manque pas. */
.mb-lp-topbar3-give-short { display: none; }
/* Sélecteurs volontairement "sur-spécifiques" (.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa,
   4 classes) : un simple ".mb-lp-topbar3-wa" (1 classe) perdait systématiquement
   face à ".mb-lp-topbar3 .mb-btn" (2 classes) ci-dessus et à ses variantes
   redéclarées dans les @media plus bas — peu importe l'ordre dans le fichier,
   la spécificité CSS tranche avant l'ordre. Bug réel trouvé en vérification :
   le bouton WhatsApp gardait le padding du bouton "Oui, je donne" et les deux
   boutons ensemble débordaient massivement (jusqu'à 86px) sur mobile. */
.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa { padding: 10px 16px; box-shadow: none; background: rgba(255,255,255,.5); }
.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa:hover { box-shadow: 0 4px 12px -4px rgba(122,42,46,.3); }
/* 04/09 (v3) — demande explicite : coder le bouton WhatsApp dans SA couleur
   de marque, pour l'affordance immédiate (reconnaissance instantanée d'un
   canal tiers connu, prime sur la pureté chromatique de la charte — cas
   d'exception assumé). Sur desktop, où le libellé texte "WhatsApp" lève déjà
   l'ambiguïté, on reste sobre : seul le pictogramme repose sur un médaillon
   vert pastel (clin d'œil, pas un aplat) — le contour du bouton reste dans
   la charte (bordeaux). Sur mobile/tablette (icône seule, cf. @media plus
   bas), le bouton devient entièrement vert — là, la couleur EST le seul
   repère disponible pour l'identifier. */
.mb-lp-topbar3-wa-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: rgba(37,211,102,.16);
	color: #1da851;
}
.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa .mb-lp-topbar3-wa-icon > svg.mb-icon-svg { width: 16px; height: 16px; }

/* 05/09 — variante "corp" de la topbar, RÉSERVÉE à /dons/entreprises
   (classe modificatrice ajoutée en plus de .mb-lp-topbar3, jamais utilisée
   sur /dons/diaspora) : demande explicite de différencier visuellement les
   2 landing pages au premier coup d'œil, en partant de la topbar. Choix
   retenu parmi 4 variantes testées (marine sombre / bordeaux sombre / ivoire
   à accents marine / anthracite premium) : "Marine Corporate" — fond bleu
   marine (déjà une couleur de la charte, cf. --mb-marine) au lieu de
   l'ivoire clair, accents or inchangés. Sélectionné pour la connotation
   "institutionnel/B2B" du bleu marine (banques, cabinets de conseil), tout
   en restant dans les 4 couleurs approuvées — la structure, les tailles et
   tous les paliers responsive restent ceux de .mb-lp-topbar3 (non dupliqués
   ici, seules les couleurs sont redéfinies). Sélecteurs à 2 classes
   (.mb-lp-topbar3.mb-lp-topbar3-corp, .mb-lp-topbar3-corp .xxx) : suffisant
   pour l'emporter sur les règles à 1 classe ci-dessus sans avoir besoin de
   !important. */
.mb-lp-topbar3.mb-lp-topbar3-corp {
	background: linear-gradient(100deg, var(--mb-marine) 0%, #262c4a 100%);
	border-bottom: 1px solid rgba(201,162,75,.55);
}
.mb-lp-topbar3-corp::before { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)); }
.mb-lp-topbar3-corp .mb-lp-topbar3-name { color: var(--mb-or-clair); border-left-color: rgba(201,162,75,.4); text-shadow: none; }
.mb-lp-topbar3-corp .mb-lp-topbar3-count-label { color: var(--mb-or-clair); }
/* 05/09 (v2) — compteur "Digital LED" : demande explicite d'un nouveau
   design pour le compteur (3 pistes proposées — Digital LED / Badges
   Segmentés / Minimal Inline — celle-ci retenue : tient dans la même
   hauteur que l'ancien compteur, donc aucun ajustement de la barre requis,
   et l'effet "horloge digitale d'échéance" renforce le message d'urgence
   déjà présent dans le texte). Fond quasi-noir, chiffres monospace dorés
   avec léger halo, VRAIS séparateurs ":" (nouveaux éléments
   .mb-lp-topbar3-count-sep insérés dans le HTML entre les unités,
   cf. build-dons-entreprises.php) plutôt que les traits fins d'origine —
   ceux-ci sont donc masqués ici (::after supprimé pour ce variant). */
.mb-lp-topbar3-corp .mb-lp-topbar3-count {
	background: #0d0f18;
	border-color: rgba(201,162,75,.55);
	box-shadow: inset 0 0 10px rgba(0,0,0,.6);
}
.mb-lp-topbar3-corp .mb-lp-topbar3-unit strong { font-family: 'Courier New', Courier, monospace; color: #F5C451; text-shadow: 0 0 6px rgba(245,196,81,.45); }
.mb-lp-topbar3-corp .mb-lp-topbar3-unit span { color: #8b90ab; opacity: 1; }
.mb-lp-topbar3-corp .mb-lp-topbar3-unit:not(:last-child)::after { display: none; }
.mb-lp-topbar3-count-sep { display: none; }
.mb-lp-topbar3-corp .mb-lp-topbar3-count-sep {
	display: inline-flex; align-items: center; justify-content: center; align-self: center;
	color: #F5C451; font-family: 'Courier New', Courier, monospace; font-weight: 700;
	font-size: 1.05rem; opacity: .55; padding: 0 1px; text-shadow: 0 0 6px rgba(245,196,81,.4);
}
.mb-lp-topbar3-corp .mb-btn.mb-lp-topbar3-wa { border-color: var(--mb-or); color: var(--mb-or-clair); background: rgba(255,255,255,.06); }
.mb-lp-topbar3-corp .mb-btn.mb-lp-topbar3-wa:hover { background: rgba(255,255,255,.14); }
.mb-lp-topbar3-corp .mb-btn-primary { background: linear-gradient(100deg, var(--mb-or), var(--mb-or-clair)); color: var(--mb-marine); }
.mb-lp-topbar3-corp .mb-btn-primary:hover { color: var(--mb-marine); }
/* Saut de ligne explicite entre "Devenir" et "partenaire" (cf. @media
   ci-dessous) : masqué par défaut sur desktop, où le libellé tient sur une
   seule ligne — voir le bloc mobile plus bas pour la raison de ce choix. */
.mb-lp-topbar3-corp .mb-lp-topbar3-give-br { display: none; }

/* Rattrapage d'espace : posé sur le hero (premier bloc après la barre fixe)
   plutôt que sur un div-espaceur séparé — cf. note en tête de bloc.
   04/09 — badge "kicker" jugé trop collé à la top bar SUR PC (barre ~90px de
   haut, padding-top ne laissait qu'~2px d'écart réel) : augmenté pour créer
   une respiration visible mais raisonnable (demande explicite : "pas
   exagéré"). Uniquement ce palier desktop — les paliers ≤900/≤600/≤400px
   ci-dessous ont déjà leur propre valeur (114px), non modifiée ici. */
.mb-lp-hero-under-topbar { padding-top: 128px; }

@media (max-width: 900px) {
	/* Palier "tablette / petit écran" — taille INCHANGÉE depuis la toute
	   première version de cette barre (celle déjà validée) : l'agrandissement
	   demandé par l'utilisateur va exclusivement dans le palier téléphone
	   ci-dessous (≤600px), PAS ici — une largeur de navigateur entre 600 et
	   900px reste un cas "desktop/tablette" pour l'utilisateur, elle ne doit
	   surtout pas hériter des tailles agrandies. */
	.mb-lp-topbar3-inner { padding: 8px 18px; min-height: 92px; gap: 10px; }
	.mb-lp-topbar3-brand { min-width: 74px; }
	.mb-lp-topbar3-brand img { height: 58px; }
	.mb-lp-topbar3-name { display: none; }
	.mb-lp-topbar3-count-label { font-size: .56rem; }
	.mb-lp-topbar3-count-wrap { gap: 3px; }
	.mb-lp-topbar3-unit { padding: 3px 7px; }
	.mb-lp-topbar3-unit strong { font-size: 1rem; }
	.mb-lp-topbar3-unit span { font-size: .48rem; }
	.mb-lp-topbar3 .mb-btn { padding: 10px 14px; font-size: .74rem; }
	/* 04/09 — 2e bouton (WhatsApp) : sur mobile/tablette, la place manque pour
	   un libellé texte en plus du bouton "Oui, je donne" — le bouton devient
	   une pastille ronde, icône seule (universellement reconnaissable). */
	.mb-lp-topbar3-cta { gap: 6px; }
	/* Icône seule ⇒ le vert de marque WhatsApp devient le seul repère visuel
	   pour identifier ce bouton (plus de libellé texte pour lever le doute) :
	   pastille pleine, couleur officielle #25D366, icône blanche dessus. */
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa { padding: 8px; border-radius: 50%; background: #25d366; border-color: #25d366; box-shadow: 0 3px 10px -3px rgba(37,211,102,.6); }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa:hover { background: #1da851; border-color: #1da851; box-shadow: 0 4px 12px -3px rgba(37,211,102,.7); }
	.mb-lp-topbar3-wa-label { display: none; }
	.mb-lp-topbar3-wa-icon { width: auto; height: auto; background: transparent; color: #fff; }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa .mb-lp-topbar3-wa-icon > svg.mb-icon-svg { width: 15px; height: 15px; }
	/* Libellé du bouton don raccourci dès qu'on passe à 2 boutons sur mobile. */
	.mb-lp-topbar3-give-full { display: none; }
	.mb-lp-topbar3-give-short { display: inline; }
	/* 04/09 — badge "kicker" jugé trop collé à la top bar sur mobile (7px
	   d'écart mesuré) : padding-top augmenté légèrement (+14px) pour créer
	   une vraie respiration, sans excès (demande explicite : "l'écart ne
	   doit pas être trop grand aussi"). Uniquement les paliers mobile. */
	.mb-lp-hero-under-topbar { padding-top: 114px; }
}
@media (max-width: 600px) {
	/* Palier TÉLÉPHONE MOYEN/GRAND (401-600px, v15) — agrandi par rapport au
	   palier tablette, à la demande explicite ("augmente... sur mobile
	   uniquement"). IMPORTANT (bug réel trouvé en vérification, corrigé
	   ici) : cette règle doit rester valable jusqu'à 401px, PAS seulement à
	   600px — à 401px il y a presque aussi peu de place qu'à 320px, donc
	   des tailles pensées pour "600px de large" débordaient en réalité,
	   poussant le bouton CTA hors champ (invisible) dès 412px. Les tailles
	   ci-dessous sont dimensionnées pour tenir dès 401px. En dessous de
	   400px (palier suivant), on repasse à des tailles plus modestes,
	   faute de place. */
	.mb-lp-topbar3-inner { padding: 6px 4px; gap: 1px; }
	/* Taille du logo VOLONTAIREMENT fixe (demande explicite : ne pas le
	   réduire davantage à mesure que l'écran rétrécit). min-width explicite
	   nécessaire : sans lui, la grille écrase le logo sous contrainte
	   d'espace (bug réel trouvé en vérification à 320px). */
	.mb-lp-topbar3-brand { min-width: 85px; }
	.mb-lp-topbar3-brand img { height: 66px; }
	/* 04/09 — phrase d'annonce allongée ("Cette phase clôture dans" au lieu de
	   "Clôture dans") à la demande explicite : ce texte, plus long, devenait
	   PLUS LARGE que le compteur lui-même (mesuré : 206.9px contre 186.8px),
	   ce qui élargissait toute la colonne centrale de la grille et repoussait
	   le CTA hors champ (bug réel vérifié à 401-412px). Fix : police réduite
	   ET letter-spacing resserré pour que la phrase reste plus étroite que
	   le compteur.
	   05/09 — jugée "presque illisible", puis 2 tentatives d'agrandissement
	   (2 lignes, puis bandeau pleine largeur hors de la grille) toutes deux
	   rejetées : la 1ère cassait la ligne unique demandée, la 2de cassait le
	   centrage vertical logo/phrase+compteur/CTA en sortant la phrase de sa
	   colonne (signalé "plus bon du tout"). Retour à la structure D'ORIGINE
	   (phrase dans la même colonne flex que le compteur, centrée avec lui
	   comme un seul bloc, align-items:center hérité de la règle de base —
	   AUCUNE surcharge ici) : c'est cette structure qui centre correctement
	   logo/bloc phrase+compteur/CTA les uns par rapport aux autres. Seule la
	   taille de police monte, au maximum qui tient sur une ligne sans
	   repousser le CTA — mesuré empiriquement à ce palier (401px, cas le
	   plus étroit) : .68rem passe tout juste (marge +2.6px), .70rem déborde
	   déjà (-2.7px). */
	.mb-lp-topbar3-count-label { font-size: .68rem; letter-spacing: .015em; }
	.mb-lp-topbar3-count-wrap { gap: 3px; }
	.mb-lp-topbar3-count { padding: 5px 4px; }
	/* Largeur des unités du compteur légèrement libérée (demande explicite :
	   "trop compressé") — padding horizontal augmenté de 5px à 6px. */
	.mb-lp-topbar3-unit { padding: 3px 6px; }
	.mb-lp-topbar3-unit strong { font-size: 1.18rem; }
	.mb-lp-topbar3-unit span { font-size: .52rem; }
	/* CTA légèrement agrandi (demande explicite), lui seul cette fois. */
	.mb-lp-topbar3 .mb-btn { padding: 10px 11px; font-size: .89rem; }
	/* 04/09 (v2) — le bouton don écrasé horizontalement pour loger le 2e
	   bouton (WhatsApp) à côté était devenu illisible (demande explicite :
	   "pratiquement illisible" sur mobile). Correction : les 2 boutons sont
	   EMPILÉS verticalement au lieu de côte à côte — la colonne CTA n'a
	   alors besoin que de la largeur du plus large des deux, ce qui libère
	   une bonne marge horizontale pour redonner au bouton don une taille de
	   police confortable. Ce n'est pas gratuit côté hauteur : vérifié que la
	   pile des 2 boutons reste plus courte que le logo (66px) qui fixe déjà
	   la hauteur de la barre — donc aucune épaisseur supplémentaire. */
	.mb-lp-topbar3-cta { flex-direction: column; gap: 4px; }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa { padding: 5px; }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa .mb-lp-topbar3-wa-icon > svg.mb-icon-svg { width: 14px; height: 14px; }
	.mb-lp-topbar3-cta .mb-btn:not(.mb-lp-topbar3-wa) { padding: 8px 12px; font-size: .84rem; }
	/* 04/09 — badge "kicker" jugé trop collé à la top bar sur mobile (7px
	   d'écart mesuré) : padding-top augmenté légèrement (+14px) pour créer
	   une vraie respiration, sans excès (demande explicite : "l'écart ne
	   doit pas être trop grand aussi"). Uniquement les paliers mobile. */
	.mb-lp-hero-under-topbar { padding-top: 114px; }
}
@media (max-width: 400px) {
	/* Palier PETIT TÉLÉPHONE (≤400px, jusqu'à 320px) — moins de place que
	   ci-dessus : augmentation plus modeste par rapport au palier tablette
	   d'origine, mais réelle, et surtout vérifiée SANS débordement à 320px
	   (le cas le plus étroit visé — le bouton CTA y était auparavant poussé
	   hors champ quand on reprenait les tailles du palier ≤600px ci-dessus,
	   pensées pour plus de place). */
	/* 04/09 — même raison qu'au palier ≤600px ci-dessus : la phrase allongée
	   dépassait la largeur du compteur (153.2px contre 135.9px) et débordait
	   le CTA hors champ à 320px. Police encore réduite ici, palier le plus
	   étroit.
	   05/09 — 2 tentatives d'agrandissement rejetées (2 lignes, puis bandeau
	   hors grille qui cassait le centrage logo/phrase+compteur/CTA) — retour
	   à la structure d'origine (voir palier ≤600px ci-dessus pour le détail).
	   Taille portée au maximum qui tient sur une ligne sans déborder à ce
	   palier (320px, cas le plus étroit) : .50rem passe tout juste (marge
	   +2.3px), .51rem déborde déjà (-0.3px). Gain modeste (.49→.50rem) mais
	   c'est le vrai plafond disponible à cette largeur avec cette structure. */
	.mb-lp-topbar3-inner { padding: 7px 1px; gap: 0px; }
	.mb-lp-topbar3-count-label { font-size: .50rem; letter-spacing: .005em; }
	.mb-lp-topbar3-count-wrap { gap: 3px; }
	.mb-lp-topbar3-count { padding: 4px 2px; }
	/* Largeur des unités du compteur légèrement libérée (demande explicite :
	   "trop compressé") — padding horizontal augmenté de 2px à 3px. */
	.mb-lp-topbar3-unit { padding: 2px 3px; }
	.mb-lp-topbar3-unit strong { font-size: .95rem; }
	.mb-lp-topbar3-unit span { font-size: .45rem; }
	/* CTA légèrement agrandi (demande explicite), lui seul cette fois. */
	.mb-lp-topbar3 .mb-btn { padding: 7px 7px; font-size: .71rem; }
	/* 04/09 (v2) — même correction qu'au palier ≤600px ci-dessus : boutons
	   empilés (au lieu de côte à côte) pour rendre au bouton don une taille
	   lisible. Palier le plus étroit (jusqu'à 320px) : un cran plus modeste
	   que ≤600px, mais nettement plus grand qu'avant (was .54rem/5px). */
	.mb-lp-topbar3-cta { flex-direction: column; gap: 2px; }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa { padding: 4px; }
	.mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa .mb-lp-topbar3-wa-icon > svg.mb-icon-svg { width: 13px; height: 13px; }
	/* 04/09 — libellé "Je donne" (au lieu de "Donner") demandé pour mobile ET
	   tablette : légèrement plus long, padding/police réajustés pour tenir
	   sans déborder au palier le plus étroit (320px). */
	.mb-lp-topbar3-cta .mb-btn:not(.mb-lp-topbar3-wa) { padding: 7px 7px; font-size: .71rem; }
	/* 04/09 — badge "kicker" jugé trop collé à la top bar sur mobile (7px
	   d'écart mesuré) : padding-top augmenté légèrement (+14px) pour créer
	   une vraie respiration, sans excès (demande explicite : "l'écart ne
	   doit pas être trop grand aussi"). Uniquement les paliers mobile. */
	.mb-lp-hero-under-topbar { padding-top: 114px; }
}

/* 05/09 — CTA mobile de la topbar "corp" (entreprises UNIQUEMENT, via
   .mb-lp-topbar3-corp — /dons/diaspora n'a pas cette classe, non concerné) :
   demande explicite —
   1) le bouton WhatsApp de la topbar disparaît sur mobile/tablette. Rien
      n'est perdu : le widget WhatsApp flottant (présent sur toute la page,
      cf. bulle ronde en bas à droite) reste le canal de contact WhatsApp.
   2) l'espace libéré profite à un unique bouton "Devenir partenaire", plus
      haut, sur 2 lignes ("Devenir" / "partenaire" — saut de ligne explicite
      via <br class="mb-lp-topbar3-give-br">, masqué par défaut ci-dessus,
      réactivé uniquement ici) — remplace le libellé court "Partenaire"
      utilisé jusqu'ici en dessous de 900px sur cette page.
   Un seul palier (≤900px) suffit : les paliers plus étroits (≤600/≤400
   ci-dessus) en héritent par cascade, aucune redéclaration nécessaire.
   Sélecteurs à 3-4 classes (.mb-lp-topbar3-corp .mb-lp-topbar3-cta ...) :
   même logique qu'au 04/09 plus haut — nécessaire pour l'emporter sur les
   règles 2-3 classes déjà posées aux paliers ≤900/≤600/≤400 ci-dessus (bloc
   placé APRÈS elles dans le fichier, donc gagne aussi à spécificité égale). */
@media (max-width: 900px) {
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-btn.mb-lp-topbar3-wa { display: none; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-lp-topbar3-give-full { display: inline; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-lp-topbar3-give-short { display: none; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-give-br { display: block; }
	/* Pas de min-width ni de padding généreux ici (contrairement à un 1er
	   essai) : bug réel trouvé en vérification à 320px — le budget de
	   largeur restant pour cette colonne, une fois logo + compteur casés,
	   est très serré (~90px à ce palier) ; un bouton trop large y débordait
	   du viewport. Tailles ci-dessous mesurées pour tenir dès 320px tout en
	   restant nettement plus haut que l'ancien bouton 1 ligne. */
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-btn-primary {
		white-space: normal; text-align: center; line-height: 1.25;
		padding: 12px 12px; font-size: .74rem;
	}
	/* Séparateurs ":" du compteur LED resserrés en dessous de 900px — même
	   contrainte de budget de largeur qu'au bouton ci-dessus (colonne
	   centrale de la grille très serrée à 320px) : police et marges réduites
	   pour ne pas ajouter d'encombrement inutile à côté des 4 unités déjà
	   compressées à ce palier par les règles existantes (::after ci-dessus,
	   non liées à .mb-lp-topbar3-corp). */
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-sep { font-size: .82rem; padding: 0; }
	/* 05/09 (v3) — demande explicite : agrandir légèrement la phrase "Cette
	   phase clôture dans" SUR MOBILE UNIQUEMENT, tout en restant sur une
	   seule ligne (déjà garanti par white-space:nowrap sur .count-label,
	   hérité de la règle de base — non touché ici). Entreprises UNIQUEMENT
	   (.mb-lp-topbar3-corp), au-dessus de la valeur partagée avec diaspora
	   (.56rem à ce palier). */
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-label { font-size: .60rem; }
	/* 07/09 — 2e passe (demande explicite) : bouton CTA "Devenir partenaire"
	   jugé trop épais → épaisseur verticale réduite (12px→8px de padding
	   haut/bas ; largeur horizontale inchangée). Phrase "Cette phase clôture
	   dans" agrandie encore un cran (.60→.64rem), toujours sur une seule
	   ligne (white-space:nowrap hérité, non touché) — marge de ~18px vérifiée
	   sans débordement à 900px ET 601px (bornes de ce palier, cas le plus
	   large donc le moins contraint : aucun risque ici, contrairement aux
	   paliers plus étroits ci-dessous). */
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-btn-primary { padding: 8px 12px; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-label { font-size: .64rem; }
}
@media (max-width: 600px) {
	/* Palier 401-600px : même demande, au-dessus de la valeur partagée avec
	   diaspora à ce palier (.68rem).
	   07/09 — 2e passe : agrandie encore (.72→.76rem) — marge de ~4px
	   vérifiée sans débordement aux 2 bornes de ce palier (600px ET 401px,
	   le cas le plus étroit) via getBoundingClientRect sur le bouton CTA
	   (padding/police du bouton hérités du palier ≤900 ci-dessus, non
	   redéclarés ici). */
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-label { font-size: .76rem; }
}
@media (max-width: 400px) {
	/* Palier ≤400px (jusqu'à 320px) : même demande, au-dessus de la valeur
	   partagée avec diaspora à ce palier (.50rem).
	   05/09 — bug réel trouvé en vérification à 320px EN PRÉPARANT ce
	   changement (préexistant, pas causé par l'agrandissement de la phrase
	   ci-dessous) : le bouton "Devenir partenaire" débordait déjà du
	   viewport de ~14px (mesuré via getBoundingClientRect — le
	   overflow-x:clip global sur html/body masque ce dépassement sans
	   scrollbar, donc invisible aux vérifications précédentes qui ne
	   testaient que scrollWidth). Cause : les nouveaux séparateurs ":" du
	   compteur LED (de vrais éléments en flux, contrairement à l'ancien
	   trait ::after en position:absolute qui ne consommait aucune largeur)
	   ont réduit le budget restant pour le bouton. Corrigé ici en resserrant
	   encore les séparateurs et le padding du bouton à CE palier précis —
	   revérifié ensuite sans débordement (cf. rapport de vérification).
	   07/09 — 2e passe (demande explicite : bouton moins épais + phrase plus
	   grande) : 1re tentative (.58rem phrase, 8px/7px bouton, police bouton
	   inchangée à .74rem) débordait de ~9px à 320px — bug réel trouvé en
	   revérifiant avec getBoundingClientRect (pas seulement scrollWidth,
	   piège déjà connu ci-dessus). Cause : à ce palier le budget largeur de
	   la colonne CTA est fixé par une grille 3 colonnes 1fr/auto/1fr — agrandir
	   la phrase élargit la colonne centrale "auto" et réduit d'autant celle du
	   bouton, qui ne peut pas descendre sous sa largeur de contenu minimale.
	   Corrigé en réduisant aussi la police du bouton (.74→.70rem) et son
	   padding horizontal (7→6px) pour lui redonner de la marge : phrase
	   .54→.56rem (gain réel, plus modeste qu'espéré au départ mais sans
	   débordement), bouton nettement moins épais (12→8px vertical) et un peu
	   moins large (police/padding réduits, mais toujours 2 mots bien lisibles
	   sur 2 lignes). Marge de ~1px vérifiée sans débordement à 320px ET 400px
	   (les 2 bornes de ce palier, le plus étroit) — stable sur plusieurs
	   tailles de police/padding testées autour de ces valeurs, donc pas un
	   cas limite fragile. */
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-label { font-size: .56rem; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-count-sep { font-size: .58rem; }
	.mb-lp-topbar3-corp .mb-lp-topbar3-cta .mb-btn-primary { padding: 8px 6px; font-size: .70rem; }
}

/* ---- Galerie animée des rendus de la maquette (remplace le montage photo
   statique 2×2) — carrousel plein cadre, fond marine "salle d'exposition
   digitale", flèches et pastilles dorées, défilement tactile natif (scroll-
   snap) + autoplay doux en JS, pause au survol/au clic. ---- */
.mb-lp-gallery-section {
	background: linear-gradient(180deg, var(--mb-marine) 0%, #12141f 100%);
	padding: 64px 0;
}
.mb-lp-gallery-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; }
.mb-lp-gallery-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	gap: 0; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
	scrollbar-width: none;
}
.mb-lp-gallery-track::-webkit-scrollbar { display: none; }
.mb-lp-gallery-slide {
	flex: 0 0 100%; scroll-snap-align: start; position: relative;
	aspect-ratio: 16/9; overflow: hidden; background: #000;
}
.mb-lp-gallery-slide img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.02); transition: transform 8s ease;
}
.mb-lp-gallery-slide.is-active img { transform: scale(1.08); }
.mb-lp-gallery-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 14px 20px; font-size: .85rem; font-weight: 600; color: #fff;
	background: linear-gradient(0deg, rgba(0,0,0,.65), transparent);
}
.mb-lp-gallery-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(251,246,236,.92); color: var(--mb-bordeaux-fonce);
	display: flex; align-items: center; justify-content: center;
	border: none; cursor: pointer; z-index: 3;
	box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s ease, background .2s ease;
}
.mb-lp-gallery-arrow:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
.mb-lp-gallery-arrow svg { width: 20px; height: 20px; }
.mb-lp-gallery-prev { left: -8px; }
.mb-lp-gallery-next { right: -8px; }
@media (max-width: 640px) {
	.mb-lp-gallery-prev { left: 6px; }
	.mb-lp-gallery-next { right: 6px; }
	.mb-lp-gallery-arrow { width: 36px; height: 36px; }
}
.mb-lp-gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.mb-lp-gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.mb-lp-gallery-dot.is-active { background: var(--mb-or); transform: scale(1.3); }
.mb-lp-gallery-slide img { cursor: zoom-in; }

/* 06/09 — bloc "galerie" corp (entreprises UNIQUEMENT) : le fond marine de
   cette section est déjà partagé avec diaspora (neutre, pas un accent à
   distinguer) — seuls les petits accents bordeaux (icône des flèches,
   texte du bouton doré) passent en marine pour rester cohérents avec le
   reste de l'identité "entreprises". */
.mb-lp-gallery-section-corp .mb-lp-gallery-arrow { color: var(--mb-marine); }
.mb-lp-gallery-section-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-gallery-section-corp .mb-btn-primary:hover { color: var(--mb-marine); }

/* ---- 04/09 — Lightbox plein écran de la galerie, demandée par
   l'utilisateur : cliquer une image de .mb-lp-gallery-track l'ouvre en
   grand sur un calque qui recouvre toute la page (position:fixed, inset:0),
   avec flèches gauche/droite pour parcourir TOUTES les images de la galerie
   sans revenir à la page. Un seul calque (créé une fois en JS,
   initLpLightbox() dans mb-global.js) réutilisé quelle que soit la galerie
   cliquée. Fermeture : bouton ×, clic sur le fond, ou touche Échap. ---- */
.mb-lp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8,6,8,.95);
	padding: 60px 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease;
}
.mb-lp-lightbox.is-open { opacity: 1; visibility: visible; }
body.mb-lp-lightbox-lock { overflow: hidden; }
.mb-lp-lightbox-figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.mb-lp-lightbox-img {
	max-width: 88vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
	background: #000;
}
.mb-lp-lightbox.is-open .mb-lp-lightbox-img { animation: mb-lp-lightbox-fade .35s ease; }
@keyframes mb-lp-lightbox-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.mb-lp-lightbox-caption {
	margin: 16px 0 0;
	color: rgba(255,255,255,.85);
	font-size: .9rem;
	letter-spacing: .01em;
	text-align: center;
	max-width: 70ch;
}
.mb-lp-lightbox-close,
.mb-lp-lightbox-arrow {
	position: absolute;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.25);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mb-lp-lightbox-close:hover,
.mb-lp-lightbox-arrow:hover { background: rgba(201,162,75,.25); border-color: var(--mb-or); }
.mb-lp-lightbox-close {
	top: 18px; right: 18px;
	width: 44px; height: 44px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
}
.mb-lp-lightbox-arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	border-radius: 50%;
}
.mb-lp-lightbox-arrow:hover { transform: translateY(-50%) scale(1.08); }
.mb-lp-lightbox-arrow svg { width: 24px; height: 24px; }
.mb-lp-lightbox-prev { left: 16px; }
.mb-lp-lightbox-next { right: 16px; }
.mb-lp-lightbox-counter {
	position: absolute;
	top: 22px; left: 24px;
	color: rgba(255,255,255,.6);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
@media (max-width: 640px) {
	.mb-lp-lightbox { padding: 20px 12px; }
	.mb-lp-lightbox-arrow { width: 40px; height: 40px; }
	.mb-lp-lightbox-arrow svg { width: 18px; height: 18px; }
	.mb-lp-lightbox-prev { left: 6px; }
	.mb-lp-lightbox-next { right: 6px; }
	.mb-lp-lightbox-close { top: 10px; right: 10px; }
	.mb-lp-lightbox-counter { top: 14px; left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.mb-lp-lightbox, .mb-lp-lightbox-arrow, .mb-lp-lightbox-close { transition: none; }
	.mb-lp-lightbox.is-open .mb-lp-lightbox-img { animation: none; }
}

/* ---- Sections à fond photo atténué (Fête du Bois, Contact KAPIA) —
   réutilise de vrais rendus en arrière-plan sombre pour varier le
   traitement visuel des zones sans dépendre du seul Elementor
   background_image (peu fiable hors éditeur, cf. bug du hero). Ici la
   photo est un <img> en position normale dans le flux (pas absolute),
   habillée en fond plein cadre via une grille CSS 1×1 qui superpose
   l'image et le contenu dans la même cellule — aucun enfant n'est
   positionné en absolu, donc aucun risque du bug de clipping déjà
   rencontré sur le hero. ---- */
.mb-lp-photosection { display: grid; }
.mb-lp-photosection > * { grid-area: 1 / 1; }
.mb-lp-photosection-bg { width: 100%; height: 100%; object-fit: cover; }
.mb-lp-photosection-overlay {
	background: linear-gradient(120deg, rgba(78,21,25,.93) 0%, rgba(30,34,56,.88) 100%);
	padding: 64px 24px;
}
/* 06/09 — blocs "Fête du Bois" (7) et "Contact" (16) corp (entreprises
   UNIQUEMENT, via .mb-lp-photosection-corp) : ce dégradé mélange déjà
   bordeaux et marine à parts égales — neutre, partagé avec /dons/diaspora,
   pas touché. Seul le texte du bouton doré passe en marine, cohérent avec
   le reste de la page (même logique que la galerie, bloc6). */
.mb-lp-photosection-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-photosection-corp .mb-btn-primary:hover { color: var(--mb-marine); }

/* ---- Bandeau "pont" émotionnel (bordeaux profond, remplace le fond ivoire
   générique pour ce bloc précis) ---- */
.mb-lp-bridge { background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, var(--mb-bordeaux) 100%); padding: 60px 24px; }
.mb-lp-bridge h2, .mb-lp-bridge p { color: #fff; }
.mb-lp-bridge p { color: rgba(255,255,255,.88); }

/* Variante "entreprises" : même structure, dégradé marine/anthracite (au lieu
   du bordeaux chaud) pour rester dans l'identité déjà posée sur cette page
   (topbar, hero, compteur, mot du Roi). */
.mb-lp-bridge-corp { background: linear-gradient(160deg, var(--mb-marine) 0%, #1a1d2e 100%); }
.mb-lp-bridge-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-bridge-corp .mb-btn-primary:hover { color: var(--mb-marine); }

/* ---- Fond "ivoire à motif" léger (pointillé or très discret) pour
   distinguer les zones claires entre elles sans dépendre d'une image ---- */
.mb-lp-ivoire-dot {
	background-color: var(--mb-ivoire);
	background-image: radial-gradient(rgba(201,162,75,.25) 1px, transparent 1px);
	background-size: 18px 18px;
}
/* 05/09 — bloc "Le temps presse" corp (entreprises UNIQUEMENT, via
   .mb-lp-ivoire-dot-corp) : suite de la différenciation — fond ivoire à
   pois dorés gardé tel quel (neutre, fonctionne avec les 2 palettes), mais
   le kicker, le titre et la conclusion ("Sans action...") recolorés en
   marine (ils étaient bordeaux, comme sur diaspora). Médaillon d'icône sur
   chaque carte-problème (.mb-lp-peril-badge) volontairement GARDÉ bordeaux :
   couleur d'alerte/urgence à valeur fonctionnelle, pas un accent de marque —
   universelle sur les 2 pages. .mb-section-title porte !important dans sa
   règle de base (partagée par tout le site) : sélecteur à 2 classes + son
   propre !important nécessaires pour l'emporter proprement, sans toucher à
   la règle globale. */
.mb-lp-ivoire-dot-corp .mb-lp-kicker-dark { color: var(--mb-marine); background: rgba(30,34,56,.08); border-color: rgba(30,34,56,.3); }
.mb-lp-ivoire-dot-corp .mb-section-title { color: var(--mb-marine) !important; }
.mb-lp-ivoire-dot-corp .mb-lp-peril-card h4 { color: var(--mb-marine); }
/* 06/09 — même classe désormais réutilisée aussi par les blocs "4 grades"
   (9) et "formulaire" (11) : titre/kicker en marine comme ci-dessus. Sur le
   bloc 9, le bouton doré de chaque carte grade passe aussi en marine
   (.mb-tier3d-cta) — les couleurs INTERNES des cartes (médaillon, seuil,
   avantages) restent inchangées, composant partagé avec les 5 niveaux de
   /dons/diaspora. */
.mb-lp-ivoire-dot-corp .mb-tier3d-cta .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-ivoire-dot-corp .mb-tier3d-cta .mb-btn-primary:hover { color: var(--mb-marine); }
.mb-lp-outline-corp { border-color: var(--mb-marine); color: var(--mb-marine); }
.mb-lp-outline-corp:hover { background: var(--mb-marine); color: #fff; }

/* 06/09 — bloc "3 piliers" corp (entreprises UNIQUEMENT, via
   .mb-lp-piliers-corp) : suite de la différenciation. Fond ivoire uni
   remplacé par un léger halo marine en haut de section (discret, ne
   perturbe pas la lisibilité des 3 médaillons bordeaux/marine/or déjà en
   place — INCHANGÉS, car ils représentent les 3 piliers réels et universels
   du projet). Titre recoloré en marine comme les autres blocs de la page. */
.mb-lp-piliers-corp {
	background: radial-gradient(ellipse at 50% 0%, rgba(30,34,56,.07) 0%, transparent 62%), var(--mb-ivoire);
}
.mb-lp-piliers-corp .mb-section-title { color: var(--mb-marine) !important; }

/* ---- Cartes "3D" détaillées des 5 niveaux — médaille en relief, bordure
   dorée, ombres superposées, léger effet de bascule au survol. ---- */
.mb-tier3d-list { display: flex; flex-direction: column; gap: 28px; max-width: 920px; margin: 0 auto; }
.mb-tier3d {
	position: relative;
	background: linear-gradient(165deg, #fff 0%, #fdfaf1 100%);
	border-radius: 18px;
	padding: 32px 30px 28px;
	box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 22px 44px -22px rgba(78,21,25,.35), 0 0 0 1px rgba(201,162,75,.35);
	transition: box-shadow .35s ease;
}
/* 05/09 — le hover 3D (rotateX + translateY) sur toute la carte faisait
   bouger la carte au survol du bouton situé près de son bord bas : le
   décalage sortait le curseur de la zone (au moins par endroits, sous
   l'effet de rotateX), la carte revenait à sa position d'origine, le
   curseur se retrouvait de nouveau dedans, hover se redéclenchait — d'où
   le "ça vibre" et les clics qui n'aboutissaient pas systématiquement
   (mousedown et mouseup n'atterrissaient plus sur le même élément stable).
   Remplacé par un simple changement d'ombre : plus de mouvement/rotation
   de la carte, donc plus aucun risque géométrique de ce type — fiable à
   coup sûr sur PC (survol) et mobile (tap, qui peut aussi déclencher :hover
   brièvement sur certains navigateurs). */
.mb-tier3d:hover {
	box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 32px 56px -20px rgba(78,21,25,.42), 0 0 0 1px rgba(201,162,75,.6);
}
.mb-tier3d.is-recommended { box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 24px 48px -20px rgba(201,162,75,.5), 0 0 0 2px var(--mb-or); }
.mb-tier3d-ribbon {
	position: absolute; top: -14px; left: 32px;
	background: linear-gradient(135deg, var(--mb-or) 0%, #b6883a 100%);
	color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.mb-tier3d-head { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
/* 04/09 — refonte demandée : la boule "effet 3D" était identique (dégradé
   or) pour les 5 niveaux ET affichait un émoji brut (⭐🥇💎🏆), jugée moche
   par l'utilisateur — l'émoji tranchait mal avec le rendu vectoriel du
   reste du site. Remplacée par une VRAIE icône SVG maison (mb_icon_svg,
   même bibliothèque que partout ailleurs — star-1/star-2/medal/diamond/
   trophy, déjà le mapping validé pour ces 5 niveaux sur l'accueil, cf.
   $niveaux2 dans build-accueil.php) + une couleur DIFFÉRENTE par niveau
   (dégradé "sphère" propre à chacun, dans les 4 couleurs de la charte —
   bordeaux, or, marine, ivoire — plus leurs nuances déjà utilisées ailleurs
   dans ce fichier) pour mieux distinguer et valoriser chaque niveau. L'or
   plein est désormais réservé au seul niveau Fondateur (le plus prestigieux)
   au lieu d'être partagé par les 5. */
/* 04/09 (quater) — retour utilisateur : les icônes SVG ligne (mono-trait)
   étaient jugées trop plates — demande explicite de revenir aux émoji
   d'origine (⭐🥇💎🏆), au rendu plus "réaliste"/photo (dégradés, reliefs
   propres à l'émoji natif), tout en conservant la sphère ivoire+liseré or
   commune aux 5 niveaux (cf. commentaire au-dessus de $niveaux). font-size
   restauré pour ces émoji (les icônes SVG, elles, se dimensionnaient via
   .mb-icon-svg ci-dessous — classe désormais inutilisée ici mais laissée
   au cas où un usage SVG reviendrait). */
.mb-tier3d-medal {
	flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
	box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.25);
	border: 2px solid rgba(255,255,255,.6);
	color: var(--mb-or-clair);
}
.mb-tier3d-medal .mb-icon-svg { width: 30px; height: 30px; }
/* 05/09 — niveau "Soutien" : 2 étoiles (⭐⭐) au lieu d'un seul symbole. À
   1.9rem (taille des autres niveaux, 1 seul symbole), les 2 étoiles côte à
   côte débordent/se collent dans la sphère de 72px. Réduit légèrement +
   écarte un peu, sans que chaque étoile paraisse beaucoup plus petite que
   celle des autres niveaux. */
.mb-tier3d-medal-multi { font-size: 1.5rem; letter-spacing: 2px; }
.mb-tier3d-medal-ivoire {
	background: radial-gradient(circle at 32% 28%, #ffffff 0%, var(--mb-ivoire) 55%, var(--mb-or-clair) 100%);
	border-color: var(--mb-or);
	color: var(--mb-bordeaux);
}
.mb-tier3d-medal-bordeaux { background: radial-gradient(circle at 32% 28%, #c2696d 0%, var(--mb-bordeaux) 45%, var(--mb-bordeaux-fonce) 100%); }
.mb-tier3d-medal-marine { background: radial-gradient(circle at 32% 28%, #6b7094 0%, var(--mb-marine) 45%, #0f1120 100%); }
.mb-tier3d-medal-bordeaux-fonce { background: radial-gradient(circle at 32% 28%, #8f3a3f 0%, var(--mb-bordeaux-fonce) 45%, #2c0c10 100%); }
.mb-tier3d-medal-or {
	background: radial-gradient(circle at 32% 28%, #f6e4b0 0%, var(--mb-or) 45%, #96702c 100%);
	color: var(--mb-bordeaux-fonce);
}
.mb-tier3d-headtext h3 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.3rem; margin: 0 0 4px; }
/* 05/09 — le seuil de chaque niveau ("Tout montant" → "1.000.000 FCFA")
   passe en badge léger (fond or très diaphane + liseré fin) : valorisé sans
   devenir un gros badge doré plein comme celui déjà utilisé ailleurs
   (.mb-accordion-seuil) — reste discret à côté du nom du niveau. */
.mb-tier3d-headtext .mb-tier3d-seuil {
	display: inline-block;
	color: var(--mb-bordeaux-fonce);
	font-weight: 700;
	font-size: .82rem;
	background: rgba(201,162,75,.14);
	border: 1px solid rgba(201,162,75,.4);
	padding: 3px 12px;
	border-radius: 999px;
	margin-top: 2px;
}
.mb-tier3d-citation { font-family: var(--mb-font-serif); font-style: italic; color: var(--mb-marine); opacity: .85; margin: 0 0 18px; padding-left: 16px; border-left: 3px solid var(--mb-or); }
.mb-tier3d-cumul { font-size: .84rem; font-weight: 700; color: var(--mb-bordeaux); margin: 0 0 12px; }
.mb-tier3d-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 20px; margin: 0 0 22px; }
@media (max-width: 700px) { .mb-tier3d-benefits { grid-template-columns: 1fr; } }
.mb-tier3d-benefit { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.5; color: var(--mb-marine); }
.mb-tier3d-benefit-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mb-or); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; margin-top: 2px; }
.mb-tier3d-benefit strong { color: var(--mb-bordeaux-fonce); }
.mb-tier3d-cta { display: flex; justify-content: flex-end; }
@media (max-width: 500px) { .mb-tier3d-cta { justify-content: stretch; } .mb-tier3d-cta .mb-btn { width: 100%; text-align: center; } }

/* ---- Fonds unis en classe CSS pure — préférés au réglage "background" du
   container Elementor (nécessite une régénération du cache CSS d'Elementor
   pour apparaître, cf. bug rencontré et documenté sur le hero photo — une
   classe CSS s'applique elle, toujours immédiatement). ---- */
.mb-lp-bordeaux-fonce-bg { background: var(--mb-bordeaux-fonce); color: #fff; padding: 60px 24px; }
.mb-lp-bordeaux-fonce-bg h2 { color: #fff; }
/* 06/09 — bloc "confiance/gouvernance" corp (entreprises UNIQUEMENT) : même
   dégradé marine que le pont émotionnel (.mb-lp-bridge-corp), pour rester
   dans l'identité "Marine Corporate" de la page plutôt que le bordeaux
   foncé de /dons/diaspora. Texte du bouton doré recoloré en marine. */
.mb-lp-bordeaux-fonce-bg-corp { background: linear-gradient(160deg, var(--mb-marine) 0%, #1a1d2e 100%); }
.mb-lp-bordeaux-fonce-bg-corp .mb-btn-primary { color: var(--mb-marine); }
.mb-lp-bordeaux-fonce-bg-corp .mb-btn-primary:hover { color: var(--mb-marine); }
.mb-lp-gold-cream-bg { background: linear-gradient(160deg, #fff 0%, var(--mb-or-clair) 130%); padding: 56px 24px; }
/* 05/09 — zone "Trois étapes, rien de plus" (diaspora) : fond marine dédié
   pour bien la détacher visuellement des zones ivoire/crème qui l'entourent.
   .mb-step est un composant partagé (aussi utilisé sur /contribuer/particuliers/
   et le hub Contribuer) : on ne touche pas ses règles de base, seulement des
   surcharges scopées ici pour que le texte reste lisible sur fond sombre —
   le cercle numéroté (fond bordeaux, chiffre blanc) reste lisible tel quel. */
.mb-lp-steps-bg {
	background: linear-gradient(160deg, var(--mb-marine) 0%, #12141f 100%);
	padding: 60px 24px;
}
.mb-lp-steps-bg .mb-step h4 { color: var(--mb-or-clair); }
.mb-lp-steps-bg .mb-step p { color: rgba(255,255,255,.82); }
/* 05/09 — formulaire de contact fusionné dans la zone photo "Une question
   avant de vous engager ?" : .mb-don-form est un composant partagé (aussi
   utilisé par le formulaire de don) — aucune règle de base modifiée,
   seulement une surcharge scopée pour que les libellés (marine, illisibles
   sur fond sombre) restent lisibles. Les champs (fond blanc) n'ont pas
   besoin d'ajustement. */
.mb-lp-photosection-overlay .mb-don-form label { color: rgba(255,255,255,.92); }

/* 05/09 — zone 5 niveaux (diaspora) : écarts titre→sous-titre et
   sous-titre→cartes resserrés (jugés trop grands). Specificité doublée
   (2 classes) suffit à l'emporter sur .mb-section-title (22px) sans
   !important. */
.mb-section-title.mb-tier3d-heading-tight { margin-bottom: 8px; }

/* ---- 04/09 — "Le projet, en clair" : 6 cadres (au lieu de 4), redessinés
   en relief 3D (même langage visuel que .mb-tier3d plus bas : dégradé
   crème, ombres superposées, bascule au survol) avec des couleurs de
   médaillon qui tournent entre les 3 teintes de la charte (bordeaux/or/
   marine) pour un rendu plus vivant, plutôt qu'un jeu de cartes uniformes. */
.mb-lp-fait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .mb-lp-fait-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mb-lp-fait-grid { grid-template-columns: 1fr; } }
.mb-lp-fait-card {
	position: relative;
	background: linear-gradient(165deg, #fff 0%, #fdfaf1 100%);
	border-radius: 16px;
	padding: 30px 24px 26px;
	text-align: center;
	box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 18px 36px -18px rgba(78,21,25,.32), 0 0 0 1px rgba(201,162,75,.32);
	transition: transform .35s ease, box-shadow .35s ease;
}
.mb-lp-fait-card:hover {
	transform: perspective(900px) rotateX(2deg) translateY(-6px);
	box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 28px 48px -18px rgba(78,21,25,.4), 0 0 0 1px rgba(201,162,75,.58);
}
.mb-lp-fait-medal {
	width: 64px; height: 64px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.7rem;
	margin: 0 auto 16px;
	box-shadow: 0 6px 14px rgba(0,0,0,.24), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.2);
	border: 2px solid rgba(255,255,255,.6);
}
/* Cycle de 3 couleurs sur les 6 médaillons (1=bordeaux, 2=or, 3=marine, puis
   ça se répète) via nth-child, sans dépendre du nombre exact de cartes. */
.mb-lp-fait-card:nth-child(3n+1) .mb-lp-fait-medal { background: radial-gradient(circle at 32% 28%, #c97b7e 0%, var(--mb-bordeaux) 55%, var(--mb-bordeaux-fonce) 100%); }
.mb-lp-fait-card:nth-child(3n+2) .mb-lp-fait-medal { background: radial-gradient(circle at 32% 28%, #f6e4b0 0%, var(--mb-or) 55%, #96702c 100%); }
.mb-lp-fait-card:nth-child(3n+3) .mb-lp-fait-medal { background: radial-gradient(circle at 32% 28%, #6c7ab0 0%, var(--mb-marine) 55%, #12141f 100%); }
.mb-lp-fait-card h4 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.08rem; margin: 0 0 8px; }
/* 05/09 (v2) — section "Le projet, en clair" corp (entreprises UNIQUEMENT,
   .mb-lp-gold-cream-bg-corp) : demande explicite d'une couleur différente
   par titre plutôt qu'un marine uniforme (v1, remplacée) — chaque titre
   reprend maintenant la couleur de SON PROPRE médaillon (même cycle 3n+1/
   3n+2/3n+3 que les médaillons ci-dessus, ligne 4997-4999), pour une
   identité carte-par-carte cohérente. "Or" utilisé en texte (contraste trop
   faible sur fond blanc/crème pour du texte) remplacé par la teinte dorée
   foncée déjà présente dans le dégradé du médaillon correspondant
   (#96702c) plutôt qu'une couleur inventée. */
.mb-lp-gold-cream-bg-corp .mb-lp-fait-card:nth-child(3n+1) h4 { color: var(--mb-bordeaux); }
.mb-lp-gold-cream-bg-corp .mb-lp-fait-card:nth-child(3n+2) h4 { color: #96702c; }
.mb-lp-gold-cream-bg-corp .mb-lp-fait-card:nth-child(3n+3) h4 { color: var(--mb-marine); }
.mb-lp-fait-card p { font-size: .88rem; color: var(--mb-marine); line-height: 1.55; margin: 0; }
/* 2 CTA (don + WhatsApp) en bas de bloc, même doublette que dans le hero —
   fond clair ici : bouton WhatsApp en contour bordeaux (charte), médaillon
   vert pastel autour de l'icône (même exception déjà validée ailleurs). */
.mb-lp-projet-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.mb-lp-projet-cta .mb-btn { display: inline-flex; align-items: center; gap: 10px; }
.mb-lp-projet-wa-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(37,211,102,.16);
	color: #1da851;
}
.mb-lp-projet-wa-icon > svg.mb-icon-svg { width: 15px; height: 15px; }

/* 05/09 — médaillon vert WhatsApp générique (demande explicite : "comme sur
   la top bar" — mêmes valeurs que .mb-lp-topbar3-wa-icon), appliqué à tous
   les CTA WhatsApp de la page qui n'avaient encore que le pictogramme nu
   (couleur héritée du bouton) : reconnaissance immédiate du canal, cohérent
   avec la topbar/le hero/"le projet en clair" qui l'avaient déjà. */
.mb-wa-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(37,211,102,.16);
	color: #1da851;
	margin-right: 2px;
	vertical-align: middle;
}
.mb-wa-badge > svg.mb-icon-svg { width: 15px; height: 15px; }

/* ---- Pied de page V3 — complet et autonome (logo, mission, gouvernance/
   légal, contact direct), sans aucun lien vers le reste du site. ---- */
.mb-lp-footer2 { background: linear-gradient(160deg, var(--mb-marine) 0%, #12141f 100%); padding: 32px 24px 28px; border-top: 3px solid var(--mb-or); }
.mb-lp-footer2-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .mb-lp-footer2-grid { grid-template-columns: 1fr; text-align: center; gap: 32px; } }
.mb-lp-footer2-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
@media (max-width: 800px) { .mb-lp-footer2-brand { justify-content: center; } }
.mb-lp-footer2-brand img { height: 64px; width: auto; display: block; }
/* Le PNG du logo a un padding transparent asymétrique (haut > bas dans le
   fichier source) : centré mathématiquement (align-items:center), le
   bâtiment dessiné paraît décalé vers le bas par rapport au texte à côté —
   ce léger margin-top compense pour un alignement visuel correct. */
.mb-lp-footer2-brand span { font-family: var(--mb-font-serif); color: #fff; font-size: 1.05rem; font-weight: 700; margin-top: 6px; }
.mb-lp-footer2 h4 { color: var(--mb-or-clair); font-family: var(--mb-font-serif); font-size: 1rem; margin: 0 0 14px; letter-spacing: .02em; }
.mb-lp-footer2 p { color: rgba(255,255,255,.78); font-size: .85rem; line-height: 1.65; margin: 0 0 10px; }
.mb-lp-footer2 a { color: var(--mb-or-clair); text-decoration: none; font-weight: 600; }
.mb-lp-footer2 a:hover { text-decoration: underline; }
.mb-lp-footer2-contact { display: flex; flex-direction: column; gap: 6px; }
.mb-lp-footer2-contact a { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 800px) { .mb-lp-footer2-contact a { justify-content: center; } }
/* .mb-icon-svg est dimensionné en % (46%×46%), pensé pour un badge circulaire
   de taille fixe — utilisé nu dans un lien texte, il se dimensionne contre
   une largeur indéfinie et peut s'afficher démesuré (bug déjà rencontré et
   documenté ailleurs sur le site) : enrobage à taille explicite ici. */
.mb-lp-footer2-contact .mb-icon-svg { width: 16px; height: 16px; flex-shrink: 0; }
.mb-lp-footer2-bottom { max-width: 1100px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-size: .78rem; color: rgba(255,255,255,.55); font-style: italic; }

/* 05/09 — pied de page épuré (diaspora) : logo+nom / copyright / mentions
   légales / crédit SMARTWORLD, chacun sur sa ligne, centré, sobre. */
.mb-lp-footer-mini { max-width: 640px; margin: 0 auto; text-align: center; }
.mb-lp-footer-mini .mb-lp-footer2-brand { justify-content: center; margin: 0 0 18px; }
.mb-lp-footer-mini p { margin: 0 0 10px; font-size: .82rem; color: rgba(255,255,255,.72); }
.mb-lp-footer-mini-credit { margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: .74rem !important; color: rgba(255,255,255,.5) !important; font-style: italic; }

/* ---- Pages juridiques autonomes (mentions légales, politique de
   confidentialité) — 05/09. Gabarit Canvas Elementor (pas de header/footer
   du thème) : mise en page "document" simple, centrée, lisible. ---- */
.mb-legal-page { max-width: 780px; margin: 0 auto; padding: 56px 24px 80px; font-family: var(--mb-font-sans); color: var(--mb-marine); line-height: 1.7; }
.mb-legal-back { display: inline-block; margin-bottom: 32px; color: var(--mb-bordeaux); font-weight: 700; text-decoration: none; font-size: .92rem; }
.mb-legal-back:hover { text-decoration: underline; }
.mb-legal-page h1 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 8px; }
.mb-legal-updated { font-size: .82rem; color: var(--mb-marine); opacity: .65; font-style: italic; margin: 0 0 40px; }
.mb-legal-page h2 { font-family: var(--mb-font-serif); color: var(--mb-bordeaux); font-size: 1.25rem; margin: 36px 0 14px; padding-top: 20px; border-top: 1px solid rgba(122,42,46,.12); }
.mb-legal-page h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.mb-legal-page p, .mb-legal-page li { font-size: .96rem; }
.mb-legal-page ul { padding-left: 22px; margin: 0 0 16px; }
.mb-legal-page li { margin-bottom: 8px; }
.mb-legal-page a { color: var(--mb-bordeaux); font-weight: 600; }
.mb-legal-page strong { color: var(--mb-bordeaux-fonce); }

/* ==========================================================================
   07/09 — LANDING /dons/particuliers — identité "-loc" ("Or Communautaire").
   3e identité de landing page PRO, à côté de l'identité par défaut de
   /dons/diaspora ("Ivoire Royal" — topbar/pont/CTA final en bordeaux clair,
   cf. règles de base .mb-lp-bridge/.mb-final-cta/.mb-lp-topbar3 plus haut
   dans ce fichier) et de l'identité "-corp" de /dons/entreprises ("Marine
   Corporate" — cf. blocs .mb-lp-topbar3-corp etc. ci-dessus). Palette
   strictement identique aux 4 couleurs déjà approuvées (bordeaux,
   bordeaux-fonce, or, or-clair, marine, ivoire) : seule leur COMBINAISON change
   — un dégradé chaud bordeaux-fonce → or (au lieu du bordeaux clair uni de
   /dons/diaspora ou du marine froid de /dons/entreprises), évoquant la
   proximité, la chaleur communautaire et la Fête du Bois plutôt que le
   prestige international (diaspora) ou institutionnel (entreprises).
   Sélecteurs à 1 classe seule (comme .mb-lp-bridge-corp, .mb-lp-topbar3-corp
   etc. plus haut) : suffisant pour l'emporter sur les règles de base à
   spécificité égale car ce bloc est physiquement placé APRÈS elles dans le
   fichier — même technique que "-corp", pas de sur-spécification inutile.
   Les teintes très sombres personnalisées (#6b431c, #2b1208) sont des
   nuances dérivées de --mb-or/--mb-bordeaux-fonce pour les dégradés foncés,
   exactement comme "-corp" dérive ses propres #1a1d2e/#0d0f18/#12141f à
   partir de --mb-marine — pas de couleur hors charte.
   Uniquement les zones où une vraie différenciation a du sens (topbar, fond
   du hero, pont émotionnel, CTA final, bloc confiance/gouvernance, textes
   sur fond ivoire à motif, fond des 3 piliers) sont ré-habillées ; le reste
   (bandeau de confiance, galerie, compte à rebours, mot du Roi, mur des
   mécènes, FAQ, contact) reste sur les classes DE BASE partagées, sans
   suffixe — exactement comme /dons/diaspora ne suffixe pas non plus ces
   zones-là (elles sont déjà neutres/partagées entre toutes les landing
   pages), cf. build-dons-particuliers.php.
   ========================================================================== */
.mb-lp-topbar3.mb-lp-topbar3-loc {
	background: linear-gradient(100deg, var(--mb-bordeaux-fonce) 0%, var(--mb-bordeaux) 45%, var(--mb-or) 100%);
	border-bottom: 1px solid rgba(255,255,255,.3);
}
.mb-lp-topbar3-loc::before { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.mb-lp-topbar3-loc .mb-lp-topbar3-name { color: var(--mb-ivoire); border-left-color: rgba(251,246,236,.4); text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mb-lp-topbar3-loc .mb-lp-topbar3-count-label { color: var(--mb-ivoire); }
/* 07/09 — correctif (signalé peu lisible) : .mb-lp-topbar3-unit (chiffre +
   libellé "jours/heures/min/sec") vit à l'intérieur de .mb-lp-topbar3-count,
   la pastille crème/ivoire du compteur (fond clair hérité de la règle de
   base, NON assombri pour "-loc" — contrairement à "-corp" qui, lui,
   assombrit toute la pastille). Un texte ivoire sur cette pastille claire
   était donc quasi invisible (ivoire sur crème). Fix : on garde les teintes
   sombres de la règle de base (déjà celles utilisées par /dons/diaspora sur
   la même pastille claire, où c'est parfaitement lisible), et on renforce
   même le chiffre en bordeaux-fonce (au lieu du bordeaux par défaut) pour
   plus de contraste encore.
   07/09 (v2) — le libellé du dessous ("jours"/"heures"/"min"/"sec"), lui,
   restait sur la règle de base marine à 60% d'opacité : jugé encore "peu
   lisible" une fois comparé de près au chiffre, désormais bien plus sombre
   juste au-dessus. Fix : couleur pleine (opacité 1, plus de transparence)
   et graisse renforcée (700), sur la même teinte bordeaux-fonce que le
   chiffre — cohérent visuellement, et bien plus net sur cette pastille
   claire, à taille de police inchangée. */
.mb-lp-topbar3-loc .mb-lp-topbar3-unit strong { color: var(--mb-bordeaux-fonce); }
.mb-lp-topbar3-loc .mb-lp-topbar3-unit span { color: var(--mb-bordeaux-fonce); opacity: 1; font-weight: 700; }
/* 07/09 (v3) — demande explicite : agrandir légèrement la phrase ("Cette
   phase clôture dans") et le compteur (chiffres + jours/heures/min/sec) SUR
   MOBILE UNIQUEMENT (particuliers UNIQUEMENT, via .mb-lp-topbar3-loc), tout
   en restant sur une seule ligne — même principe déjà appliqué à
   /dons/entreprises (.mb-lp-topbar3-corp .mb-lp-topbar3-count-label
   ci-dessus). Seuls les 2 paliers "vrai mobile" sont concernés (≤600 et
   ≤400px) — PAS le palier ≤900px (tablette), volontairement laissé neutre
   depuis l'origine de cette barre (cf. note plus haut : "une largeur de
   navigateur entre 600 et 900px reste un cas desktop/tablette").
   Marges vérifiées via getBoundingClientRect (jamais scrollWidth seul, cf.
   piège déjà documenté plus haut) au point le plus contraint de chaque
   palier (320px et 401px) : la colonne centrale (auto) de la grille
   1fr/auto/1fr de .mb-lp-topbar3-inner grandit ici de quelques px, absorbés
   par le jeu qui existait déjà entre le logo/le bouton CTA et cette colonne
   (slack mesuré : ~4.5px de chaque côté à 320px, ~44px à 400px) — pas de
   débordement à aucune des 2 bornes. */
@media (max-width: 600px) {
	.mb-lp-topbar3-loc .mb-lp-topbar3-count-label { font-size: .72rem; }
	.mb-lp-topbar3-loc .mb-lp-topbar3-unit strong { font-size: 1.24rem; }
	.mb-lp-topbar3-loc .mb-lp-topbar3-unit span { font-size: .56rem; }
}
@media (max-width: 400px) {
	.mb-lp-topbar3-loc .mb-lp-topbar3-count-label { font-size: .54rem; }
	.mb-lp-topbar3-loc .mb-lp-topbar3-unit strong { font-size: 1rem; }
	.mb-lp-topbar3-loc .mb-lp-topbar3-unit span { font-size: .48rem; }
}
/* Bouton WhatsApp : contour clair (au lieu du contour bordeaux par défaut,
   peu lisible dès que le dégradé devient sombre côté gauche de la barre).
   Uniquement sur desktop/tablette (>900px) : sur mobile, la pastille verte
   de marque WhatsApp (règle de base ci-dessus, @media max-width:900px)
   doit rester identique à /dons/diaspora — cf. override ≤900px plus bas qui
   la restaure explicitement, cette règle générale l'écrasant sinon (posée
   plus bas dans le fichier, donc prioritaire à spécificité égale). */
@media (min-width: 901px) {
	.mb-lp-topbar3-loc .mb-btn.mb-lp-topbar3-wa { border-color: rgba(255,255,255,.65); color: var(--mb-ivoire); background: rgba(255,255,255,.14); }
	.mb-lp-topbar3-loc .mb-btn.mb-lp-topbar3-wa:hover { background: rgba(255,255,255,.24); }
}
/* CTA "Je deviens Mécène" : carte ivoire/blanche (au lieu du bouton doré par
   défaut, qui se fondrait dans le dégradé doré côté droit de cette barre
   précise) — inversion assumée, cohérente avec l'esprit "document/reçu
   officiel" de cette page. */
.mb-lp-topbar3-loc .mb-lp-topbar3-cta .mb-btn-primary { background: linear-gradient(100deg, #fff 0%, var(--mb-ivoire) 100%); color: var(--mb-bordeaux-fonce); box-shadow: 0 7px 18px -5px rgba(43,18,8,.45); }
.mb-lp-topbar3-loc .mb-lp-topbar3-cta .mb-btn-primary:hover { color: var(--mb-bordeaux-fonce); }
/* 07/09 — mobile/tablette (≤900px) : pastille WhatsApp verte de marque
   identique à /dons/diaspora (règle de base @media max-width:900px plus
   haut dans le fichier) — explicitement restaurée ici car sans ce bloc,
   l'override desktop ci-dessus resterait sans objet mais un doute de
   cascade subsiste (ce fichier est chargé tel quel, sans bundler qui
   réordonnerait les media queries) : on fixe donc la couleur sans
   ambiguïté à ce palier plutôt que de compter sur l'absence de règle. */
@media (max-width: 900px) {
	.mb-lp-topbar3-loc .mb-btn.mb-lp-topbar3-wa { background: #25d366; border-color: #25d366; color: #fff; }
	.mb-lp-topbar3-loc .mb-btn.mb-lp-topbar3-wa:hover { background: #1da851; border-color: #1da851; }
}

/* Hero : dégradé de lisibilité chaud (bordeaux → or → brun profond), au lieu
   du bordeaux uni de /dons/diaspora ou du marine froid de /dons/entreprises —
   une bande dorée centrale ("golden hour"), jamais utilisée ailleurs comme
   fond dominant d'une page entière (l'or n'est autrement qu'un simple
   accent, jamais la couleur qui domine une identité de page).
   07/09 — correctif (signalé peu lisible, variable selon la photo du
   diaporama en fond) : la 1re version ci-dessous (commentée) était bien
   plus TRANSPARENTE en haut/au milieu (.34 puis un or clair à seulement
   .52) que celle de diaspora/entreprises (.6 puis .72-.78 au même endroit)
   — cette page utilise 5 vraies photos variées (pas des rendus 3D
   uniformes comme les 2 autres pages), donc un dégradé aussi léger laissait
   la lisibilité du badge/titre/accroche dépendre entièrement de la zone de
   la photo affichée à cet instant (parfois claire, parfois chargée) : pas
   fiable. Fix : dégradé nettement plus opaque sur toute sa hauteur (jamais
   sous .6, comme les 2 autres pages), et la bande "or clair" du milieu
   remplacée par un brun ambré sombre (#6b431c — déjà utilisé ailleurs sur
   cette page pour le pont/CTA final, cf. plus bas) plutôt qu'un or clair à
   faible opacité qui se fondait justement avec le texte doré de l'accroche
   posée dessus (cf. .mb-hero-accroche ci-dessous, sortie du doré pour cette
   raison précise). L'esprit "chaud" reste intact (brun/bordeaux/or sombre),
   seule la fiabilité de lecture change. */
/* 07/09 (v2) — correctif signalé : ce .66 en haut (0%) était TROP sombre une
   fois posé juste sous la topbar (elle-même très sombre à son bord gauche —
   bordeaux-fonce), les 2 se confondaient visuellement en une seule bande
   sombre continue : la topbar semblait "avoir épaissi", plus de frontière
   nette entre elle et la photo du hero. Ramené à .40 (entre l'ancien .34 et
   ce .66) — la frontière redevient nette. Ce n'est plus ce point du
   dégradé qui porte la lisibilité du badge/titre en haut : ce sont
   désormais leurs propres renforts (fond plein du badge, ombre portée du
   titre, ci-dessous) qui s'en chargent, ce point-ci n'avait donc pas besoin
   de rester aussi sombre. Le milieu/bas (45%/100%, sous le badge/titre)
   restent inchangés, c'est bien là qu'était le vrai problème de lisibilité
   d'origine (accroche, sur la bande la plus large de vraies photos). */
.mb-lp-hero-loc::before {
	background: linear-gradient(180deg, rgba(43,18,8,.40) 0%, rgba(107,67,28,.72) 45%, rgba(43,18,8,.95) 100%);
}
/* Badge, titre et accroche : renforcés indépendamment du dégradé ci-dessus
   (ceinture ET bretelles) — un fond de secours propre à chacun plutôt que
   de compter uniquement sur l'assombrissement global, qui reste un dégradé
   PARTAGÉ par toute la largeur/hauteur du hero (une photo très claire par
   endroits pourrait ponctuellement rester tangente). */
.mb-lp-hero-loc .mb-lp-kicker {
	background: rgba(43,18,8,.58); border-color: rgba(201,162,75,.55);
	color: var(--mb-or-clair); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mb-lp-hero-loc .mb-lp-hero-inner h1 { text-shadow: 0 3px 16px rgba(0,0,0,.55), 0 1px 5px rgba(0,0,0,.5); }
/* 07/09 (v2) — 1re version : accroche passée en ivoire, jugée après coup
   trop proche du blanc du titre juste au-dessus (plus de hiérarchie de
   couleur du tout dans le hero → rendu "tout en blanc", moins soigné).
   Le dégradé ::before étant désormais bien plus sombre sur toute sa hauteur
   (cf. plus haut), l'or clair d'origine (déjà utilisé tel quel par défaut
   sur /dons/diaspora, jamais signalé illisible là-bas) redevient lisible
   sans en avoir besoin — seule une ombre portée un peu plus marquée est
   ajoutée en plus, par sécurité (le fond ici reste une vraie photo variable,
   contrairement au rendu 3D fixe de diaspora). Restaure l'accent doré et la
   hiérarchie visuelle (titre blanc → accroche dorée → phrase italique
   blanche) au lieu d'un bloc de texte uniformément blanc. */
.mb-lp-hero-loc .mb-hero-accroche { color: var(--mb-or-clair); text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* Fond ivoire à motif (faits/périls/niveaux) : titres, kicker et pastille
   des cartes péril en bordeaux-fonce (plus profond/chaud que le bordeaux
   clair du fond ivoire par défaut de /dons/diaspora) sur pastille dorée
   plutôt que bordeaux ou marine. */
.mb-lp-ivoire-dot-loc .mb-lp-kicker-dark { color: var(--mb-bordeaux-fonce); background: rgba(201,162,75,.22); border-color: rgba(201,162,75,.6); }
.mb-lp-ivoire-dot-loc .mb-section-title { color: var(--mb-bordeaux-fonce) !important; }
.mb-lp-ivoire-dot-loc .mb-lp-peril-card h4 { color: var(--mb-bordeaux-fonce); }

/* Fond des 3 piliers : blanc par défaut sur /dons/diaspora (aucune classe
   dédiée) — ici, léger lavis doré (cohérent avec le reste de la page) au
   lieu du fond ivoire uni "-corp". */
.mb-lp-piliers-loc { background: linear-gradient(180deg, #fff 0%, rgba(201,162,75,.1) 100%); }
.mb-lp-piliers-loc .mb-section-title { color: var(--mb-bordeaux-fonce) !important; }

/* Pont émotionnel : dégradé chaud or → brun profond (au lieu du bordeaux
   clair par défaut ou du marine "-corp"). */
.mb-lp-bridge-loc { background: linear-gradient(160deg, var(--mb-or) 0%, #6b431c 45%, #2b1208 100%); }

/* Bloc confiance/gouvernance : même dégradé chaud que le pont émotionnel,
   pour rester dans l'identité qui traverse la page (au lieu du bordeaux
   foncé uni par défaut, ou du marine "-corp"). */
.mb-lp-bordeaux-fonce-bg-loc { background: linear-gradient(160deg, var(--mb-or) 0%, #6b431c 45%, #2b1208 100%); }

/* CTA final : même dégradé chaud, avec la même technique de spécificité
   ([class] répété) que "-corp" pour battre la règle Elementor anti-lazyload
   qui neutralise sinon les fonds dégradés au 4ᵉ conteneur d'une page et au-delà. */
.mb-final-cta.mb-final-cta-loc[class][class][class][class][class] { background-image: linear-gradient(160deg, var(--mb-or) 0%, #6b431c 45%, #2b1208 100%) !important; }

/* ==========================================================================
   09/09 — Identité "-notable" ("Sceau Royal"), 4ᵉ landing page /dons/*
   (Élites & Notables), à côté de l'identité par défaut de /dons/diaspora
   ("Ivoire Royal"), de "-corp" (/dons/entreprises, "Marine Corporate") et de
   "-loc" (/dons/particuliers, "Or Communautaire" — cf. blocs ci-dessus).
   Palette strictement identique aux couleurs déjà approuvées (bordeaux,
   bordeaux-fonce, or, or-clair, marine, ivoire) : seule leur COMBINAISON
   change. Contrairement à "-loc" (dégradé CLAIR, or dominant, chaleur
   communautaire), "-notable" reste SOMBRE sur presque toute la page — un
   dégradé bordeaux-fonce → quasi-noir, l'or réservé au texte/aux bordures/
   aux accents plutôt qu'au fond — pour évoquer le sceau royal, le cérémonial,
   la gravité d'un appel personnel du Roi, plutôt que la proximité chaleureuse
   de "-loc" ou le prestige international de l'identité par défaut. Nuances
   sombres personnalisées (#170608, #3d0f13) dérivées de --mb-bordeaux-fonce,
   exactement comme "-loc" dérive #6b431c/#2b1208 de --mb-or/--mb-bordeaux-
   fonce et "-corp" dérive #1a1d2e/#0d0f18/#12141f de --mb-marine — aucune
   couleur hors charte.
   Sélecteurs à 1 classe seule, bloc placé en tout dernier dans ce fichier :
   suffisant pour l'emporter sur les règles de base à spécificité égale
   (cascade), même logique que "-corp"/"-loc" plus haut — aucune sur-
   spécification inutile.
   Leçons déjà apprises sur "-loc" appliquées ICI DÈS LE DÉPART (pas
   redécouvertes une 2e fois) :
   - Le chiffre/libellé du compte à rebours de la topbar vivent dans une
     pastille CLAIRE (crème) même sur cette identité sombre : texte en
     bordeaux-fonce plein, jamais en ivoire (invisible sur fond clair).
   - Le bouton WhatsApp de la topbar redevient vert de marque sur mobile/
     tablette (≤900px), identique aux 3 autres pages — restauré
     explicitement dans sa propre requête média, la règle générale
     "-notable" (desktop) étant posée plus loin dans le fichier.
   - Le dégradé de lisibilité du hero reste MODÉRÉMENT sombre en haut (pas
     au maximum) pour ne pas se confondre visuellement avec la topbar
     (déjà très sombre à son bord gauche) — frontière nette entre les 2.
   - Badge/titre/accroche du hero renforcés individuellement (fond plein du
     badge, ombre portée), et l'accroche reste en or clair (pas en ivoire) :
     la hiérarchie de couleur (titre blanc → accroche dorée) reste visible,
     pas de rendu "tout en blanc".
   - Le dégradé du CTA final reste SOMBRE sur toute sa hauteur (jamais de
     bande claire en haut) : le titre y est en blanc plein imposé par la
     règle de base (.mb-final-cta h2[class]{color:#fff!important}) — une
     bande claire à cet endroit précis rendrait ce texte illisible, comme
     déjà constaté une fois sur "-loc" (gradient à l'origine clair en haut).
   ========================================================================== */
/* 09/09 (v2) — signalé trop proche de "-loc" (même angle 100deg, même
   principe "dégradé sombre → or qui balaie de gauche à droite", seule la
   teinte de départ changeait) : recomposée entièrement. Au lieu d'un
   dégradé qui SE DIRIGE vers l'or, un fond SOMBRE UNI texturé (aucun
   balayage de couleur de gauche à droite) avec l'or réservé à une double
   bordure façon ruban cérémoniel (haut ET bas, pas seulement en bas comme
   les 3 autres) + un fin motif diagonal doré en très faible opacité (même
   technique que .mb-roi-zone::before plus haut dans ce fichier — un
   quadrillage discret, pas une image) : l'esprit "sceau/velours" plutôt que
   "dégradé chaud". Structurellement différente des 3 autres topbars (base
   ivoire→blanc, "-corp" marine→bleu, "-loc" bordeaux→or) : plus aucun
   balayage de couleur ici, une texture sur fond uni. */
.mb-lp-topbar3.mb-lp-topbar3-notable {
	background-color: var(--mb-bordeaux-fonce);
	background-image:
		repeating-linear-gradient(115deg, rgba(201,162,75,.09) 0 2px, transparent 2px 46px),
		linear-gradient(180deg, #2b1015 0%, var(--mb-bordeaux-fonce) 55%, #170608 100%);
	border-top: 3px solid var(--mb-or);
	border-bottom: 3px solid var(--mb-or);
}
.mb-lp-topbar3-notable::before { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); }
.mb-lp-topbar3-notable .mb-lp-topbar3-name { color: var(--mb-ivoire); border-left-color: rgba(251,246,236,.4); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mb-lp-topbar3-notable .mb-lp-topbar3-count-label { color: var(--mb-ivoire); }
/* 09/09 (v3) — 2 correctifs de couleur successifs sur la pastille CLAIRE de
   base jugés encore insuffisants ("il faut trop d'effort pour lire" —
   demande explicite d'une refonte du compteur entier, pas d'un nouvel
   ajustement de teinte). Le vrai problème n'était pas la couleur du texte
   mais le choix de GARDER la pastille claire héritée de la topbar par
   défaut (pensée pour un fond ivoire) sur une identité entièrement sombre :
   un petit rectangle crème au milieu d'une barre sombre texturée reste un
   corps étranger, quel que soit le réglage fin du texte dessus. Refonte
   complète sur le même principe déjà éprouvé pour "-corp" (compteur
   "Digital LED" du entreprises, cf. .mb-lp-topbar3-corp .mb-lp-topbar3-count
   plus haut dans ce fichier) : pastille SOMBRE gravée (au lieu de claire),
   chiffres DORÉS avec léger halo (au lieu de sombres sur clair) — inversion
   complète, pas un correctif. Séparateurs ":" réels (mêmes éléments HTML
   .mb-lp-topbar3-count-sep déjà présents dans le balisage, réutilisés tels
   quels, cf. build-dons-elites-notables.php) plutôt que les traits fins
   d'origine (masqués ici, même technique que "-corp"). Police serif du
   site (pas le monospace "digital" de "-corp", qui appartient à son
   identité "Marine Corporate") : rendu "plaque gravée cérémonielle" plutôt
   que "horloge numérique". */
.mb-lp-topbar3-notable .mb-lp-topbar3-count {
	background: linear-gradient(180deg, #2b1015 0%, #170608 100%);
	border-color: rgba(201,162,75,.6);
	box-shadow: inset 0 0 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.mb-lp-topbar3-notable .mb-lp-topbar3-unit strong { color: var(--mb-or-clair); text-shadow: 0 0 8px rgba(201,162,75,.55); }
.mb-lp-topbar3-notable .mb-lp-topbar3-unit span { color: var(--mb-or-clair); opacity: .75; font-weight: 700; }
.mb-lp-topbar3-notable .mb-lp-topbar3-unit:not(:last-child)::after { display: none; }
.mb-lp-topbar3-notable .mb-lp-topbar3-count-sep {
	display: inline-flex; align-items: center; justify-content: center; align-self: center;
	color: var(--mb-or); font-weight: 700; font-size: 1.05rem; opacity: .6; padding: 0 1px;
	text-shadow: 0 0 6px rgba(201,162,75,.4);
}
@media (min-width: 901px) {
	.mb-lp-topbar3-notable .mb-btn.mb-lp-topbar3-wa { border-color: rgba(201,162,75,.65); color: var(--mb-or-clair); background: rgba(255,255,255,.08); }
	.mb-lp-topbar3-notable .mb-btn.mb-lp-topbar3-wa:hover { background: rgba(255,255,255,.16); }
}
/* CTA doré (au lieu de la carte ivoire/blanche inversée de "-loc") : plus
   besoin d'inverser en clair pour éviter de se fondre dans un fond qui,
   ici, ne devient JAMAIS clair — l'or reste l'accent naturel sur ce fond
   sombre uni, cohérent avec le bouton doré par défaut du reste du site. */
.mb-lp-topbar3-notable .mb-lp-topbar3-cta .mb-btn-primary { background: linear-gradient(100deg, var(--mb-or) 0%, var(--mb-or-clair) 100%); color: var(--mb-bordeaux-fonce); box-shadow: 0 7px 18px -5px rgba(23,6,8,.6); }
.mb-lp-topbar3-notable .mb-lp-topbar3-cta .mb-btn-primary:hover { color: var(--mb-bordeaux-fonce); }
/* 09/09 — demande explicite : agrandir "Cette phase clôture dans" SUR
   MOBILE UNIQUEMENT, sur une seule ligne — même principe et mêmes valeurs
   déjà éprouvées sur "-loc" (particuliers) aux 2 mêmes paliers, cf. plus
   haut dans ce fichier. PAS le palier ≤900px (tablette), volontairement
   neutre comme sur les 3 autres pages. Marges vérifiées via
   document.documentElement.scrollWidth (jamais scrollWidth seul sans
   confirmation — cf. piège déjà documenté plusieurs fois dans ce fichier)
   à 320-414px et 401-600px : aucun débordement réel à aucune des bornes. */
@media (max-width: 600px) {
	.mb-lp-topbar3-notable .mb-lp-topbar3-count-label { font-size: .72rem; }
}
@media (max-width: 400px) {
	.mb-lp-topbar3-notable .mb-lp-topbar3-count-label { font-size: .54rem; }
}
/* Pastille WhatsApp verte de marque restaurée sur mobile/tablette, identique
   aux 3 autres pages (règle générale ci-dessus posée plus loin dans le
   fichier, donc prioritaire à spécificité égale sans cette restauration). */
@media (max-width: 900px) {
	.mb-lp-topbar3-notable .mb-btn.mb-lp-topbar3-wa { background: #25d366; border-color: #25d366; color: #fff; }
	.mb-lp-topbar3-notable .mb-btn.mb-lp-topbar3-wa:hover { background: #1da851; border-color: #1da851; }
}

/* Hero : dégradé bordeaux → quasi-noir (au lieu de l'or de "-loc" ou du
   marine froid de "-corp") — sombre mais modéré en haut (leçon "-loc" :
   éviter la confusion visuelle avec la topbar, déjà très sombre à gauche). */
.mb-lp-hero-notable::before {
	background: linear-gradient(180deg, rgba(23,6,8,.42) 0%, rgba(61,15,19,.75) 45%, rgba(23,6,8,.95) 100%);
}
.mb-lp-hero-notable .mb-lp-kicker {
	background: rgba(23,6,8,.6); border-color: rgba(201,162,75,.55);
	color: var(--mb-or-clair); text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mb-lp-hero-notable .mb-lp-hero-inner h1 { text-shadow: 0 3px 16px rgba(0,0,0,.6), 0 1px 5px rgba(0,0,0,.55); }
.mb-lp-hero-notable .mb-hero-accroche { color: var(--mb-or-clair); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
/* 09/09 — demande explicite : mettre en valeur "Notable, élite, dignitaire
   de Balengou" (qui NOMME le public visé) au sein de l'accroche, plutôt que
   la laisser se fondre dans le reste du paragraphe en or clair uniforme —
   ivoire (plus clair que l'or clair environnant, donc se détache au premier
   coup d'œil) + graisse renforcée. */
.mb-lp-hero-notable .mb-hero-accroche-emphasis { color: var(--mb-ivoire); font-weight: 700; }

/* Fond ivoire à motif (faits/périls/niveaux) : mêmes teintes bordeaux-fonce
   sur pastille dorée que "-loc" (traitement déjà universel/neutre — la vraie
   différenciation de cette page se joue sur les zones sombres ci-dessus/
   dessous, pas ici). */
.mb-lp-ivoire-dot-notable .mb-lp-kicker-dark { color: var(--mb-bordeaux-fonce); background: rgba(201,162,75,.26); border-color: rgba(201,162,75,.6); }
.mb-lp-ivoire-dot-notable .mb-section-title { color: var(--mb-bordeaux-fonce) !important; }
.mb-lp-ivoire-dot-notable .mb-lp-peril-card h4 { color: var(--mb-bordeaux-fonce); }

/* Fond des 3 piliers : léger lavis BORDEAUX (au lieu du lavis doré de
   "-loc") — reste dans la famille sombre de cette identité même sur une
   zone claire. */
.mb-lp-piliers-notable { background: linear-gradient(180deg, #fff 0%, rgba(122,42,46,.07) 100%); }
.mb-lp-piliers-notable .mb-section-title { color: var(--mb-bordeaux-fonce) !important; }

/* Pont émotionnel : dégradé bordeaux-fonce → quasi-noir, SOMBRE sur toute sa
   hauteur (pas de bande claire, contrairement au "or → brun" de "-loc" qui
   avait causé un texte blanc illisible sur fond clair au même endroit sur le
   CTA final — leçon appliquée ici dès le départ). */
.mb-lp-bridge-notable { background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, #3d0f13 50%, #170608 100%); }

/* Bloc confiance/gouvernance : même dégradé sombre que le pont émotionnel. */
.mb-lp-bordeaux-fonce-bg-notable { background: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, #3d0f13 50%, #170608 100%); }

/* CTA final : même dégradé sombre, avec la même technique de spécificité
   ([class] répété) que "-corp"/"-loc" pour battre la règle Elementor
   anti-lazyload. Reste sombre sur toute sa hauteur (cf. note en tête de
   bloc) : le titre y est forcé en blanc par la règle de base
   (.mb-final-cta h2[class]{color:#fff!important}), qui a besoin d'un fond
   sombre partout pour rester lisible. */
.mb-final-cta.mb-final-cta-notable[class][class][class][class][class] { background-image: linear-gradient(160deg, var(--mb-bordeaux-fonce) 0%, #3d0f13 50%, #170608 100%) !important; }

/* ==========================================================================
   05/10 — CLUB DES FONDATEURS (5ᵉ grade, élite) — cartes et sections distinctives,
   jamais mêlées à la grille standard. Palette : marine profond + or (charte du site).
   ========================================================================== */
.mb-club-block { margin: 0 0 28px; padding: 22px 18px 26px; border-radius: 18px; background: radial-gradient(circle at 90% -10%, rgba(201,162,75,.30), rgba(201,162,75,0) 45%), linear-gradient(160deg, #1E2238 0%, #2c1a22 100%); box-shadow: 0 12px 30px rgba(30,34,56,.28); border: 1px solid rgba(201,162,75,.55); }
.mb-club-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; color: #EAD9A0; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.mb-club-title svg { width: 1.3em; height: 1.3em; color: #C9A24B; flex: 0 0 auto; }
.mb-club-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.mb-club-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 18px; border-radius: 14px; background: linear-gradient(180deg, #FBF6EC 0%, #F3E7C6 100%); border: 2px solid #C9A24B; box-shadow: inset 0 0 0 4px rgba(201,162,75,.18), 0 6px 18px rgba(0,0,0,.25); text-align: center; }
.mb-club-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: #1E2238; color: #EAD9A0; font: 700 .68rem Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border: 1px solid #C9A24B; }
.mb-club-logo { display: grid; place-items: center; width: 100%; height: 84px; }
.mb-club-logo img { max-width: 160px; max-height: 70px; object-fit: contain; }
.mb-club-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 700; color: #1E2238; }
.mb-club-meta { font-size: .82rem; color: #566079; }
.mb-accordion-item-elite, .mb-tier3d-elite { border: 2px solid #C9A24B !important; background: linear-gradient(180deg, #FBF6EC 0%, #F3E7C6 100%) !important; box-shadow: 0 10px 26px rgba(201,162,75,.25); }
.mb-accordion-note { padding: 10px 12px; border-left: 3px solid #C9A24B; background: rgba(201,162,75,.10); border-radius: 8px; }
/* 05/10 — Club : la ligne de seuil passe à la ligne (texte plus long que les autres grades), note en texte normal */
.mb-accordion-item-elite .mb-accordion-seuil, .mb-tier3d-elite .mb-tier3d-seuil { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
.mb-accordion-item-elite .mb-accordion-note { font-weight: 400; }
/* 05/10 — en-tête Club sur UNE ligne comme les autres grades (icône centrée sur le titre) : titre sans retour à la ligne sur ordinateur. */
@media (min-width: 701px) { .mb-accordion-item-elite > summary .mb-accordion-title { white-space: nowrap; } .mb-accordion-item-elite > summary .mb-accordion-seuil { white-space: nowrap !important; overflow: visible !important; } }
/* 05/10 — tableau des 5 grades sur petit écran : colonnes plus serrées (défilement horizontal réduit) */
@media (max-width: 480px) {
	.mb-compare-table { min-width: 0 !important; }
	.mb-compare-table th, .mb-compare-table td { padding: 8px 2px !important; font-size: .66rem !important; line-height: 1.25; }
	/* 05/10 — 5 colonnes égales en mobile : un mot long (« Fondateurs », « reconnaissance ») doit passer à la ligne, pas être coupé. */
	.mb-compare-table th, .mb-compare-table td { overflow-wrap: anywhere; }
	.mb-compare-table th { font-size: .78rem !important; }
}