/* ==========================================================
   Ulia.Radio — Styles de carrousel additionnels pour les blocs
   de la page d'accueil (module admin « Page d'accueil »).

   Mécanique commune à tous les styles "à plafond" (piste défilante,
   glisser souris/tactile, dégradé de fin, bouton "Suivant", carte
   "voir plus") : classes génériques .hp-carousel-* ci-dessous, pilotées
   par assets/js/homepage-styles.js. Chaque style n'a plus qu'à définir
   l'apparence de sa carte (préfixe propre : .video-*, .actu-*...).
   Chargé inconditionnellement (léger, n'affecte que ses propres classes).
   ========================================================== */

/* ===========================================================
   BASE COMMUNE — PISTE, DÉGRADÉ, BOUTON, CARTE "VOIR PLUS"
=========================================================== */

.hp-carousel {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* Remonte le contenu par-dessus le titre filigrane du bloc (voir
     .hp-block__title dans homepage-blocks.css). */
  margin-top: -10px;
  overflow: hidden;
}

/* Le titre filigrane rétrécit sur mobile : la superposition doit rétrécir
   avec lui, sinon le contenu recouvre le titre en entier. */
@media (max-width: 600px) {
  .hp-carousel { margin-top: -6px; }
}

.hp-carousel-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* auto (pas de restriction) : un doigt qui pose sur le carrousel doit
     pouvoir aussi bien faire défiler la piste horizontalement que continuer
     à faire défiler la page verticalement. "pan-x" seul (valeur précédente)
     indique au navigateur de ne JAMAIS traiter un geste vertical natif sur
     cet élément, ce qui bloquait tout le scroll de la page dès qu'un doigt
     passait sur un carrousel. "pan-x pan-y" (valeur intermédiaire testée)
     n'a pas suffi sur certains navigateurs mobiles — repli sur la valeur
     par défaut, la plus largement supportée. */
  touch-action: auto;
  user-select: none;
}

.hp-carousel-track::-webkit-scrollbar { display: none; }
.hp-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* Au-delà du plafond mobile, ces cartes n'existent que sur desktop — voir
   includes/homepage/styles/_carousel-shared.php (hp_carousel_item_class). */
@media (max-width: 900px) {
  .hp-carousel-item--desktop-only { display: none; }
}

/* ---------- Carte "voir plus" (au-delà du plafond) ---------- */

.hp-carousel-more {
  flex: 0 0 105px;
  width: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  background: #f0f0f0;
  color: var(--u-blue, #075bd8);
  text-decoration: none;
  text-align: center;
  font-size: 11px;
  line-height: 1.05;
  font-weight: 700;
  transition: background 0.2s ease;
}

.hp-carousel-more:hover { background: #e8e8e8; }
.hp-carousel-more-icon { color: var(--u-blue, #075bd8); font-size: 24px; }

/* ---------- Dégradé de fin + bouton "Suivant" (toujours visibles) ---------- */

.hp-carousel::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--u-page, #f3f4f6) 0%, transparent) 0%,
    color-mix(in srgb, var(--u-page, #f3f4f6) 32%, transparent) 24%,
    color-mix(in srgb, var(--u-page, #f3f4f6) 78%, transparent) 62%,
    var(--u-page, #f3f4f6) 100%);
  transition: opacity 0.25s ease;
}

/* Bloc en superposition sur le hero : fond translucide (voir
   .hp-block--overlap-hero) plutôt qu'opaque — le dégradé de fin de piste
   doit rester translucide lui aussi, sinon il tranche sur le hero visible
   en dessous. */
.hp-block--overlap-hero .hp-carousel::after {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--u-page, #f3f4f6) 0%, transparent) 0%,
    color-mix(in srgb, var(--u-page, #f3f4f6) 20%, transparent) 24%,
    color-mix(in srgb, var(--u-page, #f3f4f6) 48%, transparent) 62%,
    color-mix(in srgb, var(--u-page, #f3f4f6) 62%, transparent) 100%);
}

.hp-carousel-next {
  position: absolute;
  top: 80px;
  right: 8px;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto; height: auto;
  padding: 8px 14px 8px 16px;
  margin: 0;
  border: 0; outline: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 39, 107, 0.16);
  color: var(--u-blue, #075bd8);
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-carousel-next i { font-size: 17px; }
.hp-carousel-next:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 8px 22px rgba(16, 39, 107, 0.22); }
.hp-carousel-next:focus, .hp-carousel-next:focus-visible { outline: 2px solid var(--u-blue, #075bd8); outline-offset: 2px; }

.hp-carousel.end-reached::after { opacity: 0; }
.hp-carousel.end-reached .hp-carousel-next { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .hp-carousel-next span { display: none; }
  .hp-carousel-next { padding: 10px; right: 10px; }
  .hp-carousel-next i { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-carousel-more, .hp-carousel-next { transition: none; }
}

/* ===========================================================
   STYLE « CARROUSEL VIDÉO »
   ~5 cartes visibles, plafond 8 (desktop) / 5 (mobile).
=========================================================== */

.hp-carousel--video .hp-carousel-track { gap: 14px; padding: 4px 90px 12px 4px; }

.video-card { flex: 0 0 clamp(210px, 19vw, 260px); min-width: 210px; }

.video-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  background-color: var(--u-skeleton);
  background-image: linear-gradient(100deg, var(--u-skeleton) 30%, var(--u-skeleton-shine) 50%, var(--u-skeleton) 70%);
  background-size: 200% 100%;
  animation: u-skeleton-shimmer 1.6s ease-in-out infinite;
}

.video-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.video-card:hover .video-cover img { transform: scale(1.035); }

/* Même traitement que videos.php (.vid-card-play) : icône révélée au
   survol, toujours visible en dessous de 500px (pas de hover tactile). */
.video-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .96); color: var(--u-blue); font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  opacity: 0; transform: translate(-50%, -50%) scale(.78);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.video-play i { margin-left: 1px; }
.video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.video-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.video-info { padding: 7px 1px 0; }

.video-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--u-blue, #075bd8);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.2s ease;
}

.video-title:hover { color: var(--u-blue-deep, #003c9b); }

.video-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #93a7c1;
  font-size: 10px;
  line-height: 1.2;
}

.hp-carousel--video::after { width: 100px; }
.hp-carousel--video .hp-carousel-next { top: 80px; }

@media (max-width: 900px) {
  .hp-carousel--video .hp-carousel-track { gap: 10px; padding: 4px 70px 12px 12px; }
  .video-card { flex-basis: 200px; min-width: 200px; }
  .hp-carousel--video .hp-carousel-more { flex-basis: 86px; width: 86px; font-size: 10px; }
  .hp-carousel--video .hp-carousel-more-icon { font-size: 22px; }
  .hp-carousel--video::after { width: 80px; }
}

@media (max-width: 500px) {
  .hp-carousel--video .hp-carousel-track { gap: 9px; padding: 4px 56px 12px 10px; }
  .video-card { flex-basis: 170px; min-width: 170px; }
  .video-cover { border-radius: 10px; }
  .hp-carousel--video .hp-carousel-more { flex-basis: 78px; width: 78px; border-radius: 10px; }
  .video-title { font-size: 12px; line-height: 1.15; }
  .video-meta { margin-top: 3px; font-size: 9px; }
  .video-badge { top: 6px; right: 6px; padding: 4px 7px; font-size: 8px; border-radius: 6px; }
  .video-play { width: 36px; height: 36px; font-size: 11px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hp-carousel--video::after { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-cover img { transition: none; }
  .video-card:hover .video-cover img { transform: none; }
  .video-cover { animation: none; background-image: none; }
}

/* ===========================================================
   STYLE « CARROUSEL MUSIQUES »
   ~7 cartes visibles, plafond 14 (desktop) / 7 (mobile).
=========================================================== */

.hp-carousel--music .hp-carousel-track { gap: 10px; padding: 5px 95px 12px 4px; }

.music-card { flex: 0 0 clamp(135px, 11vw, 175px); min-width: 135px; text-decoration: none; }

.music-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--u-skeleton);
  background-image: linear-gradient(100deg, var(--u-skeleton) 30%, var(--u-skeleton-shine) 50%, var(--u-skeleton) 70%);
  background-size: 200% 100%;
  animation: u-skeleton-shimmer 1.6s ease-in-out infinite;
}

.music-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.music-card:hover .music-cover img { transform: scale(1.045); }

/* Même taille/traitement que .video-badge. */
.music-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Parfois un <a> à part entière (carte scindée pochette/titre sur la page
   émission — voir emissions/show.php::emi_episode_card()) plutôt qu'un
   simple enfant de .music-card : reset du style de lien par défaut. */
.music-info { padding: 6px 1px 0; text-decoration: none; color: inherit; }

/* Même taille que .video-title. */
.music-artist {
  display: -webkit-box;
  overflow: hidden;
  color: var(--u-blue, #075bd8);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.music-title {
  display: -webkit-box;
  margin-top: 1px;
  overflow: hidden;
  color: #8aa3c6;
  font-size: 10px;
  line-height: 1.05;
  font-weight: 400;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.hp-carousel--music::after { width: 98px; }
.hp-carousel--music .hp-carousel-next { top: 75px; }

@media (max-width: 900px) {
  .hp-carousel--music .hp-carousel-track { gap: 9px; padding: 5px 56px 12px 12px; }
  .music-card { flex-basis: 165px; min-width: 165px; }
  .hp-carousel--music .hp-carousel-more { flex-basis: 80px; width: 80px; font-size: 9px; }
  .hp-carousel--music .hp-carousel-more-icon { font-size: 21px; }
  .hp-carousel--music::after { width: 88px; }
}

@media (max-width: 500px) {
  .hp-carousel--music .hp-carousel-track { gap: 8px; padding: 5px 48px 12px 10px; }
  .music-card { flex-basis: 140px; min-width: 140px; }
  .music-cover { border-radius: 10px; }
  .music-badge { top: 6px; right: 6px; padding: 4px 7px; font-size: 8px; }
  .music-artist { font-size: 12px; }
  .music-title { font-size: 9px; }
  .hp-carousel--music .hp-carousel-more { flex-basis: 75px; width: 75px; border-radius: 10px; }
  .hp-carousel--music::after { width: 75px; }
}

@media (hover: none) {
  .music-card:hover .music-cover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .music-cover img { transition: none; }
  .music-card:hover .music-cover img { transform: none; }
  .music-cover { animation: none; background-image: none; }
}

/* ===========================================================
   STYLE « CARROUSEL ACTU »
   ~3 cartes visibles, plafond 5 (desktop et mobile identiques).
=========================================================== */

.hp-carousel--actu .hp-carousel-track { gap: 12px; padding: 8px 105px 12px 4px; }

.actu-card {
  position: relative;
  display: block;
  flex: 0 0 calc((100% - 140px) / 2.35);
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #ddd;
  text-decoration: none;
  isolation: isolate;
}

.actu-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.actu-card:hover .actu-image { transform: scale(1.055); }

.actu-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 55, 220, 0.04) 34%,
    rgba(0, 55, 220, 0.18) 52%,
    rgba(0, 55, 220, 0.54) 72%,
    rgba(0, 48, 205, 0.88) 90%,
    #0033c9 100%);
  transition: filter 0.4s ease;
}

.actu-card:hover .actu-overlay { filter: saturate(1.12); }

.actu-content {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
}

.actu-category {
  display: inline-flex;
  align-items: center;
  margin-bottom: 7px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.035s, background 0.35s ease;
}

.actu-card:hover .actu-category { transform: translateY(-4px); background: rgba(20, 20, 20, 0.42); }

.actu-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 24px;
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.45px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.actu-card:hover .actu-title { transform: translateY(-4px); }

.hp-carousel--actu::after { width: 115px; }
.hp-carousel--actu .hp-carousel-next { top: 50%; right: 18px; }

@media (max-width: 1000px) {
  .hp-carousel--actu .hp-carousel-track { gap: 10px; padding: 8px 85px 12px 12px; }
  .actu-card { flex-basis: 320px; }
  .actu-content { left: 16px; right: 16px; bottom: 15px; }
  .actu-title { font-size: 21px; }
  .hp-carousel--actu::after { width: 95px; }
  .hp-carousel--actu .hp-carousel-next { right: 14px; }
}

@media (max-width: 600px) {
  .hp-carousel--actu .hp-carousel-track { gap: 9px; padding: 7px 72px 12px 10px; }
  .actu-card { flex-basis: 270px; }
  .actu-content { left: 14px; right: 14px; bottom: 13px; }
  .actu-category { padding: 4px 7px; font-size: 9px; }
  .actu-title { font-size: 19px; line-height: 1; }
  .hp-carousel--actu .hp-carousel-more { flex-basis: 82px; width: 82px; font-size: 10px; }
  .hp-carousel--actu .hp-carousel-more-icon { font-size: 22px; }
  .hp-carousel--actu::after { width: 80px; }
  .hp-carousel--actu .hp-carousel-next { right: 10px; }
}

@media (max-width: 380px) {
  .actu-card { flex-basis: 245px; }
  .actu-title { font-size: 17px; }
}

/* Évite qu'un hover reste "collé" après un tap sur tactile. */
@media (hover: none) {
  .actu-card:hover .actu-image { transform: scale(1); }
  .actu-card:hover .actu-category,
  .actu-card:hover .actu-title { transform: translateY(0); }
  .actu-card:hover .actu-category { background: rgba(20, 20, 20, 0.32); }
  .actu-card:hover .actu-overlay { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .actu-image, .actu-category, .actu-title { transition: none; }
  .actu-card:hover .actu-image { transform: none; }
}

/* ===========================================================
   STYLE « CARROUSEL ÉPISODES »
   Fond flouté pleine carte + pochette carrée + actions au survol.
   Plafond 5, identique sur desktop et mobile.
=========================================================== */

.hp-carousel--episodes .hp-carousel-track { align-items: stretch; gap: 12px; padding: 8px 110px 14px 4px; }

.episode-card {
  position: relative;
  flex: 0 0 calc((100% - 150px) / 3.28);
  min-width: 0;
  height: 455px;
  overflow: hidden;
  border-radius: 14px;
  background: #222;
  isolation: isolate;
}

.episode-bg {
  position: absolute;
  inset: -25px;
  z-index: 0;
  background: var(--episode-bg) center / cover no-repeat;
  filter: blur(20px) saturate(1.12);
  transform: scale(1.12);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.episode-card:hover .episode-bg { transform: scale(1.18); }

.episode-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 12, 18, 0.16) 0%,
    rgba(10, 12, 18, 0.28) 37%,
    rgba(10, 12, 18, 0.50) 59%,
    rgba(9, 11, 18, 0.78) 77%,
    rgba(7, 9, 15, 0.96) 100%);
}

.episode-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 38px 20px 18px;
}

.episode-cover-wrap { width: 76%; margin: 0 auto 18px; }

.episode-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.episode-card:hover .episode-cover { transform: translateY(-4px) scale(1.015); }

.episode-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 17px;
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -0.2px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.episode-title a { color: inherit; text-decoration: none; }
.episode-title a:hover { text-decoration: underline; }

.episode-description {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  line-height: 1.24;
  font-weight: 400;
  opacity: 0.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.episode-card:hover .episode-description { opacity: 1; transform: translateY(-2px); }

.episode-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 7px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.episode-card:hover .episode-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }

.episode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 17px;
  border-radius: 999px;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

.episode-btn i { font-size: 12px; }
.episode-btn:hover { transform: translateY(-1px); }

.episode-btn-watch { background: #fff; color: #171717; }
.episode-btn-watch:hover { background: #f1f1f1; }

.episode-btn-listen {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: #fff;
}
.episode-btn-listen:hover { background: rgba(255, 255, 255, 0.25); }

.hp-carousel--episodes .hp-carousel-more { flex-basis: 100px; width: 100px; border-radius: 14px; }
.hp-carousel--episodes::after { width: 125px; }
.hp-carousel--episodes .hp-carousel-next { top: 50%; right: 18px; }

@media (max-width: 900px) {
  .hp-carousel--episodes .hp-carousel-track { gap: 10px; padding: 8px 90px 14px 12px; }
  .episode-card { flex: 0 0 285px; height: 415px; }
  .episode-content { padding: 30px 17px 16px; }
  .episode-cover-wrap { width: 74%; }
  .episode-title { font-size: 16px; }
  .hp-carousel--episodes::after { width: 100px; }
  .hp-carousel--episodes .hp-carousel-next { right: 14px; }
}

@media (max-width: 500px) {
  .hp-carousel--episodes .hp-carousel-track { gap: 9px; padding: 7px 72px 12px 10px; }
  .episode-card { flex: 0 0 255px; height: 380px; border-radius: 12px; }
  .episode-content { padding: 25px 15px 14px; }
  .episode-cover-wrap { width: 72%; margin-bottom: 15px; }
  .episode-cover { border-radius: 15px; }
  .episode-title { font-size: 15px; }
  .episode-description { font-size: 10px; }
  .episode-actions { gap: 7px; padding-top: 11px; }
  .episode-btn { min-height: 34px; padding: 0 14px; gap: 6px; font-size: 11px; }
  .episode-btn i { font-size: 11px; }
  .hp-carousel--episodes .hp-carousel-more { flex-basis: 80px; width: 80px; font-size: 9px; }
  .hp-carousel--episodes .hp-carousel-more-icon { font-size: 22px; }
  .hp-carousel--episodes::after { width: 82px; }
  .hp-carousel--episodes .hp-carousel-next { right: 10px; }
}

/* Pas de vrai hover sur tactile : description plus visible et boutons
   directement accessibles. */
@media (hover: none) {
  .episode-card:hover .episode-bg { transform: scale(1.12); }
  .episode-card:hover .episode-cover { transform: none; }
  .episode-description { opacity: 0.72; }
  .episode-card:hover .episode-description { opacity: 0.72; transform: none; }
  .episode-actions { opacity: 1; transform: none; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .episode-bg, .episode-cover, .episode-description { transition: none; }
  .episode-card:hover .episode-bg { transform: scale(1.12); }
  .episode-card:hover .episode-cover { transform: none; }
}