/* ═══════════════════════════════════════════════
   wp-france-map – Styles publics (carte Leaflet)
═══════════════════════════════════════════════ */

/* ── Conteneur global ── */
.wfm-map-container {
    margin: 1.5em 0;
    font-family: inherit;
}

/* ── Titre optionnel ── */
.wfm-map-title {
    margin: 0 0 .6em;
    font-size: 1.25em;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -.3px;
}

/* ── Avertissement géocodage ── */
.wfm-geocode-notice {
    background: #fff9e6;
    border-left: 4px solid #f5a623;
    padding: .5em 1em;
    margin-bottom: .75em;
    font-size: .875em;
    border-radius: 0 4px 4px 0;
}

/* ── Carte Leaflet ── */
.wfm-leaflet-map {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.14);
    overflow: hidden;
    background: #e8eef4;
    z-index: 0;
}

/* ── Légende ── */
.wfm-legend {
    display: flex;
    align-items: center;
    gap: .4em;
    margin-top: .65em;
    font-size: .82em;
    color: #555;
}

.wfm-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ── Popup Leaflet personnalisée ── */
.wfm-popup {
    min-width: 140px;
    text-align: center;
}

.wfm-popup-city {
    font-weight: 700;
    font-size: 1em;
    margin: 0 0 .3em;
    color: #1a1a2e;
}

.wfm-popup-count {
    font-size: .88em;
    color: #555;
    margin: 0;
}

.wfm-popup-badge {
    display: inline-block;
    background: var(--wfm-pin-color, #E63946);
    color: #fff;
    border-radius: 20px;
    padding: .2em .7em;
    font-weight: 700;
    font-size: .95em;
    margin-top: .4em;
}

/* ── Marqueur SVG custom ── */
.wfm-marker-icon {
    /* Généré dynamiquement via JS */
}

/* ── Overrides Leaflet ── */
.leaflet-container {
    font-family: inherit;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    padding: 0;
}

.leaflet-popup-content {
    margin: 14px 16px;
}

.leaflet-popup-tip-container {
    margin-top: -1px;
}

/* ── Cluster markers ── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-clip: padding-box;
    border-radius: 50%;
}

.marker-cluster-small  { background-color: rgba(230,57,70,.35); }
.marker-cluster-medium { background-color: rgba(230,57,70,.55); }
.marker-cluster-large  { background-color: rgba(230,57,70,.75); }

.marker-cluster-small  div,
.marker-cluster-medium div,
.marker-cluster-large  div {
    width: 36px;
    height: 36px;
    margin: 2px;
    background-clip: padding-box;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-cluster-small  div { background-color: rgba(230,57,70,.6); }
.marker-cluster-medium div { background-color: rgba(230,57,70,.8); }
.marker-cluster-large  div { background-color: rgb(230,57,70); }