#header{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	top: 0;
	position: sticky;
	background-color: var(--main-bg-color);
	z-index: 999;
	/* border-bottom: 1px dotted var(--third-bg-color); */
}

/* Barre de navigation = Logo + Menu + Media sociaux */
#nav{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	background-color: var(--third-bg-color);
	padding: 1vh 1vw 1.5vh 1vw;
	max-height: 100%;
	width: 100%;

}
/* animation de la barre de navigation : apparition à 80% de 5s */
.animnav{
	animation: animnav 5s linear 0s 1;
}
@keyframes animnav {
0% { background-color: var(--main-bg-color);	border-bottom: 0;}
80% { background-color: var(--main-bg-color); border-bottom: 0; }
}

/* Logo */
#nav #logo{
	width: 25%;
	cursor: pointer;
}

#nav #logo .cercle{
	animation: animcercle 1.5s linear 0s 1;
}
@keyframes animcercle {
  0% { transform: translateX(100px); opacity: 0; }
}
/* animation du logo : translation et rotation sur 4s */
.animlogo{
	animation: animlogo 4s linear 0s 1;
}
@keyframes animlogo {
0% {
	margin-top: 20%;
	margin-left: 35%;
	transform: scale(3);
	}
30% {
	margin-top: 20%;
	margin-left: 35%;
	transform: scale(3) rotate(0deg);
	}
80% {
	transform: rotate(360deg);
	}	
}
/* animation du logo : secouer sur 0.5s au bout de 5s */
.animlogo1 {
  animation: shakelogo 0.5s linear 5s 1;
}
@keyframes shakelogo {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


/* Menu */
#nav #menu{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	opacity: 1;
}
.animmenu{
	animation: animmenu 5s linear 0s 1;
}
@keyframes animmenu {
	0% { opacity: 0; }
	80% { opacity: 0;}
}

#nav #menu p{
	margin-right: 1.8vw;
	cursor: pointer;
	font-size: 1.2vw;
}

/* Média sociaux */
#nav #socialmedia{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	opacity: 1;
}
.animsocialmedia{
	animation: animsocialmedia 5s linear 0s 1;
}
@keyframes animsocialmedia {
	0% { opacity: 0; }
	80% { opacity: 0;}
	}
	
#nav #socialmedia p{
	font-size: 1vw;
	margin-right: 1vw;
	border: 1px solid var(--main-text-color);
	border-radius: 100%;
	padding: 0.3vw;
	text-align: center;
	width: 1.5vw;
	cursor: pointer;
}
	
@media screen and (max-width: 576px) 
{

}

@media screen and (min-width: 576px) 
{
 
}

@media screen and (min-width: 768px) 
{

}

@media screen and (min-width: 1024px) 
{

}