.elementor-17069 .elementor-element.elementor-element-bc663bc:not(.elementor-motion-effects-element-type-background), .elementor-17069 .elementor-element.elementor-element-bc663bc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F8F6;}.elementor-17069 .elementor-element.elementor-element-bc663bc > .elementor-container{min-height:840px;}.elementor-17069 .elementor-element.elementor-element-bc663bc{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-17069 .elementor-element.elementor-element-bc663bc > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-17069 .elementor-element.elementor-element-7b5bd8b{--spacer-size:70px;}.elementor-17069 .elementor-element.elementor-element-24990f56 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-17069 .elementor-element.elementor-element-24990f56:not(.elementor-motion-effects-element-type-background), .elementor-17069 .elementor-element.elementor-element-24990f56 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-17069 .elementor-element.elementor-element-24990f56{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:100px 0px 100px 0px;}.elementor-17069 .elementor-element.elementor-element-24990f56 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-17069 .elementor-element.elementor-element-6f62547c > .elementor-element-populated{padding:0px 0px 0px 35px;}.elementor-17069 .elementor-element.elementor-element-6d102321 .elementor-heading-title{font-size:45px;color:#ffffff;}.elementor-17069 .elementor-element.elementor-element-79e55883{font-size:16px;font-weight:300;line-height:1.8em;color:#686868;}@media(max-width:992px){.elementor-17069 .elementor-element.elementor-element-bc663bc > .elementor-container{min-height:602px;}.elementor-17069 .elementor-element.elementor-element-24990f56{padding:100px 25px 100px 25px;}}@media(max-width:768px){.elementor-17069 .elementor-element.elementor-element-24990f56{padding:50px 20px 50px 20px;}.elementor-17069 .elementor-element.elementor-element-6f62547c > .elementor-element-populated{padding:25px 0px 0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-6af5ce1 */.annonces-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    justify-content: center;
}

.annonce-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 300px;
    flex: 1 1 calc(25% - 20px); /* 4 cards par ligne */
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

.annonce-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.annonce-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}

.annonce-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.annonce-purpose {
    font-size: 0.9em;
    color: #fff;
    background-color: #0073aa;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    text-transform: capitalize;
}

.annonce-title {
    font-size: 1.25em;
    margin: 0;
    color: #333;
    line-height: 1.4;
}

.annonce-address {
    font-size: 0.9em;
    color: #777;
}

.annonce-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
}

/* Conteneur principal des annonces */
.annonces-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    justify-content: center;
}

/* Card des annonces */
.annonce-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 300px;
    flex: 1 1 calc(25% - 20px); /* 4 cards par ligne */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligne les éléments en haut et en bas */
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

.annonce-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Image dans la card */
.annonce-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Garde l'image proportionnée */
    border-bottom: 1px solid #ddd;
}

/* Contenu de la card */
.annonce-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Alignement et style des éléments */
.annonce-purpose {
    font-size: 0.9em;
    color: #fff;
    background-color: #0073aa;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.annonce-title {
    font-size: 1.25em;
    margin: 0;
    color: #333;
    line-height: 1.4;
}

.annonce-address {
    font-size: 0.9em;
    color: #777;
}

.annonce-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
    margin-top: auto; /* Pousse le prix en bas */
}

/* Bouton Réserver */
.annonce-button {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.annonce-button:hover {
    background-color: #005a87;
}

/* Responsivité pour les cards */
@media (max-width: 1024px) {
    .annonce-card {
        flex: 1 1 calc(33.333% - 20px); /* 3 cards par ligne */
    }
}

@media (max-width: 768px) {
    .annonce-card {
        flex: 1 1 calc(50% - 20px); /* 2 cards par ligne */
    }
}

@media (max-width: 480px) {
    .annonce-card {
        flex: 1 1 100%; /* 1 card par ligne */
    }
}




CSS 2 : 

/* Conteneur principal des annonces */
.annonces-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    justify-content: center;
}

/* Card des annonces */
.annonce-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Largeur pour 3 cartes par ligne */
    flex: 1 1 calc(33.333% - 20px); 
    max-width: 300px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

.annonce-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Image */
.annonce-card-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}

/* Contenu de la card */
.annonce-card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Éléments textuels */
.annonce-purpose {
    font-size: 0.9em;
    color: #fff;
    background-color: #0073aa;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.annonce-title {
    font-size: 1.25em;
    margin: 0;
    color: #333;
    line-height: 1.4;
}

.annonce-address {
    font-size: 0.9em;
    color: #777;
}

.annonce-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
    margin-top: auto; /* pousse le prix en bas du conteneur */
}

/* Bouton */
.annonce-button {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.annonce-button:hover {
    background-color: #005a87;
}

/* Responsivité */
@media (max-width: 1024px) {
    /* Ici, on peut laisser 3 cartes ou passer à 2 si on le souhaite */
    .annonce-card {
        flex: 1 1 calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .annonce-card {
        flex: 1 1 calc(50% - 20px); /* 2 cartes par ligne */
    }
}

@media (max-width: 480px) {
    .annonce-card {
        flex: 1 1 100%; /* 1 carte par ligne */
    }
}/* End custom CSS */