/* Style de la carte */

  #mapid{
      height: 100%;
      width: 100%;
  }
  .results {
      flex: 1.3;  /* Prend autant de place que possible tout en laissant de la place pour la carte */
      overflow-y: scroll;  /* Rend la colonne de gauche défilable */
      padding: 2em;
  }

  .map {
      flex: 1.5;  /* Prend deux fois plus de place que la colonne de gauche */
      position: sticky;  /* Position fixe lors du défilement */
      top: 0;  /* Ancré en haut */
  }

  /* css pour la map */
    .leaflet-container a{color:#FFF;}
.leaflet-container a:hover{text-decoration:none;}
.leaflet-container a.leaflet-control-zoom-in,.leaflet-container a.leaflet-control-zoom-out{color:#000}
.leaflet-popup-content p{margin:0;}
    .annonce-icon {background-color: #93b7be;border-radius: 50%;width: 20px;height: 20px;}
    .marker-container {position: relative;margin: 10px auto;width: 40px;height: 40px;z-index: 1;border-radius: 50%;cursor: pointer;top: -5px;}
    .marker-card {width: 100%;height: 100%;transform-style: preserve-3d;transition: all .4s ease-in-out;position: absolute;z-index: 1;}
    .face.front {font-size: 15px;font-weight: 400;line-height: 27px;text-transform: none;user-select: none;pointer-events: auto;cursor: pointer;box-sizing: border-box;position: absolute;width: 100%;height: 100%;backface-visibility: hidden;text-align: center;border-radius: 50%;background-color: #fff;border: 2px solid var(--yb-secondary);z-index: 100;border-color: var(--yb-secondary);color: var(--yb-secondary);}
    .marker-container .front.face svg {height: 29px;width: auto;vertical-align: middle;padding: 0;margin: 3px 0 0;}
    .marker-arrow {border-color: var(--yb-secondary) transparent transparent !important;}
    .marker-arrow {width: 0;content: "";height: 0;border-style: solid;border-width: 8px 5px 0;border-color: var(--yb-secondary) transparent transparent;top: 38px;left: 50%;transform: translateX(-50%);position: absolute;border-radius: 0;z-index: 1;}
    .marker-container .front.face svg g, 
    .marker-container .front.face svg circle, 
    .marker-container .front.face svg rect, 
    .marker-container .front.face svg path {
          fill: var(--yb-secondary);
    }
    .marker-cluster div{background-color: var(--yb-secondary) !important;}
  
    .marker-cluster div {margin-left: 5px;margin-top: 5px;text-align: center;font-size: 15px;color: #fff;font-weight: 600;border-radius: 50%;width: 36px;height: 36px;line-height: 36px;background-color: #66676b;position: relative;}
    .marker-cluster div:before {opacity: 0.2;box-shadow: inset 0 0 0 4px #646925;}
    .marker-cluster div:before {opacity: .2;box-shadow: inset 0 0 0 4px var(--yb-secondary);content: '';position: absolute;border-radius: 50%;top: 0;left: 0;width: 100%;height: 100%;}
    @keyframes pulse-animation {0% {transform: scale(1);opacity: 0.5;}100% {transform: scale(1.5);opacity: 0;}}
    .marker-cluster div:before {animation-name: pulse-animation ;animation-duration: 1.5s;animation-iteration-count: infinite;}
    .leaflet-container a.leaflet-popup-close-button {position: absolute;top: 10px;right: 10px;display: inline-block;z-index: 999;text-align: center;line-height: 15px;cursor: pointer;font-size: 17px;font-weight: 500;height: 20px;width: 20px;background-color: #fff;color: #000;transition: all .2s ease-in-out;font-family: "font awesome 5 free";font-weight: 900;border-radius: 50%;padding:2px !important;}
    .leaflet-container a.leaflet-popup-close-button:hover {background-color: #646925;color: #fff;transition: all .2s ease-in-out;}
    .leaflet-listing-img-container {position: relative;height: auto;display: block;}
    .leaflet-listing-img-container:before {content: "";position: absolute;height: 100%;width: 100%;display: block;background: linear-gradient(to top,rgba(35,35,37,0.85) 0%,rgba(35,35,37,0.40) 35%,rgba(22,22,23,0) 60%,rgba(0,0,0,0) 100%);background-color: rgba(35,35,37,.2);border-radius: 5px;}
    .leaflet-listing-img-container img {object-fit: cover;height: 100%;height: 260px;max-height: 260px;width: 100%;border-radius: 5px;}
    .leaflet-listing-item-content {position: absolute;bottom: 20px;left: 0;padding: 0 10%;width: 100%;z-index: 50;box-sizing: border-box;}
    .leaflet-listing-item-content h3 {color: #fff;font-size: 16px;padding: 0 0 2px;font-weight: 700;margin: 0;line-height: 1.3em;}
    .leaflet-listing-item-content span {font-weight: 400;font-size: 14px;display: inline-block;line-height: 24px;}
    .leaflet-popup-content{margin: 0px !important;border-radius: 5px;}
    .leaflet-popup-content-wrapper {padding: 0;}


  /* Fin style de la carte */