/*----------------ENTÊTE----------------*/

header {
	width: 100%; /*largeur*/
    height: 65px; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
}


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

nav {
	width: 100%; /*largeur*/
	height: 65px; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	position : fixed; /*type de positionnement*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/
	align-items: center; /*centre verticalement le contenu*/
	background-color: var(--couleur-noir); /*couleur du fond*/
	z-index: 2; /*position au dessus ou au dessous*/
}

nav.scroll {
	opacity: 0.9; /*opacité*/
}

.menu {
	margin: auto; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
}

.menu ul {
	margin: auto; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
}

.menu li {
	margin: auto; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	display: inline-block; /*apparition des balises*/
}

.menu a {
	margin: auto; /*marge extérieur*/
	padding: 10px 25px; /*marge intérieur*/
	font-family: var(--police-menu); /*police type*/
	font-size: 16pt; /*police taille*/
	text-align: center; /*texte alignement*/
	text-transform: uppercase; /*texte transformer*/
	text-decoration: none; /*texte decoration*/ 
	letter-spacing: 1.2pt; /*espace entre lettre*/
	transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out; /*transiton*/
	color: var(--couleur-blanc); /*police couleur*/
}

.menu a:hover {
	color: var(--couleur-beige); /*police couleur*/
	text-shadow: 0px 0px 20px var(--couleur-beige); /*texte ombre*/ 
}


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

@media screen and (max-width: 1000px) {
	.menu {
		width: 100vw; /*largeur*/
		height: 100vh; /*hauteur*/
		transform:  translateX(-100%); /*transforme*/
		transition: transform 1s; /*transiton*/ 
		opacity: 0.95; /*opacité*/
		background-color: var(--couleur-noir); /*couleur du fond*/
	}
	nav.scroll {
		opacity: 1; /*opacité*/
	}
	.ouvrir .menu {
		transform:  translateX(0%); /*transforme*/
	}
	.menu ul {
		height: 80vh; /*hauteur*/
		margin: 10vh 10vw; /*marge extérieur*/
	}
	.menu li {
		height: 20%; /*hauteur*/
		min-height: 40px;
		display: flex; /*apparition des balises*/
	}
	.menu a {
		font-size: 18pt; /*police taille*/
	}
}



/*----------------FACEBOOK RESPONSIVE----------------*/

.facebook {
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	position : absolute; /*type de positionnement*/
	left: 0px; /*position en partant de la droite*/
	z-index: -1; /*position au dessus ou au dessous*/
}

.facebook a {
	margin: 0px 8px; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	display: flex; /*apparition des balises*/
	align-items: center; /*centre verticalement le contenu*/
}

.facebook svg {
	width: 50px; /*largeur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	transition: filter 0.5s ease-in-out, color 0.5s ease-in-out; /*transiton*/ 
	color: var(--couleur-blanc); /*couleur image*/
}

.facebook svg:hover {
	filter: drop-shadow(0px 0px 10px var(--couleur-beige)); /*couleur de l'ombre*/
	color: var(--couleur-beige); /*police couleur*/
}

/*----------------FACEBOOK RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
	.facebook svg {
		width: 40px; /*largeur*/
	}
}

/*----------------MENU BURGER----------------*/

.menu-burger {
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	display: none; /*apparition des balises*/ 
	position : absolute; /*type de positionnement*/
	right: 40px; /*position en partant de la droite*/
	transform: translateX(50%); /*transforme*/
	cursor: pointer; /*type de curseur*/
}

.menu-burger svg {
	width: 20px; /*largeur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	transition: color 0.5s ease-in-out; /*transiton*/
	color: var(--couleur-blanc); /*couleur*/
}

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

.croix-fermer:hover {
	color: var(--couleur-blanc); /*couleur*/
}


/*----------------MENU BURGER RESPONSIVE----------------*/

@media all and (max-width: 1000px) {
	.menu-burger {
		display: block; /*apparition des balises*/
	}
	.icon-burger {
		display: block; /*apparition des balises*/
	}
	.croix-fermer {
		display: none; /*apparition des balises*/
	}
	.ouvrir .icon-burger {
		display: none; /*apparition des balises*/
	}
	.ouvrir .croix-fermer {
		display: block; /*apparition des balises*/
	}
}