@charset "utf-8";
/* CSS Document */
* { margin:0; padding: 0}

body { 
	margin-left: auto;
	margin-right: auto;
	background-color: #333; /* Couleur du fond d'écran */
	max-width: 1140px;
	
	font: 10pt "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif;
	}
	
.header img {
	width: 100%;
	height: auto;
}

.contain {
	background-color: white;
	border-radius: 5px;
	width: 100%;
	padding: 10px;
}

.footer {
	color: white;
	text-align: center;
	padding-top: 5px;
	width: 100%;
	}

	
.titre h1 {	text-align: center; color: #333; font-variant: small-caps; font-size: 2.5em; border-bottom: solid 2px #333; font-weight: bold; padding-top: 15px;}
.titre h1::first-letter { color: #66F;}
.titre h2 {	text-align: left; color: #666; font-size: 16pt; padding-left: 20px; padding-bottom: 10px;}
.titre h3 {color: #333; text-transform: uppercase; font-weight: bold; font-size: 12pt; font-family: 'Tahoma'; padding-left: 5px;}
.titreimg {text-align: center;}
.titreimg img {	background-color: #CCC;	border: solid 1px black; margin-bottom: 10px; box-shadow: 0px 35px 40px -40px rgba(0,0,0,0.75); 	border-radius: 4px;	overflow: hidden; width: 100%; height: auto;}

.date {font-weight: bold; text-align:center;  border: 10px solid transparent; margin-bottom: 15px; margin-top: 15px; padding: 15px;border-image-source: url(../../images/border.png); border-image-slice: 30;}

.liste img {padding-bottom: 15px;}
.liste div {padding-left: 5px;font-variant: small-caps; border-bottom: solid 1px #ddd; border-radius: 5px}
.liste div :hover {color: white; background-color: #333;border-radius: 5px ; padding-left: 3px;padding-right: 3px;}
.liste {padding-top: 10px; padding-bottom: 10px;}


.soustitre {width: 100%;font-size: 1.1em; font-weight: bold; background-color:#EEE; padding-left: 10px;text-align: left; margin-left: 15px; margin-right: 15px; border: solid 1px #666; color: #933; margin-bottom: 10px;}
.soustitre span { color: #F5F5F5; float: right; display: block; position: relative; top: -1px; right: 0px; font-size: 8pt; line-height: 12pt; font-weight: normal; background: #666; padding: 3px 5px; border-radius: 0 3px 0 3px; }

div.cover { text-align: center; position: relative; overflow: visible; height: 200px; width: 200px; }
div.cover img {box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.30); border: 1px solid black; max-height: 200px;}
div.cover img.img3 { position: absolute; top: 0; left: 22px; -ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg);  transform: rotate(-7deg); width: 100px; }
div.cover img.img2 { position: absolute; top: 15px; left: 42px; width: 100px;}
div.cover img.img1 { position: absolute; top: 30px; left: 62px; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg);  transform: rotate(7deg); width: 100px; }
.isbn {margin : 10px;	font-size: 0.8em; }
.pair {background-color: #f5f5f5;}
.separation {border-left: 1px solid #ccc; }
.presentation {width: 100%;}
.infos {position: relative; background-color: #FFF; border-top: 1px dotted #337ab7; padding-top: 10px;clear: both;  }
.infos table {font-size: 0.9em;}
.infos tr {text-align: center;}
.infos td {padding: 3px;}
.tabletitre {text-align: left; font-weight: bold;}
div.infos p { font-size: 0.9em;	text-align:left; margin-left : 1.1em; line-height: 10px;}
.sidelist {position: sticky; position: -webkit-sticky; top: 20px; background-color: #eee; padding: 5px; border: 1px solid #ddd;}
.listedroite {background-color: white; margin: 5px; border: 1px solid #ddd;  }
.listedroite p {font-size: 8pt; border-bottom: #eee dotted 1px; padding-left: 5px; margin-bottom: 0.3rem;}
.listedroite p:hover{background-color: orange;}
.listedroite, .liste a, .liste a:visited, .liste a:hover, .listedroite a, .listedroite a:visited, .listedroite a:hover{color: black; text-decoration: none;}
.row {padding-bottom: 20px;padding-top: 20px;}
.description {text-align: justify;}
.fichedulivre {padding-top: 20px;}
.fichedulivre h1 {color: green; text-transform: uppercase; font-weight: bold; font-size: 14pt; font-family: 'Tahoma'; border-left: 1px solid green; border-bottom: 1px solid green; border-radius: 5px; padding: 5px;}

/* SOMMAIRES */
.book-index {width: 100%;}
.book-index dl { overflow: hidden; width: 100%; margin: 0 20px 20px; padding: 0; }
.book-index dt { width: 100%; margin: 0 0 12px; clear: both; text-align: left; color:red; }
.book-index dt.main { width: 100%; margin: 0 30px 0 10px; }
.book-index dt.sub { width: 100%; margin: 0 30px 0 20px; }
.book-index dd.title { float: left; text-align: left; width: 90%; margin: 0; padding: 0; }
.book-index dd.main { font-size: 11pt; height: 18px; line-height: normal; background: #FFF url('../../images/index_main.gif') repeat-x right center; }
.book-index dd.main span { font-size: 11pt; font-weight: bold; padding-right: 9px; background: #FFF; }
.book-index dd.sub { background: #FFF url('../../images/index_sub.gif') repeat-x right center; }
.book-index dd.sub span { padding: 0 9px 0; background: #FFF; }
.book-index dd.pg { float: left; text-align: right; width: 35px; margin: 0; padding: 0; }


/********************/
/**** BACKOFFICE ****/
/********************/
.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }







/*--------------------------------------------- */
/* POUR LES SMARTPHONES PORTRAITS 320px~767px 	*/
/*--------------------------------------------- */

@media only screen and (min-width: 767px) and (max-width: 1200px) {
/*.hide {display: none;}*/
.soustitre span {display: none;}
/*.titreimg img {width: 300px;}*/
}


/*--------------------------------------------- */
/* POUR LES SMARTPHONES PORTRAITS 320px~767px 	*/
/*--------------------------------------------- */

@media only screen and (max-width: 767px) {
.hide {display: none;}
body {font-size: 8pt;}
.titre h2 {	font-size: 14pt;}
.titreimg img {width: 300px;}
.details {text-align: center; width: 50%;}
div.cover { text-align: center; position: relative; overflow: visible; height: 200px; width: 150px; }
.infos {margin-left: 10px;}
.isbn {margin : 10px; font-size: 0.6em; text-align: center;}
.soustitre span {display: none;}

/* SOMMAIRES */
.book-index {width: 100%;}
.book-index dl { overflow: hidden; width: 100%; margin: 0; padding: 0; }
.book-index dt { width: 100%; margin: 0; clear: both; text-align: left; color:red; }
.book-index dt.main { width: 100%; margin: 0; }
.book-index dt.sub { width: 100%; margin: 0; }
.book-index dd.title { float: left; text-align: left; width: 90%; margin: 0; padding: 0; }
.book-index dd.main { font-size: 10pt; height: 18px; line-height: normal; background: #FFF url('../../images/index_main.gif') repeat-x right center; }
.book-index dd.main span { font-size: 10pt; font-weight: bold; padding-right: 9px; background: #FFF; }
.book-index dd.sub { background: #FFF url('../../images/index_sub.gif') repeat-x right center; }
.book-index dd.sub span { padding: 0 9px 0; background: #FFF; }
.book-index dd.pg { float: left; text-align: right; width: auto; margin: 0; padding: 0; }

}