.audio-player-card{
  width: 100%;
  max-width: 720px;

  background: rgba(18, 22, 29, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;

  padding: clamp(14px, 2.2vw, 20px);
  display: grid;
  gap: 12px;

  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);

  position: relative;
  overflow: hidden;

  --text: rgba(255,255,255,0.92);
  --subtext: rgba(165, 172, 190, 0.85);
  --border: rgba(255, 255, 255, 0.08);

  --accent: #ff4ab4;
  --accent-glow: rgba(255,74,180,.25);
  --dot: #ff4ab4;
  --dot-glow: rgba(255, 74, 180, .12);

  --border-glow-a: rgba(255, 74, 180, 0.35);
  --border-glow-b: rgba(130, 92, 255, 0.18);

  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

/* bordure glow animée (comme ta soutient::after) */
.audio-player-card::after{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events:none;

  background: linear-gradient(135deg,
    var(--border-glow-a),
    var(--border-glow-b),
    rgba(0,0,0,0)
  );

  opacity: .55;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  padding: 1px;

  transition: opacity 220ms ease, transform 220ms ease;
}

.audio-player-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    0 26px 60px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.audio-player-card:hover::after{
  opacity: .9;
  transform: scale(1.01);
}

.audio-player-header{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.audio-player-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;

  background: var(--dot);
  box-shadow: 0 0 0 4px var(--dot-glow);

  flex: 0 0 auto;
}

.audio-player-title{
  color: var(--text);
  font-weight: 800;
  font-size: clamp(15px, 2vw, 16.5px);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.audio-player-subtitle{
  color: var(--subtext);
  font-size: clamp(12.5px, 1.7vw, 13px);
  line-height: 1.3;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-player-controls{
  display: grid;
  gap: 10px;
}

.audio-player-select-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.audio-player-select{
  width: 100%;
  appearance: none;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;

  padding: 10px 40px 10px 12px;
  color: var(--text);

  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.audio-player-select:focus{
  border-color: rgba(255, 74, 180, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 74, 180, 0.18);
  background: rgba(255,255,255,0.05);
}

.audio-player-selectWrap{
  position: relative;
  width: 100%;
}

/* chevron */
.audio-player-chevron{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;

  border-right: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);

  filter: drop-shadow(0 0 10px var(--accent-glow));
  pointer-events:none;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms ease;
}

.audio-player-card:hover .audio-player-chevron{
  transform: translateY(-50%) rotate(45deg) scale(1.06);
  filter: drop-shadow(0 0 14px var(--accent-glow));
}

/* lecteur audio : on garde natif, mais on peut améliorer l’interface */
.audio-player-audio{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #000000 0%,
    #ff3b30 45%,
    #ff7a18 100%
  );
  border: 1px solid rgba(255,255,255,0.06);
}

/* Evite une transition brutale sur certains navigateurs */
.audio-player-audio{
  transition: background 220ms ease;
}

/* WebKit (Chrome/Safari) : fond du panneau de controls */
.audio-player-audio audio::-webkit-media-controls-panel{
  background: linear-gradient(
    90deg,
    #000000 0%,
    #ff3b30 45%,
    #ff7a18 100%
  );
}

/* WebKit : arrondi du panneau */
.audio-player-audio audio::-webkit-media-controls-mute-button,
.audio-player-audio audio::-webkit-media-controls-play-button,
.audio-player-audio audio::-webkit-media-controls-fullscreen-button{
  /* optionnel: laisse la main au style natif */
}

/* Firefox : le style des contrôles est limité, mais le fond peut changer via l’élément audio */
.audio-player-audio audio{
  background: transparent;
}