@charset "utf-8";

html{
/*	height: 100%;*/
	}
body{
	font-family: "MV Boli", "Segoe Print", "Century Gothic", "Reem Kufi", "sans-serif";
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: white;
	font-size: 16px;
	text-align: left;
	color: dimgray;
}
#page{
	margin: 0px;
	padding: 0px;
	max-width: 1920px;
}
.Boite-a{
	clear: both;
	width: 100%;
	display: flex;
	justify-content: center;
	}

/*Header*/
header{
	clear: both;
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	text-align: center;
	color: grey;
	font-size: .8em;
	font-weight: bold;
	z-index: 1;
	display: grid;
	grid-template-columns: 20% 20% 60%;
	grid-template-rows: 10% 45% 45%;
}
#logo{
	grid-column: 1 / 2;
	grid-row: 1 / 4;
}
/*Bandeau contacts*/
#Un{
	grid-column: 2 / 4;
	grid-row: 1 / 2;
	margin-right: 10%;
	text-align: right;
}
#Un ul li{
	margin: 0 0 2em 0;
	padding: 0 2% 0 2%;
	display: inline;
	list-style-type: none;
	text-align: center;
}
#Un li:hover{
	background-color: rgba(23,163,40,0.5);
}
#Un ul li a{
	text-decoration: none;
	color: grey;
}
/*Fin contacts*/
#Menu{
	grid-column: 2 / 3;
	grid-row: 2 / 4;
}
#Massages, #Esthetique {
	clear: both;
	text-align: left;
	font-size: 0;
	width: 100%;
}
#Massages a{
	width: 100%;
	display: block;
	background: no-repeat center left url("../Elements/Boutons_Massages vert.png");
}
#Massages a:hover img, #Esthetique a:hover img{
	visibility: hidden;
}
#Esthetique a{
	width: 100%;
	display: block;
	background: no-repeat center left url("../Elements/Boutons_Esthetique violet.png");
}
#Titre{
	grid-column: 3 / 4;
	grid-row: 2 / 4;
	text-align: left;
}
#Titre figure{
	width: 100%;
}
/*Fin Header*/

/*Section*/
section{
	position: static;
	height: 30%;
	width: 100%;
	margin: 18em auto 7em auto;
}
/*Présentation*/
#Two{
	display: flex;
	}
#Two h2{
	color: rgba(23,163,40,1.00);
	padding-top: 1em;
}
#Two figure{
	flex: 1;
	position: fixed;
	width: 20%;
	bottom: 15%;
	z-index: 1;
}
#partenaires{
	clear: both;
	margin-left: 5%;
	}
#presentation{
	flex : 2;
	margin: auto auto 5em 27%;
	width :45%;
	max-width: 45%;
}
#partenaires img, #Aude img{
	width: 100%;
	height: auto;
}
#Aude{
	clear: both;
	margin-left:75%;
	}
/*Hub massage, hub Esthétique*/
#Hub{
	clear: both;
	width: 90%;
	display: flex;
	padding: 0;
	flex-flow: wrap;
	text-align: center;
	}
#Hub h1{
	color: rgba(23,163,40,1.00);
	font-size: 1.8em;
}
.bulle, .bulle-v{
	clear: both;
	width: 300px;
	height: auto;
	border-radius: 80px;
	padding: 1em 0 1em 0;
	flex: 1;
	margin: 0 auto;
}
.bulle a, .bulle-v a{
	text-decoration: none;
	color: rgba(23,163,40,1.00);
	text-align: center;
}
.bulle:hover, .bulle-v:hover{
	background-color: rgba(23,163,40,0.25);
	font-weight: bold;
}
.bulle figure, .bulle-v figure{
	width: 90%;
	margin: 0 5% 1em 5%;
}
.bulle img, .bulle-v img{
	width: 100%;
}
.bulle-v:hover{
	background-color: rgba(129,32,130,.2);
	font-weight: bold;
}
.bulle-v a{
	text-decoration: none;
	color: rgba(129,32,130,1);
	text-align: center;
}
/*Fin pages hub*/
/*Pages prestations détaillées Esthétique - Massages*/
.chapo{
	text-align: center;
	padding-bottom: 2em;
	width: 60%;
	margin: auto;
	font-size: 1.2em;
}
.sous-boite-image{
	clear: both;
	flex: 1;
	margin: auto;
	padding: 0;
	text-align: center;
	}
.sous-boite-image img{
	max-width: 350px;
	margin: auto;
}
.sous-boite-noflex{
	clear: both;
	flex: 1;
	margin: auto 15% auto auto;
	width: 70%;
}
.sous-boite-noflex img{
	clear: both;
	width: 250px;
	margin: auto;
	padding: 0;
	position: relative;
	right: -10%;
	top: -6em;
}
.sous-boite-noflex p{
	color: dimgray;
}
.sous-boite-noflex ul{
	width: 100%;
}
.sous-boite-noflex a{
	color: dimgray;
}
.centre{
	text-align: center;
}
/*Particularités sections Esthétique*/
.soin{
	clear: both;
	width: 90%;
	color: rgba(129,32,130,1.00);
	background-color: rgba(129,32,130,.2);
	padding: 0.75em 5% 0.75em 5%;
	border-radius: 80px 0 80px 0;
	margin-bottom: 5em;
	display: flex;
	}
.soin li{
	padding-bottom: 1em;
}
li.soin{
	list-style: url("../Elements/feuille-07.png") outside;
}
#deplacements{
	text-align: center;
	border-collapse: collapse;
	margin: auto;
	width: 50%;
}
#deplacements td{
	padding: 0 1% 0 1%;
}
#deplacements thead{
	background-color: rgba(129,32,130,1.00);
	color: white;
}
#deplacements tr:nth-child(even){
	background-color: rgba(129,32,130,.25);
	
}
/*Particularités sections Massages*/
.massages{
	clear: both;
	background-color: rgba(23,163,40,.2);
	padding: 0.75em 5% 0.75em 5%;
	border-radius: 80px 0 80px 0;
	margin-bottom: 5em;
	display: flex;
	}
.normal{
	color: grey;
}
li.normal{
	list-style: circle outside;
}
#cacherA, #cacherB, #cacherC, #cacherD, #cacherE{
	display: none;
	padding-bottom: 0.5em;
}
#cacherA:target, #cacherB:target, #cacherC:target, #cacherD:target, #cacherE:target{
	display: block;
}
.vert{
	color: rgba(23,163,40,1.00);
	padding-top: 0.5em;
	width: 100%;
	}
.violet{
	clear: both;
	width: 60%;
	margin: 1em auto;
	padding: 1em 5%;
	background-color: rgba(129,32,130,1);
	border-radius: 80px 0 80px 0;
	color: white;
}
.violet li{
	color: white;
}
/*Fin particularités*/
/*Fin pages détails des prestations*/
/*Tarifs des prestations*/
#Four{
	clear: both;
	flex-direction: column;
	width: 70%;
	margin: 18em auto 5em auto;
}
#Four p{
	text-align: left;
}
#Four a{
	text-decoration: none;
	font: 1.2em;
}
#Four a:hover{
	font-weight: bold;
}
#Four h1{
	font-size: 2.5em;
	text-align: center;
}
#Four h2{
	font-size: 1.2em;
	border-bottom: dotted 5px;
	width: 100%;
	text-align: center;
}
#Four figure{
	margin: auto;
	text-align: center;
}
/*Ancres*/
#jumpboxM a, #jumpboxA a{
	color: rgba(23,163,40,1.00);
}
#jumpboxE a, #jumpboxC a{
	color: rgba(129,32,130,1);
}
#jumpA{
	clear: both;
	display: flex;
}
#jumpboxA, #jumpboxC, #jumpboxE, #jumpboxM{
	text-align: center;
}
/*Massages*/
#Tarifs-massages, #jumpboxM, #avantages, #jumpboxA{
	clear: both;
	background-color: rgba(23,163,40,0.1);
	padding: 0 3% 0 3%;
}
#Tarifs-massages{
	margin: 1em 5% 1em 0;
	width: 100%;
}
#Tarifs-massages h1{
	color: rgba(23,163,40,1.00);
}
#texte-massages h2{
	color: rgba(23,163,40,1.00);
	border-bottom: dotted rgba(23,163,40,1.00) 3px;
	margin-top: 2em;
	padding-top: 0;
	font-size: 1.1em;
}
#texte-massages{
	clear: both;
	flex: 2;
	margin-right: 5%;
}
#texte-massages a{
	text-decoration: none;
	color: rgba(23,163,40,1.00);
}
#texte-massages a:hover{
	background-color: rgba(23,163,40,0.5);
}
#forfaitM{
	clear: both;
	flex: 1.5;
	background-color: rgba(23,163,40,1.00);
	border-radius: 50px 0px 50px 0px;
	margin: .5em auto 2em auto;
	padding: 0 3% 0 3%;
	color: white;
}
#forfaitM h2{
	clear: both;
	border-bottom: dotted white 3px;
	font-size: 2em;
}
#forfaitM p{
	padding: 0 0 1em 0;
}
#aboM{
	clear: both;
	width: 100%;
	margin: auto auto 2em auto;
	padding: auto;
	font-size: .8em;
	background-color: white;
	color: dimgray;	
	text-align: center;
	border: none;
}
#aboM thead{
	font-size: 1.2em;
	font-weight: bold;
}
#aboM tr:nth-child(odd){
	background-color: rgba(23,163,40,0.25);
}
#aboM strong{
	font-size: 1.4em;
	color: rgba(23,163,40,1);
}
/*Esthétique*/
#forfaitSOIN a{
	color: white;
}
#forfaitSOIN a:hover{
	background-color: white;
	color: rgba(129,32,130,1);
}
#soin-box-a a, #soins-box-b a, #epilations a{
	color: rgba(129,32,130,1);
}
#soin-box-a a:hover, #soins-box-b a:hover, #epilations a:hover{
	background-color: rgba(129,32,130,0.5);
}
#Tarifs-soins, #jumpboxE, #jumpboxC{
	clear: both;
	background-color:rgba(129,32,130,0.1);
	padding: 0 3% 0 3%;
}
#Tarifs-soins h1, #soin-box-a h2, #soins-box-b h2, #soins-box-b h3, #epilations h2, #epilations h3{
	color: rgba(129,32,130,1);
}
#forfaitSOIN{
	clear: both;
	flex: 1.5;
	border-radius: 0px 50px 0px 50px;
	margin: .5em auto 2em auto;
	padding: 0 3% 0 3%;
	color: white;
	background-color:rgba(129,32,130,1)
	}
#forfaitSOIN h2{
	clear: both;
	border-bottom: dotted white 3px;
	font-size: 2em;
}
#forfaitSOIN p{
	padding: 0 0 1em 0;
}
#aboSOIN{
	clear: both;
	width: 100%;
	margin: auto auto 2em auto;
	padding: auto;
	font-size: .8em;
	background-color: white;
	color: dimgray;	
	text-align: center;
	border: none;
}
#aboSOIN thead{
	font-size: 1.2em;
	font-weight: bold;
}
#aboSOIN tr:nth-child(odd){
	background-color: rgba(129,32,130,0.25);
}
#aboSOIN strong{
	font-size: 1.4em;
	color: rgba(129,32,130,1);
}
#soin-box-a, .AutresSoins{
	flex: 1;
	margin: .5em auto 2em auto;
	padding: 0 3% 0 3%;
}
#soin-box-a h2, #soins-box-b h2, #soins-box-b h3, #epilations h2{
	font-size: 1.2em;
}
#soin-box-a table, #soins-box-b table{
	width: 100%;
}
#soin-box-a td:last-child, #soins-box-b td:last-child{
	text-align: right;
}
#epilations{
	margin-top: 1em;
}
#epliation h2{
	width: 100%;
}
#epilations p{
	width: 90%;
}
#epilations table{
	clear: both;
	width: 100%;
	table-layout: fixed;
	text-align: center;
	padding: 0 25% 1em 25%;;
	border-bottom: 1px grey dotted;
	border-collapse: collapse;
}
#epilations thead{
	font-weight: bolder;
}
#epilations td{
	width: 20%;
	padding-right: 2%;
}
#epilations tr:nth-child(odd){
	background-color:rgba(129,32,130,0.1);
	}
#epilations td:last-child{
	text-align: center;
	width: 20%;
}
#avantages{
	clear: both;
	flex:3;
	margin: 1em 2% 1em 0;
}
#avantages h1{
color: rgba(23,163,40,1.00);
	}
#avantages p{
	text-align: left;
}
#fidelite{
	clear: both;
	width: 50%;
	padding: 0 2% 0 2%;
	background-color: rgba(23,163,40,1.00);
	margin: auto 1%;
	color: white;
	border-radius: 0 50px 0 50px;
}
#fidelite h2, #anniv h2{
	border-bottom: dotted white 3px;
	margin-top: 2em;
	padding-top: 0;
	font-size: 1.2em;
	text-align: center;
}
#fidelite p{
	margin-bottom: 1.5em;
}
#parrainage{
	clear: both;
	padding: 0 2% 0 2%;
	background-color: white;
	margin: auto 1%;
	border-radius: 0 50px 0 50px;
}
#parrainage h2{
	color: rgba(23,163,40,1.00);
	border-bottom: dotted rgba(23,163,40,1.00) 3px;
	margin-top: 2em;
	padding-top: 0;
	font-size: 1.2em;
	text-align: center;
}
#anniv{
	clear: both;
	padding: 0 2% 0 2%;
	background-color: rgba(23,163,40,1.00);
	margin: auto 1%;
	color: white;
	border-radius: 50px 0 50px 0;
}
#jumpC{
	display: flex;
}
#cadeau, #ateliers{
	width: 40%;
	margin: 1em 0 5em 2%;
	padding: 1em 3% 1em 3%; 
	color: white;
	background-color: rgba(129,32,130,1);
	border-radius: 50px 0px 50px 0px;
	}
#cadeau h1, #ateliers h1{
	border-bottom: dotted 5px;
}
#cadeau figure{
	display: flex;
	justify-content: space-around;
}
#cadeau img{
	flex: 1;
	width: 40%;
	padding: 4%;
}
#ateliers a{
	color: white;
}
#ateliers p{
	text-align: center;
}
#ateliers img{
	width: 60%;
}
/*Fin tarifs des prestations*/
/*Pages mentions légales et contacts*/
#Five{
	clear: both;
	width: 60%;
}
#Five h2{
	color: rgba(23,163,40,1.00);
}
#Five a{
	color: dimgray;
}
/*Fin pages mentions légales et contacts*/
/*Fin du contenu des autres pages*/

/*Pied de page*/
/*Pied de page*/
footer{	
	clear: both;
	width: 100%;
	height: auto;
	position: fixed;
	margin: 0;
	padding: 0;
	left: 0;
	bottom: 0;
}
/*Bandeau vert*/
#One{
	clear: both;
	position: fixed;
	bottom: 1em;
	left: 0;
	width: 100%;
	height: auto;
	background-color: rgba(23,163,40,1.00);
	}
#One ul{
	width: 90%;
	margin: .2em auto;
	}
#One ul li{
	clear: both;
	width: 17%;
	list-style-type: none;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: 0 3%;
	font-size: 1.2em; 
	font-weight: bold;
	}
#One a{
	text-decoration: none;
	color: white;
}

#One a:hover{
	color: black;
}
/*Fin bandeau vert*/
/*Mentions légales*/
#mentions a{
	text-decoration: none;
	color: grey;
}
#mentions{
	clear: both;
	text-align: right;
	margin: 0;
	padding-right: 2%;
	width: auto;
	height: 1.5em;
	font-size: 0.8em;
	vertical-align: middle;
	background-color: white;
	}
#mentions:hover{
	font-weight: bold;
}
/*Fin des Mentions légales*/
/*Fin du pied de page*/
@media (max-width: 1800px){
	.chapo{
	padding-bottom: 0;
	width: 90%;
	}
	.sous-boite-noflex{
		width: 80%;
	}
	#Hub h1{
	font-size: 1.5em;
}
	#Four{
		width: 90%;
	}
	#Four img{
/*		display: none;*/
		margin: auto;
	}
	#Tarifs-massages{
	margin: 1em 0;
	}
	#One li{
		font-size: 1em;
	}
}
@media (max-width: 1000px){
		.Boite-a{
			display: flex;
			flex-direction: column;
			}
		header{
			grid-template-columns: 100%;
			grid-template-rows: 10% 20% 10% 5%;
			height: auto;
			z-index: 1;
			}
		#logo{
			grid-column: 1 / 2;
			grid-row: 2 / 3;
			margin: 0;
			padding: 0;
			}
		#Un{
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			text-align: center;
			}
		#Un ul li{
			float: none;
			display: inline-block;
			justify-content: space-around;
			background-color: white;
			padding: 0 2% 0 2%;
			margin-bottom: 0em;
			}
		#Menu{
			grid-column: 1 / 2;
			grid-row: 3 / 4;
			display: flex;
			flex-direction: row;
			justify-content: center;
			}
		#Esthetique, #Massages{
			text-align: center;
			margin: auto;
			}
		#Massages a{
			background: no-repeat center center url("../Elements/Boutons_Massages vert.png");
			}

		#Esthetique a{
			background: no-repeat center center url("../Elements/Boutons_Esthetique violet.png");
			}
		#Titre{
			grid-column: 1 / 2;
			grid-row: 4 / 5;
			text-align: center;
			margin: 0;
			padding: 0;
			}
		#Titre img{
			height: 75%;
		}
		section{
			margin: 29em auto 7em auto;
		}
		section h2{
			font-size: 1.3em;
			text-align: center;
		}
		section h3{
			font-size: 1.1em;
		}
		#Two{
			clear: both;
			display: flex;
			flex-direction: column-reverse;
			position: static;
			width: 100%;
			margin: 27em auto 7em auto;
			z-index: 2;
			}
		#Two figure{
			clear: both;
			flex: 1;
			position: static;
			width: 70%;
			margin: auto;
			bottom: 0;
			z-index: -99;
		}
		#partenaires{
			clear: both;
			margin-left: 5%;
			}
		#Aude{
			clear: both;
			margin-left:75%;
			}
		#presentation{
			flex : 1;
			margin: auto;
			width : 80%;
			max-width: 80%;
		}
		#Two img{
			width: 100%;
			max-width: 500px;
			height: auto;
				}
		#Hub{
			clear: both;
			display: flex;
			position: relative;
			margin: 29em auto 7em auto;
			padding: 0;
			flex-flow: column;
			justify-content: space-around;
			}
		.chapo{
			width: 80%;
		}
		.bulle, .bulle-v{
			clear: both;
			max-width: 80%;
			}
		.sous-boite-noflex{
			width: 85%;
			margin: auto 15% auto auto;
			}
		.sous-boite-noflex img{
			display: none;
			}
		.normal, .l ul, .soin ul, .violet{
			width: 90%;
		}
		#Four{
			margin: 29em auto 4em auto;
			}
		#Four h3{
			text-align: center;
			}
		#jumpboxA, #jumpboxC, #jumpboxE, #jumpboxM{
			width: 50%;
			margin: auto;
			}
		#Tarifs-massages{
			width: 90%;
			margin: 1em auto 0 auto;
			}
		#epilations p{
			width: 90%;
			}
		#fidelite, #parrainage, #anniv{
			width: 90%;
			margin: 1em auto;
			padding: 5%;
			}
		#jumpC{
			flex-direction: column;
			}
		#cadeau, #ateliers{
			width: 90%;
			margin: 1em auto;
			}
		#One ul{
			width: 80%;
			}
		#One ul li{
			font-size: .7em;
			}
}
@media (max-width: 750px){
	header{
		height: 50%;
		grid-template-rows: 5% 60% 15% 20%;
		background-color: white;
	}
	#One ul li, #mentions{
		font-size: .7em;
	}

	#One ul li:first-child{
		font-size: .7em;
		padding-left: 0;
	}
	#Hub, #Four, section{
	margin-top: 26em;
}
	
}