/* DISPLAY NONE HIDDEN */
.offers {
  display: none!important;
}
.card-special {
  display:none;
}/*
.card-piron .treatment-content,
.card-liberte .treatment-content {
  display: none;
}*/
.togglable {
  position: relative;
  z-index: 1;
  display: none;
}
  .togglable {
    display: none;
  }

  .card .treatment footer * {
    color: inherit;
  }
  .card .treatment footer nav {
    display: flex;
  }
  .card .treatment footer a > * {
    display: block;
  }
.card .treatment footer .text {
    font-size: 12px;
    letter-spacing: -0.5px;
    font-weight: 600;
    display: block;
}
  .card .treatment footer a{
width: 50%;
    display: block;
    padding: 8px 8px;
    text-align: center;
}
  .card .treatment footer {
    overflow: hidden;
border-radius: 8px;
    color: #fff;
    margin-top: 8px;
    background: rgb(96 74 49);
    opacity: 0.5;
  }

  .card .treatment footer .text {
    font-size: 12px;
    
    line-height: 1.15;
    letter-spacing: 0;
    font-weight: 900;
    
      margin-top: 4px;
  }
.card .treatment footer .text span {
  display: block;
    font-weight: 400;
  font-size: 10px;
}
.card .treatment footer a:hover {
    background: rgb(0 0 0 / 15%);
}
/* Start */
:root {
  --vh: 1vh;
}

html body .full {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100 - 56px);
  padding: 16px;
}

body {
  font-family: "Roboto", "Arial", sans-serif;
  background: #d5be95;
  color: #604a31;
}

.container {padding-top: 56px;}
a:hover {color: #eba218;text-decoration: none;}
.icon {vertical-align: middle;}
address {font-style: normal;}

/* RESET ---------------------------------------------------------------- */
.s-header ul,
.s-bottom ul,
.s-footer ul,
main .center ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.treatment ul {
  margin: 0;
  padding: 0;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------*/
/* GLOBAL ---------------------------------------------------------------- */
.s-header a,
.s-bottom a,
.s-footer a {
  color: inherit;
}
:focus,
:active,
.s-header :hover,
.s-bottom :hover,
.s-footer :hover {
  text-decoration: none !important;
  outline: 0 !important;
}
.s-bottom,
.s-footer {
  font-family: "Roboto", "Montserrat";
}
.section {
  position: relative;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
}
figure img {
  border-radius: 16px;
}
.separator {
  width: 320px;
  height: 40px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../img/logo/es_logodots_1.svg);
  border: 0;
  margin: 8px auto;
  padding: 0;
}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- SITE HEADER --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.s-header {
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%; height: 56px;
  padding: 0 16px;
  background: rgb(213 190 149 / 95%);
  text-transform: uppercase;
}
.s-header.isScroll {
  background: rgb(218 201 171 / 98%);
}
.s-header .wrapper {
  position: relative;
}
.s-header .menu {
  z-index: 999;
  text-align: center;
  margin: 0 auto;
  max-width: 512px;
  font-weight: 800;
  color: rgb(83 61 38);
}
.s-header .branding {
  margin: 8px 0;
}
.s-header .nav {
  display: block;
}
.s-header .menu > ul {
  display: flex;
  justify-content: center;
}
.s-header .nav li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.s-header .nav-item > .text {
  font-size: 14px;
}
.s-header .tel .nav-item {
  padding-top: 15.5px;
  padding-bottom: 15.5px;
}
.s-header .nav-item {
  position: relative;
  display: block;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 8px;
  padding-right: 8px;
  color: #6c5e4f;
}
.s-header .menu li > .nav-item:before {
  font-family: "FontAwesome";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  margin-left: -8px;
  opacity: 0.33;
  line-height: 1.15;
  display: none;
}
.s-header .menu > ul > li:nth-child(1) > .nav-item:before {content: "\f015";}
.s-header .menu > ul > li:nth-child(2) > .nav-item:before {content: "\f3c5";}
.s-header .menu > ul > li:nth-child(4) > .nav-item:before {content: "\e4c4";}
.s-header .menu > ul > li:nth-child(3) > .nav-item:before {content: "\f5bb";}
.s-header .branding,
.s-header .direct-contact {
  position: absolute;
  top: 0;
}
.s-header .menu li:after {
  position: absolute;
  content: "";
  bottom: 8px;
  width: 10px;
  height: 5px;
  border-radius: 16px;
  display: inline-block;
  left: 50%;
  margin-left: -5px;
  background: #604a31;
  opacity: 0;
}
.s-header .menu li.active:after {
  opacity: 1;
}
.s-header .branding img {
  height: 40px;
  width: 48px;
}
.s-header .branding {
  left: 0;
}
.s-header .direct-contact {
  right: 0;
  font-size: 1.5em;
  display: flex;
  gap: 8px;
}
.s-header li.estore > .nav-item {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
}
.s-header .nav-item .icon {
  width: 32px;
  text-align: center;
}
.estore .text span {
  display: block;
  letter-spacing: 2px;
  margin-top: -1.5px;
  position: relative;
  line-height: 1;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- SITE BOTTOM --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.s-bottom {
  position: relative;
  overflow-x: clip;
  padding: 82px 0 16px 0;
  background: rgb(83 61 38 / 90%);
  color: rgb(214 189 144 / 75%);
}
.s-bottom .wrapper {max-width: 1080px;}
.s-bottom > .grid {display: flex;}
.s-bottom .col {padding: 0 8px;}
.s-bottom .nav {width: 25%;}
.s-bottom .centers {width: 50%;}
.s-bottom .contact {width: 25%;}

.s-bottom a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-bottom a:hover {
  color: #eba218;
}
.s-bottom:before,
.s-bottom:after {
  z-index: 0;
  position: absolute;
  content: "";
  right: 0;
  width: 240%; height: 60px;
  background-size: cover; background-repeat: no-repeat; background-position: 0 60%;
}
.s-bottom:after {
  background-image: url(../img/misc/bottom_brown.svg);
  top: -60px;
}
.s-bottom .nav li a:before,
.s-bottom .about li:before {
  position: relative;
  content: "";
  display: inline-block;
  width: 10px; height: 5px;
  top: -2px;
  margin-left: 11px; margin-right: 11px;
  border: 1px solid;
  border-radius: 16px;
}

.s-bottom h4 {
  color: #eba218;
  display: block;
  margin-bottom: 8px;
}
.s-bottom h4 .icon {
  width: 32px;
  font-size: 20px;
}
.s-bottom h4 .text {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
}
.s-bottom li {
  position: relative;
}
.s-bottom .contact li .icon {
  width: 32px;
  font-size: 1.5em;
}
.s-bottom .contact li + li {
  margin-top: 8px;
}
.s-bottom .nav li + li {
  margin-top: 4px;
}
.s-bottom .about li.title {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 800;
  color: #d3622e;
}
.s-bottom .about li.title:before {
  background: currentColor;
}
.s-bottom .about > div ul {
  font-size: 16px;
}
.s-bottom .about {
  display: block!important;
  border: 4px solid #d3622e;
  margin-bottom: 32px;
  padding: 16px;
  border-radius: 16px;
  position: relative;
}
.s-bottom .about h4 {
  position: relative;
  display: block;
  width: 200px;
  top: 50%; left: 0;
  margin: -36px auto 0px auto;
  padding: 0;
  line-height: 40px;
  background: #604a31;
  text-align: center;
  color: #d3622e;
}
.s-bottom .about > div {
  display: flex;
}
.s-bottom .about ul:first-child {
  width: 40%;
}
.s-bottom .about ul:last-child {
  width: 60%;
}

.s-bottom address > a:before,
.s-bottom address > a:after {
  font-family: fontawesome;
  display: block;
  position: absolute;
  font-size: 16px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  top: 50%;
  margin-top: -10px;
}

.s-bottom address > a:before {content: "\f5bb"; left: 10px;}
.s-bottom address.store > a:before {content: "\f291";}
.s-bottom address > a:after {content: "\f061"; right: 10px;}

.s-bottom .centers li + li {
  margin-top: 2px;
}
.s-bottom address > a {
  display: block;
  border: 3px solid rgb(213 190 149 / 53%);
  border-radius: 8px;
  padding: 4px 40px;
  line-height: 1.15;
}
.s-bottom address > a:after {filter: opacity(0); transform: scale(1) translateX(-100%);}
.s-bottom address > a:hover:after {filter: opacity(1); transform: scale(1) translateX(0);}

.s-bottom address > a > * {
  display: block;
  margin: 0;
}
.s-bottom address > a > *:nth-child(2) {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
}
/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- SITE FOOTER --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.s-footer {
  padding: 16px 0 32px 0;
  background: #604a31;
  text-align: center;
  font-weight: 100;
  color: rgb(235 162 24 / 90%);
}
.s-footer .wrapper > * {margin: 0;}
.s-footer a {color: inherit;}
.s-footer a:hover {color: #eba218;}
.s-footer .conceptor {font-size: 10px; text-transform: uppercase; font-weight: 600;}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- SECTION ESTORE --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.goto-estore {
    position: relative;
    margin: 8px auto 0 auto;
    width: 100%;
    display: flex;
    text-align: center;
    color: rgb(255 255 255 / 75%);
    border-radius: 32px;
    padding: 16px;
    max-width: 1080px;
    background: rgb(211, 99, 46);
    background: linear-gradient( 90deg, rgba(211, 99, 46, 1) 0%, rgba(235, 162, 24, 1) 100% );
    font-family: montserrat;
    margin-bottom: -66px;
    z-index: 1;
    border: 8px solid #d5be95;
}
.goto-estore .text {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1em;
}
.goto-estore > a {
  color: inherit;
  width: 33.334%;
  padding: 8px;
  display: block;
  border-radius: 16px;
}
.goto-estore > a:hover {
  background: rgb(0 0 0 / 05%);
}
.goto-estore > a.discover {
    border-radius: 16px;
    border: 2px dashed;
    color: #604a31;
}
.goto-estore > a:after {
  font-family: fontawesome;
  display: block;
  margin-top: 4px;
  content: "\f061";
  filter: opacity(0.5);
  text-align: center;
}
.goto-estore > a:hover *,
.goto-estore > a:hover:after {
  filter: opacity(1);
}
.goto-estore .icon {
  display: block;
  font-size: 2.5em;
  margin-bottom: 8px;
  filter: opacity(0.5);
}
.goto-estore .text > .text-online {
  display: block;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 400;
}
.goto-estore * {
  text-decoration: none;
}

.goto-estore .text-action {
  display: block;
}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- INDEX SPLASH --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */

.splash .wrapper {
  position: relative;
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 32px;
  text-align: center;
  color: white;
}
.splash .wrapper:after {
  z-index: -9;
  position: absolute;
  display: block;
  content: "";
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 32px;
  background: url(../img/photos/splash.jpg) 50% 50% no-repeat;
  background-size: cover;
  filter: grayscale(0.1) opacity(0.8) contrast(0.9) brightness(0.9) sepia(0.1) saturate(0.9);
  width: 100%; height: 100%
}
section .branding:after {
    z-index: -1;
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    width: 100%;
    height: 0;
    box-shadow: 0 32px 80px 40px #000000;
    filter: opacity(0.5);
}
.splash nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
}
h1, h2, h3, h4 {
  margin: 0;
}
.splash h1 {
  font-size: 1.5em;
  margin-top: 8px;
  /*margin-bottom: 4px;
  
  background: rgb(0 0 0 / 52%);
    border-radius: 32px;
     padding: 4px 16px 6px 16px; */
    color: #ffffff;
    font-weight: 900;
    font-family: 'Roboto Slab';
    /*text-shadow: 0 0px 8px rgb(96 74 49);*/
  opacity: 0.9;
}
.splash .address {
  font-weight: 300;
  font-size: 1.25em;
  color: #b9663b;
  margin: 0;
}
.splash h1 .text {
  font-size: 1.5em;
}
.splash .branding {
  position: relative;
}
.splash .branding img {
  display: block;
  max-width: 100%;
  width: 521px;
}
.splash nav > a {
  z-index: 1;
  overflow: hidden;
  color: #ffffff;
  display: block;
  padding: 8px 16px;
  margin: 0 auto;
  max-width: 200px;
  width: 100%;
  position: relative;
  text-transform: uppercase;
  font-weight: 800;
}
.splash nav > a > .icon {
  display: block;
  margin: 0 auto 8px auto;
  width: 56px;
  line-height: 48px;
  border-radius: 56px;
  border: 4px solid;
  font-size: 1.5em;
}
.splash nav > a:hover {
  color: #ffffff;
}
.splash nav > a .text {
  font-size: 14px;
}
.goto-discover > * {
  color: #ffffff;
}
a.goto-discover:hover > * {
  color: #eba218;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
-- INDEX DISCOVER --
----------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------- */
#discover {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1rem 0 1rem;
}
.discover .title {
  font-family: "Great Vibes", cursive;
  margin: 0 0 8px 0;
  font-weight: 400;
  text-align: center;
  color: #126c58;
  font-weight: 800;
  font-family: 'Roboto Slab';
  letter-spacing: -0.5px;
}
.discover .title:before {
  content: "";
  display: block;
  width: 160px; height: 40px;
  margin: 8px auto;
  background-image: url(../img/logo/logo4.svg); background-repeat: no-repeat;
  opacity: 0.25 
}
.discover h1.title:before {
  display: none;
}
.discover .title:after {
  content: "";
  width: 160px;
  display: block;
  border-top: 1px solid #604a31;
  margin: 8px auto;
  opacity: 0.25;
}
.discover .title > .text {
  font-size: 2em;
}
.discover figure {
  display: flex;
  margin-bottom: 32px;
}
.discover figure picture {
  display: inline-block;
  width: 33.334%;
}
.discover figure img {
  height: 240px;
  object-fit: cover;
  border-radius: 64px;
  width: 100%;
}
.discover > p {
  font-size: 20px;
  text-align: center;
  font-family: roboto slab;
}
figure > * {
  margin: 0 8px;
}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- TREATMENTS --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: 32px;
  box-shadow: 0 0px 8px -4px rgb(255 255 255 / 50%), inset 0 0px 8px 0px hsl(0deg 0% 0% / 25%);
}

.card:before {
      position: absolute;
    font-size: 48px;
    top: 9px;
    color: #d5be95;
    left: 50%;
    margin-left: -24px;
    opacity: 0.5;
    content: "\f5bb";
  display: block;
   font-family: "FontAwesome";
}
.card + .card {
  margin-top: 16px;
}
.card > .wrapper {
  max-width: 1200px;
  padding: 32px;
  margin: 0 auto;
}
.card .col {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Column Piron */
.card-piron .col {width: 50%;}
.card-piron .col-n1 {padding-right: 4.5px;}
.card-piron .col-n2 {padding-left: 4.5px;}
/* Column Liberte */
.card-liberte .col {width: 33.334%;}
.card-liberte .col-n1 {padding-right: 8px;}
.card-liberte .col-n2 {padding-left: 8px; padding-right: 8px;}
.card-liberte .col-n3 {padding-left: 8px;}

.card-liberte .col-n2:before,
.card-liberte .col-n3:before{
  position: absolute;
  display: block;
  content: "";
  width: 1px; height: 100%;
  top: 0; left: 0;
  opacity: 0.05;
  border-left: 2px dashed;
}
.card .section-content .treatments {
  display: flex;
}
.card .section-info,
.card .section-content {
  display: block;
  position: relative;
  width: 100%; 
}
.card .section-info {
  position: sticky;
  top: 56px;
  padding: 0;
  display: flex;
  color: #dac9ab;
  justify-content: space-between;
}
.card .section-info > * {
  margin: 0;
  width: 50%;
}

.card .section-content {
  padding: 16px 32px 16px 32px;
  box-shadow: 0 0px 8px -4px rgb(0 0 0 / 50%), inset 0 0px 8px 2px rgb(213 190 149);
  border-radius: 16px;
}

/* Piron */
.card-piron {background: #126c58; color: rgb(18,108,88);}
.card-piron > .wrapper:before {background-image: url(../img/photos/piron/balneo.jpg);}
.card-piron .section-content {background: #c3ad86;}
/* Liberte */
.card-liberte {background: #604a31;}
.card-liberte > .wrapper:before {background-image: url(../img/photos/liberte/repos3.jpg);}
.card-liberte .section-content {background: rgb(195,173,134);}

.card .treatment + .treatment {
  margin-top: 8px;
}

.card .col .img {
  position: relative;
  flex-grow: 1;
  border-radius: 8px;
  margin-top: 8px;
}
.card .col .img:after {
  height: calc(100% - 8px);
  content: "";
  border-radius: 8px;
  background-position: 50% 50%;
  display: block;
  background-size: cover;
  filter: opacity(0.75) contrast(0.9) brightness(0.9) sepia(0.1) saturate(0.75);
}

.card-liberte .col.col-n1 .img:after {background-image: url(../img/photos/liberte/misc1.jpg);}
.card-liberte .col.col-n2 .img:after {background-image: url(../img/photos/piron/sauna3.jpg);}
.card-liberte .col.col-n3 .img:after {background-image: url(../img/photos/liberte/misc3.jpg);}
.card-piron .col.col-n1 .img:after {background-image: url(../img/photos/piron/balneo.jpg);}
.card-piron .col.col-n2 .img:after {background-image: url(../img/photos/piron/repos1.jpg);}

.treatment {
  cursor: pointer;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: "Roboto Slab", serif;
}

.treatment h1 {
  margin: 0;
  font-weight: 900;
}
/* Treatment info */
.treatment .info {
  margin-top: 2px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  opacity: 0.8;
}
.treatment-header > * {position: relative; z-index: 1;}
.treatments .info li {display: inline-block;}
.treatment .price {float: right;}
.treatment .price .icon {display: none;}

.treatment-content {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.9;
  letter-spacing: -0.25px;
}
.treatment-content ul {
  position: relative;
  margin-top: 4px;
  padding: 0 0 0 7px;
  list-style: none;
}
.treatment-content ul li:before {
  position: relative;
  display: inline-block;
  content: "";
  width: 4px; height: 4px;
  top: -2px;
  margin-left: 0px; margin-right: 4px;
  border: 1px solid;
  border-radius: 16px;
  background: currentColor;
}

.treatment-content li {
  line-height: 1.15;
}

/* Treatment category */
.treatment-category {
  padding: 4px;
  margin-bottom: 8px;
  font-family: "Roboto Slab";
  text-align: center;
  position: sticky;
  top: 56px;
  background: #c3ad86;
  z-index: 9;
}
* + .treatment-category {
  margin-top: 8px;
}
.treatment-category h2 {
  font-size: 20px;
  font-weight: 900;
}
.treatment-category > * {
  margin: 0;
  padding: 0;
}
.treatment-category > p {
  opacity: 0.5;
}





.treatment:before,
.treatment:after,
.treatment > header:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 8px;
  z-index: 0;
}

.treatment:before {
  width: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  height: 100%;
  box-shadow: inset 0 0 1px 2px #d5be95, 0 0 0px 2px currentColor;
  filter: opacity(0);
}
.treatment:before {
  transition-property: filter;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}
.treatment[data-open="true"]:before {filter: opacity(1);}


.treatment:after {
  box-shadow: inset 0 0 80px -40px currentColor;
  filter: opacity(0.5);
}

.treatment:after {
  transition-property: filter;
  transition-timing-function: ease-in-out;
  transition-duration: 0.25s;
}
.treatment:hover:after {filter: opacity(0.75);}
.treatment[data-open="true"]:after {filter: opacity(1);}

/* STATE */
.treatment.is-popular > header:before,
.treatment.is-limited > header:before {
    width: 100%;
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -12px;
    line-height: 12px;
    max-width: 160px;
    left: 50%;
    margin-left: -80px;
    color: #dac8ab;
    box-shadow: 0 0px 0px 2px #c3ad86;
}
.treatment.is-popular > header:before {
   content: "Le choix des sens";
    background: #906109;
}
.treatment.is-limited > header:before {
   content: "Offre du moment";
    background: #bb5628;
}

.treatment + .treatment.is-popular,
.treatment + .treatment.is-limited {
  margin-top: 10px;
}


/*
.treatment[data-open="true"]:after {
  opacity: 1;
}
*/

.treatment.is-limited {color: #bb5628;}
.treatment.gold, .treatment.is-popular {color: #906108;}
.special .treatment-category {color: #bb5628;}
.special .treatment {color: #bb5628;}


.card-piron .treatment  .treatment-action {background: #126c58;}
body .treatment.is-popular  .treatment-action {background: #906109;}
body .treatment.is-limited  .treatment-action {background: #bb5628;}

/* Section Info */
.section-info {
  margin-bottom: 8px;
}
.section-info * {
  color: inherit;
  margin: 0;
}
.section-info h1,
.section-info h2 {
  font-family: 'Roboto Slab';
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}
.section-info > div > p,
.section-info > div > address {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  font-weight: 900;
  font-family: roboto slab;
}
.section-info .card-center {
  text-align: right;
  padding-right: 48px;
}
.section-info .card-title {
  padding-left: 48px;
}
.section-info .card-title .icon {
  position: absolute;
  width: 48px;
  font-size: 20px;
  top: 50%;
  margin-top: -12px;
  text-align: center;
  left: 0;
  opacity: 0.75;
}
.section-info .card-center h2 .icon {
  position: absolute;
  width: 48px;
  font-size: 20px;
  top: 50%;
  margin-top: -12px;
  text-align: center;
  opacity: 0.75;
}

.tips {
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    text-align: center;
    font-weight: 900;
    font-family: 'Roboto Slab';
    opacity: 0.75;
    letter-spacing: 0.25px;

}

/* ---------------------------------------------------------------------------------
------------------------------------------------------------------------------------
-- PAGE: ADDRESS / ACCESS --
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------- */
.page-home main {padding: 0;}
.page-home .discover {padding: 16px;}
.page-home .splash {padding: 16px;}
.page-centers main, .page-treatments main {padding: 16px;}

main#access {
  display: flex;
}

main .center a {
  color: inherit;
  text-decoration: none;
}
main .center {
  padding: 16px 16px 48px 16px;
  width: 33.33%;
  padding-bottom: 71px !important;
  text-align: center;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  color: #d5be95;
  position: relative;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
main .center:after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  border-radius: 32px;
  filter: grayscale(0.5) opacity(0.75) contrast(0.5) brightness(0.5) sepia(0.9) saturate(0.75);
  transform: scale(1.1);
  background-repeat: no-repeat;
}
main .center:nth-child(1):after {background-image: url(../img/photos/liberte/repos3.jpg);}
main .center:nth-child(2):after {background-image: url(../img/photos/liberte/misc3.jpg);}
main .center:nth-child(3):after {background-image: url(../img/photos/piron/balneo.jpg);}

main .center h1 {
  font-family: Roboto Slab;
  font-size: 1em;
  color: #dac9ab;
  font-size: 1.25em;
  font-weight: 800!important;
}

main .center.active,
main .center:hover {
  width: 50%;
 color: #dac9ab;
}
main .center.active:after,
main .center:hover:after {
  filter: grayscale(0) opacity(0.8) contrast(0.8) brightness(0.8) sepia(0) saturate(0.8);
  transform: scale(1);
}

main .center:nth-child(2) {
  margin: 0 16px;
}
main .center .address {
  border: 4px solid #d5be95;
    border-radius: 48px;
    padding: 4px;
   /* box-shadow: inset 0 0 20px -10px #d5be95;*/
    max-width: 240px;
    margin: 0 auto;
  font-size: 12px;
  
}

main .center .address span {
display: block;
    font-size: 10px;
    opacity: 0.75;
}
main .center address > * {
  font-weight: 800;
  text-transform: uppercase;
}
main .center header * {
  margin-bottom: 0;
}
main .center address h2 {
  font-size: 16px;
  text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 4px;
}

main .center address .address {
  font-size: 14px;
  text-transform: uppercase;
}
span.day {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  width: 32px;
  display: inline-block;
}




main .center header,
main .center .content,
main .center footer {
  z-index: 9;
}
main .center header {
  position: relative;
  width: 100%;
}
main .center .content {
  position: relative;
  padding: 16px;
}
main .center footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
main .center .content h3 {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 900;
}
main .center .content ul {
  font-size: 12px;
}
/* CENTER FOOTER */

main .center footer ul {
  display: flex;
  padding: 32px;
}
main .center footer li {
  display: inline-block;
  width: 33.334%;
}
main .center footer li > a {
  display: block;
  padding: 4px;
  font-size: 2em;
  font-weight: 600;
}
main .center footer li .icon {
  display: block;
}
main .center footer li .text {
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.s-bottom .center > a > *,
main .center footer li .text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main .center footer li a:hover {
  color: #eba218;
}

/* a trier */
.s-header .menu > ul > li:nth-child(4) {
  display: none!important;
}
.treatment button {
  display: none!important;
}
footer .centers {
  width: 50% !important;
}

.goto-estore .discover{
display: flex;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
    color: #604a31;
    text-align: center;
    border-radius: 16px;
    width: 33.334%;
    padding: 8px;
    border: 4px solid #604a31;
}

.goto-estore .discover .text-new{
 font-weight: 100;
}
.goto-estore .discover h3{
    font-weight: 900;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ANIMATE ---------------------------------------------------------------- */

/* Animate: Menu */

#toggleMenu:checked ~ .container .s-header .menu {
  opacity: 1;
  transform: translateX(0);
}
.menu {
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

/* Animate: Centers */
.center,
.center:before,
.center:after {
  transition-property: width, height, filter, transform;
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
}

.splash,
.splash .wrapper,
.splash :before,
.splash :after {
  transition-property: transform, background, height, max-height;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE ---------------------------------------------------------------- */
.toggleMenu {
  display: none;
  line-height: 40px;
  padding: 0 0.5rem;
  width: 56px;
  margin: 8px 0;
  position: relative;
  float: right;
  text-align: center;
  font-size: 24px;
}
.s-header .toggleMenu:hover,
#toggleMenu:checked ~ .container .s-header .toggleMenu {
  color: #126c58;
}
.s-header .active .nav-item,
.s-header .nav-item:hover {
  color: rgb(83 61 38 / 100%);
}


main .center .content {
    display: none;
}

@media (max-width: 55rem) {
  


  .card:before {display: none;}
  .section-info > div > p,
  .section-info > div > address {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.9;
}
  
}

@media (max-width: 50rem) {
    .goto-estore .discover{

      width: 100%;
    display: block;
}
  /* Responsive: Global */
  .card .wrapper,
  .card .col,
  .treatments,
  .treatment {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Responsive: Site Header */
  .s-header {padding-right: 0;}
  
  .s-header .menu {
    opacity: 0;
    display: flex; justify-content: center; align-items: center;
    width: 100%; max-width: 100%;
    position: fixed;
    top: 56px;
    right: 0; bottom: 0; left: 0;
    background: rgb(213 190 149 / 95%);
    text-align: center;
    font-size: 1.25em;
    transform: translateX(100%);
  }
  
  .toggleMenu {display: block;}
  .s-header .menu > ul, .s-header .menu > ul > li {display: block;}
  .s-header .menu > ul > li + li {margin-top: 8px;}
  .s-header .nav-item {padding: 8px;}
  .s-header .nav-item > .text {font-size: 20px;}
  .s-header .direct-contact {right: 56px;}
  
  .s-header .menu li > .nav-item:before {
    display: block;
    position: relative;
    width: 32px;
    margin: 0 auto 4px auto;
    top: 0; left: 0;
    text-align: center;
  }
  
  .s-header .menu li:after {display: none !important;}
  
  /* Responsive: Site Bottom */
  .s-bottom {
    padding-left: 8px;
    padding-right: 8px;
  }
  .s-bottom .nav ul {
    height: 84px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  }
  .s-bottom .nav ul li {
    width: 50%;
    line-height: 28px;
    margin: 0;
  }
  .s-bottom .about {
    padding: 0 16px 16px 16px;
  }
  .s-bottom .about > div {
    display: block;
  }
  .s-bottom .about ul {
    width: 100%!important;
  }
  .s-bottom .about > div > * + * {
    margin-top: 8px;
  }
  .s-bottom address > a > *:nth-child(2) {
    font-size: 14px;
  }
  .s-bottom .contact ul {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: calc( 100% + 4px );
    margin-left: -2px;
  }
   .s-bottom .contact li {
     width: 20%;
    padding: 2px;
  }
  .s-bottom .contact li + li {
    margin-top: 0;
  }
  .s-bottom .contact li span {
    display: none;
  }
  .s-bottom .contact a {
    padding: 16px 8px;
    border-radius: 16px;
    border: 3px solid;
  }
  .s-bottom .wrapper {display: block!important; padding: 16px;}
  .s-bottom .grid {padding: 0;}
  .s-bottom .about {margin-bottom: 16px;}
  .goto-estore {margin-bottom: -32px;}
  .card .section-info{display: block; text-align: center;}
  .card .section-info>*{display: block; width: 100%; padding: 0; text-align: center;}
  .card .section-info .icon{display: none;}
  /* Responsive: Footer */
  .s-bottom * .col {width: 100%!important;}
  .s-bottom * .col + .col {margin-top: 16px;}
  
  .s-bottom {
    padding-top: 56px;
}
  
/* RESPONSIVE: INDEX */
  /* Responsive: Index Discover */
  .discover figure {display: block; margin-bottom: 0;}
  .discover figure > * + * {margin-top: 8px;}
  .discover figure picture {width: 100%; margin: 0; padding: 0;}
  .discover figure img {height: 160px; border-radius: 32px;}
  .discover figure img:hover, .discover figure img:active, .discover figure img:focus {height: 320px;}
  .discover figure img {
    transition-property: height;
    transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
  }
  
/* RESPONSIVE: TREATMENTS */
  /* Responsive: Card */
  .card {border-radius: 22px;}
  .card .col {padding: 0;}
  .card .col:before {display: none;}
  
  /* Responsive: Treatment */
  .treatment + .treatment {margin-top: 4px;}
  .treatment-header .info > * {display: inline; float: inherit;}
  .treatment .price {float: right !important;}
  
  .page-treatments main {
    padding: 0 4px;
}
  .card > .wrapper {padding: 8px;}
  .card .section-content {padding: 16px;}
  
  
 .treatment-category {margin: 8px 0!important;}
  
  .card-piron .tips {
    margin-bottom: 12px;
  }
  /*.section-title {margin: 0 auto;}*/
  
  .card-special .section-title,
  .card-piron .section-title {
    margin-bottom: 8px!important;
}
  .card-special {
    margin-bottom: 16px;
}
  .separator {
    display: none!important;
  }
  
/*  main .wrapper,*/

  /* Responsive: Page Adresses */
  main#access {
    display: flex;
    flex-direction: column;
  }
  main#access > section {
    width: 100%;
    height: 33.334%;
    margin: 0;
  }
  main#access > section:nth-child(2) {
    margin: 8px 0;
  }

  /* Responsive: eStore */
  .goto-estore {
    display: block;
    text-align: left;
  }
  .goto-estore > a {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .goto-estore > a:after {
    min-width: 60px;
    margin: 0;
    line-height: 48px;
  }
  .goto-estore .text {
    width: 100%;
    padding: 0 8px;
  }
  .goto-estore .icon {
    margin: 0;
    min-width: 60px;
  }
  .goto-estore .text-action {
    display: inline;
  }
  
  main > .center:focus, main > .center:target, main > .center:hover {
    width: 100%;
    height: 50%!important;
  }
}
/*.full {
  min-height: 100vh;
  height: calc(100vh - 56px);
}*/
/*
.splash nav .icon,
.splash nav .icon:before {
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}
.splash nav a > .icon {
  overflow: hidden;
}
.splash nav a > .icon:before {
  display: block;
}
.splash nav a:hover > .icon:before {
 animation-duration: 1s;
  animation-name: slidein;
}
@keyframes slidein {
  0% {transform: translateY(0);}
  50% {transform: translateY(100%);}
  50.1% {transform: translateY(-100%);}
  100% {}
}*/