/* Carte « Lecture en cours » (js/components/hope-player.js) : la chanson « Hope for the Future »,
   lue depuis un fichier fourni par l'utilisateur ou depuis YouTube.
   Balisage : section#now-playing > .np-head (.np-eq, .np-info, #np-close) + #np-media + #np-note + a.np-link.
   Déclencheur : tout élément [data-play-hope], ou Site.page.playHope(). */

.now-playing {
  position: fixed; left: 20px; bottom: 20px; z-index: 90; width: min(380px, calc(100vw - 40px));
  background: rgba(8, 12, 24, .95); border: 1px solid var(--line-strong); border-left: 3px solid var(--exotic);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateX(-30px); transition: opacity .45s ease, transform .45s var(--ease);
}
.now-playing[hidden] { display: none; }
.now-playing.show { opacity: 1; transform: none; }
.np-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 10px 12px 14px; }
.np-eq { display: flex; align-items: flex-end; gap: 3px; width: 22px; height: 18px; color: var(--exotic); }
.np-eq i { flex: 1; height: 30%; background: currentColor; animation: eq 1s ease-in-out infinite; }
.np-eq i:nth-child(2) { animation-delay: -.25s; } .np-eq i:nth-child(3) { animation-delay: -.5s; } .np-eq i:nth-child(4) { animation-delay: -.75s; }
.now-playing.paused .np-eq i { animation-play-state: paused; }
.np-kicker { margin: 0; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--exotic); }
.np-title { margin: 1px 0 0; font-size: .95rem; font-weight: 700; color: #fff; }
.np-artist { margin: 0; font-size: .8rem; color: var(--muted); }
.np-close { width: 32px; height: 32px; align-self: start; border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.np-close:hover { color: #fff; }
.np-media:empty { display: none; }
.np-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; }
.np-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px 12px; }
.np-play { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: #fff; cursor: pointer; font-size: .8rem; }
.np-play:hover { background: #fff; color: var(--night); }
.np-bar { position: relative; height: 4px; background: rgba(255, 255, 255, .12); cursor: pointer; }
.np-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--exotic); }
.np-time { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.np-note { margin: 0; padding: 0 14px 10px; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.np-note code { font-size: .74rem; color: var(--pearl); }
.np-link { display: block; padding: 10px 14px; border-top: 1px solid var(--line); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.np-link:hover { color: #fff; }
@media (max-width: 680px) {
  .now-playing { left: 16px; right: 16px; top: 70px; bottom: auto; width: auto; }
}