/* style.css - Version Hamburger */

/* Par défaut (PC), on ne change rien */

/* UNIQUEMENT SUR MOBILE */
@media screen and (max-width: 768px) {
    
    /* 1. Le corps de la page */
    body {
        flex-direction: column;
        overflow-x: hidden; /* Empêche le scroll horizontal */
    }

    /* 2. La Sidebar (Le Menu) - Cachée par défaut */
    aside {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80%; /* Prend 80% de la largeur */
        max-width: 300px;
        z-index: 1000;
        transform: translateX(-100%); /* On le cache à gauche */
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
        /* On force la couleur de fond pour être lisible */
        background-color: #111 !important; 
    }

    /* Quand on ajoute la classe .open, le menu arrive */
    aside.open {
        transform: translateX(0);
    }

    /* 3. Le Contenu Principal */
    main, .container {
        width: 100%;
        padding: 70px 20px 20px 20px; /* Marge en haut pour le bouton */
    }

    /* 4. Le Bouton Hamburger (Créé par le JS) */
    #zenith-burger {
        display: flex !important; /* On le force à s'afficher */
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 2000;
        background: #222;
        color: #fff;
        border: 1px solid #444;
        border-radius: 8px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    
    /* Grille en 1 colonne */
    .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Cache le bouton sur PC */
#zenith-burger {
    display: none;
}