/* Menu */
.mb-menu {
	--mb-menu-active: var(--mb-primary);
	--mb-menu-sub-bg: #ffffff;
	--mb-menu-mobile-bg: #ffffff;
	display: flex;
	justify-content: flex-end;
	position: relative;
}

.mb-menu__list,
.mb-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-menu__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.mb-menu--vertical .mb-menu__list { flex-direction: column; align-items: flex-start; gap: 10px; }

.mb-menu li { position: relative; display: flex; align-items: center; flex-wrap: wrap; }

.mb-menu a {
	display: inline-block;
	padding: 8px 0;
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}

.mb-menu a:hover,
.mb-menu a:focus-visible,
.mb-menu .current-menu-item > a,
.mb-menu .current-menu-ancestor > a { color: var(--mb-menu-active); }

.mb-menu a:focus-visible,
.mb-menu button:focus-visible { outline: 2px solid var(--mb-menu-active); outline-offset: 3px; }

.mb-menu__sub-toggle {
	border: 0; background: none; color: inherit; cursor: pointer;
	padding: 6px; margin-left: 2px; line-height: 0;
}
.mb-menu__sub-toggle svg { width: 10px; height: 10px; transition: transform 0.15s; }
.is-sub-open > .mb-menu__sub-toggle svg { transform: rotate(180deg); }

/* Sous-menus (grand écran) : au survol, au clavier ou au clic sur la flèche. */
.mb-menu--horizontal .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 220px;
	padding: 8px 0;
	background: var(--mb-menu-sub-bg);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	display: none;
	flex-direction: column;
}
.mb-menu--horizontal .sub-menu .sub-menu { top: 0; left: 100%; }
.mb-menu--horizontal .sub-menu a { padding: 8px 18px; width: 100%; }
.mb-menu--horizontal li:hover > .sub-menu,
.mb-menu--horizontal li:focus-within > .sub-menu,
.mb-menu li.is-sub-open > .sub-menu { display: flex; }

.mb-menu--vertical .sub-menu { display: none; width: 100%; padding-left: 16px; flex-direction: column; }

.mb-menu__toggle { display: none; border: 0; background: none; color: inherit; cursor: pointer; padding: 8px; font-size: 24px; line-height: 0; }
.mb-menu__icon-close { display: none; }
.mb-menu.is-open .mb-menu__icon-open { display: none; }
.mb-menu.is-open .mb-menu__icon-close { display: inline; }

/* Version « burger » */
@media (max-width: 1024px) {
	.mb-menu--bp-tablet .mb-menu__toggle { display: inline-flex; }
	.mb-menu--bp-tablet .mb-menu__panel { display: none; }
	.mb-menu--bp-tablet.is-open .mb-menu__panel {
		display: block; position: absolute; top: 100%; right: 0; z-index: 100;
		width: min(320px, 90vw); max-height: 80vh; overflow-y: auto;
		padding: 12px 20px; background: var(--mb-menu-mobile-bg);
		border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	}
	.mb-menu--bp-tablet .mb-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
	.mb-menu--bp-tablet li { justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
	.mb-menu--bp-tablet .sub-menu { position: static; display: none; box-shadow: none; min-width: 0; width: 100%; padding: 0 0 8px 12px; background: transparent; }
	.mb-menu--bp-tablet li:hover > .sub-menu, .mb-menu--bp-tablet li:focus-within > .sub-menu { display: none; }
	.mb-menu--bp-tablet li.is-sub-open > .sub-menu { display: flex; }
	.mb-menu--bp-tablet a { padding: 12px 0; }
}

@media (max-width: 767px) {
	.mb-menu--bp-mobile .mb-menu__toggle { display: inline-flex; }
	.mb-menu--bp-mobile .mb-menu__panel { display: none; }
	.mb-menu--bp-mobile.is-open .mb-menu__panel {
		display: block; position: absolute; top: 100%; right: 0; z-index: 100;
		width: min(320px, 90vw); max-height: 80vh; overflow-y: auto;
		padding: 12px 20px; background: var(--mb-menu-mobile-bg);
		border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	}
	.mb-menu--bp-mobile .mb-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
	.mb-menu--bp-mobile li { justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
	.mb-menu--bp-mobile .sub-menu { position: static; display: none; box-shadow: none; min-width: 0; width: 100%; padding: 0 0 8px 12px; background: transparent; }
	.mb-menu--bp-mobile li:hover > .sub-menu, .mb-menu--bp-mobile li:focus-within > .sub-menu { display: none; }
	.mb-menu--bp-mobile li.is-sub-open > .sub-menu { display: flex; }
	.mb-menu--bp-mobile a { padding: 12px 0; }
}