body {
	position: relative;
	z-index: 1;
}

header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	max-width: 1920px;
}

.menu{
	display: flex;
	gap: 3em;
	position: relative;
	z-index: 1;
	justify-content: flex-end;
}

.menu .logoLink{
	width: auto;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	transition: ease all .3s;
	z-index: 10;
	padding: .5em;
	max-width: 20%;
	object-fit: contain;
}

.menu.scrolled .logoLink{
	height: 100%;
}

.menu img{
	height: auto;
	width: 100%;
	max-width: 100%;
	padding: 0 0 0 2em;
	object-fit: contain
;
}

.menu a {
	padding: 1em 0;
	display: flex;
	font-weight: 300;
}

.menu .menuElement svg {
	height: 1.1em;
	width: auto;
}

.menu .menuElement path {
	fill: var(--basicWhite);
}

.menu .containerMenuLink{
	display: flex;
	position: relative;
	width: 70%;
	gap: 3em;
	height: fit-content;
	justify-content: flex-end;
	align-items: center;
	padding: 0 2em 0 0;
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34);
	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34);
	transition: ease all .3s;
}

.menu.scrolled .containerMenuLink{
	width: 100%;
}

.menu .containerMenuLink > svg{
	width: auto;
	height: 101%;
	position: absolute;
	top: -.5px;
	right: calc(100% - 2px);
}

.menu .containerMenuLink > svg polygon{
	fill: var(--basicColor1);
}

.menu.scrolled .containerMenuLink > svg {
	animation-delay: 2s;
	opacity: 0;
	transition: ease all 0s .3s;

}

.menu .containerMenuLink .socials{
	display: flex;
	gap: .5em;
}

.menu .menuElement {
	height: fit-content;
}

.menu .socials svg {
	height: 1.5em;
	width: auto;
}

.menu .socials svg path{
	fill: var(--basicWhite);
}

.menu .parentSubMenu {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5em;
}

.menu .parentSubMenu > div {
	position:absolute;
	left: 50%;
	background-color: var(--basicWhite);
	z-index: -1;
	top: 100%;
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: center;
	padding: 1.5em 1em;
	transform: translate(-50%, -100%);
	transition: ease all .3s;
	width: max-content;
}
.menu .parentSubMenu:hover div, .menu .parentSubMenu > div:hover {
	transform: translate(-50%, 0);

}

.menu .parentSubMenu{
	cursor: initial;
}

.menu .parentSubMenu > div a{
	padding: 0;
	justify-content: center;
}

.menu .parentSubMenu > div hr{
	width: 30%;
	height: px;
	border: 1px solid #707070;
}

.menu .parentSubMenu > div hr:last-child{
	display: none;
}

.openMenu {
	display: none;
	transition: ease all .3s;
}


.activeLink{
	border: none;
	text-decoration: underline;
	text-decoration-color: var(--basicWhite);
	text-decoration-thickness: 1px;
	text-underline-offset: .5em;
}

.submenu a.activeLink{
	text-decoration-color: var(--basicColor1);
}

.submenu .parentLink{
	display: none;
}

@media screen and (max-width: 1600px) {/*
	.menu .logoLink{
		width: 10%;
	}

	.menu .containerMenuLink{
		width: 90%;
	}*/
	.menu a {
		font-size: 1em;
	}

	.menu {
		gap: 1em;
	}

	.menu .containerMenuLink{
		gap: 1em;
	}
}
@media screen and (max-width: 1300px) {
	.menu a {
		font-size: .8em;
	}

	.containerMenuLink > div:first-child {
		display: none;
	}
}

@media screen and (max-width: 1000px) {
	.menu{
		display: flex;
		justify-content: flex-end;
		padding: 1em;
		position: relative;
		align-items: center;
		background-color: var(--basicColor1);
	}

	.menu .logoLink {
		height: 100%;
		max-width: initial;
	}

	.openMenu {
		display: flex;
		width: 1.5em;
		height: 1.5em;
	}

	.menu .containerMenuLink{
		position: absolute;
		right: 100%;
		display: flex;
		flex-direction: column;
		width: 100%;
		transition: ease all .3s;
		justify-content: flex-start;
		padding: 1em;
		gap: 0;
	}

	.menu.active .containerMenuLink{
		right: 0;
	}

	.submenu .parentLink{
		display: flex;
	}

	.openMenu svg * {
		transform-box: fill-box;
		transform-origin: center;
	}

	.openMenu svg * {
		transform-box: fill-box;
		transform-origin: center;
	}

	/* =========================
          OUVERTURE
       ========================= */

	.menu.active .openMenu svg #top {
		animation: topOpen .5s forwards;
	}

	.menu.active .openMenu svg #bottom {
		animation: bottomOpen .5s forwards;
	}

	.menu.active .openMenu svg #middle {
		opacity: 0;
		transition: opacity .2s ease;
	}

	/* =========================
          FERMETURE
       ========================= */

	.menu.was-opened:not(.active) .openMenu svg #top {
		animation: topClose .5s forwards;
	}

	.menu.was-opened:not(.active) .openMenu svg #bottom {
		animation: bottomClose .5s forwards;
	}

	.menu.was-opened:not(.active) .openMenu svg #middle {
		opacity: 1;
		transition: opacity .2s ease .2s;
	}

	/* =========================
          KEYFRAMES
       ========================= */

	@keyframes topOpen {
		0%   { transform: translateY(0)    rotate(0);      }
		50%  { transform: translateY(47px) rotate(0);      }
		100% { transform: translateY(47px) rotate(-45deg); }
	}

	@keyframes bottomOpen {
		0%   { transform: translateY(0)     rotate(0);     }
		50%  { transform: translateY(-47px) rotate(0);     }
		100% { transform: translateY(-47px) rotate(45deg); }
	}

	@keyframes topClose {
		0%   { transform: translateY(47px) rotate(-45deg); }
		50%  { transform: translateY(47px) rotate(0);      }
		100% { transform: translateY(0)    rotate(0);      }
	}

	@keyframes bottomClose {
		0%   { transform: translateY(-47px) rotate(45deg); }
		50%  { transform: translateY(-47px) rotate(0);     }
		100% { transform: translateY(0)     rotate(0);     }
	}

	.menu .parentSubMenu {
		position: initial;
	}

	.menu .parentSubMenu > div {
		top: 0;
		left: initial;
		right: -100%;
		height: 100%;
		width: 100%;
		z-index: 2;
		transform: initial;
	}

	.menu .parentSubMenu:hover div, .menu .parentSubMenu > div:hover{
		transform: initial;
	}

	.menu .parentSubMenu > div.active {
		right: 0;
	}

	.menu .containerMenuLink{
		overflow: hidden;
	}



}