body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;  
}

#map {
    width: 100%;
    height: 100vh;  
    position: relative;  

}

#controlPanel {
    position: absolute;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: #0d1c51;  
    padding: 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: white;  
    width: 90%;  
    z-index: 1000;  

}

#sliderContainer {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

#timeSlider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

#timeSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: rgb(255, 255, 255);
    border-radius: 3px;
}

#timeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ff6f00;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;  
}

#timeSlider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #0061D8;
    border-radius: 3px;
}

#timeSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #0061D8;
    border-radius: 50%;
    cursor: pointer;
}

button {
    background-color: #0061D8;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #ff9933;  
}

.rotate-handle {
    width: 20px;
    height: 12px;
    background-color: blue;
    border-radius: 10%;
    cursor: pointer;
}

.hidden {
    display: none;
}

.highlight {
font-size: 14px;
text-align: center;
}
#logo {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000; 
}
#logo img {
    width: 34px;  
    height: auto;
}

.leaflet-bar a {
    background-color: #0d1c51!important;  

}
.leaflet-bar a {
    background-color: #0d1c51 !important; /* Bleu pour le fond */
    color: #FFFFFF !important; /* Blanc pour l'icône */
    border: none !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-bottom: 5px; /* Espacement entre les boutons */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.leaflet-bar a:hover {
    background-color: #0061D8 !important; /* Orange au survol */
    color: #FFFFFF !important; /* Toujours blanc pour l'icône */
}

/* Icône pour le rectangle */
.leaflet-draw-draw-rectangle {
    background-color: #0d1c51 !important;
    border-radius: 5px !important;
}

.leaflet-draw-draw-rectangle::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f2d0"; /* Icône de rectangle */
    font-weight: 900;
    font-size: 18px;
}

/* Icône pour l'édition */
.leaflet-draw-edit-edit {
    background-color: #0d1c51 !important;
    border-radius: 5px !important;
}

.leaflet-draw-edit-edit::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f044"; /* Icône de crayon */
    font-weight: 900;
    font-size: 18px;
}

/* Icône pour la suppression */
.leaflet-draw-edit-remove {
    background-color: #0d1c51 !important;
    border-radius: 5px !important;
}

.leaflet-draw-edit-remove::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f1f8"; /* Icône de poubelle */
    font-weight: 900;
    font-size: 18px;
}

/* Icônes pour le zoom */
.leaflet-control-zoom-in::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f067"; /* Icône de plus */
    font-weight: 900;
    font-size: 18px;
}

.leaflet-control-zoom-out::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f068"; /* Icône de moins */
    font-weight: 900;
    font-size: 18px;
}

/* Masquer le texte initial */
.leaflet-bar a span {
    display: none;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 0px solid rgba(0, 0, 0, 0.2)!important;
    background-clip: padding-box;
}

.leaflet-control-zoom-in {
    margin-top: 35px;
}


.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    border-radius: 5px!important;
}

.leaflet-draw-draw-rectangle {
    margin-top: -10px!important;
}
.leaflet-draw-edit-edit {
    margin-top: -6px!important;
}



#speedSelector {
    background-color: #0061D8;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}
#speedSelector:hover {
    background-color: #ff9933;
}


#topInfoBar {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0d1c51;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
    z-index: 1000;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}