/* Unified filters (reference: home page "24 places to play"). Behaviour, on every page that filters a list:
   pill toggles that open a menu of choices (multi-select, "Clear selection" first when something is picked),
   on/off switches for single-option filters (Hotel), removable chips of the selected choices under the pills
   (not for switches), "Clear all" at the right of the "Filters" heading, live result count.
   Markup:
   <div class="uf">
     <div class="uf-heading"><strong>FILTERS</strong><button type="button" class="uf-clear">CLEAR ALL</button></div>
     <div class="uf-groups">
       <div class="uf-group"><button type="button" class="uf-toggle" data-active="true|false" aria-expanded="true|false">SPORT · 2 <span>▾</span></button>
         <div class="uf-choices"><button type="button" data-clear="true">Clear selection</button><button type="button" aria-pressed="true">Tennis</button>…</div></div>
       <div class="uf-group"><button type="button" class="uf-toggle uf-switch" data-active="false" aria-pressed="false">HOTEL <span></span></button></div>
     </div>
     <div class="uf-chips"><button type="button" aria-label="Remove Tennis">Tennis <span aria-hidden="true">✕</span></button></div>
     <p class="uf-count" aria-live="polite">8 centers</p>
   </div>
   Theme: group pages use the defaults below. Academy / centre pages set the variables on .uf (or a parent) to their charter. */
.uf{--uf-ink:#001937;--uf-muted:#777;--uf-line:#dcd8d0;--uf-soft:#f4f2ee;--uf-accent:#1f92f0;--uf-action:#004b87;--uf-chip-bg:#001937;--uf-chip-ink:#fff;--uf-menu-bg:#fff;--uf-font:Geometria,Arial,sans-serif;width:100%;font-family:var(--uf-font)}
.uf-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:11px;letter-spacing:.12em;color:var(--uf-ink)}
.uf-heading strong{font-weight:700}
.uf-clear{border:0;background:none;padding:6px 0;color:var(--uf-action)!important;font:700 10px var(--uf-font);letter-spacing:.12em;cursor:pointer}
.uf-groups{position:relative;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.uf-group{position:relative;flex:none}
.uf-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;width:auto;min-height:44px;padding:11px 18px;border:1px solid var(--uf-line);border-radius:999px;background:transparent;color:var(--uf-muted);font:700 10px var(--uf-font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.uf-toggle>span:last-child{font-size:11px}
.uf-toggle[aria-expanded=true],.uf-toggle[data-active=true]{background:#fff;border-color:var(--uf-ink);color:var(--uf-ink)}
.uf-choices{position:absolute;left:0;top:calc(100% + 10px);z-index:6;display:flex;flex-direction:column;gap:2px;min-width:220px;max-width:calc(100vw - 40px);padding:8px;border-radius:16px;background:var(--uf-menu-bg);box-shadow:0 24px 56px rgba(0,25,55,.18)}
.uf-choices button{display:flex;align-items:center;border:0;border-radius:10px;padding:12px 14px;background:transparent;color:var(--uf-ink);font:700 13px var(--uf-font);text-align:left;white-space:nowrap;cursor:pointer}
.uf-choices button::before{content:'';display:inline-block;flex:none;width:7px;height:7px;margin-right:10px;border-radius:50%;background:var(--uf-line)}
.uf-choices button[aria-pressed=true]{background:var(--uf-soft)}
.uf-choices button[aria-pressed=true]::before{background:var(--uf-ink)}
.uf-choices button[data-clear=true]{color:var(--uf-action);border-bottom:1px solid #eee;border-radius:10px 10px 0 0}
.uf-choices button[data-clear=true]::before{content:'✕';width:auto;height:auto;background:none;font-size:11px}
/* On/off switch (single-option filter such as Hotel) */
.uf-switch{gap:12px}
.uf-switch>span:last-child{position:relative;display:inline-block;flex:none;width:34px;height:20px;overflow:hidden;border-radius:999px;background:var(--uf-line);font-size:0;color:transparent;transition:background .2s}
.uf-switch>span:last-child::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,25,55,.25);transition:transform .2s}
.uf-switch[data-active=true]>span:last-child{background:var(--uf-accent)}
.uf-switch[data-active=true]>span:last-child::after{transform:translateX(14px)}
/* Selected choices as removable chips */
.uf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.uf-chips:empty{display:none}
.uf-chips button{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:32px;padding:6px 10px 6px 14px;border:0;border-radius:999px;background:var(--uf-chip-bg);color:var(--uf-chip-ink);font:700 12px var(--uf-font);white-space:nowrap;cursor:pointer}
.uf-chips button>span:last-child{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);font-size:9px}
.uf-chips button:hover>span:last-child{background:var(--uf-accent)}
.uf-count{margin:16px 0 0;font-size:12px;color:var(--uf-muted)}
.uf button:focus-visible{outline:2px solid var(--uf-ink);outline-offset:3px}
/* Mobile: pills on one row (keep labels short so they fit 343 px), menus full width under the row */
@media(max-width:760px){
  .uf-groups{flex-wrap:nowrap;gap:8px}
  .uf-group{position:static}
  .uf-toggle{min-height:40px;padding:9px 12px;gap:8px;letter-spacing:.08em}
  .uf-switch>span:last-child{width:28px;height:16px}
  .uf-switch>span:last-child::after{width:12px;height:12px}
  .uf-switch[data-active=true]>span:last-child::after{transform:translateX(12px)}
  .uf-choices{left:0;right:0;top:calc(100% + 8px);min-width:0;max-width:none}
}
/* Small phones: pills shrink (label ellipsis, arrow kept) rather than run past the edge when counts are shown */
@media(max-width:760px){
  .uf-group{flex:0 1 auto;min-width:0}
  .uf-toggle{max-width:100%;overflow:hidden}
  .uf-toggle>span:first-child{overflow:hidden;text-overflow:ellipsis}
}
/* Side panel options on one column (long labels like "Appartement" never break) */
aside.uf .uf-choices{grid-template-columns:1fr!important}