@charset "UTF-8";

html {overflow-x: hidden}

/* Add custom fonts */

/*
      @font-face {
          font-family: 'ITC Avant Garde Std Book';
          src: url('fonts/ITCAvantGardeStd-Bk.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
      }

      @font-face {
          font-family: 'ITC Avant Garde Std Bold';
          src: url('fonts/ITCAvantGardeStd-Bold.ttf') format('truetype');
          font-weight: bold;
          font-style: normal;
          font-display: swap;
      }

      @font-face {
          font-family: 'ITC Avant Garde Std Medium';
          src: url('fonts/ITCAvantGardeStd-Md.ttf') format('truetype');
          font-weight: 500;
          font-style: normal;
          font-display: swap;
      }
*/

/* Add this CSS to your stylesheet or within a <style> tag in your HTML */
.leaflet-top.leaflet-right {
    top: 50%;
    transform: translateY(-50%);
}

.leaflet-popup-close-button span {color: white}

.interactive-map.hero {text-align: center; background: #8d7c6d;}
.interactive-map.hero img {width: 100%; max-width: 1800px}

.container2 .row {padding-top: 20px; padding-bottom: 20px; margin:auto}

#interactive-map {
position: relative;
z-index: 2;
overflow-x: hidden;
}


#interactive-map .h1,
#interactive-map h3 {
font-size: clamp(16px, 7vw, 20px);
line-height: 1;
margin-bottom: 0;
color : #333
}


#interactive-map .h1 {
  line-height: 1.2;
  margin-bottom: 8px;
}

#interactive-map p, #interactive-map li, #interactive-map li a, #interactive-map label {
    color: #555;
}

#interactive-map .h1, #interactive-map h2, #interactive-map h3, #interactive-map b {
font-family: "ITC Avant Garde Std Bold", sans-serif!important;
font-optical-sizing: auto;
font-style: normal;
}

#interactive-map p, #interactive-map a {
font-family: "ITC Avant Garde Std Book", sans-serif!important;
}

#interactive-map label {
font-family: 'ITC Avant Garde Std Medium', sans-serif!important;
}

.d-flex {
  display:flex;
  width: 100%;
}

.gap-2 {
    gap: .5rem !important;
}

.px-2 {padding-left: 8px;padding-right:8px}
.py-2 {padding-top: 8px;padding-bottom:8px}

.px-4 {padding-left: 16px;padding-left:16px}
.py-4 {padding-top: 16px;padding-bottom:16px}

.pt-2 {padding-top: 8px}

.mt-4 {margin-top: 16px}
.mb-8 {margin-bottom: 32px}

.text-center {text-align: center}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: black;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    background: white;
}

.leaflet-control-attribution { display: none; }

.font-size-10 {
font-size: 10px; }

.font-size-11 {
font-size: 11px; }

.font-size-12 {
font-size: 12px; }

.font-size-13 {
font-size: 13px; }

.font-size-14 {
font-size: 14px; }

.font-size-15 {
font-size: 15px; }

.font-size-16 {
font-size: 16px; }

.font-size-17 {
font-size: 17px; }

.font-size-18 {
font-size: 18px; }

.font-size-19 {
font-size: 19px; }

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

.font-size-21 {
font-size: 21px; }

.font-size-22 {
font-size: 22px; }

.font-size-23 {
font-size: 23px; }

.font-size-24 {
font-size: 24px; }

.font-size-25 {
font-size: 25px; }

.font-size-26 {
font-size: 26px; }

.font-size-27 {
font-size: 27px; }

.font-size-28 {
font-size: 28px; }

.font-size-29 {
font-size: 29px; }

.font-size-30 {
font-size: 30px; }

.font-size-31 {
font-size: 31px; }

.font-size-32 {
font-size: 32px; }

.font-size-33 {
font-size: 33px; }

.font-size-34 {
font-size: 34px; }

.font-size-35 {
font-size: 35px; }

.font-size-36 {
font-size: 36px; }

body {
margin: 0;
}

p {
  margin-bottom: 0!important;
}

#map {
  height: 100vh;
}

.map-wrapper {
    position: relative;
    height: 100vh; /* ou la hauteur voulue */
    overflow: hidden;
}


.marker-label {
display: inline-block;
padding: 5px;
border-radius: 5px; }

#interactive-map .icon {
position: absolute;
border-radius: 100px;
padding: 2px;
}

.overlap { display: none!important; }



#list-results, #informations {
width: 30%;
background: white;
position: absolute;
transition: all 0.5s ease;
transform: translateX(-100%);
width: 400px;
z-index: 406;
height: 100%;
margin-top: 80px
}

#list-results {
max-width: 100vh;
line-height: 1;
top: 0
}

#list-results .list__content {
  overflow: auto;
  height: 92%;
}

.list__content p {
margin-bottom:20px!important
}

.thumbnail {margin-bottom: 0;padding:0}

#informations {
  border-radius:24px;
  overflow: auto;
  top: 80px;
  height: 88%;
}

#informations .d-flex {
  justify-content: space-between;
}

#informations label.d-flex {
  justify-content: start;
}

#list-results p {
margin: 8px;
font-size: 14px;
color: grey;
margin-left: 0;
line-height: 1.4;
}

#list-results.slide-left, #informations.slide-left {
transform: translateX(0);
}

.results-count {
  margin-top: 0!important;
  padding-top: 12px;
  padding-left: 12px;
}

.infos-close {
  position: absolute;
  right: -28px;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  text-align: center;
  line-height: 1;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
}

#informations .image-container {
  max-height: 280px;
  object-fit: cover;
  position: relative;
}

#informations.slide-left {
  margin-left: 10px;
  height: 100%;
}

#list-results .image-container img, #informations .image-container img {
height: 160px;
object-fit: cover;
width: 100%;
}

#interactive-map .list-item {
transition-duration: 0.3s;
}

.list-item:last-child {margin-bottom: 20px}

.list-item .image-container {overflow: hidden}

.list-item img {transition-duration: 0.3s;}
.list-item:hover img {
transform: scale(1.1);
transition-duration: 0.3s;
}

.leaflet-popup-content {
margin: 0;
width: 100%!important;
font-size: inherit
}

.leaflet-popup-content .entry-content {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }

.leaflet-popup-content p {
  font-size: 12px;
  margin: 4px 0 4px 0
}

.leaflet-popup-content-wrapper {
  width: 308px;
}

.leaflet-popup-content .image-container img {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  max-height: 140px;
}

#interactive-map .label {
width: 130px;
position: relative;

}

span.coordinates {
display: none;
}


.svg.restaurants::before,
.leaflet-popup .restauration::before,
#informations .restauration::after {
    content: "";
    display: block;
    width: 40px;
    height: 35px;

    background-image: url("png/restaurants.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.svg.distilleries::before,
.leaflet-popup .distilleries::before,
#informations .distilleries::after {
    content: "";
    display: block;
    width: 40px;
    height: 35px;

    background-image: url("png/distilleries.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.svg.boutiques::before,
.leaflet-popup .boutiques::before,
#informations .boutiques::after {
    content: "";
    display: block;
    width: 40px;
    height: 35px;

    background-image: url("png/boutiques.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.svg.producteurs::before,
.leaflet-popup .producteurs::before,
#informations .producteurs::after {
    content: "";
    display: block;
    width: 40px;
    height: 35px;

    background-image: url("png/producteurs.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.svg.moulinsahuiledenoix::before,
.leaflet-popup .moulinsahuiledenoix::before,
#informations .moulinsàhuiledenoix::after {
    content: "";
    display: block;
    width: 40px;
    height: 35px;

    background-image: url("png/moulinsahuiledenoix.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*
.svg.restaurants::before, .leaflet-popup .restauration::before, #informations .restauration::after {
content: "";
background-image: url("svg/restaurants.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}

.svg.distilleries::before, .leaflet-popup .distilleries::before, #informations .distilleries::after {
content: "";
background-image: url("svg/distilleries.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}

.svg.boutiques::before, .leaflet-popup .boutiques::before, #informations .boutiques::after {
content: "";
background-image: url("svg/boutiques.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}


.svg.producteurs::before, .leaflet-popup .producteurs::before, #informations .producteurs::after {
content: "";
background-image: url("svg/producteurs.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}

.svg.moulinsahuiledenoix::before, .leaflet-popup .moulinsahuiledenoix::before, #informations .moulinsàhuiledenoix::after {
content: "";
background-image: url("svg/moulinsahuiledenoix.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}
*/

.svg.rencontrer::before, .leaflet-popup .rencontrerleschasselatiers::before, #informations .rencontrerleschasselatiers::after {
content: "";
background-image: url("svg/walkin.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}

.svg.sejourner::before, .leaflet-popup .séjourner::before, #informations .séjourner::after  {
content: "";
background-image: url("svg/bed.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}

.svg.restaurant::before, .leaflet-popup .serestaurer::before, #informations .serestaurer::after {
content: "";
background-image: url("svg/restaurant.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}


.svg.shopping::before, .leaflet-popup .pointdevente::before, #informations .pointdevente::after  {
content: "";
background-image: url("svg/shopping.svg");
background-repeat: no-repeat;
width: 50px;
height: 35px;
display: block;
}


.svg::before {

  z-index: 2;
  position: relative;

}

.svg.officedetourisme::before, .leaflet-popup .officedetourisme::before, #informations .officedetourisme::after  {
content: "";
background-image: url("svg/info.svg");
background-repeat: no-repeat;
width: 30px;
height: 35px;
display: block;
background-size: contain;
}


.label-filter .svg::before {
width: 30px;
height: 20px!important;
}


#informations .typo-icon {
    position: relative;
    top: -8px;
    left: 4px;
    right: 0;
}

.typo-icon:before {  margin-bottom: 10px;}

#informations .info-icon:before {
  content: "";
  background-repeat: no-repeat;
  width: 20px;
  height: 15px;
  background-size: contain;

}

#informations .entry-content {
  padding: 36px;
  overflow: auto;
  min-height: 600px;
}

.underlined {text-decoration: underline}

.address:before {

background-image: url("svg/address.svg");

}

.hours:before {

  background-image: url("svg/hours.svg");

}

.website:before {

  background-image: url("svg/website.svg");

}

.contact:before {

  background-image: url("svg/contact.svg");

}

.svg.map-marker {
  top: -20px;
  position: relative;
  left: -24px;
}

.svg.map-marker:hover {
  top: -12px;
  position: relative;
  transition: .3s
}

.svg.map-marker::before {
content: "";
background-image: url("svg/map-marker.svg");
background-size: cover;
background-repeat: no-repeat;
width: 30px;
height: 35px;
display: inline-block;
z-index: 222
}

.search {
position: absolute;
top: 24px;
left: 24px;
z-index: 401;
width: 348px;
}


input {
border: 0;
}


.search__container {
background: white;
width: auto;
border: 1px solid black;
display: flex;
justify-content: space-between;
}

.search input {
  outline: none;
  width: 100%;
}

.search .search__container::after {
position: relative;
content: "";
background-image: url("svg/search.svg");
background-size: cover;
background-repeat: no-repeat;
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
right: 12px;
}

.icon i {
padding: 8px;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
}

#interactive-map hr {
margin: 0; }

/*
.custom-icon {
background-color: #d9c93a;
 padding: 6px 7px;
} */
/* Add animation and styling for the .fa-map-marker-alt class */
.icon i.fa-map-marker-alt {
position: relative;
font-size: 35px;
background: transparent;
color: red;
top: -24px;
right: 10px; }

.icon.active {
background: transparent; }

.icon i.fa-map-marker-alt::before {
/*  content: "\f3c5"; */
position: relative;
top: -24px;
left: -8px;
transition: top 0.3s ease; }

/* Add hover effect for demonstration purposes */
.icon i.fa-map-marker-alt:hover::before {
top: -33px;
/* Move the icon upwards on hover */
transition: top 0.3s ease; }

#filters {
position: absolute;
top: 30px;
z-index: 400;
left: 35%;
white-space: nowrap;
width: max-content;
z-index: 1200;
}

#filters button {
background: white;
border: none;
display: flex;
border-radius: 16px;
align-items: center;
}

pre {
  overflow: hidden!important;
  display: block;
  padding: 0;
  margin: 0;
  color: #333;
  font-size: 13px;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

#showall {

margin: auto;

}

#filters button {
color: black;
border-radius: 32px;
}

#filters button.active {
background: #585858;
color: white
/* Box shadow */ }

#filters .fas {
color: black;
background-color: transparent;
}

#filters #all  {display:none}

.br-16 {
border-radius: 16px; }

.br-32 {
border-radius: 32px; }

/* For WebKit browsers (Chrome, Safari, etc.) */
/* You can customize width, height, colors, etc. */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: lightgrey;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.no-desktop {
display: none;
}

.filter-right-icon, .filter-left-icon {display: none}


.back-to-top {
    position: fixed;
    bottom: 0;
    right: 20px;
    display: none;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    z-index: 1000;
    background: white;
}

#footer-default {

  z-index: 4;
  position: relative;

}

.news-v3 {padding-top: 16px}

.single-back {
  font-family: system-ui!important;
  position: absolute;
  outline: none;
  border: 0;
  top: 10px;
  left: 10px;
}

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

  #list-results, #informations, .search {
    position: absolute;
    left: 0;
    width: 100%;
  }
  #list-results, #informations {
      top: 50vh;
  }

  .search {
    top: 52vh;
    left: 10vw;
    width: 80%;
  }

  .search input {
      font-size: 12px;
  }

  .results-count {
    margin-top: 0!important;
    padding-top: 5px!important;
    padding-bottom: 5px!important;
  }

  #filters {
    width: 60vw;
    min-width: 150px;
    overflow-x: hidden;
    left: 10vw;
  }

  .filters-wrapper {
    left: 5vw;
  }


}


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

  #filters {
    max-width: 700px;
    overflow-x: hidden;
  }

  .filters-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
}

  .filter-left-icon,
  .filter-right-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;
      z-index: 1201;
      background: white;
      border-radius: 100px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0.5px solid black;
  }


  .filter-left-icon {
      left: 0;
  }

  .filter-right-icon {
      right: 0;
  }

    #informations.slide-left {
    transform: translateX(0) !important;
    z-index: 428;
    margin-left:0;
    }



    .toggle-list-btn {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2000;
      padding: 2px 7px;
      background: white;
      border: 1px solid lightgrey;
      border-radius: 5px;

    }

}

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


  #informations {
    top: 0;
  }

  #filters {
      max-width: 80vw; /* this auto adjust right arrow */
  }

  #informations .infos-close {
    visibility: hidden;
  }

}

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

  #filters {
    max-width: 300px; /* this auto adjust right arrow */
  }

}