/* FastPlayer TV (web) - theme sombre rouge, curseur bleu + contour blanc (comme l'app Android).
   Performances : pas de flou, pas d'ombres larges, pas d'animations couteuses ; seules les couleurs changent au curseur. */
:root {
  --bg: #0b0b0d; --panel: #141417; --card: #1c1c20; --txt: #f2f2f5; --mut: #9a9aa2; --red: #ff2d55; --gold: #e0b341;
  --cursor: #0088ff; --white: #fff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(100vw / 120); }          /* 1920 px => 16 px ; s'adapte a 1280x720, 3840x2160... */
html.sz0 { font-size: calc(100vw / 133); }
html.sz2 { font-size: calc(100vw / 104); }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: Roboto, Arial, sans-serif; overflow: hidden; width: 100vw; height: 100vh; }
button, input { font: inherit; color: inherit; border: 0; background: none; text-align: inherit; }
.f { outline: none; cursor: pointer; }
.f:focus { background: var(--cursor) !important; box-shadow: 0 0 0 .22rem var(--white); z-index: 5; position: relative; color: #fff; }
#video { position: fixed; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; z-index: 0; }
#app { position: fixed; inset: 0; z-index: 1; }
/* Samsung (AVPlay) : la video est affichee derriere la page ; fond transparent pendant la lecture */
html.avplay, html.avplay body { background: transparent !important; }
.screen { position: absolute; inset: 0; padding: 2rem 3rem; background: var(--bg); overflow: hidden; }
.screen.live, .screen.vod { background: transparent; padding: 0; }
.back { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--card); font-size: 1.6rem; text-align: center; }
.gtop { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.gtitle { font-size: 2rem; color: var(--red); font-weight: 600; flex: 0 0 auto; }
.search { flex: 1; background: var(--card); border-radius: 2rem; padding: .8rem 1.4rem; font-size: 1.2rem; min-width: 12rem; }
.chs-col .search { flex: 0 0 auto; margin-bottom: .6rem; }
.empty { padding: 3rem; color: var(--mut); font-size: 1.4rem; }

/* accueil */
.home { background: radial-gradient(circle at 70% 20%, #2a1218, var(--bg) 60%); display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; }
.brand { display: flex; align-items: center; gap: 1rem; font-size: 2rem; color: var(--red); font-weight: 600; }
.brand img { width: 3.6rem; height: 3.6rem; border-radius: .6rem; }
.acct { background: rgba(0,0,0,.55); border-radius: .8rem; padding: .6rem 1.2rem; text-align: right; font-size: 1.1rem; }
.acct .b { font-weight: 600; } .acct .e { color: #ff7a93; } .acct .c { color: var(--mut); }
.hero, .hero-empty { flex: 1; margin: 1.5rem 0; padding: 1.5rem 2rem; border-radius: 1.2rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 9rem; }
.hero .chip { background: var(--gold); color: #1a1405; font-weight: 700; font-size: .95rem; padding: .25rem .9rem; border-radius: 1rem; }
.hero-title { font-size: 2.6rem; margin: .6rem 0; font-weight: 500; }
.hero-sub { color: var(--mut); font-size: 1.3rem; }
.bar { width: 22rem; height: .3rem; background: rgba(255,255,255,.25); } .bar i { display: block; height: 100%; background: var(--gold); }
.pill { margin-top: .9rem; background: var(--gold); color: #1a1405; font-weight: 700; padding: .5rem 1.6rem; border-radius: 2rem; font-size: 1.2rem; }
.hero:focus .pill { background: #fff; }
.tiles { display: flex; gap: 1rem; }
.tile { flex: 1; height: 8.5rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; font-size: 1.25rem; text-align: center; }
.tile .ti { font-size: 2rem; margin-bottom: .3rem; }
.t-live { background: #118a62; } .t-movies { background: #8a6410; } .t-series { background: #12767c; } .t-pl { background: #3d6a3a; }
.t-acc { background: #5a4420; } .t-set { background: #2f4652; } .t-quit { background: #8a2433; }
.section { margin-top: 1.2rem; } .sec-title { font-size: 1.3rem; color: var(--gold); margin-bottom: .6rem; font-weight: 500; }
.hrow { display: flex; gap: 1rem; overflow: hidden; padding: .4rem; }
.chtile { flex: 0 0 13rem; height: 8rem; background: #123a2e; border-radius: .9rem; position: relative; overflow: hidden; }
.chlogo { position: absolute; inset: .5rem .5rem 2.2rem; width: calc(100% - 1rem); height: calc(100% - 2.7rem); object-fit: contain; }
.chname { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); padding: .35rem .6rem; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* live */
.panel { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; display: flex; background: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.6) 80%, rgba(0,0,0,0)); padding: 1.2rem 1rem 1rem 1.6rem; gap: .8rem; }
.panel.off { display: none; }
.col { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.cats-col { flex: 0 0 34%; } .chs-col { flex: 1; }
.cats, .chs { overflow-y: auto; flex: 1; scrollbar-width: none; } .cats::-webkit-scrollbar, .chs::-webkit-scrollbar { display: none; }
.cat { display: block; width: 100%; padding: .75rem 1rem; font-size: 1.15rem; border-radius: .6rem; background: rgba(255,255,255,.07); margin-bottom: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrow { display: flex; align-items: center; margin-bottom: .2rem; }
.ch { flex: 1; display: flex; align-items: center; gap: .8rem; padding: .45rem .8rem; border-radius: .6rem; min-width: 0; }
.ch .num { width: 2.6rem; color: var(--mut); text-align: right; font-size: 1rem; }
.ch .lg { width: 2.6rem; height: 2.2rem; object-fit: contain; flex: 0 0 auto; }
.ch .nm { flex: 1; font-size: 1.2rem; color: #f2c94c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch.playing { background: #221d0e; box-shadow: inset 0 0 0 .1rem var(--gold); }
.star { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; text-align: center; color: #f2c94c; border-radius: 50%; }
.banner { position: absolute; left: 3rem; right: 3rem; bottom: 2rem; padding: 1rem 1.6rem; background: rgba(0,0,0,.7); border-radius: 1rem; display: none; align-items: center; gap: 1.2rem; }
.banner.on { display: flex; } .blogo { width: 4rem; height: 4rem; object-fit: contain; } .bname { font-size: 1.8rem; }

/* grilles */
.gridscr { display: flex; flex-direction: column; }
.chips { display: flex; gap: .6rem; overflow-x: auto; padding: .3rem .3rem .9rem; scrollbar-width: none; flex: 0 0 auto; } .chips::-webkit-scrollbar { display: none; }
.chip2 { flex: 0 0 auto; padding: .55rem 1.3rem; border-radius: 2rem; background: var(--card); font-size: 1.1rem; white-space: nowrap; }
.chip2.sel { background: #221d0e; box-shadow: inset 0 0 0 .1rem var(--gold); color: #f2c94c; }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; padding: .5rem; align-content: start; scrollbar-width: none; } .grid::-webkit-scrollbar { display: none; }
.card { position: relative; aspect-ratio: 2 / 3; border-radius: .8rem; overflow: hidden; background: var(--card); padding: 0; }
.poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge { position: absolute; left: .5rem; top: .5rem; background: rgba(0,0,0,.75); color: #f2c94c; font-size: .8rem; font-weight: 700; padding: .15rem .5rem; border-radius: .35rem; }
.ctitle { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); padding: .4rem .6rem; font-size: .95rem; font-weight: 600; max-height: 3.2rem; overflow: hidden; }
.pbar { position: absolute; left: 0; right: 0; bottom: 3.2rem; height: .25rem; background: rgba(255,255,255,.3); } .pbar i { display: block; height: 100%; background: var(--gold); }

/* details */
.details { display: flex; gap: 2rem; align-items: flex-start; }
.details .back { position: absolute; left: 1.5rem; top: 1.5rem; }
.dleft { flex: 0 0 18rem; margin-top: 4rem; } .dposter { width: 100%; border-radius: .8rem; display: block; }
.dmid { flex: 1; margin-top: 4rem; min-width: 0; } .dtitle { font-size: 2.2rem; font-weight: 600; } .drate { color: #f2c94c; margin: .6rem 0; font-size: 1.3rem; }
.dplot { color: #d6d6dc; font-size: 1.15rem; line-height: 1.5; max-height: 14rem; overflow: hidden; }
.playbtn { margin-top: 1.4rem; padding: .8rem 2.4rem; border-radius: 2rem; background: var(--gold); color: #1a1405; font-size: 1.3rem; font-weight: 700; display: inline-block; }
.dright { flex: 0 0 34%; margin-top: 4rem; } .seasons { display: flex; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.season { padding: .5rem 1.2rem; border-radius: 2rem; background: var(--card); font-size: 1.1rem; } .season.sel { background: #221d0e; box-shadow: inset 0 0 0 .1rem var(--gold); }
.eps { max-height: 34rem; overflow-y: auto; scrollbar-width: none; } .eps::-webkit-scrollbar { display: none; }
.ep { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: .8rem 1rem; margin-bottom: .4rem; border-radius: .6rem; background: var(--card); font-size: 1.1rem; }
.etitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eplay { color: var(--red); margin-left: .8rem; }

/* lecteur VOD */
.vctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 3rem 2.2rem; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); display: none; }
.vctl.on { display: block; } .vtitle { font-size: 1.8rem; margin-bottom: .8rem; }
.vbar { display: flex; align-items: center; gap: 1rem; } .vt { font-size: 1.1rem; min-width: 4rem; }
.vtrack { flex: 1; height: .45rem; background: rgba(255,255,255,.3); border-radius: .3rem; } .vtrack i { display: block; height: 100%; background: var(--red); border-radius: .3rem; }
.vstate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 4rem; text-shadow: 0 0 .5rem #000; }

/* formulaires / playlists / parametres */
.pls { max-width: 60rem; } .plrow { display: flex; gap: .8rem; margin-bottom: .6rem; }
.plmain { flex: 1; padding: 1rem 1.4rem; background: var(--card); border-radius: .7rem; font-size: 1.3rem; } .plmain.sel { box-shadow: inset 0 0 0 .1rem var(--gold); }
.pldel { padding: 1rem 1.4rem; background: #3a1a22; border-radius: .7rem; font-size: 1.1rem; }
.plactions { display: flex; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.big { padding: 1rem 2rem; border-radius: .8rem; background: var(--card); font-size: 1.25rem; }
.form { max-width: 50rem; } .fld { display: block; margin-bottom: 1rem; } .fld span { display: block; color: var(--mut); margin-bottom: .3rem; font-size: 1rem; }
.inp { width: 100%; padding: .9rem 1.2rem; background: var(--card); border-radius: .6rem; font-size: 1.3rem; }
.setgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.setcard { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.4rem; background: var(--card); border-radius: .9rem; }
.si { width: 3.2rem; height: 3.2rem; border-radius: .7rem; background: #3a1a22; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.st { font-size: 1.3rem; font-weight: 600; } .sv { color: var(--red); font-size: 1.05rem; margin-top: .2rem; }
.acctbox { font-size: 1.6rem; line-height: 2.2; }

/* fenetres / messages */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 50; display: flex; align-items: center; justify-content: center; }
.dialog { min-width: 30rem; background: #1e1e22; border-radius: 1rem; padding: 1.6rem 2rem; }
.dlg-title { color: var(--red); font-size: 1.7rem; margin-bottom: 1rem; font-weight: 600; }
.row { display: block; width: 100%; padding: .9rem 1.2rem; border-radius: .6rem; font-size: 1.3rem; margin-bottom: .3rem; }
#toast { position: fixed; left: 50%; bottom: 3rem; transform: translateX(-50%); background: rgba(0,0,0,.85); padding: .9rem 2rem; border-radius: 2rem; font-size: 1.2rem; z-index: 60; display: none; max-width: 80vw; text-align: center; }
#toast.on { display: block; }
#busy { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; font-size: 2rem; }
#busy.on { display: flex; }

/* curseur sur les affiches : le cadre est dessine AUTOUR (box-shadow) car l'image recouvre le fond */
.card:focus, .chtile:focus { box-shadow: 0 0 0 .28rem var(--cursor), 0 0 0 .5rem var(--white); transform: scale(1.04); }
.card:focus .ctitle { background: rgba(0,136,255,.9); }


/* ===== alignement sur l'app Android ===== */
/* accueil : fond = affiche lissee + affiche nette a droite */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.55) 60%, rgba(11,11,13,.2) 100%); }
.bd-blur { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.bd-poster { position: absolute; right: 0; top: 0; height: 100%; width: 34%; object-fit: cover; }
.home > :not(.backdrop) { position: relative; z-index: 1; }
.home { background: #0b0b0d; }
.topright { display: flex; align-items: center; gap: 1rem; }
.searchbtn { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(0,0,0,.55); font-size: 1.4rem; text-align: center; }
.hero { background: none; padding: 1rem 0; align-items: flex-start; justify-content: center; }
.hero:focus { box-shadow: inset 0 0 0 .25rem var(--cursor); background: rgba(0,136,255,.1) !important; }
.hero .chip { font-size: 1.05rem; }
.tile { background: #333; box-shadow: none; }
.t-live { background: linear-gradient(135deg, #14a070, #063828); }
.t-movies { background: linear-gradient(135deg, #c99412, #4a3406); }
.t-series { background: linear-gradient(135deg, #1aa0a8, #07343a); }
.t-pl { background: linear-gradient(135deg, #4a8a46, #1e3a1c); }
.t-acc { background: linear-gradient(135deg, #7a5a2a, #2a1d0c); }
.t-set { background: linear-gradient(135deg, #3d5a68, #16242b); }
.t-quit { background: linear-gradient(135deg, #9c2a3a, #34111a); }
.tile .ts { font-size: .85rem; font-weight: 400; opacity: .85; margin-top: .15rem; }
.tile:focus { background: var(--cursor) !important; }

/* Live : noms blancs, chaine en cours en bleu fonce */
.ch .nm { color: #fff; }
.ch.playing { background: #14293d; box-shadow: inset 0 0 0 .12rem var(--cursor); }
.cat { background: rgba(28,28,32,.92); border: .08rem solid #34343a; }
.panel { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.66) 85%, rgba(0,0,0,0)); }

/* Films / Series : colonne de categories + grille de 4 affiches */
.gridscr { display: flex; flex-direction: column; background: #07140e; }
.gbody { flex: 1; display: flex; gap: 1.2rem; min-height: 0; }
.gleft { flex: 0 0 24%; display: flex; flex-direction: column; min-height: 0; }
.gright { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sec-title.red { color: var(--red); font-size: 1.4rem; font-weight: 600; }
.gcats { overflow-y: auto; flex: 1; scrollbar-width: none; } .gcats::-webkit-scrollbar { display: none; }
.gcat { display: flex; align-items: center; width: 100%; gap: .8rem; padding: .7rem .9rem; margin-bottom: .45rem; border-radius: .8rem; background: #17171b; border: .08rem solid #2c2c32; }
.gcat.sel { border-color: var(--gold); background: #221d0e; }
.gi { width: 2.4rem; height: 2.4rem; border-radius: .5rem; background: #2a1219; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto; }
.gt { flex: 1; min-width: 0; } .gn { font-size: 1.15rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs { font-size: .9rem; color: var(--mut); }
.ga { color: var(--red); font-size: 1.3rem; }
.gcat:focus .gs, .gcat:focus .ga { color: #fff; }
.gridscr .grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fav { position: absolute; right: .4rem; top: .4rem; width: 2.2rem; height: 2.2rem; border-radius: .4rem; background: rgba(0,0,0,.7); color: #f2c94c; text-align: center; line-height: 2.2rem; font-size: 1.3rem; }
.ctitle { font-size: 1.05rem; }
.badge { display: none; }
.dposter { border: .15rem solid var(--red); }
.dcat { color: var(--red); font-size: 1.25rem; margin: .5rem 0; font-weight: 600; }
.search.big { font-size: 1.6rem; }
.sres { margin-top: 1rem; }
.gright .search { flex: 0 0 auto; margin-bottom: .8rem; border-radius: .9rem; }
.gridscr .grid { flex: 1; min-height: 0; }

/* QR code */
.qrwrap { display: flex; gap: 3rem; align-items: center; margin-top: 2rem; }
.qrbox { flex: 0 0 26rem; height: 26rem; background: #fff; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #000; }
.qrcv { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 1rem; }
.qrph { color: #333; font-size: 1.3rem; padding: 1rem; text-align: center; }
.qrstep { font-size: 1.7rem; margin-bottom: 1rem; }
.qrsub { color: var(--mut); font-size: 1.05rem; margin-top: 1.5rem; max-width: 40rem; line-height: 1.5; }


/* ===== Parametres & Playlists : memes cartes que l'APK ===== */
.setscr { background: #07140e; }
.setgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-content: start; overflow-y: auto; max-height: calc(100vh - 9rem); scrollbar-width: none; padding: .3rem; }
.setgrid::-webkit-scrollbar { display: none; }
.setcard { display: flex; align-items: center; gap: .9rem; min-height: 5.2rem; padding: .9rem 1.1rem; background: #1c1c1f; border: .08rem solid #2c2c30; border-radius: 1rem; }
.si { width: 3rem; height: 3rem; border-radius: .7rem; background: #2a1318; color: #ff2d55; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; flex: 0 0 auto; }
.stx { min-width: 0; flex: 1; }
.st { font-size: 1.15rem; font-weight: 600; color: #fff; }
.sv { color: #ff5a7a; font-size: .95rem; margin-top: .15rem; }
.setcard:focus .sv, .setcard:focus .si { color: #fff; }
.setcard:focus .si { background: rgba(255,255,255,.2); }

/* Mes Playlists */
.plscr { background: #07140e; }
.plbody { display: flex; gap: 1.2rem; }
.plgrid { flex: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-content: start; }
.plcard { position: relative; min-height: 10rem; padding: 1.1rem; background: #1f181a; border: .08rem solid #442d30; border-radius: 1.2rem; display: block; text-align: left; }
.plcard.sel { background: #2a1418; box-shadow: inset 0 0 0 .15rem #ff2d55; }
.plcard:focus { background: #14293d !important; }
.pln { font-size: 1.3rem; font-weight: 700; color: #fff; padding-right: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls2 { font-size: 1rem; color: #a8a8ae; margin-top: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plfoot { position: absolute; left: 1.1rem; bottom: 1rem; display: flex; gap: .5rem; align-items: center; }
.pill { padding: .2rem .8rem; border-radius: 1rem; font-size: .85rem; } .pill.dark { background: #1c1c1f; color: #b0b0b5; border: .08rem solid #34343a; } .pill.red { background: #ff2d55; color: #fff; font-weight: 700; }
.plcard.add { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.plplus { color: #ff2d55; font-size: 3rem; line-height: 1; } .pladd { font-size: 1.2rem; font-weight: 700; margin-top: .3rem; }
.plright { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding: .5rem; }
.pillbtn { width: 100%; height: 3.4rem; border-radius: 2rem; background: #1c1c1f; border: .08rem solid #34343a; font-size: 1.1rem; font-weight: 700; text-align: center; }
.rlabel { color: #ccc; font-size: .95rem; margin-top: 1.3rem; }
.rbox { margin-top: .7rem; background: #1e1e1e; border: .15rem solid #ff2d55; border-radius: .9rem; padding: 1.1rem; text-align: center; }
.rid { font-size: 1.2rem; font-weight: 700; } .rpw { font-size: 1.45rem; font-weight: 700; color: #ff8a9b; margin-top: .6rem; }
.rlink { margin-top: .9rem; width: 100%; color: #ff8a9b; font-size: .95rem; line-height: 1.4; text-align: center; padding: .4rem .6rem; border-radius: .6rem; }
.addtabs { display: flex; gap: .6rem; margin-left: auto; }
.form.wide { max-width: 70rem; } .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.plgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Affiches : hauteur FIXE (rapport 2:3 par padding) -> plus de chevauchement des rangees sur webOS / Tizen (aspect-ratio non fiable sur un bouton) */
.card { height: 0 !important; padding: 0 0 150% 0 !important; aspect-ratio: auto !important; overflow: hidden; display: block; }
.card .poster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.grid { align-items: start; grid-auto-rows: auto; }
.card:focus { transform: none; z-index: 5; }


/* Ajouter une Playlist : onglets centres, carte de formulaire, gros bouton rouge (comme l'APK) */
.addtabs { display: flex; gap: .8rem; justify-content: center; margin: .6rem 0 1.4rem; margin-left: 0; }
.tabbtn { min-width: 13rem; height: 3.3rem; border-radius: 2rem; background: #1c1c1f; font-size: 1.15rem; font-weight: 600; text-align: center; }
.tabbtn.on { background: #ff2d55; }
.formcard { background: #141416; border: .08rem solid #2c2c30; border-radius: 1.2rem; padding: 1.4rem 1.2rem; }
.frow { display: flex; gap: 1rem; margin-bottom: .6rem; }
.frow > div { min-width: 0; } .c1 { flex: 1; } .c14 { flex: 1.4; } .c16 { flex: 1.6; }
.frow .fld { margin: 0 .3rem .5rem; }
.savewrap { text-align: center; margin-top: 1rem; }
.savebtn { min-width: 26rem; height: 3.6rem; border-radius: 2rem; background: #ff2d55; color: #fff; font-size: 1.25rem; font-weight: 700; text-align: center; }
.savebtn:focus { background: var(--cursor) !important; }


/* ===== Mes Playlists : ajustements d'apres l'APK ===== */
.back { background: #0088ff; color: #fff; }
.plx { position: absolute; right: .9rem; top: .9rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #3a3a40; color: #fff; text-align: center; line-height: 2.4rem; font-size: 1rem; font-weight: 700; cursor: pointer; }
.pln { padding-right: 3.2rem; }
.pillbtn { background: #2a2a2e; border: none; }
.rlabel { text-align: center; }
.rlink { text-align: center; }


/* ===== Accueil CLASSIQUE (comme l'APK) ===== */
.home.classic { background: #0b0b0d repeating-linear-gradient(120deg, rgba(255,45,85,.10) 0 .15rem, transparent .15rem 11.3rem); display: flex; flex-direction: column; }
.home.classic > .watermark { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 10.3rem; font-weight: 800; color: rgba(255,45,85,.12); pointer-events: none; z-index: 0; letter-spacing: .05rem; }
.cbody { flex: 1; display: flex; gap: 1.3rem; margin-top: 1rem; min-height: 0; }
.cbody > * { min-width: 0; }
.ctile { background: rgba(22,12,16,.9); border: .2rem solid #ff2d55; border-radius: 1.5rem; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ctile:focus { background: #0088ff !important; border-color: #fff; box-shadow: none; transform: none; }
.ctile .ci { font-size: 2.2rem; }
.ctile .ct { font-weight: 700; }
.ctile .cs { font-size: .9rem; color: rgba(255,255,255,.87); margin-top: .2rem; }
.ccont { flex: 1; position: relative; padding: 0; background: #28101a; border-color: rgba(255,45,85,.6); }
.ccont:focus { background: #28101a !important; border: .5rem solid #0088ff; }
.cposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinfo { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); padding: .8rem 1.1rem; text-align: left; }
.cinfo .cl { color: #ff2d55; font-size: 1.1rem; } .cinfo .cn { font-size: 1.4rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinfo .bar { width: 100%; margin-top: .5rem; }
.cempty { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.cempty .ci { font-size: 5rem; color: #ff2d55; } .cempty .ct { font-size: 1.6rem; }
.clive { flex: 1; flex-direction: column; text-align: center; }
.clive .ci { font-size: 8.5rem; line-height: 1; } .clive .ct { font-size: 2.8rem; margin-top: .6rem; }
.cright { flex: 1.15; display: flex; flex-direction: column; gap: 1.3rem; }
.cfilm, .cser { flex: 1; gap: 1.5rem; } .cfilm .ci, .cser .ci { font-size: 4.2rem; } .cfilm .ct, .cser .ct { font-size: 2rem; }
.cfilm .cx, .cser .cx { text-align: left; }
.crow { flex: .55; display: flex; gap: 1.3rem; }
.csmall { flex: 1; gap: .8rem; padding: 0 .8rem; } .csmall .ci { font-size: 1.8rem; } .csmall .ct { font-size: 1.4rem; }


/* ===== Arabe : ecriture de droite a gauche ===== */
html[dir=rtl] body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
html[dir=rtl] .hero, html[dir=rtl] .hero-empty, html[dir=rtl] .cinfo, html[dir=rtl] .cfilm .cx, html[dir=rtl] .cser .cx { align-items: flex-end; text-align: right; }

.dlg-msg { color: #cfcfd6; font-size: 1.1rem; line-height: 1.5; margin: 0 0 1rem; max-width: 36rem; }


/* ===== Fiche film / serie : image de fond + synopsis (comme l'APK) ===== */
.details { position: relative; }
.details > .dbd { position: absolute; inset: 0; z-index: 0; }
.details > .dleft, .details > .dmid, .details > .dright { position: relative; z-index: 1; }
.details .back { z-index: 2; }
.bd-wide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.bd-wide.on { opacity: 1; }
.dbd::after { background: linear-gradient(90deg, rgba(11,11,13,.94) 0%, rgba(11,11,13,.78) 55%, rgba(11,11,13,.45) 100%); }
.dmeta { margin-top: .8rem; color: #b9b9c2; font-size: 1.05rem; line-height: 1.6; max-width: 46rem; }
.dplot { max-height: 12rem; }

.gleft .catsearch { flex: 0 0 auto; width: 100%; margin: 0 0 .5rem; padding: .55rem 1rem; font-size: 1.05rem; border-radius: .6rem; background: #222; }


/* ===== Lecteur film / serie : barre de controle comme l'APK (rembobiner / pause / avancer + CC / AUDIO / QUALITE) ===== */
.vctl { position: absolute; inset: 0; padding: 0; background: none; display: none; }
.vctl.on { display: block; }
.vback { position: absolute !important; left: 1.6rem; top: 1.4rem; }
.vpanel { position: absolute; left: 2rem; right: 2rem; bottom: 1.5rem; background: rgba(18,18,18,.92); padding: 1rem 1.6rem 1.1rem; }
.vrow1 { display: flex; align-items: center; gap: 1.2rem; }
.vt { font-size: 1.15rem; font-weight: 700; min-width: 3.8rem; } .vt.dim { color: #aaa; font-weight: 400; text-align: right; }
.vtrack { position: relative; flex: 1; height: .55rem; background: #555; border-radius: .3rem; }
.vtrack i { display: block; height: 100%; background: var(--red); border-radius: .3rem; }
.vthumb { position: absolute; top: 50%; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; border-radius: 50%; background: #fff; border: .2rem solid var(--red); box-sizing: border-box; }
/* barre de progression selectionnable (curseur bleu + contour blanc comme le reste de l'app) */
.vseek { flex: 1; display: block; padding: 1rem 0; background: transparent; border-radius: .6rem; }
.vseek .vtrack { width: 100%; }
.vseek:focus { background: transparent !important; box-shadow: none !important; }
.vseek:focus .vtrack { background: #5a6a80; box-shadow: 0 0 0 .2rem #0088ff, 0 0 0 .4rem #fff; }
.vseek:focus .vthumb { background: #0088ff; border-color: #fff; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; }
.vrow2 { display: flex; align-items: center; margin-top: 1rem; gap: .8rem; }
.vsp { flex: 1; }
.vbtn { width: 4.1rem; height: 4.1rem; border-radius: 50%; background: #333; border: .1rem solid #555; color: #fff; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0; }
.vbtn.vplay { width: 5.4rem; height: 5.4rem; background: var(--red); border-color: var(--red); font-size: 1.9rem; margin: 0 .8rem; }
.vpill { height: 3.4rem; padding: 0 1.5rem; border-radius: 1.7rem; background: #2b2b2b; border: .1rem solid #555; color: #fff; font-weight: 700; font-size: 1.1rem; }
.nextcard { position: absolute; right: 2rem; bottom: 2rem; background: #1b1b1f; border: .1rem solid #444; border-radius: 1rem; padding: 1.4rem 1.6rem; z-index: 6; max-width: 40rem; }
.ncl { font-size: 1.3rem; line-height: 1.4; } .nrow { display: flex; gap: .8rem; margin-top: 1rem; }


/* ===== Licence requise ===== */
.screen.paywall { display: flex; align-items: center; justify-content: center; }
.payc { width: 60rem; text-align: center; }
.paymsg { color: #d6d6dc; font-size: 1.3rem; line-height: 1.5; margin: 1rem 0 1.4rem; }
.payc .inp { width: 100%; text-align: center; }

/* ===== Taille des sous-titres (réglage Sous-titres) ===== */
video::cue { font-size: 100%; }
html[data-sub="0"] video::cue { font-size: 75%; }
html[data-sub="2"] video::cue { font-size: 135%; }
html[data-sub="3"] video::cue { font-size: 180%; }
html[data-subbold="1"] video::cue { font-weight: 700; }
/* Mes Playlists : QR direct dans la colonne de droite */
.qrmsg { font-size: 1rem; line-height: 1.4; text-align: center; font-weight: 700; margin-bottom: .6rem; }
.qrbox.sm { flex: none; width: 13rem; height: 13rem; margin: 0 auto; }