/* Sélecteur de langue partagé — Le Radar, Pomo et Solitaire. */ .translate-control { position: relative; flex-shrink: 0; overflow: visible; } .translate-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; max-width: min(100%, 42vw); margin: 0; padding: 6px 10px 7px 8px; border: 1px solid var(--rule, rgba(255, 255, 255, 0.18)); border-radius: 999px; background: var(--bg-soft, rgba(255, 255, 255, 0.08)); color: var(--ink-soft, rgba(255, 255, 255, 0.78)); font: 600 12px/1.25 var(--sans, var(--font-body, system-ui, sans-serif)); letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; } .translate-toggle:hover, .translate-toggle[aria-expanded="true"] { border-color: var(--accent, #d99b57); color: var(--accent, #f3c58e); background: color-mix(in srgb, var(--accent, #d99b57) 10%, transparent); } .radar-translate-control--app .translate-toggle { border: 0; background: transparent; color: var(--chrome-text, rgba(255, 255, 255, 0.72)); /* Les mini-apps ont leur propre chrome : reprendre exactement sa métrique plutôt que la taille héritée du document (souvent 16 px). */ font-family: var(--font-body, var(--sans, system-ui, sans-serif)); font-size: var(--tb-font, 0.8rem); font-weight: 400; letter-spacing: var(--tb-ls, 0.03em); line-height: 1.2; padding: 0.42rem 0.72rem; } .radar-translate-control--app .translate-toggle:hover, .radar-translate-control--app .translate-toggle[aria-expanded="true"] { border-color: transparent; color: var(--chrome-text-strong, rgba(255, 255, 255, 0.95)); background: var(--chrome-hover, rgba(255, 255, 255, 0.1)); } .translate-toggle__icon, .translate-toggle__chev { display: inline-flex; flex-shrink: 0; opacity: 0.85; } .translate-toggle__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } .radar-translate-control--app .translate-toggle__label { /* Le libellé peut être hydraté après chargement : verrouiller les mêmes métriques que le bouton pour éviter toute remontée à la taille du body. */ font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } .translate-toggle__chev { transition: transform 0.2s ease; } .translate-toggle[aria-expanded="true"] .translate-toggle__chev { transform: rotate(180deg); } .translate-menu, .radar-translate-control--app .translate-menu, .translate-menu--app { position: fixed; /* Au-dessus du tuner (100) et des FABs (180). Le panneau est porté dans : un z-index ici n’est plus enfermé dans .wire. */ z-index: 10000; display: flex; flex-direction: column; gap: 0; box-sizing: border-box; width: 320px; min-width: 240px; max-width: calc(100dvw - 24px); max-height: min(85dvh, 640px); padding: 6px; overflow: hidden; border: 1px solid var(--rule, var(--settings-border, rgba(255, 255, 255, 0.16))); border-radius: 12px; background: var(--bg, var(--settings-bg-solid, #1d1a18)); color: var(--ink, var(--text-primary, #f5f1eb)); box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.5); isolation: isolate; } .translate-menu[hidden], .radar-translate-control--app .translate-menu[hidden], .translate-menu--app[hidden] { display: none !important; } /* Pomo/Solitaire ont encore .lang-dropdown.open { display:block } : 3 classes pour que le panneau reste une colonne flex (liste interne scrollable). */ .translate-menu.open, .lang-dropdown.translate-menu, .lang-dropdown.translate-menu.open, .radar-translate-control--app .translate-menu.open, .translate-menu--app.open { display: flex; flex-direction: column; overflow: hidden; animation: none; } .translate-menu__chrome { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 0; background: var(--bg, var(--settings-bg-solid, #1d1a18)); } .translate-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 0 8px; } .translate-menu__title { min-width: 0; color: var(--ink, var(--text-primary, #f5f1eb)); font: 700 13px/1.2 var(--sans, var(--font-body, system-ui, sans-serif)); } .translate-menu__close { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted, var(--text-muted, #a9a29a)); font: 500 22px/1 var(--sans, var(--font-body, system-ui, sans-serif)); cursor: pointer; } .translate-menu__close:hover, .translate-menu__close:focus-visible { background: var(--bg-soft, rgba(255, 255, 255, 0.08)); color: var(--ink, var(--text-primary, #f5f1eb)); outline: 0; } .translate-menu__close:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d99b57) 45%, transparent); } .translate-menu__list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .translate-menu__search-wrap { margin: 0 0 4px; padding: 4px 4px 8px; border-bottom: 1px solid var(--rule, var(--settings-border, rgba(255, 255, 255, 0.16))); background: var(--bg, var(--settings-bg-solid, #1d1a18)); } .translate-menu__search-field { position: relative; display: flex; align-items: center; } .translate-menu__search-icon { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted, var(--text-muted, #a9a29a)); pointer-events: none; } .translate-menu__search { box-sizing: border-box; width: 100%; padding: 8px 10px 8px 34px; border: 1px solid var(--rule, var(--settings-border, rgba(255, 255, 255, 0.16))); border-radius: 8px; outline: 0; appearance: none; background: var(--bg-soft, var(--settings-bg-solid, #f8f5f1)); color: var(--ink, var(--text-primary, #f5f1eb)); font: 500 13px/1.3 var(--sans, var(--font-body, system-ui, sans-serif)); } .translate-menu__search:focus { border-color: var(--accent, #d99b57); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d99b57) 25%, transparent); } .radar-translate-control--app .translate-menu__search, .translate-menu--app .translate-menu__search { background: var(--settings-bg-solid, #fcf9f6); } .translate-menu__group[hidden], .translate-menu__opt[hidden] { display: none !important; } .translate-menu__sep { margin: 6px 4px 2px; padding: 4px 6px 2px; border-top: 1px solid var(--rule, var(--settings-border, rgba(255, 255, 255, 0.16))); } .translate-menu__group:first-of-type .translate-menu__sep { border-top: 0; margin-top: 2px; } .translate-menu__sep-label { color: var(--muted, var(--text-muted, #a9a29a)); font: 700 10px/1.3 var(--sans, var(--font-body, system-ui, sans-serif)); letter-spacing: 0.04em; text-transform: uppercase; } .translate-menu__opt, .radar-translate-control--app .translate-menu__opt, .translate-menu--app .translate-menu__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink, var(--text-primary, #f5f1eb)); text-align: left; font-family: var(--sans, var(--font-body, system-ui, sans-serif)); cursor: pointer; } .translate-menu__opt:hover, .translate-menu__opt:focus-visible { background: var(--bg-soft, rgba(255, 255, 255, 0.08)); outline: 0; } .translate-menu__opt.is-active { background: color-mix(in srgb, var(--accent, #d99b57) 16%, transparent); } .translate-menu__opt.is-active .translate-menu__name::before { content: "✓ "; color: var(--accent, #d99b57); font-weight: 800; } .translate-menu__opt.is-unavailable { opacity: 0.52; cursor: help; } .translate-menu__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; } .translate-menu__name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; line-height: 1.2; } .radar-translate-control--app .translate-menu__name, .radar-translate-control--app .translate-menu__sep-label, .radar-translate-control--app .translate-menu__code, .translate-menu--app .translate-menu__name, .translate-menu--app .translate-menu__sep-label, .translate-menu--app .translate-menu__code { font-weight: 500; } .translate-menu__code { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--rule, var(--settings-border, rgba(255, 255, 255, 0.16))); border-radius: 999px; color: var(--muted, var(--text-muted, #a9a29a)); background: var(--bg-soft, rgba(255, 255, 255, 0.07)); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } .translate-menu__hint { max-width: 100%; color: var(--muted, var(--text-muted, #a9a29a)); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; } .translate-menu[data-filter-empty="1"] .translate-menu__list::after { content: "Aucune langue"; display: block; padding: 12px 10px; color: var(--muted, #aaa); font-size: 12px; text-align: center; } .lang-translating { pointer-events: none; } /* Busy = signal visuel seulement. Interdire le clic coincait le sélecteur après le premier choix (overlay encore en cours). */ html[data-translate-busy="1"] .translate-toggle { opacity: 0.9; } @media (max-width: 479px) { .translate-menu, .radar-translate-control--app .translate-menu, .translate-menu--app { min-width: 0; } } @media (pointer: coarse) { .translate-menu__close { width: 44px; height: 44px; } } /* Chrome compact des mini-apps : sur mobile, l’icône universelle suffit. */ @media (max-width: 600px) { .radar-translate-control--app .translate-toggle__label, .radar-translate-control--app .translate-toggle__chev { display: none; } .radar-translate-control--app .translate-toggle { gap: 0; padding: 0.42rem; } } /* Les navigateurs tactiles conservent parfois :hover après un tap. L'état ouvert reste visible via aria-expanded, mais un bouton refermé redevient immédiatement neutre. */ @media (hover: none) { .radar-translate-control--app .translate-toggle:hover:not([aria-expanded="true"]) { background: transparent; color: var(--chrome-text, rgba(255, 255, 255, 0.72)); } } @media (prefers-reduced-motion: reduce) { .translate-toggle__chev { transition: none; } }