#nav {
    position: fixed; top: 0; right: 0; left: 0; z-index: 200;
    padding: 25px;
    
    color: #000;
    
    pointer-events: none;
}
.loaded #nav {
    transition:
        padding          .4s ease-out,
        background-color .4s ease-out,
        box-shadow       .4s ease-out,
        color            .4s ease-out;
}
body[class*='open'] #nav,
body:not([class*='open']) #nav.static {
    background-color: rgba(255,255,255,0);
    box-shadow: 0 0 3px rgba(0,0,0,0);
}
body:not([class*='open']) #nav.scroll {
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
@media (min-width: 1100px) { body:not([class*='open']) #nav.static { padding: 50px; } }

/*----------------------------------------------------------------------------------------------------------------*/

#nav > .nav-wrapper { position: relative; z-index: 200; }
.loaded #nav > .nav-wrapper { transition: height .4s ease-out; }
body[class*='open'] #nav > .nav-wrapper,
body:not([class*='open']) #nav.static > .nav-wrapper { height: 50px; }
body:not([class*='open']) #nav.scroll > .nav-wrapper { height: 30px; }
#nav > .nav-wrapper > * { pointer-events: auto; }

/*----------------------------------------------------------------------------------------------------------------*/

#nav > .nav-wrapper > .home-btn {
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
	display: block;
    margin-right: auto;
	
	background-color: currentColor;
	
	-webkit-mask-image: url("../../images/logo.svg");
	mask-image: url("../../images/logo.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
#nav > .nav-wrapper > .home-btn:after {
    content: '';
    display: block;
    padding-top: 24%;
}
.loaded #nav > .nav-wrapper > .home-btn {
    transition:
        width  .4s ease-out,
        height .4s ease-out,
        color  .4s ease-out;
}
body[class*='open'] #nav > .nav-wrapper > .home-btn,
body:not([class*='open']) #nav.static > .nav-wrapper > .home-btn { width: 210px; }
body:not([class*='open']) #nav.scroll > .nav-wrapper > .home-btn { width: 125px; }

/*----------------------------------------------------------------------------------------------------------------*/

@media (min-width: 1100px)    {
    #nav > .nav-wrapper > .menu {
        position: absolute; top: 50%; right: 0; transform: translateY(-50%);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        column-gap: 35px;
    }
    .loaded #nav > .nav-wrapper > .menu {
        transition:
            right     .4s ease-out,
            opacity   .4s ease-out,
            font-size .4s ease-out;
    }
    body:not([class*='open']) #nav.static > .nav-wrapper > .menu { font-size: 18px; }
    body:not([class*='open']) #nav.scroll > .nav-wrapper > .menu { font-size: 14px; }
    body[class*='open'] #nav > .nav-wrapper > .menu {
        opacity: 0;
        pointer-events: none !important;
    }

    #nav > .nav-wrapper > .menu > .menu-item {
        position: relative;
        color: inherit;
    }
    #nav > .nav-wrapper > .menu > .menu-item:not(.large-btn):after {
        content: '';
        position: absolute; top: -10px; left: 50%; transform: translate(-50%, -50%);
        display: block; height: 8px; width: 8px;

        background-color: var(--main-color);
        border-radius: 50%;

        opacity: 0;
        pointer-events: none !important;
    }
    .loaded #nav > .nav-wrapper > .menu > .menu-item:after { transition: opacity .4s ease-in-out; }
    #nav > .nav-wrapper > .menu > .menu-item:hover:after {
        opacity: 1;
        animation: none !important;
    }
    .expertise #nav > .nav-wrapper > .menu > .menu-item.secteurs:after,
    .sector    #nav > .nav-wrapper > .menu > .menu-item.metiers:after,
    .article   #nav > .nav-wrapper > .menu > .menu-item.blog:after,
    .home      #nav > .nav-wrapper > .menu > .menu-item.blog:after,
    #nav > .nav-wrapper > .menu > .menu-item.current:after {
        opacity: 1;
        animation: menu-item-bullet-pulse .8s infinite ease-in-out;
    }
    @keyframes menu-item-bullet-pulse {
        0%   { box-shadow: 0 0 0 0px rgba(var(--main-color-rgb), 1); }
        100% { box-shadow: 0 0 0 4px rgba(var(--main-color-rgb), 0); }
    }

    #nav > .nav-wrapper > .menu > .menu-item.large-btn {
        display: flex; height: 50px; overflow: hidden;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0 25px;
        margin: -10px 0;

        background-color: var(--main-color);
        border-radius: 25px;

        text-align: center;
        color: #000 !important;
    }
    .loaded #nav > .nav-wrapper > .menu > .menu-item.large-btn { transition: background-color .4s ease-in-out; }
    .job #nav > .nav-wrapper > .menu > .menu-item.large-btn.jobs,
    #nav > .nav-wrapper > .menu > .menu-item.large-btn:hover,
    #nav > .nav-wrapper > .menu > .menu-item.large-btn.current { background-color: #7ACC7A; }
}
@media (max-width: 1099.99px) {
    #nav > .nav-wrapper > .menu { display: none; }
}

/*----------------------------------------------------------------------------------------------------------------*/

#nav > .nav-wrapper > .menu-btn {
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    box-sizing: content-box;
    overflow: hidden;
    
    background-color: transparent;
    border-radius: 50%;
    border: solid 2px transparent;
    
    color: inherit;
}
body[class*='open'] #nav > .nav-wrapper > .menu-btn {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
    border-color: currentColor;
}
body.loaded #nav > .nav-wrapper > .menu-btn {
    transition: 
        height           .4s ease-out,
        width            .4s ease-out,
        background-color .4s ease-out,
        border-color     .4s ease-out,
        color            .4s ease-out;
}
@media (min-width: 1100px)    {
    body:not([class*='open']) #nav > .nav-wrapper > .menu-btn {
        color: transparent;
        pointer-events: none !important;
    }
}
@media (max-width: 1099.99px) {}
body[class*='open'] #nav > .nav-wrapper > .menu-btn,
body:not([class*='open']) #nav.static > .nav-wrapper > .menu-btn { height: 50px; width: 50px; }
body:not([class*='open']) #nav.scroll > .nav-wrapper > .menu-btn { height: 30px; width: 30px; }

#nav > .nav-wrapper > .menu-btn:before,
#nav > .nav-wrapper > .menu-btn:after {
    content: "";
    position: absolute; left: 50%; transform: translate(-50%, -50%);
    display: block; height: 2px; width: 75%;
    
    background-color: currentColor;
    border-radius: 1px;
    
    color: inherit;
    
    transition:
        transform .4s ease-in-out,
        top		  .4s ease-in-out .4s;
}
#nav > .nav-wrapper > .menu-btn:before { top: 35%; }
#nav > .nav-wrapper > .menu-btn:after  { top: 65%; }

body[class*='open'] #nav > .nav-wrapper > .menu-btn:before,
body[class*='open'] #nav > .nav-wrapper > .menu-btn:after {
    transition:
        transform .4s ease-in-out .4s,
        top		  .4s ease-in-out;
}
body[class*='open'] #nav > .nav-wrapper > .menu-btn:before { top: 50%; transform: translate(-50%, -50%) rotate( 45deg); }
body[class*='open'] #nav > .nav-wrapper > .menu-btn:after  { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }