/* ============================================================================
   Opaddock - Parcours / Balades (page liste v2, split layout + carte Leaflet)
   Adapte de maquette/opaddock-balades-list2.html (mai 2026).
   Prefixe : .prc-* pour eviter conflits avec autres modules.
   ============================================================================ */

:root {
    --prc-emerald-50:#ecfdf5;
    --prc-emerald-100:#d1fae5;
    --prc-emerald-200:#a7f3d0;
    --prc-emerald-300:#6ee7b7;
    --prc-emerald-400:#34d399;
    --prc-emerald-500:#10b981;
    --prc-emerald-600:#059669;
    --prc-emerald-700:#047857;
    --prc-emerald-800:#065f46;
    --prc-emerald-900:#064e3b;
    --prc-slate-50:#f8fafc;
    --prc-slate-100:#f1f5f9;
    --prc-slate-200:#e2e8f0;
    --prc-slate-300:#cbd5e1;
    --prc-slate-400:#94a3b8;
    --prc-slate-500:#64748b;
    --prc-slate-600:#475569;
    --prc-slate-700:#334155;
    --prc-slate-800:#1e293b;
    --prc-slate-900:#0f172a;
    --prc-yellow-400:#facc15;
    --prc-rose-100:#ffe4e6;
    --prc-rose-500:#f43f5e;
    --prc-rose-600:#e11d48;
    --prc-shadow-soft:0 4px 12px rgba(0,0,0,0.05);
    --prc-shadow-md:0 10px 30px rgba(0,0,0,0.08);
    --prc-shadow-lg:0 20px 50px rgba(0,0,0,0.12);
    --prc-shadow-xl:0 30px 80px rgba(0,0,0,0.18);
    --prc-shadow-emerald:0 10px 30px rgba(16,185,129,0.25);
    --prc-ease:cubic-bezier(0.25,0.46,0.45,0.94);
    --prc-ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
    --prc-ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ----------------------------------------------------------------------------
   Hauteur du header opaddock fixe : sert de reference commune au sticky des
   3 colonnes (filtres / liste / carte), comme sur la page hebergements.
   ---------------------------------------------------------------------------- */
:root { --prc-topbar: 80px; }

/* ============ SPLIT 3 COLONNES : filtres | liste | carte ============ */
.prc-split-wrap {
    position: relative;
    padding: 0 20px;
    max-width: 1720px;
    margin: 0 auto;
}
.prc-split-inner {
    display: grid;
    grid-template-columns: 268px 1fr 480px;
    align-items: start;
    position: relative;
    /* PAS d'overflow:hidden -> casserait le position:sticky des colonnes */
}

/* ============ COLONNE 1 : PANNEAU DE FILTRES ============ */
.prc-filters {
    position: sticky;
    top: calc(var(--prc-topbar) + var(--sat, 0px));
    z-index: 5;
    background: var(--prc-slate-50);
    border-right: 1px solid var(--prc-slate-100);
    padding: 22px 18px 40px;
    min-height: calc(100vh - var(--prc-topbar) - var(--sat, 0px));
    max-height: calc(100vh - var(--prc-topbar) - var(--sat, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.prc-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--prc-slate-200);
}
.prc-filters-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--prc-slate-900);
    letter-spacing: -0.01em;
}
.prc-filters-clear {
    background: none;
    border: none;
    color: var(--primary-dark, var(--prc-emerald-600));
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    margin-left: auto;
}
.prc-filters-clear:hover { text-decoration: underline; }
/* Croix de fermeture : tiroir mobile uniquement */
.prc-filters-close {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--prc-slate-100);
    color: var(--prc-slate-700);
    font-size: 20px;
    cursor: pointer;
}
.prc-filters-close:hover { background: var(--prc-slate-200); }

.prc-fgroup { margin-bottom: 22px; }
.prc-fgroup-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--prc-slate-700);
    margin-bottom: 10px;
}
.prc-fgroup-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Recherche libre */
.prc-fsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    background: white;
    border: 1.5px solid var(--prc-slate-200);
    border-radius: 14px;
    transition: border-color .2s var(--prc-ease), box-shadow .2s var(--prc-ease);
}
.prc-fsearch i { color: var(--prc-slate-400); font-size: 17px; flex-shrink: 0; }
.prc-fsearch:focus-within {
    border-color: var(--primary, var(--prc-emerald-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .15);
}
.prc-fsearch input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    color: var(--prc-slate-800);
}

/* Select region */
.prc-fselect {
    width: 100%;
    height: 44px;
    padding: 0 36px 0 14px;
    background: white;
    border: 1.5px solid var(--prc-slate-200);
    border-radius: 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--prc-slate-800);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    transition: border-color .2s var(--prc-ease), box-shadow .2s var(--prc-ease);
}
.prc-fselect:focus {
    outline: none;
    border-color: var(--primary, var(--prc-emerald-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .15);
}

/* Pastilles de filtre (radio serveur ou bouton client) */
.prc-fpill {
    position: relative;
    display: block;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
}
.prc-fpill input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.prc-fpill > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;                 /* cible tactile >= 44px */
    padding: 8px 14px;
    background: white;
    border: 1.5px solid var(--prc-slate-200);
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--prc-slate-700);
    transition: border-color .2s var(--prc-ease), background .2s var(--prc-ease),
                color .2s var(--prc-ease), box-shadow .2s var(--prc-ease);
}
.prc-fpill > span i {
    font-size: 17px;
    color: var(--prc-slate-400);
    flex-shrink: 0;
    transition: color .2s var(--prc-ease);
}
.prc-fpill:hover > span {
    border-color: var(--primary-300, var(--prc-emerald-300));
    background: var(--primary-50, var(--prc-emerald-50));
    color: var(--primary-darker, var(--prc-emerald-700));
}
.prc-fpill:hover > span i { color: var(--primary, var(--prc-emerald-500)); }
.prc-fpill input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .30);
}
.prc-fpill.prc-fpill-btn:focus-visible {
    outline: none;
}
.prc-fpill.prc-fpill-btn:focus-visible > span {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .30);
}
/* Etat selectionne : degrade plein (design system « plug ») */
.prc-fpill input:checked + span,
.prc-fpill.prc-fpill-btn.is-active > span {
    background: linear-gradient(135deg,
        var(--primary, var(--prc-emerald-500)),
        var(--primary-dark, var(--prc-emerald-600)));
    border-color: transparent;
    color: white;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb, 16,185,129), .28);
}
.prc-fpill input:checked + span i,
.prc-fpill.prc-fpill-btn.is-active > span i { color: white; }

/* Pied du panneau : bouton d'application */
.prc-filters-foot { margin-top: 4px; }
.prc-filters-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg,
        var(--primary, var(--prc-emerald-500)),
        var(--primary-dark, var(--prc-emerald-600)));
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb, 16,185,129), .28);
    transition: transform .18s var(--prc-ease), box-shadow .18s var(--prc-ease);
}
.prc-filters-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(var(--primary-rgb, 16,185,129), .34);
}
.prc-filters-apply-mobile { display: none; }

/* Backdrop du tiroir mobile (overlay CLAIR, convention §2) */
.prc-filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 64;
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.prc-filters-backdrop.is-open { display: block; }

/* Bouton « Filtres » (ouvre le tiroir) : mobile / tablette uniquement */
.prc-filters-open {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    background: white;
    border: 1.5px solid var(--prc-slate-300);
    border-radius: 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--prc-slate-800);
    cursor: pointer;
}
.prc-filters-open i { font-size: 17px; }
.prc-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary, var(--prc-emerald-500));
    color: white;
    font-size: 11px;
    font-weight: 800;
}

/* ============ COLONNE 2 : LISTE ============ */
.prc-list-pane {
    background: white;
    border-right: 1px solid var(--prc-slate-100);
    min-height: calc(100vh - var(--prc-topbar) - var(--sat, 0px));
    min-width: 0;   /* autorise la grille a retrecir sans deborder */
}
.prc-list-grid-wrap { padding: 20px 24px 90px; }
.prc-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px 14px;
    position: sticky;
    top: calc(var(--prc-topbar) + var(--sat, 0px));
    background: white;
    z-index: 4;
    border-bottom: 1px solid var(--prc-slate-100);
}
.prc-list-head-main { min-width: 0; }
.prc-list-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.prc-list-sort label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--prc-slate-500);
    white-space: nowrap;
}
.prc-list-sort-select {
    min-height: 44px;
    padding: 0 12px;
    background: white;
    border: 1.5px solid var(--prc-slate-200);
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--prc-slate-700);
    cursor: pointer;
}
.prc-list-sort-select:focus {
    outline: none;
    border-color: var(--primary, var(--prc-emerald-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .15);
}
.prc-list-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--prc-slate-900);
    margin: 0 0 2px;
    line-height: 1.2;
}
.prc-list-title .prc-accent { color: var(--primary-dark, var(--prc-emerald-600)); }
.prc-list-sub {
    font-size: 13.5px;
    color: var(--prc-slate-500);
    margin: 0;
}
.prc-list-sub b { color: var(--prc-slate-800); font-weight: 700; }

.prc-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/* ============ TRAIL CARD ============ */
.prc-tcard {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--prc-shadow-soft);
    transition: transform .4s var(--prc-ease-spring), box-shadow .4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px);
    animation: prcCardIn .55s var(--prc-ease-out) forwards;
}
.prc-tcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--prc-shadow-lg);
}
.prc-tcard.is-highlighted {
    box-shadow: 0 0 0 3px var(--prc-emerald-500), var(--prc-shadow-lg);
}
@keyframes prcCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.prc-tcard:nth-child(1)  { animation-delay: .05s; }
.prc-tcard:nth-child(2)  { animation-delay: .10s; }
.prc-tcard:nth-child(3)  { animation-delay: .15s; }
.prc-tcard:nth-child(4)  { animation-delay: .20s; }
.prc-tcard:nth-child(5)  { animation-delay: .25s; }
.prc-tcard:nth-child(6)  { animation-delay: .30s; }
.prc-tcard:nth-child(7)  { animation-delay: .35s; }
.prc-tcard:nth-child(8)  { animation-delay: .40s; }
.prc-tcard:nth-child(n+9){ animation-delay: .45s; }

/* ----- Gallery ----- */
.prc-tcard-gallery {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: var(--prc-slate-100);
}
.prc-tcard-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .5s var(--prc-ease-out);
}
.prc-tcard-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.prc-tcard-slide svg {
    width: 100%;
    height: 100%;
    display: block;
}
.prc-tcard-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--prc-slate-800);
    box-shadow: var(--prc-shadow-md);
    opacity: 0;
    cursor: pointer;
    border: none;
    transition: opacity .3s ease, transform .25s ease, background .25s ease;
    z-index: 2;
}
.prc-tcard:hover .prc-tcard-nav { opacity: 1; }
.prc-tcard-nav:hover { transform: translateY(-50%) scale(1.12); background: white; }
.prc-tcard-nav.prev { left: 14px; }
.prc-tcard-nav.next { right: 14px; }
.prc-tcard-nav.is-disabled { opacity: 0 !important; pointer-events: none; }
.prc-tcard-dots {
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.prc-tcard-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transition: all .3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}
.prc-tcard-dot.is-active {
    background: white;
    width: 18px;
    border-radius: 6px;
}

.prc-tcard-badges {
    position: absolute;
    top: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.prc-tcard-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--prc-shadow-soft);
}
.prc-tcard-source.ce {
    background: linear-gradient(135deg, var(--prc-emerald-500), var(--prc-emerald-600));
    color: white;
}
.prc-tcard-source.co {
    background: rgba(255,255,255,0.95);
    color: #7c3aed;
}
.prc-tcard-source i { font-size: 13px; }

.prc-tcard-fav {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all .3s var(--prc-ease-spring);
    z-index: 2;
}
.prc-tcard-fav:hover { background: rgba(0,0,0,0.4); transform: scale(1.1); }
.prc-tcard-fav.is-active {
    color: #fff;
    background: var(--prc-rose-600);
    border: 2.5px solid var(--prc-rose-600);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25);
}
.prc-tcard-fav i.ti-heart-filled { display: none; }
.prc-tcard-fav.is-active i.ti-heart { display: none; }
.prc-tcard-fav.is-active i.ti-heart-filled { display: inline-block; }

/* ----- Body ----- */
.prc-tcard-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.prc-tcard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.prc-tcard-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--prc-slate-900);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}
.prc-tcard-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--prc-slate-800);
    flex-shrink: 0;
}
.prc-tcard-rate i { color: var(--prc-slate-900); font-size: 14px; }
.prc-tcard-rate .prc-reviews {
    color: var(--prc-slate-500);
    font-weight: 400;
    font-size: 13px;
}
.prc-tcard-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--prc-slate-500);
    margin-bottom: 14px;
}
.prc-tcard-loc i { font-size: 14px; }

.prc-tcard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    padding: 12px;
    background: var(--prc-slate-50);
    border-radius: 14px;
}
.prc-tcard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}
.prc-tcard-stat-icon {
    font-size: 18px;
    color: var(--prc-emerald-600);
    margin-bottom: 2px;
}
.prc-tcard-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--prc-slate-800);
    line-height: 1.1;
}
.prc-tcard-stat-label {
    font-size: 10px;
    color: var(--prc-slate-500);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.prc-tcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.prc-tcard-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--prc-slate-100);
    color: var(--prc-slate-700);
}
.prc-tcard-tag i { font-size: 12px; }
.prc-tcard-tag.green  { background: var(--prc-emerald-100); color: var(--prc-emerald-700); }
.prc-tcard-tag.blue   { background: #dbeafe; color: #1d4ed8; }
.prc-tcard-tag.amber  { background: #fef3c7; color: #92400e; }
.prc-tcard-tag.rose   { background: var(--prc-rose-100); color: var(--prc-rose-600); }
.prc-tcard-tag.purple { background: #f3e8ff; color: #7c3aed; }

.prc-tcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--prc-slate-100);
}
.prc-tcard-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.prc-tcard-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--prc-slate-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 700;
}
.prc-tcard-avatar.av-ce { background: linear-gradient(135deg, var(--prc-emerald-500), var(--prc-emerald-700)); }
.prc-tcard-avatar.av-co { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.prc-tcard-avatar.av-photo { background: none; overflow: hidden; }
.prc-tcard-avatar.av-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prc-tcard-author-info { min-width: 0; }
.prc-tcard-author-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--prc-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prc-tcard-author-role {
    font-size: 11px;
    color: var(--prc-slate-500);
    white-space: nowrap;
}
.prc-tcard-price {
    text-align: right;
    flex-shrink: 0;
}
.prc-tcard-price-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--prc-slate-900);
    letter-spacing: -0.01em;
}
.prc-tcard-price-free {
    font-size: 14px;
    font-weight: 700;
    color: var(--prc-emerald-600);
}
.prc-tcard-price-unit {
    font-size: 11px;
    color: var(--prc-slate-500);
    display: block;
    line-height: 1;
}

/* ============ COLONNE 3 : CARTE ============ */
/* Le sticky est cale sur la meme reference que les 2 autres colonnes
   (--prc-topbar). Combine au min-height de .prc-list-pane, cela garantit que le
   volet carte ne peut JAMAIS remonter sous le header fixe : c'est ce qui rendait
   l'overlay « Traces GPS » incliquable en bas de page (le header interceptait le
   clic - son z-index le place au-dessus du contexte d'empilement du volet). */
.prc-map-pane {
    position: sticky;
    top: calc(var(--prc-topbar) + var(--sat, 0px));
    height: calc(100vh - var(--prc-topbar) - var(--sat, 0px));
    border-left: 1px solid var(--prc-slate-100);
}
#prcMap {
    width: 100%;
    height: 100%;
    background: var(--prc-slate-100);
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* Leaflet customisations */
.leaflet-container { font-family: inherit; }
/* ---------------------------------------------------------------------------
   Marqueur de parcours (divIcon Leaflet, cf. script_parcours_v2.js)
   ---------------------------------------------------------------------------
   L'ancienne pilule affichait la distance a cote du pin : deux parcours voisins
   produisaient deux etiquettes qui se chevauchaient, illisibles. Le marqueur est
   desormais une pastille compacte de 42px sans texte, dont l'ICONE porte le
   paysage (scene derivee cote PHP par prc_scene_for()) et la pastille d'angle le
   badge principal. La distance reste dans la popup et sur la card.

   Anatomie (conteneur Leaflet 44x52, ancre = pointe basse) :
     .prc-map-pin            pastille 42x42, coins tres arrondis (style « plug »)
       .prc-map-pin-icon     SVG inline du paysage, currentColor
       .prc-map-pin-badge    pastille d'angle du badge principal (optionnelle)
     ::after                 la pointe, qui tombe exactement sur la coordonnee
   --------------------------------------------------------------------------- */
.prc-custom-pin-wrap { background: none; border: 0; }

.prc-map-pin {
    position: absolute;
    top: 0; left: 50%;
    width: 42px; height: 42px;
    margin-left: -21px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Pivot sur la pointe : la pastille grossit sans quitter sa coordonnee. */
    transform-origin: 50% 124%;
    transition: transform .2s var(--prc-ease-spring),
                filter .2s var(--prc-ease),
                box-shadow .2s var(--prc-ease);
}
/* Pointe du marqueur. Meme teinte pour les deux variantes : elle prolonge le bas
   du degrade (ce) ou l'anneau (co). */
.prc-map-pin::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    margin-left: -6px;
    width: 0; height: 0;
    border: 6px solid transparent;
    border-bottom: 0;
    border-top: 8px solid var(--primary-dark);
}
.prc-map-pin-icon { width: 24px; height: 24px; }
.prc-map-pin-icon svg { width: 100%; height: 100%; display: block; }

/* Centre equestre : pastille PLEINE (offre reservable). */
.prc-map-pin.ce {
    background: linear-gradient(140deg, var(--primary-light), var(--primary-dark));
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .92);
    filter: drop-shadow(0 4px 10px rgba(var(--primary-rgb), .35))
            drop-shadow(0 1px 2px rgba(0, 0, 0, .16));
}
/* Communaute : pastille EVIDEE. La distinction se joue sur le remplissage et non
   sur une seconde teinte : elle reste lisible en niveaux de gris comme en vision
   des couleurs alteree, et tout le marqueur tient dans la palette du theme (§1). */
.prc-map-pin.co {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 2px var(--primary);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .14))
            drop-shadow(0 1px 2px rgba(0, 0, 0, .10));
}

/* Pastille du badge principal : toujours contrastee avec son hote (blanche sur
   pastille pleine, pleine sur pastille evidee). */
.prc-map-pin-badge {
    position: absolute;
    top: -5px; right: -5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.prc-map-pin-badge svg { width: 11px; height: 11px; display: block; }
.prc-map-pin.co .prc-map-pin-badge {
    background: var(--primary-dark);
    color: #fff;
}

/* Survol direct du marqueur. Leaflet remonte deja le marqueur survole
   (riseOnHover) : le z-index se joue sur .leaflet-marker-icon, pas ici. */
.prc-map-pin:hover { transform: scale(1.1); }

/* Etat mis en avant (survol de la card correspondante dans la liste, ou focus).
   Selecteurs a 3 classes : ils l'emportent sur .ce / .co sans !important. */
.prc-map-pin.ce.is-active,
.prc-map-pin.co.is-active {
    transform: scale(1.18);
    background: linear-gradient(140deg, var(--primary), var(--primary-darker));
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff;
    filter: drop-shadow(0 8px 18px rgba(var(--primary-rgb), .5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}
.prc-map-pin.ce.is-active::after,
.prc-map-pin.co.is-active::after { border-top-color: var(--primary-darker); }
.prc-map-pin.co.is-active .prc-map-pin-badge {
    background: #fff;
    color: var(--primary-dark);
}

/* Leaflet rend le marqueur focusable : l'anneau de focus doit etre visible. */
.prc-custom-pin-wrap:focus { outline: none; }
.prc-custom-pin-wrap:focus-visible .prc-map-pin {
    transform: scale(1.12);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(var(--primary-rgb), .45);
}

@media (prefers-reduced-motion: reduce) {
    .prc-map-pin { transition: none; }
    .prc-map-pin:hover,
    .prc-map-pin.ce.is-active,
    .prc-map-pin.co.is-active,
    .prc-custom-pin-wrap:focus-visible .prc-map-pin { transform: none; }
}

/* Custom popup */
.leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    box-shadow: var(--prc-shadow-xl) !important;
    padding: 0 !important;
    overflow: hidden;
}
.leaflet-popup-content {
    margin: 0 !important;
    width: 240px !important;
}
.leaflet-popup-tip { box-shadow: none !important; }
.prc-pop-img { height: 130px; overflow: hidden; }
.prc-pop-img svg { width: 100%; height: 100%; display: block; }
.prc-pop-body { padding: 12px 14px 14px; }
.prc-pop-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--prc-slate-900);
    margin-bottom: 2px;
}
/* Paysage + badge : l'equivalent TEXTE de ce que l'icone du marqueur encode.
   Un pictogramme seul ne se lit pas ; la popup nomme ce qu'il represente. */
.prc-pop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 7px 0 8px;
}
.prc-pop-tag {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--prc-slate-100);
    color: var(--prc-slate-600);
}
.prc-pop-tag.is-badge {
    background: var(--primary-50);
    color: var(--primary-darker);
}
.prc-pop-meta {
    font-size: 12px;
    color: var(--prc-slate-500);
    display: flex;
    align-items: center;
    gap: 10px;
}
.prc-pop-meta i { font-size: 13px; color: var(--prc-emerald-600); }
.prc-pop-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* Map overlay toggle */
/* pointer-events:none sur la barre -> seuls les boutons captent le clic ; le reste
   de la bande laisse passer les interactions vers la carte Leaflet. */
.prc-map-overlay-top {
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    gap: 8px;
    pointer-events: none;
}
.prc-map-overlay-top > * { pointer-events: auto; }
/* Pose par le JS quand le volet sticky remonte sous le header fixe : on n'affiche
   jamais un bouton visible mais incliquable (le header capterait le clic).
   Le `pointer-events: none` doit viser les ENFANTS : la regle `> *` ci-dessus leur
   remet `auto`, et un parent en `none` ne desactive pas un enfant en `auto`. */
.prc-map-overlay-top.is-covered { opacity: 0; transition: opacity .15s ease; }
.prc-map-overlay-top.is-covered > * { pointer-events: none; }
.prc-map-toggle {
    background: white;
    min-height: 44px;              /* cible tactile >= 44px */
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--prc-slate-800);
    box-shadow: var(--prc-shadow-md);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--prc-slate-200);
    cursor: pointer;
    font-family: inherit;
    transition: transform .25s var(--prc-ease), box-shadow .25s var(--prc-ease);
}
.prc-map-toggle:hover { transform: translateY(-1px); box-shadow: var(--prc-shadow-lg); }
.prc-map-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 16,185,129), .35), var(--prc-shadow-md);
}
.prc-map-toggle i { font-size: 15px; color: var(--primary-dark, var(--prc-emerald-600)); }
.prc-map-switch {
    width: 32px; height: 18px;
    border-radius: 999px;
    background: var(--primary, var(--prc-emerald-500));
    position: relative;
    flex-shrink: 0;
    transition: background .25s ease;
}
.prc-map-switch::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    transition: right .25s ease;
}
.prc-map-toggle.is-off .prc-map-switch { background: var(--prc-slate-300); }
.prc-map-toggle.is-off .prc-map-switch::after { right: 16px; }

/* ============ EMPTY STATE ============ */
.prc-empty {
    padding: 64px 32px;
    background: linear-gradient(180deg, white 0%, var(--prc-slate-50) 100%);
    border-radius: 24px;
    border: 1px dashed var(--prc-slate-200);
    text-align: center;
}
.prc-empty-icon {
    width: 96px; height: 96px;
    background: rgba(16,185,129,0.10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--prc-emerald-500);
    box-shadow: 0 0 0 8px rgba(16,185,129,0.05),
                0 0 0 16px rgba(16,185,129,0.025);
}
.prc-empty-icon i { font-size: 42px; }
.prc-empty h3 { margin: 0 0 8px; font-size: 20px; color: var(--prc-slate-700); }
.prc-empty p  { margin: 0 0 24px; color: var(--prc-slate-500); }
.prc-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--prc-emerald-500);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
}
.prc-btn-primary:hover { background: var(--prc-emerald-600); }

/* ============ CTA MOBILE (bascule liste <-> carte) ============ */
/* NB : la visibilite est pilotee UNIQUEMENT par la CSS ci-dessous. Le bouton
   portait auparavant un style="display:none" inline qui battait la media query
   -> le CTA n'apparaissait jamais et la carte etait donc inatteignable en
   dessous de 1024px. */
.prc-mobile-cta {
    display: none;
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-height: 48px;
    padding: 12px 22px;
    background: var(--prc-slate-900);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--prc-shadow-xl);
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}
.prc-mobile-cta i { font-size: 16px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1440px) {
    .prc-split-inner { grid-template-columns: 250px 1fr 400px; }
    .prc-list-grid { gap: 18px; }
    .prc-tcard-stats { gap: 4px; padding: 10px; }
    .prc-tcard-stat-label { font-size: 9px; }
}

@media (max-width: 1180px) {
    /* La grille de cards passe sur 1 colonne pour garder la carte visible. */
    .prc-split-inner { grid-template-columns: 230px 1fr 340px; }
    .prc-list-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Tablette / mobile : le panneau devient un TIROIR plein ecran ---- */
@media (max-width: 900px) {
    .prc-split-wrap { padding: 0; }
    .prc-split-inner { grid-template-columns: minmax(0, 1fr); }

    .prc-filters {
        position: fixed;
        /* Demarre SOUS le header fixe : sinon l'en-tete du tiroir (titre, « Tout
           effacer », croix de fermeture) passe derriere le header et devient
           inatteignable. */
        top: calc(var(--prc-topbar) + var(--sat, 0px));
        left: 0;
        right: auto;
        bottom: 0;
        z-index: 65;
        width: min(420px, 100%);
        max-width: 100%;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px));
        background: white;
        border-right: none;
        border-radius: 0;
        box-shadow: var(--prc-shadow-xl);
        transform: translateX(-100%);
        transition: transform .25s var(--prc-ease-out);
        overflow-y: auto;
    }
    .prc-filters.is-open { transform: translateX(0); }
    .prc-filters-close { display: inline-flex; }
    .prc-filters-open  { display: inline-flex; }
    .prc-filters-apply-desktop { display: none; }
    .prc-filters-apply-mobile  { display: inline; }
    .prc-filters-foot {
        position: sticky;
        bottom: 0;
        padding-top: 12px;
        background: linear-gradient(180deg, rgba(255,255,255,0), white 28%);
    }

    .prc-list-pane { border-right: none; min-height: auto; }
    .prc-list-head { position: static; padding: 14px 16px; }
    .prc-list-grid-wrap { padding: 16px 16px 110px; }
    .prc-list-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    /* Carte : masquee, ouverte en plein ecran par le CTA */
    .prc-map-pane { display: none; }
    .prc-map-pane.is-mobile-visible {
        display: block;
        position: fixed;
        inset: calc(var(--prc-topbar) + var(--sat, 0px)) 0 0 0;
        height: auto;
        z-index: 55;
        background: white;
        border-left: none;
    }
    .prc-mobile-cta { display: inline-flex; }
}

@media (max-width: 560px) {
    .prc-filters { width: 100%; }
    .prc-list-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .prc-list-head-actions { flex-wrap: wrap; }
    .prc-list-title { font-size: 21px; }
    .prc-list-sort { flex: 1; }
    .prc-list-sort-select { flex: 1; min-width: 0; }
}

/* Respect des preferences d'animation reduite (§17) */
@media (prefers-reduced-motion: reduce) {
    .prc-filters,
    .prc-fpill > span,
    .prc-filters-apply,
    .prc-map-switch::after { transition: none !important; }
    .prc-tcard { animation: none !important; opacity: 1; transform: none; }
}