div.filter-terrains {
  display: flex;
  justify-content: center;
}
div.filter-terrains form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
div.filter-terrains form input[type=number],
div.filter-terrains form input[type=search],
div.filter-terrains form select {
  flex: 1;
  appearance: none;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: white;
  font-size: 16px;
  font-weight: 500;
  color: var(--e-global-color-text);
  border: 0;
}
div.filter-terrains form input[type=search] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.116' height='14.116' viewBox='0 0 14.116 14.116'%3E%3Cg id='Icon_feather-zoom-in' data-name='Icon feather-zoom-in' transform='translate(1 1)'%3E%3Cpath id='Path_86587' data-name='Path 86587' d='M14.414,9.457A4.957,4.957,0,1,1,9.457,4.5a4.957,4.957,0,0,1,4.957,4.957Z' transform='translate(-4.5 -4.5)' fill='none' stroke='%23acb7d8' stroke-width='2'/%3E%3Cpath id='Path_86588' data-name='Path 86588' d='M28.927,28.927l-3.952-3.952' transform='translate(-16.517 -16.517)' fill='none' stroke='%23acb7d8' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
}
div.filter-terrains form input[type=number] {
  -moz-appearance: textfield;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='19px' height='12px' viewBox='0 0 19 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-2' transform='translate(0.005000, 0.402500)' fill='%23ACB7D8' fill-rule='nonzero'%3E%3Cpath d='M12.57,11.5975 L11.01,11.5975 L11.01,6.9775 C11.01,5.3175 10.355,4.4875 9.045,4.4875 C8.295,4.4875 7.7775,4.705 7.4925,5.14 C7.2075,5.575 7.065,6.1825 7.065,6.9625 L7.065,11.5975 L5.505,11.5975 L5.505,6.9775 C5.505,6.2075 5.39,5.6375 5.16,5.2675 C4.82,4.7475 4.305,4.4875 3.615,4.4875 C2.245,4.4875 1.56,5.3125 1.56,6.9625 L1.56,11.5975 L0,11.5975 L0,3.2875 L1.44,3.2875 L1.44,4.1875 L1.47,4.1875 C1.82,3.7775 2.17,3.4875 2.52,3.3175 C2.87,3.1475 3.315,3.0625 3.855,3.0625 C4.385,3.0625 4.895,3.185 5.385,3.43 C5.875,3.675 6.225,4.0175 6.435,4.4575 C7.025,3.5275 7.94,3.0625 9.18,3.0625 C10.27,3.0625 11.1075,3.3775 11.6925,4.0075 C12.2775,4.6375 12.57,5.4975 12.57,6.5875 L12.57,11.5975 Z' id='Path'%3E%3C/path%3E%3Cpath d='M18.405,6.5975 L14.35375,6.5975 L14.35375,5.83625 L16.9,3.24625 C17.2908333,2.85541667 17.48625,2.46166667 17.48625,2.065 C17.48625,1.7325 17.3841667,1.44375 17.18,1.19875 C16.9758333,0.95375 16.7104167,0.83125 16.38375,0.83125 C16.0220833,0.83125 15.7391667,0.9625 15.535,1.225 C15.3308333,1.4875 15.22875,1.80541667 15.22875,2.17875 L15.22875,2.345 L14.31875,2.345 L14.31875,2.31 C14.3129167,1.80833333 14.4164583,1.36645833 14.629375,0.984375 C14.8422917,0.602291667 15.1675,0.32375 15.605,0.14875 C15.85,0.0495833333 16.0979167,0 16.34875,0 C16.9320833,0 17.4191667,0.202708333 17.81,0.608125 C18.2008333,1.01354167 18.39625,1.50791667 18.39625,2.09125 C18.39625,2.45875 18.321875,2.77666667 18.173125,3.045 C18.024375,3.31333333 17.7983333,3.605 17.495,3.92 L15.6925,5.76625 L18.405,5.76625 L18.405,6.5975 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
}
div.filter-terrains form select {
  display: block !important;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='14px' height='9px' viewBox='0 0 14 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group' transform='translate(1.000000, 1.000000)' stroke='%23ACB7D8' stroke-width='2'%3E%3Cpolyline id='Path_88890' points='0 0 5.671 5.672 11.341 0'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
}
div.filter-terrains form #type_bien-button {
  display: none;
}

div.terrains-zones {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: wrap row;
  margin-top: 30px;
}
div.terrains-zones div#map {
  flex: 0 0 60%;
  height: 900px;
  border-radius: 5px;
}
@media screen and (max-width: 1400px) {
  div.terrains-zones div#map {
    flex: 0 0 60%;
    height: 600px;
  }
}
@media screen and (max-width: 1024px) {
  div.terrains-zones div#map {
    flex: 1 0 100%;
    height: 700px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  div.terrains-zones div#map {
    height: 400px;
  }
}
div.terrains-zones div#map .mapboxgl-popup-content {
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
  background-color: var(--e-global-color-primary);
  padding: 10px;
}
div.terrains-zones div#map .mapboxgl-popup-content div.img-sizer {
  position: relative;
  padding-bottom: 52.65%;
}
div.terrains-zones div#map .mapboxgl-popup-content div.img-sizer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
div.terrains-zones div#map .mapboxgl-popup-content div.description {
  padding: 20px;
}
div.terrains-zones div#map .mapboxgl-popup-content div.description h3 {
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
  color: white;
  margin: 0;
  margin-bottom: 10px;
}
div.terrains-zones div#map .mapboxgl-popup-content div.description span {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: white;
}
div.terrains-zones div#map .mapboxgl-popup-content a {
  margin-top: 15px;
  display: block;
  text-align: center;
  border-radius: 0px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: white;
}
div.terrains-zones div#map .mapboxgl-popup-content .mapboxgl-popup-close-button {
  display: none;
}
div.terrains-zones div.terrains {
  flex: 0 0 39%;
}
@media screen and (max-width: 1024px) {
  div.terrains-zones div.terrains {
    flex: 1 0 100%;
  }
}
div.terrains-zones div.terrains div.terrain {
  display: none;
  gap: 10px;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: 0.3s ease-out;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain {
    flex-wrap: wrap;
    justify-content: center;
  }
}
div.terrains-zones div.terrains div.terrain:hover {
  background-color: var(--e-global-color-primary);
  cursor: pointer;
}
div.terrains-zones div.terrains div.terrain:hover div.content h2 {
  color: white;
}
div.terrains-zones div.terrains div.terrain:hover div.content > span:not(.icon-float) {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
}
div.terrains-zones div.terrains div.terrain:hover div.content div.meta span {
  color: #FFFFFF;
  --color: var(--e-global-color-primary);
  --background: #FFFFFF;
}
div.terrains-zones div.terrains div.terrain:hover div.content span.icon-float {
  color: white;
}
div.terrains-zones div.terrains div.terrain:hover:after {
  opacity: 0;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.visuel {
    width: 100%;
  }
}
div.terrains-zones div.terrains div.terrain div.visuel div.img-sizer {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.visuel div.img-sizer {
    width: 100%;
  }
}
div.terrains-zones div.terrains div.terrain div.visuel div.img-sizer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
div.terrains-zones div.terrains div.terrain div.content {
  flex: 1;
  position: relative;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.content {
    text-align: center;
    padding-bottom: 35px;
  }
}
div.terrains-zones div.terrains div.terrain div.content > span:not(.icon-float) {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 30px 10px;
  background-color: rgba(229, 171, 73, 0.2);
  color: var(--e-global-color-primary);
  border-radius: 50px;
}
div.terrains-zones div.terrains div.terrain div.content h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 29px;
  color: var(--e-global-color-primary);
}
@media screen and (max-width: 1366px) {
  div.terrains-zones div.terrains div.terrain div.content h2 {
    font-size: 18px;
    line-height: 29px;
  }
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.content h2 {
    text-align: center;
  }
}
div.terrains-zones div.terrains div.terrain div.content div.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.content div.meta {
    justify-content: center;
    flex-direction: row;
  }
}
div.terrains-zones div.terrains div.terrain div.content div.meta span {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--e-global-color-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 23px;
  --color: white;
  --background: var(--e-global-color-primary);
}
div.terrains-zones div.terrains div.terrain div.content div.meta span svg {
  flex: none;
}
div.terrains-zones div.terrains div.terrain div.content span.icon-float {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: var(--e-global-color-primary);
}
div.terrains-zones div.terrains div.terrain div.content span.icon-float svg {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 767px) {
  div.terrains-zones div.terrains div.terrain div.content span.icon-float {
    bottom: 0;
    right: 10px;
  }
}
div.terrains-zones div.terrains div.pagination {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
div.terrains-zones div.terrains div.pagination span {
  color: var(--e-global-color-primary);
  border-radius: 5px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease-out;
  font-weight: 500;
  background-color: white;
}
@media screen and (max-width: 1024px) {
  div.terrains-zones div.terrains div.pagination span {
    flex: 1;
  }
}
div.terrains-zones div.terrains div.pagination span:hover {
  transform: scale(0.95);
}
div.terrains-zones div.terrains div.pagination span.active {
  background-color: var(--e-global-color-primary);
  color: white;
}
div.terrains-zones div.terrains div.pagination span.hidden {
  opacity: 0.3;
  pointer-events: none;
}