/**
 * CCBLA — acf/infos-map — style.css
 */

/* ── Wrapper bloc ────────────────────────────────────────────── */
.ccbla-infos-map-block {
    position:      relative;
    overflow:      hidden;
    border-radius: 0;
    width:         100%;
    height:        100%;
    min-height:    0;
    display:       flex;
    flex-direction: column;
}

/* ── Carte Leaflet ───────────────────────────────────────────── */
.ccbla-map-container {
    width:      100%;
    z-index:    1;
    min-height: 220px;
    height:     auto;
    flex:       1 1 var(--map-height, 380px);
}

@media (max-width: 767px) {
    .ccbla-map-container {
        min-height: clamp(220px, 52vw, 280px);
        flex-basis: clamp(220px, 52vw, 280px);
    }
}

/* Fix Leaflet z-index dans le contexte Kadence */
.ccbla-map-container .leaflet-pane    { z-index: 4 !important; }
.ccbla-map-container .leaflet-control { z-index: 8 !important; }

/* ── Focus visible (WCAG 2.4.7 / RGAA 10.7.1) ────────────────────────
 * Le container .ccbla-map-container et les markers Leaflet (divIcon)
 * sont exposés au clavier via tabindex=0 / role=button.
 * Parent wrapper .ccbla-infos-map-block: overflow:hidden → outline-offset
 * négatif pour éviter le clipping du contour sur le container.
 * Les markers reçoivent un halo blanc pour contraste minimum ≥3:1
 * quelle que soit la couleur de la tuile OSM de fond. */
.ccbla-map-container:focus-visible {
    outline:         3px solid #005fcc;
    outline-offset:  -3px;
}
.ccbla-map-container .leaflet-marker-icon:focus-visible {
    outline:         3px solid #005fcc;
    outline-offset:  2px;
    box-shadow:      0 0 0 5px rgba(255, 255, 255, .9);
}

/* ── Popup Leaflet ──────────────────────────────────────────── */
/* 2026-04-29 — Refonte popup: • Sizes augmentées (15→18 / 12→16 / 11→15 px) pour lisibilité réelle. • Margins entre éléments supprimées (l'espacement vertical est géré par.ccbla-imap-popup__nav margin-top + le padding du popup wrapper). • TOUS les textes (title + desc + addr + svg + bouton) en pop-dark pour cohérence palette POP. Avant: palette8 sky pour title/svg, #555/#666 pour desc/addr → bruit visuel sur fond blanc popup. */
.ccbla-imap-popup {
    padding: 2px 0;
    min-width: 230px;
    max-width: 280px;
}

.ccbla-imap-popup__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pop-dark, #111111);
    line-height: 1.3;
}

.ccbla-imap-popup__desc {
    font-size: 16px;
    color: var(--pop-dark, #111111);
    line-height: 1.45;
}

.ccbla-imap-popup__addr {
    display:     flex;
    align-items: flex-start;
    gap:         5px;
    font-size:   15px;
    color:       var(--pop-dark, #111111);
    line-height: 1.4;
}
.ccbla-imap-popup__addr svg {
    flex-shrink: 0;
    margin-top:  1px;
    color:       var(--pop-dark, #111111);
}

/* ── Boutons itinéraire dans la popup ─────────────────────── */
/* 2026-04-29 — Style "dark sur blanc" cohérent avec ccbla-bouton-1 (inc/button-styles.php). Le <a> Leaflet ne peut pas recevoir `is-style-ccbla-bouton-1` (pas un wp-block-button), on réplique le preset visuel: bg blanc, border+text pop-dark, hover inversé. */
.ccbla-imap-popup__nav {
    display:    flex;
    gap:        6px;
    flex-wrap:  wrap;
    margin-top: 12px;
}

.ccbla-imap-popup__nbtn {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         10px 14px;
    border-radius:   0;
    font-family:     var(--wp--preset--font-family--agrandir-wide-medium, 'Agrandir Wide Medium', sans-serif);
    font-size:       13px;
    font-weight:     400;
    text-decoration: none;
    text-transform:  uppercase;
    border:          1px solid var(--pop-dark, #111111);
    background:      var(--pop-white, #ffffff);
    color:           var(--pop-dark, #111111);
    white-space:     nowrap;
    transition:      background .15s, color .15s, border-color .15s;
}
.ccbla-imap-popup__nbtn:hover,
.ccbla-imap-popup__nbtn:focus-visible {
    background:   var(--pop-dark, #111111);
    color:        var(--pop-white, #ffffff);
    border-color: var(--pop-dark, #111111);
}
.ccbla-imap-popup__nbtn:focus-visible {
    outline:        3px solid var(--pop-primary, #6b4796);
    outline-offset: 2px;
}

/* Leaflet popup override — agrandir légèrement */
.leaflet-popup-content { margin: 14px 18px !important; }
.leaflet-popup-content-wrapper {
    border-radius: 10px !important;
    box-shadow: none;
}

/* ── Éditeur : preview wrapper ───────────────────────────────── */
.ccbla-infos-map-editor .ccbla-infos-map-block {
    pointer-events: none;
}