@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère la page d'accueil du site
 */

/*
==================================================
    BREAKPOINT BOOTSRAP 5.2
==================================================
    #X-Small devices (portrait phones, less than 576px)         // 320px
    #Small devices (landscape phones, 576px and up)             // 576px
    #Medium devices (tablets, 768px and up)                     // 768px
    #Large devices (desktops, 992px and up)                     // 992px
    #X-Large devices (large desktops, 1200px and up)            // 1200px+ > 1250 avec scrollbar
    #XX-Large devices (larger desktops, 1400px and up)          // 1400px+
*/

/*
===================================================================
===================================================================
===================================================================
    X-Small devices (portrait phones, less than 576px)   // 320px
===================================================================
===================================================================
===================================================================
    Pas besoin de déclarer de média queries
*/

.page.view.accueil [class*=container] > section.row {
    margin-bottom: 10vmax;
}

/* ===============================
 *  ENTETE
=============================== */
.entete {}

.entete a.btn {
    display: flex;
    color: #FFF;
    border-radius: var(--radius-sm);
    align-items: center;
    padding: 1rem;
    font-family: var(--font-bold);
    font-size: 1.313rem;
    box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}

.entete a.btn img {
    margin-right: 10px;
    width: 40px;
}

/* ===============================
 *  ENTETE Bloc 3 annonces mises en avant
=============================== */
.microListingAnnonces .one {
    color:#000;
    padding:20px 0;
    margin: 0;
    border-bottom: 1px solid var(--neutral-light);
}

.microListingAnnonces .one:first-child {
    padding-top: 0;
}

.microListingAnnonces .one:last-child {
    padding-bottom:0;
    border-bottom:none;
}

.microListingAnnonces .one .photo {
    display:flex;
    overflow: hidden;
    padding-left: 0;
    max-height: 100px;
}

.microListingAnnonces .one .photo img {
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.microListingAnnonces .one .content p {
    margin-bottom:0;
}

.microListingAnnonces .one .content p span {
    margin-right:8px;
    font-size:.813rem;
}

.microListingAnnonces .one .content p span.type {
    text-transform: capitalize;
}


/* ===============================
 *  SECTION ENGAGEMENTS
=============================== */
.img-engagements {
    margin-bottom: 2vmax;
}

/* ===============================
 *  SECTION FORCE GROUPE ERA
=============================== */
.img-schema-reseau-era {
    background: url("../img/schema-reseau-era.webp") no-repeat right bottom;
    background-size: 80%;
    padding-bottom: 20vmax !important;
    background-blend-mode: multiply;
}

/*
===================================================================
===================================================================
===================================================================
    #Small devices (landscape phones, 576px and up)     // 576px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 576px) {


}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Medium devices (tablets, 768px and up)             // 768px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 768px) {
.page.view.accueil body {
    background: url("../img/header-accueil.webp") no-repeat -5vmax top;
    background-size: 35vmin !important;
}

/* ===============================
 *  ENTETE
=============================== */
.entete a.btn {
    justify-content: center;
    flex-direction: column;
    padding-bottom: 4vmax;
    padding-top: 4vmax;
    text-align: center;
    line-height: 1.2;
}

.entete a.btn img {
    margin-bottom: 2vmax;
    margin-right: 0;
    width:60px;
}

/* ===============================
 *  SECTION ENGAGEMENTS
=============================== */
.container-fluid:has(.img-engagements) {
    position: relative;
    overflow: hidden;
}

.img-engagements {
    position: absolute;
    width: auto;
    height: 60%;
    top:20%;
    right: -10vmax;
    margin-bottom:0;
    max-width: 50%;
}

/* ===============================
 *  SECTION FORCE GROUPE ERA
=============================== */
.img-schema-reseau-era {
    background-size: 50%;
    background-position-y:center ;
    padding-bottom: 3rem !important;
}

}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    Large devices (desktops, 992px and up)             // 992px
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 992px) {
.page.view.accueil body {
    background-position: -10vmax top;
    background-size: 35vmax !important;
}

    .listingAnnonces .one .carousel {
        min-height:26vmin;
    }

/* ===============================
 *  SECTION LISTING BIENS
=============================== */
.page.view .listingAnnonces .one:nth-of-type(4) {
    display: none;
}


/* ===============================
 *  SECTION ENGAGEMENTS
=============================== */
.img-engagements {
    height: 80%;
    top:10%;
    right: -15vmax;
}

}/*/mediaquery*/


/*
===================================================================
===================================================================
===================================================================
    X-Large devices (large desktops, 1200px and up)    // 1200px+
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 1200px) {

/* ===============================
 *  ENTETE
=============================== */
.entete a.btn:hover {
    transform: scale(1.02);
    transition: all .2s ease-in-out;
    box-shadow: 0 6px 25px rgb(0 0 0 / 20%);
}

.entete a.btn:has(i):hover {
    background: var(--red-dark);
    color:#FFF !important;

}

}/*/mediaquery*/

/*
===================================================================
===================================================================
===================================================================
    XX-Large devices (larger desktops, 1400px and up)  // 1400px+
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 1400px) {

/* ===============================
 *  SECTION ENGAGEMENTS
=============================== */
.img-engagements {
    height: 120%;
    top:-10%;
}

}/*/mediaquery*/

/*
===================================================================
===================================================================
===================================================================
    XXX-Large devices (larger desktops, 1600px and up)  // 1600px+
===================================================================
===================================================================
===================================================================
*/
@media screen and (min-width: 1600px) {
.page.view.accueil body {
    background-position: -5vmax top;
    background-size: 28vmax;
}

}/*/mediaquery*/