/* ===================================================================
   MARY FLEUREAU — Styles spécifiques aux PAGES BONUS
   À charger APRÈS styles.css. Ne redéfinit ni la nav, ni le footer,
   ni les boutons : uniquement les blocs propres aux pages bonus
   (playlist, content warnings).
   =================================================================== */

.bonus { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* En-tête */
.bonus-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.bonus-head .eyebrow { display: block; margin-bottom: .8rem; }
.bonus-head h1 { font-size: var(--fs-h2); color: var(--bone); }
.bonus-head p { color: var(--bone-dim); margin-top: .8rem; }

/* Bloc générique */
.bonus-block { max-width: 820px; margin: 0 auto clamp(2.6rem, 6vw, 4.2rem); }
.bonus-block:last-of-type { margin-bottom: 0; }
.bonus-block h2 { font-size: var(--fs-h2); color: var(--bone); text-align: center; margin-bottom: 1rem; }
.bonus-block h2 .accent { color: var(--blood); }
.bonus-lead { color: var(--bone-dim); text-align: center; max-width: 62ch; margin: 0 auto 1.6rem; line-height: 1.6; }

/* Playlist (embed Spotify) */
.playlist-embed { max-width: 720px; margin-inline: auto; }
.playlist-embed iframe {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; display: block;
}

/* Content warnings */
.cw-subtitle {
  font-family: var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-dim); font-size: var(--fs-label); text-align: center; margin-bottom: 1rem;
}
.cw-tags {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  max-width: 780px; margin: 0 auto;
}
.cw-tag {
  font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
  font-size: var(--fs-small); color: var(--bone);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blood);
  border-radius: var(--radius); padding: .5em .9em;
}
.cw-special {
  max-width: 62ch; margin: 1.8rem auto 0; color: var(--bone);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ember);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; line-height: 1.6;
}
.cw-special strong { color: var(--ember); font-weight: inherit; }
.cw-note {
  color: var(--bone-dim); font-style: italic; text-align: center;
  max-width: 62ch; margin: 1.8rem auto 0; line-height: 1.6;
}
.cw-note a { color: var(--ember); }
.cw-note a:hover { text-shadow: 0 0 14px rgba(246,201,69,.6); }

/* Bas de page : retour roman */
.bonus-foot {
  text-align: center; margin-top: clamp(2.6rem, 6vw, 4.2rem);
  padding-top: clamp(1.6rem, 4vw, 2.4rem); border-top: 1px solid var(--line);
}
.bonus-back {
  font-family: var(--display); letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem); color: var(--bone-dim);
  transition: color .2s ease;
}
.bonus-back:hover { color: var(--ember); }