/* French overrides.
 *
 * Loaded by header.php only when the page is in French, so English visitors never
 * download it. Add css/lang/<code>.css for any other language and it is picked up
 * automatically - no edit to the header.
 *
 * French runs about 23% longer than English overall, and short UI labels grow far
 * more than that: "Soon" becomes "Bientôt", "Docs" becomes "Documentation". The
 * rules below give the few genuinely tight spots the room they need. Anything that
 * simply reflows is left alone.
 */

/* Language menu: the name column is nowrap + ellipsis, so a wider badge eats the
   language name. Let the badge shrink and give the name the space back. */
html[lang="fr"] .pot-lang-soon {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 8px;
    padding: 2px 5px;
    letter-spacing: .2px;
}
html[lang="fr"] .pot-lang-name {
    min-width: 0;
}

/* The header account button is a fixed 80px in the shared stylesheet; the French
   label needs to wrap rather than be clipped. */
html[lang="fr"] .actions-section .w-80px {
    width: auto !important;
    min-width: 80px;
}

/* Nav items: French labels are longer, so let the bar breathe a little instead of
   forcing a second row on mid-size screens. */
@media (min-width: 992px) and (max-width: 1399px) {
    html[lang="fr"] .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Buttons whose English label is one word and whose French label is three. */
html[lang="fr"] .btn.btn-switch-text.btn-small > span,
html[lang="fr"] .btn.btn-switch-text.btn-very-small > span {
    white-space: normal;
    line-height: 1.25;
}