/* =========================
   MeasureX - HEADER / NAVBAR
========================= */

/* Base reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { margin: 0; }

/* Navbar shell */
.navbar{
    background: linear-gradient(90deg,#000,#0f023f,#160157);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    position: relative;
    z-index: 1000;
    width: 100%;
}

/* 3 zones: logo | center | burger */
.nav-inner{

    margin: 0 auto;
    padding: 12px 22px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* Logo */
.nav-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}
.nav-logo img{
    width: 75px;
    display: block;
}

/* Center wrapper: links centered + user icon on far right */
.nav-center{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* keeps links centered */
    min-height: 44px;
}

/* Links desktop */
.nav-links{
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

/* Links style */
.nav-links a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding: 6px 2px;
    display: inline-block;
}

/* underline hover */
.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background: skyblue;
    transition: width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

/* Active link (optional) */
.nav-links a.active::after{
    width: 100%;
}

/* User icon on the far right (inside center area) */
.user-icon{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 6px;
}
.user-icon img{
    width: 30px;
    height: auto;
    display: block;
}
/* Show/hide helpers */
.desktop-only { display: flex; }
.mobile-only { display: none; }

.burger{
    display: none;              /* reste caché desktop */
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px;

    /* ✅ IMPORTANT: empiler les 3 traits */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.burger span{
    display:block;
    width: 26px;
    height: 2px;
    background: #fff;
    margin: 0;
    transition: transform .25s ease, opacity .25s ease;
}

/* Welcome text (if you show it somewhere) */
.bienvenue-msg{
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-left: 10px;
}

/* =========================
   Mobile (<= 768px)
========================= */
@media (max-width: 768px){

    /* 1) Header: logo gauche, burger droite (stable) */
    .nav-inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* 2) Cache le centre en largeur, mais on garde le conteneur pour le dropdown */
    .nav-center{
        position: static;   /* IMPORTANT: on ne veut pas qu'il influence le layout */
        min-height: 0;
    }

    /* 3) Burger visible et fixé */
    .burger{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: auto;      /* force à droite */
    }

    /* 4) Dropdown full width sous la navbar */
    .navbar{
        position: relative; /* référence pour le dropdown */
    }

    .nav-links{
        position: absolute;
        left: 12px;
        right: 12px;
        top: 100%;               /* juste sous la navbar */
        margin-top: 10px;

        background: #0f023f;
        flex-direction: column;
        gap: 14px;
        padding: 16px 0;

        display: none;
        align-items: center;

        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.35);
        border: 1px solid rgba(255,255,255,.10);
    }

    .nav-links.open{ display:flex; }

    /* 5) User icon: uniquement dans le menu (comme tu avais) */
    .desktop-only { display: none !important; }
    .mobile-only  { display: list-item !important; }
}

/* =========================
   Large desktop (>= 1024px)
========================= */
@media (min-width: 1024px){
    .nav-inner{ padding: 14px 28px; }
    .nav-links{ gap: 34px; }
}