/* ==========================================================================
   Metrohm Records · dock, palette, matière, vinyles

   Rien d'ornemental ici sans raison : le grain donne une texture au noir,
   le disque qui sort de la pochette rappelle ce qu'on vend, le dock garde
   la musique en marche pendant qu'on lit. Tout se coupe proprement quand le
   visiteur a demandé moins d'animations.
   ========================================================================== */

/* ------------------------------------------------------------ le grain --- */
body:has(.grain)::after { display: none; }

.grain {
  position: fixed; inset: -120px; z-index: 61; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 700ms steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-14px, 8px); }
  40%  { transform: translate(9px, -12px); }
  60%  { transform: translate(-7px, -6px); }
  80%  { transform: translate(12px, 10px); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------- le dock --- */
body.has-dock { padding-bottom: 92px; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  transform: translateY(110%); transition: transform .42s cubic-bezier(.16,1,.3,1);
  /* elle ne part jamais : une fois posée, elle reste au bas de chaque page */
  background: rgba(6,6,6,.88); backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line);
}
.dock.is-open { transform: none; }
.dock::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: .5;
}
.dk-in {
  width: min(1240px, 94vw); margin-inline: auto;
  display: flex; align-items: center; gap: 16px; padding: 12px 0;
}
.dk-cover { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line-soft); flex: none; }
.dk-txt { min-width: 0; flex: none; width: clamp(120px, 20vw, 240px); }
.dk-title {
  display: block; font-family: var(--d); font-weight: 900; text-transform: uppercase;
  letter-spacing: .02em; font-size: .82rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-who {
  display: block; font-family: var(--d); font-size: .6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-player { flex: 1 1 auto; min-width: 0; }
.dk-frame { width: 100%; height: 42px; border: 0; display: block; }
.dk-act { display: flex; gap: 8px; flex: none; }
.dk-b {
  width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: #fff;
  font-size: .9rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.dk-b:hover { background: #fff; color: #000; }
.dk-star.is-on { background: #fff; color: #000; }

@media (max-width: 720px) {
  .dk-txt { display: none; }
  .dk-in { gap: 10px; }
  body.has-dock { padding-bottom: 78px; }
}

/* ---------------------------------------------------------- la palette --- */
.pal {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(40px, 12vh, 140px) 16px;
  animation: pal-in .18s ease-out;
}
@keyframes pal-in { from { opacity: 0; } to { opacity: 1; } }
.pal-box {
  width: min(680px, 100%); background: #060606; border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0,0,0,.9); display: flex; flex-direction: column; max-height: 70vh;
}
.pal-in {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  color: #fff; font-family: var(--d); font-size: 1.05rem; font-weight: 600; padding: 20px 22px;
}
.pal-in:focus { outline: none; }
.pal-in::placeholder { color: #555; font-weight: 400; }
.pal-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.pal-list li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 14px;
  padding: 11px 22px; cursor: pointer; border-left: 2px solid transparent;
}
.pal-list li b { font-family: var(--d); font-weight: 700; font-size: .92rem; }
.pal-list li span {
  grid-column: 1; font-size: .74rem; color: var(--grey);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-list li em {
  grid-row: 1 / span 2; font-style: normal; font-family: var(--d); font-size: .56rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  border: 1px solid var(--line-soft); padding: 3px 7px; align-self: center;
}
.pal-list li.sel { background: #111; border-left-color: #fff; }
.pal-list li.sel em { border-color: #fff; color: #fff; }
.pal-list li.empty { color: var(--grey); cursor: default; display: block; }
.pal-foot {
  display: flex; gap: 18px; padding: 12px 22px; border-top: 1px solid var(--line-soft);
  font-family: var(--d); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: #555;
}
body.pal-open { overflow: hidden; }

/* indice discret dans la barre de navigation */
.kbd-hint {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  padding: 5px 9px; font-family: var(--d); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey); background: transparent; cursor: pointer;
}
.kbd-hint:hover { color: #fff; border-color: #fff; }
@media (max-width: 900px) { .kbd-hint { display: none; } }

/* ------------------------------------------------------ mur de vinyles --- */
.disco-list li .cover { position: relative; display: block; }
.disco-list li .cover::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, #1a1a1a 0 17%, #000 17.5% 18.5%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.09) 0 1px, transparent 1px 4px),
    #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  transform: translateX(0) scale(.92); opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.disco-list li:hover .cover::after,
.disco-list li:focus-within .cover::after {
  transform: translateX(40%) scale(.96); opacity: 1;
  animation: spin 3.2s linear infinite;
}
@keyframes spin { to { transform: translateX(40%) scale(.96) rotate(360deg); } }
.disco-list li .cover img { position: relative; z-index: 1; }
.disco-list li { position: relative; }

/* bouton lecture posé sur la pochette */
.play-dot {
  position: absolute; inset: auto auto 8px 8px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #fff; background: rgba(0,0,0,.7); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: .6rem; z-index: 3;
  opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s, background .2s;
}
li:hover > .play-dot, li:focus-within > .play-dot { opacity: 1; transform: none; }
.play-dot:hover { background: #fff; color: #000; }

/* la ligne visée par la radio ou par la palette */
@keyframes row-hi {
  0%, 100% { background: transparent; }
  15%, 60% { background: rgba(255,255,255,.10); }
}
.row-hi { animation: row-hi 2.4s ease-out; outline: 1px solid rgba(255,255,255,.45); }
@media (prefers-reduced-motion: reduce) { .row-hi { animation: none; } }

/* le dock attend qu'on appuie sur play : Bandcamp ne démarre pas tout seul */
.dock.is-waiting .dk-who::after {
  content: " · press play"; color: #fff;
}
.dock.is-waiting .dk-player { outline: 1px solid rgba(255,255,255,.45); outline-offset: 2px; }

/* étoile du crate */
.star {
  border: 1px solid var(--line); background: transparent; color: var(--grey);
  font-size: .72rem; line-height: 1; padding: 6px 8px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.star:hover { color: #fff; border-color: #fff; }
.star.is-on { background: #fff; color: #000; border-color: #fff; }

/* ------------------------------------------------- mur des retours DJ ---- */
.wall-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.wall-q {
  flex: 1 1 240px; background: #0b0b0b; border: 1px solid var(--line); color: #fff;
  padding: 11px 14px; font-family: var(--b); font-size: .9rem;
}
.wall-q:focus { outline: none; border-color: #fff; }
.wall-notes { display: flex; gap: 6px; }
.wall-n {
  border: 1px solid var(--line); background: transparent; color: var(--grey); cursor: pointer;
  font-family: var(--d); font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: 9px 13px;
}
.wall-n:hover { color: #fff; border-color: #fff; }
.wall-n.is-on { background: #fff; color: #000; border-color: #fff; }
.wall-count {
  font-family: var(--d); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}

/* --------------------------------------------------- carte et timeline --- */
.map-stage {
  position: relative; border: 1px solid var(--line-soft); background:
    radial-gradient(circle at 50% 40%, #0d0d0d, #000 70%);
  height: min(76vh, 760px); overflow: hidden; cursor: grab;
}
.map-stage:active { cursor: grabbing; }
.map-stage canvas { display: block; width: 100%; height: 100%; }
.map-tip {
  position: absolute; pointer-events: none; background: #fff; color: #000; padding: 7px 11px;
  font-family: var(--d); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; transform: translate(-50%, -160%); white-space: nowrap; opacity: 0;
  transition: opacity .15s;
}
.map-tip.on { opacity: 1; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px;
  font-family: var(--d); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey);
}
.map-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.map-legend .a { background: #fff; border-radius: 50%; }
.map-legend .r { background: #777; }

.tl {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 24px; margin-top: 34px;
  scrollbar-width: thin;
}
.tl-year {
  flex: none; min-width: min(78vw, 340px); scroll-snap-align: start;
  border-left: 1px solid var(--line); padding: 0 24px 10px;
}
.tl-year > h3 {
  font-family: var(--d); font-weight: 900; font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .9; letter-spacing: -.03em; margin-bottom: 6px;
}
.tl-year > .n {
  font-family: var(--d); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey); display: block; margin-bottom: 22px;
}
.tl-rec { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.tl-rec img { width: 44px; height: 44px; object-fit: cover; flex: none; }
.tl-rec .no { width: 44px; height: 44px; flex: none; border: 1px solid var(--line-soft); }
.tl-rec b { display: block; font-family: var(--d); font-size: .78rem; font-weight: 700; }
.tl-rec span { display: block; font-size: .7rem; color: var(--grey); }

/* ------------------------------------------------------------- le crate -- */
.crate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.crate-card { border: 1px solid var(--line-soft); background: var(--panel); padding: 16px; }
.crate-card img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.crate-card b { font-family: var(--d); font-size: .84rem; display: block; }
.crate-card span { font-size: .72rem; color: var(--grey); display: block; margin-bottom: 12px; }
.crate-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.crate-empty { color: var(--grey); }
.crate-share { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.crate-share input {
  flex: 1 1 320px; background: #0b0b0b; border: 1px solid var(--line); color: var(--grey-2);
  padding: 11px 14px; font-family: var(--b); font-size: .82rem;
}

/* ------------------------------------------------------ moins d'effets --- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .disco-list li:hover .cover::after,
  .disco-list li:focus-within .cover::after { animation: none; transform: translateX(40%) scale(.96); }
  .dock { transition: none; }
  .pal { animation: none; }
}


/* ================================================== le lecteur du label ====
   Quand le son est hébergé par Metrohm, le dock devient une vraie platine :
   lecture, pause, piste suivante, barre de progression. Rien d'emprunté.
   ========================================================================== */
.dk-own { display: none; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.dock.is-own .dk-own { display: flex; }
.dock.is-own .dk-player { display: none; }
.dk-bar {
  flex: 1 1 auto; height: 4px; background: rgba(255,255,255,.14); cursor: pointer;
  position: relative; min-width: 80px;
}
.dk-bar::before {          /* zone de clic confortable sans épaissir la barre */
  content: ""; position: absolute; inset: -10px 0;
}
.dk-bar:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.dk-buf { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.28); }
.dk-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; }
.dk-head {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%) scale(0);
  transition: transform .18s;
}
.dk-bar:hover .dk-head, .dk-bar:focus-visible .dk-head { transform: translate(-50%, -50%) scale(1); }

/* le tampon : la barre respire pendant que ça charge */
.dock.is-buffering .dk-fill { animation: buf 1.1s ease-in-out infinite; }
@keyframes buf { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* le volume */
.dk-vol { display: flex; align-items: center; gap: 8px; flex: none; }
.dk-vr {
  width: 78px; height: 4px; appearance: none; background: rgba(255,255,255,.14);
  cursor: pointer; outline: none;
}
.dk-vr::-webkit-slider-thumb {
  appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; cursor: pointer;
}
.dk-vr::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; cursor: pointer;
}
.dock.is-muted .dk-mute { background: #fff; color: #000; }
@media (max-width: 1080px) { .dk-vol { display: none; } }
.dk-time {
  font-family: var(--d); font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  color: #fff; flex: none; min-width: 84px; text-align: right;
}
.dk-time i { font-style: normal; color: #555; margin-left: 8px; }
.dk-play { font-size: .72rem; }

/* la liste de morceaux, dans l'esprit des promos du label */
.trks { list-style: none; margin: 0; padding: 0; }
.trk {
  display: grid; grid-template-columns: 38px 34px 1fr 22px; align-items: center; gap: 14px;
  padding: 11px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
  transition: background .18s;
}
.trk:first-child { border-top: 1px solid var(--line-soft); }
.trk:hover, .trk:focus-visible { background: rgba(255,255,255,.045); outline: none; }
.trk:focus-visible { box-shadow: inset 2px 0 0 #fff; }
.trk-n {
  font-family: var(--d); font-weight: 900; font-size: 1.05rem; color: #3d3d3d;
  letter-spacing: -.02em; transition: color .18s;
}
.trk:hover .trk-n, .trk.is-playing .trk-n { color: #fff; }

/* le petit bouton de lecture, visible sur chaque ligne */
.trk-b {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s;
}
.trk:hover .trk-b { border-color: #fff; background: #fff; transform: scale(1.06); }
.trk-b .tri {
  width: 0; height: 0; margin-left: 2px;
  border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: border-left-color .2s;
}
.trk:hover .trk-b .tri { border-left-color: #000; }
.trk-b .bars { display: none; gap: 3px; }
.trk-b .bars i { display: block; width: 3px; height: 12px; background: #fff; }

/* en lecture : le bouton passe en pause, la ligne reste marquée */
.trk.is-playing .trk-b { background: #fff; border-color: #fff; }
.trk.is-playing .trk-b .tri { display: none; }
.trk.is-playing .trk-b .bars { display: flex; }
.trk.is-playing .trk-b .bars i { background: #000; }
.trk.is-playing.is-paused .trk-b .bars { display: none; }
.trk.is-playing.is-paused .trk-b .tri { display: block; border-left-color: #000; }

.trk-t { font-family: var(--d); font-weight: 600; font-size: .9rem; min-width: 0; }
.trk-p { justify-self: end; display: flex; gap: 2px; align-items: flex-end; height: 14px; opacity: 0; }
.trk.is-playing .trk-p { opacity: 1; }
.trk.is-playing .trk-p::before,
.trk.is-playing .trk-p::after {
  content: ""; width: 3px; background: #fff; height: 100%;
  animation: bars .7s ease-in-out infinite alternate;
}
.trk.is-playing .trk-p::after { animation-delay: .25s; }
.trk.is-playing.is-paused .trk-p::before,
.trk.is-playing.is-paused .trk-p::after { animation: none; height: 40%; opacity: .5; }
@keyframes bars { from { height: 35%; } to { height: 100%; } }

/* le bloc complet : pochette à gauche, morceaux à droite */
.rel-player { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.rel-player > figure { margin: 0; }
.rel-player img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line-soft); }
.rel-player .rp-meta { margin-top: 14px; }
.rel-player .rp-meta b { display: block; font-family: var(--d); font-weight: 900; text-transform: uppercase; font-size: .9rem; }
.rel-player .rp-meta span { font-size: .78rem; color: var(--grey); }
@media (max-width: 760px) { .rel-player { grid-template-columns: 1fr; } }

/* en attendant les fichiers */
.no-audio {
  font-family: var(--d); font-size: .58rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #4a4a4a;
}

@media (prefers-reduced-motion: reduce) {
  .trk, .trk:hover { transition: none; padding-left: 12px; }
  .trk.is-playing .trk-p { animation: none; }
}

/* le bouton compact d'une ligne de discographie */
.mini-play {
  display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  background: transparent; color: #fff; cursor: pointer; padding: 9px 14px;
  font-family: var(--d); font-size: .6rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; transition: background .2s, border-color .2s, color .2s;
}
.mini-play:hover { background: #fff; color: #000; border-color: #fff; }
.mini-play em {
  font-style: normal; color: var(--grey); letter-spacing: .14em; font-size: .55rem;
}
.mini-play:hover em { color: #333; }
.mp-tri {
  width: 0; height: 0; border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* ================================================== le moteur SoundCloud ===
   Le widget doit exister pour que le flux existe, mais c'est notre lecteur
   qui commande. On le garde hors du champ plutôt que de l'afficher, et on
   rend la politesse avec un lien vers la page du morceau.
   ========================================================================== */
.sc-engine {
  position: fixed; left: -9999px; bottom: 0; width: 320px; height: 120px;
  border: 0; opacity: .01; pointer-events: none;
}
.dk-credit {
  flex: none; font-family: var(--d); font-size: .55rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.dk-credit a { color: var(--grey); border-bottom: 1px solid var(--line); }
.dk-credit a:hover { color: #fff; border-color: #fff; }
.trks-src {
  margin-top: 14px; font-family: var(--d); font-size: .56rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #4a4a4a;
}
.trks-src a { color: var(--grey); border-bottom: 1px solid var(--line-soft); }
.trks-src a:hover { color: #fff; border-color: #fff; }
@media (max-width: 900px) { .dk-credit { display: none; } }

/* --------------------------------------------------- la platine au repos ---
   Avant le premier clic elle annonce simplement d'où vient le son. Les
   commandes sont là, en veille, plutôt qu'un rectangle vide.
   ------------------------------------------------------------------------ */
.dock.is-idle .dk-cover { object-fit: contain; padding: 8px; background: #0b0b0b; }
.dock.is-idle .dk-who { color: #fff; }
.dock.is-idle .dk-prev,
.dock.is-idle .dk-next,
.dock.is-idle .dk-star { opacity: .35; pointer-events: none; }
.dock.is-idle .dk-bar { opacity: .3; pointer-events: none; }

/* --------------------------------------------- pochettes cliquables --------
   Là où il y avait un lecteur emprunté : la pochette, le titre, et le lien
   vers la boutique. L'écoute se fait en bas de page.
   ------------------------------------------------------------------------ */
.cover-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }
.cover-card { display: block; position: relative; }
.cc-art { display: block; position: relative; }
/* le bouton posé sur la pochette : discret au repos, franc au survol */
.cc-play {
  position: absolute; left: 12px; bottom: 12px; width: 46px; height: 46px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.55);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s, background .2s, border-color .2s;
}
.cover-card:hover .cc-play,
.cover-card:focus-within .cc-play,
.cc-play.is-playing { opacity: 1; transform: none; }
.cc-play .tri { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
.cc-play .bars i { height: 16px; width: 4px; }
.cc-play.is-off { display: none; }
.cc-buy {
  display: inline-block; margin-top: 8px; font-family: var(--d); font-size: .55rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  border-bottom: 1px solid var(--line);
}
.cc-buy:hover { color: #fff; border-color: #fff; }
.cover-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--line-soft); transition: transform .4s cubic-bezier(.16,1,.3,1), filter .3s;
}
.cover-card:hover img { transform: scale(1.02); filter: saturate(1.15); }
.cover-card b { cursor: default; }
.cover-card b {
  display: block; margin-top: 12px; font-family: var(--d); font-weight: 700; font-size: .84rem;
  line-height: 1.25;
}
.cover-card .no-art { display: block; width: 100%; aspect-ratio: 1; background: #141414; border: 1px solid var(--line-soft); }
.cover-card.big b { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .cover-card:hover img { transform: none; } }

/* les liens d'achat et d'écoute d'une ligne de discographie */
.disco-list .buy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.disco-list .hear.stream { border-color: rgba(255,255,255,.4); color: #fff; }
.disco-list .hear.stream:hover { background: #fff; color: #000; }
.disco-list .play { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ------------------------------------------ le bouton d'une ligne de disque
   Un rond, un triangle, rien de plus. Il lance le disque dans la platine du
   bas de page. Éteint quand le disque n'est pas encore en ligne.
   ------------------------------------------------------------------------ */
.row-play {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.row-play:hover:not(:disabled) { background: #fff; border-color: #fff; transform: scale(1.07); }
.row-play .tri {
  width: 0; height: 0; margin-left: 2px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transition: border-left-color .2s;
}
.row-play:hover:not(:disabled) .tri { border-left-color: #000; }
.row-play .bars { display: none; gap: 3px; }
.row-play .bars i { display: block; width: 3px; height: 13px; background: #000; }
.row-play.is-playing { background: #fff; border-color: #fff; }
.row-play.is-playing .tri { display: none; }
.row-play.is-playing .bars { display: flex; }
.row-play.is-playing.is-paused .bars { display: none; }
.row-play.is-playing.is-paused .tri { display: block; border-left-color: #000; }
.row-play.is-off { border-color: rgba(255,255,255,.07); cursor: default; }
.row-play.is-off .tri { border-left-color: #333; }
@media (prefers-reduced-motion: reduce) { .row-play:hover { transform: none; } }

/* vignette de repli dans la timeline */
.tl-rec .no {
  display: grid; place-items: center;
  background: linear-gradient(160deg, #1a1a1a, #0b0b0b);
}
.tl-rec .no img { width: 20px; height: 20px; opacity: .7; }

.dock.no-cover .dk-cover { object-fit: contain; padding: 8px; background: #0b0b0b; }

/* ------------------------------------------------------- sets et dates ----
   Une date de concert, c'est une ligne : quand, où, et par où passer pour
   avoir sa place. Rien d'autre.
   ------------------------------------------------------------------------ */
.gigs { list-style: none; margin: 0 0 30px; padding: 0; }
.gig {
  display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 18px;
  padding: 16px 12px; border-bottom: 1px solid var(--line-soft);
  transition: background .18s, padding-left .18s;
}
.gig:first-child { border-top: 1px solid var(--line-soft); }
.gig:hover { background: rgba(255,255,255,.035); padding-left: 18px; }
.gig-d {
  font-family: var(--d); font-weight: 900; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.gig-w { font-family: var(--d); font-weight: 600; font-size: .92rem; color: var(--grey-2); }
.gig-b .btn { padding: 8px 14px; }
@media (max-width: 640px) {
  .gig { grid-template-columns: 1fr; gap: 6px; }
  .gig-b { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .gig:hover { padding-left: 12px; } }

/* =============================================== la fiche d'un artiste ====
   Des chiffres qu'on peut vérifier, une frise qui montre la trajectoire, et
   les gens croisés en chemin. Rien d'inventé, tout est recalculé.
   ======================================================================== */
.mini-frise {
  display: flex; gap: 0; margin: 34px 0 0; overflow-x: auto; padding-bottom: 8px;
  border-top: 1px solid var(--line-soft);
}
.mf-y {
  flex: none; min-width: 74px; padding: 16px 0 0; border-left: 1px solid var(--line-soft);
  padding-left: 12px;
}
.mf-y:first-child { border-left: 0; padding-left: 0; }
.mf-y > b {
  display: block; font-family: var(--d); font-weight: 900; font-size: .82rem;
  letter-spacing: .06em; color: var(--grey);
}
.mf-dots { display: flex; gap: 5px; margin-top: 10px; }
.mf-dot span {
  display: block; width: 11px; height: 11px; background: #4a4a4a;
  transition: background .2s, transform .2s;
}
.mf-dot:hover span { background: #fff; transform: scale(1.25); }

.crew { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 14px; max-width: 80ch; }
.crew a {
  font-family: var(--d); font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--line-soft); padding: 6px 11px; color: var(--grey-2);
  transition: border-color .2s, color .2s, background .2s;
}
.crew a:hover { border-color: #fff; color: #000; background: #fff; }

.onair { list-style: none; margin: 0; padding: 0; }
.onair li {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 20px;
  padding: 16px 12px; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.onair li:first-child { border-top: 1px solid var(--line-soft); }
.onair li b {
  font-family: var(--d); font-weight: 900; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.onair li span { color: var(--grey-2); font-size: .92rem; }
@media (max-width: 640px) { .onair li { grid-template-columns: 1fr; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .mf-dot:hover span { transform: none; } }

/* les sets du label, posés dans la section Sets & dates */
.own-mixes { margin-bottom: 34px; }
.own-mixes .trks { margin-bottom: 0; }
.own-mixes .trk-n { font-size: .82rem; letter-spacing: .04em; color: var(--grey); }
.own-mixes .trk:hover .trk-n, .own-mixes .trk.is-playing .trk-n { color: #fff; }
section.mix-only { border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------- toutes les écoutes -----
   Un bloc par disque, le titre du disque en petit au-dessus de ses morceaux.
   Les disques dont on n'a pas le son restent invisibles.
   ------------------------------------------------------------------------ */
.rel-tracks { margin-bottom: 44px; }
.rel-tracks:last-child { margin-bottom: 0; }
.rel-h {
  font-family: var(--d); font-weight: 900; text-transform: uppercase;
  font-size: 1rem; letter-spacing: -.01em; line-height: 1.15;
}
.rel-s {
  display: block; font-family: var(--d); font-size: .58rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  margin: 6px 0 16px;
}

/* l'en-tête d'un disque dans la liste d'écoute : pochette à gauche, titre
   et année à droite. La pochette découpe la page en disques plutôt qu'en
   une longue liste indifférenciée. */
.rel-hd { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.rel-hd .rel-s { margin: 5px 0 0; }
.rel-hx { min-width: 0; }
.rel-cov {
  width: 60px; height: 60px; flex: 0 0 60px; object-fit: cover; display: block;
  border: 1px solid var(--line-soft); background: #0a0a0a;
}
@media (min-width: 720px) {
  .rel-cov { width: 76px; height: 76px; flex-basis: 76px; }
}