/* Définition des classes */
.encadrer
{
	border-width : 2px;
	border-style : solid;
	border-color : #D5A66A;
	background-color : #1C2A4A;
}

.texteBlancCentre
{
	color : white;
	text-align : center;
}
body
{
	font-family : Tahoma, Arial, sans-serif;
	background-color : #ee4037;
	margin : 0px;
	display : grid;
	grid-template-areas : "menu"
	                      "en-tete"
						  "reserver"
						  "programmation"
						  "reseaux"
						  "piedDePage";
}
/* Menu de navigation */
li
{
	list-style-type : none;
}
li a, p[class="encadrer"] a
{
	color : white;
	text-decoration : none;
}
nav
{
	display : flex;
	justify-content : space-around;
	align-items : center;
	grid-area : menu;
}
nav p
{
	text-align : center;
}
nav img
{
	width : 80%;
}
/* En-tête */
header
{
	background-color : #c09a5b;
	grid-area : en-tete;
}
header div
{
	width : 80%;
	margin : auto;
}
header img
{
	width : 100%;
}
header, footer
{
	padding : 5%;
}
/* Réserver */
#reserver
{
	background-color : #1C2A4A;
	grid-area : reserver;
    padding : 5%;
}
#reserver div
{
	width : 50%;
	min-width : 80px;
    margin : auto;
}
#reserver div p:last-of-type
{
	box-shadow : 2px 2px 2px black;
}

#reserver img
{
	width : 50%;
}
p[class="encadrer"]
{
	display : inline-block;
	padding : 5px;
}
/* Programmation */
#programmation
{
	background-color : #ee4037;
	grid-area : programmation;
}
#programmation p
{
	text-align : center;
}
#programmation h3{
	margin-bottom:5px;
}

#programmation div
{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
}
#programmation article
{
	width : 70%;
}
article img
{
	width : 100%;
}
article
{
	max-width : 300px;
	margin-left : 4px;
}
/* Réseaux sociaux */
#reseauxSociaux
{
	background-color : white;
	grid-area : reseaux;
	text-align : center;
}
#reseauxSociaux img
{
	width : 15%;
}
/* Pied de page */
#piedDePage
{
	color : #999999;
	background-color : #3d4045;
	grid-area : piedDePage;
}
footer a
{
	color : #999999;
	text-decoration : none;
}
/* Vidéo */
video
{
	display : none;
}

/* Requête média */
@media (min-width : 500px)
{
	header
	{
		display : flex;
		justify-content : space-around;
		font-size : 0.6em;
	}
	header img
	{
		width : 80%;
	}
	#reserver
	{
		display : flex;
		justify-content : center;
		font-size : 0.6em;
	}
	#reserver div
	{
		margin-left : 1%;
		margin-right : 1%;
	}
	#reseauxSociaux div
	{
		display : flex;
		justify-content : space-around;
	}
	#reseauxSociaux img
	{
		width : 100%;
	}
	#programmation article
	{
		width : 49%;
	}
}
@media (min-width : 1000px)
{
	nav, header, aside
	{
		font-size : 1em;
	}
	nav img
	{
		width : 60%;
	}
	nav ul
	{
		display : flex;
		justify-content : space-around;
		width : 100%;
	}
	body
	{
		grid-template-columns : 1fr 1fr;
		grid-template-areas : "menu menu"
							  "en-tete en-tete"
							  "reserver reserver"
							  "programmation programmation"
							  "piedDePage reseaux";
	}
	#reseauxSociaux
	{
		color : #999999;
		background-color : #3d4045;
	}
	header
	{
		background-color : transparent;
	}
	video
	{
		display : block;
		position : absolute;
		left : 0px;
		top : 0px;
		width : 100%;
		z-index : -100;
		opacity : 0.7;
	}
}
