/* ===== Live / Qui suis-je ===== */
:root { --twitch: #9146ff; --twitch-glow: rgba(145, 70, 255, 0.28); }

/* Bandeau accueil */
.live-banner {
    display: flex; align-items: center; gap: 22px;
    padding: 22px 26px; border-radius: 18px;
    background:
        radial-gradient(ellipse 55% 120% at 0% 50%, var(--twitch-glow), transparent 70%),
        var(--bg-card);
    border: 1px solid rgba(145, 70, 255, 0.4);
}
.live-banner-ico {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px;
    display: grid; place-items: center; background: var(--twitch); color: #fff;
    box-shadow: 0 0 24px var(--twitch-glow);
}
.live-banner-txt { flex: 1 1 auto; min-width: 0; }
.live-banner-txt h2 { margin: 0 0 4px; font-size: 1.2rem; }
.live-banner-txt p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.live-banner-btns { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

.live-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.live-btn:hover { transform: translateY(-1px); }
.live-btn-twitch { background: var(--twitch); color: #fff; }
.live-btn-twitch:hover { box-shadow: 0 6px 22px var(--twitch-glow); }
.live-btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.live-btn-ghost:hover { border-color: var(--twitch); }
.live-btn-tiktok { background: #111; color: #fff; border-color: #2a2a2a; }

/* Page Qui suis-je */
.live-hero {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px;
    margin-bottom: 22px;
}
.live-player {
    position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
    background: #0b0b12; border: 1px solid rgba(145, 70, 255, 0.4);
    box-shadow: 0 0 40px rgba(145, 70, 255, 0.15);
}
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-player-ph {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
    color: var(--text-secondary); font-size: 0.9rem; padding: 20px;
}
.live-card {
    border-radius: 16px; padding: 22px; background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.live-card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.live-card p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 12px; }
.live-tag {
    display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--twitch); margin-bottom: 10px;
}
.live-tag::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d;
    box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }
.live-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.live-item { border-radius: 14px; padding: 18px; background: var(--bg-card); border: 1px solid var(--border-color); }
.live-item b { display: block; margin-bottom: 6px; font-size: 1rem; }
.live-item span { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }
.live-item-ico { font-size: 1.4rem; display: block; margin-bottom: 8px; }

.live-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.live-perso {
    text-align: center; padding: 16px 10px; border-radius: 14px;
    background: var(--bg-surface); border: 1px solid var(--border-color);
}
.live-perso img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 8px; }
.live-perso b { display: block; font-size: 0.92rem; }
.live-perso small { color: var(--text-muted); font-size: 0.78rem; }
.live-perso.is-main { border-color: var(--twitch); }

/* Ligne dans le Guide Leveling */
.lvl-live-hint {
    display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 18px;
    padding: 8px 14px; border-radius: 999px; font-size: 0.86rem;
    background: rgba(145, 70, 255, 0.1); border: 1px solid rgba(145, 70, 255, 0.3); color: var(--text-secondary);
}
.lvl-live-hint a { color: var(--twitch); font-weight: 600; text-decoration: none; }
.lvl-live-hint a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .live-hero { grid-template-columns: 1fr; }
    .live-grid { grid-template-columns: 1fr; }
    .live-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .live-banner { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }
    .live-banner-btns { width: 100%; }
    .live-banner-btns .live-btn { flex: 1 1 auto; justify-content: center; }
    .live-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lvl-live-hint { border-radius: 12px; }
}
html.light-theme .live-player { background: #1a1625; }
@media (prefers-reduced-motion: reduce) { .live-tag::before { animation: none; } }
/* Appli overlay : onglets des deux guides côte à côte, compacts */
html.overlay-mode .lvl-routes { flex-wrap: nowrap; gap: 8px; }
html.overlay-mode .lvl-route { flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: 10px; }
html.overlay-mode .lvl-route-label { font-size: .85rem; }
html.overlay-mode .lvl-route-short { font-size: .72rem; }
html.overlay-mode .lvl-live-hint { display: flex; flex-wrap: wrap; font-size: .8rem; border-radius: 10px; margin-top: 0; }
/* Appli overlay : barre de recherche en haut */
.ov-search { display: none; }
html.overlay-mode .ov-search {
    display: flex; align-items: center; gap: 8px; width: 100%;
    position: sticky; top: 6px; z-index: 50; margin: 4px 0 12px;
    padding: 9px 14px; border-radius: 999px; cursor: text; text-align: left;
    font: 500 .86rem Inter, system-ui, sans-serif; color: var(--text-muted);
    background: rgba(13, 17, 32, .92); border: 1px solid var(--border-green);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html.overlay-mode .ov-search:hover { border-color: var(--zaap-cyan); color: var(--text-secondary); }
html.overlay-mode.light-theme .ov-search { background: rgba(255,255,255,.92); }