/* -------------------------------------------------------------
   MONIA COMMON UI — styles partagés des switchers nav
   -------------------------------------------------------------
   Chargé par toutes les pages hors /app/ pour donner aux nav
   un sélecteur de langue et un toggle thème cohérents.
   Utilise les variables CSS de chaque page-hôte (--bg, --fg, --acid).
   ------------------------------------------------------------- */

.nav-controls {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

/* ──────────── Sélecteur de langue ──────────── */
.nav-lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(255, 255, 255, 0.04);
    color: var(--fg, #ffffff);
    border: 1px solid var(--border, var(--line, #1f2937));
    padding: .35rem .55rem;
    font: 700 .68rem var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    text-align: center;
    text-align-last: center;
    min-width: 50px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.nav-lang-select:hover {
    border-color: var(--acid, #ccff00);
    color: var(--acid, #ccff00);
}

.nav-lang-select:focus-visible {
    outline: 1px solid var(--acid, #ccff00);
    outline-offset: 1px;
}

.nav-lang-select option {
    background: var(--bg, #050505);
    color: var(--fg, #ffffff);
    font-family: var(--font-mono);
}

body.light-theme .nav-lang-select {
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .nav-lang-select option {
    background: var(--bg, #f8f9fa);
    color: var(--fg, #1a1a1a);
}

/* ──────────── Bouton toggle thème ──────────── */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 1px solid var(--border, var(--line, #1f2937));
    color: var(--fg, #ffffff);
    cursor: pointer;
    border-radius: 0;
    transition: border-color .2s ease, color .2s ease, transform .15s ease;
}

.nav-theme-toggle:hover {
    border-color: var(--acid, #ccff00);
    color: var(--acid, #ccff00);
    transform: translateY(-1px);
}

.nav-theme-toggle:active {
    transform: translateY(0);
}

.nav-theme-toggle:focus-visible {
    outline: 1px solid var(--acid, #ccff00);
    outline-offset: 1px;
}

.nav-theme-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

/* En light theme, on flip l'icône contrast pour suggérer le bascule */
body.light-theme .nav-theme-toggle svg {
    transform: rotate(180deg);
}

/* ──────────── Responsive ──────────── */
@media (max-width: 480px) {
    .nav-controls {
        gap: .4rem;
    }
    .nav-lang-select {
        font-size: .62rem;
        padding: .3rem .4rem;
        min-width: 44px;
    }
    .nav-theme-toggle {
        width: 30px;
        height: 30px;
    }
}

/* Respect des préférences d'animation système */
@media (prefers-reduced-motion: reduce) {
    .nav-theme-toggle,
    .nav-theme-toggle svg,
    .nav-lang-select {
        transition: none;
    }
}