/* RESET SIMPLE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* STYLE GLOBAL */
html{
    font-family: "Domine", serif;
}
body {
    line-height: 1.6;
    background-color: #EEF1F5;
    color: #333;
    padding: 5px;
	height: 100%;
	/*position:relative;*/
}
h1, h2, h3, h4, h5, h6{
	font-family: "Domine", serif;
}

/* STRUCTURE */
#page{
	max-width: 1300px;
	min-height: 100%;
    margin: auto;
    background-image:url("../img/bouleau.png");
    background-size: 50%;
    background-repeat: no-repeat;
}
#feuille{
	max-width: 1300px;
	margin: auto;
	padding: 40px 15px 10px 240px;
}
@media only screen and (max-width: 1000px){
	#page{
		background-image:none;
		/*min-height: 50%;*/
		}
	#feuille{
		padding: 5px 10px 20px 30px;
	}
}
@media only screen and (max-width: 450px){
	#page{
		background-image:none;
		}
	}
#pageint{
    padding:0px 5% 0 20%;
}
@media only screen and (max-width: 450px){
	body{
		background-image:none;
		}
	#pageint{
		padding:0px 5% 0 5%;
		}
	}
.rouge{
    color: #B30002;
    font-weight: bold;
}
/*---------------------- MENU ACCUEIL -----------------------*/
#menuaccueil{
	padding-top: 50px;
}
#menuaccueil a{
	text-decoration: none;
}
#lis-moi a img{
    background-image: url("../img/icones/lis-moi.png");
    background-size: 100%;
    background-position: top;
}
#lis-moi a:hover img{
    background-position: bottom;
}
#ecoute-moi a img{
    background-image: url("../img/icones/ecoute-moi.png");
    background-size: 100%;
    background-position: top;
}
#ecoute-moi a:hover img{
    background-position: bottom;
    border: no;
}
#decouvre-moi a img{
    background-image: url("../img/icones/decouvre-moi.png");
    background-size: 100%;
    background-position: top;
}
#decouvre-moi a:hover img{
    background-position: bottom;
}
#suis-moi a img{
    background-image: url("../img/icones/suis-moi.png");
    background-size: 100%;
    background-position: top;
}
#suis-moi a:hover img{
    background-position: bottom;
}
#engage-moi a img{
    background-image: url("../img/icones/engage-moi.png");
    background-size: 100%;
    background-position: top;
}
#engage-moi a:hover img{
    background-position: bottom;
}
#menuaccueil li{
    list-style-type: none;
	width: 33%;
	float: left;
}
#calleaccueil1{
	width: 16%;
	height: 100px;
	float: left;
}
#calleaccueil2{
	width: 0%;
	height: 100px;
	float: left;
}
@media only screen and (max-width: 800px){
	#menuaccueil li{
		list-style-type: none;
		width: 50%;
	}
	#calleaccueil1{
		width: 0%;
		height: 100px;
	}
	#calleaccueil2{
		width: 25%;
		height: 100px;
	}
}
.navaccueil{
    width: 80%;
    margin: 0 auto 40px;
	
}
.icone{
    background-color: #314E08;
    width: 100%;
    height: 250px;
}
.navaccueil p{
    font-family: "Zeyada", cursive;
    font-weight: bold;
    font-size: 2.5em;
    text-decoration: none;
}
@media only screen and (max-width: 820px){
	.navaccueil p{
		font-size: 1.8em;
	}
}
@media only screen and (max-width: 375px){
	.navaccueil p{
		font-size: 1.6em;
	}
}
@media only screen and (max-width: 340px){
	.navaccueil p{
		font-size: 1.4em;
	}
}
/*---------------------- MENU ACCUEIL -----------------------*/
#menu li a{
    color:#52586C;
}
#menu li a:hover{
    color:#292C36;
}

/********************************************************/
/*---------------------- CONTENU -----------------------*/
/********************************************************/

/*---------------------- BIBLIOGRAPHIE ------------------------*/
/*   livres   */
#contenu h1{
	color: #FFF;
	font-size: 1.8em;
	padding: 10px 0 0 40px;
	margin: 20px 0 20px 0;
	min-height: 50px;
	background-color: #58a074;
}
#contenu .livres h2{
	color: #2c3e50;
	font-size: 1.6em;
	margin-bottom: 10px;
}
#contenu .livres h3{
	color: #2c3e50;
	font-size: 1.4em;
	margin-bottom: 14px;
}
#contenu .livres h4{
	color: #2c3e50;
	font-size: 1.2em;
	border-bottom: solid 4px #58a074;
	margin-bottom: 20px;
}
.livres{
	margin-bottom: 50px;
}
.livre-titre{
	width: 25%;
	float: left;
	margin: 0 15px 50px	0;
}
.livre-texte{
    padding-left: 27%;
}
.clear{
	clear: both;
}
/*   nouvelles   */
#contenu .nouvelles h2{
	color: #2c3e50;
	font-size: 1.4em;
	margin-bottom: 10px;
}
#contenu .nouvelles h3{
	color: #2c3e50;
	font-size: 1.2em;
	margin-bottom: 14px;
}
#contenu .nouvelles h4{
	color: #2c3e50;
	font-size: 1em;
	margin-bottom: 20px;
}
.nouvelles{
	margin-bottom: 40px;
}
.nouvelle-titre{
	width: 15%;
	float: left;
	margin: 0 15px 50px	0;
}
.nouvelle-texte{
    padding-left: 17%;
}

/*---------------------- ACTUALITES ------------------------*/

.grilleactu{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows:  repeat(2, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}
#contenu .actualite h2{
	color: #2c3e50;
	font-size: 1.4em;
	margin-bottom: 10px;
	text-align: center;
}
#contenu .actualite h3{
	color: #2c3e50;
	font-size: 1.1em;
	margin-bottom: 14px;
}
#contenu .actualite h4{
	color: #2c3e50;
	font-size: 1.1em;
	border-bottom: solid 4px #58a074;
	margin-bottom: 15px;
	text-align: center;
}
.actualite{
	padding: 10px;
	border-bottom: solid 0px #58a074;
}
.actualite-titre{
	margin: 15px auto;
	width: 50%;
}
.actualite-texte{
}
@media only screen and (max-width: 900px){
	.grilleactu{
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
}
@media only screen and (max-width: 600px){
	.grilleactu{
		display: block;
	}
	.actualite{
		border-bottom: solid 4px #58a074;
	}
	#contenu .actualite h4{
		border-bottom: solid 0px #58a074;
	}
}
/*---------------------- CONTACT ------------------------*/
.citation{
    background-color: #F6F8FA;
    margin: 10px 50px;
    padding: 20px;
    border-radius: 0px 20px;
    border: solid 1px #CBD4E0;
}
.insertimage{
    width: 25%;
    float: left;
    margin: 0px 10px 10px 0px;
}
.engage{
	margin-bottom: 30px;
}
@media only screen and (max-width: 1000px){
	.citation{
		margin: 10px 30px;
	}
}
@media only screen and (max-width: 600px){
	.citation{
		margin: 10px 15px;
	}
}



/*---------------------- AUDIO -----------------------*/
audio{
    width: 80%;
    margin: 5px auto 35px;
}
iframe{
    margin: 5px 10px 35px 0px;
    display: block;
    float: left;
}
/*---------------------- FOOTER -----------------------*/
#footer{
	padding: 5px;
	width:100%;
	/*position: absolute;*/
	bottom: 0px;
}
#footer a{
	text-decoration: none;
}
#footer p{
	text-align: center;
	font-size: 1em;
}
@media only screen and (max-width: 800px){
	#footer p{
		font-size: 0.7em;
	}
}
@media only screen and (max-width: 400px){
	#footer p{
		font-size: 0.5em;
	}
}