@charset "utf-8";

/*
===================================================================
    PAGE D'ACCUEIL
    Reprise des blocs de l'ancien site : bandeaux pleine largeur
    bleu/vert, titres de rubrique a filet colore, bouton « Voir tous »
    en 4e colonne du listing, chiffres cles, equipe.
===================================================================
*/

/* ===============================
 *  INTRODUCTION
=============================== */
.home-intro {
    margin-bottom: var(--space-5);
}

/* ===============================
 *  BANDEAUX PLEINE LARGEUR
    L'ancien site les obtenait avec `.bg-full-width:before` et des calc()
    par breakpoint. Ici la section deborde deja du conteneur : un simple
    fond suffit.
=============================== */
.home-band {
    padding: var(--space-5) 0;
    margin-bottom: var(--space-5);
    color: #FFF;
}

.home-band--primary {
    background-image: linear-gradient(to right top, var(--primary-light), var(--primary-main), var(--primary-x-dark));
}

/* Degrade jaune -> vert de l'ancien site, a l'identique */
.home-band--success {
    background-image: linear-gradient(to right top, var(--gradient-jaune), var(--gradient-vert));
}

.home-band h3 {
    margin-top: 0;
    color: #FFF;
}

/* Liens d'action « PROPRIETAIRE / LOCATAIRE ».
   `:link`/`:visited` repris de base.css, qui est plus specifique qu'une simple classe. */
.home-band-link,
.home-band-link:link,
.home-band-link:visited {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--primary-main);
    color: #FFF;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    transition: background var(--transition-base);
}

.home-band-link:hover,
.home-band-link:focus {
    background: var(--primary-x-dark);
    color: #FFF;
}

.home-band-link img {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    filter: var(--fill-svg-white);
}

/* Cartes « blog / conseils » du bandeau vert */
.home-card,
.home-card:link,
.home-card:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--space-4) var(--space-3);
    border: 1px solid #FFF;
    border-radius: var(--radius-xs);
    background: rgba(0, 0, 0, .2);
    color: #FFF;
    text-align: center;
    transition: transform var(--transition-medium), background var(--transition-base);
}

.home-card:hover,
.home-card:focus {
    background: rgba(0, 0, 0, .3);
    color: #FFF;
}

.home-card img {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    filter: var(--fill-svg-white);
}

.home-card strong {
    text-transform: uppercase;
}

.home-card p {
    margin-bottom: 0;
}

/* ===============================
 *  RUBRIQUES D'ANNONCES
    Titre a filet colore, une couleur par rubrique comme l'ancien site.
=============================== */
.home-listing {
    margin-bottom: var(--space-5);
}

.home-listing h2.title {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--neutral-light);
    text-transform: none;
}

.home-listing h2.title.orange {
    color: var(--focus-main);
    border-color: var(--focus-main);
}

.home-listing h2.title.vert {
    color: var(--success-main);
    border-color: var(--success-main);
}

.home-listing h2.title.bleu {
    color: var(--primary-main);
    border-color: var(--primary-main);
}

.home-listing h2.title.noir {
    color: var(--neutral-black);
    border-color: var(--neutral-black);
}

/* Bouton « Voir tous » : 4e colonne du listing, hauteur des vignettes */
.btnListNext,
.btnListNext:link,
.btnListNext:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 8rem;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-sm);
    color: #FFF;
    text-align: center;
    transition: filter var(--transition-base);
}

.btnListNext:hover,
.btnListNext:focus {
    color: #FFF;
    filter: brightness(.9);
}

.btnListNext strong {
    text-transform: uppercase;
}

.btnListNext.orange {
    background: var(--focus-main);
}

.btnListNext.vert {
    background: var(--success-main);
}

.btnListNext.bleu {
    background: var(--primary-main);
}

/* ===============================
 *  CHIFFRES CLES
=============================== */
.home-chiffres {
    margin-bottom: var(--space-5);
}

.chiffre-item {
    height: 100%;
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--neutral-2x-dark);
    border-radius: var(--radius-sm);
    text-align: center;
}

.chiffre-item .chiffre-valeur {
    display: block;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--focus-main);
}

.chiffre-item p {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: .938rem;
}

/* ===============================
 *  CALCULETTE + AVIS GOOGLE
=============================== */
.home-calculette,
.home-calculette:link,
.home-calculette:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--primary-2x-light);
    color: var(--primary-x-dark);
    text-align: center;
    transition: background var(--transition-base);
}

.home-calculette:hover,
.home-calculette:focus {
    background: #FFF;
    color: var(--primary-x-dark);
}

.home-calculette .h2 {
    margin-bottom: 0;
    color: inherit;
}

.home-btn-google,
.home-btn-google:link,
.home-btn-google:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    background: #FFF;
    color: var(--neutral-2x-dark);
}

.home-btn-google:hover,
.home-btn-google:focus {
    background: var(--primary-2x-light);
    color: var(--neutral-2x-dark);
}

/* ===============================
 *  EQUIPE
=============================== */
.home-equipe {
    margin-bottom: var(--space-5);
}

.home-equipe > p {
    margin-bottom: var(--space-5);
}

.equipe-item {
    text-align: center;
}

.equipe-item img {
    width: 100%;
    max-width: 220px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-xl);
    aspect-ratio: 1;
    object-fit: cover;
}

.equipe-item strong {
    display: block;
}

.equipe-item p {
    font-size: .938rem;
    margin-bottom: 0;
    /* les adresses e-mail debordent de la colonne en mobile */
    overflow-wrap: anywhere;
}

/*
===================================================================
    Medium devices (tablets, 768px and up)
===================================================================
*/
@media (min-width: 768px) {
    .btnListNext {
        min-height: 12rem;
    }
}

/*
===================================================================
    Large devices (desktop, 992px and up)
===================================================================
*/
@media (min-width: 992px) {
    /* 3 vignettes + le bouton « Voir tous » sur une seule ligne,
       comme l'ancien site. Les vignettes sont en col-lg-4 par defaut. */
    .listingAnnonces.has-cta .one {
        width: 25%;
    }

    .btnListNext {
        /* aligne le bouton sur la hauteur du carousel des vignettes */
        min-height: 30vmax;
    }
}