/* Styles globaux  */


p{
	padding:10px 20px 10px 20px;
	margin:0px 0px 10px 0px;
	text-align: justify;
}

h1{
	text-shadow : 1px 1px 1px gray;
}
h1, h2{
	padding-left:10px;
}
*{
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
body{
	background-color: #1D1D1D;
	font-size: 1.2em;
}
#main{
	max-width: 828px;
	margin: auto;
}

/* zone centrale principale */


/* menu de navigation */ 

#menu_nav ul{
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
}

#menu_nav li{
	padding: 10px;
	text-align : center;
	border-bottom : 1px solid #7E7E7E;
}
#menu_nav{
	background-color: #FB9237;
	grid-area: menu;
}
ul{
	list-style-type: none;
}
#menu_nav a{
	color: black;
	text-decoration: none;
}
#menu_nav li:hover{
	background-color: #7D3C03;
}
#menu_nav li:hover a{
	color: white;
}
/* en-tête  */
header{
	padding:20px;
	grid-area: en-tete;
}

header h1{
	margin-top : 0px;
	margin-left : 30px;
	margin-bottom : 10px;
	color: yellow;
}


/* classe fond blanc+ombre */


/* section intro */
#intro{
	margin-top : 10px;
	grid-area: bienvenue;
}

#intro h1, #actu h1 {
	font-size:x-large;
}

/* section actualités */
#actu{
	margin-top : 10px;
	grid-area: actu;
}

#actu h2 {
	font-size:large;
}


/* zone "prochains événements" */
#news{
	color : white;
	display:inline-block;
	vertical-align:top;
	grid-area: prochains_evenements;
}
#news h1{
	font-size:large;
}
#news h2{
	font-size:medium;
	color:red;
	margin-bottom: 0px;
}

/*pied de page */
footer{
	color: white;
	padding: 20px;
	grid-area: pied-de-page;
}
footer p{
	text-align: center;
}

/* bouton de retour vers le haut */
#back_to_top{
	position:fixed;
	bottom:20px;
	right: 30px;
	opacity : 0.6;
}

#back_to_top img{
	width:50px;
	height:50px;
}

.fond_blanc_ombre{
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 4px 4px 4px white;
}

@media(min-width: 900px){
	header{
		text-align: left;
		padding : 0px;
		height: 211px;
		background-image: url("images/bg_header.jpg");
	}

	#actu article{
		display: inline-block;
		width : 49%;
		vertical-align:top;
	}

	#menu_nav li{
		padding-left: 20px;
		padding-right:20px;
		border-style: none;
		border-right : 1px solid #7E7E7E;
	}
	body{
		font-size: 1em;
	}
	#menu_nav ul{
		display: flex;
	}
	#main{
		display: grid;
		grid-template-columns: 70% 30%;
		grid-template-areas: "en-tete en-tete"
							 "menu menu"
							 "bienvenue prochains_evenements"
							 "actu actu"
							 "pied-de-page pied-de-page";
	}
}