/**
 * Menu mobile — tiroir droit qui pousse le site (#mc-site-push).
 */

:root {
	--mc-nav-width: min(88vw, 320px);
}

/* Desktop : nav centrée dans le header */
@media (min-width: 901px) {
	.mc-mobile-nav,
	.mc-nav-backdrop {
		display: none !important;
	}
}

@media (max-width: 900px) {
	.mc-header__nav {
		display: none !important;
	}

	.mc-nav-toggle {
		display: inline-flex;
		/* Cible tactile confortable sans grossir l'icône. */
		width: 2.75rem;
		height: 2.75rem;
		margin-right: -0.35rem;
	}

	/* Repli sans JavaScript : voir le <noscript> injecté par mc_mobile_nav_noscript_css(). */

	/* Voile de fermeture — le tap hors du tiroir referme le menu. */
	.mc-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 10040;
		background: rgba(15, 13, 11, 0.14);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.58s var(--mc-ref-e), visibility 0s linear 0.58s;
		cursor: pointer;
	}

	body.mc-nav-open .mc-nav-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.58s var(--mc-ref-e), visibility 0s;
	}

	/* Coque poussée */
	.mc-site-push {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		background: inherit;
		transition: transform 0.58s var(--mc-ref-e), box-shadow 0.58s var(--mc-ref-e);
		will-change: transform;
	}

	body.mc-nav-open .mc-site-push {
		transform: translateX(calc(-1 * var(--mc-nav-width)));
		box-shadow: 12px 0 48px rgba(15, 13, 11, 0.14);
	}

	/* Le fond ne défile plus, mais le tiroir reste scrollable au doigt. */
	body.mc-nav-open {
		overflow: hidden;
	}

	body.mc-nav-open .mc-site-push {
		touch-action: none;
	}

	/* Tiroir */
	.mc-mobile-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--mc-nav-width);
		z-index: 10050;
		display: flex;
		flex-direction: column;
		background: var(--mc-ref-noir);
		color: var(--mc-ref-creme);
		border-left: 1px solid var(--mc-ref-ligne-noir);
		transform: translateX(100%);
		transition: transform 0.58s var(--mc-ref-e);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.mc-mobile-nav:focus {
		outline: none;
	}

	.mc-mobile-nav.is-open {
		transform: translateX(0);
	}

	.mc-mobile-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: clamp(18px, 4vw, 26px) clamp(20px, 5vw, 28px);
		border-bottom: 1px solid var(--mc-ref-ligne-noir);
		flex-shrink: 0;
	}

	.mc-mobile-nav__label {
		font-family: var(--mc-font-sans);
		font-size: 9px;
		font-weight: 300;
		letter-spacing: 0.42em;
		text-transform: uppercase;
		color: var(--mc-ref-or);
	}

	.mc-mobile-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-right: -0.35rem;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--mc-ref-creme);
		cursor: pointer;
		transition: color 0.35s var(--mc-ref-e);
	}

	.mc-mobile-nav__close:hover,
	.mc-mobile-nav__close:focus-visible {
		color: var(--mc-ref-or);
		outline: none;
	}

	.mc-mobile-nav__close svg {
		display: block;
	}

	.mc-mobile-nav__body {
		flex: 1;
		padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 28px);
	}

	.mc-mobile-nav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.mc-mobile-nav__list li {
		margin: 0;
		border-bottom: 1px solid var(--mc-ref-ligne-noir);
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.5s var(--mc-ref-e), transform 0.5s var(--mc-ref-e);
	}

	.mc-mobile-nav.is-open .mc-mobile-nav__list li {
		opacity: 1;
		transform: none;
	}

	.mc-mobile-nav.is-open .mc-mobile-nav__list li:nth-child(1) { transition-delay: 0.06s; }
	.mc-mobile-nav.is-open .mc-mobile-nav__list li:nth-child(2) { transition-delay: 0.12s; }
	.mc-mobile-nav.is-open .mc-mobile-nav__list li:nth-child(3) { transition-delay: 0.18s; }
	.mc-mobile-nav.is-open .mc-mobile-nav__list li:nth-child(4) { transition-delay: 0.24s; }
	.mc-mobile-nav.is-open .mc-mobile-nav__list li:nth-child(5) { transition-delay: 0.3s; }

	.mc-mobile-nav__list a {
		display: block;
		padding: 1.05rem 0;
		font-family: "Cormorant Garamond", Georgia, serif;
		font-size: clamp(22px, 5vw, 28px);
		font-weight: 300;
		line-height: 1.2;
		color: var(--mc-ref-creme);
		text-decoration: none;
		transition: color 0.35s var(--mc-ref-e);
	}

	.mc-mobile-nav__list a:hover,
	.mc-mobile-nav__list a:focus-visible {
		color: var(--mc-ref-or);
		outline: none;
	}

	.mc-mobile-nav__foot {
		padding: clamp(20px, 4vw, 28px);
		border-top: 1px solid var(--mc-ref-ligne-noir);
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
		flex-shrink: 0;
	}

	.mc-mobile-nav__foot a {
		font-family: var(--mc-font-sans);
		font-size: 10px;
		font-weight: 300;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: rgba(247, 244, 238, 0.72);
		text-decoration: none;
		transition: color 0.35s var(--mc-ref-e);
	}

	.mc-mobile-nav__foot a:hover {
		color: var(--mc-ref-or);
	}

	/* Hamburger → croix */
	.mc-nav-toggle[aria-expanded="true"] .mc-svg-menu__line--top {
		transform: translateY(5px) rotate(45deg);
	}

	.mc-nav-toggle[aria-expanded="true"] .mc-svg-menu__line--mid {
		opacity: 0;
	}

	.mc-nav-toggle[aria-expanded="true"] .mc-svg-menu__line--bot {
		transform: translateY(-5px) rotate(-45deg);
	}

	/* Pages éditoriales — tiroir crème */
	body.mc-editorial .mc-mobile-nav {
		background: var(--mc-ref-creme);
		color: var(--mc-ref-encre);
		border-left-color: var(--mc-ref-ligne);
	}

	body.mc-editorial .mc-mobile-nav__head {
		border-bottom-color: var(--mc-ref-ligne);
	}

	body.mc-editorial .mc-mobile-nav__close {
		color: var(--mc-ref-encre);
	}

	body.mc-editorial .mc-mobile-nav__list li {
		border-bottom-color: var(--mc-ref-ligne);
	}

	body.mc-editorial .mc-mobile-nav__list a {
		color: var(--mc-ref-encre);
	}

	body.mc-editorial .mc-mobile-nav__list a:hover,
	body.mc-editorial .mc-mobile-nav__list a:focus-visible {
		color: var(--mc-ref-or);
	}

	body.mc-editorial .mc-mobile-nav__foot {
		border-top-color: var(--mc-ref-ligne);
	}

	body.mc-editorial .mc-mobile-nav__foot a {
		color: var(--mc-ref-muted);
	}

	body.mc-editorial.mc-nav-open .mc-site-push {
		box-shadow: 12px 0 48px rgba(30, 27, 24, 0.08);
	}

	/* Le changement de couleur seul ne suffit pas à situer le focus clavier. */
	.mc-nav-toggle:focus-visible,
	.mc-mobile-nav__close:focus-visible,
	.mc-mobile-nav__list a:focus-visible,
	.mc-mobile-nav__foot a:focus-visible {
		outline: 1px solid var(--mc-ref-or);
		outline-offset: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	@media (max-width: 900px) {
		.mc-site-push,
		.mc-mobile-nav,
		.mc-nav-backdrop,
		.mc-mobile-nav__list li {
			transition: none !important;
		}

		.mc-mobile-nav__list li {
			opacity: 1;
			transform: none;
		}
	}
}