﻿@font-face {
  font-family: 'aire_forestorique';

  src: url('aire_enjeu.eot');

  src: url('aire_enjeu.woff') format('woff'),
		url('aire_enjeu.woff2') format('woff2'),

       url('aire_enjeu.svg#aire_enjeu') format('svg'),

       url('aire_enjeu.eot?#iefix') format('embedded-opentype');

  font-weight: normal;

  font-style: normal;
}



.mobile { display: none; }

body, div, ul { margin: 0%; padding: 0%; 
 }

body {
  font-family: aire_forestorique; }

.global { margin: 0 auto; max-width: 600px; 
 background-color: whitesmoke;
  border: solid 1px lavender; border-top: none; }

.entete img { display: block; width: 100%; }

#menu { clear: both; 
	height: 78px; background-color: lavender;
  background: linear-gradient(#dec085, #decf85);
  border-bottom: solid 1px lavender; }

ul.afficher, ul.masquer { height: 48px; } 

 .contenu { clear: both; padding: 0% 5% 5% 5%; }
  .contenu img { 
	  max-width: 100%;
}

aside { float: right; width: 30%;
    padding-top: 15px; text-align: center; }
.pied { clear: both; height: 85px;
  background: linear-gradient(#bfa673, #bfb373);
  padding: 5px; border-top: solid 1px lightgray; }

/* Détails pour le menu de navigation */
#menu li { float: left; list-style-type: none;
    line-height: 40px; }

#menu li a, #menu li a:visited {
  display: block; padding: 10px 75px;
  border-right: solid lightgray 2px;
  font-family: 'aire_forestorique';
  font-size: 1em; 
  color: black;
  text-decoration: none; }

#menu li a:hover {
  background-color: lightsteelblue;
  background: linear-gradient(#bfa673, #bfb373);
  color: white; text-shadow: none; }

.droite { float: right; margin-left: 10px; }
.gauche { float: left; margin-right: 10px; }
.centre {
	margin:0;
        display: flex;
        flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
	
}

/* RESPONSIVE */

@media only screen and (max-width: 960px) {   
  body { background-image: none; }
  .mobile { display: block; } (9)
  #menu, #menu.masquer { height: 0; }
  #menu.afficher { height: 400px; }

#menu { transition: height 1s; overflow: hidden;
    border-bottom: none; background: none; }
#menu li { float: none;
  background-color: lightgray;
  background: linear-gradient(#dec085, #decf85);
  border-bottom: solid 1px lavender; }

#menutitre { display: block; width: 105%; line-height: 3em;
  background-color: lightsteelblue;
  background: linear-gradient(#dec085, #decf85);
  text-align: center; font-family:'aire_forestorique';
  color: black; font-weight: bold; text-decoration: none; }

article, aside {  } 
}

@media only screen and (min-width: 960px) { 

	  #menu { clear: both; 
	height: 125px;
	
	}
	
  body {
	  margin:7.5%;
	  }
	  
	  .contenu {
		  display:flex;
	  padding:0%;
	  }
}

body {
	color:black;
	background-color:white;
    background-image:url(background.png);
	
}
section{
        display: flex;
        flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
}
article {
	float: none;
	width: 100%;
	
	Line-Height: 125%;
	font-family: 'aire_forestorique';
	font-size: 105%;

	Word-Spacing: 3%;
	Letter-Spacing: 2%;
	Padding: 5% 5% 5% 5%;
}

th {
	Padding: 2% 2% 2% 2%
}
p {
	Padding-top: 0%;
	Word-Spacing: 4pt;
	Letter-Spacing: 2pt;
}

a:link 
    {color: black;}
a:visited 
    {color:black;}
a:hover {
   color:white;
   text-decoration:none;
   background-color:black;
   }
adress {
	font-style: italic
}
img {
	max-width: 100%;
	Padding-top: 2%;
}

.police1 { 
	font-family: 'aire_forestorique';
	font-size: 125%
}
.corps {	
	Text-Indent: 10%;
	text-align: justify;
	hyphens: auto;
}
#intro {
	padding: 0% 2% 2% 5%;
	line-height: 200%;
	color: white;
    background-image:url(background2.png);
}
.bouton1 {
	background-color: white;
  display: block; padding: 10px 28px;
	color: black;
}
.bouton:link 
    {
	font-family: 'aire_forestorique';
  display: block; padding: 10px 28px;
  border-right: solid lightgray 2px;
  font-size: 125%;
  text-decoration: none;}
.bouton:visited 
    {
  display: block; padding: 10px 28px;
  border-right: solid lightgray 1px;
  text-decoration: none;
}
.bouton:hover {
   color:white;
   text-decoration:none;
   background-color:#6D0005;

  background: linear-gradient(#d1000a, #6D0005);
   }
#avertissement02 {	
	border-style: solid;
	margin: 2% 2% 2% 2%;
	padding: 0 0 0 0;
	vertical-align: top;
	background-color: #AFEEEE;
	color: #FF0000;
}
#link {
	Text-Indent: 2%;
	margin: 0 7% 0 2%;
}

#image {	
	Text-Indent: 10%;
	margin: 0 5% 0 15%;
}
#middle {	
	margin: 5% 10% 5% 10% ;
	text-align: center
}
#last {	
	Border: 5pt Groove Green;
	Text-Indent: 5%;
	margin: 5% 5% 5% 5%;
}
#photo1{
	Text-Indent: 10%;
	margin: 0 5% 0 5%;
	text-align: center
}
.lettrine {
	color: #708090;
	font-size: 150%;
	font-style: italic
}
.gras {
	font-weight: bold;
 font-family:'aire_forestorique';
}
.texte {
	max-width: 500px;
}
.police1 {
	Line-Height: 200%;
	font-family: 'aire_forestorique';
	font-size: 150%
}
.police2 {
	font-family: 'aire_forestorique';
	font-size: 150%
}
#couv {
	align-self: center;
flex-grow: 0;

		flex: 100px;
}

#titre {
	
		flex: 300px;
	}