@charset "utf-8";

/* ===============================
 *  UTILITAIRES
 * =============================== */

.fs-7 { font-size: .8rem; }

/* ===============================
 *  LISTING ANNONCES - Vignettes
 * =============================== */

.listingAnnonces * {
    color: #000;
}

/* --- Carte --- */
.listingAnnonces .one {
    position: relative;
    margin-bottom: 5vmax;
}

/* Carte cliquable */
.listingAnnonces .one {
    cursor: pointer;
}

/* --- Carousel --- */
.listingAnnonces .one .carousel {
    height: 30vmax;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--neutral-light);
}

.listingAnnonces .one .carousel .carousel-inner,
.listingAnnonces .one .carousel .carousel-item {
    height: 100%;
}

.listingAnnonces .one .carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Labels mandat + statut */
.listingAnnonces .one .carousel .labels {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.listingAnnonces .one .carousel .label {
    background-color: var(--focus-main);
    color: var(--primary-2x-dark);
    font-size: .813rem;
    padding: 4px 10px 3px;
    border-radius: var(--radius-xs);
}

/* Carousel indicators (dots) */
.listingAnnonces .one .carousel .carousel-indicators {
    margin-bottom: 0;
}

.listingAnnonces .one .carousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

/* Slide CTA */
.listingAnnonces .one .carousel .carousel-item.CTA {
    display: flex;
    align-items: center;
    justify-content: center;
}

.listingAnnonces .one .carousel .carousel-item.CTA img {
    filter: blur(10px);
}

.listingAnnonces .one .carousel .carousel-item.CTA a {
    position: absolute;
    z-index: 2;
    color: #FFF;
}

/* --- Content 1 : type_bien + pièces + surface --- */
.listingAnnonces .one .content-1 {
    position: relative;
    margin-top: 1vmax;
}

.listingAnnonces .one .content-1 .sep {
    margin: 0 .35rem;
    color: var(--neutral-mid);
}

/* Bouton favori dans content-1 (aligné sur l'ancien site) */
.listingAnnonces .one .content-1 .btn-favori {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--zindex-favori);
    border: 0;
    background: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
}

.listingAnnonces .one .content-1 .btn-favori img {
    width: 16px;
    height: 16px;
}

/* --- Content 2 : ville + prix --- */
.listingAnnonces .one .content-2 {
    margin-top: .25vmax;
}

/* --- Description --- */
.listingAnnonces .one .description {
    position: relative;
    margin-top: .5vmax;
    padding-top: .5vmax;
}

.listingAnnonces .one .description p {
    font-size: .813rem;
    line-height: 1.4;
    color: #000;
}

.listingAnnonces .one .description .btn-detail {
    position: relative;
    z-index: 112;
}

/* ===============================
 *  RESPONSIVE
 * =============================== */

/* --- Tablet (768px+) --- */
@media screen and (min-width: 768px) {
    .listingAnnonces .one {
        margin-bottom: 3vmax;
    }

    .listingAnnonces .one .carousel {
        height: 30vmin;
        background: var(--neutral-light);
    }
}

/* --- Desktop medium (992px+) --- */
@media screen and (min-width: 992px) {
    .listingAnnonces .one .carousel {
        min-height: 26vmin;
    }
}

/* --- Desktop large (1200px+) --- */
@media screen and (min-width: 1200px) {
    .listingAnnonces .one {
        padding-bottom: 60px;
    }

    .listingAnnonces .one .carousel {
        min-height: 79%;
    }

    /* Controls : cachés par défaut, visibles au hover */
    .listingAnnonces .one .carousel button[class*=carousel-control-] {
        display: block;
        opacity: 0;
        margin-top: 20px;
        transform: scale(.5);
        transition: all ease .2s;
    }

    .listingAnnonces .one .carousel button[class*=carousel-control-] span {
        filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.6));
    }

    .listingAnnonces .one:hover .carousel button[class*=carousel-control-] {
        opacity: 1;
        margin-top: 0;
        transform: scale(1);
    }

    /* Description : position absolute, hauteur limitée avec gradient fade */
    .listingAnnonces .one .description {
        position: absolute;
        bottom: 0;
        right: calc(var(--bs-gutter-x) * .5);
        left: calc(var(--bs-gutter-x) * .5);
        z-index: 111;
        max-height: 60px;
        background-color: var(--bg-body);
        overflow: hidden;
        transition: all .5s ease;
    }

    .listingAnnonces .one .description::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        bottom: 0;
        background: linear-gradient(0deg, var(--bg-body) 10%, color-mix(in oklch, var(--bg-body) 0%, transparent) 89%);
        z-index: 1;
    }

    .listingAnnonces .one .description:hover {
        max-height: 200px;
    }

    .listingAnnonces .one .description:hover::before {
        display: none;
    }

    .listingAnnonces .one .description p {
        color: var(--neutral-main);
    }

    .listingAnnonces .one .description:hover p {
        color: #000;
    }
}