/* === Styles généraux === */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* Style pour le logo dans le header */
.navbar-brand {
  margin-left: 1rem;
}

.text-vert-pomme {
  color: #84df84 !important;
}


/* === Styles Pour les champs et menu déroulants === */

#champ-ville {
  max-width: 300px; /* Largeur max du champ de saisie de la ville */
}
#champ-adresse {
  max-width: 300px; /* Largeur max du champ de saisie de l'adresse */
}

#champ-nom-entreprise{
  max-width: 300px; /* Largeur max du champ de saisie de l'adresse */
}

#rayon-select {
  max-width: 300px; /* Largeur max de la liste déroulante du rayon */
}

#Secteur {
  max-width: 300px; /* Largeur max de la catégorie principale */
}

#Sous-Secteur {
  max-width: 300px; /* Largeur max du champs sous-catégories */
}
.rechercher {
  max-width: 300px; /* Largeur max du champs sous-catégories */
}



 
/* === Styles pour la mise en page en deux colonnes et les résultats === */

.bloc-b {
  background-color: #e9f7ff;   /* Fond bleu pâle */
  padding: 10px;             /* Espacement intérieur */
  border-radius: 5px;        /* Coins arrondis */
  margin-top: 10px;          /* Espacement au-dessus si besoin */
} 

#resultats-api {
  margin-top: 20px;
}

.resultat {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.zone-info {
  background-color: #eef;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding: 10px;
}

.entreprises .card-title {
  font-size: 1.0em; /* Taille de l'icone et du nom de l'entreprise dans la colonne de gauche */
}

.entreprises {
  background-color: #fffbe6;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding: 10px;
}

/* === Ajustements pour la colonne de résultats === */
#colonne-resultats {
  overflow-y: auto;
  max-height: 600px;
  padding-right: 15px;
}

/* Styles spécifiques pour les popups Leaflet afin d'assurer l'application des couleurs */
.leaflet-popup-content-wrapper .statut-actif {
color: green !important;
font-weight: bold !important;
}

.leaflet-popup-content-wrapper .statut-ferme {
color: red !important;
font-weight: bold !important;
}

/* Styles spécifiques pour le bouton Rechercher */

.btn-group {
display: flex;
gap: 0.5rem; /* Espacement fixe entre les boutons, équivalent à ms-2 */
}

.btn-rechercher {
background-color: #84df84; /* Vert clair */
border-color: #84df84;
padding: 0.375rem 0.75rem; /* Hauteur standard */
color: #333;
width: 50px; /* Largeur fixe */
}

.btn-rechercher:hover {
background-color: #84df84;
border-color: #84df84;
}

.btn-effacer {
background-color: #e8e8e8; /* Gris clair */
border-color: #e8e8e8;
padding: 0.10rem 0.75rem; /* Hauteur réduite */
color: #333;
width: 50px; /* Même largeur fixe que btn-rechercher */
}

.btn-effacer:hover {
background-color: #e8e8e8;
border-color: #e8e8e8;
}

/* Styles pour les messages de géolocalisation en haut de la carte */
#geo-messages {
  background-color: rgba(255, 255, 255, 0.9); /* Fond légèrement transparent */
  padding: 2px; /* Padding réduit */
  border-radius: 5px; /* Coins arrondis */
  font-size: 14px; /* Taille de police compacte */
  color: #585858; /* Couleur du texte */
  display: flex; /* Activation de flexbox */
  align-items: center; /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
  height: 20px; /* Hauteur explicite */
  margin-bottom: 0 !important; /* Supprime toute marge inférieure */
}

/* Suppression des marges par défaut du paragraphe interne */
#geo-messages p {
  margin: 0; /* Élimine les marges par défaut */
  line-height: 1.2; /* Contrôle l'espacement des lignes */
}

/* === Styles pour la carte === */
#map {
  height: 500px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 0px; /* Espace minimal au-dessus */
}


/* Style pour l'icône de géolocalisation utilisateur */
.user-div-icon {
  background-color: #ff5733;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.user-div-icon span {
  color: #fff;
  font-size: 16px;
}

.leaflet-marker-icon {
  display: block !important;
  opacity: 1 !important;
}



/* Modification de l'arrière-plan des popups Leaflet pour une légère transparence */
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.80) !important;  /* Fond blanc avec 80% d'opacité */
  border-radius: 5px;  /* Bords arrondis */
}

/* Adaptation de la couleur de la fenetre la popup */
.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Ajustement du formulaire dans la colonne de gauche */
.formulaire-gauche {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Espacement et taille des éléments du formulaire */
.formulaire-gauche .form-control,
.formulaire-gauche .form-select {
  width: 100%;
  max-width: none; /* Annule les max-width précédents pour s'adapter à la colonne */
}

/* Ajustement simple pour éviter que l'effet de focus soit coupé en haut */
#colonne-resultats {
  padding-top: 15px; /* Ajoute un espacement supérieur minimal pour les champs */
}