/* ==================================================== i18n.css — Sélecteur de langue (FR / EN / ES / DE) Affiche uniquement le drapeau actif ; menu déroulant au clic. À inclure dans de toute page qui affiche le switcher. ==================================================== */ .lang-switcher { position: relative; display: inline-block; } /* Déclencheur : drapeau actif + chevron (élément de
) */ .lang-switcher__current { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.15s, border-color 0.15s; } .lang-switcher__current::-webkit-details-marker { display: none; } /* masque la flèche native (WebKit) */ .lang-switcher__current::marker { content: ''; } /* idem Firefox */ .lang-switcher__current:hover { background: rgba(255, 255, 255, 0.95); } /* Drapeaux SVG */ .lang-flag-wrap { display: inline-flex; line-height: 0; } .lang-flag { width: 22px; height: 15px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } /* Chevron */ .lang-switcher__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #64748b; transition: transform 0.15s; } .lang-switcher[open] .lang-switcher__caret { transform: rotate(180deg); } /* Menu déroulant */ .lang-switcher__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000; min-width: 168px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .lang-switcher__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; text-decoration: none; color: #1e293b; font-size: 0.85rem; font-weight: 600; transition: background 0.12s; } .lang-switcher__option:hover { background: rgba(0, 0, 0, 0.05); } .lang-switcher__option.is-active { background: #eef2ff; color: #2563eb; } .lang-switcher__label { white-space: nowrap; } /* Variante compacte */ .lang-switcher--compact .lang-switcher__current { padding: 3px 7px; gap: 4px; } .lang-switcher--compact .lang-flag { width: 20px; height: 13px; }