/**
 * Carte producteurs bio — styles front (public, thème agrikole).
 * Auto-suffisant. IMPORTANT : le thème force html{font-size:62.5%} (1rem≈10px) →
 * toutes les tailles sont en PX (sinon texte minuscule). Police = Barlow (le stack
 * « système » seul rend en monospace sur Fedora). Responsive smartphone obligatoire.
 *
 * Marqueurs / cluster / panneau détail / panneau de filtres consomment les tokens
 * `--apc-*` de apaba-front-tokens.css (enqueue en dépendance, cf adminapaba.php).
 * Zone d'actions et modale gardent leurs `--apaba-vert*` locaux historiques (même
 * valeur que --apc-brand : #2e7d32, cf docs/09_DESIGN_SYSTEM_FRONT.md).
 */

.apaba-carte-wrapper {
    --apaba-vert: #2e7d32;
    --apaba-vert-fonce: #1b5e20;
    max-width: 100%;
    margin: 24px 0;
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
}
.apaba-carte-wrapper *,
.apaba-carte-wrapper *::before,
.apaba-carte-wrapper *::after {
    box-sizing: border-box;
}

/* Neutralise le fond gris-olive que le thème pose sur tous les <button> */
.apaba-carte-wrapper button {
    font-family: inherit;
}

/* Titres : le thème parent (agrikole/style.css l.911-917) pose "Amatic SC" et l'enfant
   (site-custom.css l.290-301) "Bookman Old Style" serif sur TOUS les h1-h6, plus
   `margin: 0 0 25px`. Le <h4> « Contact » de la fiche et le <h2> de la modale en
   héritaient : deux polices étrangères au bloc. On rend la police du bloc ici ; tailles
   et marges restent portées par la règle de chaque composant, plus bas dans le fichier
   (spécificité égale → l'ordre source les fait gagner). */
.apaba-carte-wrapper h2,
.apaba-carte-wrapper h3,
.apaba-carte-wrapper h4 {
    font-family: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
    margin: 0;
}

/* Micro-libellé en capitales — STYLE UNIQUE de tous les intitulés de la carte : titres de
   groupe du panneau de filtres, intitulés de champ de la fiche (Productions,
   Commercialisation…), titre « Contact ». Encre pleine et non `--apc-muted` : un intitulé
   à la fois plus petit ET plus pâle que sa valeur se lisait comme une note de bas de page,
   jamais comme un titre. Ce sont les seules trois déclarations de micro-libellé du
   fichier : ne pas en réintroduire une locale. */
.apc-group-title,
.apc-field strong,
.apc-panel-contact h4 {
    display: block;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--apc-ink, #22271f);
}

/* ==========================================================================
   Panneau de filtres : overlay gauche DANS la zone carte. Frère de
   #apaba-carte-map (jamais un enfant du conteneur Leaflet) → aucun conflit
   d'événements souris avec la carte. Remplace l'ancienne barre au-dessus de la
   carte ET l'ancien bloc légende : les étiquettes de production tiennent lieu
   de légende. Cf docs/09_DESIGN_SYSTEM_FRONT.md.
   ========================================================================== */
.apc-filters {
    position: absolute;
    top: 16px;
    left: 16px;
    /* Pleine hauteur de la zone carte, même marge en bas qu'en haut — exactement le
       gabarit de .apc-panel en face. La hauteur vient donc de top+bottom, plus d'un
       max-height (le corps `.apc-filters-body` absorbe le reste et scrolle). */
    bottom: 16px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    width: 328px;
    max-width: calc(100% - 32px);
    margin: 0;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--apc-line, #e4e7df);
    border-radius: var(--apc-radius-lg, 16px);
    box-shadow: var(--apc-shadow, 0 3px 12px rgba(43, 49, 40, .1));
    color: var(--apc-ink-2, #454c41);
    font-size: 14px;
    overflow: hidden;
}
/* wp_nonce_field() pose deux <input type="hidden"> : hors du flux flex. */
.apc-filters > input[type="hidden"] { display: none; }

.apc-filters-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px !important;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--apc-ink, #22271f) !important;
    background: none !important;
    border: 0 !important;
    text-align: left;
    cursor: pointer;
}
.apc-filters-toggle:focus-visible { outline: 2px solid var(--apc-brand, #2e7d32); outline-offset: -2px; }
.apc-filters-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.apc-filters-title { flex: 1 1 auto; }
.apc-filters-count {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 3px 10px;
    border-radius: var(--apc-radius-pill, 999px);
    background: var(--apc-brand, #2e7d32);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.apc-filters-count:empty { display: none; }   /* avant l'arrivée des données */
.apc-filters-chev {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}
.apc-filters[data-open="false"] .apc-filters-chev { transform: rotate(-90deg); }
.apc-filters[data-open="false"] .apc-filters-body,
.apc-filters[data-open="false"] .apc-search { display: none; }
/* Replié, le panneau ne doit pas garder la pleine hauteur : il n'y a plus rien dedans. */
.apc-filters[data-open="false"] { bottom: auto; }

.apc-filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    /* Écart Type → Production. Vaut vraiment 12 px depuis que la marge basse que le
       thème pose sur <select> est neutralisée (cf. .apc-select-input) : elle ajoutait
       12 px muets, soit 25 px réels. Même valeur que l'écart recherche → Type. */
    gap: 12px;
}

/* --- Recherche + autocomplétion de communes --- */
/* Hors du corps scrollable : porte donc son propre padding horizontal. */
.apc-search {
    position: relative;
    flex: 0 0 auto;
    /* Écart recherche → Type : même 12 px que le `gap` du corps. Vaut vraiment 12 px
       depuis que la marge basse du thème sur input[type=search] est neutralisée
       (agrikole/style.css l.740-769 : margin-bottom 20px) — elle en faisait 33. */
    padding: 0 16px 12px;
}
.apc-search-ico {
    position: absolute;
    left: 28px;
    top: 23px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    fill: none;
    stroke: var(--apc-muted, #6e756a);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}
/* Neutralise le fond beige que le thème pose sur les champs */
.apaba-carte-wrapper input[type="search"].apc-search-input {
    width: 100%;
    padding: 11px 44px 11px 40px !important;
    /* Le thème pose margin-bottom:20px sur input[type=search] (agrikole/style.css
       l.740-769). L'espacement du panneau doit venir du panneau, jamais du thème. */
    margin: 0 !important;
    border: 1px solid var(--apc-line, #e4e7df) !important;
    border-radius: var(--apc-radius-pill, 999px) !important;
    background: #fff !important;
    color: var(--apc-ink, #22271f) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    min-height: 46px;
}
.apaba-carte-wrapper input[type="search"].apc-search-input:focus {
    outline: none;
    border-color: var(--apc-brand, #2e7d32) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .15);
}
/* La croix native de Chrome ferait doublon avec .apc-search-clear */
.apc-search-input::-webkit-search-cancel-button { display: none; }

.apc-search-clear[hidden] { display: none; }
.apc-search-clear {
    position: absolute;
    right: 23px;
    top: 23px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: none !important;
    color: var(--apc-muted, #6e756a) !important;
    cursor: pointer;
}
.apc-search-clear:hover {
    background: var(--apc-line, #e4e7df) !important;
    color: var(--apc-ink, #22271f) !important;
}
.apc-search-clear:focus-visible { outline: 2px solid var(--apc-brand, #2e7d32); outline-offset: 1px; }
.apc-search-clear svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Suggestions FLOTTANTES : la liste vit dans .apaba-carte-map-zone (jamais dans
   .apc-filters, qui a overflow:hidden et l'y rognerait) et le JS la cale sous le champ.
   Elle recouvre la carte au lieu de pousser les filtres du dessous. */
.apc-suggestions[hidden] { display: none; }
.apc-suggestions {
    position: absolute;
    z-index: 25;
    margin: 0;
    padding: 5px;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--apc-line, #e4e7df);
    border-radius: var(--apc-radius, 10px);
    box-shadow: 0 8px 22px rgba(43, 49, 40, .18);
}
.apc-suggestion {
    margin: 0;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 15px;
    color: var(--apc-ink-2, #454c41);
    cursor: pointer;
}
.apc-suggestion:hover,
.apc-suggestion.is-active {
    background: var(--apc-brand-tint, #e8f1e9);
    color: var(--apc-ink, #22271f);
}

/* --- Groupes d'étiquettes --- */
/* Typographie : cf. le style unique de micro-libellé, en tête de fichier. */
.apc-group-title {
    margin-bottom: 8px;
}
.apc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Étiquette = filtre ET légende. La pastille reprend exactement la couleur de
   famille et l'icône du marqueur : c'est ce double encodage (couleur + icône +
   nom en toutes lettres) qui rend acceptable l'unique avertissement CVD de la
   palette — cf docs/09_DESIGN_SYSTEM_FRONT.md §Palette. */
.apaba-carte-wrapper .apc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 13px 5px 5px !important;
    border: 1.5px solid var(--apc-line, #e4e7df) !important;
    border-radius: var(--apc-radius-pill, 999px) !important;
    background: #fff !important;
    color: var(--apc-ink-2, #454c41) !important;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}
.apaba-carte-wrapper .apc-chip:hover { border-color: var(--apc-muted, #6e756a) !important; }
.apc-chip:focus-visible { outline: 2px solid var(--apc-brand, #2e7d32); outline-offset: 1px; }

.apc-chip-dot {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--ch-color, var(--apc-fil-autre, #6e6a60));
    display: flex;
    align-items: center;
    justify-content: center;
}
.apc-chip-dot svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.apaba-carte-wrapper .apc-chip--prod[aria-pressed="true"] {
    background: var(--ch-tint, var(--apc-fil-autre-tint, #edece8)) !important;
    border-color: var(--ch-color, var(--apc-fil-autre, #6e6a60)) !important;
    color: var(--apc-ink, #22271f) !important;
    font-weight: 700;
}

/* Type : liste déroulante à choix unique (le thème habille tous les <select> :
   apparence remise à zéro, chevron maison, mêmes jetons que le champ de recherche). */
.apc-select { position: relative; }
.apaba-carte-wrapper select.apc-select-input {
    width: 100%;
    padding: 11px 40px 11px 14px !important;
    /* Le thème enfant pose margin-bottom: var(--apaba-space-3) (12px) sur tout <select>
       (site-custom.css l.336-347) : c'est ce qui rendait l'écart Type → Production
       plus large que l'écart recherche → Type. */
    margin: 0 !important;
    border: 1px solid var(--apc-line, #e4e7df) !important;
    border-radius: var(--apc-radius, 10px) !important;
    background: #fff !important;
    color: var(--apc-ink, #22271f) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    line-height: 1.3;
    min-height: 46px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.apaba-carte-wrapper select.apc-select-input:focus {
    outline: none;
    border-color: var(--apc-brand, #2e7d32) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .15);
}
.apc-select-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    fill: none;
    stroke: var(--apc-muted, #6e756a);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.apc-filters-empty[hidden] { display: none; }
.apc-filters-empty {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--apc-radius, 10px);
    background: var(--apc-fil-autre-tint, #edece8);
    color: var(--apc-ink-2, #454c41);
    font-size: 13.5px;
    line-height: 1.4;
}

/* Animation de zoom : 180 ms au lieu des 250 ms de leaflet.css. Cette transition mesure
   à la fois l'animation ET la fenêtre pendant laquelle Leaflet REFUSE de démarrer un
   déplacement (classe `leaflet-zoom-anim` → `Draggable._onDown` sort aussitôt). Le blocage
   résiduel est supprimé côté JS (`endZoomAnim` dans carte-producteurs.js) ; ici on rend
   simplement le zoom plus vif. Scopé à notre zone : la carte EGalim garde le défaut.
   Spécificité 3 classes > les 2 de leaflet.css, quel que soit l'ordre d'enqueue. */
.apaba-carte-map-zone .leaflet-zoom-anim .leaflet-zoom-animated {
    -webkit-transition: -webkit-transform .18s cubic-bezier(0, 0, .25, 1);
    transition: transform .18s cubic-bezier(0, 0, .25, 1);
}

/* Contrôles Leaflet en bas à droite : zoom AU-DESSUS de la ligne d'attribution.
   ⚠️ `column` et non `column-reverse`. Dans un coin « bottom », `Control.addTo()`
   fait `insertBefore(container, corner.firstChild)` — il EMPILE PAR LE HAUT, à
   l'inverse des coins « top » qui appendent. Le zoom, ajouté après l'attribution,
   est donc déjà le PREMIER nœud du conteneur : l'ordre du DOM est celui qu'on
   veut, et le `column-reverse` posé ici pour « corriger » l'ordre l'inversait —
   l'attribution passait au-dessus des boutons, sur toutes les tailles d'écran. */
.apaba-carte-map-zone .leaflet-bottom.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* --- Zone carte + légende + panneau --- */
.apaba-carte-map-zone {
    position: relative;
    overflow: hidden;
    border-radius: var(--apc-radius-lg, 16px);
    border: 1px solid var(--apc-line, #e4e7df);
    background: var(--apc-map-bg, #eeeee9);
}
/* Hauteur pilotée ici (le shortcode n'écrit plus de style inline sauf height="…"
   explicite) : la carte suit la fenêtre au lieu d'un 600px figé. */
#apaba-carte-map {
    width: 100%;
    height: clamp(420px, 76vh, 900px);
    min-height: 320px;
    z-index: 1;
}

/* Actions sous la carte : CTA aligné à droite, hors de la carte */
.apaba-carte-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}
.apaba-carte-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 13px 22px !important;
    background: var(--apaba-vert) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--apc-radius-pill, 999px) !important;
    box-shadow: var(--apc-shadow, 0 3px 12px rgba(43, 49, 40, .1));
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}
.apaba-carte-cta:hover {
    background: var(--apaba-vert-fonce) !important;
}
.apaba-carte-cta-icon {
    font-size: 20px;
    line-height: 1;
}

/* ==========================================================================
   Marqueur : couleur = famille de filière (--mk-color), silhouette = rôle,
   icône SVG. Le wrapper (.apc-marker) est positionné par Leaflet (transform
   inline) : ne JAMAIS lui appliquer de transform en CSS, le hover/actif se
   joue sur le badge intérieur. Cf docs/09_DESIGN_SYSTEM_FRONT.md §Marqueur.
   ========================================================================== */
.apc-marker {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apc-marker-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-shrink:0 impératif : le wrapper fait exactement 40px (iconSize Leaflet).
       Un badge agrandi en largeur/hauteur s'y ferait comprimer sur l'axe principal
       seulement → disque devenu ovale. Le grossissement passe donc par un scale. */
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--mk-color, var(--apc-fil-autre, #6e6a60));
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(28, 33, 25, .32);
    transition: transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease;
}
.apc-marker-badge svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Rôle = silhouette */
.apc-marker-badge--transformateur {
    box-shadow: inset 0 0 0 3px #fff, 0 2px 8px rgba(28, 33, 25, .32);
}
.apc-marker-badge--distributeur {
    border-radius: 34%;
}
/* Aucun z-index ici : Leaflet pose le sien en inline (position.y) et le recalcule à
   chaque pan/zoom. Une valeur CSS `!important` gagnerait la cascade en imposant un
   rang PLUS BAS — c'est exactement ce qui faisait passer la puce active sous ses
   voisines. L'élévation vit dans carte-producteurs.js (riseOnHover / Z_ACTIVE). */
.apc-marker:hover .apc-marker-badge {
    transform: scale(1.08);
}
.apc-marker:focus-visible {
    outline: none;
}
.apc-marker:focus-visible .apc-marker-badge {
    box-shadow: 0 0 0 3px var(--apc-brand, #2e7d32), 0 2px 8px rgba(28, 33, 25, .35);
}
/* Grossissement par scale (1.2 = 48px pour un badge de 40px) : aucune propriété
   de layout animée, et le disque reste rigoureusement circulaire. */
.apc-marker.is-active .apc-marker-badge {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, .32), 0 4px 12px rgba(28, 33, 25, .38);
}
.apc-marker.is-active:hover .apc-marker-badge {
    transform: scale(1.26);
}
.apc-marker.is-active .apc-marker-badge--transformateur {
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px rgba(46, 125, 50, .32), 0 4px 12px rgba(28, 33, 25, .38);
}

/* ==========================================================================
   Regroupements (leaflet.markercluster) : disque BLANC, anneau vert de marque
   (le vert de marque et le vert « végétal » sont à ΔE 2.0 — un cluster vert se
   lirait comme un marqueur légumes). Même règle de non-transform sur le wrapper.
   ========================================================================== */
.apc-cluster {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.apc-cluster-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 3px solid var(--apc-brand, #2e7d32);
    border-radius: 50%;
    color: var(--apc-ink, #22271f);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 3px 10px rgba(28, 33, 25, .24);
    transition: transform .16s cubic-bezier(.22, 1, .36, 1);
}
.apc-cluster:hover .apc-cluster-disc {
    transform: scale(1.07);
}
.apc-cluster:focus-visible {
    outline: none;
}
.apc-cluster:focus-visible .apc-cluster-disc {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .4), 0 3px 10px rgba(28, 33, 25, .24);
}
.apc-cluster--s .apc-cluster-count { font-size: 15px; }
.apc-cluster--m .apc-cluster-count { font-size: 17px; }
.apc-cluster--l .apc-cluster-count { font-size: 19px; }

/* ==========================================================================
   Étiquette de survol : nom de la ferme au-dessus du marqueur.
   Sélecteurs préfixés `.leaflet-tooltip` : Leaflet pose son propre habillage
   (fond blanc, bordure, flèche ::before) qu'il faut neutraliser.
   ========================================================================== */
/* Le conteneur Leaflet n'est plus qu'une rangée transparente : la pastille noire
   n'habille QUE le nom (.apc-tip-name), le « + » et les puces flottent directement
   sur la carte, sans fond. */
.leaflet-tooltip.apc-tip {
    /* width:max-content impératif : la tooltip est en position absolue sans largeur
       intrinsèque. Sans lui, la boîte se réduit à ~0 et le nom se casse une lettre
       par ligne (étiquette verticale). max-width borne les noms longs. */
    width: max-content;
    max-width: 440px;
    padding: 0;
    /* Rangée « NOM + ● ● ● ». flex-wrap impératif : certaines fiches (magasins) portent
       jusqu'à 10 productions secondaires — la rangée ne tient alors pas, et le groupe de
       puces passe SOUS le nom au lieu de déborder. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;         /* un nom long passe à la ligne au lieu de déborder */
    overflow-wrap: break-word;   /* jamais `anywhere` : casserait entre deux lettres */
}
/* Pas de flèche : l'étiquette flotte librement au-dessus de la pastille. */
.leaflet-tooltip.apc-tip::before { display: none; }

/* La pastille noire : elle ne contient que le nom. */
.apc-tip-name {
    min-width: 0;
    padding: 8px 14px;
    border-radius: var(--apc-radius-pill);
    background: rgba(28, 33, 25, .92);
    box-shadow: 0 3px 10px rgba(28, 33, 25, .3);
}
/* « + » et seconde pastille groupés : ils passent à la ligne ensemble quand la rangée
   ne tient pas. Le « + » est posé à même les tuiles → halo blanc obligatoire. */
.apc-tip-more {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.apc-tip-plus {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--apc-ink, #22271f);
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
/* Seconde pastille : les productions secondaires, et rien d'autre (la principale est
   déjà portée par le marqueur). Même fond que le nom — c'est lui qui fait ressortir
   les puces, sans liseré blanc à ajouter. 4px de padding + 26px de puce = 34px, soit
   la hauteur exacte de la pastille du nom sur une ligne. */
.apc-tip-extra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: var(--apc-radius-pill);
    background: rgba(28, 33, 25, .92);
    box-shadow: 0 3px 10px rgba(28, 33, 25, .3);
}
/* Taille fixe et non `stretch` : un nom qui passe sur deux lignes gonflerait sinon
   les puces jusqu'à l'absurde. */
.apc-tip-dot {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tip-color, var(--apc-fil-autre, #6e6a60));
    display: flex;
    align-items: center;
    justify-content: center;
}
.apc-tip-dot svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   Panneau flottant : carte qui flotte dans le coin (plus les 4 bords collés).
   ========================================================================== */
.apc-panel[hidden] { display: none; }
.apc-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    width: 384px;
    max-width: calc(100% - 32px);
    background: var(--apc-surface, #fff);
    /* Séparation d'avec la carte : liseré + ombre à DEUX couches (contact serré puis
       diffusion large). Sur le fond CARTO Positron, quasi blanc, l'ombre seule ne tenait
       pas le bord — c'est déjà pourquoi `.apc-filters` en face porte un liseré. Même
       jeton de ligne des deux côtés de la carte. */
    border: 1px solid var(--apc-line, #e4e7df);
    border-radius: var(--apc-radius-lg, 16px);
    box-shadow: 0 2px 6px rgba(28, 33, 25, .1), var(--apc-shadow-lg, 0 14px 34px rgba(28, 33, 25, .2));
    /* Le défilement a QUITTÉ le panneau pour `.apc-panel-content` : la croix, la poignée
       mobile et le bandeau condensé sont enfants directs du panneau et doivent rester en
       place quand le contenu défile. `hidden` sert aussi à rogner sur le rayon. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--apc-ink-2, #454c41);
    font-size: 15px;
    line-height: 1.5;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
}
.apc-panel.is-open {
    opacity: 1;
    transform: translateX(0);
}
/* Conteneur statique (PHP) : c'est LUI qui défile (il ne peut donc plus être
   `display: contents`). `overscroll-behavior` : arrivé en butée, le geste ne part pas
   scroller la page derrière — la feuille basse mobile en dépend. */
.apc-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
}

.apc-panel-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;                   /* au-dessus du bandeau condensé (2) */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0 !important;
    background: rgba(255, 255, 255, .9) !important;
    color: var(--apc-ink-2, #454c41) !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.apc-panel-close:hover { background: #fff !important; color: var(--apc-ink, #22271f) !important; }
.apc-panel-close:focus-visible { outline: 2px solid var(--apc-brand, #2e7d32); outline-offset: 2px; }

/* Bandeau condensé — apparaît quand le titre de la tête sort par le haut. Volontairement
   PAS de coin AB ni de badges de rôle/adhésion : juste de quoi savoir sur quelle ferme on
   est, liseré de filière compris. Hors du flux, il recouvre le haut du contenu défilant.
   58px = 12 + 34 (la croix) + 12 → la croix y est exactement centrée. Les variables de
   teinte sont posées en inline par le JS : le bandeau est frère du scroller, il n'hérite
   pas de celles de `.apc-panel-head`. */
.apc-panel-mini {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 16px 0 54px;       /* 54px : réserve la croix (12 + 34 + 8) */
    background: var(--pn-tint, var(--apc-fil-autre-tint, #edece8));
    border-bottom: 2px solid var(--pn-color, var(--apc-fil-autre, #6e6a60));
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.apc-panel.has-mini .apc-panel-mini { opacity: 1; }
.apc-panel-mini-medal {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pn-color, var(--apc-fil-autre, #6e6a60));
    display: flex;
    align-items: center;
    justify-content: center;
}
.apc-panel-mini-medal svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Une seule ligne, jamais deux : c'est ce qui fait la discrétion du bandeau. */
.apc-panel-mini-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--apc-ink, #22271f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apc-panel-head {
    position: relative;
    padding: 50px 18px 16px;
    background: var(--pn-tint, var(--apc-fil-autre-tint, #edece8));
    border-bottom: 2px solid var(--pn-color, var(--apc-fil-autre, #6e6a60));
}
.apc-panel-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 60px;
}
.apc-panel-medal {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--pn-color, var(--apc-fil-autre, #6e6a60));
    display: flex;
    align-items: center;
    justify-content: center;
}
.apc-panel-medal svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.apc-panel-head h3 {
    margin: 0;
    font-family: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--apc-ink, #22271f);
    flex: 1 1 auto;
    min-width: 0;              /* laisse le titre partager la ligne du médaillon et wrapper */
    overflow-wrap: anywhere;   /* coupe un mot trop long au lieu de déborder */
}
.apc-panel-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}
.apc-panel-role {
    display: inline-block;
    padding: 4px 12px;
    background: #fff;
    color: var(--pn-color, var(--apc-fil-autre, #6e6a60));
    border: 1px solid var(--pn-color, var(--apc-fil-autre, #6e6a60));
    border-radius: var(--apc-radius-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.apc-panel-adherent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--apc-brand, #2e7d32);
    color: #fff;
    border: 1px solid var(--apc-brand, #2e7d32);
    border-radius: var(--apc-radius-pill, 999px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.apc-panel-adherent svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Coin AB — certification agriculture biologique. Rendu seulement si `certifBio === true`
   (cf docs/10_CONTRAT_CRM.md § 8) : le CRM ne filtre PAS sur la certification, 24 fiches sur
   240 ne sont pas certifiées. En `position:absolute`, son absence ne déplace rien. */
.apc-panel-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 76px;
    height: 76px;
    background: var(--apc-brand, #2e7d32);
    border-bottom-left-radius: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 9px 10px 0 0;
}
.apc-panel-corner svg { width: 40px; height: 35px; display: block; }

.apc-panel-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.apc-panel-loc {
    margin: 0;
    color: var(--apc-muted, #6e756a);
    font-size: 15px;
    line-height: 1.45;
}
.apc-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.apc-pill {
    display: inline-block;
    background: var(--pn-tint, var(--apc-fil-autre-tint, #edece8));
    color: var(--pn-color, var(--apc-fil-autre, #6e6a60));
    border-radius: var(--apc-radius-pill, 999px);
    padding: 4px 12px;
    font-size: 13.5px;
    font-weight: 600;
}
.apc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.apc-field span {
    color: var(--apc-ink-2, #454c41);
    font-size: 15px;
    line-height: 1.45;
}

.apc-panel-contact {
    margin-top: 2px;
    border-top: 1px solid var(--apc-line, #e4e7df);
    padding-top: 14px;
}
/* Typographie : cf. le style unique de micro-libellé, en tête de fichier. */
.apc-panel-contact h4 {
    margin: 0 0 8px;
}
.apc-panel-contact ul { list-style: none; margin: 0; padding: 0; }
.apc-panel-contact li { margin: 0 0 6px; font-size: 15px; }
.apc-panel-contact a {
    color: var(--apc-brand-dark, #1b5e20);
    font-weight: 600;
    word-break: break-word;
}

/* Mention « fiche partielle » des non-adhérents : informative, jamais alarmante. */
.apc-panel-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: var(--apc-radius, 10px);
    background: var(--apc-fil-autre-tint, #edece8);
    color: var(--apc-ink-2, #454c41);
    font-size: 13.5px;
    line-height: 1.45;
}

/* --- Modale --- */
.apaba-carte-modal[hidden] { display: none; }
.apaba-carte-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.apaba-carte-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.apaba-carte-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: var(--apc-radius-lg, 16px);
    padding: 30px 26px 26px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow-y: auto;
}
/* Même objet que .apc-panel-close (fiche) : pastille ronde, mêmes jetons, même taille. */
.apaba-carte-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: none !important;
    color: var(--apc-muted, #6e756a) !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.apaba-carte-modal-close:hover { background: var(--apc-line, #e4e7df) !important; color: var(--apc-ink, #22271f) !important; }
.apaba-carte-modal-close:focus-visible { outline: 2px solid var(--apc-brand, #2e7d32); outline-offset: 2px; }
/* Police : blindée par le reset h2/h3/h4 en tête de fichier (le thème pose une serif
   sur tous les titres). Ne pas retirer ce reset en croyant qu'il ne sert à rien. */
.apaba-carte-modal-box h2 {
    margin: 0 0 10px;
    padding-right: 42px;          /* réserve la croix de fermeture */
    font-size: 22px;
    line-height: 1.25;
    color: var(--apc-brand-dark, #1b5e20);
}
.apaba-carte-modal-intro {
    font-size: 15px;
    color: var(--apc-ink-2, #454c41);
    line-height: 1.45;
    margin: 0 0 18px;
}
.apaba-carte-modal-label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--apc-ink, #22271f);
    margin-bottom: 8px;
}
/* Champ email de la modale (neutralise le fond beige du thème) */
.apaba-carte-wrapper input[type="email"] {
    width: 100%;
    padding: 12px 14px !important;
    /* Comme la recherche et le select : l'espacement vient du bloc, pas du thème. */
    margin: 0 !important;
    border: 1px solid var(--apc-line, #e4e7df) !important;
    border-radius: var(--apc-radius, 10px) !important;
    background: #fff !important;
    color: var(--apc-ink, #22271f) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    min-height: 48px;
}
.apaba-carte-wrapper input[type="email"]:focus {
    outline: none;
    border-color: var(--apc-brand, #2e7d32) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .15);
}
.apaba-carte-modal-submit {
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px !important;
    background: var(--apaba-vert) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--apc-radius, 10px) !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
}
.apaba-carte-modal-submit:hover { background: var(--apaba-vert-fonce) !important; }
.apaba-carte-modal-submit:disabled { opacity: 0.6; cursor: default; }
.apaba-carte-modal-message {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.4;
    min-height: 1.2em;
}
.apaba-carte-modal-message.is-ok { color: var(--apaba-vert-fonce); }
.apaba-carte-modal-message.is-error { color: #c62828; }

/* Honeypot : hors écran mais focusable pour les bots */
.apaba-carte-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Responsive --- */
/* Grand écran : la carte déborde du conteneur étroit du thème et va chercher la
   largeur de la fenêtre. Marges négatives et non `transform` — un ancêtre transformé
   deviendrait le bloc conteneur de la modale en position:fixed. */
@media (min-width: 1100px) {
    .apaba-carte-wrapper {
        width: min(1560px, calc(100vw - 64px));
        max-width: none;
        margin-left: calc(50% - min(780px, (100vw - 64px) / 2));
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    /* Panneau de filtres : bandeau pleine largeur en haut de la carte, replié par
       défaut (le JS pose data-open="false" via matchMedia). */
    .apc-filters {
        top: 8px;
        left: 8px;
        right: 8px;
        /* Bandeau haut, jamais pleine hauteur en mobile : annule le `bottom` du desktop. */
        bottom: auto;
        width: auto;
        max-width: none;
        max-height: calc(100% - 16px);
    }
    .apaba-carte-actions {
        justify-content: stretch;
    }
    .apaba-carte-cta {
        width: 100%;
        justify-content: center;
    }

    /* Panneau = feuille basse, coins hauts arrondis, poignée de préhension */
    .apc-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 75%;
        border-radius: var(--apc-radius-lg, 16px) var(--apc-radius-lg, 16px) 0 0;
        transform: translateY(100%);
    }
    .apc-panel.is-open {
        transform: translateY(0);
    }
    .apc-panel::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: var(--apc-radius-pill, 999px);
        background: rgba(0, 0, 0, .18);
        z-index: 3;
    }

}

/* ==========================================================================
   Mobile (≤900px) : aperçu inerte + plein écran — « effet Google Maps ».
   Une carte draggable posée dans le flux d'une page WordPress CAPTURE le doigt :
   sur 76vh de haut, impossible de scroller la page à travers elle. L'aperçu est
   donc une carte inerte (le doigt scrolle) surmontée d'un voile qui bascule en
   plein écran ; là, les gestes reprennent et les panneaux (bandeau de filtres,
   feuille basse) ont déjà leur mise en page ci-dessus.
   Les états sont posés par carte-producteurs.js (.is-map-preview / .is-fullscreen) :
   sans JS la carte n'existe pas, il n'y a donc pas de repli CSS à prévoir.
   ⚠️ Le plein écran est un `position: fixed` — JAMAIS un `transform`. Un ancêtre
   transformé deviendrait le bloc conteneur de `.apaba-carte-modal` (position:
   fixed) : la modale se recadrerait sur la carte au lieu de la fenêtre.
   ========================================================================== */
.apc-veil,
.apc-fs-close { display: none; }

/* --- Aperçu inerte (en flux) --- */
.apaba-carte-wrapper.is-map-preview #apaba-carte-map {
    height: 300px;
    min-height: 0;
}
/* Le voile couvre TOUTE la zone : aucun geste n'atteint Leaflet, le doigt scrolle
   la page. Fond transparent — l'attribution reste lisible dessous (elle redevient
   cliquable en plein écran, où la carte est pleinement interactive). */
.apaba-carte-wrapper.is-map-preview .apc-veil {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 30;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.apaba-carte-wrapper.is-map-preview .apc-veil:focus-visible {
    outline: 2px solid var(--apc-brand, #2e7d32);
    outline-offset: -4px;
}
.apc-veil-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, .97);
    border-radius: var(--apc-radius-pill, 999px);
    box-shadow: var(--apc-shadow-lg, 0 14px 34px rgba(28, 33, 25, .2));
    color: var(--apc-ink, #22271f);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.apc-veil-ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Filtres et zoom appartiennent au plein écran : rien à piloter sur une carte inerte. */
.apaba-carte-wrapper.is-map-preview .apc-filters,
.apaba-carte-wrapper.is-map-preview .leaflet-control-zoom { display: none; }

/* --- Plein écran --- */
.apaba-carte-wrapper.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;              /* sous la modale (100000), au-dessus de l'entête du thème */
    width: auto;
    max-width: none;
    margin: 0;
    background: var(--apc-map-bg, #eeeee9);
}
.apaba-carte-wrapper.is-fullscreen .apaba-carte-map-zone {
    height: 100vh;
    height: 100dvh;             /* barre d'URL iOS : `vh` fige la hauteur au chargement */
    border: 0;
    border-radius: 0;
}
.apaba-carte-wrapper.is-fullscreen #apaba-carte-map {
    height: 100%;
    min-height: 0;
}
/* Le CTA reste sous l'aperçu, dans la page : la carte plein écran ne porte que la carte. */
.apaba-carte-wrapper.is-fullscreen .apaba-carte-actions { display: none; }

.apaba-carte-wrapper.is-fullscreen .apc-fs-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Encoche / barre système : le plein écran occupe l'écran entier. */
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    z-index: 40;
    /* 52px : c'est LA sortie du plein écran, elle se vise au pouce sans regarder
       (au-dessus des 44px minimum recommandés pour une cible tactile). */
    width: 52px;
    height: 52px;
    padding: 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid var(--apc-line, #e4e7df) !important;
    border-radius: 50%;
    box-shadow: var(--apc-shadow-lg, 0 14px 34px rgba(28, 33, 25, .2));
    color: var(--apc-ink, #22271f) !important;
    cursor: pointer;
}
.apaba-carte-wrapper.is-fullscreen .apc-fs-close:focus-visible {
    outline: 2px solid var(--apc-brand, #2e7d32);
    outline-offset: 2px;
}
.apc-fs-close svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
/* La croix tient le coin haut-droit : le bandeau de filtres lui laisse la place.
   Au-dessus de 600px le panneau est ancré à gauche (left + width) → `right` y est
   ignoré, la règle ne coûte rien. */
.apaba-carte-wrapper.is-fullscreen .apc-filters {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(68px + env(safe-area-inset-right, 0px));   /* 52px de croix + 2×8px de marge */
}

@media (prefers-reduced-motion: reduce) {
    .apc-panel,
    .apc-panel.is-open,
    .apc-panel-mini,
    .apc-marker-badge,
    .apc-cluster-disc,
    .apc-filters-chev {
        transition-duration: .01ms !important;
    }
    .apc-panel {
        transform: none;
    }
}