/* =============================================================
   LECOINGAMING — pages/annonces/filters_bar.css  v6
   Mobile-first stricte. Tokens uniquement.

   Changelog v6 — Fix nav systeme mobile (Android/iOS)
   ─────────────────────────────────────────────────────────────
   - Sur mobile, le footer du modal etait masque par la nav systeme
     OS (Android nav bar / iOS home indicator).
   - Cause : 100vh inclut la zone occupee par la nav systeme.
   - Fix : utilisation de 100dvh (dynamic viewport height) qui
     exclut automatiquement les barres systeme. Fallback 100vh
     pour les vieux navigateurs.
   - Footer du modal : padding-bottom adaptatif avec max() pour
     respecter env(safe-area-inset-bottom) tout en gardant un
     minimum d'espacement.
   - Meme fix applique aux bottom sheets (.fb-dropdown__panel)
     pour eviter le meme probleme.

   Changelog v5 — Simplification mobile + fix z-index modal
   ─────────────────────────────────────────────────────────────
   - Mobile (<768px) : seul le bouton "Tous les filtres" est visible
   - Modal mobile : passage en vraiment fullscreen
     * body.fb-modal-open masque la top navbar et la bottom nav
     * Reset des margin-top et margin-bottom du modal

   Changelog v4 — Fix bottom-sheets et modal cache par bottom_nav
   ─────────────────────────────────────────────────────────────
   - .fb-dropdown__panel (mobile) : bottom: var(--bottom-nav-h)
   - body.fb-sheet-open et body.fb-modal-open : position:fixed iOS

   Changelog v3 — UX pass mobile-first :
   - Barre sticky ULTRA-COMPACTE, ombre dynamique, drag-to-dismiss

   Changelog v2 : Sticky de base + chips clairs (gold-50)
   ============================================================= */


/* -----------------------------------------------------------
   WRAPPER — sticky sous la navbar
----------------------------------------------------------- */
.filters-bar {
  position: sticky;
  top: var(--nav-mobile-bar-h, 56px);
  z-index: var(--z-sticky);
  background: var(--bg-page);
  padding-block: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid transparent;
  transition: box-shadow   var(--transition-base),
              border-color var(--transition-base),
              background   var(--transition-base);
}

@media (min-width: 1024px) {
  .filters-bar {
    top: var(--nav-main-h, 64px);
    padding-block: var(--space-3);
    gap: var(--space-3);
  }
}

.filters-bar.is-stuck {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);
}

.filters-bar__form {
  display: contents;
}

.fb-dropdown {
  position: relative;
}


/* -----------------------------------------------------------
   GABARIT DE LARGEUR
----------------------------------------------------------- */
.filters-bar {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 768px) {
  .filters-bar { padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  .filters-bar { padding-inline: var(--space-8); }
}


/* -----------------------------------------------------------
   RANGÉE DE PILLS
----------------------------------------------------------- */
.filters-bar__pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}


/* -----------------------------------------------------------
   PILL (bouton de filtre)
----------------------------------------------------------- */
.fb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast),
              background   var(--transition-fast),
              box-shadow   var(--transition-fast),
              color        var(--transition-fast),
              transform    var(--transition-fast);
}

@media (min-width: 768px) {
  .fb-pill {
    height: 40px;
    padding: 0 var(--space-4);
  }
}

.fb-pill__icon {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.fb-pill__label {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .fb-pill__label {
    max-width: 160px;
  }
}

.fb-pill__chevron {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: var(--space-1);
  transition: transform var(--transition-base),
              color     var(--transition-fast);
}

@media (hover: hover) {
  .fb-pill:hover {
    border-color: rgba(0, 0, 0, 0.24);
    box-shadow: var(--shadow-sm);
  }
}

.fb-pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--gold-500);
}

.fb-pill:active {
  transform: scale(0.97);
}

.fb-dropdown.is-open .fb-pill {
  border-color: var(--gold-500);
  border-width: 1.5px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.fb-dropdown.is-open .fb-pill__chevron {
  transform: rotate(180deg);
  color: var(--gold-500);
}

.fb-dropdown.is-selected .fb-pill {
  border-color: var(--gold-500);
  border-width: 1.5px;
  color: var(--gold-700);
  font-weight: 600;
  background: var(--gold-50);
}

.fb-dropdown.is-selected .fb-pill__icon,
.fb-dropdown.is-selected .fb-pill__chevron {
  color: var(--gold-600);
}


/* -----------------------------------------------------------
   BOUTON "TOUS LES FILTRES"
----------------------------------------------------------- */
.fb-all-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  margin-left: auto;
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--gold-700);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background   var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow   var(--transition-fast),
              transform    var(--transition-fast);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .fb-all-filters {
    height: 40px;
    padding: 0 var(--space-4);
  }
}

.fb-all-filters .fb-pill__icon {
  color: var(--gold-600);
}

@media (hover: hover) {
  .fb-all-filters:hover {
    background: var(--gold-100);
    border-color: var(--gold-500);
    box-shadow: var(--shadow-sm);
  }
}

.fb-all-filters:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fb-all-filters:active {
  transform: scale(0.98);
}

.fb-all-filters.is-active {
  background: var(--gold-100);
  border-color: var(--gold-500);
  border-width: 1.5px;
}

.fb-all-filters__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1-5);
  background: var(--gold-gradient);
  color: var(--text-primary);
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-left: var(--space-1);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-spring);
}

.fb-all-filters__badge.is-pulsing {
  animation: badge-pulse 0.4s var(--transition-spring);
}

@keyframes badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}


/* -----------------------------------------------------------
   MOBILE (< 768px) — version simplifiee
   v5 : Seul le bouton "Tous les filtres" est visible.
----------------------------------------------------------- */
@media (max-width: 767px) {
  .filters-bar__pills .fb-dropdown {
    display: none;
  }

  .filters-bar__chips {
    display: none;
  }

  .filters-bar__pills {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fb-all-filters {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}


/* -----------------------------------------------------------
   PANNEAU DROPDOWN (desktop)
----------------------------------------------------------- */
.fb-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 320px;
  max-width: 420px;
  background: var(--bg-card);
  border: var(--border-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-dropdown) + 10);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity   var(--transition-fast),
              transform var(--transition-fast);
}

.fb-dropdown.is-open .fb-dropdown__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fb-dropdown__panel[hidden] {
  display: none;
}

.fb-dropdown__body {
  padding: var(--space-5);
}

.fb-dropdown__placeholder {
  font-family: var(--font-mono), monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-4) 0;
}

.fb-dropdown:last-of-type .fb-dropdown__panel {
  left: auto;
  right: 0;
}


/* -----------------------------------------------------------
   CHIPS FILTRES ACTIFS
----------------------------------------------------------- */
.filters-bar__chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 30px;
  padding: 0 var(--space-2-5) 0 var(--space-3);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--gold-700);
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  animation: fb-chip-in var(--transition-spring) both;
  transition: background   var(--transition-fast),
              border-color var(--transition-fast),
              transform    var(--transition-fast),
              box-shadow   var(--transition-fast),
              color        var(--transition-fast);
}

@keyframes fb-chip-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.fb-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--gold-600);
}

.fb-chip__close {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  margin-left: var(--space-0-5);
  color: var(--gold-700);
  transition: opacity var(--transition-fast);
}

@media (hover: hover) {
  .fb-chip:hover {
    background: var(--gold-100);
    border-color: var(--gold-500);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .fb-chip:hover .fb-chip__close {
    opacity: 1;
  }
}

.fb-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fb-chip:active {
  transform: scale(0.97);
}

.fb-chip--hot {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(177, 118, 0, 0.25);
}

.fb-chip--hot svg,
.fb-chip--hot .fb-chip__close {
  color: var(--warning);
}

@media (hover: hover) {
  .fb-chip--hot:hover {
    background: rgba(255, 170, 0, 0.22);
    border-color: var(--warning);
  }
}

.fb-chips-clear {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--danger);
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast),
              color      var(--transition-fast);
  white-space: nowrap;
}

@media (hover: hover) {
  .fb-chips-clear:hover {
    background: var(--danger-bg);
  }
}

.fb-chips-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* =============================================================
   CONTENU DES DROPDOWNS
   ============================================================= */

.fb-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-xs);
}

.fb-dd-title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
}

.fb-dd-reset {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: var(--space-1) 0;
  cursor: pointer;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .fb-dd-reset:hover {
    color: var(--danger);
  }
}

.fb-dd-reset:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}


/* -----------------------------------------------------------
   FIELDS
----------------------------------------------------------- */
.fb-dd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
}

.fb-dd-field--inline {
  flex: 1;
  min-width: 0;
}

.fb-dd-label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fb-dd-input,
.fb-dd-select {
  height: 40px;
  width: 100%;
  padding-inline: var(--space-3);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-sunken);
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow   var(--transition-fast),
              background   var(--transition-fast);
}

.fb-dd-input::placeholder {
  color: var(--text-tertiary);
}

.fb-dd-input:focus,
.fb-dd-select:focus {
  border-color: var(--gold-500);
  box-shadow: var(--focus-ring);
  background: var(--bg-card);
}

.fb-dd-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1f2a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-7);
  cursor: pointer;
}


/* -----------------------------------------------------------
   OPTIONS LIST (radios custom)
----------------------------------------------------------- */
.fb-dd-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: var(--space-4);
  padding-right: var(--space-1);
}

.fb-dd-list::-webkit-scrollbar { width: 4px; }
.fb-dd-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.fb-dd-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  .fb-dd-option:hover {
    background: rgba(184, 155, 46, 0.04);
  }
}

.fb-dd-option.is-active {
  background: rgba(184, 155, 46, 0.07);
}

.fb-dd-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.fb-dd-option__radio {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(0, 0, 0, 0.20);
  background: var(--bg-sunken);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--transition-fast),
              background   var(--transition-fast);
}

.fb-dd-option input[type="radio"]:checked + .fb-dd-option__radio {
  border-color: var(--gold-500);
  background: var(--gold-gradient);
}

.fb-dd-option input[type="radio"]:checked + .fb-dd-option__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--text-primary);
  transform: translate(-50%, -50%);
}

.fb-dd-option input[type="radio"]:focus-visible + .fb-dd-option__radio {
  box-shadow: var(--focus-ring);
}

.fb-dd-option__label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.fb-dd-option.is-active .fb-dd-option__label {
  font-weight: 600;
}


/* -----------------------------------------------------------
   LOCALISATION — bouton "Autour de moi"
----------------------------------------------------------- */
.fb-use-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color        var(--transition-fast),
              background   var(--transition-fast);
}

.fb-use-location svg {
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .fb-use-location:hover {
    border-color: var(--gold-500);
    color: var(--gold-700);
  }
  .fb-use-location:hover svg {
    color: var(--gold-500);
  }
}

.fb-use-location:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--gold-500);
}

.fb-use-location.is-active {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--gold-700);
}

.fb-use-location.is-active svg {
  color: var(--gold-500);
}


/* -----------------------------------------------------------
   PRIX
----------------------------------------------------------- */
.fb-price-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono), monospace;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--gold-500);
}

.fb-price-display .price-range-sep {
  color: rgba(0, 0, 0, 0.2);
}

.fb-price-inputs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fb-price-input-wrap {
  position: relative;
}

.fb-price-input-wrap .fb-dd-input {
  padding-right: var(--space-7);
}

.fb-price-input-suffix {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono), monospace;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  pointer-events: none;
}

.fb-price-inputs--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.fb-price-inputs--stacked .fb-dd-field {
  margin-bottom: 0;
}

.fb-price-inputs--stacked .fb-dd-input {
  height: 44px;
  font-size: var(--font-md);
  font-weight: 600;
  font-family: var(--font-mono), monospace;
  letter-spacing: 0.02em;
}

.fb-price-shortcuts {
  margin-bottom: var(--space-4);
}

.fb-price-shortcuts__label {
  display: block;
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.fb-price-shortcuts__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.fb-price-shortcut {
  height: 34px;
  padding: 0 var(--space-3);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color        var(--transition-fast),
              background   var(--transition-fast);
}

@media (hover: hover) {
  .fb-price-shortcut:hover {
    border-color: var(--gold-500);
    color: var(--gold-700);
    background: var(--gold-50);
  }
}

.fb-price-shortcut.is-active {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--gold-700);
  border-width: 1.5px;
}

.fb-price-shortcut:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* -----------------------------------------------------------
   FOOTER dropdown
----------------------------------------------------------- */
.fb-dd-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-xs);
}

.fb-dd-cancel,
.fb-dd-apply {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-4);
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background    var(--transition-fast),
              border-color  var(--transition-fast),
              color         var(--transition-fast),
              box-shadow    var(--transition-fast),
              transform     var(--transition-fast),
              filter        var(--transition-fast);
}

.fb-dd-cancel {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid rgba(0, 0, 0, 0.09);
}

@media (hover: hover) {
  .fb-dd-cancel:hover {
    background: var(--bg-sunken);
    border-color: rgba(0, 0, 0, 0.16);
  }
}

.fb-dd-cancel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fb-dd-apply {
  background: var(--gold-gradient);
  color: var(--text-primary);
  border: none;
  flex: 2;
}

@media (hover: hover) {
  .fb-dd-apply:hover {
    filter: brightness(1.05);
    box-shadow: var(--shadow-gold);
  }
}

.fb-dd-apply:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fb-dd-apply:active {
  transform: scale(0.98);
}

.fb-dd-apply.is-disabled,
.fb-dd-apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.5);
}


/* -----------------------------------------------------------
   AUTOCOMPLETE VILLE
----------------------------------------------------------- */
.fb-city-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-card);
  border: var(--border-sm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: var(--space-1);
  margin: 0;
  z-index: 10;
}

.fb-city-suggestions[hidden] {
  display: none;
}

.fb-city-suggestions::-webkit-scrollbar { width: 4px; }
.fb-city-suggestions::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2px;
}

.fb-city-suggestions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.fb-city-suggestions li:hover,
.fb-city-suggestions li[aria-selected="true"] {
  background: var(--gold-50);
}

.fb-city-suggestion__name {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-city-suggestion__code {
  font-family: var(--font-mono), monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  flex-shrink: 0;
}


/* =============================================================
   BOTTOM SHEET MOBILE
   Sur < 768px : dropdowns deviennent overlays bottom sheet
   ============================================================= */

.fb-backdrop {
  display: none;
}

@media (max-width: 767px) {

  .fb-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 38, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: calc(var(--z-top) + 1);
  }

  .fb-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* ┌─────────────────────────────────────────────────────────┐
     │  Panneau dropdown → bottom sheet                          │
     │                                                            │
     │  v6 : 85dvh au lieu de 85vh pour respecter la nav systeme │
     │  OS (Android nav bar / iOS home indicator).                │
     └─────────────────────────────────────────────────────────┘ */
  .fb-dropdown__panel {
    position: fixed;
    top: auto;
    bottom: var(--bottom-nav-h, 0px);
    left: 0;
    right: 0;
    min-width: 0;
    max-width: 100%;
    /* v6 : 85dvh exclut automatiquement la nav systeme OS.
       Fallback 85vh pour les vieux navigateurs (chute gracieuse). */
    max-height: calc(85vh - var(--bottom-nav-h, 0px));
    max-height: calc(85dvh - var(--bottom-nav-h, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-xl);
    transform: translateY(calc(100% + var(--bottom-nav-h, 0px)));
    transition: transform var(--transition-slow),
                opacity   var(--transition-slow);
    z-index: calc(var(--z-top) + 2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .fb-dropdown.is-open .fb-dropdown__panel {
    transform: translateY(0);
  }

  .fb-dropdown__panel.is-dragging {
    transition: none !important;
  }

  .fb-dropdown__panel::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    width: 36px;
    height: 4px;
    margin: var(--space-3) auto var(--space-1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    z-index: 1;
    transition: background var(--transition-fast);
  }

  .fb-dropdown__panel.is-dragging::before {
    background: var(--gold-500);
  }

  .fb-dropdown:last-of-type .fb-dropdown__panel {
    left: 0;
    right: 0;
  }

  .fb-dropdown__body {
    padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  .fb-dd-title {
    font-size: var(--font-lg);
  }

  .fb-dd-input,
  .fb-dd-select,
  .fb-use-location {
    height: 44px;
  }

  .fb-dd-cancel,
  .fb-dd-apply {
    height: 46px;
    font-size: var(--font-md);
  }

  .fb-dd-list {
    max-height: 45vh;
    max-height: 45dvh;
  }

  .fb-chip {
    height: 30px;
    padding-inline: var(--space-3);
    font-size: var(--font-xs);
  }

  body.fb-sheet-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}


/* =============================================================
   MODAL "TOUS LES FILTRES"
   ============================================================= */
.fb-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-top) + 3);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.fb-modal[hidden] {
  display: none;
}

.fb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 38, 0.55);
  animation: fb-fade-in var(--transition-base);
}

@keyframes fb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fb-modal__panel {
  position: relative;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: var(--bg-card);
  border-radius: 0;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fb-sidebar-in var(--transition-slow);
  z-index: calc(var(--z-top) + 4);
}

@keyframes fb-sidebar-in {
  from { transform: translateX(100%); opacity: 0.8; }
  to   { transform: translateX(0);    opacity: 1;   }
}

.fb-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-sm);
  flex-shrink: 0;
}

.fb-modal__title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fb-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast),
              color      var(--transition-fast);
}

.fb-modal__close svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .fb-modal__close:hover {
    background: var(--bg-sunken);
    color: var(--text-primary);
  }
}

.fb-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fb-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.fb-modal__section {
  padding: var(--space-4) 0;
  border-bottom: var(--border-xs);
}

.fb-modal__section:last-child {
  border-bottom: none;
  padding-bottom: var(--space-2);
}

.fb-modal__section-title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.fb-modal__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-sm);
  background: var(--bg-card);
  flex-shrink: 0;
}

.fb-modal__footer .fb-dd-cancel {
  flex: 1;
}

.fb-modal__footer .fb-dd-apply {
  flex: 2;
}


/* Toggles */
.fb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  user-select: none;
}

.fb-toggle-row__label {
  font-family: var(--font-body), sans-serif;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: 1;
}

.fb-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.fb-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.fb-toggle__track {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
}

.fb-toggle__input:checked + .fb-toggle__track {
  background: var(--gold-gradient);
}

.fb-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base);
  pointer-events: none;
}

.fb-toggle__input:checked ~ .fb-toggle__thumb {
  transform: translateX(18px);
}

.fb-toggle__input:focus-visible + .fb-toggle__track {
  box-shadow: var(--focus-ring);
}


/* ─────────────────────────────────────────────────────────────
   Modal mobile (≤ 767px)
   v6 : Fix nav systeme mobile (Android/iOS)
   - height: 100dvh au lieu de 100vh pour exclure automatiquement
     la barre de navigation systeme OS.
   - Footer : padding-bottom adaptatif avec max() pour respecter
     env(safe-area-inset-bottom) tout en gardant un minimum.
   - Body padding-bottom retire (gere via dvh + footer padding).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fb-modal {
    align-items: stretch;
    justify-content: stretch;
  }

  .fb-modal__panel {
    width: 100%;
    /* v6 : 100dvh exclut automatiquement la nav systeme OS.
       Fallback 100vh pour les vieux navigateurs. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    animation: fb-modal-mobile-in var(--transition-slow);
    /* v6 : padding-top pour les encoches iOS uniquement.
       Le padding-bottom est gere sur le footer pour qu'il reste
       toujours accessible (et pas dans le body scrollable). */
    padding-top: env(safe-area-inset-top, 0);
  }

  @keyframes fb-modal-mobile-in {
    from { transform: translateY(100%); opacity: 0.8; }
    to   { transform: translateY(0);    opacity: 1;   }
  }

  .fb-modal__header {
    padding: var(--space-4) var(--space-5);
  }

  .fb-modal__body {
    padding: var(--space-4) var(--space-5);
  }

  /* v6 : padding-bottom adaptatif. Si env(safe-area-inset-bottom)
     est defini (iPhone X+, Android avec nav gesture), on utilise
     cette valeur. Sinon on utilise var(--space-3) (espacement
     normal). max() garantit qu'on a toujours au moins le minimum. */
  .fb-modal__footer {
    padding: var(--space-3) var(--space-5);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
  }
}

/* v4 : scroll lock body iOS-compatible.
   v5 : masque aussi les navbars pour eviter le bug de stacking
   context ou la top navbar passait devant le modal. Meme pattern
   que body.page-messages-thread dans messages_thread.css. */
body.fb-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body.fb-modal-open .nav-mobile-bar {
  display: none !important;
}

body.fb-modal-open .bottom-nav {
  display: none !important;
}


/* =============================================================
   ACCESSIBILITÉ — reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .fb-chip,
  .fb-modal__backdrop,
  .fb-modal__panel,
  .fb-dropdown__panel,
  .fb-all-filters__badge {
    animation: none;
  }
}