/* DEFINITION DES POLICES PERSONNALISEES */


@font-face
{
	font-family: 'Amble Light';
	src:	url('polices/Amble-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face
{
	font-family: 'Amble regular';
	src:	url('polices/Amble-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'AmbleBold';
	src:	url('polices/Amble-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}




		/* BODY */

body
{
	font-family: "Amble Light", Corbel, Calibri, serif;
	color: black;
	margin: 0px;
	text-decoration: none;
	background-color : white;
	/*background: url('images/landscape-2952646_1281.png');
	background-size: 100% auto;
	background-attachment : scroll;
	background-position: bottom;
	background-repeat: no-repeat;*/
}

body em, body strong
{
	font-style: normal;
	font-weight: normal;
}





		/* HEADER */

header
{
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 6;
	width: 100%;
}


#partie_haute /*partie haute = bandeau vert sans compter le menu marron qui apparat sur les petits écrans*/
{
	background: rgba(145, 187, 73, 1);  /*au sinon on peut mettre cette couleur #91bb49 7dab05ff #7fb100ff*/
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 5;
	align-items: center;
}







/*logo*/
#logo
{
	margin: 5px 0px 5px 7vw;
}

#logo_header_haut
{
	width: 350px;
	transition: all 0.7s;
}

#logo_header_bas
{
	width: 150px;
	transition: all 0.7s;
}







/*menu de navigation*/
nav
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: normal;
	font-family: "Amble regular", Corbel, Calibri, serif;
	padding: 0px 3.6vw 0px 3.6vw;
}

#nav_bas a
{
	font-size: 1.06em;
	color: white;
	text-decoration: none;
	transition: all 0.75s;
}

.lien
{
	padding:  0px 3.4vw 0px 3.4vw;
	text-align: center;
}

#nav_haut a
{
	font-size: 1.4em;
	color: white;
	text-decoration: none;
	transition: all 0.75s;
}

#nav_haut a:hover
{
	color:#794e21;
}

#nav_bas a:hover
{
	color:#794e21;
}

#bouton_menu
{
	display: none;
	height: 100%;
}







/*menu dépliant = menu marron qui apparait sur les petits écrans*/

#menu_depliant 
{
	width: 100%;
	padding: 15px 0vw 15px 0vw;
	position: relative;
	height: 210px;
	bottom: 210px;
	z-index: 1;
	background: rgba(121, 78, 33, 0.95);
	flex-direction: column;
	align-items: flex-end;
	overflow-y: auto;
}

#menu_depliant .lien
{
	padding: 15px 5vw 15px 0px;
	text-align: right;
}

#menu_depliant a
{
	color: white;
	text-decoration: none;
	font-size: 1.4em;
	transition: color 0.5s;
}

#menu_depliant a:hover
{
	color: rgba(145, 187, 73, 1);
}

@keyframes apparition
{
	from{bottom: 210px;}
	to{bottom:0px;}
}

@keyframes disparition
{
	from{bottom: 0px;}
	to{bottom: 300px;}
}










/* SECTION*/
section
{
	display: flex;
	flex-direction:column;
	text-align: justify;
	background-color: white ;
	position : relative ;
	top : 0px ;
	right : 0px ;
	z-index : 2;
	
}

section p
{
	font-size: 0.9em;
	line-height: 140%;
}









		/* FOOTER */

footer
{
	display: flex;
	justify-content: center;
	padding-top: 25px;
	color: black;
	text-decoration: none;
	background-color: white ;
	position : relative ;
	top : 0px ;
	right : 0px ;
	z-index : 2;
}

footer a
{
	font-size: 0.75em;
	color: black;
	text-decoration: none;
}












/*MEDIA QUERIES*/

@media screen and (max-width:1000px)
{
	#nav_haut
	{
		display: none;
	}

	#header_haut #bouton_menu
	{
		margin: 0px 5vw 0px 0vw;
		display: flex;
		align-items: center;
	}

	#header_bas #bouton_menu
	{
		display: none;
	}

	#bouton_menu:hover
	{
		cursor: pointer;
	}

	#bouton_menu img
	{
		width: 30px;
		order: 2;
	}

	#bouton_menu p
	{
		font-size: 1.4em;
		font-weight: normal;
		font-family: Amble Regular;
		margin: 4px 10px 0px 0px;
		color: white;
		order: 1;
	}
}

@media screen and (max-width:500px)
{
	header
	{
		position: fixed;
	}

	#nav_bas
	{
		display: none;
	}

	#header_haut #logo img
	{
		width: 60vw;
	}

	#bouton_menu
	{
		margin: 0px 15px 0px 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#bouton_menu img
	{
		width: 25px;
		order: 1;
	}

	#bouton_menu p
	{
		font-size: 0.8em;
		margin: 0px 0px 0px 0px;
		order: 2;
	}

	#header_bas #logo img
	{
		width: 30vw;
		min-width: 84px;
	}

	#header_bas #bouton_menu
	{
		display: flex;
		margin: 10px 5vw 5px 0px;
	}


}

@media screen and (max-width:1000px) and (max-height: 390px)
{
	#menu_depliant
	{
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 70px;
	}

	#menu_depliant .lien
	{
		padding: 0px 0px 0px 0px;
	}
}

@media screen and (max-width:500px) and (max-height: 390px)
{
	#menu_depliant a
	{
		font-size: 1.03em;
	}

	#menu_depliant
	{
		height: 40px;
	}
}