/**
 * DISCORAK - Styles Header
 * Menu hamburger responsive
 */

/* ============================================================
   HEADER
   ============================================================ */
   #header {
        display:            flex;
        align-items:        center;
        justify-content:    space-between;
        padding:            1rem 0;
        background-color:   var(--bg-secondary);
        border-bottom:      1px solid var(--border-color);
        position:           sticky;
        top:                0;
        z-index:            1000;
        width:              100%;
   }

/* ============================================================
   LOGO
   ============================================================ */
   .logo {
        display:            flex;
        align-items:        center;
        gap:                0.75rem;
        text-decoration:    none;
        margin-left:        15%;
   }

   .logo-icon {
        width:          20px;
        height:         20px;
        color:          var(--neon-cyan);
        flex-shrink:    0;
   }

   .logo-text {
        display:        flex;
        align-items:    center;
        font-family:    var(--font-logo);
        font-size:      1.4rem;
        font-weight:    900;
        letter-spacing: 2px;
        line-height:    1;
   }

/* ============================================================
   NAVIGATION + BOUTON GROUPES A DROITE
   ============================================================ */
   .nav-menu {
        display:        flex;
        align-items:    center;
        gap:            2rem;
        margin-right:   15%;
   }

   .nav-link {
        font-family:    var(--font-primary);
        font-size:      0.95rem;
        font-weight:    500;
        color:          var(--text-secondary);
        transition:     var(--transition);
   }

   .nav-link:hover,
   .nav-link.active {
        color: var(--neon-cyan);
   }

/* ============================================================
   BOUTON CONNEXION
   ============================================================ */
   .btn-connexion {
        display:        inline-flex;
        align-items:    center;
        padding:        0.5rem 1.2rem;
        background:     transparent;
        color:          var(--neon-cyan);
        font-family:    var(--font-primary);
        font-weight:    600;
        font-size:      0.9rem;
        border:         1px solid var(--neon-cyan);
        border-radius:  var(--radius);
        cursor:         pointer;
        transition:     var(--transition);
   }

   .btn-connexion:hover {
        background:     var(--neon-cyan);
        color:          #000000;
        box-shadow:     0 0 20px #00f5ff55;
   }

/* ============================================================
   BOUTON HAMBURGER - MASQUÉ SUR DESKTOP
   ============================================================ */
   .hamburger {
        display:        none;
        flex-direction: column;
        gap:            5px;
        cursor:         pointer;
        background:     none;
        border:         none;
        padding:        0.5rem;
        margin-right:   1.5rem;
   }

   .hamburger span {
        display:        block;
        width:          24px;
        height:         2px;
        background:     var(--text-primary);
        border-radius:  2px;
        transition:     var(--transition);
   }

   /* Hamburger ouvert */
   .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
   }

   .hamburger.open span:nth-child(2) {
        opacity: 0;
   }

   .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
   }

/* ============================================================
   RESPONSIVE - MENU HAMBURGER
   ============================================================ */
   @media (max-width: 1201px) {

        .logo {
            margin-left: 1.5rem;
        }

        /* Afficher le hamburger */
        .hamburger {
            display: flex;
        }

        /* Menu caché par défaut sur mobile */
        .nav-menu {
            display:            none;
            position:           absolute;
            top:                100%;
            left:               0;
            right:              0;
            flex-direction:     column;
            align-items:        flex-start;
            background:         var(--bg-secondary);
            border-bottom:      1px solid var(--border-color);
            padding:            1rem 1.5rem;
            gap:                1rem;
            margin-right:       0;
        }

        /* Menu ouvert */
        .nav-menu.open {
            display: flex;
        }

        .btn-connexion {
            width: 100%;
            justify-content: center;
        }
   }