/* Rangees « streaming » de BarryDesi (22/10/2026) : accueil (flux sans fin) et page Series.
   Theme du site : fond sombre, degrade rouge #ff0015 -> #c71b29, police Nunito. */
:root{ --st-accent:#ff0015; --st-accent-2:#c71b29; --st-pastille:#29282b; --st-doux:#a7a7ad; --st-rayon:8px;
  --st-courbe:cubic-bezier(.2,.8,.2,1); --st-gout:calc(var(--bs-gutter-x, 1.5rem) * .5); }

/* --- Rangee ------------------------------------------------------------------------- */
.st-rangee{ margin-top:26px; scroll-margin-top:calc(var(--st-haut, 0px) + 70px); }
.st-js .st-rangee{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--st-courbe), transform .6s var(--st-courbe); }
.st-js .st-rangee.vue{ opacity:1; transform:none; }
.st-rangee[hidden]{ display:none !important; }
.st-rangee-tete{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.st-rangee-tete h2{ font-size:20px; font-weight:800; color:#fff; margin:0; letter-spacing:.1px; }
.st-nb{ color:var(--st-doux); font-size:13px; font-weight:600; }
.st-voir{ margin-left:auto; color:var(--st-doux); font-size:13.5px; font-weight:700; text-decoration:none; transition:color .2s; }
.st-voir:hover{ color:#fff; }

.st-zone{ position:relative; }
.st-piste{ position:relative; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding:12px 2px 14px; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.st-piste::-webkit-scrollbar{ display:none; }

/* --- Vignette ------------------------------------------------------------------------ */
.st-carte{ position:relative; flex:0 0 calc((100% - 5 * 12px) / 6); scroll-snap-align:start; min-width:0; color:#fff; text-decoration:none;
  transition:transform .35s var(--st-courbe); }
.st-visuel{ position:relative; display:block; aspect-ratio:16 / 9; border-radius:var(--st-rayon); overflow:hidden;
  background:#1d1d20 linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 70%) 0 0 / 220% 100%;
  animation:st-reflet 1.4s linear infinite; box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:box-shadow .35s var(--st-courbe); }
.st-visuel.charge{ animation:none; background:#1d1d20; }
.st-visuel > img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.04);
  transition:opacity .5s ease, transform .6s var(--st-courbe); }
.st-visuel.charge > img{ opacity:1; transform:none; }
.st-visuel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); pointer-events:none; }
.st-nom{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:9px 2px 0;
  font-size:14px; font-weight:700; line-height:1.35; color:#e9e9eb; transition:color .2s; }
@media (hover:hover){
  .st-carte:hover{ transform:translateY(-4px) scale(1.045); z-index:2; }
  .st-carte:hover .st-visuel{ box-shadow:0 16px 30px rgba(0,0,0,.55), 0 0 0 2px rgba(255,0,21,.85); }
  .st-carte:hover .st-nom{ color:#fff; }
}
.st-carte:focus-visible{ outline:none; }
.st-carte:focus-visible .st-visuel{ box-shadow:0 0 0 3px var(--st-accent); }
.st-type{ position:absolute; top:8px; left:8px; z-index:2; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; color:#fff; background:rgba(16,16,17,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.st-premium{ position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(60deg, var(--st-accent), var(--st-accent-2)); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.st-premium svg{ width:15px; height:15px; fill:#fff; }

/* --- Fleches (defilement sans fin) ---------------------------------------------------- */
.st-fleche{ position:absolute; top:12px; bottom:14px; z-index:4; width:52px; border:0; color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; }
.st-fleche svg{ width:30px; height:30px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition:transform .2s; }
.st-fleche:hover svg{ transform:scale(1.2); }
.st-prec{ left:calc(var(--st-gout) * -1); background:linear-gradient(90deg, rgba(16,16,17,.9), rgba(16,16,17,0)); border-radius:0; }
.st-suiv{ right:calc(var(--st-gout) * -1); background:linear-gradient(270deg, rgba(16,16,17,.9), rgba(16,16,17,0)); }
.st-zone:hover .st-fleche, .st-fleche:focus-visible{ opacity:1; }
.st-fleche:focus-visible{ outline:2px solid var(--st-accent); outline-offset:-4px; }
.st-fleche[hidden]{ display:none; }
@media (hover:none){ .st-fleche{ display:none !important; } }

/* --- Grille (resultats de recherche) ------------------------------------------------- */
.st-grille{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:20px 12px; padding-top:10px; }
.st-grille .st-carte{ flex:none; }

/* --- Flux sans fin de l'accueil ------------------------------------------------------- */
.st-flux{ padding-bottom:30px; }
.st-flux-titre{ font-size:13px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--st-doux); margin:34px 0 0; }
.st-squelette{ margin-top:26px; }
.st-squelette .st-barre{ width:180px; height:18px; border-radius:6px; margin-bottom:16px; }
.st-squelette .st-cases{ display:flex; gap:12px; overflow:hidden; }
.st-squelette .st-case{ flex:0 0 calc((100% - 5 * 12px) / 6); aspect-ratio:16 / 9; border-radius:var(--st-rayon); }
.st-barre, .st-case{ background:#1d1d20 linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 70%) 0 0 / 220% 100%;
  animation:st-reflet 1.4s linear infinite; }
.st-sentinelle{ height:2px; }
.st-erreur{ display:flex; align-items:center; gap:12px; justify-content:center; padding:24px 0; color:var(--st-doux); }
.st-erreur button{ border:0; border-radius:999px; padding:9px 18px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(60deg, var(--st-accent), var(--st-accent-2)); }

/* --- Affiche a la une (page Series) --------------------------------------------------- */
.st-hero{ position:relative; height:min(62vh, 560px); min-height:340px; overflow:hidden; background:#101011; margin-bottom:6px; }
.st-hero-diapo{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease, visibility 0s linear 1s; }
.st-hero-diapo.active{ opacity:1; visibility:visible; transition:opacity 1s ease; }
.st-hero-fond{ position:absolute; inset:0; background-size:cover; background-position:center 25%; transform:scale(1.06);
  transition:transform 8s ease-out; }
.st-hero-diapo.active .st-hero-fond{ transform:scale(1); }
.st-hero-diapo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,16,17,.95) 0%, rgba(16,16,17,.75) 32%, rgba(16,16,17,.15) 65%, rgba(16,16,17,.1) 100%),
             linear-gradient(0deg, #101011 0%, rgba(16,16,17,0) 38%); }
.st-hero-contenu{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:58px; max-width:720px; }
.st-hero-etiquette{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:#fff; padding:4px 11px; border-radius:999px; background:linear-gradient(60deg, var(--st-accent), var(--st-accent-2)); }
.st-hero h2{ font-size:clamp(28px, 4.2vw, 52px); font-weight:800; line-height:1.08; color:#fff; margin:14px 0 8px; text-shadow:0 2px 18px rgba(0,0,0,.5); text-wrap:balance; }
.st-hero-genres{ color:#d8d8dc; font-size:14px; font-weight:700; margin:0 0 10px; }
.st-hero-resume{ color:#cfcfd4; font-size:15.5px; line-height:1.55; margin:0 0 20px; max-width:60ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.st-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.st-btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:6px; font-size:16px; font-weight:800; text-decoration:none;
  transition:transform .2s, background .2s, box-shadow .2s; }
.st-btn svg{ width:20px; height:20px; fill:currentColor; }
.st-btn-plein{ color:#fff; background:linear-gradient(60deg, var(--st-accent), var(--st-accent-2)); box-shadow:0 8px 22px rgba(255,0,21,.3); }
.st-btn-plein:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,0,21,.45); }
.st-btn-voile{ color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.st-btn-voile:hover{ color:#fff; background:rgba(255,255,255,.26); }
.st-hero-points{ position:absolute; z-index:3; right:var(--st-gout); bottom:24px; display:flex; gap:8px; }
.st-hero-points button{ width:26px; height:4px; border:0; border-radius:4px; background:rgba(255,255,255,.35); cursor:pointer; padding:0; transition:background .3s, width .3s; }
.st-hero-points button[aria-current=true]{ background:#fff; width:40px; }

@keyframes st-reflet{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* --- Tailles ------------------------------------------------------------------------- */
@media (max-width:1399px){ .st-carte, .st-squelette .st-case{ flex-basis:calc((100% - 4 * 12px) / 5); } .st-grille{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (max-width:1199px){ .st-carte, .st-squelette .st-case{ flex-basis:calc((100% - 3 * 12px) / 4); } .st-grille{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:991px){ .st-carte, .st-squelette .st-case{ flex-basis:calc((100% - 2 * 12px) / 3.25); } .st-grille{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:767px){
  .st-carte, .st-squelette .st-case{ flex-basis:calc((100% - 10px) / 2.2); }
  .st-piste, .st-squelette .st-cases{ gap:10px; }
  .st-nom{ font-size:13px; }
  .st-rangee-tete h2{ font-size:17.5px; }
  .st-grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 10px; }
  .st-hero{ height:auto; min-height:0; aspect-ratio:4 / 5; max-height:72vh; }
  .st-hero-fond{ background-position:center top; }
  .st-hero-diapo::after{ background:linear-gradient(0deg, #101011 4%, rgba(16,16,17,.75) 42%, rgba(16,16,17,0) 72%); }
  .st-hero-contenu{ padding-bottom:44px; }
  .st-hero-resume{ font-size:14px; -webkit-line-clamp:2; }
  .st-btn{ padding:11px 18px; font-size:15px; }
  .st-hero-points{ left:50%; right:auto; transform:translateX(-50%); bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  .st-js .st-rangee, .st-carte, .st-visuel, .st-visuel > img, .st-hero-diapo, .st-hero-fond{ transition:none !important; animation:none !important; }
  .st-piste{ scroll-behavior:auto; }
}