/******** Rangée de pastilles des filtres actifs (scripts/mapFilterRow.js) ********
   Version ordinateur. Contrôle Leaflet dans un coin « topcenter » : rangée centrée en
   haut de la carte, sans décalage en dur, sans pousser la carte ni capter la souris
   autour des pastilles. */

:root {
    --mfr-accent: #E8622F;
    --mfr-ink: #3B2A22;
    --mfr-muted: #8C756A;
    --mfr-tint: #fdebe3;
    --mfr-pill-h: 38px;
}

/* Coin personnalisé « topcenter » (créé par mapFilterRow.js) : haut de la carte, centré.
   left / max-width sont posés en JS (espace libre à côté des volets de droite et des
   autres contrôles). Le coin, comme tous les coins Leaflet, ne capte pas la souris. */
.leaflet-top.leaflet-center {
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    pointer-events: none;
}

/* Le contrôle : centré dans son coin, ne capte la souris que par ses pastilles */
.leaflet-control.map-filter-row {
    float: none;
    clear: none;
    margin: 12px 0 0;
    width: max-content;
    max-width: 100%;
    pointer-events: none;
    font-family: inherit;
    opacity: 1;
    transition: opacity .2s ease, visibility .2s ease;
}
.map-filter-row.is-empty,
.map-filter-row.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.map-filter-row.is-empty { display: none; }
/* Un aperçu de fiche passe sous la rangée : on l'efface le temps de l'aperçu */
.map-filter-row.is-covered { opacity: .12; }
.map-filter-row.is-covered .mfr-track > * { pointer-events: none; }

.mfr-track {
    position: relative;
    display: flex;
    flex-wrap: wrap;            /* 2 lignes au maximum (cf. .is-scroll) */
    align-items: center;
    justify-content: center;    /* chaque ligne est centrée */
    gap: 8px;
}
/* Plus de 2 lignes : une seule ligne qui défile horizontalement, fondu sur le bord */
.mfr-track.is-scroll {
    justify-content: flex-start;    /* centré, le début serait inaccessible */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 4px 2px 8px;       /* laisse la place à l'ombre des pastilles */
    margin: -4px -2px -8px;
    pointer-events: auto;
}
.mfr-track.is-scroll::-webkit-scrollbar { display: none; }
.mfr-track.is-scroll > * { flex: 0 0 auto; }
.mfr-track.is-scroll.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.mfr-track.is-scroll.fade-left  { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.mfr-track.is-scroll.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* ─── Pastille ─── */
.mfr-pill {
    display: inline-flex;
    align-items: center;
    height: var(--mfr-pill-h);
    box-sizing: border-box;
    padding: 0 7px 0 5px;
    border-radius: 999px;
    background: #fff;                         /* opaque */
    box-shadow: 0 2px 8px rgba(60, 30, 10, .18), 0 0 0 1px rgba(60, 30, 10, .04);
    color: var(--mfr-ink);
    font-size: 14px;
    pointer-events: auto;
}
.mfr-pill.is-new { animation: mfrIn .2s ease; }
@keyframes mfrIn {
    from { opacity: 0; transform: translateY(-4px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.mfr-body, .mfr-chev, .mfr-x, .mfr-clearall,
.mfr-p-clear, .mfr-p-edit, .mfr-p-x {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.mfr-body {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 6px 0 2px;
    border-radius: 999px;
    min-width: 0;
}
.mfr-body:hover .mfr-text { color: var(--mfr-accent); }
.mfr-text {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Icône de section : même pastille teintée que les libellés du volet de filtres */
.mfr-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mfr-tint);
    color: var(--mfr-accent);
    font-size: 11px;
}
.mfr-icon.is-muted { background: #efebe7; color: #8a817a; }
/* Avatar du membre à la place de l'icône : l'image remplit le rond, l'icône est masquée */
.mfr-icon.is-avatar { position: relative; overflow: hidden; background: #efebe7; }
.mfr-icon.is-avatar > i { visibility: hidden; }
.mfr-icon.is-avatar > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}   /* Membre : même gris que dans le volet */

.mfr-chev {
    width: 22px;
    height: 22px;
    margin-left: -2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--mfr-muted);
    font-size: 10px;
}
.mfr-chev:hover { background: #f3eee9; color: var(--mfr-ink); }
.mfr-chev[aria-expanded="true"] i { transform: rotate(180deg); }
.mfr-chev i { transition: transform .15s ease; }

/* Croix de retrait : petit rond gris */
.mfr-x {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #efebe7;
    color: #6b5b53;
    font-size: 11px;
}
.mfr-x:hover { background: #e2d9d1; color: var(--mfr-ink); }

.mfr-body:focus-visible, .mfr-chev:focus-visible, .mfr-x:focus-visible,
.mfr-clearall:focus-visible, .mfr-p-clear:focus-visible, .mfr-p-edit:focus-visible, .mfr-p-x:focus-visible {
    outline: 2px solid rgba(232, 98, 47, .6);
    outline-offset: 1px;
}

/* « Tout effacer » */
.mfr-clearall {
    height: var(--mfr-pill-h);
    padding: 0 16px;
    border-radius: 999px;
    background: #FFF7F2;
    box-shadow: 0 2px 8px rgba(60, 30, 10, .18), 0 0 0 1px rgba(60, 30, 10, .04);
    color: #C4472F;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: auto;
}
.mfr-clearall:hover { background: #fff; color: var(--mfr-accent); }

/* ─── Panneau de détail (chevron) ─── */
.mfr-panel {
    position: fixed;
    z-index: 1050;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: min(420px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(60, 30, 10, .24), 0 2px 6px rgba(60, 30, 10, .08);
    color: var(--mfr-ink);
    font-size: 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}
.mfr-panel.is-open { opacity: 1; transform: none; }
.mfr-panel[hidden] { display: none; }

.mfr-p-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 8px;
}
.mfr-p-title {
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mfr-muted);
}
.mfr-p-clear {
    font-size: 12px;
    font-weight: 700;
    color: var(--mfr-accent);
    text-decoration: underline;
}
.mfr-p-body {
    padding: 4px 14px 10px;
    overflow-y: auto;
}

/* Mots-clés : pastilles retirables */
.mfr-p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mfr-p-chip, .mfr-p-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 4px 3px 11px;
    border-radius: 999px;
    background: #FAF6F3;
    border: 1px solid #EFE4DD;
    font-size: 13px;
}
.mfr-p-chiptext, .mfr-p-subtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfr-p-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #efebe7;
    color: #6b5b53;
    font-size: 10px;
}
.mfr-p-x:hover { background: #e2d9d1; color: var(--mfr-ink); }

/* Catégories : une ligne par catégorie mère, sous-catégories choisies dessous */
.mfr-p-cat + .mfr-p-cat { margin-top: 10px; }
.mfr-p-catline { display: flex; align-items: center; gap: 9px; }
.mfr-p-caticon {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-size: 15px;
}
.mfr-p-catname {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfr-p-catall { flex: 0 0 auto; margin-left: -4px; font-weight: 500; color: var(--mfr-muted); white-space: nowrap; }
.mfr-p-catline .mfr-p-x { margin-left: auto; }
.mfr-p-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0 33px;
}

.mfr-p-foot {
    padding: 10px 14px 14px;
    border-top: 1px solid #F1E8E2;
}
.mfr-p-edit {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1.5px solid #EFE4DD;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--mfr-ink);
}
.mfr-p-edit:hover { border-color: var(--mfr-accent); color: var(--mfr-accent); }

@media (prefers-reduced-motion: reduce) {
    .mfr-pill.is-new { animation: none; }
    .map-filter-row, .mfr-panel, .mfr-chev i { transition: none; }
}