/* Section principale */
.qui-je-suis-section {
    background-color: #0e0e0e; /* Fond noir */
    padding: 3rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border: 3px solid rgb(240, 156, 51); /* Bordure jaune */
    border-radius: 1rem;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin-top: 6rem;
}

/* Conteneur de la section */
.qui-je-suis-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    max-width: 1200px;
    position: relative;
    gap: 2rem;
}

/* Description */
.qui-je-suis-description {
    flex: 2;
    color: white; /* Texte blanc */
    font-size: 2rem;
    line-height: 1.8;
    position: relative;
    padding: 2rem;
    background-color: #1e1e1e;
    border-radius: 0.5rem;
    text-align: center; /* Centrer le texte */
}

/* Titre */
.qui-je-suis-description h2 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: rgb(240, 156, 51);
    font-family: 'Great Vibes', cursive;
}

/* Paragraphe */
#description-text p,
.qui-je-suis-description p {
    margin: 2rem 0; /* Espacement entre les paragraphes */
    text-align: center; /* Centrer le texte */
}

/* Partie cachée du texte */
/* Partie cachée du texte */
.more-text {
    display: none; /* Cacher le texte par défaut */
    color: white; /* Texte blanc */
    margin-top: 1rem;
    line-height: 1.8;
    overflow: hidden; /* Assurer que le texte ne dépasse pas */
    max-height: 0; /* Initialement caché */
    transition: max-height 0.5s ease, padding 0.5s ease; /* Transition pour l'expansion avec padding */
}

/* Affichage complet du texte */
.more-text.expanded {
    display: block; /* Assurer que le texte est visible */
    max-height: 5000px; /* Augmenter la hauteur maximale pour tout afficher */
    padding-bottom: 1rem; /* Ajouter du padding pour espacement */
}


/* Bouton "Voir plus" */
.toggle-button {
    background: none;
    border: none;
    color: rgb(240, 156, 51);
    font-size: 1.5rem;
    cursor: pointer;
    margin: 2rem auto; /* Centrer le bouton et ajuster les marges */
    display: block; /* Assurer que le bouton se comporte comme un bloc */
    transition: color 0.3s ease, transform 0.3s ease;
}

.toggle-button:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* Image */
.qui-je-suis-photo {
    flex: 1;
    max-width: 30%;
    height: auto;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid rgb(240, 156, 51);
    margin-left: auto;
    transition: transform 0.5s ease-in-out;
}

/* Image à l'intérieur du conteneur */
.qui-je-suis-photo img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Classe pour afficher le contenu au clic */
.show {
    opacity: 1;
    transform: translateY(0);
}

/* Conteneur de la photo */
.qui-je-suis-photo {
    flex: 1;
    max-width: 30%;
    height: auto;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid rgb(240, 156, 51);
    margin-left: auto;
    transition: transform 0.5s ease-in-out;
    display: flex;
    flex-direction: column; /* Colonne pour empiler la photo et les informations de contact */
    align-items: center; /* Centrer les éléments */
}

/* Informations de contact sous la photo */
.contact-info {
    display: flex;
    flex-direction: column; /* Colonne pour empiler les éléments */
    gap: 1rem; /* Espacement entre les éléments */
    margin-top: 1rem; /* Espace au-dessus du conteneur */
}

/* Éléments de contact */
.contact-item {
    display: flex;
    align-items: center; /* Aligner les éléments */
    gap: 0.5rem; /* Espacement entre l'icône et le texte */
}

/* Icônes de contact */
.contact-icon {
    width: 40px; /* Taille de l'icône */
    height: auto; /* Conserver les proportions */
}

/* Texte de contact */
.contact-text {
    color: white; /* Couleur du texte */
    font-size: 1.4rem; /* Taille de la police */
}


.maps-item{
    display: flex;
    align-items: center; /* Aligner les éléments */
    gap: 0.5rem; /* Espacement entre l'icône et le texte */
}

.imgmaps-icon{
    width: 55px; /* Taille de l'icône */
    height: auto; /* Conserver les proportions */
    position: relative;
    left: -0.4rem;
    top: -0.4rem;
}

.maps-text{
    color: white; /* Couleur du texte */
    font-size: 1.4rem; /* Taille de la police */
    position: relative;
    top: -0.4rem;
    left: -0.9rem;
}


@media (max-width: 1331px) {



    .maps-text {
        color: white;
        font-size: 1.2rem;
        position: relative;
        top: -0.4rem;
        left: -0.9rem;
    }


}



@media (max-width: 1213px) {



    .maps-text {
        color: white;
        font-size: 0.7rem;
        position: relative;
        top: -0.4rem;
        left: -0.9rem;
    }


}