/* Styles pour le logo */
.logo img {
    max-width: 300px; /* Ajuste la largeur maximale du logo à 300px */
    height: auto; /* Maintient les proportions du logo */
    margin-left: 20px; /* Ajoute une marge à gauche du logo */
    margin-top: 10px; /* Ajoute une marge en haut du logo */
    margin-bottom: 10px; /* Ajoute une marge en bas du logo */
}

/* Styles pour la section avec l'arrière-plan d'image */
section {
    background: url(../Images/Tableaux/IMG-20240801-WA0009.jpg) no-repeat; /* Image de fond sans répétition */
    background-position: 50% 35%; /* Centre horizontalement et aligne l'image à 35% verticalement */
    background-size: cover; /* Ajuste l'image de fond pour couvrir la section entière */
    height: calc(60vh - 90px); /* Hauteur de la section calculée en fonction de la hauteur de la fenêtre */
}

/* Styles pour les sections */
.section {
    background-color: white; /* Couleur de fond blanche pour les sections */
}

/* Styles pour la section title0 */
.title0 {
    background-color: white; /* Couleur de fond blanche */
    text-align: center; /* Centre le texte horizontalement */
    padding-top: 50px; /* Ajoute une marge intérieure en haut */
    font-size: 20px; /* Taille de la police */
}

.title0 h1 {
    color: rgba(0, 0, 0, 0.6); /* Couleur du texte avec une opacité de 60% */
}

.title0 p {
    padding-top: 20px; /* Marge intérieure en haut du paragraphe */
    padding-bottom: 50px; /* Marge intérieure en bas du paragraphe */
    margin-left: 50px; /* Marge à gauche du paragraphe */
    margin-right: 50px; /* Marge à droite du paragraphe */
    text-align: center; /* Centre le texte horizontalement */
    color: rgba(0, 0, 0, 0.6); /* Couleur du texte avec une opacité de 60% */
    font-size: 20px; /* Taille de la police */
}

.title0 h1::after {
    content: ""; /* Ajoute un pseudo-élément vide après le titre h1 */
    height: 4px; /* Hauteur de la ligne décorative */
    width: 230px; /* Largeur de la ligne décorative */
    background-color: #046A38; /* Couleur verte de la ligne */
    display: block; /* Affiche le pseudo-élément comme un bloc */
    margin: auto; /* Centre la ligne horizontalement */
}

/* Styles pour la section services */
.services {
    width: 85%; /* La section services prend 85% de la largeur disponible */
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    justify-content: space-between; /* Espace les éléments de manière équitable */
    align-items: center; /* Centre verticalement les éléments */
    margin: 75px auto; /* Ajoute des marges extérieures pour centrer horizontalement */
    text-align: center; /* Centre le texte dans la section */
}

/* Styles pour les cartes (cards) de services */
.card {
    width: 100%; /* Les cartes prennent 100% de la largeur disponible */
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    justify-content: space-between; /* Espace les éléments de manière équitable */
    align-items: center; /* Centre verticalement les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    margin: 0px 20px; /* Ajoute des marges horizontales de 20px */
    padding: 20px 20px; /* Ajoute des marges intérieures de 20px */
    background-color: #efefef; /* Couleur de fond gris clair */
    border-radius: 10px; /* Coins arrondis des cartes */
    cursor: pointer; /* Change le curseur en main au survol */
    margin-bottom: 20px; /* Ajoute une marge en bas des cartes */
}

/* Styles pour les icônes des cartes */
.card .icon {
    font-size: 35px; /* Taille des icônes */
    margin-bottom: 10px; /* Marge en bas des icônes */
}

/* Styles pour le titre h2 des cartes */
.card h2 {
    font-size: 28px; /* Taille de la police */
    color: #046A38; /* Couleur verte */
    margin-bottom: 20px; /* Marge en bas du titre */
}

/* Styles pour le texte des cartes */
.card p {
    font-size: 17px; /* Taille de la police */
    margin-bottom: 30px; /* Marge en bas du paragraphe */
    line-height: 1.5; /* Hauteur de ligne pour améliorer la lisibilité */
    color: rgba(0, 0, 0, 0.6); /* Couleur du texte avec une opacité de 60% */
}

/* Styles pour les listes à puces */
.bullet-list {
    list-style-type: disc; /* Utilise des puces rondes */
}

.bullet-list li {
    margin-bottom: 10px; /* Marge en bas de chaque élément de la liste */
    color: rgba(0, 0, 0, 0.6); /* Couleur du texte avec une opacité de 60% */
}

/* Styles pour les boutons */
.button {
    font-size: 15px; /* Taille de la police */
    text-decoration: none; /* Supprime la décoration du texte */
    color: #fff; /* Couleur blanche du texte */
    background-color: #046A38; /* Couleur verte de fond */
    padding: 8px 12px; /* Marges intérieures */
    border-radius: 5px; /* Coins arrondis des boutons */
    letter-spacing: 1px; /* Espacement entre les lettres */
}

/* Styles pour les lignes de services */
.services .row {
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    flex-wrap: wrap; /* Permet aux éléments de passer sur la ligne suivante */
    justify-content: space-between; /* Espace les éléments de manière équitable */
    gap: 20px; /* Ajoute de l'espace entre les éléments */
    margin: 0 -10px; /* Marges horizontales négatives pour compenser l'espacement */
    align-items: center; /* Centre verticalement les éléments */
}

/* Styles pour les colonnes de services */
.services .col {
    flex: 0 0 32%; /* La colonne prend 32% de la largeur disponible */
    max-width: 32%; /* Largeur maximale de 32% */
    padding: 0 10px; /* Marges intérieures horizontales */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    margin-bottom: 20px; /* Marge en bas des colonnes */
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: center; /* Centre horizontalement les éléments */
    justify-content: center; /* Centre verticalement les éléments */
}

/* Styles pour les images dans les colonnes de services */
.services .col img {
    margin-top: 0; /* Supprime la marge en haut des images */
    display: block; /* Affiche les images comme blocs */
    margin-left: 50px; /* Marge à gauche des images */
    margin-right: 50px; /* Marge à droite des images */
    width: 95%; /* Largeur de 95% de la colonne */
    height: 250px; /* Hauteur fixe de 250px */
    object-fit: cover; /* Remplissage du conteneur sans déformation */
    border-radius: 5px; /* Coins arrondis des images */
}

/* Styles pour la section partenaires */
.partner {
    background-color: white; /* Couleur de fond blanche */
    text-align: center; /* Centre le texte horizontalement */
    padding-top: 6px; /* Marge intérieure en haut */
    padding-bottom: 5px; /* Marge intérieure en bas */
    font-size: 30px; /* Taille de la police */
    margin-bottom: 0px; /* Pas de marge en bas */
}

.partner h2 {
    color: rgba(0, 0, 0, 0.6); /* Couleur du texte avec une opacité de 60% */
}

.partner h2::after {
    content: ""; /* Ajoute un pseudo-élément vide après le titre h2 */
    height: 4px; /* Hauteur de la ligne décorative */
    width: 230px; /* Largeur de la ligne décorative */
    background-color: #046A38; /* Couleur verte de la ligne */
    display: block; /* Affiche le pseudo-élément comme un bloc */
    margin: auto; /* Centre la ligne horizontalement */
}

/* Styles pour le séparateur */
.separator {
    display: flex; /* Utilise une disposition en ligne pour le séparateur */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: center; /* Centre horizontalement */
    height: 10vh; /* Hauteur du séparateur pour centrer verticalement */
    background-color: #046A38; /* Couleur de fond du séparateur */
}

.separator-text {
    font-size: 30px; /* Taille de police du texte "Nos Services" */
    color: white; /* Couleur du texte */
}

/* Styles pour la galerie d'images */
.gallery {
    width: 890px; /* Largeur de la galerie d'images */
    display: flex; /* Utilise une disposition en ligne pour la galerie */
    transition: transform 0.5s ease-in-out; /* Animation lors de la transformation */
}

.gallery-wrap {
    position: relative;
    overflow: hidden; /* Cache les parties débordantes de la galerie */
    max-width: 950px; /* Largeur maximale de la galerie */
    margin: auto; /* Centre horizontalement la galerie */
    padding: 35px; /* Ajoute une marge intérieure */
}

.gallery div {
    width: 100%; /* Largeur de 100% pour chaque conteneur d'images */
    display: grid; /* Utilise une disposition en grille pour les images */
    grid-template-columns: auto auto auto; /* Trois colonnes d'images côte à côte */
    grid-gap: 20px; /* Espacement entre les images */
    padding: 5px; /* Marge intérieure des conteneurs d'images */
    flex: none; /* Ne pas étirer les conteneurs d'images */
}

.gallery div img {
    width: 100%; /* Largeur de 100% pour les images */
    transition: transform 0.5s; /* Animation de transformation au survol des images */
}

/* Désactiver la barre de défilement Webkit */
.gallery::-webkit-scrollbar {
    display: none;
}

.gallery div img:hover {
    cursor: pointer; /* Change le curseur en main au survol */
    transform: scale(1.1); /* Agrandit l'image au survol */
}

/* Boutons de navigation */
#prevBtn {
    left: 10px; /* Positionne le bouton à gauche */
}

#nextBtn {
    right: 10px; /* Positionne le bouton à droite */
}
.carousel-btn i {
    font-size: 24px;
}

/* Styles pour les éléments du carrousel */
.carousel-item {
    min-width: 100%; /* Chaque élément prend 100% de la largeur du conteneur */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
    display: flex; /* Utilise une disposition en ligne pour les éléments */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    flex-direction: column; /* Aligne les éléments en colonne */
    margin-right: 20px; /* Marge à droite des éléments */
    margin-left: -10px; /* Marge à gauche des éléments */
}

.carousel-item span {
    display: flex; /* Utilise une disposition en ligne */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    margin: 20px; /* Marge autour des éléments */
}

.carousel-btn {
    position: absolute; /* Positionne les boutons de manière absolue */
    top: 50%; /* Centre verticalement les boutons */
    transform: translateY(-50%); /* Ajuste la position des boutons pour centrer parfaitement */
    background-color: rgba(255, 255, 255, 0.8);; /* Couleur de fond pour les boutons */
    border: none; /* Pas de bordure pour les boutons */
    padding: 10px;
    cursor: pointer; /* Change le curseur en main au survol */
    z-index: 10; /* Assure que les boutons sont au-dessus des autres éléments */
}

/* Styles pour la version mobile (responsive) */
@media (max-width: 768px) and (max-width: 1024px){
   
    .logo {
        max-width: 150px; /* Ajuste la largeur maximale du logo pour les petits écrans */
        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: 150px; /* Largeur spécifique pour les images du logo */
    }

    .title0{
        font-size: 15px;
    }
    .title0 p{
        font-size: 10px;
    }
    .separator-text{
        font-size: 25px;
    }
    .card h2{
        font-size: 20px;
    }

    .services .row {
        flex-direction: column; /* Aligne les services en colonne pour les petits écrans */
        max-width: 100%;
    }
    .services .col{
        display: contents;
    }
    .services .col ul{
        font-size: 10px;
    }
    .services .col img {
        width: 140px; /* Ajuste la largeur des images dans les services */
        height: 100px; /* Ajuste la hauteur des images dans les services */
    }

    .gallery {
        width: 325px; /* Réduit la largeur de la galerie pour les petits écrans */
    }

    .gallery div img {
        width: 100%; /* Les images prennent toute la largeur disponible */
    }
}


/*Responsive Ipad Air*/
@media (min-width: 810px) and (max-width: 1080px){
    .services .row {
        flex-direction: column; /* Aligne les services en colonne pour les écrans de taille intermédiaire */
    }

    .services .col img {
        width: 240px; /* Largeur spécifique pour les images des services */
        height: 200px; /* Hauteur spécifique pour les images des services */
    }

    .gallery {
        width: 750px; /* Ajuste la largeur de la galerie pour iPad Air */
    }

    .gallery div img {
        width: 80%; /* Réduit la largeur des images pour iPad Air */
    }
}
/*Responsive Ipad Mini*/
@media (min-width: 768px) and (max-width: 1024px){
    .services .row {
        flex-direction: column; /* Aligne les services en colonne pour iPad Mini */
    }

    .services .col img {
        width: 340px; /* Largeur spécifique pour les images des services */
        height: 300px; /* Hauteur spécifique pour les images des services */
    }

    .gallery {
        width: 750px; /* Largeur de la galerie pour iPad Mini */
    }

    .gallery div img {
        width: 80%; /* Réduit la largeur des images pour iPad Mini */
    }
}

/*Responsive Surface 7 pro & Ipad Pro*/
@media (min-width: 912px) and (max-width: 1368px){
    .services .row {
        flex-direction: column; /* Aligne les services en colonne pour Surface Pro et iPad Pro */
    }

    .services .col img {
        width: 240px; /* Largeur spécifique pour les images des services */
        height: 200px; /* Hauteur spécifique pour les images des services */
    }

    .gallery-wrap {
        max-width: 750px; /* Largeur maximale pour le conteneur de la galerie */
    }

    .gallery {
        width: 700px; /* Largeur de la galerie pour Surface Pro et iPad Pro */
    }

    .gallery div img {
        width: 100%; /* Les images prennent toute la largeur disponible */
    }   
}

/*Responsive Galaxy a51/a71*/
@media (min-width: 412px) and (max-width: 914px){
    .gallery-wrap {
        max-width: 800px; /* Largeur maximale pour le conteneur de la galerie */
    }

    .gallery {
        width: 350px; /* Largeur de la galerie pour Galaxy A51/A71 */
    }

    .gallery div img {
        width: 100%; /* Les images prennent toute la largeur disponible */
    } 
}