@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0A0710;
  --bg-elevated: #120D1C;
  --bg-elevated-2: #1B1428;
  --bg-elevated-3: #251C36;
  --border: #2C2240;
  --text: #F3F1FA;
  --text-muted: #9C93B8;
  --accent: #9B7CF0;
  --accent-hover: #B39BF5;
  --accent-soft: rgba(155, 124, 240, 0.16);
  --danger: #E0596B;
  --radius: 12px;
  --radius-sm: 8px;
}

/* ---------- Couleurs d'accent alternatives (Profil > Apparence) ---------- */
[data-accent="blue"] {
  --accent: #5B9BF0; --accent-hover: #82B4F5; --accent-soft: rgba(91, 155, 240, 0.16);
}
[data-accent="green"] {
  --accent: #4FBE7A; --accent-hover: #72CE96; --accent-soft: rgba(79, 190, 122, 0.16);
}
[data-accent="orange"] {
  --accent: #F0A15B; --accent-hover: #F5B982; --accent-soft: rgba(240, 161, 91, 0.16);
}
[data-accent="pink"] {
  --accent: #F05BAA; --accent-hover: #F582C0; --accent-soft: rgba(240, 91, 170, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100%;
}

/* ---------- Ambiance de fond (violet profond, avec un peu de vie) ---------- */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(155,124,240,0.14), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(224,89,150,0.06), transparent 40%),
    radial-gradient(circle at 25% 90%, rgba(90,140,246,0.08), transparent 42%);
  animation: bgDrift 22s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(2%,-1.5%) scale(1.05); }
  100% { transform: translate(-1.5%,2%) scale(0.98); }
}
.sidenav, .content { position: relative; z-index: 1; }

.hidden { display: none !important; }

* { scrollbar-width: thin; scrollbar-color: var(--bg-elevated-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bg-elevated-3); border-radius: 8px; }

/* ---------- Écran de connexion ---------- */
.connect-screen {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.connect-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.connect-ambient-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
  animation: connectDrift 16s ease-in-out infinite alternate;
}
.blob-1 { width: 480px; height: 480px; top: -10%; left: -8%; background: #7C3AED; }
.blob-2 { width: 420px; height: 420px; bottom: -12%; right: -6%; background: #5B21B6; animation-delay: -5s; }
.blob-3 { width: 320px; height: 320px; top: 40%; left: 60%; background: #C4A6FF; opacity: 0.25; animation-delay: -10s; }
@keyframes connectDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.08); }
}

.connect-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: rgba(24, 17, 38, 0.55);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 22px;
  padding: 40px 36px 36px;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08);
}
.connect-logo {
  width: 56px; height: 56px; margin: 0 auto 20px;
  filter: drop-shadow(0 8px 20px rgba(124,58,237,0.5));
}
.connect-logo svg { width: 100%; height: 100%; }
.connect-logo.real-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 20%; }

/* Logo de l'écran de chargement : plus grand, avec un vrai effet de profondeur 3D */
.boot-logo-3d {
  width: 108px; height: 108px; margin: 0 auto 28px;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,0.55)) drop-shadow(0 4px 10px rgba(124,58,237,0.5));
  animation: logoFloat3d 4.5s ease-in-out infinite;
}
.boot-logo-3d img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 22%;
  transform: perspective(700px) rotateX(8deg) rotateY(-10deg);
  box-shadow:
    -6px 10px 0 -2px rgba(0,0,0,0.15),
    0 2px 0 rgba(255,255,255,0.25) inset,
    0 -10px 20px rgba(0,0,0,0.35) inset;
}
@keyframes logoFloat3d {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.2deg); }
}
.brand-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; text-align: center; }
.brand-sub { color: var(--text-muted); margin: 0 0 30px; font-size: 13.5px; text-align: center; }

#connect-form label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-bottom: 16px; }
.input-icon-wrap { position: relative; margin-top: 7px; }
.input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-muted); pointer-events: none;
}
#connect-form input[type="text"], #connect-form input[type="password"] {
  display: block; width: 100%; padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14.5px; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#connect-form input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.06); }
#f-password { padding-right: 40px; }
.input-icon-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.input-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.input-icon-btn svg { width: 17px; height: 17px; }

.checkbox-row { display: flex !important; align-items: center; gap: 9px; margin: 4px 0 24px; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.checkbox-row span { font-size: 13px; color: var(--text-muted); }
#connect-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #1E1533; font-weight: 600; font-size: 14.5px;
  cursor: pointer; font-family: inherit; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 30px -10px rgba(155,124,240,0.6);
}
#connect-btn:hover { background: var(--accent-hover); box-shadow: 0 12px 34px -8px rgba(155,124,240,0.75); }
#connect-btn:active { transform: scale(0.98); }
#connect-btn:disabled { opacity: 0.55; cursor: wait; }
.error-msg { color: var(--danger); font-size: 13px; line-height: 1.55; margin-top: 14px; }

@media (max-width: 480px) {
  .connect-card { padding: 32px 24px 28px; }
  .brand-title { font-size: 26px; }
}

/* ---------- Écran de chargement initial (barre de progression) ---------- */
#boot-loading { transition: opacity 0.4s ease; }
#boot-loading.fade-out { opacity: 0; }
.boot-loading-card {
  position: relative; z-index: 2; width: 100%; max-width: 460px; text-align: center;
}
.boot-loading-card .connect-logo { margin-bottom: 14px; }
.boot-loading-track {
  position: relative;
  width: 100%; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 18px; box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}
.boot-loading-bar {
  height: 100%; width: 0%; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, #FF5F6D, #FFC371, #4FD97F, #5B9BF0, #C371F5);
  background-size: 300% auto; animation: rainbowShift 4s linear infinite;
  box-shadow: 0 0 20px rgba(155,124,240,0.8);
  transition: width 0.12s linear;
}
.boot-loading-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  width: 40%; animation: bootBarShine 1.6s ease-in-out infinite;
}
@keyframes bootBarShine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(350%); }
}
.boot-loading-pct {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
@keyframes rainbowShift { to { background-position: 300% center; } }
.boot-loading-step {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--text); margin: 0; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0.85;
}

/* Étoiles filantes et champ d'étoiles derrière le flou de l'écran de chargement */
.shooting-star {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(255,255,255,0.85); opacity: 0; z-index: 0;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.5);
}
.star-1 { top: 18%; left: 8%; animation: shootStar 6s ease-in infinite; animation-delay: 0.2s; }
.star-2 { top: 62%; left: 78%; animation: shootStar 7.5s ease-in infinite; animation-delay: 2.4s; }
.star-3 { top: 32%; left: 55%; animation: shootStar 5.5s ease-in infinite; animation-delay: 4.1s; }
.star-4 { top: 78%; left: 20%; animation: shootStar 8s ease-in infinite; animation-delay: 1.2s; }
.star-5 { top: 10%; left: 70%; animation: shootStar 6.8s ease-in infinite; animation-delay: 3.3s; }
.star-6 { top: 45%; left: 12%; animation: shootStar 7s ease-in infinite; animation-delay: 5.2s; }
.star-7 { top: 24%; left: 88%; animation: shootStar 6.3s ease-in infinite; animation-delay: 0.8s; }
.star-8 { top: 88%; left: 60%; animation: shootStar 8.4s ease-in infinite; animation-delay: 3.9s; }
.star-9 { top: 55%; left: 35%; animation: shootStar 5.8s ease-in infinite; animation-delay: 6.1s; }
.star-10 { top: 6%; left: 40%; animation: shootStar 7.8s ease-in infinite; animation-delay: 2s; }
@keyframes shootStar {
  0% { opacity: 0; transform: translate(0, 0); }
  4% { opacity: 1; }
  22% { opacity: 0; transform: translate(-420px, 220px); }
  100% { opacity: 0; transform: translate(-420px, 220px); }
}
.star-field {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 65%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.4), transparent);
  background-repeat: no-repeat; opacity: 0.8;
  animation: starTwinkle 3.5s ease-in-out infinite alternate;
}
@keyframes starTwinkle { from { opacity: 0.4; } to { opacity: 0.9; } }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

.sidenav-hover-trigger {
  display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 16px; z-index: 998;
}

.sidenav {
  position: relative; z-index: 1;
  width: 208px; flex-shrink: 0;
  background: rgba(18, 13, 28, 0.62);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.08); padding: 24px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transform: perspective(1400px) rotateY(0.6deg) translateX(0);
  box-shadow: 10px 0 30px -18px rgba(0,0,0,0.6);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dans les catégories qui profitent d'un maximum d'espace (TV en direct,
   Guide TV, Films, Séries), la barre se masque et ne réapparaît qu'au
   survol du bord gauche de l'écran. Partout ailleurs, elle reste affichée. */
body.sidenav-auto-hide .sidenav-hover-trigger { display: block; }
body.sidenav-auto-hide .sidenav {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 997;
  transform: perspective(1400px) rotateY(0.6deg) translateX(-100%);
  background: rgba(15, 10, 24, 0.68);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.10);
  box-shadow: 10px 0 40px -10px rgba(0,0,0,0.6);
}
body.sidenav-auto-hide:has(.sidenav-hover-trigger:hover) .sidenav,
body.sidenav-auto-hide:has(.sidenav:hover) .sidenav {
  transform: perspective(1400px) rotateY(0.6deg) translateX(0);
}
/* Le contenu se décale en même temps que la barre apparaît, pour ne jamais
   passer dessous (plus de titre coupé/superposé), et laisse aussi de la
   place en bas pour la mini-barre désormais pleine largeur. */
body.sidenav-auto-hide .content { padding-bottom: 78px; transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
body.sidenav-auto-hide:has(.sidenav-hover-trigger:hover) .content,
body.sidenav-auto-hide:has(.sidenav:hover) .content {
  margin-left: 208px;
}
.sidenav .logo {
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0;
  margin: 2px 6px 28px; display: flex; align-items: center; gap: 9px;
}
.logo::before {
  content: '';
  position: absolute;
  left: -16px; top: -18px; right: -16px; bottom: -18px;
  background: radial-gradient(circle at 30% 45%, rgba(139,92,246,0.38), transparent 70%);
  filter: blur(16px);
  z-index: -1;
  animation: smokeDrift 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes smokeDrift {
  0%   { transform: translate(0,0) scale(1); opacity: 0.9; }
  50%  { transform: translate(5px,-4px) scale(1.12); opacity: 1; }
  100% { transform: translate(-4px,3px) scale(0.94); opacity: 0.85; }
}
.logo-icon { width: 26px; height: 26px; flex-shrink: 0; }
.logo-icon svg { width: 100%; height: 100%; }
.logo-icon-3d {
  width: 34px; height: 34px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)) drop-shadow(0 2px 4px rgba(124,58,237,0.5));
  animation: logoFloat3d 4.5s ease-in-out infinite;
}
.logo-icon-3d img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 22%;
  transform: perspective(500px) rotateX(6deg) rotateY(-8deg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -6px 12px rgba(0,0,0,0.3) inset;
}
.logo-text-stack { display: flex; flex-direction: column; line-height: 1.2; }
.logo-text { color: #C4B5FD; text-shadow: 0 0 18px rgba(139,92,246,0.5); white-space: nowrap; font-size: 16px; }
.logo-sub { color: var(--text-muted); font-size: 10.5px; font-weight: 500; white-space: nowrap; letter-spacing: 0.02em; }

/* ---------- Étoiles animées en fond de toute l'application ---------- */
.app-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.nav-item {
  position: relative;
  background: none; border: none; color: var(--text-muted); text-align: left;
  padding: 12px 15px; border-radius: var(--radius-sm); font-size: 17px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: color 0.15s ease;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden; z-index: 0;
}
.nav-item::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--bg-elevated-2);
  border-radius: inherit;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), opacity 0.22s ease;
  z-index: -1;
}
.nav-item:hover::before { transform: scale(1); opacity: 1; }
.nav-item svg {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}
.nav-item[data-view="home"] svg,
.nav-item[data-view="favorites"] svg { fill: currentColor; stroke: none; }

/* Icônes fournies en image (PNG) : on les utilise comme masque pour qu'elles
   restent recolorables comme les icônes vectorielles (couleur du texte du
   bouton, y compris à l'état actif/survol). */
.icon-mask {
  display: inline-block; flex-shrink: 0;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask-image: var(--mask-src); mask-image: var(--mask-src);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.quick-dock-item .icon-mask { width: 20px; height: 20px; }

.nav-item:hover { color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 100%);
  color: var(--text); font-weight: 600;
}
.nav-item.active::before { display: none; }
.nav-item.active::after {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.nav-item svg {
  position: relative; z-index: 1; border-radius: 8px; padding: 3px; box-sizing: content-box;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-item .icon-mask { position: relative; z-index: 1; border-radius: 8px; padding: 3px; box-sizing: content-box; }
.nav-item.active svg { background: var(--accent); color: #1E1533; stroke: #1E1533; }
.nav-item.active[data-view="home"] svg,
.nav-item.active[data-view="favorites"] svg { fill: #1E1533; }
/* Les icônes en image (masque) utilisent déjà background-color pour se
   peindre elles-mêmes — impossible de réutiliser cette même propriété pour
   une puce de fond sans écraser la couleur de l'icône. On simule donc la
   puce avec un halo doux derrière, via un pseudo-élément séparé. */
.nav-item.active .icon-mask { background-color: #1E1533; }
.nav-item.active .icon-mask::after {
  content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 8px;
  background: var(--accent);
}

.content { flex: 1; padding: 36px 44px; overflow-y: auto; max-height: 100vh; }
.view { display: none; }
.view.active { display: block; }
.view-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.01em; }

.home-status {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 30px;
}
.home-status b { color: var(--text); }

/* ---------- À la une (accueil façon Netflix) ---------- */
.hero-card {
  position: relative;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.hero-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(1px) brightness(0.55);
}
.hero-overlay {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 34px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.15) 75%, transparent 100%);
}
.hero-tag {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 36px; font-weight: 700;
  color: #fff; margin: 0 0 10px; max-width: 70%; line-height: 1.2;
}
.hero-meta {
  font-size: 13.5px; font-weight: 500; color: #D8D8D8;
  margin: 0 0 12px; letter-spacing: 0.01em;
}
.hero-desc {
  font-size: 14px; line-height: 1.55; color: #C9C9C9;
  margin: 0 0 20px; max-width: 560px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-play-btn {
  align-self: flex-start;
  display: flex; align-items: center; gap: 9px;
  background: #fff; color: #111; border: none; border-radius: var(--radius-sm);
  padding: 11px 22px; font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.hero-play-btn svg { width: 15px; height: 15px; fill: #111; }
.hero-play-btn:hover { background: #e9e9e9; }

.hero-actions { display: flex; align-items: center; gap: 12px; }
.hero-shuffle-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #fff; backdrop-filter: blur(4px);
}
.hero-shuffle-btn svg { width: 18px; height: 18px; }
.hero-shuffle-btn:hover { background: rgba(255,255,255,0.22); }

/* ---------- Rangées horizontales (accueil) ---------- */
.home-rows { display: flex; flex-direction: column; gap: 30px; }
.home-row { position: relative; }
.home-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.home-row-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 600; margin: 0 0 14px;
}
.home-row-head .home-row-title { margin: 0; }
.row-clear-btn {
  background: none; border: none; color: var(--text-muted); font-size: 12.5px; font-family: inherit;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.row-clear-btn:hover { color: var(--danger); background: rgba(201,107,98,0.1); }

.home-row-scroll {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 4px 12px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--bg-elevated-3) transparent;
}
.home-row-scroll::-webkit-scrollbar { height: 8px; }
.home-row-scroll::-webkit-scrollbar-track { background: transparent; }
.home-row-scroll::-webkit-scrollbar-thumb { background: var(--bg-elevated-3); border-radius: 4px; }
.home-row-scroll:hover::-webkit-scrollbar-thumb { background: #3A3D46; }

/* Les cartes gardent une largeur fixe dans une rangée horizontale */
.home-row-scroll .card { flex: 0 0 150px; width: 150px; scroll-snap-align: start; }
.home-row-scroll .channel-card { flex: 0 0 150px; width: 150px; scroll-snap-align: start; }

.home-loading {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  color: var(--text-muted); font-size: 14px; padding: 40px 0;
}
.home-loading.hidden { display: none; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--bg-elevated-3); border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.subsection-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 600; margin: 0 0 16px;
}

#continue-section { position: relative; padding-bottom: 8px; }
.trash-fab {
  position: absolute; right: 0; bottom: -8px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.trash-fab svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trash-fab:hover { background: rgba(201,107,98,0.14); border-color: var(--danger); }
.trash-fab:hover svg { stroke: var(--danger); }

.danger-btn {
  background: rgba(201,107,98,0.14); color: var(--danger); border: 1px solid rgba(201,107,98,0.4);
  padding: 11px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background 0.15s ease;
}
.danger-btn:hover { background: rgba(201,107,98,0.24); }

.section-header { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-header .view-title { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.count-text { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15.5px; font-weight: 400; color: var(--text-muted); }

.new-badge-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.new-badge-toggle svg { width: 14px; height: 14px; }
.new-badge-toggle:hover { border-color: var(--accent); color: var(--text); }
.new-badge-toggle.active { background: var(--accent); border-color: var(--accent); color: #1E1533; }
.new-badge-toggle.active svg { color: #1E1533; }

/* ---------- Barre de recherche avec icône ---------- */
.search-bar-icon {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 16px; margin-bottom: 18px;
}
.search-bar-icon svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--text-muted); fill: none; stroke-width: 1.8; }
.search-bar-icon input {
  border: none; background: none; outline: none; color: var(--text); font-size: 14px; font-family: inherit; flex: 1;
}
.search-bar-icon input::placeholder { color: var(--text-muted); }

/* ---------- Groupes de filtres (libellé au-dessus du menu) ---------- */
.filter-groups { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 7px; min-width: 190px; }
.filter-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.filter-group select {
  padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.filter-group select:focus { outline: none; border-color: var(--accent); }

/* ---------- Bouton favori sur une carte chaîne ---------- */
.fav-btn {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.fav-btn svg { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2; }
.fav-btn:hover svg { stroke: var(--accent); }
.fav-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.fav-btn.active svg { fill: var(--accent); stroke: var(--accent); }

/* ---------- Catégories (résiduel, plus utilisé mais gardé pour compat) ---------- */
.category-row {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.category-chip {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px; background: var(--bg-elevated);
  border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.12s ease;
}
.category-chip:hover { color: var(--text); border-color: #3A3D46; }
.category-chip.active { background: var(--accent); border-color: var(--accent); color: #1E1533; font-weight: 600; }
.category-chips { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }

/* ---------- Grille générique (films / séries) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.card {
  cursor: pointer; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 32px -12px rgba(0,0,0,0.55); }
.card-thumb { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--bg-elevated-2); display: block; }
.card-label {
  padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border);
}

/* ---------- Cartes chaînes en direct (logos, pas des affiches) ---------- */
.channel-card {
  position: relative; cursor: pointer; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(155,124,240,0.16), transparent 60%),
    linear-gradient(155deg, var(--bg-elevated-2) 0%, var(--bg-elevated) 55%);
  border: 1px solid var(--border); padding: 20px 16px 16px; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.channel-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(255,255,255,0.14), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity 0.22s ease;
}
.channel-card:hover {
  transform: translateY(-6px) scale(1.035);
  border-color: rgba(155,124,240,0.5);
  box-shadow: 0 24px 44px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(155,124,240,0.2), 0 0 28px -8px rgba(155,124,240,0.5);
}
.channel-card:hover::before { opacity: 1; }
.channel-live-dot {
  position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 3px rgba(201,107,98,0.18);
}
.channel-logo-plate {
  width: 100%; height: 72px; border-radius: 10px;
  background: linear-gradient(155deg, #F4F1FA, #E4DEF2);
  display: flex; align-items: center; justify-content: center; padding: 10px 14px;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.22s ease;
}
.channel-card:hover .channel-logo-plate { transform: scale(1.04); }
.channel-logo-plate.no-logo { background: linear-gradient(155deg, var(--bg-elevated-3), var(--bg-elevated-2)); }
.channel-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.channel-name {
  font-size: 14.5px; font-weight: 500; text-align: center; color: var(--text); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.empty-msg { color: var(--text-muted); font-size: 14px; padding: 20px 0; }

.search-input {
  width: 100%; max-width: 440px; padding: 13px 16px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font-size: 14.5px; margin-bottom: 26px; font-family: inherit;
}
.search-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Lecteur vidéo ---------- */
.player-overlay { position: fixed; inset: 0; background: #000; z-index: 100; display: flex; flex-direction: column; }
.player-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  color: var(--text); font-size: 13.5px; font-weight: 500;
  background: linear-gradient(180deg, rgba(10,7,16,0.55) 0%, rgba(10,7,16,0.22) 70%, transparent 100%);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: opacity 0.2s ease;
}
.player-topbar-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.player-topbar-actions .icon-round-btn { width: 37px; height: 37px; }
.player-topbar-actions .icon-round-btn svg { width: 18px; height: 18px; stroke-width: 2.1; shape-rendering: geometricPrecision; }
.player-title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; margin-right: 16px; }
.player-title-block #player-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

.player-epg { display: flex; flex-direction: column; gap: 3px; max-width: 460px; }
.player-epg.hidden { display: none; }
.player-epg-now {
  font-size: 12px; color: var(--accent-hover); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-epg-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.player-epg-progress span { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.6s linear; }
.player-epg-next {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Effet "verre liquide" : reflet diagonal + lueur violette ---------- */
.icon-round-btn, .round-btn, .glass-btn, .mosaic-tile-expand, .mosaic-tile-remove, .channel-preview-close {
  position: relative; isolation: isolate;
}
.icon-round-btn::before, .round-btn::before, .glass-btn::before,
.mosaic-tile-expand::before, .mosaic-tile-remove::before, .channel-preview-close::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.icon-round-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(155,124,240,0.12), inset 0 1px 0 rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); background: transparent;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
/* Le flou (verre liquide) vit sur une couche séparée, en dessous de l'icône —
   ainsi le filtre ne peut jamais adoucir le rendu de l'icône elle-même. */
.icon-round-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: rgba(155, 124, 240, 0.24);
  backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%);
  transition: background 0.15s ease;
}
.icon-round-btn svg { position: relative; z-index: 1; shape-rendering: geometricPrecision; }
.icon-round-btn svg { width: 20px; height: 20px; fill: var(--text); }
/* Les icônes en traits fins (elles ont toutes stroke="currentColor" sur la
   balise <svg>) ne doivent jamais être remplies en plein — seul le cœur des
   favoris (sans attribut stroke) doit rester une forme pleine. */
.icon-round-btn svg[stroke] { fill: none; }
.icon-round-btn:hover {
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 20px rgba(155,124,240,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.icon-round-btn:hover::before { background: rgba(155, 124, 240, 0.38); }
.icon-round-btn:active { transform: scale(0.94); }
#player-fav.active::before { background: var(--accent-soft); }
#player-fav.active { border-color: var(--accent); }
#player-fav.active svg { fill: var(--accent); stroke: var(--accent); }
#player-close {
  background: rgba(155, 124, 240, 0.2);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.16); color: #fff;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: background 0.15s ease, transform 0.1s ease;
}
#player-close:hover { background: rgba(155, 124, 240, 0.32); }
#player-close:active { transform: scale(0.96); }
#video { flex: 1; width: 100%; height: 100%; min-height: 0; background: #000; object-fit: contain; }

/* ---------- Vrai plein écran : la barre du haut s'estompe quand inactive ---------- */
.player-overlay:not(.controls-visible) .player-topbar { opacity: 0; pointer-events: none; }
.player-overlay.fullscreen-active .player-controls { top: 0; }

/* ---------- Barre de contrôle personnalisée ---------- */
.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, transparent 34%, transparent 66%, rgba(0,0,0,0.3) 100%);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.player-controls.visible { opacity: 1; pointer-events: auto; }

.player-center-row {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  flex: 1;
}
.round-btn {
  background: rgba(155, 124, 240, 0.16);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: 50%;
  color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; gap: 1px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.round-btn svg { width: 28px; height: 28px; fill: #fff; }
.round-btn span { font-size: 9.5px; font-weight: 600; margin-top: -4px; }
.round-btn.big {
  width: 84px; height: 84px; background: rgba(155, 124, 240, 0.3);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 40px rgba(155,124,240,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
}
.round-btn.big:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 55px rgba(155,124,240,0.45), inset 0 1px 0 rgba(255,255,255,0.22); }
.round-btn.big svg { width: 36px; height: 36px; }
.round-btn:hover { background: rgba(155, 124, 240, 0.28); border-color: rgba(255,255,255,0.24); }
.round-btn:active { transform: scale(0.94); }
.round-btn.hidden { display: none; }

.player-controls.is-live .round-btn:not(.big) { display: none; }
/* En direct : la barre reste (pour le volume), mais on cache progression + vitesse */
.player-controls.is-live #player-seek,
.player-controls.is-live #player-current-time,
.player-controls.is-live #player-duration,
.player-controls.is-live #player-speed { display: none; }
.player-controls.is-live .player-volume { margin-right: auto; }

.player-bottom-bar {
  display: flex; align-items: center; gap: 14px;
  color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(20, 14, 32, 0.5);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-bottom-bar > input[type="range"]#player-seek {
  flex: 1; height: 4px; border-radius: 2px; accent-color: var(--accent); cursor: pointer;
}

/* ---------- Contrôle du volume ---------- */
.player-volume { display: flex; align-items: center; gap: 6px; }
.player-volume .icon-round-btn.small { width: 38px; height: 38px; flex: 0 0 38px; }
.player-volume .icon-round-btn.small svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
.volume-slider {
  width: 84px; height: 4px; border-radius: 2px; accent-color: var(--accent); cursor: pointer;
  transition: filter 0.15s ease;
}
.volume-slider:hover, #player-seek:hover { filter: drop-shadow(0 0 6px rgba(155,124,240,0.55)); }

/* ---------- Détail série ---------- */
.series-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 90; overflow-y: auto; }
.series-overlay-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 590px 28px 60px; }
.series-plot { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 32px; max-width: 640px; }
.season-block { margin-bottom: 26px; }
.season-block h3 { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 12px; }
.episode-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.episode-row:hover { border-color: var(--accent); background: var(--bg-elevated-2); }
.episode-num {
  flex: 0 0 22px; text-align: center; color: var(--text-muted); font-weight: 700; font-size: 14px;
}
.episode-thumb {
  flex: 0 0 108px; width: 108px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--bg-elevated-3);
}
.episode-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.episode-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.episode-duration { font-size: 12px; color: var(--text-muted); }
.episode-download-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.episode-download-btn svg { width: 15px; height: 15px; }
.episode-download-btn:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }

/* ---------- États de téléchargement : anneau de progression, réussite, échec ---------- */
.episode-download-btn.is-downloading {
  --dl-pct: 0%;
  background: conic-gradient(var(--accent) var(--dl-pct), var(--bg-elevated-3) 0);
  border-color: transparent; color: var(--text); cursor: pointer;
  position: relative;
}
.episode-download-btn.is-downloading::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
  animation: dlSpin 0.8s linear infinite;
}
.episode-download-btn.is-downloading svg { display: none; }
.episode-download-btn.is-downloading::after {
  content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated);
}
.episode-download-btn.is-downloading:hover::before { animation-play-state: paused; opacity: 0.4; }
.episode-download-btn.is-downloading:hover::after { content: '✕'; font-size: 12px; font-weight: 700; color: var(--danger); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; }
@keyframes dlSpin { to { transform: rotate(360deg); } }
.episode-download-btn.dl-done { background: var(--accent); border-color: var(--accent); color: #1E1533; cursor: default; }
.episode-download-btn.dl-done svg { display: none; }
.episode-download-btn.dl-done::after { content: '✓'; font-size: 14px; font-weight: 700; }
.episode-download-btn.dl-error { background: rgba(224, 89, 107, 0.22); border-color: var(--danger); color: var(--danger); cursor: default; }
.episode-download-btn.dl-error svg { display: none; }
.episode-download-btn.dl-error::after { content: '!'; font-size: 15px; font-weight: 800; }
.episode-download-btn.dl-cancelled { background: var(--bg-elevated-3); border-color: var(--border); color: var(--text-muted); cursor: default; }
.episode-download-btn.dl-cancelled svg { display: none; }
.episode-download-btn.dl-cancelled::after { content: '–'; font-size: 16px; font-weight: 800; }

.download-btn.is-downloading, .download-row-again.is-downloading {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); cursor: pointer;
}
.download-btn.dl-done, .download-row-again.dl-done { background: var(--accent); border-color: var(--accent); color: #1E1533; }
.download-btn.dl-error, .download-row-again.dl-error { background: rgba(224, 89, 107, 0.16); border-color: var(--danger); color: var(--danger); }
.download-btn:disabled, .download-row-again:disabled { opacity: 1; }

.episode-play-icon {
  flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.episode-row:hover .episode-play-icon { color: var(--accent); }
.episode-play-icon svg { width: 26px; height: 26px; }

@media (max-width: 640px) {
  .episode-thumb { display: none; }
}

/* ---------- Mini-barre flottante de navigation rapide ---------- */
/* Visible uniquement quand la barre latérale est en mode auto-masqué
   (Films, Séries, TV en direct, Guide TV) — permet de changer de section
   sans devoir ramener le curseur tout à gauche. */
.quick-dock {
  position: fixed; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 6px)); z-index: 45;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px;
  background: rgba(20, 14, 32, 0.72);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 22px;
  box-shadow: 0 20px 50px -14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
body.sidenav-auto-hide .quick-dock {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.quick-dock-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 76px; padding: 8px 4px; border-radius: 12px; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, transform 0.1s ease;
}
.quick-dock-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; shape-rendering: geometricPrecision; transition: filter 0.15s ease; }
.quick-dock-item[data-view="home"] svg,
.quick-dock-item[data-view="favorites"] svg { fill: currentColor; stroke: none; }
.quick-dock-item span { font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.quick-dock-item:hover { color: var(--text); }
.quick-dock-item:active { transform: scale(0.94); }
.quick-dock-item.active { color: var(--accent); }
.quick-dock-item.active svg,
.quick-dock-item.active .icon-mask { filter: drop-shadow(0 0 6px rgba(155,124,240,0.6)); }
.quick-dock-item.active span::after {
  content: ''; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin: 4px auto 0; box-shadow: 0 0 6px var(--accent);
}

@media (max-width: 720px) {
  .quick-dock { padding: 8px 6px; gap: 0; justify-content: flex-start; overflow-x: auto; max-width: calc(100vw - 24px); }
  .quick-dock-item { width: 58px; padding: 6px 2px; flex-shrink: 0; }
  .quick-dock-item span { font-size: 9.5px; }
}

/* ---------- Fiche film / série : affiche flottante, badges, crédits ---------- */
.fiche-poster {
  position: absolute; z-index: 2; top: 92px; right: 40px;
  width: 150px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.7);
}
.fiche-meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.fiche-pill {
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
}
.fiche-credits { font-size: 13px; color: var(--text-muted); margin: 0 0 6px; max-width: 640px; }

.download-btn { display: inline-flex; align-items: center; gap: 8px; }
.download-btn svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .fiche-poster { display: none; }
}

/* ---------- Téléchargements ---------- */
.downloads-list { display: flex; flex-direction: column; gap: 4px; max-width: 680px; }
.downloads-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.downloads-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 14px;
}
.download-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.download-row:hover { border-color: rgba(155,124,240,0.4); transform: translateY(-1px); }
.download-row.is-downloading { border-color: var(--danger); }
.download-row.is-downloading::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px;
  width: var(--dl-pct, 0%); background: var(--danger);
  transition: width 0.2s ease; box-shadow: 0 0 10px rgba(224,89,107,0.6);
}
/* Quand le fournisseur ne donne pas la taille totale du fichier, impossible
   de calculer un vrai %  — une barre qui glisse indique quand même
   clairement que le téléchargement avance, au lieu de sembler figé. */
.download-row.is-downloading.indeterminate::before {
  width: 30%; animation: dlIndeterminate 1.3s ease-in-out infinite;
}
@keyframes dlIndeterminate {
  0% { left: -30%; }
  100% { left: 100%; }
}

.download-row-poster-wrap {
  position: relative; flex: 0 0 56px; width: 56px; height: 84px; border-radius: 6px;
  overflow: hidden; background: var(--bg-elevated-3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.6);
}
.download-row-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.download-row-fallback-icon { display: none; width: 20px; height: 20px; color: var(--accent); }
.download-row.no-poster .download-row-fallback-icon { display: block; }
.download-row.no-poster .download-row-poster-wrap { background: var(--accent-soft); }

.download-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.download-row-name {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.download-row-date { font-size: 12.5px; color: var(--text-muted); }
.download-row-again { flex: 0 0 auto; white-space: nowrap; }
.download-row-cancel { flex: 0 0 auto; white-space: nowrap; }

/* ---------- Fiche film / série : affiche + bande-annonce en fond ---------- */
.ambient-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center 25%;
  filter: blur(70px) saturate(170%) brightness(0.42);
  transform: scale(1.2);
  opacity: 0; transition: opacity 1s ease;
}
.ambient-bg.visible { opacity: 1; }
.movie-overlay-inner { position: relative; min-height: 100%; }
/* Couche sombre dédiée derrière le texte du résumé/casting : garantit une
   bonne lisibilité quelle que soit la couleur dominante de l'affiche
   (certaines affiches très claires rendraient sinon le texte blanc illisible).
   Placée sur le conteneur non flouté pour rester bien nette. */
.movie-overlay-inner::after,
#series-overlay::after {
  content: ''; position: absolute; left: 0; right: 0; top: 500px; bottom: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(6,4,10,0.55) 12%, rgba(6,4,10,0.74) 100%);
}
.movie-backdrop {
  position: absolute; top: 0; left: 0; width: 100%; height: 560px;
  object-fit: cover; object-position: center 22%; filter: brightness(0.92); z-index: 0;
  transform: scale(1.03);
  transition: filter 0.6s ease, transform 0.6s ease;
}
/* Pendant la lecture de la bande-annonce, l'affiche (visible sur les côtés
   de la vidéo, désormais au bon format 16:9) se floute pour se fondre au
   lieu de rester nette et contrastée à côté de la vidéo. */
.movie-overlay-inner:has(.movie-trailer-frame.visible) .movie-backdrop,
#series-overlay:has(.movie-trailer-frame.visible) #series-backdrop {
  filter: brightness(0.75) blur(26px) saturate(130%);
  transform: scale(1.08);
}
.movie-trailer-frame {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(995px, 100%); aspect-ratio: 16 / 9; z-index: 1;
  overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.9s ease;
}
.movie-trailer-frame.visible { opacity: 1; }
.movie-trailer-frame iframe {
  display: block; width: 100%; height: 114%; border: 0;
  position: relative; top: -14%;
}
.movie-backdrop-fade {
  position: absolute; top: 0; left: 0; width: 100%; height: 560px; z-index: 2;
  background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 10%, rgba(10,7,16,0.6) 25%, transparent 48%, transparent 100%);
}

.overlay-close-btn {
  position: fixed; z-index: 999;
  top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left));
}

/* ---------- Qualité du flux ---------- */
.player-quality-wrap { position: relative; }
.player-quality-menu {
  position: absolute; top: 44px; right: 0; z-index: 10; width: 260px;
  background: rgba(24, 17, 38, 0.85);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
  padding: 14px; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-quality-current { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.player-quality-current b { color: var(--text); font-weight: 600; }
.player-quality-option {
  display: block; width: 100%; text-align: left; padding: 9px 12px; margin-bottom: 4px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 0.12s ease;
}
.player-quality-option:hover { background: var(--bg-elevated-2); }
.player-quality-option.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: 600; }
.player-quality-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 0; }

.trailer-volume-group {
  position: absolute; z-index: 3; top: 24px; right: 24px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(155, 124, 240, 0.16);
  backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
  border-radius: 999px; padding: 6px 14px 6px 6px;
}
.trailer-volume-group .icon-round-btn.small {
  background: transparent; border: none; box-shadow: none;
  width: 32px; height: 32px;
}
.trailer-volume-group .icon-round-btn.small::before { display: none; }
.trailer-volume-group .icon-round-btn.small svg { stroke: var(--text); }
.trailer-volume-group.muted .icon-round-btn.small svg { stroke: var(--accent-hover); }
.trailer-volume-slider {
  width: 90px; height: 4px; border-radius: 2px; accent-color: var(--accent); cursor: pointer;
}

.movie-overlay-body { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 590px 28px 60px; }
#movie-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 34px; margin: 0 0 8px; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.movie-meta { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; }
.movie-plot { max-width: 640px; }
.movie-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }

.movie-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.movie-title-row h2 { margin: 0; }
.tmdb-rating {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(230, 184, 0, 0.14); border: 1px solid rgba(230, 184, 0, 0.35);
  color: #F0C93D; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.tmdb-rating svg { width: 13px; height: 13px; }
#series-overlay-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
#movie-fav-btn.active { background: var(--accent-soft); border-color: var(--accent); }
#movie-fav-btn.active svg { fill: var(--accent); stroke: var(--accent); }
#movie-fav-btn svg { width: 15px; height: 15px; fill: none; stroke: var(--text-muted); stroke-width: 2; }

@media (max-width: 640px) {
  .movie-backdrop, .movie-backdrop-fade { height: 300px; }
  .movie-overlay-body, .series-overlay-inner { padding-top: 320px; }
  #movie-title { font-size: 26px; }
}

/* ---------- Boutons secondaires génériques ---------- */
.secondary-btn {
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.secondary-btn:hover { background: var(--bg-elevated-3); }
.secondary-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.icon-round-btn.small { width: 36px; height: 36px; }
.icon-round-btn.small svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; }
.icon-round-btn.small:hover svg { stroke: var(--danger); }

/* ---------- Profil : bannière d'expiration ---------- */
.expiry-banner {
  background: rgba(242,169,59,0.12); border: 1px solid rgba(242,169,59,0.4); color: var(--accent);
  padding: 13px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
  margin-bottom: 22px; max-width: 480px;
}
.expiry-banner.expired { background: rgba(201,107,98,0.12); border-color: rgba(201,107,98,0.4); color: var(--danger); }

/* ---------- Profil : comptes enregistrés ---------- */
.profile-section { margin-top: 34px; max-width: 480px; }

/* ---------- Profil : sous-navigation façon Réglages ---------- */
.settings-shell { display: flex; gap: 36px; align-items: flex-start; margin-top: 24px; }
.settings-subnav { display: flex; flex-direction: column; gap: 2px; flex: 0 0 220px; }
.settings-subnav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: none; border: none; color: var(--text-muted); font-size: 14.5px; font-weight: 500;
  font-family: inherit; cursor: pointer; text-align: left; transition: background 0.12s ease, color 0.12s ease;
}
.settings-subnav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.settings-subnav-item:hover { color: var(--text); background: var(--bg-elevated); }
.settings-subnav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-panels { flex: 1; min-width: 0; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: settingsFadeIn 0.18s ease; }
@keyframes settingsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.accent-color-picker { display: flex; gap: 14px; margin-top: 6px; }
.accent-swatch {
  width: 38px; height: 38px; border-radius: 50%; background: var(--swatch);
  border: 2px solid transparent; cursor: pointer; position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--swatch); }

.contact-coming-soon { text-align: center; padding: 50px 20px; }
.coming-soon-badge {
  display: inline-block; margin: 18px 0 10px; padding: 7px 20px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.contact-handle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }


@media (max-width: 760px) {
  .settings-shell { flex-direction: column; gap: 20px; }
  .settings-subnav { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .settings-subnav-item { flex: 1 1 auto; justify-content: center; padding: 10px 8px; font-size: 13px; }
}

.profile-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 10px;
}
.profile-row-info { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.profile-row-info span { color: var(--text-muted); font-size: 12.5px; }
.profile-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.add-profile-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px;
}
.add-profile-form input {
  padding: 10px 12px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.add-profile-form input:focus { outline: none; border-color: var(--accent); }
.add-profile-form button[type="submit"] {
  align-self: flex-start; background: var(--accent); color: #1E1533; border: none;
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ---------- Mode mosaïque : lecture ---------- */
.mosaic-overlay { position: fixed; inset: 0; background: #000; z-index: 110; display: flex; flex-direction: column; }
.mosaic-topbar {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 22px;
  color: var(--text); font-size: 14px; font-weight: 500;
  background: rgba(20, 14, 32, 0.65);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.mosaic-topbar button {
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
}
.glass-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: rgba(155, 124, 240, 0.16);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.glass-btn svg { width: 20px; height: 20px; }
.glass-btn:hover { background: rgba(155, 124, 240, 0.28); border-color: rgba(255,255,255,0.24); }
.glass-btn:active { transform: scale(0.94); }

.mosaic-grid {
  flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr; gap: 6px; padding: 6px; background: #000;
}

/* Dispositions précises selon le nombre de vignettes */
.mosaic-grid.layout-grid.tiles-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mosaic-grid.layout-grid.tiles-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic-grid.layout-grid.tiles-3 > :nth-child(1) { grid-column: 1; grid-row: 1; }
.mosaic-grid.layout-grid.tiles-3 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.mosaic-grid.layout-grid.tiles-3 > :nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.mosaic-grid.layout-grid.tiles-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.mosaic-tile {
  position: relative; background: #0c0c0c; cursor: pointer; border: 2px solid transparent;
  border-radius: 8px; overflow: hidden; min-width: 0; min-height: 0;
}
.mosaic-tile.active-audio { border-color: var(--accent); }
.mosaic-tile video { width: 100%; height: 100%; object-fit: cover; background: #0c0c0c; display: block; }

.mosaic-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); color: #fff; font-size: 12.5px; font-weight: 500;
}
.mosaic-tile-sound-icon { display: none; flex: 0 0 auto; width: 13px; height: 13px; color: var(--accent-hover); }
.mosaic-tile.active-audio .mosaic-tile-sound-icon { display: inline-block; }
.mosaic-tile-actions {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px;
}
.mosaic-tile-expand, .mosaic-tile-remove {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(155, 124, 240, 0.22);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.mosaic-tile-expand svg { width: 17px; height: 17px; }
.mosaic-tile-expand:hover { background: var(--accent); color: #1E1533; }
.mosaic-tile-remove:hover { background: rgba(224, 89, 107, 0.85); }
.mosaic-tile-expand:active, .mosaic-tile-remove:active { transform: scale(0.92); }
.mosaic-tile.add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(155, 124, 240, 0.06); border: 2px dashed rgba(155, 124, 240, 0.35); color: var(--text-muted);
}
.mosaic-tile.add-tile:hover { border-color: var(--accent); color: var(--accent); background: rgba(155, 124, 240, 0.1); }
.mosaic-tile.add-tile svg { width: 38px; height: 38px; }
.mosaic-tile.add-tile span { font-size: 14.5px; font-weight: 500; }

.mosaic-tile-status {
  position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; background: #0c0c0c; color: var(--text-muted);
  font-size: 12px; text-align: center; padding: 12px;
}
.mosaic-tile.is-loading .mosaic-tile-status,
.mosaic-tile.has-error .mosaic-tile-status { display: flex; }
.mosaic-tile-status .spinner { width: 20px; height: 20px; }
.mosaic-tile.has-error .mosaic-tile-status { color: var(--danger); }

.mosaic-empty-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-muted); font-size: 14px; pointer-events: none;
}

/* ---------- Mosaïque : panneau de sélection d'une chaîne ---------- */
.mosaic-picker {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.mosaic-picker-inner {
  width: 100%; max-width: 420px; max-height: 70vh;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}
.mosaic-picker-header { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.mosaic-picker-header input {
  flex: 1; padding: 10px 12px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.mosaic-picker-header input:focus { outline: none; border-color: var(--accent); }
.mosaic-picker-header button {
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px;
}
.mosaic-picker-filters { display: flex; gap: 8px; padding: 0 14px 12px; }
.mosaic-picker-filters select {
  flex: 1; padding: 8px 10px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.mosaic-picker-filters select:focus { outline: none; border-color: var(--accent); }
.mosaic-picker-list { overflow-y: auto; padding: 8px; }
.mosaic-picker-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.mosaic-picker-row:hover { background: var(--bg-elevated-2); }
.mosaic-picker-row img { width: 32px; height: 32px; object-fit: contain; background: var(--bg-elevated-3); border-radius: 4px; }
.mosaic-picker-row span { font-size: 13.5px; color: var(--text); }

/* ---------- Vitesse de lecture ---------- */
.speed-btn {
  background: rgba(20,20,20,0.55); border: none; color: #fff; border-radius: 6px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.speed-btn:hover { background: rgba(40,40,40,0.75); }

/* ---------- Reprise de lecture ---------- */
.resume-prompt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  background: rgba(24, 17, 38, 0.6);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: 22px 28px; text-align: center; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
}
.resume-prompt p { margin: 0 0 16px; font-size: 15px; color: var(--text); }
.resume-actions { display: flex; gap: 10px; justify-content: center; }
.resume-actions button {
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; border: none;
}
#resume-yes { background: var(--accent); color: #1E1533; }
#resume-no { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); }

.up-next {
  position: absolute; right: 24px; bottom: 90px; z-index: 5; width: 300px;
  background: rgba(24, 17, 38, 0.6);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
}
.up-next-label { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.up-next-title { margin: 0 0 14px; font-size: 14.5px; color: var(--text); font-weight: 500; }
.up-next-actions { display: flex; gap: 10px; }
.up-next-actions button {
  flex: 1; padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; border: none;
}
#up-next-cancel { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); }
#up-next-play { background: var(--accent); color: #1E1533; }
@media (max-width: 640px) {
  .up-next { left: 16px; right: 16px; width: auto; bottom: 100px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .sidenav-hover-trigger,
  body.sidenav-auto-hide .sidenav-hover-trigger { display: none; }
  .sidenav,
  body.sidenav-auto-hide .sidenav {
    position: relative; left: auto; top: auto; bottom: auto; transform: none; box-shadow: none;
    width: 100%; flex-direction: row; overflow-x: auto; padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-top: max(12px, env(safe-area-inset-top));
    border-right: none; border-bottom: 1px solid var(--border); align-items: center;
  }
  .sidenav .logo { display: none; }
  .nav-item { flex-shrink: 0; }
  .content,
  body.sidenav-auto-hide .content {
    margin-left: 0 !important;
    padding: 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }

  .hero-card { height: 210px; margin-bottom: 30px; }
  .hero-title { font-size: 24px; max-width: 90%; }
  .hero-desc { display: none; }
  .hero-overlay { padding: 20px; }

  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filter-groups { gap: 12px; }
  .filter-group { min-width: 140px; flex: 1; }

  .player-topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .player-topbar-actions .icon-round-btn { width: 42px; height: 42px; }
  .player-topbar-actions .icon-round-btn svg { width: 19px; height: 19px; }
  .quick-dock-item { min-height: 44px; }
  .player-topbar-actions { gap: 6px; }
  .mosaic-topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .round-btn.big { width: 62px; height: 62px; }
  .round-btn.big svg { width: 26px; height: 26px; }
  .round-btn { width: 46px; height: 46px; }
  .player-center-row { gap: 22px; }
  .player-bottom-bar { flex-wrap: wrap; }

  .mosaic-picker-inner { max-width: 92vw; }
}

/* ---------- Zapping : boutons chaîne précédente / suivante ---------- */
.player-controls .zap-btn { display: none; }
.player-controls.is-live .zap-btn { display: inline-flex; }

/* ---------- Panneau de sélection des chaînes (dans le lecteur) ---------- */
.channel-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 12;
  width: 340px; max-width: 88vw;
  background: rgba(13, 13, 15, 0.96);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -20px rgba(0, 0, 0, 0.8);
  animation: channelPanelIn 0.18s ease-out;
}
.channel-panel.hidden { display: none; }
@keyframes channelPanelIn {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.channel-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
}
.channel-panel-header span {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
}
.channel-panel-header button {
  background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1;
}
.channel-panel-header button:hover { color: var(--text); background: var(--bg-elevated-3); }
.channel-panel-search { padding: 12px 14px 8px; }
.channel-panel-search input {
  width: 100%; padding: 9px 12px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.channel-panel-search input:focus { outline: none; border-color: var(--accent); }
.channel-panel-filters { display: flex; gap: 8px; padding: 0 14px 10px; }
.channel-panel-filters select {
  flex: 1; min-width: 0; padding: 7px 9px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer;
}
.channel-panel-filters select:focus { outline: none; border-color: var(--accent); }
.channel-panel-list { flex: 1; overflow-y: auto; padding: 6px 8px 14px; }
.channel-row {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
}
.channel-row:hover { background: var(--bg-elevated-2); }
.channel-row img {
  width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain;
  background: var(--bg-elevated-3); border-radius: 5px;
}
.channel-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.channel-row-name {
  font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel-row-epg {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel-row-epg:empty { display: none; }
.channel-row-live { display: none; font-size: 9.5px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.channel-row.active { background: var(--accent-soft); border-color: rgba(155, 124, 240, 0.35); }
.channel-row.active .channel-row-name { color: var(--accent-hover); font-weight: 600; }
.channel-row.active .channel-row-live { display: inline; }

.player-overlay.fullscreen-active .channel-panel { top: 0; }

@media (max-width: 640px) {
  .channel-panel { width: 100%; max-width: 100%; border-left: none; }
}

/* ---------- Réglages ---------- */
.settings-block {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px; max-width: 480px;
}
.settings-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.settings-label {
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-muted);
  margin-bottom: 12px; font-weight: 500;
}
.settings-label input {
  padding: 10px 12px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit;
  letter-spacing: 0.3em;
}
.settings-label input:focus { outline: none; border-color: var(--accent); }

/* ---------- Contrôle parental : catégories bloquées ---------- */
.parental-blocked-cats { max-width: 560px; position: relative; padding-bottom: 70px; }
.blocked-cats-search {
  display: block; width: 100%; margin: 14px 0 14px; padding: 10px 14px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; font-family: inherit;
}
.blocked-cats-search:focus { outline: none; border-color: var(--accent); }
.blocked-cats-list {
  max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px;
}
.blocked-cat-row {
  display: flex !important; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--text); cursor: pointer; transition: background 0.12s ease;
}
.blocked-cat-row:hover { background: var(--bg-elevated-2); }
.blocked-cat-row input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.blocked-cats-savebar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--bg-elevated-2); border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.blocked-cats-savebar span { flex: 1; font-size: 13px; color: var(--text-muted); }

#parental-has-pin .checkbox-row { margin-bottom: 16px; }
#parental-has-pin .secondary-btn, #parental-has-pin .danger-btn { margin-right: 10px; margin-bottom: 8px; }

.card-size-switch { display: flex; gap: 8px; }
.card-size-switch button {
  padding: 9px 18px; border-radius: var(--radius-sm); background: var(--bg-elevated-2);
  border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.card-size-switch button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }

/* ---------- Badge "nouveau" sur une vignette ---------- */
.card { position: relative; }
.badge-new {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--accent); color: #1E1533; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
}

/* ---------- Tailles de vignettes ---------- */
[data-card-size="small"] .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
[data-card-size="small"] .home-row-scroll .card,
[data-card-size="small"] .home-row-scroll .channel-card { flex-basis: 110px; width: 110px; }
[data-card-size="large"] .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
[data-card-size="large"] .home-row-scroll .card,
[data-card-size="large"] .home-row-scroll .channel-card { flex-basis: 190px; width: 190px; }

/* ---------- Guide TV (grille EPG multi-chaînes) ---------- */
.epg-grid { display: flex; flex-direction: column; gap: 6px; }
.epg-timeline-header {
  display: flex; padding-left: 168px; height: 22px; position: relative;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.epg-hour-label {
  position: absolute; font-size: 11px; color: var(--text-muted); transform: translateX(-50%);
}
.epg-row { display: flex; align-items: stretch; gap: 8px; }
.epg-channel-label {
  flex: 0 0 160px; width: 160px; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; overflow: hidden;
}
.epg-channel-label:hover { background: var(--bg-elevated-2); }
.epg-channel-label img { width: 26px; height: 26px; object-fit: contain; background: var(--bg-elevated-3); border-radius: 4px; flex: 0 0 26px; }
.epg-channel-label span {
  font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-track {
  flex: 1; position: relative; height: 52px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.epg-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.epg-block {
  position: absolute; top: 4px; bottom: 4px; border-radius: 5px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  padding: 4px 8px; overflow: hidden; cursor: default;
}
.epg-block.epg-current { background: var(--accent-soft); border-color: var(--accent); }
.epg-block-title {
  font-size: 11.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-block-time { font-size: 9.5px; color: var(--text-muted); }
.epg-empty-msg { color: var(--text-muted); font-size: 13px; padding: 6px 8px; }

@media (max-width: 720px) {
  .epg-channel-label { flex-basis: 110px; width: 110px; }
  .epg-timeline-header { padding-left: 118px; }
}

/* ---------- Aperçu d'une chaîne avant plein écran ---------- */
.channel-preview-overlay {
  position: fixed; inset: 0; z-index: 95; background: rgba(5,3,10,0.72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.channel-preview-card {
  width: 100%; max-width: 920px;
  background: rgba(24, 17, 38, 0.55);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.channel-preview-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(155, 124, 240, 0.22);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10);
  color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.channel-preview-close:hover { background: rgba(155, 124, 240, 0.36); }
.channel-preview-close:active { transform: scale(0.92); }
.channel-preview-video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; cursor: pointer;
}
.channel-preview-video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.channel-preview-expand-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; font-size: 12.5px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.channel-preview-video-wrap:hover .channel-preview-expand-hint { opacity: 1; }
.channel-preview-expand-hint svg { width: 15px; height: 15px; }
.channel-preview-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px;
}
.channel-preview-footer span { font-size: 14px; font-weight: 500; color: var(--text); }

@media (max-width: 640px) {
  .channel-preview-card { max-width: 100%; }
}