/* VideoCutr — styles (thèmes sombre / clair) */
:root, :root[data-theme="dark"]{
  --bg:#121315; --panel:#1b1d20; --panel2:#25282c; --line:#34383d;
  --text:#e9eaec; --muted:#9aa0a6; --accent:#f2b134; --accent-text:#f2b134; --on-accent:#1a1a1a;
  --keep:#2fb862; --drop:#e0483e; --undecided:#6b717a;
  --shade-u:rgba(10,10,10,.25); --shade-d:rgba(10,10,10,.62);
  --radius:10px; color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3f3f1; --panel:#ffffff; --panel2:#ecedef; --line:#d5d7db;
  --text:#1b1d20; --muted:#5d636b; --accent:#f2b134; --accent-text:#9a6500; --on-accent:#1a1a1a;
  --keep:#239a50; --drop:#d23b31; --undecided:#8a9098;
  --shade-u:rgba(255,255,255,.25); --shade-d:rgba(20,20,20,.55);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;min-height:100dvh;display:flex;flex-direction:column}
button,select,input{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
button:hover{border-color:var(--muted)}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
button:disabled{opacity:.4;cursor:default}
a{color:var(--accent-text)}
b.k{color:var(--keep)} b.d{color:var(--drop)}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;font:12px ui-monospace,monospace}

/* ---------- En-tête ---------- */
.vc-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.brand{font-weight:700;font-size:18px;letter-spacing:.2px;text-decoration:none;color:var(--text);white-space:nowrap}
.brand span{color:var(--accent-text)}
.ver{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:1px 7px;margin-left:2px}
.vc-name{color:var(--muted);min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}
label.chk{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;white-space:nowrap}
#saveState{font-size:13px;color:var(--muted);white-space:nowrap}
#saveState.ok{color:var(--keep)} #saveState.err{color:var(--drop)}
.tg{padding:6px 9px;font-size:13px;font-weight:600;color:var(--muted)}
.tg span[data-l]{padding:0 2px;opacity:.55}
html[lang="fr"] .tg span[data-l="fr"],html[lang="en"] .tg span[data-l="en"]{opacity:1;color:var(--accent-text)}
.tg span[data-l="fr"]::after{content:"/";opacity:.4;padding-left:4px;color:var(--muted)}
:root[data-theme="light"] .ico-light,:root:not([data-theme="light"]) .ico-dark{display:none}

/* ---------- Zone de travail : tout tient à l'écran ---------- */
.vc-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 16px 6px;width:100%;max-width:1600px;margin:0 auto}
#stage{position:relative;background:#000;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:1 1 auto;min-height:180px}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;background:#000}
#drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#9aa0a6;border:2px dashed #3a3e44;border-radius:var(--radius);text-align:center;padding:16px}
#drop.over{border-color:var(--accent);color:#fff}
#drop strong{font-size:18px;color:#e9eaec}
#segBadge{position:absolute;top:10px;left:10px;padding:4px 12px;border-radius:20px;font-weight:700;font-size:14px;display:none;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#bigPlay{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.7);font-size:28px;color:#fff;display:none;padding:0}

/* ---------- Timeline ---------- */
#timeline{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;flex:none}
#tlScroll{overflow-x:auto;overflow-y:hidden;padding-top:7px;margin-top:-7px;scrollbar-width:thin}
#tlInner{position:relative;width:100%;min-width:100%}
#tlWrap{position:relative;touch-action:none}
#track{position:relative;height:56px;border-radius:6px 6px 0 0;overflow:hidden;background:var(--panel2);cursor:pointer}
#track.nothumbs{height:22px}
#thumbs{position:absolute;top:0;left:0;height:100%;width:100%}
#track.nothumbs #thumbs{display:none}
#shade{position:absolute;inset:0;pointer-events:none}
#shade div{position:absolute;top:0;bottom:0}
#shade .d{background:var(--shade-d) repeating-linear-gradient(135deg,rgba(224,72,62,.4) 0 6px,transparent 6px 14px)}
#shade .u{background:var(--shade-u)}
#lane{position:relative;height:10px;background:var(--panel2);border-radius:0 0 6px 6px;overflow:hidden}
#lane div{position:absolute;top:0;bottom:0}
#lane .k{background:var(--keep)} #lane .d{background:var(--drop)} #lane .u{background:var(--undecided)}
#cuts{position:absolute;inset:0;pointer-events:none}
.cut{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
#playhead{position:absolute;top:-6px;bottom:-2px;width:2px;margin-left:-1px;background:var(--text);pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.6);z-index:2}
#playhead::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top-color:var(--text)}
#segs{position:relative;height:34px;margin-top:6px;margin-bottom:4px;touch-action:pan-x}
.seg{position:absolute;top:0;bottom:0;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.4);border:2px solid transparent}
.seg.k{background:var(--keep)} .seg.d{background:var(--drop)}
.seg.u{background:var(--panel2);border-color:var(--undecided);color:var(--muted);text-shadow:none}
.seg.cur{border-color:var(--text)}
.tl-foot{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--muted)}
#time{font:700 15px ui-monospace,monospace;color:var(--text)}
.hint{margin-left:auto}
#tcNow{font:600 13px ui-monospace,monospace;color:var(--accent-text)}
.zoom{display:inline-flex;align-items:center;gap:4px}
.zoom button{padding:2px 9px;font-weight:700;min-width:30px}
#zoomLbl{min-width:38px;text-align:center;font:600 12px ui-monospace,monospace}
.qopt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.qopt:has(input:checked){border-color:var(--accent);background:var(--panel2)}
.qopt input{margin-top:3px}
.qopt span{display:flex;flex-direction:column;gap:2px}
.qopt small{color:var(--muted);font-size:12px}
#qSourceInfo{color:var(--accent-text);font-weight:600}
.tcauto{color:var(--keep) !important;font-weight:600}

/* ---------- Commandes ---------- */
.controls{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;flex:none}
.nav-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav-bar button{min-width:50px}
#playBtn{min-width:104px;font-weight:600}
.actions-bar{display:flex;gap:8px;flex:1;min-width:300px}
.actions-bar button{flex:1;padding:10px 8px;font-size:16px;font-weight:700;border-radius:10px}
#cutBtn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#keepBtn{background:var(--keep);border-color:var(--keep);color:#fff}
#dropBtn{background:var(--drop);border-color:var(--drop);color:#fff}

#help{color:var(--muted);font-size:12px;display:flex;gap:14px;flex-wrap:wrap;flex:none}
@media (hover:none),(pointer:coarse){ #help,.desk-only{display:none !important} }

/* ---------- Pied de page / signature ---------- */
.vc-footer{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:6px 16px 8px;font-size:12px;color:var(--muted)}
.vc-footer a{color:var(--muted);text-decoration:none}
.vc-footer a:hover{color:var(--accent-text);text-decoration:underline}
.vc-footer i{font-style:normal;opacity:.5}

/* Grand écran : tout dans la fenêtre, sans défilement */
@media (min-width:900px) and (min-height:560px){
  body.editor{height:100dvh;overflow:hidden}
}
/* Écrans plus petits : on garde une vidéo confortable et on laisse défiler */
@media (max-width:899px),(max-height:559px){
  #stage{flex:none;height:44vh}
  .vc-main{padding:8px 10px 6px}
  .vc-header{padding:8px 10px;gap:6px}
  .vc-name{max-width:60vw}
  label.chk{font-size:13px}
  .vc-header button{padding:7px 10px}
  .controls{flex-direction:column}
  .actions-bar{min-width:0;order:-1}
  .actions-bar button{padding:13px 6px}
  .hint{margin-left:0;width:100%}
}

/* ---------- Dialogues ---------- */
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:480px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:0 0 8px;font-size:19px}
dialog p{margin:0 0 14px;color:var(--muted)}
dialog label.fld{display:block;margin:0 0 12px;font-weight:600}
dialog label.fld select,dialog label.fld input{display:block;width:100%;margin-top:5px;font-weight:400}
dialog small{display:block;color:var(--muted);font-weight:400;margin-top:4px;font-size:12px}
.dlg-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}
.dlg-actions.stack{flex-direction:column;align-items:stretch}
.dlg-actions.stack button,.dlg-actions.stack a button{padding:11px;width:100%}
.bar{height:10px;background:var(--panel2);border-radius:5px;overflow:hidden}
.bar div{height:100%;width:0;background:var(--accent);transition:width .2s}
#toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:10px 18px;border-radius:22px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9;max-width:90vw;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#toast.show{opacity:1}

/* ---------- Pages PHP (liste, admin) ---------- */
.page{max-width:1100px;width:100%;margin:0 auto;padding:20px 16px 30px;flex:1}
.page h1{font-size:22px;margin:4px 0 6px}
.page h2{font-size:17px;margin:26px 0 10px}
.muted{color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.vcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text)}
.vcard video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block;pointer-events:none}
.vcard .meta{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.vcard .fname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--muted)}
.pill.ok{background:rgba(47,184,98,.16);color:var(--keep)}
.pill.wip{background:rgba(242,177,52,.16);color:var(--accent-text)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500}
input[type=text],input[type=password],select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linkbox{flex:1;min-width:200px;font:13px ui-monospace,monospace}
.tc{width:110px;font:13px ui-monospace,monospace}
.up-list{margin-top:10px;font-size:13px}
.up-list .bar{margin-top:4px}
.err{color:var(--drop)}

/* ---------- Résumés, conversion ---------- */
table.sum{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
table.sum th{color:var(--muted);font-weight:500;text-align:left;padding:4px 10px 4px 0;white-space:nowrap;border:0;vertical-align:top}
table.sum td{color:var(--text);padding:4px 0;border:0;font-variant-numeric:tabular-nums}
#exportMsg{color:var(--text)}
.small{font-size:12px;color:var(--muted)}
dialog.wide{max-width:760px}
label.radio{display:flex;gap:8px;align-items:center;font-weight:400;margin-top:6px}
label.radio small{color:var(--muted)}
div.fld{margin:0 0 12px;font-weight:600}
#runList{max-height:45vh;overflow:auto;margin:12px 0;display:flex;flex-direction:column;gap:6px}
.run-item{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.run-item.active{border-color:var(--accent)}
.run-item.ok{border-color:var(--keep)} .run-item.err{border-color:var(--drop)}
.run-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-state{color:var(--muted);margin:2px 0 5px}
.run-item.err .run-state{color:var(--drop)}
.run-item .bar{height:5px}
[hidden]{display:none !important}