/* 
 * Style de la carte 
 * Largeur à 100% et hauteur de 500px
 * Bordure 20px
 */
 #mission-map {
  width: 100%;
  height: 80vh;
  border-radius: 20px;
  overflow: hidden; /* Pour s'assurer que le contenu (les marqueurs) respecte le border-radius */
  border: 1px solid #ccc; /* Légère bordure pour délimiter la carte */
}

/*
* Style de la zone des filtres
* Un fond clair et des textes foncés pour correspondre à une carte claire
*/
#mission-map-filters {
  margin-top: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: #333;
}

/*
* Style des labels et cases à cocher dans le filtre
*/
#mission-map-filters label {
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}

/*
* Effet de zoom sur le marqueur au survol via la classe ajoutée dynamiquement par le script JS
*/
.marker-hover {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

/*-------------------------------------------*/
/* Reset des styles par défaut des pop-ups   */
/*-------------------------------------------*/
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-popup-content {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*-------------------------------------------*/
/* Conteneur principal du pop-up             */
/*-------------------------------------------*/
.popup-container {
  width: 300px;
  background-color: #fff;  /* Fond blanc par défaut */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
}


/*-------------------------------------------*/
/* En-tête supérieur avec la ville           */
/*-------------------------------------------*/
.popup-top-header {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.popup-city {
  font-family: "UncutSans", sans-serif;         /* Utilisation de UncutSans */
  font-weight: 600;                       /* Semi-Bold */
  font-size: 30px;
  color: #1E5183;                         /* Bleu de la charte */
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Trait orange sous le nom de la ville */
.popup-city-divider {
  height: 2px;
  background-color: #EC785C;              /* Orange de la charte */
  margin: 5px auto 0;
  width: 90%;  /* Le trait occupe environ 90% de la largeur du texte, avec un léger dépassement */
}

/*-------------------------------------------*/
/* Box bleue cliquable pour la mission       */
/*-------------------------------------------*/
.popup-mission-box {
  display: block;
  background-color: #1E5183;              /* Fond bleu */
  color: #fff;                           /* Texte blanc */
  text-align: center;
  padding: 10px 15px;                     /* Valeurs de padding harmonieuses */
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.3s ease;
  margin: 10px 20px;                      /* Marges extérieures pour ne pas être trop long */
}

.popup-mission-box:hover {
  transform: scale(1.01);
}

/* Nom de la mission dans la box bleue */
.popup-mission-name {
  font-family: "UncutSans", sans-serif;
  font-size: 18px;
  color: #fff;
  margin: 0;
  padding: 0;
}

/* Type de mission dans la box bleue */
.popup-mission-type {
  font-family: "UncutSans", sans-serif;
  font-size: 16px;
  color: #fff;
  margin-top: 5px;
}

/*-------------------------------------------*/
/* Corps du pop-up avec informations         */
/*-------------------------------------------*/
.popup-body {
  background-color: #fff;
  padding: 20px;
  color: #1E5183;                         /* Texte en bleu */
}

.popup-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.popup-item i {
  margin-right: 5px;  /* Ajoute un espace de 5px entre l'icône et le texte */
}

.popup-label {
  font-weight: bold;
  margin-right: 5px;
  color: #1E5183;
}

.popup-value {
  color: #1E5183;
}

.popup-value a {
  color: #1E5183 !important;
  text-decoration: none;
}

.popup-value a:hover {
  text-decoration: underline;
}

/* Séparateur orange fin */
.popup-divider {
  height: 2px;
  background-color: #EC785C;
  margin: 15px 0;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/*-------------------------------------------*/
/* Responsive : largeur à 95% sur petits écrans*/
/*-------------------------------------------*/
@media (max-width: 480px) {
  .popup-container {
    width: 95%;
  }
}