/* ============================================================ LIVE-BANNER.CSS — Bandeau sticky-bottom "Luvreizel est en live". Inclus depuis utils/live_banner.html via footer (toutes pages sauf /calls). Caché par défaut, montré quand .is-live est posé sur , masquable via .is-dismissed (localStorage). ============================================================ */ .live-banner { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(140%); z-index: 950; display: flex; align-items: center; gap: 14px; padding: 16px 52px 16px 18px; max-width: 1100px; width: calc(100% - 32px); background: rgba(13, 27, 46, 0.62); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: var(--radius-md); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } body.is-live .live-banner:not(.is-dismissed) { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .live-banner-icon { width: 22px; height: 22px; flex-shrink: 0; display: block; object-fit: contain; } .live-banner-label { color: var(--c-rumble, #8bc34a); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; flex-shrink: 0; } .live-banner-text { color: var(--c-text); font-size: 14px; font-weight: 600; line-height: 1.35; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-banner-text strong { color: var(--c-primary); font-weight: 700; } .live-banner-sub-title { color: var(--c-text-muted); font-weight: 500; } .live-banner-sub-title::before { content: "·"; margin: 0 8px; color: var(--c-text-faint); } .live-banner-viewers { color: var(--c-text-muted); font-size: 12px; font-weight: 600; flex-shrink: 0; } .live-banner-viewers[hidden] { display: none; } .live-banner-actions { display: flex; gap: 8px; flex-shrink: 0; } .live-banner-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; text-decoration: none; transition: var(--transition); flex-shrink: 0; border: 1px solid transparent; } .live-banner-btn--primary { background: var(--c-primary); color: #0a1428; } .live-banner-btn--primary:hover { background: var(--c-primary-light); transform: translateY(-1px); } .live-banner-btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); } .live-banner-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--c-primary-border); color: var(--c-primary); } .live-banner-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; color: var(--c-text-muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; transition: var(--transition); } .live-banner-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--c-text); } @media (max-width: 720px) { .live-banner { bottom: 18px; gap: 10px; padding: 14px 44px 14px 14px; flex-wrap: wrap; width: calc(100% - 20px); } .live-banner-text { flex: 1 1 100%; order: 3; font-size: 13px; white-space: normal; } .live-banner-sub-title::before { display: none; } .live-banner-sub-title { display: block; font-size: 12px; margin-top: 2px; } .live-banner-viewers { font-size: 11px; } .live-banner-actions { order: 4; flex: 1 1 100%; } .live-banner-btn { padding: 7px 12px; font-size: 12px; flex: 1 1 auto; justify-content: center; } } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .live-banner { transition: opacity 0.15s ease; transform: translateX(-50%); } body.is-live .live-banner:not(.is-dismissed) { transform: translateX(-50%); } }