/* ===== Films / Séries : copie de Vod.tsx et Series.tsx (tailles en dp de l'appli reprises en px) ===== */
.feuille.f-sec,.feuille.f-fiche{animation:none}
/* -- en-tete -- */
.f-tete{display:flex;align-items:center;padding:calc(var(--st) + 12px) max(14px,var(--sr)) 8px max(14px,var(--sl));flex:none;min-width:0}
.f-hretour{color:var(--a);font-size:15px;font-weight:700;margin-right:14px;white-space:nowrap;padding:4px 0}
.f-logo{height:30px;width:auto;margin-right:10px;flex:none}
.f-tete h1{color:#fff;font-size:19px;font-weight:900;margin:0;white-space:nowrap}
.f-compte{color:var(--a);font-size:13px;font-weight:800;margin-left:12px;background:rgba(233,185,73,.12);border-radius:20px;padding:3px 11px;white-space:nowrap}
/* -- corps : categories | outils + grille -- */
.f-corps{flex:1;min-height:0;display:flex;padding:0 max(8px,var(--sr)) 0 max(8px,var(--sl))}
.f-rail{width:138px;flex:none;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(16px + var(--sb));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.f-rail::-webkit-scrollbar{display:none}
.f-cat{display:block;width:100%;text-align:left;padding:10px;border-radius:10px;margin-bottom:4px;color:var(--mut);font-size:12px;line-height:1.3;border-left:3px solid transparent;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.f-cat:active{background:rgba(233,185,73,.18)}
.f-cat.on{background:var(--card2);border-left-color:var(--a);color:var(--a);font-weight:700}
.f-main{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:8px}
.f-outils{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:none;min-width:0}
.f-cherche{width:180px;flex:none;min-width:0;background:var(--glass);color:#fff;border-radius:10px;border:1px solid var(--line);padding:7px 12px;font-size:16px;line-height:18px;outline:0;-webkit-appearance:none;appearance:none}
.f-cherche::placeholder{color:var(--mut)}
.f-cherche:focus{border-color:var(--a)}
.f-tris{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;min-width:0}
.f-tris::-webkit-scrollbar{display:none}
.f-tri{flex:none;padding:6px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--line);margin-right:6px;color:var(--mut);font-size:12px;font-weight:700;white-space:nowrap}
.f-tri.on{background:var(--a);border-color:var(--a);color:#0d0d12}
.f-zone{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(16px + var(--sb))}
.f-zone .charge{padding:30px 0}
/* 6 colonnes a la taille d un telephone (comme l appli), davantage sur grand ecran (10 au plus) */
.f-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(96px,calc((100% - 72px) / 10)),1fr));gap:4px 8px;align-content:start}
.f-cell{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-width:0;padding:4px;border-radius:12px;border-left:4px solid transparent;text-align:center}
.f-cell:active{background:rgba(233,185,73,.18);border-left-color:var(--a)}
.f-pwrap{position:relative;width:100%;aspect-ratio:.66;border-radius:8px;overflow:hidden;background:var(--card)}
.f-poster{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;background:var(--card)}
.f-ph{display:grid;place-items:center;font-size:24px;background:var(--card)}
.f-pwrap>.f-ph{width:100%;height:100%}
.f-pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(42,39,55,.9)}
.f-pbar i{display:block;height:100%;background:var(--a)}
.f-nom{color:#ddd;font-size:11px;line-height:1.3;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.f-vide{text-align:center;padding:30px 20px}
.f-vide b{display:block;color:var(--a);font-size:15px}
.f-vide p{color:#cfcfd8;font-size:13px;margin:8px auto 0;max-width:420px;line-height:1.45}

/* -- fiche -- */
.f-fsc{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--st) + 14px) max(18px,var(--sr)) calc(30px + var(--sb)) max(18px,var(--sl))}
.f-bd{position:absolute;top:0;left:0;right:0;height:240px;background:center/cover no-repeat;opacity:.18;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.f-dtop{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.f-retour{color:var(--a);font-size:16px;font-weight:700;padding:4px 0}
.f-fav{padding:4px 10px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:#cfcfd8;font-size:13px;font-weight:700;white-space:pre}
.f-fav.on{color:#FF6B9D}
.f-drow{position:relative;display:flex;align-items:flex-start}
.f-dposter-z{flex:none;width:min(200px,calc(var(--vw)*24));position:sticky;top:0}
.feuille.f-fiche .f-dposter{display:block;width:100%;aspect-ratio:.66;border-radius:12px;object-fit:cover;background:var(--card)}
.feuille.f-fiche .f-dposter.f-ph{font-size:34px}
.f-dinfo{flex:1;min-width:0;margin-left:18px}
.f-dtitre{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.f-dtitre h2{color:#fff;font-size:24px;font-weight:800;line-height:1.2;margin:0}
.f-age{min-width:34px;height:26px;border-radius:6px;padding:0 7px;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.25);font-size:13px;font-weight:900;letter-spacing:.3px}
.f-dmeta{color:var(--a);font-size:13px;font-weight:700;margin-top:6px;white-space:pre-wrap}
.f-dligne{color:#cfcfd8;font-size:13px;margin-top:6px}
.f-dlbl{color:var(--mut)}
.f-lire{display:block;margin-top:14px;min-width:200px;max-width:260px;width:100%;border-radius:10px;padding:12px 18px;background:linear-gradient(90deg,var(--a1),var(--a),var(--a2));color:#0d0d12;font-weight:800;font-size:15px;white-space:pre}
.f-lire:active{filter:brightness(1.1)}
.f-debut{display:block;margin-top:8px;padding:6px 12px;color:var(--mut);font-size:12px;text-decoration:underline}
.f-ba{display:block;margin-top:10px;min-width:200px;max-width:240px;width:100%;border-radius:10px;padding:10px 18px;border:1px solid var(--a);background:var(--glass);color:var(--a);font-weight:800;font-size:14px;white-space:pre}
.f-avis{margin-top:12px;max-width:460px;border:1px solid var(--a);background:var(--asoft);border-radius:10px;padding:8px 12px;font-size:12.5px;color:#f3e3b8}
.f-attente{padding:14px 0}
.f-attente .rond{margin:0}
.f-dh{color:var(--mut);font-size:11px;font-weight:800;letter-spacing:2px;margin:16px 0 6px}
.f-plot{color:#bbb;font-size:13.5px;line-height:20px;margin:0}
.f-plot-s{margin-top:10px}
.f-cast{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.f-cast.sans{margin-top:12px}
.f-cast::-webkit-scrollbar{display:none}
.f-acteur{width:78px;margin-right:12px;flex:none;display:flex;flex-direction:column;align-items:center}
.f-acteur-i{width:64px;height:64px;border-radius:32px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;color:var(--a);font-size:22px;font-weight:800}
.f-acteur-n{color:#e6e6ea;font-size:11px;font-weight:700;margin-top:5px;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* saisons + episodes */
.f-saisons{display:flex;overflow-x:auto;scrollbar-width:none;margin-top:14px;padding-bottom:2px}
.f-saisons::-webkit-scrollbar{display:none}
.f-saison{flex:none;padding:7px 15px;border-radius:10px;background:var(--glass);border:1px solid var(--line);margin-right:8px;color:#ccc;font-weight:700;font-size:13px;white-space:nowrap}
.f-saison.on{background:var(--a);border-color:var(--a);color:#0d0d12}
.f-eps{margin-top:10px}
.f-ep{display:block;width:100%;text-align:left;background:var(--card);border-radius:10px;border:1px solid var(--line);padding:12px;margin-bottom:7px}
.f-ep:active{background:rgba(233,185,73,.18);border-color:var(--a)}
.f-ep-l{display:flex;align-items:center;gap:10px}
.f-ep-t{flex:1;min-width:0;color:#eee;font-size:13.5px;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.f-ep.vu .f-ep-t{color:#bdb6a8}
.f-ep-d{flex:none;color:var(--mut);font-size:12px}
.f-ep-bg{height:3px;background:#2A2737;border-radius:2px;margin-top:7px;overflow:hidden}
.f-ep-bg i{display:block;height:3px;background:var(--a);border-radius:2px}
.f-epvide{text-align:center;padding:30px 20px}
.f-epvide b{display:block;color:#eee;font-size:15px}
.f-epvide p{color:var(--mut);font-size:13px;margin:8px 0 0;line-height:19px}
.f-reessai{margin-top:16px;background:var(--a);border-radius:12px;padding:11px 26px;color:#1a1400;font-size:14px;font-weight:900}
/* petits ecrans (iPhone SE en paysage) : --vw suit la largeur reelle, meme quand la page est tournee */
.f-rail{width:clamp(112px,calc(var(--vw)*16.4),138px)}
.f-cherche{width:clamp(128px,calc(var(--vw)*21),180px)}