body.bmf-site #site-header,

body.bmf-site #site-header-inner,

body.bmf-site #site-header-wrap,

body.bmf-site #site-navigation-wrap,

body.bmf-site #transparent-header-wrap,

body.bmf-site #medium-header,

body.bmf-site #oceanwp-mobile-menu-icon,

body.bmf-site #top-bar-wrap,

body.bmf-site .oceanwp-mobile-menu-icon,

body.bmf-site #footer-bottom #scroll-top {

	display: none !important;

}



/*

 * Une seule barre menu BMF : garder #bmf-main-menu-root (première instance PHP).

 * Les doublons (2e rendu ou clone type extension sticky OceanWP) sont masqués.

 */

body.bmf-site nav.bmf-main-menu[data-main-menu]:not(#bmf-main-menu-root),

body.bmf-site nav.bmf-main-menu[data-main-menu] ~ nav.bmf-main-menu[data-main-menu] {

	display: none !important;

	visibility: hidden !important;

}



/*
 * position:sticky du menu : aucun ancêtre (OceanWP + body) ne doit clipper.
 * Règle globale — avant limitée à bmf-has-job-hero dans economie-construction.css.
 */
body.bmf-site:not(.bmf-menu-open) #outer-wrap,
body.bmf-site:not(.bmf-menu-open) #wrap,
body.bmf-site:not(.bmf-menu-open) #content-wrap,
body.bmf-site:not(.bmf-menu-open) #content,
body.bmf-site:not(.bmf-menu-open) #site-content {
	overflow: visible !important;
}



.bmf-main-menu {

	position: relative;

	background: #ffffff;

	margin-top: 20px;

	padding: var(--bmf-space-sm) var(--bmf-space-md);

	z-index: 5;

}



/* Pages hors intro d’accueil : menu collant sous la barre d’admin (variable définie en JS). */

.bmf-main-menu:not(.bmf-main-menu--home-scroll) {

	position: -webkit-sticky;

	position: sticky;

	top: var(--bmf-main-menu-sticky-top, 0);

	z-index: 100;

}



/*

 * Variante semi-transparente : utilisée par les pages éditoriales dont le hero

 * plein écran doit transparaître derrière le menu (ex. template

 * page-economie-construction.php). Au repos, fond blanc à 65% d’opacité pour

 * laisser entrevoir l’image d’intro tout en gardant les liens lisibles. Au

 * scroll, la classe `is-stuck` posée par le JS dédié bascule sur un fond blanc

 * plein ; en remontant tout en haut, le menu se « décolle » (la classe est

 * retirée par le même JS) et retrouve son fond semi-transparent.

 */

.bmf-main-menu--transparent {

	background: rgba(255, 255, 255, 0.65);

	margin-top: 0;

	transition: background-color 220ms ease;

}



.bmf-main-menu--transparent.is-stuck {

	background: #ffffff;

}



.bmf-main-menu__inner {

	max-width: var(--bmf-home-main-menu-max);

	width: 100%;

	margin: 0 auto;

}



/*

 * Layout flex : chaque item de menu (hors logo) prend la MÊME largeur via

 * `flex: 1 1 0` (basis 0 → la croissance se répartit également quelle que

 * soit la longueur du libellé). Le logo reste de largeur auto, centré entre

 * deux groupes d'items à largeurs égales → le logo se retrouve toujours au

 * milieu de la barre, même si « économie de la construction » est plus long

 * que « contact ».

 *

 * Robuste si le menu compte 4, 5, 6 items ou plus : le calcul s'adapte.

 */

.bmf-main-menu__list {

	list-style: none;

	padding: 0;

	margin: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: var(--bmf-main-menu-gap);

}



.bmf-main-menu__list > li:not(.bmf-main-menu__logo-item) {

	flex: 1 1 0;

	min-width: 0;

	display: flex;

	align-items: center;

	justify-content: center;

}



.bmf-main-menu__list a {

	color: var(--bmf-text);

	text-decoration: none;

	font-family: "Self Modern", serif;

	font-size: 1.6rem;

	line-height: 1.3;

	text-align: center;

}



.bmf-main-menu__list li.menu-item a:hover,

.bmf-main-menu__list li.menu-item a:focus-visible {

	text-decoration: underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 0.2em;

}



.bmf-main-menu__list .current-menu-item a,

.bmf-main-menu__list a.is-active {

	text-decoration: underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 0.2em;

}



.bmf-main-menu__list .page_item a:hover,

.bmf-main-menu__list .page_item a:focus-visible,

.bmf-main-menu__list .current_page_item a {

	text-decoration: underline;

	text-decoration-thickness: 1px;

	text-underline-offset: 0.2em;

}



.bmf-main-menu__list li {

	margin: 0;

	padding: 0;

}



.bmf-main-menu__logo-item {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin: 0 var(--bmf-space-md);

}



.bmf-main-menu__logo-item .custom-logo-link {

	display: inline-flex;

	line-height: 1;

}



.bmf-main-menu__logo-item img.custom-logo {

	width: auto;

	max-height: 42px;

}



.bmf-main-menu__logo-fallback {

	color: var(--bmf-text);

	text-decoration: none;

	font-size: 1.7rem;

	line-height: 1;

}



/* Éléments mobile masqués sur desktop (activés ≤1023px). */
.bmf-main-menu__bar,
.bmf-main-menu__backdrop,
.bmf-main-menu__panel {
	display: none;
}



@media (min-width: 1024px) and (max-width: 1439px) {
	.bmf-main-menu__list {
		gap: 28px;
	}

	.bmf-main-menu__list a {
		font-size: clamp(1.1rem, 1.2vw, 1.6rem);
	}
}



/* --- Barre compacte + panneau plein écran : tablette et mobile (≤1023px) --- */
@media (max-width: 1023px) {
	.bmf-main-menu {
		margin-top: 0;
		padding: var(--bmf-space-sm) var(--bmf-space-md);
	}

	.bmf-main-menu--transparent:not(.is-menu-open):not(.is-stuck) {
		background: rgba(255, 255, 255, 0.65);
	}

	.bmf-main-menu--transparent.is-stuck:not(.is-menu-open) {
		background: #ffffff;
	}

	.bmf-main-menu.is-menu-open,
	.bmf-main-menu--transparent.is-menu-open {
		background: #ffffff;
	}

	.bmf-main-menu__list--desktop {
		display: none;
	}

	.bmf-main-menu__inner {
		display: block;
		width: 100%;
	}

	.bmf-main-menu__bar {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		align-items: center;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
	}

	.bmf-main-menu__bar-logo {
		grid-column: 1 / -1;
		grid-row: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;
		justify-self: center;
		pointer-events: none;
	}

	.bmf-main-menu__bar-logo .custom-logo-link,
	.bmf-main-menu__bar-logo .bmf-main-menu__logo-fallback {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		pointer-events: auto;
	}

	.bmf-main-menu__bar-logo img.custom-logo {
		max-height: 40px;
		width: auto;
	}

	.bmf-main-menu__toggle {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.bmf-main-menu__toggle-icon {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--bmf-ink);
		position: relative;
		border-radius: 1px;
	}

	.bmf-main-menu__toggle-icon::before,
	.bmf-main-menu__toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 22px;
		height: 2px;
		background: var(--bmf-ink);
		border-radius: 1px;
	}

	.bmf-main-menu__toggle-icon::before {
		top: -7px;
	}

	.bmf-main-menu__toggle-icon::after {
		top: 7px;
	}

	.bmf-main-menu.is-menu-open .bmf-main-menu__toggle-icon {
		background: transparent;
	}

	.bmf-main-menu.is-menu-open .bmf-main-menu__toggle-icon::before {
		top: 0;
		transform: rotate(45deg);
	}

	.bmf-main-menu.is-menu-open .bmf-main-menu__toggle-icon::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.bmf-main-menu__backdrop[hidden] {
		display: none !important;
		pointer-events: none !important;
	}

	.bmf-main-menu__backdrop {
		position: fixed;
		inset: 0;
		z-index: 199;
		background: rgba(29, 29, 27, 0.35);
		opacity: 0;
		transition: opacity 280ms ease;
		pointer-events: none;
	}

	.bmf-main-menu__backdrop:not([hidden]) {
		opacity: 1;
		pointer-events: auto;
	}

	.bmf-main-menu__panel {
		position: fixed;
		inset: 0;
		z-index: 200;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		padding: var(--bmf-space-md) var(--bmf-space-md) var(--bmf-space-xl);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition:
			opacity 280ms ease,
			transform 280ms ease,
			visibility 0s linear 280ms;
	}

	.bmf-main-menu.is-menu-open .bmf-main-menu__panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition:
			opacity 280ms ease,
			transform 280ms ease,
			visibility 0s;
	}

	.bmf-main-menu__close {
		position: absolute;
		top: var(--bmf-space-sm);
		right: var(--bmf-space-md);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		z-index: 2;
	}

	.bmf-main-menu__close-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 22px;
	}

	.bmf-main-menu__close-icon::before,
	.bmf-main-menu__close-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 22px;
		height: 2px;
		background: var(--bmf-ink);
		border-radius: 1px;
	}

	.bmf-main-menu__close-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.bmf-main-menu__close-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.bmf-main-menu__list--overlay {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 48px 0 0;
		padding: 0;
		list-style: none;
	}

	.bmf-main-menu__list--overlay > li:not(.bmf-main-menu__logo-item) {
		flex: none;
		min-width: 0;
		width: 100%;
	}

	.bmf-main-menu__list--overlay .bmf-main-menu__logo-item {
		display: flex;
		justify-content: center;
		margin: 0 0 var(--bmf-space-lg);
	}

	.bmf-main-menu__list--overlay .bmf-main-menu__logo-item img.custom-logo {
		max-height: 48px;
	}

	.bmf-main-menu__list--overlay a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px var(--bmf-space-sm);
		font-size: clamp(1.25rem, 4vw, 1.6rem);
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.bmf-main-menu__bar,
	.bmf-main-menu__backdrop,
	.bmf-main-menu__panel,
	.bmf-main-menu__toggle {
		display: none;
	}

	.bmf-main-menu__list--desktop {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmf-main-menu__panel,
	.bmf-main-menu__backdrop {
		transition: none;
	}
}