/* ===================================================== */
/*                     NAVBAR                             */
/* ===================================================== */


nav{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:min(1200px,92%);

height:75px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

background:rgba(15,15,20,.65);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

z-index:9999;

transition:.3s;

}


/* Navbar après scroll */

nav.scrolled{

top:10px;

background:rgba(10,10,15,.9);

box-shadow:0 15px 40px rgba(0,0,0,.4);

}


/* ===================================================== */
/*                      LOGO                              */
/* ===================================================== */


.nav-logo{

display:flex;

align-items:center;

gap:15px;

font-size:24px;

font-weight:900;

}


.nav-logo img{

width:45px;

height:45px;

object-fit:contain;

}


/* ===================================================== */
/*                      MENU                              */
/* ===================================================== */


.nav-links{

display:flex;

align-items:center;

gap:10px;

}


.nav-links a{

padding:12px 18px;

border-radius:12px;

color:var(--text-light);

font-weight:600;

transition:.25s;

}


.nav-links a:hover{

background:rgba(125,77,255,.15);

color:white;

}


.nav-links a.active{

background:var(--primary);

color:white;

}


/* ===================================================== */
/*                  DROPDOWN                             */
/* ===================================================== */


.dropdown{

position:relative;

}


.dropdown>a::after{

content:"?";

font-size:12px;

margin-left:8px;

}


.dropdown-menu{

position:absolute;

top:55px;

left:0;

min-width:220px;

background:#15151c;

border:1px solid var(--border);

border-radius:16px;

padding:10px;

opacity:0;

visibility:hidden;

transform:translateY(-10px);

transition:.25s;

box-shadow:var(--shadow);

}


.dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}


.dropdown-menu a{

display:block;

}


/* ===================================================== */
/*                  BOUTON IP                            */
/* ===================================================== */


.copy-ip{

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

padding:12px 22px;

border-radius:14px;

font-weight:800;

color:white;

cursor:pointer;

transition:.25s;

}


.copy-ip:hover{

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(125,77,255,.5);

}


/* ===================================================== */
/*                 MOBILE MENU                           */
/* ===================================================== */


.menu-toggle{

display:none;

font-size:30px;

cursor:pointer;

}


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


@media(max-width:900px){


nav{

height:65px;

}


.menu-toggle{

display:block;

}


.nav-links{

position:absolute;

top:80px;

left:0;

width:100%;

padding:20px;

background:#121218;

border-radius:20px;

display:none;

flex-direction:column;

}


.nav-links.show{

display:flex;

}


.dropdown-menu{

position:static;

display:none;

margin-top:10px;

}


.dropdown:hover .dropdown-menu{

display:block;

}



}