/* NAV */

:root{
	--hauteur-menu: 80px;							/*à ajuster*/
}
nav {
	background-color: #dfdfde;
	background: linear-gradient(to right, #312d27 20%, #4a4748 43%, #dfdfde 60%, #dfdfde 75%, #c773ad 100%);
	height: var(--hauteur-menu);
}
nav a.accueil {
	color: #D19EC1;
}
nav a.projets {
	color: #DFDFDE;
}
nav a.lectures {
	color: #181818;
}
nav a.cv {
	color: #494646;
}
nav a.contact {
	color: #312D27;
}
nav#default_nav {
	border: 1px solid rgb(255, 255, 255);	/*a supprimer*/
	/*border: 1px solid rgba(255, 255, 255, 0);	/*a supprimer*/
	margin-top: 10px;
}
nav#default_nav ul {
	display: flex;
	list-style-type: none;
	justify-content: space-around;	/*allignement l'ensemble des éléments sur l'axe principale*/
	/*align-items: space-between;	/*allignement l'ensemble des éléments sur l'axe secondaire*/
	margin-top: 45px;
}
nav#default_nav a {
    font-size: 1.3em;
    /*color: #181818;*/
    text-decoration: none;
	font-family: 'Arial';
}
.current_onglet{
	font-weight: bold;
}
nav#default_nav a:hover {
	text-decoration: double underline;
}




.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown > button:after{	/*la flèche après le menu*/
	content: '❯';
	font-size: 15px;					/*à ajuster*/
	margin-left: 7px;					/*à ajuster*/
	display: inline-block;
}
.boutonmenucv {
	background-color: #DFDFDE;
	background-color: rgba(0,0,0,0);
	color: #494646;
	border: none;
	cursor: pointer;
	padding: 0px;
	margin-top: 0px;
	font-size: 1.3em;
}
.boutonmenucv:hover {
	/*background-color: #ff4444;*/
}
.dropdown-child {
	overflow: hidden;
	max-height: 0;
	background-color: #DFDFDE;
	margin-top: 11px;
	/*min-width: 50px;*/
}
.dropdown-child a {
	color: #494646;
	padding: 5px;
	text-decoration: none;
	display: block;
}
@keyframes rotationFleche {
	0% {
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(90deg);
	}
}
.dropdown:hover > button:after{
	animation: rotationFleche 0.2s linear forwards;
}
@keyframes apparitionSousMenu {
	0% {
		box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
	}
	30% {
		box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
	}
	100% {
		max-height: 50em;
		box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
	}
}
.dropdown:hover .dropdown-child {
	animation: apparitionSousMenu 1s forwards;
}




nav#mini_nav {
	display: none;
}

@media all and (max-width: 500px)
{
	nav#default_nav {
		display: none;
	}
	nav#mini_nav {
	display: block;
	}
	:root{
		--hauteur-menu: 80px;							/*à ajuster*/
	}
	nav#mini_nav * {
		margin: 0px;
		padding: 0px;
		font-family: Montserrat, sans-serif;
	}
	nav#mini_nav {
		margin-top: 10px;
		width: 100%;
		font-size: 18px;								/*à ajuster*/
			/*position: sticky;
			top: 0;*/
	}
	nav#mini_nav > ul {
		display: flex;
		text-align: center;
		box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);	/*à ajuster*/
		height: var(--hauteur-menu);
	}
	nav#mini_nav > ul > li > a {
		display: flex;
		justify-content: center;		/*allignement l'ensemble des éléments sur l'axe principale*/
		align-items: center;			/*allignement l'ensemble des éléments sur l'axe secondaire*/
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	nav#mini_nav ul, nav#mini_nav li {
		list-style-type: none;
	}
	nav#mini_nav > ul > li {
		position: relative;
		height: 100%;
		flex: 1;
	}
	nav#mini_nav ul li a {
		text-decoration: none;
		color: black;
	}
	nav#mini_nav .menu_deroulant > a:after{
		content: '❯';
		font-size: 15px;					/*à ajuster*/
		margin-left: 7px;					/*à ajuster*/
		display: inline-block;
	}
	nav#mini_nav .sous_menu {
		margin-top: var(--hauteur-menu);
		width: 100%;
		text-align: left;
		background-color: lightblue;
		border-radius: 2px;					/*à ajuster*/
		overflow: hidden;
		max-height: 0;
	}
	nav#mini_nav .sous_menu > li > a {
		height: 50px;						/*à ajuster*/
		padding-left: 20px;					/*à ajuster*/
		width: 100%;
		align-items: center;
		display: flex;
	}
	nav#mini_nav > ul > li:hover > a{
		color: white;
	}
	nav#mini_nav .sous_menu > li:hover {
		background-color: rgba(33, 105, 236, 0.3);
	}
	nav#mini_nav .sous_menu > li:hover > a {
		color: white;
	}
	@keyframes rotationFleche {
		0% {
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(90deg);
		}
	}
	nav#mini_nav .menu_deroulant:hover > a:after{
		animation: rotationFleche 0.2s linear forwards;
	}
	@keyframes apparitionSousMenu {
		0% {
			box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
			border-top: 3px solid #2169EC;
		}
		30% {
			box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
		}
		100% {
			max-height: 50em;
			border-top: 3px solid #2169EC;
			box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
		}
	}
	nav#mini_nav .menu_deroulant:hover > .sous_menu {
		animation: apparitionSousMenu 1s forwards;
	}
}