/* =====================================
   NOVARIS ESPORT - HEADER
===================================== */


.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 90px;

    z-index: 1000;


    background:
    rgba(5, 10, 20, 0.75);


    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);


    border-bottom:
    1px solid rgba(255,255,255,0.08);


}



/* CONTENEUR */


.header-container {

    max-width: 1500px;

    height: 90px;

    margin:auto;

    padding:0 40px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}



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


.logo {

    display:flex;

    align-items:center;

    height:90px;

}



.logo img {


    width:120px;

    height:75px;


    object-fit:contain;


    transition:.3s;


}



.logo:hover img {

    transform:scale(1.05);

}





/* =====================================
   NAVIGATION
===================================== */


.navbar {


    display:flex;

    align-items:center;


    gap:35px;


}



.navbar a {


    color:white;


    font-size:15px;


    font-weight:600;


    position:relative;


    transition:.3s;


}



.navbar a::after {


    content:"";


    position:absolute;


    bottom:-8px;


    left:0;


    width:0;


    height:2px;


    background:#4DA8FF;


    transition:.3s;


}



.navbar a:hover {


    color:#4DA8FF;


}



.navbar a:hover::after {


    width:100%;


}





/* =====================================
   ZONE UTILISATEUR
===================================== */


#user-area {


    display:flex;

    align-items:center;


}



/* =====================================
   UTILISATEUR NON CONNECTE
===================================== */


.guest-menu {


    display:flex;

    align-items:center;


    gap:15px;


}



.guest-menu a {


    padding:11px 22px;


    border-radius:10px;


    font-weight:700;


    transition:.3s;


}



.login-btn {


    color:white;


    border:1px solid #4DA8FF;


}



.login-btn:hover {


    background:#4DA8FF;


}



.register-btn {


    background:#4DA8FF;


    color:white;


}



.register-btn:hover {


    box-shadow:

    0 0 25px rgba(77,168,255,.7);


    transform:translateY(-2px);


}





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


.member-menu {


    display:flex;

    align-items:center;


    gap:15px;


}



.icon-button {


    position:relative;


    width:45px;

    height:45px;


    border-radius:50%;


    border:none;


    background:

    rgba(255,255,255,.08);


    color:white;


    font-size:20px;


    cursor:pointer;


    transition:.3s;


}



.icon-button:hover {


    background:

    rgba(77,168,255,.3);


    transform:translateY(-3px);


}





.badge {


    position:absolute;


    top:-5px;

    right:-5px;


    background:#ff3b3b;


    color:white;


    font-size:11px;


    font-weight:bold;


    min-width:18px;


    height:18px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


}





/* =====================================
   PROFIL HEADER
===================================== */


.profile-menu {


    position:relative;


}



.profile-button {


    display:flex;


    align-items:center;


    gap:12px;


    background:none;


    border:none;


    color:white;


    cursor:pointer;


}



.profile-button img {


    width:48px;


    height:48px;


    border-radius:50%;


    object-fit:cover;


    border:

    2px solid #4DA8FF;


}



.profile-info {


    display:flex;


    flex-direction:column;


    text-align:left;


}



.profile-info span {


    font-weight:700;


}



.profile-info small {


    color:#4DA8FF;


}



.arrow {


    font-size:12px;


}





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


.dropdown-menu {


    position:absolute;


    top:65px;


    right:0;


    width:240px;


    padding:15px;


    border-radius:15px;


    background:

    rgba(10,18,30,.95);


    border:

    1px solid rgba(255,255,255,.1);


    box-shadow:

    0 15px 40px rgba(0,0,0,.5);


    opacity:0;


    visibility:hidden;


    transform:

    translateY(-10px);


    transition:.3s;


}



.dropdown-menu.active {


    opacity:1;


    visibility:visible;


    transform:

    translateY(0);


}





.dropdown-menu a {


    display:block;


    padding:12px;


    color:white;


    border-radius:8px;


    transition:.3s;


}



.dropdown-menu a:hover {


    background:

    rgba(77,168,255,.15);


    color:#4DA8FF;


}



.dropdown-menu hr {


    border:none;


    height:1px;


    background:

    rgba(255,255,255,.1);


    margin:10px 0;


}



.dropdown-menu button {


    width:100%;


    padding:12px;


    border:none;


    border-radius:8px;


    background:#ff3b3b;


    color:white;


    font-weight:bold;


    cursor:pointer;


}



.dropdown-menu button:hover {


    background:#ff5555;


}





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


@media(max-width:1200px){


.navbar {


    display:none;


}


.header-container {


    padding:0 20px;


}



}



@media(max-width:600px){


.profile-info,


.arrow {


    display:none;


}



.logo img {


    width:95px;


}


}

.icon-button {

    position:relative;

    text-decoration:none;

    cursor:pointer;

}

/* =====================================
   BOUTONS NOTIFICATIONS / MESSAGES
===================================== */

.icon-button {


    position: relative;


    width: 45px;

    height: 45px;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 22px;


    background: transparent;


    border: none;


    color: white;


    cursor: pointer;


}


.icon-button:hover {


    background: rgba(255,255,255,0.08);


    border-radius: 10px;


}



.icon-button .badge {


    position: absolute;


    top: 2px;


    right: 2px;


    min-width: 18px;


    height: 18px;


    padding: 0 4px;


    display: flex;


    align-items: center;


    justify-content: center;


    border-radius: 50%;


    background: #4DA8FF;


    color: white;


    font-size: 11px;


    font-weight: 700;


}

.header-container {
    position: relative;
    z-index: 9999;
}

#user-area {
    position: relative;
    z-index: 10000;
}

.profile-menu {
    position: relative;
    z-index: 10001;
}

.dropdown-menu {
    position: absolute;
    z-index: 10002;
}