@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: 5;
		top: 0;
		bottom: 0;
		width: 100%;
		right: 0;
		pointer-events: none;
	}

	.navigation-wrapper .navigation-container {
		position: relative;
		background-color: var(--e-global-color-secondary);
		transform: translate3d(-100%, 0, 0);
		transition: all 0.3s ease-in-out;
		width: 100%;
		max-width: 320px;
		height: 100vh;
		margin: 0;
		list-style-type: none;
	}

	.navigation-wrapper--is-active .navigation-container {
		transform: translate3d(0, 0, 0);
		pointer-events: all;
	}

	/*
	--------------------------------------
	Burger
	--------------------------------------
	*/
	.burger {
		color: #fff;
		width: 40px;
		margin: auto;
	}

	.home .burger {
		color: #fff;
	}

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

	/*
	--------------------------------------
	Close
	--------------------------------------
	*/
	.close {
		display: flex;
		justify-content: flex-end;
		color: #fff;
		padding: 1em 1em 2em 2em;
	}

	/*
	--------------------------------------
	Overlay
	--------------------------------------
	*/
	.overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100vh;
		width: 0;
		background: rgba(13, 15, 24, .3);
		transition: all 0.3s ease-in-out;
	}

	.navigation-wrapper--is-active .overlay {
		width: 100%;
		pointer-events: all;
	}

	/*
	--------------------------------------
	Menu
	--------------------------------------
	*/
	/*Parent*/
	.navigation-container ul {
		flex-direction: column;
	}

	.navigation-wrapper li {
		position: relative;
		margin-bottom: 10px;
	}

	.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:after {
		position: absolute;
		z-index: 10;
		right: 20px;
		top: 0.5em;
		border-bottom: 2px solid var(--e-global-color-primary);
		border-right: 2px solid var(--e-global-color-primary);
	}

	.navigation-container li.menu-item-has-children--active:after {
		transform: rotate(225deg);
	}

	.navigation-actions-list li a {
		display: flex;
		align-items: center;
	}

	.navigation-container li.menu-item-has-children a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.navigation-actions-list li:nth-child(n+5) a span {
		margin-left: 0.5em;
	}

	.main-header__container--is-fixed .navigation-container li.menu-item-has-children > .menu-link:after {
		border-bottom: 2px solid #fff;
		border-right: 2px solid #fff;
	}

	/*Submenu*/
	.ast-header-break-point .dropdown-menu-toggle {
		display: block;
	}

	.sub-menu {
		flex-direction: column;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: all 350ms ease-in-out;
		height: 0;
		margin-left: 50px;
	}

	.sub-menu--active {
		opacity: 1;
		visibility: visible;
		height: 100%;
		pointer-events: all;
		padding-top: .55em;
	}

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

	.navigation-container .sub-menu .menu-link {
		font-size: 18px !important;
		color: rgba(255, 255, 255, 0.75);
	}

	.navigation-container li .sub-menu .menu-link .menu-category-image {
		display: none;
	}

}

@media (min-width: 1200px) {

	/*
	--------------------------------------
	Menu
	--------------------------------------
	*/
	/*Parent*/
	.navigation-wrapper {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	/*commenter le position: relative si on souhaite que le sous-menu ne prenne pas toute la largeur du parent*/
	.navigation-wrapper ul {
		position: relative;
		display: flex;
		justify-content: center;
		padding: 0 1em;
	}

	/*décommenter le position: relative si on souhaite que le sous-menu s'affiche en dessous du menu parent*/
	.navigation-container li {
		/*position: relative;*/
		display: flex;
		justify-content: center;
		align-items: center;
	}

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

	/*body:not(.home) .navigation-wrapper .menu-item--parent > .menu-link,*/
	/*.main-header__container--is-fixed .navigation-wrapper .menu-link {*/
	/*	color: #000;*/
	/*}*/
	.navigation-wrapper .menu-link {
		font-size: calc(13.5px + (15 - 13.5) * ((100vw - 1200px) / (1920 - 1200)));
		padding: calc(5px + (10 - 5) * ((100vw - 1200px) / (1920 - 1200))) calc(5px + (22 - 5) * ((100vw - 1200px) / (1920 - 1200)));
	}

	.navigation-wrapper .menu-link:hover {
		border-bottom: 1px solid currentColor;
	}

	/*Submenu*/
	.navigation-container li .sub-menu {
		position: absolute;
		z-index: 10;
		top: 100%;
		left: 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		opacity: 0;
		background: transparent;
		pointer-events: none;
		line-height: 1.25em;
		transition: all 0.35s ease-in-out;
		width: 100%;
		margin-left: 0;
		padding: 2em 0;
	}

	.navigation-container li .sub-menu .menu-link {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 17px;
		font-weight: 400;
		color: var(--e-global-color-primary);
		line-height: 20px;
		letter-spacing: -0.68px;
		text-align: left;
	}

	.navigation-container li .sub-menu .menu-link .menu-category-image {
		margin-bottom: 1em;
	}

	.navigation-container li .sub-menu:after {
		content: "";
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.navigation-container li:hover .sub-menu {
		opacity: 1;
		pointer-events: all;
	}

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

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

	/*
	--------------------------------------
	White menu link
	--------------------------------------
	*/
	.has-white-menu-link .navigation-wrapper .menu-link:focus,
	.has-white-menu-link .navigation-wrapper .menu-link:hover {
		background: transparent;
		color: #fff;
	}

	.has-white-menu-link .navigation-wrapper .sub-menu .menu-link:focus,
	.has-white-menu-link .navigation-wrapper .sub-menu .menu-link:hover {
		background: #fff;
		color: #000;
	}

}

@media (min-width: 1200px) {

	.navigation-container {
		display: flex;
	}

	.navigation-container ul {
		display: flex;
		flex-direction: row;
		gap: calc(15px + (45 - 15) * ((100vw - 1200px) / (1920 - 1200)));
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.navigation-container .menu-link {
		font-size: 15px;
		color: #fff;
		text-decoration: none;
		white-space: nowrap;
		transition: all 0.35s ease-in-out;
		padding: 0;
	}

	.menu-wrapper .burger-toggle {
		display: none !important;
	}

	.navigation-wrapper.scroll-mode .burger-toggle,
	.scroll-mode .burger-toggle,
	.menu-wrapper .scroll-mode .burger-toggle {
		display: block !important;
		position: fixed;
		top: 30px;
		right: 30px;
		z-index: 1000;
		background: #333;
		color: white;
		border: none;
		padding: 15px 25px;
		font-size: 16px;
		font-weight: bold;
		border-radius: 8px;
		cursor: pointer;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}

	body:has(.scroll-mode) .menu-wrapper .burger-toggle {
		position: fixed;
		z-index: 1000;
		top: 20px;
		right: 30px;
		display: flex !important;
		align-items: center;
		gap: 10px;
		font-size: 17px;
		font-weight: 500;
		background: #fff;
		color: var(--e-global-color-primary);
		border: none;
		border-radius: 50px;
		cursor: pointer;
		text-transform: uppercase;
		transition: opacity 0.3s ease;
		padding: 15px 25px;
	}

	.navigation-wrapper--is-active body:has(.scroll-mode) .menu-wrapper .burger-toggle,
	.navigation-wrapper--is-active .navigation-wrapper.scroll-mode .burger-toggle,
	.navigation-wrapper--is-active .scroll-mode .burger-toggle,
	.navigation-wrapper--is-active .menu-wrapper .scroll-mode .burger-toggle {
		opacity: 0;
		pointer-events: none;
	}

	.navigation-wrapper.scroll-mode .navigation-container {
		display: none;
	}

	.navigation-container.desktop-menu-open {
		display: flex !important;
		align-items: center;
		position: fixed;
		top: 15px;
		right: -500px;
		opacity: 0;
		transform: translateX(20px);
		background: #fff;
		border-radius: 50px;
		z-index: 999;
		border: none;
		overflow: visible;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		height: 70px;
		padding: 0;
	}

	.navigation-container.desktop-menu-open.menu-visible {
		right: 30px;
		opacity: 1;
		transform: translateX(0);
		padding-right: 120px;
	}

	.navigation-container.desktop-menu-open ul {
		left: 15px;
		display: flex;
		flex-direction: row;
		gap: 0;
		border-radius: 5px;
		list-style: none;
		background: white;
		margin: 0;
		padding: 0;
		height: 100%;
	}

	.navigation-container.desktop-menu-open li .sub-menu {
		position: fixed;
		top: 85px;
		left: 0;
		right: 0;
		width: 100vw;
		height: auto;
		max-height: 60vh;
		overflow-y: auto;
		padding: 2em 2.5%;
	}

	.navigation-container.desktop-menu-open li:hover .sub-menu {
		opacity: 1;
		pointer-events: all;
		z-index: 1001;
	}

	.navigation-container.desktop-menu-open .menu-link {
		display: flex;
		align-items: center;
		font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)));
		color: #333;
		text-decoration: none;
		white-space: nowrap;
		border-radius: 0;
		transition: all 0.35s ease-in-out;
		border-right: 1px solid #eee;
		padding: 5px calc(5px + (20 - 5) * ((100vw - 1200px) / (1920 - 1200)));
	}

	.navigation-container.desktop-menu-open .menu-link:last-child {
		border-right: none;
	}

}

/*
--------------------------------------
Sous-menu pleine largeur du header
+ header blanc / texte #011339 à l'ouverture (desktop)
--------------------------------------
*/
@media (min-width: 1200px) {

	/* Espace entre le logo et le menu pour aérer le header */
	.main-header__header-container-inner {
		column-gap: clamp(30px, 5vw, 80px);
	}

	/* Pas de fond blanc sur le header quand on scroll (page black-menu) */
	body:not(.elementor-editor-active).has-black-menu-link .main-header__container--is-fixed {
		background-color: transparent;
	}

	/* Ombre sur le bouton burger (mode scroll) */
	.burger-toggle,
	body:has(.scroll-mode) .menu-wrapper .burger-toggle {
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
	}

	/*
	On retire le transform de la pilule ouverte : sinon il crée un
	bloc englobant et le sous-menu (position: fixed) s'ancre sur la
	pilule au lieu du viewport (d'où l'espace vide à gauche).
	Le slide-in reste géré par "right" + "opacity".
	*/
	.navigation-container.desktop-menu-open.menu-visible {
		transform: none;
	}

	/*
	Le sous-menu s'ancre sur le header (et non plus sur le <ul>)
	pour prendre toute la largeur du header.
	*/
	.navigation-container:not(.desktop-menu-open) .menu {
		position: static;
	}

	.navigation-container:not(.desktop-menu-open) li .sub-menu {
		left: 0;
		width: 100%;
		/* on aligne les colonnes sur le contenu du header (max-width 95%) */
		padding: 2em 2.5%;
	}

	/* Les <li> ne sont plus en grid : flex centré */
	.navigation-container li .sub-menu {
		display: flex !important;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: clamp(1em, 3vw, 3em);
	}

	/*
	Pont invisible sous le lien : comble l'espace entre le lien et le
	sous-menu (ancré en bas du header) pour ne pas perdre le :hover
	quand on descend la souris vers le sous-menu.
	Posé sur le lien (et non le <li>) pour ne pas casser l'ancrage
	pleine largeur du sous-menu.
	*/
	.navigation-container:not(.desktop-menu-open) li.menu-item-has-children > .menu-link {
		position: relative;
	}

	.navigation-container:not(.desktop-menu-open) li.menu-item-has-children > .menu-link::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 60px;
	}

	/* Quand un sous-menu est ouvert : header blanc + texte #011339 */
	.main-header__inner:has(.menu-item-has-children:hover) {
		background-color: #fff !important;
	}

	.main-header__inner:has(.menu-item-has-children:hover) .navigation-wrapper .menu-link,
	.main-header__inner:has(.menu-item-has-children:hover) .header-action__link,
	.main-header__inner:has(.menu-item-has-children:hover) .main-logo__link,
	.main-header__inner:has(.menu-item-has-children:hover) .main-logo__text,
	.main-header__inner:has(.menu-item-has-children:hover) .burger-toggle {
		color: #011339 !important;
	}

	/* Bouton contact lisible sur fond blanc */
	.main-header__inner:has(.menu-item-has-children:hover) .menu-link__contact,
	.main-header__inner:has(.menu-item-has-children:hover) .menu-link__contact .menu-link {
		color: #011339 !important;
		border-color: #011339 !important;
	}
}

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

	/* Supprimer le fond bleu du bouton burger (couleur par défaut du thème) */
	.burger-toggle {
		background: transparent !important;
		color: #fff !important;
		box-shadow: none !important;
	}

	/* Barre header toujours visible : fond bleu foncé + logo visible */
	.main-header__container,
	.main-header__inner,
	.main-header__header-container {
		background-color: var(--e-global-color-primary) !important;
	}

	/* Le logo reste visible même au scroll (pas de disparition) */
	.main-header__container--is-fixed .main-logo__img {
		opacity: 1 !important;
	}

	/* Menu ouvert : fond bleu (au lieu de rouge) + plein écran + scrollable */
	.navigation-wrapper .navigation-container {
		background-color: var(--e-global-color-primary) !important;
		max-width: 100% !important;
		width: 100% !important;
		/* 100dvh suit la hauteur réelle visible (barre d'adresse mobile) */
		height: 100vh !important;
		height: 100dvh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 3em;
	}

	/* Padding autour de la liste du menu (1er niveau uniquement) */
	.navigation-links > ul {
		padding: 20px;
	}

	/* Typo blanche + alignée à gauche */
	.navigation-wrapper .menu-link,
	.navigation-container .sub-menu .menu-link {
		color: #fff !important;
		text-align: left !important;
	}

	/* Flèches des sous-menus en blanc */
	.navigation-container li.menu-item-has-children:after,
	.main-header__container--is-fixed .navigation-container li.menu-item-has-children > .menu-link:after {
		border-bottom-color: #fff !important;
		border-right-color: #fff !important;
	}
}