header {
   @include media("<=sm") {
       background-color: $color-dark-grey;
   }
}
header > .container {
    @include media("<=md") {
        width: auto;
    }
}


/*** Nav top ***/

.navtop {
    background-color: #fff; text-align: right; position: absolute; top: 0; right: 15px;
    @include media("<=md") { display: none; }
}

.navtop a {
    display: inline-block;  color: $color-standard-text; font-size: 14px; line-height: 18px; padding: 5px 12px 5px 12px; position: relative;
    @include media("<=lg") {
        padding: 10px 15px 6px 15px;
    }
    &:first-child {
        padding-right: 0;
        &::after {
            content: ""; border-right: 1px solid #333; padding-left: 12px; 
        }
    }
}
.navtop a:focus, .navtop a:hover {
    text-decoration: none; background-color: transparent; color: $color-standard-text;
}

.navtop .switch-langue-container {
    display: inline; padding-left: 10px;
    a {
        display: inline-block; padding: 12px 10px; background-color: $color-primary; color: #fff; font-family: Arial, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
        &:hover {
            background-color: $color-medium-grey;
        }
        &:first-child::after {
            display: none; 
        }
    }
    html[lang="fr"] & a:last-child {
        background-color: $color-medium-grey;
    }
    html[lang="en"] & a:first-child {
        background-color: $color-medium-grey;
    }
}


.logos-container {
    padding: 15px 0;
}
.logo-recrutement {
    display: inline-block;
    @include media("<=sm") {
        margin: 0 0 0 15px;
        img {
            width: 260px; height: auto;
        }
    }
    @include media("<=xs-large") {
        img {
            width: 220px;
        }
    }
}
.logo-immigration {
    display: none;
}
body[data-section-id="immigration"] {
    .logo-immigration {
        display: block;
        @include media("<=sm") {
            img { width: 240px; height: auto; }
        }
        @include media("<=xs-large") {
            img { width: 210px; }
        }
    }
    .logo-recrutement {
        display: none;
    }
}




.navbar {
    margin: 0; box-shadow: none; border-radius: 0; border: 0;
    @include media("<=sm") { background: none; box-shadow: none; }
}

.navbar-nav {
    border: 0 !important; margin: 80px 0 0 0;
    @include media("<=md-large") { margin-left: 0; }
    @include media("<=sm") { margin-bottom: 22px; }
    .is-cms & {
        visibility: hidden;
    }
}
.navbar-nav > li {

}
.navbar-nav > li > a, .navbar-nav > li > a:visited {
    color: #000 !important; font-size: 16px; line-height: 20px; font-weight: 700; padding: 18px; position: relative; z-index: 1001; text-transform: uppercase;
    @include media("<=lg") {
        padding: 15px; font-size: 14px; line-height: 18px;
    }
    @include media("<=md") {
        padding-top: 17px; padding-bottom: 15px; display: block; width: 100%; text-align: left; white-space: normal;
    }
}
.nav > li > a:focus, .nav > li > a:hover, .nav > li > a:visited:hover {
    text-decoration: none; background-color: transparent !important; color: $color-tertiary !important;
    @include media("<=md") {
        color: #fff !important; text-decoration: underline;
    }
}
.nav .open > a, .nav .open > a:visited, .nav .open > a:focus, .nav .open > a:hover, .nav .open > a:visited:hover,
body[data-section-id="accueil"] .navbar-nav > li:nth-child(1) > a
{
    border-color: transparent; background-color: transparent !important; color: $color-tertiary !important;
    @include media("<=md") {
        color: #fff !important;
    }
}
@include media(">=md") {
    .nav .dropdown.open > a, .nav .dropdown.open > a:focus, .nav .dropdown.open > a:hover {
        &::before {
            content: ""; width: 100%; height: 9px; position: absolute; bottom: 5px; left: 0; /*background: url(/images/assets/triangle-blanc-bas.png) no-repeat bottom center;*/
        }
    }
}




header .dropdown-menu {
    background-color: #fff; border: 0; border-top: 10px solid #fff; border-bottom: 10px solid #fff; border-radius: 0; padding: 0; margin-top: 3px; position: relative;
    @include media(">=md") {
        &::after {
           content: ""; width: 100%; height: 50px; background: url(/images/assets/triangle-blanc.svg) no-repeat left bottom; background-size: cover; 
        }
    }
    @include media("<=md") {
        float: none; position: relative; width: auto; background-color: transparent; position: static; border: 0; box-shadow: none; margin-top: -10px !important;
    }
    li {
        @include media("<=md") {
            background: url(/images/assets/bullet-blanc.png) no-repeat 25px 13px; padding: 0 0 0 35px;
        }
        @include media("<=sm") {
            padding: 0 0 0 15px;
        }
        & > a {
            color: $color-dark-grey !important; white-space: normal; font-size: 16px; line-height: 22px; padding: 10px 20px 10px 20px;
            @include media("<=md") { color: #fff !important; padding: 5px 15px 5px 5px; }
            &:hover {
                background-color: transparent; text-decoration: underline;
                @include media(">=md") { background-color: $color-secondary; color: #000 !important; text-decoration: none; }
            }
        }
        &.active a {
            background-color: transparent !important;
        }
    }
}




/* Pour faire apparaitre button collapse a 992px */

.navbar-toggle {
    @include media("<=md") {
        background-color: $color-primary; margin-top: 18px; padding: 15px; display: block; display: block; position: relative; z-index: 100;
    }
    @include media("<=sm") {
        margin-top: 60px;
    }
    @include media("<=xs-large") {
        padding: 8px
    }
    .icon-bar {
        background-color: #fff; width: 30px; height: 5px;
        @include media("<=xs-large") {
            width: 22px; height: 4px;
        }
    }
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: $color-primary;
}
.navbar-collapse {
    padding: 0; boz-shadow: 0; border-top: 0; border-top: 0px solid transparent; box-shadow: 0;
}
.navbar-collapse.collapse.in, .navbar-collapse.collapsing {
    display: block !important; float: none; padding: 15px 20px 15px 25px; position: absolute; top: 58px; right: -10px; z-index: 2000; color: #fff; text-align: center; width: 50%;
    background-color: $color-primary; padding: 15px 0; margin: 24px -16px -1px -16px; box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    @include media("<=sm") { top: 100px; left: 0px; width: 100%; right: 0; margin-left: 0; overflow: inherit; }
}

@include media("<=md") {
    .navbar-header {
        float: none;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none!important; margin: 0;
    }
    .navbar-nav > li {
        float: none;
    }
}

/* //Pour faire apparaitre button collapse a 992px */