/* Plein écran pour la carte et la page */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#map {
    width: 100%;
    height: 100%;
}

/* Style du cadre d'information permanent en haut à gauche */
.info-box {
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 1000; /* Force le cadre à s'afficher par-dessus la carte */
    background: white;
    padding: 15px 20px;
    border-radius: 12px; /* Angles arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Joli effet d'ombre */
    max-width: 300px;
}

/* Style de l'image dans l'info-box (Responsive) */
.info-box .info-img {
    width: 100%;          /* L'image prend toute la largeur disponible du cadre */
    max-width: 100%;      /* Empêche l'image de dépasser */
    height: auto;         /* Conserve les proportions d'origine */
    border-radius: 8px;   /* Optionnel : arrondit légèrement les coins de l'image */
    margin: 8px 0;        /* Ajoute un peu d'espace au-dessus et en dessous */
    display: block;       /* Évite les espaces parasites en bas de l'image */
}

.close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover {
    color: #ff0000; /* Change la couleur de la croix au survol */
}

.info-box h2 {
    font-size: 16px;
    margin: 0 0 8px 0;
    color: #2c3e50;
}

.info-box p {
    font-size: 13px;
    margin: 4px 0;
    color: #555;
}

.info-box .signature {
    font-weight: bold;
    color: #e74c3c;
    margin-top: 8px;
}

/* Personnalisation des popups Leaflet en bleu pastel */
.leaflet-popup-content-wrapper {
    background-color: #d0e1fd !important; /* Bleu pastel doux */
    color: #1a365d !important;             /* Texte bleu foncé bien lisible */
    border-radius: 10px !important;       /* Bords arrondis */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Modifie aussi la petite pointe triangulaire en bas du popup */
.leaflet-popup-tip {
    background-color: #d0e1fd !important;
}

/* Style de la fenêtre modale pour l'image (mis à jour) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); 
    justify-content: center;
    align-items: center;
    padding: 20px; /* Évite que l'image colle aux bords de l'écran */
    box-sizing: border-box;
}

.modal-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content img {
    max-width: 100%;
    max-height: 85vh; /* Limite la hauteur à 85% de la hauteur de l'écran */
    width: auto;
    height: auto;
    object-fit: contain; /* Conserve les proportions sans rogner */
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.close-modal {
    position: absolute;
    top: -45px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    border: none;
    line-height: 1;
    z-index: 10001;
}

.close-modal:hover {
    color: #bbb;
}

/* Style pour aligner parfaitement les icônes dans le pop-up Leaflet */
.popup-icons {
    margin-top: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center; /* Aligne verticalement les éléments du flexbox */
}

.popup-icons a,
.popup-icons img {
    display: inline-flex;
    align-items: center;
    width: 32px;
    height: 32px; /* Force une hauteur identique pour les deux */
    object-fit: contain;
    cursor: pointer;
    vertical-align: middle;
    transition: transform 0.2s;
    border: none;
    text-decoration: none;
}

.popup-icons a img {
    width: 100%;
    height: 100%;
}

.popup-icons img:hover,
.popup-icons a:hover img {
    transform: scale(1.1);
}