/* Styles pour le logo */
.logo img {
    max-width: 100px; /* Limite la largeur maximale du logo */
    height: auto; /* Ajuste la hauteur automatiquement pour conserver les proportions */
    margin-left: 20px; /* Ajoute une marge à gauche du logo */
}

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

.title0 h1 {
    color: rgba(0, 0, 0, 0.6); /* Applique une couleur de texte avec une légère transparence */
}

.title0 h1::after {
    content: ""; /* Crée un élément pseudo pour ajouter une ligne sous le titre */
    height: 4px; /* Définit la hauteur de la ligne */
    width: 230px; /* Définit la largeur de la ligne */
    background-color: #046A38; /* Applique une couleur de fond verte à la ligne */
    display: block; /* Rend le pseudo-élément un bloc pour qu'il occupe toute la largeur disponible */
    margin: 10px auto 0; /* Centre la ligne horizontalement et ajoute une marge en haut */
}

/* Style des sections */
.section {
    display: flex; /* Utilise un modèle flexbox pour disposer les éléments en ligne */
    align-items: center; /* Centre verticalement les éléments de la section */
    padding: 50px; /* Ajoute une marge intérieure autour de la section */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
}

/* Style pour la première section (sectionG) */
.sectionG {
    background-color: rgba(177, 204, 86, 0.7); /* Applique une couleur de fond avec transparence */
    height: auto; /* La hauteur de la section s'adapte au contenu */
}

/* Style pour les conteneurs d'images */
.imageG, .imageD {
    flex: 1; /* Les conteneurs d'images prennent chacun la moitié de l'espace disponible */
    display: flex; /* Utilise flexbox pour centrer l'image à l'intérieur du conteneur */
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
}

/* Style pour les images */
.imageG img, .imageD img {
    width: 100%; /* L'image occupe toute la largeur du conteneur */
    height: 300px; /* Fixe la hauteur de l'image */
    object-fit: cover; /* Recadre l'image pour remplir le conteneur tout en maintenant les proportions */
    border-radius: 8px; /* Ajoute un léger arrondi aux coins de l'image */
}

/* Style spécifique pour les images d'environnement */
.environnement-img {
    width: 100%; /* L'image occupe toute la largeur du conteneur */
    height: 300px; /* Fixe la hauteur de l'image */
    object-fit: cover; /* Recadre l'image pour remplir le conteneur tout en maintenant les proportions */
    border-radius: 5px; /* Ajoute un léger arrondi aux coins de l'image */
}

/* Style pour le texte */
.text {
    flex: 1; /* Le texte occupe la moitié de l'espace disponible dans la section */
    padding: 50px; /* Ajoute une marge intérieure autour du texte */
    color: rgba(0, 0, 0, 0.6); /* Applique une couleur de texte avec une légère transparence */
    text-align: left; /* Aligne le texte à gauche */
}

.text h2 {
    font-size: 28px; /* Définit la taille de la police pour les titres */
}

.text p {
    font-size: 20px; /* Définit la taille de la police pour les paragraphes */
    line-height: 1.2; /* Définit l'espacement des lignes dans les paragraphes */
}

/* Styles pour la version mobile (responsive) */
@media (max-width: 768px) and (max-width: 1024px) {
    /* Ajustements pour les petits écrans */
    .logo {
        max-width: 70px; /* Réduit la largeur maximale du logo */
        height: auto; /* Conserve les proportions du logo */
        margin-left: 10px; /* Réduit la marge à gauche du logo */
        margin-top: 10px; /* Ajoute une petite marge en haut du logo */
        margin-bottom: 10px; /* Ajoute une petite marge en bas du logo */
    }

    .logo img {
        width: 100%; /* Le logo occupe toute la largeur disponible */
    }

    .title0 {
        font-size: 12px; /* Réduit la taille de la police pour le texte de la section title0 */
    }

    .text h2 {
        font-size: 20px; /* Réduit la taille de la police pour les titres */
    }

    .text p {
        font-size: 10px; /* Réduit la taille de la police pour les paragraphes */
    }

    .section {
        flex-direction: column; /* Dispose les éléments de la section en colonne pour les petits écrans */
    }

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

    .imageG, .imageD {
        max-width: 100%; /* Les conteneurs d'images prennent toute la largeur disponible */
        padding: 0px; /* Retire la marge intérieure des conteneurs d'images */
    }

    .text {
        max-width: 100%; /* Le texte prend toute la largeur disponible */
        padding: 20px; /* Réduit la marge intérieure autour du texte */
        text-align: center; /* Centre le texte pour une meilleure lisibilité sur petit écran */
    }
}