/**
 * Booking Pill Search — base styles
 *
 * Reproduces the "inputs décomposés" look from flow-test.css:
 *   - Pill bar: border-radius 999px, surface background, soft shadow.
 *   - Each field: label (12px/700/muted) + value (input, 15px/700/heading), column flex.
 *   - Submit CTA: accent gradient, Poetsen One, white text.
 *   - Icons: hidden by default (design target has no icons; kept in DOM for a11y/custom override).
 *
 * Tokens used (with hard-coded fallbacks for installs without BookingProvider):
 *   --oco-surface, --oco-border, --oco-surface-sunken,
 *   --oco-text-muted, --oco-heading, --oco-accent, --oco-accent-bright,
 *   --oco-accent-strong, --oco-on-accent.
 *
 * Specificity: everything is scoped under .oco-pill-search so Bricks per-instance
 * inline CSS (#brxe-…) can still override individual properties without conflicts.
 */

/* ---- Design tokens (fallbacks only — BookingProvider injects the real values) ---- */
.oco-pill-search {
  --oco-surface: #ffffff;
  --oco-surface-sunken: #f2f4f7;
  --oco-border: #e4e7ec;
  --oco-text-muted: #98a2b3;
  --oco-heading: #1d2939;
  --oco-accent: #0094e5;
  --oco-accent-bright: #00a5ff;
  --oco-accent-strong: #0086cf;
  --oco-on-accent: #ffffff;
}

/* ---- Pill bar ---- */
.oco-pill-search .pill-search__bar {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--oco-surface, #ffffff);
  border: 1px solid var(--oco-border, #e4e7ec);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(51, 67, 77, 0.08);
  font-family: "Mulish", sans-serif;
}

/* ---- Separators: hidden in new look (gap handles spacing) ---- */
.oco-pill-search .pill-search__separator {
  display: none;
}

/* ---- Field: button-like container ---- */
.oco-pill-search .pill-search__field {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 120px;
  padding: 8px 20px;
  background: transparent;
  border-radius: 999px;
  transition: background 0.12s ease;
  position: relative; /* for clear button positioning */
}

.oco-pill-search .pill-search__field:hover {
  background: var(--oco-surface-sunken, #f2f4f7);
}

/* ---- Icon: hidden (design target = label+value, no icon) ---- */
.oco-pill-search .pill-search__icon {
  display: none;
}

/* ---- Label (small, muted) ---- */
.oco-pill-search .pill-search__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--oco-text-muted, #98a2b3);
  line-height: 1.2;
  white-space: nowrap;
  /* not interactive */
  pointer-events: none;
  user-select: none;
}

/* ---- Input (value line) ---- */
.oco-pill-search .pill-search__input {
  display: block;
  appearance: none;
  border: 0;
  outline: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--oco-heading, #1d2939);
  white-space: nowrap;
  width: 100%;
  /* Prevent browser default readonly styles */
  pointer-events: none;
}

.oco-pill-search .pill-search__input::placeholder {
  font-weight: 700;
  color: var(--oco-heading, #1d2939);
  opacity: 1;
}

/* Active state (dropdown open) */
.oco-pill-search .pill-search__input.is-active,
.oco-pill-search .pill-search__field:has(.pill-search__input.is-active) {
  background: var(--oco-surface-sunken, #f2f4f7);
}

/* ---- Clear button ---- */
.oco-pill-search .pill-search__clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--oco-text-muted, #98a2b3);
  padding: 2px 4px;
  border-radius: 50%;
  transition: color 0.12s ease, background 0.12s ease;
}

.oco-pill-search .pill-search__clear:hover {
  color: var(--oco-heading, #1d2939);
  background: var(--oco-surface-sunken, #f2f4f7);
}

/* ---- Submit / CTA button ---- */
.oco-pill-search .pill-search__submit {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  /* Accent gradient */
  background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
  filter: drop-shadow(0px 3px 1.5px rgba(0, 0, 0, 0.06)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.04));
  transition: background 0.14s ease, filter 0.14s ease;
  /* Override Bricks .bricks-button defaults */
  box-shadow: none;
}

.oco-pill-search .pill-search__submit:hover {
  background: linear-gradient(to bottom, var(--oco-accent, #0094e5), var(--oco-accent-strong, #0086cf));
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06));
}

/* Submit icon — hidden (text-only CTA) */
.oco-pill-search .pill-search__submit-icon {
  display: none;
}

/* Submit text — Poetsen One, white */
.oco-pill-search .pill-search__submit-text {
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  color: var(--oco-on-accent, #ffffff);
  white-space: nowrap;
}

/* (Ancien bloc « Dropdown panels » en display:none/block retiré : il faisait
   doublon avec la base animée ci-dessous et son display:none cassait la
   transition de sortie. La base + les transitions sont définies plus bas.) */

/* Déclencheur mobile — masqué par défaut (desktop).
   Doit être déclaré AVANT le bloc @media pour que le display:flex mobile l'écrase. */
.oco-pill-search .pill-search__mobile-trigger {
  display: none;
}
/* Drawer mobile — masqué par défaut (desktop). Sinon, après un resize
   mobile→desktop (le drawer est construit en mobile, lazy), le div reste
   affiché SOUS la pill avec son contenu. Le @media ≤640px le repasse en flex. */
.oco-pill-search .pill-search__drawer {
  display: none;
}

/* ---- Mobile (≤640px): pill bar masquée — remplacée par le déclencheur drawer ---- */
@media (max-width: 640px) {
  /* Le wrapper Bricks, SON PARENT FLEX, et la pill prennent toute la largeur —
     sinon le trigger (width:100%) hérite d'un parent flex rétréci/centré
     (constaté : parent .brxe-block en flex, ~894px au lieu du conteneur plein). */
  .brxe-oco-booking-pill-search,
  .oco-pill-search,
  .brxe-block:has(> .oco-pill-search) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .oco-pill-search { display: block; }

  /* Masquer la barre de champs desktop */
  .oco-pill-search .pill-search__bar {
    display: none;
  }

  /* Déclencheur mobile : barre arrondie pleine largeur */
  .oco-pill-search .pill-search__mobile-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: var(--oco-surface, #ffffff);
    border: 1px solid var(--oco-border, #e4e7ec);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(51, 67, 77, 0.08);
    cursor: pointer;
    font-family: "Mulish", sans-serif;
    text-align: left;
    appearance: none;
  }

  .oco-pill-search .pill-search__mobile-trigger__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--oco-text-muted, #98a2b3);
  }
  .oco-pill-search .pill-search__mobile-trigger__icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .oco-pill-search .pill-search__mobile-trigger__text {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--oco-heading, #1d2939);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oco-pill-search .pill-search__mobile-trigger__text.is-placeholder {
    font-weight: 700;
    color: var(--oco-heading, #1d2939);
    opacity: 0.45;
  }
}

/* =====================================================================
   Dropdowns — reskinnés façon flow-test
   Desktop : popup absolu sous le champ (position:absolute, z-index 200).
   Mobile (≤640px) : bottom-sheet ancré en bas (position:fixed, bottom:0).
   Aucune classe JS supplémentaire — le toggle .is-open existant suffit.
   ===================================================================== */

/* box-sizing sur tout le sous-arbre pour éviter les débordements */
.oco-pill-search .pill-search__dropdown,
.oco-pill-search .pill-search__dropdown * {
  box-sizing: border-box;
}

/* Desktop : la pill (et son dropdown absolu z-index 200) doit rester AU-DESSUS
   du listing qui la suit dans le DOM. Le wrapper Bricks du listing forme un
   contexte d'empilement (transform Bricks au repos) → sans ce filet, le
   dropdown passe dessous. On élève le wrapper de la pill. Mobile exclu (drawer
   position:fixed, déjà au-dessus). */
@media (min-width: 641px) {
  .brxe-oco-booking-pill-search,
  .oco-pill-search { position: relative; z-index: 40; }
}

.oco-pill-search .pill-search__field { position: relative; }

/* ---- Base dropdown (desktop) ----
   Caché mais ANIMABLE (entrée ET sortie) : on n'utilise pas display:none (qui
   ne s'anime pas) mais opacity/visibility/transform + transitions. La visibilité
   bascule en fin de transition à la fermeture (delay) pour laisser le fade jouer. */
.oco-pill-search .pill-search__dropdown {
  /* Desktop : fondu seul (PAS de translateY) — sinon le contenu bouge pendant
     l'ouverture et un clic rapide sur +/- atterrit à côté (puis sur une carte
     derrière → navigation). Le slide est réservé au drawer mobile (cf. @media). */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 200;
  background: var(--oco-surface, #ffffff);
  border: 1px solid var(--oco-border, #e4e7ec);
  border-radius: 24px;
  box-shadow: 0px 2px 6px 0px rgba(51, 67, 77, 0.1), 0 12px 40px rgba(51, 67, 77, 0.14);
  padding: 20px;
  min-width: 260px;
  font-family: "Mulish", sans-serif;
}
.oco-pill-search .pill-search__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* =====================================================================
   CALENDRIER — style .oco-datepicker / screen-1017-3242
   ===================================================================== */

/* Titre « Quand souhaitez-vous votre balade ? » */
.oco-pill-search .ps-cal__title {
  margin: 0 0 14px 0;
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--oco-heading, #1d2939);
  text-align: center;
}

/* Dropdown date : largeur compacte FIXE (sinon la table width:100% + shrink-to-fit
   gonfle le dropdown bien au-delà du calendrier). Mobile : pleine largeur (drawer). */
.oco-pill-search .pill-search__dropdown--date {
  padding: 16px;
  min-width: 0;
  width: 300px;
}

.oco-pill-search .ps-cal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

/* Navigation mois : flèches + label centré */
.oco-pill-search .ps-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.oco-pill-search .ps-cal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--oco-text-muted, #98a2b3);
  transition: background-color 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.oco-pill-search .ps-cal__nav-btn:hover {
  background-color: var(--oco-surface-sunken, #f2f4f7);
  color: var(--oco-heading, #1d2939);
}
.oco-pill-search .ps-cal__nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.oco-pill-search .ps-cal__month-title {
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.45px;
  color: var(--oco-heading, #1d2939);
  text-align: center;
  white-space: nowrap;
}

/* Grille calendrier (structure <table>) */
.oco-pill-search .ps-cal__grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

/* En-têtes jours (Lu Ma Me...) */
.oco-pill-search .ps-cal__weekdays th {
  padding: 0 0 4px 0;
  font-family: "Mulish", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: var(--oco-text-muted, #98a2b3);
  text-align: center;
  height: 28px;
  width: auto;
}

/* Cellules jours */
.oco-pill-search .ps-cal__days td {
  padding: 1px;
  text-align: center;
  height: 34px;
  width: auto;
}

/* Bouton-jour : rond, hover sunken */
.oco-pill-search .ps-cal__day-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  margin: auto;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  color: var(--oco-heading, #1d2939);
  transition: background-color 0.12s ease;
}
.oco-pill-search .ps-cal__day:not(.is-disabled):not(.is-outside) .ps-cal__day-btn:hover {
  background-color: var(--oco-surface-sunken, #f2f4f7);
}

/* Jour sélectionné : pastille accent gradient (façon flow-test oco-sel) */
.oco-pill-search .ps-cal__day.is-selected .ps-cal__day-btn {
  background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
  color: var(--oco-on-accent, #ffffff);
  font-weight: 800;
}
.oco-pill-search .ps-cal__day.is-selected .ps-cal__day-btn:hover {
  background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
}

/* Aujourd'hui : fond sunken (façon flow-test oco-today) */
.oco-pill-search .ps-cal__day.is-today:not(.is-selected) .ps-cal__day-btn {
  background-color: var(--oco-surface-sunken, #f2f4f7);
  font-weight: 700;
}

/* Jours passés / désactivés */
.oco-pill-search .ps-cal__day.is-disabled .ps-cal__day-btn {
  color: var(--oco-text-muted, #98a2b3);
  opacity: 0.45;
  cursor: default;
  /* Pas de pointer-events:none : le bouton capte le clic (le handler JS ignore
     les jours désactivés) au lieu de le laisser passer vers une carte derrière. */
}
/* D8 — jours indisponibles (passés / aucune balade ce jour) barrés. */
.oco-pill-search .ps-cal__day.is-unavailable .ps-cal__day-btn {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Jours hors mois */
.oco-pill-search .ps-cal__day.is-outside {
  visibility: hidden;
}

/* =====================================================================
   PARTICIPANTS — style stepper screen-1017-3547
   ===================================================================== */

.oco-pill-search .pill-search__dropdown--persons {
  min-width: 240px;
  padding: 20px 24px;
}

/* Titre « Combien êtes-vous ? » */
.oco-pill-search .ps-persons__title {
  margin: 0 0 20px 0;
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--oco-heading, #1d2939);
  text-align: center;
}

/* Rangée label + stepper */
.oco-pill-search .ps-persons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.oco-pill-search .ps-persons__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.oco-pill-search .ps-persons__label {
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.45px;
  color: var(--oco-heading, #1d2939);
}

/* Stepper : boutons ronds + grand nombre centré */
.oco-pill-search .ps-persons__counter {
  display: flex;
  align-items: center;
  gap: 16px;
}

.oco-pill-search .ps-persons__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--oco-heading, #1d2939);
  background: var(--oco-surface, #ffffff);
  border: 1px solid var(--oco-border, #e4e7ec);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  box-shadow:
    0px 3px 1.5px rgba(0, 0, 0, 0.02),
    0px 1px 1px rgba(0, 0, 0, 0.02);
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.oco-pill-search .ps-persons__btn:hover {
  background-color: var(--oco-surface-sunken, #f2f4f7);
  border-color: var(--oco-border, #e4e7ec);
}
.oco-pill-search .ps-persons__btn:active {
  transform: scale(0.94);
  background-color: var(--oco-surface-sunken, #f2f4f7);
}
.oco-pill-search .ps-persons__btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  /* PAS de pointer-events:none : sinon au min/max le clic « passe au travers »
     jusqu'à un lien de carte derrière le dropdown et navigue. Le bouton capte le
     clic (le handler ne fait rien hors bornes). */
}

.oco-pill-search .ps-persons__value {
  font-family: "Mulish", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.66px;
  color: var(--oco-heading, #1d2939);
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* =====================================================================
   DURÉE — liste cohérente avec les tokens
   ===================================================================== */

.oco-pill-search .pill-search__dropdown--duration {
  min-width: 160px;
  padding: 8px;
}

.oco-pill-search .ps-duration {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oco-pill-search .ps-duration__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--oco-heading, #1d2939);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  text-align: left;
}
.oco-pill-search .ps-duration__option:hover {
  background-color: var(--oco-surface-sunken, #f2f4f7);
}
.oco-pill-search .ps-duration__option.is-active {
  background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
  color: var(--oco-on-accent, #ffffff);
}
.oco-pill-search .ps-duration__option.is-active:hover {
  background: linear-gradient(to bottom, var(--oco-accent, #0094e5), var(--oco-accent-strong, #0086cf));
}

/* =====================================================================
   CATÉGORIE — liste cohérente avec les tokens, actif en accent
   ===================================================================== */

.oco-pill-search .pill-search__dropdown--category {
  min-width: 200px;
  padding: 8px;
}

.oco-pill-search .ps-category {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oco-pill-search .ps-category__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-family: "Mulish", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--oco-heading, #1d2939);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  text-align: left;
}
.oco-pill-search .ps-category__option:hover {
  background-color: var(--oco-surface-sunken, #f2f4f7);
}
.oco-pill-search .ps-category__option.is-active {
  background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
  color: var(--oco-on-accent, #ffffff);
}
.oco-pill-search .ps-category__option.is-active:hover {
  background: linear-gradient(to bottom, var(--oco-accent, #0094e5), var(--oco-accent-strong, #0086cf));
}
.oco-pill-search .ps-category__count {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 8px;
  flex-shrink: 0;
}
.oco-pill-search .ps-category__option.is-active .ps-category__count {
  opacity: 0.85;
}
.oco-pill-search .ps-category__option--child {
  padding-left: 28px;
  font-weight: 400;
  font-size: 13px;
}

/* =====================================================================
   MOBILE (≤640px) — Drawer unifié Airbnb
   Un seul bottom-sheet (.pill-search__drawer) contient toutes les sections.
   Les dropdowns individuels sont déplacés par JS dans le drawer et affichés
   en inline (statique), plus en position:fixed/absolute.
   Backdrop : pseudo-élément ::before sur .oco-pill-search.
   ===================================================================== */

@media (max-width: 640px) {
  /*
   * Neutraliser le transform Bricks sur le parent .brxe-* EN PERMANENCE en mobile.
   * Sans ça, position:fixed sur le drawer crée un bloc conteneur relatif au
   * wrapper Bricks (transform crée un stacking context) et l'ancrage viewport
   * est perdu. Coût : animations Bricks d'entrée désactivées en mobile.
   */
  .brxe-oco-booking-pill-search {
    transform: none !important;
    will-change: auto !important;
  }

  /* Backdrop — TOUJOURS présent, animé en opacité. Cliquable quand ouvert. */
  .oco-pill-search::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 38, 0.45);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease, visibility 0s linear 0.26s;
  }
  .oco-pill-search.drawer-is-open::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.26s ease, visibility 0s linear 0s;
  }

  /* ---- Drawer bottom-sheet unifié ---- */
  .oco-pill-search .pill-search__drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 80vh;
    width: 100%;
    z-index: 300;
    background: var(--oco-surface, #ffffff);
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    box-shadow: 0 -10px 34px rgba(16, 24, 40, 0.20);
    display: flex;
    flex-direction: column;
    /* Slide-up à l'ouverture, slide-down à la fermeture */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.30s;
    font-family: "Mulish", sans-serif;
    box-sizing: border-box;
  }
  .oco-pill-search .pill-search__drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  }

  /* ---- En-tête drawer : drag-handle + titre + bouton fermer ---- */
  .oco-pill-search .pill-search__drawer-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--oco-border, #e4e7ec);
  }
  .oco-pill-search .pill-search__drawer-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--oco-border, #e4e7ec);
    border-radius: 2px;
  }
  .oco-pill-search .pill-search__drawer-title {
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: -0.4px;
    color: var(--oco-heading, #1d2939);
    margin: 0;
  }
  .oco-pill-search .pill-search__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--oco-surface-sunken, #f2f4f7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--oco-text-muted, #98a2b3);
    padding: 0;
    transition: color 0.12s ease, background 0.12s ease;
  }
  .oco-pill-search .pill-search__drawer-close:hover {
    color: var(--oco-heading, #1d2939);
    background: var(--oco-border, #e4e7ec);
  }

  /* ---- Corps scrollable du drawer ---- */
  .oco-pill-search .pill-search__drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 8px;
  }

  /* ---- Section par champ ---- */
  .oco-pill-search .pill-search__drawer-section {
    border-bottom: 1px solid var(--oco-border, #e4e7ec);
    padding: 0;
  }
  .oco-pill-search .pill-search__drawer-section:last-child {
    border-bottom: none;
  }
  .oco-pill-search .pill-search__drawer-section-title {
    font-family: "Mulish", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--oco-text-muted, #98a2b3);
    margin: 0;
    padding: 16px 20px 0;
  }

  /* ---- Dropdowns dans le drawer : override → inline statique ---- */
  /* On neutralise TOUTES les propriétés de positionnement flottant/absolu/fixe.
     Le drawer est le bottom-sheet, pas le dropdown lui-même. */
  .oco-pill-search .pill-search__drawer-section .pill-search__dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 20px 16px !important;
    background: transparent !important;
    z-index: auto !important;
  }

  /* Calendrier : pleine largeur dans le drawer */
  .oco-pill-search .pill-search__drawer-section .pill-search__dropdown--date {
    padding: 12px 20px 16px !important;
  }
  .oco-pill-search .pill-search__drawer-section .ps-cal {
    width: 100%;
  }
  .oco-pill-search .pill-search__drawer-section .ps-cal__grid {
    width: 100%;
  }
  .oco-pill-search .pill-search__drawer-section .ps-cal__weekdays th,
  .oco-pill-search .pill-search__drawer-section .ps-cal__days td {
    height: 44px;
    padding: 3px;
  }
  .oco-pill-search .pill-search__drawer-section .ps-cal__day-btn {
    width: 38px;
    height: 38px;
  }

  /* Participants : centré dans le drawer */
  .oco-pill-search .pill-search__drawer-section .pill-search__dropdown--persons {
    text-align: center;
  }
  .oco-pill-search .pill-search__drawer-section .ps-persons__row {
    justify-content: center;
    gap: 24px;
  }
  .oco-pill-search .pill-search__drawer-section .ps-persons__label {
    display: none;
  }
  .oco-pill-search .pill-search__drawer-section .ps-persons__btn {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .oco-pill-search .pill-search__drawer-section .ps-persons__value {
    font-size: 28px;
    min-width: 36px;
  }

  /* Dropdown hors drawer (original, dans .oco-pill-search directement) :
     conserve le comportement bottom-sheet par champ — mais en pratique JS
     les déplace dans le drawer, donc ceci est un garde-fou uniquement. */
  .oco-pill-search > .pill-search__dropdown {
    position: fixed;
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    padding: 24px 20px 32px;
    z-index: 200;
    box-shadow: 0 -10px 34px rgba(16, 24, 40, 0.18);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
  }
  .oco-pill-search > .pill-search__dropdown.is-open {
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  }

  /* ---- Footer sticky du drawer ---- */
  .oco-pill-search .pill-search__drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--oco-border, #e4e7ec);
    background: var(--oco-surface, #ffffff);
  }

  /* Bouton « Tout effacer » */
  .oco-pill-search .pill-search__drawer-clear {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: "Mulish", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--oco-text-muted, #98a2b3);
    padding: 8px 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.12s ease;
    white-space: nowrap;
  }
  .oco-pill-search .pill-search__drawer-clear:hover {
    color: var(--oco-heading, #1d2939);
  }

  /* Bouton « Rechercher » CTA */
  .oco-pill-search .pill-search__drawer-submit {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(to bottom, var(--oco-accent-bright, #00a5ff), var(--oco-accent, #0094e5));
    filter: drop-shadow(0px 3px 1.5px rgba(0, 0, 0, 0.08));
    transition: background 0.14s ease, filter 0.14s ease;
  }
  .oco-pill-search .pill-search__drawer-submit:hover {
    background: linear-gradient(to bottom, var(--oco-accent, #0094e5), var(--oco-accent-strong, #0086cf));
    filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.12));
  }
  .oco-pill-search .pill-search__drawer-submit-text {
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.48px;
    color: var(--oco-on-accent, #ffffff);
    white-space: nowrap;
  }
  .oco-pill-search .pill-search__drawer-submit svg {
    width: 16px;
    height: 16px;
    color: var(--oco-on-accent, #ffffff);
    flex-shrink: 0;
  }
}