/* Vue carte de l'annuaire des fournisseurs.
   Couleurs, rayons et tailles repris de theme.json / styles.css : vert primaire
   #26AB64, sa déclinaison claire #E3F1EA, gris secondaire #676B6D, rayon 10px. */

.fournisseur-map,
#fournisseur-map {
    --map-primary: var(--wp--preset--color--theme-primary, #26AB64);
    --map-primary-light: var(--wp--preset--color--theme-primary-light, #E3F1EA);
    --map-secondary: var(--wp--preset--color--theme-secondary, #676B6D);
    --map-black: var(--wp--preset--color--theme-black, #090909);
    --map-surface: var(--wp--preset--color--theme-white, #FFFFFF);
    --map-radius: 10px;
}

/* Les couleurs et l'état actif viennent de .btn-filter (styles.css du thème) :
   on ne redéfinit ici que la mise en page des deux onglets. */
.view-switcher {
    display: inline-flex;
    gap: 6px;
}

.view-switcher--btn {
    padding-left: 20px;
    padding-right: 20px;
}

#fournisseur-map {
    width: 100%;
}

#fournisseur-map[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ barre d'outils */

.fournisseur-map--toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fournisseur-map--near,
.fournisseur-map--reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid var(--map-secondary);
    border-radius: 999px;
    background: var(--map-surface);
    color: var(--map-secondary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.65, 0, .35, 1);
}

.fournisseur-map--near:hover,
.fournisseur-map--reset:hover {
    border-color: var(--map-primary);
    color: var(--map-primary);
}

.fournisseur-map--near.active {
    background: var(--map-primary);
    border-color: var(--map-primary);
    color: var(--map-surface);
}

.fournisseur-map--radius {
    padding: 8px 14px;
    border: 1px solid var(--map-secondary);
    border-radius: 999px;
    background: var(--map-surface);
    color: var(--map-secondary);
    font: inherit;
    font-size: 14px;
}

.fournisseur-map--status {
    margin-left: auto;
    color: var(--map-secondary);
    font-size: 14px;
}

.fournisseur-map--epci {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 6px 8px 6px 16px;
    border-radius: 999px;
    background: var(--map-primary-light);
    color: var(--map-primary);
    font-size: 14px;
    font-weight: 600;
}

.fournisseur-map--epci[hidden] {
    display: none;
}

/* padding: 0 indispensable : sans lui le bouton hérite du padding horizontal des
   boutons du thème ([type=button], 21,6px de chaque côté), qui déborde la largeur
   de 22px et transforme le cercle en ellipse. flex-shrink: 0 empêche par ailleurs
   le conteneur flex de l'aplatir quand le nom de l'EPCI est long. */
.fournisseur-map--epci-clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--map-primary);
    color: var(--map-surface);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fournisseur-map--canvas {
    position: relative; /* ancre le spinner avant l'initialisation de Leaflet */
    min-height: 60vh;
    border-radius: var(--map-radius);
    z-index: 0; /* garde la carte sous les menus déroulants du thème */
}

@media (min-width: 1024px) {
    .fournisseur-map--canvas {
        min-height: 70vh;
    }
}

.fournisseur-map--legend {
    margin-top: 10px;
    color: var(--map-secondary);
    font-size: 14px;
}

/* ------------------------------------------------------------ groupes de points */

/* Style maison : MarkerCluster.Default.css (palette bleu/jaune/orange) n'est pas
   chargé, seule la feuille structurelle du greffon l'est. Le disque reprend le
   vert et l'anneau blanc des marqueurs pour qu'un groupe se lise comme un amas
   de points, le halo suggérant ce qu'il contient. */
/* Sélecteur doublé avec .leaflet-marker-icon : leaflet.css est injecté au premier
   affichage de la carte, donc APRÈS cette feuille, et son `display: block` sur
   les icônes l'emporterait sinon à specificité égale : le chiffre retombait en
   haut du disque. */
.leaflet-marker-icon.map-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--map-primary, #26AB64);
    box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(38, 171, 100, .22);
    color: #fff;
    font-family: var(--wp--preset--font-family--base, inherit);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: transform .3s cubic-bezier(.65, 0, .35, 1);
}

.map-cluster:hover {
    transform: scale(1.08);
}

/* Le thème impose une interligne de 23,8px qui décalerait le chiffre. */
.map-cluster span {
    line-height: 1;
}

/* Les +/- du contrôle de zoom : leaflet les centre avec line-height + une police
   'Lucida Console' rarement installée, dont la police de repli descendait le
   glyphe de 6px. Le centrage flex ne dépend plus des métriques de la fonte.
   On garde l'interligne de leaflet (égale à la hauteur du bouton) : la réduire
   à 1 rétrécit la boîte de ligne sous la hauteur du glyphe, qui se fait alors
   rogner en haut et en bas. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0; /* leaflet décale de 1px pour compenser sa police */
}

.map-cluster--s {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.map-cluster--m {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.map-cluster--l {
    width: 54px;
    height: 54px;
    font-size: 17px;
}

/* Les pattes de la vue éclatée sont stylées côté JS (spiderLegPolylineOptions) :
   le greffon ne leur pose pas de classe CSS exploitable. */

/* --------------------------------------------------------------------- vignette */

/* On neutralise l'habillage par défaut de Leaflet pour que la vignette soit
   la carte elle-même, dans le même esprit que .fournisseur-post-card. */
.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: var(--map-radius);
    box-shadow: 0 12px 32px rgba(9, 9, 9, .16);
    overflow: hidden;
}

.leaflet-popup-content {
    width: auto !important;
    margin: 0;
    line-height: 1.45;
}

.leaflet-popup-tip {
    box-shadow: none;
}

.leaflet-container a.leaflet-popup-close-button {
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--map-black, #090909);
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    background: #fff;
    color: var(--map-primary, #26AB64);
}

.map-card {
    display: flex;
    flex-direction: column;
    /* Largeur fixe : sans elle la vignette se réduit à sa largeur intrinsèque
       (~190px) et le titre comme le bouton passent à la ligne. */
    width: 252px;
    background: var(--map-surface, #fff);
    font-family: var(--wp--preset--font-family--base, inherit);
    color: var(--map-black, #090909);
    line-height: 1.4;
}

.map-card--media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    padding: 10px;
    background: var(--wp--preset--color--theme-darker-white, #f9f9f9);
    overflow: hidden;
}

/* contain plutôt que cover : la plupart des visuels sont des logos, un recadrage
   les tronquerait. */
.map-card--media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.map-card--body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

/* Sélecteurs doublés : les marges de titre et de paragraphe du thème
   s'appliquent aussi dans les popups Leaflet et l'emportent sinon. */
.map-card .map-card--title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--map-black, #090909);
}

.map-card--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.map-card--tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--map-primary-light, #E3F1EA);
    color: var(--map-primary, #26AB64);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Popup tactile : plus compacte, elle doit tenir dans la hauteur de la carte
   avec le point visible en dessous. */
.map-card--popup .map-card--media {
    height: 84px;
    padding: 8px;
}

.map-card--popup .map-card--body {
    gap: 6px;
    padding: 12px 14px 14px;
}

/* Compteur des familles non affichées : plus discret que les familles elles-mêmes. */
.map-card--tag-more {
    background: var(--wp--preset--color--theme-darker-white, #f9f9f9);
    color: var(--map-secondary, #676B6D);
}

.map-card .map-card--place {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--map-secondary, #676B6D);
    font-size: 13px;
}

.map-card--place i {
    color: var(--map-primary, #26AB64);
    font-size: 12px;
}

.map-card--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    padding: 9px 16px;
    border: 1px solid var(--map-primary, #26AB64);
    border-radius: 999px;
    background: var(--map-primary, #26AB64);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all .3s cubic-bezier(.65, 0, .35, 1);
}

/* Inversion au survol, comme les .btn du thème. Réservée aux appareils à
   souris : sur tactile, :hover reste collé après le tap et le bouton restait
   blanc. */
.map-card--link:focus-visible {
    background: #fff;
    color: var(--map-primary, #26AB64) !important;
}

@media (hover: hover) {
    .map-card--link:hover {
        background: #fff;
        color: var(--map-primary, #26AB64) !important;
    }
}

/* ------------------------------------------------------------------ chargement */

.fournisseur-map--spinner {
    position: absolute;
    inset: 0;
    z-index: 1000; /* au-dessus des panneaux et contrôles de Leaflet (max 1000) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--map-radius);
}

.fournisseur-map--spinner[hidden] {
    display: none;
}

.fournisseur-map--spinner::before {
    content: "";
    width: 44px;
    height: 44px;
    border: 4px solid var(--map-primary-light);
    border-top-color: var(--map-primary);
    border-radius: 50%;
    animation: fournisseur-map-spin 0.8s linear infinite;
}

@keyframes fournisseur-map-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fournisseur-map--spinner::before {
        animation-duration: 2.4s;
    }
}

/* ------------------------------------------------------------ encadré au survol */

.leaflet-tooltip.map-card-tooltip {
    padding: 0;
    border: 0;
    border-radius: var(--map-radius);
    box-shadow: 0 12px 32px rgba(9, 9, 9, .16);
    overflow: hidden;
    white-space: normal;
    pointer-events: none;
}

.map-card-tooltip::before {
    display: none; /* la flèche par défaut déborde de la vignette arrondie */
}

.map-card .map-card--contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.map-card .map-card--contact-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--map-black, #090909);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.map-card .map-card--contact-link i {
    flex: none;
    color: var(--map-primary, #26AB64);
}

.map-card .map-card--contact-link:hover {
    color: var(--map-primary, #26AB64);
}

/* ---------------------------------------------------------------- panneau latéral */

.fournisseur-map--panel {
    position: absolute;
    /* -1px : le conteneur Leaflet rogne (overflow + rayon), et sans ce débord
       l'anti-crénelage laissait filtrer un liseré de carte dans les angles. */
    top: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1001; /* au-dessus du spinner et des contrôles Leaflet */
    width: min(460px, 100%);
    background: var(--map-surface, #fff);
    border-radius: 0 var(--map-radius) var(--map-radius) 0;
    box-shadow: -12px 0 32px rgba(9, 9, 9, .16);
    cursor: auto;
}

.fournisseur-map--panel[hidden] {
    display: none;
}

.fournisseur-map--panel-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 20px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fournisseur-map--panel .fournisseur-map--panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--map-primary-light);
    color: var(--map-black, #090909);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.fournisseur-map--panel .fournisseur-map--panel-close:hover,
.fournisseur-map--panel .fournisseur-map--panel-close:focus-visible {
    background: var(--map-primary);
    color: #fff;
}

.fournisseur-map--panel :focus-visible,
.fournisseur-map--canvas path.leaflet-interactive:focus-visible {
    outline: 2px solid var(--map-primary);
    outline-offset: 2px;
}

/* En-tête : logo, nom, familles, commune. Réserve la place du bouton de fermeture. */
.sheet-head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-right: 48px;
}

.sheet-logo {
    flex: none;
    width: 72px;
    height: 72px;
    border: 1px solid var(--map-primary-light);
    border-radius: var(--map-radius);
    object-fit: contain;
    background: #fff;
}

.sheet-id {
    min-width: 0;
}

.sheet-id p {
    margin: 0;
}

.sheet-name {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sheet-type {
    color: var(--map-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.sheet-place {
    margin-top: 4px !important;
    font-size: 14px;
}

.sheet-place i {
    margin-right: 6px;
    color: var(--map-primary);
}

/* Contact : deux gros boutons cliquables, pleine largeur sur écran étroit. */
.sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 4px;
}

.sheet-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--map-radius);
    background: var(--map-primary-light);
    color: var(--map-black, #090909);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.sheet-action span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sheet-action i {
    flex: none;
    color: var(--map-primary);
}

.sheet-action:hover {
    background: var(--map-primary);
    color: #fff;
}

.sheet-action:hover i {
    color: #fff;
}

.sheet-content {
    flex: 1 0 auto;
}

.sheet-section {
    margin-top: 20px;
}

.sheet-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--map-primary-light);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--map-primary);
}

.sheet-family {
    margin-bottom: 8px;
    border: 1px solid var(--map-primary-light);
    border-radius: var(--map-radius);
}

.sheet-family summary {
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.sheet-family[open] summary {
    background: var(--map-primary-light);
    border-radius: var(--map-radius) var(--map-radius) 0 0;
}

.sheet-family--body {
    padding: 12px 14px;
}

.sheet-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.sheet-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sheet-period {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--map-primary-light);
    font-size: 12px;
}

.sheet-rows {
    margin: 0;
    font-size: 14px;
}

.sheet-rows dt {
    margin-top: 10px;
    color: var(--map-secondary);
    font-size: 12px;
}

.sheet-rows dd {
    margin: 2px 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sheet-rows dd img {
    max-width: 64px;
    height: auto;
}

.sheet-rows dd a {
    color: var(--map-primary);
}

/* Lien vers la page complète : toujours visible en bas du panneau. */
.sheet-foot {
    position: sticky;
    bottom: 0;
    margin: 20px -20px 0;
    padding: 12px 20px;
    background: var(--map-surface, #fff);
    border-top: 1px solid var(--map-primary-light);
}

.sheet-foot .map-card--link {
    display: block;
    text-align: center;
}

.sheet-skeleton {
    height: 220px;
    margin-top: 20px;
    border-radius: var(--map-radius);
    background: linear-gradient(90deg, var(--map-primary-light) 25%, #f4faf7 50%, var(--map-primary-light) 75%) 0 0 / 200% 100%;
    animation: fournisseur-map-shimmer 1.4s linear infinite;
}

@keyframes fournisseur-map-shimmer {
    to { background-position: -200% 0; }
}

.fournisseur-map--panel-error {
    margin: 20px 0 0;
    font-size: 15px;
    color: var(--map-secondary);
}

@media (max-width: 767px) {
    .fournisseur-map--panel {
        position: fixed;
        inset: 0;
        width: 100%;
        border-radius: 0;
    }

    /* Laisse libre le bouton cookies du site, fixé en bas à gauche. */
    .sheet-foot {
        padding-left: 72px;
    }

    /* Plein écran : la carte (z-index 0) passerait sous le bandeau sticky du site. */
    .fournisseur-map--canvas.has-panel {
        z-index: 100000;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-skeleton {
        animation: none;
    }
}