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

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&family=Quicksand:wght@300;500&display=swap');

/* GLOBAL 
 */
* {
	box-sizing: border-box;
}

:root {
	/*
	 * Ancienne version
	 * --bleu: #519daa;
	   --orange: #f7aa87;
	   --rose: #d7948e;
	 */
	--bleu: #995b6a;
	--orange: #c9a5a7;
}

html {
	scroll-behavior: smooth;
}

body {
	width: 100%;
	margin: auto;
	font-family: 'Jost', sans-serif;
	font-size: 14pt;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 40px;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

header {
	width: 100%;
	height: auto;
	min-height: 100vh;
	position: relative;
}

.content {
	width: 1100px;
	margin: auto;
}

header.home {
	background: url("images/accueil.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.therapie {
	background: url("images/therapie.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.therapie::before, header.tarifs::before, header.contact::before, header.erreur::before, header.politique::before {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*min-height: 100vh;*/
	background: rgba(0, 0, 0, .1);
	content: '';
}

header.tarifs {
	background: url("images/tarifs.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.contact {
	background: url("images/contact.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.mentions {
	background: url("images/mentions.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.politique {
	background: url("images/politique.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

header.erreur {
	background: url("images/erreur.jpg") center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
}

.cta {
	width: 250px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #FFF;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 400;
	transition: all .4s ease;
}

.wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

p strong {
	color: var(--bleu);
	font-weight: 500;
}

p a:not(.cta) {
	color: var(--bleu);
}

p a:not(.cta):hover, p a:not(.cta):focus {
	color: var(--orange);
}

/* / GLOBAL */

/* Top bar 
 */
#topBar {
	width: 90%;
	height: 100px;
	background: rgba(255, 255, 255, 1);
	/*backdrop-filter: blur(3px);*/
	border-radius: 50px 0 0 50px;
	margin-left: auto;
	margin-right: 0;
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 5px 25px 5px rgba(100, 100, 100, .2);
	z-index: 5000;
}

#logo {
	width: 300px;
	padding-left: 100px;
	height: 100px;
	background: url("images/logo_header.jpg") left no-repeat;
	display: flex;
	align-items: center;
	border-radius: 50px 0 0 50px;
}

#logo .title {
	font-size: 20pt;
	font-weight: 500;
	color: var(--bleu); /* #d7948d */
}

#close, #boutonMenu {
	display: none;
}

nav {
	width: auto;
	height: 100%;
	margin-left: auto;
	margin-right: 100px;
}

nav ul {
	width: auto;
	margin-top: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

nav ul li {
	display: flex;
	align-items: center;
	margin-left: 0px;
	height: 100px;
}

nav ul li a {
	display: block;
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	color: #000;
	font-weight: 300;
	font-size: 14pt;
	border-radius: 20px;
	transition: all .4s ease;
}

nav ul li a:hover, nav ul li a:focus, nav ul li a.actif {
	background: var(--bleu);
	color: #FFF;
}

/* SOUS-MENU */

nav ul li ul {
	display: none;
	position: absolute;
	top: 100px;
	align-items: flex-start;
	flex-direction: column;
	width: 300px;
	/*background: rgba(255, 255, 255, .5);*/
	border-radius: 20px;
	gap: 0;
	/*backdrop-filter: blur(3px);*/
	box-shadow: 0 0 15px 5px rgba(0, 0, 0, .1);
}

#sous-menu:hover ul, #sous-menu:focus ul {
	display: flex;
}

nav ul li ul li {
	width: 100%;
	height: 50px;
}

nav ul li ul li a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 20px;
	border-left: 3px solid transparent;
	border-radius: 0;
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(3px);
	
}

nav ul li ul li a:hover, nav ul li ul li a:focus {
	color: var(--bleu);
	border-color: var(--bleu);
	background: rgba(255, 255, 255, .75);
}

nav ul li ul li:last-of-type a {
	border-radius: 0 0 20px 20px;
}

nav ul li ul li:first-of-type a {
	border-radius: 20px 20px 0 0;
}

#titlePlace {
	width: 1100px;
	min-height: calc(100vh - 100px);
	margin: auto;
	padding-top: 100px !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-bottom: 40px;
	position: relative;
	z-index: 500;
}

#titlePlace > .content {
	width: 500px;
	margin-right: auto;
	margin-left: 0;
	height: 100%;
	min-height: calc(100vh - 100px);
	display: flex;
	align-items: flex-start;
	gap: 100px;
	flex-direction: column;
	justify-content: center;
}

#titlePlace h1 {
	font-size: 42pt;
	line-height: 58pt;
	color: #FFF;
	text-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

#titlePlace .cta {
	background: var(--bleu);
	color: #FFF;
	box-shadow: 0 0 15px 5px rgba(100, 100, 100, .2);
}

#titlePlace .cta:hover, #titlePlace .cta:focus {
	background: #FFF;
	color: var(--bleu);
}

/* MAIN
 */
main {
	width: 100%;
}

main .content, footer .content {
	padding-top: 40px;
	padding-bottom: 40px;
}

main p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 26pt;
	font-weight: 300;
	color: #000;
}

main h1, h2.h1 {
	font-size: 24pt;
}

main h1, h2.h1, h3 {
	color: var(--bleu);
}

.quote {
	width: 100%;
	background: var(--orange);
	margin-top: 20px;
}

.quote p {
	text-align: center;
	font-size: 24pt;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, .25);
	line-height: 36pt;
	display: block;
	margin-bottom: 20px;
	color: #FFF;
	font-style: italic;
	position: relative;
}

.quote p::before {
	content: '\201C';
	width: 60px;
	height: 60px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 30px;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(2px);
	border-radius: 50%;
	box-shadow: 3px 5px 10px 3px rgba(0, 0, 0, .1);
	text-shadow: none;
	color: var(--orange);
	font-size: 48pt;
	font-family: 'Times New Roman', serif;
	position: absolute;
	left: 0px;
	top: -70px;
	font-style: normal;
}

.author {
	font-size: 12pt;
	color: rgba(255, 255, 255, .75);
	width: 100%;
	display: block;
	text-align: right;
}

.author::before {
	content: '\2014';
	color: #FFF;
	margin-right: 10px;
}

.illustration {
	width: 300px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/*margin-top: 40px;*/
	margin-bottom: 40px;
	overflow: hidden;
}

.illustration.left {
	float: left;
	margin-right: 40px;
}

.illustration.right {
	float: right;
	margin-left: 40px;
}

main .content p::after {
	content: '';
	display: block;
	clear: both;
}

ul.labels {
	margin-top: 40px;
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding-left: 0;
	list-style: none;
}

ul.labels li a {
	display: inline-block;
	height: 50px;
	border-radius: 25px;
	text-align: center;
	text-decoration: none;
	line-height: 48px;
	border: 1px solid var(--bleu);
	color: var(--bleu);
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 300;
	transition: all .4s ease;
}

ul.labels li a:hover, ul.labels li a:focus {
	color: #FFF;
	background: var(--bleu);
}

.important {
	width: 100%;
	border-radius: 20px;
	text-align: center;
	padding: 20px;
	padding-left: 110px;
	padding-right: 110px;
	border: 1px solid var(--orange);
	margin-top: 40px;
	margin-bottom: 40px;
	font-style: italic;
	position: relative;
}

.important span.material-icons {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #FFF;
	background: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -30px;
	left: 30px;
}

.important p {
	color: var(--orange);
}

.content .important:last-child {
	margin-bottom: 0;
}

ul.classic {
	list-style: none;
	padding-left: 0;
	font-weight: 300;
	line-height: 26pt;
	margin-top: 0;
}

ul.classic li {
	line-height: 26pt;
	font-weight: 300;
	padding-left: 20px;
}

ul.classic li::before {
	content: '\25E6';
	color: var(--bleu);
	margin-right: 10px;
}

ul.classic strong {
	font-weight: 500;
	color: var(--bleu);
}

ul.classic a {
	color: var(--bleu);
}

ul.classic a:hover, ul.classic a:focus {
	color: var(--orange);
}

/*
 * TARIFS
 */
.wrapper.prices {
	gap: 40px;
	justify-content: center;
	margin-top: 40px;
}

.presta {
	width: 400px;
}

/*.wrapper.prices:first-of-type h3 {
	padding-top: 40px;
}*/

.presta h3 {
	margin-bottom: 5px;
}

.price {
	width: 200px;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

span.prix {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16pt;
	color: #FFF;
	background: linear-gradient(45deg, var(--bleu), var(--orange));
}

/*
 * CONTACT
 */
form {
	width: 625px;
	display: flex;
	justify-content: space-between;
	gap: 25px;
	flex-wrap: wrap;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

input[type="text"], input[type="email"], textarea {
	width: 300px;
	height: 50px;
	border-radius: 25px;
	border: 1px solid #DDD;
	transition: all .4s ease;
	padding-left: 15px;
	padding-right: 15px;
	font-family: 'Jost', sans-serif;;
	font-size: 13pt;
	font-weight: 300;
	outline: 0;
	color: #333;
}

input[type="text"]:hover, input[type="text"]:focus, input[type="email"]:hover, input[type="email"]:focus, textarea:hover, textarea:focus {
	border-color: var(--bleu);
}

textarea {
	width: 100%;
	height: 140px;
	padding: 15px;
}

label {
	width: 100%;
}

input[type="checkbox"] {
	outline: 0;
	margin-right: 5px;
}

input[type="checkbox"] + p {
	display: inline;
}

div#boutonForm {
	width: 100%;
	text-align: center;
}

#boutonForm strong {
	font-weight: 500;
	color: var(--bleu);
}

input[type="submit"] {
	width: 250px;
	height: 50px;
	color: var(--bleu);
	background: #FFF;
	outline: 0;
	border: 1px solid var(--bleu);
	border-radius: 25px;
	cursor: pointer;
	font-family: 'Jost', sans-serif;;
	font-size: 13pt;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: all .4s ease;
}

input[type="submit"]:hover, input[type="submit"]:focus {
	background: var(--bleu);
	color: #FFF;
}

iframe {
	margin-bottom: -8px;
}

/* FOOTER
 */
footer {
	width: 100%;
	background: linear-gradient(45deg, var(--bleu), var(--orange));
	color: rgba(255, 255, 255, .75);
	font-weight: 300;
	font-size: 12pt;
	text-align: center;
}

footer h3 {
	color: #FFF !important;
	font-weight: 500;
	font-size: 18pt;
}

footer a, footer p a {
	color: rgba(255, 255, 255, .75) !important;
	text-decoration: none;
}

footer a:hover, footer a:focus, footer p a:hover, footer p a:focus {
	text-decoration: underline;
	color: #FFF !important; /* #333 (ancienne version) */
}

footer .bloc strong {
	font-weight: 500 !important;
	color: #FFF;
}

footer .wrapper {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}

footer .bloc {
	width: 300px;
	text-align: left;
	font-size: 13pt;
	line-height: 25pt;
}

footer .bloc:first-of-type {
	text-align: center;
	text-transform: uppercase;
	font-size: 12pt;
	line-height: 20pt;
	font-weight: 300;
}

footer .bloc:first-of-type img {
	display: block;
	margin: auto;
	margin-bottom: 20px;
}

footer .bloc:first-of-type strong {
	text-transform: none;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 20pt;
	display: block;
	color: #FFF;
}

@media only screen and (max-width: 1200px) {
	
	header {
		height: auto !important;
		min-height: 100vh !important;
	}
	.content {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#titlePlace, #titlePlace > .content {
		width: 100%;
		align-items: center;
		text-align: center;
	}
	
	#titlePlace h1 {
		font-size: 36pt;
	}
	
	#boutonMenu {
		display: block;
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 24pt;
		color: var(--bleu);
		cursor: pointer;
	}
	
	#close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 20pt;
		text-align: center;
		width: 40px;
		height: 40px;
		line-height: 40px;
		color: var(--bleu);
		display: block;
		cursor: pointer;
	}
	
	nav {
		position: fixed;
		width: 75%;
		height: 100vh;
		z-index: 1000;
		background: #FFF;
		right: 0;
		top: 0;
		margin-right: 0;
		box-shadow: -5px 0 15px 5px rgba(100, 100, 100, .2);
		overflow: auto;
		display: none;
	}
	
	nav ul {
		width: 100%;
		flex-direction: column;
		align-items: center;
		margin-top: 80px;
	}
	
	nav ul li {
		width: 100%;
		height: auto;
		min-height: 40px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	nav ul li a {
		width: 200px;
	}
	
	nav ul li ul {
		display: none;
		position: relative;
		top: auto;
		width: 100%;
		border-radius: 0;
		margin-top: 20px;
		/*background: #EEE;*/
		box-shadow: none;
	}
	
	li#sous-menu:hover ul, li#sous-menu:focus ul {
		display: none;
	}
	
	nav ul li ul li {
		width: 100%;
	}
	
	nav ul li ul li a {
		width: 100% !important;
		background: transparent;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 0;
		border-left: 5px solid #CCC;
		color: #999;
	}
	
	nav ul li ul li:first-of-type a, nav ul li ul li:last-of-type a {
		border-radius: 0;
	}
	
	nav ul li ul li a:hover, nav ul li ul li a:focus {
		border-color: var(--bleu);
		background: inherit;
	}
	
	.illustration {
		--w: 100vw;
		--reste: calc(var(--w) - 40px);
		width: var(--reste);
		height: var(--reste);
		max-width: 300px;
		max-height: 300px;
		margin: auto;
		margin-bottom: 20px;
		float: none;
	}
	
	.illustration.left, .illustration.right {
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	.important {
		padding: 20px;
		padding-top: 30px;
	}
	
	.wrapper.prices {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
	
	.presta {
		width: 100%;
	}
	
	form {
		width: 100%;
	}
	
	input[type="text"], input[type="email"], textarea {
		width: 100%;
	}
	
	footer .wrapper {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
}