.elementor-12193 .elementor-element.elementor-element-61514c8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:3%;--padding-bottom:0%;--padding-left:10%;--padding-right:10%;}.elementor-12193 .elementor-element.elementor-element-10cd92f{padding:0% 0% 3% 0%;text-align:center;}/* Start custom CSS for shortcode, class: .elementor-element-a1614b1 *//* ---------- Grille et filtres ---------- */
.realisations-filters {
    margin-bottom: 2% !important;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    font-size: 1.6rem;
}
.realisations-filters .filter-btn {
    cursor: pointer;
    font-family: "the-seasons", Sans-serif;
    font-style: normal;
    transition: color .3s ease;
}
.realisations-filters .filter-btn:hover {
    color: var(--e-global-color-primary);
}
.realisations-filters .filter-btn.active {
    color: var(--e-global-color-primary);
    font-family: "the-seasons", Sans-serif;
}

/* ---------- Ligne d'items ---------- */
.realisations-row {
    display: flex;
    gap: 40px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Chaque item occupe la moitié même si l'autre est masqué */
.realisation-item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 40px) / 2); /* largeur = moitié - gap */
    max-width: calc((100% - 40px) / 2);
    min-height: 0;
}



/* ---------- Miniature : ratio fixe 16:9 et images uniformes ---------- */
.realisation-thumb {
    width: 100%;
    height: 476px;
    overflow: hidden;
    background-color: #000;
    display: block;
    position: relative;


}

/* Fallback pour navigateurs sans support aspect-ratio */
.realisation-thumb--fallback {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.realisation-thumb--fallback > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;


}

.realisation-thumb img:hover {
    transform: scale(1.1);
}


/* Images : couvrir et garder la même taille visuelle */
.realisation-thumb img {
    width: 100%;
    height: 476px;
    display: block;
    object-fit: cover;
        transform: scale(1);
    transition: transform .3s ease;
}

/* ---------- Titre et spacing ---------- */
h3.realisation-title {
    margin-top: 20px !important;
    text-transform: normal !important;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
    
    .realisations-filters {
        margin-bottom: 25% !important;
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
        font-size: 1.6rem;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        
    }
    
    .realisations-row {
        flex-direction: column;
    }

    .realisation-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .realisation-thumb img{
        aspect-ratio: 16 / 9;
    }
    
.realisation-thumb img:hover {
    transform: scale(1);
}
}/* End custom CSS */