@media (max-width: 767px) {

	.navigation-wrapper li a {
		font-size: 20px !important;
		line-height: 1.5em;
	}

}

@media (max-width: 1199px) {

	/*
	--------------------------------------
	Container
	--------------------------------------
	*/

	.navigation-wrapper {
		position: fixed;
		z-index: 100;
		top: 0;        /* toujours full-screen, le panel se positionne via --nav-panel-top */
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
	}

	.navigation-wrapper .navigation-container {
		position: absolute;
		top: var(--nav-panel-top, 0px);
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		background-color: var(--e-global-color-secondary, #080c16);
		width: 100%;
		height: auto;
		margin: 0;
		list-style-type: none;
		pointer-events: all;
		z-index: 1;
	}

	/*
	--------------------------------------
	Logo et burger toujours au-dessus de l'overlay
	--------------------------------------
	*/

	.main-header__container .main-logo,
	.burger-container {
		position: relative;
		z-index: 102;
	}

	.navigation-wrapper.--is-active .navigation-container {
		display: flex;
	}

	/* Overlay couvre tout l'écran (y compris au-dessus du panel) */
	.navigation-wrapper.--is-active .overlay {
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100% !important;
	}

	/*
	--------------------------------------
	Header ouvert
	--------------------------------------
	*/

	.main-header__container.--menu-open,
	.main-header__container.--menu-open .main-header__header-container {
		background: #080c16f2 !important;
	}

	/*
	--------------------------------------
	Burger
	--------------------------------------
	*/

	.burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		color: currentColor;
	}

	.home .burger {
		color: #fff;
		background: transparent;
		box-shadow: none;
		border: none;
	}

	.home .main-header__container--is-fixed .burger {
		color: var(--e-global-color-primary);
	}

	/*
	--------------------------------------
	Close
	--------------------------------------
	*/

	.close {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--e-global-color-primary);
		padding: 0.5em;
		cursor: pointer;
		flex-shrink: 0;
	}

	/*
	--------------------------------------
	Overlay
	--------------------------------------
	*/

	.overlay {
		display: none;
	}

	.navigation-wrapper.--is-active .overlay {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh;
		background: #080c16f2;
		pointer-events: all;
	}

	/*
	--------------------------------------
	Menu
	--------------------------------------
	*/

	.navigation-container .navigation-links {
		overflow-y: auto;
		padding-top: 1em;
	}

	.navigation-container .navigation-links__list {
		flex-direction: column;
	}

	.navigation-wrapper li {
		position: relative;
		padding-left: 2em;
		padding-bottom: 1.5em;
	}

	.navigation-wrapper li a {
		display: inline-block;
		text-decoration: none;
	}

	.navigation-wrapper .menu-link {
		font-weight: 600;
		color: var(--e-global-color-primary);
	}

	.navigation-container li.menu-item-has-children > .menu-link {
		display: block;
		width: 100%;
	}

	.navigation-container .sub-menu {
		display: flex;
		flex-direction: column;
		gap: 0.75em;
		opacity: 1;
		visibility: visible;
		height: auto;
		pointer-events: all;
		padding-top: 0.75em;
		padding-left: 1.25em;
	}

	.navigation-wrapper .sub-menu li {
		padding: 0;
		padding-bottom: 0;
	}

	.navigation-container .sub-menu .menu-link {
		font-size: 18px !important;
		font-weight: 400;
		color: var(--e-global-color-primary);
	}


}

@media (min-width: 1200px) {

	/*
	--------------------------------------
	Menu
	--------------------------------------
	*/

	.navigation-wrapper ul {
		position: relative;
		display: flex;
		justify-content: center;
		padding: 0 3em;
	}

	.navigation-container li {
		display: flex;
		align-items: center;
	}

	.navigation-container .menu > .menu-item {
		justify-content: center;
	}

	.navigation-container .menu-item-has-children {
		position: relative;
	}

	.navigation-container .menu-link--account .menu-link {
		backdrop-filter: blur(12px);
		background-color: #ffffff26;
		padding: 5px 8px;
		border-radius: 50px;
	}

	/* Chevron */

	.navigation-container .menu-item-has-children > .menu-link {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.navigation-container .menu-item-has-children > .menu-link .menu-chevron {
		transition: transform 0.3s ease-in-out;
		flex-shrink: 0;
	}

	.navigation-container .menu-item-has-children:hover > .menu-link .menu-chevron {
		transform: rotate(180deg);
	}

	/* Dropdown */

	.navigation-container li .sub-menu {
		position: absolute;
		z-index: 20;
		top: calc(100% + 8px);
		left: 0;
		flex-direction: column;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
		transform: translateY(-6px);
		width: auto;
		min-width: 200px;
		margin: 0;
		padding: 0.5em 0;
		background: rgba(18, 22, 35, 0.95);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-radius: 6px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	}

	.navigation-container li:hover .sub-menu {
		opacity: 1;
		pointer-events: all;
		transform: translateY(0);
	}

	/* Pont transparent qui comble le gap entre le li et le sous-menu */
	.navigation-container li .sub-menu::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 0;
		right: 0;
		height: 8px;
	}

	.navigation-container .sub-menu .menu-link {
		color: rgba(255, 255, 255, 0.9) !important;
		padding: 0.6em 1.5em !important;
		display: block;
		white-space: nowrap;
		width: 100%;
	}

	.navigation-container .sub-menu .menu-link:hover {
		color: #ffffff !important;
		border-bottom: none !important;
		background-color: #ffffff0d;
	}

	.navigation-container .sub-menu .menu-item--all-products {
		display: none;
	}

	.navigation-actions-container,
	.close,
	.burger-container,
	.navigation-actions-container {
		display: none;
	}

}