.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226, 230, 240, 0.82);
}

.navbar {
    min-height: 88px;
    display: grid;
    /* Brand and utilities take their intrinsic width; the nav capsule gets what
       is left and centres inside it. `1fr auto 1fr` did the opposite — the
       centred capsule kept its full width and squeezed the side columns, so a
       wide nav (signed-in admin, or a locale with longer labels) clipped the
       logo. Now the capsule is the thing that yields. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.brand-cluster {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Never shrink the wordmark: the capsule absorbs the pressure instead. */
    min-width: 0;
    flex: 0 0 auto;
    margin-left: -12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    min-width: 0;
    text-decoration: none;
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), #9e9bd1);
    color: white;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(124, 121, 184, 0.35);
    flex-shrink: 0;
}

/* The LangoMove symbol replaces the "LM" text in the brand header.
   The <img> carries inline width/height so it stays the right size even
   if this stylesheet is cached or fails to load. Responsive override at
   the bottom of this file shrinks both attributes via the .brand-logo
   class on small screens. */
.brand-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-title {
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.1;
    color: var(--text);
}

.brand-subtitle {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: nowrap;
}

.desktop-nav-wrap {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.nav-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    padding: 6px;
    border-radius: 999px;
    background: #f6f7fc;
    border: 1px solid #e5e8f2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.nav-links > a,
.nav-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: 0.18s ease;
    list-style: none;
}

.nav-links > a:hover,
.nav-more > summary:hover {
    background: #ffffff;
    color: var(--primary-dark);
    box-shadow: 0 6px 14px rgba(34, 42, 70, 0.08);
}

.nav-more {
    position: relative;
}

.nav-more > summary {
    user-select: none;
}

.nav-more > summary::-webkit-details-marker {
    display: none;
}

.nav-more > summary::after {
    content: "▾";
    font-size: 0.72rem;
    margin-left: 8px;
    opacity: 0.7;
}

.nav-more[open] > summary {
    background: #ffffff;
    color: var(--primary-dark);
    box-shadow: 0 6px 14px rgba(34, 42, 70, 0.08);
}

.nav-more-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e5e8f2;
    border-radius: 18px;
    box-shadow: 0 18px 35px rgba(34, 42, 70, 0.12);
    display: grid;
    gap: 6px;
}

.nav-more-menu a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.93rem;
    transition: 0.18s ease;
}

.nav-more-menu a:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

/* Separate the raw Django backend from the curated admin tools. */
.nav-more-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 6px 4px;
}

.nav-more-advanced {
    font-size: 0.82rem !important;
    font-weight: 600;
    opacity: 0.75;
}

.nav-admin-brand-menu {
    flex: 0 0 auto;
}

.nav-utilities {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    justify-self: end;
}

/* Admin entry — a labeled accent pill in the right utilities (replaces the old
   unlabeled gear stranded left of the logo). Reuses the .nav-more dropdown. */
.nav-util-admin > summary {
    background: var(--accent);
    color: var(--primary-dark);
    gap: 7px;
}
.nav-util-admin > summary:hover,
.nav-util-admin[open] > summary {
    background: #e0e5fa;
    color: var(--primary-dark);
}

.nav-utility-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.93rem;
    transition: 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
}

.nav-utility-link:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.nav-utility-link-strong {
    background: #f2f3fb;
    color: var(--primary-dark);
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(124, 121, 184, 0.08);
}

.nav-utility-link-strong:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* Icon-only nav utility — squared off pill that fits a 20×20 SVG with
   tight padding so it sits like a regular icon button. The visible
   label is replaced with an SVG; the text label is preserved in a
   .sr-only span and on the `title` attribute for hover tooltip. */
.nav-utility-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--muted);
}

.nav-utility-icon svg {
    flex-shrink: 0;
}

.nav-utility-icon:hover {
    color: var(--primary-dark);
}

/* Admin dropdown trigger when shown as an icon. The default <summary>
   styles in .nav-more set padding for a text label; this variant
   squares it up around the SVG. */
.nav-icon-summary {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    color: var(--muted);
    transition: 0.18s ease;
    list-style: none;
}

.nav-icon-summary::-webkit-details-marker {
    display: none;
}

.nav-icon-summary::marker {
    display: none;
}

.nav-icon-summary:hover,
details[open] > .nav-icon-summary {
    background: var(--accent);
    color: var(--primary-dark);
}

/* Hide the inherited chevron from `.nav-more > summary::after` when the
   summary is icon-only — the SVG carries the visual meaning and an
   appended ▾ would look like an extra random glyph. */
.nav-icon-summary::after {
    content: none !important;
}

/* Icon + label combo for CTAs like "Sign up" — uses the icon as an
   accent next to the wording so the button still reads as a strong CTA
   but matches the icon-driven vocabulary of the rest of the nav. */
.nav-utility-link-with-icon {
    gap: 6px;
    padding-left: 14px;
    padding-right: 16px;
}

.nav-utility-link-with-icon svg {
    flex-shrink: 0;
    margin-right: 2px;
}

/* ===== Language menu =====================================================
   Globe icon + current language short code (FR / EN / etc) as the trigger.
   Clicking opens a popover listing all languages with flags. Each option
   is a submit button on a single form, so picking a language POSTs the
   change to /i18n/setlang/ same as the old <select> did. */

.lang-menu {
    position: relative;
}

.lang-summary {
    width: auto;
    min-width: 68px;
    gap: 10px;
    padding: 0 14px;
}

/* Belt-and-braces: some browsers don't honour `gap` inside inline-flex
   summary elements. Add a bit of horizontal margin between the globe
   icon and the language code so they never sit kerned together. */
.lang-summary svg + .lang-code {
    margin-left: 2px;
}

.lang-code {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--primary-dark);
}

.lang-menu-list {
    min-width: 200px;
}

.lang-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: "Inter", sans-serif;
    font-size: 0.93rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: 0.15s ease;
}

.lang-option:hover {
    background: var(--accent) !important;
    color: var(--primary-dark) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.lang-option.is-current {
    background: rgba(124, 121, 184, 0.10) !important;
    color: var(--primary-dark) !important;
}

.lang-option-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.lang-option-name {
    flex: 1;
}

.lang-option-check {
    color: var(--primary);
    font-weight: 900;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(34, 42, 70, 0.06);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    width: 18px;
    height: 2px;
    background: #5f6488;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-panel {
    display: none;
    padding-bottom: 16px;
}

.mobile-nav-panel.is-open {
    display: block;
}

.mobile-nav-links {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(34, 42, 70, 0.12);
}

.mobile-nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration: none;
}

.mobile-nav-links a:active,
.mobile-nav-links a:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

/* Section label that introduces the admin group inside the mobile menu. */
.mobile-nav-group {
    margin: 8px 6px 2px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mobile-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-utilities {
    margin-top: 12px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(34, 42, 70, 0.08);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.page-section {
    padding: 24px 0;
}

/* Reusable single-line metric strip for admin page headers — replaces the
   multi-card stat grids. Counts are neutral (steady-state facts, not alerts);
   .ams-muted dims the data-gap counts. On Moderation the items are clickable
   jump-to-section links. */
.admin-metric-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--text);
}
.admin-metric-strip .ams-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    color: inherit;
}
.admin-metric-strip .ams-item strong { font-weight: 800; }
.admin-metric-strip .ams-item:not(:last-child)::after {
    content: "·";
    color: var(--border);
    margin: 0 14px;
}
.admin-metric-strip .ams-muted { color: var(--muted); }
.admin-metric-strip a.ams-item { transition: color 0.15s ease; }
.admin-metric-strip a.ams-item:hover { color: var(--primary-dark); }
.admin-metric-strip a.ams-item.is-active { color: var(--primary-dark); font-weight: 700; }

.section-header {
    margin-bottom: 22px;
}

.section-header h2,
.section-header h1 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.section-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    max-width: 780px;
}

.page-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.footer-note {
    margin-top: 50px;
    color: var(--muted);
    font-size: 0.95rem;
}

.site-footer {
    margin-top: 48px;
    background: #ffffff;
    border-top: 1px solid #eceef6;
}

.footer-container {
    padding-top: 42px;
    padding-bottom: 26px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 28px;
    border-bottom: 1px solid #eceef6;
}

.footer-brand-block {
    max-width: 520px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    margin-bottom: 18px;
}

.footer-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), #9e9bd1);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(124, 121, 184, 0.25);
}

.footer-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
}

.footer-brand-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
}

.footer-brand-subtitle {
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.2;
}

.footer-description {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social-link {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef0f7;
    border: 1px solid #ccd2e3;
    color: #3f4660;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
}

.footer-social-link:hover {
    background: var(--accent);
    color: var(--primary-dark);
    border-color: #d4d9e9;
}

.footer-links-block {
    min-width: 220px;
}

.footer-links-block h3 {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #8a90a8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-links-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.footer-links-block a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    transition: color 0.18s ease;
}

.footer-links-block a:hover {
    color: var(--primary-dark);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 22px;
}

.footer-copyright {
    margin: 0;
    color: #8a90a8;
    font-size: 0.96rem;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer-bottom-links a {
    text-decoration: none;
    color: #7b8197;
    font-size: 0.96rem;
    transition: color 0.18s ease;
}

.footer-bottom-links a:hover {
    color: var(--primary-dark);
}

@media (max-width: 1380px) {
    .brand-subtitle {
        display: none;
    }

    .navbar {
        grid-template-columns: auto 1fr auto;
    }

    .brand-cluster {
        gap: 10px;
        margin-left: -8px;
    }

    .nav-links > a,
    .nav-more > summary,
    .nav-utility-link {
        font-size: 0.86rem;
    }

    .nav-links > a,
    .nav-more > summary {
        padding: 0 9px;
    }
}

@media (max-width: 1160px) {
    .desktop-nav-wrap,
    .desktop-utilities {
        display: none;
    }

    .nav-admin-brand-menu {
        display: none;
    }

    .navbar {
        grid-template-columns: 1fr auto;
        min-height: 82px;
    }

    .nav-toggle {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }

    .footer-links-block {
        min-width: 0;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom-links {
        justify-content: flex-start;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .brand-logo {
        width: 42px;
        height: 42px;
    }

    .brand-title {
        font-size: 1rem;
    }

    .mobile-utilities {
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-utilities .nav-utility-link,
    .mobile-utilities .language-switcher {
        width: 100%;
    }

    .site-footer {
        margin-top: 56px;
    }

    .footer-container {
        padding-top: 30px;
        padding-bottom: 22px;
    }

    .footer-bottom-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ===== Accessible hidden label ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Language switcher ===== */
.language-switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.language-toggle-form {
    margin: 0;
}

.language-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.language-dropdown::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.2s ease;
}

.language-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 42px;
    padding: 0 38px 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(124, 121, 184, 0.16);
    background: linear-gradient(180deg, #ffffff 0%, #f6f7fc 100%);
    color: var(--primary-dark);
    font-family: "Inter", sans-serif;
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(34, 42, 70, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.language-select:hover {
    border-color: rgba(124, 121, 184, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f1f2fb 100%);
    box-shadow:
        0 10px 24px rgba(34, 42, 70, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.language-select:focus {
    outline: none;
    border-color: rgba(124, 121, 184, 0.45);
    box-shadow:
        0 0 0 4px rgba(124, 121, 184, 0.12),
        0 10px 24px rgba(34, 42, 70, 0.08);
}

.language-select:focus + .language-dropdown::after {
    color: var(--primary-dark);
}

.language-select option {
    color: var(--text);
    font-weight: 600;
    background: #ffffff;
}

/* ===== Better spacing with nav utilities ===== */
.desktop-utilities,
.mobile-utilities {
    gap: 12px;
}

/* ===== Mobile adjustments ===== */
@media (max-width: 900px) {
    .mobile-utilities .language-switcher {
        width: 100%;
    }

    .mobile-utilities .language-toggle-form,
    .mobile-utilities .language-dropdown,
    .mobile-utilities .language-select {
        width: 100%;
    }

    .mobile-utilities .language-select {
        min-height: 46px;
        border-radius: 16px;
        padding-left: 14px;
        padding-right: 40px;
        font-size: 0.95rem;
        justify-content: flex-start;
    }

    .mobile-utilities .language-dropdown::after {
        right: 16px;
    }
}

/* ===== Tightened mobile account utilities — match the nav list above ===== */
@media (max-width: 640px) {
    .mobile-utilities {
        gap: 2px;
        padding: 10px;
    }

    .mobile-utilities .nav-utility-link {
        justify-content: flex-start;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 12px;
        color: var(--text);
        font-weight: 600;
        font-size: 0.97rem;
    }

    .mobile-utilities .language-switcher {
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .mobile-utilities .language-select {
        min-height: 44px;
        border-radius: 12px;
    }
}

/* === Séquences hub in the navbar ======================================
   Option B+D: the product leads the capsule with a mark and darker ink, a
   hairline separates the pages that merely describe it, and the anchor opens a
   panel holding the two starter courses. Emphasis is position + weight + icon
   rather than a fill, so a filled pill can still mean "current page". */
.nav-hub { position: relative; display: inline-flex; }

.nav-links > .nav-hub > a.nav-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px 0 13px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links > .nav-hub > a.nav-primary:hover,
.nav-links > .nav-hub > a.nav-primary[aria-expanded="true"] {
    background: rgba(98, 95, 160, 0.10);
    color: var(--primary-dark);
}

.nav-primary-icon { display: inline-flex; color: var(--primary); }
.nav-primary-icon svg { display: block; }

.nav-hub-chev { display: inline-flex; color: var(--muted); transition: transform 0.18s ease; }
.nav-hub-chev svg { display: block; }
a.nav-primary[aria-expanded="true"] .nav-hub-chev { transform: rotate(180deg); }

/* Hairline between the product and the pages about it. */
.nav-links .nav-sep {
    width: 1px;
    height: 22px;
    margin: 0 5px;
    background: #dfe3f0;
    flex: 0 0 auto;
}

/* "You are here" stays distinct from "start here". */
.nav-links > a[aria-current="page"] {
    color: var(--text);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(32, 35, 48, 0.10);
}

.nav-hub-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    width: min(340px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 18px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 20px 44px rgba(32, 35, 48, 0.17);
    display: grid;
    gap: 2px;
}

/* The class sets display:grid, which would beat the UA's [hidden] rule. */
.nav-hub-panel[hidden] { display: none; }

.nav-hub-label {
    margin: 0;
    padding: 4px 8px 8px;
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav-hub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
}

.nav-hub-item:hover { background: var(--surface-soft); }
.nav-hub-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.nav-hub-flag {
    width: 26px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(32, 35, 48, 0.10);
}

.nav-hub-text { display: grid; gap: 2px; min-width: 0; }
.nav-hub-title { font-size: 0.86rem; font-weight: 700; line-height: 1.25; }
.nav-hub-meta { font-size: 0.72rem; color: var(--muted); line-height: 1.25; }

.nav-hub-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap between the two links, never inside a label — French and Polish
       both run long enough to break "Toutes les séquences" mid-phrase. */
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    padding: 10px 8px 3px;
    border-top: 1px solid var(--border);
}

.nav-hub-foot > a { white-space: nowrap; }

.nav-hub-all { font-size: 0.82rem; font-weight: 750; color: var(--primary); text-decoration: none; }
.nav-hub-all:hover { color: var(--primary-dark); text-decoration: underline; }
.nav-hub-propose { font-size: 0.8rem; font-weight: 650; color: var(--muted); text-decoration: none; }
.nav-hub-propose:hover { color: var(--primary-dark); }

/* Mobile drawer: the hub is a section of the stack, not a floating panel. */
.mobile-nav-primary {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
}
.mobile-nav-primary .nav-primary-icon { color: var(--primary); }

.mobile-nav-sub {
    display: flex !important;
    align-items: center;
    gap: 11px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 2px solid rgba(98, 95, 160, 0.22);
}

@media (max-width: 900px) {
    .nav-links .nav-sep { display: none; }
}


/* The navbar lives in a fixed 1180px container, so there is no extra room to be
   had from a wider viewport — trim unconditionally rather than behind a
   media query that can never fire. */
.nav-links > a,
.nav-more > summary,
.nav-links > .nav-hub > a.nav-primary {
    padding-left: 9px;
    padding-right: 9px;
}

/* The overflow entry sits inside the capsule, so its menu hangs from the left. */
.nav-links-more > .nav-more-menu {
    right: auto;
    left: 0;
    min-width: 190px;
}