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

/* https://css-tricks.com/examples/hrs/ */
hr { 
	border: 0; 
	width:100%;
	height: 1px; 
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
	margin:40px;
	}
hr.normal { 
	margin-top:3px;
	}
#desetoiles-page {
	width:90%;
	margin:0 auto;
	}
#blog-menu {
	margin:25px auto;
	}
h1 {
	font-size: 2.7em;
	color:#da299d;
	}
h2 {
	font-size: 2em;
	margin-top:40px;
	color:#da299d;
	}

/* --- TITRE --- */

#titre {
	background:url(img/fond-entete.jpg) no-repeat center;
	-webkit-background-size:cover;
	background-size:cover;
	min-height:50vh;
	min-width:100%;
	margin-bottom:10%;	
}

#titre-wrap {
	border: solid 50px transparent;
	}

#titre p.titre1 {
	font-size:2.3em;
	color:#da299d;
	margin:0px 30px 8px 30px;
	font-weight:400;
	}
#titre p.titre2 {
	font-size:1.5em;
	color:#252525;
	margin:0 30px 8px 30px;
	font-weight:400;
	}
#titre p.titre3 {
	font-size:1.3em;
	color:#6b6969;
	margin:0 30px 8px 30px;
	}


/* --- SYNOPSIS --- */

#synopsis {
	display:flex;
	flex-direction:row;
	}
#synopsis .texte {
	flex: 1;
	}
#synopsis .image {
	margin:0 10%;
	}

#desetoiles-page p {
    margin: 15px 0;
}

/* --- EXTRAIT --- */

#extrait-box {
	position:fixed;
	top:0;
	top: 50%; left: 50%; /* à 50%/50% du parent référent */
	transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
	padding:0;
	min-width:600px;
	max-width:600px;
	height:800px;
	z-index:55;
	display:none;
	}

.close-extrait {
	text-align:right;
	color:#fff;
	}

#extrait-book {
	margin:30px 0;
	}

/* --- ACHETER --- */

#emarchands {
	display:flex;
	flex-direction:row;
	}
#emarchands img, #marchands img {
	border:solid 1px #000;
	background-color:#000;
	margin-right:10px;
	padding:2px;
	}

/* --- COMMENTAIRES --- */
#CommList {
	display:flex;
	flex-direction: row;
	margin-bottom:15px;
	}

.ilsenparlent {
	margin:15px;
	width:200px;
	border:solid 1px #CCC;
	height:300px;
	}
	
.ilsenparlent > div {
	margin:10px;
}
.ilsenparlent div.img {
	text-align:center;
	height:70px;
}
.ilsenparlent div.txt {
	text-align:left;
	height:110px;
}

/* PETIT */
@media screen and (max-width: 1024px) {

#synopsis, #emarchands, #CommList {
	flex-direction:column;
	}
}


	
/* GRAND */
@media screen and (min-width: 1025px) {

}