/* Conteneur principal */
.header-containermentionleg {
    display: flex;
    justify-content: space-between; /* Aligne les sections gauche et droite */
    align-items: flex-start;
    gap: 50px; /* Espacement entre les deux blocs */
    padding: 30px 10%;
    background-color: #ffffff;
    flex-wrap: wrap; /* Permet un retour à la ligne si nécessaire */
}

/* Conteneurs individuels */
.mention-container, .contact-container {
    flex: 1 1 45%; /* Taille flexible pour bien répartir l'espace */
    min-width: 350px; /* Assure une bonne lisibilité même sur petits écrans */
    max-width: 500px; /* Évite un étalement excessif */
}

/* Titres alignés */
.mention-container h3, .contact-container h3 {
    font-size: 22px;
    margin-bottom: 15px;
    text-align: left; /* Centrer les titres */
}

/* Alignement des paragraphes */
.mention-container p {
    font-size: 16px;
    line-height: 1.6;
    text-align: left; /* Alignement naturel du texte */
}

/* Informations de contact */
.contact-info {
    display: flex;
    align-items: center; /* Aligne les logos et les textes */
    gap: 12px;
    margin-bottom: 12px;
    justify-content: flex-start; /* Alignement à gauche */
}

/* Style des icônes */
.contact-info img {
    width: 28px;
    height: 28px;
}

/* Liens de contact */
.contact-info a {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

.contact-info a:hover {
    color: #0077b5;
}

/* Adaptation aux petits écrans */
@media screen and (max-width: 768px) {
    .header-containermentionleg {
        flex-direction: column; /* Passe en colonne sur petit écran */
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    
    .mention-container, .contact-container {
        max-width: 90%; /* Réduction de la largeur pour éviter un aspect trop large */
    }
}