/* Sorti de resources/views/pages/home/sections/_styles.blade.php le 10/11/2026 (gabarit allégé) : copie exacte du bloc <style>, servie par Apache
   et gardée par le navigateur. Le modifier ici, plus dans la vue. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,300&display=swap');

:root {
  --c-bg:          var(--couleur-fond-content);
  --c-surface:     var(--couleur-fond-header);
  --c-surface2:    var(--couleur-fond-content);
  --c-border:      var(--border-color);
  --c-card-info-bg: var(--card-info-bg-color, var(--couleur-fond-header));
  --c-card-shadow:  var(--card-shadow-color, #000000);
  --c-card-title:   var(--card-title-color, var(--primary-text-color));
  --c-card-meta:    var(--card-meta-color, var(--description-text-color));
  --c-card-border:  var(--card-border-color, var(--border-color));
  --c-card-hover-border: var(--card-hover-border-color, var(--primary-color));
  --c-progress-bg:  var(--progress-bg-color, var(--primary-text-color));
  --c-progress-fill: var(--progress-fill-color, var(--primary-color));
  --c-accent:      var(--primary-color);
  --c-accent-dim:  color-mix(in srgb, var(--primary-color) 18%, transparent);
  --c-gold:        var(--tertiary-color);
  --c-gold-dim:    color-mix(in srgb, var(--tertiary-color) 15%, transparent);
  --c-text:        var(--primary-text-color);
  --c-muted:       var(--description-text-color);
  --c-card-r:      12px;
  --font-display:  'Bebas Neue', 'Impact', sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:   cubic-bezier(.25,.46,.45,.94);
  --section-gap:   56px;
}

body { background: var(--c-bg); font-family: var(--font-body); }

.px-section {
  padding: var(--section-gap) 0;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.px-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 0 4vw 22px;
  position: relative;
}
.px-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
  color: var(--c-accent);
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
  transition: all .3s ease;
}
.px-header:hover .px-header__eyebrow {
  background: color-mix(in srgb, var(--c-accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--c-accent) 50%, transparent);
  transform: translateY(-1px);
}
.px-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: .03em;
  color: var(--couleur-titre, var(--c-text));
  margin: 0;
  line-height: 1;
}
.px-header__line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, color-mix(in srgb, var(--couleur-titre, var(--c-text)) 35%, transparent) 0%, transparent 80%);
}
.px-header__link {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--section-link-color, var(--c-muted));
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}
.px-header__link:hover { color: var(--couleur-principale, var(--c-text)); }

.px-rail-wrap {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}
.px-rail-wrap::before,
.px-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
.px-rail-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--section-bg, var(--c-bg)), transparent);
}
.px-rail-wrap::after {
  right: 0;
  /* background: linear-gradient(to left, var(--c-bg), transparent); */
}

.px-owl.owl-carousel { padding: 8px 4vw 16px; overflow-x: clip; overflow-y: visible; }
.px-owl .owl-stage-outer { overflow: hidden; padding: 16px 0 20px; margin: -16px 0 -20px; }
.px-owl .owl-item a, .px-owl .owl-item img { -webkit-user-drag: none; user-select: none; }
.px-owl .owl-stage { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); }

.px-owl .owl-nav button {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-60%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--c-surface, #0f1320) 92%, transparent) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  line-height: 44px !important;
  text-align: center !important;
  transition: background .2s, border-color .2s, transform .25s var(--ease-bounce) !important;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  margin: 0 !important;
}
.px-owl .owl-nav button.owl-prev { left: calc(4vw - 22px) !important; }
.px-owl .owl-nav button.owl-next { right: calc(4vw - 22px) !important; }
.px-owl .owl-nav button:hover {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  transform: translateY(-60%) scale(1.1) !important;
}
.px-owl .owl-dots { text-align: center; padding-top: 14px; }
.px-owl .owl-dots .owl-dot span {
  display: block;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  margin: 0 3px !important;
  transition: all .25s !important;
}
.px-owl .owl-dots .owl-dot.active span {
  background: var(--c-accent) !important;
  width: 20px !important;
  border-radius: 3px !important;
}

/* ── CARD ── */
.px-card {
  display: block;
  border-radius: var(--c-card-r);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  box-shadow: 0 4px 6px color-mix(in srgb, var(--c-card-shadow) 15%, transparent);
  margin: 6px 8px 10px;
  text-decoration: none !important;
  position: relative;
  transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease-smooth), border-color .25s;
  cursor: pointer;
}
.px-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-card-shadow) 25%, transparent);
  z-index: 10;
}

.px-card__thumb {
  position: relative;
  width: 100%;
  padding-top: 148%;
  overflow: hidden;
  background: var(--c-bg);
}
.px-card__thumb--landscape { padding-top: 56.25%; }

/* Mixed carousel: autoWidth item sizing so portrait & landscape share the same height */
/* Force single-row flex layout so Owl's float-left items cannot wrap on sub-pixel drift from vw widths */
.px-owl--mixed .owl-stage { display: flex; flex-wrap: nowrap; }
.px-owl--mixed .owl-item { float: none; flex-shrink: 0; }
.px-owl--mixed .single-video.no-serie { width: 14vw; min-width: 150px; }
.px-owl--mixed .single-video:not(.no-serie) { width: 37vw; min-width: 280px; }
.px-owl--mixed .px-card__thumb { padding-top: 0 !important; height: 20.8vw; }
@media (max-width: 1024px) {
  .px-owl--mixed .single-video.no-serie { width: 21vw; min-width: 150px; }
  .px-owl--mixed .single-video:not(.no-serie) { width: 55vw; min-width: 280px; }
  .px-owl--mixed .px-card__thumb { height: 31vw; }
}
@media (max-width: 768px) {
  .px-owl--mixed .single-video.no-serie { width: 34vw; }
  .px-owl--mixed .single-video:not(.no-serie) { width: 90vw; }
  .px-owl--mixed .px-card__thumb { height: 50.5vw; }
}

/* La barre d'avancement reste en bas de l'image, en paysage comme en portrait (consigne de
   Sébastien du 2026-11-09 : « jamais en haut de la vignette »). */
.px-card--landscape .px-progress { z-index: 5; }
.px-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-smooth), filter .4s;
  filter: brightness(.95);
}
.px-card:hover .px-card__thumb img {
  transform: scale(1.1);
  filter: brightness(1.05) saturate(1.1);
}
.px-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
      linear-gradient(to top, color-mix(in srgb, var(--c-bg) 95%, transparent) 0%, color-mix(in srgb, var(--c-bg) 20%, transparent) 20%, transparent 65%),
      linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 10%, transparent) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.px-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s;
}
.px-card__play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.7);
  transition: transform .3s var(--ease-bounce);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 20%, transparent), 0 8px 24px rgba(0,0,0,.5);
}
.px-card__play-btn::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.px-card:hover .px-card__play { opacity: 1; }
.px-card:hover .px-card__play-btn { transform: scale(1); }

.px-badge {
  position: absolute;
  z-index: 4;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 4px;
  pointer-events: none;
}
.px-badge--premium {
  top: 10px; right: 10px;
  background: var(--secondary-color);
  color: var(--on-secondary-color, #1d2025);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--secondary-color) 40%, transparent);
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.px-badge--type {
  top: 10px; left: 10px;
  background: color-mix(in srgb, var(--c-bg) 75%, transparent);
  color:var(--primary-text-color);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(8px);
}
.px-badge--soon {
  top: 10px; left: 10px;
  background: linear-gradient(135deg, var(--c-gold), var(--secondary-color));
  color: var(--primary-text-color);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c-gold) 40%, transparent);
}
.px-badge--label {
  bottom: 10px; left: 0;
  background-color: var(--tertiary-color);
  color: var(--primary-text-color);
  padding: 5px 10px;
  border-radius: 0 15px 15px 0;
  font-size: 12px;
}
.px-card--landscape .px-badge--label { bottom: 10px; }
.px-card__banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--c-accent) 90%, black);
  color: #fff;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.px-card__banner-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-badge--banner {
  position: static;
  flex-shrink: 0;
}

.px-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: var(--c-progress-bg);
  z-index: 4;
}
.px-progress__fill {
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: var(--c-progress-fill);
}
.px-progress--done .px-progress__fill { background: var(--secondary-color); }

/* Match-score badge — used by intelligent-search result cards on
   /general-search, /episodes-search, /movies, /shows. Top-left of the
   thumb. Class name kept (gsr-) for backwards compat with existing usage. */
.gsr-score-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; z-index: 4;
  letter-spacing: 0.04em;
}

.px-card__info {
  padding: 10px 12px 14px;
  position: relative;
  z-index: 2;
  background: var(--c-card-info-bg);
}
/* PLANCHER TYPOGRAPHIQUE, pose le 14/09/2026. Les tailles de la carte etaient
   relevees a 13,1 px pour le titre, 10,9 px pour la ligne meta et 9,6 px pour
   l'etiquette de nature : sous 12 px, un texte cesse d'etre lu et devient une
   texture. La carte est l'element le plus repete du site, c'est donc la que le
   plancher compte le plus. Les cartes gagnent quelques pixels de hauteur ; c'est
   le prix, et il est assume. */
.px-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-card-title);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 5px;
  min-height: 2.7em;
}
.px-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-card-meta);
}
.px-card__meta-sep {
  width: 2px; height: 2px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.px-card__type-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--type-tag-bg, var(--c-accent-dim));
  color: var(--type-tag-text, var(--c-accent));
  flex-shrink: 0;
}
.px-card__type-tag--gold {
  background: var(--c-gold-dim);
  color: var(--c-gold);
}

/* single-video wrapper : nécessaire pour que le JS du popup fonctionne */
.single-video {
  position: relative;
  display: block;
}

@media (max-width: 768px) {
  :root { --section-gap: 36px; }
  .px-header { padding: 0 16px 16px; }
  .px-owl.owl-carousel { padding: 6px 16px 12px; }
  .px-rail-wrap::before,
  .px-rail-wrap::after { width: 32px; }
  /* Mobile: clip carousel overflow (popup is position:fixed so it doesn't need visible overflow) */
  .px-section,
  .px-rail-wrap,
  .px-owl.owl-carousel,
  .px-owl .owl-stage-outer { overflow: hidden; }
}

/* ── FEATURED (single-content hero card) ── */
.px-featured { padding: var(--section-gap) 0; }
.px-featured__card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  height: clamp(320px, 24vw, 440px);
  margin: 0 4vw;
  border-radius: var(--c-card-r);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-card-border);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--c-card-shadow) 20%, transparent);
  transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease-smooth);
}
.px-featured__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--c-card-shadow) 30%, transparent);
}
.px-featured__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface));
}
.px-featured__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;
  color: var(--c-muted);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.px-featured__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-smooth), filter .4s;
  filter: brightness(.95);
}
.px-featured__card:hover .px-featured__media img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.1);
}
.px-featured__body {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: var(--c-card-info-bg);
}
.px-featured__eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.px-featured__title,
.px-featured__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: .02em;
  color: var(--c-card-title);
  margin: 0;
  line-height: 1.15;
  -webkit-line-clamp: 2;
}
.px-featured__description {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--c-card-meta);
  margin: 0;
  -webkit-line-clamp: 3;
}
.px-featured__benefits {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-card-title);
}
.px-featured__benefit-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.px-featured__professor {
  font-size: .82rem;
  color: var(--c-muted);
}
.px-featured__professor strong {
  color: var(--c-card-title);
  font-weight: 600;
}
.px-featured__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 26px;
  border-radius: 999px;
  background: var(--c-gold);
  color: #fff !important;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform .2s var(--ease-bounce), background .2s, box-shadow .25s;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-gold) 35%, transparent);
  margin-top: 4px;
}
.px-featured__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-gold) 50%, transparent);
}
@media (max-width: 768px) {
  .px-featured { padding: 36px 0; }
  .px-featured__card { grid-template-columns: 1fr; height: auto; margin: 0 16px; }
  .px-featured__media { aspect-ratio: 16 / 9; }
  .px-featured__body { padding: 22px 20px; gap: 10px; }
}

/* ── Vignettes : durée et « ✓ vu » (08/11/2026, App\Support\Accueil\Vignettes) ──
   Options éteintes par défaut : sans elles, aucun de ces éléments n'est rendu. */
.px-duree {
  position: absolute;
  right: 8px; bottom: 12px;          /* au-dessus de la barre de progression (6px) */
  z-index: 4;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 13px;                   /* plancher de lisibilité : la durée est une information */
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.px-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.px-vu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* La couleur du texte de la ligne, que chaque thème règle pour qu'elle se lise sur le fond de la carte.
     La couleur « terminé » du thème a été essayée puis retirée le 08/11/2026 : vert clair sur fond rose
     en préprod, contraste 1,55:1. La coche et le gras suffisent à distinguer la mention. */
  color: var(--vu-color, inherit);
  font-weight: 700;
  white-space: nowrap;
}
.px-vu .fa { font-size: .9em; }

/* ── Rangée d'épisodes (09/11/2026, section-episodes) ── */
.px-card__desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-card-meta);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Épisode sans vignette (à venir) : un fond aux couleurs du site plutôt qu'un trou. */
.px-card__thumb--vide {
  background:
    radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--primary-color, #E05C70) 38%, transparent), transparent 55%),
    var(--c-bg, #1d2025);
}
/* Pastille « Ouvert après rendez-vous » en bas à gauche de l'image, la durée reste à droite. */
.px-card__thumb .rdv-pastille { z-index: 4; max-width: calc(100% - 90px); }
/* Carte qui porte aussi l'étiquette de section (« Nouveau », « Populaire ») : la pastille passe
   au-dessus d'elle au lieu de la recouvrir (constaté le 2026-11-09, rangées du thème Classique). */
.px-card__thumb:has(.px-badge--label) .rdv-pastille { bottom: 44px; }

/* ── Affichage « pastilles » d'une section Bienfaits ou Genres (08/11/2026) ── */
.px-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 4vw;
}
.px-pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  /* Sur le fond de la page, comme le sur-titre des sections (.px-header__eyebrow), et non sur le fond
     des cartes : celui-ci vaut l'accent sur certains thèmes, et la coche y disparaissait (préprod, 08/11/2026). */
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.px-pastille .fa { color: var(--c-accent); font-size: 14px; }
@media (max-width: 768px) {
  .px-pastilles { padding: 0 16px; gap: 8px; }
  .px-pastille { font-size: 14px; padding: 8px 14px; }
}