body{font-size: 16px}

/******************** Gestion du header ********************/
header{
	border: 2px solid black;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-image: url("fond.jpg");
	background-size: cover;
}
header h1{
	margin: auto;
	font-size: 5em;
	text-align: center;
	color: black;
}
@media screen and (max-width: 720px) {
	header h1{font-size: 3em;}
}
/******************** Gestion du nav ********************/
.navindigo:hover{
	background-color: indigo;
}
.navrouge:hover{
    background-color: red;
}
.navbleu:hover{
    background-color: blue;
}
.navvert:hover{
    background-color: green;
}
.navmarron:hover{
	background-color: maroon;
}
.navviolet:hover{
	background-color: violet;
}
.navjaune:hover{
	background-color: yellow;
}
.navorange:hover{
	background-color: orange;
}
.navviolet1:hover{
	background-color: mediumvioletred;
}
.navbleufonce:hover{
	background-color: darkblue;
}
.navindigo1:hover{
	background-color: indianred;
}
.navorange1:hover{
	background-color: orangered;
}
nav{
	background-color: #181818;
}
nav ul{
	display: flex;
	flex-direction: row;
	margin: 0;
	align-items: center;
}
nav li{
	margin: auto;
	list-style: none;
	padding: 10px;
}
nav li a{
	text-decoration: none;
	font-size: 1.5em;
	color: whitesmoke;
}
nav a:hover{
	color: whitesmoke;
	font-size: 1.75em;
}
nav li:hover{
	text-decoration: none;
	border-radius: 5px;
}
#icone{
	display: none;
}
@media screen and (max-width: 720px) {
    nav{
        display: none;
        position: absolute;
        background-color: black;
    }
    nav ul{
        display: block;
        padding: 0;
    }
    #icone{
        display: block;
    }
}
/******************** Gestion de section ********************/
.intro{
	width: 100%;
	font-size: 1.2em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.histoire2{
	width: 100%;
	font-size: 1.2em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.histoire{
	max-width: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	font-size: 1.2em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
article iframe{
	text-align: center;
	width: 100%;
}
section article img{
	display: flex;
	align-items: center;
}
table{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: baseline;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 1.2em;
}
.projets{
	width: 100%;
	font-size: 1.3em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.section_image{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
@media screen and (max-width: 720px) {
    article{
        width: 100%;
    }
    aside{
        width: 100%;
    }
}
/******************** Gestion de footer ********************/
footer{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.footer_gauche{
	font-size: 1.2em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.footer_droit{
	width: 70%;
	font-size: 1.2em;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.footer_droit_images{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.footer_droit_images img{
	width: 95px;
	height: 80px;
	margin: 5px;
	border-radius: 10px;
}
.footer_droit_images img:hover{
	width: 100px;
	height: 100px;
}