/* ========================================================================== Internationalization (i18n) Language switcher + visibility rules ========================================================================== */ /* ----- Switch langue ------------------------------------------------------ */ .lang-switcher { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--stroke); border-radius: 999px; overflow: hidden; padding: 2px; } .lang-btn { padding: 6px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; border: none; background: transparent; color: var(--muted); border-radius: 999px; transition: background .2s ease, color .2s ease; font-family: inherit; } .lang-btn.active { background: var(--accent); color: var(--accent-ink); } .lang-btn:hover:not(.active) { color: var(--text); } .lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ----- Règles de visibilité ----------------------------------------------- */ /* Par défaut (anglais actif) : - FR masqué - EN visible Quand : - FR visible - EN masqué */ /* FR masqué par défaut */ [data-lang="fr"] { display: none !important; } /* EN visible par défaut — `revert` rend la valeur d'origine (block pour div, inline pour span, inline-block pour bouton, etc.) sans imposer "block". */ [data-lang="en"] { display: revert; } span[data-lang="en"], a[data-lang="en"] { display: inline; } /* Mode FR actif — symétrique */ html.fr [data-lang="fr"] { display: revert !important; } html.fr span[data-lang="fr"], html.fr a[data-lang="fr"] { display: inline !important; } html.fr [data-lang="en"] { display: none !important; }