/* CSS Document */
/*--couleur top abc--*/
.rstpl-top-position {
    background-color: var(--rsl-light);
    color: #000;
}


/* enleve espace entre lesrstp--*/
.rstpl-slideshow-position, .rstpl-slideshow-full-width-position, .rstpl-breadcrumbs-position, .rstpl-higher-position, .rstpl-higher-fluid-position, .rstpl-higher-full-width-position, .rstpl-before-content-position, .rstpl-all-content-position, .rstpl-after-content-position, .rstpl-middle-position, .rstpl-middle-fluid-position, .rstpl-middle-full-width-position, .rstpl-lower-position, .rstpl-lower-fluid-position, .rstpl-lower-full-width-position, .rstpl-bottom-position, .rstpl-bottom-fluid-position, .rstpl-bottom-full-width-position {
    margin-bottom: 1.25rem;
}



        /* Conteneur principal de la section des services */
        .services-section {
            max-width: 1100px;
            margin: 0 auto; /* Centre la section sur la page */
        }

        .services-section h3 {
            text-align: center;
            font-size: 2.5em; /* Taille de police plus grande et responsive */
            margin-bottom: 40px;
            color: #2c3e50;
        }

        /* Grille pour les cartes de service */
        .services-grid {
            display: flex;
            flex-direction: column; /* Les cartes sont en colonne sur mobile */
            gap: 30px; /* Espace entre les cartes */
        }

        /* ------------------- */
        /* STYLE D'UNE CARTE   */
        /* ------------------- */
        .service-card {
            display: flex;
            flex-direction: column; /* Image en haut, texte en bas sur mobile */
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden; /* Assure que l'image respecte les coins arrondis */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Style de l'image dans la carte */
        .service-card img {
            width: 50%; /* L'image prend toute la largeur de son conteneur */
            height: 220px; /* Hauteur fixe pour toutes les images */
            object-fit: cover; /* Recadre l'image pour remplir l'espace sans la déformer */
        }

        /* Contenu textuel de la carte */
        .service-content {
            padding: 25px;
        }

        .service-content h4 {
            margin-top: 0;
            font-size: 1.5em;
            color: #3498db;
        }
        
        .service-content ul {
            padding-left: 20px;
        }
        
        .service-content ul li {
            margin-bottom: 10px;
        }

        /* ------------------- */
        /* RESPONSIVITÉ        */
        /* ------------------- */

        /* Pour les écrans plus larges que 768px (tablettes et ordinateurs) */
        @media (min-width: 768px) {
            .service-card {
                flex-direction: row; /* Image à gauche, texte à droite */
            }

            /* Inverse l'ordre pour une carte sur deux pour un design plus dynamique */
            .service-card:nth-child(even) {
                flex-direction: row-reverse; /* Image à droite, texte à gauche */
            }
            
            .service-card img {
                width: 40%; /* L'image occupe 40% de la largeur de la carte */
                height: auto; /* La hauteur s'ajuste automatiquement */
            }
            
            .service-content {
                width: 60%;
            }
        }