@media all and (max-width: 1124px) {
    
/*----------------MENU BURGER----------------*/

.menu-burger {
	display: flex; /*apparition des balises*/
}

.burger {
	color: var(--blanc); /*couleur*/
}

.croix {
	color: var(--rouge); /*couleur*/
}

.croix, nav.active .burger {
    display: none; /*apparition des balises*/
}

.burger, nav.active .croix {
    display: block; /*apparition des balises*/
}


/*----------------MENU DE NAVIGATION----------------*/

nav > ul {
	width: 100vw; /*largeur*/
	height: 100vh; /*hauteur*/
	padding: 60px 0px; /*marge intérieur haut*/
	display: block; /*apparition des balises*/
	position: absolute; /*type de positionnement*/ 
	top: 0px; /*position en partant du haut*/
    left: 0px; /*position en partant de la gauche*/
	flex-direction: column; /*direction des contenants*/
	overflow-y: auto; /*défile verticalement*/
	box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
	transform:  translateX(100%); /*transforme*/
	transition: transform 0.5s; /*transiton*/
	background-color: var(--blanc); /*couleur du fond*/
}

nav.active ul {
	transform:  translateX(0%); /*transforme*/
}

nav .separation {
	display: none; /*apparition des balises*/
}

nav a {
	width: 100%; /*largeur*/
	margin-bottom: 10px; /*marge extérieur bas*/
	padding: 10px 0px; /*marge extérieur*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	border-top: 2px solid var(--gris-235); /*bordure tout en un*/
	border-bottom: 2px solid var(--gris-235); /*bordure tout en un*/
	font-size: var(--20); /*police taille*/
	letter-spacing: 0.5pt; /*espace entre lettre*/
	color: var(--noir); /*police couleur*/
}

nav a:hover {
	color: none; /*police couleur*/
}


/*--------------------------------*/
}