/* Page des CD. La base (couleurs, typo, grain, navigation) est dans css/base.css. */

body { overflow: hidden; }

/* ─── Ouverture : grand MIX, un clic pour entrer ───────────── */

.intro { display: none; }

html.js .intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  cursor: progress;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* le rideau remonte d'un bloc */
  transition: translate 1.05s cubic-bezier(0.76, 0, 0.24, 1) 0.18s;
}

.intro.is-ready { cursor: pointer; }
.intro.is-leaving { translate: 0 -100%; pointer-events: none; }

/* silhouette de CD qui tourne lentement derrière le mot */
.intro__disc {
  position: absolute;
  width: min(92vmin, 70em);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 0 7%, rgba(236, 235, 230, 0.1) 7.2% 7.6%, transparent 7.8% 15.6%,
      rgba(236, 235, 230, 0.07) 15.8% 16.1%, transparent 16.3% 32.6%, rgba(236, 235, 230, 0.05) 32.8% 33%,
      transparent 33.2% 98.6%, rgba(236, 235, 230, 0.12) 98.8% 99.3%, transparent 99.5%),
    conic-gradient(from 20deg,
      transparent, rgba(255, 120, 210, 0.08) 8%, rgba(120, 210, 255, 0.1) 15%, rgba(255, 250, 170, 0.06) 21%, transparent 30%,
      transparent 50%, rgba(120, 255, 210, 0.07) 60%, rgba(170, 130, 255, 0.1) 68%, transparent 80%);
  mask-image: radial-gradient(circle, transparent 0 7%, #000 7.2%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 7%, #000 7.2%);
  opacity: 0;
  will-change: transform;
  animation: intro-fade 1.6s var(--ease) 0.2s forwards, intro-spin 22s linear infinite;
}

.intro__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.intro__word {
  display: flex;
  margin: 0;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 750;
  font-size: min(36vw, 50svh);
  line-height: 0.8;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.intro__mask {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.01em 0.02em;
}

.intro__mask > span {
  display: block;
  translate: 0 105%;
  transition: translate 1.1s var(--ease);
}

html.fonts-ready .intro__mask > span { translate: 0 0; }
html.fonts-ready .intro__mask:nth-child(2) > span { transition-delay: 0.07s; }
html.fonts-ready .intro__mask:nth-child(3) > span { transition-delay: 0.14s; }

/* prêt : les lettres s'écartent un peu au survol */
.intro.is-ready:not(.is-leaving):hover .intro__mask:first-child > span { translate: -0.035em 0; transition-delay: 0s; }
.intro.is-ready:not(.is-leaving):hover .intro__mask:last-child > span { translate: 0.035em 0; transition-delay: 0s; }

/* sortie : les lettres filent vers le haut avant le rideau */
.intro.is-leaving .intro__mask > span {
  translate: 0 -105%;
  transition: translate 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

.intro.is-leaving .intro__mask:nth-child(2) > span { transition-delay: 0.05s; }
.intro.is-leaving .intro__mask:nth-child(3) > span { transition-delay: 0.1s; }

.intro__by {
  margin-top: 0.9em;
  font-family: var(--font-label);
  font-size: max(11px, 1.05em);
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0;
  translate: 0 0.5em;
  transition: opacity 0.8s var(--ease) 0.5s, translate 1s var(--ease) 0.5s;
}

html.fonts-ready .intro__by { opacity: 1; translate: 0 0; }
.intro.is-leaving .intro__by { opacity: 0; transition: opacity 0.3s var(--ease); }

/* bas : progression réelle, puis l'invitation à entrer */
.intro__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(7svh, 3em);
  display: grid;
  place-items: center;
}

.intro__load,
.intro__enter { grid-area: 1 / 1; }

.intro__load {
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--font-label);
  font-size: max(11px, 0.8em);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s var(--ease);
}

.intro__bar {
  position: relative;
  width: min(16em, 50vw);
  height: 1px;
  overflow: hidden;
  background: var(--faint);
}

.intro__bar > span {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.intro__percent { min-width: 3.2em; }

.intro__enter {
  position: relative;
  padding: 1em 1.6em;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: max(11px, 0.85em);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(236, 235, 230, 0.3);
  opacity: 0;
  translate: 0 0.6em;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), translate 0.8s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* onde qui invite au clic */
.intro__enter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(236, 235, 230, 0.35);
  opacity: 0;
}

.intro.is-ready .intro__load { opacity: 0; }
.intro.is-ready .intro__enter { opacity: 1; translate: 0 0; pointer-events: auto; }
.intro.is-ready .intro__enter::before { animation: intro-wave 2.2s var(--ease) infinite 0.6s; }
.intro.is-ready .intro__enter:hover,
.intro__enter:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.intro.is-leaving .intro__enter { opacity: 0; transition: opacity 0.3s var(--ease); }

.intro__enter-touch { display: none; }

@media (hover: none) {
  .intro__enter-mouse { display: none; }
  .intro__enter-touch { display: inline; }
}

@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-spin { to { rotate: 360deg; } }

@keyframes intro-wave {
  0% { opacity: 0.8; scale: 1; }
  100% { opacity: 0; scale: 1.35 1.7; }
}

/* la barre ne s'anime qu'une fois le rideau levé */
html.js:not(.is-entered) .nav__list,
html.js:not(.is-entered) .nav__list > li,
html.js:not(.is-entered) .nav__by,
html.js:not(.is-entered) .nav__dot { animation-play-state: paused; }

/* Ce qui joue */
.nav__now {
  position: absolute;
  top: 0.6em;
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.75em;
  max-width: min(30em, 32vw);
  padding: 0.5em 0.9em 0.5em 0.8em;
  border-radius: 999px;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5em);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s 0.4s, background-color 0.3s var(--ease);
}

html.is-docked .nav__now {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s, background-color 0.3s var(--ease);
}

.nav__now:hover { background: #252525; }

.nav__now-text {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
}

.nav__now-album {
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: 0.75em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__now-track {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

/* ─── Menu Styles, filtre actif, recherche ─────────────────── */

.nav__link svg,
.nav__filter svg,
.search__field svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__chevron {
  width: 0.75em;
  margin-left: 0.4em;
  transition: rotate 0.4s var(--ease);
}

.nav__link[aria-expanded="true"] .nav__chevron { rotate: 180deg; }

.nav__search svg { width: 1.05em; height: 1.05em; }
.nav__search::after { display: none; }

/* cœur des favoris dans la barre */
.nav__favs svg { width: 1.05em; height: 1.05em; transition: fill 0.3s var(--ease), color 0.3s var(--ease); }
.nav__favs::after { display: none; }
.nav__favs[aria-pressed="true"] { color: var(--accent); }
.nav__favs[aria-pressed="true"] svg { fill: currentColor; }
.nav__favs.is-empty-hint { animation: nudge 0.45s var(--ease); }

@keyframes nudge {
  20%, 60% { translate: -3px 0; }
  40%, 80% { translate: 3px 0; }
}

/* le badge cède la place au panneau des styles */
html.is-styles-open .nav__filter { opacity: 0; pointer-events: none; }

/* badge du filtre actif, sous la barre */
.nav__filter {
  position: absolute;
  top: calc(100% + 0.3em);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.6em 0.35em 0.85em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  pointer-events: auto;
  translate: -50% 0;
  transition: scale 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav__filter[hidden] { display: flex; opacity: 0; scale: 0.8; pointer-events: none; }
.nav__filter:hover { scale: 1.04; }

.nav__filter-kind {
  font-family: var(--font-label);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.nav__filter-value { font-weight: 600; }
.nav__filter svg { width: 0.9em; height: 0.9em; }

/* Méga-menu des styles : tiroir à droite, une carte par style sur une seule colonne */
.styles {
  position: fixed;
  top: 3.9em;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 125;
  display: flex;
  flex-direction: column;
  width: min(25em, calc(100vw - 2 * var(--pad)));
  overflow: hidden;
  border-radius: 1.1em;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint), -2em 0 5em -1em rgba(0, 0, 0, 0.75);
  /* glisse depuis le bord droit */
  translate: calc(100% + var(--pad)) 0;
  visibility: hidden;
  transition: translate 0.55s var(--ease), visibility 0s 0.55s;
}

.styles.is-open {
  visibility: visible;
  translate: 0 0;
  transition: translate 0.65s var(--ease), visibility 0s;
}

.styles__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  padding: 1.1em 0.8em 0.9em 1.2em;
  border-bottom: 0.5px solid var(--faint);
}

.styles__title {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}

.styles__heading {
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 650;
  font-size: 1.55em;
  line-height: 1;
  text-transform: uppercase;
}

.styles__total { color: var(--muted); font-variant-numeric: tabular-nums; }

.styles__hint {
  margin-top: 0.45em;
  font-size: 0.88em;
  color: var(--muted);
}

.styles__close,
.legal__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  margin-top: -0.25em;
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), rotate 0.5s var(--ease);
}

.styles__close:hover,
.styles__close:focus-visible,
.legal__close:hover,
.legal__close:focus-visible { color: var(--text); background: rgba(236, 235, 230, 0.07); rotate: 90deg; outline: none; }
.legal__close { margin-top: 0; }
.styles__close svg,
.legal__close svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* la colonne défile seule ; le fondu du bas signale qu'il y a une suite */
.styles__list {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4em;
  min-height: 0;
  margin: 0;
  padding: 0.7em 0.7em 2.2em;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2em), transparent);
}

/* entrée en cascade à l'ouverture */
.styles__cell {
  flex: none;
  opacity: 0;
  translate: 1.5em 0;
  transition: opacity 0.35s var(--ease), translate 0.6s var(--ease);
}

.styles.is-open .styles__cell {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.12s + min(var(--i, 0), 14) * 0.025s);
}

.styles__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.95em;
  width: 100%;
  padding: 0.7em 2.9em 0.7em 0.8em;
  border-radius: 0.85em;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: var(--text);
  background: rgba(236, 235, 230, 0.03);
  box-shadow: inset 0 0 0 0.5px var(--faint);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), translate 0.45s var(--ease);
}

/* lueur aux couleurs des pochettes du style */
.styles__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 70%),
    radial-gradient(80% 90% at 100% 100%, color-mix(in srgb, var(--c2) 20%, transparent), transparent 70%);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.styles__card:hover,
.styles__card:focus-visible {
  translate: -0.25em 0;
  background: rgba(236, 235, 230, 0.06);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--c1) 60%, var(--faint));
  outline: none;
}

.styles__card:hover::before,
.styles__card:focus-visible::before { opacity: 1; }

/* éventail de mini-CD qui s'ouvre au survol */
.styles__discs {
  position: relative;
  display: block;
  flex: none;
  width: 7.1em;
  height: 3em;
}

.styles__disc {
  position: absolute;
  top: 0;
  left: calc(var(--n) * 1.2em);
  width: 3em;
  height: 3em;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2a;
  box-shadow: 0 0 0 0.5px rgba(236, 235, 230, 0.25), 0.25em 0.35em 0.8em -0.2em rgba(0, 0, 0, 0.7);
  z-index: calc(10 - var(--n));
  rotate: calc(var(--n) * -8deg);
  transition: left 0.55s var(--ease), rotate 0.8s var(--ease);
}

.styles__disc img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* trou central */
.styles__disc::after {
  content: "";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: 0 0 0 0.22em rgba(236, 235, 230, 0.35);
}

.styles__card:hover .styles__disc,
.styles__card:focus-visible .styles__disc {
  left: calc(var(--n) * 1.37em);
  rotate: calc(var(--n) * -8deg - 140deg);
}

.styles__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3em;
  min-width: 0;
}

.styles__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
}

.styles__name {
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 650;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.styles__count {
  font-family: var(--font-label);
  font-size: 0.8em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.styles__artists {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.86em;
  color: var(--muted);
}

/* style sélectionné : liseré et coche à la couleur du CD inséré */
.styles__check {
  position: absolute;
  top: 50%;
  right: 0.75em;
  margin-top: -0.8em;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  scale: 0;
  transition: scale 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.styles__check svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.styles__card[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.styles__card[aria-pressed="true"] .styles__check { scale: 1; }

/* Recherche */
.search {
  position: fixed;
  inset: 0;
  z-index: 135;
  visibility: hidden;
  transition: visibility 0s 0.4s;
}

.search.is-open {
  visibility: visible;
  transition: visibility 0s;
}

.search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.search.is-open .search__backdrop { opacity: 1; }

.search__panel {
  position: absolute;
  top: 12vh;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(44em, calc(100vw - 2 * var(--pad)));
  max-height: 72vh;
  border-radius: 1em;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint), 0 2em 5em -1em rgba(0, 0, 0, 0.8);
  overflow: hidden;
  translate: -50% 1em;
  scale: 0.98;
  opacity: 0;
  transition: opacity 0.3s var(--ease), translate 0.5s var(--ease), scale 0.5s var(--ease);
}

.search.is-open .search__panel {
  opacity: 1;
  translate: -50% 0;
  scale: 1;
}

.search__field {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1.1em;
  border-bottom: 0.5px solid var(--faint);
  color: var(--muted);
}

.search__field svg { flex-shrink: 0; width: 1.3em; height: 1.3em; }

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 600;
  font-size: 1.7em;
  letter-spacing: -0.01em;
  caret-color: var(--accent);
}

.search__input::placeholder { color: var(--muted); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__kbd {
  padding: 0.25em 0.5em;
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 0.5px var(--faint);
  font-family: var(--font-label);
  font-size: 0.7em;
}

.search__results {
  flex: 1;
  overflow-y: auto;
  padding: 0.4em 0.5em 0.6em;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}

.search__group {
  padding: 0.8em 0.6em 0.35em;
  color: var(--muted);
}

.search__item {
  display: flex;
  align-items: center;
  gap: 0.85em;
  width: 100%;
  padding: 0.55em 0.6em;
  border-radius: 0.6em;
  text-align: left;
  transition: background-color 0.2s var(--ease);
}

.search__item.is-active,
.search__item:hover { background: var(--hover); }

.search__thumb {
  flex-shrink: 0;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  overflow: hidden;
  background: #262626;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
}

.search__thumb img { width: 100%; height: 100%; object-fit: cover; }

.search__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.search__name,
.search__meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search__name { font-size: 1.1em; }
.search__meta { color: var(--muted); font-size: 0.9em; }

.search__kind {
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.search__play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--faint);
  opacity: 0;
  transition: opacity 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.search__play svg { width: 0.85em; height: 0.85em; fill: currentColor; }
.search__item.is-active .search__play,
.search__item:hover .search__play { opacity: 1; }
.search__play:hover { background: var(--accent); color: var(--bg); }

.search mark {
  background: none;
  color: var(--accent);
}

.search__empty {
  padding: 2em 1em;
  text-align: center;
  color: var(--muted);
}

.search__foot {
  padding: 0.7em 1.1em;
  border-top: 0.5px solid var(--faint);
  color: var(--muted);
}

/* ─── Index (panneau plein écran) ──────────────────────────── */

.index {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.index.is-open {
  visibility: visible;
  transition: visibility 0s;
}

.index__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.index.is-open .index__backdrop { opacity: 1; }

.index__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 86svh;
  padding: 4.25em var(--pad) 0.75em;
  background: var(--bg);
  border-bottom: 0.5px solid var(--faint);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--ease);
}

.index.is-open .index__panel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.75s var(--ease);
}

.index__head {
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding-bottom: 0.75em;
  color: var(--muted);
}

.index__total { flex: 1; }

.index__close {
  padding: 0.4em 0;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.index__close:hover { color: var(--text); }

.index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
}

.index__item {
  position: relative;
  display: flex;
  align-items: center;
  border-top: 0.5px solid var(--faint);
  opacity: 0;
  transform: translateY(0.8em);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), background-color 0.3s var(--ease);
  /* plus d'un millier de lignes (≈ 14 000 éléments) : seules celles à l'écran sont calculées,
     sinon chaque changement de classe sur la page (lecture, couleur) les recalcule toutes */
  content-visibility: auto;
  contain-intrinsic-size: auto 4.7em;
}

.index.is-open .index__item {
  opacity: 1;
  transform: none;
  /* cascade sur les premières lignes seulement : plus bas, elles sont déjà là quand on y arrive */
  transition-delay: calc(0.12s + min(var(--i, 0), 20) * 0.025s);
}

.index__item:hover { background: var(--hover); }

.index__row {
  display: grid;
  /* la dernière colonne tient aussi une période (« 1954–1977 ») pour les best of */
  grid-template-columns: 3.4em 2.8em minmax(0, 1fr) minmax(0, 16em) 6em;
  align-items: center;
  gap: 1em;
  flex: 1;
  min-width: 0;
  padding: 0.6em 0.5em;
  text-align: left;
}

.index__disc {
  position: relative;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  overflow: hidden;
  background: #222;
  box-shadow: 0 0 0 0.5px var(--faint);
  transition: transform 0.8s var(--ease);
}

.index__disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* trou central du disque */
.index__disc::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 0.25em rgba(236, 235, 230, 0.35);
}

.index__item:hover .index__disc { transform: rotate(-60deg); }
.index__item.is-playing .index__disc { animation: spin 2.4s linear infinite; }
html:not(.is-playing) .index__item.is-playing .index__disc { animation-play-state: paused; }

@keyframes spin {
  to { transform: rotate(-360deg); }
}

.index__num,
.index__year {
  font-size: 0.85em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.index__year { text-align: right; white-space: nowrap; }

.index__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 600;
  font-size: 2.1em;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  transition: transform 0.5s var(--ease);
}

.index__item:hover .index__title { transform: translateX(0.25em); }
.index__item.is-fav .index__title::before { content: "♥ "; color: var(--accent); }

.index__artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.index__item[aria-current="true"] .index__num,
.index__item[aria-current="true"] .index__artist { color: var(--text); }

.index__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text);
}

.index__play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.6em;
  height: 2.6em;
  margin: 0 0.5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--faint);
  color: var(--text);
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.index__item:hover .index__play,
.index__play:focus-visible,
.index__item.is-playing .index__play { opacity: 1; }

.index__play:hover {
  background: var(--text);
  color: var(--bg);
}

.index__play svg { width: 0.95em; height: 0.95em; fill: currentColor; }
.index__play .icon-pause { display: none; }
html.is-playing .index__item.is-playing .index__play .icon-pause { display: block; }
html.is-playing .index__item.is-playing .index__play .icon-play { display: none; }

/* ─── Hero / galerie ───────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  /* léger halo pour détacher les disques du fond */
  background: radial-gradient(ellipse 60% 55% at 50% 48%, #1d1d1d 0%, var(--bg) 70%);
}

.hero.is-dragging { cursor: grabbing; }
.hero.is-pointing { cursor: pointer; }

.canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.experience {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: var(--pad);
  pointer-events: none;
}

/* Voile sombre en dégradé derrière le panneau : il est au-dessus de la 3D, sous le texte.
   Il part du coin et s'efface progressivement, sans bord visible. */
.info-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(max(20.8333%, 20em) + 16em);
  height: 36em;
  pointer-events: none;
  background: radial-gradient(
    farthest-side at 0 0,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg) 90%, transparent) 42%,
    color-mix(in srgb, var(--bg) 55%, transparent) 68%,
    color-mix(in srgb, var(--bg) 18%, transparent) 86%,
    transparent 100%
  );
  transition: opacity 0.4s var(--ease);
}

/* Panneau d'infos */
.info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  width: 100%;
  max-width: max(20.8333%, 20em);
}

.info__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.info__actions {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* cœur : ajoute / retire le CD affiché des favoris */
.info__fav {
  display: grid;
  place-items: center;
  width: 2.45em;
  height: 2.45em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--muted);
  color: var(--muted);
  pointer-events: auto;
  transition: color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

.info__fav svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 0.3s var(--ease);
}

.info__fav:hover { color: var(--text); box-shadow: inset 0 0 0 0.5px var(--text); }
.info__fav[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }
.info__fav[aria-pressed="true"] svg { fill: currentColor; }
.info__fav.is-pop svg { animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes pop {
  0% { scale: 0.6; }
  60% { scale: 1.3; }
  100% { scale: 1; }
}

html:not(.is-ready) .info__fav { opacity: 0; }

.info__counter {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.info__rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.25em;
}

.info__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25em;
  padding: 0.38em 0;
}

.info__label {
  flex-shrink: 0;
  padding-top: 0.32em;
  color: var(--muted);
}

.divider {
  position: absolute;
  inset: 0 0 auto;
  height: 0.5px;
  background: var(--faint);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease) 0.2s;
}

.info__row:first-child .divider { background: var(--text); }

html:not(.is-ready) .divider { transform: scaleX(0); }

/* Bouton Écouter / Pause */
.info__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex-shrink: 0;
  padding: 0.25em 0.9em 0.25em 0.25em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--muted);
  pointer-events: auto;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.info__cta:hover {
  background: var(--text);
  color: var(--bg);
  box-shadow: inset 0 0 0 0.5px var(--text);
}

.info__cta-icon {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.info__cta:hover .info__cta-icon {
  background: var(--bg);
  color: var(--text);
}

.info__cta svg { width: 0.85em; height: 0.85em; fill: currentColor; }
.info__cta .icon-pause { display: none; }
.info__cta.is-pause .icon-pause { display: block; }
.info__cta.is-pause .icon-play { display: none; }

html:not(.is-ready) .info__cta { opacity: 0; }
.info__cta { transition-property: background-color, color, box-shadow, opacity; }

/* Pied en bas à gauche : aide + infos légales */
.foot {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 3;
  display: flex;
  align-items: center;
  transition: opacity 0.5s var(--ease);
}

.hint {
  display: flex;
  align-items: center;
  gap: 0.9em;
  max-width: 40em;
  margin-right: 0.9em;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), max-width 0.7s var(--ease), margin-right 0.7s var(--ease);
}

/* CD branché : l'aide se replie, le lien des infos glisse au bord */
html.is-docked .hint { max-width: 0; margin-right: 0; }

.foot__legal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.foot__legal svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

.foot__legal::after {
  content: "";
  position: absolute;
  left: 1.75em;
  right: 0;
  bottom: 0.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease);
}

.foot__legal:hover,
.foot__legal:focus-visible,
.foot__legal[aria-expanded="true"] { color: var(--text); outline: none; }

.foot__legal:hover::after,
.foot__legal:focus-visible::after,
.foot__legal[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }

.foot__sep { flex: none; margin: 0 0.9em; }

/* lien vers la page artistes : un peu plus visible, la flèche avance au survol */
.foot__artist {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0;
  color: var(--text);
}

.foot__artist svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.5s var(--ease);
}

.foot__artist:hover svg,
.foot__artist:focus-visible svg { translate: 0.3em 0; }

.foot__artist::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.6em;
  bottom: 0.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease);
}

.foot__artist:hover::after,
.foot__artist:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Fenêtre des infos légales, au-dessus du lien */
.legal {
  position: fixed;
  left: var(--pad);
  bottom: calc(var(--pad) + 2.6em);
  z-index: 128;
  width: min(29em, calc(100vw - 2 * var(--pad)));
  max-height: calc(100svh - 7.5em);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
  padding: 1.1em 1.25em 1.15em;
  border-radius: 1.1em;
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 0.5px var(--faint), 0 2em 4em -1em rgba(0, 0, 0, 0.8);
  outline: none;
  transform-origin: 0 100%;
  opacity: 0;
  scale: 0.97;
  translate: 0 0.6em;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), translate 0.5s var(--ease), scale 0.5s var(--ease), visibility 0s 0.3s;
}

.legal.is-open {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity 0.3s var(--ease), translate 0.5s var(--ease), scale 0.5s var(--ease), visibility 0s;
}

.legal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.9em;
}

.legal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 650;
  font-size: 1.55em;
  line-height: 1;
  text-transform: uppercase;
}

.legal__list {
  display: grid;
  gap: 0.85em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__item {
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.legal__item strong {
  display: block;
  margin-bottom: 0.15em;
  font-weight: 600;
  color: var(--text);
}

.legal a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s var(--ease);
}

.legal a:hover,
.legal a:focus-visible { text-decoration-color: var(--accent); outline: none; }

.legal__cookies {
  display: block;
  margin-top: 0.5em;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s var(--ease);
}

.legal__cookies:hover { text-decoration-color: var(--accent); }

.legal__foot {
  margin: 1em 0 0;
  padding-top: 0.8em;
  border-top: 0.5px solid var(--faint);
  color: var(--muted);
}

.hint__sep {
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  background: var(--faint);
}

html:not(.is-ready) .foot,
html.is-docked .hint { opacity: 0; }

/* Pochette du CD sélectionné : grande, en bas à droite, fondue vers le centre */
.backdrop {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(86svh, 64vw);
  aspect-ratio: 1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(farthest-corner at 100% 100%, #000 18%, rgba(0, 0, 0, 0.6) 44%, transparent 76%);
  mask-image: radial-gradient(farthest-corner at 100% 100%, #000 18%, rgba(0, 0, 0, 0.6) 44%, transparent 76%);
}

.backdrop canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.backdrop canvas.is-shown { opacity: 0.55; }

/* ─── Ambiance (CD inséré) ─────────────────────────────────── */

/* Tout ce qui bouge ici est animé en opacity / scale : le GPU s'en charge sans repeindre. */
.ambient {
  --dock-x: 50%;
  --dock-y: 100%;
  --dock-r: 15vh;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__wash,
.ambient__glow {
  position: absolute;
  opacity: 0;
  will-change: opacity, scale;
}

.ambient__wash {
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at var(--dock-x) 105%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
}

.ambient__glow {
  left: var(--dock-x);
  top: var(--dock-y);
  width: calc(var(--dock-r) * 5.2);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 36%, transparent 68%);
}

.ripple {
  position: absolute;
  left: var(--dock-x);
  top: var(--dock-y);
  width: calc(var(--dock-r) * 2.08);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 1.4em color-mix(in srgb, var(--accent) 25%, transparent);
  animation: ripple var(--dur, 1.5s) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
  will-change: scale, opacity;
}

.ripple.is-strong { --to: 3.4; border-width: 2px; }
.ripple.is-insert { --to: 9; --dur: 2.4s; border-width: 3px; }

@keyframes ripple {
  from { scale: 1; opacity: 0.85; }
  to { scale: var(--to, 2.6); opacity: 0; }
}

/* ─── Lecteur ──────────────────────────────────────────────── */

.player {
  --inset: 1em; /* marge intérieure de la carte */
  position: fixed;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 50;
  display: flex;
  flex-direction: column;
  /* la vidéo garde ses 356 × 200 px minimum, la marge s'ajoute autour */
  width: calc(max(356px, 26em) + 2 * var(--inset));
  max-height: calc(100svh - 2 * var(--pad) - 3.5em);
  padding: 0.35em var(--inset) var(--inset);
  /* les commandes restent lisibles même quand 1em est petit */
  font-size: max(11px, 1em);
  background: var(--bg-raised);
  border-radius: 1em;
  box-shadow: inset 0 0 0 0.5px var(--faint), 0 1.5em 3em -1em rgba(0, 0, 0, 0.7);
  clip-path: inset(100% 0 0 0 round 1em);
  visibility: hidden;
  transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
}

.player.is-open {
  clip-path: inset(0 0 0 0 round 1em);
  visibility: visible;
  transition: clip-path 0.7s var(--ease), visibility 0s;
}

.player__head {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em 0 0.75em;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

/* Mode discret : seule la vidéo reste à l'écran (YouTube impose 200 px minimum),
   le reste se déplie au survol, au clavier, ou d'un tap sur l'en-tête sur mobile. */
.player__details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease) 0.25s, opacity 0.35s var(--ease) 0.25s;
}

.player__details-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.player:hover .player__details,
.player:has(:focus-visible) .player__details,
.player.is-expanded .player__details {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0s;
}

.player:hover .player__head,
.player.is-expanded .player__head {
  color: var(--text);
}

@media (hover: none) {
  .player__head { cursor: pointer; }
}

.player__head > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: 1;
}

.player__count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* petit point qui pulse pendant la lecture */
.player__live {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
}

.player.is-playing .player__live {
  opacity: 1;
  animation: live 1.6s var(--ease) infinite;
}

@keyframes live {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.55); opacity: 0.45; }
}

.player__frame {
  position: relative;
  flex-shrink: 0;
  border-radius: 0.6em;
  overflow: hidden;
  /* l'API YouTube impose un lecteur d'au moins 200 px de haut */
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: #0a0a0a;
}

.player__frame iframe,
.player__frame > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__meta {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.4em 0.1em 0.3em;
}

.player__track,
.player__author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__author { color: var(--muted); }

.player__error { color: #ff8a80; }

/* Barre de progression */
.player__progress { padding: 1.1em 0.1em 0.2em; }

.player__bar {
  position: relative;
  height: 1em;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

.player__bar::before,
.player__bar-fill {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}

.player__bar::before {
  right: 0;
  background: var(--faint);
}

.player__bar-fill {
  width: calc(var(--p, 0) * 100%);
  background: var(--text);
}

/* le curseur n'apparaît qu'au survol, comme un repère de montage */
.player__bar-fill::after {
  content: "";
  position: absolute;
  right: -0.35em;
  top: -0.35em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--text);
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}

.player__bar:hover .player__bar-fill::after,
.player__bar:focus-visible .player__bar-fill::after,
.player__bar.is-seeking .player__bar-fill::after {
  transform: scale(1);
}

.player__bar:hover::before { background: rgba(236, 235, 230, 0.25); }

/* direct : barre pleine, non cliquable, mention rouge */
.player.is-live .player__bar { cursor: default; }
.player.is-live .player__bar-fill::after { display: none; }
.player.is-live [data-player-time] { color: #ff5a5a; letter-spacing: 0.04em; }

.player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3em;
  font-size: 0.85em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Commandes */
.player__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0.75em 1.25em;
}

.player__icon,
.player__play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.player__icon {
  width: 2.6em;
  height: 2.6em;
}

.player__icon svg,
.player__play svg,
.player__list-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player__icon svg { width: 1.25em; height: 1.25em; }
.player svg .fill { fill: currentColor; stroke: none; }

.player__icon:hover { background: var(--hover); }
.player__icon:active,
.player__play:active { transform: scale(0.92); }

.player__icon[aria-pressed="false"][data-player-shuffle],
.player__icon[aria-pressed="false"][data-player-loop] { color: var(--muted); }

.player__icon[aria-pressed="true"] { position: relative; }

/* le point sous l'icône active, comme celui de la navigation */
.player__icon[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 0.15em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: currentColor;
}

.player__play {
  width: 3.9em;
  height: 3.9em;
  background: var(--text);
  color: var(--bg);
}

.player__play:hover { transform: scale(1.06); }
.player__play svg { width: 1.3em; height: 1.3em; }
.player__play .icon-play { display: none; }
.player:not(.is-playing) .player__play .icon-play { display: block; }
.player:not(.is-playing) .player__play .icon-pause { display: none; }

/* Pied : titres + volume */
.player__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 0.5em 0.1em;
  border-top: 0.5px solid var(--faint);
}

.player__list-toggle {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0;
  font-family: var(--font-label);
  font-size: 0.75em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player__list-toggle svg {
  width: 1.2em;
  stroke-width: 1.6;
  transition: transform 0.4s var(--ease);
}

.player__list-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.player__volume {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.player__volume .icon-muted { display: none; }
.player__volume [aria-pressed="true"] .icon-muted { display: block; }
.player__volume [aria-pressed="true"] .icon-sound { display: none; }

.player__range {
  --v: 0.8;
  width: 6em;
  height: 1em;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.player__range::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--text) calc(var(--v) * 100%), var(--faint) 0);
}

.player__range::-moz-range-track {
  height: 1px;
  background: linear-gradient(to right, var(--text) calc(var(--v) * 100%), var(--faint) 0);
}

.player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.7em;
  height: 0.7em;
  margin-top: calc(-0.35em + 0.5px);
  border-radius: 50%;
  background: var(--text);
}

.player__range::-moz-range-thumb {
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-radius: 50%;
  background: var(--text);
}

/* Liste des titres */
.player__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--faint) transparent;
  max-height: 0;
  transition: max-height 0.6s var(--ease);
}

.player.is-list-open .player__list { max-height: min(17em, 32svh); }

/* jusqu'à 200 titres : seuls ceux à l'écran sont calculés */
.player__list li {
  content-visibility: auto;
  contain-intrinsic-size: auto 2.8em;
}

/* respiration entre les commandes dépliées et la vidéo */
.player__details-inner > :last-child { margin-bottom: 1.1em; }

.player__list button {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  align-items: baseline;
  width: 100%;
  padding: 0.7em 0.3em;
  text-align: left;
  border-top: 0.5px solid var(--faint);
  transition: background-color 0.3s var(--ease), padding 0.3s var(--ease);
}

.player__list button:hover { background: var(--hover); padding-left: 0.7em; }

.player__list .num {
  font-size: 0.85em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.player__list .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.player__list [aria-current="true"] .name {
  color: var(--text);
  font-family: var(--font-heading);
  font-stretch: 78%;
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.player__list [aria-current="true"] .num { color: var(--text); }

/* Mode réduit : une vignette 200 × 200, le minimum que YouTube autorise */
.player { transition: clip-path 0.5s var(--ease), visibility 0s 0.5s, width 0.6s var(--ease); }
.player.is-open { transition: clip-path 0.7s var(--ease), visibility 0s, width 0.6s var(--ease); }

.player__collapse svg { transition: rotate 0.5s var(--ease); }

.player.is-collapsed {
  --inset: 0.6em;
  width: calc(200px + 2 * var(--inset));
}

.player.is-collapsed .player__collapse svg { rotate: 180deg; }
.player.is-collapsed .player__label { display: none; }
.player.is-collapsed .player__details { display: none; }
.player.is-collapsed .player__head { gap: 0.4em; padding: 0.35em 0 0.5em; }

.player.is-collapsed .player__frame {
  aspect-ratio: 1;
  height: 200px;
}

/* Rythme : tempo, tap, synchro audio */
.player__beat {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.1em;
  border-top: 0.5px solid var(--faint);
}

.player__beat-label { color: var(--muted); }
.player__bpm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.player__bpm.is-free { color: var(--muted); }

/* vu-mètre des basses captées : preuve que la synchro entend la musique */
.player__meter {
  position: relative;
  width: 2.6em;
  height: 0.3em;
  border-radius: 999px;
  background: var(--faint);
  overflow: hidden;
}

.player__meter[hidden] { display: none; }

.player__meter i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--m, 0));
}

.player__chip {
  padding: 0.45em 0.8em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--faint);
  color: var(--muted);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), scale 0.15s var(--ease);
}

.player__chip:hover { color: var(--text); box-shadow: inset 0 0 0 0.5px var(--muted); }
.player__chip:active { scale: 0.94; }

.player__chip[aria-pressed="true"],
.player__chip.is-hit {
  background: var(--accent);
  color: var(--bg);
  box-shadow: none;
}

/* la teinte du CD inséré colore les éléments « vivants » du lecteur */
.player__bar-fill,
.player__bar-fill::after,
.player.is-playing .player__live { background: var(--accent); }
.player__play { background: var(--accent); }

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 991px) {
  .info { max-width: 50%; }
  .nav__now { max-width: 22em; }
  .index__row { grid-template-columns: 3.4em 2.4em minmax(0, 1fr) minmax(0, 11em) 5.5em; }
  .index__title { font-size: 1.7em; }
}

@media (max-width: 767px) {
  .nav__filter { top: auto; bottom: calc(100% + 0.4em); }
  .styles { top: var(--pad); bottom: 5.2em; width: calc(100vw - 2 * var(--pad)); }
  .styles__name { font-size: 1.35em; }
  .styles__hint, .search__foot { display: none; }
  .search__panel { top: var(--pad); max-height: 70svh; }
  .nav__now { display: none; }
  .index__panel { top: auto; bottom: 0; max-height: 80svh; padding-top: 1em; padding-bottom: 5em; clip-path: inset(100% 0 0 0); }
  .index__row { grid-template-columns: 3em 1fr; row-gap: 0.1em; }
  .index__disc { grid-row: span 2; width: 3em; height: 3em; }
  .index__num, .index__year { display: none; }
  .index__title { font-size: 1.5em; }
  .info { max-width: 100%; }
  .hint { display: none; }
  .backdrop { width: 100vw; }
  /* sur mobile, le lien des infos se pose juste au-dessus de la barre */
  .foot { bottom: calc(5.6em + env(safe-area-inset-bottom, 0px)); }
  .legal { bottom: calc(8.2em + env(safe-area-inset-bottom, 0px)); max-height: calc(100svh - 9.5em); }
  /* sur mobile, le lecteur passe en haut et laisse le bas au CD */
  .player { top: var(--pad); bottom: auto; left: var(--pad); right: var(--pad); width: auto; --inset: 0.75em; }
  .info { transition: opacity 0.4s var(--ease); }
  html.is-docked .info,
  html.is-docked .info-scrim { opacity: 0; }
  .info-scrim { width: 100%; height: 30em; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__disc { animation: intro-fade 0.6s forwards; }
  .backdrop canvas { transition-duration: 0.3s; }
  .intro__mask > span, .intro__by { transition: none; }
  html.js .intro { transition: opacity 0.45s ease; }
  .intro.is-leaving { translate: none; opacity: 0; }
  .intro.is-leaving .intro__mask > span { translate: 0 0; }
  .intro.is-ready .intro__enter::before { animation: none; }
  html.is-playing .eq i,
  .index__item.is-playing .index__disc { animation: none; }
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}