@import "partials/vars", "layout/grid",
"partials/links_hover.scss", "layout/header", "layout/header_pro", "layout/gallery", "blocks/larg_title", "layout/module_breadcrumb", "blocks/module_intro", "forms/buttons", "forms/inputs", "layout/footer", "~tiny-slider/dist/tiny-slider", "blocks/slides";
@import "~leaflet/dist/leaflet.css";

body {
  margin: 0;
  padding: 0;
  font-family: $Jost !important;

  a {
    color: black;
    text-decoration: none;
    margin-bottom: 0px;
  }

  p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;


  }
  *:focus {
    outline: none;
   }
  [crop-text] {
    display: none;
  }

  #readLess,
  [id^="readmore_"] {
    cursor: pointer;
    white-space: nowrap;
  }



  @media (min-width: 992px) {
    [crop-text] {
      display: block !important;
    }

    .shortText,
    #readLess {
      display: none !important;
    }
  }

}

//  page home


// block1_ section 1
.intro-area {
  .image_intro {
    img {
      // height: auto;
      height: 100%;
      max-width: 100%;
      min-height: 487px;
      width: 100vw;
      object-fit: cover;
      max-height: 746px;
    }
  }

  .text_intro {
    color: #fff;
    left: 50%;
    position: absolute;
    text-align: center;
    top: calc(50% - 96px);
    transform: translate(-50%, -50%);
    width: calc(100% - 12px);

    .text {
      .title {
        font-family: $Jost;
        font-weight: 300;
        @include clamp("font-size", 20px, 2.8vw, 36px);
        text-align: center;
        text-transform: uppercase;
      }

      .subtitle {
        font-family: $Playfair;
        font-weight: 400;
        @include clamp("font-size", 36px, 2.8vw, 54px);
        line-height: 133%;
        text-align: center;
        text-transform: uppercase;
      }

      .scroll {
        position: absolute;
        text-align: center;
        width: 100%;
        cursor: pointer;

        #scroll-down {
          opacity: 1;
          transition: all .5s ease-in 3s;
        }

        #scroll-down {
          position: absolute;
          @include clamp("bottom", -141%, 2.8vw, -241%);
          left: 50%;
          margin-left: -17px;
          display: block;
          z-index: 2;
          animation: bounce 2s infinite 2s;
          transition: all .2s ease-in;
        }

        #scroll-down::after {
          position: absolute;
          top: calc(50% - -270px);
          left: calc(47% - 6px);
          display: block;
          width: 36px;
          height: 46px;
          content: "";
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none' viewBox='0 0 46 46'%3e%3cpath fill='%23fff' d='M22.758 45.778A.758.758 0 0 1 22 45.02V34.758a.758.758 0 0 1 1.517 0V45a.758.758 0 0 1-.759.778Z'/%3e%3cpath fill='%23fff' d='M22.914 45.495a.758.758 0 0 1-.505-.192l-4.55-3.984a.76.76 0 0 1 1.011-1.137l4.55 3.983a.753.753 0 0 1-.187 1.261.769.769 0 0 1-.319.069Z'/%3e%3cpath fill='%23fff' d='M22.914 45.495a.758.758 0 0 1-.505-1.33l4.549-3.983a.76.76 0 1 1 1.011 1.137l-4.55 3.983a.744.744 0 0 1-.505.193Zm2.796-14.796h-5.596a7.648 7.648 0 0 1-7.638-7.638V8.4A7.647 7.647 0 0 1 20.114.738h5.595a7.643 7.643 0 0 1 7.654 7.638v14.685a7.64 7.64 0 0 1-7.654 7.638ZM20.113 2.255a6.127 6.127 0 0 0-6.122 6.121v14.685a6.132 6.132 0 0 0 6.122 6.121h5.595a6.126 6.126 0 0 0 6.137-6.121V8.4a6.128 6.128 0 0 0-6.137-6.146h-5.595Z'/%3e%3cpath fill='%23fff' d='M22.914 13.33a.758.758 0 0 1-.758-.758V8.765a.758.758 0 0 1 1.516 0v3.807a.758.758 0 0 1-.758.758Z'/%3e%3c/svg%3e ");

        }

        @keyframes bounce {

          0%,
          100%,
          20%,
          50%,
          80% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
          }

          40% {
            -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
          }

          60% {
            -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
          }
        }


      }

      .scroll::before {
        background: #fff;
        content: "";
        @include clamp("height", 130px, 14.7vw, 240px);
        left: 50%;
        position: absolute;
        top: calc(100% + 1.5rem);
        width: 1px;
      }

    }

      @media  (max-width: 992px) {
       
        top: 25%;
        #scroll-down::after {
          top: calc(50% - -173px) !important;
        }

        #scroll-down::after {
          display: none !important;
        }
      }

    @media screen and(max-width:414px) {
      border-top: 1px solid #D9D9D970;
      padding-top: 24px;
    }

    // @media only screen and (max-width: 375px) {
    //   top: 32%;
    // }
  }

}


// Start section_1
.container.acc_section_1 {
  max-width: 1441px;
  margin: auto;
  padding: 0;
  width: calc(100% - 31px);

  .block_content {
    display: flex;
    padding: 75px 0px 38px;

    .text_discr {
      width: 50%;
      // /
      padding-right: 61px;
      max-width: 684px;
      @media only screen and (max-width: 992px) {
       padding-right: 0;
      }
      .litle_title {
        font-family: $Jost;
        font-weight: 400;
        font-size: 20px;
        line-height: 29px;
        text-transform: uppercase;
        color: #A6A6A6;
      }

      .larg_title {
        font-family: $Playfair;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        text-transform: uppercase;
        color: #7E2110;
        max-width: 569px;

      }

      .dis {
        font-family: $Jost;
        font-weight: 400;
        font-size: 16px;
        line-height: 23px;
        margin-top: 11px;
      }

    }

    .video {
      width: 50%;
      max-height: 379px;
      height: 379px;
      position: relative;


      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 3;
        max-height: 379px;
        height: 100%;

      }

      @media only screen and (max-width: 768px) {
        height: 201px;

        &::before {
          height: 201px;
        }

      }

      .video_pres {
        margin: 0 auto;
        margin-bottom: 56px;
        position: relative;
        overflow: hidden;
        height: 379px;

        video {
          width: 100%;
          position: absolute;
        }

        .img_bg {
          position: absolute;
          transition: .3s;
          width: 100%;
          object-fit: cover;
          z-index: 2;
        }

        .iconply_video {
          cursor: pointer;
        }

        @media only screen and (max-width: 992px) {

          .img_bg {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          video {
            width: 100%;
            height: 201px;
          }

          .iconply_video {
            width: 64px;
            height: 64px;
          }
        }

        @media only screen and (max-width: 768px) {
          height: 201px;

          video {
            height: 201px;
          }

          .iconply_video {
            width: 64px;
            height: 64px;
          }
        }

        .video-container .center-button {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          z-index: 10;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
        }
      }


    }
  }

  @media only screen and (max-width:992px) {
    .block_content {
      padding: 17px 0px 37px;
      flex-wrap: wrap;

      .text_discr {
        width: 100%;

        .litle_title {
          font-size: 14px;
        }

        .larg_title {
          font-size: 20px;
          line-height: 27px;
        }

        .dis {
          padding-bottom: 18px;
          padding-top: 8px;
        }
      }

      .video {
        width: 100%;
      }
    }
  }
}

// END

// start section2 
.section2_container {
  .slider_section2 {
    .text_slider {
      .texte_ {
        width: 60%;
        padding: 36px 0 36px 0;
        padding-left: 0;

        .larg_title {
          font-family: "Playfair Display";
          font-weight: 400;
          font-size: 40px;
          line-height: 53px;
          text-transform: uppercase;
          color: #7E2110;
        }

        .dis {
          padding-right: 12px;
          max-width: 808px;
          margin-top: 9px;
        }

        @media only screen and (max-width: 992px) {
          width: 100%;
          padding: 9px 0px 17px 2px;
        }

      }
    }
  }
}



// start section 3
.slider_section3 {
  height: auto;
  position: relative;

  // TOP TITLE 
  .larg_title {
    padding-top: 12px;
    font-size: 40px;
    line-height: 42px;
  }

  .title_ {
    margin: auto;
    max-width: 1440px;
    text-align: center;
  }

  // START SLIDERS
  .slider-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 0px 43px 0;

    @media (max-width: 992px) {
      padding: 12px 0px 18px 0;
    }
  }

  // container
  .image-container {
    position: relative;
    // width: 100%;
    width: calc(100% - 31px);
    margin: auto;
    max-width: 424px;

    img {
      width: 100%;
      max-height: 289px;
      object-fit: cover;
    }

    //  info the item title / dis / price and btn reserver
    .image-caption {
      position: relative;
      bottom: 0;
      width: 100%;
      color: #fff;
      padding-bottom: 10px;

      .product_title {
        color: #EE7D00;
        padding-top: 7px;

      }

      .dis {
        padding-bottom: 9px;
        font-family: 'Jost';
        font-weight: 400;
        font-size: 16px;
        line-height: 132%;
        color: #000000;
        min-height: 41px;
      }

      .info-image {
        display: flex;
        margin-top: 0;
        .price {
          width: 100%;
          font-size: 14px;
          text-transform: uppercase;
          color: #000000;

          span {
            font-family: $Playfair;
            font-weight: 400;
            font-size: 24px;

          }
        }

        .reserver {
          width: 50%;

          text-align: right;

          button {
            background-color: transparent;
          }
        }

        @media (max-width: 992px) {
          margin-bottom: 14px;
        }
      }

    }

  }

  // BOTTON vOIRE Toutes
  .btn-voir-toute div {
    max-width: max-content;
    display: flex;
    margin: auto;

    a {
      display: flex;

      p {
        padding: 10px;
        font-family: $Jost;
        font-weight: 300;
        font-size: 20px;
        text-transform: uppercase;
      }
    }
    a:hover{
      color: #EE7D00;
      fill: #EE7D00;
      transition: .4s;
    }
  }

  .tns-controls {
    position: absolute;
    width: calc(100% + 6px);
    margin-left: -5px;
    display: flex;
    justify-content: space-between;
    top: 33%;
    outline: none;
  }

  .tns-controls button {
    border: none;
    background: none;
  }
}

.border-hr {
  max-width: 1438px;
  width: 100%;
  margin: auto !important;
  color: #D9D9D9;
  border: 1px solid #D9D9D9;
  margin: 0;

  @media (max-width: 992px) {
    display: none;
  }
}

// start section 4
.gallery_block {
  max-width: 1440px;
  padding: 43px 2px 57px 2px;
  margin: auto;
  flex-wrap: wrap;
  display: flex;
  @media (max-width: 1332px) {
    max-width: 830px;
  }
  @media (max-width: 992px) {
    padding: 27px 2px 17px 2px;
  }

  .image-container {
    width: 100%;
    max-width: 794px;

    .images {
      max-width: 675px;
      margin: auto 0 auto auto;
      display: flex;
      flex-wrap: wrap;

      @media (max-width: 1334px) {
        margin: 0;
        padding-left: 34px;

        @media (max-width: 435px) {
          padding: 0 12px;

        }
      }

      img {
        padding: 1px;

        @media (max-width:700px) {
          width: 120px;
          height: 110px;
        }
      }
    }

  }

  .image-caption {
    // height: 397px;
    padding-left: 37px;

    @media (max-width: 435px) {
      padding: 0 12px;
    }

    .title-gallery {
      font-family: $Jost;
      font-weight: 300;
      font-size: 32px;
      line-height: 46px;
      text-transform: uppercase;
      max-width: 500px;
      color: #EE7D00;
      line-height: 117.5%;
      span {
        font-weight: 500;
      }
      
     
      @media (max-width: 1332PX) {
      
        padding-top: 12px;
        padding-bottom: 11px;
      }

    }

    .dis {
      max-width: 491px;
      width: 100%;
      padding-bottom: 12px;
      margin-top: 8px;

      @media (max-width: 992px) {
        display: none;
      }
    }

    a {
      background: #7E2110;
      position: absolute;
      padding: 7px 44px;
      display: block;
      width: max-content;
      font-size: 20px;
      text-transform: uppercase;
      color: #FFFFFF;

      @media (max-width: 992px) {
        width: unset;
        max-width: 100%;
        text-align: center;
        position: relative;
      }
    }
  }
}

// start satisfy-block
.satisfy-block {
  .title_ {
    margin: auto;
    max-width: 1440px;
    text-align: center;

    .larg_title {
      @media only screen and (max-width: 768px) {
        font-size: 24px;
        line-height: 32px;
      }
    }
  }

  .items {
    display: flex;
    justify-content: center;
    padding: 36px;

    @media only screen and (max-width: 768px) {
      padding: 20px;
    }

    .item {
      max-width: 313px;
      height: 125px;
      width: 100%;
      margin-right: 35px;
      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      text-align: center;

      @media only screen and (max-width: 768px) {
        margin-right: 11px;
      }

      div {
        padding: 22px 0;

        @media only screen and (max-width: 768px) {
          width: 114px;
          height: 125px;
        }

        p {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 24px;
          line-height: 35px;
          text-transform: uppercase;
        }
      }

      div.google {
        padding: 15px 0;
      }
    }

  }

  // @media only screen and (max-width: 768px) {
  //   padding-top: 45px;
  // }
}

// section 6 block_etaps
.block_etaps {
  background-color: #F9F7F7;
  padding-top: 41px;

  @media only screen and (max-width: 768px) {
    padding-top: 7px;
  }

  .title_ {
    margin: auto;
    max-width: 1440px;
    text-align: center;
    width: calc(100% - 57px);
  }

  .items {
    display: flex;
    justify-content: center;
    padding: 1px 11px 24px;
    max-width: 1294px;
    margin: auto;

    .item {
      max-width: 480px;
      width: 100%;
      border-radius: 10px;
      text-align: center;

      div {
        padding: 22px 0;

        @media only screen and (max-width: 768px) {
          padding: 15px 0;
        }

        p,.title {
          font-family: $Jost;
          max-width: 254px;
          font-weight: 300;
          font-size: 16px;
          line-height: 124%;
          text-align: center;
          color: #000000;
          margin: auto;

          b {
            font-weight: 500;
            font-size: 16px;
            line-height: 23px;
            text-transform: uppercase;


          }
        }
      }

    }

    // 
    .tns-nav {
      text-align: center;
    }

    // 
    .tns-nav button {
      background-color: #D9D9D9;
      width: 15px;
      height: 15px;
      border-radius: 100px;
      margin-right: 7px;
      border: none
    }

    // 
    .tns-nav-active {
      background: #ACACAC !important;
    }

  }
}

// section 7
.download_fiche {
  background-color: #7E2110;
  padding-top: 34px;

  @media only screen and (max-width: 768px) {
    margin-bottom: 12px
  }

  .carte-soine {
    display: flex;
    max-width: 802px;
    margin: auto;

    @media only screen and (max-width: 768px) {
      flex-wrap: wrap;
    }

    div:first-child {
      @media only screen and (max-width: 768px) {
        width: 100%;
        text-align: center;
        max-height: 150px;
        height: 100%;
      }
    }

    .pdf {
      padding-top: 12px;
      width: calc(100% - 85px);

      @media only screen and (max-width: 768px) {
        margin: auto;
        padding-top: 0;
        padding-bottom: 24px;
        text-align: center;

        a {
          max-width: 100%;
        }
       
      }
    }

    p {
      font-family: $Playfair;
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
      text-transform: uppercase;
      color: #FFFFFF;
    }

    a {
      font-family: 'Jost';
      font-weight: 500;
      font-size: 16px;
      line-height: 23px;
      text-decoration-line: underline;
      color: #F5A422;
      max-width: 292px;
      display: block;
     
    }
    a:hover{
      color: #fff;
      transition: .4s;
    }
  }
}

// end page home

// Page_Massages
.page_massages {

  //  
  .massages-intro {
    padding: 24px 0 0 0;
    max-width: 1138px;
    width: 100%;
    text-align: center;
    margin: auto;

    p {
      font-family: $Playfair;
      font-weight: 400;
      font-size: 18px;
      line-height: normal;
      text-align: center;
      color: #000000;
      width: calc(100% - 40px);
      margin: auto
    }

    @media only screen and (max-width:992px) {
      .massages-intro p {
        font-size: 18px;
        line-height: 24px;

      }

    }
  }

  //  
  .massages-type {
    max-width: 1138px;
    width: calc(100% - 33px);
    margin: auto;
    display: flex;
    padding-top: 33px;
    padding-bottom: 21px;


    // image
    .massages-type-image {
      img {
        width: 100%;
        height: auto;
      }
    }

    // Text
    .massages-type-text {

      padding: 0 23px;

      .massages-title-type {
        margin-bottom: 8px;
        font-family: $Playfair;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        text-transform: uppercase;
        color: #EE7D00;

      }

      .massages-type-horaire {
        padding-bottom: 7px;
        font-size: 16px;
        line-height: 23px;
        color: #000000;

        svg {
          vertical-align: sub;
        }

      }

      .massages-type-dis {
        max-width: 698px;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 12px;

        p {
          margin-bottom: 12px;
          font-family: $Jost;
          font-weight: 400;
          font-size: 16px;
          line-height: 23px;
          color: #000000;
        }

        .massages-type-dis-price {
          font-family: $Playfair;
          font-weight: 400;
          font-size: 24px;
          line-height: 32px;
          color: #EE7D00;
          display: block;
        }
      }

      .massages-type-btn {
        display: flex;
        padding-top: 25px;

        a {
          margin-right: 10px;
        }

        .btn-Decouvrir {
          z-index: 1;
          position: relative;
          color: #FFFFFF;
          background: #7E2110;
        }

        .reserver-btn {
          position: relative;
          z-index: 1;
          background: #F9F7F7;
          border: 1px solid #E3E3E3;
          color: #000000;
        }

        .reserver-btn:hover {

          color: #ffffff;
        }
      }


    }

    //  Responsive Mobile
    @media only screen and (max-width:992px) {
      flex-wrap: wrap;

      .massages-type-text {
        padding: 0;

        .massages-type-btn {
          padding-top: 13px;
        }
      }

    }
  }

  .massages-type-reverse {
    background-color: #7E2110;
    padding: 53px 0px;

    .massages-type {
      padding: 0;

      // image
      .massages-type-image {
        order: 2;
      }

      .massages-type-text {
        text-align: right;

        .massages-type-dis p,
        .massages-type-horaire {
          color: #fff;
        }
      }

      .massages-type-btn {
        float: right;

        a {
          margin-right: 0;
          margin-left: 10px;
        }

        .btn-Decouvrir {
          border: 1px solid #FFFFFF;
        }

      }
    }

    // responsive type reverse
    @media only screen and (max-width:992px) {
      padding: 24px 0px;

      .massages-type-image {
        order: unset !important;
      }

      .massages-type-text {
        text-align: unset !important;
      }

      .massages-type-btn {
        float: unset !important;

        a {
          margin-right: 10px !important;
          margin-left: unset !important;
        }


      }
    }
  }

}

// page fiche massage
.fiche_massage {
  padding-top: 95px;

  @media (max-width: 992px) {
    padding-top: 10px;
  }

  .fiche-massage-formules {
    max-width: 1681px;
    display: flex;
    width: 100%;
    margin: auto;

    @media (max-width: 992px) {
      flex-wrap: wrap;
    }

    // image 
    .fiche-massage-image {
      img {
        max-width: 961px;

        @media (max-width: 1600px) {
          width: 100%;
          object-fit: cover;
        }

        @media (max-width: 992px) {
          height: auto;
        }
      }

      @media (max-width: 992px) {
        display: none;
      }
    }

    .fiche-massage-image.mobile {
      display: none;

      @media (max-width: 992px) {
        display: block;
      }
    }

    .fiche-massage-detail {
      background-color: #fff;
      transform: translateX(-45px);
      margin-top: 46px;
      max-width: 765px;
      width: 100%;
      padding-top: 18px;

      // detail
      .detail-title {
        .larg_title {
          font-size: 40px;
          margin-bottom: 10px;
        }

        // @media (max-width: 992px) {
        //   padding: 0 18px;
          
        // }
      }

      // detail-select-option
      .detail-select-option {
        display: flex;
        padding-top: 28px;
        justify-content: space-between;
       
        select {
          appearance: none;
          -moz-appearance: none;
          /* for Chrome */
          -webkit-appearance: none;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m15.401 3.93-7.405 7.406L.59 3.93a.348.348 0 0 0-.492.492l7.652 7.652a.348.348 0 0 0 .492 0l7.652-7.652a.348.348 0 1 0-.492-.492Z'/%3e%3cpath fill='%23000' d='M7.996 12.176a.348.348 0 0 1-.247-.101L.098 4.423a.348.348 0 0 1 .491-.492l7.407 7.405L15.4 3.93a.348.348 0 1 1 .492.492L8.24 12.074a.348.348 0 0 1-.245.102Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
          background-repeat: no-repeat;
          background-position: right;
        }

        select::-ms-expand {
          display: none;
        }

        .option-people,
        .option-duration {
          width: 50%;
          max-width: 318px;

          label {
            font-family: 'Playfair Display';
            font-weight: 400;
            font-size: 16px;
            line-height: 21px;
            color: #7E2110;
          }

          .form-control {
            font-family: 'Jost';
            font-size: 14px;
            line-height: 20px;
            color: #000000;
            display: block;
            width: 100%;
            padding: 8px 5px;
            background-color: transparent;
            border: 1px solid transparent;
            border-bottom: 1px solid #F9F7F7;
            max-width: 318px;
            cursor: pointer;
          }
      
          .form-control option {
            font-family: sans-serif;
          }
          @media (max-width: 992px) {
            width: 100%;
            max-width: unset;

            .form-control {
              max-width: unset;
            }
          }
        }

        @media (max-width: 992px) {
          flex-wrap: wrap;
          // padding: 0 18px;
          padding-top: 16px;

          .option-duration {
            margin-top: 24px;
          }
        }
      }

      //  detail-select-option
      .detail-select-price {
        display: flex;
        padding: 12px 0;

        .price {
          display: flex;
          align-items: center;
          margin-top: 21PX;
        }

        div {
          width: 50%;

          p {
            font-family: 'Playfair Display';
            font-weight: 400;
            font-size: 16px;
            line-height: 21px;
            color: #EE7D00;

            b {
              font-size: 32px;
              text-transform: uppercase;
            }
          }

          .reserver-btn {
            font-family: 'Playfair Display';
            font-size: 20px;
            background: #7E2110;
            color: #FFFFFF;
            min-width: 186px;
            padding: 9px 0;

          }

          @media (max-width: 992px) {
            width: 100%;
            justify-content: center;
            margin-bottom: 17px;

            .reserver-btn {
              width: 100%;
            }
          }
        }

        .button {
          text-align: end;
        }

        @media (max-width: 992px) {

          padding: 0 18px;
          flex-wrap: wrap;
        }
      }

      @media (max-width: 992px) {
        background-color: #fff;
        transform: unset;
        margin-top: 6px;
        padding-top: 2px;
        margin: auto;
        width: calc(100% - 31px);
      }

      //  POINTS FORTS

      .detail-select-liste {
        background: #F9F7F7;
        padding: 21px 19px;

        p {
          font-family: 'Playfair Display';
          font-weight: 400;
          font-size: 20px;
          line-height: 27px;
          text-transform: uppercase;
          color: #7E2110;
        }

        ul {
          li {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 16px;
            line-height: 188.5%;
            text-transform: uppercase;
            color: #000000;

            &::before {
              content: "·";
              margin-right: 5px;
              font-size: 26px;
            }
          }
        }
      }

      // -- les icons --
      .detail-select-icons {
        padding-top: 12px;

        div {
          display: flex;
          margin-bottom: 20px;

          svg {
            margin: 0 7px;
          }

          span {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 12px;
            line-height: 22px;
            text-transform: uppercase;
            color: #000000;
          }
        }

        @media (max-width:992px) {
          padding: 0 18px;
          padding-top: 14px;
        }
      }

    }

    .fiche-massage-detail>div {
      padding: 0 26px;

      @media (max-width:992px) {
        padding: 0 0px;

        .detail-title {
          margin-bottom: 12px;
        }
      }
    }
  }

  // fiche_massage-Gallery
  .fiche-massage-gallery {
    max-width: 1438px;
    margin: auto;

    .fiche-massage-intro {
      padding-top: 45px;

      @media (max-width:992px) {
        padding-top: 6px;
      }

      p {
        text-align: center;
      }

      .title-M {
        font-family: 'Playfair Display';
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
        text-transform: uppercase;
        color: #7E2110;
      }

      .dis-intro {
        font-family: 'Jost';
        max-width: 602px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #000000;
        margin: auto;
        width: calc(100% - 35px);
      }


    }

    .gallery {
      text-align: center;
      padding-top: 12px;

      img {
        margin: 0 5px;

      }

      @media (max-width:992px) {
        img {
          width: 100%;
          height: 100%;
          max-width: 116px;
        }
      }
    }
  }

  // fiche_massage-Gallery
  .fiche-massage-slider {

    .larg_title {
      font-size: 24px;
      line-height: 32px;
      text-align: center;
      padding: 28px 0 26px 0;

      @media (max-width:992px) {
        padding: 20px 0 18px 0;
      }
    }

    .slider_section3 {
      background-color: #fff;
      padding-bottom: 0px;
      margin: auto;

      // bg 
      .image-container {
        .with-bg {
          position: relative;
        }

        .with-bg:before {
          content: '';
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          z-index: 1;
          max-height: 289px;
          height: 100%;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .zoom-icon {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          width: 40px;
          height: 40px;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='53' height='53' fill='none' viewBox='0 0 53 53'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23fff' d='M28.983 20h-6v-6a1 1 0 0 0-2 0v6h-6a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z'/%3e%3cpath fill='%23fff' d='M51.704 51.273 36.845 35.82c3.79-3.801 6.138-9.041 6.138-14.82 0-11.58-9.42-21-21-21s-21 9.42-21 21 9.42 21 21 21c5.083 0 9.748-1.817 13.384-4.832l14.895 15.491a.998.998 0 0 0 1.414.028 1 1 0 0 0 .028-1.414ZM2.983 21c0-10.477 8.523-19 19-19s19 8.523 19 19-8.523 19-19 19-19-8.523-19-19Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h52.966v52.966H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
          background-size: cover;
          opacity: 0;
          transition: opacity 03s ease;
        }

        .with-bg:hover .zoom-icon,
        .with-bg:hover:before {
          display: block;
          opacity: 1;
          cursor: pointer;
        }

        // 


      }

      .info {
        display: flex;
        padding-top: 8px;
        padding-bottom: 22px;

        .product_title {
          width: 80%;
          color: #EE7D00;
        }
      }

      .product_prix {
        text-align: right;
        font-family: "Playfair Display";
        font-size: 24px;
        line-height: 32px;
        color: #EE7D00;
        text-transform: uppercase;
      }

      .horaire_slide {
        width: 50%;
        font-size: 14px;
        color: #000000;
        display: flex;
        justify-items: center;
        align-items: center;

        span {
          font-size: 16px;
          line-height: 23px;
          color: #000000;
        }

        svg {
          vertical-align: sub;
        }

      }

      @media (max-width:992px) {
        padding-bottom: 7px;

        .tns-controls {
          top: 28%;
        }
      }

      .slider-wrapper {
        max-width: 1515px;
        padding: 0px 0px 23px 0;

      }

      .tns-nav {
        display: flex;

        button {
          width: 200px;
          border: none;

        }

        .tns-nav-active {
          background: #EE7D00 !important;
        }

      }
    }
  }

  // fiche-massage-featured-poste
  .fiche-massage-featured-poste {

    margin-top: 18px !important;
    max-width: 1438px;
    margin: auto;
    padding-left: 17px;
    padding-right: 17px;

    @media (max-width:992px) {
      margin-top: 0 !important;
    }

    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Playfair Display';
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
      color: #7E2110;

      @media (max-width:992px) {
        margin-bottom: 5px;
      }
    }

    p {
      font-family: 'Jost';
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #000000;
      margin-bottom: 38px;

      @media (max-width:992px) {
        margin-bottom: 26px;
      }
    }
  }
}

// intro

.intro- {
  text-align: center;
  font-size: 20px;
  max-width: 1150px;
  margin: auto;
  padding-top: 37px;
  padding-bottom: 37px;
  width: calc(100% - 40px);
  font-family: $Playfair;

  @media (max-width: 992px) {
    padding-bottom: 13px;
    padding-top: 14px;
    font-size: 18px;

  }
}

//  page contact

.page-contact,
.cheque-cadeaux {
  .map-info-located {
    display: flex;
    display: flex;
    max-width: 1950px;
    width: 100%;
    margin: auto;
    .map {
      max-width: 960px;
      width: 100%;
      height: 602px;
      background-color: #f1cec8;

      @media (max-width: 992px) {
        order: 2;
        max-height: 368px;
      }
    }

    .info-located {
      height: auto;
      margin-top: 61px;
      width: 100%;

      @media (max-width: 992px) {
        margin-top: 0;

      }

      ul {
        background-color: #F9F7F7;
        padding-top: 35px;
        padding-left: 67px;
        padding-bottom: 19px;
        outline-style: solid;
        outline-color: #F9F7F7;
        outline-width: 24px;
        text-align: left;

        @media (max-width: 992px) {
          outline: none;

        }

        li {
          color: #EE7D00;
          padding-bottom: 39px;

          @media (max-width: 992px) {
            padding-bottom: 24px;

          }

          svg {
            margin-right: 11px;
            vertical-align: bottom;

          }
        }

        .adress,
        .tel,
        .mail {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 20px;
          line-height: 29px;
          color: #EE7D00;

          @media (max-width: 992px) {
            font-size: 16px;
            line-height: 23px;


          }
        }

        .tel:hover,
        .mail:hover {
          border-bottom: 1px solid;
        }

        .adress {
          display: flex;
          max-width: 368px;
        }

        @media (max-width:992px) {
          padding-top: 22px;
          padding-left: 24px;
          padding-bottom: 0;

          .tel {
            font-size: 20px;
          }
        }
      }

      .title-located {
        font-family: $Playfair;
        font-weight: 400;
        font-size: 32px;
        line-height: 43px;
        text-transform: uppercase;
        color: #000000;
      }
    }

    @media (max-width: 992px) {
      flex-wrap: wrap;

      .title-located {
        font-size: 24px;
        line-height: 32px;
      }
    }

  }

  // form!
  .form-contact,
  .text-select-cadeaux {
    margin-top: 101px;

    p {
      font-family: 'Playfair Display';
      text-align: center;
      font-weight: 400;
      font-size: 32px;
      line-height: 43px;
      text-transform: uppercase;
    }


    form {
      display: flex;
      flex-wrap: wrap;
      margin: auto;
      width: 100%;
      max-width: 702px;
      margin-top: 26px;
      justify-content: space-between;
      padding: 37px 78px;
      margin-bottom: 59px;

      @media (max-width: 992px) {
        padding: 0;
        margin-bottom: 12px !important;
      }

      .group {
        position: relative;
        width: 50%;
        margin-bottom: 66px;
        max-width: 318px;

        @media (max-width: 992px) {
          width: 100%;
          max-width: 100%;
        }
      }

      .form-control {
        font-family: 'Jost';
        font-size: 16px !important;
        line-height: 20px;
        color: #000000;
        display: block;
        width: 100%;
        font-weight: 400;
        padding: 8px 0px;
        text-transform: uppercase;
        font-size: 13px;
        background-color: transparent;
        border: 1px solid transparent;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom: 1px solid #D9D9D9;
        max-width: 318px;
        cursor: pointer;
        appearance: none;
        -moz-appearance: none;
        /* for Chrome */
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m15.401 3.93-7.405 7.406L.59 3.93a.348.348 0 0 0-.492.492l7.652 7.652a.348.348 0 0 0 .492 0l7.652-7.652a.348.348 0 1 0-.492-.492Z'/%3e%3cpath fill='%23000' d='M7.996 12.176a.348.348 0 0 1-.247-.101L.098 4.423a.348.348 0 0 1 .491-.492l7.407 7.405L15.4 3.93a.348.348 0 1 1 .492.492L8.24 12.074a.348.348 0 0 1-.245.102Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
        background-repeat: no-repeat;
        background-position: right center;
      }


      input,
      textarea {
        width: 100%;
        font-size: 14px;
        padding: 10px 0px 10px 0px;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #D9D9D9;
        resize: none;
      }

      textarea {
        padding: 92px 10px 10px 5px;
      }

      .group.textarea {
        width: 100%;
        max-width: 702px;
        margin-bottom: 0px;
      }

      .text-obliga {
        width: 100%;
        margin-top: 12px;

        @media (max-width: 992px) {
          margin-top: 9px;
        }

        p {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 12px;
          line-height: 17px;
          color: #A9A9A9;
          text-align: right;
        }

      }

      input:focus,
      textarea:focus {
        outline: none;
      }

      /* LABEL */
      label {
        font-family: 'Jost';
        font-size: 16px;
        text-transform: uppercase;
        color: #000000;
        font-weight: 400;
        position: absolute;
        pointer-events: none;
        left: 3px;
        top: 2px;
        transition: 0.2s ease all;

      }

      /* active state */
      input:focus~label,
      input:valid~label,
      textarea:focus~label,
      :valid~label {
        top: -20px;
        font-size: 14px;
        color: #7E2110;
      }
        
      

      /* BOTTOM BARS ================================= */
      .bar {
        position: relative;
        display: block;
        width: 100%;
      }

      .bar:before,
      .bar:after {
        content: '';
        height: 1px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background-color: #7E2110;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
      }

      .bar:before {
        left: 50%;
      }

      .bar:after {
        right: 50%;
      }

      /* active state */
      input:focus~.bar:before,
      input:focus~.bar:after,
      textarea:focus~.bar:before,
      textarea:focus~.bar:after {
        width: 50%;
      }

      /* HIGHLIGHTER */
      .highlight {
        position: absolute;
        height: 60%;
        width: 100px;
        top: 25%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
      }

      // /* active state */
      input:focus~.highlight {

        animation: inputHighlighter 0.3s ease;
      }

      /* button-form-contact*/
      .btn-contact-form {
        margin-top: 17px;
        text-align: center;
        width: 100%;

        button {
          position: relative;
          z-index: 1;
          font-family: 'Playfair Display';
          padding: 7px;
          text-transform: uppercase;
          font-size: 20px;
          border: none;
          min-width: 175px;
          height: auto;
          background-color: #7E2110;
          color: #fff;
          cursor: pointer;

          @media (max-width: 992px) {
            min-width: 100%;
          }
        }

      }
    }

    @media (max-width: 992px) {
      margin-top: 29px !important;
      width: calc(100% - 69px);
      margin: auto;

      P {
        font-size: 24px;
      }

    }
  }
  @media (max-width: 992px) {
    margin-bottom: 50px;
  }
}

//  page cheque_cadeaux
.cheque-cadeaux {
  .intro- {
    text-align: center;
    font-size: 20px;
    max-width: 1150px;
    margin: auto;
    padding-top: 37px;
    padding-bottom: 37px;
    font-family: $Playfair;

    @media (max-width: 992px) {
      padding-bottom: 13px;
      padding-top: 14px;
      font-size: 18px;
      width: calc(100% - 39px);
      margin: auto;
    }

  }

  //  select-cadeaux
  .select-cadeaux {
    display: flex;
    margin-top: 29px !important;
    max-width: 1274px;
    margin: auto;

    .img-cadeaux {
      width: 46%;

      img {
        margin-left: 13px;
        padding-top: 12px;
      }
    }

    .text-select-cadeaux {
      margin: 0;
      width: 54%;

      form {
        margin-top: unset;
        padding: unset;
        margin-bottom: 99px;

        .group {
          width: 100%;
          max-width: 698px;
          width: 100%;

          .form-control {
            max-width: 698px;
            padding-bottom: 16px;
          }

          .date-de-livraison {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 12px;
            line-height: 17px;
            margin-top: 6px;
            display: block;
            color: #A9A9A9;
          }
        }

        .btn-contact-form {
          .prix-cadeaux {
            color: #EE7D00;
            font-family: 'Playfair Display';
            font-weight: 400;
            font-size: 32px;
            margin-bottom: 12px;
          }
        }

        .note- {
          background-color: #F9F7F7;
          margin-top: 35px;
          margin-bottom: 28px;
          padding: 12px;

          span,
          li {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #A4A4A4;
          }

          ul {

            padding: revert;

            li::before {
              content: "·";
              margin-right: 5px;
              font-size: 26px;
            }

          }

        }
      }
    }

    @media screen and(max-width:992px) {
      flex-wrap: wrap;
      width: calc(100% - 75px);
      margin: auto;
      margin-top: 0 !important;

      .img-cadeaux,
      .text-select-cadeaux {
        width: 100%;
        margin-top: 7px !important;

        .form {
          margin-bottom: 0;

          textarea {
            padding: 60px 10px 10px 5px;
          }
        }

        .group {
          margin-bottom: 38px;
          .date-de-livraison {
            margin-bottom: 8px;
          }
          @media (max-width:400px) {
            .livraison{
              padding-bottom: 27px; 
            }
          }
        }

        .note- {
          margin-top: 26px !important;
          margin-bottom: 66px !important;

          ul {
            padding-left: 9px !important;

          }
        }

      }

      .img-cadeaux {
        order: 2;

        img {
          width: 100%;
          height: auto;
        }

      }

    }
  }
}

//  page gallery

.gallery {
  @media screen and(max-width:414px) {
    width: max-content;
    margin: auto;

    img {
      width: 100%;
    }

  }
}

//  page-cvg
.page-cvg {
  max-width: 1440px;
  width: calc(100% - 30px);
  margin: 94px auto 80px auto;

  .intro-pageStatic {
    margin-bottom: 44px;
    ul {
      margin-top: 21px;
      list-style: decimal;
      padding-left: 15px;
  
      ul {
        list-style: lower-alpha;
        padding-left: 15px;
      }
    }
    p{
      font-size: 14px
    }
  }

 

  @media screen and(max-width:992px) {
    margin: 10px auto 80px auto;

    .intro-pageStatic {
      margin-bottom: 20px;
    }
  }

}

// page reservation
.breadcrumb-logo {
  display: flex;
  align-items: center;
  min-height: 121px;
  border-bottom: 1PX solid #D9D9D9;

  a {
    margin: auto;
  }

}

.page-reservation {
  .img-local {
    margin: auto;
    max-width: 1458px;
    
    padding-top: 60px;
    width: calc(100% - 30px);

    .slider {
      width: 100%;
      justify-content: space-between;

      .image-container {
        display: flex;
        justify-content: center;

         width: calc(100% - 12px);

      }

      img {
        width: 100%;
        object-fit: contain;
      }

    }

    .adresse-local {
      width: calc(100% - 20px);
      margin-top: 23px;
      padding-left: 10px;

      p {
        font-family: 'Jost';
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        color: #000000;
        margin-bottom: 7px;
      }

      svg {
        vertical-align: -2px;
        margin-right: 10;
      }
    }

    @media screen and(max-width:992px) {
      padding-top: 21px;

      .slider {
        .image-container {

          img {
            object-fit: cover !important;
            height: auto;
          }

        }

      }

      // 
      .adresse-local {
        position: relative;

        p {
          padding-left: 30px;

          svg {
            position: absolute;
            left: 0;
          }
        }
      }

      .tns-controls {
        display: none;
      }
    }

  }
  .select-time{
     cursor: pointer;
  }
  // 
  .type-reserve {
    max-width: 1441px;
    margin: auto;
    padding-top: 78px;
    display: flex;

    .name-reserve {
      max-width: 410px;
      width: 100%;
      padding-top: 36px;

      p {
        font-family: 'Playfair Display';
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        text-transform: uppercase;
        color: #000000;
      }

      svg {
        vertical-align: middle;
      }

    }

    .select-reserve {
      max-width: 1030px;
      width: 100%;
      padding: 0px 24px 0px 33px;
      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);

      .table {
        display: flex;
        justify-content: space-between;
        padding-bottom: 27px;
        padding-top: 23px;
        border-bottom: 1px solid #E7E7E7;

        div {
          max-width: max-content;

          p {
            font-family: 'Playfair Display';
            font-weight: 400;
            font-size: 20px;
            line-height: 13px;
            margin-bottom: 11px;
            text-transform: uppercase;
          }

          span {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 16px;
            line-height: 23px;

            svg {
              vertical-align: sub;
            }

          }

        }

        .title-type {
          padding-top: 18px;
          max-width: 428px;
          width: 100%;

          P {
            text-align: left;
            width: 100%;
            line-height: 19px;
          }
        }

        .prix-type {
          max-width: 188px;
          width: 100%;
          text-transform: uppercase;
          color: #7E2110;
          display: flex;
          align-items: center;
        }

        p {
          text-align: center;
          width: max-content;
          width: 118px;
        }

        .qnt-type {
          max-width: 219px;
          width: 100%;

          .quantity_inner {
            display: flex;
            justify-content: center;
            gap: 10px;
            background: #F7F7F7;

            max-width: 118px;
            border-radius: 100px;
          }

          .quantity_inner .bt_minus,
          .quantity_inner .bt_plus,
          .quantity_inner .quantity {
            padding: 0;
            width: 28px;
            cursor: pointer;
            border: none;
            outline: 0;
            background: none;
          }

          .quantity_inner .quantity {
            font-family: 'Jost';
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;

          }

          .quantity_inner .bt_minus svg,
          .quantity_inner .bt_plus svg {
            stroke: #BFBFBF;
            stroke-width: 1;
            transition: 0.5s;
            margin: 4px;
          }

          .quantity_inner .bt_minus:hover svg,
          .quantity_inner .bt_plus:hover svg {
            stroke: #7E2110;
          }

        }

        // Button
        .btn-reserve {
          padding-right: 9px;
          display: flex;
          align-items: center;

          button {
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #D9D9D9;
            font-family: 'Jost';
            font-weight: 400;
            font-size: 16px;
            line-height: 23px;
            color: #000000;
            padding: 5px 23px;

            &:hover {
              background-color: #A2CA6E;
              color: #fff;
              transition: 0.3s;
            }
          }

          .reserve-button {
            background-color: #A2CA6E;
            color: #fff;
            transition: 0.3s;
          }
        }

        @media screen and(max-width:1300px) {

          .title-type,
          .prix-type,
          .qnt-type {
            max-width: unset;
            width: unset;
          }
        }

        //  @media screen and(max-width:992px) {

        //  }
      }

      :last-child {
        border-bottom: 1px solid #e7e7e700;
      }
      .group .form-control {
        margin-left: 3px;
        font-family: 'Jost';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        display: block;
        width: 100%;
        padding: 0px 0px;
        background-color: transparent;
        border: 1px solid transparent;
          border-bottom-color: transparent;
          border-bottom-style: solid;
          border-bottom-width: 1px;
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        max-width: 64px;
        cursor: pointer;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' viewBox='0 0 16 10'%3e%3cpath fill='%23000' d='M7.996 9.176a.348.348 0 0 1-.247-.102L.098 1.423A.348.348 0 0 1 .589.93l7.407 7.405L15.4.93a.348.348 0 1 1 .492.492L8.241 9.074a.348.348 0 0 1-.245.102Z'/%3e%3c/svg%3e ");
        background-repeat: no-repeat;
        position: absolute;
        background-position: right center;
          background-position-y: center;
        background-position-y: 9px;
      }
      .time-massage{
        display: flex;
        padding-top: 4px;
      }
    }
    .time-massage{
           svg{
            margin-right: 4;
           }
    }

    @media screen and(max-width:992px) {
      flex-wrap: wrap;
      width: calc(100% - 31px);
      padding-top: 0;

      .name-reserve {
        padding-top: 31px;
        padding-bottom: 14px;
      }

      .select-reserve {
        padding: 0px 24px 0px 9px;

        .table {
          flex-wrap: wrap;
          padding-top: 5px;

          .title-type {
            width: 47%;

            p {
              font-size: 14px;
            }

          }

          .prix-type {
            font-size: 18px;
            width: 25%;
          }

          .qnt-type {
            order: 3;
            width: 100%;
            display: flex;
            margin-top: 12px;

            p {
              max-width: max-content;
              margin-right: 12px;
            }

            .quantity_inner {
              width: 100%;

            }
          }

          .btn-reserve {
            width: 25%;

            button {
              padding: 5px 8px;
            }
          }
        }
      }
    }
  }

  // 
  .liste-reserve {
    max-width: 1441px;
    margin: auto;
    padding-top: 78px;
    display: flex;

    .select-reserve {
      width: 100%;
      max-width: 1030px;
    }

    .title-reserve {
      max-width: 410px;
      width: 100%;

      p {
        font-family: 'Jost';
        font-weight: 400;
        font-size: 16px;
        line-height: 23px;
      }

      .txt-recherche {
        font-family: 'Playfair Display';
        font-weight: 400;
        font-size: 20px;
        line-height: 27px;
      }
    }

    // title
    .listCatigory {
      max-width: 1030px;
      width: 100%;
    }

    // listCatigory
    .category-reserve {
      padding: 29px;
      max-width: 1030px;
      background-color: #F8F8F8;

      .item-tout,
      .item-massages,
      .item-formules,
      .item-Soins {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 133px;
        background-color: rgb(255, 255, 255);
        margin-right: 11px;
        position: relative;
        transition: 0.3s;
        cursor: pointer;

        input {
          display: block;
          position: absolute;
          top: 5px;
          right: 6px;
          z-index: -1;
        }

        svg {
          left: 50%;
          position: relative;
          transform: translate(-50%);
          fill: #EE7D00;
          z-index: 3;
        }

        p {
          font-family: 'Playfair Display';
          font-weight: 400;
          font-size: 20px;
          line-height: 27px;
          text-transform: uppercase;
          color: #000000;
          position: relative;
          z-index: 3;
        }

        &:last-child {
          margin-right: 0;


        }

        @media screen and (max-width:992px) {
          width: 155px;
          height: 94px;

          p {
            font-size: 14px;
          }
        }

        // 
        .checkmark {
          position: absolute;
          top: 0px;
          right: 0px;
          width: 100%;
          height: 100%;
        }

        // 


        input:checked~.checkmark,
        input:checked~p,
        input:checked~svg {
          background-color: #7E2110;
          color: #fff;
          fill: #fff;

        }

        input:checked~.checkmark,
        input:checked~p,
        input:checked~svg {
          background-color: #7E2110;
          color: #fff;
          fill: #fff;

        }

        .checkmark:after,
        .checkmark::before {
          content: "";
          position: absolute;
          display: none;
        }

        input:checked~.checkmark:after,
        input:checked~.checkmark::before {
          display: block;
        }

        .checkmark:after {
          right: 13px;
          top: 9px;
          width: 5px;
          height: 10px;
          border: solid #7e2110;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
        }

        .checkmark::before {
          right: 7px;
          top: 7px;
          width: 20px;
          height: 20px;
          background-color: rgb(255, 255, 255);
          border-radius: 30px;
        }

      }

      .tns-controls {
        display: none;
      }

      .item-tout {
        svg {
          margin-top: 20px;
        }

      }

      .item-massages {
        svg {
          margin-top: 13px;
        }
      }

      @media screen and(max-width:992px) {
        padding: 14px 0;

        // width: 100% ;
        #tns2>.tns-item {
          margin-right: 22px;
        }

        .item-tout,
        .item-massages,
        .item-formules,
        .item-Soins {
          svg {
            width: 36px;
            vertical-align: middle;
            height: 35px;
          }

          p {
            line-height: 25px;
          }
        }

        .item-tout {
          svg {
            width: 20px;
            height: 20px;
            margin-top: 14px;
          }

        }

        .item-massages {
          svg {
            margin-top: 0;
          }
        }

      }
    }

    // category-reserve
    .selectionner {
      display: flex;
      margin: auto;
      margin-top: 27px;
      padding-bottom: 48px;

      .list-selectionner {
        // max-width: 296px;
        padding-top: 23px;
        width: 100%;

        ul {
          display: grid;
          grid-template-columns: 30% 1fr;
          grid-gap: 18px;
          row-gap: 0px;

          @media screen and(max-width:992px) {
            grid-template-columns: 1fr;

            // :first-child{
            //   order: 1;
            // }
            .lis {
              padding-left: 0 !important;
            }
          }

          li:not(.table-selectionner) {
            margin-bottom: 18px;
            padding: 8px 17px;
            position: relative;
            cursor: pointer;

            @media screen and(min-width:992px) {
              grid-column: 1;
            }

            &.active {
              background-color: #F8F8F8;

              @media screen and(max-width:992px) {
                background-color: #fff;

                &::before {
                  content: '';
                  position: absolute;
                  background-repeat: no-repeat;
                  right: 0;
                  width: 30px;
                  height: 30px;
                  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 17 17'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m16.364 4.176-7.869 7.869-7.868-7.87a.37.37 0 0 0-.523.523l8.13 8.13a.37.37 0 0 0 .523 0l8.13-8.13a.37.37 0 1 0-.522-.522h-.001Z'/%3e%3cpath fill='%23000' d='M8.495 12.937a.37.37 0 0 1-.261-.108L.104 4.7a.37.37 0 0 1 .522-.523l7.87 7.869 7.868-7.87a.37.37 0 1 1 .522.523l-8.13 8.13a.37.37 0 0 1-.26.11Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h17v17H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
                }
              }

            }

            &::before {
              content: '';
              position: absolute;
              background-repeat: no-repeat;
              right: 0;
              width: 30px;
              height: 30px;
              background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 22 22'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m5.404.823 10.183 10.183L5.404 21.189a.478.478 0 0 0 .676.676l10.521-10.521a.478.478 0 0 0 0-.677L6.08.146a.478.478 0 1 0-.676.676v.001Z'/%3e%3cpath fill='%23000' d='M16.742 11.006c0 .127-.05.249-.14.338L6.081 21.866a.478.478 0 0 1-.676-.677l10.182-10.183L5.404.823A.478.478 0 1 1 6.08.147l10.521 10.521c.09.09.14.211.14.338Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h22v22H0z' transform='rotate(-90 11 11)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
            }


          }

        }
      }

      .table-selectionner {
        max-width: 945px;
        padding-left: 48px;
        // max-width: 685px;
        width: 100%;
        // padding-left: 24px;
        .time-massage{
           display: flex;
           padding-top: 4px; 
        }

        .qnt-type{
          display: none;
        }
        .group .form-control{
          margin-left: 3px;
          font-family: 'Jost';
          font-style: normal;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          display: block;
          width: 100%;
          padding: 0px 0px;      
              background-color: transparent;
          border: 1px solid transparent;
            border-bottom-color: transparent;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            max-width: 64px;
          cursor: pointer;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' viewBox='0 0 16 10'%3e%3cpath fill='%23000' d='M7.996 9.176a.348.348 0 0 1-.247-.102L.098 1.423A.348.348 0 0 1 .589.93l7.407 7.405L15.4.93a.348.348 0 1 1 .492.492L8.241 9.074a.348.348 0 0 1-.245.102Z'/%3e%3c/svg%3e ");
          background-repeat: no-repeat;
          position: absolute;
        
          background-position: right center;
          background-position-y: 9px;
        }
        @media screen and(min-width:992px) {
          grid-column: 2;
          grid-row: 1/5;
          // order: 2;
        }

        .table {
          display: flex;
          justify-content: space-between;
          padding-bottom: 27px;
          padding-top: 23px;
          border-bottom: 1px solid #E7E7E7;

          .title-type {
            width: 58%;

            p {
              font-family: 'Jost';
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;
              text-transform: uppercase;

            }
          }

          .prix-type {
            font-size: 20px;
            font-family: 'Playfair Display';
            text-transform: uppercase;
            color: #7E2110;
            display: flex;
            align-items: center;
          }

          .btn-reserve {
            padding-right: 9px;
            display: flex;
            align-items: center;

            button {
              cursor: pointer;
              background-color: #fff;
              border: 1px solid #D9D9D9;
              font-family: 'Jost';
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;
              color: #000000;
              padding: 5px 23px;

              &:hover {
                background-color: #A2CA6E;
                color: #fff;
                transition: 0.3s;
              }
            }
          }

          svg {
            vertical-align: sub;
          }
        }

        :last-child {
          border-bottom: 1px solid #e7e7e700;
        }
      }

      .table-selectionner>div:nth-child(1) {
        padding-top: 11px;
      }
    }

    // 
    @media screen and(max-width:1300px) {
      flex-wrap: wrap;
      width: calc(100% - 31px);

      .title-reserve {
        margin-bottom: 14px;
        margin-top: 27px;
      }
    }

    @media screen and(max-width:992px) {
      padding-top: 0;


      .selectionner {
        flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: #F8F8F8;
        margin-bottom: 31;
        outline: 16px solid #F8F8F8;
        padding-bottom: 10;
        .list-selectionner {
          max-width: 100%;
          padding-top: 0px;
        }

        .table-selectionner {
          padding-left: 0;
        }

        .list-selectionner {
          ul li {
            padding-left: 0;
            border-bottom: 1px solid #E7E7E7;
            margin-bottom: 0;
            padding: 13px 0;
          }
        }

        .table {
          padding-bottom: 15px !important;

          .title-type {
            width: 50% !important;

            p {
              font-size: 14px !important;
              line-height: 20px !important;
            }

            // span {
            //   margin-top: 3px;
            //   display: block;
            // }
          }

          .prix-type {
            display: unset !important;
            font-size: 18px !important;

          }

          .btn-reserve {
            display: unset !important;

            button {
              padding: 5px 10px !important;
            }
          }

        }
      }

    }
  }

  // Je choisis mon horaire
  .choisis-horaire {
    position: relative;
    max-width: 1165px;
    width: calc(100% - 56px);
    background-color: #F8F8F8;

    margin: auto;
    margin-bottom: 69px;
    display: flex;
    justify-content: space-between;
    padding: 0 23px;
    min-height: 90px;
    align-items: center;

    p {
      font-family: 'Jost';
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 29px;
      text-transform: uppercase;
      color: #000000;

      span {
        color: #EE7D00;
      }
    }

    .text-choisis {
      width: 50%;
    }

    .btn-horaire {
      width: 50%;
      justify-content: right;
      display: flex;

      a {
        background-color: #7E2110;
        color: #fff;
        padding: 9px 41px;
        position: relative;
        z-index: 1;
        font-size: 20px;
      }
    }

    @media screen and(max-width:992px) {
      width: unset;
      flex-wrap: wrap;
      padding-top: 8px;

      padding-bottom: 29px;
      margin-bottom: 0;

      .text-choisis {
        text-align: center;
        width: 100%;
      }

      .btn-horaire {
        width: 100%;
        text-align: center;

        display: unset;
      }
    }
  }
// 


.tab {
  cursor: pointer;
  padding: 8px 16px;

}

/* Style for the tab links when active */
// .active-tab {
//   background-color: #ccc;
//   label{
//     background-color: #ccc;
//   }
// }

/* Style for the content of tabs */
.tab-content {
  display: none;
  
}

/* Show the content when the tab is active */
.active-tab-content {
  display: block;
}
}

// page-panier

.page-panier {
  max-width: 1234px;
  margin: auto;
  margin-top: 67px;
  margin-bottom: 92px;
  width: 100%;

  .hide-trans-div {
    display: none !important
  }

  @media screen and(max-width:992px) {
    margin-bottom: 39px;
    margin-top: 0px;
  }

  .mon-panier {
    display: flex;
    padding-top: 40px;
    background-color: #F8F8F8;
    margin-bottom: 92px;

    @media screen and(max-width:992px) {
      flex-wrap: wrap;
      padding-top: 14px;
    }

    .calendrier {
      width: 30%;
      // height: 670px;
      padding-left: 15px;

      #monthSelect,
      #yearSelect {

        border: none;
        font-family: 'Jost';
        text-transform: capitalize;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
        background-color: transparent;
        cursor: pointer;
        font-family: 'Jost';
      }

      .month-select-container {
        position: relative;
        display: inline-block;
      }

      #yearSelect {
        margin-left: 0;
      }

      #monthSelect,
      #yearSelect {
        appearance: none;
        /* Remove default styling */
        -webkit-appearance: none;
        /* For Safari */
        -moz-appearance: none;
        /* For Firefox */
        // padding: 8px 12px;
        text-align: center;
        border-radius: 4px;
        padding: 0;
       

      }

      #monthSelect option,
      #yearSelect option {
        font-family: sans-serif !important;
        font-size: 14px;
        cursor: pointer;
      }
      .fc-center {
        padding-top: 7px;
        }
        
    
      .fc-toolbar {
        margin-bottom: 2px;
      }

      .fc-next-button:hover,
      .fc-prev-button:hover {
        background-color: #B5B5B52E;
      }

      /* Custom arrow icon */
      .month-select-container::after {
        content: "";
        /* Downward arrow */
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #999;
        pointer-events: none;
      }

      #calendar .fc-day-grid,#calendar2 .fc-day-grid {
        display: none;
        /* Hide the day grid */
      }

      .fc-axis.fc-time.fc-widget-content {
        background-color: #fff !important;
      }

      .fc-widget-content:not(.fc-axis):not(.fc-time) {
        display: flex;
        justify-content: end;
        padding-right: 3px;
        border-right: none;
        background-color: #fff;
      }

      tr.fc-minor {
        display: none;
      }

      .fc-icon.fc-icon-right-single-arrow::after {

        content: "";
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m3.93.599 7.407 7.405L3.93 15.41a.348.348 0 0 0 .492.492l7.652-7.652a.348.348 0 0 0 0-.492L4.422.106a.348.348 0 1 0-.492.492Z'/%3e%3cpath fill='%23000' d='M12.176 8.004a.35.35 0 0 1-.101.247l-7.652 7.651a.348.348 0 0 1-.492-.491l7.406-7.407L3.93.6a.348.348 0 1 1 .492-.492l7.652 7.652a.348.348 0 0 1 .102.245Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z' transform='rotate(-90 8 8)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
        background-position: center;
        width: 20px;
        height: 18px;
        display: block;
      }

      .fc-icon.fc-icon-left-single-arrow::after {

        content: "";
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='M13.029 16.423 5.663 8.978l7.446-7.366a.348.348 0 0 0-.489-.494l-7.693 7.61a.348.348 0 0 0-.003.492l7.61 7.693a.348.348 0 0 0 .503-.48l-.008-.009Z'/%3e%3cpath fill='%23000' d='M4.823 8.973c0-.092.038-.18.103-.246l7.694-7.61a.348.348 0 0 1 .489.495L5.663 8.977l7.366 7.446a.348.348 0 1 1-.495.49l-7.61-7.694a.348.348 0 0 1-.1-.246Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z' transform='rotate(90.312 8.003 8.997)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
        background-position: center;
        width: 20px;
        height: 18px;
        display: block;
      }

      .fc-widget-content.active {
        color: #020202 !important;
        font-weight: 500 !important;
        background-color: #f3f0ef21 !important;
      }

      .fc-widget-content {
        cursor: pointer;
      }

      .fc-scroller {
        height: 227px !important;
      }

      .fc-prev-button,
      .fc-next-button {
        background: none;
        border: none;
        background-color: #f000;
        box-shadow: none;
      }

      .fc-right {
        position: absolute;
        right: 0;
      }

      .fc-toolbar {
        position: relative;
        padding-top: 16px;
      }

      .fc-center {
        font-family: 'Jost';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
      }

      .fc-day-header {
        display: flex;
        margin-bottom: 18px;
      }

      .current-day-circle {
        background-color: #EE7D00;
        border-radius: 100px;
        padding: 6px 2px;
        width: 30px;
        color: #fff !important;
        margin: 0 !important;
        left: 7px;
        position: relative;
      }

      .fc-day-header>div {
        color: #B5B5B5;
        width: 54px;

        p {
          font-family: 'Jost';
          margin-bottom: 10px;
          font-weight: 500;
          font-size: 16px;
          line-height: 23px;
          color: #B5B5B5;
          cursor: pointer;
          margin-top: 16px;
        }
      }

      .fc-slats table tbody tr {
        color: #B5B5B5;
        // border: none;
        padding: 12px;
      }

      .fc-slats table tbody tr td {
        padding: 6px;
        border: none;
      }

      .fc-slats table tbody tr .fc-widget-content {
        border-bottom: 1px solid #DDDDDD;
        border-left: none;
      }

      .fc-slats table tbody tr .fc-time {
        border-right: none;
      }

      th.fc-axis {
        display: none;
      }

      div.fc-widget-header {
        margin-right: 0 !important;
      }

      .fc-widget-header {
        // margin-right: 16px;
        border: none;
      }

      .fc-head-container {
        border: none;
      }

      th.fc-axis {
        border: noz;
      }

      @media screen and(max-width:992px) {
        width: calc(100% - 24px);
        padding: 0;
        height: auto;
        margin: auto;
      }

      .head-calendrier {
        max-width: 269px;
        width: 100%;

        @media screen and(max-width:992px) {
          max-width: 100%;
        }

        p {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 16px;
          line-height: 23px;
          color: #000000;
          margin-bottom: 14px;
        }
      }

      // 
      .body-calendrier {
        max-width: 348px;
        width: 100%;
        height: 389px;
        background-color: #FFFFFF;
        border: 1px solid #DDDDDD;
        overflow: hidden;

        @media screen and(max-width:992px) {
          max-width: 100%;
          height: auto;
        }

      }
    }

    // // // // 
    .list-commande {
      width: 67%;
      padding-right: 53px;
      padding-left: 16px;
      padding-bottom: 51px;

      .title-commande {
        p {
          font-family: 'Playfair Display';
          font-weight: 400;
          font-size: 24px;
          line-height: 32px;
          color: #000000;
        }
      }

      .list-select {
        .table {
          display: flex;
          justify-content: space-between;
          padding-bottom: 27px;
          padding-top: 23px;
          border-bottom: 1px solid #E7E7E7;

          div {
            p {
              font-family: 'Jost';
              font-style: normal;
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;
              text-transform: uppercase;
              padding-bottom: 11px;
              color: #000000;
            }

            span {
              font-family: 'Jost';
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;

              svg {
                vertical-align: sub;
              }

            }

          }

          .title-type {
            max-width: 364px;
            width: 100%;

            P {
              text-align: left;
              width: 100%;
              line-height: 19px;
              display: flex;
              @media screen and(max-width: 768px) {
                font-weight: 400;
                font-size: 14px;
              }
            }
          }

          .user-icon {
            display: block;
            width: 33px;
          }
          .update-hotel{
              cursor: pointer;
          }
          .hotel-res{
            font-family: 'Jost';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 23px;
            text-transform: uppercase;
            color: #000000;

          }
          .prix-type{
            max-width: 194px;
            width: 100%;
            p{
              font-family: 'Playfair Display';
              font-weight: 400;
              font-size: 20px;
              line-height: 27px;
              padding-top: 9px;
              text-align: center;
              /* identical to box height */
              text-transform: uppercase;
              color: #7E2110;
            }
          }
          .qnt-type {
            display: flex;
            width: 100%;
            align-items: center;
            max-width: 189px;
            @media screen and(max-width: 992px) {
              margin-top: 12px;
              display: block;
              .user-icon {
                margin-left: 40px;
              }
            }

            .quantity_inner {
              display: flex;
              justify-content: center;
              gap: 10px;
              background: #ffffff;
              height: 30px;
              max-width: 118px;
              border-radius: 100px;
            }

            .quantity_inner .bt_minus,
            .quantity_inner .bt_plus,
            .quantity_inner .quantity {
              padding: 0;
              width: 28px;
              cursor: pointer;
              border: none;
              outline: 0;
              background: none;
            }

            .quantity_inner .quantity {
              font-family: 'Jost';
              text-align: center;
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;

            }

            .quantity_inner .bt_minus svg,
            .quantity_inner .bt_plus svg {
              stroke: #BFBFBF;
              stroke-width: 1;
              transition: 0.5s;
              margin: 4px;
            }

            .quantity_inner .bt_minus:hover svg,
            .quantity_inner .bt_plus:hover svg {
              stroke: #7E2110;
            }

          }

          // Button
          .btn-close {
            padding-right: 9px;
            display: flex;
            cursor: pointer;
            align-items: center;

            @media screen and(max-width: 768px) {
              position: absolute;
              right: 0px;
              top: 27px;

              svg {
                color: #BABABA;
              }

            }
          }

          @media screen and(max-width:1300px) {

            .title-type,
            .prix-type,
            .qnt-type {
              max-width: unset;
              width: unset;
            }
          }

          @media screen and(max-width: 768px) {
            flex-wrap: wrap;
            position: relative;

            .title-type {
              width: 100%;
            }
          }
        }

        // champ transport
        .transport {
          #hotelres,.prix-type,.btn-close,.update-hotel{
             display: none;
          }
          #prixtypeTran p{
            text-align: left;
            padding-left: 38px;
          }
          @media screen and(max-width: 768px) {
            padding-right: 5px;
          }

          .title-type {
            .navette-texte {
              max-width: 262px;
              display: block;
              font-family: 'Jost';
              font-weight: 400;
              font-size: 16px;
              line-height: 23px;
              color: #000000;

              margin-bottom: 5px;
            }

            .lesinputs {
              input[type="radio"] {
                display: none;
              }

              label {
                cursor: pointer;
                margin-right: 17px;
              }

              label::before {
                content: '';
                display: inline-block;
                width: 13px;
                height: 13px;
                background-color: #ffffff;
                border: 1px solid #D7D7D7;
                border-radius: 50%;
                cursor: pointer;
                margin-right: 2px;
                margin-bottom: -1px;
              }

              input[type="radio"]:checked+label::before {
                content: '';
                background-color: #000000;
                width: 9px;
                height: 9Px;
                border: 3px solid #fff;

                outline: 1px solid #D7D7D7;
                outline-color: rgb(215, 215, 215);
                outline-style: solid;
                outline-width: 1px;
              }

            }

            input {
              cursor: pointer;
            }

            // 
            .lesinpute {
              input[type="radio"] {
                display: none;
              }

              label {
                display: inline-block;
                width: 13px;
                height: 13px;
                background-color: #ffffff;
                border: 1px solid #D7D7D7;
                border-radius: 50%;
                cursor: pointer;
              }

              input[type="radio"]:checked+label {
                background-color: #000000;
                width: 9px;
                height: 9Px;
                border: 3px solid #fff;
                outline: 1px solid #D7D7D7;
                outline-color: rgb(215, 215, 215);
                outline-style: solid;
                outline-width: 1px;
              }

            }

          }

          .qnt-type {
            max-width: 200px !important;
          }

          .select-place {
            max-width: 212px;
            width: 100%;
            padding-top: 17px;
          }

          .form-control {
            font-family: 'Jost';
            font-size: 16px !important;
            line-height: 20px;
            color: #000000;
            display: block;
            width: 100%;

            padding: 8px 0px;
            background-color: transparent;
            border: 1px solid transparent;
            border-bottom: 1px solid #D9D9D9;
            max-width: 318px;
            cursor: pointer;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' viewBox='0 0 16 10'%3e%3cpath fill='%23000' d='M7.996 9.176a.348.348 0 0 1-.247-.102L.098 1.423A.348.348 0 0 1 .589.93l7.407 7.405L15.4.93a.348.348 0 1 1 .492.492L8.241 9.074a.348.348 0 0 1-.245.102Z'/%3e%3c/svg%3e ");            background-repeat: no-repeat;
            background-position: right center;

            @media screen and(max-width: 768px) {
              max-width: 207px;
            }
          }
        }
        .table.viewmode{
          #navette-texteb,#lesinputs,#hidetranspo,#navette-texte{
            display: none;
          }
          #hotelres,#prixtypeTran,.update-hotel{
            display: block;
          }

        }
      }

      .autre-service {


        @media screen and(max-width: 768px) {
          justify-content: center;
          display: flex;
          padding-top: 18px;
          padding-bottom: 23px;
          background-color: #fff;
          outline: 12px solid #FFF;
          // padding-bottom: 61px;                               
        }

        div {
          display: flex;
          padding-top: 21px;
          max-width: max-content;
          cursor: pointer;
          

        
           
          @media screen and(max-width: 768px) {
            padding: 12px 12px;
            background-color: #FFF6E8;
            max-width: 169px;
            justify-content: center;
            font-size: 14px;
            border-radius: 100px;
          }
       
        }

        svg {
          margin-right: 10px;
          cursor: pointer;
          margin-top: 3px;
        }

        a {
          font-family: 'Jost';
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #7E2110;

          &:hover {
            border-bottom: 1px solid;
          }
        }
      }

      .disponibilite {
        max-width: max-content;
        float: right;

        a {
          position: relative;
          z-index: 1;
          display: block;
          text-align: center;
        }

        .price-Total {
          span {
            color: #EE7D00;
          }
        }

        @media screen and(max-width: 768px) {
          display: flex;
          margin: auto;
          float: unset;
          margin-top: 17px;
        }

        p {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 20px;
          padding-bottom: 12px;
          line-height: 29px
        }

        a {
          background-color: #7E2110;
          color: #fff;
          padding: 9px 41px;
        }
      }

      @media screen and(max-width:992px) {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        position: relative;
        width: calc(100% - 31px);
        margin: auto;

        .title-commande {
          display: none;
        }
      }
    }
  }
}

// page-confirmation

.page-confirmation {
  display: flex;
  max-width: 1157px;
  margin: auto;
  padding-top: 117px;
  width: calc(100% - 30px);

  @media screen and(max-width:992px) {
    flex-wrap: wrap;
    padding-top: 26px;
    margin-bottom: 17px;
    .paiement-securise {
      margin: auto;
      order: 2;

    }

    .paiement-reservation {
      margin: auto;
      // width: calc(100% - 30px) !important;
    }
  }


  // .paiement-securise

  .paiement-securise {
    max-width: 641px;
    width: calc(100% - 37px);
    margin-top: -50px;

    @media(max-width:992px) {
      margin-top: 0px;
    }
    @media(max-width:414px) {
      width: 100%;
      margin: auto;
      background-color: #fff;
      margin-top: 0px;
    }


    .head-paiement-securise {
      svg {
        vertical-align: -3px;
      }

      p {
        font-family: 'Playfair Display';
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        color: #000000;
        margin-bottom: 20px;
        @media (max-width:992px) {
          padding-top: 22px;
        }
      }
    }

    .-informations {

      padding-left: 12px;
      padding-right: 13px;
      @media screen and(max-width:414px) {
        padding: 0 18px;
      }
    }

    .-informations,
    .code-promo {
      border: 1px solid #E4E4E4;

      .form {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        width: 100%;
        max-width: 545px;
        padding-top: 36px;
        padding-bottom: 10px;
        justify-content: space-between;

        .group {
          position: relative;
          width: 100%;
          margin-bottom: 45px;
        }

        .form-control {
          font-family: 'Jost';
          font-size: 16px !important;
          line-height: 20px;
          color: #000000;
          display: block;
          width: 100%;
          font-weight: 400;
          padding: 8px 0px;
          text-transform: uppercase;
          font-size: 13px;
          background-color: transparent;
          border: 1px solid transparent;
          border-bottom-color: transparent;
          border-bottom-style: solid;
          border-bottom-width: 1px;
          border-bottom: 1px solid #D9D9D9;
          max-width: 318px;
          cursor: pointer;
          appearance: none;
          -moz-appearance: none;
          /* for Chrome */
          -webkit-appearance: none;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23000' d='m15.401 3.93-7.405 7.406L.59 3.93a.348.348 0 0 0-.492.492l7.652 7.652a.348.348 0 0 0 .492 0l7.652-7.652a.348.348 0 1 0-.492-.492Z'/%3e%3cpath fill='%23000' d='M7.996 12.176a.348.348 0 0 1-.247-.101L.098 4.423a.348.348 0 0 1 .491-.492l7.407 7.405L15.4 3.93a.348.348 0 1 1 .492.492L8.24 12.074a.348.348 0 0 1-.245.102Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
          background-repeat: no-repeat;
          background-position: right center;
        }

        input {
          width: 100%;
          font-size: 14px;
          padding: 10px 0px 10px 0px;
          display: block;
          width: 100%;
          border: none;
          border-bottom: 1px solid #D9D9D9;
          resize: none;
        }

        input:focus {
          outline: none;
        }

        button {
          cursor: pointer;
        }

        /* LABEL */
        label {
          font-family: 'Jost';
          font-size: 16px;
          text-transform: uppercase;
          color: #000000;
          font-weight: 400;
          position: absolute;
          pointer-events: none;
          left: 3px;
          top: 2px;
          transition: 0.2s ease all;

        }

        /* active state */
        input:focus~label,
        input:valid~label,
        textarea:focus~label,
        :valid~label {
          top: -20px;
          font-size: 14px;
          color: #7E2110;
        }

        /* BOTTOM BARS ================================= */
        .bar {
          position: relative;
          display: block;
          width: 100%;
        }

        .bar:before,
        .bar:after {
          content: '';
          height: 1px;
          width: 0;
          bottom: 1px;
          position: absolute;
          background-color: #7E2110;
          transition: 0.2s ease all;
          -moz-transition: 0.2s ease all;
          -webkit-transition: 0.2s ease all;
        }

        .bar:before {
          left: 50%;
        }

        .bar:after {
          right: 50%;
        }

        /* active state */
        input:focus~.bar:before,
        input:focus~.bar:after,
        textarea:focus~.bar:before,
        textarea:focus~.bar:after {
          width: 50%;
        }

        /* HIGHLIGHTER */
        .highlight {
          position: absolute;
          height: 60%;
          width: 100px;
          top: 25%;
          left: 0;
          pointer-events: none;
          opacity: 0.5;
        }

        // /* active state */
        input:focus~.highlight {
          animation: inputHighlighter 0.3s ease;
        }
      }

      .title-informations {
        max-width: 545px;
        margin: auto;
        width: 100%;
        font-family: 'Jost';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 29px;
        color: #EE7D00;
        margin-top: 10px;
      }

      .champ-requis {
        max-width: 548px;
        margin: auto;
        width: 100%;
        font-family: 'Jost';
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #EE7D00;
        text-align: right;
        margin-top: 21px;
      }
    }

    .-Paiement {
      border: 1px solid #E4E4E4;
      margin-top: 26px;
      margin-bottom: 25px;

      .head-card- {

        width: calc(100% - 72px);
        margin: auto;
        padding-top: 35px;
        padding-left: 20px;
        padding-bottom: 20px;
        @media (max-width:776px) {
          padding-top: 14px;
          margin: 0;
          
        }
        :first-child {
          width: 100%;
          display: flex;
          justify-content: space-between;
          @media (max-width:776px) {
            flex-wrap: wrap;
  
          }
        }

        :nth-child(2) {
          p {

            font-family: 'Jost';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;

            color: #000000;
          }
        }

        .title-paiements {
          font-family: 'Jost';
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 29px;
          color: #EE7D00;
          width: max-content;

          @media screen and(max-width:414px) {
            width: 100%;

          }
        }

        .paiements-securite {
          display: flex;
          font-family: 'Jost';
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #7FA930;

          @media screen and(max-width:414px) {
            margin-bottom: 6px;
          }

          svg {
            width: max-content;
            padding-right: 6px;
          }
        }

        @media screen and(max-width:414px) {
          padding-top: 11px;
          margin: 0;

          :first-child {
            flex-wrap: wrap;
          }
        }
      }

      .form-paiement {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 67px);
        max-width: 545px;
        // padding-top: 36px;
        // padding-bottom: 10px;
        justify-content: space-between;
         margin: auto;
        .secnd-child {
          width: 100%;

          .payer-par-carte {
            display: flex;
            border-bottom: 1px solid #D9D9D9;

            padding-bottom: 24px;
            padding-top: 25px;
            width: 100%;
            margin: auto;

            @media screen and(max-width:414px) {
              padding-bottom: 19px;

              .chekbox-payer {
                padding-right: 9px;
              }

            }

            .chekbox-payer {

              input {
                cursor: pointer;
              }


            }

            .chekbox-payer input[type="radio"] {
              display: none;
            }

            .chekbox-payer label {
              display: inline-block;
              width: 13px;
              height: 13px;
              background-color: #ffffff;
              border: 1px solid #D7D7D7;
              border-radius: 50%;
              cursor: pointer;
            }

            .chekbox-payer input[type="radio"]:checked+label {
              background-color: #000000;
              width: 9px;
              height: 9Px;
              border: 3px solid #fff;
              outline: 1px solid #D7D7D7;
              outline-color: rgb(215, 215, 215);
              outline-style: solid;
              outline-width: 1px;
            }

            .title-payer {
              width: 50%;
              padding-left: 10px;

              @media screen and(max-width:414px) {
                width: max-content;
                padding: 0;

              }

              .strong {
                font-size: 20px;
              }

              p {
                font-family: 'Jost';
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #000000;

              }

            }

            .carte-payment {
              width: 50%;

              ul {
                display: flex;
                justify-content: right;

                svg {
                  margin-right: 8px;
                }
              }
            }
          }

          .payer-par-carte.sur-place {
            padding-bottom: 39px;
            border-bottom: none;

            @media screen and(max-width:414px) {
              padding-bottom: 19px;
            }
          }

        }

        @media screen and(max-width:414px) {
          width: calc(100% - 23px);
        }
      }
    }

    // 
    .code-promo {
      border: none
    }

    .code-promo,
    .politiques {
      .item_show {
        margin: 0 0 26px 0;
        background: #FFFFFF;
        min-height: 70px;
        position: relative;
        border: 1px solid #E4E4E4;
        cursor: pointer;

        .title {
          display: flex;
          align-items: center;
          padding: 24px 51px;

          @media screen and(max-width:414px) {
            padding: 24px 12px;
            padding-right: 29px;
          }

          P {
            font-family: 'Jost';
            font-weight: 400;
            font-size: 20px;
            line-height: 29px;
            color: #000000;
          }

          .svg_close {
            position: absolute;
            right: 10px;
            transition: transform 0.5s ease-in-out;
          }

          .svg_close.rotate {
            transform: rotate(-90deg);
            transform-origin: 15px 23px;
          }
        }

        .form {
          .group {
            margin-bottom: 0;
          }

        }

        .content {
          padding: 24px 51px;
          padding-top: 8px;

          .text-module_ {
            font-size: 20px;
            font-weight: 400;
          }

          button {
            margin-top: 24px;
            background: #7E2110;
            padding: 7px 44px;
            display: block;
            width: max-content;
            font-size: 20px;
            font-weight: 400;
            color: #FFFFFF;
            font-family: 'Jost';
            border: none;
          }

          @media screen and(max-width:414px) {
            padding: 24px 12px;
          }
        }
      }
    }
    #errorIcon {
      display: none;
      margin-top: 5px;
  }
  
  .input-error #errorIcon {
      display: inline;
  }
    // chek

    .chek-email-validation {
      border: 1px solid #E4E4E4;

      .chek-email-body {
        max-width: 579px;
        width: 100%;
        margin: auto;
        display: flex;
        padding: 21px 1px;

        .input-email input[type="checkbox"] {
          display: none;
        }

        .input-email label {
          display: inline-block;
          width: 13px;
          height: 13px;
          background-color: #ffffff;
          border: 1px solid #000000;
          border-radius: 2px;
          cursor: pointer;
        }

        .input-email input[type="checkbox"]:checked+label {
          background-color: #7E2110;
          border: 1px solid #7E2110;
        }

        @media screen and(max-width:992px) {
          .input-email {
            padding-left: 6px;
          }
        }

        input {
          cursor: pointer;

          @media screen and(max-width:414px) {
            padding-left: 5px;
          }

        }
      }

      .content-chek-email {
        padding-left: 12px;

        @media screen and(max-width:992px) {
          padding: 0px 15px;
          padding-left: 9px;
        }

        a {
          text-decoration: underline;
        }

        p {
          font-family: 'Jost';
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #000000;
        }

        :nth-child(1) {
          margin-bottom: 23px;
        }
      }
    }

    // acceptez-conditions
    .acceptez-conditions {

      @media screen and(max-width:992px) {
        margin-bottom: 42px;
      }

      P {
        padding-top: 15px;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #000000;

        a {
          color: #EE7D00;
          text-decoration: underline;
        }
      }

    }

    // btn-reglermaintenant
    .btn-reglermaintenant {
      padding-bottom: 100px;
      padding-top: 20px;

      .total-prix {
        font-size: 20px;
        text-align: center;

        // border-bottom:none ;
        span {
          color: #EE7D00;
        }

        @media screen and(min-width:992px) {
          display: none;
        }
      }

      .btn- {
        position: relative;
        z-index: 1;
        // margin-top: 24px;
        background: #7E2110;
        padding: 7px 44px;
        display: block;
        width: max-content;
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        font-family: 'Jost';
        border: none;
        cursor: pointer;
      }

      @media screen and(max-width:992px) {
        padding-top: 15px;
        padding-bottom: 17px;
        background-color: #F8F8F8;
        outline-width: 14px;
        outline-color: #F8F8F8;
        outline-style: solid;

        .btn- {
          margin: auto;
          margin-top: 13px;
          padding: 7px 56px;
        }
      }
    }
  }

  //  .paiement-reservatio
  .paiement-reservation {
    max-width: 516px;
    width: 100%;

    .item-child {
      max-width: 476px;
      margin: auto;
      background: #FFFFFF;
      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
      // padding-bottom: 26px;
    }

    .title-reservation {
      width: 100%;
      text-align: center;
      padding-top: 30px;

      p {
        font-family: 'Playfair Display';
        font-weight: 400;
        font-size: 32px;
        line-height: 43px;
        color: #7E2110;


      }
    }

    // date-reservation-reservation
    .date-reservation-reservation {
      display: flex;
      // width: 50%;
      margin: auto;
      padding-top: 36px;
      font-family: 'Jost';

      @media screen and(max-width:992px) {
        width: 80%;
      }

      .time {
        width: 50%;
        text-align: center;

        @media screen and(max-width:414px) {
          padding: 0;

          p {
            padding-left: 25px;
          }
        }

        p {
          padding-left: 109px;
          font-weight: 400;
          font-size: 32px;
          line-height: 46px;
          @media screen and(max-width:992px) {
            padding-left: 46px;
          }
  
        }
      }

      .date {
        width: 50%;
        // text-align: center;
        padding-left: 17px;
        border-left: 1px solid#D9D9D9;

        p {
          font-weight: 400;
          font-size: 16px;
          line-height: 23px;

        }
      }


    }

    // choise-date-reservation
    .choise-date-reservation {
      a {
        display: block;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        text-decoration-line: underline;
        color: #781732;
        padding-top: 15px;

        &:hover {
          color: #F5A422;
        }
      }

    }

    // select table
    .table-select-reservation {
      padding-top: 26px;

      .table-res {
        display: flex;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 24px;
        padding-top: 25px;
        width: calc(100% - 82px);
        margin: auto;

       
       
        @media screen and(max-width:414px) {
          width: calc(100% - 42px);
        }

        .name-reservation {
          width: 50%;

          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 23px;
            text-transform: uppercase;

          }

          p:nth-child(1) {
            padding-bottom: 9px;
          }

          svg {
            vertical-align: sub;
          }
        }

        .prix-reservation {
          width: 50%;
          text-align: right;

          p {
            font-weight: 400;
            font-size: 20px;
            line-height: 29px;
            color: #7E2110;
          }
        }
      }
      .table-res:nth-last-child(2){
        @media screen and(max-width:992px) {
          border: none;
          }
  
      }
      
      .total-prix {

        border-bottom: none;

        @media screen and(max-width:992px) {
          display: none;
        }
      }
      
      
    }
   
  }


  .page-loading {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(25, 25, 25, 0.5);
    z-index: 300 !important;
    .inner {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }
  
    .content {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  
    .spinner {
      width: 75px;
      height: 75px;
      display: inline-block;
      border-width: 2px;
      border-color: rgba(255, 255, 255, 0.05);
      border-top-color: #fff;
      animation: spin 1s infinite linear;
      border-radius: 100%;
      border-style: solid;
    }
  }
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  .error {
    color: #ce1f1f;
    font-size: 12px;
    font-weight: 300;
    margin-top: 10px;
    svg {
      vertical-align: -4px;
    }
    &:not(.active) {
      display: none;
    }
  }

  .promo{
    display: flex;
    color: #EE7D00;
    
    padding-top: 20px;
    justify-content: space-between;
   
    border-bottom: 1px solid;
    padding-bottom: 20px;
    width: calc(100% - 82px);
    margin: auto;
  }
  .no-valid{
    top: 2px !important;
    font-size: 16px !important;
    color: #000 !important;
  }
  form input:focus ~ .no-valid{
    top: -20px !important;
    font-size: 14px !important;
    color: #7E2110 !important;
  }
}


// 404
.page-404 {
  max-width: 740px;
  width: 100%;
  margin: auto;

  .svg {
    width: max-content;
    margin: auto;

    svg {
      @media screen and(max-width:767px) {
        max-width: 359px;
        width: 100%;
      }
    }

  }

  .text-404 {
    text-align: center;

    .title {
      font-family: 'Playfair Display';
      font-weight: 400;
      font-size: 32px;
      line-height: 43px;
      color: #EE7D00;
      margin-bottom: 7px;

      @media screen and(max-width:767px) {
        font-size: 26px;
        line-height: 35px;
      }
    }

    .info {
      font-size: 14px;
      padding: 0 12px;
    }
  }

  .btn-404 {
    max-width: max-content;
    width: 100%;
    margin: auto;
    margin-bottom: 146px;

    a {
      margin-top: 24px;
      background: #7E2110;
      padding: 7px 44px;
      display: block;
      width: max-content;
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      font-family: 'Jost';

      @media screen and(max-width:767px) {
        padding: 4px 20px;
      }

      svg {
        vertical-align: -2px;


      }
    }

  }
}
// page-valeurs

.page-valeurs{
 max-width: 1440px;
 margin: auto;
 .intro{
  max-width: 1440px;
  width: 100%;
  margin: auto;
  .title-intro{
    color: #7E2110;
    font-family: Playfair Display;
    font-size: 24px;
    font-style: normal;
    font-weight: 400; 
    padding-top: 90px;
    display: block;
    margin-bottom: 7px;
   
    @media screen and(max-width:767px) {
      padding-top: 40px;
    }
   }
   @media screen and(max-width:1476px) {
    width: calc(100% - 54px);
   }
 
 }
 
 .content-page{
  max-width:1068px;
  width: calc(100% - 53px);
  margin: auto;
  margin-top: 68px;
  @media screen and(max-width:767px) {
    margin-top: 35px;
  }

  .child{
    margin-bottom: 68px;
    display: flex;
    background: #FFF;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
    padding: 36px; 
   
    .img{
      max-width: 245px;
      width: 100%;
      display: flex;
      justify-content: center;
      @media screen and(max-width:992px) {
        margin-bottom: 11px;
       }
    } 
    .text{
      .title{
          color: #7E2110;
          font-family: Playfair Display;
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: normal; 
          margin-bottom: 12px;
          display: block;
      }
    }
    .espace-privatif{
      padding-top: 8px;
    }
    @media screen and(max-width:767px) {
      margin-bottom: 35px;
      flex-wrap: wrap;
      .text{
        text-align: center;
      }
      .img{
        max-width: unset;
      }
    } 
  }
  .text-bottom{
    max-width: 915px;
    width: 100%;
    margin: auto;
    margin-bottom: 90px;
    blockquote{
      margin: 0;
      p{
        color: #000;
        text-align: center;
        font-family: Jost;
        font-size: 24px;
        font-style: italic;
        line-height: 31px;
       
      }
      .quote{
        color: #F5A422;
        font-family: Playfair Display;
        font-size: 64px;
        font-style: normal;
      } 
    }
  
 
  }
 }
}

// page equipe
.page-equipe,.page-lieu,.page-Comment-acc{
  max-width: 1440px;
  margin: auto;
  width: 100%;
  .content-page{
    max-width: 1214px;
    width:100%;
    margin: auto;
    margin-top: 96px;
    position: relative;
    @media screen and(max-width:992px) {
      margin-top: 35px;
      width: calc(100% - 36px);
    }
   }
   .intro{
    max-width: 1440px;
    @media screen and(max-width:1492px) {
     width: calc(100% - 33px);
    }
    margin: auto;
    .title-intro{
      color: #7E2110;
      font-family: Playfair Display;
      font-size: 24px;
      font-style: normal;
      font-weight: 400; 
      padding-top: 90px;
      display: block;
      margin-bottom: 12px;
     
      @media screen and(max-width:992px) {
        padding-top: 30px;
      }
     }
     .text-bold{
      font-weight:600 ;
      margin-top: 22px;
     
    }
     p{
      color: #000; 
      font-size: 18px;
      font-weight: 400; 
      a{
        text-decoration-line: underline; 
      }
     }
   }
 

   .block{
    display: flex;  
    align-items: center;
    margin-bottom: 69px;
    @media screen and(max-width:992px) {
      margin-bottom: 34px;
    } 
     .text-block{
      background: #FFF;
      box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
      padding-top: 30px;
      padding-bottom: 39px;
      padding-left: 52px;
      max-width: 707px;
      width: 100%;
      z-index: 2;
      position: absolute;

      @media screen and(max-width:992px) {
        
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      p{
        max-width: 603px;
        width: 100%;
      }
      .title {
        color: #7E2110;
        font-family: Playfair Display;
        font-size: 32px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 12px;
        display: block;
       }
     }   
     .img-block{
      margin: 0 0 auto auto;
      img{
        width: 100%;
        height: auto;
      }
      
      }
      @media screen and(max-width:992px) {
        flex-wrap: wrap;
        .text-block{
          position: relative;
          order: 2;
          margin: auto;
          max-width: 617px;
          transform: translateY(0) !important;
          // max-width: 602px;
          padding: 11px;
          .title{
            font-size: 25px;
          }
         
        }
        .img-block{
          margin:auto;
          }
          .img-block-revers{
            img{
             width: 100%;
             height: auto;
            }
       }
      }

    }
    .block2{
      align-items: start;
      .text-block{
        right: 0;
        transform: translateY(-14px);
        max-width: 559px;
        padding-right: 46px;
        padding-left: 28px;
        
        @media screen and(max-width:992px) {
          max-width: 620px;
        }
      }
      .img-block-revers{
        @media screen and(max-width:992px) {
          margin:auto;
        }
      }
      
    }
    .block3{
      align-items: start;
      .text-block{
        transform: translate(55px, -16px);
        z-index: 2;
        padding-left: 21px;
        padding-right: 21px;
        max-width: 618px;
      }
      .img-block-revers{
        margin: 0 0 auto auto;
        @media screen and(max-width:992px) {
          margin:auto;
        }
      }
    }
    .block4{
      .img-block{
        transform: translateX(0);
        margin: auto 0;
        @media screen and(max-width:992px) {
          margin:auto;
        }
      }
      .text-block{
        right: 0;
        max-width: 599px;
        transform: translateX(-3px);
        padding-left: 24px;
        padding-right: 24px;
        @media screen and(max-width:992px) {
          max-width: 621px;
        }
      }
      
     }
    .block5{
      .text-block{
        padding-left: 32px;
        padding-right: 33px;
        max-width: 623px;
        @media screen and(max-width:992px) {
          max-width: 621px;
          
        }
        .title{
          padding-right: 78px;
        }
        b{font-size: 16px;
          font-weight: 600;
        }
      }
    }
}
// page lieu
.page-lieu,.page-Comment-acc{
  .content-page{
    max-width:1268px;

    @media screen and(max-width:1248px) {
      margin-top: 22px;
    }
   .title{
    color: #7E2110;
    font-family: Playfair Display;
    font-size: 32px;
    font-weight: 400;
    @media screen and(max-width:776px) {
      font-size: 24px;
    }
   }
   }
   .block-lieu,.block-reverse-lieu{
    margin-bottom: 70px;
    display: flex;
    .img-block{
      margin: 0 0 auto auto;
      @media screen and(max-width:1248px) {
        margin: 0;
        order: 2;
        img{
          width:100%;
          height: auto;
        }
      }
    
      
     }
    @media screen and(max-width:1248px) {
      flex-wrap: wrap;
      margin-bottom: 10px;
      .text-block{
       margin: 0;
       
      }
    }
    @media screen and(max-width:776px) {
      margin-bottom: 0px;
    }
    .text-block{
      background: #FFF;
      padding-top: 17px;
      .title{
        margin-bottom: 10px;
        
      }
      
      .info-text{
        background: #FFF;
        box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
        padding-top: 30px;
        padding-bottom: 39px;
        padding-left: 24px;
        max-width: 602px;
        padding-right: 21px;
        width: 100%;
        z-index: 2;
        position: absolute;
        transform: translateX(129px);
        @media screen and(max-width:1248px) {
          position: relative;
          transform: translateX(0);
          width: calc(100% - 42px);
           background-color: transparent;
          padding-left: 0;
          box-shadow:none
        }
        @media screen and(max-width:992px) {
          padding-top: 0px;
          padding-bottom: 12px;
          background: transparent;
        }
      }
      .no-transform{
        transform: translateX(0) !important;
      }
    }
    
   }
   .block-reverse-lieu{
    .info-text{
      transform: translateX(-69px) !important;
      @media screen and(max-width:1248px) {
        transform: translateX(0) !important;
        margin: 0;
        // width: calc(100% - 42px);
      }
      
    }
    .title p{
      padding-left: 29px;
      padding-right: 60px;
      margin-top: -23px;
      @media screen and(max-width:1248px) {
        padding-left: 0px;
        padding-right: 0px;
      }
    }
    .img-block{
      margin: 0 0 auto 0;
      @media screen and(max-width:1248px) {
        margin:0
      }
    }
    .text-block {
      padding-top: 8px;
      @media screen and(max-width:1248px) {
        margin: 0;
        margin-top: 27px;
      }
    }
    @media screen and(max-width:776px) {
      .img-block{
        order: 2;
      }
    }
   }
   .block-lieu.text-larg{
    .text-block{
      padding-top: 0px;
      @media screen and(max-width:1248px) {
        .info-text{
          margin: 0;
        }
        
      }
    }
   }
}
// page comment_ac
.page-Comment-acc{
  .intro{
      p{
        margin-bottom: 14px;
      }
  }
  .content-page{
    max-width: 1440px;
    margin-top: 79px;
    @media screen and(max-width:1270px) {
      margin-top: 2px;
      width: calc(100% - 36px);
    }

  }
  
  .block-lieu {
    max-width:1268px;
    margin: auto  ;
    margin-bottom: 76px;
    @media screen and(max-width:992px) {
      margin-bottom: 20px;
    }
    .text-block {
      padding-top: 19px;
      @media screen and(max-width:992px) {
        padding-top: 0;
      }
      .info-text {
        max-width: 656px;
        z-index: 4;
        p{
          margin-bottom: 23px;
          a{
            font-weight: 600; 
          }
        }
      }
    }

    .map-block{
    position: relative;
    z-index: 1;
    margin: 0 0 auto auto;
    #map{
      width: 744px; 
      height:502px; 
      .leaflet-routing-container {
        display: none;
        }
    }
    @media screen and(max-width:1270px) {
      width: calc(100% - -4px);
      margin: 0 auto;
      min-height: 502px;
      #map{
      width: 100%;
      height:100%;
      }
    }
    
    }
  }
// block-lieu
  .block-reservation{ 
    .intro-block-reservation{
      margin-bottom: 53px;
      .title-intro{
        color: #7E2110;
        font-family: Playfair Display;
        font-size: 32px;
        margin-bottom: 12px;
        @media screen and(max-width:776px) {
          font-size: 24px;
        }
      }
      p{
        max-width: 1337px;
      }
    }
    .block-contact{
      // max-width: 1249px;
      // margin: auto;
      display: flex;
      margin-bottom: 53px;
      @media screen and(max-width:992px) {
        flex-wrap: wrap;
        justify-content: center;
      }
        .box{
           flex: 1;
           text-align: center;
           @media screen and(max-width:992px) {
            flex: none;
            margin-bottom: 23px;
           }
           .svg-box{
            min-height: 120px;
           }
           .text--box{
            max-width: 250px;
            margin: auto;
            a{
              font-weight: 600;
            }
           }
         
        }
        .email-info{
          a{
            text-decoration-line: underline; 
          }
         }
    }
  }
}


.footer-resrvation {
  background: #000000;
  .content-resrvation {
    display: flex;
    margin: auto;
    max-width: 1440px;
    width: calc(100% - 24px);
    padding: 12px 0;

    @media screen and(max-width:414px) {
      text-align: center;
    }

    div {
      width: 50%;

      p {
        font-family: 'Jost';
        font-weight: 400;
        font-size: 13px;
        line-height: 19px;
        text-transform: uppercase;
        color: #FFFFFF;
        margin-top: 8px;

        span {
          text-transform: lowercase;
        }
      }


    }

    .payment-footer {
      display: flex;
      justify-content: right;

      img {
        padding-right: 18px;
      }
    }
  }

  @media screen and(max-width:992px) {
    div {
      width: calc(100% - 24px) !important;
    }

    .payment-footer {
      display: none !important;
    }
  }

}