.elementor-7052 .elementor-element.elementor-element-5461acb:not(.elementor-motion-effects-element-type-background), .elementor-7052 .elementor-element.elementor-element-5461acb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("http://localhost:85/derbigum/wp-content/uploads/2025/01/nos-references-banner.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-7052 .elementor-element.elementor-element-5461acb > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(270deg, #02010100 0%, #000000 80%);opacity:0.7;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7052 .elementor-element.elementor-element-5461acb > .elementor-container{min-height:600px;}.elementor-7052 .elementor-element.elementor-element-5461acb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-7052 .elementor-element.elementor-element-daffffb > .elementor-container{max-width:1400px;}.elementor-7052 .elementor-element.elementor-element-f7513cb{text-align:center;}.elementor-7052 .elementor-element.elementor-element-f7513cb .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:40px;font-weight:900;text-transform:uppercase;text-shadow:-6px 7px 5px rgba(0, 0, 0, 0.3);color:#FFFFFF;}.elementor-7052 .elementor-element.elementor-element-a30fcd4{--grid-template-columns:repeat(1, auto);--icon-size:18px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-7052 .elementor-element.elementor-element-a30fcd4 .elementor-widget-container{text-align:right;}.elementor-7052 .elementor-element.elementor-element-a30fcd4 .elementor-social-icon{background-color:#FFFFFF00;}.elementor-7052 .elementor-element.elementor-element-a30fcd4 .elementor-social-icon i{color:#FFFFFF;}.elementor-7052 .elementor-element.elementor-element-a30fcd4 .elementor-social-icon svg{fill:#FFFFFF;}.elementor-7052 .elementor-element.elementor-element-a3f5cc0 > .elementor-container{max-width:1400px;}.elementor-7052 .elementor-element.elementor-element-a3f5cc0{margin-top:30px;margin-bottom:30px;}@media(max-width:1024px){.elementor-7052 .elementor-element.elementor-element-5461acb > .elementor-container{min-height:550px;}.elementor-7052 .elementor-element.elementor-element-f7513cb .elementor-heading-title{font-size:35px;}}@media(max-width:767px){.elementor-7052 .elementor-element.elementor-element-5461acb > .elementor-container{min-height:450px;}.elementor-7052 .elementor-element.elementor-element-f7513cb .elementor-heading-title{font-size:24px;}}/* Start custom CSS for shortcode, class: .elementor-element-39598b2 *//* Grille principale : 3 colonnes par défaut sur PC */
.ref-single-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
}

/* Conteneur de chaque image */
.ref-gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    height: 280px; /* Hauteur fixe pour aligner parfaitement les photos */
    background-color: #f9f9f9;
}

.ref-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Image optimisée */
.ref-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre l'image proprement sans la déformer */
    display: block;
    transition: transform 0.4s ease;
}

/* Effet au survol (Overlay) */
.ref-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(252, 103, 26, 0.85); /* Utilisation de votre orange fétiche #fc671a avec opacité */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ref-gallery-icon {
    color: #ffffff;
    font-size: 24px;
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

/* Actions au survol */
.ref-gallery-item:hover .ref-gallery-img {
    transform: scale(1.08); /* Léger zoom sur la photo */
}

.ref-gallery-item:hover .ref-gallery-overlay {
    opacity: 1;
}

.ref-gallery-item:hover .ref-gallery-icon {
    transform: scale(1);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TOUS LES APPAREILS)
   ========================================================================== */

/* Tablettes (Paysage et Portrait) */
@media (max-width: 1024px) {
    .ref-single-gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Passe à 2 colonnes */
        gap: 15px;
    }
    .ref-gallery-item {
        height: 240px; /* Ajustement de la hauteur */
    }
}

/* Mobiles (Smartphones) */
@media (max-width: 767px) {
    .ref-single-gallery-grid {
        grid-template-columns: 100%; /* Passe à 1 seule colonne pleine largeur */
        gap: 15px;
    }
    .ref-gallery-item {
        height: 220px; /* Ajustement de la hauteur pour mobile */
    }
}/* End custom CSS */