/* =========================================================================
   Page audio-vidéo + lecteur audio custom
   ========================================================================= */

.np-av__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: var(--space-3) 0 var(--space-4);
}

.np-av__list {
  display: grid;
  gap: var(--space-7);
}

.np-av__item {
  border-block-end: 1px solid var(--np-border);
  padding-block-end: var(--space-6);
}
.np-av__item:last-child { border-block-end: 0; }

.np-av__item-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.np-av__item-title { font-family: var(--font-serif); font-size: 1.6rem; margin: 0; }
.np-av__item-meta {
  font-family: var(--font-sans); font-size: 13px;
  color: var(--np-ink-soft); margin: 0;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.np-av__item-desc { color: var(--np-ink-soft); margin: 0 0 var(--space-4); }

/* ----- Lecteur audio custom ----- */
.np-audio {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--np-cream);
  border: 1px solid var(--np-border);
  padding: var(--space-3) var(--space-4);
}
.np-audio__play {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--np-ink); color: var(--np-cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.np-audio__play:hover { background: var(--np-accent); }
/* Le reset svg { display: block } écrase le default [hidden] : on le rétablit. */
.np-audio__play svg[hidden] { display: none; }
.np-audio__progress {
  position: relative;
  height: 4px;
  background: var(--np-border);
  border-radius: 2px;
  cursor: pointer;
}
.np-audio__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 0;
  background: var(--np-accent);
  border-radius: 2px;
}
.np-audio__time {
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--np-ink-soft);
  min-width: 90px;
  text-align: end;
}

/* ----- Vidéos ----- */
.np-av__videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) { .np-av__videos { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.np-av__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--np-ink);
}
.np-av__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }