/* Cadence : page d'écoute. Thème sombre, un accent par album (variables --accent / --accent-2
   posées sur chaque section depuis le manifeste). */

@font-face {
  font-family: "Michroma";
  src: url("/fonts/michroma.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: oklch(12.5% 0.012 300);
  --bg-raise: oklch(17% 0.014 300);
  --ink: oklch(95% 0.008 90);
  --ink-2: oklch(74% 0.012 90);
  --line: oklch(100% 0 0 / 0.09);
  --gold: #e3bd6a;
  --accent: #d9b45a;
  --accent-2: #f3e2b0;
  --glow-a: #ff5ad9;
  --glow-b: #d9b45a;
  --font-display: "Michroma", "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 10;
  --z-player: 20;
  --z-modal: 25;
  --z-toast: 30;
  --player-h: 118px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font-body);
  min-height: 100dvh;
  overflow-x: clip;
}
body.has-player { padding-bottom: calc(var(--player-h) + env(safe-area-inset-bottom)); }
body.np-open { overflow: hidden; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
kbd {
  font: 0.8em/1 var(--font-body);
  padding: 0.15em 0.45em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg-raise);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: var(--z-toast);
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

main { overflow-x: clip; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 8rem) var(--gutter) clamp(3rem, 8vw, 7rem);
  min-height: min(88dvh, 920px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 40% at 78% 42%, color-mix(in oklch, var(--glow-b) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 35% at 60% 70%, color-mix(in oklch, var(--glow-a) 14%, transparent), transparent 70%);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero-title { margin: 0 0 1.5rem; }
.logo {
  display: block;
  width: min(100%, 34rem);
  height: auto;
  color: var(--gold);
  filter: drop-shadow(0 0 22px color-mix(in oklch, var(--gold) 30%, transparent));
}
.hero-lede {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0 0 2rem;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-sleeves {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1.2;
  margin-inline: auto;
}
.sleeve {
  position: absolute;
  top: 6%;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 90px -20px color-mix(in oklch, var(--accent) 60%, transparent),
    0 0 0 1px oklch(100% 0 0 / 0.1);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
  will-change: transform;
}
.sleeve img { width: 100%; height: 100%; object-fit: cover; }
.sleeve-back { left: 1%; transform: rotate(-7deg); z-index: 1; }
.sleeve-front { right: 1%; top: 18%; transform: rotate(5deg); z-index: 2; }
.sleeve:hover, .sleeve:focus-visible {
  transform: translateY(-10px) rotate(0deg) scale(1.03);
  z-index: 3;
  box-shadow:
    0 40px 110px -20px color-mix(in oklch, var(--accent) 80%, transparent),
    0 0 0 1px oklch(100% 0 0 / 0.2);
}

/* ---------------------------------------------------------------- albums */

.albums[aria-busy="true"] { min-height: 40vh; }

.album {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.album::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at var(--glow-x, 22%) 35%, color-mix(in oklch, var(--accent) 15%, transparent), transparent 70%);
}
@media (min-width: 900px) {
  .album {
    grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
    grid-template-areas: "art head" "art tracks";
    align-items: start;
  }
  .album:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    grid-template-areas: "head art" "tracks art";
    --glow-x: 78%;
  }
  .album-art { grid-area: art; position: sticky; top: 2rem; }
  .album-head { grid-area: head; }
  .tracks { grid-area: tracks; }
}
@media (max-width: 899px) {
  .album-art { max-width: 420px; }
}

.album-art img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 30px 100px -24px color-mix(in oklch, var(--accent) 55%, transparent),
    0 0 0 1px oklch(100% 0 0 / 0.1);
}

.album-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.album-by { margin: 0; font-size: 1.05rem; }
.album-feat, .album-date { color: var(--ink-2); }
.album-date::before { content: "· "; }
.album-meta {
  margin: 0.25rem 0 0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.album-desc { max-width: 60ch; color: var(--ink-2); margin: 1rem 0 0; text-wrap: pretty; }
.album-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn small { font-weight: 500; font-size: 0.8rem; opacity: 0.78; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 82%, white); }
.btn-ghost { background: transparent; border-color: oklch(100% 0 0 / 0.2); color: var(--ink); }
.btn-ghost:hover {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}

/* Petites pastilles : formats de telechargement et bascule MP3 / FLAC. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.42rem 0.55rem;
  border: 1px solid oklch(100% 0 0 / 0.18);
  border-radius: var(--radius);
  background: none;
  color: var(--ink-2);
  font: 600 0.72rem/1 var(--font-body);
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.dl-group { display: flex; gap: 0.35rem; }
.format-toggle {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.format-toggle .chip { border-color: transparent; }
.format-toggle .chip:hover { background: oklch(100% 0 0 / 0.06); }
.format-toggle[hidden] { display: none; }
@media (max-width: 599px) {
  .chip-dl svg { display: none; }
}

/* ---------------------------------------------------------------- tracks */

.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.track {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.25rem 0.35rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.15s;
}
.track:hover { background: oklch(100% 0 0 / 0.035); }

.track-play {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-2);
}
.track-play > * { grid-area: 1 / 1; }
.track-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.track-icon { display: none; width: 1.1rem; height: 1.1rem; color: var(--ink); }
.track-icon svg { width: 100%; height: 100%; fill: currentColor; }
.track-eq { display: none; align-items: flex-end; gap: 2px; height: 1rem; }
.track-eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: bottom;
  animation: eq 1s ease-in-out infinite;
}
.track-eq i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.85s; }
.track-eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.15s; }
.track-eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.95s; }
.track.is-paused .track-eq i { animation-play-state: paused; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

.track:hover .track-num, .track:focus-within .track-num { display: none; }
.track:hover .track-icon, .track:focus-within .track-icon { display: block; }
.track.is-current .track-num { display: none; }
.track.is-current .track-title { color: var(--accent); }
.track.is-current .track-icon { display: block; color: var(--accent); }
.track.is-current.is-playing .track-eq { display: flex; }
.track.is-current.is-playing .track-icon { display: none; }
.track.is-current.is-playing:hover .track-eq { display: none; }
.track.is-current.is-playing:hover .track-icon { display: block; }

.track-main { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.track-title {
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
.track-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.track-meta > :not(:first-child)::before { content: "·"; margin-right: 0.35rem; }
.track-meta button {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.track-meta button:hover { color: var(--ink); text-decoration-color: currentColor; }

.track-like {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-2);
  font: 600 0.8rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.track-like svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transform-origin: center;
}
/* Largeur reservee pour le compteur : le coeur ne bouge pas quand le premier like arrive. */
.track-like .like-count { display: inline-block; min-width: 2ch; text-align: left; }
.track-like:hover { color: var(--ink); background: oklch(100% 0 0 / 0.06); }
.track-like[aria-pressed="true"] { color: var(--accent); }
.track-like[aria-pressed="true"] svg { fill: currentColor; }
.track-like.is-pop svg { animation: pop 0.4s var(--ease-out); }
@keyframes pop {
  30% { transform: scale(1.35); }
}

/* --------------------------------------------------------- commentaires */

.dialog {
  width: min(92vw, 560px);
  max-height: min(84dvh, 720px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.dialog[open] { display: flex; animation: np-in 0.25s var(--ease-out) backwards; }
.dialog::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.dialog-title { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.dialog-sub { margin: 0.15rem 0 0; color: var(--ink-2); font-size: 0.85rem; }
.dialog .comments { overflow-y: auto; padding: 0.25rem 1.25rem; flex: 1 1 auto; }
.dialog .comments:empty { display: none; }
.dialog .comment-form { padding: 0.75rem 1.25rem 1.25rem; border-top: 1px solid var(--line); margin: 0; }
.c-transport { display: inline-flex; align-items: center; gap: 0.15rem; }
.c-transport .c-at { margin-left: 0.4rem; }
.mini-btn {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s;
}
.mini-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.mini-btn:hover { background: oklch(100% 0 0 / 0.08); }
.c-at { color: var(--ink-2); font-size: 0.85rem; }
.c-at b { color: var(--ink); font-variant-numeric: tabular-nums; }

.btn-comments { position: relative; }
.btn-comments:disabled { opacity: 0.35; cursor: default; }
.btn-comments:disabled:hover { background: none; }
.badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 700 0.62rem/1.1rem var(--font-body);
  text-align: center;
}
.badge[hidden] { display: none; }

.comments { list-style: none; margin: 0; padding: 0; }
.comment {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.comment:first-child { border-top: 0; }
.comment.is-pending { opacity: 0.7; }
.c-empty, .c-loading { padding: 0.6rem 0; color: var(--ink-2); font-size: 0.9rem; }
.c-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: oklch(48% 0.13 var(--hue, 300));
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  flex: none;
}
.c-main { min-width: 0; }
.c-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.c-pseudo { color: var(--ink); font-weight: 600; font-size: 0.9rem; }
.c-pos, .c-del {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.c-del { color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; }
.c-del:hover { color: var(--ink); text-decoration-color: currentColor; }
.c-pos:hover { text-decoration: underline; }
.c-badge {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
}
.c-body { margin: 0.15rem 0 0; overflow-wrap: anywhere; line-height: 1.5; }

.comment-form { display: grid; gap: 0.5rem; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input:not([type]) {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid oklch(100% 0 0 / 0.16);
  border-radius: var(--radius);
  background: oklch(100% 0 0 / 0.04);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
}
.comment-form textarea:focus, .comment-form input:focus { outline: none; border-color: var(--accent); }
.comment-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.comment-form-row input[name="pseudo"] { width: 11rem; flex: none; }
.comment-form-row .btn { margin-left: auto; }
.btn-sm { padding: 0.6rem 0.95rem; font-size: 0.85rem; }
.c-error { margin: 0; color: oklch(78% 0.16 25); font-size: 0.85rem; }
.c-error[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Reperes des commentaires sur les barres de progression, et bulle au passage de la lecture. */
.seek-wrap { position: relative; min-width: 0; }
.seek-marks { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.seek-mark {
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background-color 0.15s;
}
.seek-mark:hover, .seek-mark:focus-visible { transform: scale(1.5); background: var(--accent); }
.seek-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: min(360px, 80vw);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-raise);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  z-index: 1;
}
.seek-bubble[hidden] { display: none; }
.seek-bubble.is-on { opacity: 1; transform: translate(-50%, 0); }
.seek-bubble .c-avatar { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.seek-bubble .bubble-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.seek-bubble .bubble-text b { color: var(--accent); margin-right: 0.3rem; }

.noscript {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- footer */

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.foot p { margin: 0; }
.foot-keys kbd + kbd { margin-left: 2px; }

/* ---------------------------------------------------------------- player */

/* Le lecteur est un conteneur fixe transparent : la bande de visualisation flotte par-dessus la
   page, seul le panneau (progression + commandes) est opaque et cliquable. */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-player);
  pointer-events: none;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.55s var(--ease-out), visibility 0s 0.55s;
}
.player.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--ease-out);
}
.player-panel {
  pointer-events: auto;
  background: color-mix(in oklch, var(--bg-raise) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Bande de visualisation (spectre ou oscilloscope) : le site reste visible derriere, un leger
   degrade sombre monte du panneau pour garder le texte lisible sous les barres. */
.player-vis-wrap {
  padding-top: 2rem;
  background: linear-gradient(to top, color-mix(in oklch, var(--bg) 88%, transparent), color-mix(in oklch, var(--bg) 45%, transparent) 60%, transparent);
}
.player-vis-wrap:has(.player-vis[hidden]) { display: none; }
.player-vis-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.player-vis {
  display: block;
  width: 100%;
  height: 72px;
}
.player-vis[hidden] { display: none; }
@media (max-width: 759px) {
  .player-vis { height: 48px; }
}

.player-seek, .np-seek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.player-seek {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.45rem var(--gutter) 0;
}
.player-seek time, .np-seek time {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ink-2);
  min-width: 2.8em;
}
.player-seek time:first-child, .np-seek time:first-child { text-align: right; }

.player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cover meta controls";
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.35rem var(--gutter) 0.85rem;
}
@media (min-width: 760px) {
  .player-row {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "cover meta controls extra";
  }
}
.player-cover-btn {
  grid-area: cover;
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 4px;
  cursor: pointer;
}
.player-cover {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 8px 24px -6px color-mix(in oklch, var(--accent) 70%, transparent);
  transition: filter 0.2s;
}
.player-cover-btn svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.3rem;
  height: 1.3rem;
  fill: white;
  opacity: 0;
  transition: opacity 0.2s;
}
.player-cover-btn:hover .player-cover, .player-cover-btn:focus-visible .player-cover { filter: brightness(0.45); }
.player-cover-btn:hover svg, .player-cover-btn:focus-visible svg { opacity: 1; }
.player-meta { grid-area: meta; min-width: 0; }
.player-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-sub {
  color: var(--ink-2);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-controls { grid-area: controls; display: flex; align-items: center; gap: 0.25rem; }
.player-extra {
  grid-area: extra;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
}
.player-vol { display: flex; align-items: center; gap: 0.25rem; }
/* Mobile : les commandes passent sous la pochette et le titre, centrees, pour garder de la place
   au titre malgre les six boutons. */
@media (max-width: 759px) {
  .player-extra { display: none; }
  .player-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "cover meta" "controls controls";
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.6rem;
  }
  .player-controls { justify-content: center; gap: 0.5rem; }
  :root { --player-h: 168px; --vis-h: 48px; }
}
.btn-shuffle { color: var(--ink-2); }
.btn-shuffle:hover { color: var(--ink); }
.btn-shuffle[aria-pressed="true"] { color: var(--accent); }
@media (pointer: coarse) {
  .player-vol { display: none; }
}

.icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, transform 0.2s var(--ease-out);
}
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.icon-btn:hover { background: oklch(100% 0 0 / 0.08); }
.icon-btn:active { transform: scale(0.94); }
.btn-cast[hidden] { display: none; }
.btn-cast { color: var(--ink-2); }
.btn-cast:hover { color: var(--ink); }
.btn-cast.is-casting { color: var(--accent); }
.btn-play { width: 3rem; height: 3rem; background: var(--ink); color: var(--bg); }
.btn-play:hover { background: white; }
.btn-play svg { width: 1.4rem; height: 1.4rem; }
.btn-play.is-loading svg { display: none; }
.btn-play.is-loading::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* range inputs (seek + volume) */
input[type="range"].bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --p: 0%;
}
input[type="range"].bar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--p), oklch(100% 0 0 / 0.16) var(--p));
}
input[type="range"].bar::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: oklch(100% 0 0 / 0.16);
}
input[type="range"].bar::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"].bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 35%, transparent);
  opacity: 0;
  transition: opacity 0.15s;
}
input[type="range"].bar:hover::-webkit-slider-thumb,
input[type="range"].bar:focus-visible::-webkit-slider-thumb,
input[type="range"].bar:active::-webkit-slider-thumb { opacity: 1; }
input[type="range"].bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
input[type="range"].vol { width: 96px; }

/* ------------------------------------------------------- plein ecran (now playing) */

.nowplaying {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  animation: np-in 0.5s var(--ease-out) backwards;
}
.nowplaying[hidden] { display: none; }
.nowplaying::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 70%);
}
@keyframes np-in {
  from { opacity: 0; }
}
.np-vis {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.np-vis[hidden] { display: none; }
.np-body {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 2.5vh, 1.75rem);
  width: min(92vw, 560px);
  padding: clamp(3.5rem, 7vh, 5rem) 0 clamp(4rem, 9vh, 6rem);
}
/* Le visualiseur occupe le tiers bas de l'ecran ; sur un ecran court il passe sous les controles. */
.np-art img {
  width: min(64vw, 38vh, 420px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow:
    0 30px 100px -20px color-mix(in oklch, var(--accent) 70%, transparent),
    0 0 0 1px oklch(100% 0 0 / 0.12);
  animation: np-art 0.7s var(--ease-out) backwards;
}
@keyframes np-art {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
}
.np-text { text-align: center; }
.np-title {
  margin: 0;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.np-sub { margin: 0.3rem 0 0; color: var(--ink-2); }
.np-seek { width: 100%; }
.np-controls { display: flex; align-items: center; gap: 0.75rem; }
.np-play { width: 3.75rem; height: 3.75rem; }
.np-play svg { width: 1.7rem; height: 1.7rem; }
.np-close {
  position: absolute;
  z-index: 2;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}
.np-vis-mode {
  position: absolute;
  z-index: 2;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--bg) 75%, transparent);
}
.np-vis-mode[hidden] { display: none; }
.np-format {
  position: absolute;
  z-index: 2;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--bg) 75%, transparent);
}

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  /* Au-dessus du panneau et de la bande de spectre (72 px, 48 px sur mobile). */
  bottom: calc(var(--player-h) + var(--vis-h, 72px) + 1rem + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  transform: translate(-50%, 10px);
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink);
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- motion */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes sleeve-in {
  from { opacity: 0; transform: translateY(30px) rotate(0deg) scale(0.94); }
}
.hero-text > * {
  animation: rise 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.sleeve { animation: sleeve-in 1s var(--ease-out) backwards; }
.sleeve-back { animation-delay: 0.15s; }
.sleeve-front { animation-delay: 0.3s; }
.album.is-first .track {
  animation: rise 0.6s var(--ease-out) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 28ms);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .track-eq i { transform: scaleY(0.6); }
}