/* ══ FONTS ══ */
@font-face {
    font-family:'BebasNeue';
    src:url('/public/assets/fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight:normal;font-style:normal;font-display:swap;
}
@font-face {
    font-family:'Inter';
    src:url('/public/assets/fonts/Inter-Regular.otf') format('opentype');
    font-weight:normal;font-style:normal;font-display:swap;
}
@font-face {
    font-family:'CircularSpotify';
    src:url('/public/assets/fonts/CircularSpotifyText-Light.otf') format('opentype');
    font-weight:normal;font-style:normal;font-display:swap;
}

/* ══ RESET ══ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family:'CircularSpotify', sans-serif;
    background:#0a0a0a;
    color:#ccc;
}

a { color:inherit; text-decoration:none; }

/* ══ NAV ══ */
.nav {
    position:fixed;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 3rem;
    z-index:100;
    transition:background 0.3s;
}
.nav.nav-solid {
    background:rgba(10,10,10,0.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.nav.scrolled {
    background:rgba(10,10,10,0.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.nav-logo {
    font-family:'BebasNeue', sans-serif;
    font-size:1.6rem;
    color:#fabd38;
    letter-spacing:2px;
}
.nav-links {
    display:flex;
    align-items:center;
    gap:1.8rem;
    list-style:none;
}
.nav-links a {
    font-family:'Inter', sans-serif;
    font-size:0.85rem;
    color:#cfcfcf;
    transition:color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color:#fabd38; }
.nav-link-highlight {
    color:#fabd38 !important;
}
.nav-links .nav-avatar-icon {
    color:#fabd38;
    font-size:25px;
    transition:color 0.2s;
    display:flex;
    align-items:center;
}
.nav-links .nav-avatar-icon:hover {
    color:#ffcf5c;
}
.nav-btn {
    padding:0.4rem 1rem;
    border:1px solid #fabd38;
    border-radius:6px;
    color:#fabd38 !important;
    font-size:0.82rem;
    transition:all 0.2s;
}
.nav-btn:hover {
    background:#fabd38;
    color:#0a0a0a !important;
}
.nav-avatar {
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid #fabd38;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fabd38;
    font-weight:600;
    font-size:0.8rem;
}

/* ══ BURGER + CROIX + DRAWER MOBILE (masqués par défaut, activés à <768px) ══ */
.nav-burger {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    position:relative;
    z-index:1002;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
}
.nav-burger span {
    display:block;
    width:24px;
    height:2px;
    background:#fabd38;
    border-radius:2px;
    transition:transform 0.25s ease, opacity 0.2s ease;
    transform-origin:center;
}
.nav-burger.open span:nth-child(1) {
    transform:translateY(8px) rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
    opacity:0;
}
.nav-burger.open span:nth-child(3) {
    transform:translateY(-8px) rotate(-45deg);
}

/* Bouton croix de fermeture dans le drawer (masqué en desktop) */
.nav-close-li { display:none; }
.nav-close {
    background:none;
    border:none;
    color:#fabd38;
    cursor:pointer;
    padding:0.5rem;
    font-size:1.6rem;
    line-height:1;
    transition:color 0.2s;
}
.nav-close:hover { color:#ffcf5c; }

.nav-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    z-index:1000;
    opacity:0;
    transition:opacity 0.25s ease;
}
.nav-overlay.open {
    display:block;
    opacity:1;
}

/* ══ FOOTER ══ */
.footer {
    border-top:1px solid #1a1a1a;
    padding:1rem 3rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.7rem;
    color:#555;
}
.footer a { color:#888; }
.footer a:hover { color:#fabd38; }

/* ══ RESPONSIVE ══ */
@media (max-width:768px) {
    .nav { padding:1rem 1.5rem; }
    .footer { flex-direction:column; gap:0.5rem; text-align:center; padding:1rem; }

    /* Burger visible */
    .nav-burger { display:flex; }

    /* Drawer : la liste passe en panneau latéral */
    .nav-links {
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        width:78%;
        max-width:320px;
        background:#0d0d0d;
        border-left:1px solid #1f1f1f;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
        padding:1rem 1.8rem 2rem;
        transform:translateX(100%);
        transition:transform 0.3s ease;
        z-index:1001;
        overflow-y:auto;
    }
    .nav-links.open {
        transform:translateX(0);
    }

    /* Croix de fermeture visible et alignée à droite en haut du drawer */
    .nav-close-li {
        display:flex;
        justify-content:flex-end;
        border-bottom:none !important;
        padding:0;
        margin-bottom:0.5rem;
    }

    .nav-links li {
        width:100%;
        border-bottom:1px solid #1a1a1a;
    }
    .nav-links li:last-child {
        border-bottom:none;
    }
    .nav-links li a {
        display:block;
        padding:1rem 0;
        font-size:0.95rem;
        width:100%;
    }

    /* Boutons Login / Sign up : on garde l'allure de bouton dans le drawer */
    .nav-links a.nav-btn {
        display:inline-block;
        width:auto;
        padding:0.55rem 1.2rem;
        margin:0.8rem 0;
    }

    /* Lien "La Triade" mis en avant pour utilisateurs connectés */
    .nav-links a.nav-link-highlight {
        color:#fabd38;
    }

    /* Dropdown utilisateur connecté : on déplie inline dans le drawer plutôt qu'en menu flottant */
    .nav-links .nav-dropdown { position:static; }
    .nav-links .nav-avatar-icon {
        display:none; /* on cache l'icône, on liste les liens directement */
    }
    .nav-links .nav-dropdown-menu {
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        background:transparent;
        border:none;
        box-shadow:none;
        padding:0;
        min-width:0;
        width:100%;
    }
    .nav-links .nav-dropdown-item {
        padding:0.85rem 0;
        font-size:0.88rem;
        border-bottom:1px solid #1a1a1a;
    }
    .nav-links .nav-dropdown-item:last-child {
        border-bottom:none;
    }
    .nav-links .nav-dropdown-sep {
        display:none;
    }
}