/* Now Playing : carte sur l'accueil (nowplaying/_card.html) et page
   historique (nowplaying/history.html). */

/* --- Carte « En ce moment » ------------------------------------------- */
.np-card { display:flex; gap:14px; align-items:center; }
.np-eyebrow { margin:0 0 6px; }
.np-art-link { flex:0 0 52px; display:block; line-height:0; border-radius:10px; position:relative; }
.np-art-link[href] { cursor:pointer; }
.np-art-link[href]:hover .np-art { opacity:.82; }
.np-art-link[href]:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.np-art {
  width:52px; height:52px; border-radius:10px; object-fit:cover;
  background:var(--border); display:block; transition:opacity .12s;
}
.np-art[hidden] { display:none; }
.np-art-ph {
  display:none; width:52px; height:52px; border-radius:10px;
  align-items:center; justify-content:center; font-size:20px; line-height:1;
  background:repeating-linear-gradient(45deg,#1b2c14,#1b2c14 6px,#213319 6px,#213319 12px);
}
.np-art-link:has(.np-art[hidden]) .np-art-ph { display:flex; }
.np-body { min-width:0; }
.np-name, .np-artists { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.np-history-link { margin:-2px 0 0; font-size:.9rem; }

/* --- Historique des morceaux ---------------------------------------- */
.nph-title { text-align:center; margin:0 0 6px; }
.nph-sub { text-align:center; color:var(--soft); font-size:.9rem; margin:0 0 20px; }
.nph-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.nph-row {
  display:flex; gap:12px; align-items:center;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
}
.nph-art, .nph-art-ph {
  flex:0 0 44px; width:44px; height:44px; border-radius:8px; object-fit:cover;
  background:var(--border); display:block;
}
.nph-art-ph {
  display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
  background:repeating-linear-gradient(45deg,#1b2c14,#1b2c14 6px,#213319 6px,#213319 12px);
}
.nph-body { min-width:0; flex:1; }
.nph-name, .nph-artists { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nph-name { font-weight:600; color:var(--ink); text-decoration:none; }
a.nph-name:hover { color:var(--gold); }
.nph-artists { color:var(--soft); font-size:.88rem; }
.nph-when { flex:0 0 auto; text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; }
.nph-date { display:block; font-size:.72rem; opacity:.8; text-transform:capitalize; }
.nph-time { font-size:.82rem; }
.nph-empty { color:var(--soft); text-align:center; margin-top:24px; }
.nph-back { display:block; text-align:center; margin-top:22px; font-size:.9rem; }