/* ==========================================================================
   Burger + menu mobile.

   Burger : deux traits (le second plus court, il s'allonge au survol).
   Menu : <dialog> plein écran qui s'ouvre en rideau depuis le haut ; les liens montent
   en cascade derrière un masque ; le burger se transforme en croix.
   L'état ouvert est la classe .est-ouvert (posée par menu-mobile.js après showModal()),
   ce qui permet d'animer aussi la fermeture.
   ========================================================================== */

/* ---------- Burger ---------- */
.burger {
	place-items: center;
	width: var(--burger-zone);
	height: var(--burger-zone);
	margin-right: calc((var(--burger-zone) - var(--burger-w)) / -2);
	color: var(--c-black);
}

.burger--croix {
	display: grid;
}

.burger__icone {
	position: relative;
	display: block;
	width: var(--burger-w);
	height: var(--burger-h);
}

.burger__trait {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: var(--burger-trait);
	border-radius: var(--burger-trait);
	background: currentColor;
	transition:
		top var(--t-menu) var(--courbe-rideau),
		width var(--t-hover),
		transform var(--t-menu) var(--courbe-rideau);

	& + & {
		top: calc(100% - var(--burger-trait));
		width: var(--burger-court);
	}
}

.burger:hover .burger__trait + .burger__trait,
.burger:focus-visible .burger__trait + .burger__trait {
	width: 100%;
}

/* ---------- Fenêtre ---------- */
.menu-mobile {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 var(--page-margin) var(--space-l);
	border: 0;
	background: var(--c-white);
	color: var(--c-black);
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--t-menu) var(--courbe-rideau) var(--t-menu-pas);

	&::backdrop {
		background: transparent;
	}

	&[open] {
		display: flex;
		flex-direction: column;
	}

	&.est-ouvert {
		clip-path: inset(0);
		transition-delay: 0s;
	}
}

/* Barre du haut : mêmes dimensions que le header pour que logo et burger ne bougent pas. */
.menu-mobile__haut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-s);
}

.menu-mobile--compact .menu-mobile__haut {
	padding-block: var(--space-xs);
}

.menu-mobile__logo {
	display: block;
	width: var(--logo-w);
	transition: width var(--t-header);
}

.menu-mobile--compact .menu-mobile__logo {
	width: var(--logo-w-compact);
}

.menu-mobile__logo-img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--logo-ratio);
}

/* Croix : les deux traits se rejoignent au centre et pivotent. */
.menu-mobile.est-ouvert .burger--croix .burger__trait {
	top: calc(50% - var(--burger-trait) / 2);
	width: 100%;
	transform: rotate(45deg);
	transition-delay: calc(var(--t-menu-pas) * 3);

	& + .burger__trait {
		transform: rotate(-45deg);
	}
}

/* ---------- Liens : montée en cascade derrière un masque ---------- */
.menu-mobile__nav {
	margin-block: auto;
}

.menu-mobile__item {
	overflow: hidden; /* masque d'où les liens montent à l'ouverture */
}

.menu-mobile__lien {
	display: block;
	font-weight: var(--fw-bold);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	padding-block: var(--space-xs);
	transition: color var(--t-hover);

	&:hover,
	&[aria-current] {
		color: var(--c-blue);
	}
}

.menu-mobile__texte {
	display: block;
	transform: translateY(110%);
	transition: transform var(--t-menu) var(--courbe-rideau);
}

.menu-mobile.est-ouvert {
	& .menu-mobile__texte {
		transform: none;
		transition-delay: calc(var(--t-menu-pas) * (var(--i, 1) + 2));
	}
}

/* ---------- Logo et pied : fondu ---------- */
.menu-mobile__logo,
.menu-mobile__pied {
	opacity: 0;
	transform: translateY(var(--space-xs));
	transition:
		opacity var(--t-hover),
		transform var(--t-hover),
		width var(--t-header);
}

.menu-mobile.est-ouvert {
	& .menu-mobile__logo,
	& .menu-mobile__pied {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--t-menu-pas) * 4);
	}

	& .menu-mobile__pied {
		transition-delay: calc(var(--t-menu-pas) * 7);
	}
}

.menu-mobile__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	padding-top: var(--space-m);
	border-top: var(--line-width) solid var(--c-blue-ghost);
}

.menu-mobile__store {
	color: var(--c-blue);

	& .lien-fleche__fleche {
		color: var(--c-blue);
	}
}

.menu-mobile__reseaux {
	display: flex;
	gap: var(--space-s);
}

.menu-mobile__reseau-icone {
	width: var(--menu-icone-w);
	height: auto;
}

/* Page figée derrière le menu ouvert. */
html:has(.menu-mobile[open]) {
	overflow: hidden;
}

/* Le menu ne sert qu'en mobile : jamais affiché au-delà. */
@media (min-width: 768px) {
	.menu-mobile {
		display: none !important;
	}
}