/* Page « En audio » : ambiance studio, ondes animées, playlist. */

.audio-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, var(--nuit-verte), var(--nuit) 70%); padding-block: 3.5rem 2.5rem; }
.audio-hero h1 { text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.audio-hero .container { position: relative; z-index: 1; }

/* Égaliseur : barres qui ondulent (figées si « réduire les animations ») */
.onde { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.onde i { display: block; width: 5px; height: 100%; background: currentColor; border-radius: 3px; transform-origin: bottom; transform: scaleY(.25); animation: onde 1.2s ease-in-out infinite; }
.onde i:nth-child(2n) { animation-duration: .9s; animation-delay: -.2s; }
.onde i:nth-child(3n) { animation-duration: 1.5s; animation-delay: -.5s; }
.onde i:nth-child(5n) { animation-duration: 1.1s; animation-delay: -.8s; }
.onde i:nth-child(7n) { animation-duration: 1.7s; animation-delay: -.3s; }
@keyframes onde { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.onde-grande { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; width: 100%; justify-content: space-between; color: var(--thr-accent); opacity: .18; z-index: 0; padding-inline: 1rem; }
.onde-grande i { flex: 1; width: auto; }
@media (prefers-reduced-motion: reduce) {
  .onde i { animation: none; transform: scaleY(.55); }
  .onde i:nth-child(3n) { transform: scaleY(.9); }
  .onde i:nth-child(2n) { transform: scaleY(.35); }
}

/* Groupes : chacun avec le fond, la police et la forme de son genre */
.audio-groupe { background: var(--bg); color: var(--fg); padding-block: 2.5rem; }
.audio-groupe h2 { margin-bottom: 1rem; }
.audio-groupe[data-univers="feelgood"] h2 { font-style: italic; font-weight: 500; text-transform: none; letter-spacing: normal; }

/* Playlist : une ligne par livre audio (mise en page de base) */
.audio-liste { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.pochette { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 1rem; padding: .7rem; background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 6px; }
.pochette-visuel { width: 84px; aspect-ratio: 1; }
.pochette-visuel img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 6px 16px rgb(0 0 0 / .35); border-radius: 4px; }
.pochette-texte { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; }
.pochette-tome, .pochette h3, .pochette-message, .pochette .onde { grid-column: 1; }
.pochette-tome { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin: 0; }
.pochette h3 { font-size: 1.3rem; margin: 0; }
.pochette .onde { height: 26px; width: 160px; color: var(--accent); }
.pochette-message { font-weight: 600; margin: 0; }
.pochette .boutons { grid-column: 2; grid-row: 1 / span 3; }
.audio-groupe[data-univers="thriller"] .pochette h3 { text-transform: uppercase; letter-spacing: .03em; font-weight: 400; font-size: 1.6rem; }
.audio-groupe[data-univers="feelgood"] .pochette h3 { font-style: italic; text-transform: none; letter-spacing: normal; font-weight: 600; }
@media (max-width: 640px) {
  .pochette-texte { grid-template-columns: 1fr; }
  .pochette .boutons { grid-column: 1; grid-row: auto; }
}

/* Voix : collaboration mère-fille */
.voix-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.voix-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.voix .photo figcaption { font-size: 1rem; line-height: 1.2; }
@media (max-width: 800px) { .voix-grille { grid-template-columns: 1fr; gap: 1.5rem; } }