.ap {
  --ap-bg: #FBF5EF;
  --ap-fg: #D79B5B;
  --ap-accent: #D79B5B;
  --ap-slider: #F5E6D6;

  display: flex;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 18px;
  background: var(--ap-bg);
  color: var(--ap-fg);
  border-radius: 4px;
}

.ap__btn {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ap__btn:focus-visible,
.ap input:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

/* Icônes selon l'état */
.ap__icon-pause, .ap__icon-muted { display: none; }
.ap.is-playing .ap__icon-play  { display: none; }
.ap.is-playing .ap__icon-pause { display: block; }
.ap.is-muted .ap__icon-vol   { display: none; }
.ap.is-muted .ap__icon-muted { display: block; }

.ap__title { font-size: .9rem; white-space: nowrap; }

/* Barre de progression + tampon */
.ap__seek {
  position: relative;
  flex: 1 1 160px;
  height: 20px;
}
.ap__bar {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-white);
  border-radius: 2px;
  overflow: hidden;
}
.ap__buffer,
.ap__played {
  position: absolute;
  inset: 0 auto 0 0;
}
.ap__buffer { width: calc(var(--buffered, 0) * 100%); background: var(--ap-slider); }
.ap__played { width: calc(var(--played, 0) * 100%);   background: var(--ap-accent); }

/* Input range transparent par-dessus */
.ap__seek input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ap__seek input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 20px; }
.ap__seek input[type="range"]::-moz-range-track { background: transparent; }
.ap__seek input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; margin-top: 4px;
  border-radius: 50%;
  background: var(--ap-fg);
  border: 0;
}
.ap__seek input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ap-fg);
  border: 0;
}

.ap__time { min-width: 64px; text-align: right; font-size: 12px; font-family: var(--font-family-sans);font-variant-numeric: tabular-nums; white-space: nowrap; }

.ap__volume { display: flex; align-items: center; gap: 6px; }
.ap__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 0;
}

/* Piste (track) */
.ap__vol::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ap-slider);
  border: 0;
}
.ap__vol::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ap-slider);
  border: 0;
}

/* Partie remplie (avant le curseur) */
.ap__vol::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ap-accent);
}

/* Curseur (thumb) */
.ap__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px; /* (12 - 4) / 2 pour centrer sur la piste */
  border-radius: 50%;
  background: var(--ap-fg);
  border: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ap__vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ap-fg);
  border: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Sur mobile le volume se règle avec les boutons de l'appareil */
@media (hover: none) {
  .ap__vol { display: none; }
}