#headerBar{
	height: 15px;
	background: var(--color3);
}
header{
	position: fixed;
	top: 0;
	z-index: 100000;
	width: 100%;
	height: 0;
}
@media screen and (max-width: 420px){
    header{
        position: static;
    }
}
header .nav1 ul{
	background: var(--color1);
	padding: 0 20px 0 20px;
}
ul::-webkit-scrollbar {
display: none;
}
ul{
	scrollbar-width: none;
}
nav ul{
	width: 100%;
	height: 70px;
	position: absolute;
	z-index: 100000;
	right: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .1);
}
.sombre nav ul{
	box-shadow: 3px 3px 5px rgba(255, 255, 255, .1);
}
nav .titreLG{
	font-size: 20px;
}
nav .soustitreLG{
	font-size: 13px;
}
nav li{
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 5vw;
}
.nav1 li:first-child{
	min-width: 120px;
	margin-right: auto;
	flex-direction: row;
}
.nav1 li:first-child a:first-child{
	margin-right: 5vw;
}
nav a{
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font2);
	font-size: 17px;
	color: var(--texteColor1);
}
.nav1 a{
	width: 100%;
	height: 100%;
}

nav a .lettre{
	transition: .3s;
}
nav .ligne_nav{
	height: 2px;
	width: 0;
	border-radius: 2px;
	background: var(--texteColor2);
	transition: .6s cubic-bezier(.23,1,.32,1);
}
.nav1 .ligne_nav{
	transform: translateY(-20px);
}
@keyframes nav {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .15;
	}
	100%{
		opacity: 1;
	}
}
@media screen and (min-width: 420px){
    nav li:hover .lettre{
    	color: var(--texteColor2);
    	animation: .6s cubic-bezier(.23,1,.32,1) calc(0.07s * var(--delay)) nav;
    }
    nav li:hover .ligne_nav{
    	width: 110%;
    }
}
nav li.nav_current .lettre{
	color: var(--texteColor2);
}
nav li.nav_current .ligne_nav{
	width: 110%;
}
nav .burger{
	display: none;
}

/*navBurger*/
nav .burger_box{
	width: 30px;
	height: 30px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
nav .burger{
	width: 30px;
	height: 25px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
nav .burger .ligne_brg{
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background: var(--texteColor1);
	transition: .4s;
}
@media screen and (min-width: 420px){
    nav .burger:hover .ligne_brg{
    	background: var(--texteColor2);
    }
}
nav .burger .ligne_brg:nth-child(1){
	transform: rotate(0deg);
}
nav .burger .ligne_brg:nth-child(2){
	opacity: 1;
}
nav .burger .ligne_brg:nth-child(3){
	transform: rotate(0deg);
}
nav .croix{
	width: 30px;
	height: 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
nav .croix .ligne_brg{
	transform-origin: right;
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background: var(--texteColor1);
	transition: .4s;
	margin-right: 10px; 
}
@media screen and (min-width: 420px){
    nav .croix:hover .ligne_brg{
	    background: var(--texteColor2);
    }
}
nav .croix .ligne_brg:nth-child(1){
	transform: rotate(-45deg);
}
nav .croix .ligne_brg:nth-child(2){
	opacity: 0;
}
nav .croix .ligne_brg:nth-child(3){
	transform: rotate(45deg);
}
@media screen and (max-width: 860px){
	.nav1 li{
		display: none;
	}
	.nav1 li:first-child{
		display: flex;
	}
	.nav1 .burger_box{
		display: flex;
	}
	.nav1 .burger{
		display: flex;
	}
	.nav1 .croix{
		display: flex;
	}
}
.burger_box .ligne_nav{
	transform: translateY(0);
}

/*navCover*/
.nav2{
	display: none;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	z-index: 100000;
	background: var(--color2);
	opacity: 0.8;
	backdrop-filter: blur(10px);
}
nav.cover{
	display: flex;
}
nav.cover ul{
	height: 50%;
	width: 100vw;
	z-index: 1000000;
	margin: auto;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background: transparent;
	gap: 30px;
	overflow-y: scroll;
}
.nav2 ul li a{
	font-size: 30px;
	color: var(--texteColor3);
}


/*deroulant*/
.nav1 .sous{
	width: 170px;
	top: 70px;
	display: none;
	position: absolute;
	flex-direction: column;
	background: var(--color1);
	box-shadow: 
		3px 3px 5px rgba(0, 0, 0, .1),
		-3px 5px 5px rgba(0, 0, 0, .1);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding-bottom: 20px;
}
.sous a{
	width: 100%;
	padding: 5px 0;
	transition: .3s;
}
@media screen and (min-width: 420px){
    nav .sous a:hover{
    	color: var(--texteColor2);
    }
}
nav .sous a.nav_current{
	color: var(--texteColor2);
}
@media screen and (min-width: 420px){
    .nav1 .deroulant:hover .sous{
    	display: flex;
    }
    .nav1 .sous:hover{
    	display: flex;
    }
    nav li:hover .plus .trait{
    	background: var(--texteColor2);
    }
}
.nav2 .deroulant{
	height: auto;
}
.nav2 .deroulant .plus{
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template: 20px / 20px;
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
.nav2 .deroulant .trait{
	width: 20px;
	height: 2px;
	background: var(--texteColor3);
}
.nav2 .deroulant.nav_current .trait{
	background: var(--texteColor2);
}
.nav2 .deroulant .t1{
	transform: rotate(90deg);
	grid-row: 1;
	grid-column: 1;
}
.nav2 .deroulant .t2{
	grid-row: 1;
	grid-column: 1;
}
.nav2 .deroulant .moins .t1{
	display: none;
}
.nav2 .sous{
	display: none;
	position: inherit;
	width: auto;
	margin: 10px 0;
	padding: 0;
	flex-direction: column;
	padding-bottom: 20px;
	border-bottom: 1px solid white;
}
.nav2 .sous a{
	color: var(--texteColor3);
}
.nav2 .sous.open{
	display: flex;
}