/* Basalt — Menu
   Bandeau sombre pleine largeur. Contenu (logo, navigation, bouton +/×)
   centré à 90 % de largeur, 2500px maximum. Survol et page active : texte jaune. */

.bmn {
	--bmn-bg: #202122;
	--bmn-color: #f2f1eb;
	--bmn-accent: #faff9c;
	--bmn-ink: #1d1d1b;
	--bmn-height: clamp(72px, 9vh, 104px);
	--bmn-logo-width: clamp(120px, 11vw, 200px);
	--bmn-offset-left: 0px;
	--bmn-width: 90%;
	--bmn-max: 2500px;
	--bmn-gap: clamp(14px, 1.8vw, 34px);
	--bmn-font-size: clamp(13px, 1.15vw, 18px);
	--bmn-bouton: 30px;
	--bmn-duree: 0.32s;
	--bmn-top: 0px;
	--bmn-z: 999;
	--bmn-vw: 100vw; /* recalculé en JS sans la barre de défilement */

	position: relative;
	width: 100%;
	color: var(--bmn-color);
}

/* Le thème ne garantit pas border-box : on l'impose dans le menu. */
.bmn,
.bmn *,
.bmn *::before,
.bmn *::after {
	box-sizing: border-box;
}

/* Pleine largeur : le bandeau sort de la rangée (même boxée) pour couvrir tout l'écran. */
.bmn--plein {
	width: var(--bmn-vw);
	max-width: none;
	margin-left: calc(50% - var(--bmn-vw) / 2);
	margin-right: calc(50% - var(--bmn-vw) / 2);
}

/* L'ancre reste dans le flux : elle donne la hauteur et, en fixed, la boîte de référence. */
.bmn-ancre {
	position: relative;
	width: 100%;
}

/* sticky : dans le flux, épinglé pendant le scroll de sa section. */
.bmn--sticky {
	position: sticky;
	top: var(--bmn-top);
	z-index: var(--bmn-z);
}

/* fixed : épinglé sur toute la page, recalé sur la boîte de l'ancre (mesurée en JS). */
.bmn--fixed .bmn-ancre {
	min-height: var(--bmn-ancre-h, var(--bmn-height));
}

.bmn--fixed .bmn-barre {
	position: fixed;
	top: var(--bmn-top);
	left: var(--bmn-fixed-left, 0px);
	width: var(--bmn-fixed-width, 100%);
	z-index: var(--bmn-z);
}

/* Barre d'administration WordPress */
body.admin-bar .bmn--sticky,
body.admin-bar .bmn--fixed .bmn-barre {
	top: calc(var(--bmn-top) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .bmn--sticky,
	body.admin-bar .bmn--fixed .bmn-barre {
		top: calc(var(--bmn-top) + 46px);
	}
}

/* Bandeau : fond sur toute la largeur */
.bmn-barre {
	width: 100%;
	background: var(--bmn-bg);
	transition: background-color var(--bmn-duree) ease;
}

/* Transparent / blend : la barre flotte au-dessus de la page (aucune place
   réservée dans le flux). Transparent : sans fond tant que la section visée
   est dessous. Blend : toujours sans fond, couleurs en « différence ». */
.bmn--transparent,
.bmn--blend {
	position: fixed;
	top: var(--bmn-top);
	left: 0;
	right: 0;
	width: auto;
	margin: 0;
	z-index: var(--bmn-z);
}

/* Les conteneurs Divi autour du menu ne doivent plus réserver d'espace
   (padding de section / rangée, marge du module). */
:is(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .et_pb_code_inner):has(.bmn--transparent, .bmn--blend) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 0 !important;
}

.bmn--transparent .bmn-ancre,
.bmn--blend .bmn-ancre {
	min-height: 0;
}

.bmn--transparent .bmn-barre,
.bmn--blend .bmn-barre {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
}

.bmn--transparent[data-sur-section="true"] .bmn-barre {
	background-color: transparent;
}

/* Barre d'admin WordPress : hauteur réellement visible, mesurée en JS. */
body.admin-bar .bmn--transparent,
body.admin-bar .bmn--blend {
	top: calc(var(--bmn-top) + var(--bmn-admin, 0px));
}

/* Blend : le menu entier se mélange en « différence » avec la page dessous.
   Blanc sur noir reste blanc, blanc sur jaune devient bleu, etc. */
.bmn--blend {
	mix-blend-mode: difference;
}

.bmn.bmn--blend .bmn-barre,
.bmn.bmn--blend .bmn-nav {
	background: transparent;
}

/* Divi crée des contextes d'empilement (z-index sur .et_builder_inner_content,
   .et_pb_column) qui isoleraient le menu de la page : on les neutralise. */
:is(.et_builder_inner_content, .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module):has(.bmn--blend) {
	z-index: auto !important;
	isolation: auto !important;
}

/* Contenu : 90 %, 2500px max, centré */
.bmn-contenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bmn-gap);
	width: var(--bmn-width);
	max-width: var(--bmn-max);
	min-height: var(--bmn-height);
	margin: 0 auto;
	padding: 0 0 0 var(--bmn-offset-left);
}

/* Logo */
.bmn-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
	border: 0;
}

.bmn-logo img {
	display: block;
	width: var(--bmn-logo-width);
	height: auto;
	max-width: none;
}

/* Navigation */
.bmn-nav {
	display: flex;
	align-items: center;
	align-self: center;
	margin: 0 0 0 auto;
	padding: 0;
}

/* Sélecteurs renforcés + !important : Divi et les thèmes ajoutent
   padding-bottom / marges / line-height aux ul du contenu
   (ex. .entry-content ul, .et_pb_code_inner ul), ce qui décale le menu vers le haut. */
.bmn .bmn-nav ul.bmn-liste {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 44px);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	list-style: none !important;
}

.bmn .bmn-nav ul.bmn-liste > li {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	list-style: none !important;
}

.bmn .bmn-nav ul.bmn-liste > li::before,
.bmn .bmn-nav ul.bmn-liste > li::marker {
	content: none;
}

/* Le bouton et le logo aussi, centrés dans le bandeau */
.bmn-logo,
.bmn-toggle {
	align-self: center;
}

.bmn-liste a {
	display: block;
	padding: 0.5em 0;
	border: 0;
	background: none;
	color: var(--bmn-color);
	font-size: var(--bmn-font-size);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--bmn-duree) ease;
}

/* Survol et page active : texte jaune, sans pilule */
.bmn-liste a:hover,
.bmn-liste a:focus-visible,
.bmn-liste .current-menu-item > a,
.bmn-liste .current-menu-ancestor > a,
.bmn-liste .current_page_item > a,
.bmn-liste .current-menu-parent > a {
	background: none;
	color: var(--bmn-accent);
}

.bmn-liste a:focus-visible {
	outline: 1px solid var(--bmn-accent);
	outline-offset: 4px;
}

/* Bouton rond +/× */
.bmn-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bmn-bouton);
	height: var(--bmn-bouton);
	margin-left: clamp(6px, 1vw, 18px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bmn-icones {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.bmn-icone {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	transition: opacity var(--bmn-duree) ease;
}

.bmn-icone--on {
	opacity: 0;
}

.bmn[data-open="true"] .bmn-icone--off {
	opacity: 0;
}

.bmn[data-open="true"] .bmn-icone--on {
	opacity: 1;
}

.bmn-toggle:focus-visible {
	outline: 2px solid var(--bmn-accent);
	outline-offset: 4px;
}

/* Replié : le bandeau, le logo et le bouton restent, la navigation s'efface */
.bmn[data-open="false"] [data-bmn-repli] {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	pointer-events: none;
}

[data-bmn-repli] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--bmn-duree) ease, transform var(--bmn-duree) ease, visibility var(--bmn-duree);
}

/* Libellé lecteur d'écran */
.bmn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Mobile : la navigation passe en panneau pleine largeur sous le bandeau */
@media (max-width: 860px) {
	.bmn--static .bmn-barre,
	.bmn--sticky .bmn-barre {
		position: relative;
	}

	.bmn-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bmn-bg);
		padding: 0 calc((100% - var(--bmn-width)) / 2) clamp(16px, 4vw, 28px);
	}

	.bmn-liste {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.bmn-liste a {
		padding: 0.7em 0;
		font-size: clamp(15px, 4vw, 19px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmn-icone,
	[data-bmn-repli],
	.bmn-liste a {
		transition: none;
	}
}