﻿
/* ========================================================================================================= Style du contenu des pages */
body {background-color:#BBB; /*width:100%; overflow-x: auto;*/}

.tout {
	position: absolute; 
	margin: 0 auto;
	background-color: #FFF9EF;	
	padding: 0 20px 0 20px;
	border: 3px solid #FFA551;
	/*border-radius: 8px;*/
	overflow: auto;
	box-sizing: border-box;
	height: auto;
	z-index: 1;}

.image-haut {
	margin: 0px -20px ;
	padding: 15px 0;
	display: flex; 
	justify-content: space-around; 
	align-items: center; 
	flex-wrap: wrap;
	box-sizing: border-box;
	background-color: #FFF4E5;
	border-bottom: 1px solid #FFA551;
}

.image5{z-index:99; position:absolute; margin:0; top:12px;}
@media screen and (min-width:801px) {
	.tout {width: 66%; left: 17%;}
	.image-haut {flex-direction: row; margin-bottom:3em} 
	.image1, .image3 {display:flex; width:30%; min-width:115px}
	.image2, .image5{width:28%; min-width:175px; margin:5px}
	.image4 {display:none}
	.largeur {width:19%; margin-bottom: 20px}
}
@media screen and (max-width:800px) {
	.tout {width: 100%; left: 0;}
	.image-haut {flex-direction: column;} 
	.image1, .image3 {display:none}
	.image2 {width:40%; min-width:190px}
	.image4 {display:flex; width:75%; min-width:200px; margin-top:10px}	
	.image5 {width:40%; min-width:200px}
	.largeur {width:19%; margin-top:8px}

}

.image-livres {
	display: flex; 
	flex-direction: row;
	justify-content: center;
	align-items: center; 
	flex-wrap: wrap;
	margin: auto;
	padding: 0;
	box-sizing: border-box;	
}
/*.image-livres img:hover {box-shadow:0px 5px 0px #E000E0;}*/

/*
@media screen and (min-width:801px) {.image-haut {width: 70%; margin-left: 15%;}}
@media screen and (max-width:800px) {.image-haut {width: 100%; left: 0;}}*/

.image-centree {
	/*position: relative;*/
	margin-top: 1%;
	margin-bottom: 0%;
	box-sizing: border-box;
}
/*@media screen and (min-width:801px) {.image-centree {width: 70%; margin-left: 15%;}}
@media screen and (max-width:800px) {.image-centree {width: 96%; margin-left: 1.6%;}}*/

.centrer {text-align:center; margin:12pt; font-size:16pt}
.a_gauche {	float:left;	max-width:160px; min-width:100px; margin:0 2% 1px 4%;}


a {color:#0050FF; text-decoration: none;}
a:hover {color:#E000E0}
.largBand img:hover {box-shadow:0px 5px 0px #E000E0;} 

h1 {
	font-family:  "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: center;
	font-size: 16pt;
	font-weight: 600;
	text-shadow: 2px 2px 2px #aaa;
	margin-top: 1em;
	margin-bottom: 9pt;
}

h3 {
	font-family: "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: justify;
	font-size: 13.5pt;
	margin : 18pt 2% 0.3em 1.25%;
	padding: 0 14px 0 14px;
	background-color: #E8E8E8;
}


p {
	font-family: "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: justify;
	font-size: 13pt;
	font-weight: normal;
	margin : 0.3em 2% 0.3em 1.25%;
	padding: 0;
	text-indent: 14px;
}

.lienLivRan {
	text-align: center;
	font-size:16pt;
	padding: 0;
	margin:6pt 0;
}
