:root{
    --aa-bg:#090909;
    --aa-bg-soft:#111111;
    --aa-border:#292929;
    --aa-yellow:#f3c400;
    --aa-white:#f5f5f5;
    --aa-muted:#a4a4a4;
}


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

.aa-header{
    position:sticky;
    top:0;
    z-index:9999;

    width:100%;

    background:
        rgba(9,9,9,.96);

    backdrop-filter:
        blur(14px);

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

    border-bottom:0 !important;

    box-shadow:none;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


/* WordPress admin bar */

.admin-bar .aa-header{
    top:32px;
}


/* Quand on scroll */

.aa-header.is-scrolled{
    background:
        rgba(7,7,7,.98);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);
}


/* =========================================================
   INNER
========================================================= */

.aa-header-inner{
    width:min(1450px,calc(100% - 40px));

    min-height:82px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;
}


/* =========================================================
   BRAND
========================================================= */

.aa-brand{
    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

    text-decoration:none;
}


.aa-logo{
    width:58px;

    height:58px;

    object-fit:contain;

    display:block;
}


.aa-brand-text{
    color:var(--aa-white);

    font-size:14px;

    font-weight:800;

    line-height:1.15;

    max-width:180px;
}


/* =========================================================
   NAV
========================================================= */

.aa-nav{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;
}


.aa-nav a{
    position:relative;

    color:#b8b8b8;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    padding:31px 0;

    transition:
        color .2s ease;
}


.aa-nav a::after{
    content:"";

    position:absolute;

    left:0;

    bottom:20px;

    width:0;

    height:2px;

    border-radius:2px;

    background:
        var(--aa-yellow);

    transition:
        width .22s ease;
}


.aa-nav a:hover{
    color:#fff;
}


.aa-nav a:hover::after{
    width:100%;
}


/* =========================================================
   ACTIONS
========================================================= */

.aa-header-actions{
    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;
}


.aa-member-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:0 20px;

    border-radius:8px;

    background:
        var(--aa-yellow);

    color:#090909;

    text-decoration:none;

    font-size:12px;

    font-weight:900;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.aa-member-btn:hover{
    color:#090909;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(243,196,0,.18);
}


/* =========================================================
   BURGER
========================================================= */

.aa-menu-toggle{
    display:none;

    width:44px;

    height:44px;

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

    background:
        #131313;

    border-radius:8px;

    padding:0;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;
}


.aa-menu-toggle span{
    width:19px;

    height:2px;

    background:#fff;

    border-radius:2px;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* Burger actif */

.aa-menu-toggle.is-open span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}


.aa-menu-toggle.is-open span:nth-child(2){
    opacity:0;
}


.aa-menu-toggle.is-open span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.aa-mobile-menu{
    display:none;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        #0b0b0b;
}


.aa-mobile-menu nav{
    width:min(
        100% - 30px,
        700px
    );

    margin:0 auto;

    padding:18px 0 26px;

    display:flex;

    flex-direction:column;
}


.aa-mobile-menu a{
    color:#ddd;

    text-decoration:none;

    font-size:15px;

    font-weight:750;

    padding:15px 5px;

    border-bottom:
        1px solid
        #1d1d1d;
}


.aa-mobile-menu a:hover{
    color:
        var(--aa-yellow);
}


.aa-mobile-menu .aa-mobile-member{
    margin-top:18px;

    padding:14px 18px;

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

    border-radius:8px;

    text-align:center;

    color:
        var(--aa-yellow);
}


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

@media(max-width:1150px){

    .aa-nav{
        gap:20px;
    }

    .aa-brand-text{
        display:none;
    }

}


@media(max-width:900px){

    .aa-header-inner{
        min-height:72px;

        width:min(
            100% - 30px,
            1450px
        );
    }


    .aa-nav,
    .aa-member-btn{
        display:none;
    }


    .aa-menu-toggle{
        display:flex;
    }


    .aa-mobile-menu.is-open{
        display:block;
    }


    .aa-logo{
        width:52px;
        height:52px;
    }

}


@media(max-width:782px){

    .admin-bar .aa-header{
        top:46px;
    }

}