/* ==========================================================
   RECHERCHER.CSS — page de recherche uniquement
   ========================================================== */

/*====================================
            HERO RECHERCHE
====================================*/

#search-hero{

    margin-top:var(--header-height, 84px);

    min-height:60vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:white;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    position:relative;

    overflow:hidden;

    padding:120px 8%;
}

#search-hero .container{

    width:100%;
    max-width:1200px;
    margin:auto;

}

#search-hero h1{

    font-size:3rem;
    margin-bottom:20px;

}

#search-hero p{

    max-width:700px;
    margin:auto;
    margin-bottom:40px;

    color:#e2e8f0;
    line-height:1.8;

}

/*====================================
        BARRE DE RECHERCHE
====================================*/

.search-page-box{

    margin-top:40px;

    background:white;

    padding:20px;

    border-radius:20px;

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr auto;

    gap:15px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.10);

}

.search-page-box input,
.search-page-box select{

    padding:18px;

    border:1px solid #e2e8f0;

    border-radius:12px;

    outline:none;

    font-size:15px;

    transition:border-color .2s, box-shadow .2s;

}

.search-page-box input:focus,
.search-page-box select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,92,61,.12);

}

.search-page-box button{

    border:none;

    background:var(--secondary);

    color:white;

    padding:18px 30px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.search-page-box button:hover{

    background:var(--secondary-dark);

    transform:translateY(-3px);

}

@media(max-width:900px){

    .search-page-box{

        grid-template-columns:1fr;

    }

}

/*====================================
        LISTE DES LOGEMENTS
====================================*/

#logements{

    padding:100px 8%;

}

.coloc-banner{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    max-width:1100px;

    margin:0 auto 40px;

    padding:18px 30px;

    background:var(--primary-light);
    color:var(--primary);

    border-radius:16px;

    font-weight:600;

    text-decoration:none;

    text-align:center;

    transition:.2s;

}

.coloc-banner:hover{

    background:var(--primary);
    color:white;

}

.coloc-banner i{

    font-size:22px;
    flex-shrink:0;

}

@media(max-width:600px){

    .coloc-banner{

        margin-left:20px;
        margin-right:20px;
        padding:16px 20px;

    }

}

/* ==========================
    FILTRES RAPIDES (CHIPS)
========================== */

.quick-filters{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;

    margin-bottom:22px;

}

.quick-filters-label{

    display:flex;
    align-items:center;
    gap:6px;

    color:var(--gray-500);

    font-weight:600;
    font-size:14px;

    margin-right:4px;

}

.quick-filters-sep{

    width:1px;
    height:22px;

    background:#E2E8F0;

    margin:0 4px;

}

.chip{

    border:1.5px solid #E2E8F0;

    background:white;
    color:var(--gray-700, #334155);

    padding:9px 18px;

    border-radius:30px;

    font-size:13.5px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.chip:hover{

    border-color:var(--primary);

    color:var(--primary);

}

.chip.active{

    background:var(--primary);
    border-color:var(--primary);

    color:white;

}

.results-count{

    color:var(--gray-500);

    font-size:14px;
    font-weight:600;

    margin-bottom:18px;

}

@media(max-width:600px){

    .quick-filters{

        margin-left:20px;
        margin-right:20px;

    }

}

.cards-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.badge-card{

    position:absolute;

    top:18px;
    left:18px;

    background:#10B981;
    color:white;

    padding:8px 15px;

    border-radius:30px;

    font-size:14px;
    font-weight:600;

    z-index:2;

}

.badge-card-reserve{

    background:#D97706;

}

/* Badge "Premium" : empilé sous le badge Disponible. */
.badge-premium{

    position:absolute;

    top:62px;
    left:18px;

    display:flex;
    align-items:center;
    gap:5px;

    background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));
    color:white;

    padding:7px 14px;

    border-radius:30px;

    font-size:13px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(111,190,68,.35);

    z-index:2;

}

.badge-premium i{

    font-size:13px;

}

.housing-card-premium{

    border:2px solid var(--secondary);

}

/* Badge Pro : distinct du badge Premium (violet plutôt que vert)
   pour bien montrer qu'il s'agit d'un niveau au-dessus. */
.badge-pro{

    position:absolute;

    top:62px;
    left:18px;

    display:flex;
    align-items:center;
    gap:5px;

    background:linear-gradient(135deg,#7C3AED,#5B21B6);
    color:white;

    padding:7px 14px;

    border-radius:30px;

    font-size:13px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(124,58,237,.35);

    z-index:2;

}

.badge-pro i{

    font-size:13px;

}

.housing-card-pro{

    border:2px solid #7C3AED;

}

/* Badge "Nouveau" : annonce publiée il y a moins de 48h, sous le
   bouton favori pour ne jamais le chevaucher. */
.badge-nouveau{

    position:absolute;

    top:70px;
    right:18px;

    display:flex;
    align-items:center;
    gap:5px;

    background:linear-gradient(135deg,#F59E0B,#D97706);
    color:white;

    padding:6px 13px;

    border-radius:30px;

    font-size:12px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(217,119,6,.35);

    z-index:2;

}

.badge-nouveau i{

    font-size:12px;

}

.housing-card{

    position:relative;

    background:white;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:.3s;

}

.housing-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.card-image-wrap{

    position:relative;

    overflow:hidden;

}

.housing-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.carousel-video{

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:250px;

    object-fit:cover;

    background:#000;

}

.badge-video-card{

    position:absolute;

    bottom:14px;
    left:18px;

    display:flex;
    align-items:center;
    gap:6px;

    background:rgba(0,0,0,.6);
    color:white;

    padding:6px 14px;

    border-radius:30px;

    font-size:12.5px;
    font-weight:600;

    z-index:2;

}

/* Durée d'engagement (ex. "Engagement 6 mois") — séparée du prix
   pour qu'on ne confonde jamais la durée de location avec la
   fréquence de paiement (le loyer reste mensuel, même sur un
   engagement de 6 mois ou 1 an). */
.badge-engagement{

    position:absolute;

    bottom:14px;
    right:18px;

    display:flex;
    align-items:center;
    gap:6px;

    background:rgba(0,0,0,.6);
    color:white;

    padding:6px 14px;

    border-radius:30px;

    font-size:12.5px;
    font-weight:600;

    z-index:2;

}

.badge-engagement i{

    font-size:14px;

}

.housing-content{

    padding:25px;

}

.housing-content-top{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;

    margin-bottom:10px;

}

.housing-content-top h3{

    margin-bottom:0;

}

.posted-time{

    flex-shrink:0;

    margin-top:4px;

    color:var(--gray-500, #64748B);

    font-size:12px;
    white-space:nowrap;

}

.housing-content p{

    display:flex;
    align-items:center;
    gap:6px;

    color:#64748B;

}

.housing-info{

    display:flex;
    flex-wrap:wrap;
    gap:14px;

    margin:14px 0;

    font-size:14px;

    color:#475569;

}

.housing-info span{

    display:flex;
    align-items:center;
    gap:5px;

}

.housing-content h4{

    color:var(--primary);

    margin:20px 0;

}

.housing-actions{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px 16px;

}

.btn-details{

    display:inline-block;

    background:var(--secondary);

    color:white;

    padding:12px 25px;

    border-radius:12px;

    text-decoration:none;

}

/*========== FAVORI ==========*/

.favorite{

    position:absolute;

    top:18px;
    right:18px;

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

}

.favorite:hover{

    background:#ef4444;
    color:white;
    transform:scale(1.1);

}

.favorite.active{

    background:#EF4444;

    color:white;

    transform:scale(1.1);

}