/* ============================================================================
   Opaddock - Centres equestres v2 (page liste, cards style maquette search)
   Adapte de maquette/opaddock-search.html (mai 2026).
   ============================================================================ */

/* On garde l'ancien CSS pour le hero/wave/empty-state existant : */
@import url('/css/style_etablissements.css');

:root {
    --etb-emerald-50:#ecfdf5;
    --etb-emerald-100:#d1fae5;
    --etb-emerald-300:#6ee7b7;
    --etb-emerald-400:#34d399;
    --etb-emerald-500:#10b981;
    --etb-emerald-600:#059669;
    --etb-emerald-700:#047857;
    --etb-slate-50:#f8fafc;
    --etb-slate-100:#f1f5f9;
    --etb-slate-200:#e2e8f0;
    --etb-slate-300:#cbd5e1;
    --etb-slate-400:#94a3b8;
    --etb-slate-500:#64748b;
    --etb-slate-600:#475569;
    --etb-slate-700:#334155;
    --etb-slate-800:#1e293b;
    --etb-slate-900:#0f172a;
    --etb-yellow-400:#facc15;
    --etb-rose-500:#f43f5e;
    --etb-shadow-soft:0 4px 12px rgba(0,0,0,0.05);
    --etb-shadow-md:0 10px 30px rgba(0,0,0,0.08);
    --etb-shadow-lg:0 30px 60px rgba(0,0,0,0.16);
    --etb-ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
    --etb-ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ============ MOTIVE PILLS BAR ============ */
.etb-motive-bar {
    background: white;
    border-bottom: 1px solid var(--etb-slate-100);
    position: sticky;
    top: calc(80px + var(--sat,0px));
    z-index: 30;
}
.etb-motive-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.etb-motive-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--etb-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.etb-motive-pills {
    flex: 1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}
.etb-motive-pills::-webkit-scrollbar { display: none; }
.etb-motive-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--etb-slate-50);
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--etb-slate-700);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: all .25s var(--etb-ease-out);
}
.etb-motive-pill i { font-size: 15px; }
.etb-motive-pill:hover {
    background: white;
    border-color: var(--etb-slate-200);
}
.etb-motive-pill.is-active {
    background: var(--etb-slate-900);
    color: white;
    border-color: var(--etb-slate-900);
    box-shadow: 0 6px 16px rgba(15,23,42,0.25);
}

/* ============ FILTERS SIDEBAR (style v2) ============ */
.etb-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--etb-slate-100);
}
.etb-filters-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--etb-slate-900);
}
.etb-filters-clear {
    background: none;
    border: none;
    color: var(--etb-emerald-600);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.etb-filters-clear:hover { color: var(--etb-emerald-700); text-decoration: underline; }

.etb-fgroup { margin-bottom: 22px; }
.etb-fgroup-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--etb-slate-700);
    margin-bottom: 10px;
}
.etb-fgroup-list { display: flex; flex-direction: column; gap: 4px; }
.etb-fgroup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .15s ease;
    user-select: none;
    position: relative;
}
.etb-fgroup-row:hover { background: var(--etb-slate-50); }
.etb-fgroup-row-icon {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--etb-slate-100);
    color: var(--etb-slate-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.etb-fgroup-row-label {
    flex: 1;
    font-size: 13px;
    color: var(--etb-slate-700);
    font-weight: 500;
}
.etb-fgroup-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.etb-fgroup-box {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--etb-slate-300);
    background: white;
    flex-shrink: 0;
    transition: all .15s ease;
    position: relative;
}
.etb-fgroup-check:checked + .etb-fgroup-box {
    background: var(--etb-emerald-500);
    border-color: var(--etb-emerald-500);
}
.etb-fgroup-check:checked + .etb-fgroup-box::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Etat coche : porte par le CSS (:has) depuis le 2026-07-17. Avant, la classe
   .is-active etait posee par le filtrage JS de la colonne, supprime avec lui. */
.etb-fgroup-row.is-active,
.etb-fgroup-row:has(.etb-fgroup-check:checked) {
    background: rgba(var(--primary-rgb), 0.06);
}
/* Focus clavier : la vraie case est masquee, le halo se pose donc sur la pastille. */
.etb-fgroup-check:focus-visible + .etb-fgroup-box {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .30);
}
/* Aide sous un groupe (ex: « cochez plusieurs types » -> union). */
.etb-fgroup-hint {
    margin: 8px 2px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--etb-slate-500);
}

.etb-fgroup-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* .etb-fpill etait un <button> pilote en JS ; c'est desormais un <label> portant
   une vraie case a cocher (name="proximite[]") soumise avec le formulaire. */
.etb-fpill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* §10c : cible tactile */
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--etb-slate-200);
    background: white;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--etb-slate-700);
    cursor: pointer;
    font-family: inherit;
    user-select: none;
    transition: all .2s ease;
}
.etb-fpill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.etb-fpill:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
    color: var(--primary-darker);
}
.etb-fpill:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.30);
}
.etb-fpill:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .30);
}

/* Bouton « Appliquer les filtres » : la colonne est un formulaire GET, il faut
   donc un moyen explicite de la soumettre (et ca marche sans JS). Colle en bas
   de la colonne, qui defile sur les grands ecrans. */
.etb-filters-apply {
    position: sticky;
    bottom: 0;
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.etb-filters-apply:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--primary-rgb), .34); }
.etb-filters-apply:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .35); }
.etb-filters-apply i { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
    .etb-filters-apply { transition: none; }
    .etb-filters-apply:hover { transform: none; }
}

/* « Tout effacer » est un <a> (retour a l'URL sans facettes), plus un <button>. */
a.etb-filters-clear { text-decoration: none; display: inline-block; }

/* Criteres demandes que la recherche n'a pas pu appliquer (chevaux / dates sur un
   type qui ne s'y prete pas). Un filtre sans effet doit se voir. */
.etb-notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 0;
}
.etb-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.5;
}
.etb-notice i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ============ CARDS GRID ============ */
.etb-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.etb-acc-card {
    /* Ancre du lien couvrant (`.etb-acc-link::after`) : toute la carte est cliquable,
       sans imbriquer de liens. */
    position: relative;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--etb-shadow-md);
    transition: all .5s var(--etb-ease-spring);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(20px);
    animation: etbCardIn .55s var(--etb-ease-out) forwards;
}
@keyframes etbCardIn {
    to { opacity: 1; transform: translateY(0); }
}
.etb-acc-card:nth-child(1)  { animation-delay: .05s; }
.etb-acc-card:nth-child(2)  { animation-delay: .10s; }
.etb-acc-card:nth-child(3)  { animation-delay: .15s; }
.etb-acc-card:nth-child(4)  { animation-delay: .20s; }
.etb-acc-card:nth-child(5)  { animation-delay: .25s; }
.etb-acc-card:nth-child(6)  { animation-delay: .30s; }
.etb-acc-card:nth-child(n+7){ animation-delay: .35s; }

.etb-acc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.16), 0 0 0 1px rgba(16,185,129,0.15);
}

/* Image area */
.etb-acc-image {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--etb-slate-100);
}
.etb-acc-image svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .8s var(--etb-ease-out);
}
.etb-acc-card:hover .etb-acc-image svg { transform: scale(1.05); }
.etb-acc-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

.etb-acc-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--etb-emerald-700);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 2;
}
.etb-acc-badge i { font-size: 12px; }
.etb-acc-badge.award {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    color: #854d0e;
}

.etb-acc-fav {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transition: all .3s var(--etb-ease-spring);
}
/* Au SURVOL, le bouton se remplit et le coeur passe en blanc : sans cela, seul un
   agrandissement signalait la cible, et sur une photo claire le coeur gris se
   voyait a peine. Le remplissage de survol est plus doux que celui de l'etat
   enregistre (.is-active) pour que les deux restent distinguables. */
.etb-acc-fav:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    box-shadow: 0 6px 16px rgba(244, 63, 94, .34);
}
.etb-acc-fav:hover i { color: #fff; }
.etb-acc-fav:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.etb-acc-fav i { font-size: 17px; color: var(--etb-slate-600); transition: color .3s; }
/* EN FAVORI : le bouton se REMPLIT de rouge et le coeur passe en blanc (demande
   client du 11/09/2026). Un simple coeur rouge sur fond blanc se confond avec
   l'etat de survol -- on ne savait pas si c'etait enregistre. */
.etb-acc-fav.is-active {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 4px 14px rgba(225, 29, 72, .38);
}
.etb-acc-fav.is-active i { color: #fff; }
.etb-acc-fav.is-active:hover { background: linear-gradient(135deg, #e11d48, #be123c); }

.etb-acc-rating {
    position: absolute;
    bottom: 12px; left: 12px;
    z-index: 2;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    padding: 5px 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--etb-slate-800);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.etb-acc-rating i { color: var(--etb-yellow-400); font-size: 13px; }
.etb-acc-rating .etb-rev {
    color: var(--etb-slate-500);
    font-weight: 500;
    font-size: 12px;
}

/* Body */
.etb-acc-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.etb-acc-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--etb-slate-500);
    font-weight: 500;
    margin-bottom: 3px;
}
.etb-acc-loc i { color: var(--etb-emerald-500); font-size: 11px; }
.etb-acc-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--etb-slate-900);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 8px;
}

.etb-acc-host {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.etb-acc-host-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--etb-emerald-400), var(--etb-emerald-600));
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.etb-acc-host-info {
    font-size: 12px;
    color: var(--etb-slate-600);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.etb-acc-host-info b { color: var(--etb-slate-900); font-weight: 600; }
.etb-acc-host-verif {
    font-size: 10.5px;
    background: var(--etb-emerald-50);
    color: var(--etb-emerald-700);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.etb-acc-host-verif i { font-size: 11px; }

.etb-acc-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 8px 0;
    border-top: 1px dashed var(--etb-slate-200);
    margin-bottom: 10px;
}
.etb-acc-feat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--etb-slate-600);
    font-weight: 500;
}
.etb-acc-feat i {
    color: var(--etb-emerald-600);
    font-size: 13px;
    flex-shrink: 0;
}

.etb-acc-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    gap: 12px;
}
.etb-acc-price { display: flex; flex-direction: column; }
.etb-acc-price-from {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--etb-slate-500);
    font-weight: 600;
}
.etb-acc-price-num {
    font-size: 17px;
    font-weight: 800;
    color: var(--etb-slate-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.etb-acc-price-unit {
    font-size: 11px;
    color: var(--etb-slate-500);
    font-weight: 500;
    margin-left: 3px;
}
.etb-acc-price-free {
    font-size: 14px;
    font-weight: 700;
    color: var(--etb-emerald-600);
}

.etb-acc-cta {
    background: linear-gradient(135deg, var(--etb-emerald-500), var(--etb-emerald-600));
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 14px rgba(16,185,129,0.30);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all .3s ease;
}
.etb-acc-cta:hover {
    background: linear-gradient(135deg, var(--etb-emerald-600), var(--etb-emerald-700));
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(16,185,129,0.45);
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
    .etb-motive-bar { top: auto; }
    .etb-motive-inner { padding: 12px 18px; }
    .etb-cards-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Formulaire de recherche complet dans le hero search ── */
.opd-search-form {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(15,23,42,.12);
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

.opd-search-form .modal-field {
    margin-bottom: 12px;
}

.opd-search-form .modal-row-2 {
    margin-bottom: 0;
}

.opd-search-form .filters-panel {
    display: none;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
}

.opd-search-form .filters-panel.open {
    display: block;
}

.opd-search-form .modal-submit {
    width: 100%;
    margin-top: 16px;
    height: 52px;
    border-radius: 14px;
    font-size: 15px;
}

.etb-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.etb-btn-secondary:hover {
    background: rgba(var(--primary-rgb), 0.08);
}
.etb-btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ============ SPLIT LAYOUT 3 COLONNES : filtres | cards | carte ============ */
.etb-split-wrap {
    position: relative;
    /* Marges gauche et droite pour respiration visuelle */
    padding: 0 20px;
}
.etb-split-inner {
    display: grid;
    grid-template-columns: 240px 1fr 460px;
    gap: 0;
    position: relative;
    align-items: start;
    /* PAS d'overflow:hidden — casse le position:sticky */
}

/* Colonne 1 : filtres (sticky) */
.etb-split-inner > .etb-filters {
    position: sticky;
    top: calc(76px + var(--sat, 0px));
    z-index: 5;
    background: var(--etb-slate-50, #f8fafc);
    border-right: 1px solid var(--etb-slate-100, #f1f5f9);
    padding: 20px 16px 40px;
    /* ⚠️ `height`, PAS `min-height` (16/09/2026, signalement client : « quand je
       souhaite aller plus bas dans les filtres, ça ne va pas plus bas »).
       Avec `min-height`, la colonne grandit jusqu'à contenir TOUS ses filtres :
       elle n'est donc jamais plus haute que son contenu, `overflow-y: auto` ne
       produit aucune barre, et comme elle est `sticky` par le haut, tout ce qui
       dépasse sous l'écran devient INATTEIGNABLE — la page défile, la colonne
       reste collée. Une hauteur FIXE égale à l'écran lui rend sa propre barre de
       défilement, et le bord droit continue de courir sur toute la hauteur. */
    height: calc(100vh - 76px - var(--sat, 0px));
    overflow-y: auto;
    /* Le défilement de la colonne ne doit pas relancer celui de la page quand on
       arrive en bout de course : sinon la liste de droite part d'un coup. */
    overscroll-behavior: contain;
}

/* Colonne 2 : liste des cards */
.etb-list-pane {
    background: white;
    border-right: 1px solid var(--etb-slate-100, #f1f5f9);
    min-height: calc(100vh - 76px - var(--sat, 0px));
}
.etb-list-head {
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 3 elements : compteur | alerte (.opd-alerte-cta) | tri -> on autorise le retour
       a la ligne pour les petites largeurs de colonne. */
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    top: calc(76px + var(--sat, 0px));
    background: white;
    z-index: 4;
    border-bottom: 1px solid var(--etb-slate-100, #f1f5f9);
}
.etb-list-grid-wrap {
    padding: 14px 16px 60px;
}

/* Colonne 3 : carte (sticky) */
.etb-map-pane {
    position: sticky;
    top: calc(76px + var(--sat, 0px));
    height: calc(100vh - 76px - var(--sat, 0px));
}
#etbMap {
    width: 100%;
    height: 100%;
    background: #e8ecef;
}

/* Cards en 2 colonnes dans la colonne centrale */
.etb-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.etb-list-grid .etb-card {
    max-width: 100%;
    width: 100%;
}

/* Bouton toggle carte (mobile) */
/* Bascule carte / liste (mobile). Elle etait en gris-noir : la seule tache sombre
   d'une interface qui ne l'est nulle part ailleurs, et elle se lisait comme un bandeau
   systeme plutot que comme une action. Elle prend la couleur du theme (11/09/2026).
   `bottom` derive de --eqm-bottombar-h : la page peut porter une bande fixe, et le
   bouton doit se caler AU-DESSUS, jamais dessus (CLAUDE.md §10c). */
.etb-map-toggle {
    display: none;
    position: fixed;
    bottom: calc(var(--eqm-bottombar-h, 0px) + 24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 26px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    z-index: 100;
    gap: 9px;
    align-items: center;
    box-shadow: 0 8px 26px rgba(var(--primary-rgb), .42), 0 2px 6px rgba(15, 23, 42, .12);
    white-space: nowrap;
    transition: background .2s, box-shadow .2s, transform .15s;
}
/* Bouton PLEIN : le survol redeclare son fond (jamais un simple filtre). */
.etb-map-toggle:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-darker));
    color: #fff;
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), .5);
}
.etb-map-toggle:active { transform: translateX(-50%) translateY(1px); }
.etb-map-toggle i { font-size: 17px; }

@media (max-width: 1200px) {
    .etb-split-inner {
        grid-template-columns: 220px 1fr 380px;
    }
    .etb-list-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1000px) {
    .etb-split-inner {
        grid-template-columns: 200px 1fr 320px;
    }
    .etb-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    /* Tablette : on cache les filtres, 2 colonnes cards | carte */
    .etb-split-wrap { padding: 0 12px; }
    .etb-split-inner {
        grid-template-columns: 1fr 300px;
    }
    .etb-split-inner > .etb-filters {
        display: none;
    }
    .etb-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Mobile : 1 colonne, carte en plein écran via toggle */
    .etb-split-wrap { padding: 0 8px; }
    .etb-split-inner {
        grid-template-columns: 1fr;
    }
    .etb-split-inner > .etb-filters {
        display: none;
    }
    .etb-list-pane {
        min-height: auto;
    }
    .etb-list-head {
        position: static;
    }
    .etb-list-grid {
        grid-template-columns: 1fr;
    }
    .etb-map-pane {
        display: none;
        position: fixed;
        inset: 0;
        top: calc(76px + var(--sat, 0px));
        z-index: 50;
        height: calc(100vh - 76px - var(--sat, 0px));
    }
    .etb-map-pane.is-visible {
        display: block;
    }
    .etb-list-pane.is-hidden {
        display: none;
    }
    .etb-map-toggle {
        display: flex;
    }
}

/* ============================================================
   PAGINATION (rendu serveur, 2026-07-17)
   Chaque page de résultats est une URL réelle (?page=N) : les liens
   ci-dessous sont de vrais <a>, parcourables sans JavaScript.
   ============================================================ */
.etb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 8px;
}
.etb-pg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.etb-pg-link:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), .06);
    transform: translateY(-1px);
}
.etb-pg-link:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .30);
}
.etb-pg-link.is-current {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), .32);
    cursor: default;
}
.etb-pg-gap {
    color: #94a3b8;
    font-weight: 700;
    padding: 0 2px;
}
.etb-pg-status {
    flex-basis: 100%;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .etb-pg-link { transition: none; }
    .etb-pg-link:hover { transform: none; }
}
@media (max-width: 640px) {
    .etb-pagination { gap: 6px; }
    .etb-pg-link { min-width: 44px; padding: 0 10px; font-size: 13px; }
}


/* ── Toute la carte de resultat est cliquable (11/09/2026) ───────────────────
   La carte portait quatre liens freres separes par des zones mortes (equipements,
   prix, nom du gerant) : cliquer dessus ne faisait rien. Un seul lien -- celui du
   titre -- etire desormais sa zone a la carte entiere. */
.etb-acc-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Ce qui doit rester cliquable POUR SOI passe au-dessus de la zone etiree.
   ATTENTION : `.etb-acc-fav` est volontairement ABSENT de cette liste. Il est deja
   en `position: absolute; z-index: 3`, donc deja au-dessus du lien etire. L'y
   inclure lui appliquait `position: relative` avec une specificite superieure
   (0,2,0 contre 0,1,0) : le coeur perdait son ancrage haut-droite, repassait dans
   le flux sous l'image qui occupe 100 % du cadre, et devenait INVISIBLE sur toutes
   les cartes de la recherche. Constate le 12/09/2026. */
.etb-acc-card .etb-acc-cta,
.etb-acc-card .etb-acc-reserve,
.etb-acc-card a:not(.etb-acc-link) {
    position: relative;
    z-index: 2;
}
/* Le focus clavier reste visible sur le titre, pas sur un rectangle invisible. */
.etb-acc-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }