@font-face{
	font-family:"police";
	src:url("polices/police.ttf");
	/*ces balises permettent d'ajoutées une police à la page*/
}




/* --------------------- Modifications générales ---------------------- */



html{
	background-image: url("bg.jpg");
	background-size: 100%;
	/*cette balise permet de changer le curseur de la souris*/
}

header,
footer{
	background-color: white;
	border: 1px black solid;
	padding: 10px;
	border-radius:15px;
	/*cette balise transforme les bords carrés en bords arrondis*/
}




/* ----------------------- Modifications du header -------------------- */




header{
	margin-bottom:30px;
	background-image: url("images/logo-JO.jpg");
	background-repeat:no-repeat;
	background-size: 250px 200px;
	background-position-x: 25px;
	margin-left:50px;
	margin-right:50px;
	
}

div{
	display: grid;
	grid-template-columns: 1fr ;
}

h1{
	text-align: center;
	font-size:3vw;
	font-family:"police", Arial, sans-serif;
	color: blue;
}
	
.menu{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	margin-top: 50px;
	List-Style-Type: none;
	/*ces balises permettent de ranger les liens cliquable du <ul> : ".menu" */
}

.menu li{
	font-family:"police", Arial, sans-serif;
	text-align:center;
	margin: 10px;
	padding: 1px;
	font-size:1.7vw;
	/*ces balises permettent un meilleurs agencement des <li> faisant partient du <ul> : ".menu" */
}
.menu a {
	border: 4px black double;
	padding: 3px;
	text-decoration: none;
	color: blue;
}
a:hover{
	background-color: blue;
	color: white;
	/*Pour ajouter de l'animation lorsqu'on survole les liens du <ul> : ".menu" */
}

a{
	transition:0.5s;
}


/* --------------------- Modifications du body ------------------------ */



section{
	background-color: rgba(1000, 1000, 1000, 0.7);
	border: 1px black solid;
	padding:15px;
	margin-left: 400px;
	margin-bottom: 20px;
	margin-right:50px;
	font-size: 1.5vw;
}

h3{
	font-size: 1.8vw;
	font-family:"police", Arial, sans-serif;
	color: blue;
	text-decoration: underline;
}

a{
	color: blue;
}



/* ------------------- Modifications du footer ------------------------ */

footer{
	margin-top: 30px;
	margin-left:50px;
	margin-right:50px;
	padding-left:100px;
	font-size:1.5vw
}

h4{
	text-decoration: none;
	font-family:"police", Arial, sans-serif;
	font-size:1.8vw;
}

.pied{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}





/* ------------------- Responsiv design ------------------------ */

@media screen and (max-width: 1500px){
	header{
		background-image:none;
	}

}
@media screen and (max-width:1000px){
	section,
	header,
	footer{
		margin-left:20px;
		margin-right:20px
	}
}
@media screen and (max-width:700px){
	header,
	section,
	footer{
		padding:5px;
		margin:6px;