@font-face {font-family:'Titillium';font-style:normal;font-weight:normal;src:url('../fonts/Titillium-Regular.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:italic;font-weight:normal;src:url('../fonts/Titillium-RegularItalic.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:normal;font-weight:lighter;src:url('../fonts/Titillium-Light.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:italic;font-weight:lighter;src:url('../fonts/Titillium-LightItalic.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:normal;font-weight:700;src:url('../fonts/Titillium-Semibold.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:italic;font-weight:700;src:url('../fonts/Titillium-SemiboldItalic.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:normal;font-weight:bold;src:url('../fonts/Titillium-Bold.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:italic;font-weight:bold;src:url('../fonts/Titillium-BoldItalic.woff') format('woff');}
@font-face {font-family:'Titillium';font-style:normal;font-weight:900;src:url('../fonts/Titillium-Black.woff') format('woff');}
@font-face {font-family:'BankGothic';font-style:normal;font-weight:normal;src:url('../fonts/bankgothic-md-bt-medium.woff') format('woff');}
/*@font-face {font-family:'Notera';src:url('../fonts/Notera.woff') format('woff');font-weight:normal;font-style:normal;}*/
@font-face {font-family:'mrs_saint_delafield';src:url('../fonts/mrssaintdelafield-regular.woff2') format('woff2');font-weight:normal;font-style:normal;}

:root {
    --bg-white:#fff;
    --bg-spa:#16131f;
    --bg-gray:#e5e5e5;
    --txt-white:#fff;
    --blue:#0b5297;
    --chocolate:#351b04;
    --yellow:#e3c327;
    --bg-project:#455a64;
    --themenu:#4f82b4;
}

body {background:var(--bg-white);font-family:'Titillium';color:var(--chocolate);}

.top {overflow:hidden;}
.top img {max-height:56px;margin:20px 0;}
.top .cell:nth-child(2) {text-align:right;}
.top .cell:last-of-type {font-family:'BankGothic';display:flex;align-items:flex-start;justify-content:flex-end;}
.top .cell:last-of-type div {display:flex;}
.top .cell:last-of-type a {display:flex;align-items:center;font-size:1.1rem;}
.top .cell:last-of-type a:last-of-type {margin-left:5px;}}

header, footer {text-align:center;color:var(--txt-white);}
footer {background:url('../img/bg-footer.png') no-repeat bottom center;background-size:100%;}

header label, header #menu {display:none;}

nav {background:url('../img/bg-nav.png') no-repeat top center;background-size:cover;position:absolute;z-index:2;width:100%;}
nav ul {list-style-type:none;text-align:left;align-items:center;justify-content:center;font-size:1.1rem;}
nav li {background-color:transparent;}
nav li li {background-color:#4f82b4;}
nav a  {color:white;}
nav a:hover {color:white; text-decoration: underline;text-decoration-color: #FFFFDF;}
nav a:focus {color:white; text-decoration: underline;text-decoration-color: #FFFFDF;}

.cadre-rouge {border-color: #bd081d;border-style: solid; border-width: 2px; padding-left:8px; padding-right: 8px;}
.slider {margin:0;touch-action:auto;}
.slider.swiper-container {width:100%;height:450px;}
.swiper-container img {position:absolute;top:0;left:0;object-fit:cover;height:100%;width:100%;}
.swiper-container p {z-index:1;font-family:'mrs_saint_delafield';font-size:55px;color:var(--txt-white);}
.swiper-slide {display:flex;align-items:center;justify-content:center;}

.swiper-pagination-bullet {background:var(--bg-gray);width:16px;height:16px;opacity:1;border:2px solid var(--bg-white);}
.swiper-pagination-bullet-active {background:var(--blue);}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:20px;}
.masked-element {clip-path:polygon(32% 35%, 32% 58%, 33% 58%, 33% 37%, 67% 37%, 67% 58%, 32% 58%, 32% 60%, 68% 60%, 68% 35%);position:absolute;width:100%;height:100%;background-size:120%;background-position:center;background-repeat:no-repeat;z-index:1;pointer-events:auto;}

.slider2.swiper-container { width: 100%; height: 364px;}
.slider3.swiper-container { width: 100%; height: 164px;}


section {position:relative;margin:40px 0;padding:20px;}
section p {max-width:860px;margin-left:auto;margin-right:auto;}

section[data-role="votre-projet"]::after {content:'';display:block;width:100%;height:calc(100% - 30px);background:url('../img/waves.png') no-repeat top center;background-size:cover;position:absolute;top:30px;left:0;z-index:1;}
section[data-role="votre-projet"] .large-7 {overflow:hidden;}
section[data-role="votre-projet"] form {position:relative;z-index:2;}
section[data-role="votre-projet"] {background:var(--bg-project);}
section[data-role="votre-projet"] h2, section[data-role="votre-projet"] p, section[data-role="votre-projet"] a {color:var(--txt-white);text-align:left;}
section[data-role="votre-projet"] h2::before, section[data-role="votre-projet"] h2::after {display:none;}
section[data-role="votre-projet"] form .cell {display:flex;flex-direction:row;flex-wrap:wrap;}
section[data-role="votre-projet"] form input {width:45%;flex:1 0 45%;margin-right:5px;}
section[data-role="votre-projet"] form input[type="submit"] {font-family:'BankGothic';background:var(--yellow);border:0;border-radius:5px;height:2.4375rem;margin:0 0 1rem;padding:0.5rem;color:var(--blue);cursor:pointer;}
section[data-role="votre-projet"] form input[type="submit"]:hover, section[data-role="votre-projet"] form input[type="submit"]:focus {background:var(--blue);color:var(--yellow);}
section[data-role="votre-projet"] form textarea {height:204px;}
section[data-role="votre-projet"] form [type='tel'] {width:100%;flex:1 0 100%;}
section[data-role="votre-projet"] div:first-of-type {position:relative;}
section[data-role="votre-projet"] div:first-of-type img {position:absolute;z-index:0;pointer-events:none;}
section[data-role="votre-projet"] div:first-of-type img[alt="enfant brassards"] {max-width:154px;top:55px;left:5%;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px;}
section[data-role="votre-projet"] div:first-of-type img[alt="nageuse"] {max-width:260px;bottom:5%;right:5%;backface-visibility:hidden;perspective:1000px;}
section[data-role="votre-projet"] div:first-of-type img[alt="bulles"] {opacity:.2;max-width:40px;left:10%;bottom:20%;}
section[data-role="votre-projet"] div:nth-of-type(2) img[alt="bulles"] {position:absolute;z-index:0;pointer-events:none;opacity:.2;max-width:110px;right:5%;bottom:5%;}
section[data-role="votre-projet"] div:last-of-type {z-index:2;font-family:'BankGothic';display:flex;}
section[data-role="votre-projet"] div:last-of-type a {display:flex;align-items:center;font-size:1.1rem;}
section[data-role="votre-projet"] div:last-of-type a:first-of-type {margin-right:5px;}


section[data-role="livreor"]::before {content:'';display:block;width:117px;height:144px;background:url('../img/echelle.png');background-size:cover;position:absolute;top:-65px;right:50px;}
section[data-role="livreor"]::after {content:'';display:block;width:100%;height:calc(100% - 30px);background:url('../img/waves.png') no-repeat top center;background-size:cover;position:absolute;top:30px;left:0;z-index:1;}
section[data-role="livreor"] .large-7 {overflow:hidden;}
section[data-role="livreor"] form {position:relative;z-index:2;}
section[data-role="livreor"] {background:var(--bg-project);}
section[data-role="livreor"] h2, section[data-role="livreor"] p, section[data-role="livreor"] a {color:var(--txt-white);text-align:left;}
section[data-role="livreor"] h2::before, section[data-role="livreor"] h2::after {display:none;}
section[data-role="livreor"] form .cell {display:flex;flex-direction:row;flex-wrap:wrap;}
section[data-role="livreor"] form input {width:45%;flex:1 0 45%;margin-right:5px;}
section[data-role="livreor"] form input[type="submit"] {font-family:'BankGothic';background:var(--yellow);border:0;border-radius:5px;height:2.4375rem;margin:0 0 1rem;padding:0.5rem;color:var(--blue);cursor:pointer;}
section[data-role="livreor"] form input[type="submit"]:hover, section[data-role="livreor"] form input[type="submit"]:focus {background:var(--blue);color:var(--yellow);}
section[data-role="livreor"] form textarea {height:104px;}
section[data-role="livreor"] div:first-of-type {position:relative;}
section[data-role="livreor"] div:first-of-type img {position:absolute;z-index:0;pointer-events:none;}
section[data-role="livreor"] div:first-of-type img[alt="bulles"] {opacity:.2;max-width:40px;left:10%;bottom:20%;}
section[data-role="livreor"] div:nth-of-type(2) img[alt="bulles"] {position:absolute;z-index:0;pointer-events:none;opacity:.2;max-width:110px;right:5%;bottom:5%;}
section[data-role="livreor"] div:last-of-type {z-index:2;font-family:'BankGothic';display:flex;}
section[data-role="livreor"] div:last-of-type a {display:flex;align-items:center;font-size:1.1rem;}
section[data-role="livreor"] div:last-of-type a:first-of-type {margin-right:5px;}

section[data-role="actualites"] {background:var(--bg-gray);}
section[data-role="actualites"] h2 {color:var(--chocolate);}
section[data-role="actualites"] h2::before, section[data-role="actualites"] h2::after {border-color:var(--txt-white);opacity:1;}
section[data-role="actualites"] .cell div {display:flex;flex-direction:row;max-width:80%;margin:0 auto;}
section[data-role="actualites"] figure {display:flex;flex:1 0 calc(50% - 40px);position:relative;margin:20px;}
section[data-role="actualites"] figcaption {position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:14%;height:20%;top:40%;left:43%;text-align:center;background:var(--bg-gray);opacity:.9;border:1px solid var(--bg-white);padding:10px;transition:all .5s ease-in-out;}
section[data-role="actualites"] [type="checkbox"]:checked + figcaption {width:90%;height:84%;top:8%;left:5%;padding:20px;}
section[data-role="actualites"] .cell div figcaption div {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;top:0;left:0;text-align:center;transition:all .5s ease-in-out;height:0;padding:0;overflow:hidden;font-size:.9rem;line-height:1.2;}
section[data-role="actualites"] [type="checkbox"] {display:none;}
section[data-role="actualites"] .cell div [type="checkbox"]:checked + figcaption div {height:100%;padding:20px;}
section[data-role="actualites"] .cell div [type="checkbox"]:checked + figcaption label {display:none;}
section[data-role="actualites"] .cell div figcaption label {font-size:2rem;cursor:pointer;}
section[data-role="actualites"] .cell div figcaption a {margin-top:10px;font-family:'Titillium';color:var(--chocolate);}
section[data-role="actualites"] .cell div figcaption a:hover {text-decoration:underline;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {font-family:'mrs_saint_delafield';color:var(--blue);text-align:center;margin-bottom:20px;}
h1::before, h1::after, h2::before, h2::after {content:'';width:180px;height:15px;border-top:3px solid var(--blue);border-left:3px solid var(--blue);border-right:3px solid var(--blue);display:block;margin:0 auto -10px auto;opacity:.25;}
h1::after, h2::after {border-top:0;border-bottom:3px solid var(--blue);margin:-10px auto 0 auto;}

h2.sous-titre {font-size:2rem;}
h2.sous-titre::before, h2.sous-titre::after {content:none;}

h1.sous-titre2 {font-size:2.5rem; font-family: 'BankGothic'}
h1.sous-titre2::before, h1.sous-titre2::after {content:none;}
h2.sous-titre2 {font-size:1.5rem; font-family: 'BankGothic'}
h2.sous-titre2::before, h2.sous-titre2::after {content:none;}

p, ul {font-size:1.0rem;line-height:1.6;color:var(--blue);text-align:justify;} /* Xav modif */
main ul {max-width:400px;margin:0px auto 20px 50px;display:inline-table;}
main p a, main ul a {color:var(--blue);text-decoration:underline;}
main p a:hover, main ul a:hover {color:var(--chocolate);text-decoration:none;}

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {font-family:'BankGothic';border-radius:5px;border:1px solid #fff;background:none;font-size:.8rem;}
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, textarea:focus {box-shadow:none;}

.button {font-family:'BankGothic';background:var(--chocolate);border:0;border-radius:10px;height:2.4375rem;margin:0 0 1rem;padding:0.5rem;color:var(--bg-white);cursor:pointer;margin:0 auto;display:flex;max-width:180px;align-items:center;justify-content:center;}
.button:hover {background:var(--blue);}

.text-right {text-align:right;}
.text-center {text-align:center;}

footer {padding-top:70px;}
footer .grid-container {max-width:60rem;}
footer img {text-align:center;display:block;margin:0 auto;max-width:225px;}
footer img.logo-partenaires {max-width:105px;}
footer .large-4:first-of-type img.logo-partenaires, footer .large-4:nth-of-type(3) img.logo-partenaires {height:80px;width:auto;max-width:none;}
footer .large-12 {padding:30px 0;}
footer .grid-container + .large-12 {padding:30px 0 15px 0;}
footer .grid-container + .large-12 p, footer .grid-container + .large-12 a {margin:0;color:#fff;}
footer p[itemprop="copyright"], footer p[itemprop="address"], footer p[itemprop="address"] + p {letter-spacing:1px;text-align: center;}

/* SPA */
body.spa {background:var(--bg-spa);color:var(--white);}
body.spa .slider::after {background-image:url('../img/spa-bottom-slider.png');}
body.spa .swiper-container p {color:var(--bg-spa);}
body.spa nav {background-image:url('../img/spa-bg-nav.png');}
body.spa .masked-element {filter:saturate(1) brightness(50%) contrast(200%) hue-rotate(239deg);}
body.spa h1, body.spa .h1, body.spa h2, body.spa .h2, body.spa h3, body.spa .h3, body.spa h4, body.spa .h4, body.spa h5, body.spa .h5, body.spa h6, body.spa .h6,  body.spa ul, body.spa .ul  {--blue:#fff;}
body.spa h1::before, body.spa h1::after, body.spa h2::before, body.spa h2::after {--blue:#0b5297;opacity:1;}
body.spa p {--blue:#fff; } /* modif Xav */
body.spa a {color:#fff;}
body.spa section[data-role="votre-projet"]::before, body.spa section[data-role="votre-projet"]::after {display:none;}
body.spa section[data-role="votre-projet"] div:first-of-type img[alt="mousse premier-plan"] {max-width:50%;bottom:0;left:0;z-index:2;animation:strech-vertical 2.5s infinite;transform-origin:bottom center;}
body.spa section[data-role="votre-projet"] div:first-of-type img[alt="mousse premier-plan 2"] {width:50%;bottom:0;left:59%;z-index:2;animation:strech-vertical 2.5s infinite;transform-origin:bottom center;}
body.spa section[data-role="votre-projet"] div:first-of-type img[alt="mousse arriere-plan"] {max-width:100%;bottom:0;left:0;z-index:0;animation:strech-vertical 3s infinite;transform-origin:bottom center;}
body.spa section[data-role="votre-projet"] div:first-of-type img[alt="femme spa"] {max-width:40%;bottom:0;left:5%;z-index:1;animation:rotate 2.5s infinite;transform-origin:bottom right;}
body.spa section[data-role="votre-projet"] div:first-of-type img[alt="homme spa"] {max-width:50%;bottom:0;left:40%;z-index:1;animation:rotate-men 2.5s infinite;transform-origin:bottom left;}
body.spa section[data-role="introduction"] {overflow:hidden;}
body.spa img.img-spa-top {position:relative;bottom:-40%;}
body.spa img.img-spa-bottom {position:relative;top:-40%;}
body.spa .legende {font-family:'mrs_saint_delafield';font-size:39px;color:var(--bg-white);}

/* body.spa section[data-role="infos"] ul {list-style-type:none;display:marker;flex-direction:row;text-align:center;align-items:center;justify-content:center;font-size:1rem;text-transform:none;margin:0;color:var(--bg-white);} */
/* spa-detail*/
[role="spadetail"] {justify-content:center;}
[role="spadetail"] figure {height:100%;}
[role="spadetail"] figcaption {font-size:1.2rem;font-family:'Titillium';text-align:center;font-weight: bold;}
[role="spadetail"] .cell {padding:0.9375rem;}
[role="spadetail"] a img {object-fit:cover;object-position:center;transition:all .25s ease-in-out;}
[role="spadetail"] a:hover img {transform:scale(1.02);}
[role="spadetail"] .legende a:hover  {color:var(--txt-white);border-bottom:3px solid var(--txt-white);}


/* NOT HOME */
body.not-home .slider.swiper-container {height:360px;}

/* GALLERIES */
[role="gallery"] {justify-content:center;}
[role="gallery"] figure {height:100%;}
[role="gallery"] figcaption {font-size:1.2rem;font-family:'Titillium';text-align:center;}
[role="gallery"] .cell {padding:0.9375rem;}
[role="gallery"] a img {height:100%;object-fit:cover;width:100%;object-position:center;transition:all .25s ease-in-out;}
[role="gallery"] a:hover img {transform:scale(1.03);}

section[data-role="actualites"], footer {overflow:hidden;}

/* Display element when visible */
[data-animation] {position:relative;}
[data-animation="left"] {left:20vw;opacity:0;transition:left 1s ease-in-out;}
[data-animation="left"].visible {left:0;opacity:1;}
[data-animation="right"] {right:20vw;opacity:0;transition:right 1s ease-in-out;}
[data-animation="right"].visible {right:0;opacity:1;}
[data-animation="top"] {top:20vh;opacity:0;transition:all 1s ease-in-out;}
[data-animation="top"].visible {top:0;opacity:1;}
[data-animation="bottom"] {bottom:20vh;opacity:0;transition:bottom 1s ease-in-out;}
[data-animation="bottom"].visible {bottom:0;opacity:1;}


@keyframes shake {
  10%, 90% {
    transform: translate3d(0, -1px, 0);
  }
  20%, 80% {
    transform: translate3d(0, 2px, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(0, -4px, 0);
  }
  40%, 60% {
    transform: translate3d(0, 4px, 0);
  }
}

@keyframes strech-vertical {
  10%, 90% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.1);
  }
}

@keyframes rotate {
  10%, 90% {
    transform:rotate(0);
  }
  50% {
    transform:rotate(5deg);
  }
}

@keyframes rotate-men {
  10%, 90% {
    transform:rotate(0);
  }
  50% {
    transform:rotate(-5deg);
  }
}

@media screen and (max-width:1024px){
  body.spa header label {border-color:#fff;}
  body.spa header label span {background:#fff;}
  body.spa nav {background:var(--blue);}


  section[data-role="votre-projet"] form input {width:100%;flex:1 0 100%;margin-right:0;margin-bottom:5px;}
  section[data-role="votre-projet"] form textarea {height:259px;margin-bottom:0;}
  section[data-role="votre-projet"] form input[type="submit"] {margin:.5rem 0 1rem;}
  section[data-role="actualites"] .cell div figcaption div {font-size:.5rem;}
  footer {background-size:150%;}
}
@media screen and (max-width:640px){
  .top img {margin:25px 0 15px 0;max-width:75%;}
  .swiper-container{z-index: -1;}
  .swiper-container p {font-size:32px;}
  .masked-element {clip-path:polygon(11% 41%, 11% 58%, 13% 58%, 13% 42%, 87% 42%, 87% 57%, 13% 57%, 12% 58%, 89% 58%, 89% 41%);}
  section[data-role="votre-projet"] div.large-5:first-of-type {height:50vh;}
  section[data-role="actualites"] .cell div {flex-direction:column;max-width:100%;}
  section[data-role="actualites"] figure {flex:1 0 100%;}
  footer {background-size:500%;}
  footer a[itemprop="telephone"] {white-space:nowrap;}
  h2 {font-size:2rem;}
  section[data-role="actualites"] .cell div figcaption div {font-size:.7rem;}
  section[data-role="votre-projet"] h2, section[data-role="votre-projet"] p, section[data-role="votre-projet"] a {text-align:center;}
  body.spa img.img-spa-top {bottom:auto;}
  body.spa img.img-spa-bottom {top:auto;}
  body.spa section[data-role="votre-projet"] {overflow:hidden;}
  body.not-home .slider.swiper-container {height:230px;}
  nav {background:#0b5297;position:relative;height: 100px;z-index: 0;}
  nav li {width: 100%;}
}
@media screen and (max-width:640px) and (max-height:580px){

}