/* 
Theme Name: Hello Elementor Child
*/

.single-realisation {
    
    & #cta {
        display: none;
    }

    .max-w-470, .max-w-530 {
        @media (max-width: 1024px) {
            max-width: 700px!important;
        }
    }

    @media screen and (max-width: 500px) {
        & #nos-coordonnees {
            padding: 40px 20px!important;
            & > div:nth-child(4) {
                & > div:last-child {
                    & > div:last-child {
                        &  > div {
                            flex-direction: column!important;
                        }
                    }
                }
            }
        }
    }

}

.page-realisations,  .single-realisation{
    #filtres {
        & button.e-filter-item[aria-pressed="true"]{
            font-weight: 700;
        }
    }


    .max-w-440 {
        max-width: 440px;
    }

    .max-w-470 {
        max-width: 470px;
    }

    .max-w-530 {
        max-width: 530px;
    }

    .max-w-650 {
        max-width: 650px!important;
    }
    
    .elementor-loop-container.elementor-grid {
        & > div.realisation.type-realisation {
            & .info-container {
                & > div.elementor-element {
                    @media (max-width: 767px) {
                        padding: 20px 20px 48px!important;
                    }
                }
                & .elementor-heading-title {
                    @media (max-width: 767px) {
                        font-size: 2rem!important;
                    }
                }
                
            }
            &  .realisation-fullwidth > div > div {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));
            }
            &:nth-of-type(even) {
                .realisation-fullwidth {
                    & > div > div {
                        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%);
                    }
                    & .info-container {
                        align-items: flex-start!important;
                        & > div {
                            border-radius: 0!important;
                            border-top-right-radius: 20px!important;
                            border-bottom-right-radius: 20px!important;
                        }
                    }
                }
            }
        }
    } 


    #carousel-certification {
        & .swiper-slide {
            min-width: 200px!important;
    
            @media (max-width: 1024px) {
                max-width: 200px!important;
            }
        }
    
        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 75px;
            top: 0;
            height: 100%;
            z-index: 2;
            background: #262626;
        }
    
        &::before {
            left: 0;
            mask-image: linear-gradient(to right, #262626 0px, transparent 50px);
            -webkit-mask-image: linear-gradient(to right, #262626 0px, transparent 50px);
        }
    
        &::after {
            right: 0;
            mask-image: linear-gradient(to left, #262626 0px, transparent 50px);
            -webkit-mask-image: linear-gradient(to left, #262626 0px, transparent 50px);
        }
    }

}


.realisation-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.realisation-grid__item {
	display: block;
	overflow: hidden;
	line-height: 0;
}
.realisation-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3; /* hauteurs uniformes */
	transition: transform .3s ease;
}
.realisation-grid__item:hover img {
	transform: scale(1.05);
}
@media (max-width: 600px) {
	.realisation-grid { grid-template-columns: 1fr; }
}

.realisation-grid__item.is-hidden { display: none; }

.realisation-grid__more {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 35px auto 0;

    border-radius: 300px;
    border: 2px solid  #0D0D0D;
    background: #F2F2F2;
	transition: opacity .2s ease;

    color: #262626;
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    &:hover {
        background-color: var(--e-global-color-primary);
        color: #fff;
    }
}
.realisation-grid__more:hover { opacity: .85; }

.realisation-grid__item {
	transition: opacity .45s ease, transform .45s ease;
}
.realisation-grid__item.is-hidden { display: none; }
.realisation-grid__item.is-entering {
	opacity: 0;
	transform: translateY(16px);
}