/* Configuration globale de la page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

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

/* ==========================================================================
    MENU DES CLAQUES
   ========================================================================== */

.leaflet-control-layers {
    max-height: 80vh; 
    display: flex;
    flex-direction: column;
}

/* 2. C'est UNIQUEMENT la zone expansée qui doit scroller */
.leaflet-control-layers-expanded {
    max-height: 60vh !important;
    overflow-y: auto !important; /* Scroll vertical */
    overflow-x: hidden !important; /* Pas de scroll horizontal */
    box-sizing: border-box !important; /* Important pour inclure le padding */
    
    /* Tes styles visuels */
    border-radius: 12px !important;
    padding: 16px 14px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* TITRES DE CATÉGORIES*/
.leaflet-control-layers-overlays span[class^="g-"] {
    display: block;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-bottom: 3px;
    font-size: 13.5px;
    width: 100%;
    border-bottom: 2px solid #9b59b6; /* Ligne intégrée au titre pour simplifier */
}

.leaflet-control-layers-overlays span[class^="g-"]::after { content: none; }

/* Mapping des noms */
.leaflet-control-layers-overlays span.g-video::before { content: "Vidéoprotection"; }
.leaflet-control-layers-overlays span.g-ecl::before { content: "Éclairage Public"; }
.leaflet-control-layers-overlays span.g-elec::before { content: "Réseaux Électriques (Enedis)"; }
.leaflet-control-layers-overlays span.g-divers::before { content: "Parcellaires & Divers"; }
.leaflet-control-layers-overlays span.g-modifs::before { content: "Mes Modifications en cours"; color: #d35400 !important; }


/* LIGNE DE SÉPARATION (FONDS DE CARTE / CALQUES) */
.leaflet-control-layers-separator {
    border-top: 2px solid #3498db !important; /* 2px = Épaisseur | solid = Continue | #2c3e50 = Couleur bleu foncé */
    margin: 10px 0 !important;               /* Augmente l'espace vide au-dessus et en-dessous de la ligne */
}


/* ==========================================================================
   BARRE D'OUTILS
   ========================================================================== */

/* Conteneur global */
.tools-container-right {
    position: fixed !important;
    bottom: 30px; 
    right: 12px;
    display: flex;
    flex-direction: column; /* Aligne les boutons les uns sous les autres */
    gap: 10px;              /* Espace régulier de 10px entre chaque bouton */
    z-index: 4000;          /* Force l'affichage DEVANT la carte */
}

/* Style de base commun à tous les boutons ronds de la colonne */
.sig-btn {
    width: 42px !important;  
    height: 42px !important; 
    color: white;
    border-radius: 50% !important; /* Cercle parfait */
    text-align: center;
    line-height: 42px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: none;
    transition: transform 0.2s, background-color 0.2s;
}




/* 1. Bouton Modifier (Orange) */
#edit-btn { background-color: #e67e22 !important; }
#edit-btn:hover { background-color: #d35400; transform: scale(1.08); }
#edit-panel .modal-content h3 { border-bottom-color: #e67e22; }

/* 2. Bouton Imprimer (Vert) */
#print-btn { background-color: #27ae60 !important; }
#print-btn:hover { background-color: #2ecc71; transform: scale(1.08); }
#print-modal .modal-content h3 { border-bottom-color: #27ae60; }


/* 3. Bouton Aide (Bleu nuit - Intégré à la suite) */
#help-btn { background-color: #2c3e50 !important; }
#help-btn:hover { background-color: #34495e; transform: scale(1.08); }
#help-modal .modal-content h3 { border-bottom-color: #3498db; }

/* 4. Bouton Mesurer (Violet) */
#measure-btn { background-color: #9b59b6 !important; }
#measure-btn:hover { background-color: #8e44ad;transform: scale(1.08); }
#measure-btn.active { background-color: #2c3e50 !important; box-shadow: 0 0 0 3px #9b59b6, 0 4px 10px rgba(0,0,0,0.3) !important; }
#measure-modal .modal-content h3 { border-bottom-color: #9b59b6; }

#confirm-measure-btn {
    background-color: #9b59b6; /* Même violet que ton bouton de mesure */
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    font-size: 14px;
    transition: background 0.2s, transform 0.1s;
}
#confirm-measure-btn:hover { background-color: #8e44ad; }
#confirm-measure-btn:active { transform: scale(0.98); }

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}





/* Style de la croix pour fermer la fenêtre d'affichage */
.close-btn {
    color: #95a5a6;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover, #close-print-btn:hover {
    color: #c0392b;
}



/* ==========================================================================
   DA
   ========================================================================== */

.custom-modal-content ul {
    padding-left: 20px;
    margin: 15px 0;
}

.custom-modal-content li {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.4;
}

.modal-checkbox-container {
    margin: 22px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.modal-checkbox-container input {
    cursor: pointer;
}



/* ==========================================================================
   Texte en fonction du zoom
   ========================================================================== */

/* 1. Masquer les labels par défaut au chargement */
.parcel-label, .ep-label {
    display: none !important;
}

/* 2. Afficher uniquement quand la classe .visible est présente */
.parcel-label.visible, .ep-label.visible {
    display: block !important;
}



/* ==========================================================================
   Numérotation
   ========================================================================== */
.camera-label-box {
    background-color: #C285D4;
    color: rgb(123, 73, 73);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.5);
    display: inline-block;
    white-space: nowrap;
}