@charset "utf-8";
/* CSS Document */

#biblio {
	background-color: wheat;
	width: 100%;
	float: left;
	-font-size: 0;
}


.livre {
	background-color: blue;
	-float: left;
	margin: 10px;
	position: relative;
    display: flex;
	-flex-wrap: wrap;
    -flex-direction: column;
}

.fantome {
	width: 200px;
	visibility: hidden;
	margin: 0 5px;
	flex: 1;
}
/***************************COUV***************************************************************************/

.etagere {
	width: 100%;
	-height: 400px;
	background-color: #C03;
	float: left;
	display: flex;
	flex-wrap: wrap;
	-flex-flow: column-wrap;
	justify-content: space-between;
}
.format { width: 140px; -height: 217px; -height: 256px; font-size: 13px;}
.format_6 { width: 140px; -height: 217px; -height: 256px; font-size: 13px;}
.format_4 { width: 220px; height: 341px; height: 386px; font-size: 15px;}

.couv {width: 140px; height: 217px;}
.couv_6 {width: 140px; height: 217px;}
.couv_4 {width: 220px; height: 341px;}
.couvr {width: 100%; height: 100%; -float: left;}

.couv_6, .couv_4, .couv {
	background-color: #CCC;
	position: relative;
}

@media screen and (max-width:912px) {
.etagere { background-color: blue;}
.format { width: 220px; height: 341px; height: 386px; font-size: 15px;}
.couv {width: 220px; height: 341px;}
}

.image_bottom {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	bottom: 0px;
}

.image_top {
	max-width: 100%;
	max-height: 100%;
}


.mention {
	padding-top: 5px;
	font-family: Verdana, Geneva, sans-serif;
	background-color:#996;
	text-align:center;
}

.livre a {color: #111; text-decoration: none;}
.livre a:hover {color: #007997;	text-decoration: underline;}
.livre a:visiuted {color: #007997;}

/***************************FICHE*********************************************************************************/

.fiche {
	background-color: #09C;
	display: flex;
	-max-width: 40%;
}

.quatrieme {
	-width: 700px;
	-max-width: 50%;
	background-color:#FC3;
	margin: 10px;
	display: flex;
	flex-direction: column;
	flex:1;
	-align-items: flex-end;
}

.quatrieme h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 28px;
	background-color: #63F;
	color: #333;
	margin: 0;
	padding:0;
	font-weight: normal;
	text-decoration: none;
}
	
.quatrieme h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 16px;
	background-color: #F63;
	color: #666;
	margin: 10px 0;
	padding: 0;
	font-weight: normal;
}

.resume{
	flex:1;
}

.quatrieme p {
	font-family: Georgia, "Times New Roman", Times, serif;
	-font-family:Verdana, Geneva, sans-serif;
	font-size: 17px;
	color: #111;
	display: inline-block;
	background-color: #636;
	text-align: justify;
	line-height: 24px;
	text-indent: 25px;
	margin:0;
	-padding:0;
	-flex:1;
	-height: 100%;
	;
}

#liens{
	margin-top:10px;
	background-color: mediumvioletred;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}

.amazon {
	background-color: #C03;
	margin-top: 20px;
	padding: 5px 20px;
	display: block;
	align-self: flex-end;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}

.bouton {
	background-color:#F1F1F1;
	-border: 1px solid #D4D4D4;
	display:inline-block;
	cursor:pointer;
	color:#3E3E3E;
	font-family:Arial;
	font-size:16px;
	margin-left: 10px;
	padding: 8px 32px;
	text-decoration:none;
	float:right;
	font-variant: small-caps;
	letter-spacing: 1px;
	min-width: 50px;
	text-align:center;
	align-self: flex-end;
}

.kindle:hover  {
	background-color: #FFC20D;
	color:#0A0A0A;
}

.kobo:hover  {
	background-color: #F00030;
	color:#ffffff;
}

.telecharger:hover  {
	background-color: #A3D743;
	color:#000000;
}

.forum:hover  {
	background-color: #1C1C1C;
	color:#ffffff;
}

#biblio, .livre, .quatrieme, .quatrieme h1, .quatrieme h3, .quatrieme p, #liens, .fiche, .etagere, .mention, .couv_6, .couv_4 {
	background-color: #f9f9f9;
}