/*
--------------------------------------
Menu - Mobile & Global
--------------------------------------
*/

.navigation-container ul {
	display: flex;
	justify-content: flex-end;
	gap: calc(0px + (20 - 0) * ((100vw - 320px) / (1920 - 320)));
	width: 100%;
}


.navigation-wrapper .menu-link {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 15px;
	color: var(--color-text);
	transition: all 0.35s ease-in-out;
	letter-spacing: 0.075em;
	text-decoration: none;
}

body .navigation-wrapper .menu-link {
	color: #FFFCF6;
	transition: all 0.35s ease-in-out;
	line-height: 1em;
}

/* Submenu global */
.navigation-container .sub-menu .menu-item {
	transition: all 0.35s ease-in-out;
}

.navigation-container .sub-menu .menu-link {
	z-index: 15;
	color: var(--e-global-color-primary);
	text-transform: none !important;
	white-space: nowrap;
	padding-right: 0 !important;
}

.navigation-container .sub-menu .menu-link .ast-icon.icon-arrow {
	display: none;
}

.navigation-links__list.is-hidden {
	opacity: 0;
	pointer-events: none;
}

@media (any-hover: hover) {
	.menu > .current-menu-item a[aria-current="page"] {
		border-bottom: 1px solid currentColor;
	}
}

/*
--------------------------------------
Menu Fullscreen - DESKTOP (>= 1200px)
--------------------------------------
*/



	/* ========================================
	   FULLSCREEN OVERLAY
	   ======================================== */

	.main-header--fullscreen .navigation-wrapper {
		position: fixed;
		inset: 0;
		height: 100vh;
		background: var(--color-white); /* Fond blanc */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: var(--z-menu);
		transition: opacity 0.4s ease, visibility 0.4s ease;
		overflow: hidden;
	}

	.main-header--fullscreen.is-nav-open .navigation-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ========================================
	   CONTENEUR VAGUES
	   ======================================== */

	.menu-wave-container {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		opacity: 1;
		transition: opacity 0.6s ease-in-out;
	}

	/* Cache les vagues quand une image de fond est visible */
	.navigation-container.has-background-visible .menu-wave-container {
		opacity: 0;
	}

	/* ========================================
	   IMAGE DE FOND DU MENU
	   ======================================== */

	.menu-background-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		opacity: 0;
		transition: opacity 1.4s ease-in-out;
	}

	.menu-background-image:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.2);
	}

	.menu-background-image.is-visible {
		opacity: 1;
	}

	/* Canvas Curtains.js prend tout l'espace */
	.menu-background-image canvas {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Fallback CSS pour navigateurs sans WebGL */
	.menu-background-image.css-fallback {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.menu-background-image.css-fallback::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
		z-index: 1;
	}

	.menu-image-item {
		background-image: var(--menu-image-bg, none);
	}

	@media (max-width: 1199px) {
		.menu-image-item {
			background-image: var(--menu-image-mobile-bg, var(--menu-image-bg, none));
		}
	}

	/* ========================================
	   CONTAINER CONTENU
	   ======================================== */

	.navigation-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: clamp(60px, 8vh, 100px) clamp(var(--spacing-2xl), 6vw, 120px);
		z-index: 1;
	}

	/* ========================================
	   BOUTON FERMER (top-right)
	   ======================================== */

	.main-header--fullscreen .close {
		position: absolute;
		top: clamp(24px, 4vh, 48px);
		right: clamp(24px, 4vw, 48px);
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: var(--border-width) solid rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		cursor: pointer;
	color: var(--color-text);
		z-index: 3;
		transition: all 0.25s ease;
		padding: 0;
	}

	.main-header--fullscreen .close:hover {
		background: rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.4);
		transform: rotate(90deg);
	}

	.main-header--fullscreen .close svg {
		width: 20px;
		height: 20px;
	}

	/* ========================================
	   LOGO CENTRÉ (morphing)
	   ======================================== */

	/* ========================================
	   MENU ITEMS L1 & L2 - Wrappers communs
	   ======================================== */

	/* Propriétés communes L1 et L2 */
	.main-header--fullscreen .navigation-submenu-stage,
	.main-header--fullscreen .navigation-links {
		position: absolute;
		top: clamp(60px, 10vh, 100px);
		z-index: 2;
		text-align: left;
	}

	.menu-logo-container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		pointer-events: auto;
		max-width: 80%;
		text-align: center;
	}

	.menu-logo-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}

	.menu-logo-image {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		will-change: opacity;
		transition: opacity 0.3s ease;
	}

	.menu-logo-image__img {
		width: clamp(120px, 20vw, 175px);
		height: auto;
		object-fit: contain;
		opacity: 0.15;
		transition: opacity 0.3s ease;
	}

	.menu-logo-link:hover .menu-logo-image__img,
	.menu-logo-link:focus .menu-logo-image__img {
		opacity: 1;
	}

	/* L1 - Propriétés spécifiques */
	.main-header--fullscreen .navigation-links,
	.main-header--fullscreen .navigation-submenu-stage{
		max-width: 100%;
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0 25px;
	}

	.main-header--fullscreen .navigation-submenu-list,
	.main-header--fullscreen .navigation-links__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: clamp(var(--spacing-md), 1vh, var(--spacing-xl));
		align-items: flex-start;
	}

	.main-header--fullscreen .navigation-submenu-list > li,
	.main-header--fullscreen .navigation-links__list > li {
		overflow: visible;
		position: relative;
	}

	/* Coins décoratifs supprimés pour les items L1 */

	.main-header--fullscreen .navigation-submenu-list .menu-link,
	.main-header--fullscreen .navigation-links__list .menu-link {
		display: inline-block;
		font-family: var(--e-global-typography-primary-font-family), sans-serif;
		font-size: clamp(20px, 2vw + 8px, 40px);
		font-weight: var(--font-weight-light);
		letter-spacing: .115em;
		text-transform: uppercase;
		color: var(--color-text);
		transition: color 0.3s ease;
		will-change: transform, opacity;
		position: relative;
		cursor: pointer;
	}

	.main-header--fullscreen .navigation-submenu-list .menu-item-product .menu-link{
		font-size: clamp(16px, 3vw + 8px, 38px);
	}


	/* Conteneur pour la duplication du texte */
	.main-header--fullscreen .navigation-submenu-list .menu-link-wrapper,
	.main-header--fullscreen .navigation-links__list .menu-link-wrapper {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	/* Texte original */
	.main-header--fullscreen .navigation-submenu-list .menu-link-original,
	.main-header--fullscreen .navigation-links__list .menu-link-original {
		display: inline-block;
		letter-spacing: .115em;
	}

	/* Texte dupliqué (clone) */
	.main-header--fullscreen .navigation-submenu-list .menu-link-clone,
	.main-header--fullscreen .navigation-links__list .menu-link-clone {
		position: absolute;
		top: 0;
		left: 0;
		letter-spacing: 0.065em;
		display: inline-block;
		pointer-events: none;
		font-weight: var(--font-weight-bold);
	}

	/* Caractères (chars de SplitText) */
	.main-header--fullscreen .navigation-submenu-list .menu-link-wrapper .char,
	.main-header--fullscreen .navigation-links__list .menu-link-wrapper .char {
		display: inline-block;
		will-change: transform, opacity;
	}

	/* Wrapping lettres SplitText */
	.main-header--fullscreen .menu-link .char {
		display: inline-block;
		overflow: hidden;
		will-change: transform, opacity;
	}

	/* Cache les submenus natifs */
	.main-header--fullscreen .navigation-links__list .sub-menu {
		display: none;
	}

	/* ========================================
	   MENU L2 - Propriétés spécifiques
	   ======================================== */

	/* L2 - Positionnement et états de visibilité */
	.main-header--fullscreen .navigation-submenu-stage {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.main-header--fullscreen .navigation-submenu-stage.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ========================================
	   BOUTON RETOUR - Style Figma pill
	   ======================================== */

	.main-header--fullscreen .navigation-submenu-back {
		position: absolute;
		bottom: 65px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		opacity: 0;

		pointer-events: none;
		white-space: nowrap;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back {
		display: inline-flex;
		align-items: center;
		gap: 22px;
		padding: 10px 44px;
		border: none;
		border-radius: 37px;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
		background: transparent;
		cursor: pointer;
		transition: background-position 0.45s ease;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back:hover {
		opacity: 1;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 37px;
		padding: 1px;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.85) 0%,
			var(--e-global-color-accent, #E2001A) 33.33%,
			var(--e-global-color-accent, #E2001A) 66.67%,
			rgba(255, 255, 255, 0.1) 100%
		);
		background-size: 300% 100%;
		background-position: 100%;
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		pointer-events: none;
		transition: background-position 0.45s ease;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back:hover::after {
		background-position: 0%;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back__label {
		font-family: var(--font-primary);
		font-size: 24px;
		font-weight: 300;
		font-style: normal;
		color: #ffffff;
		text-shadow: 0px 4px 95px rgba(0, 0, 0, 0.4);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 30px;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 14px;
		height: 22px;
		flex-shrink: 0;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back__chevron svg {
		width: 100%;
		height: 100%;
	}

	/* Gradient appliqué directement via SVG linearGradient - pas de color override nécessaire */

	/* Chevrons: glisse gauche + fade out, reapparait en place - une seule fois par hover */
	@keyframes btn-back-chevron-anim {
		0%   { transform: translateX(0);     opacity: 1; }
		38%  { transform: translateX(-10px); opacity: 0; }
		39%  { transform: translateX(0);     opacity: 0; }
		100% { transform: translateX(0);     opacity: 1; }
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back:hover .btn-back__chevron--left {
		animation: btn-back-chevron-anim 0.55s ease-out 1 forwards;
	}

	.main-header--fullscreen .navigation-submenu-back .btn-back:hover .btn-back__chevron--right {
		animation: btn-back-chevron-anim 0.55s ease-out 1 forwards;
		animation-delay: 0.1s;
	}

	.navigation-container:has(.navigation-submenu-stage.is-visible) .navigation-submenu-back {
		pointer-events: auto;
	}

	/* ========================================
	   LISTE L2 - Styles spécifiques
	   ======================================== */

	/* Les styles de base (list-style, flex, gap, etc.) sont fusionnés avec L1 plus haut */

	.navigation-wrapper .has-background-visible .menu-link,
	.main-header--fullscreen .has-background-visible .navigation-submenu-list .menu-link {
		color: var(--color-secondary);
	}

	/* Cache les submenus dans le L2 */
	.main-header--fullscreen .navigation-submenu-list .sub-menu {
		display: none;
	}

	/* ========================================
	   ANIMATION STATES
	   ======================================== */


	/* ========================================
	   PERFORMANCE & ACCESSIBILITY
	   ======================================== */

	/* Optimisations GPU */
	.menu-wave-container,
	.navigation-links__list,
	.navigation-submenu-stage {
		will-change: transform, opacity;
	}

	/* Focus visible pour accessibilité */
	.main-header--fullscreen .burger:focus-visible,
	.main-header--fullscreen .close:focus-visible,
	.main-header--fullscreen .navigation-submenu-back:focus-visible,
	.main-header--fullscreen .menu-link:focus-visible {
		outline: 2px solid rgb(225, 5, 28);
		outline-offset: 4px;
	}

	/* Reduce motion pour accessibilité */
	@media (prefers-reduced-motion: reduce) {
		.main-header--fullscreen .navigation-wrapper,
		.main-header--fullscreen .navigation-links__list,
		.main-header--fullscreen .navigation-submenu-stage {
			transition: none !important;
		}
	}


/*
--------------------------------------
Menu Mobile (< 1200px) - Slide-in existant
--------------------------------------
*/

/*@media (max-width: 1199px) {*/

/*	!* Cache les éléments desktop *!*/
/*	.menu-wave-container,*/
/*	.menu-logo-container {*/
/*		display: none !important;*/
/*	}*/

/*	!* Slide-in mobile - comportement existant conservé *!*/
/*	.navigation-wrapper {*/
/*		position: fixed;*/
/*		top: 0;*/
/*		left: 0;*/
/*		width: 100%;*/
/*		height: 100vh;*/
/*		background: #fff;*/
/*		transition: transform 0.3s ease;*/
/*		z-index: 999999;*/
/*		overflow-y: auto;*/
/*	}*/

/*	.navigation-wrapper.--is-active {*/
/*		transform: translateX(0);*/
/*	}*/

/*	.navigation-container {*/
/*		padding: 60px var(--spacing-lg) var(--spacing-lg);*/
/*		display: flex;*/
/*		flex-direction: column;*/
/*		gap: var(--spacing-lg);*/
/*	}*/

/*	.close {*/
/*		position: absolute;*/
/*		top: 16px;*/
/*		right: 16px;*/
/*		width: 32px;*/
/*		height: 32px;*/
/*		display: flex;*/
/*		align-items: center;*/
/*		justify-content: center;*/
/*		cursor: pointer;*/
/*		background: transparent;*/
/*		border: none;*/
/*		color: #000;*/
/*		padding: 0;*/
/*	}*/

/*	.navigation-links__list {*/
/*		flex-direction: column;*/
/*		gap: var(--spacing-md);*/
/*	}*/

/*	.menu-link {*/
/*		font-size: var(--font-size-lg);*/
/*		font-weight: var(--font-weight-semibold);*/
/*		color: #000;*/
/*	}*/

/*	.burger-container {*/
/*		display: block;*/
/*	}*/

/*	!* Overlay pour mobile *!*/
/*	.overlay {*/
/*		position: fixed;*/
/*		inset: 0;*/
/*		background: rgba(0, 0, 0, 0.5);*/
/*		opacity: 0;*/
/*		visibility: hidden;*/
/*		transition: opacity 0.3s ease, visibility 0.3s ease;*/
/*		z-index: 999998;*/
/*	}*/

/*	.navigation-wrapper.--is-active ~ .overlay,*/
/*	.overlay.--is-active {*/
/*		opacity: 1;*/
/*		visibility: visible;*/
/*	}*/

/*}*/

/*
--------------------------------------
DISABLE HOVER ANIMATIONS
--------------------------------------
*/

/* Disable all hover animations for performance */
.main-header--fullscreen .menu-link,
.main-header--fullscreen .menu-link-wrapper .char {
	will-change: auto !important;
	transition: none !important;
}


/*
--------------------------------------
Product Image Preview (bottom-right, au-dessus des réseaux sociaux)
--------------------------------------
*/

.main-header--fullscreen .menu-product-preview {
	position: absolute;
	bottom: calc(clamp(24px, 4vh, 48px) + 68px);
	right: clamp(24px, 4vw, 48px);
	z-index: 3;
	width: clamp(140px, 12vw, 220px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 30px;
	border: 1px solid #E1061B;
	background: linear-gradient(149deg, rgba(224, 224, 224, 0.60) 20.81%, rgba(217, 217, 217, 0.05) 99.35%);
	box-shadow: 0 4.196px 25.173px -1.049px rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(10px);
	padding: 25px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.main-header--fullscreen .menu-product-preview.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.main-header--fullscreen .menu-product-preview__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/*
--------------------------------------
Réseaux sociaux - Overlay menu (bottom-right)
--------------------------------------
*/

.main-header--fullscreen .menu-social {
	position: absolute;
	bottom: clamp(24px, 4vh, 48px);
	right: clamp(24px, 4vw, 48px);
	z-index: 3;
	color: var(--color-black, #000000);
}

.main-header--fullscreen .menu-social .footer-social {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 16px);
	flex-direction: row;
}

.main-header--fullscreen .menu-social .footer-social__list {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 16px);
	flex-direction: row;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	width: auto;
}

.main-header--fullscreen .menu-social .footer-social__item {
	margin: 0;
}

.main-header--fullscreen .menu-social .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.main-header--fullscreen .menu-social .footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 5px;
	border-radius: 7px;
	color: inherit;
	transition: var(--transition-base, 250ms ease);
}

.main-header--fullscreen .menu-social .footer-social__link > span:not(.screen-reader-text),
.main-footer__container .footer-social .footer-social__link > span:not(.screen-reader-text) {
	display: none;
}

.main-header--fullscreen .menu-social .footer-social__link > i,
.main-header--fullscreen .menu-social .footer-social__link > svg,
.main-footer__container .footer-social .footer-social__link > i,
.main-footer__container .footer-social .footer-social__link > svg {
	display: block;
}

.main-header--fullscreen .menu-social .footer-social__link > i,
.main-header--fullscreen .menu-social .footer-social__link > svg {
	font-size: 1.75em;
}

.main-header--fullscreen .menu-social .footer-social__link:hover,
.main-header--fullscreen .menu-social .footer-social__link:focus {
	color: var(--color-primary, #e1051c);
	background-color: var(--color-gray-100, #f3f4f6);
}

/* Adapté au fond image (fond sombre) */
.main-header--fullscreen .has-background-visible .menu-social .footer-social__link {
	color: var(--color-secondary, #F5F1E8);
}

.main-header--fullscreen .has-background-visible .menu-social .footer-social__link:hover,
.main-header--fullscreen .has-background-visible .menu-social .footer-social__link:focus {
	color: var(--color-white, #ffffff);
	background-color: rgba(255, 255, 255, 0.1);
}

.main-header--fullscreen .menu-social .footer-social__link svg {
	height: 100%;
	width: 100%;
}

.main-header--fullscreen .menu-social .footer-social__icon {
	display: block;
	width: 1.75em;
	height: 1.75em;
}