/* Généré depuis resources/assets/css/okaria-menu.css — ne pas éditer ici. */





























.site-header-links {
    --mnav-inset:  16px;   
    --mnav-gutter: 22px;   
    --mnav-gap:    12px;   
    --mnav-target: 48px;   
}









.site-header-links .mnav {
    display: block;
    padding: 6px 0 10px;
    border-top: 1px solid var(--border);
}

.site-header-links .mnav-title {
    margin: 0;
    padding: 14px var(--mnav-inset) 8px;
    font-family: var(--font-title);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    

    color: var(--text-dim);
}











.site-header-links .mnav-item {
    display: grid;
    grid-template-columns: var(--mnav-gutter) minmax(0, 1fr) auto;
    column-gap: var(--mnav-gap);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--mnav-target);
    padding: 0 var(--mnav-inset);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.site-header-links .mnav-item:hover,
.site-header-links .mnav-item:focus {
    background: rgba(var(--primary-rgb), .08);
    color: var(--primary);
}


.site-header-links .mnav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}














.site-header-links .mnav-item.is-current {
    background: rgba(var(--primary-rgb), .14);
    color: var(--text);
    box-shadow: inset 3px 0 0 0 var(--primary);
}
.site-header-links .mnav-item.is-current > .mnav-ico { color: inherit; }
.site-header-links .mnav-item.is-current:hover,
.site-header-links .mnav-item.is-current:focus {
    background: rgba(var(--primary-rgb), .18);
    color: var(--text);
}




.site-header-links .mnav-item > .mnav-ico {
    width: var(--mnav-gutter);
    height: 1em;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    opacity: 1;
    color: inherit;
}






.site-header-links .mnav-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}






.site-header-links .mnav-item.is-primary {
    background: var(--btn-hi-bg);
    box-shadow: inset 0 0 0 1.5px var(--btn-hi-border);
    color: var(--text);
    font-weight: 700;
}
.site-header-links .mnav-item.is-primary:hover,
.site-header-links .mnav-item.is-primary:focus {
    background: var(--btn-top-bg);
    color: var(--text);
}










.site-header-links .mnav-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .16);
    border: 1px solid rgba(var(--primary-rgb), .42);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--primary);
}







.site-header-links .mnav-user {
    display: flex;
    align-items: center;
    gap: var(--mnav-gap);
    padding: 14px var(--mnav-inset);
    background: var(--card-active);
    border-top: 1px solid var(--border);
}


.site-header-links .mnav-user + .mnav { border-top: 0; padding-top: 0; }






.site-header-links .mnav-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    object-fit: cover;
    image-rendering: pixelated;
}

.site-header-links .mnav-ident {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}






.site-header-links .mnav-pseudo {
    max-width: 100%;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}












.site-header-links .mnav-rank {
    padding: 2px 9px;
    background: transparent;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.45;
}











.site-header-links .mnav-logout {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}
.site-header-links .mnav-item.is-logout { color: var(--danger); }
.site-header-links .mnav-item.is-logout:hover,
.site-header-links .mnav-item.is-logout:focus {
    background: rgba(var(--danger-rgb), .10);
    color: var(--danger);
}
.site-header-links .mnav-item.is-logout:focus-visible { outline-color: var(--danger); }






.site-header-links .site-header-close-links .ui.menu {
    background: var(--bg-deep);
    border: 0;
    box-shadow: none;
    margin: 0;
}





.site-header-links .site-header-close-links .ui.menu .item::before { display: none; }






@media (max-width: 1080px) {
    


    .site-header-open-links .ui.grid > .row > .column,
    .site-header-close-links .ui.grid > .row > .column { width: 100% !important; }


    













    .site-header-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-deep);
        padding-bottom: 8px;
        transform: translateY(-100%);
        visibility: hidden;
        


        transition: transform .32s var(--ease), visibility 0s linear .32s;
    }
    .site-header-links.shown {
        transform: translateY(0);
        visibility: visible;
        transition: transform .32s var(--ease), visibility 0s linear 0s;
    }

    

    .site-header-links .site-header-close-links {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg-deep);
    }

    

    .site-header-links > .mnav { border-top: 0; }

    



    .site-header-links .menu-head.show-on-small-only {
        border-top: 1px solid var(--border);
        padding: 4px 0;
    }
}