/* Conteneur principal */
.map-container {
    width: 100%;
    position: relative;
    font-family: sans-serif;
}

/* La carte : 600px sur PC, 70vh sur mobile pour voir les boutons */
#map_canvas {
    width: 100%;
    height: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Barre de boutons */
.map-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.map-btn {
    flex: 1;
    min-width: 150px;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px; /* Évite le zoom auto sur iPhone */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-locate { background-color: #FEBE00; color: black; }
.btn-refresh { background-color: #fF5622; color: white; }

.map-btn:active { transform: scale(0.95); }

/* Adaptations spécifiques aux mobiles */
@media (max-width: 768px) {
    #map_canvas {
        height: 60vh; /* Utilise 60% de la hauteur de l'écran */
    }
    
    .map-controls {
        position: sticky;
        bottom: 10px;
        z-index: 1000;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border-radius: 15px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
}