*, *::before, *::after{
    box-sizing: border-box;
}

:root{
    --color-bg: #19171c;
    --color-text: #f5f5f7;
    --color-muted: #b3b3b8;
    --color-panel-bg: #212126;
    --color-panel-border: #000000;
    --color-twitch: #6441a4;
    --color-shadow: rgba(0, 0, 0, 0.35);
    /* Couleur d'accent "a nous" (boutons, onglets actifs...), distincte de
    --color-twitch qui reste reservee aux elements de marque Twitch (Suivre,
    S'abonner). Une zone avec un theme cosmetique equipe (voir plus bas) la
    redefinit localement. */
    --color-accent: var(--color-twitch);

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px var(--color-shadow);
    --shadow-md: 0 4px 14px var(--color-shadow);

    --topbar-height: 56px;

    /* Sans ca, les controles natifs (fleche des <select>, icone du selecteur
    de date, case a cocher) restaient rendus en clair par le navigateur meme
    en theme sombre - tranchant fort avec nos propres styles sur ces champs. */
    color-scheme: dark;
}

/* Beige/blanc casse plutot que blanc pur : un theme clair tout blanc (comme
Twitch) est agressif a l'oeil sur de grandes surfaces (cartes, boutons). */
:root[data-theme="light"]{
    --color-bg: #efe9dd;
    --color-text: #2b2620;
    --color-muted: #756b5c;
    --color-panel-bg: #faf6ee;
    --color-panel-border: #ddd0b8;
    --color-twitch: #6441a4;
    --color-shadow: rgba(43, 38, 32, 0.12);
    color-scheme: light;
}

body{
    background-color: var(--color-bg);
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    color: var(--color-text);
    margin: 0;
    transition: background-color .2s ease, color .2s ease;
}

/* Present uniquement sur les pages qui incluent .site-topbar (page d'accueil
pour l'instant) : espace pour ne pas passer sous la barre fixe. */
body.has-topbar{
    padding-top: var(--topbar-height);
}

/* Bandeau du site, façon Twitch : logo/nom a gauche, compte/menu/theme a
droite, fixe au-dessus de tout (y compris le bandeau d'annonce ci-dessous).
Suit le theme (fond de page) : les boutons dessus (fond panel-bg) se
detachent dessus, comme partout ailleurs sur le site. */
.site-topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: var(--topbar-height);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-panel-border);
}

/* En theme clair, un bandeau de la meme teinte beige que la page se
distingue mal (seul le filet du bas separe les deux) : un ton beige plus
fonce suffit, le texte/boutons du theme clair (sombres sur clair) restent
lisibles dessus sans avoir besoin de les reteinter. */
:root[data-theme="light"] .site-topbar{
    --color-bg: #d9cbb3;
}

.site-topbar-inner{
    max-width: min(1800px, 96vw);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Rappel permanent d'une edition ephemere en cours (voir
web/js/shop-event-banner.js). Apres plusieurs essais de centrage sur toute la
barre (chevauchement puis retour a la ligne selon la largeur du bloc de
droite), plus simple et plus robuste : un element de flux normal, juste a
gauche du compte/menu, plutot qu'une position calculee independamment de son
contenu. Une legere pulsation lumineuse compense le fait qu'elle ne soit
plus au centre. */
.site-topbar-event{
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 55%, var(--color-panel-border));
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-panel-bg));
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    animation: topbar-event-glow 9s ease-in-out infinite;
}

/* Plusieurs evenements actifs en meme temps : petit fondu entre chaque, le
temps que le libelle change (voir shop-event-banner.js). */
.site-topbar-event-label{
    transition: opacity 0.2s ease;
}

.site-topbar-event-swap .site-topbar-event-label{
    opacity: 0;
}

.site-topbar-event:hover{
    border-color: var(--color-accent);
    animation-play-state: paused;
}

.site-topbar-event[hidden]{
    display: none;
}

/* Un battement doux (~1,6 s) toutes les 9 s, le reste du cycle est au repos. */
@keyframes topbar-event-glow{
    0%, 18%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    9% { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 50%, transparent); transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
    .site-topbar-event{
        animation: none;
    }
}

/* En dessous, le bloc compte+menu+pastille manquerait de place a cote du
logo : masquer la pastille en premier plutot que de laisser le reste se
comprimer ou passer a la ligne (hauteur de barre fixe). */
@media (max-width: 1000px){
    .site-topbar-event{
        display: none;
    }
}

.site-topbar-brand{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
}

.site-topbar-logo{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.site-topbar-name{
    font-size: 16px;
    font-weight: 700;
}

.site-topbar-actions{
    flex-shrink: 0;
    /* .account-row (classe partagee) autorise le retour a la ligne ailleurs sur
    le site, mais la barre du haut a une hauteur fixe : passer sur 2 lignes ici
    serait juste coupe. On compte sur le seuil de masquage de la pastille pour
    ne jamais arriver a court de place. */
    flex-wrap: nowrap;
}

/* Bandeau d'annonce (page d'accueil) : juste sous .site-topbar (ou tout en
haut sur une page sans topbar), et reste visible en scrollant. Fermable ligne
par ligne (voir announcements.js) ; purement additif, jamais indispensable a
la comprehension de la page. */
.site-announcements{
    position: sticky;
    top: var(--topbar-height, 0);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.site-announcement-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-twitch);
    color: white;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.site-announcement-row + .site-announcement-row{
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.site-announcement-link{
    color: white;
    text-decoration: underline;
}

.site-announcement-close{
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.site-announcement-close:hover{
    background-color: rgba(255, 255, 255, 0.35);
}

.all{
    max-width: min(1800px, 96vw);
    margin: 0 auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* Grille video / chat, partagee par .info-top, .stream et .lower-columns
    pour que les onglets de chat (a droite du header) tombent pile sur la
    colonne du chat, et Suivre/S'abonner sur le bord droit de la video. */
    --main-columns: minmax(0, 3fr) minmax(280px, 1fr);
}

/* Compte/menu/theme sont dans .site-topbar : il ne reste qu'un seul enfant
(.info-top-main). On garde quand meme la grille video/chat pour qu'il reste
confine a la largeur de la video (Twitch/Partager/Booster/J'aime/Skip doivent
finir au-dessus du bord droit du lecteur, pas de la page entiere). */
.info-top{
    width: 100%;
    display: grid;
    grid-template-columns: var(--main-columns);
    align-items: center;
    gap: var(--space-lg);
}

/* Page /evenement : aucune configuration active ou hors fenetre de dates. */
.event-inactive-banner{
    text-align: center;
    color: var(--color-muted);
    margin: 0;
}

/* Repere visuel immediat (sans ouvrir le menu) : on est sur /evenement, pas sur
l'accueil - meme classe reprise sur l'accueil pour .point-event-banner (un
multiplicateur de points actif), le style convient aussi bien aux deux. */
.event-mode-badge{
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    border-radius: var(--radius-md);
    padding: 6px var(--space-md);
    margin: 0;
}

.event-mode-badge a{
    color: inherit;
    text-decoration: underline;
}

/* Page /evenements (calendrier) : pas de layout a 2 colonnes comme le reste
du site, un simple fil de sections centre. Plus large que les autres pages
(900px) pour laisser 4-5 cartes par ligne plutot qu'une seule etiree. */
.events-page{
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 1300px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.events-page-header{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.events-page-header h1{
    margin: 0;
}

.page-hint{
    color: var(--color-muted);
    font-size: 13px;
    margin: 0;
}

/* Grille de cartes "point fort" (emoji + titre + description) - meme habillage
que .streamers-card sur /rejoindre (voir rejoindre.css), repris ici en version
generique/partagee puisque d'autres pages que /rejoindre en ont besoin (voir
.event-about-panel sur /evenement). */
.feature-cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.feature-card{
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.feature-card-emoji{
    font-size: 26px;
}

.feature-card-title{
    font-size: 15px;
    font-weight: 700;
}

.feature-card-desc{
    margin: 0;
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.6;
}

.events-section-title{
    font-size: 15px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-md);
}

.events-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Colonnes de largeur FIXE (pas de 1fr) : avec peu d'evenements, les
    cartes gardent une taille raisonnable (4-5 par ligne) au lieu de s'etirer
    pour remplir toute la largeur. */
    grid-template-columns: repeat(auto-fill, 210px);
    gap: var(--space-md);
}

/* Sous telephone, 2 cartes par ligne plutot qu'une seule etiree sur toute la
largeur (jugee "ultra moche" avec une seule carte) : minmax(0, 1fr) pour que
chaque colonne se partage l'espace sans deborder sur les tres petits ecrans. */
@media (max-width: 520px){
    .events-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.event-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.event-card-current{
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-panel-border));
    background-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-panel-bg));
}

.event-card-icon{
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.event-card-live-badge{
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
}

.event-card-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-emoji{
    font-size: 48px;
}

.event-card-shop .event-card-icon{
    background-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

.event-card-past .event-card-icon{
    filter: grayscale(1);
    opacity: 0.6;
}

.event-card-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.event-card-name{
    font-weight: 700;
    font-size: 15px;
}

.event-card-dates{
    color: var(--color-muted);
    font-size: 12px;
}

.event-card-past{
    opacity: 0.65;
}

.event-card-kind{
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-card-link{
    color: var(--color-accent);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-top: 2px;
}

.event-card-link:hover{
    text-decoration: underline;
}

.events-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--color-muted);
    font-size: 13px;
}

/* Une classe qui pose son propre display ecrase [hidden] (meme priorite, l'auteur
gagne toujours sur le navigateur) : sans cette regle, .event-inactive-banner
(qui porte .events-empty) restait visible meme avec l'attribut hidden pose par
evenement.js. */
.events-empty[hidden]{
    display: none;
}

.events-empty-icon{
    font-size: 32px;
}

.info-top-main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-width: 0;
}

/*Gestion du nom Streamer, avatar, badge et viewers */
.stream-heading{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.streamer-avatar{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-panel-bg);
    border: 2px solid var(--color-panel-border);
    flex-shrink: 0;
}

.streamer-avatar[src=""], .streamer-avatar:not([src]){
    visibility: hidden;
}

.stream-heading-text{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stream-heading-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
}

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.live-dot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #eb0400;
    flex-shrink: 0;
    animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink{
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.stream-meta-row{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: var(--space-sm) var(--space-md);
}

.live-duration{
    font-size: 12px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.live-duration:empty{
    display: none;
}

h1{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-count{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.icon-eye{
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.seen-badge{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    border: 1px solid var(--color-panel-border);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.seen-badge:empty{
    display: none;
}

.seen-badge.is-new{
    color: white;
    background-color: var(--color-twitch);
    border-color: var(--color-twitch);
}

/* Bonus de points de l'evenement jeu en cours (voir EventRotator.points_multiplier) :
vide = masque, comme .seen-badge (pas d'attribut hidden, donc pas de piege de
display qui l'ecraserait). */
.event-bonus-badge{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #1f1500;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
}

.event-bonus-badge:empty{
    display: none;
}

.connected-viewers{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-muted);
    border: 1px solid var(--color-panel-border);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.icon-people{
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.connected-viewers-label{
    color: var(--color-muted);
}

/* Meme principe que .share-popover : petit panneau ancre sous le bouton qui
l'ouvre (voir web/js/app.js, setOnlineUsersOpen). */
.online-users-panel{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 45;
    width: 190px;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.online-users-panel[hidden]{
    display: none;
}

.online-users-title{
    margin: 0 0 var(--space-xs) 0;
    padding: 0 var(--space-xs);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
}

.online-users-list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.online-users-item{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-size: 13px;
}

.online-users-item:hover{
    background-color: var(--color-bg);
}

.online-users-item .avatar-frame{
    flex-shrink: 0;
}

.online-users-empty, .online-users-guests{
    margin: 0;
    padding: 6px var(--space-xs) 2px;
    font-size: 12px;
    color: var(--color-muted);
}

.online-users-empty[hidden], .online-users-guests[hidden]{
    display: none;
}

@media (max-width: 480px){
    /* Specificite superieure a .chat-online-wrap .online-users-panel (right:0)
    plus bas dans le fichier : sans .chat-online-wrap ici, la regle desktop
    gagnerait quand meme sur mobile malgre l'ordre des blocs. */
    .chat-online-wrap .online-users-panel{
        position: fixed;
        left: var(--space-sm);
        right: var(--space-sm);
        top: auto;
        bottom: var(--space-sm);
        width: auto;
    }
}

.stream-details-inner{
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.title{
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: 15px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title:empty{
    display: none;
}

/* display:block (pas flex) : text-overflow:ellipsis ne s'applique fiablement
qu'a un conteneur bloc, pas a un conteneur flex (meme inline-flex). */
.game-name{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    max-width: 160px;
    padding: 3px 9px;
    border: 1px solid var(--color-panel-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.game-name:empty{
    display: none;
}

.clock-block{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.clock-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
}

#clockdiv{
	color: #eb0400;
	display: inline-block;
	text-align: center;
	font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* flex-wrap:wrap : sur mobile, Twitch/Partager/Booster/J'aime/Skip ne
tiennent pas tous sur une ligne (~500px necessaires) - sans lui, ils
debordaient et forcaient un defilement horizontal de toute la page. */
.button, .stream-links{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.theme-toggle{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.share-button, .twitch-open-button{
    height: 40px;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.twitch-open-button{
    color: var(--color-twitch);
}

.twitch-open-button:hover{
    border-color: var(--color-twitch);
}

/* Icone seule en permanence (pas juste sous un certain seuil) : la largeur
disponible pour .stream-links (display:flex; flex-wrap:wrap) ne depend pas
que de la largeur de la fenetre mais de la mise en page de chaque page (ex:
/evenement a un chat a cote qui reduit beaucoup la place, et ca passait a la
ligne bien avant 900px) - un seuil fixe en pixels ne peut pas marcher pour
toutes les pages a la fois. title/aria-label gardent l'icone comprehensible.
J'aime/Skip/Booster gardent leur texte, plus courts et plus importants a
comprendre d'un coup d'oeil. */
.twitch-open-button .share-button-label,
.share-button:not(.boost-link) .share-button-label{
    display: none;
}

.icon-twitch{
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.auth-link{
    height: 40px;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: transparent;
    color: var(--color-text);
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease;
}

.auth-link:hover{
    transform: translateY(-1px);
}

/* Bouton "Se connecter" au meme traitement que .twitch (couleur de marque)
pour rester coherent avec les boutons Suivre/S'abonner deja presents. */
.auth-link-login{
    background-color: var(--color-twitch);
    border-color: var(--color-twitch);
    color: white;
}

.auth-link-login .icon-twitch{
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.auth-user{
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 13px;
}

.auth-user-name{
    font-weight: 600;
    color: var(--color-text);
    /* Un pseudo demesurement long ne doit pas pousser j'aime / skip / theme a
    la ligne, mais la plupart des pseudos Twitch tiennent largement en dessous
    de cette limite (verifie : aucun retour a la ligne jusqu'a 950px de large). */
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu{
    position: relative;
}

.account-menu-trigger{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 6px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.account-menu-trigger:hover, .account-menu.open .account-menu-trigger{
    border-color: var(--color-panel-border);
    background-color: var(--color-panel-bg);
}

.account-menu-caret{
    color: var(--color-muted);
    font-size: 11px;
}

/* Le panneau touche presque le bouton (simple padding transparent) pour que le
survol ne se perde pas en traversant l'espace entre les deux. */
.account-menu-panel{
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    display: none;
    padding-top: 6px;
    min-width: 190px;
}

.account-menu.open .account-menu-panel{
    display: block;
}

@media (hover: hover){
    .account-menu:hover .account-menu-panel{
        display: block;
    }
}

.account-menu-list{
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.account-menu-item{
    padding: 10px var(--space-md);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Page courante dans le menu "☰ Menu" (Stats/Historique/News/Classement).
Meme traitement que .chat-tab.active : fond accent + texte blanc, plus lisible
qu'un simple changement de couleur de texte (violet sur fond sombre trop peu
contraste). */
.account-menu-item.is-current{
    background-color: var(--color-accent);
    color: white;
}

.account-menu-item:hover, .account-menu-item:focus-visible{
    background-color: var(--color-bg);
}

/* Passe apres la regle generale ci-dessus : sans elle, survoler l'element
courant repasserait sur --color-bg (invisible en theme clair avec du texte
reste blanc). */
.account-menu-item.is-current:hover, .account-menu-item.is-current:focus-visible{
    background-color: var(--color-accent);
}

.account-menu-form{
    margin: 0;
}

/* Le bouton de deconnexion est un <button> (formulaire POST) : meme rendu qu'un lien du menu. */
button.account-menu-item{
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.account-menu-logout{
    margin-top: var(--space-xs);
    border-top: 1px solid var(--color-panel-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--color-muted);
}

.toast-stack{
    position: fixed;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    animation: toast-in .3s ease;
    transition: opacity .4s ease, transform .4s ease;
}

.toast-leaving{
    opacity: 0;
    transform: translateY(8px);
}

.toast-icon{
    font-size: 24px;
    line-height: 1;
}

.toast-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@keyframes toast-in{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
}

.auth-points{
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.auth-points-bump{
    animation: auth-points-bump .6s ease;
}

@keyframes auth-points-bump{
    0%{ transform: scale(1); }
    30%{ transform: scale(1.35); color: var(--color-twitch); }
    100%{ transform: scale(1); }
}

.account-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* A cote de Booster : meme hauteur que Twitch/Partager/Booster (40px). */
.stream-links .skip-vote-button, .stream-links .like-button{
    height: 40px;
    padding: 0 12px;
}

.skip-vote-button, .like-button{
    position: relative;
    height: 36px;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: transparent;
    color: var(--color-twitch);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Compteur en pastille plutot que dans le texte du bouton : le bouton garde
toujours la meme taille, meme quand le compteur change de nombre de chiffres. */
.count-badge{
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--color-panel-bg);
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.count-badge[hidden]{
    display: none;
}

.skip-vote-button:hover:not(:disabled), .like-button:hover:not(:disabled){
    background-color: var(--color-accent);
    color: white;
}

.skip-vote-button:disabled, .like-button:disabled{
    opacity: .5;
    cursor: not-allowed;
    border-color: var(--color-panel-border);
    color: var(--color-muted);
}

.like-button{
    border-color: #eb0400;
    color: #eb0400;
}

.like-button:hover:not(:disabled){
    background-color: #eb0400;
    color: white;
}

.like-button.liked{
    background-color: #eb0400;
    color: white;
    opacity: 1;
}

/*Gestion du Live et du Chat */
.stream{
    width: 100%;
    display: grid;
    grid-template-columns: var(--main-columns);
    gap: var(--space-lg);
    align-items: stretch;
}

.live{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.live iframe{
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.chat_info{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    min-height: 0;
    height: 100%;
}

/* Isole le panneau du dessous (iframe/chat commu + bouton "qui est la", qui
se positionne en absolu dans son coin) des onglets au-dessus : sans ca, le
bouton "qui est la" (top:8px) se superposait aux onglets depuis qu'ils sont
tous les deux dans .chat_info. */
.chat-panel{
    position: relative;
    display: flex;
    flex-direction: column;
    /* flex-basis "auto" (pas 0) : sur mobile, .chat_info a une hauteur "auto"
    (pas une hauteur fixe venant du grid desktop) - un flex-basis a 0 dans un
    conteneur a hauteur indefinie peut s'effondrer a une hauteur nulle sur
    certains moteurs mobiles, ce qui faisait "remonter" .lower-columns par
    dessus le panneau de chat (video/chat superposes a l'historique). */
    flex: 1 1 auto;
    min-height: 0;
}

.chat_info iframe.chat, .community-chat{
    flex: 1 1 0;
    width: 100%;
    min-height: 300px;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.chat-tabs{
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--space-xs);
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.chat-tab{
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: calc(var(--radius-md) - 2px);
    border: none;
    background-color: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.chat-tab:hover{
    color: var(--color-text);
}

.chat-tab.active{
    background-color: var(--color-accent);
    color: white;
}

/* Bouton "qui est connecte" flottant en haut a droite du chat communaute,
comme l'icone du meme role sur Twitch (au-dessus de son chat, a droite).
Visible uniquement sur cet onglet (voir chat.js, setTab). */
.chat-online-wrap{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.chat-online-wrap[hidden]{
    display: none;
}

.chat-online-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background-color: var(--color-panel-bg);
    color: var(--color-muted);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.chat-online-button:hover, .chat-online-button[aria-expanded="true"]{
    color: var(--color-text);
}

.chat-online-button .icon-people{
    width: 16px;
    height: 16px;
}

.chat-online-wrap .online-users-panel{
    left: auto;
    right: 0;
}

.chat-unread{
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: #eb0400;
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* Au moins un message non lu te mentionne (voir chat.js, unreadMentioned) :
badge or plutot que rouge, pour distinguer "on te parle" d'une simple
activite du chat. */
.chat-unread.mentioned{
    background-color: #f5b301;
    color: #1a1a1a;
}

.chat-unread[hidden]{
    display: none;
}

.community-chat{
    display: flex;
    flex-direction: column;
    background-color: var(--color-panel-bg);
    overflow: hidden;
}

.community-chat[hidden]{
    display: none;
}

.community-messages{
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: var(--space-sm);
    /* Degage la place du bouton "Qui est la" flottant au-dessus (voir
    .chat-online-wrap) : sans ca, il recouvre le tout premier message. */
    padding-top: 44px;
    list-style: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.community-empty{
    margin: auto;
    color: var(--color-muted);
    text-align: center;
}

.cchat-message{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
}

.cchat-message.mine{
    background-color: var(--color-bg);
}

.cchat-header{
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cchat-avatar{
    flex-shrink: 0;
}

.cchat-author{
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.cchat-author:hover{
    text-decoration: underline;
}

.cchat-time{
    margin-left: auto;
    padding-left: 6px;
    color: var(--color-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cchat-report{
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 11px;
    line-height: 1;
    opacity: .45;
    cursor: pointer;
}

.cchat-report:hover, .cchat-report:focus-visible{
    opacity: 1;
}

.cchat-report:disabled{
    cursor: default;
    opacity: .7;
}

.cchat-delete{
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 11px;
    line-height: 1;
    opacity: .45;
    cursor: pointer;
}

.cchat-delete:hover, .cchat-delete:focus-visible{
    opacity: 1;
}

.cchat-delete:disabled{
    cursor: default;
    opacity: .7;
}

.cchat-text{
    color: var(--color-text);
    padding-left: 24px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* :nom: reconnu (dice, dragon...) -> badge de la boutique utilise comme
emote de chat, voir cosmetics.js renderMessageText. */
.cchat-emote{
    width: 24px;
    height: 24px;
    vertical-align: -6px;
    object-fit: contain;
}

/* Bleu plutot que --color-accent (violet) : lisible aussi bien sur le fond
normal du chat que sur le fond dore de .mentions-me (violet et or sont trop
proches en luminance, surtout en theme sombre). */
.cchat-mention{
    color: var(--name-blue);
    font-weight: 700;
}

/* Ton propre message est surligne quand quelqu'un t'a mentionne (voir
web/js/chat.js, mentionsName) : pas besoin de scruter chaque ligne. Le meme
pourcentage de melange donne un resultat tres different selon le theme : le
gold sombre du theme clair (--name-gold: #a16207) tranche deja bien sur un
fond clair a 18%, mais le gold clair du theme sombre (#fbbf24) a besoin de
beaucoup plus d'opacite pour se voir sur un fond quasi-noir. */
.cchat-message.mentions-me{
    background-color: color-mix(in srgb, var(--name-gold) 35%, transparent);
    border-radius: var(--radius-sm);
    box-shadow: inset 2px 0 0 var(--name-gold);
}

:root[data-theme="light"] .cchat-message.mentions-me{
    background-color: color-mix(in srgb, var(--name-gold) 18%, transparent);
}

.community-error{
    margin: 0;
    padding: 4px var(--space-sm);
    color: #eb0400;
    font-size: 12px;
}

.community-error[hidden]{
    display: none;
}

.community-form{
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-top: 1px solid var(--color-panel-border);
}

.cchat-emoji-wrap{
    position: relative;
    flex-shrink: 0;
}

.cchat-emoji-button{
    height: 34px;
    width: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.cchat-emoji-button:hover:not(:disabled){
    border-color: var(--color-accent);
}

.cchat-emoji-button:disabled{
    opacity: .5;
    cursor: not-allowed;
}

/* Au-dessus du bouton (pas en dessous) : le champ est tout en bas du chat,
un panneau ouvert vers le bas deborderait de la fenetre. */
/* display:flex column : la palette a 2 sections (emojis, puis badges de la
boutique utilises comme emotes), chacune sa propre grille. */
.cchat-emoji-picker{
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 45;
    width: min(320px, calc(100vw - 32px));
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.cchat-emoji-section-label{
    padding: 4px 4px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
}

.cchat-emoji-empty{
    margin: 0;
    padding: 4px;
    font-size: 12px;
    color: var(--color-muted);
}

.cchat-emoji-empty[hidden]{
    display: none;
}

.cchat-emoji-grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.cchat-emoji-picker[hidden]{
    display: none;
}

/* min-width:0 : sans lui, la largeur minimale par defaut d'un bouton (basee
sur son contenu) peut depasser la part de grille (1fr) qui lui est allouee
et faire deborder toute la grille horizontalement. */
.cchat-emoji-option{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 36px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
}

.cchat-emoji-option img{
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cchat-emoji-option:hover{
    background-color: var(--color-bg);
}

.cchat-input-wrap{
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.community-input{
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
}

.community-input:disabled{
    opacity: .6;
}

/* Suggestions "@pseudo" (voir web/js/chat.js) : meme principe que
.cchat-emoji-picker, ancre au-dessus du champ plutot que d'un bouton. */
.cchat-mention-picker{
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 45;
    width: 220px;
    max-height: 180px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.cchat-mention-picker[hidden]{
    display: none;
}

.cchat-mention-option{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.cchat-mention-option.active, .cchat-mention-option:hover{
    background-color: var(--color-bg);
}

.community-send{
    height: 34px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-accent);
    background-color: var(--color-accent);
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.community-send:disabled{
    opacity: .5;
    cursor: not-allowed;
}

/* Panneaux encadres : historique + stats, cote a cote sous le stream */
/* Meme grille (--main-columns) que .stream et .info-top pour que l'historique
s'aligne sur la video et les stats sur le chat. */
/* Description+historique (colonne video) et cagnotte+stats (colonne chat) :
2 colonnes independantes, chacune empile son propre contenu (comme un layout
"masonry"). Volontaire qu'elles finissent a des hauteurs differentes - ca evite
tout "trou" artificiel entre une carte courte et la carte suivante. */
.lower-columns{
    width: 100%;
    display: grid;
    grid-template-columns: var(--main-columns);
    align-items: start;
    gap: var(--space-lg);
}

.lower-col-video, .lower-col-chat{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.site-footer{
    width: 100%;
    text-align: center;
    padding: var(--space-md) 0;
}

.site-footer a{
    color: var(--color-muted);
    font-size: 0.85em;
    text-decoration: none;
}

.site-footer a:hover{
    text-decoration: underline;
}

.site-footer-sep{
    color: var(--color-muted);
    margin: 0 var(--space-xs, 4px);
}

.panel{
    width: 100%;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    transition: background-color .2s ease, border-color .2s ease;
}

.panel h3{
    font-size: 13px;
    margin: 0 0 var(--space-md) 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
}

.panel-header{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

.panel-header h3{
    margin: 0 0 var(--space-md) 0;
}

.panel-header-link{
    color: var(--color-muted);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.panel-header-link:hover{
    color: var(--color-text);
}

.history-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
}

.history-list li{
    position: relative;
    min-width: 0;
}

.history-empty{
    color: var(--color-muted);
    font-size: 13px;
}

.history-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background-color: var(--color-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    padding-right: 40px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

.history-item:hover{
    transform: translateY(-1px);
    border-color: var(--color-twitch);
}

.history-avatar{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-panel-bg);
    flex-shrink: 0;
}

.history-avatar[src=""], .history-avatar:not([src]){
    visibility: hidden;
}

.history-text{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.history-name{
    color: var(--color-text);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-badges{
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.history-badges:empty{
    display: none;
}

.history-twitch-link{
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    color: var(--color-muted);
    transition: color .15s ease, border-color .15s ease;
}

.history-twitch-link:hover{
    color: var(--color-twitch);
    border-color: var(--color-twitch);
}

.history-twitch-link .icon-twitch{
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.history-badge{
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    color: var(--color-muted);
}

.history-badge.skip{
    background-color: #eb0400;
    border-color: #eb0400;
    color: white;
}

.history-badge.like{
    background-color: transparent;
    border-color: #eb0400;
    color: #eb0400;
}

.history-meta{
    color: var(--color-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-time{
    color: var(--color-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-search{
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.history-search-input{
    flex: 1;
    height: 40px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 14px;
}

.history-search-input::placeholder{
    color: var(--color-muted);
}

.history-search-button{
    height: 40px;
    padding: 0 var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: transparent;
    color: var(--color-twitch);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.history-search-button:hover{
    background-color: var(--color-twitch);
    color: white;
}

.full-history-list{
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.history-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.history-pagination-link{
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-sm);
}

.history-pagination-link:hover{
    border-color: var(--color-twitch);
}

.history-pagination-link.disabled{
    color: var(--color-muted);
    opacity: .5;
}

.history-pagination-info{
    color: var(--color-muted);
    font-size: 13px;
}

/* Grille de tuiles de stats */
.stat-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.stat-tile{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label{
    font-size: 12px;
    color: var(--color-muted);
}

.stat-value{
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
}

/* La colonne stats du panneau principal est plus etroite (alignee sur le
chat) : 3 colonnes y font passer les libelles longs a la ligne et desalignent
les tuiles entre elles. 2 colonnes + police un peu plus petite = tout tient
sur une ligne. */
.stats-section .stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
}

.stats-section .stat-label{
    font-size: 11px;
}

.stats-section .stat-value{
    font-size: 20px;
}

/* Boite a suggestions : bouton flottant + petit panneau, hors du flux pour
ne pas reperturber l'agencement du header. */
.suggestion-fab{
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform .15s ease;
    z-index: 50;
}

.suggestion-fab:hover{
    transform: translateY(-2px);
}

.suggestion-popover{
    position: fixed;
    right: var(--space-lg);
    bottom: calc(48px + var(--space-lg) + var(--space-sm));
    width: min(320px, calc(100vw - 2 * var(--space-lg)));
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-md);
    z-index: 50;
}

.suggestion-popover[hidden]{
    display: none;
}

.suggestion-popover h3{
    margin: 0 0 var(--space-sm) 0;
    font-size: 14px;
}

.suggestion-textarea{
    width: 100%;
    min-height: 90px;
    resize: vertical;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    font-family: inherit;
    font-size: 13px;
}

.suggestion-popover-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.suggestion-feedback{
    font-size: 12px;
    color: var(--color-muted);
}

.suggestion-feedback.error{
    color: #eb0400;
}

.suggestion-submit{
    height: 32px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-twitch);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.suggestion-submit:disabled{
    opacity: .5;
    cursor: not-allowed;
}

/* Palier intermediaire : au-dela de 900px .history-list garde 6 colonnes
fixes, ce qui devient trop serre (noms tronques a 1-2 lettres) tant que
.all n'a pas atteint sa pleine largeur (~1800px). 4 colonnes le temps que
la page ait assez de place pour 6. */
/* L'en-tete (nom, horloge, boutons Suivre/S'abonner/J'aime/Skip/Stats/News)
tient mal en 2 colonnes cote a cote en dessous de ~1400px : le cluster de
boutons a droite a besoin d'environ 450-500px, ce qui laisse trop peu de
place a gauche (nom, horloge, liens) et provoque un chevauchement/retour
a la ligne casse. On bascule sur la mise en page empilee et centree
beaucoup plus tot (1400px) qu'avant (900px), qui ne servait plus qu'a
.stream/.lower-columns (video/chat, description+historique/cagnotte+stats),
lesquels tiennent tres bien cote a cote jusqu'a 900px sans probleme. */
@media (max-width: 1400px){
    .history-list{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .full-history-list{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* Cap a 3 lignes dans "Derniers streamers vus" (widget de l'accueil
    uniquement : .full-history-list partage la classe .history-list pour
    son style de carte, mais /history est paginee cote serveur et ne doit
    jamais avoir d'entrees masquees ici). */
    .history-list:not(.full-history-list) li:nth-child(n+13){
        display: none;
    }
    .info-top{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .info-top-main{
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .stream-heading{
        justify-content: center;
        /* Centre dans une colonne flex, il prendrait la largeur de son contenu :
        un long titre le ferait deborder des deux cotes (avatar coupe). */
        max-width: 100%;
    }
    .button, .stream-links, .account-row{
        justify-content: center;
    }
}

@media (max-width: 900px){
    .stream{
        grid-template-columns: 1fr;
    }
    .lower-columns{
        grid-template-columns: 1fr;
    }
    /* Plein cadre (sans ombre/coins arrondis) sous telephone : la video gagne
    un peu de place visuelle au lieu d'etre "encadree". */
    .live{
        border-radius: 0;
        box-shadow: none;
    }
    .chat_info{
        height: auto;
        margin-top: 0;
    }
    .chat_info iframe.chat, .community-chat{
        flex: none;
        height: 480px;
    }
    .history-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .full-history-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .history-list:not(.full-history-list) li:nth-child(n+7){
        display: none;
    }
    .stat-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Titre + infos (timer, viewers Twitch, viewers du site) cote a cote sous
    telephone ecrasait le titre (trop etroit) : titre seul sur sa ligne, le
    reste du bloc meta en dessous sur sa propre ligne. */
    .stream-details-inner{
        flex-wrap: wrap;
    }
    .title{
        flex-basis: 100%;
    }
    .stream-meta-row{
        flex-wrap: wrap;
    }
}

/* En mode 2 colonnes (au-dessus de 1400px), la colonne du chat accueille le
bloc compte du header (compte + menu + theme, ~400px de large) : on lui
garantit cette largeur pour qu'il ne passe pas a la ligne. */
@media (min-width: 1401px){
    .all{
        --main-columns: minmax(0, 3fr) minmax(400px, 1fr);
    }
}

/* Au-dela de 1080p (1920px), .all plafonnait deja a 1800px : sur un ecran
1440p/4K, le stream et le chat restaient a peu pres a la meme taille qu'en
1080p au lieu de profiter de l'espace disponible. */
@media (min-width: 1920px){
    .all{
        max-width: min(2400px, 95vw);
        /* Le chat n'a pas besoin de grossir avec le conteneur (un panneau de
        chat Twitch reste lisible a largeur fixe) : on lui donne une largeur
        plafonnee et on laisse le stream absorber tout le reste de l'espace
        gagne sur les grands ecrans. */
        --main-columns: minmax(0, 1fr) minmax(400px, 420px);
    }
    /* Idem pour la page /history : a nombre de colonnes fixe, les cases
    deviennent enormes et vides sur un tres grand ecran plutot que de
    rester denses comme sur desktop normal. 10 colonnes (et non 7) car
    une page pleine contient 50 entrees (HISTORY_PAGE_SIZE_DEFAULT) : avec
    un diviseur de 50, chaque page pleine remplit ses lignes jusqu'au bout
    au lieu de laisser une derniere ligne avec un seul element perdu. */
    .full-history-list{
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (max-width: 480px){
    .all{
        padding: var(--space-sm);
    }
    .feature-cards{
        grid-template-columns: 1fr;
    }
    .history-list:not(.full-history-list) li:nth-child(n+4){
        display: none;
    }
    h1{
        font-size: 18px;
    }
    .history-list{
        grid-template-columns: 1fr;
    }
    .full-history-list{
        grid-template-columns: 1fr;
    }
    .history-search{
        flex-direction: column;
    }
    .history-search-button{
        width: 100%;
    }
}

/* Flash discret au changement reel de stream (voir web/js/app.js) */
@keyframes pulse-outline{
    0%   { box-shadow: 0 0 0 0 var(--color-twitch), var(--shadow-md); }
    70%  { box-shadow: 0 0 0 10px rgba(100, 65, 164, 0); }
    100% { box-shadow: 0 0 0 0 rgba(100, 65, 164, 0), var(--shadow-md); }
}

@keyframes pulse-text{
    0%   { color: var(--color-twitch); }
    100% { color: var(--color-text); }
}

.pulse-update{
    animation-duration: 900ms;
    animation-timing-function: ease-out;
}

.live.pulse-update{
    animation-name: pulse-outline;
}

.streamer.pulse-update{
    animation-name: pulse-text;
}

@media (prefers-reduced-motion: reduce){
    .pulse-update{
        animation: none;
    }
}

/* --- Cosmetiques (boutique) : couleurs de pseudo, badges, cadres d'avatar --- */
:root{
    --name-violet: #a970ff;
    --name-coral: #ff6b6b;
    --name-orange: #ff9f43;
    --name-green: #4ade80;
    --name-teal: #2dd4bf;
    --name-pink: #f472b6;
    --name-blue: #60a5fa;
    --name-gold: #fbbf24;
    --name-nova: #22d3ee;
    --name-inferno: #ff5a1f;
    --name-glacial: #7dd3fc;
    --name-gta6: #ff2e97;
}

/* Teintes plus sombres en theme clair pour garder un contraste lisible. */
:root[data-theme="light"]{
    --name-violet: #7c3aed;
    --name-coral: #dc2626;
    --name-orange: #c2410c;
    --name-green: #15803d;
    --name-teal: #0f766e;
    --name-pink: #be185d;
    --name-blue: #1d4ed8;
    --name-gold: #a16207;
    --name-nova: #0e7490;
    --name-inferno: #c2410c;
    --name-glacial: #0369a1;
    --name-gta6: #be185d;
}

.name-violet{ color: var(--name-violet); }
.name-coral{ color: var(--name-coral); }
.name-orange{ color: var(--name-orange); }
.name-green{ color: var(--name-green); }
.name-teal{ color: var(--name-teal); }
.name-pink{ color: var(--name-pink); }
.name-blue{ color: var(--name-blue); }
.name-gold{ color: var(--name-gold); }
.name-nova{ color: var(--name-nova); }
.name-inferno{ color: var(--name-inferno); }
.name-glacial{ color: var(--name-glacial); }
.name-gta6{ color: var(--name-gta6); }

.name-rainbow{
    background-image: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* 🎃 Halloween 2026 : degrade citrouille -> sorciere, meme technique que le
degrade arc-en-ciel ci-dessus mais a deux teintes. */
.name-halloween{
    background-image: linear-gradient(90deg, #ff7518, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cosmetic-name{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.cosmetic-badge{
    flex-shrink: 0;
    width: 2.6em;
    height: 2.6em;
    object-fit: contain;
    display: block;
}

/* Dans les listes denses (avatar de 18px : chat, cagnotte, suggestions), un
badge a 2.6em ecrase completement l'avatar a cote - trop grand pour ce
contexte precis, contrairement au profil ou au classement (avatars 24-72px)
ou la taille normale reste proportionnee. */
.cchat-author .cosmetic-badge,
.pot-top-name .cosmetic-badge,
.suggestion-author .cosmetic-badge,
.online-users-item .cosmetic-badge{
    width: 1.4em;
    height: 1.4em;
}

.cosmetic-name-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-frame{
    --frame: transparent;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--frame);
}

.avatar-frame[class*="frame-"]{
    padding: 2px;
}

.avatar-frame img{
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-panel-bg);
}

.frame-violet{ --frame: #9146ff; }
.frame-coral{ --frame: #ef4444; }
.frame-orange{ --frame: #ff9f43; }
.frame-green{ --frame: #4ade80; }
.frame-teal{ --frame: #14b8a6; }
.frame-pink{ --frame: #f472b6; }
.frame-blue{ --frame: #60a5fa; }
.frame-gold{ --frame: linear-gradient(135deg, #fde68a, #d99a06 50%, #fde68a); }
.frame-rainbow{ --frame: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
.frame-flame{ --frame: linear-gradient(135deg, #f59e0b, #ef4444 55%, #f97316); }
.frame-halloween{ --frame: linear-gradient(135deg, #ff9f43, #1e1033 55%, #ff9f43); }
/* Theme "Nova" (pool d'objets d'evenement, voir app/cosmetics.py POOL_CATALOG) :
cyan/violet, generique (pas lie a une fete), reutilise d'une edition a l'autre. */
.frame-nova{ --frame: linear-gradient(135deg, #22d3ee, #a855f7 55%, #22d3ee); }
.frame-inferno{ --frame: linear-gradient(135deg, #fbbf24, #ff5a1f 55%, #b91c1c); }
.frame-glacial{ --frame: linear-gradient(135deg, #ffffff, #7dd3fc 55%, #0369a1); }
/* Theme GTA 6 (pool, lie au jeu) : neon rose / turquoise / coucher de soleil. */
.frame-gta6{ --frame: linear-gradient(135deg, #00d4d8, #ff2e97 55%, #ffb347); }

/* --- Bannieres de profil (boutique) : appliquees a .profile-banner --- */
.banner-violet{ background: linear-gradient(135deg, #a970ff, #6441a4); }
.banner-coral{ background: linear-gradient(135deg, #ff6b6b, #b91c1c); }
.banner-orange{ background: linear-gradient(135deg, #ff9f43, #c2410c); }
.banner-green{ background: linear-gradient(135deg, #4ade80, #15803d); }
.banner-teal{ background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.banner-pink{ background: linear-gradient(135deg, #f472b6, #be185d); }
.banner-blue{ background: linear-gradient(135deg, #60a5fa, #1d4ed8); }

@keyframes banner-flow{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}

.banner-aurora, .banner-fire, .banner-ocean, .banner-galaxy, .banner-halloween,
.banner-nova, .banner-inferno, .banner-glacial, .banner-gta6{
    background-size: 200% 200%;
    animation: banner-flow 9s ease-in-out infinite;
}

/* Pool d'objets d'evenement (voir .frame-nova plus haut) : meme traitement
anime que les bannieres premium (aurora/galaxy...), un degrade par theme. */
.banner-nova{
    background-image:
        radial-gradient(circle at 25% 30%, rgba(255, 255, 255, .8) 0, transparent 1.5px),
        radial-gradient(circle at 65% 70%, rgba(255, 255, 255, .55) 0, transparent 1px),
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .7) 0, transparent 1.5px),
        linear-gradient(120deg, #0e1030, #22d3ee, #a855f7, #0e1030);
}

.banner-inferno{
    background-image:
        radial-gradient(circle at 30% 70%, rgba(255, 220, 150, .8) 0, transparent 2px),
        radial-gradient(circle at 70% 30%, rgba(255, 220, 150, .6) 0, transparent 1.5px),
        linear-gradient(120deg, #7c2d12, #ff5a1f, #fbbf24, #7c2d12);
}

.banner-glacial{
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .9) 0, transparent 1.5px),
        radial-gradient(circle at 75% 60%, rgba(255, 255, 255, .6) 0, transparent 1px),
        linear-gradient(120deg, #0c4a6e, #7dd3fc, #ffffff, #0c4a6e);
}

.banner-gta6{
    background-image: linear-gradient(120deg, #2a0845, #ff2e97, #ffb347, #00d4d8, #2a0845);
}

.banner-aurora{ background-image: linear-gradient(120deg, #14e0c4, #6441a4, #4ade80, #14e0c4); }
.banner-fire{ background-image: linear-gradient(120deg, #ff9f43, #ef4444, #fde047, #ff9f43); }
.banner-ocean{ background-image: linear-gradient(120deg, #1d4ed8, #2dd4bf, #60a5fa, #1d4ed8); }
.banner-galaxy{
    background-image:
        radial-gradient(circle at 22% 35%, rgba(255, 255, 255, .85) 0, transparent 1.5px),
        radial-gradient(circle at 62% 68%, rgba(255, 255, 255, .6) 0, transparent 1px),
        radial-gradient(circle at 82% 25%, rgba(255, 255, 255, .75) 0, transparent 1.5px),
        radial-gradient(circle at 40% 82%, rgba(255, 255, 255, .5) 0, transparent 1px),
        linear-gradient(120deg, #1e1033, #6441a4, #2d1b4e, #1e1033);
}
/* Edition Halloween 2026 (boutique ephemere) : citrouille orange sur fond nuit. */
.banner-halloween{
    background-image:
        radial-gradient(circle at 30% 60%, rgba(255, 159, 67, .9) 0, transparent 3px),
        radial-gradient(circle at 70% 30%, rgba(255, 159, 67, .7) 0, transparent 2px),
        linear-gradient(120deg, #1e1033, #7c2d12, #1e1033, #4c1d95);
}

@media (prefers-reduced-motion: reduce){
    .banner-aurora, .banner-fire, .banner-ocean, .banner-galaxy, .banner-halloween{
        animation: none;
    }
}


/* --- Cagnotte collective : .lower-col-chat, sous le chat --- */
.pot-strip{
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.pot-strip.panel{
    padding: var(--space-sm) var(--space-md);
}

.pot-strip-main{
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}

.pot-title{
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.pot-bar{
    flex: 1;
    min-width: 80px;
    height: 10px;
    border-radius: 999px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-panel-border);
    overflow: hidden;
}

.pot-bar-fill{
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-twitch), #a970ff);
    transition: width .4s ease;
}

.pot-progress{
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pot-actions{
    display: flex;
    gap: var(--space-sm);
}

.pot-button{
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: transparent;
    color: var(--color-twitch);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pot-button:hover:not(:disabled){
    background-color: var(--color-twitch);
    color: white;
}

.pot-button:disabled{
    opacity: .5;
    cursor: not-allowed;
}

.pot-strip-side{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    min-width: 0;
    font-size: 12px;
    color: var(--color-muted);
}

.pot-top{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}

.pot-top-item{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pot-top-name{
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

a.pot-top-name:hover{
    text-decoration: underline;
}

.pot-message.is-error{
    color: #eb0400;
}

.pot-mine[hidden], .pot-top[hidden], .pot-message[hidden]{
    display: none;
}

/* --- Evenements visuels --- */
.event-banner{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, #6441a4, #a855f7, #ec4899);
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.event-banner[data-kind="rainbow"]{
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7);
    background-size: 200% 100%;
    animation: rainbow-slide 6s linear infinite;
}

.event-banner[hidden]{
    display: none;
}

.event-banner-toggle{
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(0, 0, 0, .15);
    color: white;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.event-banner-toggle[hidden]{
    display: none;
}

.confetti-canvas{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 60;
}

/* "J'aime" en direct : un coeur qui tombe pour tout le monde a chaque like,
avec une banniere pour les paliers marquants (voir app.js handleLikePop). */
.like-pop-layer{
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 90;
}

/* Deux elements imbriques : l'exterieur ne fait que la traversee horizontale
a vitesse constante (lineaire, sans a-coups), l'interieur ne fait que le
rebond vertical + la rotation. Les combiner dans une seule animation
donnait un mouvement horizontal saccade (il accelerait/freinait en meme
temps que chaque rebond vertical). */
.like-pop-heart{
    position: absolute;
    top: 22vh;
    left: -60px;
    opacity: 0;
    animation: like-pop-drift 3s linear forwards;
}

@keyframes like-pop-drift{
    0%{ transform: translateX(0); opacity: 0; }
    8%{ opacity: 1; }
    92%{ opacity: 1; }
    100%{ transform: translateX(var(--like-pop-x, 50vw)); opacity: 0; }
}

.like-pop-heart-inner{
    display: inline-block;
    font-size: 38px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    animation: like-pop-bounce 3s ease-in forwards;
}

/* Chute puis 3 rebonds d'amplitude decroissante en bas de l'ecran.
--like-pop-rotate (rotation totale, signee selon le sens de la traversee)
est fixe par spawnLikeHeart() dans app.js. */
@keyframes like-pop-bounce{
    0%{
        transform: scale(0.6) rotate(0deg);
        animation-timing-function: ease-in;
    }
    38%{
        transform: translateY(52vh) scale(1.15) rotate(calc(var(--like-pop-rotate, 260deg) * 0.4));
        animation-timing-function: ease-out;
    }
    50%{
        transform: translateY(34vh) scale(1) rotate(calc(var(--like-pop-rotate, 260deg) * 0.55));
        animation-timing-function: ease-in;
    }
    64%{
        transform: translateY(52vh) scale(1.08) rotate(calc(var(--like-pop-rotate, 260deg) * 0.7));
        animation-timing-function: ease-out;
    }
    74%{
        transform: translateY(44vh) scale(1) rotate(calc(var(--like-pop-rotate, 260deg) * 0.82));
        animation-timing-function: ease-in;
    }
    85%{
        transform: translateY(52vh) scale(1) rotate(calc(var(--like-pop-rotate, 260deg) * 0.92));
        animation-timing-function: ease-out;
    }
    100%{
        transform: translateY(50vh) scale(0.7) rotate(var(--like-pop-rotate, 260deg));
    }
}

.like-milestone-banner{
    position: fixed;
    top: 18%;
    left: 0;
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 91;
    animation: like-milestone-cross 3.6s ease-in-out forwards;
}

@keyframes like-milestone-cross{
    0%{ transform: translateX(-120%); opacity: 0; }
    12%{ opacity: 1; }
    50%{ transform: translateX(calc(50vw - 50%)); opacity: 1; }
    88%{ opacity: 1; }
    100%{ transform: translateX(120vw); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
    .like-pop-heart, .like-milestone-banner{
        animation: none;
        display: none;
    }
}

/* Arc-en-ciel : une fine barre animee en haut de page et les cadres qui
changent de teinte. */
:root.event-rainbow body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 55;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 200% 100%;
    animation: rainbow-slide 6s linear infinite;
}

:root.event-rainbow .panel, :root.event-rainbow .live{
    animation: rainbow-border 8s linear infinite;
}

@keyframes rainbow-slide{
    from{ background-position: 0 0; }
    to{ background-position: 200% 0; }
}

@keyframes rainbow-border{
    0%, 100%{ border-color: #ef4444; }
    20%{ border-color: #f59e0b; }
    40%{ border-color: #22c55e; }
    60%{ border-color: #3b82f6; }
    80%{ border-color: #a855f7; }
}

@media (prefers-reduced-motion: reduce){
    :root.event-rainbow .panel, :root.event-rainbow .live, :root.event-rainbow body::before, .event-banner[data-kind="rainbow"]{
        animation: none;
    }
}


/* --- Boost de streamer --- */
.boost-link{
    text-decoration: none;
}

/* Booster est reserve aux personnes connectees avec Twitch (auth.js pose
.is-logged-in sur <html> des que /api/me a repondu). */
html:not(.is-logged-in) .stream-links .boost-link{
    display: none;
}

.boost-badge{
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: linear-gradient(90deg, #f97316, #ec4899);
    border-radius: 999px;
    padding: 3px 9px;
    flex-shrink: 0;
    white-space: nowrap;
}

.boost-badge[hidden]{
    display: none;
}


/* --- Partage (streamer + site) --- */
.share-wrap{
    position: relative;
}

.share-popover{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-panel-bg);
    box-shadow: var(--shadow-md);
}

.share-popover[hidden]{
    display: none;
}

.share-title{
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.share-subtitle{
    color: var(--color-muted);
    font-weight: 400;
    font-size: 12px;
}

.report-reason{
    width: 100%;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
}

.share-text{
    width: 100%;
    resize: none;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
}

.share-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.share-actions button{
    flex: 1 1 auto;
    height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.share-actions .share-copy{
    background-color: var(--color-twitch);
    color: white;
}

.share-actions button[hidden]{
    display: none;
}

.share-feedback{
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
}

.share-feedback[hidden]{
    display: none;
}

@media (max-width: 900px){
    /* Petit ecran : le panneau s'affiche en bas, pleine largeur. */
    .share-popover{
        position: fixed;
        left: var(--space-sm);
        right: var(--space-sm);
        bottom: var(--space-sm);
        top: auto;
        width: auto;
    }
}


.suggestion-all-link{
    display: block;
    margin-top: var(--space-sm);
    color: var(--color-twitch);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.suggestion-all-link:hover{
    text-decoration: underline;
}

/* Petits ecrans : compte + menu + theme tiennent sur une ligne de ~370px. */
@media (max-width: 480px){
    .account-row{
        gap: 6px;
    }
    .account-row .auth-link{
        padding: 0 10px;
    }
    /* Sur mobile le pseudo cede la place : avatar + points suffisent, le nom est
    dans le menu (page profil). */
    .account-row .auth-user-name{
        display: none;
    }
    /* Le nom du site cede sa place au compte/menu/theme (qui partagent
    desormais la meme ligne dans .site-topbar) : le logo seul suffit a
    identifier la marque. */
    .site-topbar-name{
        display: none;
    }
}

/* Pages d'information (404, deconnexion) */
.notice-panel{
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.notice-emoji{
    font-size: 44px;
    margin: 0 0 var(--space-sm) 0;
}

.notice-panel h2{
    margin: 0 0 var(--space-sm) 0;
    font-size: 20px;
}

.notice-panel p{
    color: var(--color-muted);
    margin: 0 0 var(--space-md) 0;
}

.notice-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.notice-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-twitch);
    color: white;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.notice-link{
    color: var(--color-muted);
    text-decoration: none;
    font-size: 14px;
}

/* Lien d'en-tete de panneau ("Historique complet") : zone tactile agrandie sans deplacer la mise en page. */
@media (max-width: 900px), (pointer: coarse){
    .panel-header-link{
        display: inline-block;
        padding: 12px 6px;
        margin: -12px -6px;
    }
}

/* Bulle idee / bug : onglets, aide et contexte joint */
.feedback-tabs{
    display: flex;
    gap: 4px;
    margin-bottom: var(--space-sm);
    padding: 3px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.feedback-tab{
    flex: 1;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.feedback-tab.active{
    background-color: var(--color-panel-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.feedback-help{
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.4;
}

.feedback-context{
    margin-top: var(--space-sm);
    font-size: 11px;
    color: var(--color-muted);
}

.feedback-context summary{
    cursor: pointer;
}

.feedback-context-list{
    margin: var(--space-xs) 0 0 0;
    padding-left: var(--space-md);
    overflow-wrap: anywhere;
}

/* .suggestion-all-link a un display propre : sans cette regle, l'attribut hidden est ignore. */
.suggestion-all-link[hidden]{
    display: none;
}

.streamer-name-link{
    color: inherit;
    text-decoration: none;
}

.streamer-name-link:hover{
    text-decoration: underline;
}

/* Ecran d'intro (page d'accueil uniquement) : explique le concept une seule
fois. localStorage retient qu'elle a ete vue (voir le script inline dans
<head> qui pose .intro-seen avant le premier rendu, pour eviter un flash
chez une personne qui revient) ; une fois vue, elle ne s'affiche plus jamais. */
/* Rideau fixe par-dessus le site (deja affiche normalement en dessous, sans
etre pousse plus bas) : glisse vers le haut pour le reveler, au lieu de faire
defiler toute la page comme un scroll classique. */
.intro-splash{
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    background-color: var(--color-bg);
    transition: transform .5s ease;
}

.intro-splash.intro-dismissing{
    transform: translateY(-100%);
}

html.intro-seen .intro-splash{
    display: none;
}

.intro-content{
    max-width: 640px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.intro-logo{
    display: flex;
    filter: drop-shadow(0 10px 28px rgba(100, 65, 164, 0.45));
    transform: rotate(-6deg);
}

.intro-title{
    font-size: 38px;
    margin: 0;
    letter-spacing: -0.01em;
}

.intro-pitch{
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* Chiffres du site (jamais un streamer en particulier) : compacts, sur une
seule ligne, pour rester un a-cote du pitch plutot qu'un tableau a part. */
.intro-stats{
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

.intro-stat{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    background-color: var(--color-panel-bg);
}

.intro-stat-value{
    font-size: 20px;
    font-weight: 700;
}

.intro-stat-label{
    font-size: 11px;
    color: var(--color-muted);
    text-align: center;
    white-space: nowrap;
}

.intro-enter{
    margin-top: var(--space-sm);
    height: 48px;
    padding: 0 var(--space-xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-twitch);
    background-color: var(--color-twitch);
    color: white;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.intro-enter:hover{
    opacity: .9;
}

/* Theme de profil (boutique) : variable dediee --zone-accent, separee de
--color-accent (deja utilisee ailleurs sur le site : bordure de l'onglet de
chat actif, survol des boutons J'aime/Skip...) pour qu'un theme ne puisse
jamais deteindre sur autre chose que ce qui suit.
Deux marqueurs distincts, tous les deux vises ici : [data-theme-zone] recoit
automatiquement le theme du VISITEUR lui-meme (cosmetics.js, sur
streamrandom:me - ex: /profile, /stats) ; [data-theme-zone-fixed] est gere a
la main par la page (user.js, fiche publique) avec le theme de la personne
consultee, qui ne doit jamais se faire ecraser par celui du visiteur. */
:is([data-theme-zone], [data-theme-zone-fixed]).theme-violet,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-coral,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-orange,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-green,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-teal,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-pink,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-blue,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-gold,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-rainbow,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-halloween,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-nova,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-inferno,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-glacial,
:is([data-theme-zone], [data-theme-zone-fixed]).theme-gta6{
    border-top: 3px solid var(--zone-accent);
}

/* Meme palette que la couleur de pseudo et le cadre d'avatar (--name-*). */
:is([data-theme-zone], [data-theme-zone-fixed]).theme-violet{ --zone-accent: #a970ff; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-coral{ --zone-accent: #ff6b6b; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-orange{ --zone-accent: #ff9f43; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-green{ --zone-accent: #4ade80; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-teal{ --zone-accent: #2dd4bf; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-pink{ --zone-accent: #f472b6; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-blue{ --zone-accent: #60a5fa; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-gold{ --zone-accent: #fbbf24; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-rainbow{
    --zone-accent: #a855f7;
    border-image: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7) 1;
}
:is([data-theme-zone], [data-theme-zone-fixed]).theme-nova{
    --zone-accent: #22d3ee;
    border-image: linear-gradient(90deg, #22d3ee, #a855f7, #22d3ee) 1;
}
:is([data-theme-zone], [data-theme-zone-fixed]).theme-inferno{
    --zone-accent: #ff5a1f;
    border-image: linear-gradient(90deg, #fbbf24, #ff5a1f, #b91c1c) 1;
}
:is([data-theme-zone], [data-theme-zone-fixed]).theme-glacial{
    --zone-accent: #7dd3fc;
    border-image: linear-gradient(90deg, #ffffff, #7dd3fc, #0369a1) 1;
}
:is([data-theme-zone], [data-theme-zone-fixed]).theme-gta6{
    --zone-accent: #ff2e97;
    border-image: linear-gradient(90deg, #00d4d8, #ff2e97, #ffb347) 1;
}

/* 🎃 Halloween 2026 : un cran au-dessus d'une simple couleur (demande par
l'utilisateur) - degrade anime plutot que statique, seul theme du catalogue
a pulser. */
:is([data-theme-zone], [data-theme-zone-fixed]).theme-halloween{
    --zone-accent: #ff7518;
    border-image: linear-gradient(90deg, #ff7518, #7c3aed, #ff7518) 1;
    animation: halloween-glow 3s ease-in-out infinite;
}

@keyframes halloween-glow{
    0%, 100% { box-shadow: 0 2px 10px rgba(255, 117, 24, .35); }
    50% { box-shadow: 0 2px 14px rgba(124, 58, 237, .45); }
}

@media (prefers-reduced-motion: reduce){
    :is([data-theme-zone], [data-theme-zone-fixed]).theme-halloween{
        animation: none;
    }
}

/* Au-dela du liseré : la couleur du theme se retrouve aussi sur quelques
accents a l'interieur de la zone (barres de progression, cartes de succes
debloques), pour que l'achat se voie vraiment plutot qu'un simple trait. */
:is([data-theme-zone], [data-theme-zone-fixed]) .achievement-bar-fill{
    background-color: var(--zone-accent, var(--color-twitch));
}

:is([data-theme-zone], [data-theme-zone-fixed]) .achievement-card:not(.locked){
    border-color: var(--zone-accent, var(--color-twitch));
}

/* Particules ephemeres des effets cosmetiques au j'aime (voir effects.js). */
.cosmetic-particle{
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    font-size: 20px;
    animation: cosmetic-particle-fly 700ms ease-out forwards;
}

@keyframes cosmetic-particle-fly{
    from{ transform: translate(0, 0); opacity: 1; }
    to{ transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.event-card-countdown{
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
}

/* Themes generes (pool boutique), voir scratchpad generator : un bloc par theme. */
.name-or{ color: #fbbf24; }
.frame-or{ --frame: linear-gradient(135deg, #fde68a, #d97706 55%, #92400e); }
.banner-or{ background-image: linear-gradient(120deg, #78350f, #fbbf24, #fde68a); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-or{ --zone-accent: #fbbf24; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fde68a, #fbbf24, #92400e) 1; }
.name-emeraude{ color: #10b981; }
.frame-emeraude{ --frame: linear-gradient(135deg, #6ee7b7, #059669 55%, #064e3b); }
.banner-emeraude{ background-image: linear-gradient(120deg, #064e3b, #10b981, #a7f3d0); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-emeraude{ --zone-accent: #10b981; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #6ee7b7, #10b981, #064e3b) 1; }
.name-sakura{ color: #f9a8d4; }
.frame-sakura{ --frame: linear-gradient(135deg, #fce7f3, #f472b6 55%, #be185d); }
.banner-sakura{ background-image: linear-gradient(120deg, #831843, #f9a8d4, #fdf2f8); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-sakura{ --zone-accent: #f9a8d4; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fce7f3, #f9a8d4, #be185d) 1; }
.name-lagon{ color: #38bdf8; }
.frame-lagon{ --frame: linear-gradient(135deg, #bae6fd, #0ea5e9 55%, #0c4a6e); }
.banner-lagon{ background-image: linear-gradient(120deg, #0c4a6e, #0ea5e9, #67e8f9); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-lagon{ --zone-accent: #38bdf8; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #bae6fd, #38bdf8, #0c4a6e) 1; }
.name-cuivre{ color: #d6843c; }
.frame-cuivre{ --frame: linear-gradient(135deg, #fdba74, #b45309 55%, #78350f); }
.banner-cuivre{ background-image: linear-gradient(120deg, #7c2d12, #d6843c, #fed7aa); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-cuivre{ --zone-accent: #d6843c; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fdba74, #d6843c, #78350f) 1; }
.name-amethyste{ color: #c084fc; }
.frame-amethyste{ --frame: linear-gradient(135deg, #e9d5ff, #9333ea 55%, #3b0764); }
.banner-amethyste{ background-image: linear-gradient(120deg, #3b0764, #c084fc, #f3e8ff); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-amethyste{ --zone-accent: #c084fc; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #e9d5ff, #c084fc, #3b0764) 1; }
.name-sable{ color: #e7c58f; }
.frame-sable{ --frame: linear-gradient(135deg, #fef3c7, #d6b98a 55%, #92400e); }
.banner-sable{ background-image: linear-gradient(120deg, #7c5a2b, #e7c58f, #fef3c7); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-sable{ --zone-accent: #e7c58f; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fef3c7, #e7c58f, #92400e) 1; }
.name-menthe{ color: #86efac; }
.frame-menthe{ --frame: linear-gradient(135deg, #dcfce7, #4ade80 55%, #166534); }
.banner-menthe{ background-image: linear-gradient(120deg, #166534, #86efac, #f0fdf4); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-menthe{ --zone-accent: #86efac; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #dcfce7, #86efac, #166534) 1; }
.name-minuit{ color: #818cf8; }
.frame-minuit{ --frame: linear-gradient(135deg, #312e81, #818cf8 55%, #1e1b4b); }
.banner-minuit{ background-image: linear-gradient(120deg, #0f172a, #1e1b4b, #818cf8); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-minuit{ --zone-accent: #818cf8; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #312e81, #818cf8, #1e1b4b) 1; }
.name-brume{ color: #cbd5e1; }
.frame-brume{ --frame: linear-gradient(135deg, #f8fafc, #94a3b8 55%, #475569); }
.banner-brume{ background-image: linear-gradient(120deg, #334155, #cbd5e1, #f1f5f9); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-brume{ --zone-accent: #cbd5e1; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #f8fafc, #cbd5e1, #475569) 1; }
.name-wow{ color: #f5b041; }
.frame-wow{ --frame: linear-gradient(135deg, #ffd700, #1e5aa8 55%, #0b2a4d); }
.banner-wow{ background-image: linear-gradient(120deg, #0b2a4d, #1e5aa8, #f5b041); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-wow{ --zone-accent: #f5b041; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #ffd700, #f5b041, #0b2a4d) 1; }
.name-gears{ color: #d4a017; }
.frame-gears{ --frame: linear-gradient(135deg, #facc15, #4d5d2a 55%, #1f2614); }
.banner-gears{ background-image: linear-gradient(120deg, #1f2614, #4d5d2a, #d97706); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-gears{ --zone-accent: #d4a017; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #facc15, #d4a017, #1f2614) 1; }
.name-minecraft{ color: #6abf4b; }
.frame-minecraft{ --frame: linear-gradient(135deg, #a3e635, #4d7c0f 55%, #3f2a14); }
.banner-minecraft{ background-image: linear-gradient(120deg, #3f2a14, #65a30d, #a3e635); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-minecraft{ --zone-accent: #65a30d; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #a3e635, #65a30d, #3f2a14) 1; }
.name-lol{ color: #60a5fa; }
.frame-lol{ --frame: linear-gradient(135deg, #f5d37a, #0ac8b9 55%, #0a323c); }
.banner-lol{ background-image: linear-gradient(120deg, #0a323c, #0ac8b9, #c89b3c); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-lol{ --zone-accent: #0ac8b9; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #f5d37a, #0ac8b9, #0a323c) 1; }
.name-cs2{ color: #f59e0b; }
.frame-cs2{ --frame: linear-gradient(135deg, #fde68a, #f59e0b 55%, #1f2937); }
.banner-cs2{ background-image: linear-gradient(120deg, #111827, #f59e0b, #374151); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-cs2{ --zone-accent: #f59e0b; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fde68a, #f59e0b, #1f2937) 1; }
.name-dota2{ color: #dc2626; }
.frame-dota2{ --frame: linear-gradient(135deg, #fca5a5, #b91c1c 55%, #1c1917); }
.banner-dota2{ background-image: linear-gradient(120deg, #1c1917, #991b1b, #dc2626); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-dota2{ --zone-accent: #dc2626; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #fca5a5, #dc2626, #1c1917) 1; }
.name-valorant{ color: #ff4655; }
.frame-valorant{ --frame: linear-gradient(135deg, #ff4655, #ece8e1 55%, #0f1923); }
.banner-valorant{ background-image: linear-gradient(120deg, #0f1923, #ff4655, #ece8e1); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-valorant{ --zone-accent: #ff4655; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #ff4655, #ff4655, #0f1923) 1; }
.name-cod{ color: #84cc16; }
.frame-cod{ --frame: linear-gradient(135deg, #bef264, #4d7c0f 55%, #1a2e05); }
.banner-cod{ background-image: linear-gradient(120deg, #1a2e05, #4d7c0f, #a3e635); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-cod{ --zone-accent: #84cc16; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #bef264, #84cc16, #1a2e05) 1; }
.name-fortnite{ color: #c084fc; }
.frame-fortnite{ --frame: linear-gradient(135deg, #22d3ee, #a855f7 55%, #facc15); }
.banner-fortnite{ background-image: linear-gradient(120deg, #3b0764, #a855f7, #22d3ee, #facc15); background-size: 200% 200%; animation: banner-flow 9s ease-in-out infinite; }
:is([data-theme-zone], [data-theme-zone-fixed]).theme-fortnite{ --zone-accent: #a855f7; border-top: 3px solid var(--zone-accent); border-image: linear-gradient(90deg, #22d3ee, #a855f7, #facc15) 1; }

.icon-image{
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    object-fit: contain;
}

.cosmetic-particle img{
    width: 28px;
    height: 28px;
    display: block;
}


/* --- Defis du jour (accueil sous la cagnotte, et /profile) --- */
.daily-challenges-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.daily-challenges-title{
    font-weight: 700;
    font-size: 13px;
}

.daily-challenges-count{
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-twitch);
}

.daily-challenges-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.daily-challenge{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.daily-challenge-icon{
    flex: none;
    width: 24px;
    text-align: center;
}

.daily-challenge-body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daily-challenge-label{
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-challenge.is-done .daily-challenge-label{
    color: var(--color-muted);
    text-decoration: line-through;
}

.daily-challenge-reward{
    flex: none;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    white-space: nowrap;
}

.daily-challenges-footer{
    margin: var(--space-sm) 0 0;
    font-size: 12px;
    color: var(--color-muted);
}

.daily-challenges-card.panel{
    padding: var(--space-sm) var(--space-md);
}

.daily-challenges + .next-reward{
    margin-top: var(--space-md);
}

.daily-challenge-bar{
    display: block;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-panel-border);
    overflow: hidden;
}

.daily-challenge-bar-fill{
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-twitch), #a970ff);
    transition: width .4s ease;
}


/* --- Defis du jour : variante cartes (profil) --- */
.daily-challenges-panel{
    margin-bottom: var(--space-md);
}

.daily-challenges--cards .daily-challenges-header{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
}

.daily-challenges--cards .daily-challenges-title{
    font-size: 15px;
}

.daily-challenges-bonus{
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
}

.daily-challenges-bonus.is-claimed{
    border-color: var(--color-twitch);
    color: var(--color-text);
}

.daily-challenge-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-md);
}

.daily-challenge-card{
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
}

.daily-challenge-card.is-done{
    border-color: var(--color-twitch);
    background: linear-gradient(160deg, var(--color-bg), color-mix(in srgb, var(--color-twitch) 18%, var(--color-bg)));
}

.daily-challenge-card-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.daily-challenge-card-icon{
    font-size: 26px;
    line-height: 1;
}

.daily-challenge-card-reward{
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
}

.daily-challenge-card.is-done .daily-challenge-card-reward{
    color: var(--color-text);
}

.daily-challenge-card-label{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.daily-challenge-card-progress{
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

/* --- Defis du jour : niveaux de difficulte et defi de la semaine --- */
.daily-challenge-level{
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid var(--color-panel-border);
    color: var(--color-muted);
}

.daily-challenge-level.level-easy{
    color: #2f9e6a;
    border-color: #2f9e6a;
}

.daily-challenge-level.level-medium{
    color: #d98a1d;
    border-color: #d98a1d;
}

.daily-challenge-level.level-hard{
    color: #d4493f;
    border-color: #d4493f;
}

.daily-challenge-card-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.daily-challenge-weekly{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-twitch);
    background-color: var(--color-bg);
}

.daily-challenge-weekly.is-done{
    border-style: solid;
    background: linear-gradient(160deg, var(--color-bg), color-mix(in srgb, var(--color-twitch) 18%, var(--color-bg)));
}

.daily-challenge-weekly-title{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-twitch);
}

.daily-challenge-weekly-side{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.daily-challenge-weekly-line{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-panel-border);
}

.daily-challenge-weekly-line.is-done .daily-challenge-label{
    color: var(--color-muted);
    text-decoration: line-through;
}

/* Carte compacte (accueil) : sections "Aujourd'hui" / "Defi de la semaine" bien distinctes */
.daily-challenges-section{
    display: block;
    margin: 0 0 var(--space-xs);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.daily-challenge-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: var(--color-muted);
}

.daily-challenge-dot.level-easy{ background-color: #2f9e6a; }
.daily-challenge-dot.level-medium{ background-color: #d98a1d; }
.daily-challenge-dot.level-hard{ background-color: #d4493f; }

.daily-challenges:not(.daily-challenges--cards) .daily-challenge-label{
    white-space: normal;
    overflow: visible;
}

.daily-challenges:not(.daily-challenges--cards) .daily-challenge-weekly-line{
    margin-top: var(--space-md);
    padding: var(--space-sm);
    border: 1px dashed var(--color-twitch);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
}

.daily-challenges:not(.daily-challenges--cards) .daily-challenge-weekly-line .daily-challenges-section{
    color: var(--color-twitch);
}

/* Statistiques sous les derniers streamers vus : colonne large, les 4 tuiles tiennent sur une ligne. */
.lower-col-video .stat-grid{
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 700px){
    .lower-col-video .stat-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Accueil : statistiques en tuiles avec icone, cagnotte et defis plus aeres --- */
.stats-section .stat-grid{
    gap: var(--space-md);
}

.stats-section .stat-tile{
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-panel-border);
    background-color: var(--color-bg);
}

.stat-icon{
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
    background: color-mix(in srgb, var(--color-twitch) 18%, var(--color-bg));
}

.stat-text{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-section .stat-value{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stats-section .stat-label{
    font-size: 12px;
    line-height: 1.3;
}

.lower-col-chat .pot-strip.panel,
.lower-col-chat .daily-challenges-card.panel{
    padding: var(--space-md) var(--space-lg);
}

.lower-col-chat .pot-strip{
    gap: var(--space-md);
}

.lower-col-chat .pot-button{
    height: 42px;
}

.lower-col-chat .daily-challenges-header{
    margin-bottom: var(--space-md);
}

.lower-col-chat .daily-challenges-list{
    gap: var(--space-md);
}

.lower-col-chat .daily-challenges-footer{
    margin-top: var(--space-md);
}

/* Telephone : 2 colonnes (au lieu de 5 tuiles empilees), tuiles compactes. */
@media (max-width: 700px){
    .stats-section .stat-grid,
    .lower-col-video .stat-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .stats-section .stat-tile{
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .stats-section .stat-icon{
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .stats-section .stat-value{
        font-size: 19px;
    }

    .stats-section .stat-label{
        font-size: 11px;
    }
}

.pot-description{
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-muted);
}

.lower-col-chat .pot-button{
    height: 34px;
    font-size: 13px;
}

.pot-strip > h3{
    margin: 0;
}


/* --- Evenements de la cagnotte : bandeaux et ambiances (voir events.js) --- */
.event-banner[data-kind="hearts"]{ background: linear-gradient(90deg, #ec4899, #f43f5e, #fb7185); }
.event-banner[data-kind="snow"]{ background: linear-gradient(90deg, #3b82f6, #60a5fa, #7dd3fc); }
.event-banner[data-kind="stars"]{ background: linear-gradient(90deg, #d97706, #f59e0b, #eab308); }
.event-banner[data-kind="fireworks"]{ background: linear-gradient(90deg, #6441a4, #ef4444, #f59e0b); }
.event-banner[data-kind="neon"]{ background: linear-gradient(90deg, #7c3aed, #22d3ee, #ec4899); }
.event-banner[data-kind="aurora"]{ background: linear-gradient(90deg, #16a34a, #3b82f6, #a855f7); }
.event-banner[data-kind="gold"]{ background: linear-gradient(90deg, #b45309, #f5b301, #b45309); }

/* Neon : cadres lumineux violet/cyan qui pulsent doucement. */
:root.event-neon body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 55;
    background: linear-gradient(90deg, #7c3aed, #22d3ee, #ec4899, #7c3aed);
    background-size: 200% 100%;
    animation: rainbow-slide 5s linear infinite;
}

:root.event-neon .panel, :root.event-neon .live{
    border-color: #8b5cf6;
    box-shadow: 0 0 10px rgba(139, 92, 246, .55), 0 0 22px rgba(34, 211, 238, .25);
    animation: neon-pulse 3s ease-in-out infinite alternate;
}

@keyframes neon-pulse{
    from{ box-shadow: 0 0 6px rgba(139, 92, 246, .45), 0 0 14px rgba(34, 211, 238, .15); }
    to{ box-shadow: 0 0 14px rgba(139, 92, 246, .75), 0 0 30px rgba(34, 211, 238, .35); }
}

/* Aurore : voiles de couleur qui ondulent en fond de page (traversables, aucun clic bloque). */
:root.event-aurora body::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 45% at 20% 0%, rgba(34, 197, 94, .22), transparent 70%),
        radial-gradient(ellipse 60% 45% at 80% 5%, rgba(59, 130, 246, .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(168, 85, 247, .2), transparent 70%);
    animation: aurora-shift 10s ease-in-out infinite alternate;
}

@keyframes aurora-shift{
    from{ transform: translateX(-4%) scaleY(1); opacity: .65; }
    to{ transform: translateX(4%) scaleY(1.25); opacity: 1; }
}

/* Or : cadres dores avec un reflet qui passe en haut de page. */
:root.event-gold body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 55;
    background: linear-gradient(90deg, #b45309, #fde047, #f5b301, #b45309);
    background-size: 200% 100%;
    animation: rainbow-slide 4s linear infinite;
}

:root.event-gold .panel, :root.event-gold .live{
    border-color: #f5b301;
    box-shadow: 0 0 12px rgba(245, 179, 1, .28);
}

@media (prefers-reduced-motion: reduce){
    :root.event-neon .panel, :root.event-neon .live, :root.event-neon body::before,
    :root.event-aurora body::after, :root.event-gold body::before{
        animation: none;
    }
}

/* 5 tuiles : une seule rangee des que la colonne est assez large, tuiles un peu plus compactes. */
@media (min-width: 1100px){
    .lower-col-video .stat-grid{
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .lower-col-video .stats-section .stat-tile{
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .lower-col-video .stat-icon{
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .lower-col-video .stats-section .stat-value{
        font-size: 21px;
    }
}