@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
*
{
box-sizing: border-box;
}

html
{
height: 100vh;
min-height: 100vh !important;
scroll-behavior: smooth;
}

body
{
width: 100%;
height: auto;
margin-top: 0;
margin-bottom: 0;
margin: auto;
min-height: 100vh !important;
line-height: 25px;
background-color: #FFF;
color: #555;
font-family: 'Quattrocento', serif; /* Quattrocento */
font-size: 16px;
text-align: justify;
}

h1, h2
{
font-weight: normal;
margin-bottom: 0;
margin-top: 0;
font-size: 26px;
/*font-family: "Cinzel Decorative", serif;*/
}

h3, h4, h1 + h2, h2 + h3, .subtitle
{
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
font-size: 18px;
}

h1 + h2, h2 + h3, .subtitle
{
margin-top: 40px;
}

h2.actu
{
font-size: 20px;
font-weight: bold;
}

div#contact
{
width: 100%;
height: auto;
box-shadow: inset 0px -3px 3px 0px rgba(0, 0, 0, .1);
display: none;
background-image: linear-gradient(#FFF, #EEE);
}

div#contact div#contact-content
{
width: 1000px;
margin: auto;
height: auto;
padding-top: 25px;
padding-bottom: 35px;
}

div#contact div#contact-content div#contact-form form table tr td input, div#contact div#contact-content div#contact-form form table tr td textarea, div#container form input, div#container form textarea
{
font-family: 'Quattrocento', serif;
font-size: 14px;
border-radius: 10px;
border: 1px solid #ffbff0;
padding-left: 10px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, rgba(255, 233, 250, 0.4) 50%);
background-color: rgba(255, 255, 255, 0.8);
background-size: 200% 100%;
background-position: 0 0;
transition: background-position 0.25s ease-in;
}

div#contact div#contact-content div#contact-form form table tr td textarea, div#container form textarea
{
width: 725px;
padding-top: 10px;
height: 100px;
overflow: auto;
}

div#contact div#contact-content div#contact-form form table tr td input[type="text"], div#container form input[type="text"], div#container form input[type="password"]
{
width: 350px;
height: 40px;
}

div#contact div#contact-content div#contact-form form table tr td input[type="submit"], div#container form input[type="submit"]
{
width: 200px;
height: 75px;
cursor: pointer;
background-image: linear-gradient(to left, rgba(255, 233, 250, 0.5) 50%, rgba(255, 233, 250, 1) 50%);
font-weight: bold;
/*box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.1);*/
margin: auto;
}

div#contact div#contact-content div#contact-form form table tr td input:hover, div#contact div#contact-content div#contact-form form table tr td input:focus, div#contact div#contact-content div#contact-form form table tr td textarea:hover, div#contact div#contact-content div#contact-form form table tr td textarea:focus, div#container form input:hover, div#container form textarea:hover, div#container form input:focus, div#container form textarea:focus
{
background-position: -100% 0;
}

div#contact div#contact-content div#contact-form form table tr td a
{
	color: #555;
}

div#contact div#contact-content div#contact-form form table tr td a:hover
{
	color: #333;
}

div#top-bar
{
width: 100%;
background-image: linear-gradient(to top, #ffbff0, #ffdff8 95%);
height: 50px;
clear: both;
}

div#top-bar div#top-bar-content
{
width: 1000px;
height: 50px;
margin: auto;
padding-top: 15px;
}

div#top-bar div#top-bar-content a
{
text-decoration: none;
color: #555;
}

div#top-bar div#top-bar-content a.contact
{
float: right;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
height: 50px;
margin-top: -15px;
padding-top: 15px;
color: #555;
background-color: #ffe9fa;
}

div#top-bar div#top-bar-content a.contact:hover
{
background-color: #fff5fd;
}

div#top-bar div#top-bar-content a.lien-facebook:hover, div#top-bar div#top-bar-content a.lien-linkedin:hover
{
text-decoration: underline;
}

div#top-bar div#top-bar-content img
{
width: 20px;
float: left;
margin-right: 10px;
display: inline;
}

header
{
width: 1000px;
clear: both;
margin: auto;
text-align: center;
padding-top: 50px;
padding-bottom: 25px;
line-height: 30px;
font-size: 25px;
font-weight: normal;
text-transform: none;
letter-spacing: 2px;
/*border-bottom: 1px solid #555;*/
}

header div.titre
{
font-size: 38px;
border-bottom: 1px solid #555;
letter-spacing: 5px;
padding-left: 10px;
width: 550px;
display: block;
margin: auto;
padding-bottom: 15px;
font-family: "Cinzel Decorative", serif;
font-weight: 700; /* bold 700 */
}

header div.titre span.first
{
font-size: 45px;
}

/*header h2
{
margin: auto;
margin-top: 10px;
margin-bottom: 0;
clear: both;
font-size: 25px;
font-weight: normal;
text-transform: none;
letter-spacing: 2px;
}*/

header img
{
margin: auto;
width: 150px;
height: auto;
clear: both;
display: block;
}

div#menu
{
margin: auto;
width: 1000px;
height: 50px;
line-height: 20px;
/*border-top: 1px solid #555;*/
}

div#menu ul
{
margin: auto;
margin-top: 0;
margin-left: 0;
padding-top: 0;
padding-left: 0;
list-style: none;
}

div#menu ul li
{
width: 200px;
float: left;
height: 50px;
}

div#menu ul li.first, div#menu ul li.last, div#menu ul li.first a, div#menu ul li.last a
{
	width: 200px;
}

div#menu ul li a
{
width: 200px;
text-align: center;
text-decoration: none;
float: left;
height: 50px;
padding-top: 15px;
color: #555;
border-radius: 10px 10px 0 0;
background-image: linear-gradient(to bottom, #FFF 50px, #ffdff8 50px);
background-position: 0 -1px;
background-size: 100% 200%;
transition: all .25s ease-in;
/*font-weight: bold;*/
}

div#menu ul li a:hover
{
background-position: 0 -50px;
}

div#menu ul li a.actif
{
background-color: #ffdff8;
background-image: none;
}

div#menu ul li ul
{
width: 300px;
display: block;
float: left;
z-index: 1000;
position: relative;
display: none;
}

div#menu ul li ul li
{
width: 300px;
display: block;
}

/*div#menu ul li:hover ul
{
display: block;
transition-duration: 5s;
transition: display 5s ease-in;
}*/

div#menu ul li ul li a
{
text-align: left;
display: block;
padding-left: 25px;
float: left;
width: 300px;
border-radius: 0;
background-image: none;
background-color: #ffdff8; /* ffeffb */
border-bottom: 1px solid #ffeffb;
}

div#menu ul li ul li a:hover
{
background-color: #ffbff0;
}

div#menu ul li ul li a.last
{
border-radius: 0 0 10px 10px;
border-bottom: 0;
}

div#container
{
width: 1000px;
margin: auto;
height: auto;
clear: both;
margin-top: 0;
padding-top: 25px;
padding-bottom: 25px;
}

div#container a
{
color: #ff9ff0;
}

div#container a:hover
{
color: #000;
}

div#container strong
{
color: #ffbff0;
}

div#container img.photo
{
border-radius: 10px;
width: 300px;
/*margin-bottom: 25px;*/
}

div#container ul li span.textUL
{
color: #555;
}

div#container:after
{
content: '';
display: block;
clear: both;
}

div#container span.citation
{
font-style: italic;
font-size: 20px;
width: 100%;
margin: auto;
text-align: center;
clear: both;
display: block;
}

div#container span.auteur
{
float: right;
font-weight: bold;
}

div#container div#wrapper-vignettes 
{
width: 1000px;
display: block;
}

div#container div#wrapper-public 
{
width: 1000px;
display: block;
}

div#container div#wrapper-vignettes:after
{
content: '';
clear: both;
display: block;
}

div#container div#wrapper-vignettes div.vignette, div#container div#wrapper-vignettes div.public
{
float: left;
margin-right: 40px;
width: 220px;
height: 147px;
border-radius: 10px;
}

div#container div#wrapper-vignettes div.public
{
float: left;
margin-right: 40px;
width: 220px;
font-weight: bold;
text-align: center;
height: auto;
}

div#container div#wrapper-vignettes div.vignette div.en-savoir-plus
{
width: 220px;
height: 147px;
background-color: rgba(0, 0, 0, .5);
text-align: center;
border-radius: 10px;
padding-top: 60px;
font-weight: bold;
opacity: 0;
}

div#container div#wrapper-vignettes div.vignette:hover div.en-savoir-plus
{
transition: opacity 0.75s;
opacity: 1;
}

div#container div#wrapper-vignettes div.vignette div.en-savoir-plus a:hover
{
color: #FFF;
}

div#container div#wrapper-vignettes div#adultes
{
background: transparent url(images/adultes.jpg) no-repeat;
background-size: cover;
}

div#container div#wrapper-vignettes div#enfants
{
background: transparent url(images/enfants.jpg) no-repeat;
background-size: cover;
}

div#container div#wrapper-vignettes div#couples
{
background: transparent url(images/couples.jpg) no-repeat;
background-size: cover;
}

div#container div#wrapper-vignettes div#parents
{
background: transparent url(images/parents.jpg) no-repeat;
background-size: cover;
}

div#container div.wrapper-tarifs
{
width: 700px;
margin: auto;
display: block;
}

div#container div.wrapper-tarifs:after
{
content: '';
clear: both;
display: block;
}

div#container div.seances-bloc
{
float: left;
box-sizing: border-box;
margin-bottom: 0px;
}

div#container table tr td div.bouton
{
width: 40px;
height: 40px;
border-radius: 50%;
background-image: linear-gradient(135deg, #ffbff0, #ffdff8);
display: inline;
float: left;
text-align: center;
color: #FFF;
font-weight: bold;
cursor: pointer;
padding-top: 7px;
font-size: 25px;
text-shadow: #ff9ff0 1px 1px, #ff9ff0 -1px 1px, #ff9ff0 -1px -1px, #ff9ff0 1px -1px;
}

div#container table tr td div.bouton:hover, div#container table tr td div.bouton:focus
{
transform: rotate(225deg);
transition-duration: 0.5s;
border: 1px solid #ffbff0;
padding-top: 6px;
background-image: linear-gradient(45deg, #fff5fd, #fff);
}

div#container table tr td div.bouton-actif
{
width: 40px;
height: 40px;
border-radius: 50%;
background-image: none;
display: inline;
float: left;
text-align: center;
color: #FFF;
font-weight: bold;
cursor: pointer;
padding-top: 7px;
font-size: 25px;
text-shadow: #ff9ff0 1px 1px, #ff9ff0 -1px 1px, #ff9ff0 -1px -1px, #ff9ff0 1px -1px;
border: 1px solid #ffbff0;
transform: rotate(225deg);
padding-top: 6px;
background-image: linear-gradient(45deg, #fff5fd, #fff);
}

div#container table tr td div.bouton-actif:hover, div#container table tr td div.bouton-actif:focus
{
transform: rotate(-225deg);
transition-duration: 0.5s;
}

div#container table tr td h3
{
margin-left: 50px;
margin-top: 10px;
}

div#container table tr td div.infos
{
display: none;
}

/*div#container div.seances-bloc:after
{
content: '';
display: block;
clear: both;
margin-bottom: 25px;
}*/

div#container div.tarif
{
text-align: center;
padding: 25px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
background-image: linear-gradient(135deg, #ffbff0, #ffdff8);
margin: auto;
display: block;
margin-bottom: 25px;
width: 400px;
}

div#container div.tarif strong
{
color: #555;
}

div#container div.tarif a
{
color: #555;
}

div#container div.tarif a:hover
{
color: #000;
}

/*
 * MODIFS 2024
 */
.wrapper.cards {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}

.card {
	width: 100%;
	max-width: 350px;
	border-radius: 10px;
	border: 1px solid #ffdff8;
	transition: all .4s ease;
}

.thumb {
	width: 100%;
	height: 220px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.thumb img {
	height: 250px;
	width: auto;
	transition: all .4s ease;
}

.card:hover, .card:focus {
	border-color: #ffbff0;
}

.card:hover img, .card:focus img {
	transform: scale(1.1);
}

.card > strong {
	width: 100%;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 0;
	margin-top: 20px;
	display: block;
	font-size: 14pt;
}

.card p {
	width: 100%;
	margin: 0;
	text-align: center;
	padding: 20px;
}

.card .cta {
	width: 180px;
	border-radius: 10px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #ffbff0;
	background: #ffeff8;
	margin: auto;
	margin-top: 20px;
	transition: all .4s ease;
}

.card .cta:hover, .card .cta:focus {
	background: #ffbff0;
	color: #FFF !important;
}

.infobulle {
	width: 100%;
	border-radius: 10px;
	margin-top: 20px;
	padding: 20px;
	text-align: center;
	background: #ffeff8;
	border: 1px solid #ffbff0;
}

/*
 * / MODIFS 2024
 */
footer
{
width: 100%;
background-color: #ffdff8;
background-image: linear-gradient(215deg, #ffcff8, #fffcff);
clear: both;
padding-top: 25px;
padding-bottom: 25px;
}

footer div#footer-content
{
width: 1000px;
margin: auto;
}

footer div#footer-content a
{
color: #555;
}

footer div#footer-content a:hover
{
color: #000;
}

footer div#footer-content div.bloc
{
width: 300px;
margin-right: 50px;
float: left;
}

footer div#footer-content div.last
{
margin-right: 0px;
}

footer div#footer-content:after
{
content: "";
clear: both;
display: block;
/*height: 0;
visibility: hidden;*/
}

div#bottom-bar
{
width: 100%;
clear: both;
margin-top: 0;
background-color: #ffbff0;
height: 50px;
line-height: 20px;
}

div#bottom-bar div#bottom-bar-content
{
width: 1000px;
margin: auto;
text-align: center;
padding-top: 18px;
font-size: 14px;
}

div#bottom-bar div#bottom-bar-content a
{
color: #555;
text-decoration: underline;
}

div#bottom-bar div#bottom-bar-content a:hover
{
color: #000;
}