/* --- LOGIQUE MOBILE FINALE POUR TALIS PROTOCOL --- */
@media (max-width: 999px) {
    /* 1. On remet un fond sombre élégant et on casse la grille desktop */
    .site-header {
        background-color: rgba(1, 4, 9, 0.98) !important;
        backdrop-filter: blur(20px);
        padding: 10px 15px !important;
    }

    .header-container {
        display: flex !important; /* On passe de GRID à FLEX pour le mobile */
        justify-content: space-between;
        align-items: center;
	width: 100%;
    }

    /* 2. ON CACHE LE MENU DE NAVIGATION (Il apparaîtra sur le côté) */
    .header-nav-links {
        display: none !important; /* Caché par défaut */
        position: fixed;
        top: 0;
        right: -100%; /* Sorti de l'écran à droite */
        width: 80%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        z-index: 2000;
        transition: right 0.4s ease-in-out;
        box-shadow: -15px 0 35px rgba(0, 0, 0, 0.7);
	border-radius: 5rem 0 0 5rem !important;
        font-size: 1.5rem !important;
        color: rgba(195, 228, 233, 0.81) !important;
        border: none !important;
        letter-spacing: 0.2em;
        background: rgba(15, 23, 42, 0.94) !important;
    }

    /* 3. QUAND LE MENU EST ACTIF (Déclenché par ton JS) */
    .header-nav-links.active {
        display: flex !important;
        right: 0; /* Il glisse vers l'intérieur */
    }

    /* Style des liens à l'intérieur du menu ouvert */
    .nav-link {
        font-size: 1.5rem !important;
        color: #22d3ee !important;
        border: none !important;
        letter-spacing: 0.2em;
    }
    .header-controls {
    display: flex !important;
    align-items: center;
    gap: 12px; /* Espace fixe entre le bouton Connect et le Burger */
    }

    /* 4. LE BOUTON BURGER (Plus de carré vert !) */
    .burger-label {
        display: flex !important;
        background: transparent !important;
        border: 1px solid #22d3ee !important; /* Bordure Cyan Talis */
        color: #22d3ee !important;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        z-index: 2001; /* Reste au-dessus du menu bleu */
    }

    /* 5. AJUSTEMENTS POUR GAGNER DE LA PLACE */
    .logo { 
        font-size: 1rem !important; 
        flex: 1;
    }

    .connect-btn {
        font-size: 0.7rem !important;
        padding: 0.5rem 1rem !important;
        margin-right: 0 !important;
    }

/* Par défaut, on cache la croix */
#burger-btn .icon-close {
    display: none !important;
}

/* Quand le menu est ouvert, on inverse les icônes */
#nav-menu.active ~ .header-controls #burger-btn .icon-open {
    display: none !important;
}

#nav-menu.active ~ .header-controls #burger-btn .icon-close {
    display: block !important;
    color: #22d3ee; /* On garde le cyan Talis pour la croix */
}
}