:root {
  --vif: #8b5cf6;          
  --vif-doux: rgba(139, 92, 246, .22);
  --pulse: 0;              
}

.grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 214px), 1fr));
  gap: 16px;
}
.carte {
  position: relative; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--carte); border: 1px solid transparent;
  transition: border-color .25s, transform .25s;
  min-width: 0;
}
.carte:hover { transform: translateY(-3px); border-color: var(--vif-doux); }
.carte-img { position: relative; aspect-ratio: 1; overflow: hidden; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s, filter .4s; }
.carte:hover .carte-img img { transform: scale(1.06); }

.carte-voile {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(6,6,12,.1) 0%, rgba(6,6,12,.72) 100%);
  opacity: 0; transition: opacity .28s;
}
.carte:hover .carte-voile, .carte.joue .carte-voile { opacity: 1; }
.carte-play {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vif); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 30px -6px var(--vif);
  transform: scale(.86); transition: transform .25s;
}
.carte:hover .carte-play { transform: scale(1); }
.carte-play svg { width: 20px; height: 20px; }

.carte.joue {
  border-color: var(--vif);
  box-shadow: 0 0 0 1px var(--vif), 0 calc(14px + var(--pulse) * 22px) calc(30px + var(--pulse) * 40px) calc(-18px) var(--vif);
}
.carte.joue .carte-img img { filter: saturate(calc(1 + var(--pulse) * .5)) brightness(calc(1 + var(--pulse) * .12)); }

.carte-bas { padding: 12px 13px 14px; }
.carte-titre { font-weight: 650; font-size: 14.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-meta { font-size: 11.5px; color: var(--txt3); display: flex; align-items: center; gap: 7px; }
.carte-meta b { color: var(--vif); font-weight: 600; }
.carte-prix { margin-left: auto; color: var(--txt2); font-weight: 600; }

.onde { display: block; width: 100%; height: 34px; cursor: pointer; }
.carte .onde { height: 22px; margin-top: 9px; opacity: .55; }
.carte.joue .onde { opacity: 1; }

.lecteur {
  position: fixed; left: 14px; right: 14px; z-index: 65;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-radius: 20px; overflow: hidden;
  background: rgba(14, 14, 24, .74); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--vif-doux);
  box-shadow: 0 20px 60px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transform: translateY(160%); transition: transform .42s cubic-bezier(.2, .9, .2, 1), border-color .6s;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  gap: 15px; padding: 12px 16px;
}
body.charge .lecteur, body.joue .lecteur { transform: translateY(0); }

#viz-dock { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.lecteur > * { position: relative; z-index: 1; }

.lec-cover {
  width: 52px; height: 52px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
  transform: scale(calc(1 + var(--pulse) * .07));
  box-shadow: 0 0 calc(var(--pulse) * 26px) var(--vif);
  transition: box-shadow .12s linear;
}
.lec-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lec-play {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: var(--vif); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 22px -6px var(--vif);
  transition: transform .18s, background .5s;
}
.lec-play:active { transform: scale(.9); }
.lec-play svg { width: 18px; height: 18px; }

.lec-mid { min-width: 0; }
.lec-titre { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lec-sous { font-size: 11.5px; color: var(--txt3); margin-top: 1px; }
.lec-temps { font-size: 11.5px; color: var(--txt3); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1024px) {
  .lecteur { grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; padding: 10px 13px; }
  .lec-temps { display: none; }
  .lec-cover { width: 44px; height: 44px; border-radius: 11px; }
  .lec-play { width: 42px; height: 42px; }
  
  .lecteur { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 22px); }
  body { padding-bottom: calc(var(--dock-h) + 108px + env(safe-area-inset-bottom, 0px)); }
}

.hero-aura {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(45% 40% at 30% 55%, var(--vif) 0%, transparent 70%);
  opacity: calc(.05 + var(--pulse) * .17);
  transform: scale(calc(1 + var(--pulse) * .06));
  transition: opacity .1s linear;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .carte.joue, .lec-cover, .hero-aura { transform: none !important; box-shadow: none !important; }
}