footer {
    /* --- Style visuel (identique au header) --- */
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    filter: brightness(0.9);
    border-radius: 10px;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow:
        inset 0 0 2px 1px rgba(255, 255, 255, 0.05),
        0 0 10px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(0, 0, 0, 0.2);
        

    /* --- Positionnement et espacement --- */
    position: relative;
    z-index: 10;
    margin: 6rem 1rem 1rem 1rem;

    /* --- Styles internes --- */
    padding: 1rem;
    text-align: center;

    /* NOUVEAU : Gérer l'état initial pour l'animation */
    opacity: 0;
    transform: translateY(20px); /* Le footer commence légèrement plus bas */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    visibility: hidden; /* Le cacher complètement, y compris aux lecteurs d'écran */
}

/* NOUVEAU : Classe pour faire apparaître le footer */
footer.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* ... Le reste de vos styles pour la navigation, etc. ... */
/* L'ancien effet de reflet via pseudo-élément est complètement retiré */
footer::before,
footer:hover::before {
    display: none;
}

/* --- Styles de la navigation du footer --- */
footer nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer nav ul li {
    display: inline-block; /* Utiliser inline-block pour un meilleur contrôle */
    margin: 0 1rem;
}

footer nav ul li a {
    color: rgba(255, 255, 215, 0.8);
    text-decoration: none;
    transition: color 0.3s;
}

footer nav ul li a:hover {
    color: #cccccc; /* Léger changement de couleur au survol */
}

/* --- Styles pour les informations (copyright, etc.) --- */
footer .footer-info {
    margin-top: 1rem;
    opacity: 0.7;
    /* La taille de la police est maintenant gérée directement sur les paragraphes ci-dessous */
}

footer .footer-info p {
    margin: 0.2rem 0;
    /* On définit la taille par défaut pour le mobile, qui sera plus petite */
    font-size: 0.7rem;
}

footer {
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-hidden {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none; /* Empêche toute interaction quand il est caché */
}

/* NOUVEAU : On rétablit une taille de police plus lisible sur les écrans plus larges */
@media (min-width: 560px) {
    footer .footer-info p {
        font-size: 0.85rem;
        margin-top: 0;
        
    }
}

/* AJOUT : On réduit les marges et l'espacement du footer sur mobile */
@media (max-width: 560px) {
    footer {
        margin: 0.1rem;
        padding: 0.1rem;
    }
}