/* ============================================================
   L'EFFET CLIQUET — Page Podcast (/podcast) — DA claire rosé
   Feuille AUTOSUFFISANTE : ne dépend pas d'accueil.css. Les règles
   réutilisées par la page podcast du site dirigeants (.media-card,
   .media-thumb, .media-play, .media-body, .media-date, .media-title,
   .section-dark, .block-h, .pill, .content) sont reprises ICI et
   recolorées vers la DA claire (toutes les couleurs viennent de
   theme.css). Le shell (header/footer/fond WebGL rosé/grain) est
   injecté par site.js : on ne décrit que le contenu du <main>.
   ============================================================ */

/* ---- Hero : photo plein largeur, sous le header translucide ----
   main porte un padding-top (header fixe) ; on l'annule par un
   margin-top négatif pour que la photo monte jusqu'en haut, le header
   translucide se superposant au sommet de l'image. Ratio 16:9 préservé. */
.podcast-hero {
  position: relative;
  width: 100%;
  margin-top: -80px;
  line-height: 0; /* supprime l'espace sous l'img inline */
}
.podcast-hero img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pas de voile : la photo (déjà traitée, bords fondus) se pose directement sur
   le fond rosé. La lisibilité du titre est assurée par sa couleur + un halo clair
   sur le TEXTE uniquement (voir .podcast-hero-raf / -label), pas par un calque. */
/* Bloc titre superposé, centré, dans le tiers bas de la photo */
.podcast-hero-title {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
/* « R.A.F » : titre hero (Inter 800), aubergine foncé, net et plat — aucun
   effet lumineux/halo (pas de text-shadow). */
.podcast-hero-raf {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(72px, 16vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  margin: 0;
}
/* « LE PODCAST » : label framboise sous le titre, net, sans halo. */
.podcast-hero-label {
  margin-top: clamp(6px, 1vw, 14px);
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* Mobile (≤980px) : le header passe opaque/visible ; on remonte beaucoup
   moins fort pour ne pas faire manger la photo par le header. */
@media (max-width: 980px) {
  .podcast-hero { margin-top: -16px; }
}

/* ---- Présentation + pilule YouTube, centrées sous la photo ---- */
.podcast-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 8px;
  text-align: center;
}
.podcast-intro p {
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 32px;
}

/* ---- Pilule CTA (reprise de .pill, recolorée accent framboise) ---- */
.pill {
  display: inline-block;
  margin-top: 32px;
  padding: 15px 36px;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 36px -10px rgba(214, 51, 108, 0.55);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.pill:hover {
  transform: translateY(-2px);
  background: var(--accent-hover);
  box-shadow: 0 16px 48px -10px rgba(214, 51, 108, 0.6);
}

/* ---- Section épisodes ----
   .section-dark du site dirigeants est un bloc NOIR centré. Sur cliquet,
   plus de fond sombre : la section est transparente (le shader rosé passe
   derrière), texte sombre. On garde le comportement flex centré et on
   passe en column pour empiler titre puis grille. */
.section-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 110px 40px;
}
.section-dark .content { position: relative; z-index: 1; }
.block-h {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
}

.podcast-episodes { flex-direction: column; padding-top: 40px; }
.podcast-episodes .block-h { margin-bottom: 36px; text-align: center; }

/* Grille 3x3 : 3 -> 2 -> 1 col. */
.podcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .podcast-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .podcast-grid { grid-template-columns: 1fr; }
}

/* Message de repli (grille remplie dynamiquement par podcast.js). */
.podcast-grid-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-muted);
  font-size: clamp(14px, 1.2vw, 16px);
  padding: 20px 0;
}

/* ---- Carte épisode (reprise de .media-card & co, recolorée) ----
   Surface blanche translucide + ombre douce sombre pour se détacher
   du shader rosé. */
.media-card {
  background: var(--card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  display: block;
  box-shadow: 0 10px 40px rgba(43, 23, 33, 0.12);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.media-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(43, 23, 33, 0.18);
}
.media-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f2dbe0, #e0b8c7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.media-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-body { padding: 16px 18px 20px; }
.media-date {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.media-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Bouton « play » framboise centré sur la vignette */
.media-play {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 100px;
  background: rgba(214, 51, 108, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-play::after {
  content: '';
  border-left: 13px solid var(--accent);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}

/* Responsive : réduit le padding de section sur mobile (parité dirigeants). */
@media (max-width: 700px) {
  .section-dark { padding: 72px 22px; }
}