/** * Benin Immo Collections — Barre de filtres * Design moderne portail immobilier premium · Responsive · Sticky */ /* ══════════════════════════════════════════════════════════════════════════════ VARIABLES (les valeurs admin écrasent ces defaults via style inline sur .bic-filter-bar) ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-bar { --bic-primary: #1a3c5e; --bic-primary-h: #0f2a47; --bic-btn-color: #1a3c5e; --bic-accent: #f0a500; --bic-bg: #ffffff; --bic-bg-hover: #f7f9fc; --bic-border: #dde3ec; --bic-label-color: #718096; --bic-radius: 8px; --bic-input-h: 40px; --bic-cols: 4; --bic-shadow: 0 2px 20px rgba(26,60,94,.10); --bic-shadow-lg: 0 8px 32px rgba(26,60,94,.16); --bic-text: #2d3748; --bic-transition: .2s ease; } /* ══════════════════════════════════════════════════════════════════════════════ CONTENEUR PRINCIPAL ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-bar { position: relative; background: var(--bic-bg); border: 1px solid var(--bic-border); border-radius: var(--bic-radius); box-shadow: var(--bic-shadow); margin-bottom: 28px; /* PAS d'overflow:hidden — cela clippe les dropdowns Select2 */ overflow: visible; transition: box-shadow var(--bic-transition); /* z-index bas pour ne pas couvrir les annonces */ z-index: 10; } .bic-filter-bar:hover { box-shadow: var(--bic-shadow-lg); } /* ── Sticky desktop (activé uniquement via data-sticky="1") ──────────────────*/ @media (min-width: 992px) { .bic-bar--sticky-enabled.bic-is-sticky { position: sticky; top: 4px; z-index: 50; /* raisonnable — ne couvre pas les annonces */ box-shadow: var(--bic-shadow-lg); } } /* ══════════════════════════════════════════════════════════════════════════════ VARIANTE VERTICALE (widget sidebar) .bic-filter-bar--vertical ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-bar--vertical { box-shadow: none !important; border-radius: var(--bic-radius) !important; } .bic-filter-bar--vertical .bic-filter-grid { grid-template-columns: 1fr !important; gap: 10px 0 !important; } .bic-filter-bar--vertical .bic-filter-field[data-width] { grid-column: span 1 !important; } /* Champ range vertical : les deux inputs empilés */ .bic-filter-bar--vertical .bic-filter-field--range .bic-range-inputs { flex-direction: column !important; gap: 6px !important; } .bic-filter-bar--vertical .bic-filter-field--range .bic-range-inputs .bic-input { width: 100% !important; } .bic-filter-bar--vertical .bic-range-sep { display: none !important; } /* Boutons pleine largeur en vertical */ .bic-filter-bar--vertical .bic-filter-actions { flex-direction: column !important; } .bic-filter-bar--vertical .bic-btn { width: 100% !important; justify-content: center !important; } /* ══════════════════════════════════════════════════════════════════════════════ EN-TÊTE DE LA BARRE ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--bic-primary); color: #fff; cursor: default; } .bic-filter-icon { display: flex; align-items: center; opacity: .85; } .bic-filter-label { font-size: 14px; font-weight: 600; letter-spacing: .3px; flex: 1; } .bic-filter-count-badge { display: none; background: var(--bic-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; min-width: 24px; text-align: center; } .bic-filter-count-badge:not(:empty) { display: inline-block; } /* Select2 : dropdowns rendues dans — pas de clipping ─────────────────*/ /* .select2-dropdown est l'élément appendé dans lors de dropdownParent:body */ .select2-dropdown { z-index: 99999 !important; } .select2-container { z-index: 9999 !important; } /* ── Champs valeur sélectionnée : affichage complet ──────────────────────── */ .bic-filter-bar .select2-container .select2-selection--single .select2-selection__rendered { overflow: visible !important; text-overflow: unset !important; white-space: normal !important; line-height: 1.3 !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Hauteur auto si valeur longue */ .bic-filter-bar .select2-container .select2-selection--single { height: auto !important; min-height: 40px !important; } /* Bouton toggle (mobile) */ .bic-filter-toggle { display: none; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--bic-transition); } .bic-filter-toggle:hover { background: rgba(255,255,255,.25); } .bic-filter-toggle[aria-expanded="true"] .bic-chevron { transform: rotate(180deg); } .bic-chevron { transition: transform .25s ease; } @media (max-width: 991px) { .bic-filter-toggle { display: flex; } } /* ══════════════════════════════════════════════════════════════════════════════ CHAMPS DU FILTRE ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-fields { padding: 20px; transition: all .3s ease; } /* Collapse mobile */ .bic-fields--closed { display: none; } /* Grille responsive — nombre de colonnes défini par --bic-cols (réglage admin) */ .bic-filter-grid { display: grid; grid-template-columns: repeat(var(--bic-cols, 4), 1fr); gap: 14px 16px; margin-bottom: 16px; } @media (max-width: 900px) { .bic-filter-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .bic-filter-grid { grid-template-columns: 1fr; } } /* Largeurs de champs via data-width (span sur la grille) */ .bic-filter-field[data-width="1"] { grid-column: span 1; } .bic-filter-field[data-width="2"] { grid-column: span 2; } .bic-filter-field[data-width="3"] { grid-column: span 3; } .bic-filter-field[data-width="4"] { grid-column: 1 / -1; } @media (max-width: 900px) { .bic-filter-field[data-width="2"], .bic-filter-field[data-width="3"], .bic-filter-field[data-width="4"] { grid-column: 1 / -1; } } @media (max-width: 576px) { .bic-filter-grid { grid-template-columns: 1fr; } .bic-filter-field--range .bic-range-inputs { flex-direction: column; gap: 6px; } .bic-range-sep { display: none; } } /* ── Champ individuel ─────────────────────────────────────────────────────────*/ .bic-filter-field { display: flex; flex-direction: column; gap: 6px; } .bic-filter-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--bic-label-color, #718096); margin: 0; } /* Select */ .bic-select { width: 100% !important; height: var(--bic-input-h, 40px) !important; padding: 0 10px !important; border: 1px solid var(--bic-border) !important; border-radius: 6px !important; font-size: 13px !important; color: var(--bic-text) !important; background: #fff !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important; cursor: pointer !important; transition: border-color var(--bic-transition), box-shadow var(--bic-transition) !important; } .bic-select:focus { outline: none !important; border-color: var(--bic-primary) !important; box-shadow: 0 0 0 3px rgba(26,60,94,.12) !important; } /* Select2 override pour correspondre au style */ .bic-filter-bar .select2-container .select2-selection--single { height: 40px !important; border: 1px solid var(--bic-border) !important; border-radius: 6px !important; display: flex !important; align-items: center !important; } .bic-filter-bar .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; font-size: 13px !important; color: var(--bic-text) !important; padding: 0 30px 0 12px !important; } .bic-filter-bar .select2-container .select2-selection--single .select2-selection__arrow { height: 38px !important; } .bic-filter-bar .select2-container--focus .select2-selection--single, .bic-filter-bar .select2-container--open .select2-selection--single { border-color: var(--bic-primary) !important; box-shadow: 0 0 0 3px rgba(26,60,94,.12) !important; } /* Input numérique */ .bic-input { width: 100%; height: var(--bic-input-h, 40px); padding: 0 10px; border: 1px solid var(--bic-border); border-radius: 6px; font-size: 13px; color: var(--bic-text); background: #fff; transition: border-color var(--bic-transition), box-shadow var(--bic-transition); -moz-appearance: textfield; } .bic-input::-webkit-outer-spin-button, .bic-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bic-input:focus { outline: none; border-color: var(--bic-primary); box-shadow: 0 0 0 3px rgba(26,60,94,.12); } .bic-input::placeholder { color: #aab; font-size: 12px; } /* Champ double (range) */ .bic-filter-field--range { grid-column: span 1; } .bic-range-inputs { display: flex; align-items: center; gap: 8px; } .bic-range-inputs .bic-input { flex: 1; min-width: 0; } .bic-range-sep { color: var(--bic-muted); font-size: 12px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════════════ BOUTONS D'ACTION ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; border-top: 1px solid var(--bic-border); margin-top: 4px; padding-top: 16px; } @media (max-width: 576px) { .bic-filter-actions { flex-direction: column-reverse; } .bic-btn { width: 100%; justify-content: center; } } .bic-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: background var(--bic-transition), transform var(--bic-transition), box-shadow var(--bic-transition); white-space: nowrap; } .bic-btn svg { flex-shrink: 0; } /* Reset */ .bic-btn--reset { background: transparent; color: var(--bic-muted); border: 1px solid var(--bic-border); } .bic-btn--reset:hover { background: var(--bic-bg-hover); color: var(--bic-text); border-color: #bbc; } /* Search */ .bic-btn--search { background: var(--bic-btn-color, var(--bic-primary)); color: #fff; box-shadow: 0 2px 8px rgba(26,60,94,.25); } .bic-btn--search:hover:not(:disabled) { background: var(--bic-primary-h); box-shadow: 0 4px 16px rgba(26,60,94,.3); transform: translateY(-1px); } .bic-btn--search:disabled { opacity: .65; cursor: not-allowed; transform: none; } .bic-count-inline { font-size: 11px; opacity: .8; font-weight: 400; } /* ══════════════════════════════════════════════════════════════════════════════ LOADER / SPINNER ══════════════════════════════════════════════════════════════════════════════ */ .bic-filter-loader { position: absolute; /* Couvre uniquement la barre, pas le contenu en dessous */ top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.75); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity .2s ease; border-radius: var(--bic-radius); } .bic-filter-loader.bic-loader--visible { opacity: 1; pointer-events: all; } /* Spinner */ .bic-spinner { width: 36px; height: 36px; border: 3px solid rgba(26,60,94,.15); border-top-color: var(--bic-primary); border-radius: 50%; animation: bic-spin .7s linear infinite; } @keyframes bic-spin { to { transform: rotate(360deg); } } /* Spinner listing pendant le chargement */ [data-view].bic-results--loading { position: relative; min-height: 200px; opacity: .4; pointer-events: none; transition: opacity .2s; } /* ══════════════════════════════════════════════════════════════════════════════ ANIMATION RÉSULTATS ══════════════════════════════════════════════════════════════════════════════ */ [data-view] .property-listing, [data-view] .listing-item { animation: bic-fadein .35s ease both; } @keyframes bic-fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Délai en cascade pour les cartes */ [data-view] > *:nth-child(1) { animation-delay: .00s; } [data-view] > *:nth-child(2) { animation-delay: .04s; } [data-view] > *:nth-child(3) { animation-delay: .08s; } [data-view] > *:nth-child(4) { animation-delay: .12s; } [data-view] > *:nth-child(5) { animation-delay: .16s; } [data-view] > *:nth-child(6) { animation-delay: .20s; } [data-view] > *:nth-child(n+7){ animation-delay: .24s; }