/* =========================================================
   Personnalisation du Layer Control Leaflet
   Pour s'harmoniser avec le thème sombre de l'interface
   ========================================================= */

/* Conteneur principal du contrôle des couches */
.leaflet-control-layers {
    background-color: #1e293b !important;
    border: 1px solid #34495e !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Bouton d'expansion/réduction */
.leaflet-control-layers-toggle {
    background-color: #1e293b !important;
    border: 1px solid #34495e !important;
}

/* Conteneur étendu */
.leaflet-control-layers-expanded {
    padding: 12px !important;
    color: #ecf0f1 !important;
    background-color: #1e293b !important;
}

/* Titres des sections (Heatmap, Temps réel, Trajets fixes) */
.leaflet-control-layers-overlays h4 {
    color: #93c5fd !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 15px 0 5px 0 !important;
    padding-left: 5px !important;
    border-bottom: 1px solid #475569 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Blocs de couches */
.leaflet-control-layers-overlays > div > div {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
}

/* Labels des couches */
.leaflet-control-layers label {
    color: #e5e7eb !important;
    font-size: 0.875rem !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
}

.leaflet-control-layers label:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-radius: 4px !important;
}

/* Cases à cocher */
.leaflet-control-layers input[type="checkbox"] {
    margin-right: 8px !important;
    cursor: pointer !important;
    accent-color: #3b82f6 !important;
}

/* Séparateur */
.leaflet-control-layers-separator {
    border-top: 1px solid #475569 !important;
    margin: 8px 0 !important;
}

/* Scrollbar personnalisée pour le layer control */
.leaflet-control-layers-overlays::-webkit-scrollbar {
    width: 8px;
}

.leaflet-control-layers-overlays::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 4px;
}

.leaflet-control-layers-overlays::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

.leaflet-control-layers-overlays::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* =========================================================
   Style des boutons + / - (zoom) de Leaflet
   ========================================================= */

/* Conteneur Leaflet générique : pas de fond, pas d'ombre */
.leaflet-control {
    background: transparent !important;
    box-shadow: none !important;
}

/* Positionne le bloc + / - sous "CARTE TEMPS RÉEL" */
.leaflet-top.leaflet-left {
    top: 78px !important;        /* ajuste si tu veux plus haut/bas */
    left: 18px !important;
}

/* Conteneur du zoom / barres */
.leaflet-control-zoom,
.leaflet-bar {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

/* Boutons + et - */
.leaflet-control-zoom a,
.leaflet-bar a {
    background: #242a38 !important; /* fond foncé Valex */
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #e5e7eb !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45) !important;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0 !important;   /* on enlève les coins ronds individuels */
}

/* Coins arrondis seulement à l’extérieur du bloc */
.leaflet-bar a:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.leaflet-bar a:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Hover des boutons de zoom */
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover {
    background: #313a4f !important;
    border-color: rgba(148, 163, 184, 0.55) !important;
}

/* =========================================================
   Liens sur la carte : enlever le soulignement au survol
   (scopé à la carte pour ne pas impacter tout le site)
   ========================================================= */

.leaflet-container a:hover {
    text-decoration: none !important;
}

/* =========================================================
   MOBILE — MAP FULL HEIGHT (Leaflet page only)
   ========================================================= */
@media (max-width: 768px) {
  html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #map, .leaflet-container {
    height: calc(var(--vh, 1vh) * 100) !important;
    width: 100% !important;
  }
}