/* Styles pour l'icône personnalisée panneau marron */
.custom-panneau-marker {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Animation au survol - sans disparition */
.custom-panneau-marker:hover {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    transform: scale(1.15);
}

/* Style pour les clusters marron personnalisés */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.marker-cluster div {
    width: 34px;
    height: 34px;
    margin: 3px;
    border-radius: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.marker-cluster-small {
    background-color: rgba(139, 107, 74, 0.6);
}

.marker-cluster-small div {
    background-color: #8b6b4a;
}

.marker-cluster-medium {
    background-color: rgba(139, 107, 74, 0.6);
}

.marker-cluster-medium div {
    background-color: #7a5a3b;
}

.marker-cluster-large {
    background-color: rgba(139, 107, 74, 0.6);
}

.marker-cluster-large div {
    background-color: #6b4423;
}

/* Animation lors du regroupement/dégroupement */
.marker-cluster-anim {
    animation: clusterPulse 0.4s ease;
}

@keyframes clusterPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Lignes spider (pattes d'araignée) personnalisées */
.leaflet-cluster-spider-leg {
    stroke: #8b6b4a !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.6 !important;
}

/* Optimisation mobile */
@media (max-width: 767px) {
    .custom-panneau-icon {
        transform: scale(0.9);
    }
    
    .marker-cluster div {
        width: 30px;
        height: 30px;
        margin: 2px;
        font-size: 12px;
    }
}

/* Amélioration de l'accessibilité */
.leaflet-marker-icon:focus {
    outline: 3px solid #5a3e2b;
    outline-offset: 4px;
}

.marker-cluster:focus {
    outline: 3px solid #5a3e2b;
    outline-offset: 2px;
}