:root {
  --bg: #0d0d12;
  --panel: #17171f;
  --panel-2: #22222c;
  --line: #2b2b37;
  --text: #f2f1f6;
  --muted: #9693a6;
  --accent: #ff4f9a;
  --accent-2: #7c5cff;
  --accent-ink: #1d0612;
  --np: hsl(255 70% 62%);  /* teinte de la pochette en cours */
  --radius: 12px;
  --mini-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); overflow-x: clip; }
body {
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--mini-h) + 16px);
}
body.np-open { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
h2 { font-size: 20px; font-weight: 750; letter-spacing: -.01em; margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; }
h2 a { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 40px 0; list-style: none; }

/* ---- barre du haut */
#bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: rgba(13, 13, 18, .86);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
#title {
  flex: 1; margin: 0 4px; font-size: 17px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 19px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-disc {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #0d0d12 0 2px, var(--accent) 2.5px 6px, #111 6.5px 100%),
              repeating-radial-gradient(circle, #222 0 1px, #111 1px 2px);
  box-shadow: inset 0 0 0 1px #333;
}
.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px; cursor: pointer; padding: 0;
}
.icon-btn:active { background: var(--panel-2); }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

#view { max-width: 1000px; margin: 0 auto; padding: 12px 16px 40px; --tint: var(--accent-2); }
#view.enter { animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.grid .card { content-visibility: auto; contain-intrinsic-size: 140px 190px; }

/* ---- tout ce qui tourne (33⅓ tours/min : 1,8 s par tour) */
.spin { animation: spin 1.8s linear infinite; animation-play-state: paused; }
body.playing .spin { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- connexion / bienvenue */
.login, .welcome { max-width: 360px; margin: 16vh auto 0; text-align: center; }
.logo { width: 84px; height: 84px; margin-bottom: 10px; animation: spin 6s linear infinite; }
.login h2, .welcome h2 { justify-content: center; margin: 0 0 20px; font-size: 26px; }
.welcome p { color: var(--muted); margin: 0 0 22px; }
.field {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); outline: none;
}
.field:focus { border-color: var(--accent); }
.field.slim { padding: 6px 8px; background: transparent; border-color: transparent; font-weight: 600; }
.field.slim:focus { background: var(--panel); border-color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .15s;
}
.btn:active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.btn.secondary { background: var(--panel-2); color: var(--text); }
.btn.secondary svg { fill: none; stroke-width: 2; stroke-linecap: round; }
.btn.wide { width: 100%; margin-top: 14px; }
.login .btn { width: 100%; margin-top: 12px; }
.error { color: #ff6b6b; min-height: 1.4em; margin-top: 10px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.actions .field { flex: 1; min-width: 180px; }

/* ---- accueil */
.hero { padding-top: 6px; }
.hello { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; }
.stats { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.scan { color: var(--muted); font-size: 14px; margin: -4px 0 16px; }
.scanbar { height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; margin-bottom: 6px; }
.scanbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .4s; }
.bigbtns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.big {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  min-height: 112px; padding: 14px; border: 0; border-radius: 18px; cursor: pointer; color: #fff;
  transition: transform .15s;
}
.big:active { transform: scale(.97); }
.big b { font-size: 17px; letter-spacing: -.01em; }
.big small { opacity: .8; font-size: 13px; }
.big .emo { position: absolute; top: 10px; right: 12px; font-size: 34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.big.b1 { background: linear-gradient(135deg, #ff4f9a, #ff8a3d); }
.big.b2 { background: linear-gradient(135deg, #7c5cff, #4f8dff); }
.big.b3 { background: linear-gradient(135deg, #18b5a4, #2f7bd8); }
.big.rolling .dice { animation: roll .65s cubic-bezier(.3,.7,.4,1); }
@keyframes roll {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(400deg) scale(1.5) translateY(-6px); }
  100% { transform: rotate(720deg) scale(1); }
}
@media (max-width: 560px) {
  .bigbtns { grid-template-columns: 1fr 1fr; }
  .big.b1 { grid-column: 1 / -1; min-height: 96px; }
  .big { min-height: 92px; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; font-size: 14px; white-space: nowrap; transition: background .15s, transform .15s;
}
.chip:active { transform: scale(.95); }
.chip.on, .chip:hover { background: var(--panel-2); border-color: var(--accent); }
.sorts { margin: 12px 0 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; }
.fav-tile { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--panel)), var(--panel)); }
.today-tile { background: linear-gradient(135deg, color-mix(in srgb, #ffb340 26%, var(--panel)), var(--panel)); }
.card small.sub { color: var(--accent); font-weight: 600; }
h2 small { font-size: 14px; font-weight: 500; color: var(--muted); }
.heart-av { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.heart-av svg { width: 46%; height: 46%; fill: #fff; }
.tile {
  display: flex; flex-direction: column; padding: 16px; border-radius: 16px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
}
.tile b { font-size: 18px; }
.tile small { color: var(--muted); }

/* ---- pochettes, cartes */
.ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 50) 65% 34%));
  color: rgba(255,255,255,.9); font-weight: 800; font-size: clamp(14px, 30%, 48px); letter-spacing: .02em;
  container-type: size;
}
.ph span { font-size: 32cqw; }
.shelf-row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  margin: 0 -16px; padding: 0 16px 6px;
  scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row .card { flex: 0 0 140px; scroll-snap-align: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.card { display: block; text-decoration: none; min-width: 0; }
.card b, .card small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card b { font-size: 14px; margin-top: 8px; }
.card small { color: var(--muted); font-size: 13px; }

/* la pochette est une pochette : le disque dépasse au survol */
.sleeve { position: relative; aspect-ratio: 1; }
.sleeve > img, .sleeve > .ph {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.sleeve > .ph { display: grid; }
.sleeve .disc {
  position: absolute; inset: 3%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, #0d0d12 0 2%, var(--tint, var(--accent)) 2.5% 17%, transparent 17.5%),
              conic-gradient(from 30deg, transparent 0 6%, rgba(255,255,255,.12) 11%, transparent 17% 50%, rgba(255,255,255,.1) 61%, transparent 67%),
              repeating-radial-gradient(circle, #24242b 0 1px, #111115 1px 3px);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1);
  transition: transform .45s cubic-bezier(.3,.8,.3,1.2);
}
@media (hover: hover) {
  .card:hover .disc { transform: translateX(22%) rotate(40deg); }
}
.qplay {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 12px rgba(0,0,0,.4); opacity: 0; transform: translateY(6px) scale(.9); transition: .2s;
}
.qplay svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
@media (hover: hover) {
  .card:hover .qplay { opacity: 1; transform: none; }
}

/* ---- album */
.album-hero { display: flex; gap: 26px; align-items: flex-end; padding: 10px 0 8px; position: relative; }
.album-hero::before {
  content: ""; position: absolute; inset: -60px -100vw -20px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 30% 0%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%);
}
.sleeve.big { width: min(300px, 42vw); flex: none; }
.sleeve.big .disc { transform: translateX(34%) rotate(30deg); }
body.playing .album-hero:has(~ .tracks .now) .sleeve.big .disc { animation: peek 1.8s linear infinite; }
@keyframes peek { from { transform: translateX(34%) rotate(0); } to { transform: translateX(34%) rotate(360deg); } }
.album-hero .info { min-width: 0; padding-right: 8px; }
.album-hero h1 { font-size: clamp(24px, 4.5vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px; font-weight: 800; }
.album-hero .artist { font-size: 18px; font-weight: 600; color: var(--tint); text-decoration: none; filter: brightness(1.25); }
.album-hero .muted { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 620px) {
  .album-hero { flex-direction: column; align-items: center; text-align: center; padding-right: 0; }
  .sleeve.big { width: 60vw; margin-right: 18vw; }
  .album-hero .actions { justify-content: center; }
}

/* ---- listes de titres */
.tracks { list-style: none; margin: 18px 0 0; padding: 0; }
.trk {
  display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 10px; cursor: pointer;
}
.trk:hover { background: var(--panel); }
.trk:active { background: var(--panel-2); }
.trk .no { width: 34px; flex: none; text-align: center; color: var(--muted); font-size: 14px; position: relative; display: grid; place-items: center; }
.trk .no i { font-style: normal; }
.trk .thumb { width: 42px; height: 42px; border-radius: 6px; overflow: hidden; display: block; }
.trk .thumb img, .trk .thumb .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.trk:has(.thumb) .no { width: 42px; }
.trk .tt { flex: 1; min-width: 0; }
.tt b, .tt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt b { font-weight: 550; }
.tt small { color: var(--muted); font-size: 13px; }
.trk .du { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.trk .more svg { stroke: var(--muted); fill: var(--muted); }
.trk.now .tt b { color: var(--accent); }
.trk.fav .tt b::after { content: " ♥"; color: var(--accent); font-size: .85em; }
.trk.past { opacity: .45; }
.disc-head { list-style: none; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 14px 6px 4px; }

/* petit égaliseur sur le titre en cours */
.eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.trk.now .eq { display: flex; }
.trk.now .no i { display: none; }
.trk.now .thumb + .eq { position: absolute; inset: 0; justify-content: center; align-items: center; background: rgba(0,0,0,.55); border-radius: 6px; height: auto; }
.eq b { width: 3px; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: bottom; animation: eq .9s ease-in-out infinite; animation-play-state: paused; }
.trk.now .thumb + .eq b { height: 14px; }
.eq b:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.eq b:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
body.playing .eq b { animation-play-state: running; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---- listes (artistes, dossiers) */
.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; cursor: pointer;
}
.row.static { cursor: default; }
.row:active { background: var(--panel); }
.row .ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--panel-2); }
.row .ico svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; }
.row .tt { flex: 1; min-width: 0; }
.letter { color: var(--accent); font-weight: 800; padding: 16px 4px 4px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; display: block; }
.avatar img, .avatar .ph { width: 100%; height: 100%; object-fit: cover; display: grid; }
.avatar.big { width: 140px; height: 140px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.artist-hero { display: flex; gap: 22px; align-items: center; margin: 12px 0 8px; }
.artist-hero h1 { margin: 0; font-size: clamp(26px, 5vw, 40px); letter-spacing: -.02em; }
@media (max-width: 560px) { .artist-hero { flex-direction: column; text-align: center; } .artist-hero .actions { justify-content: center; } }

.filter { margin: 4px 0 6px; }
.check { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; cursor: pointer; }
.check small { flex-basis: 100%; color: var(--muted); padding-left: 28px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.check select { width: auto; padding: 6px 10px; margin-left: auto; }
.about { margin-top: 34px; font-size: 13px; }

/* ---- mini-lecteur */
#mini {
  position: fixed; z-index: 20; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px);
  max-width: 640px; margin: 0 auto; height: var(--mini-h);
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; cursor: pointer;
  border-radius: 18px; overflow: hidden;
  background: color-mix(in srgb, var(--np) 22%, rgba(24, 24, 32, .92));
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background .6s;
}
.mini-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); }
.mini-prog i { display: block; height: 100%; width: 0; background: var(--np); }
.mini-disc {
  width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 5px;
  background: repeating-radial-gradient(circle, #1c1c22 0 1px, #0b0b0e 1px 2.5px);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.mini-disc .spin { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; }
.mini-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-disc .spin::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: #0b0b0e; }
.mini-disc .noart { background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 50) 65% 34%)); }
.mini-txt { flex: 1; min-width: 0; }
.mini-txt b, .mini-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-txt b { font-size: 15px; }
.mini-txt small { color: rgba(255,255,255,.65); font-size: 13px; }
#mini .icon-btn svg { fill: #fff; stroke: #fff; stroke-width: 1.2; }
#mini [data-act=next] svg { fill: #fff; stroke-width: 2; }
.i-pause, body.playing .i-play { display: none; }
body.playing .i-pause { display: block; }

/* ---- platine (lecteur plein écran) */
#np {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  background: var(--bg);
  transform: translateY(102%); transition: transform .42s cubic-bezier(.2,.8,.2,1); visibility: hidden;
  --d: min(64vw, 40vh, 340px);  /* taille de la cassette et de la pochette seule */
  --s: min(66vw, 42vh, 380px);  /* côté de la pochette du vinyle */
}
#np.on { transform: none; visibility: visible; }
.np-bg { position: absolute; inset: 0; overflow: hidden; }
.np-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.6); opacity: .45; transform: scale(1.3); }
.np-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--np) 35%, transparent), transparent 70%),
              linear-gradient(transparent 30%, rgba(13,13,18,.85)); }
.np-in {
  position: relative; height: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 8px) 20px calc(env(safe-area-inset-bottom) + 14px);
}
.np-top { display: flex; align-items: center; gap: 8px; }
.np-top .icon-btn svg { stroke: #fff; }
.np-from { flex: 1; min-width: 0; text-align: center; text-decoration: none; cursor: pointer; }
.np-from small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.np-from span { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stage { position: relative; display: grid; place-items: center; min-height: max(calc(var(--d) * 1.16), calc(var(--s) * 1.04)); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage > .vinyl, .stage > .tape, .stage > .cover-big { display: none; cursor: pointer; position: relative; }
.stage > .tape, .stage > .cover-big { z-index: 1; }  /* pas pour .vinyl : le halo passe entre le disque et la pochette */
.stage[data-mode=vinyl] > .vinyl, .stage[data-mode=tape] > .tape, .stage[data-mode=cover] > .cover-big { display: block; }
.viz { position: absolute; inset: -10px -20px; width: calc(100% + 40px); height: calc(100% + 20px); pointer-events: none; z-index: 2; filter: drop-shadow(0 0 6px rgba(255,255,255,.25)); }
.stage[data-mode=tape] .viz, .stage[data-mode=cover] .viz { z-index: 0; }
.stage.swap-next .tape, .stage.swap-next .cover-big { animation: in-next .5s cubic-bezier(.2,.9,.3,1.1); }
.stage.swap-prev .tape, .stage.swap-prev .cover-big { animation: in-prev .5s cubic-bezier(.2,.9,.3,1.1); }
@keyframes in-next { from { transform: translateX(60%) rotate(25deg); opacity: 0; } }
@keyframes in-prev { from { transform: translateX(-60%) rotate(-25deg); opacity: 0; } }

/* vinyle : grande pochette, le disque en sort en tournant pendant la lecture */
.vinyl { width: calc(var(--s) * 1.31); height: var(--s); }
.vinyl .jacket {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); z-index: 3;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h, 330) 70% 58%), hsl(calc(var(--h, 330) + 50) 65% 34%));
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 12px 0 26px rgba(0,0,0,.4);
  transform: translateX(calc(var(--s) * .155)); transition: transform .9s cubic-bezier(.3,.7,.2,1);
}
.vinyl .jacket::after {  /* carton : reflet, usure des bords */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.16), transparent 24%, transparent 80%, rgba(0,0,0,.2)),
              radial-gradient(130% 100% at 50% 0%, transparent 62%, rgba(0,0,0,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset -4px 0 8px rgba(0,0,0,.3);
}
.vinyl .jacket img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s; }
.vinyl .record {
  position: absolute; left: calc(var(--s) * .03); top: calc(var(--s) * .03); width: calc(var(--s) * .94); height: calc(var(--s) * .94);
  z-index: 1; border-radius: 50%;
  transform: translateX(calc(var(--s) * .155)); transition: transform .9s cubic-bezier(.3,.7,.2,1) .12s;
  box-shadow: 0 12px 30px rgba(0,0,0,.65), inset 0 0 0 2px #050507;
}
body.playing .vinyl .jacket { transform: none; }
body.playing .vinyl .record { transform: translateX(calc(var(--s) * .34)); }
body.preparing .vinyl .record, body.buffering .vinyl .record { transform: translateX(calc(var(--s) * .24)); }
/* changement de titre : le disque rentre dans la pochette, qui change, puis ressort */
.stage.changing .vinyl .record { transform: translateX(calc(var(--s) * .155)) !important; transition-duration: .35s; transition-delay: 0s; }
.stage.changing .vinyl .jacket img { filter: brightness(.45); }
.record .spin {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, #101014 0 .7px, #1d1d24 1px 1.7px, #0c0c0f 2.1px 2.8px);
}
.record .spin::before {  /* plages entre les morceaux */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 44%, rgba(255,255,255,.06) 44.5% 45%, transparent 45.5% 58%,
    rgba(255,255,255,.06) 58.5% 59%, transparent 59.5% 74%, rgba(255,255,255,.06) 74.5% 75%, transparent 75.5% 96%,
    rgba(255,255,255,.08) 96.5% 97.5%, transparent 98%);
}
.record .label {
  position: absolute; inset: 31%; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--h, 330) 70% 58%), hsl(calc(var(--h, 330) + 50) 65% 34%));
  box-shadow: 0 0 0 3px rgba(0,0,0,.55);
}
.record .label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.record .label::after { content: ""; position: absolute; inset: 46%; border-radius: 50%; background: #d8d8dc; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.record .sheen {  /* le reflet reste fixe pendant que le disque tourne */
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0 5%, rgba(255,255,255,.17) 11%, transparent 18% 47%,
                             rgba(255,255,255,.12) 60%, transparent 68%),
              conic-gradient(from 200deg, transparent 0 20%, color-mix(in srgb, var(--np) 18%, transparent) 30%, transparent 40%);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 31.5%); mask: radial-gradient(circle, transparent 0 31%, #000 31.5%);
}

/* cassette */
.tape {
  position: relative; width: calc(var(--d) * 1.3); height: calc(var(--d) * .84); border-radius: 16px; padding: calc(var(--d) * .05);
  background: linear-gradient(160deg, color-mix(in srgb, var(--np) 70%, #fff 8%), color-mix(in srgb, var(--np) 55%, #000));
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.25);
}
.tape::before, .tape::after { /* vis */
  content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #222 0 1px, #999 1.5px 100%); box-shadow: 0 calc(var(--d) * .74 - 18px) 0 #999;
}
.tape::before { left: 9px; }
.tape::after { right: 9px; }
.tape-label {
  position: relative; height: 100%; border-radius: 8px; padding: 8px 14px;
  background: repeating-linear-gradient(#fbf6e9 0 17px, #e9e0cc 17px 18px);
  font-family: "Marker Felt", "Noteworthy", "Bradley Hand", "Comic Sans MS", cursive; color: #2b2340;
}
.tape-label b { display: block; font-size: clamp(15px, calc(var(--d) * .065), 22px); line-height: 1.1; padding-left: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-1.5deg); }
.tape-label small { display: block; font-size: 13px; padding-left: 26px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-label .side { position: absolute; left: 10px; top: 8px; font: 800 18px/1 -apple-system, sans-serif; color: var(--np); filter: brightness(.7); }
.tape-window {
  position: absolute; left: 22%; right: 22%; top: 42%; height: 30%; border-radius: 999px;
  background: rgba(20, 16, 24, .82); box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  display: flex; justify-content: space-between; align-items: center; padding: 0 6%;
}
.reel { position: relative; width: calc(var(--d) * .17); height: calc(var(--d) * .17); display: grid; place-items: center; }
.reel .wound { position: absolute; border-radius: 50%; background: radial-gradient(circle, #3b2a20 0 60%, #241812); transition: width .6s, height .6s; }
.reel.l .wound { width: calc(var(--d) * (.11 + (1 - var(--p, 0)) * .13)); height: calc(var(--d) * (.11 + (1 - var(--p, 0)) * .13)); }
.reel.r .wound { width: calc(var(--d) * (.11 + var(--p, 0) * .13)); height: calc(var(--d) * (.11 + var(--p, 0) * .13)); }
.reel .hub {
  position: relative; width: calc(var(--d) * .1); height: calc(var(--d) * .1); border-radius: 50%;
  background: repeating-conic-gradient(#f2efe8 0 10%, transparent 10% 16.66%), radial-gradient(circle, #f2efe8 0 45%, transparent 46%);
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 23%); mask: radial-gradient(circle, transparent 0 22%, #000 23%);
  animation-duration: 1.2s;
}
.tape-foot { position: absolute; left: 25%; right: 25%; bottom: 0; height: 13%; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background: rgba(0,0,0,.25); display: flex; justify-content: space-around; align-items: center; }
.tape-foot i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.45); }

/* pochette seule */
.cover-big { width: calc(var(--d) * 1.12); aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.55); transform: scale(.86); transition: transform .5s cubic-bezier(.3,1.4,.5,1);
  background: linear-gradient(135deg, hsl(var(--h, 330) 70% 58%), hsl(calc(var(--h, 330) + 50) 65% 34%)); }
body.playing .cover-big { transform: none; }
.cover-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noart img { visibility: hidden; }

.np-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-text { flex: 1; min-width: 0; }
.np-q { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.qline { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; }
.qpill { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hires { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #ffd36b, #f5a524); color: #2a1a00; }
.fav-btn { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; cursor: pointer; }
.fav-btn svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.fav-btn.on svg { fill: var(--accent); stroke: var(--accent); }
.fav-btn.pop svg { animation: heart-pop .45s cubic-bezier(.3,1.6,.5,1); }
.fav-btn.pop.on { animation: heart-ring .6s ease-out; }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes heart-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.np-title { overflow: hidden; white-space: nowrap; font-size: 23px; font-weight: 800; letter-spacing: -.01em;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.np-title span { display: inline-block; }
.np-title.long span { animation: marquee 14s linear infinite; padding-right: 60px; }
@keyframes marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(calc(-100% + 300px)); } }
.np-artist { display: inline-block; font-size: 17px; color: color-mix(in srgb, var(--np) 60%, #fff); text-decoration: none; cursor: pointer; margin-top: 2px; }

.seek { width: 100%; margin: 0; accent-color: #fff; height: 22px; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.seek::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: rgba(255,255,255,.2); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; margin-top: -5px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.seek::-moz-range-track { height: 5px; border-radius: 4px; background: rgba(255,255,255,.2); }
.seek::-moz-range-progress { height: 5px; border-radius: 4px; background: #fff; }
#np .seek { background: linear-gradient(90deg, #fff calc(var(--p, 0) * 100%), transparent 0) 0 50% / 100% 5px no-repeat; border-radius: 4px; }
.times { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; margin-top: 2px; }
.times .state { color: var(--np); }

.np-ctrls { display: flex; align-items: center; justify-content: space-between; }
.np-ctrls button { background: none; border: 0; cursor: pointer; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; position: relative; transition: transform .12s; }
.np-ctrls button:active { transform: scale(.88); }
.np-ctrls svg { width: 30px; height: 30px; fill: #fff; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.np-ctrls .skip svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.np-ctrls .skip text { fill: #fff; stroke: none; font: 700 7px -apple-system, BlinkMacSystemFont, sans-serif; }
.np-ctrls .play { width: 74px; height: 74px; background: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--np) 50%, transparent); }
.np-ctrls .play svg { fill: #111; stroke: #111; width: 32px; height: 32px; }
.np-ctrls .play .i-play svg { margin-left: 4px; }
.np-ctrls .play .i-play { display: grid; }
.np-ctrls .play .i-pause, body.playing .np-ctrls .play .i-play { display: none; }
body.playing .np-ctrls .play .i-pause { display: grid; }
body.preparing .np-ctrls .play, body.buffering .np-ctrls .play { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--np) 30%, transparent); } }

.np-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mode-btn { padding: 0 14px; font-size: 13px; }
.tool { height: 38px; min-width: 38px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; font-weight: 700; color: #fff; }
.tool svg { width: 19px; height: 19px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool.on { background: color-mix(in srgb, var(--np) 40%, transparent); }
.tool.on svg { stroke: #fff; }
.tool span:empty { display: none; }
.tool.rep { position: relative; }
.tool.rep i { display: none; position: absolute; top: 5px; right: 7px; font: 800 9px/1 sans-serif; font-style: normal; color: #fff; }
.tool.rep.one i { display: block; }

@media (max-height: 700px) {
  #np { --d: min(58vw, 34vh, 300px); --s: min(62vw, 36vh, 320px); }
  .np-ctrls .play { width: 62px; height: 62px; }
}

/* ---- feuille du bas */
#sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 78vh; overflow-y: auto;
  padding: 6px 16px calc(env(safe-area-inset-bottom) + 18px); border-radius: 20px 20px 0 0;
  background: #1b1b24; box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
#sheet.on { pointer-events: auto; }
#sheet.on .sheet-bg { opacity: 1; }
#sheet.on .sheet-panel { transform: none; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); margin: 4px auto 10px; }
.sheet-panel h3 { margin: 4px 0 12px; font-size: 18px; }
.sheet-panel h3 small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.menu { display: flex; flex-direction: column; }
.menu > * { text-align: left; padding: 14px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-decoration: none; font-size: 16px; }
.menu > *:active { background: var(--panel-2); }
.menu .danger { color: #ff6b6b; }
.queue { margin-top: 0; }
.picker .row { font-size: 15px; }
.pick-head { position: sticky; top: -6px; z-index: 1; background: #1b1b24; padding: 4px 0 10px; margin-top: -4px; }
.pick-head h3 small { word-break: break-all; }
.pick-head .btn.wide { margin-top: 0; }
.pick-path { margin-top: 8px; }
.pick-path .field { font-size: 14px; padding: 9px 12px; }

/* ---- message */
#toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--mini-h) + 22px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .3s;
  padding: 10px 16px; border-radius: 999px; background: rgba(250, 250, 255, .95); color: #111; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
body.np-open #toast { bottom: auto; top: calc(env(safe-area-inset-top) + 62px); transform: translate(-50%, -12px); }
body.np-open #toast.on { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .spin, .logo, .eq b, .np-title.long span { animation: none !important; }
}

/* ---- fiches : à propos, crédits, liens */
.about { margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--line); }
.about h3, .sheet-panel h3.sub { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; font-weight: 700; }
.loading { animation: pulse-text 1.2s ease-in-out infinite; }
@keyframes pulse-text { 50% { opacity: .45; } }
.wiki { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 12px; }
.wiki-text p { margin: 10px 0; line-height: 1.55; }
.wiki-text.clamp { max-height: 9.5em; overflow: hidden; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.wiki-more { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; }
.wiki-more a { color: var(--accent); text-decoration: none; margin-left: auto; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 18px 0 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 550; overflow-wrap: anywhere; }
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 22px; }
.cgroup h4 { margin: 12px 0 6px; font-size: 14px; color: var(--accent); }
.cgroup ul, .members { list-style: none; margin: 0; padding: 0; }
.cgroup li, .members li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.cgroup li a, .members li a { font-weight: 650; text-decoration: none; }
.cgroup li span, .members li span { color: var(--muted); }
.cgroup li small, .members li small { color: var(--muted); opacity: .8; font-size: 12px; margin-left: auto; }
.cgroup li.extra { display: none; }
.cgroup.all li.extra { display: flex; }
.cgroup .linkish { margin-top: 6px; }
.chip.ext { text-decoration: none; }
.chip.search { opacity: .75; border-style: dashed; }
.src { font-size: 12px; color: var(--muted); margin-top: 22px; }
.qpill.dark { background: var(--panel-2); }

/* ---- accès à distance */
.remote-state { display: grid; gap: 6px; margin: 4px 0 14px; }
.remote-state:empty { display: none; }
.rs-line { display: flex; gap: 8px; font-size: 14px; align-items: flex-start; }
.rs-line > span { width: 18px; flex: none; text-align: center; }
.rs-line.good > span { color: #7fd18b; }
.rs-line.bad > span { color: var(--accent); }
.rs-url { font-size: 14px; margin: 6px 0 0; word-break: break-all; }
.rs-url a { color: var(--accent); }

/* ---- pochettes trouvées en ligne, à découvrir */
.discover-tile { background: linear-gradient(135deg, color-mix(in srgb, #3fb8ff 26%, var(--panel)), var(--panel)); }
.find-cover { position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
  padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.cover-cand { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.cover-cand img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.cover-cand small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.cover-cand small b { color: var(--text); }
.cover-cand:hover img { outline: 2px solid var(--accent); }
.cover-cand.busy { opacity: .5; pointer-events: none; }
.disc-card .sleeve img { filter: saturate(.92); }
h2 a.artist-link { margin-left: 0; font-size: inherit; font-weight: inherit; color: var(--text); text-decoration: none; }
.missing { margin-top: 10px; }

/* ---- connexion perdue */
.big-emo { font-size: 54px; margin: 0 0 6px; }
body.offline .np-ctrls .play, body.offline #mini { animation: pulse 1.2s ease-in-out infinite; }
body.offline .times .state::after { content: "connexion perdue…"; }

/* ---- musiques de travail */
.work-tile { background: linear-gradient(135deg, color-mix(in srgb, #7fd18b 24%, var(--panel)), var(--panel)); }
.work-filters { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 10px; }
.work-filters select { min-width: 0; }
.wtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wtags i { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.chip small { opacity: .6; }
.use-form, .tag-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.use-form .field, .tag-form .field { flex: 1; min-width: 130px; padding: 9px 12px; }
.use-form input[type=date] { flex: 0 0 150px; }