@charset "utf-8";

/*
 * Vignettes d'annonces - modele commun aux sites du framework (cotepatio2,
 * actifimmo2, espritlandes), recolore a la charte Tout l'Immobilier Landes.
 * Le marqueur mandat/statut reprend le bleu des encarts de l'ancien site.
 */

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

.listingAnnonces * {
    color: #000;
}

/* --- Carte cliquable (handler data-href dans custom.js) --- */
.listingAnnonces .one {
    position: relative;
    margin-bottom: 5vmax;
    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;
    flex-wrap: wrap;
    gap: 6px;
}

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

/* Statut (compromis, vendu, loue) : orange, pour le distinguer du mandat */
.listingAnnonces .one .carousel .label-statut {
    background-color: var(--focus-main);
}

/* 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 + pieces + 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 (aligne sur les autres sites) */
.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;
}

/* ===============================
 *  BOUTON COEUR (vignette)
 * =============================== */

.btn-favori {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-base);
}

.btn-favori:hover {
    transform: scale(1.15);
}

.btn-favori img {
    transition: filter var(--transition-base);
}

/* Etat inactif : gris. Etat actif : rouge, comme le coeur du header */
.btn-favori .ic-coeur {
    filter: var(--fill-svg-neutral-mid);
}

.btn-favori.active .ic-coeur,
.btn-favori:hover .ic-coeur {
    filter: var(--fill-svg-red);
}

/* Animation au clic */
@keyframes heartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.btn-favori.pop {
    animation: heartPop .4s ease;
}

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

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

    .listingAnnonces .one .carousel {
        height: 30vmin;
    }
}

/* --- 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 {
        /* 60px = zone de la .description (absolute, bottom:0, fond opaque) + 12px de
           marge de securite : sans elle le bas du prix (.content-2) est tangent a la
           box et se fait masquer par son fond opaque quand la police a un descent plus
           grand (cas Firefox/Windows : prix « coupe » verticalement). */
        padding-bottom: 72px;
    }

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

    /* Controls : caches par defaut, 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 limitee 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%, 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;
    }
}