/* ===== Map: version aspect-ratio (CLS-friendly) ===== */
#map{
  position: relative;
  width: min(90%, 1140px);
  margin: 15px auto 5px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;

  /* Réserve l'espace dès le 1er rendu (zéro shift) */
  aspect-ratio: 16 / 9;
  /* garde-fous UX */
  max-height: 520px;
  min-height: 260px;
}

/* Bouton centré sur la carte */
#map #rechercherZone{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #007bff;
  color: #fff;
  padding: 12px 20px;
  font-size: 16px;
  border: 0;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transition: background-color .3s ease;
  z-index: 1000;
  font-family: 'Poppins', sans-serif;
}
#map #rechercherZone:hover{ background-color:#0056b3; }
#map #rechercherZone:active{ background-color:#004085; }

/* Popup styling (inchangé, avec petite correction) */
.popup{
  font-size:14px;
  line-height:1.4;
  text-align:left;
  font-family:'Poppins',sans-serif;
  width:250px;
}
.popup.expanded{ max-width: 500px; } /* (corrige l'espace "500 px") */
.popup h3{
  margin:0 0 5px;
  font-size:16px;
  color:#2c3e50;
  padding-left:0px;
}
.popup p{ margin:0 0 8px;   padding-left:0px;}
.popup p a{ color:#fff; }
.popup .btn{
  display:inline-block;
  padding:6px 12px;
  background-color:#e74c3c;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  transition:background-color .2s ease;
}
.popup .btn:hover{ background-color:#c0392b; }

.leaflet-popup-content.expanded{ max-width:350px; }

/* Responsive */
@media (max-width: 600px){
  #map{
    width:95%;
    /* ratio plus carré sur mobile */
    aspect-ratio: 4 / 3;
    max-height:420px;
    min-height:350px;
  }
  #map #rechercherZone{
	font-size: 14px;  
    width:70%;
    text-align:center;
  }
}

.telopt_map {
            background-image: linear-gradient(#0098D9,#0098D9);
            padding: 10px 10px;
            text-align: center;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
		
}
a.telopt_map:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
}