/* ---------- player page ---------- */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;padding-top:22px}
.back{font-family:var(--osd);font-size:22px;color:var(--dim);cursor:pointer;display:inline-block;margin:14px 0 0}

.tv{position:relative;background:linear-gradient(#2b2540,#171326 40%,#0d0a1a);border-radius:22px;padding:22px 22px 54px;
  border:3px solid #000;box-shadow:0 30px 60px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.4)}
.tv::before{content:"";position:absolute;left:30px;right:30px;bottom:-14px;height:14px;background:#000;border-radius:0 0 12px 12px;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.screen{position:relative;background:#000;border-radius:60px/46px;overflow:hidden;aspect-ratio:4/3;border:4px solid #05040a;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 0 0 3px #0c0a18}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.10),transparent 45%),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45));
  box-shadow:inset 0 0 40px rgba(0,0,0,.7)}
.screen .scan{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.screen.paused video{filter:saturate(.85)}

/* OSD */
.osd{position:absolute;z-index:7;font-family:var(--osd);color:#fff;text-shadow:2px 2px 0 #000,0 0 6px rgba(0,0,0,.8);pointer-events:none;letter-spacing:2px}
.osd.mode{left:7%;top:8%;font-size:clamp(22px,4.2vw,42px)}
.osd.mode.green{color:var(--green)}
.osd.cnt{right:7%;top:8%;font-size:clamp(22px,4.2vw,42px)}
.osd.date{right:7%;bottom:9%;font-size:clamp(20px,3.6vw,34px);color:var(--amber)}
.osd.tape{left:7%;bottom:9%;font-size:clamp(18px,3vw,28px);color:#cfc7ff}
.osd.rec{left:7%;top:17%;font-size:clamp(18px,3vw,28px);color:var(--red)}
.osd.fade{opacity:0;transition:opacity .5s}
.tracking{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 2px,transparent 2px 6px);mix-blend-mode:screen}
.tracking.on{opacity:1;animation:track .35s steps(3) 1}
@keyframes track{0%{transform:translateY(-8px) skewX(4deg)}50%{transform:translateY(10px) skewX(-6deg)}100%{transform:none}}
.bigplay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.35);border:0}
.bigplay span{font-family:var(--osd);font-size:clamp(34px,7vw,72px);letter-spacing:4px;color:#fff;text-shadow:3px 3px 0 #000}
.bigplay.hide{display:none}

/* VCR controls */
.vcr{position:absolute;left:22px;right:22px;bottom:10px;display:flex;align-items:center;gap:8px;height:34px}
.vcr .led{width:10px;height:10px;border-radius:50%;background:#3a1014;flex:none}
.vcr .led.on{background:var(--red)}
.vcr button{height:30px;min-width:38px;padding:0 10px;border:0;border-radius:6px;cursor:pointer;color:#e8e1ff;font-family:var(--osd);font-size:20px;
  background:linear-gradient(#4a4268,#2c2646);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 #08060f}
.vcr button:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 #08060f}
.vcr button.rd{background:linear-gradient(#f0464f,var(--red2))}
.vcr .sp{flex:1}
.seek{position:relative;flex:1;height:34px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.seek .trk{position:relative;width:100%;height:8px;background:#05040a;border-radius:4px;box-shadow:inset 0 0 0 1px #3b345c}
.seek .buf{position:absolute;left:0;top:0;bottom:0;background:#3b345c;border-radius:4px}
.seek .pos{position:absolute;left:0;top:0;bottom:0;background:var(--red);border-radius:4px}
.seek .knob{position:absolute;top:50%;width:14px;height:22px;margin:-11px 0 0 -7px;border-radius:3px;background:var(--ink);box-shadow:0 2px 0 #000}
.seek .mk{position:absolute;top:-4px;width:3px;height:16px;background:var(--cyan);margin-left:-1px;border-radius:1px}
.seek .tip{position:absolute;bottom:22px;transform:translateX(-50%);font-family:var(--osd);font-size:18px;background:#000;border:1px solid var(--line);padding:0 6px;border-radius:3px;pointer-events:none;display:none}
.seek:hover .tip{display:block}
.vol{width:70px}

.meta{margin-top:30px}
.meta h1{font-family:var(--logo);font-size:clamp(22px,3vw,32px);line-height:1.2}
.meta .tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag{font-family:var(--osd);font-size:19px;background:#1a1640;border:2px solid var(--line);border-radius:6px;padding:0 10px;color:var(--ink);cursor:pointer}
.tag.cy{border-color:#1d6a70;color:var(--cyan)}
.meta .notes{background:var(--panel);border:2px dashed var(--line);border-radius:10px;padding:14px 16px;color:var(--ink);white-space:pre-wrap}
.meta .acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* side column */
.side h3{font-family:var(--osd);font-size:28px;letter-spacing:2px;color:var(--amber);margin-bottom:10px}
.cform{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.cform textarea{min-height:64px;padding:10px 12px;background:#0b0920;border:2px solid var(--line);border-radius:8px;outline:none;resize:vertical}
.cform textarea:focus{border-color:var(--cyan)}
.cform .r{display:flex;gap:8px;align-items:center}
.cform .r label{font-family:var(--osd);font-size:19px;color:var(--dim);display:flex;gap:6px;align-items:center;cursor:pointer}
.cform .r .btn{margin-left:auto}
.cm{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.cm .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cm .h b{font-family:var(--osd);font-size:21px;color:var(--cyan);font-weight:400}
.cm .h time{font-family:var(--osd);font-size:17px;color:var(--mute)}
.cm .at{font-family:var(--osd);font-size:18px;background:#0b3a40;color:var(--cyan);border:0;border-radius:4px;padding:0 6px;cursor:pointer}
.cm .del{margin-left:auto;background:none;border:0;color:var(--mute);cursor:pointer;font-size:14px}
.cm p{margin-top:4px;white-space:pre-wrap;word-break:break-word}
.related{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.rel{display:flex;gap:10px;cursor:pointer;background:var(--panel);border:2px solid var(--line);border-radius:8px;overflow:hidden}
.rel .im{width:110px;aspect-ratio:4/3;background:#000 center/cover;flex:none}
.rel div:last-child{padding:6px 8px 6px 0;min-width:0}
.rel b{display:block;font-family:var(--hand);font-weight:400;font-size:16px;line-height:1.2}
.rel small{font-family:var(--osd);font-size:18px;color:var(--dim)}

/* ---------- admin ---------- */
.admin{padding-top:24px}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:12px 14px}
.stat b{display:block;font-family:var(--osd);font-size:42px;line-height:1;color:var(--amber);font-weight:400}
.stat span{font-family:var(--osd);font-size:18px;color:var(--dim)}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:2px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-family:var(--osd);font-size:19px;color:var(--dim);font-weight:400;background:#100d26}
.tbl td input[type=text]{width:100%;height:34px;padding:0 8px;background:#0b0920;border:2px solid var(--line);border-radius:6px;outline:none}
.tbl td .acts{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--osd);font-size:17px;padding:0 8px;border-radius:4px;background:#1a1640;border:1px solid var(--line)}
.badge.ok{color:var(--green);border-color:#1d5a37}.badge.wait{color:var(--amber);border-color:#6a4a12}.badge.ko{color:var(--pink);border-color:#6a1d46}
.tblwrap{overflow-x:auto}

@media (max-width:1000px){
  .watch{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tv{padding:12px 12px 52px;border-radius:14px}
  .screen{border-radius:28px/22px}
  .vcr{left:12px;right:12px;gap:5px}
  .vcr button{min-width:30px;padding:0 6px;font-size:18px}
  .vol{display:none}
}

/* plein ecran */
.tv:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0;border:0;padding:0 0 46px;background:#000}
.tv:fullscreen::before{display:none}
.tv:fullscreen .screen{aspect-ratio:auto;flex:1;border-radius:0;border:0;box-shadow:none}
.tv:fullscreen .vcr{left:10px;right:10px;bottom:6px}
@media (max-width:560px){.vcr button[title^="Muet"],.vcr button[title^="Vitesse"],.vcr button[title^="Image"]{display:none}}

/* sans lignes cathodiques ni glitch */
.screen .scan,.tracking{display:none!important}

/* ---------- cartes style video (sans mouvement) ---------- */
.tape{perspective:none}
.tape:hover .sleeve{transform:none}
.tape .sleeve{aspect-ratio:auto;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;transform:none!important;transition:none}
.tape .art{position:relative;inset:auto;aspect-ratio:4/3;border-radius:10px;border:2px solid var(--line);background:#0b0920 center/cover no-repeat;overflow:hidden}
.tape .art::after{display:none}
.tape .num{position:absolute;left:8px;top:8px;font-family:var(--osd);font-size:18px;background:rgba(0,0,0,.7);color:#fff;padding:0 7px;border-radius:4px}
.tape .fav{top:8px;right:8px;width:30px;height:30px}
.tape .pill{right:8px;bottom:8px}
.tape .bar{left:0;right:0;bottom:0;height:4px}
.tape .label{position:static;height:auto;background:none;color:var(--ink);border:0;padding:10px 2px 0}
.tape .label h3{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.3}
.tape .label small{font-family:var(--osd);font-size:19px;color:var(--dim);margin-top:2px}
.tape:hover .art,.tape:focus-visible .art{border-color:var(--red)}