/* ============================================================
   DANS LA NUIT, LE FEU — lecteur.css
   Section 1 : lecteur episodes (Peggy Gou x Spotify)
   ============================================================ */

.lecteur {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  padding: clamp(5rem, 11vh, 8rem) 0 8vh;
  overflow-x: clip;           /* jamais d'overflow-y : la verticale reste libre */
}

/* --- En-tete : eyebrow + switch saison --- */
.lecteur__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.lecteur__eyebrow {
  font-family: var(--f-corps);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ambre2);
}
.lecteur__title {
  font-family: var(--f-titre);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.5rem;
}

/* Switch saison */
.season-switch {
  display: inline-flex;
  gap: 0.4rem;
  border: 1px solid rgba(240, 232, 216, 0.18);
  border-radius: 100px;
  padding: 0.3rem;
}
.season-switch__btn {
  font-family: var(--f-corps);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--creme);
  background: none;
  border: none;
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s ease, background 0.4s var(--ease-bezier), color 0.3s ease;
}
.season-switch__btn[aria-selected="true"] {
  opacity: 1;
  color: var(--noir);
  background: var(--creme);
}

/* --- Carousel ---
   Grille à une cellule : les deux tracks (S1 / S2) sont EMPILÉES dans la même
   cellule (grid-area 1/1) pour l'animation de slide, mais restent DANS LE FLUX
   (pas d'absolute) : le carousel se dimensionne donc sur les cartes et ne peut
   pas s'effondrer sous elles -> les plateformes restent toujours en dessous. */
.lecteur__carousel {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  align-content: center;      /* centre les cartes quand il y a de la place */
  overflow-x: clip;           /* clippe seulement le slide horizontal */
}

.lecteur__track {
  grid-area: 1 / 1;           /* empilées au même endroit */
  display: flex;
  align-items: flex-start;    /* cartes alignées par le haut : vignettes alignées,
                                 un titre plus long descend au lieu de tout remonter */
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  overflow-x: auto;
  overflow-y: hidden;         /* le wheel vertical n'est pas capturé -> scroll page libre */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  cursor: pointer;
  touch-action: pan-x pan-y;  /* tactile : swipe horizontal -> carousel, vertical -> page (natif) */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  will-change: transform, opacity;
}
.lecteur__track::-webkit-scrollbar { display: none; }

/* La track inactive reste dans le flux (invisible) au lieu d'un display:none :
   la cellule de la grille garde la hauteur de la saison la plus haute, donc
   align-content:center ne recentre plus la carte -> pas de décalage au switch.
   display:flex annule le display:none que le navigateur applique à [hidden]. */
.lecteur__track[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}

/* Flèches masquées quand tout est visible (slides <= visibles) */
.lecteur__arrow.is-hidden { display: none; }

/* --- Carte episode --- */
.ep-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(260px, 30vw, 360px);
  display: flex;
  flex-direction: column;
  user-select: none;
}

.ep-card__art {
  position: relative;
  z-index: 60;                 /* vignettes exclues du grain global (grain propre) */
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--bleu-nuit);
}
.ep-card__art img {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-bezier);
}
.ep-card:hover .ep-card__art img { transform: scale(1.04); }

/* CTA + durée — ancrés à 57% de la hauteur de la vignette */
.ep-card__center {
  position: absolute;
  left: 0; right: 0;
  top: 57%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;          /* seul le bouton est cliquable */
}
/* Cercle ambre : ▶ par défaut, "ÉCOUTER" au hover (cross-fade) */
.ep-card__play {
  pointer-events: auto;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(66px, 7.2vw, 86px);   /* -20% */
  height: clamp(66px, 7.2vw, 86px);
  border-radius: 50%;
  border: 1px solid var(--ambre2);
  background: rgba(7, 13, 24, 0.18);
  backdrop-filter: blur(2px);
  color: var(--creme);
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Les deux états occupent le même centre */
.ep-card__icon,
.ep-card__play-label {
  grid-area: 1 / 1;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ep-card__icon {
  width: 26%;
  height: 26%;
  fill: currentColor;
}
.ep-card__play-label {
  font-family: var(--f-corps);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.92);
}
/* Hover / lecture : remplit en ambre, ▶ -> ÉCOUTER */
.ep-card__play:hover,
.ep-card__play.is-playing { background: var(--ambre2); color: var(--noir); }
.ep-card__play:hover .ep-card__icon,
.ep-card__play.is-playing .ep-card__icon { opacity: 0; transform: scale(1.1); }
.ep-card__play:hover .ep-card__play-label,
.ep-card__play.is-playing .ep-card__play-label { opacity: 1; transform: scale(1); }

.ep-card__dur {
  font-family: var(--f-corps);
  font-weight: 200;                        /* David Extra Light */
  font-size: 0.6rem;                       /* très petit */
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.8;
  text-shadow: 0 1px 10px rgba(7, 13, 24, 0.7);
}

/* Corps SOUS l'image : numéro grand + titre Awesome italic */
.ep-card__body {
  padding-top: clamp(0.9rem, 2.2vh, 1.4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: start;
}
.ep-card__num {
  font-family: var(--f-titre);
  font-weight: 100;
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  line-height: 0.74;
  color: var(--ambre2);
}
.ep-card__title {
  font-family: var(--f-cite);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(0.92rem, 1.3vw, 1.12rem);
  line-height: 1.3;
  color: var(--creme);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Carte "Bientot" (Saison 2) --- */
.ep-card--soon .ep-card__num { opacity: 0.6; }

/* --- Fleches navigation --- */
.lecteur__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 65;        /* au-dessus des vignettes (z 60) */
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  display: grid;
  place-items: center;
  background: rgba(7, 13, 24, 0.4);
  border: 1px solid rgba(240, 232, 216, 0.2);
  border-radius: 50%;
  color: var(--creme);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.lecteur__arrow:hover { background: var(--ambre2); border-color: var(--ambre2); color: var(--noir); }
.lecteur__arrow[disabled] { opacity: 0.2; pointer-events: none; }
.lecteur__arrow--prev { left: clamp(0.4rem, 1.5vw, 1.2rem); }
.lecteur__arrow--next { right: clamp(0.4rem, 1.5vw, 1.2rem); }
.lecteur__arrow svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Mobile : pas de flèches, on navigue au swipe tactile.
   !important car le JS (updateArrows) pilote leur display inline. */
@media (max-width: 760px) {
  .lecteur__arrow { display: none !important; }
}

/* --- Plateformes (bas de section) --- */
.lecteur__platforms {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.2rem, 3vh, 2rem) clamp(1.5rem, 4vw, 3rem) 0;
}
.lecteur__platforms-label {
  font-family: var(--f-corps);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.45;
}
.lecteur__platforms a {
  font-family: var(--f-corps);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.lecteur__platforms a:hover { opacity: 1; color: var(--ambre2); }