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

*{margin:0;
padding:0}



body{
	font-family:'Roboto Slab' ;
	position:relative;
	margin:auto;
	width:95%;
	scroll-behavior:smooth;
}


html, body, body button, body a{
cursor:none;
}

header a{
	color:#000;
}

a:hover{
	cursor:none;
}

body button:hover, img:hover{
	cursor:none;
}

/* CURSEUR PERSONNALISE ////////
/////////////////////////////
//////////////////////*/

.cursor-dot,
.cursor-dot-outline  {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
   	transform: translate(-300%, -100%);
    transition: opacity 0.3s ease-in-out,
               transform 0.3s ease-in-out;
	z-index:9999;
}


.cursor-dot {
    width: 10px;
    height:  10px;
    background-color: #ffd20c;
}


.cursor-dot-outline {
    width: 14px;
    height:  14px;
	background-color: #0d2b9d; }

@media only screen and (max-width:800px){
	.cursor-dot, .cursor-dot-outline{
		display:none;
	}
}




	
	
/*FIN CURSEUR ////////////////
////////////////////////////
////////////////////////////*/


/* //////// HEADER //////
/////////////////////////
///////////////////////*/

header{
	position:relative;
	width:100%;
	float:left;
	background-color:#FFF;
	padding-top:30px;
	/*background-color:aqua;*/
	z-index:2;
	margin-bottom:10px;
}

.header-logo {
	position:relative;
	float:left;
	/*background-color:blue;*/
	display:inline-block;
	width:50%;
}

.logo {
	width:10%;
	float:left;
	margin-right:2%;
}

.header-logo h1{
	float:left;
	line-height:1.3vw;
	text-decoration:none;
	text-transform: uppercase;
	margin:0;
	letter-spacing:0.1em;
	font-weight:700;
	font-size:2.5vw;
	margin-top:3%;
	text-decoration:none;
	text-align:right;
	font-family:'Roboto', sans-serif;
	transition:all 0.5s;
}

header a:visited{
	color:inherit;
}



/* //////// FIN  HEADER //////
/////////////////////////
///////////////////////*/



/* //////// NAV  //////
/////////////////////////
///////////////////////*/



.menu{ 
	/*background-color:yellow;*/
	position:relative;
	text-decoration:none;
	color:inherit;
	float:right;
	width:50%;
	list-style: none;
	z-index:2;
	padding-top:1%}

.menu li{ 
	position:relative;
	display:inline-block;
	/*background-color:blueviolet;*/
	float:right;
	text-decoration:none;
	text-transform: uppercase;
	margin-left:3%;
	letter-spacing:0.1em;
	font-weight:700;	
}

.menu a {
	/*background-color:red;*/
	position:relative;
	color:#000;
	font-size:1.5vw;
	text-decoration:none;
	text-align:right;
	font-family:'Roboto', sans-serif;
	transition:all 0.5s;
}

.menu a:after{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0%;
  content: '';
  color: transparent;
  background: #000;
  height: 2px;
  transition:all .5s;
}

.menu a:hover{
	color:#000;}

.menu a:hover:after{
  width: 100%;	
}


@media only screen and (max-width:1000px){
	.menu a{
		font-size:1.4vw;}
}

@media only screen and (max-width:800px){
	.header-logo{
		position:relative;
		width:60%;
		left:20%;
		float:inherit;
		display:inherit;
		padding-left:10%;
		margin-bottom:20px;
	}
	.menu{
		position:relative;
		float:left;
		width:90%;
		margin-top:10px;
		padding-left:0;
	}
	
	.menu a{
		font-size:2.2vw;}
	
	.menu li{
		text-align:center;
		float:right;
		margin-left:0%;
		padding-left:3%;
		padding-right:3%;
	}
	
	@media only screen and (max-width:480px){
		
		.header-logo{
			width:70%;
			float:inherit;
			left:0%;
			padding-left:30%;
		}

		.menu
		{width:96%;
		right:4%;
		left:0%;}
		
		.menu a:after{
			top:12px;}
		
		.menu a{font-size:2.5vw;}
	}
	
}

/* //////// FIN NAV  //////
/////////////////////////
///////////////////////*/




/* //////// BLOC 1 MANIFESTE et PRESENTATION  //////
//////////////////////////////////////////////////
////////////////////////////////////////////////*/



.dernieres_parutions {
	position:relative;
	float:left;
	width:90%;
	display:inline-block;
	margin-left:5%;
	margin-right:0%;
	padding-bottom:2%;
	padding-top:2%;
	/*background-color:red;*/
}

.dernieres_parutions h2{
	padding-top:3%;
	padding-bottom:2%;	
}

.couv-accueil{
	position:relative;
	display:inline-block;
	float:left;
	margin-right:2%;
	margin-bottom:20px;
	width:18%;
}

.les_anciens{
	position:relative;
	float:left;
	width:90%;
	display:inline-block;
	margin-left:5%;
	margin-right:0%;
	padding-bottom:5%;
	padding-top:2%;
	/*background-color:green;*/
}

.les_anciens h2{
	padding-top:1%;
	padding-bottom:2%;	
}

.les_anciens .couv-accueil{
	margin-right:2%;
	margin-bottom:20px;
	width:9%;
}




figure {
  position:relative;
}


.couv-accueil img{
	position:relative;
	width:100%;
	height:auto;
	transition:all 0.3s ease-in-out;
}


.couv-accueil .show-hover {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  opacity:0;
}

figure:hover .show-hover{
  opacity:1
}

img.logo-couv{
	position:relative;
	width:70%;
	left:20%;
	margin-top:15%;
}

@media only screen and (max-width:850px){
	
	.dernieres_parutions{
		position:relative;
		float:left;
		width:98%;	
		margin-left:1%;
	}
	
	.dernieres_parutions h2{
		font-size:3vw;
	}
	
	.dernieres_parutions .couv-accueil{
		width:47%;
		float:left;
		margin-right:1%;
	}
	
	.dernieres_parutions .couv-accueil:nth-of-type(3){
		margin-left:25%;
		margin-right:25%;
		
	}
	
	.couv-accueil .show-hover{
 	opacity:1
}
	
	.les_anciens{
		width:98%;
		float:left;
		margin-left:1%;
		height:auto;
	}
	
	.les_anciens h2{
		font-size:3vw;
	}
	
	.les_anciens .couv-accueil{
		display: inline-block;
		width:30%;
		margin-right:2.5%;
		margin-bottom:10px;
		margin-left:0;
		height:auto;
	}
	
	.les_anciens .couv-accueil:nth-of-type(14){
		float:inline-block;
		margin-right:2,5%;
		margin-bottom:0px;
	}
	}
	
	

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

	.dernieres_parutions{
		position:relative;
		float:left;
		width:98%;	
		margin-left:1%;
	}
	
	.dernieres_parutions h2{
		font-size:3vw;
	}
	
	.dernieres_parutions .couv-accueil{
		width:47%;
		float:left;
		margin-right:1%;
	}
	
	.dernieres_parutions .couv-accueil:nth-of-type(3){
		margin-left:25%;
		margin-right:25%;
		
	}
	
	.couv-accueil .show-hover{
 	opacity:1
}
	
	.les_anciens{
		width:98%;
		float:left;
		margin-left:1%;
		height:auto;
	}
	
	.les_anciens h2{
		font-size:3vw;
	}
	
	.les_anciens .couv-accueil{
		display: inline-block;
		width:30%;
		margin-right:2.5%;
		margin-bottom:10px;
		margin-left:0;
		height:auto;
	}
	
	.les_anciens .couv-accueil:nth-of-type(14){
		float:inline-block;
		margin-right:2,5%;
		margin-bottom:0px;
	}
	}
	
	
	
	

/* accueil partie 2 - texte de présentation  //////////////
//////////////////////////*/

#accueil{
	position:relative;
	width:60%;
	float:left;
	left:20%;
}

h2{
	position:relative;
	font-family:'Roboto', sans-serif ;
	font-weight:500;
	font-size:1.5vw;
	text-align:center;
	letter-spacing:0.05em;
	text-transform:uppercase;
	color:#000;
	padding-bottom:5%;
}

#accueil p{
	position:relative; 
	float:left;
	text-align:center;
	font-size:1.2vw;
}

#nouvelles-publications {
	/*background-color: orange;*/
	width: 100%;
	height: 10px;
	position: relative;
	float:left;
	margin-top:0px;


}
#nouvelles-publications a{
	position:relative;
	text-decoration:none;
	transition:all .5s;
	}

h3{
	position:relative;
	margin:auto;
	font-family:'Roboto', sans-serif;
	font-weight:700;
	text-align:center;
	color:#000;
	text-transform: uppercase;
	transition:all .5s;
}



@media only screen and (max-width:800px){
	
	#accueil{
		width:90%;
		left:5%;
	}

	#accueil h2{
		font-size:2.2vw;
	}
	
	#accueil p{
		font-size:1.5vw;
	}}
	
	@media only screen and (max-width:480px){

	#accueil h2{
		font-size:4vw;
	}
	
	#accueil p{
		font-size:3.5vw;
		}}



/* //////// FIN BLOC couverture et presentation //////
//////////////////////////////////////////////////
////////////////////////////////////////////////*/

/* LIVRE PAR LIVRE - MISE EN FORME GENERALE ///////*/

.partie_gauche {position:relative;width:48%;float:left;height:auto}
.partie_gauche img {width:90%;position:relative;float:right;}


.partie_droite{position:relative;float:right;width:48%;height:auto}
	.infos-texte{position:relative;float:left;width:70%;height:90%}

		.infos-prat{position:relative;float:left;width:35%;background-color:#f1c2dc}
		.infos-prat:after{content:"";display:block;padding-bottom:100%}
			.infos-prat p{position:absolute;width:90%;font-family:Roboto,sans-serif;font-size:1vw;font-weight:300;color:#fff;padding-left:7%;top:7%}
			.infos-prat a{color:#FFF; text-decoration:none;font-weight:500;}
				.infos-prat a:hover{border-bottom:2px solid #FFF;}

		.prez-extrait{position:relative;float:left;width:85%;margin-top:7%;border:2px solid #03e0da}
		.prez-extrait:after{content:"";display:block;padding-bottom:95%}
			.prez-extrait p {position:absolute;width:90%;font-family:'Roboto Slab';font-size:.9vw;font-weight:400;color:#000;padding-left:5%;top:5%}
			p.bio {top:70%; font-family:'Roboto', sans-serif;font-weight:100;}


	.photo-auteur{position:relative;float:left;width:30%;margin-top:0%;}
		.photo-auteur img{position:relative; width:75%;float:left;margin-top:90%}

.autres-livres {
	position:relative;
	float:left;
	/*background-color:yellow;*/
	width:100%;
}

.autres-livres p{
	width:40%;
	margin-left:30%;
	text-align:center;
	/*background-color:aquamarine;*/
	padding-top:2%;
}
.autres-livres a{position:relative;
	color:#000;
	text-decoration:none;
	text-align:center;
	font-size:1.2vw;
	font-weight:600;
	text-transform:uppercase;
	font-family:'Roboto';
}

.autres-livres:visited{
	color:inherit;
}

.autres-livres a:before{
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.autres-livres a:hover:before {
  visibility: visible;
  width: 100%;
}

/* //////// JE CROIS QUE JE VIENS DE MOURIR ARTHUR SCANU  ///////*/


#livre-arthur{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-arthur .infos-prat{background-color:#30368c}
#livre-arthur .prez-extrait{border:2px solid #30368c; letter-spacing:-0.02vw; }
#livre-arthur p.bio{top:75%;}

/* //////// AVEC DES LUCIOLES ON PEUT FAIRE DES COUILLES FRANCOIS BETREMIEUX ///////*/
#livre-francois{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-francois .infos-prat{background-color:#00bc9c}
#livre-francois .prez-extrait{border:2px solid #00bc9c}
#livre-francois p.bio{top:75%}

/* //////// MEME REDDIT NE PEUT PAS NOUS SAUVER LULLA CLOWSKI ///////*/
#livre-lulla{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-lulla .infos-prat{background-color:#f8c5cd}
#livre-lulla .prez-extrait{border:2px solid #f8c5cd}
#livre-lulla p.bio{top:80%;}

/*/////// J'HABITE DESORMAIS JUSTE EN DESSOUS DU CIEL DE ANDREA THOMINOT ///////*/
#livre-andrea{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-andrea .infos-prat{background-color:#19547e}
#livre-andrea .prez-extrait{border:2px solid #19547e}
#livre-andrea p.bio{top:77%;}

/*////// AU BOUT DES DOIGTS QUE DE LA KERATINE MONA MALACAR ////////*/
#livre-mona{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-mona .infos-prat{background-color:#b0d9c3;}
#livre-mona .prez-extrait{border:2px solid #b0d9c3;letter-spacing:-0.02vw;word-spacing:-0.03vw;}
#livre-mona p.bio{top:77%; letter-spacing:-0.035vw; word-spacing:-0.02vw;}

/*/////// LES DOUTES ÉTENDUS SUR LA CORDE À LINGE CORENTIN HUET ///////*/
#livre-corentin{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-corentin .infos-prat{background-color:#3a2e6e;}
#livre-corentin .prez-extrait{border:2px solid #3a2e6e;}
#livre-corentin p.bio{top:77%;}
#livre-corentin .prez-extrait p{letter-spacing:-0.01vw;}


/*////// J'AI UN TROU DANS LE COEUR DE LA TAILLE D'UNE BROUSSE LORENA BUR ///*/
#livre-lorena {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-lorena .infos-prat{background-color:#fcbd17;}
#livre-lorena .prez-extrait{border:2px solid #fcbd17;}
#livre-lorena p.bio{top:77%;}
#livre-lorena .prez-extrait p{letter-spacing:-0.01vw; line-height:1.15vw;}


/*////// ET ENCORE AUCUN MOINEAU TOM LEVÊQUE /////////*/
#livre-tom {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-tom .infos-prat{background-color:#816cae;}
#livre-tom .prez-extrait{border:2px solid #816cae;}
#livre-tom p.bio{top:77%;}

/*///// DES ODEURS DE BARBECUE, DE WEED ET DE BRETZELS SELIMA ATALLAH CHETTAOUI //////////*/
#livre-selima {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-selima .infos-prat{background-color:#1f5b4e;}
#livre-selima .prez-extrait{border:2px solid #1f5b4e;}
#livre-selima p.bio{top:77%;}


/*///// LA VIE NORMALE DES GENS NORMAUX ELISE MANDELBAUM /////////////////*/
#livre-elise {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-elise .infos-prat{background-color:#d3bfde}
#livre-elise .prez-extrait{border:2px solid #d3bfde}
#livre-elise p.bio{top:77%;}


/*///// MÉCHANT EXIL PLUS TERRIBLE QUE NOUS SOPHIE COURGE /////////*/
#livre-sophie {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-sophie .infos-prat{background-color:#287f5e;}
#livre-sophie .prez-extrait{border:2px solid #287f5e;letter-spacing:-0.02vw;}
#livre-sophie p.bio{top:75%;}


/*///// POURQUOI JE MANGE DES DUNES KEVIN BRECHEMIER ///////////*/
#livre-kevin {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-kevin .infos-prat{background-color:#ce374d;}
#livre-kevin .prez-extrait{border:2px solid #ce374d;}
#livre-kevin p.bio{top:77%;}


/*///// DANS MON VENTRE NAGE UN SERPENT DE FEU  EMILIE DESELIENE //////////*/
#livre-emilie {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-emilie .infos-prat{background-color:#29a7c0;}
#livre-emilie .prez-extrait{border:2px solid #29a7c0;}
#livre-emilie .prez-extrait p{}
#livre-emilie p.bio{top:75%;}


/*///// IL FAUT TOMBER D'UNE COMÈTE POUR CONNAITRE LA SOLITUDE CLAIRE-SELMA AITOUT ///////*/
#livre-selma{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-selma .infos-prat{background-color:#8e1855;}
#livre-selma .prez-extrait{border:2px solid #8e1855;}
#livre-selma .prez-extrait p{}
#livre-selma p.bio{top:75%;}

/*///// BONJOUR-BONSOIR DE LA CITE MAGMA //////*/
#livre-amelie{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-amelie .infos-prat{background-color:#841c11;}
#livre-amelie .prez-extrait{border:2px solid #841c11;}
#livre-amelie .prez-extrait p{letter-spacing:-0.02vw;}
#livre-amelie p.bio{top:79%;}

/*//// L'AVENTURE QUE C'EST D'AVOIR DE LA VODKA DANS L'OEIL //////*/
#livre-clementine{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-clementine .infos-prat{background-color:#4f6ab1;}
#livre-clementine .prez-extrait{border:2px solid #4f6ab1;}
#livre-clementine .prez-extrait p{}
#livre-clementine p.bio{top:70%;}

/*//// LES JOURS FUMENT TA VIANDE  //////*/
#livre-arthure{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-arthure .infos-prat{background-color:#5B4A9E;}
#livre-arthure .prez-extrait{border:2px solid #5B4A9E;}
#livre-arthure .prez-extrait p{}
#livre-arthure p.bio{top:70%;}

/*//// PAMELA CRUCHE EST UNE FILLE COMME LES AUTRES  //////*/
#livre-chloe{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-chloe .infos-prat{background-color:#8c3c8e;}
#livre-chloe .prez-extrait{border:2px solid #8c3c8e;}
#livre-chloe .prez-extrait p{letter-spacing:-0.02vw;}
#livre-chloe p.bio{top:72%;}


/*//// NE PLUS PENSER AUX ASCENSEURS  //////*/
#livre-camille{position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-camille .infos-prat{background-color:#1a82a1}
#livre-camille .prez-extrait{border:2px solid #1a82a1; letter-spacing:0; }
#livre-camille p.bio{top:75%;}

/*//// DE L'AMOUR MÊME S'IL EST EN MORCEAUX  //////*/
#livre-bleuet {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-bleuet .infos-prat{background-color:#cce4ce}
#livre-bleuet .prez-extrait{border:2px solid #cce4ce; letter-spacing:0; }
#livre-bleuet p.bio{top:75%;}

/*//// ON N'EST PAS SERIEUXSES  //////*/
#livre-anthologie {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-anthologie .infos-prat{background-color:#422683; width:40%}
#livre-anthologie .prez-extrait {border:2px solid #422683; letter-spacing:0; width:92%;margin-top:7%;}
#livre-anthologie p.bio{top:70%;}

/*//// KING KONG EN MARCEL BLANC  //////*/
#livre-skandar {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-skandar .infos-prat{background-color:#ffd20c;}
#livre-skandar .prez-extrait {border:2px solid #ffd20c; letter-spacing:0;margin-top:7%; }
#livre-skandar .prez-extrait p {letter-spacing:-0.02vw;}
#livre-skandar p.bio{top:75%;}


/*//// LA TERRE TOURNE ET LES MONTAGNES CAPITULENT //////*/
#livre-esther {position:relative;float:left;width:100%;height:90%;padding-top:50px}
#livre-esther .infos-prat{background-color:#0d2b9d;}
#livre-esther .prez-extrait {border:2px solid #0d2b9d; letter-spacing:0;margin-top:7%;}
#livre-esther p.bio{top:75%;}




@media only screen and (max-width:800px){
	
	.partie_gauche{width:70%;left:15%;}
	.partie_gauche img {width:100%;}
	
	.partie_droite{width:80%;left:10%; float:left; margin-top:20px;}
	.infos-texte{width:100%;}
	.infos-prat{width:30%;display:inline-block;float:left;left:5%;}
	.infos-prat p {font-size:1.9vw;}
	.prez-extrait{width:55%;display:inline-block;float:left;left:10%;}
	.prez-extrait .bio {display:none;}
	.prez-extrait p{font-size:1.6vw;line-height:inherit;}
	#livre-lorena .prez-extrait p{line-height:inherit;}
	.photo-auteur{display:none;}
	
	.autres-livres{width:90%;}
	.autre-titre{width:23%;padding-top:20px; padding-bottom:10px; font-size:1.7vw;}
	.autres-livres .autre-titre:nth-of-type(5),.autres-livres .autre-titre:nth-of-type(6), .autres-livres .autre-titre:nth-of-type(7){width:30%;}
	.autres-livres-2 .autre-titre:nth-of-type(5),.autres-livres-2 .autre-titre:nth-of-type(6) {width:30%;}
	.autres-livres-2{width:90%;left:5%;}
}

@media only screen and (max-width:480px){
	.infos-prat{width:40%;left:30%;}
	.infos-prat p {font-size:2.7vw;}
	.prez-extrait{width:80%;}
	.prez-extrait p{font-size:2.3vw;line-height:inherit;}
	
	.autres-livres, .autres-livres-2{display:none;}	
}


/*///////FOOTER ////////////////
////////////////////////////////
/////////////////////////////*/

footer{
	position:relative;
	width:100%;
	height:50px;
	float:left;
	margin-top:50px;
	z-index:200;
}

footer a{
	position:relative;
	color:#000;
	text-decoration:none;
	text-align:left;
	font-size:1.2vw;
	height:20%;
	font-family:'Roboto', sans-serif;
}

.mentions-legales{
	position:relative;
	float:left;
	width:33%;
	/*background-color:pink;*/
}


footer a:visited{
	color:inherit;
}

a.mentions-legales, a.mail
{
    position: relative;
}

a.mentions-legales:before, a.mail:before, a.instagram:before, a.facebook:before{
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -18px;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.instagram:before, a.facebook:before{
	bottom: -2px;
}

a.mentions-legales:hover:before, a.mail:hover:before, a.instagram:hover:before, a.facebook:hover:before {
  visibility: visible;
  width: 100%;
}


.mail {
	position:relative;
	float:left;
	left:0%;
	width:33%;
	text-align:center;
	/*background-color:antiquewhite;*/
}

.footer-reseaux-sociaux{
	position:relative;
	float:right;
	width:20%;
	
}

.footer-reseaux-sociaux a.facebook, .footer-reseaux-sociaux a.instagram{
	position:relative;
	width:auto;
	float:right;
	text-align:right;
	margin-left:10%;
	display:inline-block;
	margin-top:inherit;	
}

@media only screen and (max-width:800px){
	
		.mentions-legales, .mail, .footer-reseaux-sociaux{
			width:33%;
			float:left;
			font-size:2vw;
			margin-right:0;
			margin-left:0;
			left:0;
			right:0;
		}
	
		.instagram, .facebook{
			width:50%;
			font-size:2vw;
			float:left;
			margin:inherit;
	}
		
		.mentions-legales:before, .mail:before, .instagram:before, .facebook:before{
			display:none;
		}
		
}


	@media only screen and (max-width:480px){
		
		footer{
			margin-top:20px;
		}
		
		.mentions-legales, .mail, .footer-reseaux-sociaux, .instagram, .facebook{
			position:relative;
			float:inherit;
			width:60%;
			left:20%;
			text-align:center;
			margin:inherit;
			padding:inherit;
			font-size:3vw;
			height:auto;
			margin-top:10px;
		}
		
		.mentions-legales:before, .mail:before, .instagram:before, .facebook:before{
			display:none;
		}
		
		.instagram{
			text-align:center;
			margin-left:0;
			float:right;
			margin-right:58%;	
		}
		
		.facebook{
			text-align:center;
			margin-left:0;
			float:right;
			margin-right:59%;	
		}
		
}

/*/////// FIN FOOTER ////////////
/////////////////////////////////
/////////////////////////////*/


/*////////////////////////
/////////////////////////////////////
//////// A PROPOS ///////////////////
/////////////////////////////////////
//////////////////////////////////*/




#manifeste{
	position:relative;
	float:left;
	width:100%;
	margin-top:3%;
}

#manifeste h4{
	position:relative;
	padding:5%;
	font-family:'Roboto', sans-serif;
	font-size:1.5vw;
	font-weight:500;
	text-align:left;
	color:#FFF;	
}

.point-global{
	position:relative;
	float:left;
	width:100%;
	margin-top:5%;
	padding-bottom:5%;
}
.points-titre{
	position:relative;
	float:left;
	width:15%;
	margin-left:20%;
	background-color:#000;
}

.points-titre:after{content:"";display:block;padding-bottom:70%}

.points-titre:after:nth-of-type(3), 
.points-titre:after:nth-of-type(4), .points-titre:after:nth-of-type(5)
			{content:"";display:block;padding-bottom:10%}


.points{
	position:relative;
	float:left;
	width:50%;
	margin-left:3%;
}


.manifeste{
	position:relative;
	font-family:'Roboto Slab';
	font-size:1vw;
	line-height:1.5vw;
	text-align:justify;
	word-spacing:-0.01vw;	
}

.points:nth-of-type(5) .manifeste {line-height:1.8vw; word-spacing:-0.03vw;}



@media only screen and (max-width:800px){
	#manifeste h4{
		font-size:2.5vw;
	}
	
	.points-titre:after{content:"";display:block;padding-bottom:60%}
	
	.points-titre{
		width:20%;
		margin-left:8%;
	}
	
	.points{
		width:60%;
	}
	
	.manifeste{
		font-size:2vw;
		line-height:2.7vw;
	}	
}


@media only screen and (max-width:480px){
	.points-titre{width:90%; left:5%; margin-left:0;margin-bottom:20px;}
	.points-titre:after{content:"";display:block;padding-bottom:0%}
	#manifeste h4{text-align:center;font-size:3.2vw;}
	.points{width:90%; left:5%; margin-left:0%;}
	.manifeste{font-size:3.5vw;line-height:4.3vw;}	
}



/*/////// FIN PAGE A PROPOS ////
///////////////////////////////
///////////////////////////////
///////////////////////////////
///////////////////////////////
/////////////////////////////*/



/*///////// LES LIBRAIRIES ////
///////////////////////////////
/////////////////////////////*/



#leslibrairies{position:relative;float:left;width:100%;height:auto}


#leslibrairies p{position:relative;margin:auto;text-align:center;font-family:'Roboto',sans-serif;font-weight:300;margin-top:30px}


#leslibrairies a{text-decoration:none}

#leslibrairies a:hover h3{margin-top:0}.mail-commande{text-decoration:none;color:#000;transition:all 0.5s;font-weight:400}.mail-commande:hover{font-weight:800;color:#000}


#leslibrairies h3{position:relative;width:100%; margin-top:5%;}
.map{position:relative;margin:auto;width:70%;height:400px;top:50px;margin-bottom:100px}


#leslibrairies-liste
{position:relative;width:70%;margin:auto;height:auto;margin-top:20px}

.regions
{position:relative;border:2px solid #000;background-color:#000;float:left;width:18%;margin-bottom:10px;margin-right:1.5%}

.regions:after
{content:'';display:block;padding-top:100%}

.regions h4
{position:absolute;texte-align:left;top:5%;padding-left:5%;font-size:1.5vw;line-height:1.7vw;text-transform: uppercase;color:#FFF;font-family:'Roboto', sans-serif;font-weight:400;}

.librairie
{position:relative;background-color:white;border:2px solid #000;float:left;width:18%;margin-right:1.5%;margin-bottom:10px}

.librairie:after
{content:'';display:block;padding-top:100%}
.site-librairie{padding:inherit;margin:inherit;color:#000;text-decoration:none}

.site-librairie:hover
{font-weight:800;color:#000}

.librairie h5{position:absolute;width:100%;color:#000;padding:inherit;float:left;text-align:center;top:inherit;top:15%;weight:300;font-size:1vw}
#leslibrairies .librairie p{position:absolute;text-align:center;margin:inherit;top:40%;font-size:0.8vw;width:100%}


@media only screen and (max-width:1220px){
	.librairie {position:relative;background-color:white;border:2px solid #000;
		float:left;width:29%;margin-right:2.7%;margin-bottom:10px;}
	
	.regions{position:relative;border:2px solid #000;background-color:#000;
		float:left;width:29%;margin-bottom:10px;margin-right:2.7%;}
	
	.regions h4{ position:absolute;texte-align:left;top:5%;padding-left:5%;font-size:2.7vw;line-height:3.2vw;}
	
	.librairie h5{position:absolute;width:100%;color:#000;
		padding:inherit;float:left;text-align:center;top:inherit;top:15%;weight:300;font-size:1.7vw;}
	
	#leslibrairies .librairie p{position:absolute;text-align:center;margin:inherit;top:50%;font-size:1.4vw;width:100%;}
}

@media only screen and (max-width:800px){
	.librairie {position:relative;background-color:white;border:2px solid #000;
		float:left;width:45%;margin-right:2.7%;margin-bottom:10px;}
	
	.regions{position:relative;border:2px solid #000;background-color:#000;
		float:left;width:45%;margin-bottom:10px;margin-right:2.7%;}
	
	.regions h4{font-size:3.5vw;line-height:3.9vw;}
	
	.librairie h5{font-size:2.5vw;}
	
	#leslibrairies .librairie p{font-size:2vw;}
}

@media only screen and (max-width:400px){
	.regions{width:100%;}
	.regions:after{padding-top:20%}
	.regions h4{text-align:center;margin:inherit;top:40%;padding-left:5%;}
	
	.librairie {width:100%}
	.librairie:after{padding-top:20%}
	.librairie h5{font-size:3.5vw;top:35%;}
	.librairie p{display:none;}}






/*///// FIN LES LIBRAIRIES ////
///////////////////////////////
/////////////////////////////*/


/*///////// FIN PAGE TEXTE ////
///////////////////////////////
///////////////////////////////
///////////////////////////////
///////////////////////////////
/////////////////////////////*/


/*/////// PAGE CONTACT //////
/////////////////////////////
/////////////////////////////
/////////////////////////////
/////////////////////////////
/////////////////////*/


#contact{
	position:relative;
	float:left;
	width:100%;
	margin-top:8%;
	margin-bottom:6%;
}

.contact-libraires{position:relative;float:left;width:30%;left:20%;background-color:#000}
.contact-libraires:after{content:"";display:block;padding-bottom:100%}

.contact-libraires p{
	position:absolute;
	top:5%;
	left:5%;
	color:#FFF;
	font-family:'Roboto', sans-serif;
	font-size:1.5vw;
	line-height:2vw;
	font-weight:400;
	padding-right:5%;
	padding-bottom:5%;}

.contact-libraires a{
	color:#FFF;
	text-decoration:none;}

.contact-manuscrits{position:relative;float:left;width:20%;left:25%;background-color:#FFF; border:2px solid #000;}
.contact-manuscrits:after{content:"";display:block;padding-bottom:100%}

.contact-manuscrits p{
	position:absolute;
	top:5%; left:5%;
	color:#000;
	font-family:'Roboto', sans-serif;
	font-size:1vw;
	line-height:1.5vw;
	font-weight:400;
	padding-right:5%;
	padding-bottom:5%;}

.contact-manuscrits a{
	color:#000;
	text-decoration:none;}


@media only screen and (max-width:800px){
	#contact{margin-top:30%;}
	.contact-libraires{width:40%; left:10%;padding-right:0%;}
	.contact-manuscrits{width:30%;left:15%}
	.contact-libraires p {font-size:2vw;line-height:2.5vw;}
	.contact-manuscrits p {font-size:1.8vw;line-height:2.2vw;}
}

@media only screen and (max-width:480px){
	#contact{margin-top:30%;
	margin-bottom:30%;}
	#leslibrairies h3{ margin-top:20%;}
	.contact-libraires{width:90%;left:5%;}
	.contact-libraires:after{content:"";display:block;padding-bottom:55%;}
	.contact-libraires p{font-size:3.5vw;line-height:4.5vw;padding-top:3%;}

	.contact-manuscrits{width:90%;left:5%;margin-top:5%;padding-top:2%;}	
	.contact-manuscrits:after{content:"";display:block;padding-bottom:55%}
	.contact-manuscrits p{font-size:3.5vw;line-height:4.5vw;padding-top:1%;}
	
}



/*/////// FIN PAGE CONTACT //////
/////////////////////////////
/////////////////////*/


/*//PAGE MENTIONS LEGALES //////
////////////////////////////////
////////////////////////////////
///////////////////////////////
///////////////////////////////*/

#mentions-legales{
	position:relative;
	margin:auto;
	float:left;
	width:100%;
	height:auto;
}

#mentions-legales a{
	text-decoration:none;
	color:#000;
	font-weight:800;
	tansition:all .5s;
}

#mentions-legales a:hover{
	color:#f1c2dc;	
}


#mentions-legales h2{
	position:relative;
	text-align:center;
	float:left;
	left:0;
	margin-left:0;
	width:100%;
	margin-bottom:50px;
}

.mentions-legales-prez-site{
	position:relative;
	float:left;
	width:30%;
	left:34%;
	padding:1% 1%;
	border: 4px solid #f1c2dc;
	height:auto;
}

.mentions-legales-prez-site:after{
	content:'';
	display:block;
	padding-top:100%;
}

.mentions-legales-prez-site h3{
	position:absolute;
	text-align:center;
	width:100%;
	top:5%;
	left:0;
}

.mentions-legales-prez-site p{
	position:absolute;
	text-align:left;
	width:42%;
	top:12%;
	font-size:0.7vw;
}


.mentions-legales-prez-site p:nth-of-type(2){
	top:12%;
	left:55%;
}

.mentions-legales-prez-site p:nth-of-type(3){
	top:65%;
	width:95%;
}

#details-conditions{
	position :relative;
	width:40%;
	float:left;
	left:30%;
	background-color:#f1c2dc;
}
#conditions-utilisation-1{
	position:relative;
	float:left;
	width:50%;
	margin-top:5%;
	font-size:0.7vw;
	font-family:'Roboto', sans-serif;
}

#conditions-utilisation-1 p{
	width:55%;
	float:left;
	postion:relative;
	margin-left:5%;
	text-align:justify;
}

#conditions-utilisation-1 h3{
	width:20%;
	float:left;
	postion:relative;
	margin-left:5%;
	text-align: right;
}

#conditions-utilisation-2{
	position:relative;
	float:left;
	width:49%;
	font-size:0.7vw;
	margin-top:5%;
	font-family:'Roboto', sans-serif;
}

#conditions-utilisation-2 p{
	width:60%;
	float:left;
	postion:relative;
	margin-left:3%;
	text-align:justify;
}

#conditions-utilisation-2 h3{
	width:30%;
	float:left;
	postion:relative;
	text-align:right;
}

#conditions-utilisation-1 a, #conditions-utilisation-2 a, #credits-mentions-legales a{
	text-decoration:none;
	color:#000;
	font-weight:800;
	tansition:all .5s;
}

#conditions-utilisation-1 a:hover, #conditions-utilisation-2 a:hover, #credits-mentions-legales a:hover{
	color:#f1c2dc;	
}




/*// FIN PAGE MENTIONS LEGALES //////
/////////////////////////////////////
/////////////////////////////////////
/////////////////////////////////////
///////////////////////////////////*/



/*// MERCI CONTACT FORM //////
/////////////////////////////////////
/////////////////////////////////////
/////////////////////////////////////
///////////////////////////////////*/

#merci-form{
	position:relative;
	float:left;
	width:30%;
	left:35%;
	border:solid 4px #03E0DA;
	margin-top:100px;
	margin-bottom:75px;
}

#merci-form:after{
	content:'';
	display:block;
	padding-top:100%;
} 

#merci-form p{
	position:absolute; 
	text-align:center;
	font-weight:700;
	top:35%;
	width:100%;
}

#merci-form a{
	text-decoration:none;
	color:#000;
	transition:all .5s;
}

#merci-form a:hover{
	color:#03E0DA;
}

@media only screen and (max-width:1200px) {
	
#merci-form p{
	top:30%;
	
}
}


/*// FIN MERCI CONTACT FORM //////
/////////////////////////////////////
/////////////////////////////////////
/////////////////////////////////////
///////////////////////////////////*/