/**
 * Header « Les rubriques » (design-system §5) — markup inc/30-menu.php, behaviour assets/js/menu.js.
 * Kept simple on owner feedback: craie bar, a thin brique line under it, a clean dropdown grid of the 8 categories
 * (the only brand accent: the brique line on its top edge), a simple drawer on phones and tablets.
 */

/* ── Bar ──────────────────────────────────────────── */
.bm-bar { position: relative; z-index: 40; background: var(--bm-craie); color: var(--bm-ardoise); border-bottom: 3px solid var(--bm-brique); }
.bm-bar__inner {
	box-sizing: border-box;
	max-width: calc(var(--bm-wide) + 2 * var(--bm-gutter));
	margin: 0 auto;
	padding: 0.4rem var(--bm-gutter);
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
}
.bm-bar__logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.bm-bar__logo img { display: block; width: 150px; height: auto; }
.bm-bar__burger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.85rem 0 1rem;
	border: 2px solid var(--bm-ardoise);
	border-radius: var(--bm-radius);
	background: var(--bm-base);
	color: var(--bm-ardoise);
	font: 700 1rem/1 var(--bm-heading);
	cursor: pointer;
}
.bm-bar__burger:hover { background: var(--bm-ardoise); color: var(--bm-base); }
.bm-bar__burger[hidden] { display: none; }

/* Without JS: links wrap under the logo. With JS (< 1024): drawer only. */
.bm-niveaux { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-bottom: 0.5rem; }
.bm-js .bm-niveaux { display: none; }
.bm-niveaux__list { display: flex; flex-wrap: wrap; gap: 0 0.15rem; margin: 0; padding: 0; list-style: none; }
.bm-niveaux__item { position: relative; display: flex; }
.bm-niveaux__link, .bm-niveaux__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0 0.7rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--bm-ardoise);
	font: 700 1rem/1.2 var(--bm-heading);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.bm-niveaux__link:hover, .bm-niveaux__toggle:hover { color: var(--bm-brique-text); }
.bm-niveaux__item.is-current .bm-niveaux__label { text-decoration: underline; text-decoration-color: var(--bm-brique); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.bm-niveaux__link[hidden], .bm-niveaux__toggle[hidden], .bm-niveaux__search[hidden] { display: none; }
.bm-niveaux__search { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--bm-trait); border-radius: var(--bm-radius); background: var(--bm-base); color: var(--bm-ardoise); cursor: pointer; }
.bm-niveaux__search:hover, .bm-niveaux__search[aria-expanded="true"] { border-color: var(--bm-ardoise); }
.bm-niveaux__cta { flex: none; }

@media (min-width: 1024px) {
	.bm-bar__inner { min-height: 82px; flex-wrap: nowrap; gap: 1.25rem; padding-block: 0; }
	.bm-bar__logo img { width: 190px; }
	.bm-js .bm-bar__burger { display: none; }
	.bm-niveaux, .bm-js .bm-niveaux { display: flex; flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 0.6rem; padding: 0; }
	.bm-niveaux__list { flex-wrap: nowrap; }
	.bm-niveaux__toggle::after { content: ""; width: 7px; height: 7px; margin-left: 0.1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.18s ease-out; }
	.bm-niveaux__toggle[aria-expanded="true"] { background: var(--bm-sable); }
	.bm-niveaux__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
}
@media (min-width: 1440px) {
	.bm-bar__logo img { width: 210px; }
	.bm-niveaux__link, .bm-niveaux__toggle { padding: 0 0.85rem; }
}

/* ── Search bar and dropdown ──────────────────────── */
.bm-searchbar, .bm-mega { position: absolute; left: 0; right: 0; top: calc(100% + 3px); background: var(--bm-base); border-bottom: 1px solid var(--bm-trait); box-shadow: 0 24px 40px -28px rgb(31 42 51 / 0.45); }
.bm-searchbar[hidden], .bm-mega[hidden] { display: none; }
@media (max-width: 1023px) { .bm-mega { display: none; } }
.bm-searchbar__inner, .bm-mega__inner { box-sizing: border-box; max-width: calc(var(--bm-wide) + 2 * var(--bm-gutter)); margin: 0 auto; padding: 1.25rem var(--bm-gutter) 1.5rem; }
.bm-searchbar .bm-search__field { max-width: 720px; }
.bm-mega__foot { margin: 0.9rem 0 0; }
.bm-mega__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bm-brique-text); font: 700 1rem/1 var(--bm-heading); }

/* The 8 categories: icon, name, short line, count */
.bm-rubrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.bm-rubric a { display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.55rem 0.7rem; border-radius: var(--bm-radius); color: var(--bm-ardoise); text-decoration: none; }
.bm-rubric a:hover, .bm-rubric.is-current a { background: var(--bm-craie); }
.bm-rubric a:hover .bm-rubric__name { text-decoration: underline; }
.bm-rubric__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--bm-sable); color: var(--bm-ardoise); }
.bm-rubric__icon .bm-ticon { width: 22px; height: 22px; }
.bm-rubric__text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.bm-rubric__name { font: 700 1rem/1.2 var(--bm-heading); }
.bm-rubric__line { color: var(--bm-meta); font-size: 0.875rem; line-height: 1.35; }
.bm-rubric__count { flex: none; color: var(--bm-brique-text); font: 700 0.85rem/1 var(--bm-heading); white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .bm-rubrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Drawer ───────────────────────────────────────── */
.bm-drawer {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0 var(--bm-gutter) 2rem;
	border: 0;
	background: var(--bm-craie);
	color: var(--bm-ardoise);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.bm-drawer::backdrop { background: rgb(31 42 51 / 0.55); }
.bm-drawer[open] { display: flex; flex-direction: column; animation: bm-drop 0.25s ease-out; }
@keyframes bm-drop { from { transform: translateY(-16px); opacity: 0; } }
@media (min-width: 600px) { .bm-drawer { width: min(480px, 100%); margin-left: auto; padding-inline: 28px; } }
@media (min-width: 1024px) { .bm-drawer[open] { display: none; } }
.bm-lock, .bm-lock body { overflow: hidden; }
.bm-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 68px; border-bottom: 3px solid var(--bm-brique); }
.bm-drawer__close { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--bm-ardoise); border-radius: var(--bm-radius); background: var(--bm-base); color: var(--bm-ardoise); cursor: pointer; }
.bm-drawer__close:hover { background: var(--bm-ardoise); color: var(--bm-base); }
.bm-drawer__caption { margin: 1.1rem 0 0.4rem; color: var(--bm-meta); font: 700 0.9rem/1.3 var(--bm-heading); }
.bm-rubrics--drawer { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bm-rubrics--drawer .bm-rubric + .bm-rubric { border-top: 1px solid var(--bm-trait); }
.bm-rubrics--drawer .bm-rubric a { min-height: 54px; padding-inline: 0.25rem; }
.bm-rubrics--drawer .bm-rubric__icon { width: 36px; height: 36px; }
.bm-drawer__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.bm-drawer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--bm-trait); border-radius: 999px; background: var(--bm-base); color: var(--bm-ardoise); font: 700 1rem/1 var(--bm-heading); text-decoration: none; }
.bm-drawer__links a:hover, .bm-drawer__links a[aria-current="page"] { border-color: var(--bm-ardoise); }
.bm-drawer__cta { margin-top: 1.25rem; width: 100%; }
.bm-drawer .bm-search { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) { .bm-drawer[open] { animation: none; } }