/* ============================================================
   ServersAdvisor — assets/nav.css
   Styles de la navigation publique (commun à toutes les pages)
   ============================================================ */

nav{position:fixed;top:0;left:0;right:0;z-index:300;height:64px;background:rgba(7,8,15,.88);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 32px;gap:0}
.nav-logo{display:flex;align-items:center;flex-shrink:0;margin-right:32px}
.nav-logo img{height:38px;width:auto;object-fit:contain}
.nav-div{width:1px;height:32px;background:var(--border);margin-right:8px}
.nav-links{display:flex;align-items:center;gap:2px;flex:1}
.nav-links a{position:relative;padding:7px 16px;font-size:13px;font-weight:500;color:var(--t2);border-radius:8px;transition:all .2s;letter-spacing:.2px}
.nav-links a:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.nav-links a.on{color:#fff;background:rgba(99,102,241,.15)}
.nav-links a.on::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:24px;height:2px;border-radius:2px;background:var(--sa-grad2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-badge{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:2px;color:var(--t3);border:1px solid var(--border);padding:3px 8px;border-radius:4px}
.btn-cta{position:relative;padding:2px;border-radius:8px;background:var(--sa-grad);cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;text-decoration:none;display:inline-block;user-select:none;-webkit-user-select:none}
.nav-links a{user-select:none;-webkit-user-select:none}
.nav-burger{user-select:none;-webkit-user-select:none}
.btn-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(43,159,255,.3)}
.btn-cta-inner{background:rgba(7,8,15,.85);border-radius:6px;padding:7px 18px;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;display:block}
.btn-cta:hover .btn-cta-inner{background:rgba(7,8,15,.6)}

.nav-mobile-cta{display:none}

/* ═══ HAMBURGER ═══ */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;background:transparent;border:none;cursor:pointer;
  flex-shrink:0;padding:0;
}
.nav-burger span{display:block;width:22px;height:2px;background:var(--t1);border-radius:2px;transition:.25s;margin:0 auto}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-overlay{
  display:none;position:fixed;inset:0;top:64px;z-index:350;
  background:rgba(7,8,15,.7);backdrop-filter:blur(4px);
}
.nav-overlay.open{display:block}

@media(max-width:960px){
  nav{padding:0 16px}
  .nav-links{
    position:fixed;top:64px;right:0;bottom:0;width:min(78vw,300px);
    background:#0A0B12;border-left:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:20px 16px;transform:translateX(100%);transition:transform .25s ease;
    z-index:380;overflow-y:auto;flex:none;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:13px 16px;font-size:15px;border-radius:10px;display:flex !important}
  .nav-links a.on::after{display:none}
  .nav-links a.on{border-left:3px solid var(--sa-cyan);border-radius:8px}
  .nav-links .nav-mobile-cta{
    display:block !important;
    margin-top:10px;padding-top:14px;border-top:1px solid var(--border);
  }
  .nav-right .btn-cta{display:none}
  .nav-badge{display:none}
  .nav-burger{display:flex}
}