/* screen edge spacing */
nav#component-header {
    margin: 0;
    padding: 0 3rem;
}
@media (min-width: 1200px) {
    nav#component-header {
        padding: 0 2%;
    }
}

/*** BOOTSTRAP ***/
/* Forking from the default bootstrap styling */
#component-header .bootstrap-select .dropdown-toggle {
    padding: 0;
}

/*** LAYOUT ***/
#component-header #nav-line, #component-header #nav-popup-line {
    height: 8rem;
}

#component-header #nav-line {
    position: relative;
    z-index: 10;
}
#component-header #nav-line #nav-line-logo {
    width: 20rem;
}
@media (min-width: 1200px) {
    #component-header #nav-line #nav-line-logo {
        width: 25rem;
    }
}
#component-header #nav-line #nav-line-navigation {
    min-width: 60rem;
    max-width: 100rem;
    flex: 1 0 auto;
}

#component-header #nav-line #nav-line-toolbox .nav-cta {
    margin: 0 0.6vw;
}
#component-header #nav-line #nav-line-toolbox .nav-cta:first-child {
    margin-left: 0; /* saving some space for the `$navbarState specific` section bellow */
}
#component-header #nav-line #nav-line-toolbox .nav-cta:last-child {
    margin-right: 0; /* saving some space for the `$navbarState specific` section bellow */
}
#component-header #nav-line #nav-line-mobile-ctas {
    width: 8rem;
}
#component-header #nav-line #nav-line-mobile-ctas .nav-cta-cart {
    margin-right: auto;
}

#component-header #nav-popup {
    xheight: 100%;
    /*min-height: 54rem;*/
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    z-index: 5;
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: nowrap; /* Prevent text to wrap line during the open/close animation */
}
#component-header #nav-popup #nav-popup-navigation {
    flex-grow: 1; /* Growing to fill `#nav-popup` available height */
}
#component-header #nav-popup #nav-popup-navigation > a {
    margin: 2rem 0;
}
#component-header #nav-popup #nav-popup-toolbox {
    height: 8rem; /* To be the same as `#nav-line` */
}
#component-header #nav-popup #nav-popup-toolbox .nav-cta {
    margin: 0 15px;
}

/* `#nav-line` and `#nav-popup` */
#component-header .nav-cta-home,
#component-header .nav-cta-home img {
    width: 100%;
}

/* $navbarState specific */
#component-header.navbar-auth-en #nav-line #nav-line-navigation,
#component-header.navbar-guest-en #nav-line #nav-line-navigation,
#component-header.navbar-auth-fr #nav-line #nav-line-navigation,
#component-header.navbar-guest-fr #nav-line #nav-line-navigation {
    padding-left: 3vw;
    padding-right: 3vw;
}

#component-header.navbar-auth-en #nav-line #nav-line-toolbox,
#component-header.navbar-guest-en #nav-line #nav-line-toolbox {
    min-width: 15rem; /*
        `#nav-line-toolbox .nav-cta` margins will apply 6 times
        without margins (above) between items, navbar-auth-en, font-L5; needs ~219.8px (round up + 10px : 23rem)
    */
}
#component-header.navbar-auth-fr #nav-line #nav-line-toolbox,
#component-header.navbar-guest-fr #nav-line #nav-line-toolbox {
    min-width: 15rem; /*
        `#nav-line-toolbox .nav-cta` margins will apply 6 times
        without margins (above) between items, navbar-auth-fr, font-L5; needs ~225.4px (round up + 10px : 23.6rem)
    */
}


/* dropdown carret */
/* Forking from the default bootstrap styling */
#component-header .bootstrap-select .dropdown-toggle::after {
    content: url('/250757/assets/icons/picto-carret-down-c14.svg');
}

#component-header [data-page].active #input-account_action .bootstrap-select .dropdown-toggle::after,
#component-header #input-market_selector .bootstrap-select .dropdown-toggle::after {
    content: url('/250757/assets/icons/picto-carret-down-c2.svg');
}

/* 
 * CSS Just in case the JS to remove the element takes a while to execute
 * JS code located in the common-add.js
 * TODO: Find a way to really block any access to undesired page.
*/
/*#component-header [data-page="about-page"],*/
#component-header [data-page="service-page"],
#component-header [data-page="brand-page"],
#component-header [data-page="publication-page"],
/*#component-header [data-page="contact-page"],*/
#component-header [data-page="careers-page"],
#component-header #input-menu_action {
    display: none !important;
}

#component-header .nav-cta-home img {
    width: 100%;
    height: 4.5rem;
}

#nav-line-navigation>a {
    margin: 0 5rem;
}