/* Optimisation globale de la page Nos Réalisations */
.page-id-168,
.page-slug-nos-realisations,
.page-template-default {
    /* 1. Introduction élégante */
    .air-one-premium-banner {
        background: linear-gradient(135deg, #005f73 0%, #003f4f 100%) !important;
        border-radius: 8px;
        padding: 25px 20px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 25px !important;
        text-align: center;
    }

    /* 2 & 3. Réalisations Climatisation & Plomberie (Photos homogènes) */
    .swiper-slide .swiper-container-outer img,
    .wp-block-gutsliders-photo-carousel img {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 8px !important;
    }

    /* 4. Responsive Mobile (320px - 430px) */
    @media screen and (max-width: 480px) {
        body, html {
            overflow-x: hidden !important;
        }

        /* Centrer parfaitement le carrousel Swiper et ses slides */
        .wp-block-gutsliders-photo-carousel {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            padding: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .wp-block-gutsliders-photo-carousel .swiper {
            width: 100% !important;
            max-width: 320px !important; /* Taille idéale pour rester centré sur tous les mobiles */
            margin: 0 auto !important;
            overflow: visible !important; /* Permet un effet propre */
        }

        .wp-block-gutsliders-photo-carousel .swiper-wrapper {
            display: flex !important;
            align-items: center !important;
        }

        .wp-block-gutsliders-photo-carousel .swiper-slide {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

        .wp-block-gutsliders-photo-carousel .swiper-container-outer {
            width: 290px !important; /* Largeur de la photo respectant l'écran */
            max-width: 100% !important;
            margin: 0 auto !important;
            display: flex !important;
            justify-content: center !important;
        }

        .wp-block-gutsliders-photo-carousel .swiper-container-outer img {
            width: 290px !important;
            height: 220px !important;
            object-fit: cover !important;
            border-radius: 8px !important;
            margin: 0 auto !important;
        }

        /* Alignement des flèches sous chaque photo au centre */
        .wp-block-gutsliders-photo-carousel .gutslider-nav {
            display: flex !important;
            justify-content: center !important;
            gap: 20px !important;
            margin-top: 15px !important;
            position: relative !important;
            bottom: auto !important;
            left: auto !important;
            transform: none !important;
            width: 100% !important;
        }

        .wp-block-gutsliders-photo-carousel .swiper-button-prev,
        .wp-block-gutsliders-photo-carousel .swiper-button-next {
            position: static !important;
            margin: 0 !important;
        }

        h1, h2 {
            font-size: 1.5rem !important;
            line-height: 1.3 !important;
            text-align: center !important;
            margin-left: 10px !important;
            margin-right: 10px !important;
        }

        p {
            font-size: 0.95rem !important;
            line-height: 1.5 !important;
            text-align: center !important;
            margin-left: 15px !important;
            margin-right: 15px !important;
        }
    }

    /* 6. Appels à l'action centrés et fluides */
    .wp-block-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        flex-direction: row !important;
        margin: 30px auto !important;
        width: 100% !important;
    }

    @media screen and (max-width: 480px) {
        .wp-block-buttons {
            flex-direction: column !important;
            width: 100% !important;
            padding: 0 20px !important;
            box-sizing: border-box !important;
        }
        .wp-block-button {
            width: 100% !important;
        }
        .wp-block-button__link {
            width: 100% !important;
            display: block !important;
            text-align: center !important;
        }
    }
}