body{
	font-family: Arial;
	color: black;
	background-color:#fdf8ff;
}
/*#fdf9ff;*/

main{
	margin-bottom: 20vh;
}
p{
	font-size: 18px;
	font-family: "Comic Neue", cursive;
 	font-weight: 500;
  	font-style: normal;
	max-width: 100%;
	margin: 2vh 5vw;
	padding: 0px 20px;
}
figcaption{
	font-family: "Comic Neue", cursive;
 	font-weight: 500;
  	font-style: normal;
	text-align: center;
}

.sousagenda{
	font-size: 22px;
	margin-top: 3vh;
	text-align: center;
}
.decharge{
	margin-left: 5vw;
	padding-left: 20px;
}
.banniere{
	width: 100%;
	height: 30vh;
	object-fit: cover;
}

table{
	display: flex;
	justify-content: center;
	flex-direction: row;
  border-collapse: collapse;
}

th, td{
  border: 1px solid black;
  padding: 10px;
   width: 20vw;
  height: 10vh;
}

h1{
  	text-align: center;
	background-color: #f4e4ff;
  	padding:3vh 0vw;
	text-decoration: none;
	font-style: Arial;
	font-weight: 300;
	margin-bottom: 3%;
}

h2{
	margin-left: 4vw;
	font-family: "Mukta Malar", sans-serif;
  	font-weight: 400;
  	font-style: normal;
}

h3{
	margin: 3% 4%;
	font-family: "Mukta Malar", sans-serif;
  	font-weight: 300;
  	font-style: normal;
	font-size: 25px;
}

span{
	font-weight: bold;
}

nav a{
	color: black;
	text-decoration: none;
	text-align: center;
	display: inline;
}

.menu a:hover{
	color: #86a25f;
	text-decoration: underline;
}

.menu{
	display: flex;
	justify-content: center;
	justify-content: space-around;
	background-color: #f4f8e6;
	/*background-color: #e3ecc0;*/
	padding: 1.5vh 0vw;
	margin: 1vh 0vw;
	font-size: 25px;
}

.sommaire{
	display: block;
	text-align: center;
	padding: 1%;
	text-decoration: underline;
	color: blue;
}

li{
	padding: 0.5%;
	margin-left: 7vw;
	position:relative;
}


.agenda{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 2rem;
	margin-left: 8vw;
	margin-top: 5vh;
	margin-bottom: 5vh;
}
/*Photo choix pour l’accueil et pour le choix de massages*/

.photo:hover{
	border-color: #cebad9;
	background-color: #cebad9;
	opacity: 0.3;
}

.photo{
	border: 3px solid transparent;
	border-radius: 10%;
}

.blocphoto{
	width: 30vw;
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative;
	margin-right: 5vw;
	margin-left: 5vw;
	margin-top: 10vh;
}

.accueil{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	justify-content: space-evenly;
}

.sousphoto{
	margin-left:0vw;
	width: 30vw;
	margin-top: 30px;
	margin-bottom: 40px;
	font-size: 20px;
}

/*présentation maman*/

.article{
	display: flex;
	margin-top: 15vh;
	margin-bottom: 20vh;
	margin-left: 5vw;
	margin-right: 10vw;
	flex-direction: row;
	align-items: center;
}

.maman{
	display: flex;
	margin-top: 15vh;
	margin-bottom: 20vh;
	margin-left: 12vw;
	margin-right: 10vw;
	flex-direction: row;
	align-items: center;
}

.photoacote{
	height: 50vh;
	width: 50vh;
	object-fit: cover;
	margin-right: 5vw;
	border-radius: 10%;
}

.photomaman{
	height: 50vh;
	margin-right: 5vw;
	border-radius: 30px;
}

.texte{
	height: 40vh;
	width:max-content;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.presentation{
	font-family: "Caveat Brush", cursive;
  	font-weight: 400;
  	font-style: normal;
	font-size: clamp(20px, 1.5vw, 25px);
	margin-right: 10vw;
	margin-left: 0vw;
	display: inline-block;
}

.telephone{
	display: none;
}
.ordinateur{
	display: flex;
}

.sousagenda{
	font-size: 24px;
	margin-bottom: 5vh;
	text-align: center;
	margin-left: 34vw;
}

iframe{
	width: 80vw;
	height: 50vh;
	float: center;
	margin: 5vh 9vw;
}
/*article*/
p a{
	text-decoration: underline;
	color: blue;
}
p a:hover{
	color: #cebad9;
}
	a{
	text-decoration: none;
	color: black;
}
	.bleu{
	color: blue;
	text-decoration: underline;
}

	.bleu:hover{
	color: #cebad9;
}

	a:hover{
	text-decoration: underline;
	color: #cebad9;
}
	.photo:hover{
	border-color: #cebad9;
	background-color: #cebad9;
	opacity: 0.3;
}
	.menu a:hover{
	color: #86a25f;
	text-decoration: underline;
}

@media (max-width:576px){
	p{
	font-size: 18px;
	padding: 0px 4%;
}
	.banniere{
	height: 10vh;
}
	h1{
  	padding: 15px;
	font-size: 20px;
	margin-bottom: 5%;
}

	h2{
	margin-left: 8%;
}

	h3{
	margin: 3% 4%;
	font-size: 16px;
}
	main{
	margin-top:3vh;
}
	.menu{
	padding: 2vh 0vw;
	font-size: 16px;
}

	.sommaire{
	padding: 1%;
}
	.photo{
	border: 2px solid transparent;
	border-radius: 10%;
}

	.blocphoto{
	width: 40vw;
	margin: 3vh 3vw;
}
	.accueil{
	display: flex;
	flex-direction: row;	
	justify-content: center;
	justify-content: space-evenly;
}
	.sousphoto{
	margin-left:2vw;
	width: 35vw;
	margin-top: 15px;
	margin-bottom: 10px;
	font-size: 16px;
}





	.massage .photo{
	height: 41vh;
	width: 41vh;
	object-fit: cover;
	margin: 0vh 0vw;
	border-radius: 30px;
}
	.massage .accueil{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.massage .blocphoto{
	display: flex;
	margin-left:5vw;
	margin-right: 5vw;
	margin-top: 5vh;
	margin-bottom: 2vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

	.massage .sousphoto{
	font-size: 18px;
	width: 284px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/*présentation maman*/
	.affichagearticle .article{
	display: flex;
	margin: 10vh 5vw;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
	.photoacote{
	height: 41vh;
	width: 41vh;
	object-fit: cover;
	margin: 0vh 0vw;
	border-radius: 30px;
}
	.affichagearticle .texte{
	height: 10vh;
	width: 41vh;
	margin: 2vh 0vw;
}

	.affichagearticle .presentation{
	font-size: 18px;
	width: 284px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}




	.index .article{
	display: unset;
	margin: 10vh 5vw;
	flex-direction: unset;
	align-items: unset;
}
	.maman{
	display: block;
	margin: 10vh 3vw;
	flex-direction: unset;
	align-items: unset;
}
	.photomaman{
	float: left;
	height: 30vh;
	margin-left: 0vw;
	margin-right: 5vw;
	margin-bottom: 5vw;
	border-radius: 30px;
}

	.index .texte{
	height: unset;
	width: unset;
	display: unset;
}

	.index .presentation{
	font-size: 18px;
	margin-right: 50vw;
	display: inline;
}
	p a{
	text-decoration: underline;
	color: blue;
}

	p a:active{
	color: #cebad9;
}
	a{
	text-decoration: none;
	color: black;
}
	.bleu{
	color: blue;
	text-decoration: underline;
}

	.bleu:active{
	color: #cebad9;
}

	a:active{
	text-decoration: underline;
	color: #cebad9;
}
	.photo:active{
	border-color: #cebad9;
	background-color: #cebad9;
	opacity: 0.3;
}
	.menu a:active{
	color: #86a25f;
	text-decoration: underline;
}
	table{
	display: flex;
	justify-content: center;
	flex-direction: row;
  border-collapse: collapse;
}

	th, td{
  border: 1px solid black;
  padding: 10px;
   width: 20vw;
  height: 10vh;
}
	.agenda{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 2rem;
	margin-left: 8vw;
	margin-top: 5vh;
	margin-bottom: 3vh;
	width: 80vw;
}
	.sousagenda{
	font-size: 12px;
	margin-bottom: 5vh;
	text-align: center;
	margin-left: 13vw;
}
	.telephone{
	display: flex;
}
	.ordinateur{
	display: none;
}
}