.tw-widget { position: fixed; bottom: 20px; right: 20px; z-index: 999999; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; } /* Mode "header" : placé dans un conteneur existant de ta page via data-container="#selecteur" — plus de position flottante, le widget suit le flux normal de ton header. */ .tw-widget.tw-inline { position: relative; bottom: auto; right: auto; display: inline-block; z-index: 100; } .tw-button { display: flex; align-items: center; gap: 8px; background: #1f2937; color: #fff; border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transition: background 0.15s ease, transform 0.1s ease; } .tw-widget.tw-inline .tw-button { box-shadow: none; background: transparent; color: inherit; border: 1px solid rgba(127, 127, 127, 0.3); } .tw-button:hover { background: #111827; transform: translateY(-1px); } .tw-widget.tw-inline .tw-button:hover { background: rgba(127, 127, 127, 0.1); transform: none; } .tw-button.tw-loading { opacity: 0.7; cursor: wait; } .tw-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; display: block; } .tw-caret { font-size: 10px; opacity: 0.7; margin-left: 2px; } .tw-menu { position: absolute; bottom: 48px; right: 0; background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); padding: 6px; min-width: 190px; max-height: 320px; overflow-y: auto; } /* Le menu en mode header est détaché du DOM du widget (attaché à ) pour échapper aux ancêtres avec transform/overflow qui cassent position:fixed. Sa position est calculée dynamiquement en JS. */ .tw-menu-detached { z-index: 999999; } .tw-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; border-radius: 6px; cursor: pointer; color: #1f2937; font-size: 14px; } .tw-menu-item:hover { background: #f3f4f6; } .tw-menu-item.tw-active { background: #eef2ff; color: #4338ca; font-weight: 600; }