/* =====================================
   NAVIGATION BAR MODERNE - FROM SCRATCH
   ===================================== */

/* Structure principale */
/* Bleu marine #0b1e33 — la couleur qui ouvre le hero des pages produit, pour
   que le header se pose dans sa continuité au lieu de trancher dessus.

   VRAIMENT TRANSLUCIDE : 58 % d'opacité, contre 96 % auparavant. À 96 %, le flou
   ne servait à rien — rien ne passait au travers. À 58 %, la page défile
   visiblement sous la barre, ce qui est tout l'intérêt d'un verre.

   `saturate(180%)` accompagne le flou et n'est pas cosmétique : un flou seul
   délave ce qu'il traverse, et les couleurs de la page arrivaient grises sous
   la barre. La saturation leur rend leur teinte, c'est ce qui fait lire du verre
   plutôt qu'un voile sale.

   LE DÉGRADÉ VERS LE HAUT est là pour le texte, et ses deux valeurs sont
   MESURÉES. Les pages sont claires : au défilement, du contenu pâle passe sous
   la barre. Sur #eceff1, le fond composite à hauteur des libellés vaut
   rgb(94,107,121), ce qui donne 4,9:1 avec le texte blanc — au-dessus du seuil
   de 4,5:1. Un premier essai à 48-72 % tombait à 4,42:1, sous le seuil : d'où
   ces 52-74 %, qui restent très loin des 96 % d'avant.

   Le dégradé plutôt qu'un aplat parce que les libellés sont centrés
   verticalement : ils tombent au milieu, où l'alpha vaut ~63 %, pendant que
   l'arête haute reste dense contre le bord de l'écran et que le bas s'allège
   vers le contenu. La barre paraît donc plus transparente qu'un aplat à 63 %,
   sans rien céder là où le texte se lit.

   Les deux surfaces qui en dépendent — menu déroulant et menu mobile — restent
   nettement plus opaques, plus bas : un menu qu'on lit à travers la page n'est
   plus un menu. */
.navigation-bar-modern {
    background: linear-gradient(180deg, rgba(11, 30, 51, 0.74) 0%, rgba(11, 30, 51, 0.52) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 24px rgba(2, 10, 22, 0.28);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Neutralise le padding Bootstrap du container-fluid dans la nav */
.navigation-bar-modern .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.navbar-content {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 70px;
    gap: 40px;
    max-width: 100%;
    box-sizing: border-box;
}

/* =====================================
   LOGO - TOUJOURS À GAUCHE
   ===================================== */
.navbar-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 200px; /* Largeur minimale pour le logo */
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.logo-link:hover {
    text-decoration: none;
    transform: scale(1.02);
}

/* Image du logo */
.logo-image {
    height: 52px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-link:hover .logo-image {
    filter: brightness(1.1);
}

/* Texte caché (pour accessibilité) */
.logo-text-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================
   MENU PRINCIPAL - À GAUCHE PRÈS DU LOGO
   ===================================== */
.navbar-menu {
    display: flex;
    align-items: center;
}

.menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 20px;
}

.menu-item {
    position: relative;
}

/* Le texte monte de 78 % à 92 % d'opacité, et prend une ombre portée sombre.
   Les deux servent la même cause : la barre étant maintenant translucide, du
   contenu clair passe dessous au défilement. À 78 % sans ombre, « Game Servers »
   tombait sous 3:1 dès qu'une section blanche arrivait derrière. L'ombre n'est
   pas un effet de style — c'est elle qui tient le contraste quand le fond
   s'éclaircit, et elle ne se voit pas sur fond sombre. */
.menu-link {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(2, 10, 22, 0.55);
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    padding: 25px 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.menu-link:hover {
    color: #93c5fd;
    text-decoration: none;
}

.menu-link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.has-dropdown:hover .menu-link i {
    transform: rotate(180deg);
}

/* Menu déroulant */
.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    left: 0;
    /* #0e2339 : le palier suivant du dégradé du hero, soit exactement le même
       écart de clarté avec la barre qu'auparavant. */
    background: rgba(14, 35, 57, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    padding: 10px 0;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

.has-dropdown:hover .dropdown-menu-custom {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-custom li {
    margin: 0;
}

.dropdown-menu-custom a {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.dropdown-menu-custom a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #93c5fd;
    border-left-color: #3b82f6;
    text-decoration: none;
}

/* =====================================
   ACTIONS - TOUJOURS À DROITE
   ===================================== */
.navbar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    justify-content: flex-end;
}

.action-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.action-link:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    text-decoration: none;
}

.separator {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

/* =====================================
   NAVIGATION MOBILE
   ===================================== */
.mobile-toggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-cart {
    position: relative;
    background: linear-gradient(135deg, #5dafef 0%, #74a9d8 100%);
    color: white;
    padding: 12px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(93, 175, 239, 0.4);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-cart:hover {
    transform: scale(1.1);
    text-decoration: none;
    color: white;
    box-shadow: 0 6px 25px rgba(93, 175, 239, 0.5);
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.mobile-burger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-burger span {
    width: 25px;
    height: 3px;
    background: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-burger.active span:nth-child(2) {
    opacity: 0;
}

.mobile-burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Menu mobile */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Un cran plus sombre que la barre, comme l'était l'ancien anthracite. */
    background: rgba(9, 25, 43, 0.99);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    padding: 20px;
}

.mobile-menu-item {
    display: block;
    padding: 15px 0;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: color 0.3s ease;
}

.mobile-menu-item:hover {
    color: #93c5fd;
    text-decoration: none;
}

.mobile-submenu {
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-submenu.active {
    max-height: 300px;
}

.mobile-submenu-item {
    display: block;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 14px;
}

/* Produit annoncé mais pas encore lancé : l'entrée reste visible (le libellé
   porte déjà « Prochainement ») mais n'est plus cliquable. Remplace les anciens
   href="#", qui donnaient un lien qui ne mène nulle part. Le rendu reste celui
   d'une entrée de menu, simplement estompée et sans curseur main. */
.menu-soon,
.mobile-submenu-item.is-soon {
    cursor: default;
    opacity: .5;
}
.menu-soon:hover,
.mobile-submenu-item.is-soon:hover {
    opacity: .5;
    background: none;
    color: inherit;
}
/* Aligne le <span> desktop sur le rendu des <a> frères du dropdown. */
li > .menu-soon {
    display: block;
    padding: inherit;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.mobile-account-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
}

/* Grille 2 colonnes */
.mobile-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Slot Langue/Devise pleine largeur quand non connecté */
.mob-full-width {
    grid-column: 1 / -1;
}

/* Boutons mobile — icône + texte empilés */
.mobile-account-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    color: white;
    text-decoration: none;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    min-height: 70px;
}

.mobile-account-btn i {
    font-size: 20px;
    line-height: 1;
}

.mobile-account-btn span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.mobile-account-btn:hover {
    opacity: 0.85;
    text-decoration: none;
    color: white;
    transform: translateY(-1px);
}

.dashboard-btn { background: linear-gradient(135deg, #5dafef 0%, #2979b5 100%); }
.cart-btn      { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }
.logout-btn    { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); }
.login-btn     { background: linear-gradient(135deg, #5dafef 0%, #2979b5 100%); }
.register-btn  { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }

/* =====================================
   RESPONSIVE
   ===================================== */

/* Desktop (1281px+) : burger caché, menu complet affiché */
@media (min-width: 1281px) {
    .mobile-toggle {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .navbar-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .navbar-actions {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* Écrans moyens - réduire les espaces */
@media (max-width: 1400px) and (min-width: 1281px) {
    .navbar-content {
        padding: 0 20px;
        gap: 20px;
    }

    .menu-list {
        gap: 18px;
    }

    .menu-link {
        font-size: 13px;
    }

    .navbar-logo {
        min-width: 160px;
    }

    .logo-image {
        height: 44px;
    }
}

/* Passage en burger menu strict à 1280px */
@media (max-width: 1280px) {
    /* Forcer la disparition immédiate des éléments desktop */
    .navbar-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .navbar-actions {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .mobile-toggle {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-menu {
        position: absolute !important;
    }

    /* Ajuster l'espacement pour le mobile */
    .navbar-content {
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    .navbar-logo {
        min-width: auto !important;
        max-width: calc(100% - 110px) !important; /* laisse la place au burger + panier */
    }

    .logo-image {
        max-width: 150px !important;
    }
}

@media (max-width: 768px) {
    .navbar-content {
        padding: 0 15px;
        height: 60px;
    }

    .logo-image {
        height: 38px;
    }
}

@media (max-width: 576px) {
    .navbar-content {
        padding: 0 10px;
    }

    .logo-image {
        height: 35px;
    }
}

/* =====================================
   LOADER STYLES
   ===================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 20, 21, 0.93);
    z-index: 999998;
    display: none;
    justify-content: center;
    align-items: center;
}

.page-loader.active {
    display: flex;
}

.loader-content {
    text-align: center;
    color: white;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.loader-gif {
    width: 180px;
    height: 180px;
    object-fit: contain;
    animation: loader-main 2s ease-in-out infinite;
}

.loader-bar-wrap {
    width: 160px;
    height: 4px;
    background: rgba(35, 220, 236, 0.15);
    border-radius: 99px;
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #23dcec, #186cb3);
    border-radius: 99px;
    animation: loader-bar-slide 1.4s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(35,220,236,0.8);
}

@keyframes loader-main {
    0%   { transform: scale(0.8)  rotate(-4deg); filter: drop-shadow(0 0 10px rgba(35,220,236,0.3)); opacity: 0.7; }
    25%  { transform: scale(1.2)  rotate(2deg);  filter: drop-shadow(0 0 40px rgba(35,220,236,1))   drop-shadow(0 0 80px rgba(24,108,179,0.6)); opacity: 1; }
    50%  { transform: scale(1.05) rotate(-1deg); filter: drop-shadow(0 0 25px rgba(35,220,236,0.7)); opacity: 0.9; }
    75%  { transform: scale(1.18) rotate(3deg);  filter: drop-shadow(0 0 45px rgba(35,220,236,1))   drop-shadow(0 0 70px rgba(24,108,179,0.5)); opacity: 1; }
    100% { transform: scale(0.8)  rotate(-4deg); filter: drop-shadow(0 0 10px rgba(35,220,236,0.3)); opacity: 0.7; }
}

@keyframes loader-bar-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(500%); }
}

/* =====================================
   BOUTONS ACTIONS NAVBAR
   ===================================== */

.nav-cart-btn,
.nav-dash-btn,
.nav-login-btn,
.nav-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
}

.nav-cart-btn:hover,
.nav-dash-btn:hover,
.nav-login-btn:hover,
.nav-register-btn:hover {
    text-decoration: none;
}

/* Panier — ghost neutre */
.nav-cart-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.72);
}
.nav-cart-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}
/* Badge compteur dans le pill */
.nav-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 10px;
    line-height: 1;
}

/* Dashboard — gradient bleu CBR-Cloud */
.nav-dash-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.25);
}
.nav-dash-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
    color: #fff;
}

/* Connexion — ghost */
.nav-login-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.78);
}
.nav-login-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

/* Inscription — gradient bleu CBR-Cloud */
.nav-register-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.25);
}
.nav-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
    color: #fff;
}