/* detail.css — styles for the film / série detail pages (film.ejs, serie.ejs).
   Replaces the reference's missing detail.css / detailtv.css / fullstream-custom.css
   and adds the french-stream.net extras (backdrop header, facts line, actors rail,
   trailer modal, download block, episode navigation). */

/* ---- breadcrumb ------------------------------------------------------- */
.speedbar { padding: 6px 0 10px; font-size: 12px; color: #999; }
.speedbar a { color: #ccc; }
.speedbar a:hover { color: #f48625; }
.speedbar span { color: #f48625; }

/* ---- player box ------------------------------------------------------- */
.ftabs.tabs-box { background-color: #1e1e1e; margin-bottom: 20px; box-shadow: 0 3px 3px 0 rgba(0,0,0,.5); }
.ftabs .iframe-area { display: none; }
#seriePlayers { display: block; background-color: #000; min-height: 400px; }
.movie-players .iframe { background-color: #000; }
.fctrl#player-options { padding: 10px 10px 4px; justify-content: flex-start; }
.fctrl#player-options .fa { margin-right: 6px; }
.player-option { display: inline-block; padding: 0 16px; line-height: 32px; margin: 0 6px 6px 0; border-radius: 2px;
  background-color: #333; color: #ccc; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  -webkit-user-select: none; user-select: none; }
.player-option:hover { background-color: #000; color: #fff; }
.player-option.active { background-color: #f48625; color: #fff; }
.player-option.player-none { cursor: default; background: none; color: #999; font-weight: 400; }

/* ---- série : current-episode header + server tabs --------------------- */
#fsElementsContainer .series-center { margin: 0; width: auto; }
.selink { text-align: center; padding: 10px 10px 0; }
.selink-title { display: inline-block; margin: 8px 6px; font-size: 14px; font-weight: 700; color: #fff; }
.ep-counter { display: inline-block; vertical-align: middle; padding: 2px 8px; border-radius: 3px; background: #333;
  color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.ep-new { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 6px; border-radius: 3px;
  background: #f48625; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 16px; }
.btnss { text-align: center; padding: 0 0 6px; }
.ftabs .btnss .tabs-sel { width: auto; white-space: normal; overflow: visible; }
.btnss li { display: inline-block; margin: 0 4px 6px; }
.fsctab { display: inline-block; padding: 0 14px; line-height: 30px; border-radius: 2px; background-color: #333;
  color: #ccc; font-weight: 700; font-size: 13px; cursor: pointer; }
.fsctab:hover { background-color: #000; color: #fff; }
.fsctab.fscactive { background-color: #f48625; color: #fff; }
.fsctab.fsc-none { cursor: default; background: none; color: #999; font-weight: 400; }

/* ---- série : prev / next episode -------------------------------------- */
.ep-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 15px 0; }
.ep-nav-btn { display: inline-block; padding: 0 16px; line-height: 34px; border-radius: 3px; background: #333;
  color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ep-nav-btn:hover { background: #000; color: #fff; }
.ep-nav-btn.ep-next { margin-left: auto; background: #f48625; }
.ep-nav-btn.ep-next:hover { background: #d9731a; }
.ep-nav-btn .fa { margin: 0 4px; }

/* ---- série : seasons + episode lists ---------------------------------- */
.seasons-nav { padding: 8px 15px 0; text-align: center; }
.seasons-label { display: inline-block; margin: 3px 8px 3px 0; font-weight: 700; color: #fff; }
.seasons-nav a { display: inline-block; padding: 0 12px; line-height: 28px; margin: 3px; border-radius: 2px;
  background-color: #333; color: #ccc; font-size: 12px; font-weight: 700; }
.seasons-nav a:hover { background-color: #000; color: #fff; }
.seasons-nav a.active { background-color: #f48625; color: #fff; }
.ep-cols { padding: 0 15px 10px; }
.ep-col { float: left; overflow: hidden; margin: 10px 0 0; width: 50%; padding: 0 5px; text-align: center; }
.ep-col-left { padding-left: 0; }
.ep-col-right { float: right; padding-right: 0; }
.ep-col .elink a { padding: 7px 10px; font-size: 13px; color: #ccc; border-bottom: 1px solid #2a2a2a; }
.ep-col .elink a:hover { color: #fff; background-color: #2a2a2a; }
.ep-col .elink a.active { color: #fff; background-color: #f48625; }
.ep-col .elink a .fa { margin-right: 4px; color: #f48625; }
.ep-col .elink a.active .fa { color: #fff; }
.ep-col .elink a.is-new { color: #fff; }
.ep-col .elink a.active .ep-new { background: #fff; color: #f48625; }
.ep-empty { padding: 15px; text-align: center; color: #999; }
.od2 { display: block; height: 1px; }
@media screen and (max-width: 760px) {
  .ep-col, .ep-col-right { float: none; width: 100%; padding: 0; }
  .ep-nav { flex-wrap: wrap; }
  .ep-nav-btn { flex: 1 1 auto; text-align: center; }
}

/* ---- actors rail ------------------------------------------------------ */
.actors-block { position: relative; margin: 0 0 20px; padding: 12px 0 8px; background: #1e1e1e; box-shadow: 0 3px 3px 0 rgba(0,0,0,.5); }
.actors-head { padding: 0 15px 10px; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.actors-head .fa { color: #f48625; margin-right: 6px; }
.actors-wrap { position: relative; }
.actors-rail { display: flex; gap: 10px; padding: 0 15px 10px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #444 #1e1e1e; }
.actors-rail::-webkit-scrollbar { height: 6px; }
.actors-rail::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.actor-card { position: relative; flex: 0 0 auto; width: 140px; height: 210px; overflow: hidden; border-radius: 4px;
  background: #2a2a2a; scroll-snap-align: start; color: #fff; text-decoration: none; }
.actor-card .actor-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .25s ease, filter .25s ease; }
.actor-card .actor-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 8px; line-height: 1.25;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,0) 100%); text-align: left; }
.actor-card .actor-name { display: block; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actor-card .actor-role { display: block; margin-top: 2px; font-size: 11px; color: #bbb; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actor-card.is-director .actor-role { color: #f48625; font-style: normal; }
a.actor-card:hover .actor-photo { transform: scale(1.06); filter: brightness(1.1); }
a.actor-card:hover .actor-name { color: #f48625; }
a.actor-card:hover .actor-role { color: #fff; }
.actors-nav { position: absolute; top: 50%; z-index: 3; width: 32px; height: 60px; margin-top: -35px; border: 0; border-radius: 3px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 16px; cursor: pointer; display: none; align-items: center; justify-content: center; }
.actors-nav.l { left: 4px; }
.actors-nav.r { right: 4px; }
.actors-nav:hover { background: #f48625; }
.actors-wrap.has-overflow .actors-nav { display: flex; }
@media (hover: none), (max-width: 760px) { .actors-nav { display: none !important; } }

/* ---- header block (.fmain) with backdrop ------------------------------ */
.fmain { border-radius: 6px; }
.fmain.fmain-bd { position: relative; z-index: 0; overflow: hidden; background-color: #1d1d1d;
  background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 300px; }
/* the blurred copy of the inline background (gradient + backdrop) sits behind the content */
.fmain.fmain-bd::before { content: ""; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; z-index: -1;
  background: inherit; background-size: cover; background-position: center; filter: blur(6px); }
.fmain h1 { font-size: 24px; line-height: 1.2; }
.fmain h1 .tag { font-weight: 400; color: #bbb; font-size: 18px; }
.fav-btn { display: inline-block; vertical-align: middle; margin-left: 8px; width: 30px; height: 30px; line-height: 30px; text-align: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: #999; font-size: 16px; cursor: pointer;
  -webkit-user-select: none; user-select: none; transition: color .15s, background .15s, transform .15s; }
.fav-btn:hover { color: #f48625; background: rgba(255,255,255,.14); transform: scale(1.1); }
.fav-btn.is-fav, .fav-btn.active { color: #f48625; }
.facts { margin: 0 0 10px; font-size: 13px; color: #ccc; }
.facts > span { display: inline; }
.facts > span + span::before { content: " · "; color: #777; margin: 0 4px; }
.facts .cert-pill { display: inline-block; padding: 0 6px; border: 1px solid #888; border-radius: 3px; font-size: 11px; line-height: 18px; color: #eee; vertical-align: 1px; }
.facts .genres a { color: #f48625; }
.facts .genres a:hover { text-decoration: underline; }
.facts .fs-pills { display: block; margin-top: 8px; }
.facts > span + .fs-pills::before { content: none; }
.fs-pill { display: inline-block; margin: 0 4px 2px 0; padding: 0 8px; border-radius: 3px; background: #444; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
.fs-pill.fs-status.is-live { background: #2e7d32; }
.fs-pill.fs-eps { background: #f48625; }
.fmain .fdesc { max-height: none; font-style: normal; font-size: 13px; line-height: 20px; color: #ddd; margin: 6px 0 12px; }
#film_quality { font-size: 11px; text-transform: uppercase; background: #333; color: #fff; margin-left: 2px;
  padding: 2px 5px; border-radius: 3px; }
.fposter .short-meta a { color: #000; }
.fposter img { border-radius: 4px; }
.frate { justify-content: center; padding: 10px 0; }
.frate .fr-box22 { margin: 0 auto; }
.fr-count.fr-common { position: relative; box-shadow: none; background: conic-gradient(#f48625 var(--pct, 0%), #444 0); }
.fr-count.fr-common::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border-radius: 50%; background: #1e1e1e; }
.fr-count.fr-common > div { color: #fff; }
.frkl { clear: both; }
.fleft { text-align: center; }

/* ---- BANDE ANNONCE button + modal ------------------------------------- */
.trailer-btn { display: block; margin: 12px auto 0; padding: 0 12px; line-height: 38px; width: 180px; max-width: 100%;
  border: 2px solid #f48625; border-radius: 4px; background: transparent; color: #f48625; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; text-align: center; white-space: nowrap; transition: background .2s, color .2s; }
.trailer-btn:hover { background: #f48625; color: #fff; }
.trailer-btn .fa { margin-right: 6px; }
.trailer-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.trailer-modal[hidden] { display: none; }
.trailer-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.85); }
.trailer-box { position: relative; z-index: 1; width: 100%; max-width: 960px; background: #000; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.8); }
.trailer-frame { position: relative; width: 100%; padding-top: 56.25%; }
.trailer-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.trailer-close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f48625; color: #fff; font-size: 24px; line-height: 36px; text-align: center; cursor: pointer; padding: 0; }
.trailer-close:hover { background: #fff; color: #f48625; }
body.has-modal { overflow: hidden; }

/* ---- Télécharger block + Signaler ------------------------------------- */
.dl-block { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.dl-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.report-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #999; }
.report-link:hover { color: #f48625; }
.report-link .fa { color: #f48625; }
.dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; padding: 0 24px;
  line-height: 44px; border: 0; border-radius: 4px; background: #f48625; color: #fff; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: background .2s; }
.dl-btn:hover { background: #d9731a; }
.dl-btn[aria-expanded="true"] { background: #b85f13; }
.dl-btn .fa { font-size: 18px; }
.dl-options { margin-top: 12px; }
.dl-options[hidden] { display: none; }
.dl-option { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 0 16px; line-height: 42px;
  border: 2px solid #f48625; border-radius: 4px; background: rgba(0,0,0,.25); color: #fff; font-size: 14px; font-weight: 700;
  transition: background .2s, color .2s; }
.dl-option:hover { background: #f48625; color: #fff; }
.dl-option .fa { color: #f48625; }
.dl-option:hover .fa { color: #fff; }
@media screen and (max-width: 760px) {
  .dl-row { flex-direction: column-reverse; align-items: stretch; }
  .dl-btn { width: 100%; }
  .report-link { justify-content: center; }
}

/* ---- responsive header ------------------------------------------------ */
@media screen and (max-width: 768px) {
  .fmain.fmain-bd { min-height: 0; padding: 16px; background-position: center top; }
  /* darken the backdrop further so the text stays readable when it sits over the image */
  .fmain.fmain-bd::before { box-shadow: inset 0 0 0 9999px rgba(29,29,29,.6); filter: blur(4px); }
  .fmain h1 { font-size: 20px; }
  .actor-card { width: 120px; height: 180px; }
}

/* ---- "similaires" section --------------------------------------------- */
.sect-t .st-capt { color: #fff; }