/** * Language switcher FR/EN — composant léger, intégrable dans n'importe quelle nav. * Design : pill compact avec 2 segments (FR | EN), animation subtile sur l'actif. */ .lang-switch { display: inline-flex; align-items: center; background: #F4F6FB; border: 1px solid #E2E6F3; border-radius: 100px; padding: 2px; font-size: 12px; font-weight: 600; line-height: 1; flex-shrink: 0; } .lang-switch a, .lang-switch button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 100px; text-decoration: none; color: #5A607E; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: inherit; transition: color .15s, background .15s; -webkit-tap-highlight-color: transparent; min-width: 30px; } .lang-switch a:hover, .lang-switch button:hover { color: #040253; } .lang-switch a.active, .lang-switch button.active { background: #fff; color: #0a0bf5; box-shadow: 0 1px 2px rgba(4, 2, 83, 0.08); } /* Fallback CSS-only : active state basé sur pour ne pas dépendre du JS lang-switch.js */ html[lang="fr"] .lang-switch a[data-lang="fr"], html[lang="fr"] .lang-switch button[data-lang="fr"], html[lang="en"] .lang-switch a[data-lang="en"], html[lang="en"] .lang-switch button[data-lang="en"] { background: #fff; color: #0a0bf5; box-shadow: 0 1px 2px rgba(4, 2, 83, 0.08); } /* Variant dark */ html[lang="fr"] .lang-switch--dark a[data-lang="fr"], html[lang="fr"] .lang-switch--dark button[data-lang="fr"], html[lang="en"] .lang-switch--dark a[data-lang="en"], html[lang="en"] .lang-switch--dark button[data-lang="en"] { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; } /* Petit drapeau optionnel pour les emojis */ .lang-switch .lang-flag { margin-right: 4px; font-size: 11px; } /* Variation dark mode (pour la nav mobile menu fond blanc, ne change rien) */ @media (max-width: 480px) { .lang-switch { font-size: 11px; } .lang-switch a, .lang-switch button { padding: 5px 10px; min-width: 28px; } } /* Quand le switch est dans un fond ink (footer, top bar dark) */ .lang-switch--dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } .lang-switch--dark a, .lang-switch--dark button { color: rgba(255, 255, 255, 0.65); } .lang-switch--dark a:hover, .lang-switch--dark button:hover { color: #fff; } .lang-switch--dark a.active, .lang-switch--dark button.active { background: rgba(255, 255, 255, 0.12); color: #fff; }