/* Footer */
.site-footer {
    /* Marge et padding inchangés */
    margin-top: 40px;
    padding: 18px 5%;
    color: rgba(255, 255, 255, 0.8);
    background:rgba(13, 15, 30, 0.956)
}

.site-footer .footer-inner {
    /* Propriétés pour l'affichage par défaut (grands écrans) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-footer .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.site-footer .socials a {
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 1.5em; /* Agrandit l'icône pour une meilleure 'touchability' */
}

/* ------------------------------------ */
/* MEDIA QUERIES              */
/* ------------------------------------ */

/* Styles appliqués aux écrans d'une largeur maximale de 768px (tablettes et mobiles) */
@media (max-width: 768px) {
    .site-footer .footer-inner {
        /* Changement majeur : empiler les éléments verticalement */
        flex-direction: column;
        
        /* Centrer le texte et les éléments */
        text-align: center;
        
        /* Ajout d'un petit espacement vertical entre les éléments empilés */
        gap: 15px; 
    }
    
    /* Centrer les icônes sociales pour qu'elles restent sous le reste */
    .site-footer .socials {
        /* S'assure que le bloc social prend la largeur pour centrer son contenu */
        width: 100%; 
    }
    
    /* Supprimer la marge à gauche de la première icône sociale si vous en avez plusieurs */
    .site-footer .socials a {
        margin: 0 5px; /* Utiliser une petite marge horizontale pour espacer les icônes */
    }

    /* Le bloc copyright peut avoir besoin d'un espacement supplémentaire ou d'une taille de police ajustée */
    .site-footer .copyright {
        font-size: 0.9em;
    }

    /* Le bloc marque peut avoir un alignement ou un espacement ajusté si nécessaire */
    .site-footer .brand {
        justify-content: center; /* Assure que le logo et le texte sont centrés ensemble */
    }
}