/* =========================================================
   VARIABLES (couleurs, dimensions, ombres, etc.)
   Modifie ici pour impacter toute la barre et le panneau
   ========================================================= */
#immoconfig-search-form-shortcode, #immoconfig-search-form-page{
  --bar-bg:#fff;
  --bar-text:#1e293b;
  --border:rgba(224,196,11);
  --gold:rgba(224,196,11);
  --gold-hover:#b5884d;
  --radius:6px;
  --height:36px;
  --gap:0;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --placeholder:#9aa4b2;
  --bg-color-primary: #005866;

  --muted:#64748b;
  --chip-bg:#f8fafc;
  --chip-bd:#e2e8f0;
  --chip-text:#0f172a;

  --filter-bg:#ffffff;
  --filter-bd:#e5e7eb;
}


/* Taille du bloc shortcode */
#immoconfig-search-form-shortcode{
  max-width: 1024px !important;
  margin: 0 auto 0 auto !important;
}

/* Enlève le padding horizontal du parent quand il contient ton bloc */
.has-global-padding:has(> #immoconfig-search-form-page){
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Supprime la marge “block gap” au dessus/dessous du parent dans le flux */
:where(.wp-site-blocks) > .has-global-padding:has(> #immoconfig-search-form-page){
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Ton bloc occupe 100% et ne déborde pas */
#immoconfig-search-form-page{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--bg-color-primary);
}

.immoconfig-search-form-page-contenair {
  max-width: 1300px;
  margin: 0 auto;
  padding: 5px;
  box-sizing: border-box;
}

/* =========================================================
   BARRE DE RECHERCHE (structure principale)
   - grille des champs + boutons
   - styles de base des inputs/selects
   ========================================================= */
.ic-searchbar{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr 0.5fr auto auto; /* Localité | Type | Budget | Réf | Filtres | Rechercher */
  gap:var(--gap);
  align-items:stretch;
  background:var(--bar-bg);
  color:var(--bar-text);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:visible; /* permet au panneau filtres de dépasser */
  border:1px solid var(--border);
}

/* Cellule de champ */
.ic-field{
  position:relative;
  display:grid;
  grid-template-rows:1fr;
}
/* séparateurs verticaux entre champs */
.ic-field + .ic-field{ border-left:1px solid var(--border); }

/* Label “visually hidden” pour l’accessibilité */
.ic-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Inputs & Selects de la barre */
.ic-field input,
.ic-field select{
  height:var(--height);
  padding:0 22px;
  border:0; background:transparent;
  font:600 20px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--bar-text); outline:none; width:100%;
}
.ic-field--ref input{
  font-size:16px; /* champ Réf. un peu plus compact */
  padding:0 16px;
}
.ic-field input::placeholder{ color:var(--placeholder); font-weight:600; }

/* Select “chevron” */
.ic-select{ position:relative; }
.ic-select select{
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%231e293b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:18px 18px;
  padding-right:46px;
}

/* Boutons principaux */
.ic-btn{
  height:var(--height);
  padding:0 24px;
  background:var(--gold);
  color:#fff; border:0;
  font:800 16px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.06em; cursor:pointer;
  transition:background .2s ease, transform .02s ease;
}
.ic-btn:hover{ background:var(--gold-hover); }
.ic-btn:active{ transform:translateY(1px); }

/* Bouton “Filtres” (style neutre) */
.ic-btn--filters{
  background:#fff; color:var(--bar-text);
  border:1px solid var(--border);
  text-transform:none; font-weight:700; letter-spacing:0;
  position:relative;
}
.ic-btn--filters:hover{ background:#f8fafc; }
.ic-btn--filters[aria-expanded="true"]{ background:#f1f5f9; }

/* Pastille indiquant des filtres actifs */
.ic-filters-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--gold); margin-left:8px; vertical-align:middle;
}

/* Focus subtil à la saisie */
.ic-field:focus-within{ box-shadow: inset 0 0 0 2px rgba(30,41,59,.06); }

/* =========================================================
   SUGGESTION (autocomplétion Localité)
   ========================================================= */
.ic-suggest{
  position:absolute; left:0; right:0; top:100%;
  z-index:1000; background:#fff; border:1px solid #e5e7eb; border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); margin-top:6px; overflow:hidden;
}
.ic-suggest__item{ padding:10px 14px; cursor:pointer; font-weight:600; color:#1e293b; }
.ic-suggest__item small{ color:#6b7280; font-weight:500; margin-left:6px; }
.ic-suggest__item:hover, .ic-suggest__item.is-active{ background:#f8fafc; }
.ic-field--suggest{ position:relative; }

/* =========================================================
   PANNEAU FILTRES (2 rangées pleine largeur)
   - rangée 1: “Options” (checkbox binaire Oui/Non)
   - rangée 2: “Précisions” (selects)
   ========================================================= */
.ic-filters{
  position:absolute; left:-1px; right:-1px; top:calc(100% + 8px);
  background:var(--filter-bg);
  border:1px solid var(--filter-bd);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:10px 12px;
  z-index:999 !important;
}
.ic-filters__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 2px 10px 2px; border-bottom:1px dashed var(--filter-bd);
}
.ic-filters__head strong{ font-size:13px; color:var(--bar-text); }
.ic-filters__close{
  border:0; background:transparent; font-size:16px; line-height:1; cursor:pointer; color:#475569;
}

/* Grille du contenu (2 blocs verticalement) */
.ic-filters__grid{
  display:grid;
  grid-template-rows:auto auto;
  gap:14px;
  padding-top:10px;
}

/* Groupes internes (Options / Précisions) */
.ic-fg{ display:grid; gap:8px; padding:6px 2px; }
.ic-fg__title{ font-size:12px; font-weight:800; color:#334155; text-transform:uppercase; letter-spacing:.03em; }

/* Chaque rangée affiche une grille responsive sur toute la largeur */
.ic-fg__row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
  align-items: center;
}

/* Checkbox stylisées (Options) */
.ic-check{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); user-select:none; cursor:pointer;
}
.ic-check input{ position:absolute; opacity:0; pointer-events:none; }
.ic-checkbox{
  width:18px; height:18px; border:1.6px solid #cbd5e1; border-radius:4px; display:inline-block;
  background:#fff; box-shadow:inset 0 0 0 2px transparent; transition:all .15s ease;
}
.ic-check input:checked + .ic-checkbox{
  background:var(--gold); border-color:var(--gold);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
}
.ic-check input:checked + .ic-checkbox:after{
  content:''; display:block; width:10px; height:10px; margin:3px auto 0;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#fff;
}
.ic-check__label{ font-weight:600; }

/* Selects compacts (Précisions) */
.ic-select-wrap select,
.ic-fg select{
  height:40px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
  padding:0 12px;
  font:600 13px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a; width:100%;
}
.ic-fg select:focus{ outline:none; box-shadow:0 0 0 2px rgba(30,41,59,.06); }

/* === ÉTAT SÉLECTIONNÉ (select avec une vraie valeur) =================== */
/* Progressive enhancement (Chrome/Safari/Firefox récents) */
.ic-select-wrap select:has(option:checked:not([value=""])),
.ic-fg select:has(option:checked:not([value=""])) {
  border-color: var(--gold);
  background:
    linear-gradient(to bottom, rgba(243,201,72,.08), rgba(243,201,72,.14)) /* light gold */,
    #fff;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    0 0 0 1px var(--gold);
}

/* Fallback universel (activé par JS via .is-filled) */
.ic-select-wrap select.is-filled,
.ic-fg select.is-filled {
  border-color: var(--gold);
  background:
    linear-gradient(to bottom, rgba(243,201,72,.08), rgba(243,201,72,.14)),
    #fff;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.9),
    0 0 0 1px var(--gold);
}

/* Optionnel : texte un poil plus “fort” quand rempli */
.ic-select-wrap select.is-filled,
.ic-fg select.is-filled {
  color: #0f172a;
  font-weight: 700;
}

/* =========================================================
   CHIPS (filtres actifs) sous la barre
   ========================================================= */
.ic-active-filters{
  display:flex; flex-wrap:wrap; gap:6px; padding:8px 4px 0 4px;
}
.ic-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--chip-bg); color:var(--chip-text);
  border:1px solid var(--chip-bd); border-radius:999px;
  padding:6px 10px; font-size:12px; line-height:1; font-weight:600;
}
.ic-chip button{
  border:0; background:transparent; cursor:pointer; color:#475569; font-size:14px; line-height:1;
}

/* Option sélectionnée (mise en valeur dans les selects de précision) */
.ic-fg select option.is-selected {
  background-color: rgba(243, 201, 72, .15);
  color: #b45309;
  font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   - ajuste colonnes de la barre
   - panneau passe en statique sur mobile
   ========================================================= */
@media (max-width:1100px){
  .ic-searchbar{ grid-template-columns: 1fr 1fr 0.8fr 0.6fr auto auto; }
}
@media (max-width:860px){
  .ic-searchbar{ grid-template-columns: 1fr 1fr 1fr auto; }
  .ic-searchbar > .ic-field:nth-child(1){ grid-column: span 2; }
  .ic-field--ref{ border-left:1px solid var(--border); }
}
/* ====== Responsive : 1 champ par ligne sur mobile ====== */
@media (max-width: 720px){
  /* grille en 1 colonne */
  .ic-searchbar{
    grid-template-columns: 1fr;
    gap: 0; /* on gère les séparateurs par bordures */
  }

  /* chaque cellule occupe toute la ligne */
  .ic-searchbar > .ic-field,
  .ic-searchbar > .ic-btn--filters,
  .ic-searchbar > .ic-btn{
    grid-column: 1 / -1;
    width: 100%;
  }

  /* plus de séparateur vertical ; on met un séparateur horizontal entre lignes */
  .ic-field + .ic-field{
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  /* le champ Réf. ne doit plus remettre une bordure verticale */
  .ic-field--ref{ border-left: 0; }

  /* boutons sur leur propre ligne, largeur 100% */
  .ic-btn, .ic-btn--filters{
    width: 100%;
    height: 56px; /* un peu moins haut sur mobile */
  }

  /* Panneau filtres passe sous la barre (plein largeur) */
  .ic-filters{
    position: static;
    margin-top: 8px;
  }
  .ic-filters__grid{ grid-template-rows: auto auto; }

  /* taille des champs plus compacte */
  .ic-field input,
  .ic-field select{
    height: 54px;
    padding: 0 16px;
    font-size: 16px;
  }
}

/* Micro-ajustements “petit mobile” */
@media (max-width: 480px){
  .ic-field input,
  .ic-field select{ font-size: 15px; }
  .ic-btn, .ic-btn--filters{ height: 52px; }
}

/* 1) Le wrapper du formulaire devient une “couche” au-dessus du reste */
#immoconfig-search-form{
  position: relative;      /* crée un stacking context */
  z-index: 3000;           /* > swiper */
  isolation: isolate;      /* force un contexte propre (évite interactions ) */
}

/* 2) La barre et surtout le panneau filtres sont au 1er plan */
.ic-searchbar{
  position: relative;      /* pour que .ic-filters abs. s’ancre dessus */
  z-index: 3100;
  /* tu gardes overflow:visible; déjà présent */
}
.ic-filters{
  position: absolute;      /* déjà le cas sur desktop */
  z-index: 3200;           /* au-dessus des boutons Swiper (souvent z=10) */
}