@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Lato;
	font-size: 16px;
	background-color: #F3F3F3;
}

/*************** SCROLLBAR *************/

/* Chrome, Edge, and Safari */
body::-webkit-scrollbar {
	width: 18px;
	background: #F7F7F7;
}
 
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 1px 0px 6px rgba(0,0,0,0.3);
	background: #fff;
	border-radius: 10px;
}
 
body::-webkit-scrollbar-thumb {
    background-color: #C00A07;
    border-radius: 10px;
}

/* Firefox */
html {
    scrollbar-width: auto;
    scrollbar-color: #C00A07 #ffffff;
}

/*************** FIN SCROLLBAR *************/

/* ********** CONTENEUR ********** */

#conteneur {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 0.5fr 2fr 1fr;
	grid-template-areas:
		"header"
		"nav"
		"section"
		"footer";
}
/* ********** FIN DU CONTENEUR ********** */

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

header {
	margin: 0;
    padding: 0;
	grid-area: header;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #F3F3F3 url(../images/img_livres_H.jpg) no-repeat;
	background-size: 50%; /* 50% en hauteur et en largeur */
	background-position: left;
	border-bottom: 2px solid #E00000;
}

header h1, header h2 {
	margin-left: 50%;
	font-family: Lato;
	color: red;
	text-shadow: -15px 13px 8px #555;
	text-align: center;
}

header h1 {
	font-size: 55px;
	margin-bottom: 0;
}

header h2 {
	font-size: 45px;
}

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

/* ========== NAV ========= */

.menu {
	display: none;
}

nav {
	margin: 0 auto;
	width: 100%;
	grid-area: nav;
	background-color: #232323;
}

nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

nav ul li {
	list-style: none;
	padding: 25px;
	text-align: center;
	cursor: pointer;
}

nav ul li:hover {
	background-color: #C00A07;
}

nav ul li a {
	text-decoration: none;
	color: #FFF;
}

nav ul li a h4 {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: bold;
	text-transform: uppercase;
	color: #F4EBFF;
}

nav ul li a span {
	font-size: 12px;
	color: #94B8DB; /* BLEU AZUR */
}

/* Lien actif du menu */
.on {
	background-color: #C00A07;
	padding: 25px;
}

.lien {
	color: #03f;
	text-decoration: none;
}

.lien:hover {
	color: #00f;
	text-decoration: underline;
	font-weight: bold;
}


nav input[type=checkbox]:checked ~ ul {
	display: block;
}

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

/* ********** SECTION ********** */

section {
	background-color: #F3F3F3;
	grid-area: section;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section .contenu {
	width: 70%;
	margin: 20px auto 20px auto;
	padding: 0 50px;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

section .contenu .intro-commande p {
	text-align: center;
	font-size: 15px;
}

section .contenu .intro-commande p span.bold {
	font-weight: bold;
	font-size: 13px;
}

section .contenu h2 {
	font-family: Lato;
	font-size: 45px;
	text-align: center;
	color: #4E473C;
	letter-spacing: 2px;
}

section .contenu h2.traitement {
	margin: 50px auto;
	font-family: Lato;
	font-size: 35px;
	text-align: center;
	color: #4E473C;
	letter-spacing: 1.5px;
}

section .contenu h3 {
	font-size: 20px;
	text-align: center;
	color: #3B3B3B;
	padding: 0 0 20px 0;
}

section .contenu p {
	text-align: justify;
	font-size: 17px;
	margin: 10px 0;
	color: #4E473C;
}

section .contenu span.bold {
	font-weight: bold;
}

section .contenu p.MaJ {
	text-align: center;
	padding-bottom: 40px;
	font-size: 14px;
}

section .contenu ul li {
	text-align: justify;
	padding-bottom: 10px;
}

section .contenu p.note {
	width: 55%;
	text-align: center;
	margin: 40px auto;
	padding: 15px;
	font-size: 14px;
	color: #6699CC;
	font-weight: bold;
	border: 1px dotted #6699CC;
}

section .contenu p.separateur {
	display: block;
	
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 40px;

	width: 30%;
	border-bottom: 3px dotted #ccc;
}

section .contenu p.signature {
	font-size: 30px;
	font-family: 'Dancing Script', cursive;
	color: #666;
	padding-top: 15px;
	padding-right: 50px;
	text-align: right;
	color: #4E473C;
}

img[alt] {
	font-size: 13px;
}

span.gras {
	font-weight: bold;
}

span.etoiles_de_fin::after {
	display: block;
	content: "* * *";
	font-size: 35px;
	margin: 50px auto;
	text-align: center;
}


/* ===== TOOLTIPTEXT (infobulle) ===== */

a.infobulle {
	position: relative;
}

a.infobulle span.tooltiptext {
	display: none; /* On masque l'infobulle. */
}

a.infobulle:hover {
	background: none; /* Correction d'un bug d'Internet Explorer. */
	z-index: 500; /* On définit une valeur pour l'ordre d'affichage.*/
	cursor: help; /* On change le curseur par défaut par un curseur	d'aide. */
}

a.infobulle:hover span.tooltiptext {
	display: inline; /* On affiche l'infobulle. */
	position: absolute;
	white-space: nowrap; /* On change la valeur de la propriété	white-space pour qu'il n'y ait pas de retour à la ligne non désiré.	*/
	top: 30px; /* On positionne notre infobulle. */
	left: 40px;
	background: white;
	font-size: 16px;
	font-weight: normal;
	color: #C00A07;
	padding: 3px;
	border: 1px solid #C00A07; /* Rouge foncé */
	border-left: 5px solid #C00A07;
}

/* ===== FIN TOOLTIPTEXT (infobulle) ===== */

section .contenu p.contact{
	text-align: center;
}

/* Section contenu de la page Commander */

section .contenu a.ancre-formu {
	cursor: pointer;
	transition: 0.8s;
	color: #007AF5;
	transition: 0.8s;
}

section .contenu a.ancre-formu:hover {
	color: #C00A07;
}

section .contenu p.traitementCommandes {
	font-weight: bold;
	font-size: 18px;
	color: #004080;
}

section .contenu span.important {
	color: red;
	font-size: 18px
}

section .contenu p.expedition {
	color: #0052A3;
	font-size: 16px;
	padding-left: 10px;
	font-weight: bold;	
}

section .contenu p.colissage {
	color: #0069D1;
	font-size: 16px;
	padding-left: 20px;	
	font-weight: bold;
}

.btn-commande a {
	display: flex;
	justify-content: center;
	align-content: center;
	margin: 30px auto 0 auto;
	width: 200px;
	height: 30px;
	margin-bottom: 30px;
	padding: 15px 0 10px 0;
	background: #C00A07;
	text-decoration: none;
	border-radius: 15px;
	box-shadow: -9px 13px 15px 3px #636363;
	transition: 0.8s;
	font-size: 15px;
	color: #FFF;
	cursor: pointer;
}

.btn-commande a:hover {
	background: #0052A3;
	color: #FFF;
	transform: translate(5px, 5px); /* Le carré va se déplacer de 5px sur l'axe des X (il va venir combler l'ombre à droite) et de 5px sur l'axe des Y (et va venir combler l'ombre en bas). Cela crée un effet d'appui sur le bouton. */
	box-shadow: 0 0 0;
	transition: 0.8s;
}

/* ********** Fin Page Commander ********** */


/* MOTEUR DE RECHERCHE */

section .contenu .boiteRecherche {
	width: 70%;
	margin: 40px auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section .contenu .boiteRecherche h2 {
	font-size: 2rem;
}

section .contenu .boiteRecherche form {
	width: 100%;
	margin: auto;
	padding: 30px 0;
}

section .contenu .boiteRecherche form label {
	font-size: 20px;
	margin-left: 0px;
}

section .contenu .boiteRecherche form input[type=text] {
	width: 100%;
	height: 50px;
	margin-left: 0px;
	margin-top: 20px;
	padding: 10px 20px;
	line-height: 40px;
	box-sizing: border-box;
	border: 1px solid #C00A07;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 18px;
}

section .contenu .boiteResultat {
	width: 100%;
	margin: 20px auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
}

section .contenu .boiteResultat h3 {
	font-size: 25px;
	color: #007AF5;
}

section .contenu .boiteResultat div {
	width: 100%;
	margin: 20px auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #636363;
}

section .contenu .boiteResultat div h4>a {
	font-size: 25px;
	text-transform: uppercase;
	color: #636363;
	letter-spacing: 2px;
	text-decoration: underline #0069D1 2px dotted;
}

section .contenu .boiteResultat div h4>a:hover {
	font-size: 28px;
	color: #0069D1;
	text-decoration: none;
}

section .contenu .boiteResultat div p {
	font-size: 17px;
	text-align: center;
}

section .contenu .boiteResultat button {
	width: 27%;
	height: 60px;
}

section .contenu .boiteRecherche form input[type=submit], section .contenu .boiteResultat button {
	display: block;	
	margin: 50px auto 0 auto;
	width: 50%;
	height: 60px;
	font-size: 20px;
	color: #007AF5;
	background-color: #FEECEB;
	font-weight: bold;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid #007AF5;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	cursor: pointer;
	box-shadow: 5px 5px 17px 0 #A3A3A3;
	transition: 0.8s;
}

section .contenu .boiteRecherche form input[type=submit]:hover, section .contenu .boiteResultat button:hover {
	display: block;
	color: #00944A;
	background-color: #EEE;
	border: 1px solid #BBB;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	cursor: pointer;
	transform: translate(5px, 5px); /* Le carré va se déplacer de 5px sur l'axe des X (il va venir combler l'ombre à droite) et de 5px sur l'axe des Y (et va venir combler l'ombre en bas). Cela crée un effet d'appui sur le bouton. */
	box-shadow: 0 0 0;
	transition: 0.8s;
}
	
section .contenu .boiteResultat p.NbResultat_Recherche {
	font-size: 23px;
	color: #007AF5;
}

section .contenu .boiteResultat p.no-result {
	font-size: 25px;
	color: #636363;
}

section .contenu .boiteResultat button a {
	display: block;	
	vertical-align: center;
	text-decoration: none;
	color: #007AF5;
}

section .contenu .boiteResultat button a:hover {
	display: block;
	color: #00944A;
}

/* FIN MOTEUR DE RECHERCHE */


/* MENU DES COLLECTIONS (page livres.php) */
section .boiteCollection {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	margin-bottom: 30px;
	padding: 20px;
	box-sizing: border-box;
}

section .boiteCollection h3 {
	margin: 0;
	padding: 0;
	font-size: 1.8rem;
	color: orangered;
}

section .boiteCollection .collection {
	display: flex;
	list-style: none;
	margin: 30px 0;
	padding: 0;
}

section .boiteCollection .collection li {
	display: block;
	margin: 0 5px;			
	text-shadow: -1px 2px 2px #999;
}

section .boiteCollection .collection li a {
	color: #707070;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.3rem;
	padding: 5px 10px;
	cursor: pointer;
	transition: 0.5s;
}

section .boiteCollection .collection li.azur a {
	transition: 0.5s;
}

section .boiteCollection .collection li.azur:hover a {
	padding: 5px 10px;
	border-top: 5px solid #007AF5;
	border-bottom: 5px solid #007AF5;
	transition: 0.5s;
}

section .boiteCollection .collection li.BlackRose a {
	transition: 0.5s;
}

section .boiteCollection .collection li.BlackRose:hover a {
	border-top: 5px solid #330000;
	border-bottom: 5px solid #330000;
	transition: 0.5s;
}

section .boiteCollection .collection li.duo a {
	transition: 0.5s;
}

section .boiteCollection .collection li.duo:hover a {
	border-top: 5px solid #B0B0B0;
	border-bottom: 5px solid #B0B0B0;
	transition: 0.5s;
}

section .boiteCollection .collection li.horizon a {
	transition: 0.5s;
}

section .boiteCollection .collection li.horizon:hover a {
	border-top: 5px solid #FFB894;
	border-bottom: 5px solid #FFB894;
	transition: 0.5s;
}

section .boiteCollection .collection li.prelud a {
	transition: 0.5s;
}

section .boiteCollection .collection li.prelud:hover a {
	border-top: 5px solid #D47E54;
	border-bottom: 5px solid #D47E54;
	transition: 0.5s;
}

section .boiteCollection .collection li.PassionsExtremes a {
	transition: 0.5s;
}

section .boiteCollection .collection li.PassionsExtremes:hover a {
	border-top: 5px solid #B60A07;
	border-bottom: 5px solid #B60A07;
	transition: 0.5s;
}

section .boiteCollection .collection li.sexy a {
	transition: 0.5s;
}

section .boiteCollection .collection li.sexy:hover a {
	border-top: 5px solid #E20C08;
	border-bottom: 5px solid #E20C08;
	transition: 0.5s;
}

section .boiteCollection .collection li.autres a {
	transition: 0.5s;
}

section .boiteCollection .collection li.autres:hover a {
	border-top: 5px solid #958975;
	border-bottom: 5px solid #958975;
	transition: 0.5s;
}

section .contenu .contenuLivres .bandeau1 {
	padding-top: 10px;
	letter-spacing: 2px;
	font-size: 30px;
	box-sizing: border-box;
}
	
section .contenu .contenuLivres .bandeau2 {
	padding-top: 10px;
	box-sizing: border-box;
}

/* FIN MENU DES COLLECTIONS (page livres.php) */


p.stock {
	display: block;
	margin: 30px auto 0 auto;
	font-size: 14px;
}

/* Fin Section contenu de la page Livres */


/* SECTION CONTENU DES PAGES DES COLLECTIONS (pages azur, duo, horizon...) */

span.nom_collection {
	font-size: 15px;
	text-transform: uppercase;
	color: #4E473C;
}

section .contenu .contenuLivres {
	width: 100%;
	margin: auto;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 10px 30px 10px;
}

section .contenu h4.nb_livre, .contenu .contenuLivres h4 {
	color: #595145;
	font-size: 17px;
	text-align: left;
	margin: 0 auto 20px auto;
}

section .contenu .contenuLivres .bandeau1 {
	width: 100%;
	height: 60px;
	margin-top: 15px;
	padding: 5px 0;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 35px;
	background-color: #453F35;
	border-radius: 30px 5px;
	color: #fff;
}

section .contenu .contenuLivres .bandeau2 {
	width: 100%;
	height: 60px;
	margin-top: 30px;
	padding: 5px 0;
	text-transform: uppercase;
	letter-spacing: 5px;
	background-color: #453F35;
	border-radius: 5px 30px;
	color: #fff;
}

/* Ombre des titres dans le bandeau du haut des pages */
section .contenu .contenuLivres h2 span.shadow1 { /* Azur */
	text-shadow: -5px 5px 3px #007AF5;
}

section .contenu .contenuLivres h2 span.shadow2 { /* BlackRose */
	text-shadow: -5px 5px 3px #700000;
}

section .contenu .contenuLivres h2 span.shadow3 { /* Duo */
	text-shadow: -5px 5px 3px #B0B0B0;
}

section .contenu .contenuLivres h2 span.shadow4 { /* Horizon */
	text-shadow: -5px 5px 3px #FFB894;
}

section .contenu .contenuLivres h2 span.shadow5 { /* Passions extrêmes */
	text-shadow: -5px 5px 3px #AC0906;
}

section .contenu .contenuLivres h2 span.shadow6 { /* Sexy */
	text-shadow: -5px 5px 3px #CC0033;
}

section .contenu .contenuLivres h2 span.shadow7 { /* Autres */
	text-shadow: -5px 5px 3px #958975;
}
/* FIN DE Ombre des titres dans le bandeau du haut des pages */


section .contenu .contenuLivres .listingLivres {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	margin: 0;
	margin-top: 30px;
	margin-bottom: 50px;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre {
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0 10px;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre .vignette {
	width: 150px;
	height: auto;
	padding: 0;
	margin: 0;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre .vignette:hover {
	margin-left: 41px;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre .vignette img {
	width: 100%;
	height: 100%;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre .vignette:hover img {
	transform: scale(2.1);
}


section .contenu .contenuLivres .listingLivres .boiteDetailLivre .bodyLivre,
section .contenu .contenuLivres .listingLivres .boiteDetailLivre p.infosLivres {
	text-align: left;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre p.infosLivres,
section .contenu .contenuLivres .listingLivres .boiteDetailLivre p.resume {
	font-size: 16px;
}

/*  Afficher/Cacher la div des résumés  */ 
section .contenu .contenuLivres .listingLivres .boiteDetailLivre div.spoilerDiv {
    width: 100%;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre div.spoiler {
    width: 100%;
    cursor: pointer;
    min-height: 2em;
}

section .contenu .contenuLivres .listingLivres .boiteDetailLivre .resume {
	text-align: justify;
}
 
section .contenu .contenuLivres .listingLivres .boiteDetailLivre .lienAfficher,
section .contenu .contenuLivres .listingLivres .boiteDetailLivre .lienAfficher:focus {
    text-decoration: none;
    cursor: pointer;
    color: #3399FF;
	font-weight: bold;
	text-align: center;
	padding: 7px 0;
	width: 50%;
	transition: all 2s;
}
 
section .contenu .contenuLivres .listingLivres .boiteDetailLivre .lienAfficher:hover {
    cursor: pointer;
	color: white;
	background-color: #3399FF;
	border-radius: 5px;
	transition: all 2s;
}

.cacher {
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0ms ease-out, visibility 0ms ease-in-out;
}

.afficher {
	height: auto;
	opacity: 1;
	visibility: visible;
	transition: opacity 3000ms ease-out, visibility 3000ms ease-in-out;
}
/* FIN DE Afficher/Cacher la div des résumés */


/* Pour la pagination des pages des collections */
a.numpage, a.numpage:visited {
	color: #3399FF;
	font-size: 18px;
	text-decoration: none;
}

#pagination {
}

#pagination .on {
	color: #FFF;
	font-size: 20px;
	background-color: #3399FF;
	padding: 1px 5px;
	border-radius: 25%;
}
/* Fin de la pagination des pages des collections */

section .contenu .boxCollection {
	width: 100%;
	display:flex;
	flex-direction: column;
	margin: 20px auto;
	padding: 0;
}

section .contenu .boxCollection .sectionLivres {
	width: 100%;	
	display:flex;
	flex-wrap: wrap;
	margin: 0;
}

section .contenu .boxCollection .sectionLivres div {
	width: 33%;
	padding: 15px;
	box-sizing: border-box;
}

section .contenu .boxCollection .sectionLivres div p {
	font-size: 0.8rem;
	text-align: left;
}

/* FIN DE SECTION CONTENU DES PAGES DES COLLECTIONS (pages azur, duo, horizon...) */


/* Bouton Scroll Top */

.top {
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: 100px;
	right: 50px;
	background-color: rgba(192, 10, 7, 0.5);
	font-size: 35px;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden; /* On cache le bouton */
	border-radius: 10px;
	transition: 0.8s;
	opacity: 0;
	cursor: pointer;
}

.top:hover {
	background-color: rgba(51, 153, 255, 0.5);
	transition: 0.8s;
	cursor: pointer;
}

.top a {
	color: #fff;
	text-decoration: none;
}

.top.voirBt {
	visibility: visible; /* Rendre le bouton visible */
	opacity: 1;
}

/* Fin du Bouton Scroll Top */

/* ********** FIN DE LA SECTION ********** */


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

footer {
	grid-area: footer;
	background-color: #F3F3F3;
	border-top: 2px solid #E00000;	
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	box-sizing: border-box;
	margin: 0;
}

footer #infos-footer {
	width: 100%;
	margin-bottom: 0px;
	padding: 0 50px;
}

footer #infos-footer .infos {	
	display: flex;
	justify-content: space-around;
	align-items: center;
}

footer #infos-footer .infos .paypal {
	margin: 0 20px;
	text-align: center;
}

footer #infos-footer .infos .contact-footer {
	margin: 0 15px;
}

footer #infos-footer .infos .copyright, footer #infos-footer .infos .contact-footer, footer #infos-footer .infos .contact-footer a {
	font-size: 16px;
	color: #636363;
	text-align: center;
}

footer #infos-footer .infos .contact-footer a {
	font-size: 40px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	transition: 0.8s;
}

footer #infos-footer .infos .contact-footer a:hover {
	color: #6699CC;
	font-weight: bold;
}

/* ===== TOOLTIPTEXT FOOTER (infobulle) ===== */
a.infobulleArobase {
	position: relative;
}

a.infobulleArobase span.tooltiptext-footer {
	display: none; /* On masque l'infobulle. */
}

a.infobulleArobase:hover {
	background: none; /* Correction d'un bug d'Internet Explorer. */
	z-index: 500; /* On définit une valeur pour l'ordre d'affichage.*/
}

a.infobulleArobase:hover span.tooltiptext-footer {
	display: inline; /* On affiche l'infobulle. */
	position: absolute;
	white-space: nowrap; /* On change la valeur de la propriété	white-space pour qu'il n'y ait pas de retour à la ligne non désiré.	*/
	top: 15px; /* On positionne notre infobulle. */
	left: -120px;
	background: white;
	font-size: 16px;
	font-weight: normal;
	color: #366BA1;
	padding: 3px;
	border: 1px solid #366BA1;
	border-right: 5px solid #366BA1;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
/* ===== FIN TOOLTIPTEXT FOOTER (infobulle) ===== */


p.compteur_unique {
	text-align: center;
	color: #888;
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 20px;
}

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



/* ========== MEDIA QUERIES ========= */

/* Propriétés pour les écrans d'une largeur maximum de 1024px */
@media screen and (max-width: 1024px) {	
	section .boiteCollection {
		flex-direction: column;
		align-items: center;
	}
	
	section .boiteCollection h3 {
		margin: 0;
		padding: 0;
	}

	section .boiteCollection .collection {
		flex-direction: column;
		align-items: center;
		margin: 30px 0;
		transition: 0.7s;
	}
	
	section .boiteCollection .collection li {
		display: block;
		width: 250px;
		border-radius: 15px 0 12px 0;
		border: none;
		margin: 10px 0;
		padding: 10px 0 6px 0;
		cursor: pointer;
		box-shadow: 2px 2px 8px #aaa;
		text-align: center;
		cursor: pointer;				
		transition: 0.5s;
	}

	section .boiteCollection .collection li a {
		display: block;
		margin: auto;
		font-size: 1.5rem;
		font-family: Monotype, "Monotype Corsiva";
		text-shadow: -1px 1px 1px #FFF;
		font-weight: 600;
	}
	
	section .boiteCollection .collection li.azur:hover a,
	section .boiteCollection .collection li.BlackRose:hover a,
	section .boiteCollection .collection li.duo:hover a,
	section .boiteCollection .collection li.horizon:hover a,
	section .boiteCollection .collection li.PassionsExtremes:hover a,
	section .boiteCollection .collection li.sexy:hover a,
	section .boiteCollection .collection li.autres:hover a {
		border: none;
	}
	
	section .boiteCollection .collection li.azur a {
		color: #002952;
		text-shadow: -1px 1px 1px #FFF;
		letter-spacing: 2px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.azur {
		background: linear-gradient(to top left, #007AF5, #FFF);
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.azur:hover{
		background: linear-gradient(to bottom right, #007AF5, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	
	section .boiteCollection .collection li.BlackRose a {
		color: #FFF;
		text-shadow: -1px 1px 1px #330000;
		letter-spacing: 2px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.BlackRose {
		background: linear-gradient(to top left, #330000, #FFF);
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.BlackRose:hover{
		background: linear-gradient(to bottom right, #330000, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.duo a {				
		color: #3D9EFF;
		text-shadow: -1px 1px 1px #000;
		letter-spacing: 3px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.duo {
		background: linear-gradient(to top left, #D1E8FF, #FFF);
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.duo:hover{
		background: linear-gradient(to bottom right, #D1E8FF, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.horizon a {				
		color: #330000;
		text-shadow: -1px 1px 1px #FFF;
		letter-spacing: 2px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.horizon {
		background: linear-gradient(to top left, #FFB894, #FFF);
		transition: 0.5s;
	}
	
	section .contenu .boiteCollection .collection li.horizon:hover{
		background: linear-gradient(to bottom right, #FFB894, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.PassionsExtremes a {				
		color: #570000;
		text-shadow: -1px 1px 1px #FFF;
		letter-spacing: 0.5px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.PassionsExtremes {
		background: linear-gradient(to top left, #C00A07, #FFF);
		transition: 0.5s;
	}
	
	section .contenu .boiteCollection .collection li.PassionsExtremes:hover{
		background: linear-gradient(to bottom right, #C00A07, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.sexy a {				
		color: #FFF;
		text-shadow: -1px 1px 1px #000;
		letter-spacing: 2px;
		transition: 0.5s;
	}			
	
	section .boiteCollection .collection li.sexy {
		background: linear-gradient(to top left, #FF2929, #FFF);
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.sexy:hover{
		background: linear-gradient(to bottom right, #FF2929, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.autres a {				
		color: #453F35;
		text-shadow: -1px 1px 1px #FFF;
		letter-spacing: 2px;
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.autres {
		background: linear-gradient(to top left, #6D6454, #FFF);
		transition: 0.5s;
	}
	
	section .boiteCollection .collection li.autres:hover{
		background: linear-gradient(to bottom right, #6D6454, #FFF);
		border: none;
		transition: 0.5s;
	}
	
	section .contenu .contenuLivres .bandeau1 {
		padding-top: 10px;
		letter-spacing: 2px;
		font-size: 30px;
		box-sizing: border-box;
	}
	
	section .contenu .contenuLivres .bandeau2 {
		padding-top: 10px;
		box-sizing: border-box;
	}


	/* La croix de fermeture de la modale */
	/*#check:checked ~ .collection {*/ /* On passe à 0 le right qui était à -100%. */
	/*	right: 0;
	}*/
	/*.cacher-menu {
		position: absolute;
		top: 40px; /* La croix de fermeture s'affichera à 40px du bord haut */
		/*right: 40px;*/ /* et à 40px du bord droit. */
	/*}*/
}





/* Pour les écrans ENTRE 751px et 1023px */

@media screen and (min-width:751px) and (max-width: 1023px) {
	
	/* ********** LE HEADER ********** */
	header {
		background-size: 100%; /* hauteur largeur */
	}

	header h1 {
		margin: 0;
		padding: 40px 20px 20px 20px;
		font-size: 40px;
		text-shadow: 0px 1px 1px #FFF;	
	}
	
	header h2 {
		margin: 0;
		padding: 0 20px 20px 20px;
		text-align: center;
		font-size: 30px;
		text-shadow: 0px 1px 1px #FFF;
	}
	
	/* ********** FIN DU HEADER ********** */
	
	/* ********** NAV ********** */
	
    .menu {
         display: flex;
         justify-content: flex-end;
         align-items: center;
         height: 70px;
		 margin-top: 10px;
         margin-right: 30px;
    }
	
    .burger {
         width: 45px;
         height: 45px;
         cursor: pointer;
         position: relative;
        }

    .hamburger {
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
         transition: 0.5s;
    }
	
    .hamburger:before, .hamburger:after {
         content: '';
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         transition: 0.5s;
    }
	
    .hamburger:before {
        top: -8px;
    }
	
    .hamburger:after {
        top: 8px;
    }
	
    .burger.active .hamburger {
        background: rgba(0,0,0,0);
    }
	
    .burger.active .hamburger:before {
         top:0;
         transform: rotate(45deg);
    }
	
    .burger.active .hamburger:after {
         top:0;
         transform: rotate(135deg);
    }

    nav ul {
        display: none;
    }
	
    nav ul li {
        text-align: center;
		padding: 12px;
    }
	
    .active {
        display: block;
    }	
	
	nav ul li a h4 {
	font-size: 16px;
	}
	
	nav ul li a span {
		font-size: 12px;
	}
	
	/* ********** FIN NAV ********** */
	
	/* ********** LA SECTION ********** */
	
	/* MOTEUR DE RECHERCHE */

	section .contenu .boiteRecherche {
		width: 90%;
		margin: 20px auto;
	}

	section .contenu .boiteRecherche form input[type=text] {
		width: 95%;
		height: 40px;
		margin: 15px 0;
		padding: 10px 5px;
		}

	section .contenu .boiteRecherche form input[type=submit], section .contenu .boiteResultat button {
		margin: 25px auto 0 auto;
	}

	section .contenu .boiteResultat {
		width: 90%;
	}

	section .contenu .boiteResultat h3 {
		font-size: 22px;
	}

	/* FIN MOTEUR DE RECHERCHE */	
	
	
	/* Section contenu de la page Livres */

	section .contenu .boiteLivres {
		grid-template-columns: repeat(2, 170px);
	}
	
	/* Section contenu des Pages des collections */
	
	section .contenu .contenuLivres .listingLivres {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15px;
	}	
	
	section .contenu .contenuLivres .bandeau1 {
		padding-top: 10px;
		letter-spacing: 2px;
		font-size: 30px;
		box-sizing: border-box;
	}
	
	section .contenu .contenuLivres .bandeau2 {
		padding-top: 10px;
		box-sizing: border-box;
	}
	
	/* ********** FIN DE LA SECTION ********** */
	
	/* ********** FOOTER ********** */

	footer #infos-footer {
		padding: 0;
	}

	/* ********** FIN DU FOOTER ********** */
	
}



/* Pour les écrans ENTRE 480px et 750px */

@media screen and (min-width:480px) and (max-width: 750px) {
	
	/* ********** LE HEADER ********** */
	header {
		background-size: 100%; /* hauteur largeur */
	}

	header h1 {
		margin: 0 auto;
		padding: 40px 20px 20px 20px;
		font-size: 40px;
		text-shadow: 0px 1px 1px #FFF;
	}
	
	header h2 {
		margin: 0 auto;
		padding: 0 20px 20px 20px;
		text-align: center;
		font-size: 30px;
		text-shadow: 0px 1px 1px #FFF;
	}
	
	/* ********** FIN DU HEADER ********** */
	
	
	/* ********** NAV ********** */
	
    .menu {
         display: flex;
         justify-content: flex-end;
         align-items: center;
         height: 70px;
		 margin-top: 10px;
         margin-right: 30px;
    }
	
    .burger {
         width: 45px;
         height: 45px;
         cursor: pointer;
         position: relative;
        }

    .hamburger {
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
         transition: 0.5s;
    }
	
    .hamburger:before, .hamburger:after {
         content: '';
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         transition: 0.5s;
    }
	
    .hamburger:before {
        top: -8px;
    }
	
    .hamburger:after {
        top: 8px;
    }
	
    .burger.active .hamburger {
        background: rgba(0,0,0,0);
    }
	
    .burger.active .hamburger:before {
         top:0;
         transform: rotate(45deg);
    }
	
    .burger.active .hamburger:after {
         top:0;
         transform: rotate(135deg);
    }

    nav ul {
        display: none;
    }
	
    nav ul li {
        text-align: center;
		padding: 12px;
    }
	
    .active {
        display: block;
    }	
	
	nav ul li a h4 {
	font-size: 16px;
	}
	
	nav ul li a span {
		font-size: 12px;
	}
	
	/* ********** FIN NAV ********** */
	
	/* ********** LA SECTION ********** */	
	
	section .contenu {
		padding: 0 30px;
	}
	
	section .contenu h2 {
		font-size: 40px;
		letter-spacing: 1.5px;
	}
	
	section .contenu p.note {
		width: 100%;
	}
	
	/* MOTEUR DE RECHERCHE */

	section .contenu .boiteRecherche {
		width: 100%;
		margin: 20px 0;
		padding: 0;
	}

	section .contenu .boiteRecherche form {
		width: 100%;
		margin: auto;
		padding: 20px 0;

	}

	section .contenu .boiteRecherche form label {
		font-size: 20px;
		margin: 10px 0;
		padding: 15px 0;
	}

	section .contenu .boiteRecherche form input[type=text] {
		margin: 15px 0;
		padding: 10px;
	}

	section .contenu .boiteResultat {
		width: 100%;		
		margin: 20px 0;
		padding: 0;
	}

	section .contenu .boiteResultat h3 {
		font-size: 22px;
	}

	section .contenu .boiteRecherche form input[type=submit], section .contenu .boiteResultat button {
		width: 50%;
		height: 50px;
		margin: 25px auto 0 auto;
		font-size: 20px;
	}

	/* FIN MOTEUR DE RECHERCHE */
	
	
	/* Section contenu de la page Livres */

	section .contenu .boiteLivres {
		width: 90%;
		grid-template-columns: repeat(2, 170px);
	}

	section .contenu .boiteLivres button {
		width: 165px;
		font-size: 30px;
	}
	
	/* ********** Section contenu des Pages des collections ********** */
	
	section .contenu .contenuLivres .listingLivres {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
	
	section .contenu .boxCollection .sectionLivres div {
		width: 50%;
	}
	
	section .contenu .contenuLivres .bandeau1 {
		padding-top: 10px;
		letter-spacing: 1px;
		font-size: 30px;
		box-sizing: border-box;
	}
	
	section .contenu .contenuLivres .bandeau2 {
		padding-top: 10px;
		box-sizing: border-box;
	}
	
	/* ********** FIN DE LA SECTION ********** */
	
	/* ********** FOOTER ********** */
	
	footer #infos-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	
	footer #infos-footer .infos {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	footer #infos-footer .infos .copyright {
		width: 100%;
		font-size: 15px;
		padding-bottom: 10px;
		margin: 0 auto;
	}
	
	footer #infos-footer .infos .contact-footer, footer #infos-footer .infos .contact-footer a {
		padding-top: 0px;
	}
	
	footer #infos-footer .infos .paypal {
		display: none;
	}

	/* ********** FIN DU FOOTER ********** */ 
}



/* Pour les écrans de petite taille */
@media screen and (max-width: 479px) {
	body {
		font-size: 12px;
	}
	
	/* ********** CONTENEUR ********** */

	#conteneur {
		grid-template-rows: 1fr 0.5fr 3fr 2fr;
	}
	/* ********** FIN DU CONTENEUR ********** */	

	/* ********** LE HEADER ********** */
	header {
		background-size: 100%; /* hauteur largeur */
	}

	header h1 {
		margin: 0 auto;
		padding: 20px;
		font-size: 35px;
		text-shadow: 0px 1px 1px #FFF;
	}
	
	header h2 {
		margin: 0 auto;
		padding: 0 20px 20px 20px;
		text-align: center;
		font-size: 27px;
		text-shadow: 0px 1px 1px #FFF;
	}
	
	/* ********** FIN DU HEADER ********** */
	
	/* ********** NAV ********** */
	
    .menu {
         display: flex;
         justify-content: flex-end;
         align-items: center;
         height: 70px;
         margin-right: 30px;
    }
	
    .burger {
         width: 45px;
         height: 45px;
         cursor: pointer;
         position: relative;
        }

    .hamburger {
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
         transition: 0.5s;
    }
	
    .hamburger:before, .hamburger:after {
         content: '';
         width: 30px;
         height: 4px;
         background: #fff;
         position: absolute;
         transition: 0.5s;
    }
	
    .hamburger:before {
        top: -8px;
    }
	
    .hamburger:after {
        top: 8px;
    }
	
    .burger.active .hamburger {
        background: rgba(0,0,0,0);
    }
	
    .burger.active .hamburger:before {
         top:0;
         transform: rotate(45deg);
    }
	
    .burger.active .hamburger:after {
         top:0;
         transform: rotate(135deg);
    }

    nav ul {
        display: none;
    }
	
    nav ul li {
        text-align: center;
		padding: 12px;
    }
	
    .active {
        display: block;
    }	
	
	nav ul li a h4 {
	font-size: 16px;
	}
	
	nav ul li a span {
		font-size: 12px;
	}
	
	/* ********** FIN NAV ********** */
	
	/* ********** LA SECTION ********** */
	section .contenu {
		margin: 0;
		padding-bottom: 30px;
	}

	section .contenu h2 {
		margin: 20px auto;
		font-size: 24px;
		letter-spacing: 1px;
	}
	
	section .contenu h3 {
		font-size: 15px;
	}
		
	section .contenu ul li {
		padding-bottom: 10px;
	}
	
	section .contenu p.signature {
		font-size: 27px;
		padding-right: 20px;
	}
	
	
	/* MOTEUR DE RECHERCHE */
	section .contenu .boiteRecherche form {
		width: 100%;
		margin: auto;
		padding: 20px 0;
	}

	section .contenu .boiteRecherche form label {
		margin: 10px 0;
		padding: 15px 0;
	}

	section .contenu .boiteRecherche form input[type=text] {
		margin: 15px 0;
		padding: 10px 5px;
		font-size: 17px;
	}

	section .contenu .boiteResultat {
		width: 100%;
		margin: 0 auto;
		padding: 0 5px 20px 5px;
	}

	section .contenu .boiteResultat h3 {
		font-size: 22px;
	}

	section .contenu .boiteResultat div {
		font-size: 13px;
		padding: 3px;
		color: #636363;
	}
	
	section .contenu .boiteResultat div h4, 
	section .contenu .boiteResultat p.NbResultat_Recherche,
	section .contenu .boiteResultat p.no-result {
		font-size: 20px;
	}
	
	section .contenu .boiteResultat div h4>a {
		font-size: 20px;
		letter-spacing: 1px;
	}

	section .contenu .boiteResultat div h4>a:hover {
		font-size: 23px;
	}
	
	section .contenu .boiteResultat div p {
		font-size: 16px;
	}
	
	section .contenu .boiteRecherche form input[type=submit], section .contenu .boiteResultat button {
		width: 50%;
		height: 50px;
		margin: 25px auto 0 auto;
		font-size: 18px;
	}

	/* FIN MOTEUR DE RECHERCHE */
	

	/* Section contenu de la page Livres */

	section .contenu .boiteLivres {
		width: 90%;
		margin: 20px auto;
		grid-template-columns: 1.5fr;
		grid-gap: 15px;
	}

	section .contenu .boiteLivres button {
		width: 200px;
		font-size: 30px;
		margin: 0 auto;
	}
	
	/* ********** Section contenu des Pages des collections ********** */

	section .contenu .contenuLivres .listingLivres{
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
	
	section .contenu .contenuLivres .bandeau1 {
		padding-top: 10px;
		letter-spacing: 1px;
		font-size: 25px;
		box-sizing: border-box;
	}
	
	section .contenu .contenuLivres .bandeau2 {
		padding-top: 10px;
		box-sizing: border-box;
	}

	/* Bouton Scroll Top */

	.top {
		bottom: 50px;
		right: 50px;
	}
	
	/* Fin du Bouton Scroll Top */
	
	/* ********** FIN DE LA SECTION ********** */
	
	
	/* ********** FOOTER ********** */

	footer #infos-footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	footer #infos-footer .infos {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	footer #infos-footer .infos .copyright {
		z-index: 3;
	}
	
	footer #infos-footer .infos .paypal {
		display: none;
	}
	
	footer #infos-footer .infos .contact-footer {
		z-index: 1;
	}
	
	footer #infos-footer .infos .contact-footer, footer #infos-footer .infos .contact-footer a {
		padding-top: 20px;
	}

	/* ********** FIN DU FOOTER ********** */	
}