/* ========================================
NoSub — Design System
========================================
Layers:
1. TOKENS — CSS variables, fonts (accent neutre cyan ;
les couleurs Kick/Twitch vivent dans --platform-*)
2. BASE — Reset, typography, scrolling
3. UTILITIES — Helper classes
4. LAYOUT — Background effects, header, hero, trending,
how-it-works, footer, toast notifications
5. ANIMATIONS — Keyframes
6. RESPONSIVE — Media queries for theater mode, mobile, tablet, desktop
======================================== */
/* Polices système : zéro requête externe, rendu plus rapide sur mobile. */
/* ========================================
LAYER 1: TOKENS — CSS variables, fonts
======================================== */
:root {
/* Colors */
--bg-primary: #0f0f12;
--bg-secondary: #16161a;
--bg-card: rgba(22, 22, 26, 0.6);
--bg-glass: rgba(255, 255, 255, 0.03);
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--accent-primary: #38bdf8;
--accent-hover: #0ea5e9;
--accent-glow: rgba(56, 189, 248, 0.3);
--accent-rgb: 56, 189, 248;
--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
/* Identité plateforme — réservé aux badges/chips de contenu */
--platform-kick: #53fc18;
--platform-twitch: #9146ff;
--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(56, 189, 248, 0.3);
/* Gradients */
--gradient-accent: linear-gradient(135deg, #38bdf8 0%, #c084fc 100%);
--gradient-dark: linear-gradient(180deg, #0f0f12 0%, #09090b 100%);
/* Shadows */
--shadow-glow: 0 0 60px -15px rgba(56, 189, 248, 0.4);
--shadow-card: 0 4px 24px -4px rgba(0, 0, 0, 0.4);
/* Sizing */
--radius: 12px;
--radius-sm: 6px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
/* Additional UI */
--accent-secondary: #c084fc;
--bg-hover: rgba(255, 255, 255, 0.06);
}
/* ========================================
LAYER 2: BASE — Reset & typography
======================================== */
/* Reset & Base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background: var(--gradient-dark);
min-height: 100%;
}
body {
font-family: var(--font-body);
background: var(--gradient-dark);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 10000;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--accent-primary);
color: #04121d;
font-weight: 700;
transform: translateY(-140%);
transition: transform var(--transition-fast);
}
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #fff;
outline-offset: 2px;
}
main {
flex: 1 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--accent-hover);
}
.hidden {
display: none !important;
}
.no-scroll {
overflow: hidden !important;
}
.no-access header,
.no-access main,
.no-access footer,
.no-access .bg-grid,
.no-access .bg-glow,
.no-access .bg-glow-secondary {
pointer-events: none;
user-select: none;
filter: blur(6px);
opacity: 0.35;
}
.access-gate {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(circle at top, rgba(120, 68, 255, 0.15), rgba(10, 10, 14, 0.9));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.access-gate.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.access-gate__card {
width: 100%;
max-width: 520px;
background: linear-gradient(140deg, rgba(24, 24, 34, 0.92), rgba(12, 12, 20, 0.85));
border: 1px solid rgba(148, 98, 255, 0.35);
border-radius: var(--radius-lg);
padding: 28px 30px 30px;
box-shadow: 0 28px 70px -40px rgba(var(--accent-rgb), 0.6), var(--shadow-card);
text-align: center;
}
.access-gate__title {
font-family: var(--font-display);
font-size: 26px;
margin-bottom: 10px;
}
.access-gate__text {
color: rgba(233, 234, 245, 0.9);
margin: 0;
font-size: 1.02rem;
line-height: 1.7;
}
.access-gate__text + .access-gate__text {
margin-top: 12px;
}
.access-gate__text:last-of-type {
margin-bottom: 20px;
}
.access-gate__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border-radius: var(--radius-full);
border: 1px solid transparent;
background: var(--gradient-accent);
color: #0b0b0f;
font-weight: 600;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.access-gate__button:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-glow);
}
/* ========================================
LAYER 3: UTILITIES
========================================
Utility Classes
======================================== */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.glass-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
}
.gradient-text {
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glow-box {
box-shadow: var(--shadow-glow);
}
/* ========================================
LAYER 4: LAYOUT — Background, header, hero, footer
========================================
Background Effects
======================================== */
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
.bg-glow {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: var(--accent-glow);
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: 0;
}
.bg-glow-secondary {
position: fixed;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background: rgba(var(--accent-rgb), 0.15);
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
/* Respecte le réglage système « réduire les animations » (accessibilité + perf). */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ========================================
Header
======================================== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 12px;
}
.logo-container {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.logo-container:hover {
opacity: 0.8;
}
.logo-icon {
position: relative;
}
.logo-icon::before {
content: '';
position: absolute;
inset: -4px;
background: var(--accent-glow);
border-radius: 50%;
filter: blur(8px);
opacity: 0;
transition: opacity var(--transition-normal);
}
.logo-container:hover .logo-icon::before {
opacity: 1;
}
.logo-icon img,
.logo-icon svg {
width: 36px;
height: 36px;
position: relative;
z-index: 1;
display: block;
}
.logo-text {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
.logo-text span {
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bmc-btn {
min-width: 0;
font-size: 20px;
height: 40px;
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
flex-shrink: 1;
min-width: 0;
}
.nav-link {
font-size: 0.875rem;
color: var(--text-secondary);
white-space: nowrap;
transition: color var(--transition-fast);
}
.nav-link:hover {
color: var(--text-primary);
}
.nav-link-donate {
color: var(--accent-primary);
}
.nav-link-donate:hover {
color: var(--accent-hover);
}
/* Language links (manual switch) */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 8px;
border-left: 1px solid var(--border-color);
position: relative;
}
/* Bouton de langue : neuf codes en ligne occupaient 469 px, soit un tiers d'un
ecran de 1440. La navigation debordait de 60 px a toutes les largeurs, et a
1152 px les deux dernieres langues sortaient de l'ecran sous la pastille
« en ligne ». Quatre pastilles + ce bouton rendent l'essentiel a la
navigation sans cacher les langues qui font 99 % des sessions. */
.lang-current {
font: inherit;
font-size: 0.8125rem;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 4px 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all var(--transition-fast);
}
.lang-current::after {
content: '';
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: 0.65;
}
.lang-current:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--accent-primary, var(--text-primary));
}
.lang-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 120;
min-width: 132px;
padding: 6px;
flex-direction: column;
gap: 2px;
background: var(--bg-elevated, #12121a);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.lang-switch.is-open .lang-menu {
display: flex;
}
/* Sans resserrage, le panneau descendait sur une bonne part de la hauteur
d'ecran (426 px releves a neuf entrees). Borne au-dessus du menu mobile :
sous 1040 px le deroule redevient une simple suite de pastilles, et ce
resserrage prendrait le pas sur leur taille tactile de 52 px. */
@media (min-width: 1041px) {
.lang-menu .lang-link {
text-align: left;
border-radius: 6px;
padding: 6px 10px;
line-height: 1.15;
min-width: 0;
}
}
.lang-link {
font-size: 0.8125rem;
color: var(--text-muted);
padding: 4px 8px;
border: 1px solid transparent;
border-radius: var(--radius-full);
transition: all var(--transition-fast);
}
.lang-link:hover {
color: var(--text-primary);
border-color: var(--border-color);
background: rgba(255, 255, 255, 0.03);
}
.lang-link.active,
.lang-link[aria-current="true"] {
color: #061006;
background: var(--accent-primary);
border-color: var(--accent-primary);
font-weight: 800;
}
/* Menu hamburger mobile */
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-menu-toggle span {
width: 24px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translateY(7px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translateY(-7px);
}
/* ========================================
Hero Section
======================================== */
.hero {
position: relative;
min-height: 760px;
display: flex;
align-items: center;
justify-content: center;
padding: 96px 24px 48px;
z-index: 1;
}
.hero-content {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
/* Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
margin-bottom: 32px;
animation: fadeInUp 0.6s ease-out;
}
.hero-badge svg {
width: 16px;
height: 16px;
color: var(--accent-primary);
}
.hero-badge span {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* Heading */
.hero-title {
font-size: clamp(2.5rem, 6vw, 3.75rem);
font-weight: 700;
margin-bottom: 24px;
animation: none;
}
.hero-title .highlight {
display: block;
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 540px;
margin: 0 auto 40px;
animation: none;
}
/* Input Card */
.input-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-glow);
animation: none;
}
.input-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.input-box {
flex: 1;
width: 100%;
height: 48px;
min-height: 48px;
box-sizing: border-box;
padding: 0 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 1rem;
transition: all var(--transition-fast);
}
.input-box::placeholder {
color: var(--text-muted);
}
.input-box:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Select */
.select-wrapper {
position: relative;
min-width: 140px;
}
.quality-select {
width: 100%;
height: 48px;
min-height: 48px;
padding: 0 40px 0 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 1rem;
cursor: pointer;
appearance: none;
transition: all var(--transition-fast);
}
.quality-select:focus {
outline: none;
border-color: var(--accent-primary);
}
.select-wrapper::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--text-secondary);
pointer-events: none;
}
.quality-select option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 12px;
}
/* Button */
/* Mode Toggle Switch */
.mode-toggle {
display: flex;
gap: 8px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 16px;
}
.mode-toggle-btn {
flex: 1;
height: 48px;
border: none;
border-radius: var(--radius);
background: var(--bg-secondary);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
@media (max-width: 480px) {
.mode-toggle-btn {
height: 44px;
font-size: 0.875rem;
}
.mode-toggle-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mode-toggle-btn svg {
width: 16px;
height: 16px;
}
}
.mode-toggle-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-accent);
opacity: 0;
transition: opacity var(--transition-normal);
z-index: -1;
}
.mode-toggle-btn.active {
color: white;
background: var(--gradient-accent);
box-shadow: 0 4px 20px -4px rgba(var(--accent-rgb), 0.4);
transform: scale(1.02);
}
.mode-toggle-btn.active::before {
opacity: 1;
}
.mode-toggle-btn:hover:not(.active) {
background: rgba(var(--accent-rgb), 0.1);
color: var(--text-primary);
}
.mode-toggle-btn svg {
width: 18px;
height: 18px;
}
.btn-primary {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--gradient-accent);
border: none;
border-radius: var(--radius);
color: white;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 8px 30px -8px rgba(var(--accent-rgb), 0.5);
color: white;
}
.btn-primary:active {
transform: scale(0.98);
}
.btn-primary svg {
width: 20px;
height: 20px;
}
/* Scroll Indicator */
.scroll-indicator {
margin-top: 24px;
animation: fadeInUp 0.6s ease-out 0.5s both;
}
.scroll-indicator a {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text-muted);
transition: color var(--transition-fast);
}
.scroll-indicator a:hover {
color: var(--text-primary);
}
.scroll-indicator span {
font-size: 0.78rem;
}
.scroll-indicator svg {
width: 16px;
height: 16px;
animation: bounce 2s infinite;
}
/* ========================================
Trending Section
======================================== */
.trending-section {
position: relative;
z-index: 1;
}
#trending-section {
padding-top: 20px;
padding-bottom: 40px;
scroll-margin-top: 100px;
}
#trending-section .section-header {
margin-bottom: 24px;
}
.trending-hero {
padding: 120px 0 40px;
text-align: center;
position: relative;
z-index: 1;
}
.trending-hero h1 {
font-size: clamp(2rem, 4vw, 2.75rem);
margin-bottom: 12px;
}
.trending-hero-subtitle {
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto;
}
.trending-page {
padding: 20px 0 90px;
position: relative;
z-index: 1;
}
.trending-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.trending-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.trending-filter {
padding: 6px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 0.85rem;
transition: all var(--transition-fast);
}
.trending-filter:hover {
color: var(--text-primary);
border-color: var(--border-hover);
}
.trending-filter.is-active {
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--border-hover);
}
.trending-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.trending-grid-wide {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.trending-panel {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.trending-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
color: var(--text-muted);
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.trending-panel-header h3 {
color: var(--text-primary);
font-size: 1rem;
margin: 0;
}
.trending-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.trending-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.02);
border: 1px solid transparent;
transition: border var(--transition-fast), background var(--transition-fast);
}
.trending-item:hover {
border-color: var(--border-hover);
background: rgba(255, 255, 255, 0.04);
}
.trending-rank {
min-width: 36px;
font-weight: 700;
color: var(--accent-primary);
}
.trending-meta {
flex: 1;
min-width: 0;
}
.trending-title {
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trending-sub {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 4px;
}
.trending-action {
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-primary);
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 0.8rem;
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
}
.trending-action:hover {
border-color: var(--border-hover);
color: var(--text-primary);
}
.trending-more {
color: var(--text-secondary);
font-size: 0.85rem;
text-decoration: none;
}
.trending-more:hover {
color: var(--text-primary);
}
.trending-empty {
color: var(--text-muted);
padding: 12px;
text-align: center;
}
.trending-tabs {
display: flex;
gap: 8px;
margin-left: auto;
}
/* VOD Thumbnails Grid */
.trending-vods-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 20px;
}
@media (min-width: 768px) {
.trending-vods-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.trending-vods-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.trending-vod-card {
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.trending-vod-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-glow);
}
.trending-vod-thumbnail {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--bg-secondary);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
text-decoration: none;
}
.trending-vod-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.trending-vod-card:hover .trending-vod-thumbnail img {
transform: scale(1.05);
}
.trending-vod-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--accent-primary);
color: #000;
font-size: 0.85rem;
font-weight: 700;
padding: 4px 8px;
border-radius: var(--radius-full);
z-index: 10;
}
.trending-vod-game-badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 0.75rem;
font-weight: 500;
padding: 4px 8px;
border-radius: var(--radius-sm);
z-index: 10;
max-width: calc(100% - 16px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trending-vod-time-badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 0.75rem;
font-weight: 500;
padding: 3px 6px;
border-radius: var(--radius-sm);
z-index: 10;
}
.trending-vod-game {
font-size: 0.8rem;
color: var(--accent-primary);
margin-top: 4px;
}
.trending-vod-info {
padding: 12px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
border-top: none;
}
.trending-vod-info h3 {
font-size: 0.95rem;
margin: 0 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trending-vod-info h3 a {
color: var(--text-primary);
transition: color var(--transition-fast);
cursor: pointer;
}
.trending-vod-info h3 a:hover {
color: var(--accent-primary) !important;
}
.trending-vod-meta {
font-size: 0.8rem;
color: var(--text-secondary);
}
.trending-filter {
padding: 8px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 500;
transition: all var(--transition-fast);
background: transparent;
}
.trending-filter:hover {
color: var(--text-primary);
border-color: var(--border-hover);
background: rgba(var(--accent-rgb), 0.05);
}
.trending-filter.is-active {
background: var(--accent-primary);
color: #000;
border-color: var(--accent-primary);
font-weight: 600;
}
/* Tab Switch */
.trending-tabs {
display: flex;
gap: 12px;
background: var(--bg-card);
padding: 6px;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.trending-tab {
padding: 10px 24px;
background: transparent;
color: var(--text-secondary);
border: none;
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
flex: 1;
text-align: center;
}
.trending-tab:hover {
color: var(--text-primary);
background: rgba(var(--accent-rgb), 0.08);
}
.trending-tab.is-active {
background: var(--accent-primary);
color: #000;
font-weight: 600;
}
/* Trending Navigation Links */
.trending-nav-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, var(--accent-primary) 0%, #61e8f9 100%);
color: #000;
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 0.95rem;
transition: all var(--transition-normal);
box-shadow: 0 4px 16px rgba(97, 232, 249, 0.3);
}
.trending-nav-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(97, 232, 249, 0.5);
}
/* Load More */
.trending-load-more {
text-align: center;
padding: 32px 0;
}
.trending-load-more .btn-primary {
min-width: 200px;
}
/* Home Page Trending Section */
.trending-vods-grid-home {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 992px) {
.trending-vods-grid-home {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.trending-vods-grid-home {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding-bottom: 12px;
margin-bottom: 0;
}
.trending-vods-grid-home::-webkit-scrollbar {
height: 4px;
}
.trending-vods-grid-home::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 2px;
}
.trending-vods-grid-home::-webkit-scrollbar-thumb {
background: var(--accent-primary);
border-radius: 2px;
}
}
.trending-vods-grid-home .trending-vod-card {
overflow: hidden;
background: var(--bg-card);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
@media (min-width: 769px) {
.trending-vods-grid-home .trending-vod-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px -8px rgba(var(--accent-rgb), 0.25);
border-color: var(--border-hover);
}
}
@media (max-width: 768px) {
.trending-vods-grid-home .trending-vod-card {
flex: unset;
scroll-snap-align: unset;
}
}
@media (max-width: 768px) {
.trending-vods-scroll {
display: flex;
overflow-x: auto;
gap: 12px;
padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-bottom: 0;
}
.trending-vods-scroll::-webkit-scrollbar {
height: 4px;
}
.trending-vods-scroll::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 2px;
}
.trending-vods-scroll::-webkit-scrollbar-thumb {
background: var(--accent-primary);
border-radius: 2px;
}
.trending-vods-scroll .trending-vod-card {
flex: 0 0 240px;
scroll-snap-align: start;
}
}
.trending-vods-grid-home .trending-vod-thumbnail {
border-radius: var(--radius) var(--radius) 0 0;
}
.trending-vods-grid-home .trending-vod-info {
padding: 10px;
}
.trending-vods-grid-home .trending-vod-info h3 {
font-size: 0.85rem !important;
margin-bottom: 3px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trending-vod-card-small {
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border-color);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.trending-vod-card-small:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px -8px rgba(var(--accent-rgb), 0.25);
border-color: var(--border-hover);
}
.trending-vod-thumbnail-small {
position: relative;
display: block;
overflow: hidden;
background: #1a1a1e;
aspect-ratio: 16 / 9;
}
.trending-vod-thumbnail-small img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.trending-vod-card-small:hover .trending-vod-thumbnail-small img {
transform: scale(1.05);
}
.trending-vod-badge-small {
position: absolute;
top: 8px;
left: 8px;
background: var(--accent-primary);
color: white;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
z-index: 2;
}
.trending-vod-game-badge-overlay {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
font-weight: 500;
padding: 3px 6px;
border-radius: 4px;
z-index: 3;
max-width: calc(100% - 60px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trending-vod-lang-overlay {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 3px 6px;
border-radius: 4px;
z-index: 3;
text-transform: uppercase;
}
.trending-vod-info-small .trending-vod-game {
font-size: 11px;
color: var(--accent-primary);
margin: 2px 0 0 0;
}
.trending-vod-info-small {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.trending-vod-info-small h4 {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 6px;
color: var(--text-primary);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.trending-vod-info-small h4 a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.trending-vod-info-small h4 a:hover {
color: var(--accent-primary);
}
.trending-vod-info-small p {
font-size: 12px;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.trending-vod-info-small .small-game-tag {
display: inline-block;
font-size: 10px;
padding: 2px 6px;
background: rgba(var(--accent-rgb), 0.2);
color: var(--accent-primary);
border-radius: 4px;
margin-left: 8px;
vertical-align: middle;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Trending Streamers Grid */
.trending-streamers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 640px) {
.trending-streamers-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* Player actions: keep every action labeled and aligned as one toolbar. */
#player-action-btns {
align-items: center;
gap: 10px;
}
#player-action-btns .player-action-btn {
min-width: 0;
min-height: 44px;
margin: 0 !important;
padding: 8px 16px !important;
border-radius: 22px !important;
white-space: nowrap;
}
#player-action-btns .dropdown-container {
position: relative;
display: inline-flex;
}
@media (max-width: 640px) {
#player-action-btns {
gap: 8px;
}
#player-action-btns .player-action-btn {
padding: 8px 12px !important;
font-size: 0.82rem !important;
}
}
.stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 14px;
border-radius: 10px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent-primary);
}
.stat-icon svg {
width: 21px;
height: 21px;
}
.trending-streamer-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}
.trending-streamer-card:hover {
border-color: var(--accent-primary);
box-shadow: 0 4px 16px rgba(97, 232, 249, 0.2);
transform: translateY(-2px);
}
.streamer-avatar {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.streamer-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.streamer-initials {
font-size: 28px;
font-weight: 700;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.streamer-rank {
position: absolute;
top: -8px;
right: -8px;
background: var(--accent-primary);
color: #000;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.streamer-info {
flex: 1;
min-width: 0;
}
.streamer-title {
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--text-primary);
}
.streamer-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.streamer-title a:hover {
color: var(--accent-primary);
}
.streamer-plays {
font-size: 13px;
color: var(--text-secondary);
margin: 6px 0 0 0;
}
.trending-empty {
text-align: center;
padding: 32px 16px;
color: var(--text-secondary);
font-size: 14px;
}
/* ========================================
Paris RP Callout
======================================== */
.paris-rp-callout {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(255, 68, 68, 0.12) 0%, rgba(200, 0, 0, 0.06) 100%);
border: 1px solid rgba(255, 68, 68, 0.4);
padding: 14px 20px;
border-radius: var(--radius);
margin: 12px 0 24px;
font-size: 14px;
color: var(--text-secondary);
text-decoration: none;
cursor: pointer;
transition: all var(--transition-fast);
animation: paris-rp-pulse 2s ease-in-out infinite;
}
.paris-rp-callout:hover {
background: linear-gradient(135deg, rgba(255, 68, 68, 0.2) 0%, rgba(200, 0, 0, 0.1) 100%);
border-color: #ff4444;
animation: none;
}
@keyframes paris-rp-pulse {
0%, 100% { box-shadow: 0 0 8px rgba(255, 68, 68, 0.2); }
50% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); }
}
.paris-rp-callout-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 68, 68, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #ff4444;
}
.paris-rp-callout-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.paris-rp-callout-text strong {
color: #ff6666;
font-size: 14px;
}
.paris-rp-callout-text span {
color: var(--text-secondary);
font-size: 12px;
}
.paris-rp-callout-arrow {
color: #ff4444;
flex-shrink: 0;
}
/* ========================================
How It Works Section
======================================== */
.how-it-works {
padding: 100px 0;
position: relative;
z-index: 1;
}
.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
margin-bottom: 24px;
}
.section-badge svg {
width: 16px;
height: 16px;
color: var(--accent-primary);
}
.section-badge span {
font-size: 0.875rem;
color: var(--text-secondary);
}
.section-title {
font-size: clamp(2rem, 4vw, 2.5rem);
margin-bottom: 16px;
}
.section-subtitle {
font-size: 1rem;
color: var(--text-secondary);
max-width: 480px;
margin: 0 auto;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.step-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
transition: all var(--transition-normal);
}
.step-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
}
.step-icon-wrapper {
position: relative;
display: inline-flex;
margin-bottom: 24px;
}
.step-icon-glow {
position: absolute;
inset: 0;
background: var(--accent-glow);
border-radius: var(--radius);
filter: blur(16px);
opacity: 0;
transition: opacity var(--transition-normal);
}
.step-card:hover .step-icon-glow {
opacity: 1;
}
.step-icon {
position: relative;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border-radius: var(--radius);
}
.step-icon svg {
width: 28px;
height: 28px;
color: var(--accent-primary);
}
.step-number {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-accent);
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
color: white;
}
.step-card h3 {
font-size: 1.125rem;
margin-bottom: 8px;
}
.step-card p {
font-size: 0.875rem;
color: var(--text-secondary);
}
.home-seo-section {
padding: 20px 0 100px;
position: relative;
z-index: 1;
}
.home-seo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
max-width: 1040px;
margin: 0 auto;
}
.home-seo-card {
padding: 24px;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: var(--bg-card);
}
.home-seo-card h3 {
margin-bottom: 10px;
font-size: 1.05rem;
}
.home-seo-card p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.7;
}
.home-seo-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.home-seo-links a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 14px;
border: 1px solid rgba(var(--accent-rgb), 0.24);
border-radius: var(--radius-full);
background: rgba(var(--accent-rgb), 0.08);
color: var(--text-primary);
font-weight: 700;
font-size: 0.9rem;
}
.home-seo-links a:hover {
border-color: rgba(var(--accent-rgb), 0.48);
background: rgba(var(--accent-rgb), 0.14);
}
/* ========================================
Footer
======================================== */
.footer {
padding: 48px 0 32px;
border-top: 1px solid var(--border-color);
position: relative;
z-index: 1;
min-height: 176px;
}
.footer-content {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
}
.footer-logo img {
width: 28px;
height: 28px;
}
.footer-logo span {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 24px;
}
.footer-links a {
font-size: 0.875rem;
color: var(--text-secondary);
}
.footer-links a:hover {
color: var(--text-primary);
}
.footer-social-links {
display: flex;
align-items: center;
gap: 8px;
}
.footer-social-label {
color: var(--text-secondary);
font-size: 0.8125rem;
margin-right: 2px;
}
.footer-social-link {
align-items: center;
border: 1px solid var(--border-color);
border-radius: 50%;
color: var(--text-secondary);
display: inline-flex;
flex: 0 0 36px;
height: 36px;
justify-content: center;
transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
width: 36px;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
border-color: var(--accent-primary);
color: var(--accent-primary);
transform: translateY(-1px);
}
.footer-social-link svg {
fill: currentColor;
height: 16px;
width: 16px;
}
.language-links {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.language-links a {
font-size: 0.875rem;
color: var(--text-muted);
padding: 4px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
transition: all var(--transition-normal);
}
.language-links a:hover {
color: var(--text-primary);
border-color: var(--accent-primary);
background: rgba(168, 85, 247, 0.1);
}
.footer-copy {
grid-column: 1 / -1;
justify-self: center;
font-size: 0.875rem;
color: var(--text-secondary);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
min-height: 24px;
}
.footer-copy svg {
width: 16px;
height: 16px;
color: var(--accent-primary);
fill: var(--accent-primary);
}
.footer-disclaimer {
width: 100%;
padding-top: 32px;
margin-top: 32px;
border-top: 1px solid var(--border-color);
text-align: center;
}
.footer-disclaimer p {
font-size: 0.75rem;
color: var(--text-muted);
}
/* ========================================
Toast Notifications (LAYER 4: LAYOUT continued)
======================================== */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 400px;
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: slideInRight 0.3s ease-out;
pointer-events: auto;
}
.toast.error {
border-color: rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.1);
}
.toast.success {
border-color: rgba(34, 197, 94, 0.3);
background: rgba(34, 197, 94, 0.1);
}
.toast.warning {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.1);
}
.toast.info {
border-color: rgba(var(--accent-rgb), 0.25);
background: rgba(var(--accent-rgb), 0.08);
}
.toast-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.toast.error .toast-icon {
color: #ef4444;
}
.toast.success .toast-icon {
color: #22c55e;
}
.toast.warning .toast-icon {
color: #f59e0b;
}
.toast.info .toast-icon {
color: var(--accent-primary);
}
.toast-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.toast-title {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
}
.toast-message {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}
.toast-action {
align-self: flex-start;
min-height: 32px;
padding: 0 12px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 6px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent-primary);
font-weight: 800;
cursor: pointer;
}
.toast-action:hover {
background: rgba(var(--accent-rgb), 0.18);
}
.toast-close {
flex-shrink: 0;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
}
.toast-close:hover {
color: var(--text-primary);
}
/* ========================================
LAYER 5: ANIMATIONS — Keyframes
========================================
Animations
======================================== */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOutRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100px);
}
}
.toast.removing {
animation: slideOutRight 0.3s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* Responsive Design - Trending Page */
/* Mobile (≤ 768px) */
@media (max-width: 768px) {
.trending-toolbar {
gap: 16px;
margin-bottom: 24px;
}
.trending-filters {
gap: 8px;
}
.trending-filter {
padding: 7px 12px;
font-size: 0.8rem;
}
.trending-tabs {
gap: 8px;
padding: 5px;
}
.trending-tab {
padding: 8px 16px;
font-size: 0.85rem;
}
.trending-vods-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.trending-list {
gap: 8px;
}
.trending-item {
padding: 8px 10px;
gap: 10px;
}
.trending-title {
font-size: 0.9rem;
}
.trending-sub {
font-size: 0.75rem;
}
.trending-action {
padding: 5px 10px;
font-size: 0.75rem;
}
.trending-load-more .btn-primary {
min-width: auto;
width: 100%;
}
.trending-hero {
padding: 90px 0 40px;
}
.trending-hero h1 {
font-size: clamp(1.5rem, 5vw, 2.2rem);
margin-bottom: 12px;
}
.trending-page {
padding: 16px 0 60px;
}
.trending-hero-subtitle {
font-size: 0.95rem;
}
.section-badge {
padding: 8px 14px;
margin-bottom: 18px;
}
.section-badge svg {
width: 16px;
height: 16px;
}
.section-badge span {
font-size: 0.8rem;
}
}
/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
.trending-toolbar {
flex-direction: column;
gap: 12px;
margin-bottom: 18px;
}
.trending-filters {
gap: 6px;
justify-content: center;
}
.trending-filter {
padding: 6px 11px;
font-size: 0.75rem;
}
.trending-tabs {
width: 100%;
gap: 6px;
padding: 4px;
}
.trending-tab {
padding: 8px 12px;
font-size: 0.8rem;
flex: 1;
}
.trending-vods-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.trending-list {
gap: 6px;
}
.trending-item {
padding: 6px 8px;
gap: 8px;
}
.trending-rank {
min-width: 32px;
font-size: 0.85rem;
}
.trending-title {
font-size: 0.85rem;
}
.trending-sub {
font-size: 0.7rem;
}
.trending-action {
padding: 4px 8px;
font-size: 0.7rem;
}
.trending-empty {
padding: 24px 12px;
font-size: 0.9rem;
}
.trending-hero {
padding: 70px 0 24px;
}
.trending-hero h1 {
font-size: 1.4rem;
margin-bottom: 10px;
}
.trending-hero-subtitle {
font-size: 0.9rem;
}
.trending-page {
padding: 12px 0 50px;
}
.section-badge {
padding: 6px 12px;
margin-bottom: 16px;
}
.section-badge svg {
width: 14px;
height: 14px;
}
.section-badge span {
font-size: 0.75rem;
}
}
/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
.trending-toolbar {
gap: 24px;
margin-bottom: 32px;
}
.trending-filters {
gap: 12px;
}
.trending-filter {
padding: 9px 16px;
}
.trending-tabs {
gap: 12px;
}
.trending-tab {
padding: 11px 28px;
}
}
/* ========================================
LAYER 6: RESPONSIVE — Media queries, theater mode
========================================
Responsive Design
======================================== */
@media (max-width: 768px) {
/* Header/nav mobile : voir le bloc @media (max-width: 1040px) plus bas,
qui couvre déjà cette largeur (règles fusionnées pour éviter les doublons). */
.hero {
min-height: 720px;
padding: 88px 16px 44px;
}
.input-row {
flex-direction: column;
}
.select-wrapper {
min-width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.footer-links {
justify-content: center;
}
.footer-social-links {
justify-content: center;
}
.home-seo-section {
padding: 12px 0 72px;
}
.home-seo-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-badge {
padding: 6px 12px;
}
.hero-badge span {
font-size: 0.75rem;
}
.input-card {
padding: 16px;
}
.input-box {
height: 56px !important;
min-height: 56px !important;
font-size: 1rem;
}
.quality-select {
height: 35px !important;
min-height: 35px !important;
}
.steps-grid {
grid-template-columns: 1fr;
}
}
/* ── Theater Mode ───────────────────────── */
body.theater-mode-active {
overflow: hidden;
}
/* Header glisse vers le haut */
body.theater-mode-active header.header {
transform: translateY(-100%);
}
header.header {
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.player-section.theater-mode {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0 !important; /* annule le margin-top:80px de base qui décalait l'overlay */
padding: 0 !important;
z-index: 10000;
background: #000;
overflow: hidden;
animation: theater-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes theater-enter {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
.player-section.theater-mode .container {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: 100vh !important;
}
.player-section.theater-mode .player-container {
max-width: 100% !important;
margin: 0 !important;
gap: 0 !important;
height: 100vh !important;
align-items: stretch !important;
}
.player-section.theater-mode .player-card {
flex: 1 1 auto !important;
min-width: 0 !important;
background: #000 !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: none !important;
justify-content: center !important;
}
.player-section.theater-mode .video-wrapper {
flex: 1 1 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding-top: 0 !important;
position: relative !important;
}
.player-section.theater-mode .video-wrapper video,
.player-section.theater-mode .video-wrapper .video-js {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* garde le ratio 16:9, pas d'étirement */
background: #000 !important;
}
.player-section.theater-mode .video-info,
.player-section.theater-mode .video-meta {
display: none !important;
}
.player-section.theater-mode .video-info-container,
.player-section.theater-mode .monetization-container,
.player-section.theater-mode #vod-game-container {
display: none !important;
}
.player-section.theater-mode .vod-chat-sidebar {
flex: 0 0 340px !important;
width: 340px !important;
min-width: 340px !important;
max-width: none !important;
height: 100vh !important;
max-height: 100vh !important;
background: #0a0a0d !important;
border: none !important;
border-radius: 0 !important;
border-left: 1px solid rgba(var(--accent-rgb), 0.15) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Accent vert en haut du chat en mode cinéma */
.player-section.theater-mode .chat-header {
background: rgba(var(--accent-rgb), 0.04) !important;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.12) !important;
}
/* Bouton théâtre actif = vert */
.player-ctrl-btn.theater-active {
color: var(--accent-primary) !important;
}
/* Badge indicateur "Mode cinéma" */
.theater-hint {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(10, 10, 13, 0.88);
backdrop-filter: blur(12px);
border: 1px solid rgba(var(--accent-rgb), 0.25);
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
font-weight: 500;
padding: 7px 16px;
border-radius: 24px;
z-index: 10001;
pointer-events: none;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
animation: theater-hint-anim 3.2s ease forwards;
}
.theater-hint kbd {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 4px;
padding: 1px 6px;
font-family: inherit;
font-size: 11px;
color: var(--accent-primary);
}
@keyframes theater-hint-anim {
0% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
12% { opacity: 1; transform: translateX(-50%) translateY(0); }
70% { opacity: 1; }
100% { opacity: 0; }
}
#video-wrapper-container .chapter-menu {
position: absolute;
top: 50px;
right: 10px;
width: 320px;
max-height: 400px;
background: rgba(28, 28, 28, 0.98);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 100;
}
#video-wrapper-container .chapter-menu.open {
display: flex;
}
.chapter-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(45, 45, 45, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chapter-menu-header span {
font-size: 0.875rem;
font-weight: 600;
color: #efeff1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chapter-menu-close {
background: none;
border: none;
color: #a8a8b3;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.chapter-menu-close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.chapter-menu-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.chapter-menu-loading {
padding: 24px 16px;
text-align: center;
color: #a8a8b3;
font-size: 0.875rem;
}
.vod-language-tag {
display: inline-block;
padding: 2px 6px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.15);
color: #efeff1;
border-radius: 4px;
letter-spacing: 0.5px;
}
.chapter-item {
display: flex;
align-items: center;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s;
border: none;
background: none;
width: 100%;
text-align: left;
}
.chapter-item:hover {
background: rgba(255, 255, 255, 0.08);
}
.chapter-item.active {
background: rgba(var(--accent-rgb), 0.15);
}
.chapter-item-time {
min-width: 56px;
font-size: 0.8125rem;
color: #a8a8b3;
font-variant-numeric: tabular-nums;
}
.chapter-item-game-img {
width: 36px;
height: 48px;
object-fit: cover;
border-radius: 3px;
margin-right: 10px;
flex-shrink: 0;
}
.chapter-item-info {
flex: 1;
min-width: 0;
}
.chapter-item-name {
font-size: 0.9375rem;
color: #efeff1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chapter-item-duration {
font-size: 0.75rem;
color: #a8a8b3;
margin-top: 2px;
}
.chapter-item.active .chapter-item-name {
color: var(--accent-primary);
}
.chapter-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: var(--accent-primary);
transition: width 0.1s linear;
}
@media (max-width: 768px) {
#video-wrapper-container .player-controls-overlay {
right: 5px;
gap: 4px;
align-items: center;
}
#video-wrapper-container .theater-mode-toggle {
padding: 0 8px;
font-size: 0;
height: 36px;
}
#video-wrapper-container .theater-mode-toggle svg {
width: 18px;
height: 18px;
}
#video-wrapper-container .theater-mode-toggle span {
display: none;
}
#video-wrapper-container .chapter-select-btn {
padding: 0 10px;
font-size: 0;
height: 36px;
}
#video-wrapper-container .chapter-select-btn svg {
width: 18px;
height: 18px;
}
#video-wrapper-container .chapter-select-btn span {
display: none;
}
#video-wrapper-container .chapter-menu {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 32px);
max-width: 320px;
max-height: 60vh;
}
.player-center-controls {
gap: 8px !important;
}
.player-center-play {
width: 64px !important;
height: 64px !important;
}
.player-skip-btn {
width: 52px !important;
height: 52px !important;
}
.player-top-controls {
gap: 6px !important;
}
.player-bottom-controls {
padding: 0 8px 8px !important;
}
.player-controls-row {
gap: 8px !important;
}
.player-ctrl-btn {
width: 36px !important;
height: 36px !important;
}
.player-ctrl-btn svg {
width: 18px !important;
height: 18px !important;
}
.player-volume-slider {
display: none !important;
}
.player-time {
font-size: 11px !important;
}
.player-chapter-btn span {
display: none !important;
}
.player-chapter-btn {
padding: 6px !important;
}
}
@media (max-width: 400px) {
.player-center-controls {
gap: 4px !important;
}
.player-center-play {
width: 56px !important;
height: 56px !important;
}
.player-center-play svg {
width: 24px !important;
height: 24px !important;
}
.player-skip-btn {
width: 44px !important;
height: 44px !important;
}
.player-skip-btn svg {
width: 18px !important;
height: 18px !important;
}
.player-skip-label {
display: none !important;
}
.player-bottom-controls {
padding: 0 4px 4px !important;
}
.player-controls-row {
gap: 4px !important;
}
.player-ctrl-btn {
width: 32px !important;
height: 32px !important;
}
.player-ctrl-btn svg {
width: 16px !important;
height: 16px !important;
}
.player-time {
font-size: 10px !important;
}
}
/* Theater Mode Responsive */
@media (max-width: 1024px) {
.player-section.theater-mode .vod-chat-sidebar {
flex: 0 0 300px !important;
width: 300px !important;
min-width: 300px !important;
}
}
@media (max-width: 768px) {
.player-section.theater-mode .player-container {
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
}
.player-section.theater-mode .player-card {
flex: 0 0 auto !important;
width: 100vw !important;
height: calc(100vw * 9 / 16) !important;
max-height: calc(100vh - 120px) !important;
margin: 0 !important;
padding: 0 !important;
}
.player-section.theater-mode .video-wrapper {
width: 100vw !important;
height: 100% !important;
}
.player-section.theater-mode .vod-chat-sidebar {
flex: 1 1 auto !important;
width: 100vw !important;
min-width: 100vw !important;
height: calc(100vh - 100vw * 9 / 16) !important;
max-height: calc(100vh - 100vw * 9 / 16) !important;
margin: 0 !important;
padding: 0 !important;
border-left: none !important;
border-top: 1px solid var(--border-color) !important;
}
#video-wrapper-container .theater-mode-toggle {
right: 8px;
padding: 6px 10px;
font-size: 0.75rem;
}
#video-wrapper-container .theater-mode-toggle span {
display: none;
}
}
/* Theater chat adjustments */
.player-section.theater-mode .vod-chat-sidebar .chat-header-title {
padding: 12px 16px;
font-size: 0.95rem;
}
.player-section.theater-mode .vod-chat-sidebar .chat-messages {
padding: 8px;
gap: 6px;
}
.player-section.theater-mode .vod-chat-sidebar .chat-message {
padding: 6px;
font-size: 0.8rem;
}
.recent-history-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.recent-history-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.recent-history-grid {
display: flex;
overflow-x: auto;
gap: 12px;
padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.recent-history-grid::-webkit-scrollbar {
height: 4px;
}
.recent-history-grid::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 2px;
}
.recent-history-grid::-webkit-scrollbar-thumb {
background: var(--accent-primary);
border-radius: 2px;
}
}
.recent-history-card {
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border-color);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.recent-history-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px -8px rgba(var(--accent-rgb), 0.25);
border-color: var(--border-hover);
}
.recent-history-thumb {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
}
.recent-history-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.recent-history-card:hover .recent-history-thumb img {
transform: scale(1.05);
}
@media (max-width: 768px) {
.recent-history-card {
flex: 0 0 200px;
scroll-snap-align: start;
}
}
.recent-history-thumb {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.recent-history-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-history-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.2);
}
.recent-history-time-overlay {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
padding: 3px 6px;
border-radius: 4px;
font-weight: 500;
z-index: 3;
}
.recent-history-game-overlay {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 10px;
padding: 3px 6px;
border-radius: 4px;
z-index: 3;
max-width: calc(100% - 60px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.recent-history-game {
font-size: 0.8rem;
color: var(--accent-primary);
margin: 2px 0 0;
}
.recent-history-owner a {
color: var(--accent-primary);
text-decoration: none;
}
.recent-history-owner a:hover {
text-decoration: underline;
}
.recent-history-info {
padding: 12px;
}
.recent-history-title {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 4px 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--transition-fast);
}
.recent-history-title:hover {
color: var(--accent-primary);
}
.recent-history-owner {
font-size: 12px;
color: var(--text-secondary);
margin: 0;
}
/* History page header */
.history-page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-color);
}
.history-count {
font-size: 0.9rem;
color: var(--text-muted);
}
.history-clear-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,80,80,0.08);
border: 1px solid rgba(255,80,80,0.2);
color: #ff6b6b;
font-size: 0.8rem;
font-weight: 500;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
}
.history-clear-btn:hover {
background: rgba(255,80,80,0.16);
border-color: rgba(255,80,80,0.4);
}
/* History play overlay */
.history-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
color: #fff;
opacity: 0;
transition: opacity 0.18s;
z-index: 2;
}
.recent-history-card:hover .history-play-overlay {
opacity: 1;
}
/* Placeholder icon when no image */
.history-thumb-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.03);
z-index: 0;
}
.recent-history-thumb img ~ .history-thumb-placeholder {
display: none;
}
/* Miniature distante cassée : on réaffiche le placeholder même si l'![]()
existe */
.recent-history-thumb.thumb-fallback .history-thumb-placeholder {
display: flex !important;
}
/* Duration badge */
.history-duration-badge {
position: absolute;
bottom: 28px;
right: 7px;
background: rgba(0,0,0,0.82);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
z-index: 3;
letter-spacing: 0.02em;
}
/* Progress bar */
.history-progress-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255,255,255,0.15);
z-index: 3;
}
.history-progress-fill {
height: 100%;
background: var(--accent-primary);
border-radius: 0 2px 2px 0;
transition: width 0.3s;
}
/* Streamer avatar + name row */
.history-meta-row {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0 3px;
}
.history-streamer-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* Relative date */
.history-date {
font-size: 11px;
color: var(--text-muted);
margin: 0;
}
/* Empty state */
.history-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: var(--text-muted);
text-align: center;
grid-column: 1 / -1;
}
.app-view-shell {
padding-top: 96px;
margin-top: 0;
min-height: 80vh;
}
/* ========================================
Video Player Section - Modern Design
======================================== */
.player-section {
padding: 96px 0 40px;
margin-top: 0;
position: relative;
z-index: 1;
}
.player-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 20px;
align-items: stretch;
}
.player-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a24 100%);
}
.resume-prompt-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
.resume-prompt-card {
background: linear-gradient(145deg, rgba(30, 30, 40, 0.95), rgba(15, 15, 22, 0.98));
border: 1px solid rgba(var(--accent-rgb), 0.3);
border-radius: 20px;
padding: 36px;
text-align: center;
max-width: 340px;
animation: fadeInScale 0.3s ease-out;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--accent-rgb), 0.15);
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.resume-prompt-icon {
width: 72px;
height: 72px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}
.resume-prompt-icon svg {
width: 36px;
height: 36px;
color: white;
}
.resume-prompt-card h3 {
margin: 0 0 8px;
font-size: 1.35rem;
color: var(--text-primary);
font-weight: 600;
}
.resume-prompt-card p {
margin: 0 0 24px;
color: var(--text-secondary);
font-size: 1rem;
}
.resume-prompt-card p span {
color: var(--accent-primary);
font-weight: 600;
}
.resume-prompt-buttons {
display: flex;
gap: 12px;
}
.btn-resume {
flex: 1;
padding: 14px 24px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
color: white;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
.btn-resume:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.5);
}
/* Sur petit écran, la vidéo est basse (aspect-ratio 16/9 sur ~375px de large) :
la carte doit rester compacte pour ne pas déborder du cadre vidéo. */
@media (max-width: 480px) {
.resume-prompt-card {
padding: 14px;
max-width: 90%;
}
.resume-prompt-icon {
width: 36px;
height: 36px;
margin-bottom: 8px;
}
.resume-prompt-icon svg {
width: 18px;
height: 18px;
}
.resume-prompt-card h3 {
font-size: 0.95rem;
margin-bottom: 3px;
}
.resume-prompt-card p {
font-size: 0.78rem;
margin-bottom: 10px;
}
.btn-resume,
.btn-start-over {
padding: 7px 12px;
font-size: 0.82rem;
}
}
.btn-start-over {
flex: 1;
padding: 14px 24px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
transition: all 0.25s ease;
}
.btn-start-over:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: rgba(255, 255, 255, 0.2);
}
#video-wrapper-container {
position: relative;
}
.video-wrapper video,
.video-wrapper .video-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Plein écran natif : garde le ratio, fond noir pour les bandes */
.video-wrapper:fullscreen {
padding-top: 0 !important;
}
.video-wrapper:fullscreen video,
.video-wrapper:fullscreen .video-js {
object-fit: contain !important;
background: #000 !important;
}
.video-info-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 15px 24px;
border-top: 1px solid var(--border-color);
}
.video-info {
display: flex;
align-items: center;
gap: 16px;
}
.streamer-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--accent-primary);
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.video-meta h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 4px;
}
.video-meta p {
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Modern Player Controls Overlay */
#video-wrapper-container .player-controls-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
pointer-events: none;
}
#video-wrapper-container .player-controls-overlay * {
pointer-events: none;
}
#video-wrapper-container .player-controls-overlay button,
#video-wrapper-container .player-controls-overlay input,
#video-wrapper-container .player-controls-overlay select,
#video-wrapper-container .player-controls-overlay .settings-menu,
#video-wrapper-container .player-controls-overlay .chapter-menu,
#video-wrapper-container .player-center-controls,
#video-wrapper-container .player-top-controls,
#video-wrapper-container .player-bottom-controls,
#video-wrapper-container #player-seek-container,
#video-wrapper-container #player-center-play,
#video-wrapper-container .player-skip-btn,
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .settings-menu-row,
#video-wrapper-container .settings-option,
#video-wrapper-container .settings-submenu-header {
pointer-events: auto !important;
}
#video-wrapper-container .quality-select-wrapper {
min-width: 100px;
}
#video-wrapper-container .quality-select-wrapper .quality-select {
height: 36px;
min-height: 36px;
padding: 0 32px 0 12px;
font-size: 0.875rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
/* Center Controls (Play Button) */
.player-center-controls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 16px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.player-center-controls.visible {
opacity: 1;
pointer-events: auto;
}
.player-center-play {
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
position: relative;
z-index: 10;
}
.player-center-play:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
transform: scale(1.1);
}
.player-center-play:active {
transform: scale(0.95);
}
.player-center-play svg {
width: 32px;
height: 32px;
color: white;
margin-left: 4px;
}
.player-center-play.playing svg {
margin-left: 0;
}
.player-center-play.playing .play-icon {
display: none !important;
}
.player-center-play.playing .pause-icon {
display: block !important;
}
.player-center-play:not(.playing) .play-icon {
display: block;
}
.player-center-play:not(.playing) .pause-icon {
display: none;
}
/* Skip Buttons */
.player-skip-btn {
width: 64px;
height: 64px;
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(8px);
opacity: 0;
}
.player-skip-btn.visible {
opacity: 1;
}
.player-skip-btn:hover {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.6);
transform: scale(1.1);
}
.player-skip-btn svg {
width: 24px;
height: 24px;
color: white;
}
.player-skip-label {
position: absolute;
bottom: -20px;
font-size: 10px;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
/* Top Controls */
.player-top-controls {
position: absolute;
top: 12px;
right: 12px;
display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
.player-top-controls.visible {
opacity: 1;
}
/* Bottom Controls */
.player-bottom-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 16px 12px;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.player-bottom-controls.visible {
opacity: 1;
}
/* Seek Bar */
.player-seek-container {
margin-bottom: 8px;
cursor: pointer;
position: relative;
}
.player-seek-bar {
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
transition: height 0.15s ease;
}
.player-seek-container:hover .player-seek-bar {
height: 6px;
}
.player-seek-buffered {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.player-seek-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--accent-primary);
border-radius: 2px;
}
/* Passages dont Twitch a coupé le son (musique protégée). Dessinés au-dessus
de la progression pour rester lisibles une fois la lecture passée dessus,
mais sous les marqueurs, qui eux sont cliquables. */
.player-seek-muted {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: 2px;
overflow: hidden;
}
.seek-muted-range {
position: absolute;
top: 0;
height: 100%;
min-width: 2px;
/* Hachures : distingue le passage muet d'un simple segment de couleur,
même pour un daltonien. */
background: repeating-linear-gradient(
45deg,
rgba(255, 190, 60, 0.85) 0 3px,
rgba(120, 85, 0, 0.85) 3px 6px
);
}
.player-muted-skip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 0 8px;
/* Cible tactile : 44 px sur mobile, la recommandation WCAG. */
min-height: 36px;
padding: 8px 14px;
border: 1px solid rgba(255, 190, 60, 0.5);
border-radius: 999px;
background: rgba(60, 45, 0, 0.85);
color: #ffd98a;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition-normal), border-color var(--transition-normal);
}
.player-muted-skip:hover {
background: rgba(90, 68, 0, 0.9);
border-color: rgba(255, 190, 60, 0.8);
}
.player-muted-skip[hidden] {
display: none;
}
@media (max-width: 768px) {
.player-muted-skip {
min-height: 44px;
padding: 10px 16px;
}
}
.player-muted-skip svg {
width: 16px;
height: 16px;
}
/* Frontières de chapitres : de simples traits sur la barre. La navigation
passe par le menu, ces repères servent seulement à situer les segments. */
.player-seek-chapters {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
border-radius: 2px;
}
.seek-chapter-tick {
position: absolute;
top: 0;
width: 2px;
height: 100%;
margin-left: -1px;
background: rgba(255, 255, 255, 0.85);
}
.chapter-item-title {
flex: 1;
min-width: 0;
font-size: 0.8125rem;
color: #efeff1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player-seek-markers {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
}
.seek-marker {
position: absolute;
top: 50%;
z-index: 4;
width: 4px;
height: 12px;
padding: 0;
transform: translate(-50%, -50%);
border: 0;
border-radius: 2px;
background: #f8fafc;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
cursor: pointer;
pointer-events: auto;
}
.seek-marker-clip {
background: var(--accent-primary);
}
.seek-marker:hover,
.seek-marker:focus-visible {
width: 7px;
height: 16px;
outline: 2px solid rgba(255, 255, 255, 0.82);
outline-offset: 1px;
}
.player-seek-thumb {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.15s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.player-seek-container:hover .player-seek-thumb {
opacity: 1;
}
.player-seek-preview {
position: absolute;
bottom: 100%;
left: 0;
transform: translateX(-50%);
margin-bottom: 12px;
pointer-events: none;
z-index: 9999;
border-radius: 6px;
padding: 4px;
background: rgba(0,0,0,0.85);
box-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.player-seek-preview-image {
border-radius: 4px;
overflow: hidden;
background: #000;
background-repeat: no-repeat;
}
.player-seek-preview-time {
text-align: center;
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
margin-top: 4px;
background: rgba(0,0,0,0.8);
border-radius: 3px;
color: #fff;
display: inline-block;
left: 50%;
position: relative;
transform: translateX(-50%);
}
/* Controls Row */
.player-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.player-controls-left,
.player-controls-right {
display: flex;
align-items: center;
gap: 8px;
}
.player-ctrl-btn {
width: 40px;
height: 40px;
background: transparent;
border: none;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
transition: all 0.2s ease;
position: relative;
}
/* Zone de clic élargie sans changer la taille visuelle (facilite le clic,
surtout sur mobile où les boutons descendent à 32px). */
.player-ctrl-btn::after {
content: '';
position: absolute;
inset: -6px;
}
/* Sélecteur de qualité dans la barre vidéo */
.player-quality-wrap {
display: flex;
align-items: center;
}
.player-quality-wrap.is-hidden { display: none; }
.player-quality-select {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
padding: 5px 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
outline: none;
max-width: 130px;
}
.player-quality-select option { background: #14141c; color: #fff; }
.streamer-profile-link {
appearance: none;
border: 0;
background: transparent;
color: var(--accent-primary);
font: inherit;
font-weight: 800;
padding: 0;
cursor: pointer;
}
.streamer-profile-link:hover,
.streamer-profile-link:focus-visible {
text-decoration: underline;
outline: none;
}
.clip-create-modal {
width: min(396px, calc(100vw - 18px));
max-width: 396px;
max-height: calc(100vh - 18px);
overflow-y: auto;
padding: 12px;
border-radius: 0;
background: #191c1d;
border: 0;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}
.clip-studio-header {
height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.clip-studio-header h2 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
color: #f4f4f5;
font-size: 1rem;
font-weight: 900;
}
.clip-drag-dots {
color: rgba(255, 255, 255, 0.88);
font-size: 1.08rem;
line-height: 1;
}
.clip-studio-close {
width: 34px;
height: 34px;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
}
.clip-preview-panel {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
margin: 15px 0 12px;
background: #050606;
}
.clip-preview-video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #050606;
}
.clip-preview-video::-webkit-media-controls {
display: none !important;
}
.clip-preview-shadow {
position: absolute;
inset: auto 0 0;
height: 54px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.64), transparent);
pointer-events: none;
}
.clip-preview-play {
position: absolute;
left: 11px;
bottom: 9px;
width: 26px;
height: 26px;
border: 0;
background: transparent;
color: var(--accent-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.clip-preview-range-label {
position: absolute;
right: 10px;
top: 8px;
color: #fff;
font-size: 0.58rem;
font-weight: 800;
text-shadow: 0 1px 2px #000;
}
.clip-author-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.clip-author-main {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.clip-author-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.08);
}
.clip-author-name {
color: #f4f4f5;
font-size: 0.92rem;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clip-title-count {
color: #9da3a7;
font-size: 0.9rem;
font-weight: 800;
}
.clip-title-input {
width: 100%;
height: 36px;
border: 1px solid #596166;
border-radius: 2px;
background: transparent;
color: #f4f4f5;
padding: 0 12px;
font-size: 0.92rem;
outline: none;
}
.clip-title-input:focus {
border-color: #b8c0c5;
}
.clip-timeline {
position: relative;
height: 48px;
margin-top: 12px;
border-radius: 4px;
overflow: visible;
background: #586166;
}
.clip-timeline-ruler {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 3px;
cursor: pointer;
}
.clip-timeline-ruler span {
width: 4px;
height: 32px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.44);
}
.clip-timeline-ruler span.major {
height: 43px;
background: rgba(255, 255, 255, 0.7);
}
.clip-selection-window {
position: absolute;
top: 0;
height: 48px;
min-width: 48px;
border: 5px solid #f5f5f6;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
pointer-events: auto;
cursor: grab;
touch-action: none;
}
.clip-selection-window:active {
cursor: grabbing;
}
.clip-selection-handle,
.clip-selection-grip {
position: absolute;
top: 7px;
bottom: 7px;
width: 3px;
border-radius: 999px;
background: #d9dddf;
pointer-events: auto;
}
.clip-selection-handle {
cursor: ew-resize;
}
.clip-selection-handle.left { left: 10px; }
.clip-selection-handle.right { right: 10px; }
.clip-selection-grip { left: 50%; transform: translateX(-50%); }
.profile-clips-section {
margin-bottom: 28px;
}
.profile-section-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 1.05rem;
color: #fff;
}
.profile-section-title span {
padding: 1px 8px;
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.16);
color: var(--accent-primary);
font-size: 0.78rem;
font-weight: 800;
}
.streamer-profile-tabs {
display: flex;
gap: 4px;
margin: 12px 0 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.streamer-profile-tab {
position: relative;
min-height: 38px;
padding: 0 12px;
border: 0;
background: transparent;
color: var(--text-secondary);
font-weight: 850;
cursor: pointer;
}
.streamer-profile-tab span {
margin-left: 6px;
color: var(--text-muted);
font-size: 0.82rem;
}
.streamer-profile-tab.active {
color: #fff;
}
.streamer-profile-tab.active::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -1px;
height: 3px;
border-radius: 999px 999px 0 0;
background: var(--accent-primary);
}
.streamer-profile-panel[hidden] {
display: none;
}
.clip-card-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 2px 7px;
border-radius: 4px;
background: var(--accent-primary);
color: #0b0f10;
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.06em;
}
.stream-type-badge {
display: inline-flex;
align-items: center;
height: 20px;
margin-right: 8px;
padding: 0 7px;
border-radius: 4px;
background: var(--accent-primary);
color: #04121d;
font-size: 0.68rem;
font-weight: 950;
line-height: 1;
letter-spacing: 0.06em;
vertical-align: middle;
}
.stream-clip-range {
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.clip-video-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 11;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(var(--accent-rgb), 0.48);
color: #fff;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.08em;
pointer-events: none;
backdrop-filter: blur(10px);
}
.clip-page-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 12px 16px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04));
border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.clip-page-info {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
flex-wrap: wrap;
}
.clip-page-kicker {
color: var(--accent-primary);
font-weight: 900;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.clip-page-title {
color: #fff;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60vw;
}
.clip-page-meta {
color: var(--text-secondary, #9aa3a8);
font-variant-numeric: tabular-nums;
}
.clip-page-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.clip-page-btn {
min-height: 36px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: 800;
cursor: pointer;
}
.clip-page-btn.primary {
background: var(--accent-primary);
color: #0b0f10;
}
.bookmark-list {
margin: 14px 0 18px;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 190px;
overflow: auto;
}
.bookmark-list-title {
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bookmark-empty {
padding: 12px;
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: var(--text-muted);
font-size: 0.9rem;
}
.bookmark-item {
display: flex;
align-items: stretch;
gap: 6px;
}
.bookmark-jump {
flex: 1;
min-width: 0;
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
padding: 0 10px;
cursor: pointer;
}
.bookmark-jump strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bookmark-jump span {
color: var(--accent-primary);
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.bookmark-delete {
width: 42px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-secondary);
cursor: pointer;
font-size: 1.2rem;
}
.bookmark-jump:hover,
.bookmark-delete:hover {
border-color: rgba(var(--accent-rgb), 0.45);
background: rgba(var(--accent-rgb), 0.08);
}
.notfound-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
gap: 18px;
position: relative;
z-index: 1;
}
.notfound-logo {
border-radius: 10px;
}
.notfound-code {
font-family: var(--font-display);
font-size: clamp(64px, 14vw, 120px);
font-weight: 700;
line-height: 1;
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.notfound-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.notfound-hint {
color: var(--text-muted);
max-width: 420px;
margin: 0 0 8px;
}
.notfound-home {
display: inline-flex;
padding: 12px 24px;
text-decoration: none;
}
@media (max-width: 480px) {
.view-toolbar {
flex-direction: column;
align-items: stretch !important;
gap: 12px;
}
.view-toolbar h1 {
font-size: clamp(1.35rem, 8vw, 1.8rem);
line-height: 1.12;
}
.view-actions {
width: 100%;
flex-wrap: wrap;
}
.view-actions > button {
flex: 1 1 130px;
justify-content: center;
}
}
.clip-page-btn:disabled {
opacity: 0.6;
cursor: progress;
}
@media (max-width: 640px) {
.clip-page-title { max-width: 100%; }
.clip-page-actions { width: 100%; }
.clip-page-btn { flex: 1; }
}
.clip-window-labels {
display: flex;
justify-content: space-between;
margin-top: 6px;
padding: 0 2px;
color: #8f969c;
font-size: 0.68rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.clip-selection-bubble {
width: 96px;
margin: 5px auto 0;
padding: 8px 7px;
border-radius: 3px;
background: #262a30;
text-align: center;
color: #8f969c;
font-size: 0.78rem;
font-weight: 800;
}
.clip-selection-bubble strong {
color: #fff;
font-size: 0.9rem;
}
.clip-selection-bubble small {
display: block;
margin-top: 4px;
color: #8f969c;
font-size: 0.72rem;
}
.clip-result-panel {
margin-top: 12px;
padding: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.28);
border-radius: 4px;
background: rgba(var(--accent-rgb), 0.08);
}
.clip-result-head {
display: grid;
gap: 3px;
margin-bottom: 9px;
}
.clip-result-kicker {
color: var(--accent-primary);
font-size: 0.7rem;
font-weight: 900;
text-transform: uppercase;
}
.clip-result-head strong {
color: #fff;
font-size: 0.92rem;
}
.clip-result-head small {
color: #a9b1b6;
font-weight: 800;
}
.clip-result-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
.clip-result-btn {
min-height: 34px;
border: 0;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: 900;
cursor: pointer;
}
.clip-result-btn.primary {
background: var(--accent-primary);
color: #0b0f10;
}
.clip-result-btn:disabled {
opacity: 0.6;
cursor: progress;
}
.clip-result-command {
width: 100%;
height: 32px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
background: rgba(0, 0, 0, 0.25);
color: #b8c0c5;
padding: 0 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.72rem;
}
.clip-create-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.clip-cancel-btn,
.clip-publish-btn {
min-width: 78px;
height: 38px;
border: 0;
border-radius: 2px;
font-weight: 900;
cursor: pointer;
}
.clip-cancel-btn {
background: transparent;
color: #f4f4f5;
}
.clip-publish-btn {
background: #33373b;
color: rgba(255, 255, 255, 0.78);
}
.clip-publish-btn:disabled {
color: rgba(255, 255, 255, 0.26);
cursor: not-allowed;
}
.clip-publish-btn:not(:disabled) {
background: var(--accent-primary);
color: #04121d;
}
.clip-hidden-controls {
display: none;
}
.streamer-profile-content {
width: 100%;
}
.streamer-profile-shell {
display: flex;
flex-direction: column;
gap: 16px;
}
.streamer-profile-hero {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
}
.streamer-profile-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(var(--accent-rgb), 0.28);
}
.streamer-profile-avatar-empty {
display: block;
}
.streamer-profile-platform {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.12);
color: var(--accent-primary);
font-size: 0.72rem;
font-weight: 900;
margin-bottom: 6px;
}
.streamer-profile-platform.kick {
background: rgba(83, 252, 24, 0.14);
color: var(--platform-kick);
}
.streamer-profile-platform.twitch {
background: rgba(145, 70, 255, 0.18);
color: #b184ff;
}
.streamer-profile-main h1 {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.25rem);
line-height: 1;
}
.streamer-profile-main p {
margin: 6px 0 0;
color: var(--text-secondary);
font-weight: 700;
}
.streamer-profile-official {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border-radius: 6px;
background: var(--accent-primary);
color: #04121d;
text-decoration: none;
font-weight: 900;
white-space: nowrap;
}
.streamer-profile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
@media (max-width: 700px) {
.streamer-profile-hero {
grid-template-columns: auto 1fr;
}
.streamer-profile-official {
grid-column: 1 / -1;
width: 100%;
}
}
/* Indicateur d'utilisateurs en ligne (présence réelle) */
.online-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.22);
border-radius: 999px;
padding: 4px 10px;
white-space: nowrap;
margin-left: 10px;
}
.online-indicator.is-empty { display: none; }
.online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-primary);
animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
70% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
/* Anti-adblock : porte de blocage plein écran */
.adblock-gate {
position: fixed;
inset: 0;
z-index: 100000;
background: rgba(6, 6, 10, 0.94);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.adblock-gate-card {
max-width: 460px;
text-align: center;
background: #14141c;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 32px 28px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.adblock-gate-icon { font-size: 42px; margin-bottom: 12px; }
.adblock-gate-card h2 { margin: 0 0 12px; color: #fff; font-size: 1.35rem; }
.adblock-gate-card p { color: var(--text-secondary); line-height: 1.55; margin-bottom: 22px; }
body.adblock-locked { overflow: hidden; }
.player-ctrl-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--accent-primary);
}
.player-ctrl-btn svg {
width: 22px;
height: 22px;
}
.player-volume-slider {
display: flex;
align-items: center;
gap: 8px;
}
.player-volume-slider input[type="range"] {
width: 80px;
height: 4px;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
outline: none;
}
.player-volume-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
cursor: pointer;
}
/* Time Display */
.player-time {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
font-variant-numeric: tabular-nums;
}
.player-time .current {
color: white;
}
/* Chapter Button */
.player-chapter-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: white;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
}
.player-chapter-btn:hover {
background: rgba(0, 0, 0, 0.7);
border-color: rgba(255, 255, 255, 0.3);
}
.player-chapter-btn svg {
width: 18px;
height: 18px;
}
/* Theater button styles */
.theater-mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 50;
}
#video-wrapper-container .theater-mode-toggle {
position: relative;
top: auto;
right: auto;
z-index: auto;
}
.theater-mode-toggle:hover {
background: rgba(0, 0, 0, 0.8);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.theater-mode-toggle.active {
background: var(--accent-primary);
color: #fff;
border-color: var(--accent-primary);
}
.theater-mode-toggle svg {
width: 16px;
height: 16px;
}
/* Settings Menu - YouTube style */
.settings-menu {
position: absolute;
bottom: 60px;
right: 60px;
width: 280px;
background: rgba(20, 20, 24, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 100;
pointer-events: auto !important;
}
.settings-menu.open {
display: flex;
pointer-events: auto !important;
}
.settings-menu * {
pointer-events: auto;
}
.settings-menu-section {
padding: 8px 0;
}
.settings-menu-section:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-menu-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
cursor: pointer;
transition: background 0.15s ease;
pointer-events: auto;
}
.settings-menu-row:hover {
background: rgba(255, 255, 255, 0.08);
}
.settings-menu-row-left {
display: flex;
align-items: center;
gap: 12px;
}
.settings-menu-row-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.settings-menu-row-value {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.settings-menu-row-arrow {
color: rgba(255, 255, 255, 0.4);
}
.settings-submenu {
background: rgba(20, 20, 24, 0.98);
display: none;
flex-direction: column;
overflow-y: auto;
max-height: 320px;
}
.settings-submenu.open {
display: flex;
}
.settings-menu.open #settings-main-menu {
display: block;
}
.settings-submenu-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
}
.settings-submenu-header:hover {
background: rgba(255, 255, 255, 0.05);
}
.settings-submenu-header svg {
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.7);
}
.settings-submenu-title {
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.settings-option {
padding: 10px 16px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.settings-option:hover {
background: rgba(255, 255, 255, 0.08);
}
.settings-option.active {
color: var(--accent-primary);
}
.settings-option.active::after {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2353fc18'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* VOD Chat Sidebar */
.vod-chat-sidebar {
width: 300px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 100%;
min-height: 0;
contain: layout paint;
}
.chat-header-title {
padding: 12px 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 0.875rem;
letter-spacing: 0.01em;
}
.chat-header-actions {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.chat-header-icon-btn,
.chat-search-clear,
.chat-search-nav-btn {
appearance: none;
border: 0;
background: transparent;
color: var(--text-muted);
display: inline-grid;
place-items: center;
cursor: pointer;
flex: 0 0 auto;
}
.chat-header-icon-btn {
width: 32px;
height: 32px;
border-radius: 6px;
}
.chat-header-icon-btn svg {
width: 17px;
height: 17px;
}
.chat-header-icon-btn:hover,
.chat-header-icon-btn:focus-visible,
.chat-header-icon-btn.active {
color: var(--accent-primary);
background: rgba(var(--accent-rgb), 0.12);
outline: none;
}
.chat-search-panel {
flex: 0 0 auto;
padding: 8px 10px 9px;
border-bottom: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.018);
}
.chat-search-panel[hidden] {
display: none;
}
.chat-search-input-wrap {
min-height: 34px;
display: flex;
align-items: center;
gap: 7px;
padding: 0 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: rgba(0, 0, 0, 0.16);
color: var(--text-muted);
}
.chat-search-input-wrap:focus-within {
border-color: rgba(var(--accent-rgb), 0.72);
box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}
.chat-search-input-wrap > svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
}
.chat-search-input-wrap input {
min-width: 0;
flex: 1;
height: 30px;
border: 0;
outline: 0;
background: transparent;
color: var(--text-primary);
font: inherit;
font-size: 0.78rem;
}
.chat-search-input-wrap input::placeholder {
color: var(--text-muted);
opacity: 0.82;
}
.chat-search-clear,
.chat-search-nav-btn {
width: 28px;
height: 28px;
border-radius: 5px;
}
.chat-search-clear svg,
.chat-search-nav-btn svg {
width: 15px;
height: 15px;
}
.chat-search-clear:hover,
.chat-search-clear:focus-visible,
.chat-search-nav-btn:hover:not(:disabled),
.chat-search-nav-btn:focus-visible:not(:disabled) {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.chat-search-nav-btn:disabled {
cursor: default;
opacity: 0.4;
}
.chat-search-footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 25px;
margin-top: 5px;
}
.chat-search-count {
min-width: 0;
overflow: hidden;
color: var(--text-muted);
font-size: 0.71rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-search-nav {
display: inline-flex;
gap: 2px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 8px 4px;
display: flex;
flex-direction: column;
gap: 1px;
min-height: 0;
contain: layout paint;
overflow-anchor: none;
scrollbar-gutter: stable;
}
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-sm);
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
.chat-message {
padding: 4px 12px;
font-size: 0.8375rem;
line-height: 1.55;
word-break: break-word;
border-radius: 4px;
transition: background 0.1s;
position: relative;
}
.chat-message:hover {
background: rgba(255, 255, 255, 0.05);
}
.chat-message.chat-search-match {
animation: chat-search-flash 1.8s ease-out;
}
.chat-message.chat-search-hit {
background: rgba(var(--accent-rgb), 0.11);
box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.82);
}
.chat-message.chat-search-hit:hover {
background: rgba(var(--accent-rgb), 0.16);
}
.chat-search-term {
padding: 0 2px;
border-radius: 2px;
background: rgba(var(--accent-rgb), 0.34);
color: var(--text-primary);
font: inherit;
}
@keyframes chat-search-flash {
0%, 55% { background: rgba(var(--accent-rgb), 0.24); box-shadow: inset 3px 0 0 var(--accent-primary); }
100% { background: transparent; box-shadow: inset 0 0 0 transparent; }
}
.chat-reply-context {
margin: 0 0 4px 22px;
padding: 5px 8px;
border-left: 2px solid rgba(var(--accent-rgb), 0.65);
border-radius: 0 6px 6px 0;
background: rgba(var(--accent-rgb), 0.08);
color: var(--text-muted);
font-size: 0.78rem;
line-height: 1.25;
max-width: 100%;
}
.chat-reply-context strong {
color: var(--accent-primary);
margin-right: 4px;
}
.chat-reply-context span {
word-break: break-word;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.chat-username {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
font-weight: 600;
color: var(--accent-primary);
font: inherit;
cursor: pointer;
}
.chat-username:hover,
.chat-username:focus-visible {
text-decoration: underline;
outline: none;
}
.chat-time {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
font-size: 0.7rem;
color: var(--text-muted);
font-family: inherit;
cursor: pointer;
}
.chat-time:hover,
.chat-time:focus-visible {
color: var(--accent-primary);
text-decoration: underline;
outline: none;
}
.chat-text {
color: var(--text-secondary);
word-wrap: break-word;
line-height: 1.3;
}
/* Sidebar Tabs */
.sidebar-tabs {
display: flex;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.sidebar-tab {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
color: var(--text-secondary);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.sidebar-tab:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.03);
}
.sidebar-tab.active {
color: var(--accent-primary);
}
.sidebar-tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-primary);
}
/* Sidebar Content */
.sidebar-content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.tab-content {
display: none;
flex: 1;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.tab-content.active {
display: flex;
}
/* Comments Tab */
.comments-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.comments-count {
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
#comments-count-badge {
color: var(--text-muted);
font-weight: 400;
}
.comments-sort-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 4px 8px;
color: var(--text-primary);
font-size: 0.85rem;
cursor: pointer;
}
.comments-sort-select:hover {
background: rgba(255, 255, 255, 0.08);
}
.comments-list {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.comment-item {
padding: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 0.85rem;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.comment-author {
font-weight: 600;
color: var(--accent-primary);
}
.comment-time {
font-size: 0.7rem;
color: var(--text-muted);
}
.comment-body {
color: var(--text-secondary);
word-wrap: break-word;
line-height: 1.4;
margin-bottom: 8px;
}
.comment-timestamp-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--accent-primary);
text-decoration: none;
font-size: 0.8rem;
padding: 2px 6px;
border-radius: var(--radius);
background: rgba(var(--accent-rgb), 0.1);
cursor: pointer;
margin-bottom: 8px;
}
.comment-timestamp-link:hover {
background: rgba(var(--accent-rgb), 0.2);
}
.comment-body .timestamp-link {
color: var(--accent-hover);
text-decoration: none;
font-weight: 600;
cursor: pointer;
padding: 0 2px;
border-radius: 2px;
transition: all 0.2s ease;
}
.comment-body .timestamp-link:hover {
background: rgba(var(--accent-rgb), 0.2);
color: #c084fc;
}
.comment-actions {
display: flex;
gap: 6px;
align-items: center;
}
.comment-reactions {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.reaction-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 12px;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
}
.reaction-pill:hover {
background: rgba(255, 255, 255, 0.08);
}
.reaction-pill.active {
background: rgba(var(--accent-rgb), 0.2);
border-color: var(--accent-primary);
}
.reaction-pill.readonly {
cursor: default;
opacity: 0.7;
}
.reaction-pill.readonly:hover {
background: rgba(255, 255, 255, 0.05);
}
.reaction-emoji {
font-size: 0.9rem;
}
.reaction-count {
color: var(--text-secondary);
font-weight: 500;
}
.comment-more-actions {
margin-left: auto;
position: relative;
}
.btn-more-actions {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: var(--radius);
}
.btn-more-actions:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
.comment-status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius);
font-size: 0.7rem;
font-weight: 500;
margin-left: 8px;
}
.comment-status-badge.pending {
background: rgba(255, 165, 0, 0.2);
color: #ffa500;
}
/* Comments Composer */
.comments-composer {
padding: 12px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}
.comment-textarea {
width: 100%;
min-height: 60px;
padding: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.85rem;
resize: vertical;
font-family: inherit;
}
.comment-textarea:focus {
outline: none;
border-color: var(--accent-primary);
background: rgba(255, 255, 255, 0.08);
}
.composer-actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
.btn-timestamp {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-timestamp:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
.btn-post-comment {
margin-left: auto;
padding: 6px 16px;
background: var(--accent-primary);
border: none;
border-radius: var(--radius);
color: white;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-post-comment:hover {
opacity: 0.9;
}
.btn-post-comment:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.char-count {
text-align: right;
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 4px;
}
.comments-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.comments-loading {
text-align: center;
padding: 20px;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.player-container {
flex-direction: column;
}
.vod-chat-sidebar {
width: 100%;
height: 500px;
}
.reaction-pill {
font-size: 0.7rem;
padding: 2px 6px;
}
}
@media (max-width: 768px) {
.vod-chat-sidebar {
height: 450px;
}
}
@media (max-width: 480px) {
.vod-chat-sidebar {
height: 400px;
}
}
#logo-link, #streamer-name-link {
transition: opacity 0.2s ease;
display: inline-block;
text-decoration: none;
}
#logo-link:hover, #streamer-name-link:hover {
opacity: 0.8;
}
#share-btn:hover {
background: var(--accent-primary) !important;
color: white !important;
}
.view-section {
position: relative;
z-index: 2;
}
.player-section {
position: relative;
z-index: 2;
}
/* GAMES CSS */
/* ============================================================
Games Browse Page (games.html)
============================================================ */
.games-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 16px;
}
@media (min-width: 768px) {
.games-grid {
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
}
}
.game-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.game-card-featured {
border-color: #ff4444;
box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
position: relative;
}
.game-card-featured:hover {
border-color: #ff6666;
box-shadow: 0 0 30px rgba(255, 68, 68, 0.5);
}
.game-card-hot-label {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
background: #ff4444;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
}
.game-card-artwork-featured {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a0000, #440000);
}
.game-card:hover {
transform: translateY(-4px);
border-color: var(--accent-primary);
box-shadow: 0 8px 24px rgba(145, 70, 255, 0.15);
}
.game-card-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.game-card-artwork {
position: relative;
width: 100%;
aspect-ratio: 188 / 250;
overflow: hidden;
background: var(--bg-secondary);
}
.game-card-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.game-card-artwork-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent-primary), #6441a5);
color: white;
}
.game-card-info {
padding: 12px 14px;
}
.game-card-name {
margin: 0 0 4px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.game-card-count {
margin: 0;
color: var(--text-secondary);
font-size: 12px;
}
/* ============================================================
Game Detail Page (game.html) — Search Bar
============================================================ */
.game-search-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 8px 14px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
transition: border-color 0.2s;
}
.game-search-bar:focus-within {
border-color: var(--accent-primary);
}
.game-search-icon {
flex-shrink: 0;
color: var(--text-secondary);
opacity: 0.5;
}
.game-search-input {
flex: 1;
border: none;
background: none;
color: var(--text-primary);
font-size: 14px;
outline: none;
padding: 0;
}
.game-search-input::placeholder {
color: var(--text-secondary);
opacity: 0.5;
}
.game-search-clear {
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: none;
background: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.2s;
}
.game-search-clear:hover {
opacity: 1;
}
/* ============================================================
Game Detail Page (game.html) — Toolbar
============================================================ */
.game-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.game-toolbar-group {
display: flex;
align-items: center;
gap: 6px;
}
.game-toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-card);
color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.game-toolbar-btn:hover {
border-color: var(--accent-primary);
color: var(--text-primary);
background: rgba(145, 70, 255, 0.08);
}
.game-toolbar-btn.active {
border-color: var(--accent-primary);
background: var(--accent-primary);
color: #fff;
}
.game-toolbar-btn svg {
flex-shrink: 0;
}
/* ============================================================
Game Detail Page (game.html) — Language Dropdown
============================================================ */
.game-lang-dropdown {
position: relative;
}
.game-lang-btn {
min-width: 160px;
justify-content: space-between;
}
.game-lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 160px;
background: rgb(22, 22, 26);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 6px;
z-index: 100;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.game-lang-option {
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background 0.1s;
color: var(--text-secondary);
}
.game-lang-option:hover {
background: rgba(145, 70, 255, 0.1);
color: var(--text-primary);
}
.game-lang-option.active {
background: var(--accent-primary);
color: #fff;
}
.game-lang-option .lang-flag {
margin-right: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.game-lang-option .lang-count {
float: right;
opacity: 0.5;
font-size: 12px;
}
/* ============================================================
Paris RP — Day Dropdown
============================================================ */
.rp-day-dropdown {
position: relative;
}
.rp-day-btn {
min-width: 120px;
justify-content: space-between;
}
.rp-day-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 140px;
background: rgb(22, 22, 26);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 6px;
z-index: 100;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
max-height: 300px;
overflow-y: auto;
}
.rp-day-option {
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: background 0.1s;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: space-between;
}
.rp-day-option:hover {
background: rgba(145, 70, 255, 0.1);
color: var(--text-primary);
}
.rp-day-option.active {
background: var(--accent-primary);
color: #fff;
}
.rp-day-option .day-label {
font-weight: 500;
}
.rp-day-option .day-count {
opacity: 0.5;
font-size: 12px;
margin-left: 8px;
}
/* ============================================================
Paris RP — Description
============================================================ */
.rp-description {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 4px;
}
.rp-description p {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}
/* ============================================================
Paris RP — Streamers Page & Streamer Tag
============================================================ */
.rp-streamers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.rp-streamer-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rp-streamer-card:hover {
transform: translateY(-2px);
border-color: var(--accent-primary);
box-shadow: 0 4px 16px rgba(145, 70, 255, 0.12);
}
.rp-streamer-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #ff4444, #cc0000);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.rp-streamer-initials {
font-size: 16px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.rp-streamer-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.rp-streamer-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.rp-streamer-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.rp-streamer-character {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rp-streamer-arrow {
color: var(--text-secondary);
opacity: 0.4;
flex-shrink: 0;
transition: opacity 0.2s;
}
.rp-streamer-card:hover .rp-streamer-arrow {
opacity: 0.8;
}
.rp-streamer-list-btn {
background: rgba(255, 68, 68, 0.08) !important;
border-color: rgba(255, 68, 68, 0.3) !important;
color: #ff4444 !important;
text-decoration: none !important;
padding: 6px 15px;
gap: 6px;
transition: background 0.2s, border-color 0.2s !important;
}
.rp-streamer-list-btn:hover {
background: rgba(255, 68, 68, 0.18) !important;
border-color: rgba(255, 68, 68, 0.5) !important;
}
.rp-streamer-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(255, 68, 68, 0.1);
border: 1px solid rgba(255, 68, 68, 0.3);
border-radius: 8px;
font-size: 13px;
color: var(--text-primary);
}
.rp-streamer-tag strong {
color: #ff4444;
}
.rp-streamer-tag-clear {
display: inline-flex;
align-items: center;
color: var(--text-secondary);
opacity: 0.5;
transition: opacity 0.2s;
}
.rp-streamer-tag-clear:hover {
opacity: 1;
color: #ff4444;
}
color: #fff;
}
/* ============================================================
Game Detail Page (game.html) — VOD Cards (uniform height)
============================================================ */
/* ============================================================
Responsive
============================================================ */
@media (max-width: 640px) {
.game-toolbar {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.game-toolbar-group {
justify-content: center;
flex-wrap: wrap;
gap: 4px;
}
.game-toolbar-btn {
padding: 8px 12px;
font-size: 12px;
white-space: nowrap;
}
.game-toolbar-btn svg {
width: 13px;
height: 13px;
}
}
/* ========================================
Stream Info Bar (below video)
======================================== */
.stream-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent-primary);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
flex-shrink: 0;
}
.stream-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.stream-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stream-meta {
display: flex;
gap: 14px;
font-size: 0.8rem;
color: var(--text-secondary);
flex-wrap: wrap;
}
/* Quality selector inside player info bar */
.stream-quality-ctrl {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.stream-quality-ctrl label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.quality-select-player {
height: 34px;
padding: 0 28px 0 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: all var(--transition-fast);
min-width: 90px;
}
.quality-select-player:focus {
outline: none;
border-color: var(--accent-primary);
background-color: rgba(var(--accent-rgb), 0.06);
}
.quality-select-player option {
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ========================================
Chat Enhancements
======================================== */
.chat-sync-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(var(--accent-rgb), 0.15);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 700;
color: var(--accent-primary);
letter-spacing: 0.06em;
text-transform: uppercase;
flex-shrink: 0;
}
.chat-sync-dot {
width: 6px;
height: 6px;
background: var(--accent-primary);
border-radius: 50%;
}
.chat-sync-badge.chat-sync-badge-off {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-color);
color: var(--text-muted);
}
.chat-sync-badge.chat-sync-badge-off .chat-sync-dot {
background: var(--text-muted);
}
.chat-status {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
color: var(--text-muted);
font-size: 0.8125rem;
text-align: center;
}
.chat-status::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-primary);
opacity: 0.7;
animation: pulse 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.chat-status-empty {
flex-direction: column;
gap: 10px;
padding: 36px 20px;
}
.chat-status-empty::before {
content: none;
}
.chat-status-empty svg {
width: 28px;
height: 28px;
color: var(--text-muted);
opacity: 0.5;
}
.chat-status-empty strong {
color: var(--text-secondary);
font-weight: 600;
}
.chat-status-empty span {
color: var(--text-muted);
font-size: 0.75rem;
max-width: 220px;
}
.chat-content {
color: var(--text-primary);
word-break: break-word;
}
.chat-time {
font-size: 0.7rem;
color: var(--text-muted);
margin-right: 2px;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.chat-username {
font-weight: 700;
margin-right: 3px;
}
.chat-scroll-btn {
position: sticky;
bottom: 8px;
display: none;
align-self: center;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--accent-primary);
color: #000;
border: none;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
transition: all var(--transition-fast);
z-index: 5;
}
.chat-scroll-btn.visible {
display: inline-flex;
}
.chat-scroll-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.45);
}
.chat-scroll-btn svg {
width: 13px;
height: 13px;
}
/* ========================================
Loading Button State
======================================== */
.btn-primary.is-loading {
pointer-events: none;
opacity: 0.8;
}
.btn-primary.is-loading svg {
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ========================================
Video Player
======================================== */
.video-player {
width: 100%;
height: 100%;
background-color: #000;
}
/* Hide native browser controls */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel { display: none !important; }
video.native-fullscreen-video::-webkit-media-controls,
video.native-fullscreen-video::-webkit-media-controls-enclosure,
video.native-fullscreen-video::-webkit-media-controls-panel {
display: flex !important;
}
/* ── Click zone ── */
.player-click-zone {
position: absolute;
inset: 0;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
z-index: 1;
}
.player-buffering {
position: absolute;
inset: 0;
z-index: 6;
display: grid;
place-items: center;
gap: 10px;
pointer-events: none;
}
.player-buffering[hidden] {
display: none;
}
.player-buffering-spinner {
width: 44px;
height: 44px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: var(--accent-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.35));
}
.player-buffering-label {
padding: 6px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.58);
color: rgba(255, 255, 255, 0.9);
font-size: 0.78rem;
font-weight: 800;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.tap-seek-feedback {
position: absolute;
top: 50%;
z-index: 8;
transform: translateY(-50%);
width: 74px;
height: 74px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.52);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
font-weight: 800;
font-size: 0.95rem;
pointer-events: none;
animation: tapSeekPulse 0.65s ease forwards;
}
.tap-seek-left {
left: 18%;
}
.tap-seek-right {
right: 18%;
}
@keyframes tapSeekPulse {
0% { opacity: 0; transform: translateY(-50%) scale(0.82); }
20% { opacity: 1; transform: translateY(-50%) scale(1); }
100% { opacity: 0; transform: translateY(-50%) scale(1.18); }
}
/* ── Seek tooltip ── */
.player-seek-tooltip {
position: absolute;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.88);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
font-variant-numeric: tabular-nums;
opacity: 0;
transition: opacity 0.15s;
}
/* ── Overlay d'aide des raccourcis clavier ── */
.shortcuts-overlay {
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.18s ease-out;
}
.shortcuts-card {
position: relative;
background: linear-gradient(145deg, rgba(24, 24, 32, 0.98), rgba(14, 14, 20, 0.98));
border: 1px solid rgba(var(--accent-rgb), 0.25);
border-radius: 16px;
padding: 28px 32px;
max-width: 460px;
width: calc(100% - 40px);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--accent-rgb), 0.08);
animation: fadeInScale 0.22s ease-out;
}
.shortcuts-card h3 {
margin: 0 0 18px;
font-size: 1.2rem;
color: var(--text-primary);
font-weight: 700;
}
.shortcuts-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 16px;
align-items: center;
}
.shortcuts-grid kbd {
justify-self: start;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-bottom-width: 2px;
border-radius: 6px;
padding: 3px 9px;
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent-primary);
white-space: nowrap;
}
.shortcuts-grid span {
color: var(--text-secondary);
font-size: 0.9rem;
}
.shortcuts-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition: color 0.15s;
}
.shortcuts-close:hover { color: var(--text-primary); }
/* ── Aperçu image au survol de la barre ── */
.seek-preview {
position: absolute;
bottom: calc(100% + 12px);
left: 0;
transform: translateX(-50%);
width: 160px;
height: 90px;
border-radius: 8px;
overflow: hidden;
background: #000;
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease;
z-index: 6;
}
.seek-preview canvas {
display: block;
width: 100%;
height: 100%;
transition: opacity 0.22s ease;
}
/* Vignette encore approximative : simple voile, sans spinner ni saccade. Une
image est toujours affichée (fluidité) ; ce voile discret indique seulement
qu'elle va encore s'affiner. L'horodatage, lui, reste toujours exact. */
.seek-preview.is-pending canvas {
opacity: 0.78;
}
.seek-preview-time {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.82);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 1px 7px;
border-radius: 4px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ── Volume group ── */
.player-volume-group {
display: flex;
align-items: center;
gap: 2px;
}
.player-volume-track {
width: 0;
overflow: hidden;
transition: width 0.2s ease;
}
.player-volume-group:hover .player-volume-track,
.player-volume-group:focus-within .player-volume-track {
width: 76px;
}
.player-vol-range {
-webkit-appearance: none;
appearance: none;
width: 72px;
height: 4px;
border-radius: 2px;
outline: none;
cursor: pointer;
display: block;
}
.player-vol-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.player-vol-range::-moz-range-thumb {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
border: none;
cursor: pointer;
}
.player-vol-range::-moz-range-track {
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.2);
}
/* ── Ensure center/bottom controls sit above click-zone ── */
.player-center-controls { z-index: 2; }
.player-bottom-controls { z-index: 2; }
/* Skip buttons visible with their parent center controls */
.player-center-controls.visible .player-skip-btn { opacity: 1; }
/* ── Search mode tabs ─────────────────── */
.search-mode-tabs {
display: flex;
gap: 6px;
margin-bottom: 20px;
background: rgba(255,255,255,0.04);
border-radius: 12px;
padding: 4px;
}
/* Sélecteur de plateforme (Kick / Twitch) dans la recherche par streamer */
.platform-toggle {
display: flex;
gap: 6px;
margin-bottom: 14px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
padding: 4px;
}
.platform-opt {
flex: 1;
padding: 8px 12px;
border: none;
border-radius: 7px;
background: transparent;
color: var(--text-secondary);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.platform-opt:hover { color: var(--text-primary); }
.platform-opt.active {
background: var(--accent-primary);
color: #06060a;
}
.platform-opt[data-platform="twitch"].active {
background: #9147ff;
color: #fff;
}
.search-mode-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 16px;
background: none;
border: none;
border-radius: 9px;
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.search-mode-tab:hover {
background: rgba(255,255,255,0.06);
color: var(--text-primary);
}
.search-mode-tab.active {
background: var(--accent-primary);
color: #000;
}
.search-mode-tab.active svg {
stroke: #000;
}
.streamer-suggestion-panel {
display: grid;
gap: 6px;
margin: -8px 0 14px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: rgba(12, 12, 18, 0.96);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.streamer-suggestion-panel[hidden] {
display: none;
}
.streamer-suggestion-item {
width: 100%;
min-height: 46px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
border: 0;
border-radius: 7px;
background: transparent;
color: #fff;
text-align: left;
cursor: pointer;
}
.streamer-suggestion-item:hover,
.streamer-suggestion-item:focus-visible,
.streamer-suggestion-item.active {
background: rgba(var(--accent-rgb), 0.1);
outline: none;
}
.streamer-suggestion-item img,
.streamer-suggestion-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
object-fit: cover;
}
.streamer-suggestion-main {
min-width: 0;
display: grid;
gap: 2px;
}
.streamer-suggestion-main strong,
.streamer-suggestion-main small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.streamer-suggestion-main small {
color: var(--text-muted);
font-size: 0.78rem;
}
.streamer-suggestion-platform {
color: var(--accent-primary);
font-size: 0.68rem;
font-weight: 800;
}
.streamer-suggestion-state {
padding: 10px;
color: var(--text-muted);
font-size: 0.88rem;
}
/* ── VOD results ──────────────────────── */
.vods-status {
text-align: center;
color: var(--text-muted);
padding: 20px;
font-size: 0.9rem;
}
.vods-status.full-span {
grid-column: 1 / -1;
}
.vods-status.vods-error {
color: #ff5f57;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.vods-streamer-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-color);
}
.vods-streamer-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(var(--accent-rgb), 0.3);
}
.vods-streamer-name {
font-weight: 700;
font-size: 1rem;
color: var(--text-primary);
}
.vods-streamer-count {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 2px;
}
.vods-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
max-height: 420px;
overflow-y: auto;
padding-right: 4px;
}
.vods-grid::-webkit-scrollbar { width: 4px; }
.vods-grid::-webkit-scrollbar-track { background: transparent; }
.vods-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.vod-result-card {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.vod-result-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--accent-rgb), 0.35);
box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.08);
}
.vod-result-card:hover .vod-result-play-overlay {
opacity: 1;
}
.vod-result-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #111;
overflow: hidden;
}
.vod-result-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vod-result-duration {
position: absolute;
bottom: 6px;
right: 6px;
background: rgba(0,0,0,0.82);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.02em;
}
.vod-result-play-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.18s;
color: #fff;
}
.vod-result-info {
padding: 10px 12px;
}
.vod-result-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 5px;
}
.vod-result-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 0.75rem;
color: var(--text-muted);
}
/* ── Chat badges ─────────────────────── */
.chat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 3px;
line-height: 0;
}
.chat-badge svg {
display: block;
}
.chat-badge-text {
width: 14px;
height: 14px;
border-radius: 3px;
background: rgba(255,255,255,0.18);
color: #fff;
font-size: 9px;
font-weight: 700;
line-height: 14px;
}
/* ── Chat emotes ─────────────────────── */
.chat-emote {
display: inline-block;
vertical-align: middle;
height: 22px;
width: 28px;
margin: 0 1px;
object-fit: contain;
}
/* Badges de chat Twitch (images) */
.chat-badge-img {
display: inline-block;
vertical-align: middle;
height: 18px;
width: 18px;
margin: 0 3px 2px 0;
border-radius: 3px;
object-fit: contain;
}
/* ── Playback speed selector ──────────── */
.player-speed-wrap {
position: relative;
}
.player-speed-btn {
min-width: 38px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.player-speed-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 50%;
transform: translateX(50%);
background: rgba(15, 15, 20, 0.96);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
overflow: hidden;
display: none;
flex-direction: column;
min-width: 80px;
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
z-index: 100;
}
.player-speed-menu.open {
display: flex;
}
.speed-opt {
padding: 8px 16px;
background: none;
border: none;
color: rgba(255,255,255,0.75);
font-size: 0.875rem;
cursor: pointer;
text-align: center;
transition: background 0.12s, color 0.12s;
white-space: nowrap;
}
.speed-opt:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.speed-opt.active {
color: var(--accent-primary);
font-weight: 700;
}
/* ── Related VODs panel (below player) ── */
.related-vods-section {
max-width: 1400px;
margin: 0 auto 40px;
padding: 0 20px;
}
.related-vods-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-top: 24px;
border-top: 1px solid var(--border-color);
}
.related-vods-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.related-vods-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.watch-queue {
margin-top: 20px;
padding: 12px 0 16px;
border-top: 1px solid var(--border-color);
}
.watch-queue-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.watch-queue-title {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-primary);
font-size: 0.92rem;
font-weight: 700;
}
.watch-queue-title span {
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: 10px;
background: rgba(var(--accent-rgb), 0.13);
color: var(--accent-primary);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
.watch-queue-clear {
min-height: 32px;
padding: 4px 8px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
font: inherit;
font-size: 0.76rem;
}
.watch-queue-clear:hover,
.watch-queue-clear:focus-visible {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.watch-queue-list {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 3px;
scrollbar-width: thin;
}
.watch-queue-item {
min-width: 190px;
max-width: 240px;
display: flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 6px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
}
.watch-queue-controls {
display: grid;
grid-template-columns: repeat(2, 26px) 34px;
align-self: stretch;
border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.watch-queue-play {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 5px;
border: 0;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
font: inherit;
font-size: 0.75rem;
text-align: left;
}
.watch-queue-play:hover,
.watch-queue-play:focus-visible {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.05);
outline: none;
}
.watch-queue-play img,
.watch-queue-placeholder {
width: 48px;
height: 30px;
flex: 0 0 auto;
border-radius: 4px;
object-fit: cover;
background: rgba(var(--accent-rgb), 0.12);
}
.watch-queue-play span:last-child {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.watch-queue-remove,
.queue-vod-btn {
display: inline-grid;
place-items: center;
border: 0;
cursor: pointer;
}
.watch-queue-remove {
width: 34px;
min-height: 40px;
background: transparent;
color: var(--text-muted);
}
.watch-queue-move {
display: grid;
place-items: center;
width: 26px;
min-height: 20px;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.watch-queue-move:hover:not(:disabled),
.watch-queue-move:focus-visible:not(:disabled) {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.watch-queue-move:disabled {
opacity: 0.28;
cursor: default;
}
.watch-queue-remove:hover,
.watch-queue-remove:focus-visible {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.watch-queue-remove svg,
.watch-queue-move svg,
.queue-vod-btn svg {
width: 15px;
height: 15px;
}
.queue-vod-btn {
position: absolute;
top: 8px;
right: 50px;
width: 36px;
min-height: 36px;
border-radius: 50%;
background: rgba(6, 9, 13, 0.84);
color: var(--text-primary);
opacity: 0;
transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
z-index: 10;
}
.vod-result-card:hover .queue-vod-btn,
.vod-result-card:focus-within .queue-vod-btn {
opacity: 1;
}
.queue-vod-btn:hover,
.queue-vod-btn:focus-visible {
background: var(--accent-primary);
color: #06131c;
outline: none;
}
.related-vods-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
@media (max-width: 600px) {
.related-vods-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.watch-queue-item {
min-width: 174px;
}
.queue-vod-btn {
right: 44px;
opacity: 1;
}
}
/* ── VOD switch loading overlay ─────────── */
.vod-switch-overlay {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: rgba(6, 6, 10, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: inherit;
animation: vod-overlay-in 0.22s ease;
}
@keyframes vod-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
.vod-switch-spinner {
filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.5));
}
.vod-switch-label {
font-size: 0.95rem;
font-weight: 600;
color: #fff;
margin: 0;
letter-spacing: 0.02em;
}
.vod-switch-title {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
margin: 0;
max-width: 320px;
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Miniature dans l'overlay de switch */
.vod-switch-thumb {
width: 120px;
height: 68px;
border-radius: 6px;
overflow: hidden;
border: 2px solid rgba(var(--accent-rgb),0.3);
flex-shrink: 0;
}
.vod-switch-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── Skeleton loaders ──────────────────── */
@keyframes skeleton-pulse {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.vods-skeleton {
background: rgba(255,255,255,0.07);
border-radius: 6px;
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
/* Skeleton dans la thumb de miniature (caché quand l'image charge) */
.vod-result-thumb .vod-skeleton {
position: absolute;
inset: 0;
border-radius: 0;
z-index: 0;
}
/* Miniature distante cassée/bloquée : logo en filigrane plutôt qu'une case vide */
.vod-result-thumb.thumb-fallback .vod-skeleton {
background: url('/static/logo.png') center / 26px no-repeat;
opacity: 0.35;
}
.vod-result-thumb img {
position: relative;
z-index: 1;
}
/* Skeleton header streamer */
.vods-skeleton-header {
pointer-events: none;
}
.vods-skeleton-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
flex-shrink: 0;
}
.vods-skeleton-name { width: 120px; height: 14px; margin-bottom: 6px; }
.vods-skeleton-count { width: 80px; height: 11px; }
/* Skeleton card entière */
.vod-skeleton-card {
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-color);
}
.vod-skeleton-thumb {
aspect-ratio: 16/9;
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.vod-skeleton-info { padding: 10px 12px; }
.vods-skeleton-title { height: 13px; margin-bottom: 8px; width: 85%; }
.vods-skeleton-meta { height: 10px; width: 55%; }
/* ── Toast retry button ────────────────── */
.toast-retry-btn {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(var(--accent-rgb),0.12);
border: 1px solid rgba(var(--accent-rgb),0.3);
color: var(--accent-primary);
font-size: 0.78rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 5px;
cursor: pointer;
transition: background 0.18s;
}
.toast-retry-btn:hover {
background: rgba(var(--accent-rgb),0.22);
}
/* ════════════════════════════════════════════
AUTO-NEXT OVERLAY
════════════════════════════════════════════ */
.autonext-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.autonext-inner {
display: flex;
align-items: center;
gap: 24px;
background: rgba(255, 255, 255, 0.05);
padding: 24px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 90%;
}
.autonext-thumb {
width: 160px;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.autonext-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.autonext-label {
margin: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
font-weight: 500;
}
.autonext-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: #fff;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.autonext-countdown-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.autonext-suggestions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-top: 8px;
}
.autonext-choice {
min-width: 0;
display: flex;
align-items: center;
gap: 7px;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
font: inherit;
font-size: 0.72rem;
text-align: left;
}
.autonext-choice:hover,
.autonext-choice:focus-visible {
border-color: rgba(var(--accent-rgb), 0.6);
background: rgba(var(--accent-rgb), 0.12);
color: #fff;
outline: none;
}
.autonext-choice img {
width: 42px;
height: 26px;
flex: 0 0 auto;
border-radius: 3px;
object-fit: cover;
}
.autonext-choice span {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#autonext-num {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-primary);
background: rgba(var(--accent-rgb), 0.1);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 8px;
}
.autonext-btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
}
.autonext-btn-cancel {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.autonext-btn-cancel:hover {
background: rgba(255, 255, 255, 0.2);
}
.autonext-btn-now {
background: var(--accent-primary);
color: #000;
}
.autonext-btn-now:hover {
background: #4ae015;
transform: scale(1.02);
}
@media (max-width: 600px) {
.autonext-inner {
flex-direction: column;
text-align: center;
padding: 16px;
}
.autonext-thumb {
width: 100%;
max-width: 200px;
}
.autonext-countdown-row {
justify-content: center;
flex-wrap: wrap;
}
.autonext-suggestions {
width: 100%;
}
}
/* ════════════════════════════════════════════
PLAYER ACTION BUTTONS (Copy, Share, Fav)
════════════════════════════════════════════ */
.player-action-btns {
display: flex;
gap: 12px;
margin-top: 4px;
flex-wrap: wrap;
}
/* Le panneau de raccourcis clavier n'a pas d'utilité sur un écran tactile */
@media (pointer: coarse) {
#btn-shortcuts {
display: none;
}
#video-wrapper-container .player-seek-container {
min-height: 24px;
flex-basis: 24px;
padding-top: 10px;
margin-top: -10px;
}
#video-wrapper-container .player-seek-bar,
#video-wrapper-container .player-seek-container:hover .player-seek-bar {
height: 6px;
}
#video-wrapper-container .player-seek-thumb {
width: 18px;
height: 18px;
opacity: 1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
}
.player-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.player-action-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.player-action-btn.active {
background: rgba(255, 59, 48, 0.15);
border-color: rgba(255, 59, 48, 0.4);
color: #ff3b30;
}
.player-action-btn.active svg {
fill: currentColor;
}
/* ════════════════════════════════════════════
FAVORITES BADGE & BUTTON
════════════════════════════════════════════ */
.fav-count-badge {
background: #ff3b30;
color: white;
font-size: 0.65rem;
font-weight: bold;
padding: 2px 6px;
border-radius: 10px;
margin-left: 4px;
}
.fav-remove-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.6);
border: none;
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.2s;
z-index: 10;
}
.recent-history-card:hover .fav-remove-btn {
opacity: 1;
}
.fav-remove-btn:hover {
background: #ff3b30;
transform: scale(1.1);
}
/* ════════════════════════════════════════════
STATS DASHBOARD
════════════════════════════════════════════ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.stat-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.95rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.stat-sub {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
margin-top: 4px;
}
.stat-chart-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
margin-top: 8px;
}
.stat-chart-title {
margin: 0 0 20px;
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.stat-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-bar-row {
display: flex;
align-items: center;
gap: 16px;
}
.stat-bar-name {
width: 120px;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.stat-bar-track {
flex-grow: 1;
height: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.stat-bar-fill {
height: 100%;
background: var(--accent-primary);
border-radius: 6px;
transition: width 0.5s ease-out;
}
.stat-bar-count {
width: 40px;
text-align: right;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
/* ════════════════════════════════════════════
HISTORY FILTER & EXPORT/IMPORT
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
FAVORITES BADGE & BUTTON
════════════════════════════════════════════ */
.fav-count-badge {
background: #ff3b30;
color: white;
font-size: 0.65rem;
font-weight: bold;
padding: 2px 6px;
border-radius: 10px;
margin-left: 4px;
}
.mini-fav-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0,0,0,0.6);
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.2s;
z-index: 10;
}
.vod-result-card:hover .mini-fav-btn,
.recent-history-card:hover .mini-fav-btn {
opacity: 1;
}
.mini-fav-btn:hover {
background: #ff3b30;
transform: scale(1.1);
}
.mini-fav-btn.active {
color: #ff3b30;
}
/* ════════════════════════════════════════════
STATS DASHBOARD
════════════════════════════════════════════ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.stat-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.95rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
.stat-sub {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
margin-top: 4px;
}
.stat-chart-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
margin-top: 8px;
}
.stat-chart-title {
margin: 0 0 20px;
font-size: 1.1rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.stat-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-bar-row {
display: flex;
align-items: center;
gap: 16px;
}
.stat-bar-name {
width: 120px;
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.stat-bar-track {
flex-grow: 1;
height: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
overflow: hidden;
}
.stat-bar-fill {
height: 100%;
background: var(--accent-primary);
border-radius: 6px;
transition: width 0.5s ease-out;
}
.stat-bar-count {
width: 40px;
text-align: right;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
/* ════════════════════════════════════════════
HISTORY FILTER & EXPORT/IMPORT
════════════════════════════════════════════ */
.history-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 24px;
background: var(--bg-card);
padding: 12px 16px;
border-radius: 10px;
border: 1px solid var(--border-color);
}
.history-search-input {
flex-grow: 1;
min-width: 200px;
max-width: 400px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
padding: 8px 14px;
border-radius: 6px;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s;
}
.history-search-input:focus {
border-color: var(--accent-primary);
}
.history-search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.history-io-btns {
display: flex;
gap: 8px;
}
.history-import-label {
margin: 0;
}
/* ════════════════════════════════════════════
BEAUTIFUL PLAYER ACTION BUTTONS OVERRIDE
════════════════════════════════════════════ */
.player-action-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
padding: 8px 18px !important;
border-radius: 24px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(8px) !important;
}
.player-action-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.player-action-btn svg {
margin-bottom: 1px;
}
/* ════════════════════════════════════════════
SPA VIEW TRANSITIONS
════════════════════════════════════════════ */
@keyframes viewFadeIn {
0% {
opacity: 0;
transform: translateY(15px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.view-section.active {
animation: viewFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.player-section {
animation: viewFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* ════════════════════════════════════════════
MODAL (Download popup)
════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease-out forwards;
}
.modal-content {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 16px;
max-width: 600px;
width: 90%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.chat-user-messages-modal {
width: min(620px, calc(100vw - 32px));
max-height: min(760px, calc(100vh - 32px));
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-user-messages-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat-user-messages-header p,
.chat-user-messages-context {
margin: 0;
color: var(--text-muted);
font-size: 0.8rem;
}
.chat-user-messages-header h2 {
margin: 3px 0 0;
font-size: 1.1rem;
}
.chat-user-messages-modal .modal-close-btn {
width: 32px;
height: 32px;
flex: 0 0 32px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--text-muted);
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
}
.chat-user-messages-modal .modal-close-btn:hover,
.chat-user-messages-modal .modal-close-btn:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
outline: none;
}
.chat-user-messages-context {
padding: 11px 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-user-messages-list {
overflow-y: auto;
padding: 8px;
}
.chat-user-message {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
width: 100%;
gap: 10px;
align-items: start;
border: 0;
border-radius: 5px;
padding: 9px 10px;
background: transparent;
color: var(--text-primary);
font: inherit;
text-align: left;
cursor: pointer;
}
.chat-user-message:hover,
.chat-user-message:focus-visible {
background: rgba(var(--accent-rgb), 0.12);
outline: none;
}
.chat-user-message time {
color: var(--accent-primary);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.chat-user-message span {
overflow-wrap: anywhere;
font-size: 0.88rem;
line-height: 1.4;
}
.chat-user-current-marker {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 4px 4px;
color: var(--accent-primary);
font-size: 0.72rem;
font-weight: 700;
}
.chat-user-current-marker::before,
.chat-user-current-marker::after {
content: '';
height: 1px;
flex: 1;
background: rgba(var(--accent-rgb), 0.62);
}
.chat-user-messages-empty {
padding: 28px 16px;
text-align: center;
color: var(--text-muted);
}
@media (max-width: 520px) {
.chat-user-messages-modal { width: calc(100vw - 20px); }
.chat-user-messages-header { padding: 16px 16px 10px; }
.chat-user-messages-context { padding: 10px 16px; }
.chat-user-message { grid-template-columns: 56px minmax(0, 1fr); }
}
@keyframes slideUp {
from { transform: translateY(20px) scale(0.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* ════════════════════════════════════════════
MONETIZATION (Ads & Support)
════════════════════════════════════════════ */
/* Emplacements pub : espace réservé (zéro CLS), iframe sandbox remplie en lazy. */
.ad-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-height: 112px; /* 90px de bannière + libellé */
}
.ad-slot[hidden] {
display: none;
}
.ad-slot-label {
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.55;
user-select: none;
}
.ad-slot iframe {
border: 0;
max-width: 100%;
background: transparent;
}
.ad-slot[data-ad-size="native"] iframe {
overflow: hidden;
border-radius: 6px;
background: #f7f8fa;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ad-slot-local-preview iframe {
display: none;
}
.ad-slot-local-preview::after {
content: attr(data-ad-preview);
width: min(100%, 728px);
height: 90px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed rgba(var(--accent-rgb), 0.45);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(255, 255, 255, 0.045)),
rgba(0, 0, 0, 0.18);
color: var(--accent-primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.ad-slot-local-preview[data-ad-size="300x250"]::after {
width: min(100%, 300px);
height: 250px;
}
.ad-slot-local-preview[data-ad-size="320x50"]::after {
width: min(100%, 320px);
height: 50px;
}
.ad-slot-local-preview[data-ad-size="native"]::after {
width: min(100%, 728px);
min-height: 250px;
height: auto;
aspect-ratio: 728 / 280;
}
.ad-slot-home {
margin: 0 auto 48px;
}
.monetization-home-top {
margin-top: 28px;
margin-bottom: 8px;
}
.ad-slot-view {
margin: 0 auto 28px;
}
.ad-slot[data-ad-size="300x250"] {
min-height: 272px;
}
.ad-slot[data-ad-size="320x50"] {
min-height: 72px;
}
.ad-slot[data-ad-size="native"] {
min-height: 272px;
}
.ad-slot-sidebar {
min-height: 272px; /* 250px + libellé */
padding: 10px 0 12px;
border-top: 1px solid var(--border-color);
}
/* Le chat prime : pas de pub quand la place manque ou en immersion. */
@media (max-width: 900px) {
.ad-slot-sidebar {
display: none;
}
}
.player-section.theater-mode .ad-slot-sidebar {
display: none;
}
@media (max-width: 767px) {
.ad-slot-player,
.ad-slot-home {
min-height: 272px; /* format 300x250 sur mobile */
}
.ad-slot-player[data-ad-size="320x50"],
.ad-slot-home[data-ad-size="320x50"],
.ad-slot-view[data-ad-size="320x50"] {
min-height: 72px;
}
}
.sponsored-offer-link {
width: fit-content;
max-width: 100%;
min-height: 40px;
margin: -34px auto 34px;
padding: 9px 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: rgba(255, 255, 255, 0.045);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 650;
text-decoration: none;
}
.sponsored-offer-link[hidden] {
display: none;
}
.sponsored-offer-link svg {
width: 16px;
height: 16px;
color: var(--accent-primary);
}
.sponsored-offer-link:hover {
border-color: rgba(var(--accent-rgb), 0.55);
color: var(--text-primary);
}
.sponsored-offer-player {
margin: 0 auto;
}
/* Adsterra Social Bar lives in an isolated cross-origin frame. Keeping the
outer frame under our layout control prevents third-party fixed widths from
expanding the page on narrow screens. */
.social-ad-shell {
position: fixed;
right: max(8px, env(safe-area-inset-right));
bottom: max(8px, env(safe-area-inset-bottom));
z-index: 950;
width: min(527px, calc(100vw - 16px));
height: 150px;
overflow: hidden;
border-radius: 8px;
background: transparent;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
opacity: 0;
transition: opacity 160ms ease;
contain: layout paint;
}
.social-ad-shell.is-loaded {
opacity: 1;
}
.social-ad-shell iframe {
display: block;
width: 100%;
height: 150px;
border: 0;
background: transparent;
}
@media (max-width: 600px) {
.social-ad-shell {
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom);
width: auto;
max-width: none;
border-radius: 8px 8px 0 0;
}
}
@media print {
.social-ad-shell {
display: none;
}
}
.support-banner {
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(10px);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Overrides for mobile support banner */
@media (max-width: 768px) {
.support-banner {
flex-direction: column;
text-align: center;
gap: 15px;
padding: 20px;
border-left: none;
border-top: 4px solid var(--accent-primary);
}
.support-banner .player-action-btn {
width: 100%;
justify-content: center;
}
}
/* Platform Badge on Cards */
.platform-badge {
position: absolute;
top: 6px;
left: 6px;
padding: 2px 6px;
font-size: 0.65rem;
font-weight: 700;
border-radius: 4px;
color: #fff;
z-index: 5;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.platform-badge.kick {
background-color: var(--platform-kick);
color: #000;
}
.platform-badge.twitch {
background-color: var(--platform-twitch);
}
/* Variante en flux (barre meta lecteur, en-tête profil) */
.platform-badge.inline {
position: static;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
/* Accessibility Improvements */
:focus-visible { outline: 2px solid var(--accent-primary) !important; outline-offset: 2px; border-radius: 4px; }
.player-ctrl-btn:focus-visible { outline-color: #fff !important; }
/* Skeleton Loader */
@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton-card { background: #1a1a24; background-image: linear-gradient(to right, #1a1a24 0%, #2a2a35 20%, #1a1a24 40%, #1a1a24 100%); background-repeat: no-repeat; background-size: 1000px 100%; display: inline-block; position: relative; animation: shimmer 2s infinite linear; border-radius: var(--radius); width: 100%; aspect-ratio: 16/9; }
.skeleton-text { height: 16px; margin-top: 10px; border-radius: 4px; width: 80%; }
.trending-skeleton-item {
display: flex;
min-width: 0;
flex-direction: column;
gap: 8px;
}
.trending-skeleton-item .skeleton-text {
margin-top: 0;
}
.trending-skeleton-item .skeleton-text-short {
width: 50%;
}
/* Dropdown Menu & Touch Targets */
.dropdown-menu { position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 50; min-width: 150px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.dropdown-item { background: transparent; border: none; color: #ccc; cursor: pointer; padding: 10px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; text-align: left; width: 100%; min-height: 44px; transition: all 0.2s ease; }
.dropdown-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.player-action-btn { min-height: 44px; min-width: 44px; justify-content: center; }
.vod-result-card h3 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.vod-error-overlay {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
border-radius: 12px;
background: rgba(4, 8, 12, 0.88);
color: #fff;
text-align: center;
backdrop-filter: blur(6px);
}
.vod-error-icon {
width: 32px;
height: 32px;
margin-bottom: 12px;
color: var(--accent-primary);
opacity: 0.9;
}
.vod-error-title {
max-width: 420px;
color: #fff;
font-size: 1.05rem;
font-weight: 700;
}
.vod-error-detail {
max-width: 420px;
margin-top: 7px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.86rem;
line-height: 1.45;
}
.vod-error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.vod-error-actions .btn-primary,
.vod-error-secondary {
min-height: 38px;
padding: 8px 12px;
border-radius: 6px;
font: inherit;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
.vod-error-secondary {
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.07);
color: #fff;
}
.vod-error-secondary:hover,
.vod-error-secondary:focus-visible {
border-color: rgba(var(--accent-rgb), 0.72);
background: rgba(var(--accent-rgb), 0.14);
outline: none;
}
.status-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.status-pill-ok { color: #00e676; font-weight: 700; }
.status-pill-down { color: #ff4444; font-weight: 700; }
.status-pill-warn { color: #f59e0b; font-weight: 700; }
.site-support-fallback {
margin: 10px 16px 0;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
color: var(--text-muted);
font-size: 0.82rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(255,255,255,0.035);
}
.site-support-fallback a {
color: var(--accent-primary);
font-weight: 700;
white-space: nowrap;
}
.adblock-notice {
padding: 10px 12px;
border: 1px solid rgba(var(--accent-rgb), 0.18);
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.06);
color: var(--text-secondary);
font-size: 0.84rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.adblock-notice a {
color: var(--accent-primary);
font-weight: 800;
white-space: nowrap;
}
/* Kick-like player chrome: compact, dark, icon-first controls. */
#video-wrapper-container {
background: transparent;
}
#video-wrapper-container .player-controls-overlay {
font-family: var(--font-body);
}
#video-wrapper-container .player-bottom-controls {
min-height: 45px;
padding: 0 14px 2px;
background: transparent;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
transition: opacity 0.16s ease;
border-bottom: 0;
}
#video-wrapper-container .player-seek-container {
width: calc(100% + 28px);
margin: 0 0 0 -14px;
padding: 8px 0 7px;
height: 18px;
flex: 0 0 18px;
display: flex;
align-items: center;
touch-action: none;
}
#video-wrapper-container .player-seek-bar {
height: 3px;
border-radius: 0;
background: rgba(255, 255, 255, 0.34);
transition: height 0.12s ease;
}
#video-wrapper-container .player-seek-container:hover .player-seek-bar {
height: 3px;
}
#video-wrapper-container .player-seek-buffered {
border-radius: 0;
background: rgba(255, 255, 255, 0.48);
}
#video-wrapper-container .player-seek-progress {
border-radius: 0;
background: var(--accent-primary);
}
#video-wrapper-container .player-seek-thumb {
width: 0;
height: 0;
background: #fff;
box-shadow: none;
}
#video-wrapper-container .player-controls-row {
height: 42px;
gap: 10px;
align-items: center;
}
#video-wrapper-container .player-controls-left,
#video-wrapper-container .player-controls-right {
gap: 0;
align-items: center;
}
#video-wrapper-container #skip-back-btn,
#video-wrapper-container #skip-fwd-btn {
display: none;
}
#video-wrapper-container .player-ctrl-btn {
flex: 0 0 40px;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 42px;
min-height: 42px;
padding: 0;
box-sizing: border-box;
border-radius: 0;
background: transparent;
color: #fff;
opacity: 0.96;
transform: none;
overflow: hidden;
}
#video-wrapper-container .player-ctrl-btn::after {
inset: 0;
pointer-events: none;
}
#video-wrapper-container .player-ctrl-btn:hover,
#video-wrapper-container .player-ctrl-btn:focus-visible {
background: transparent;
color: #fff;
opacity: 1;
transform: none;
}
#video-wrapper-container .player-ctrl-btn svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}
#video-wrapper-container .player-time {
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 42px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
#video-wrapper-container .player-time .sep {
color: rgba(255, 255, 255, 0.72);
padding: 0 3px;
}
#video-wrapper-container .player-volume-group {
height: 42px;
}
#video-wrapper-container .player-volume-track {
height: 42px;
display: flex;
align-items: center;
}
#video-wrapper-container .player-vol-range {
height: 3px;
background: rgba(255, 255, 255, 0.42);
accent-color: var(--accent-primary);
}
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap {
position: relative;
flex: 0 0 40px;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
#video-wrapper-container .player-speed-btn #speed-label {
font-size: 0;
}
#video-wrapper-container .player-speed-icon {
display: flex;
align-items: center;
justify-content: center;
}
#video-wrapper-container .player-quality-wrap {
position: relative;
width: 40px;
min-width: 40px;
max-width: 40px;
justify-content: center;
color: #fff;
}
#video-wrapper-container .player-quality-icon {
width: 40px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
#video-wrapper-container .player-quality-icon svg {
width: 20px;
height: 20px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}
#video-wrapper-container .player-quality-select {
display: none;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
#video-wrapper-container .player-control-menu,
#video-wrapper-container .player-speed-menu {
bottom: 42px;
right: 0;
min-width: 92px;
padding: 6px;
gap: 2px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(12, 12, 14, 0.98);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.58);
}
#video-wrapper-container .player-quality-menu {
position: absolute;
display: none;
flex-direction: column;
z-index: 100;
}
#video-wrapper-container .player-quality-menu.open {
display: flex;
}
#video-wrapper-container .speed-opt,
#video-wrapper-container .quality-opt {
min-height: 34px;
border-radius: 3px;
padding: 0 12px;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
#video-wrapper-container .speed-opt.active,
#video-wrapper-container .speed-opt:hover,
#video-wrapper-container .quality-opt.active,
#video-wrapper-container .quality-opt:hover {
background: rgba(var(--accent-rgb), 0.15);
color: var(--accent-primary);
}
#video-wrapper-container .player-center-play {
width: 72px;
height: 72px;
border: 0;
background: rgba(0, 0, 0, 0.56);
box-shadow: none;
}
#video-wrapper-container .player-center-play:hover {
background: rgba(0, 0, 0, 0.72);
transform: scale(1.04);
}
@media (max-width: 640px) {
#video-wrapper-container .player-bottom-controls {
min-height: 46px;
padding: 0 6px;
}
#video-wrapper-container .player-ctrl-btn {
flex-basis: 38px;
width: 38px;
min-width: 38px;
max-width: 38px;
height: 40px;
min-height: 40px;
}
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap {
flex-basis: 38px;
width: 38px;
min-width: 38px;
max-width: 38px;
height: 40px;
}
#video-wrapper-container .player-time {
font-size: 12px;
}
#video-wrapper-container .player-quality-select {
max-width: 76px;
font-size: 11px;
}
}
/* Final UX polish: compact first screen, larger hit targets, cleaner clip/profile flows. */
.header-content {
gap: 10px;
}
.nav-links {
gap: 14px;
}
.nav-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.lang-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0 10px;
}
.mobile-menu-toggle {
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: 0;
}
.hero {
min-height: 680px;
padding: 84px 24px 30px;
}
.hero-badge {
margin-bottom: 18px;
}
.hero-title {
font-size: clamp(2.35rem, 5vw, 3.35rem);
margin-bottom: 16px;
line-height: 1.04;
}
.hero-subtitle {
margin-bottom: 26px;
}
.input-card {
padding: 20px;
}
.streamer-suggestion-panel {
max-height: min(360px, 42vh);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.streamer-suggestion-panel::-webkit-scrollbar {
width: 6px;
}
.streamer-suggestion-panel::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
}
.streamer-suggestion-item {
min-height: 52px;
}
#video-wrapper-container .player-bottom-controls {
min-height: 54px;
padding-inline: 12px;
}
#video-wrapper-container .player-seek-container {
height: 11px;
flex-basis: 11px;
padding-top: 4px;
margin-top: -4px;
}
#video-wrapper-container .player-seek-container:hover .player-seek-bar {
height: 5px;
}
#video-wrapper-container .player-controls-row,
#video-wrapper-container .player-volume-group,
#video-wrapper-container .player-volume-track {
height: 44px;
}
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap {
flex-basis: 46px;
width: 46px;
min-width: 46px;
max-width: 46px;
height: 44px;
min-height: 44px;
}
#video-wrapper-container .player-time {
line-height: 44px;
}
.stream-title.is-clip-title {
display: flex;
align-items: center;
gap: 8px;
}
.stream-title.is-clip-title .stream-type-badge {
margin-right: 0;
}
.stream-title-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.clip-page-banner {
padding: 14px 16px;
border-radius: 8px;
background: rgba(14, 18, 16, 0.92);
border-color: rgba(var(--accent-rgb), 0.28);
}
.clip-page-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4px 10px;
}
.clip-page-kicker {
min-height: 24px;
padding: 0 8px;
display: inline-flex;
align-items: center;
border-radius: 4px;
background: var(--accent-primary);
color: #04121d;
letter-spacing: 0.08em;
}
.clip-page-title {
max-width: min(56vw, 680px);
font-size: 1.05rem;
}
.clip-page-meta {
grid-column: 2;
color: var(--text-secondary);
}
.clip-page-btn {
min-height: 44px;
}
.streamer-profile-official,
.streamer-profile-tab {
min-height: 44px;
}
.mini-fav-btn {
min-width: 36px;
min-height: 36px;
}
.stat-sub {
line-height: 1.35;
}
@media (max-width: 900px) {
.online-indicator {
margin-left: 4px;
padding: 0 8px;
min-height: 32px;
}
.online-label {
display: none;
}
}
@media (max-width: 768px) {
.hero {
min-height: 640px;
padding: 80px 16px 28px;
}
.hero-title {
font-size: clamp(2.2rem, 11vw, 3rem);
margin-bottom: 14px;
}
.hero-subtitle {
margin-bottom: 22px;
}
.search-mode-tab {
min-height: 44px;
}
.streamer-suggestion-panel {
max-height: min(330px, 38vh);
}
.lang-switch {
gap: 6px;
}
.lang-link {
min-width: 52px;
}
}
@media (max-width: 700px) {
.streamer-profile-shell {
gap: 12px;
}
.streamer-profile-hero {
padding: 14px;
}
.streamer-profile-avatar {
width: 58px;
height: 58px;
}
.streamer-profile-grid {
gap: 10px;
}
.streamer-profile-grid .vod-result-card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
min-height: 86px;
}
.streamer-profile-grid .vod-result-thumb {
aspect-ratio: auto;
height: 100%;
min-height: 86px;
}
.streamer-profile-grid .vod-result-info {
padding: 9px 10px;
}
.streamer-profile-grid .vod-result-title {
-webkit-line-clamp: 3;
margin-bottom: 6px;
}
.streamer-profile-grid .mini-fav-btn {
right: 6px;
top: 6px;
}
}
@media (max-width: 640px) {
.clip-page-info {
grid-template-columns: 1fr;
}
.clip-page-meta {
grid-column: 1;
}
.clip-page-title {
max-width: 100%;
}
}
/* Audit polish: real contrast, stable surfaces, clear empty/error states. */
.bg-glow {
opacity: 0.45;
}
.bg-glow-secondary {
opacity: 0.6;
}
.btn-primary {
color: #050608;
}
.btn-primary:hover {
color: #050608;
}
.btn-secondary {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 13px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 7px;
background: rgba(255, 255, 255, 0.055);
color: var(--text-primary);
font: inherit;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
background: rgba(var(--accent-rgb), 0.12);
border-color: rgba(var(--accent-rgb), 0.38);
color: var(--accent-primary);
outline: none;
}
.btn-secondary:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.input-box.is-invalid {
border-color: #ff5f57;
box-shadow: 0 0 0 3px rgba(255, 95, 87, 0.18);
}
.recent-history-card,
.vod-result-card,
.stat-card,
.stat-chart-card,
.streamer-profile-hero,
.streamer-profile-tabs,
.streamer-profile-grid .vod-result-card {
background: rgba(18, 18, 22, 0.9);
}
.chat-status-empty {
margin: auto 0;
}
.streamer-suggestion-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-primary);
font-size: 0.84rem;
font-weight: 800;
}
.empty-state-cta,
.related-vods-more {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
padding: 0 16px;
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: 7px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--accent-primary);
font-weight: 800;
cursor: pointer;
}
.empty-state-cta:hover,
.empty-state-cta:focus-visible,
.related-vods-more:hover,
.related-vods-more:focus-visible {
background: rgba(var(--accent-rgb), 0.16);
outline: none;
}
.related-vods-more-wrap {
display: flex;
justify-content: center;
}
/* ── FAQ : accordéon natif / ──────────── */
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
list-style: none;
cursor: pointer;
padding: 20px;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition: background var(--transition-fast);
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question::marker {
content: '';
}
.faq-question:hover {
background: rgba(255, 255, 255, 0.03);
}
.faq-question::after {
content: '';
flex-shrink: 0;
width: 9px;
height: 9px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after {
transform: rotate(-135deg);
}
.faq-item[open] .faq-answer {
animation: faqReveal 180ms ease-out;
}
.faq-answer {
margin: 0;
padding: 0 20px 20px;
color: var(--text-muted);
}
@keyframes faqReveal {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1040px) {
body.mobile-menu-open {
overflow: hidden;
}
body.mobile-menu-open::before {
content: '';
position: fixed;
inset: 64px 0 0;
z-index: 89;
background: rgba(0, 0, 0, 0.56);
backdrop-filter: blur(2px);
}
.header-content {
padding: 0 16px;
}
.mobile-menu-toggle {
display: flex;
order: 3;
}
.online-indicator {
order: 2;
margin-left: auto;
}
.nav-links {
position: fixed;
top: 64px;
left: 0;
right: 0;
background: #0f0f12;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
padding: 16px;
flex-direction: column;
align-items: stretch;
gap: 12px;
display: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
z-index: 90;
}
.nav-links.active {
display: flex;
}
.nav-link {
justify-content: center;
padding: 12px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.03);
}
.lang-switch {
padding-left: 0;
border-left: none;
border-top: 1px solid var(--border-color);
padding-top: 12px;
justify-content: center;
/* Les pastilles font 52px de large minimum et le menu 343px sur un
telephone de 375px : au-dela de six langues, la barre depassait des
deux cotes et les dernieres devenaient intouchables — sans barre de
defilement, donc sans aucun signe visible. C'etait deja le cas a
sept langues (constate le 2026-08-01 en ajoutant le japonais). */
flex-wrap: wrap;
row-gap: 8px;
}
/* Dans le menu mobile, la place est verticale : la liste s'affiche telle
quelle et le bouton n'a plus de raison d'etre. */
.lang-current {
display: none;
}
/* `contents` et non `flex` : le deroule ne doit pas former un bloc a lui
seul, sinon ses cinq pastilles retombent d'un coup sous les quatre
autres au lieu de remplir la ligne. Les neuf partagent le meme retour
a la ligne. `is-open` peut rester accroche apres un redimensionnement
depuis le bureau : il ne doit rien changer ici. */
.lang-menu,
.lang-switch.is-open .lang-menu {
display: contents;
}
}
#video-wrapper-container .speed-opt,
#video-wrapper-container .quality-opt {
min-height: 40px;
}
@media (pointer: coarse) {
#video-wrapper-container .player-seek-container {
min-height: 24px;
flex-basis: 24px;
padding-top: 10px;
margin-top: -10px;
}
#video-wrapper-container .player-seek-bar,
#video-wrapper-container .player-seek-container:hover .player-seek-bar {
height: 6px;
}
#video-wrapper-container .player-seek-thumb {
width: 18px;
height: 18px;
opacity: 1;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
}
.mini-fav-btn {
min-width: 40px;
min-height: 40px;
}
@media (max-width: 640px) {
#video-wrapper-container .player-bottom-controls {
padding: 0 6px 4px;
min-height: 45px;
}
#video-wrapper-container .player-controls-row {
width: 100%;
min-width: 0;
gap: 2px;
justify-content: space-between;
overflow: hidden;
}
#video-wrapper-container .player-controls-left,
#video-wrapper-container .player-controls-right {
min-width: 0;
gap: 0;
}
#video-wrapper-container .player-controls-left {
flex: 1 1 auto;
overflow: hidden;
}
#video-wrapper-container .player-controls-right {
flex: 0 0 auto;
justify-content: flex-end;
}
#video-wrapper-container .player-volume-track {
display: none;
}
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap {
flex: 0 0 34px;
width: 34px;
min-width: 34px;
max-width: 34px;
height: 40px;
min-height: 40px;
}
#video-wrapper-container .player-time {
flex: 1 1 auto;
min-width: 66px;
max-width: 82px;
font-size: 11px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
}
#video-wrapper-container .player-ctrl-btn svg,
#video-wrapper-container .player-quality-icon svg {
width: 18px;
height: 18px;
}
#video-wrapper-container .player-quality-icon {
width: 34px;
height: 40px;
}
#video-wrapper-container .player-control-menu,
#video-wrapper-container .player-speed-menu,
#video-wrapper-container .player-quality-menu {
position: absolute;
left: auto;
right: 0;
bottom: 44px;
z-index: 1000;
width: min(258px, calc(100vw - 24px));
min-width: 0;
max-width: none;
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px;
border-radius: 10px;
background: rgba(12, 14, 15, 0.98);
}
#video-wrapper-container .player-speed-menu.open,
#video-wrapper-container .player-quality-menu.open {
display: grid;
}
#video-wrapper-container .speed-opt,
#video-wrapper-container .quality-opt {
min-height: 44px;
text-align: center;
border-radius: 7px;
padding: 0 8px;
}
#video-wrapper-container .seek-preview,
#video-wrapper-container .player-seek-tooltip {
max-width: calc(100vw - 24px);
}
.streamer-profile-grid .vod-result-card {
grid-template-columns: 1fr;
min-height: 0;
}
.streamer-profile-grid .vod-result-thumb {
aspect-ratio: 16 / 9;
height: auto;
min-height: 0;
}
.streamer-profile-grid .vod-result-info {
padding: 10px 12px 12px;
}
.streamer-profile-grid .vod-result-title {
-webkit-line-clamp: 2;
font-size: 0.88rem;
line-height: 1.32;
}
.streamer-profile-grid .vod-result-meta {
font-size: 0.76rem;
}
.clip-page-banner {
margin: 8px 0 10px;
padding: 12px;
gap: 10px;
}
.clip-page-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
}
.clip-page-btn {
width: 100%;
min-width: 0;
padding: 0 10px;
white-space: normal;
line-height: 1.12;
}
}
@media (max-width: 430px) {
#video-wrapper-container #pip-btn,
#video-wrapper-container #theater-btn {
display: none;
}
#video-wrapper-container .player-time {
max-width: 92px;
}
}
/* Final UX polish: clip/mobile/touch stability. */
.seek-preview,
.player-seek-tooltip {
left: 50%;
visibility: hidden;
}
.seek-preview.is-visible,
.player-seek-tooltip.is-visible {
visibility: visible !important;
opacity: 1 !important;
}
.clip-studio-close {
min-width: 44px;
min-height: 44px;
margin-right: -6px;
}
.clip-preview-play {
width: 44px;
height: 44px;
left: 2px;
bottom: 0;
}
.clip-create-modal {
display: flex;
flex-direction: column;
}
.clip-create-actions {
position: sticky;
bottom: -12px;
z-index: 2;
margin-inline: -12px;
padding: 10px 12px 12px;
background: linear-gradient(to top, #191c1d 72%, rgba(25, 28, 29, 0));
}
.streamer-profile-link {
min-height: 32px;
margin-block: -6px;
padding-block: 6px;
}
.mini-fav-btn::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
}
@media (max-width: 640px) {
.bg-glow {
top: 12%;
width: min(340px, calc(100vw - 28px));
height: min(340px, calc(100vw - 28px));
filter: blur(82px);
}
.bg-glow-secondary {
left: 0;
width: min(280px, calc(100vw - 28px));
height: min(280px, calc(100vw - 28px));
filter: blur(78px);
}
#video-wrapper-container .player-ctrl-btn::after,
#video-wrapper-container .player-quality-icon::after,
#video-wrapper-container .player-speed-btn::after {
inset: -7px -5px;
}
#video-wrapper-container .player-bottom-controls {
min-height: 50px;
}
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap,
#video-wrapper-container .player-quality-icon {
height: 42px;
min-height: 42px;
}
.clip-page-banner {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
margin: 6px 0 8px;
padding: 9px 10px;
gap: 7px;
border-radius: 8px;
}
.clip-page-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 8px;
row-gap: 2px;
width: 100%;
}
.clip-page-kicker {
min-height: 22px;
display: inline-flex;
align-items: center;
}
.clip-page-title {
max-width: none;
font-size: 0.92rem;
}
.clip-page-meta {
grid-column: 1 / -1;
font-size: 0.76rem;
}
.clip-page-actions {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
}
.clip-page-btn {
min-height: 34px;
font-size: 0.78rem;
}
}
@media (max-width: 380px) {
#video-wrapper-container #skip-back-btn,
#video-wrapper-container #skip-fwd-btn {
display: none;
}
#video-wrapper-container .player-time {
min-width: 78px;
}
}
/* Final product polish: cleaner player text, clip page, menus, and mobile touch. */
.video-info,
.stream-details {
min-width: 0;
max-width: 100%;
}
.stream-details {
overflow: hidden;
}
.stream-title,
.stream-title-text {
min-width: 0;
max-width: 100%;
}
.stream-title {
display: block;
line-height: 1.25;
}
.stream-title-text {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stream-meta {
min-width: 0;
max-width: 100%;
}
.stream-meta > span {
min-width: 0;
}
.player-section.clip-mode .stream-title {
display: none;
}
.player-section.clip-mode .video-info {
align-items: center;
}
.player-section.clip-mode .stream-meta {
gap: 10px 14px;
}
.player-section.clip-mode .monetization-container {
display: none !important;
}
.player-section.clip-mode .site-support-fallback {
display: none !important;
}
#video-wrapper-container .player-control-menu,
#video-wrapper-container .player-speed-menu,
#video-wrapper-container .player-quality-menu {
z-index: 1200;
}
#video-wrapper-container .player-speed-wrap,
#video-wrapper-container .player-quality-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
#video-wrapper-container .player-speed-menu,
#video-wrapper-container .player-quality-menu {
bottom: 46px;
right: 0;
min-width: 188px;
max-width: min(260px, calc(100vw - 24px));
padding: 8px;
border-radius: 8px;
background: rgba(12, 14, 15, 0.99);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62);
}
#video-wrapper-container .speed-opt,
#video-wrapper-container .quality-opt {
min-height: 42px;
border-radius: 6px;
text-align: center;
}
.clip-page-banner {
margin-bottom: 12px;
}
.clip-page-title {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clip-page-actions {
align-items: center;
}
.streamer-profile-shell {
gap: 20px;
}
.streamer-profile-hero {
margin-top: 0;
}
footer .kns-s54,
footer .kns-s56,
#api-status-link,
#btn-open-legal {
min-height: 36px;
display: inline-flex;
align-items: center;
}
@media (min-width: 900px) {
.stream-title-text {
max-width: min(100%, 720px);
}
.stream-meta {
overflow: hidden;
}
}
@media (max-width: 640px) {
.hero-section,
.hero {
padding-top: 78px;
}
.hero h1,
.hero-title {
font-size: clamp(2.4rem, 10vw, 3.35rem);
line-height: 1.02;
margin-bottom: 16px;
}
.hero-subtitle,
.subtitle {
font-size: 1rem;
line-height: 1.45;
margin-bottom: 24px;
}
#video-wrapper-container .player-controls-row {
gap: 4px;
min-height: 46px;
}
#video-wrapper-container .player-controls-left,
#video-wrapper-container .player-controls-right {
min-width: 0;
gap: 0;
}
#video-wrapper-container .player-controls-left {
flex: 1 1 auto;
}
#video-wrapper-container .player-controls-right {
flex: 0 1 auto;
justify-content: flex-end;
}
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap {
flex: 0 0 40px;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 44px;
min-height: 44px;
}
#video-wrapper-container .player-ctrl-btn::after,
#video-wrapper-container .player-quality-icon::after,
#video-wrapper-container .player-speed-btn::after {
inset: -8px -5px;
}
#video-wrapper-container .player-time {
flex: 1 1 auto;
min-width: 82px;
max-width: 112px;
overflow: hidden;
font-size: 12px;
}
#video-wrapper-container .player-volume-track,
#video-wrapper-container #skip-back-btn,
#video-wrapper-container #skip-fwd-btn,
#video-wrapper-container #pip-btn,
#video-wrapper-container #theater-btn {
display: none;
}
#video-wrapper-container .player-speed-menu,
#video-wrapper-container .player-quality-menu {
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: 76px;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
transform: none !important;
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px;
}
#video-wrapper-container .player-speed-menu.open,
#video-wrapper-container .player-quality-menu.open {
display: grid;
}
.video-info-container {
padding-inline: 24px;
}
.video-info {
width: 100%;
overflow: hidden;
}
.stream-title-text {
white-space: nowrap;
max-width: calc(100vw - 150px);
}
.stream-meta {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, auto);
gap: 6px 12px;
align-items: center;
}
.stream-meta > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.streamer-profile-link {
min-width: 44px;
text-align: left;
}
.player-section.clip-mode .stream-meta {
grid-template-columns: minmax(0, 1fr);
}
.player-section.clip-mode .vod-chat-sidebar {
height: 360px;
margin-top: 4px;
}
.clip-page-banner {
margin: 8px 0 8px;
padding: 10px;
}
.clip-page-actions {
grid-template-columns: 1fr 1fr;
}
.clip-page-btn {
min-height: 40px;
}
.clip-page-meta {
line-height: 1.3;
}
.streamer-profile-hero {
margin-top: 2px;
}
footer {
padding-bottom: 22px;
}
#api-status-link,
#btn-open-legal {
min-width: 44px;
justify-content: center;
}
}
/* Final UX polish: safer taps, lighter mobile player, cleaner profile grids */
.btn-delete-history {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: -10px -12px -10px 0;
border-radius: 999px;
}
.btn-delete-history:hover {
background: rgba(255, 68, 68, 0.1) !important;
}
.streamer-profile-link {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
margin-block: -10px;
padding: 0 8px;
border-radius: 8px;
}
.trending-tab,
.platform-opt {
min-height: 44px;
}
.vod-thumb-empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background:
radial-gradient(circle at center, rgba(var(--accent-rgb), 0.14), rgba(255, 255, 255, 0.04)),
linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
color: var(--accent-primary);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vod-thumb-empty span {
min-width: 48px;
height: 48px;
padding: 0 10px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.34);
border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.profile-show-all-vods {
width: 100%;
min-height: 44px;
margin-top: 10px;
display: none;
align-items: center;
justify-content: center;
border: 1px solid rgba(var(--accent-rgb), 0.26);
border-radius: 10px;
background: rgba(var(--accent-rgb), 0.08);
color: var(--accent-primary);
font-weight: 800;
cursor: pointer;
}
.profile-show-all-vods:hover {
background: rgba(var(--accent-rgb), 0.14);
}
.app-view-shell .view-toolbar {
gap: 16px;
flex-wrap: wrap;
}
.app-view-shell .view-actions {
flex-wrap: wrap;
}
#history-filter-bar,
#favorites-filter-bar {
display: grid;
grid-template-columns: minmax(240px, 1fr) auto;
align-items: center;
gap: 12px;
}
#history-search,
#favorites-search {
width: 100%;
max-width: none;
}
#favorites-sort {
width: 100%;
max-width: 240px !important;
justify-self: end;
}
@media (max-width: 768px) {
.player-section:not(.clip-mode) .monetization-container {
padding: 0 14px 10px !important;
gap: 0 !important;
}
.player-section:not(.clip-mode) .support-banner {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
text-align: left !important;
gap: 10px !important;
padding: 10px 12px !important;
border-left: 3px solid var(--accent-primary) !important;
border-top: 0 !important;
}
.player-section:not(.clip-mode) .support-banner h4 {
margin: 0 !important;
font-size: 0.92rem !important;
line-height: 1.2 !important;
}
.player-section:not(.clip-mode) .support-banner p {
display: none !important;
}
.player-section:not(.clip-mode) .support-banner .player-action-btn {
width: auto !important;
min-width: 104px !important;
padding: 7px 12px !important;
white-space: nowrap !important;
}
.app-view-shell .view-toolbar {
align-items: stretch !important;
}
.app-view-shell .view-actions {
width: 100%;
}
#history-filter-bar,
#favorites-filter-bar {
grid-template-columns: 1fr;
}
#favorites-sort {
justify-self: stretch;
max-width: none !important;
}
}
@media (max-width: 640px) {
.streamer-profile-panel:not(.show-all-profile-vods) .profile-extra-vod {
display: none;
}
.streamer-profile-panel:not(.show-all-profile-vods) .profile-show-all-vods {
display: flex;
}
}
/* Mobile player stabilization: keep the replay first, then metadata, then chat. */
@media (max-width: 768px) {
.player-section {
padding: 80px 0 36px;
}
.player-section .container {
padding-inline: 14px;
}
.player-container {
gap: 12px;
}
.player-card {
width: 100%;
border-radius: 12px;
}
.video-wrapper {
border-radius: 12px 12px 0 0;
}
.video-info-container {
padding: 12px 14px;
gap: 12px;
}
.video-info {
gap: 10px;
align-items: center;
}
.streamer-avatar {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.stream-title-text {
max-width: calc(100vw - 116px);
font-size: 0.96rem;
}
.stream-meta {
gap: 5px 10px;
font-size: 0.82rem;
}
.player-actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.player-actions .player-action-btn {
width: 100%;
min-width: 0;
min-height: 44px;
padding-inline: 10px;
}
.player-section:not(.clip-mode) .ad-slot-player:not([hidden]) {
display: flex;
}
.vod-chat-sidebar {
height: min(340px, 48vh);
border-radius: 12px;
}
.chat-header-title {
min-height: 44px;
padding: 10px 12px;
}
.chat-message {
padding-inline: 10px;
font-size: 0.82rem;
}
}
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
.player-section {
padding: 64px 0 24px;
}
.player-section .container {
padding-inline: 10px;
}
.player-card {
max-width: min(100%, calc((100vh - 118px) * 16 / 9));
margin-inline: auto;
}
#video-wrapper-container {
height: min(calc((100vw - 20px) * 0.5625), calc(100vh - 118px));
max-height: calc(100vh - 118px);
padding-top: 0 !important;
}
.video-info-container {
padding: 9px 12px;
gap: 9px;
}
.streamer-avatar {
width: 38px;
height: 38px;
flex-basis: 38px;
}
.stream-title-text {
font-size: 0.9rem;
}
.stream-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
font-size: 0.76rem;
}
.player-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.player-actions .player-action-btn {
min-height: 38px;
font-size: 0.82rem;
}
.player-section:not(.clip-mode) .ad-slot-player:not([hidden]) {
display: flex;
}
.vod-chat-sidebar {
height: min(260px, 58vh);
}
#video-wrapper-container .player-bottom-controls {
min-height: 46px;
}
}
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
.player-section.theater-mode {
padding: 0 !important;
}
.player-section.theater-mode .container,
.player-section.theater-mode .player-container {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
padding: 0 !important;
margin: 0 !important;
}
.player-section.theater-mode .player-container {
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
}
.player-section.theater-mode .player-card {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 100vh !important;
max-height: none !important;
margin: 0 !important;
}
.player-section.theater-mode .video-wrapper {
width: 100% !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: none !important;
padding-top: 0 !important;
border-radius: 0 !important;
}
.player-section.theater-mode .vod-chat-sidebar {
flex: 0 0 min(300px, 36vw) !important;
width: min(300px, 36vw) !important;
min-width: min(300px, 36vw) !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
}
.player-section.theater-mode #video-wrapper-container .player-controls-overlay {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 20;
pointer-events: none;
}
.player-section.theater-mode #video-wrapper-container .player-bottom-controls {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
z-index: 40;
pointer-events: auto !important;
}
.player-section.theater-mode #video-wrapper-container .player-click-zone {
inset: 0 0 52px 0 !important;
z-index: 1;
}
}
body.mobile-player-fullscreen-active {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
body.mobile-player-fullscreen-active header.header {
transform: translateY(-100%);
}
.player-section.mobile-fullscreen-mode {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
z-index: 10050 !important;
background: #000 !important;
overflow: hidden !important;
}
.player-section.mobile-fullscreen-mode .container,
.player-section.mobile-fullscreen-mode .player-container,
.player-section.mobile-fullscreen-mode .player-card,
.player-section.mobile-fullscreen-mode .video-wrapper,
.player-section.mobile-fullscreen-mode #video-wrapper-container {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: none !important;
min-height: 100vh !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
}
.player-section.mobile-fullscreen-mode .player-container {
display: block !important;
}
.player-section.mobile-fullscreen-mode .player-card {
border: 0 !important;
border-radius: 0 !important;
background: #000 !important;
box-shadow: none !important;
overflow: hidden !important;
}
.player-section.mobile-fullscreen-mode .video-wrapper {
position: relative !important;
border-radius: 0 !important;
}
.player-section.mobile-fullscreen-mode .video-wrapper video,
.player-section.mobile-fullscreen-mode .video-wrapper .video-js {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: #000 !important;
}
.player-section.mobile-fullscreen-mode .video-info-container,
.player-section.mobile-fullscreen-mode .monetization-container,
.player-section.mobile-fullscreen-mode #vod-game-container,
.player-section.mobile-fullscreen-mode .vod-chat-sidebar,
.player-section.mobile-fullscreen-mode .ad-slot-player {
display: none !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-controls-overlay {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 30 !important;
pointer-events: none !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-bottom-controls {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
z-index: 50 !important;
pointer-events: auto !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-center-controls {
z-index: 45 !important;
pointer-events: auto !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-control-menu {
z-index: 60 !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-click-zone {
inset: 0 0 60px 0 !important;
z-index: 1 !important;
}
#video-wrapper-container .player-mobile-settings-sheet[hidden] {
display: none !important;
}
#video-wrapper-container .player-mobile-settings-sheet {
position: fixed;
inset: 0;
z-index: 10090;
display: flex;
align-items: flex-end;
pointer-events: none;
}
#video-wrapper-container .player-mobile-settings-backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background: rgba(0, 0, 0, 0.46);
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: auto;
}
#video-wrapper-container .player-mobile-settings-panel {
position: relative;
width: 100%;
max-height: min(72dvh, calc(100vh - 24px));
padding: 8px 14px max(16px, env(safe-area-inset-bottom));
border-radius: 18px 18px 0 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 0;
background: rgba(13, 15, 18, 0.98);
box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.58);
transform: translateY(105%);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
overflow: auto;
pointer-events: auto;
}
body.player-mobile-settings-open {
overflow: hidden;
overscroll-behavior: none;
}
#video-wrapper-container .player-mobile-settings-sheet.open .player-mobile-settings-backdrop {
opacity: 1;
}
#video-wrapper-container .player-mobile-settings-sheet.open .player-mobile-settings-panel {
transform: translateY(0);
}
#video-wrapper-container .player-mobile-settings-handle {
width: 42px;
height: 4px;
margin: 0 auto 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.26);
}
#video-wrapper-container .player-mobile-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
color: #fff;
}
#video-wrapper-container .player-mobile-settings-header strong {
font-size: 1rem;
font-weight: 850;
}
#video-wrapper-container .player-mobile-settings-close {
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 28px;
line-height: 1;
display: grid;
place-items: center;
}
#video-wrapper-container .player-mobile-settings-section {
display: grid;
gap: 10px;
padding: 12px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#video-wrapper-container .player-mobile-settings-section.is-current .player-mobile-settings-label {
color: var(--accent-primary);
}
#video-wrapper-container .player-mobile-settings-label {
color: rgba(255, 255, 255, 0.72);
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
}
#video-wrapper-container .player-mobile-settings-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
#video-wrapper-container .mobile-setting-opt {
min-height: 44px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 0.9rem;
font-weight: 850;
}
#video-wrapper-container .mobile-setting-opt.active {
border-color: rgba(var(--accent-rgb), 0.72);
background: rgba(var(--accent-rgb), 0.16);
color: var(--accent-primary);
}
@media (max-width: 640px), (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
#video-wrapper-container #pip-btn,
#video-wrapper-container #theater-btn {
display: none !important;
}
#video-wrapper-container .player-bottom-controls {
min-height: 56px;
padding: 0 8px max(4px, env(safe-area-inset-bottom));
}
#video-wrapper-container .player-controls-row {
height: 50px;
gap: 0;
justify-content: space-between;
overflow: visible;
}
#video-wrapper-container .player-controls-left,
#video-wrapper-container .player-controls-right {
gap: 0;
min-width: 0;
}
#video-wrapper-container .player-controls-left {
flex: 1 1 auto;
}
#video-wrapper-container .player-controls-right {
flex: 0 0 auto;
}
#video-wrapper-container .player-ctrl-btn,
#video-wrapper-container .player-quality-wrap,
#video-wrapper-container .player-speed-wrap,
#video-wrapper-container .player-quality-icon {
flex: 0 0 42px;
width: 42px;
min-width: 42px;
max-width: 42px;
height: 48px;
min-height: 48px;
}
#video-wrapper-container .player-ctrl-btn svg,
#video-wrapper-container .player-quality-icon svg {
width: 21px;
height: 21px;
}
#video-wrapper-container .player-time {
min-width: 74px;
max-width: 92px;
line-height: 48px;
font-size: 11px;
}
#video-wrapper-container .player-control-menu,
#video-wrapper-container .player-speed-menu,
#video-wrapper-container .player-quality-menu {
display: none !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-click-zone,
.player-section.theater-mode #video-wrapper-container .player-click-zone {
inset: 0 0 66px 0 !important;
}
}
/* Final player touch target: keep the slim Kick-style line, but make seeking easy
on mobile and fullscreen. */
#video-wrapper-container .player-seek-container {
height: 18px !important;
flex-basis: 18px !important;
padding: 7px 0 8px !important;
margin-top: -7px !important;
display: flex !important;
align-items: center !important;
touch-action: none !important;
}
#video-wrapper-container .player-seek-bar {
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
#video-wrapper-container .player-controls-overlay,
#video-wrapper-container .player-bottom-controls,
#video-wrapper-container .player-seek-container {
overflow: visible !important;
}
#video-wrapper-container .seek-preview,
#video-wrapper-container .player-seek-tooltip {
z-index: 80 !important;
}
.player-section.mobile-fullscreen-mode #video-wrapper-container .player-seek-container,
.player-section.theater-mode #video-wrapper-container .player-seek-container {
height: 22px !important;
flex-basis: 22px !important;
padding: 9px 0 9px !important;
margin-top: -9px !important;
}
/* Local continuation and clip library. */
.continue-watching-section {
margin-top: 28px;
margin-bottom: 14px;
}
.continue-watching-heading h2 {
margin: 0 0 12px;
font-size: 1.1rem;
}
.continue-watching-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.continue-watching-card {
min-width: 0;
border: 1px solid var(--border-color);
border-radius: 7px;
overflow: hidden;
background: rgba(255, 255, 255, 0.025);
}
.continue-watching-open {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
width: 100%;
gap: 10px;
padding: 8px;
border: 0;
background: transparent;
color: var(--text-primary);
text-align: left;
font: inherit;
cursor: pointer;
}
.continue-watching-open:hover,
.continue-watching-open:focus-visible {
background: rgba(255, 255, 255, 0.05);
outline: none;
}
.continue-watching-thumb {
position: relative;
width: 92px;
height: 52px;
overflow: hidden;
border-radius: 4px;
background: rgba(var(--accent-rgb), 0.12);
}
.continue-watching-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.continue-watching-thumb > span {
position: absolute;
right: 4px;
bottom: 4px;
padding: 2px 4px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.76);
color: #fff;
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
}
.continue-watching-info {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}
.continue-watching-info strong,
.continue-watching-info small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.continue-watching-info strong { font-size: 0.79rem; }
.continue-watching-info small { color: var(--text-muted); font-size: 0.72rem; }
.continue-watching-progress {
height: 3px;
margin-top: 4px;
overflow: hidden;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
}
.continue-watching-progress i {
display: block;
height: 100%;
background: var(--accent-primary);
}
.continue-watching-resume {
width: 100%;
min-height: 32px;
padding: 5px 9px;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: transparent;
color: var(--accent-primary);
font: inherit;
font-size: 0.75rem;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.continue-watching-resume span { color: var(--text-muted); font-weight: 500; margin-left: 5px; }
.continue-watching-resume:hover,
.continue-watching-resume:focus-visible { background: rgba(var(--accent-rgb), 0.1); outline: none; }
.my-clips-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.my-clips-toolbar h2 { margin: 0; }
.my-clips-search {
width: min(320px, 100%);
margin: 0;
}
.my-clips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.my-clip-card {
display: flex;
min-width: 0;
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: 7px;
background: rgba(255, 255, 255, 0.025);
}
.my-clip-open {
min-width: 0;
flex: 1;
padding: 8px;
border: 0;
background: transparent;
color: var(--text-primary);
text-align: left;
font: inherit;
cursor: pointer;
}
.my-clip-open:hover,
.my-clip-open:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.my-clip-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 8;
overflow: hidden;
border-radius: 4px;
background: rgba(var(--accent-rgb), 0.12);
}
.my-clip-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.my-clip-duration {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.76);
color: #fff;
font-size: 0.68rem;
}
.my-clip-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding-top: 8px; }
.my-clip-info strong,
.my-clip-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-clip-info strong { font-size: 0.85rem; }
.my-clip-info span { color: var(--text-muted); font-size: 0.75rem; }
.my-clip-actions {
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.my-clip-actions button {
width: 38px;
flex: 1;
border: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.my-clip-actions button:hover,
.my-clip-actions button:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); outline: none; }
.my-clip-actions svg { width: 16px; height: 16px; }
.my-clips-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 44px 16px;
border: 1px dashed rgba(255, 255, 255, 0.14);
color: var(--text-secondary);
text-align: center;
}
.my-clips-empty span { color: var(--text-muted); font-size: 0.86rem; }
@media (max-width: 780px) {
.continue-watching-list { grid-template-columns: 1fr; }
.my-clips-toolbar { align-items: stretch; flex-direction: column; }
.my-clips-search { width: 100%; }
}
/* Feedback form and private inbox */
.footer-feedback-link {
color: var(--text-muted);
font-size: 0.8em;
text-decoration: none;
}
.footer-feedback-link:hover,
.footer-feedback-link:focus-visible {
color: var(--accent-primary);
}
.feedback-modal-content {
width: min(560px, calc(100vw - 28px));
max-height: min(760px, calc(100dvh - 28px));
overflow-y: auto;
padding: 24px;
border-radius: 8px;
}
.feedback-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 10px;
}
.feedback-modal-eyebrow {
color: var(--accent-primary);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.feedback-modal-header h2 {
margin: 4px 0 0;
color: var(--text-primary);
font-size: 1.3rem;
line-height: 1.25;
}
.feedback-modal-close {
display: grid;
flex: 0 0 40px;
width: 40px;
height: 40px;
place-items: center;
border: 0;
border-radius: 6px;
background: rgba(255, 255, 255, 0.07);
color: var(--text-primary);
font-size: 1.6rem;
cursor: pointer;
}
.feedback-modal-close:hover,
.feedback-modal-close:focus-visible {
background: rgba(255, 255, 255, 0.13);
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.feedback-modal-intro,
.feedback-diagnostics-note {
color: var(--text-secondary);
line-height: 1.55;
}
.feedback-modal-intro {
margin: 0 0 20px;
font-size: 0.94rem;
}
.feedback-category-fieldset {
margin: 0 0 18px;
padding: 0;
border: 0;
}
.feedback-category-fieldset legend,
.feedback-field > span {
margin-bottom: 8px;
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 700;
}
.feedback-category-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.feedback-category-options label {
min-width: 0;
cursor: pointer;
}
.feedback-category-options input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.feedback-category-options span {
display: grid;
min-height: 44px;
padding: 8px 10px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 700;
text-align: center;
}
.feedback-category-options input:checked + span {
border-color: var(--accent-primary);
background: rgba(35, 207, 255, 0.12);
color: var(--text-primary);
}
.feedback-category-options input:focus-visible + span {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.feedback-field {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.feedback-field em {
color: var(--text-muted);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
}
.feedback-field textarea,
.feedback-field input {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 6px;
background: rgba(0, 0, 0, 0.25);
color: var(--text-primary);
font: inherit;
}
.feedback-field textarea {
min-height: 128px;
padding: 12px;
line-height: 1.5;
resize: vertical;
}
.feedback-field input {
min-height: 44px;
padding: 0 12px;
}
.feedback-field textarea:focus,
.feedback-field input:focus {
border-color: var(--accent-primary);
outline: 2px solid rgba(35, 207, 255, 0.22);
outline-offset: 1px;
}
#feedback-message-counter {
align-self: flex-end;
margin-top: 5px;
color: var(--text-muted);
font-size: 0.72rem;
}
.feedback-honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.feedback-diagnostics-note {
margin: 0 0 16px;
padding-left: 12px;
border-left: 2px solid rgba(35, 207, 255, 0.45);
font-size: 0.78rem;
}
.feedback-form-error {
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid rgba(255, 91, 91, 0.35);
border-radius: 6px;
background: rgba(255, 91, 91, 0.08);
color: #ffb1b1;
font-size: 0.82rem;
}
.feedback-form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.feedback-cancel-btn,
.feedback-submit-btn {
min-height: 44px;
padding: 0 18px;
border-radius: 6px;
font: inherit;
font-size: 0.86rem;
font-weight: 800;
cursor: pointer;
}
.feedback-cancel-btn {
border: 1px solid rgba(255, 255, 255, 0.14);
background: transparent;
color: var(--text-secondary);
}
.feedback-submit-btn {
border: 0;
background: var(--accent-primary);
color: #050608;
}
.feedback-submit-btn:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.feedback-cancel-btn:focus-visible,
.feedback-submit-btn:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.feedback-success-view {
padding: 28px 8px 8px;
text-align: center;
}
.feedback-success-icon {
display: grid;
width: 52px;
height: 52px;
margin: 0 auto 16px;
place-items: center;
border-radius: 50%;
background: rgba(53, 214, 145, 0.14);
color: #62e7ac;
font-size: 1.5rem;
font-weight: 900;
}
.feedback-success-view h3 {
margin: 0 0 8px;
color: var(--text-primary);
}
.feedback-success-view p {
margin: 0 0 22px;
color: var(--text-secondary);
}
.feedback-admin-page {
min-height: 100vh;
margin: 0;
background: #090b10;
color: #f5f7fa;
}
.feedback-admin-header,
.feedback-admin-main {
width: min(1120px, calc(100% - 32px));
margin-inline: auto;
}
.feedback-admin-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding: 32px 0 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.feedback-admin-brand {
color: #f5f7fa;
font-size: 1.5rem;
font-weight: 900;
text-decoration: none;
}
.feedback-admin-brand span {
color: var(--accent-primary);
}
.feedback-admin-header p,
.feedback-admin-total span {
margin: 5px 0 0;
color: #9198a5;
font-size: 0.8rem;
}
.feedback-admin-total {
text-align: right;
}
.feedback-admin-total strong {
display: block;
color: var(--accent-primary);
font-size: 1.45rem;
}
.feedback-admin-main {
padding: 20px 0 52px;
}
.feedback-admin-filters {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 2px 2px 18px;
}
.feedback-admin-filters a {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 6px;
color: #aab1bd;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
}
.feedback-admin-filters a span {
color: #6f7784;
}
.feedback-admin-filters a.is-active {
border-color: var(--accent-primary);
background: rgba(35, 207, 255, 0.1);
color: #f5f7fa;
}
.feedback-admin-list {
display: grid;
gap: 12px;
}
.feedback-admin-card {
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid #6d7581;
border-radius: 8px;
background: #11141b;
}
.feedback-admin-card.status-new { border-left-color: var(--accent-primary); }
.feedback-admin-card.status-planned { border-left-color: #f1c65b; }
.feedback-admin-card.status-done { border-left-color: #62e7ac; }
.feedback-admin-card.status-archived { opacity: 0.72; }
.feedback-admin-card > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.feedback-admin-card time {
color: #747d8a;
font-size: 0.72rem;
}
.feedback-admin-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.feedback-category,
.feedback-status {
padding: 4px 8px;
border-radius: 4px;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.feedback-category { background: rgba(35, 207, 255, 0.12); color: #76deff; }
.feedback-category.category-bug { background: rgba(255, 91, 91, 0.12); color: #ff9c9c; }
.feedback-category.category-feature { background: rgba(241, 198, 91, 0.12); color: #f1d580; }
.feedback-status { background: rgba(255, 255, 255, 0.07); color: #aab1bd; }
.feedback-admin-message {
margin: 17px 0;
color: #e7eaf0;
line-height: 1.55;
white-space: pre-wrap;
}
.feedback-admin-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 0;
}
.feedback-admin-meta div {
min-width: 90px;
}
.feedback-admin-meta dt {
color: #737c89;
font-size: 0.64rem;
font-weight: 800;
text-transform: uppercase;
}
.feedback-admin-meta dd {
max-width: 460px;
margin: 3px 0 0;
overflow-wrap: anywhere;
color: #bac1cc;
font-size: 0.76rem;
}
.feedback-admin-meta a {
color: #76deff;
}
.feedback-admin-page-link {
flex: 1 1 320px;
}
.feedback-admin-diagnostics {
margin-top: 15px;
color: #7f8895;
font-size: 0.72rem;
}
.feedback-admin-diagnostics summary {
cursor: pointer;
}
.feedback-admin-actions {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.feedback-admin-actions form {
display: flex;
align-items: center;
gap: 8px;
}
.feedback-admin-actions label {
color: #8f97a3;
font-size: 0.7rem;
}
.feedback-admin-actions select,
.feedback-admin-actions button {
min-height: 36px;
border-radius: 5px;
font: inherit;
font-size: 0.74rem;
}
.feedback-admin-actions select {
border: 1px solid rgba(255, 255, 255, 0.12);
background: #0a0d12;
color: #e8ebef;
}
.feedback-admin-actions button {
padding: 0 11px;
border: 0;
background: var(--accent-primary);
color: #050608;
font-weight: 800;
cursor: pointer;
}
.feedback-delete-form button {
background: rgba(255, 91, 91, 0.12);
color: #ffadad;
}
.feedback-admin-empty {
padding: 72px 16px;
text-align: center;
}
.feedback-admin-empty h2 {
font-size: 1.25rem;
}
.feedback-admin-empty p {
color: #8a93a0;
}
.admin-dashboard-header {
align-items: center;
}
.admin-header-meta {
display: flex;
align-items: center;
gap: 12px;
color: #7f8895;
font-size: 0.72rem;
}
.admin-header-meta a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: #dce1e8;
font-weight: 750;
text-decoration: none;
}
.admin-refresh-select {
display: inline-flex;
align-items: center;
gap: 7px;
color: #7f8895;
}
.admin-refresh-select > span {
font-size: 0.68rem;
}
.admin-refresh-select select,
.admin-refresh-button {
min-height: 36px;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
background: #0b0e13;
color: #dce1e8;
font: inherit;
font-size: 0.7rem;
}
.admin-refresh-button {
cursor: pointer;
}
.admin-refresh-button:hover,
.admin-refresh-select select:hover {
border-color: rgba(56, 189, 248, 0.48);
}
.admin-global-nav {
display: flex;
align-items: center;
gap: 4px;
min-height: 48px;
margin-bottom: 22px;
overflow-x: auto;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.admin-global-nav a {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
min-height: 48px;
padding: 0 14px;
border-bottom: 2px solid transparent;
color: #8f98a5;
font-size: 0.78rem;
font-weight: 800;
text-decoration: none;
}
.admin-global-nav a:hover,
.admin-global-nav a.is-active {
color: #f5f7fa;
}
.admin-global-nav a.is-active {
border-bottom-color: var(--accent-primary);
}
.admin-global-nav a span {
display: inline-grid;
min-width: 20px;
height: 20px;
padding: 0 5px;
place-items: center;
border-radius: 999px;
background: var(--accent-primary);
color: #050608;
font-size: 0.66rem;
}
.admin-alert-strip {
display: grid;
gap: 8px;
margin-bottom: 18px;
}
.admin-alert-strip p,
.admin-alert-strip a {
min-height: 38px;
margin: 0;
padding: 10px 12px;
border-left: 3px solid #62e7ac;
background: rgba(98, 231, 172, 0.07);
color: #bdebd6;
font-size: 0.76rem;
line-height: 1.4;
text-decoration: none;
}
.admin-alert-strip .level-info {
border-left-color: #5bc8f5;
background: rgba(91, 200, 245, 0.08);
color: #b5e8fb;
}
.admin-alert-strip .level-warning {
border-left-color: #f1c65b;
background: rgba(241, 198, 91, 0.08);
color: #f6df9f;
}
.admin-alert-strip .level-danger {
border-left-color: #ff6b6b;
background: rgba(255, 107, 107, 0.08);
color: #ffc0c0;
}
.admin-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 34px;
}
.admin-live-health-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.admin-product-kpis {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-kpi-card {
min-width: 0;
min-height: 128px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 8px;
background: #11141b;
}
.admin-kpi-card.needs-attention {
border-color: rgba(241, 198, 91, 0.38);
}
.admin-kpi-card.is-warning {
border-color: rgba(241, 198, 91, 0.5);
background: rgba(241, 198, 91, 0.055);
}
.admin-kpi-card.is-danger {
border-color: rgba(255, 107, 107, 0.55);
background: rgba(255, 107, 107, 0.06);
}
.admin-kpi-label,
.admin-kpi-card small {
display: block;
overflow-wrap: anywhere;
color: #838c99;
font-size: 0.7rem;
}
.admin-kpi-label {
min-height: 30px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
}
.admin-kpi-card strong {
display: block;
margin: 4px 0 7px;
color: #f7f9fb;
font-size: 2rem;
line-height: 1;
}
.admin-kpi-card .admin-kpi-unit {
display: inline;
color: #7f8895;
font-size: 0.72rem;
}
.admin-kpi-card:first-child strong {
color: var(--accent-primary);
}
/* Pastille "temps réel" : pulse brièvement à chaque rafraîchissement live. */
.admin-live-dot {
display: inline-block;
width: 7px;
height: 7px;
margin-left: 4px;
border-radius: 50%;
background: #3d4550;
vertical-align: middle;
transition: background 0.25s ease, box-shadow 0.25s ease;
}
.admin-live-dot.is-live {
background: #4ade80;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
}
.admin-live-dot.is-offline {
background: #ff7777;
}
.admin-dashboard-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 28px;
}
.admin-section {
min-width: 0;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.admin-section-wide {
grid-column: 1 / -1;
}
.admin-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.admin-section-header h1,
.admin-section-header h2 {
margin: 3px 0 0;
color: #f3f5f8;
font-size: 1rem;
line-height: 1.3;
}
.admin-section-header a {
flex: 0 0 auto;
color: #76deff;
font-size: 0.72rem;
font-weight: 750;
text-decoration: none;
}
.admin-section-header > small {
color: #6f7885;
font-size: 0.68rem;
}
.admin-eyebrow {
margin: 0;
color: #707986;
font-size: 0.62rem;
font-weight: 850;
text-transform: uppercase;
}
.admin-platform-summary {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 16px;
color: #8f98a5;
font-size: 0.72rem;
}
.admin-platform-summary b {
color: #e7ebf0;
}
.admin-table-scroll {
overflow-x: auto;
}
.admin-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.74rem;
}
.admin-data-table th {
padding: 9px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
color: #737d8a;
font-size: 0.62rem;
text-align: left;
text-transform: uppercase;
}
.admin-data-table td {
min-width: 86px;
padding: 12px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #b7bfca;
vertical-align: middle;
}
.admin-data-table td:first-child {
width: 55%;
min-width: 250px;
}
.admin-data-table td a,
.admin-data-table td small {
display: block;
}
.admin-data-table td a {
max-width: 600px;
overflow: hidden;
color: #e5e9ee;
font-weight: 700;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-data-table td a:hover {
color: #76deff;
}
.admin-data-table td small {
margin-top: 3px;
color: #747d89;
font-size: 0.66rem;
}
.admin-platform-badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 7px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.08);
color: #c9cfd7;
font-size: 0.62rem;
font-weight: 850;
text-transform: uppercase;
}
.admin-platform-badge.platform-kick {
background: rgba(83, 252, 24, 0.1);
color: #9eff7c;
}
.admin-platform-badge.platform-twitch {
background: rgba(169, 112, 255, 0.13);
color: #cdaaff;
}
.admin-content-kind {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 7px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.07);
color: #c8ced6;
font-size: 0.62rem;
font-weight: 850;
text-transform: uppercase;
}
.admin-content-kind.kind-clip {
background: rgba(241, 198, 91, 0.12);
color: #f1d580;
}
.admin-share-value {
width: 90px;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.admin-share-value span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--accent-primary);
}
.admin-feedback-chart {
display: grid;
grid-template-columns: repeat(7, minmax(32px, 1fr));
gap: 7px;
height: 170px;
margin-bottom: 18px;
}
.admin-chart-column {
display: grid;
grid-template-rows: 18px 1fr 18px;
gap: 5px;
min-width: 0;
text-align: center;
}
.admin-chart-count,
.admin-chart-column small {
color: #747d89;
font-size: 0.62rem;
}
.admin-chart-track {
position: relative;
overflow: hidden;
border-radius: 4px;
background: rgba(255, 255, 255, 0.04);
}
.admin-chart-track i {
position: absolute;
right: 0;
bottom: 0;
left: 0;
min-height: 2px;
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #67dcff, var(--accent-primary));
}
.admin-breakdown-list,
.admin-runtime-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
.admin-breakdown-list div,
.admin-runtime-list div {
min-width: 0;
padding: 10px;
background: rgba(255, 255, 255, 0.035);
}
.admin-breakdown-list dt,
.admin-runtime-list dt {
color: #77808c;
font-size: 0.62rem;
}
.admin-breakdown-list dd,
.admin-runtime-list dd {
margin: 5px 0 0;
overflow-wrap: anywhere;
color: #e5e9ee;
font-size: 0.8rem;
font-weight: 750;
}
.admin-compact-list {
display: grid;
}
.admin-compact-list a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 4px 10px;
min-height: 64px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
color: inherit;
text-decoration: none;
}
.admin-compact-list a:first-child {
padding-top: 0;
}
.admin-compact-list a:last-child {
border-bottom: 0;
}
.admin-compact-list strong,
.admin-compact-list small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-compact-list strong {
align-self: center;
color: #e2e6ec;
font-size: 0.76rem;
}
.admin-compact-list small {
grid-column: 2;
color: #737c88;
font-size: 0.65rem;
}
.admin-compact-list a:hover strong {
color: #76deff;
}
.admin-service-list {
margin: 0;
padding: 0;
list-style: none;
}
.admin-service-list li {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 38px;
gap: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: #b5bdc8;
font-size: 0.74rem;
}
.admin-service-list b,
.admin-monitor-summary b,
.admin-health-pill {
color: #8d96a2;
font-size: 0.65rem;
font-weight: 800;
}
.admin-service-list b.is-up,
.admin-monitor-summary b.is-up,
.admin-health-pill.is-up {
color: #62e7ac;
}
.admin-service-list b.is-down,
.admin-monitor-summary b.is-down,
.admin-health-pill.is-down {
color: #ff8585;
}
/* Etat « pas encore mesure ». Le distinguer du rouge evite de lire une panne
la ou il n'y a qu'une sonde qui n'a pas encore tourne. */
.admin-service-list b.is-idle,
.admin-monitor-summary b.is-idle,
.admin-health-pill.is-idle {
color: #9aa4b2;
}
.admin-monitor-summary {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 14px;
color: #767f8b;
font-size: 0.66rem;
}
.admin-health-pill {
flex: 0 0 auto;
padding: 5px 8px;
border: 1px solid currentColor;
border-radius: 4px;
}
.admin-storage-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
margin-bottom: 12px;
}
.admin-storage-grid > div {
min-width: 0;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.025);
}
.admin-storage-grid span,
.admin-storage-grid strong,
.admin-storage-grid small {
display: block;
overflow-wrap: anywhere;
}
.admin-storage-grid span {
min-height: 30px;
color: #77808d;
font-size: 0.64rem;
}
.admin-storage-grid strong {
margin: 4px 0;
color: #ecf0f4;
font-size: 1.1rem;
}
.admin-storage-grid small {
color: #69727f;
font-size: 0.62rem;
}
.admin-runtime-list {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.admin-empty-copy {
margin: 22px 0;
color: #78818e;
font-size: 0.76rem;
}
.admin-live-funnel {
display: grid;
grid-template-columns:
minmax(130px, 1fr) auto minmax(130px, 1fr) auto
minmax(130px, 1fr) auto minmax(150px, 1fr);
align-items: stretch;
gap: 9px;
}
.admin-live-funnel > div {
min-width: 0;
padding: 13px;
border-left: 3px solid var(--accent-primary);
background: rgba(255, 255, 255, 0.035);
}
.admin-live-funnel span,
.admin-live-funnel strong,
.admin-live-funnel small {
display: block;
}
.admin-live-funnel span {
color: #78818d;
font-size: 0.62rem;
}
.admin-live-funnel strong {
margin-top: 6px;
color: #edf0f4;
font-size: 1.05rem;
}
.admin-live-funnel small {
margin-top: 4px;
color: #6f7885;
font-size: 0.62rem;
}
.admin-live-funnel > i {
align-self: center;
color: #59626e;
font-style: normal;
}
.admin-live-dimensions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.admin-live-dimensions h3 {
margin: 0 0 8px;
color: #737d89;
font-size: 0.62rem;
text-transform: uppercase;
}
.admin-live-dimensions dl,
.admin-qoe-summary {
display: grid;
gap: 6px;
margin: 0;
}
.admin-live-dimensions dl > div,
.admin-qoe-summary > div {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
gap: 8px;
padding: 8px 9px;
background: rgba(255, 255, 255, 0.035);
}
.admin-live-dimensions dt,
.admin-qoe-summary dt {
overflow: hidden;
color: #7c8591;
font-size: 0.64rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-live-dimensions dd,
.admin-qoe-summary dd {
margin: 0;
color: #e5e9ee;
font-size: 0.72rem;
font-weight: 800;
white-space: nowrap;
}
.admin-live-dimensions dd small {
color: #66707c;
font-size: 0.58rem;
}
.admin-qoe-summary-wide {
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-bottom: 12px;
}
.admin-empty-row td {
color: #78818e;
text-align: center;
}
.admin-clips-toolbar {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-clips-toolbar form {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) auto auto;
align-items: end;
gap: 10px;
}
.admin-clips-toolbar label {
display: grid;
gap: 6px;
min-width: 0;
}
.admin-clips-toolbar label > span {
color: #78818e;
font-size: 0.64rem;
font-weight: 800;
text-transform: uppercase;
}
.admin-clips-toolbar input,
.admin-clips-toolbar select,
.admin-clips-toolbar button,
.admin-clips-toolbar a,
.admin-open-clip,
.admin-pagination a,
.admin-pagination span {
min-height: 42px;
border-radius: 6px;
font: inherit;
font-size: 0.74rem;
}
.admin-clips-toolbar input,
.admin-clips-toolbar select {
width: 100%;
min-width: 0;
padding: 0 11px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #0c0f15;
color: #edf0f4;
}
.admin-clips-toolbar button,
.admin-clips-toolbar a,
.admin-open-clip,
.admin-pagination a,
.admin-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #dce1e8;
font-weight: 800;
text-decoration: none;
}
.admin-clips-toolbar button {
border-color: var(--accent-primary);
background: var(--accent-primary);
color: #050608;
cursor: pointer;
}
.admin-clips-results {
display: grid;
gap: 9px;
}
.admin-clip-row {
display: grid;
grid-template-columns: 112px minmax(180px, 1fr) minmax(290px, auto) auto;
align-items: center;
gap: 14px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 8px;
background: #11141b;
}
.admin-clip-thumb {
width: 112px;
aspect-ratio: 16 / 9;
overflow: hidden;
display: grid;
place-items: center;
border-radius: 5px;
background: #080a0e;
color: #68717e;
font-size: 0.68rem;
font-weight: 850;
text-transform: uppercase;
}
.admin-clip-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.admin-clip-primary {
min-width: 0;
}
.admin-clip-primary > div {
display: flex;
align-items: center;
gap: 8px;
}
.admin-clip-primary small {
overflow: hidden;
color: #69727f;
font-size: 0.62rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-clip-primary h2 {
margin: 7px 0 3px;
overflow: hidden;
color: #edf0f4;
font-size: 0.84rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-clip-primary p {
margin: 0;
overflow: hidden;
color: #858e9a;
font-size: 0.7rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-clip-meta {
display: grid;
grid-template-columns: repeat(3, minmax(74px, auto));
gap: 12px;
margin: 0;
}
.admin-clip-meta div {
min-width: 0;
}
.admin-clip-meta dt {
color: #68717e;
font-size: 0.58rem;
font-weight: 800;
text-transform: uppercase;
}
.admin-clip-meta dd {
margin: 4px 0 0;
color: #b8c0ca;
font-size: 0.68rem;
white-space: nowrap;
}
.admin-open-clip {
min-width: 74px;
border-color: rgba(35, 207, 255, 0.35);
color: #76deff;
}
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 22px;
}
.admin-pagination strong {
color: #8b94a0;
font-size: 0.7rem;
}
.admin-pagination span {
opacity: 0.45;
}
@media (max-width: 860px) {
.admin-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-live-health-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-dashboard-layout {
grid-template-columns: 1fr;
}
.admin-section-wide {
grid-column: auto;
}
.admin-storage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-runtime-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-live-funnel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-live-funnel > i {
display: none;
}
.admin-qoe-summary-wide {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-clip-row {
grid-template-columns: 112px minmax(0, 1fr) auto;
}
.admin-clip-meta {
grid-column: 2 / -1;
justify-content: start;
}
}
@media (max-width: 640px) {
.feedback-modal-content {
width: calc(100vw - 16px);
max-height: calc(100dvh - 16px);
padding: 18px;
}
.feedback-category-options {
grid-template-columns: 1fr;
}
.feedback-category-options span {
min-height: 42px;
justify-items: start;
text-align: left;
}
.feedback-form-actions,
.feedback-admin-card > header,
.feedback-admin-actions {
align-items: stretch;
flex-direction: column;
}
.feedback-cancel-btn,
.feedback-submit-btn {
flex: 1;
}
.feedback-admin-header {
align-items: flex-start;
}
.admin-dashboard-header,
.admin-section-header {
align-items: flex-start;
flex-direction: column;
}
.admin-header-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
width: 100%;
gap: 8px;
}
.admin-header-meta > [data-live-updated] {
grid-column: 1 / -1;
}
.admin-refresh-select > span {
display: none;
}
.admin-refresh-select select,
.admin-refresh-button,
.admin-header-meta a {
width: 100%;
justify-content: center;
}
.admin-header-meta a:last-child {
grid-column: 1 / -1;
}
.admin-global-nav {
margin-inline: -8px;
}
.admin-kpi-grid {
gap: 8px;
}
.admin-live-health-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.admin-kpi-card {
min-height: 120px;
padding: 13px;
}
.admin-kpi-card strong {
font-size: 1.7rem;
}
.admin-feedback-chart {
gap: 4px;
}
.admin-breakdown-list,
.admin-runtime-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-live-funnel,
.admin-live-dimensions,
.admin-qoe-summary-wide {
grid-template-columns: 1fr;
}
.admin-platform-summary {
justify-content: flex-start;
}
.admin-health-pill {
white-space: normal;
}
.admin-clips-toolbar form {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.admin-clips-toolbar label:first-child {
grid-column: 1 / -1;
}
.admin-clip-row {
grid-template-columns: 88px minmax(0, 1fr);
gap: 10px;
}
.admin-clip-thumb {
width: 88px;
}
.admin-clip-meta {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
padding-top: 9px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.admin-clip-meta dd {
white-space: normal;
}
.admin-open-clip {
grid-column: 1 / -1;
width: 100%;
}
.admin-pagination {
justify-content: space-between;
gap: 8px;
}
.feedback-admin-actions form {
flex-wrap: wrap;
}
.feedback-admin-actions select {
flex: 1;
}
}
.admin-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Private product analytics */
.admin-analytics-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
padding: 13px 0 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-analytics-toolbar strong {
display: block;
margin-top: 4px;
color: #edf1f5;
font-size: 0.86rem;
}
.admin-analytics-toolbar nav {
display: inline-flex;
padding: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
background: #0b0e13;
}
.admin-analytics-toolbar nav a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 11px;
border-radius: 4px;
color: #87909c;
font-size: 0.7rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.admin-analytics-toolbar nav a.is-active {
background: var(--accent-primary);
color: #050608;
}
.admin-analytics-kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-analytics-kpis .admin-kpi-duration {
font-size: 1.35rem;
line-height: 1.15;
}
.admin-analytics-chart-scroll {
max-width: 100%;
overflow-x: auto;
padding-bottom: 6px;
}
.admin-analytics-chart {
display: grid;
grid-template-columns: repeat(var(--analytics-days), minmax(22px, 1fr));
gap: 5px;
min-width: max(100%, calc(var(--analytics-days) * 27px));
height: 230px;
}
.admin-analytics-day {
display: grid;
grid-template-rows: 19px 1fr 20px;
gap: 4px;
min-width: 0;
text-align: center;
}
.admin-analytics-day > span,
.admin-analytics-day > small {
overflow: hidden;
color: #737d89;
font-size: 0.57rem;
text-overflow: clip;
white-space: nowrap;
}
.admin-analytics-bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-height: 0;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018));
}
.admin-analytics-bars i {
width: min(8px, 38%);
min-height: 2px;
border-radius: 2px 2px 0 0;
}
.admin-analytics-bars .visitors {
background: var(--accent-primary);
}
.admin-analytics-bars .watch {
background: #5bc8f5;
}
.admin-analytics-legend {
display: inline-flex;
align-items: center;
gap: 6px;
color: #78818d;
font-size: 0.64rem;
}
.admin-analytics-legend i {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--accent-primary);
}
.admin-analytics-legend i:nth-child(2) {
margin-left: 7px;
background: #5bc8f5;
}
.admin-analytics-breakdown {
display: grid;
gap: 10px;
}
.admin-analytics-breakdown > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 52px;
align-items: center;
gap: 8px;
}
.admin-analytics-breakdown span,
.admin-analytics-breakdown b,
.admin-analytics-breakdown small {
color: #9ca5b1;
font-size: 0.69rem;
}
.admin-analytics-breakdown b {
color: #e4e8ed;
}
.admin-analytics-breakdown small {
color: #69727e;
text-align: right;
}
.admin-analytics-breakdown > div > i {
grid-column: 1 / -1;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
}
.admin-analytics-breakdown em {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-primary), #5bc8f5);
}
.admin-analytics-funnel {
display: grid;
grid-template-columns:
minmax(130px, 1fr) auto minmax(130px, 1fr) auto
minmax(130px, 1fr) auto minmax(150px, 1fr);
align-items: stretch;
gap: 9px;
}
.admin-analytics-funnel > div {
min-width: 0;
padding: 13px;
border-left: 3px solid var(--accent-primary);
background: rgba(255, 255, 255, 0.035);
}
.admin-analytics-funnel > div.is-error {
grid-column: 1 / -1;
border-left-color: #ff7777;
}
.admin-analytics-funnel span,
.admin-analytics-funnel strong,
.admin-analytics-funnel small {
display: block;
overflow-wrap: anywhere;
}
.admin-analytics-funnel span {
color: #78818d;
font-size: 0.62rem;
}
.admin-analytics-funnel strong {
margin-top: 6px;
color: #edf0f4;
font-size: 1rem;
}
.admin-analytics-funnel small {
margin-top: 4px;
color: #69727e;
font-size: 0.6rem;
}
.admin-analytics-funnel > i {
align-self: center;
color: #59626e;
font-style: normal;
}
.admin-analytics-privacy p {
max-width: 920px;
margin: 0;
color: #858e9a;
font-size: 0.72rem;
line-height: 1.7;
}
.admin-issue-table-wrap {
max-width: 100%;
overflow-x: auto;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-issue-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
color: #929ba7;
font-size: 0.68rem;
}
.admin-issue-table th,
.admin-issue-table td {
padding: 11px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
text-align: left;
vertical-align: middle;
}
.admin-issue-table th {
color: #6f7985;
font-size: 0.59rem;
font-weight: 800;
text-transform: uppercase;
}
.admin-issue-table tbody tr:last-child td {
border-bottom: 0;
}
.admin-issue-table td:first-child {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4px 8px;
}
.admin-issue-table td:first-child strong {
min-width: 0;
overflow-wrap: anywhere;
color: #e5e9ee;
font-size: 0.7rem;
}
.admin-issue-table td:first-child small {
grid-column: 2;
color: #69727e;
}
.admin-issue-kind {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: 2px 6px;
border: 1px solid rgba(255, 119, 119, 0.28);
border-radius: 4px;
color: #ff9a9a;
font-size: 0.55rem;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
}
.admin-issue-kind.is-third_party {
border-color: rgba(255, 191, 105, 0.3);
color: #ffc276;
}
.admin-issue-kind.is-browser_noise {
border-color: rgba(91, 200, 245, 0.28);
color: #79d5fb;
}
.admin-storage-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 860px) {
.admin-analytics-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-analytics-funnel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-analytics-funnel > i {
display: none;
}
}
@media (max-width: 640px) {
.admin-global-nav {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.admin-global-nav a {
flex: 0 0 auto;
}
.admin-analytics-toolbar {
align-items: stretch;
flex-direction: column;
}
.admin-analytics-toolbar nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.admin-analytics-toolbar nav a {
justify-content: center;
}
.admin-analytics-funnel {
grid-template-columns: 1fr;
}
.admin-analytics-legend {
flex-wrap: wrap;
}
}
/* Monetag In-Page Push frames are injected directly under . The CSP
bridge preserves their runtime dimensions, then applies this class only to
compact frames. Full-screen vignette/interstitial formats remain untouched. */
html > iframe.kns-monetag-notification-frame {
position: fixed !important;
top: calc(76px + var(--kns-monetag-offset, 0px)) !important;
right: max(12px, env(safe-area-inset-right)) !important;
bottom: auto !important;
left: auto !important;
z-index: 2147483000 !important;
max-width: calc(100vw - 24px) !important;
overflow: hidden !important;
scrollbar-width: none !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45) !important;
}
html > iframe.kns-monetag-notification-frame::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
@media (max-width: 640px) {
html > iframe.kns-monetag-notification-frame {
top: calc(72px + var(--kns-monetag-offset, 0px)) !important;
right: max(8px, env(safe-area-inset-right)) !important;
max-width: calc(100vw - 16px) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Écriture de droite à gauche (arabe)
═══════════════════════════════════════════════════════════════════════════
L'attribut dir="rtl" du document fait déjà l'essentiel du travail : le
navigateur retourne l'alignement du texte, l'ordre des éléments en
flex-direction: row, l'ordre des colonnes de grille et toutes les
propriétés logiques (inline-start / inline-end). Ce bloc ne traite donc que
ce que le navigateur ne peut pas deviner : les positions PHYSIQUES posées en
left / right, et les zones qui doivent volontairement rester en LTR.
Le lecteur vidéo reste en LTR, comme chez YouTube et Netflix. Deux raisons,
et la seconde est décisive :
- le temps s'écoule de gauche à droite pour tout le monde ; une barre de
progression inversée se lirait à contresens ;
- main.js calcule la position d'un clic sur la barre à partir du bord
GAUCHE (getBoundingClientRect().left + offsetX). En RTL, ce calcul
viserait le symétrique du point cliqué : chaque clic enverrait le
visiteur à l'opposé de ce qu'il vise, et l'aperçu au survol montrerait
un autre moment de la rediffusion.
Autrement dit, mettre le lecteur en RTL ne serait pas un défaut esthétique
mais un défaut fonctionnel. */
[dir="rtl"] .video-wrapper,
[dir="rtl"] .player-seek-container,
[dir="rtl"] .player-controls-row,
[dir="rtl"] .player-bottom-controls,
[dir="rtl"] .player-center-controls,
[dir="rtl"] .clip-preview-panel,
[dir="rtl"] .chapter-progress-bar {
direction: ltr;
}
/* Le texte des libellés du lecteur redevient arabe, sans toucher à la
géométrie ci-dessus. */
[dir="rtl"] .player-ctrl-btn,
[dir="rtl"] .player-quality-wrap,
[dir="rtl"] .player-muted-skip,
[dir="rtl"] .player-buffering-label {
direction: rtl;
}
/* Les valeurs numériques (durées, compteurs, tailles) restent lisibles de
gauche à droite même dans un paragraphe arabe. */
[dir="rtl"] .chat-time,
[dir="rtl"] .stat-value,
[dir="rtl"] .vod-duration,
[dir="rtl"] time,
[dir="rtl"] code,
[dir="rtl"] pre {
direction: ltr;
unicode-bidi: embed;
}
/* Éléments ancrés à un bord : leur décalage est écrit en dur, le navigateur ne
le retourne pas. On les remet du bon côté. */
[dir="rtl"] .chat-scroll-btn {
right: auto;
left: 16px;
}
[dir="rtl"] .chapter-menu-close,
[dir="rtl"] .chat-search-clear {
right: auto;
left: 8px;
}
/* Une flèche « retour » doit pointer vers l'endroit d'où l'on vient, qui
change de côté. */
[dir="rtl"] .back-home-arrow,
[dir="rtl"] .breadcrumb-separator {
transform: scaleX(-1);
}
/* Les listes à puces et les retraits suivent le sens de lecture. */
[dir="rtl"] .landing-section ul,
[dir="rtl"] .landing-faq {
padding-right: 1.2em;
padding-left: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
Mots longs et césure
═══════════════════════════════════════════════════════════════════════════
L'allemand et le russe forment des mots que l'anglais découpe en plusieurs :
« Datenschutzerklärung » (20 caractères) et « конфиденциальности » (18) ne
tiennent pas dans un titre à 375 px. Sans autorisation de coupure, le mot
ne se replie pas : il élargit son conteneur, qui élargit la page, et le
visiteur se retrouve avec un défilement horizontal.
Mesuré avant correctif : /de/privacy débordait de 90 px et /ru/privacy de
94 px sur mobile.
`hyphens: auto` s'appuie sur l'attribut lang du document — déjà correct pour
les sept langues — et coupe proprement, avec un trait d'union, seulement
quand c'est nécessaire. `overflow-wrap: break-word` reste en filet de
sécurité pour les navigateurs sans dictionnaire de césure, et pour les
chaînes sans césure possible comme une URL collée. */
h1, h2, h3,
.hero-copy .eyebrow,
.landing-faq dt,
.admin-section-header h2 {
overflow-wrap: break-word;
hyphens: auto;
}
/* Les identifiants techniques ne se coupent jamais : une commande FFmpeg ou une
URL M3U8 coupée par un trait d'union deviendrait fausse si on la recopie. */
code, pre, kbd, samp, .admin-data-table td code {
hyphens: none;
overflow-wrap: anywhere;
}