/* =========================================================================
   Methode ART — Navigation
   Off-canvas auto < 1024px. Variables d'override en tete pour theme.json
   ou style.css enfant. Toute la cascade est scopee dans @layer pour
   garantir qu'aucune surcharge globale n'ecrase les regles d'a11y/layout.
   ========================================================================= */

@layer methodeart-nav {

	/* ---------- Tokens d'override (a surcharger via :root ou body) ---------- */
	:where(.methodeart-nav, .methodeart-nav-offcanvas) {
		/* Liens niveau 1 */
		--methodeart-nav-link-color: var(--wp--preset--color--text-dark, #111);
		--methodeart-nav-link-color-hover: var(--wp--preset--color--primary, #000);
		--methodeart-nav-link-size: var(--wp--preset--font-size--sm, 14px);
		--methodeart-nav-link-weight: 500;
		--methodeart-nav-link-transform: uppercase;
		--methodeart-nav-link-spacing: 1.5px;

		/* Sous-menus */
		--methodeart-nav-submenu-bg: var(--wp--preset--color--bg-white, #fff);
		--methodeart-nav-submenu-link-color: var(--wp--preset--color--text-body, #444);
		--methodeart-nav-submenu-link-color-hover: var(--wp--preset--color--primary, #000);
		--methodeart-nav-submenu-link-size: var(--wp--preset--font-size--sm, 14px);
		--methodeart-nav-submenu-link-weight: 400;
		--methodeart-nav-submenu-link-transform: none;
		--methodeart-nav-submenu-shadow: 0 12px 32px rgba(0, 0, 0, .08);

		/* Off-canvas (mobile + pattern burger) */
		--methodeart-nav-offcanvas-bg: var(--wp--preset--color--bg-white, #fff);
		--methodeart-nav-offcanvas-color: var(--wp--preset--color--text-dark, #111);
		--methodeart-nav-offcanvas-width: min(420px, 88vw);
		--methodeart-nav-offcanvas-side: right; /* right | left — surcharger via [data-offcanvas-side] */
		--methodeart-nav-offcanvas-overlay: rgba(17, 17, 17, .45);
		--methodeart-nav-offcanvas-padding: var(--wp--preset--spacing--32, 32px) var(--wp--preset--spacing--32, 32px);
		--methodeart-nav-offcanvas-gap: var(--wp--preset--spacing--24, 24px);
		--methodeart-nav-offcanvas-link-size: var(--wp--preset--font-size--xl, 20px);
		--methodeart-nav-offcanvas-link-weight: 500;
		--methodeart-nav-offcanvas-link-transform: none;
		--methodeart-nav-offcanvas-link-spacing: 0;
		--methodeart-nav-offcanvas-submenu-link-size: var(--wp--preset--font-size--base, 16px);
		--methodeart-nav-offcanvas-submenu-link-weight: 400;
		--methodeart-nav-offcanvas-submenu-indent: var(--wp--preset--spacing--16, 16px);

		/* Burger */
		--methodeart-nav-burger-size: 28px;
		--methodeart-nav-burger-bar-height: 2px;
		--methodeart-nav-burger-color: currentColor;
		--methodeart-nav-burger-gap: 7px;

		/* Layout */
		--methodeart-nav-breakpoint: 1024px; /* desktop a partir de */
		--methodeart-nav-link-gap: var(--wp--preset--spacing--32, 32px);
		--methodeart-nav-transition: 280ms cubic-bezier(.2, .8, .2, 1);
	}

	/* ---------- Wrapper commun ---------- */
	.methodeart-nav {
		position: relative;
	}

	.methodeart-nav__row {
		display: flex;
		align-items: center;
		gap: var(--methodeart-nav-link-gap);
	}

	/* ---------- Liens desktop (.methodeart-nav-menu wrappe une UL) ---------- */
	.methodeart-nav-menu,
	.methodeart-nav-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.methodeart-nav-menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--methodeart-nav-link-gap);
		align-items: center;
	}

	.methodeart-nav-menu > li {
		position: relative;
	}

	/* Defauts typo poses sur le wrapper en :where() pour spec 0,0,0 :
	   toute edition via Gutenberg (classe has-*-font-size, inline
	   style="font-weight:..."), sur le wrapper OU sur un LI, gagne
	   et est hérité par le <a>. */
	:where(.methodeart-nav-menu, .methodeart-nav .wp-block-navigation) {
		color: var(--methodeart-nav-link-color);
		font-size: var(--methodeart-nav-link-size);
		font-weight: var(--methodeart-nav-link-weight);
		text-transform: var(--methodeart-nav-link-transform);
		letter-spacing: var(--methodeart-nav-link-spacing);
	}

	.methodeart-nav-menu > li > a,
	.methodeart-nav .wp-block-navigation a {
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		text-decoration: none;
		transition: color var(--methodeart-nav-transition);
	}

	.methodeart-nav-menu > li > a:hover,
	.methodeart-nav-menu > li > a:focus-visible,
	.methodeart-nav-menu > li[aria-expanded="true"] > a,
	.methodeart-nav .wp-block-navigation a:hover,
	.methodeart-nav .wp-block-navigation a:focus-visible {
		color: var(--methodeart-nav-link-color-hover);
	}

	/* Sous-menu desktop */
	.methodeart-nav-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 12px 0;
		background: var(--methodeart-nav-submenu-bg);
		box-shadow: var(--methodeart-nav-submenu-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--methodeart-nav-transition), transform var(--methodeart-nav-transition), visibility 0s linear var(--methodeart-nav-transition);
		z-index: 50;
	}

	.methodeart-nav-menu li:hover > .sub-menu,
	.methodeart-nav-menu li:focus-within > .sub-menu,
	.methodeart-nav-menu li[aria-expanded="true"] > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.methodeart-nav-menu .sub-menu a {
		display: block;
		padding: 10px 20px;
		color: var(--methodeart-nav-submenu-link-color);
		font-size: var(--methodeart-nav-submenu-link-size);
		font-weight: var(--methodeart-nav-submenu-link-weight);
		text-transform: var(--methodeart-nav-submenu-link-transform);
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--methodeart-nav-transition);
	}

	.methodeart-nav-menu .sub-menu a:hover,
	.methodeart-nav-menu .sub-menu a:focus-visible {
		color: var(--methodeart-nav-submenu-link-color-hover);
	}

	/* ---------- Bouton burger ---------- */
	.methodeart-nav-burger {
		--bar: var(--methodeart-nav-burger-bar-height);
		appearance: none;
		background: transparent;
		border: 0;
		padding: 6px;
		width: calc(var(--methodeart-nav-burger-size) + 12px);
		height: calc(var(--methodeart-nav-burger-size) + 12px);
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--methodeart-nav-burger-gap);
		cursor: pointer;
		color: var(--methodeart-nav-burger-color);
	}

	.methodeart-nav-burger::before,
	.methodeart-nav-burger::after,
	.methodeart-nav-burger > span {
		content: "";
		display: block;
		width: var(--methodeart-nav-burger-size);
		height: var(--bar);
		background: currentColor;
		transition: transform var(--methodeart-nav-transition), opacity var(--methodeart-nav-transition);
	}

	.methodeart-nav-burger > span {
		display: block;
	}

	.methodeart-nav-burger[aria-expanded="true"]::before {
		transform: translateY(calc(var(--methodeart-nav-burger-gap) + var(--bar))) rotate(45deg);
	}

	.methodeart-nav-burger[aria-expanded="true"]::after {
		transform: translateY(calc(-1 * (var(--methodeart-nav-burger-gap) + var(--bar)))) rotate(-45deg);
	}

	.methodeart-nav-burger[aria-expanded="true"] > span {
		opacity: 0;
		transform: scaleX(0);
	}

	/* ---------- Off-canvas ---------- */
	.methodeart-nav-offcanvas {
		position: fixed;
		inset: 0;
		display: grid;
		pointer-events: none;
		z-index: 9999;
	}

	.methodeart-nav-offcanvas__overlay {
		position: absolute;
		inset: 0;
		background: var(--methodeart-nav-offcanvas-overlay);
		opacity: 0;
		transition: opacity var(--methodeart-nav-transition);
	}

	.methodeart-nav-offcanvas__panel {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--methodeart-nav-offcanvas-width);
		max-width: 100vw;
		background: var(--methodeart-nav-offcanvas-bg);
		color: var(--methodeart-nav-offcanvas-color);
		padding: var(--methodeart-nav-offcanvas-padding);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: var(--methodeart-nav-offcanvas-gap);
		transition: transform var(--methodeart-nav-transition);
		box-shadow: 0 0 60px rgba(0, 0, 0, .15);
	}

	/* Cote droit (defaut) */
	.methodeart-nav-offcanvas[data-offcanvas-side="right"] .methodeart-nav-offcanvas__panel,
	.methodeart-nav-offcanvas:not([data-offcanvas-side]) .methodeart-nav-offcanvas__panel {
		right: 0;
		transform: translateX(100%);
	}

	/* Cote gauche */
	.methodeart-nav-offcanvas[data-offcanvas-side="left"] .methodeart-nav-offcanvas__panel {
		left: 0;
		transform: translateX(-100%);
	}

	.methodeart-nav-offcanvas[aria-hidden="false"] {
		pointer-events: auto;
	}

	.methodeart-nav-offcanvas[aria-hidden="false"] .methodeart-nav-offcanvas__overlay {
		opacity: 1;
	}

	.methodeart-nav-offcanvas[aria-hidden="false"] .methodeart-nav-offcanvas__panel {
		transform: translateX(0);
	}

	.methodeart-nav-offcanvas__close {
		appearance: none;
		background: transparent;
		border: 0;
		align-self: flex-end;
		padding: 4px 8px;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		color: inherit;
	}

	/* Liens dans l'off-canvas */
	.methodeart-nav-offcanvas__menu,
	.methodeart-nav-offcanvas__menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.methodeart-nav-offcanvas__menu > li > a,
	.methodeart-nav-offcanvas__menu > li > .methodeart-nav-offcanvas__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 0;
		color: inherit;
		font-size: var(--methodeart-nav-offcanvas-link-size);
		font-weight: var(--methodeart-nav-offcanvas-link-weight);
		text-transform: var(--methodeart-nav-offcanvas-link-transform);
		letter-spacing: var(--methodeart-nav-offcanvas-link-spacing);
		text-decoration: none;
		background: transparent;
		border: 0;
		text-align: left;
		width: 100%;
		cursor: pointer;
	}

	.methodeart-nav-offcanvas__menu .sub-menu {
		padding-left: var(--methodeart-nav-offcanvas-submenu-indent);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--methodeart-nav-transition);
	}

	.methodeart-nav-offcanvas__menu li[aria-expanded="true"] > .sub-menu {
		max-height: 1200px;
	}

	.methodeart-nav-offcanvas__menu .sub-menu a {
		display: block;
		padding: 8px 0;
		color: inherit;
		font-size: var(--methodeart-nav-offcanvas-submenu-link-size);
		font-weight: var(--methodeart-nav-offcanvas-submenu-link-weight);
		text-decoration: none;
	}

	.methodeart-nav-offcanvas__toggle::after {
		content: "+";
		font-size: 1.2em;
		transition: transform var(--methodeart-nav-transition);
	}

	.methodeart-nav-offcanvas__menu li[aria-expanded="true"] > .methodeart-nav-offcanvas__toggle::after {
		transform: rotate(45deg);
	}

	.methodeart-nav-offcanvas__ctas {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: auto;
		padding-top: var(--methodeart-nav-offcanvas-gap);
	}

	.methodeart-nav-offcanvas__ctas .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* ---------- Lock scroll quand off-canvas ouvert ---------- */
	html[data-methodeart-nav-locked="true"],
	html[data-methodeart-nav-locked="true"] body {
		overflow: hidden;
	}

}

/* ==========================================================================
   Visibilite responsive — HORS @layer pour battre les regles "no-layer" de
   Gutenberg (les inline styles is-layout-flex appliquent display:flex sans
   layer, donc gagneraient contre une regle layered, meme avec specificite
   plus haute).
   ========================================================================== */

/* Desktop ≥ 1024px : burger cache (sauf pattern "burger" qui le force) */
.methodeart-nav .methodeart-nav-burger { display: none; }
.methodeart-nav[data-pattern="burger"] .methodeart-nav-burger { display: inline-flex; }

@media (max-width: 1023.98px) {
	/* Cache le menu desktop quel que soit son markup (notre classe ou core) */
	.methodeart-nav .wp-block-navigation,
	.methodeart-nav .methodeart-nav-menu,
	.methodeart-nav .methodeart-nav__desktop-only {
		display: none;
	}
	/* Burger visible sur tous les patterns en mobile */
	.methodeart-nav .methodeart-nav-burger { display: inline-flex; }
}