/* POLICE */
@font-face
{
	font-family : 'Roboto';
	src :	url('fonts/Roboto-Black.ttf')format('truetype'),
			url('fonts/Roboto-BlackItalic.ttf')format('truetype'),
			url('fonts/Roboto-Bold.ttf')format('truetype'),
			url('fonts/Roboto-BoldItalic.ttf')format('truetype'),
			url('fonts/Roboto-Italic.ttf')format('truetype'),
			url('fonts/Roboto-Light.ttf')format('truetype'),
			url('fonts/Roboto-LightItalic.ttf')format('truetype'),
			url('fonts/Roboto-Medium.ttf')format('truetype'),
			url('fonts/Roboto-MediumItalic.ttf')format('truetype'),
			url('fonts/Roboto-Regular.ttf')format('truetype'),
			url('fonts/Roboto-Thin.ttf')format('truetype'),
			url('fonts/Roboto-ThinItalic.ttf')format('truetype');
}
/* BALISE DE BASE */
body{
	max-width : 100%;
	margin : 0;
	text-align : center;
	font-family : serif,sans-serif;
}
header{
	display : flex;
	margin : auto;
	flex-wrap : wrap;
	justify-content : space-around;
	align-items : center;
}
main{
	max-width : 100%;
	margin : auto;
	font-family : serif, Roboto;
}
/* BALISE SPEC */
	/* DESIGN GENEREAL */
		/*Titre*/
		h1{
			color : #36afd9;
			text-shadow : 1px 1px 2px black;
			letter-spacing: 2px;
			font-family : sans-serif, Roboto;
		}
		h2,h3,h4,h5,h6{
			display : flex;
			justify-content : space-around;
			margin : 15px auto;
			padding : 10px;
			color : white;
			background : #36afd9;
			border : 2px solid #0000007a;		
			text-shadow : 2px 2px 2px black;
			box-shadow : 0 4px 8px rgba(0, 0, 0, 0.3),
			-5px 5px #939191;
			font-family : sans-serif,Roboto;
			border-radius : 15px;
		}
	section{
		display : flex;
		flex-direction : column;
		text-align : center;
		margin : auto;
	}
	.sous_section{
		display : flex;
		flex-direction : column;
		margin : auto;
		text-align : justify;
	}
	nav{
		display : flex;
		flex-direction : row;
	}
	ul{
		display : flex;
		flex-wrap : wrap;
		justify-content : start;
		padding : 0;
	}
	li{
		list-style-type : none;
		margin : 5px;
	}
	a{
		color : black;
		text-decoration : none;
		padding : 0;
		margin : 0;
	}
	img{
		max-width : 100%;
	}
	span{
		color : #4EB1D5;
		font-family : "Roboto",sans-serif,serif;
	}
	button{
		width : max-content;
		background-color: #36afd9; 
		color: white; 
		padding : 10px;
		margin : auto;
		border-radius : 10px;
		box-shadow : inset 0 4px 8px rgba(0, 0, 0, 0.3),
			-5px 5px #939191;
		font-weight : bold;
		border : solid 2px #0000007a;
		cursor : pointer;
	}
	hr{
		width : 100%;
		padding : 1px;
	}
	p{
		margin : auto;
	}
	i{
		font-family : serif,Roboto;
	}
	iframe{
		border : 1px solid black;
		box-shadow : 2px 2px grey;
	}
		/* Menu Burger */
	#menu_Burger{
		display : none;
		visibility : hidden;
	}
	#mielPops{
		visibility : hidden;
	}
/* ID */
#H_logo{
	display : flex;
	flex-direction : row;
	vertical-align : middle;
}
#H_img{
	max-width : 75px;
	max-height : 75px;
}
#titrePage{
	color : #4EB1D5;
	text-shadow : 2px 2px #d1d1d1;
	background-color : RGBA(0,0,0,0);
	font-size : 35px;
	border : none;
	box-shadow : none;
}
#footerEnd{
	width:100%;
	font-family : Roboto,serif,sans-serif;
}
#footerUl{
	display : flex;
	flex-direction : column;
	margin : auto;
	font-family : Roboto,serif,sans-serif;
}
/* CLASS */
.BackColor{
	font-family : Roboto,serif,sans-serif;
	color : antiquewhite;
	text-shadow : 2px 2px 2px black;
	background : linear-gradient(#4EB1D5 85%,rgba(250,235,215,0));
	padding : 15px;
	text-align : center;
}
.TitreBackColor{
	color : white;
	text-shadow : 2px 2px 2px black;
	background-color : none;
	letter-spacing : 1px;
}
.doubleCol{
	display : flex;
	flex-wrap : wrap;
	margin-top : 20px;
	justify-content : space-around;
}
.sous_doubleCol{
	display : flex;
	flex-wrap : wrap;
	flex-direction : column;
	max-width : 45%;
	justify-content : space-around;
	text-align : start;
}
.sous_tripleCol{
	display : flex;
	flex-direction : column;
	max-width : 30%;
	min-width : 265px;
}
.sous_image{
	margin : auto;
	border : 3px solid #0000007a;
	border-radius : 15px;
	background-color :  #36afd9;		
	box-shadow : inset 0 4px 8px rgba(0, 0, 0, 0.3),
			-5px 5px #939191;
}
.sous_form{
	display : flex;
	border : solid 3px #36afd9;
	border-radius : 10px;
	flex-direction : column;
	padding : 15px;
	margin : auto;
		margin-bottom : 15px;
}
.sous_texte{
	margin : auto;
	text-align : start;
	padding-top : 10px;
}
.ol_PointClef{
	display : flex;
	justify-content : space-around;
	flex-direction : column;
	padding : 0;
	text-align : start;
	font-family : serif,sans-serif;
}
.li_PointClef{
	display : flex;
	flex-direction : column;
	justify-content : center;
	margin : 0;
	border-radius : 10px;
}
.div_icon_fontawesome{
	width : max-content;
	margin : auto auto 10px auto;
	border : 2px solid #0000007a;
	border-radius : 5px;
	background-color : #4EB1D5;
	box-shadow : 0 4px 8px rgba(0, 0, 0, 0.3),
			-5px 5px #939191;
}
.icon_fontawesome{
	color : white;
	font-size : 1.5em;
	min-width : 15px;
	min-height : 15px;
	padding : 5px;
}
.btn_endsection{
	margin : 15px auto auto auto;
	width : max-content;
}
.NomAgence{
	color : #4EB1D5;
	font-weight : bold;
}
.imgProfil{
	max-width : 300px;
	margin : auto;
	border-radius : 15px;
	border : solid 2px grey;
	box-shadow : 0 4px 8px rgba(0, 0, 0, 0.3),
	-5px 5px #939191;
}
.LikeHeader{
	display : flex;
	justify-content : space-around;
	width : 75%;
}
.strongPolice{
	font-family : Roboto,serif,sans-serif;
}
/* Formation Std */
.MaxW{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-around;
	margin : auto;
}
.LargeCenter{
	max-width : 75%;
	display : flex;
	flex-wrap : wrap;
	margin : auto;
	justify-content : space-around;
	flex-direction : column;
	align-items : center;
}
.ColCenter{
	display : flex;
	flex-direction : column;
	margin : auto;
	align-items : center;
}
 /* Element de navigation */
.ElementNav{
	padding : 15px;
	color : #4EB1D5;
	background-color : white;
	border : outset 3px #468cad;
	border-radius : 15px;
	font-family : Roboto,sans-serif;
 }
 .ElementNav:hover{
	padding : 15px;
	color : white;
	background-color : #4EB1D5;
	border : inset 3px #468cad;
 }
 /* TABLEAU */
 table{
	border : solid 3px #4EB1D5;
 }
 caption{
	font-family : Roboto,serif,sans-serif;
 }
 tr{
	border : solid 2px black;
 }
 td{
	border : solid 0px red;
 }
 /* CGU */
 .list_cgu{
	display : flex;
	margin : auto;
	flex-direction : column;
 }
/*Breakpoint*/
@media all and (max-width : 915px){
	header{
	display : flex;
	justify-content : space-between;
	}
	#menu_Burger{
		display : flex;
		visibility : initial;
		width : 80px;
		height : 80px;
	}
	#icon_Menuburger{
		display : flex;
		margin : auto;
		padding : 10px;
		border-radius : 5px;
		background-color : #36afd9;;
	}
	#Nav{
		display : none;
		visibility : hidden;
		position : absolute;
		width : 100%;
		margin : 0 auto;
		background-color : rgba(0,0,0,0.2);
		top : 80px;
		z-index : 1;
	}
	.ElementNav{
		display : flex;
	}
	.reverse > div:first-child{order:1};
	.reverse > div:last-child{order:-1};
	.doubleCol{
		display : flex;
		margin : auto;
		flex-direction : column;
	}
	.sous_doubleCol{
		display : flex;
		margin : auto;
			margin-top : 10px;
		flex-direction : column;
		max-width : 100%;
	}
	.sous_tripleCol{
		display : flex;
		margin : auto;
			margin-top : 10px;
		flex-direction : column;
		max-width : 100%;
	}
}