/* NasTube local - interface sombre inspiree de YouTube */

:root {
  --bg: #0f0f0f;
  --bg-elev: #181818;
  --bg-hover: #272727;
  --bg-chip: #272727;
  --line: #303030;
  --text: #f1f1f1;
  --text-dim: #aaaaaa;
  --accent: #ff0033;
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Un display explicite (inline-flex sur les boutons) l'emporterait sinon sur
   l'attribut hidden du HTML, et des boutons masques resteraient visibles. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0 0 .5rem; }
button { font: inherit; color: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #4d4d4d; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------- barre haute */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--bg);
  z-index: 50;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.icon-btn:hover { background: var(--bg-hover); }

.logo { display: flex; align-items: center; gap: 6px; flex: none; }
.logo-mark svg { width: 28px; height: 20px; stroke: none; }
.logo-text { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
.logo-text sup { font-size: 9px; font-weight: 500; color: var(--text-dim); letter-spacing: .5px; }

.searchbar {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  height: 40px;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  background: #121212;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.searchbar input:focus { border-color: #3ea6ff; }
.searchbar input::placeholder { color: #888; }
.search-go {
  width: 64px;
  border: 1px solid var(--line);
  border-radius: 0 20px 20px 0;
  background: var(--bg-hover);
  cursor: pointer;
}
.search-go:hover { background: #3f3f3f; }

.topbar-right { display: flex; align-items: center; gap: 4px; flex: none; }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #7b1fa2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-left: 8px;
  flex: none;
}
.avatar { border: 0; cursor: pointer; font-size: 17px; line-height: 1; padding: 0; }
.avatar:hover { filter: brightness(1.15); }

/* ------------------------------------------------------------- profils */

.profils-ecran { max-width: 900px; margin: 40px auto; text-align: center; }
.profils-ecran h1 { font-size: 30px; font-weight: 600; margin: 0 0 32px; }
.profils-grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: 28px;
}
.profil-carte { cursor: pointer; width: 140px; }
.profil-avatar {
  width: 120px; height: 120px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  border: 3px solid transparent;
  transition: border-color .15s, transform .15s;
}
.profil-carte:hover .profil-avatar { border-color: var(--text); transform: scale(1.04); }
.profil-avatar.vide {
  background: var(--bg-elev);
  border: 2px dashed var(--line);
  color: var(--text-dim);
  font-size: 44px;
}
.profil-nom { margin-top: 12px; font-size: 15px; color: var(--text-dim); }
.profil-carte:hover .profil-nom { color: var(--text); }
.profil-actions { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }

.pf-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-emoji {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #121212;
  font-size: 19px;
  cursor: pointer;
}
.pf-emoji.on { border-color: #3ea6ff; background: #1b2b3a; }
.pf-couleur {
  width: 30px; height: 30px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.pf-couleur.on { border-color: var(--text); }

.scan-badge {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-chip);
  border-radius: 12px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- colonne */

.sidebar {
  position: fixed;
  top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  padding: 12px;
  overflow-y: auto;
  background: var(--bg);
  z-index: 40;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title { padding: 8px 12px 4px; font-size: 15px; font-weight: 600; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 12px;
  height: 40px;
  border-radius: 10px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item svg { flex: none; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--bg-hover); font-weight: 600; }
.nav-sep { height: 1px; background: var(--line); margin: 12px 0; }
.nav-count { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.sidebar-foot { padding: 16px 12px; font-size: 12px; color: #717171; }

.sidebar-scrim { display: none; }

body.nav-collapsed .sidebar { transform: translateX(-100%); }
body.nav-collapsed .content { margin-left: 0; }

.content {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 20px) 24px 80px;
  min-height: 100vh;
}
.loading { color: var(--text-dim); padding: 40px 0; }

/* ----------------------------------------------------------------- puces */

.chips {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 6px 12px;
  background: var(--bg-chip);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: #3f3f3f; }
.chip.active { background: var(--text); color: #0f0f0f; font-weight: 500; }

/* ---------------------------------------------------------------- grille */

/* Trois vignettes par ligne sur un ecran d'ordinateur, et cinq pour les
   shorts. Un nombre fixe plutot qu'un remplissage automatique : celui-ci
   donnait cinq ou six colonnes sur un grand ecran, avec des vignettes trop
   petites pour qu'on distingue quoi que ce soit. Les paliers plus bas
   reduisent ce nombre au lieu de retrecir les images. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 16px;
}
.grid.dense { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 16px; }
/* Shorts : vignettes verticales, plus etroites et plus nombreuses par ligne.
   Le format 9/16 ne vaut que dans la grille dediee : ailleurs, une carte deux
   fois plus haute que les autres etirerait toute sa ligne et laisserait un
   grand vide a cote. Dans les grilles melangees, le short garde donc le meme
   cadre 16/9 que le reste, recadre au centre. */
.grid.shorts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 14px; }
.grid.shorts .card.short .thumb { aspect-ratio: 9 / 16; }
.grid.shorts .card.short .card-avatar { display: none; }
.card.short .thumb { background: #0b0b0b; }
.card.short .thumb img,
.card.short .thumb img.portrait { object-fit: cover; }

.card { cursor: pointer; display: block; }
.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #202020;
}
/* La pochette d'un livre est carree : on l'affiche entiere, centree sur fond sombre,
   pour garder toutes les cartes de la grille alignees. */
.card.book .thumb { background: #141414; }
.card.book .thumb img { object-fit: contain; }
.thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.card:hover .thumb img { transform: scale(1.03); }
/* Affiche verticale : montree en entier, sans recadrage brutal. */
.thumb img.portrait { object-fit: contain; background: #0b0b0b; }
.badge {
  position: absolute;
  right: 6px; bottom: 6px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 4px;
}
.badge.left { right: auto; left: 6px; bottom: auto; top: 6px; background: rgba(0,0,0,.7); }

/* Etat de visionnage, en bas a gauche de la vignette */
.etat {
  position: absolute;
  left: 6px; bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
}
.etat.encours { background: var(--accent); }
.etat.vu { background: rgba(0,0,0,.82); color: #b9b9b9; }
.resume-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.28);
}
.resume-bar i { display: block; height: 100%; background: var(--accent); }
.card-body { display: flex; gap: 12px; margin-top: 12px; }
.card-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.card-text { min-width: 0; }
.card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { font-size: 12px; color: var(--text-dim); }
.card-meta span + span::before { content: " · "; }

/* Barre de tri et de filtres au-dessus d'une grille */
.barre-tri {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
}
.barre-tri label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.barre-tri select { min-width: 130px; }

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 8px 0 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.voir-tout {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: #3ea6ff;
}
.voir-tout:hover { text-decoration: underline; }
.kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.section + .section { margin-top: 40px; }
.empty {
  color: var(--text-dim);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}

/* --------------------------------------------------------------- lecture */

.watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 402px;
  gap: 24px;
  max-width: 1800px;
  margin: 0 auto;
}
/* Les adaptations de largeur de cette page sont regroupees plus bas, avec les
   autres, et rangees de la plus large a la plus etroite. Elles etaient ici,
   avant la regle des 1300 pixels : sur un telephone les deux s'appliquaient,
   la derniere ecrite l'emportait, et la colonne de gauche se retrouvait
   ecrasee a quatre-vingts pixels avec un mot par ligne. */

/* Mode large : le lecteur prend toute la largeur disponible, les suggestions
   passent dessous en grille. La hauteur reste dans l'ecran grace au max-width,
   calcule a partir du rapport 16/9. */
.watch.theater {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}
.watch.theater .player-wrap {
  max-width: calc((100vh - 210px) * 1.7778);
  margin: 0 auto;
}
.watch.theater .watch-title,
.watch.theater .watch-bar,
.watch.theater .infobox { max-width: 1400px; margin-left: auto; margin-right: auto; }
.watch.theater .side-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px 16px;
  margin-top: 24px;
}

.player-wrap {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.player-wrap video { width: 100%; height: 100%; display: block; background: #000; }
.player-wrap.fs { border-radius: 0; }
/* Video verticale : cadre 9/16 centre, environ une fois et demie la hauteur
   d'une video 16/9 de meme largeur de page, pas davantage. 47,5 % de largeur
   donnent exactement ce rapport. La hauteur reste bornee par l'ecran. */
.player-wrap.vertical {
  aspect-ratio: 9 / 16;
  width: min(47.5%, calc((100vh - 200px) * 0.5625));
  max-width: none;
  margin: 0 auto;
}

.ctrl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 12px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  opacity: 0;
  transition: opacity .18s;
  color: #fff;
}
.player-wrap:hover .ctrl, .player-wrap.paused .ctrl, .player-wrap.show-ctrl .ctrl { opacity: 1; }
.scrub {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.scrub-track { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; }
.scrub:hover .scrub-track { height: 6px; }
.scrub-buf { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.45); border-radius: 2px; }
.scrub-play { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; }
.scrub-dot {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .1s;
}
.scrub:hover .scrub-dot { transform: scale(1); }
.ctrl-row { display: flex; align-items: center; gap: 4px; height: 44px; }
.ctrl-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
}
.ctrl-btn:hover { background: rgba(255,255,255,.12); }
.ctrl-btn.on { color: var(--accent); }
.ctrl-btn svg { width: 22px; height: 22px; }
.ctrl-time { font-size: 13px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.ctrl-spacer { flex: 1; }
.vol { display: flex; align-items: center; }
.vol input {
  width: 0; opacity: 0;
  transition: width .2s, opacity .2s;
  accent-color: #fff;
}
.vol:hover input, .vol input:focus { width: 70px; opacity: 1; margin-right: 8px; }
.pill {
  border: 0;
  background: rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 4px;
  white-space: nowrap;
}
.pill:hover { background: rgba(255,255,255,.25); }
.pill.on { background: var(--accent); }

.menu {
  position: absolute;
  right: 12px; bottom: 60px;
  background: rgba(28,28,28,.96);
  border-radius: 10px;
  padding: 6px;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 5;
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.menu button:hover { background: rgba(255,255,255,.12); }
.menu button.on { color: #3ea6ff; font-weight: 600; }

/* Signet : rappel de l'endroit ou la lecture s'etait arretee */
.reprise {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-dim);
}
.reprise b { color: var(--text); }

.watch-title { font-size: 20px; font-weight: 600; margin: 16px 0 12px; }
.watch-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chan { display: flex; align-items: center; gap: 12px; }
.chan .card-avatar { width: 40px; height: 40px; }
.chan-name { font-weight: 600; }
.chan-sub { font-size: 12px; color: var(--text-dim); }
.actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: var(--bg-hover);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.action:hover { background: #3f3f3f; }
.action.on { background: var(--text); color: #0f0f0f; }
/* Signale : la meme teinte orange que le bouton du lecteur audio, pour que le
   geste se reconnaisse d'un ecran a l'autre. */
.action.rejet { color: #ff9800; }
.action.rejet:hover { background: #3a2d16; }
.action svg { width: 20px; height: 20px; }

.infobox {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: #ddd;
}
.infobox b { color: #fff; }
.infobox .row { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-dim); margin-bottom: 6px; }
.infobox .path { font-family: Consolas, monospace; font-size: 12px; color: #9aa; word-break: break-all; }

/* Fiche du catalogue : synopsis, realisateur, casting */
.fiche { margin-top: 12px; line-height: 1.5; }
.fiche p { margin: 0 0 .5rem; }
.fiche .casting { color: var(--text-dim); }
.fiche .src { font-size: 11px; color: #6b6b6b; margin: 0; }

.side-list { display: flex; flex-direction: column; gap: 8px; }
.side-card { display: flex; gap: 8px; cursor: pointer; }
.side-card .thumb { width: 168px; flex: none; border-radius: 8px; }
.side-card.book .thumb { background: #141414; }
.side-card.book .thumb img { object-fit: contain; }
.side-card .card-title { font-size: 14px; margin-bottom: 3px; }

/* ------------------------------------------------------------ livre audio */

.book-head { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.book-cover {
  width: 260px; height: 260px;
  border-radius: var(--radius);
  object-fit: contain;
  background: #141414;
  flex: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.book-info { flex: 1 1 320px; min-width: 260px; }
.book-info h1 { font-size: 26px; margin: 0 0 8px; }
.book-info .sub { color: var(--text-dim); margin-bottom: 16px; }

.audio-player {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}
.audio-now { font-weight: 500; margin-bottom: 10px; }
.audio-now small { color: var(--text-dim); font-weight: 400; }
.audio-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.audio-ctrl .ctrl-btn { color: var(--text); }
.audio-ctrl .big { width: 52px; height: 52px; background: var(--text); color: #0f0f0f; }
.audio-ctrl .big:hover { background: #fff; }
.audio-ctrl .big svg { width: 26px; height: 26px; }
.audio-scrub { margin: 6px 0; }
.audio-scrub .scrub-track { background: #3f3f3f; }
.audio-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

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

/* Intertitre d'une partie, pour un livre eclate en plusieurs sous-dossiers */
.part-titre {
  margin: 16px 0 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
}
.part-titre:first-child { margin-top: 0; }
.chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.chapter:hover { background: var(--bg-hover); }
.chapter.playing { background: #2a1f22; }
.chapter.playing .ch-title { color: var(--accent); font-weight: 600; }
.ch-num { width: 28px; color: var(--text-dim); font-size: 13px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.ch-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dur { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.ch-done { color: #3ea6ff; font-size: 12px; }
.ch-progress { width: 60px; height: 3px; background: #3f3f3f; border-radius: 2px; overflow: hidden; flex: none; }
.ch-progress i { display: block; height: 100%; background: var(--accent); }

/* ------------------------------------------------ visualiseur fractal --- */

.visuel {
  position: fixed;
  top: var(--topbar-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 76px;
  background: #000;
  z-index: 45;
  overflow: hidden;
}
body:not(.has-player) .visuel { bottom: 0; }
body.nav-collapsed .visuel { left: 0; }
.visuel canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#barres { pointer-events: none; }

/* Mode WinAMP : pochette en haut, spectre en dessous. */
.visuel-pochette {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  height: 34%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 14px 50px rgba(0,0,0,.75);
  pointer-events: none;
}

.visuel-mode {
  position: absolute;
  top: 16px; left: 16px;
  border: 0;
  border-radius: 16px;
  padding: 7px 14px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.visuel-mode:hover { background: rgba(0,0,0,.78); }

.visuel-alerte {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.6);
  color: #ffcc80;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 14px;
}

.visuel-info {
  position: absolute;
  left: 32px; bottom: 28px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
  pointer-events: none;
}
.visuel-titre { font-size: 26px; font-weight: 600; }
.visuel-sous { font-size: 15px; color: #cfcfcf; margin-top: 4px; }

.visuel-fermer {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.visuel-fermer:hover { background: rgba(0,0,0,.75); }

@media (max-width: 900px) { .visuel { left: 0; } }

/* ------------------------------------------- barre de lecture permanente */

.playbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 76px;
  background: #181818;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  z-index: 60;
}
body.has-player .content { padding-bottom: 110px; }
body.has-player .sidebar { bottom: 76px; }

.pb-cover {
  width: 52px; height: 52px;
  border-radius: 6px;
  object-fit: cover;
  background: #262626;
  flex: none;
}
.pb-meta { min-width: 0; width: 210px; flex: none; }
.pb-title {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-buttons { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pb-buttons .ctrl-btn { color: var(--text); }
.pb-buttons .big {
  width: 40px; height: 40px;
  background: var(--text); color: #0f0f0f;
}
.pb-buttons .big:hover { background: #fff; }
.pb-line { display: flex; align-items: center; gap: 10px; }
.pb-line .scrub { flex: 1; }
.pb-line .scrub-track { background: #4d4d4d; }
.pb-time { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.pb-right { display: flex; align-items: center; gap: 4px; flex: none; }
.pb-right .pill { margin: 0; background: var(--bg-hover); }
.pb-right .pill.on { background: var(--accent); }
.pb-right .ctrl-btn.on { color: var(--accent); }
/* Pouce baisse et signalement actifs : orange, pour les distinguer du coeur */
.pb-right .ctrl-btn.rejet { color: #ff9800; }
#pb-like.on svg { fill: var(--accent); }

@media (max-width: 900px) {
  .playbar { height: 64px; gap: 10px; padding: 0 10px; }
  body.has-player .content { padding-bottom: 90px; }
  .pb-meta { width: 120px; }
  .pb-right { display: none; }
  .pb-time { display: none; }
}

/* ------------------------------------------------------- albums et pistes */

.album-head { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; align-items: flex-end; }
.album-cover {
  width: 220px; height: 220px;
  border-radius: var(--radius);
  object-fit: cover;
  background: #1c1c1c;
  flex: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.album-info { flex: 1 1 300px; min-width: 240px; }
.album-info .kicker { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.album-info h1 { font-size: 30px; margin: 4px 0 8px; line-height: 1.15; }
.album-info .sub { color: var(--text-dim); margin-bottom: 16px; }

.tracks { display: flex; flex-direction: column; }
.track {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.track:hover { background: var(--bg-hover); }
.track.playing { background: #24201f; }
.track.playing .tr-title { color: var(--accent); font-weight: 600; }
.tr-num { width: 24px; text-align: right; color: var(--text-dim); font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.tr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-artist { color: var(--text-dim); font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dur { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Lignes d'une liste de lecture : vignette et sous-titre */
.pl-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; background: #262626; flex: none; }

/* Bouton de lecture pose devant chaque ligne */
.row-play {
  width: 30px; height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.row-play svg { width: 15px; height: 15px; }
.track:hover .row-play, .chapter:hover .row-play { background: var(--text); color: #0f0f0f; }
.track.playing .row-play, .chapter.playing .row-play { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------- livres --- */

/* Couvertures de livres : format portrait, comme les shorts uniquement dans
   leur grille dediee, pour ne pas etirer les lignes des grilles melangees. */
.grid.livres { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 14px; }
.grid.livres .card.livre .thumb { aspect-ratio: 2 / 3; }
.grid.livres .card.livre .card-avatar { display: none; }
.card.livre .thumb { background: #14110d; }
.card.livre .thumb img { object-fit: cover; }

.livre-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.livre-tete h1 { font-size: 24px; margin: 4px 0 0; }

.lecteur-pdf {
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

/* Page de PDF dessinee par PDF.js : fond sombre autour, page centree. */
.lecteur-page {
  background: #0a0a0a;
  border-radius: 10px;
  padding: 12px;
  height: calc(100vh - 280px);
  min-height: 400px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.lecteur-page canvas {
  display: block;
  background: #fff;
  box-shadow: 0 6px 26px rgba(0,0,0,.6);
  border-radius: 3px;
}

/* Le contenu d'un EPUB est une page web : fond clair, comme un livre. */
.lecteur-epub { background: #fbfaf7; }

/* Lecteur de bande dessinee : la page occupe l'ecran, les cotes font tourner */
.lecteur-bd {
  position: relative;
  background: #0a0a0a;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 280px);
  min-height: 400px;
}
.lecteur-bd img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bd-cote {
  position: absolute;
  top: 0; bottom: 0;
  width: 18%;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-cote.gauche { left: 0; }
.bd-cote.droite { right: 0; }
.bd-cote:hover { background: rgba(255,255,255,.06); color: #fff; }
.bd-cote svg { width: 40px; height: 40px; }

.bd-barre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.bd-barre input[type=range] { flex: 1; min-width: 180px; accent-color: var(--accent); }
.bd-barre span { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Lien de retour vers la liste precedente */
.retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 7px 14px 7px 10px;
  border-radius: 18px;
  background: var(--bg-hover);
  font-size: 14px;
}
.retour:hover { background: #3f3f3f; }
.retour svg { width: 18px; height: 18px; }

/* Repere de fin de grille : invisible, mais il doit avoir une hauteur pour
   que le navigateur sache dire quand il approche. */
.suite-grille {
  height: 8px;
  margin-top: 8px;
}

/* Livres : les rubriques, premier niveau de navigation. Une bibliotheque de
   vingt-trois mille livres ne se parcourt pas a plat. */
.retour-barre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.retour-titre { font-size: 18px; font-weight: 500; }
.rubriques {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.rubrique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.rubrique:hover { background: #3f3f3f; }
.rubrique-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rubrique-n { color: var(--text-dim); font-size: 13px; flex: none; }
@media (max-width: 800px) {
  .rubriques { grid-template-columns: 1fr 1fr; }
}

/* Boite de saisie */
.modal-fond {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  width: min(420px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.modal h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.modal input { width: 100%; font-size: 15px; padding: 10px 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Bouton d'ajout a une liste, discret tant que la ligne n'est pas survolee */
.part-add {
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  flex: none;
}
.track:hover .part-add, .chapter:hover .part-add { opacity: 1; }
.part-add:hover { background: rgba(255,255,255,.15); color: var(--text); }
.pl-sub { display: block; font-size: 12px; color: var(--text-dim); }
.menu.flottant { box-shadow: 0 8px 30px rgba(0,0,0,.6); }

/* --------------------------------------------------------------- reglages */

.settings { max-width: 900px; }
.settings h1 { font-size: 24px; margin: 0 0 20px; }
.panel {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 16px; margin: 0 0 12px; }
.panel .hint { color: var(--text-dim); font-size: 13px; }
/* Etat d'un jeton temporaire */
.jt-etat {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 2px 9px;
  margin-left: 8px;
  white-space: nowrap;
}
.jt-etat.perime { background: #4a1f24; color: #ff8b96; }

.types { border-collapse: collapse; margin: 0 0 16px; font-size: 13px; }
.types td { padding: 5px 14px 5px 0; vertical-align: top; color: var(--text-dim); }
.types td:first-child { white-space: nowrap; color: var(--text); }

.folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.folder-row .p { flex: 1 1 320px; min-width: 0; font-family: Consolas, monospace; font-size: 12px; word-break: break-all; }
textarea, select, input[type=text], input[type=password] {
  background: #121212;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
select:focus, input:focus { border-color: #3ea6ff; }
.btn {
  border: 0;
  border-radius: 18px;
  padding: 9px 18px;
  background: var(--bg-hover);
  cursor: pointer;
  font-size: 14px;
}
.btn:hover { background: #3f3f3f; }
.btn.primary { background: #3ea6ff; color: #0f0f0f; font-weight: 600; }
.btn.primary:hover { background: #63b8ff; }
.btn.danger { background: #4a1f24; color: #ff8b96; }
.btn.small { padding: 5px 12px; font-size: 12px; }

.browser { border: 1px solid var(--line); border-radius: 10px; max-height: 300px; overflow-y: auto; margin: 12px 0; }
.browser-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid #222;
}
.browser-row:hover { background: var(--bg-hover); }
.browser-path { font-family: Consolas, monospace; font-size: 12px; color: var(--text-dim); padding: 8px 12px; word-break: break-all; }

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: #f1f1f1;
  color: #0f0f0f;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 200;
  font-size: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- responsive */

/* De la plus large a la plus etroite : l'ordre compte, deux requetes qui se
   recouvrent s'appliquent toutes les deux et c'est la derniere ecrite qui
   l'emporte. */
@media (max-width: 1300px) {
  .watch { grid-template-columns: minmax(0, 1fr) 340px; }
  .side-card .thumb { width: 140px; }
}
@media (max-width: 1100px) {
  /* Plus la place pour deux colonnes : les suggestions passent sous le
     lecteur, en pleine largeur. */
  .watch { grid-template-columns: 1fr; }
  .side-card .thumb { width: 160px; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(0,0,0,.5); z-index: 35; }
  .content { margin-left: 0; padding-left: 16px; padding-right: 16px; }
  .logo-text { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .grid.shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* La barre haute deborde sur un telephone et pousse l'avatar hors de
     l'ecran : on ne peut alors plus changer de profil. Le rescan et les
     parametres se retrouvent dans le menu lateral, le choix du profil nulle
     part ailleurs, c'est donc lui qui garde sa place. */
  .topbar { padding: 0 8px; gap: 4px; }
  .topbar #btn-rescan,
  .topbar .icon-btn[href="#/settings"],
  .scan-badge { display: none; }
  .searchbar { max-width: none; }
  .searchbar input { padding: 0 12px; font-size: 14px; }
  .search-go { width: 48px; }
  .avatar { margin-left: 4px; }

  /* Deux vignettes par ligne. Une seule gaspillait la largeur et obligeait a
     defiler longuement pour trois titres. */
  .grid, .grid.dense, .grid.livres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .grid.shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; }
  .card-body { gap: 8px; }
  .card-avatar { width: 28px; height: 28px; font-size: 13px; }
  .card-title { font-size: 13px; line-height: 1.3; }
  .card-meta { font-size: 11px; }
  .content { padding-left: 10px; padding-right: 10px; }

  .book-cover { width: 100%; height: auto; aspect-ratio: 1/1; }
  .side-card .thumb { width: 120px; }
}

/* Lecture impossible : un rectangle noir sans explication ne dit rien a
   personne. Le fichier est parfois simplement abime, et il faut le dire. */
.echec-lecture {
  margin-top: 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.echec-lecture b { font-size: 15px; }
.echec-lecture p { margin: 6px 0 0; color: var(--text-dim); max-width: 70ch; }

/* Page des dossiers : une liste dense, on vient y chercher un nom precis. */
.dossiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.dossier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-elev);
}
.dossier:hover { background: var(--bg-hover); }
.dossier .card-avatar { width: 30px; height: 30px; font-size: 14px; flex: none; }
.dossier-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-n { margin-left: auto; color: var(--text-dim); font-size: 12px; flex: none; }

/* En-tete d'un dossier ou d'une liste : le titre et de quoi tout lancer. */
.pl-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.pl-tete h1 { margin: 0; font-size: 24px; font-weight: 600; }
.pl-tete .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .dossiers { grid-template-columns: 1fr; }
  .pl-tete .actions { margin-left: 0; }
}