/* =================================================================
   MOTEURS DE RECHERCHE — REFRESH 2026
   Cible : includes/search_filter_habitation.php
           includes/search_filter_immobilier.php
           includes/search_filter_defiscalisation.php

   Chargée par includes/head.php, APRÈS main.css / custom.css
   (surcharges de sélecteurs existants).

   Aucune classe existante n'est renommée et aucun noeud du DOM piloté
   par js/forms.js n'est déplacé : le comportement (ouverture des
   listes, cases cochées, noUiSlider, submit) est inchangé.
   Ajouts de markup dans les 3 includes :
     - .sf-head   : icône de rubrique (celle du hero) + intitulé
     - .sf-visual : photo de la rubrique dans la colonne de gauche,
                    à la place du carrousel de produits (commenté).
   Angles droits partout : conforme au design system.
   ================================================================= */

/* ---------- Fond du panneau ---------- */
.search_filter {
  background: #00496b;
  background-image:
    radial-gradient(90% 70% at 100% 0%, rgba(52,167,213,0.28) 0%, rgba(52,167,213,0) 60%),
    linear-gradient(160deg, #00567f 0%, #00496b 45%, #003852 100%);
}

/* ---------- Bouton de fermeture ----------
   La croix et le chevron sont des SVG inline (data URI) : aucun
   nouveau fichier à déployer dans img/icons/. */
.search_filter .close_filter {
  top: 26px;
  right: 26px;
  width: 46px;
  height: 46px;
  background-color: rgba(255,255,255,0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-size: 17px auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: background-color .25s ease, transform .25s ease;
}
.search_filter .close_filter:hover {
  background-color: #34a7d5;
  transform: rotate(90deg);
}

/* ---------- Colonne visuel (bien en exclusivité) ---------- */
.search_filter .search_filter_content .row .search_slider_wrap {
  padding: 28px;
}
.search_filter .search_filter_content .row .search_slider_wrap .bloc_slide_bien {
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
/* la vignette d'infos se détache des bords (angles droits) */
.search_filter .search_filter_content .row .search_slider_wrap .owl-carousel li .bloc_slide_bien .infos,
.search_filter .search_filter_content .row .search_slider_wrap .owl-item li .bloc_slide_bien .infos {
  left: 18px;
  right: 18px;
  bottom: 18px;
  width: auto;
  padding: 22px 24px;
  background: rgba(255,255,255,0.94);
}
.search_filter .search_filter_content .row .search_slider_wrap .owl-carousel li .bloc_slide_bien .infos .h6,
.search_filter .search_filter_content .row .search_slider_wrap .owl-item li .bloc_slide_bien .infos .h6 {
  font-size: 13pt;
}
/* bandeau rouge "réduction d'impôt" : bord à bord dans la vignette */
.search_filter .search_filter_content .row .search_slider_wrap .owl-carousel li .bloc_slide_bien .infos p.red,
.search_filter .search_filter_content .row .search_slider_wrap .owl-item li .bloc_slide_bien .infos p.red {
  margin: 18px -24px -22px -24px;
  padding: 16px 24px;
  background: #d92b2b;
  font-size: 11.5pt;
}

/* ---------- Colonne formulaire ---------- */
.search_filter .search_filter_content .row .search_content {
  padding: 48px 70px;
  max-width: 720px;
}

/* "Que recherchez-vous ?" devient un sur-titre discret */
.search_filter .search_filter_content .row .search_content .main_title {
  margin-bottom: 18px;
  font-family: 'Sora', arial, sans-serif;
  font-size: 10.5pt;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.search_filter .search_filter_content .row .search_content .main_title span {
  font-weight: 600;
}

/* ---------- NOUVEAU : en-tête de rubrique (icône + intitulé) ---------- */
.sf-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.sf-head__ico {
  flex: 0 0 auto;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  /* halo bleu autour de la pastille blanche de l'icône */
  box-shadow: 0 0 0 9px rgba(52,167,213,0.18);
}
.sf-head__ico img { display: block; width: 100%; height: 100%; }
.sf-head__txt { display: flex; flex-direction: column; min-width: 0; }
.sf-head__txt strong {
  font-family: 'Sora', arial, sans-serif;
  font-weight: 700;
  font-size: 22pt;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- Champs (listes déroulantes maison) ---------- */
.search_filter .search_content form:not(.simform) .input_custom_wrap {
  height: 58px;
  margin: 0 0 14px 0;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.06);
  font-family: 'Sora', arial, sans-serif;
  font-weight: 400;
  font-size: 12.5pt;
  transition: border-color .2s ease, background .2s ease;
}
.search_filter .search_content form:not(.simform) .input_custom_wrap:hover {
  border-color: rgba(52,167,213,0.9);
  background: rgba(255,255,255,0.1);
}
.search_filter .search_content form:not(.simform) .input_custom_wrap.active {
  border-color: #34a7d5;
  background: rgba(255,255,255,0.1);
}
.search_filter .search_content form:not(.simform) .input_custom_wrap:after {
  width: 52px;
  height: 56px;
  right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 16px auto;
  opacity: .8;
}
.search_filter .search_content form:not(.simform) .input_custom_wrap .placeholder {
  line-height: 56px;
  padding-right: 58px;
}
/* pastilles des choix multiples (villes, types de bien) */
.search_filter .search_content form:not(.simform) .input_custom_wrap .choice {
  padding: 6px 13px;
  margin: 0 6px 0 0;
  background: rgba(52,167,213,0.92);
  font-family: 'Geist', arial, sans-serif;
  font-size: 10.5pt;
  font-weight: 500;
}
/* liste ouverte */
.search_filter .search_content form:not(.simform) .input_custom_wrap .input_custom {
  top: calc(100% + 7px);
  padding: 18px 20px 6px 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: #023d5b;
  box-shadow: 0 22px 40px rgba(0,0,0,0.4);
  max-height: 290px;
}

/* ---------- Cases à cocher / boutons radio ---------- */
.search_filter .search_content form .check_box.white,
.search_filter .search_content form .radio_box.white { margin: 0 0 14px 0; }
.search_filter .search_content form .check_box.white label,
.search_filter .search_content form .radio_box.white label {
  font-family: 'Geist', arial, sans-serif;
  font-size: 11.5pt;
  font-weight: 400;
  padding-left: 36px;
  padding-top: 1px;
  transition: color .2s ease;
}
.search_filter .search_content form .check_box.white label:hover,
.search_filter .search_content form .radio_box.white label:hover { color: #7fd0f0; }
.search_filter .search_content form .check_box.white input[type=checkbox] + label:before,
.search_filter .search_content form .radio_box.white input[type=radio] + label:before {
  top: 1px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  transition: background .2s ease, border-color .2s ease;
}
/* les radios restent rondes */
.search_filter .search_content form .radio_box.white input[type=radio] + label:before { border-radius: 50%; }
.search_filter .search_content form .check_box.white input[type=checkbox]:checked + label:before,
.search_filter .search_content form .radio_box.white input[type=radio]:checked + label:before {
  border-color: #34a7d5;
  background: url("../img/icons/check.svg") no-repeat center center #34a7d5;
  background-size: 14px auto;
}

/* ---------- Curseurs de budget ---------- */
.search_filter .search_content form:not(.simform) .range_wrap {
  margin: 0 0 16px 0;
  padding: 20px 24px 26px 24px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
}
.search_filter .search_content form:not(.simform) .range_wrap p {
  padding-left: 0;
  font-family: 'Sora', arial, sans-serif;
  font-size: 11.5pt;
  color: rgba(255,255,255,0.85);
}
.search_filter .search_content form:not(.simform) .range_wrap p span {
  padding: 8px 14px;
  background: rgba(0,0,0,0.22);
  font-weight: 600;
  color: #fff;
}
.search_filter .search_content form:not(.simform) .range_wrap .range {
  height: 5px;
  background: rgba(255,255,255,0.2);
  margin: 26px auto 0 auto;
}
.search_filter .search_content form:not(.simform) .range_wrap .range:before,
.search_filter .search_content form:not(.simform) .range_wrap .range:after { display: none; }
.search_filter .search_content form:not(.simform) .range_wrap .range .noUi-connect {
  background: #34a7d5;
}
.search_filter .search_content form:not(.simform) .range_wrap .range .noUi-handle {
  top: -8px;
  width: 21px;
  height: 21px;
  background: #fff;
  background-image: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

/* ---------- Actions ---------- */
.search_filter .search_filter_content .row .search_content form .btn {
  margin-top: 30px;
}
.search_filter .search_filter_content .row .search_content .btn_search {
  height: 58px;
  padding: 0 58px 0 24px;
  line-height: 58px;
  font-family: 'Sora', arial, sans-serif;
  font-weight: 700;
  font-size: 13pt;
  letter-spacing: .4px;
  background-position: right 20px center;
  box-shadow: 0 14px 28px rgba(52,167,213,0.28) !important;
  transition: background-color .25s ease, transform .25s ease;
}
.search_filter .search_filter_content .row .search_content .btn_search:hover {
  background-color: #2b93bd;
  transform: translateY(-2px);
}
.search_filter .search_filter_content .row .search_content .btn_white {
  margin-top: 26px;
  padding: 12px 50px 12px 20px;
  /* .btn de main.css impose border:0 -> il faut la notation complète */
  border: 1px solid rgba(255,255,255,0.45);
  font-family: 'Sora', arial, sans-serif;
  font-size: 11pt;
  font-weight: 500;
  transition: border-color .25s ease, background-color .25s ease;
}
.search_filter .search_filter_content .row .search_content .btn_white:hover {
  border-color: #fff;
  background-color: rgba(255,255,255,0.1);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1399px) {
  .search_filter .search_filter_content .row .search_content { padding: 40px 50px; }
  .sf-head__txt strong { font-size: 19pt; }
}
@media (max-width: 991px) {
  .search_filter .search_filter_content .row .search_content { padding: 34px 24px; }
  .sf-head {
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 24px;
  }
  .sf-head__ico { width: 50px; height: 50px; box-shadow: 0 0 0 6px rgba(52,167,213,0.18); }
  .sf-head__txt strong { font-size: 16pt; }
}
@media (max-width: 575px) {
  .search_filter .close_filter { top: 14px; right: 14px; width: 38px; height: 38px; background-size: 14px auto; }
  .search_filter .search_filter_content .row .search_content { padding: 28px 16px; }
  .sf-head__txt strong { font-size: 15pt; }
  .search_filter .search_content form:not(.simform) .input_custom_wrap { font-size: 11.5pt; }
}

/* =================================================================
   COLONNE VISUELLE DE GAUCHE (photo de rubrique du hero 2026)
   ================================================================= */
.sf-visual {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.sf-visual > picture,
.sf-visual > picture img {
  display: block;
  width: 100%;
  height: 100%;
}
.sf-visual > picture img { object-fit: cover; }
/* léger voile pour raccorder le visuel au bleu du panneau */
.sf-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,40,60,0.45) 0%, rgba(0,40,60,0.05) 45%, rgba(0,40,60,0) 70%);
  pointer-events: none;
}

@media (max-width: 1399px) {
  .sf-visual { min-height: 360px; }
}