/* =============================================================
   Language switcher ("Français" / "English"), header of both layouts
   and language block of the mobile menu (#block-locale-language).
 ============================================================ */

#langSwitcher {
    float: right;
    margin-top: 12px;
}

.lang-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lang-switcher li {
    display: inline-block;
    margin-left: 14px;
}

.lang-switcher a {
    color: #fff;
    font-family: 'Muli', sans-serif;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.lang-switcher li.active a {
    font-weight: bold;
    text-decoration: underline;
}

.lang-switcher .lang-flag {
    width: 20px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/*
   Mobile menu block: one language per line, dark text on the light background, the size
   of the neighbouring links (16px / 26px). This stylesheet is linked before the layouts'
   (base.html.twig: moyens.css must stay last), whose ".menu-mobile .header-lang a" rules
   carry one id and four classes: the selectors below carry two ids to win regardless of
   the link order (equal specificity would lose to the later stylesheet).
*/
#navigation #block-system-main-menu > .content .menu-mobile .header-lang {
    width: auto; /* the legacy 85px box (40px of padding) is too narrow for "Français" + flag */
}

#navigation #block-locale-language .lang-switcher li {
    display: block;
    margin: 0;
}

#navigation #block-locale-language .lang-switcher a {
    color: #464545;
    font-size: 16px;
    line-height: 26px;
}

/*
   The mobile navigation (#navigation, displayed by both layouts from 991px down) carries
   the switcher in its language block: the header one disappears at the same breakpoint.
*/
@media (max-width: 991px) {
    #langSwitcher {
        display: none;
    }
}

/*
   320px menu (276px inside): the language column now takes its content width (about 88px),
   so the external links list shrinks to its content too (about 168px instead of the legacy
   fixed 180px), else it drops under the languages between 421 and 640px.
*/
@media (max-width: 640px) {
    #navigation #block-menu-menu-header .content ul {
        width: auto;
    }
}