.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
	padding: 1rem 0;

}

/* Section heading wrapper — holds the border at full opacity.
   margin-top separates the "Information" section from the last nav row above it
   (which already carries a border-bottom), so it reads as its own section. */
.gm-catmenu__section-heading {
	display: block;
	width: 100%;
	margin: 1.5rem 0 0;
	border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

/* The Links Menu list (separate <ul> after the nav list). */
.gm-catmenu__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Drawer-only chrome (Catégories heading + Information section + its links): these
   are injected into the nav content but are only meant for the OPEN overlay. Hide
   them whenever the responsive container isn't open — otherwise, at in-between widths
   where the nav renders inline, the full-width heading forces the menu into a tiny,
   scrollable box. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .gm-catmenu__heading,
.wp-block-navigation__responsive-container:not(.is-menu-open) .gm-catmenu__section-heading,
.wp-block-navigation__responsive-container:not(.is-menu-open) .gm-catmenu__links {
	display: none;
}

/* Inner label — text styles + opacity independent of the border */
.gm-catmenu__section-label {
	display: block;
	padding: 8px 16px;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.5;
}

/* "Categories" heading injected by JS after the close button */
.gm-catmenu__heading {
	display: block;
	padding: 4px 16px 10px;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.5;
}

/* =============================================================================
   Mobile navigation overlay — core/navigation block (the hamburger menu)
   See nav-reference.html in this folder for the markup these selectors target.
   Everything is scoped to `.is-menu-open` so only the open mobile drawer is
   affected (the desktop nav is untouched).
   ============================================================================= */

/* Drawer width: the theme's style.css caps the open overlay at max-width:280px.
   Override it to 90%. The extra `.wp-block-navigation` raises specificity so this
   wins over the theme regardless of stylesheet load order. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	width: 90%;
	max-width: 90%;
}

/* Submenu open/close driven by the toggle button's aria-expanded attribute.
   The submenu <ul> is the SIBLING that follows the toggle button, so we target it
   with `toggle ~ container`. The trailing `.wp-block-navigation-submenu` adds one
   more class to out-specify the theme's `header …` submenu rules. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	display: flex;
	flex-direction: column;
	/* The child theme caps an open submenu at max-height:300px, so taller lists
	   (especially with vertical padding) overflow and overlap the rows below.
	   Let it grow to fit its content. */
	max-height: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="false"]
	~ .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
	display: none;
}

/* Replace the toggle's chevron SVG with a +/- glyph:
   "+" when the submenu is closed, "−" when it's open. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle svg {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle::after {
	content: "+";              /* closed */
	display: inline-block;
	width: 1em;
	text-align: center;
	font-size: 20px;
	line-height: 1;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	content: "\2212";          /* open = minus (−) */
}

/* Row spacing: 1rem top/bottom, none on the sides, for top-level items only.
   The padding sits on the link (and the toggle) rather than the <li> so the
   hover/focus accent covers the whole row — the <li>'s own background isn't
   reliably visible behind the link, which is what left the gap white.
   Top-level items are the DIRECT children of `__container`; submenu children
   live in `__submenu-container` instead, so `> li` excludes them. (Note: not all
   top-level items have `has-child` — only the ones with a submenu do.) */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content
{
	padding: 0 1rem;
}

/* Parent rows are laid out by the PARENT THEME as a CSS grid:
       grid-template-areas: "a b" "c c"   →  a = link, b = +/- toggle, c = submenu
   but it never sets grid-template-columns, so the link column only spans its text
   width — the rest of the row (and the space before the toggle) is the transparent
   grid container, which is the "gap" that stayed white. Make the link column `1fr`
   so the link fills all available width and the toggle sits flush at the far right.
   (Extra `.wp-block-navigation-item` class so this out-specifies the parent theme.) */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	li.wp-block-navigation-item.wp-block-navigation-submenu.open-on-hover-click {
	grid-template-columns: 1fr auto;
}
/* The toggle is sized square + full-height by the parent theme, but it's also set
   to `position: absolute; right: 0`, which pulls it OUT of the grid — so column `b`
   collapses, the 1fr link fills the whole width, and the toggle floats on top of it
   (the overlap). Put it back into the grid flow with `position: static` so it takes
   column `b` beside the link. Also drop core's `margin-left: 0.25em` and centre the
   +/- glyph. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	li.wp-block-navigation-item.wp-block-navigation-submenu.open-on-hover-click
	> .wp-block-navigation-submenu__toggle {
	position: static;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Plain top-level links (no submenu) aren't grids — core lays them out as a flex
   column with `align-items: flex-start`, so the <a> only spans its text width and
   the highlight stops there. Stretch the <a> to the full row width so these rows
   span and highlight like the parent rows. (Extra class to beat core's overlay rule.) */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item.wp-block-navigation-link {
	align-items: stretch;
	width: 100%;
}

/* Unify the hover ANIMATION across the link, the toggle and the glyph. The parent
   theme gives the <a> `transition: all .3s` while the toggle has none and the glyph
   .2s, so they highlighted at different speeds — reading as two separate effects on
   one row. One identical transition makes the whole row animate as a single unit. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item > .wp-block-navigation-submenu__toggle::after {
	transition: background-color .2s ease, color .2s ease;
}

/* Hover / focus highlight: accent background.
   It goes on the `…__content` link and the toggle button, NOT the <li>: core
   forces `.wp-block-navigation-item { background: transparent !important }` inside
   the open overlay, so the <li> can't be painted without !important. That's fine —
   the link (flex:1) and the stretched toggle now tile the whole row edge to edge
   with no gap, so painting those two covers everything. The `>` combinator keeps a
   hovered parent from also highlighting its open submenu's children. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle {
	background-color: var(--wp--preset--color--accent);
}

/* TOP-LEVEL rows: the text + the +/- glyph turn to the base color on the accent
   background. Scoped to `__container >` so it only affects top-level rows. Extra
   specificity beats the theme's `nav .wp-block-navigation-link a:hover { color: accent }`. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle::after,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle::after {
	color: var(--wp--preset--color--base);
}

/* SUBMENU items: no background highlight — just colour the text accent on hover/focus. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--accent);
}

/* Remove the underline on the menu items. The parent theme puts
   `text-decoration-line: underline !important` on EVERY `.wp-block-navigation a`
   (transparent by default, revealed/coloured on hover), so it has to be killed in
   every state, not just on hover. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:active {
	text-decoration: none !important;
}

/* Also drop the theme's `opacity: 0.8` link-hover fade so the link matches the
   toggle (which never fades). */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	opacity: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content>ul>.wp-block-navigation-item {
	border-bottom: 1px solid var(--line);   /* grid line */
}
/* No border on the last nav row (the one above the Information section). */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	> ul:not(.gm-catmenu__links) > .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

/* =============================================================================
   Drawer header ("Fermer ✕") — the JS relabels the core close button and adds the
   .gm-catmenu__close class. Core positions that button absolute top-right; turn it
   into a full-width bar at the top of the drawer instead. Styles are self-contained
   here (not relying on the theme's old-menu gm-catmenu rules).
   ============================================================================= */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close.gm-catmenu__close {
	position: static;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;     /* label + chip pinned right */
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--contrast, #1f2a37);
	font: 700 16.5px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close.gm-catmenu__close:hover,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close.gm-catmenu__close:focus {
	background: #f6f8fc;
	outline: none;
}
.wp-block-navigation__responsive-container.is-menu-open
	.gm-catmenu__close .gm-catmenu__title {
	pointer-events: none;
}
.wp-block-navigation__responsive-container.is-menu-open
	.gm-catmenu__close .gm-catmenu__close-icon {
	width: 28px;
	height: 28px;
	display: inline-grid;
	place-items: center;
	border-radius: 6px;
	background: #e9eefb;            /* rounded blue chip */
	color: #275bad;
	font-size: 16px;
	line-height: 1;
}
/* The parent theme renders the default ✕ as a ::after mask-icon on the close
   button; suppress it so only our "Fermer ✕" chip shows. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close.gm-catmenu__close::after {
	content: none;
}
/* Core reserves top padding on the content to clear the (formerly absolute) close
   button; it's a top bar in normal flow now, so drop that reserved space. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 0 !important;
}