/* Styles pour le logo */
.logo img {
    max-width: 100px; /* Ajustez la largeur du logo selon vos besoins */
    height: auto; /* Hauteur automatique pour conserver les proportions */
    margin-left: 20px; /* Marge à gauche du logo */
}

section{
    background: url(../Images/confiance.jpg) no-repeat;
    background-position: 50% 45%; /* Centre horizontalement et aligne en bas l'image de fond */
    background-size: cover;
    height: calc(60vh - 180px);
}

.title0{
    background-color: white;
    text-align: center;
    padding-top: 50px;
    font-size: 20px;
}
.title0 h1{
    color: rgba(0, 0, 0, 0.6);
}
.title0 h1::after{
    content: "";
    height: 4px;
    width: 230px;
    background-color: #046A38;
    display: block;
    margin: auto;
    margin-top: 10px;
}


/* Style de base pour la grille */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes par ligne */
    gap: 5px; /* Espacement entre les images */
    justify-content: center;
    margin: auto;
}

/* Style des éléments d'image */
.image-grid-item {
    width: 100%; /* Les images occupent toute la largeur de leur conteneur */
    height: auto; /* Ajustement automatique de la hauteur */
    justify-content: center;
    display: flex;
    margin-bottom: 30px;
    margin-top: 50px;
}

/* Style des images pour s'assurer qu'elles ne débordent pas de leur conteneur */
.image-grid-item img {
    max-width: 100%;
    max-height: 100%;
}


.bullet-list {
    list-style-type: disc; /* Utilise des puces rondes */
    margin-left: 94px;
    margin-top: 70px;
    margin-bottom: 70px;
    font-size: 25px;
}
.bullet-list li{
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.6);
}

.gallery{
    width: 900px;
    display: flex;
    overflow-x: scroll;
}
.gallery div{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 50px;
    padding: 10px;
    flex: none;
}
.gallery div img{
    width: 100%;
    transition: transform 0.5s;
}
.gallery::webkit-scrollbar{
    display: none;
}
.gallery-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8% auto;
}


.gallery div img:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.partner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}
.separator {
    height: 0px;
    background-color: #e7e7e7;
    margin: 20px auto;
}
.separator-text {
    font-size: 24px;
    color: white; /* Couleur du texte "Nos Services" */
}

.carousel-wrap {
    overflow: hidden;
    width: 100%;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.carousel-item {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.carousel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


.carousel-content .product-image{
    width: 800px; /* Définir une largeur fixe pour les images*/
    height: 450px; /* Définir une hauteur fixe pour les images*/
    object-fit: cover; /* Assurer que l'image s'adapte sans distorsion */
    margin: 0 auto; /* Centrer horizontalement l'image */
    display: block; /* Assurer que l'image est un bloc pour centrer correctement */ 
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

#prevBtn {
    left: 50px; /* Positionner le bouton précédent en dehors de la vue du carousel */
}

#nextBtn {
    right: 50px; /* Positionner le bouton suivant en dehors de la vue du carousel */
}

.carousel-btn i {
    font-size: 24px;
}

.slide {
    width: 100%;
    max-width:100%; /* Limite la largeur maximale du slide */
    margin: 20px auto;
    border: 1px solid #ccc; /* Bordure pour délimiter le slide */
    border-radius: 8px;
    overflow: hidden; /* Masque le débordement pour les éléments internes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce pour effet de profondeur */
}
.slide-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.slide-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 350px; /* Définit une hauteur fixe pour le slide */
}

.slide-left {
    display: flex;
    flex-direction: column; /* Aligne les logos en colonne */
    justify-content: center; /* Centre verticalement les logos */
    align-items: center; /* Centre horizontalement les logos */
    flex: 1; /* Laisse cet élément occuper l'espace restant */
    padding: 50px; /* Ajoute un peu de padding pour l'espacement */
}

.slide-left .logo {
    width: 150px; /* Largeur fixe pour les logos */
    margin-bottom: 50px; /* Espacement entre les logos */
}

.slide-right {
    flex: 2; /* Prend plus d'espace que la partie gauche */
    display: contents;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Fond blanc pour la section image */
}

.product-image {
    width: 800px; /* Définit la largeur fixe */
    height: 350px; /* Définit la hauteur fixe */
    object-fit: cover; /* Assure que l'image couvre entièrement sans déformer */
    display: block; /* Assure que l'image s'aligne correctement */
    margin: 0 auto; /* Centre l'image horizontalement */
}

.slide-left2 {
    flex: 2; /* Prend plus d'espace que la partie gauche */
    display: contents;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Fond blanc pour la section image */
}

.slide-right2{
    display: flex;
    flex-direction: column; /* Aligne les logos en colonne */
    justify-content: center; /* Centre verticalement les logos */
    align-items: center; /* Centre horizontalement les logos */
    flex: 1; /* Laisse cet élément occuper l'espace restant */
    padding: 50px; /* Ajoute un peu de padding pour l'espacement */
}
.slide-right2 .logo {
    width: 150px; /* Largeur fixe pour les logos */
    margin-bottom: 50px; /* Espacement entre les logos */
}

.slide-item figcaption {
    position: absolute; /* Positionne la légende absolument dans le conteneur */
    bottom: 0; /* Positionne la légende en bas de l'image */
    left: 0;
    width: 100%; /* Fait en sorte que la légende prenne toute la largeur de l'image */
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    color: white; /* Couleur du texte de la légende */
    text-align: center; /* Centre le texte de la légende */
    padding: 10px; /* Ajoute du padding autour du texte */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem; /* Ajuste la taille du texte */
    transition: opacity 0.3s ease-in-out; /* Ajoute une transition pour l'opacité */
    opacity: 0; /* Masque initialement la légende */
}

.slide-item .slide-content:hover figcaption {
    opacity: 1; /* Affiche la légende au survol */
}

/* Animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%); /* Commence à gauche */
        opacity: 0; /* Invisible au début */
    }
    to {
        transform: translateX(0); /* Fin à sa position normale */
        opacity: 1; /* Complètement visible */
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%); /* Commence à droite */
        opacity: 0; /* Invisible au début */
    }
    to {
        transform: translateX(0); /* Fin à sa position normale */
        opacity: 1; /* Complètement visible */
    }
}

.SlidetoLeft.in-view {
    animation: slideInLeft 1s ease-out forwards; /* Applique l'animation gauche */
    opacity: 1; /* Rendre visible */
}

.SlidetoRight.in-view {
    animation: slideInRight 1s ease-out forwards; /* Applique l'animation droite */
    opacity: 1; /* Rendre visible */
}

/* Média query pour rendre la grille responsive */
@media (min-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes par ligne pour les écrans larges */
    }
}

@media (min-width: 1200px) {
    .image-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes par ligne pour les écrans très larges */
    }
}



/* Styles pour la version mobile (responsive) */
@media (max-width: 768px) and (max-width: 1024px) {
    .logo {
        max-width: 70px;
        height: auto; /* Maintient les proportions du logo */
        margin-left: 10px; /* Ajuste la marge à gauche du logo */
        margin-top: 10px; /* Ajuste la marge en haut du logo */
        margin-bottom: 10px; /* Ajuste la marge en bas du logo */
    }
    .logo img{
        width: 100%;
    }
    .title0 {
        font-size: 15px;
    }
    #prevBtn {
        left: 5px; /* Ajustez pour les petits écrans */
    }
    #nextBtn {
        right: 5px; /* Ajustez pour les petits écrans */
    }
    .carousel-btn {
        font-size: 1.5em; /* Réduit la taille des boutons de carrousel */
        padding: 0 5px; /* Réduit le padding des boutons */
    }
    .carousel-content {
        flex-direction: column; /* Empile les éléments en colonne */
    }
    .slide-content {
        margin-top: -40px;
        flex-direction: row; /* Aligne les éléments en colonne */
    }
    .product-image {
        width: 50%; /* Ajuste la largeur des images */
        height: 265px; /* Maintient les proportions */
    }
    .slide-content .logo{
        width: auto; /* Ajuste la largeur des images */
    }
    .slide-item figcaption{
        bottom: 0; /* Positionne la légende en bas de l'image */
        opacity: 1;
    }
}
@media (min-width: 600px) and (max-width: 1280px){
    .slide-item figcaption{
        bottom: 0; /* Positionne la légende en bas de l'image */
        opacity: 1;
    }
}