/********************************* 
    Corps de la page
*******************************/

body {
	font-family: alegreya, sans-serif;
	font-style: normal;
	font-weight: 400; /* On fixe le type de gras à utiliser*/
	margin: 0; /* on enlève les espaces sur les bords des éléments*/
	line-height: 1.625; /*on fixe la hauteur des lignes, ce quiaussi  permet de gérer l'espace entre les lignes de texte */
	background-color: #f4f4f4; /*on met une couleur grise légère */
}


/**************************************
    Zone image qui inclue le header. On met un fond d'écran et u dégradé
***************************************/
.section_image {
	background-size: cover;
	background-position: center center;
	color: #FFFFFF;
	 /* on gère un espace après la section image. Cela est nécessaire car on met le titre de la page et sa
	 description à l'intérieur de cette section et on affiche un bloc de texte. L'espace nous est nécessaire
	 car le bloc main avec le css contenu principal et le div page-contenu s'affichera par dessus
	*/
	padding-bottom: 100px;
	/* L'instruction linear-gradient fait un dégradé progressif.  */
	background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(../images/fond_ecran.jpg);
    background-attachment: fixed;
	text-align: center;
}
.section_image .site-header {
	padding: 20px 0;
	margin: 0 auto;  /* Le margin auto permet de centrer le header dans sa zone*/
	max-width: 1200px;   /*On fixe la longueur maximale*/
	text-transform: uppercase; /* Met le texte en majuscule*/
}


.section_image .page-titre h2 {
	font-size: 70px;
	/* on enlève l'espacement du bas sur les bords des h2 dans .section_image .page-titre  */
	margin-bottom: 0;
}

/* Zone de navigation dans le header
On configure le style des listes non ordonnées ainsi que les listes items

*/
.contenu-principal-navigation   {
	font-size: 16px;
	font-weight: 400;
	/* border-bottom: 1px solid rgba(255, 255, 255, 0.25); */
	 /*récupéré sur un site internet*/
	font-family: sans-serif;
}

.contenu-principal-navigation ul li {
	/* La ligne suivante permet de mettre en ligne le menu*/
	display: inline-block;
}
.contenu-principal-navigation ul li a {
	padding: 17px 37px; /* permet de gérer les espaces entre les liens du menu*/
	text-decoration: none; /* enlève le trait qui souligne sur les liens*/
	 display: inline-block; 
	color: white;
}

/* Le style ci-dessous correspond au moment où on passe sur un lien
du menu avec la souris. Par rapport au style précédent où on a mis
text-decoration:none par défaut, cette fois on met "underline" .
Le menu devient plus interactif */
.contenu-principal-navigation ul li a:hover {
	text-decoration: underline;
}

.page-description {
	/* on limite la longueur du texte d'explication de la page à 800 pixels*/
	max-width: 800px; 
	text-align: center;
	/* Le margin auto fait s'adapter en fonction de l'espace restant
	il permet de centrer automatiquement*/
	margin-left: auto;
	margin-right: auto;
	font-size: 24px;
}

/*
    Contenu des pages. 
*/
.page-contenu {
	background-color: white;
	margin: -50px auto 0;
	/* Le max-width fixe la longeur maximale du bloc
	Il nous permet d'avoir le bloc blanc avec le texte
	que l'on voit au centre des pages*/
	max-width: 1000px;
	/* On gère des espacements de chaque côté afin de pouvoir écrire*/
	padding-top: 10px;  
	padding-bottom: 32px;
	padding-right: 48px;
	padding-left: 48px;
	box-sizing: border-box;
	text-align: center;
}
/* Les titres H2 en présentation de contenu sont en grand*/
.entree-contenu h2 {
	font-size: 48px;
}

/* Les titres H2 sont alignés au centre*/
.contenu h2{
    text-align:center;
}
/* Les paragraphes et listes ordonnées à gauche*/
.contenu p, li{
    text-align:left;
}

/* Texte que l'on met en évidence en blanc sous fond marrond*/
.texte_attention{
    background-color: #A86500;
	color: #FFFFFF;
}
/***************************
    Footer
*******************/
.site-footer {
	padding-top: 60px;
	padding-bottom: 60px;
	text-align: center;
	font-size: 16px;
	line-height: 1;
	font-family: sans-serif;
}
/*On fait une liste non ordonnées pour les liens footer.
On les mets en ligne et majuscule sans type*/
.footer-navigation.menu ul {
	text-transform: uppercase;
	list-style-type: none;
	padding: 0;
	display: inline-block;
}
/*Les listes items sont en ligne*/
.footer-navigation.menu ul li  {
	display: inline-block;
}
/* Comme pour le menu, on ne met pas de décoration sur les liens footer*/
.footer-navigation.menu ul li a  {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	text-decoration: none;
	color: rgba(168,101,0,1.00);
	font-weight: 500;
}
/* On gère le passage de la souris au-dessus des liens*/
.footer-navigation.menu ul li a:hover   {
	color: #333333;
}