/* ── Couche lecteur persistante — feuille AUTONOME ──
   Chargée sur l'accueil immersif, la bibliothèque et toutes les pages.
   Ne touche que les classes du lecteur : aucun conflit avec le template. */

.player {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
  display: grid; grid-template-columns: auto auto auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(10, 15, 26, 0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(140, 170, 220, 0.14); border-radius: 14px;
  color: #e9eef7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: opacity 0.45s, transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.player.hbx-off { transform: translateY(140%); pointer-events: none; }
.pbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(140, 170, 220, 0.14); background: transparent;
  color: #e9eef7; cursor: pointer; font-size: 12px;
  transition: border-color 0.2s, color 0.2s;
}
.pbtn:hover { border-color: #4cc2ff; color: #4cc2ff; }
.pbtn.main { width: 46px; height: 46px; font-size: 15px; border-color: #e8c76a; color: #e8c76a; }
.pbtn.main:hover { background: rgba(232, 199, 106, 0.12); }
.pmeta { min-width: 0; }
.ptitle { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  border: 1px solid #e8c76a; color: #e8c76a;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.14em; vertical-align: 2px;
}
.pbar { height: 5px; background: #101a2e; border-radius: 99px; margin-top: 7px; cursor: pointer; position: relative; }
.pfill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #4cc2ff, #e8c76a); }
.ptime {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; color: #8da0bf; white-space: nowrap;
}

/* ── lecteur YouTube docké ── */
.ytdock {
  position: fixed; right: 10px; bottom: 96px; z-index: 70;
  width: min(380px, calc(100vw - 20px));
  background: #0c1322; border: 1px solid rgba(140, 170, 220, 0.14);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s;
}
.ytdock-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; }
.ytdock-bar > span:last-child { display: flex; align-items: center; gap: 12px; }
.ytdock .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; }
#ytTitle { color: #e8c76a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-ext { color: #8da0bf; text-decoration: none; }
.yt-ext:hover { color: #4cc2ff; }
.yt-close { background: none; border: 0; color: #8da0bf; cursor: pointer; font-size: 14px; line-height: 1; }
.yt-close:hover { color: #ff4d4d; }
.ytwrap { position: relative; }
.ytwrap iframe, #ytHost { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; background: #000; }
.yt-resume {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(7, 11, 20, 0.72);
  border: 0; cursor: pointer; color: #e8c76a;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; letter-spacing: 0.14em;
}
.yt-resume:hover { background: rgba(7, 11, 20, 0.55); }
.yt-resume.hidden { display: none; }

/* ── discret au repos, net au survol (souris uniquement) ── */
@media (hover: hover) {
  .player { opacity: 0.5; }
  .ytdock { opacity: 0.6; }
  .player:hover, .player:focus-within, .player.lit,
  .ytdock:hover, .ytdock:focus-within { opacity: 1; }
}

@media (max-width: 640px) {
  .ptime { display: none; }
  .player { grid-template-columns: auto auto auto 1fr; gap: 9px; }
}