/* -----------------------------
   Conteneur principal
   ----------------------------- */
.subnav-container {
    display: flex;
    align-items: center;
    position: relative; /* pour placer les flèches */
    background: var(--secondary-color-gradient);
    padding: 10px 0;
    z-index: 1050; /* sous sidebar (1000) pour desktop */
}

/* Wrapper scrollable */
.subnav-wrapper {
    flex: 1; /* prend toute la place entre les flèches */
    overflow-x: auto; /* scroll horizontal natif */
    -webkit-overflow-scrolling: touch; /* smooth scroll mobile */
    white-space: nowrap; /* empêche de passer à la ligne */
}
.subnav-wrapper::-webkit-scrollbar {
    display: none; /* masquer scrollbar Chrome/Safari */
}

/* Subnav items */
.subnav {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Liens */
.subnav .nav-link {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    white-space: nowrap;
}

/* Flèches de scroll */
.subnav-arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    display: none; /* par défaut cachées */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    transition: background 0.2s;
}

.subnav-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* Placement correct des flèches par rapport au subnav-wrapper */
.subnav-arrow-left {
    left: 0; /* à gauche du wrapper */
}
.subnav-arrow-right {
    right: 0; /* à droite du wrapper */
}

/* Section utilisateur / panier */
.connected {
    width: auto;
}
.connected-message {
    color: #fff;
}
.not-connected {
    color: rgb(252, 211, 136);
    font-weight: 900;
}
.nickname {
    color: yellow;
}
.user-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .subnav-wrapper {
        width: 100%;
    }

    /* Flèches visibles seulement en mobile */
    .subnav-arrow-left,
    .subnav-arrow-right {
        display: flex;
    }
}