@charset "UTF-8";
/* ===========================
   IFI Searchbar – CSS refactor
   Mobile‑first + dark mode + A11y
   =========================== */
/* ---------- Thème (variables) ---------- */
:root {
  --ifi-bg: #ffffff;
  --ifi-fg: #111111;
  --ifi-muted: #6b7280;
  --ifi-border: rgba(0,0,0,.12);
  --ifi-soft: rgba(0,0,0,.06);
  --ifi-soft-strong: rgba(0,0,0,.10);
  --ifi-primary: #111111;
  --ifi-primary-contrast: #ffffff;
  --ifi-chip-bg: #f5f5f5;
  --ifi-chip-active: #111111;
  --ifi-chip-active-fg: #ffffff;
  --ifi-radius-xl: 0;
  --ifi-radius-pill: 0; /* 0 pour carrées, 25em pour pastilles rondes */
  --ifi-shadow-1: 0 8px 24px rgba(0,0,0,.06);
  --ifi-shadow-2: 0 24px 60px rgba(0,0,0,.18);
  --ifi-shadow-sheet: 0 -24px 60px rgba(0,0,0,.20);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ifi-bg:#0c0d0f;
    --ifi-fg:#e5e7eb;
    --ifi-muted:#9ca3af;
    --ifi-border: rgba(255,255,255,.14);
    --ifi-soft: rgba(255,255,255,.08);
    --ifi-soft-strong: rgba(255,255,255,.14);
    --ifi-primary:#e5e7eb;
    --ifi-primary-contrast:#111;
    --ifi-chip-bg:#1a1c20;
    --ifi-chip-active:#e5e7eb;
    --ifi-chip-active-fg:#111111;
    --ifi-shadow-1: 0 8px 24px rgba(0,0,0,.5);
    --ifi-shadow-2: 0 24px 60px rgba(0,0,0,.6);
    --ifi-shadow-sheet: 0 -24px 60px rgba(0,0,0,.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- Conteneurs ---------- */
.ifisearchbar {
  position: absolute;
  z-index: 10;
  bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 100%;
}

.ifisearchbar > * {
  display: block;
  width: auto;
  max-width: 992px;
  margin-left: auto;
  margin-right: auto;
}

.ifi-searchbar {
  position: relative;
  z-index: 40;
  color: var(--ifi-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---------- Ligne de pills ---------- */
.ifi-searchbar-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border: 0;
  border-radius: 0;
  box-shadow: var(--ifi-shadow-1);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- Bouton Rechercher ---------- */
.ifi-btn-submit {
  margin: 0;
  background: var(--ifi-primary);
  color: var(--ifi-primary-contrast);
  border-radius: 0 !important;
  border: 0 !important;
  padding: 1.6rem 1.5rem !important;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ifi-btn-submit:hover {
  filter: brightness(0.95);
}

.ifi-btn-submit:active {
  transform: translateY(0px) scale(0.99);
}

.ifi-btn-submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Pills ---------- */
.ifi-pill {
  display: inline-flex;
  align-items: center;
  padding: 1.5rem 1.5rem !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ifi-pill:hover {
  background: var(--ifi-soft);
}

.ifi-pill i.bi {
  font-size: 1rem;
}

.ifi-pill .ifi-caret {
  margin-left: 0.35rem;
  opacity: 0.7;
}

.ifi-pill:focus-visible {
  outline: 2px solid var(--ifi-primary);
  outline-offset: 2px;
}

.ifi-pill.is-open {
  background: #fff;
  border: 0;
  border-top: none; /* fusion avec panel au-dessus */
  border-radius: 0;
  box-shadow: var(--ifi-shadow-1);
  z-index: 61;
}

.ifi-pill.is-open .ifi-caret {
  transform: rotate(180deg);
}

/* ---------- Dropdowns (desktop) ---------- */
.ifi-dropdown {
  position: absolute;
  margin-top: -1px !important;
  background: var(--ifi-bg);
  color: var(--ifi-fg);
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--ifi-shadow-2);
  padding: 1rem;
  min-width: 320px;
  z-index: 40;
}

.ifi-dropdown#ifi-dd-advanced {
  margin-top: 6px !important;
  float: right;
}

.ifi-dropdown-inner {
  display: grid;
  gap: 0.8rem;
  width: min(560px, 60vw);
}

.ifi-menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.ifi-menu li {
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.ifi-menu li:hover {
  background: var(--ifi-soft);
}

.ifi-radio input {
  accent-color: var(--ifi-primary);
}

/* Dropdown vers le haut */
.ifi-dropdown.is-up {
  width: 100%;
  background: #fff;
  border: 0;
  border-bottom: none;
  box-shadow: var(--ifi-shadow-2);
  z-index: 60;
}

/* ---------- Champs & grilles ---------- */
.ifi-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ifi-field label {
  font-size: 0.9rem;
}

.ifi-field input,
.ifi-field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  color: var(--ifi-fg);
  border-radius: 0 !important;
  padding: 0.6rem 0.7rem;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ifi-field input::-moz-placeholder {
  color: color-mix(in oklab, var(--ifi-muted) 80%, transparent);
}

.ifi-field input::placeholder {
  color: color-mix(in oklab, var(--ifi-muted) 80%, transparent);
}

.ifi-field input:focus,
.ifi-field select:focus {
  outline: none;
  border-color: var(--ifi-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ifi-primary) 25%, transparent);
}

.ifi-types-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
  min-width: 680px;
}

.ifi-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ifi-check input {
  accent-color: var(--ifi-primary);
}

.ifi-budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  min-width: 560px;
}

/* ---------- Chips ---------- */
.ifi-chipset {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ifi-chip {
  border: 1px solid var(--ifi-border);
  background: var(--ifi-chip-bg);
  color: var(--ifi-fg);
  padding: 0.45rem 0.7rem;
  border-radius: 0 !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}

.ifi-chip:hover {
  border-color: var(--ifi-soft-strong);
}

.ifi-chip.is-active {
  background: var(--ifi-chip-active);
  color: var(--white) !important;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.ifi-chip:active {
  transform: translateY(1px);
}

/* ---------- Recherche avancée (desktop) ---------- */
.btn-adv {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #fff !important;
  padding: 0.75rem 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-adv .ifi-caret {
  transition: transform 0.15s ease;
}

.btn-adv.is-open {
  background: #fff;
  color: #000 !important;
  border-top: none;
  position: relative;
  z-index: 61;
}

.ifi-adv-dropdown {
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  border: 0;
  border-bottom: none;
  border-radius: 0;
  box-shadow: var(--ifi-shadow-2);
  padding: 1rem;
  z-index: 1000;
}

.ifi-adv-dropdown::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  height: 1px;
  width: var(--adv-bottom-span, 0px);
  background: var(--ifi-border);
}

.ifi-adv-footer {
  position: sticky;
  bottom: -1px;
  background: linear-gradient(to top, var(--ifi-bg), color-mix(in oklab, var(--ifi-bg) 70%, transparent));
  padding: 0.75rem 0 0;
  z-index: 1;
  border-top: 1px solid var(--ifi-border);
}

/* ---------- Offcanvas (mobile) ---------- */
.ifi-offcanvas {
  position: fixed; /* au lieu de absolute */
  inset: auto 0 0 0; /* bottom sheet */
  z-index: 1095; /* > .modal-backdrop (Bootstrap) si besoin */
}

.ifi-offcanvas.as-sheet {
  background: var(--ifi-bg);
  color: var(--ifi-fg);
  border-top: 1px solid var(--ifi-border);
  box-shadow: var(--ifi-shadow-sheet);
  border-radius: 1rem 1rem 0 0;
}

/* ---------- Offcanvas (mobile) ---------- */
.ifi-offcanvas.as-full {
  height: 100vh !important;
  max-height: 100vh;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.7); /* semi-transparence */
  color: var(--ifi-fg);
  border-top: 1px solid var(--ifi-border);
  box-shadow: var(--ifi-shadow-sheet);
  backdrop-filter: saturate(140%) blur(20px); /* <-- blur */
  -webkit-backdrop-filter: saturate(140%) blur(20px); /* safari */
}

.offcanvas-backdrop.show {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.ifi-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--ifi-border);
}

.ifi-oc-footer {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ifi-bg), color-mix(in oklab, var(--ifi-bg) 70%, transparent));
  border-top: 1px solid var(--ifi-border);
}

/* ---------- Utilitaires ---------- */
.ifi-d-flex {
  display: flex;
}

.ifi-justify-end {
  justify-content: flex-end;
}

.ifi-link {
  color: var(--ifi-fg);
  text-decoration: none;
  border-bottom: 1px dashed var(--ifi-border);
}

.ifi-link:hover {
  border-color: var(--ifi-fg);
}

.ifi-pill-text {
  color: inherit;
}

.ifi-msg {
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
}

.ifi-msg.info {
  background: var(--ifi-soft);
}

.ifi-msg.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

@media (prefers-color-scheme: dark) {
  .ifi-msg.error {
    background: #2a1313;
    color: #fecaca;
    border-color: #7f1d1d;
  }
}
/* ---------- Mobile (<= 992px) ---------- */
@media (max-width: 991.98px) {
  .ifi-searchbar-row {
    position: relative;
    border-radius: 0 !important;
    width: 100%;
    overflow: visible;
    white-space: normal;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
  }
  .ifi-pill {
    width: 100%;
    justify-content: space-between;
    text-align: left;
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
  .ifi-pill i.bi:first-child {
    margin-right: 0.25rem;
  }
  .ifi-pill .ifi-caret {
    margin-left: auto;
  }
  .ifi-btn-submit {
    width: 100%;
    margin-left: 0;
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
    background-color: #000;
    color: #fff;
  }
  /* on cache les dropdowns desktop, on passe par l’offcanvas */
  .ifi-dropdown, .ifi-adv-dropdown {
    display: none !important;
  }
  /* Ré-afficher le contenu des dropdowns quand ils sont DANS l’offcanvas */
  .ifi-offcanvas .ifi-dropdown,
  .ifi-offcanvas .ifi-adv-dropdown {
    display: block !important;
    position: static; /* pas d’absolu dans l’offcanvas */
    width: auto;
    left: auto;
    top: auto;
    min-width: 0;
    border-bottom: 1px solid var(--ifi-border);
    box-shadow: none;
  }
}
/* Quand une UI de filtre est ouverte, on passe le hero derrière. */
.ifi-layer-open .hero__top {
  z-index: 1 !important;
  pointer-events: none; /* évite de capter les clics au-dessus des dropdowns */
}

/* ---------- Desktop (>= 992px) ---------- */
@media (min-width: 992px) {
  .ifi-searchbar-row {
    width: 100%;
    border-radius: 0;
  }
  .ifi-btn-submit {
    font-size: 0.975rem;
  }
}/*# sourceMappingURL=searchbar.css.map */