/* Styles pour écrans mobiles */
@media screen and (max-width: 768px) {
    /* Container principal du menu */
    .topnav {
        display: flex;                /* Layout flexbox */
        flex-direction: column;       /* Empile les éléments verticalement */
        align-items: center;          /* Centre les éléments horizontalement */
        position: relative;           /* Pour le positionnement des enfants */
    }

    /* Bouton hamburger */
    .hamburger {
        display: block;              /* Affiche le bouton en mobile */
        position: relative;          /* Pour le z-index */
        cursor: pointer;             /* Indique que c'est cliquable */
        padding: 15px;               /* Espace autour du bouton */
        z-index: 100;               /* Au-dessus du menu */
    }

    /* Barres du hamburger */
    .hamburger span {
        display: block;              /* Affichage en bloc */
        width: 25px;                /* Largeur des barres */
        height: 3px;                /* Épaisseur des barres */
        background: #fff;           /* Couleur blanche */
        margin: 5px 0;              /* Espace entre les barres */
        transition: 0.4s;           /* Animation smooth */
    }

    /* Liste du menu mobile */
    .topnav ul {
        display: none;              /* Caché par défaut */
        position: relative;         /* Positionnement normal */
        width: 100%;               /* Pleine largeur */
        flex-direction: column;     /* Items en colonne */
        align-items: center;        /* Centrage horizontal */
        gap: 2rem;                 /* Espace entre items */
        padding: 20px 0;           /* Padding vertical */
        transition: 0.3s ease;      /* Animation d'ouverture */
    }

    /* Menu ouvert */
    .topnav ul.active {
        display: flex;              /* Affiche le menu */
    }

    /* Items du menu */
    .topnav li {
        opacity: 0;                 /* Invisible au début */
        animation: fadeIn 0.5s ease forwards; /* Animation d'apparition */
    }

    /* Animation d'apparition des items */
    @keyframes fadeIn {
        from { 
            opacity: 0;             /* Départ invisible */
            transform: translateY(20px); /* Décalé vers le bas */
        }
        to { 
            opacity: 1;             /* Arrivée visible */
            transform: translateY(0); /* Position finale */
        }
    }
}