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

@font-face{
    font-family : "kelvin sans clair";
    src : url('images/kelvin_sans_web/Kelvin_Sans-Clair.ttf');
}

@font-face{
    font-family : "kelvin sans italic";
    src : url('images/kelvin_sans_web/Kelvin_Sans-Italique.ttf');
}

@font-face{
    font-family : "kelvin sans noir";
    src : url('images/kelvin_sans_web/Kelvin_Sans-Noir.ttf');
}


body {
	margin:0;
	width: 100%;
	min-width: 900px;
	font-family: "kelvin sans clair";
	font-variant-numeric: oldstyle-nums;
	font-variant-ligatures: normal;

}


/*BOUTONS*/


.bouton_livre {
	float: right;
	width: 204px;
	font-size:24pt;
	line-height: 27pt;
}


#fleche_droite {
	width: 50%;
	position:absolute;
	height:calc(100% - 48px);
	z-index:1;
	right:0;
/*	border: blue solid 2px;*/
	cursor: url(images/fleche_droite.png), e-resize;
}


#fleche_gauche {
	width: 50%;
	position:absolute;
	height:calc(100% - 48px);
	z-index:1;
	left:0;
/*	border:red solid 2px;*/
	cursor: url(images/fleche_gauche.png), w-resize;
}




/*STRUCTURE*/


.header {
	top: 0;
	padding-top: 24px;
	position: fixed;
	padding-left: 36px;
	padding-right: 36px;
	padding-bottom: 24px;
	height: auto;
	background: #FFFFFF;
	width: calc(100% - 72px);
	z-index:2;
}


.beton {
	vertical-align: middle;
	width: 36px;
	height: auto;
	padding-right: 72px;
	float: left;
}


.conteneur_titre {
	font-size:24pt;
	line-height: 27pt;
	width:auto;
	padding-right: 36px;
	float: left;
}


.conteneur_general {
	margin-top: 120px;
	width: calc(100% - 72px);
	padding-left: 36px;
	padding-bottom: 24px;
}


.conteneur_A {
	width: calc(100% / 3 * 2 - 36px);
	height: 100%;
	float: left;
	font-size:42pt;
	line-height: 54pt;
	z-index:1;
	position:relative;
	padding-bottom: 24px;
}


.conteneur_A_info {
	width: calc(100% / 3 * 2 - 36px);
	height: auto;
	float: left;
	font-size:24pt;
	line-height: 27pt;
	padding-bottom: 24px;
}


.conteneur_B_image {
    width: calc(100% / 3 - 24px);
	right: 36px;
	position: fixed;
	font-size: 10pt;
}


.conteneur_B_colophon{
    width: calc(100% / 3);
	float: left;
	margin-left: 36px;
	font-size:12pt;
	line-height: 15pt;
	padding-bottom: 36px;
}




/*IMAGES*/


.images_index_h {
	visibility: hidden;
	position: absolute;
}


.images_index_v {
	visibility: hidden;
	position: absolute;
	height: 72px;
}


.mini_img_h {
	width: 72px;
	height: auto;
	vertical-align: middle;
}


.mini_img_v {
	height: 72px;
	width: auto;
	vertical-align: middle;
}

.img_hidden {
	visibility: hidden;
	display: none;
	padding-top: 36px;
	width: 100%;
}




/*TYPOGRAPHIE*/

.alinea {
	text-indent: 108px;
}

.filet {
	border-bottom: 3px solid black;
	margin-top: 36px;
	margin-bottom: 36px;
	width: 50%;
}


.italic {
	font-family: "kelvin sans italic"; 
}

.bold {
	font-family: "kelvin sans noir"; 
}

.souligne {
color:darkgrey;
}


.legende {
	width: 144px;
	position: fixed;
	right: 36px;
	bottom: 36px;
	padding-left: 36px;
		font-size: 10pt;
	line-height: 12pt;
}

.resume_livre {
	font-size: 24pt;
	line-height: 27pt;
	font-family: "kelvin sans noir";
}

.credits {
	font-size: 10pt;
	line-height: 13pt;
}

.fdp {
	font-size: 8pt;
	line-height: 11pt;
	font-variant-numeric: proportional-nums;
}

/*RESPONSIVE*/


@media screen and (max-width: 1366px) {
  .conteneur_titre {
    font-size: 18pt;
    line-height: 20pt;
    padding-right: 72px;
  }
  .bouton_livre {
    position: absolute;
    right: 36px;
    font-size: 18pt;
    line-height: 20pt;
  }
  .conteneur_general {
    margin-top: 108px;
  }
}




@media screen and (max-width: 1080px) {


#titre_02 {
  visibility: hidden;
  display: none;
}
#titre_03 {
  visibility: hidden;
  display: none;
}
#photos_livre {
  width: 100%;
  padding-left: 0;
  float: left;
}
#img_info {
 visibility: hidden;
}
#cmd_info {
font-size: 24pt;		
}
#legende_special {
	position: relative;
	padding-top: 36px;
	bottom: 0px;
}
	
.filet {
	border-bottom: 3px solid black;
	margin-top: 36px;
	margin-bottom: 36px;
	width: 144px;
}
	
	  .conteneur_general {
    margin-top: 108px;
  }
	
.conteneur_B_colophon {
  width: 100%;
  position: relative;
  margin-left: 0;
font-size: 14pt;
line-height: 17pt;
}

.img_hidden {
	visibility: visible;
	display: inline-block;
}

.legende {
	font-size: 12pt;
	line-height: 15pt;
}
	
}



@media screen and (max-width: 828px) {
  .header {
    width: 744px;
  }
}