body{
    background-color: #f4f4f9;
}
/* Conteneur des liens */
.link-container {
    display: flex; /* Active le mode flexbox */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Aligne les éléments verticalement */
    gap: 20px; /* Ajoute un espacement entre les éléments */
    flex-wrap: wrap; /* Permet aux éléments de se répartir sur plusieurs lignes si nécessaire */
    margin-bottom: 20px; /* Espacement sous le conteneur */
}

/* Liens dans le conteneur */
.link-container a {
    text-align: center; /* Centre le texte sous l'image */
    text-decoration: none; /* Supprime le soulignement des liens */
    color: #3e3e3e; /* Couleur gris foncé pour les liens */
    font-size: 16px; /* Taille du texte sous l'icône */
    font-weight: bold; /* Met le texte en gras pour une meilleure visibilité */
    transition: transform 0.3s ease; /* Transition douce pour un effet au survol */
}

/* Effet de survol sur les liens */
.link-container a:hover {
    transform: scale(1.1); /* Agrandissement des liens au survol pour attirer l'attention */
}

/* Images dans le conteneur */
.link-container img {
    display: block;
    margin: 0 auto;
    border-radius: 50%; /* Ajoute des bords arrondis aux images */
    transition: transform 0.3s ease; /* Transition pour l'effet d'agrandissement */
}

/* Effet de zoom sur les images au survol */
.link-container img:hover {
    transform: scale(1.1); /* Effet zoom sur les images au survol */
}

/* Responsive */
@media screen and (max-width: 768px) {
    body {
        flex-direction: column; /* Met tout le contenu en colonne sur les petits écrans */
        justify-content: flex-start;
    }

    .link-container {
        flex-direction: column; /* Les liens seront empilés verticalement */
        gap: 15px; /* Réduit l'écart entre les éléments */
        margin-bottom: 30px; /* Plus d'espace sous les icônes */
    }

    /* Ajuste la taille des icônes sous le titre */
    .link-container a {
        font-size: 14px; /* Réduit la taille du texte sous les icônes */
    }

    .link-container img {
        width: 50px; /* Réduit la taille des icônes sur les petits écrans */
        height: 50px; /* Garde les icônes carrées */
    }

    footer {
        position: static; /* Footer reste en bas de la page sans se fixer */
    }

    footer p {
        font-size: 1em; /* Réduit la taille de police des paragraphes dans le footer */
       
    }
}