/* ==========================================================================
   Lecteur Twitch flottant (module Stream)
   Mobile d'abord : une pastille « En direct » ; le lecteur s'ouvre au toucher,
   en pleine largeur. À partir de 992px, mini-lecteur en bas à droite façon
   picture-in-picture, ouvert d'office si le back-office le demande.
   ========================================================================== */

.stream-player {
    --stream-live: #e91916;
    --stream-bg: #18181b;
    --stream-fg: #efeff1;
    --stream-muted: #adadb8;
    --stream-gap: 0.75rem;

    position: fixed;
    right: var(--stream-gap);
    bottom: calc(var(--stream-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    font-family: var(--font-family, "Lato", sans-serif);
    color: var(--stream-fg);
}

.stream-player[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Pastille */

.stream-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2 * var(--stream-gap));
    padding: 0.35rem 0.4rem 0.35rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: var(--stream-bg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    animation: stream-in 0.35s ease-out both;
}

.stream-pill__open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.stream-pill__name {
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stream-pill__more { color: var(--stream-muted); font-size: 0.8rem; }

/* ---------------------------------------------------------------- Éléments communs */

.stream-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #3a3a3d;
    box-shadow: 0 0 0 2px var(--stream-live);
}

.stream-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--stream-live);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stream-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: stream-pulse 1.6s ease-in-out infinite;
}

.stream-icon-btn {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--stream-muted);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.stream-icon-btn:hover,
.stream-icon-btn:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--stream-fg); }

.stream-player :focus-visible {
    outline: 2px solid rgb(var(--secondary-rgb, 200, 121, 65));
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- Lecteur ouvert */

.stream-panel {
    position: fixed;
    left: var(--stream-gap);
    right: var(--stream-gap);
    bottom: calc(var(--stream-gap) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border-radius: 12px;
    background: var(--stream-bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    animation: stream-in 0.3s ease-out both;
}

.stream-panel__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.4rem 0.5rem 0.6rem;
}

.stream-panel__info { flex: 1; min-width: 0; }

.stream-panel__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.stream-panel__name span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.stream-panel__title {
    overflow: hidden;
    color: var(--stream-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stream-panel__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

.stream-panel__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Plusieurs lives en même temps : une rangée d'avatars pour passer de l'un à l'autre. */
.stream-panel__switch {
    display: flex;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stream-switch-btn {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    opacity: 0.55;
}

.stream-switch-btn[aria-pressed="true"] { opacity: 1; }
.stream-switch-btn .stream-avatar { width: 28px; height: 28px; }
.stream-switch-btn[aria-pressed="false"] .stream-avatar { box-shadow: none; }

@media (min-width: 576px) {
    .stream-panel { left: auto; width: 400px; }
}

/* Twitch exige un lecteur d'au moins 400×300 pour la lecture automatique :
   534px de large donnent 300px de haut en 16/9. */
@media (min-width: 992px) {
    .stream-player { --stream-gap: 1.25rem; }
    .stream-panel { width: 534px; }
}

@keyframes stream-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes stream-pulse {
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .stream-pill,
    .stream-panel,
    .stream-badge::before { animation: none; }
}

@media print {
    .stream-player { display: none !important; }
}