/* ============================================================ Roar.2026.css — Notifications LIVE · design sp2026 Utilisé via js/Roar.js sur live.php Structure générée par le JS :

← fond (opacity:0.7 inline → surchargé)

…

← dossard + type pointage

…

← temps + identité

============================================================ */ /* ── Conteneur positionneur (injecté dans ) ─────────── */ .roar-body { position: fixed; /* fixed → ancré au viewport, insensible au scroll */ font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.4; z-index: 7000; pointer-events: none; /* transparent aux clics en-dehors des bulles */ } /* ── Carte notification ───────────────────────────────────── */ .roar { position: absolute; width: 300px; box-sizing: border-box; cursor: pointer; z-index: 7000; border-radius: 16px; overflow: hidden; border-left: 5px solid #1f9d57; /* vert live */ pointer-events: auto; /* les bulles restent cliquables */ box-shadow: 0 16px 40px rgba(10, 28, 50, 0.40), 0 4px 12px rgba(10, 28, 50, 0.22), inset 0 0 0 1px rgba(255,255,255,0.06); } /* ── Fond dégradé (override de l'opacity:0.7 inline de Roar.js) */ .roar-bg { position: absolute; z-index: 1000; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(145deg, #0d2840 0%, #143354 55%, #1b537f 100%); border-radius: 16px; opacity: 1 !important; /* surcharge l'inline opacity:0.7 */ } /* ── En-tête (dossard · type de pointage) ────────────────── */ .roar h3 { position: relative; z-index: 1002; margin: 0; padding: 11px 14px 10px 16px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #b8d4ef; display: flex; align-items: center; gap: 8px; } /* pastille "live" pulsante */ .roar h3::before { content: ""; flex-shrink: 0; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1f9d57; box-shadow: 0 0 7px #1f9d57; animation: roar2026-pulse 1.6s ease-in-out infinite; } /* ── En-tête top 3 (scratch / sexe / catégorie < 4) ─────── */ .roar h3.classe { background: linear-gradient(90deg, rgba(180, 128, 0, 0.28) 0%, rgba(220, 170, 0, 0.14) 100%); color: #ffe083; border-bottom: 1px solid rgba(220,170,0,0.20); } .roar h3.classe::before { background: #e8b800; box-shadow: 0 0 8px #e8b800; animation: roar2026-pulse-gold 1.6s ease-in-out infinite; } /* ── Corps (temps · identité) ────────────────────────────── */ .roar p { position: relative; z-index: 1002; margin: 0; padding: 10px 14px 15px 16px; font-size: 15px; font-weight: 700; color: #e6f2ff; line-height: 1.35; font-family: "Courier New", "Lucida Console", monospace; letter-spacing: 0.01em; } /* ── Corps féminin ───────────────────────────────────────── */ .roar p.rose { color: #ffb8d4; } /* ── Animations ──────────────────────────────────────────── */ @keyframes roar2026-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.82); } } @keyframes roar2026-pulse-gold { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #e8b800; } 50% { opacity: 0.5; transform: scale(0.80); box-shadow: 0 0 4px #e8b800; } }