/* ===== Thèmes ===== */
:root{--bg:#0f1115;--panel:#181b22;--panel2:#20242d;--text:#e8eaf0;--mute:#8b92a3;--accent:#4f8cff;--on-accent:#fff;--ok:#3fb27f;--danger:#ff6b6b;--border:#2c313c;--r:10px;color-scheme:dark}
[data-theme=light]{--bg:#f4f5f8;--panel:#fff;--panel2:#eceef3;--text:#1b1f27;--mute:#636b7a;--accent:#2f6df6;--border:#d8dce4;--danger:#d93a3a;--ok:#1d9a63;color-scheme:light}
[data-theme=midnight]{--bg:#000;--panel:#0b0b0e;--panel2:#16161b;--text:#ececf1;--mute:#8a8a96;--accent:#5b9bff;--border:#23232a}
[data-theme=ocean]{--bg:#08161f;--panel:#0e2230;--panel2:#153147;--text:#e3f1f8;--mute:#7fa3b8;--accent:#36c5f0;--on-accent:#04222d;--border:#1d3d55}
[data-theme=forest]{--bg:#0d1511;--panel:#14201a;--panel2:#1c2e25;--text:#e4f0e8;--mute:#86a392;--accent:#3fb27f;--on-accent:#06201a;--border:#26392e}
[data-theme=violet]{--bg:#120e1b;--panel:#1b1527;--panel2:#271f38;--text:#ece6f7;--mute:#9a8db3;--accent:#a77bff;--on-accent:#1b0f33;--border:#372c4d}
[data-theme=sepia]{--bg:#f1e8d4;--panel:#faf3e2;--panel2:#e7dbc0;--text:#3a3025;--mute:#7a6c58;--accent:#b5651d;--border:#d6c8a8;--danger:#b3261e;--ok:#4d7c0f;color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button,select,input,.btn{font:inherit;color:inherit}
button,select,.btn{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
button:hover,select:hover,.btn:hover{border-color:var(--accent)}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.45;cursor:default}
input[type=search],input[type=password],input[type=text]{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 12px;outline:none}
input:focus{border-color:var(--accent)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.grow{flex:1}

/* ===== En-tête / barre d'outils ===== */
#top{position:sticky;top:0;z-index:10;display:flex;gap:8px;align-items:center;padding:10px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:18px;margin-right:8px;display:flex;align-items:center;gap:9px}
.brand::before{content:"";width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 35%,#fff))}
#search{flex:1;min-width:80px;max-width:420px}
#navbar{display:flex;align-items:center;gap:10px;padding:12px 16px 2px}
#upBtn{width:40px;height:40px;padding:0;flex:none;border-radius:50%}
#upBtn svg{width:22px;height:22px}
#crumbs{flex:1;min-width:0;color:var(--mute);display:flex;flex-wrap:wrap;gap:2px;align-items:center}
#crumbs a{color:var(--text);padding:4px 8px;border-radius:6px} #crumbs a:hover{color:var(--accent);background:var(--panel2)}
#count{color:var(--mute);font-size:13px}
#toolbar{display:flex;gap:8px;padding:8px 16px;align-items:center;flex-wrap:wrap}
.sep{width:1px;height:24px;background:var(--border)}
#main{padding:8px 16px 90px}
h2.sec{font-size:15px;color:var(--mute);margin:18px 0 8px;font-weight:600}
.empty{color:var(--mute);padding:40px 0;text-align:center}
body:not(.can-write) [data-w]{display:none}

/* ===== Cartes ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.card{position:relative;display:block;background:var(--panel);border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:transform .12s,border-color .12s,box-shadow .12s}
.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px #0004}
.list .card:hover{transform:none;box-shadow:none}
[data-kind=folder] .thumb{color:var(--accent)}
[data-kind=folder] .thumb svg{opacity:.85}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.thumb{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--panel2),var(--panel));display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--mute)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.has-prev>svg{display:none}
.snip{position:absolute;inset:0;margin:0;padding:9px 11px;font:9px/1.4 ui-monospace,Consolas,monospace;color:var(--text);opacity:.85;overflow:hidden;white-space:pre;text-align:left;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.hprev{position:absolute;top:0;left:0;width:1024px;height:640px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
#refreshBtn svg{width:18px;height:18px;fill:currentColor}
#refreshBtn.spin svg{animation:sp .7s linear infinite}
.thumb svg{width:44%;height:44%;opacity:.55}
.badge,.done,.bar,.chk{z-index:2}
.badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.done{position:absolute;bottom:10px;left:6px;background:var(--ok);color:#fff;font-size:11px;padding:2px 6px;border-radius:5px}
.bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.5)}
.bar i{display:block;height:100%;background:var(--accent)}
.info{padding:8px 10px}
.name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{color:var(--mute);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.acts{display:inline-flex;align-items:center;gap:4px}
.meta a:hover,.mbtn:hover{color:var(--accent)}
.mbtn{background:none;border:none;padding:0 6px;font-size:18px;line-height:1;color:var(--mute);border-radius:6px}
.sub{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk{position:absolute;top:8px;left:8px;z-index:2;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.45);display:none}
.card:hover .chk,body.selecting .chk{display:block}
.card.sel .chk{background:var(--accent);border-color:var(--accent)}
.card.sel .chk::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

.list{display:flex;flex-direction:column;gap:4px}
.list .card{display:flex;align-items:center;gap:12px;padding:4px 10px 4px 4px;border-radius:8px}
.list .thumb{width:84px;aspect-ratio:16/10;flex:none;border-radius:6px}
.list .info{flex:1;min-width:0;padding:0}
.list .chk{top:50%;left:10px;transform:translateY(-50%)}

.row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.row .card{flex:0 0 200px}

/* ===== Superpositions ===== */
.overlay{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
#lightbox{background:rgba(0,0,0,.94)}
.ptop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(#000a,transparent);z-index:3;padding-top:max(12px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.ptop span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibtn{background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 20%,transparent);padding:6px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:inherit;transition:background .15s,border-color .15s}
.overlay .ibtn,.overlay select{color:#fff}
.ibtn:hover{background:rgba(255,255,255,.15);border-color:color-mix(in srgb,currentColor 45%,transparent)}
.ibtn svg{width:24px;height:24px;fill:currentColor}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:#fff}
.navbtn.left{left:8px}.navbtn.right{right:8px}.navbtn svg{width:28px;height:28px;fill:currentColor}

#vid{width:100%;height:100%;background:#000;object-fit:contain}
#cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#cover img{max-width:50%;max-height:50%;border-radius:12px}
#cover svg{width:120px;height:120px;opacity:.4;fill:#fff}
#pBottom{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 10px;background:linear-gradient(transparent,#000c);z-index:3;transition:opacity .25s;padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
#player.idle #pBottom,#player.idle .ptop{opacity:0;pointer-events:none}
#player.idle{cursor:none}
.prow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#pTime{font-variant-numeric:tabular-nums;font-size:13px;margin-left:6px}
#vol{width:90px;accent-color:var(--accent)}
.prow select{padding:4px 6px;background:#0008;color:#fff;max-width:200px;border-color:#fff3}
.spin{position:absolute;width:48px;height:48px;border:4px solid #fff4;border-top-color:#fff;border-radius:50%;animation:sp 1s linear infinite;pointer-events:none}
@keyframes sp{to{transform:rotate(360deg)}}
#flash{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);z-index:60;background:rgba(0,0,0,.7);color:#fff;padding:10px 18px;border-radius:30px;font-size:18px;pointer-events:none}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--border);padding:10px 16px;border-radius:8px;z-index:99;max-width:90vw}

/* historique */
.dim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;justify-content:flex-end}
.drawer{width:min(440px,100%);height:100%;background:var(--panel);display:flex;flex-direction:column;box-shadow:-8px 0 30px #0008}
.dhead{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--border);padding-top:max(12px,env(safe-area-inset-top))}
.dlist{overflow-y:auto;flex:1;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.hrow{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;cursor:pointer}
.hrow:hover{background:var(--panel2)}
.hthumb{position:relative;width:96px;flex:none;aspect-ratio:16/10;background:var(--panel2);border-radius:6px;overflow:hidden}
.hthumb img{width:100%;height:100%;object-fit:cover}
.hinfo{flex:1;min-width:0}
.hdel{color:var(--mute);flex:none}
.dhint{padding:8px 16px 0;color:var(--mute);font-size:12px}
.dhint:empty{display:none}

/* boîtes de dialogue */
.center{align-items:center;justify-content:center}
#dlg{z-index:120;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:22px 22px 18px;width:min(440px,calc(100% - 32px));box-shadow:0 20px 60px #000a;animation:pop .14s ease-out}
.dialog h3{margin:0 0 8px;font-size:18px}
.dialog p{margin:0;color:var(--mute);white-space:pre-line;line-height:1.5}
.dialog input{width:100%;margin-top:12px;font-size:16px}
.dlgbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.danger-fill{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}

/* menu contextuel, sélection, téléversements */
.menu{position:fixed;z-index:70;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:210px;box-shadow:0 10px 30px #0006}
.menu button{display:flex;width:100%;justify-content:flex-start;border:none;background:none;padding:7px 12px;border-radius:6px;font-size:14px}
.menu button:hover{background:var(--panel)}
.menu .danger{color:var(--danger)}
#selbar{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:8px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;box-shadow:0 10px 30px #0006;max-width:calc(100% - 24px)}
#uploads{position:fixed;right:16px;bottom:16px;width:min(380px,calc(100% - 32px));z-index:80;background:var(--panel2);border:1px solid var(--border);border-radius:12px;max-height:50vh;overflow:auto;box-shadow:0 10px 30px #0006}
body.selecting #uploads{bottom:84px}
.uhead{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-weight:600;border-bottom:1px solid var(--border)}
.urow{padding:8px 12px;font-size:13px}
.urow .un{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .ub{height:4px;background:var(--border);border-radius:2px;margin:4px 0}
.urow .ub i{display:block;height:100%;background:var(--accent);border-radius:2px;width:0}
.urow.err .us{color:var(--danger)}
.urow.ok .ub i{background:var(--ok)}
.us{color:var(--mute);font-size:12px}
#dropHint{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--accent) 22%,transparent);border:3px dashed var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;pointer-events:none}

/* ===== Éditeur ===== */
.ed{background:var(--bg);color:var(--text);flex-direction:column;align-items:stretch;justify-content:flex-start;z-index:55}
.ed .ibtn,.ed select{color:var(--text)}
.edbar{display:flex;align-items:center;gap:8px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--border);overflow-x:auto;flex:none}
#edTitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#edDirty{color:var(--accent);font-size:18px}
.seg{display:inline-flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:8px 0 0 8px;margin:0}
.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.edbody{flex:1;display:flex;min-height:0}
#edMonaco{flex:1;min-width:0}
#edPreview{flex:1;min-width:0;overflow:auto;padding:20px 28px;border-left:1px solid var(--border);background:var(--bg)}
.edbody[data-mode=edit] #edPreview,.edbody[data-mode=preview] #edMonaco{display:none}
.edbody[data-mode=edit] #edMonaco,.edbody[data-mode=preview] #edPreview{border:none}
.edstat{display:flex;gap:16px;padding:4px 12px;padding-bottom:max(4px,env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--border);font-size:12px;color:var(--mute);flex:none}
#edMsg{margin-left:auto}

.md{line-height:1.65;font-size:16px;overflow-wrap:anywhere}
.md>*:first-child{margin-top:0}
.md h1,.md h2{border-bottom:1px solid var(--border);padding-bottom:.3em}
.md h1,.md h2,.md h3,.md h4{margin:1.4em 0 .6em;line-height:1.25}
.md a{color:var(--accent);text-decoration:underline}
.md img{max-width:100%;border-radius:6px}
.md code{background:var(--panel2);padding:.15em .4em;border-radius:5px;font:.88em ui-monospace,Consolas,monospace}
.md pre{background:var(--panel);border:1px solid var(--border);padding:14px;border-radius:8px;overflow:auto}
.md pre code{background:none;padding:0;font-size:13.5px}
.md blockquote{margin:1em 0;padding:.2em 1em;border-left:4px solid var(--accent);color:var(--mute)}
.md table{border-collapse:collapse;display:block;overflow:auto;max-width:100%}
.md th,.md td{border:1px solid var(--border);padding:6px 12px}
.md th{background:var(--panel2)}
.md hr{border:none;border-top:1px solid var(--border);margin:1.6em 0}
.md input[type=checkbox]{margin-right:6px}
#edPreview.is-html{padding:0}
#edPreview iframe{width:100%;height:100%;border:0;background:#fff;display:block}
#edScripts.on{border-color:var(--danger);color:var(--danger)}
#edPreview .note{color:var(--mute);font-size:13px;margin-top:10px}

/* ===== Connexion ===== */
.login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.loginbox{background:var(--panel);padding:32px;border-radius:14px;width:min(360px,92vw);display:flex;flex-direction:column;gap:12px;border:1px solid var(--border)}
.loginbox h1{margin:0}.loginbox p{margin:0;color:var(--mute)}
.err{color:var(--danger);min-height:1.2em}

/* ===== Tactile / petits écrans ===== */
#main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (pointer:coarse){
  button,select,.btn{min-height:44px}
  .ibtn{width:48px;height:48px}
  .ibtn svg{width:28px;height:28px}
  .mbtn{padding:6px 12px;margin:-6px -8px;font-size:22px}
  .meta a{padding:10px 12px;margin:-10px -12px}
  .card:hover{border-color:var(--border)}
  .prow select{min-height:40px}
  #seekWrap{--seekh:34px}
}
@media (max-width:900px){
  #edModes [data-m=split]{display:none}
  #edWrap,#edPos,#edEnc{display:none}
}
@media (max-width:700px){
  #top{position:static;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .brand{display:none}
  #search{order:1;flex:1 1 100%;max-width:none;min-height:44px;font-size:16px}
  #top .grow{display:none}
  #theme{order:2;flex:1}
  #histBtn,#logout,#switchBtn,#rotBtn{order:3;flex:1}
  #navbar{position:sticky;top:0;z-index:9;background:var(--bg);padding:8px 12px 4px}
  #crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  #count{display:none}
  #crumbs::-webkit-scrollbar{display:none}
  #toolbar{flex-wrap:nowrap;overflow-x:auto;padding:6px 12px;scrollbar-width:none}
  #toolbar::-webkit-scrollbar{display:none}
  #main{padding:6px 12px 100px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .row .card{flex-basis:160px}
  .list .thumb{width:96px}
  .info{padding:8px}
  #vol{display:none}
  #pTime{font-size:12px;margin-left:2px}
  .prow{gap:2px}
  .prow select{max-width:110px;font-size:13px}
  #cover img{max-width:80%}
  input[type=password],input[type=search]{font-size:16px}
  #edPreview{padding:14px}
  #edDl{display:none}
  .edbar{gap:6px}
  #uploads{right:8px;bottom:8px;width:calc(100% - 16px)}
}
@media (max-height:500px){
  .ptop{padding-top:4px;padding-bottom:4px}
  #pBottom{padding-top:12px;padding-bottom:4px}
  .ibtn{width:40px;height:40px}
  #seekWrap{--seekh:22px}
}

/* ===== Photos : zoom + diaporama ===== */
#lbStage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
#lbZoom{position:absolute;inset:0;perspective:1400px;will-change:transform;transform-origin:center}
#lbZoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
#lbBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;padding:18px 14px 10px;background:linear-gradient(transparent,#000b);z-index:3;transition:opacity .3s;padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
#lbCount{font-size:13px;font-variant-numeric:tabular-nums;margin-left:6px}
.lbz{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;min-width:56px;padding:6px}
#lightbox .ptop,#lightbox .navbtn{transition:opacity .3s}
#lightbox.idle .ptop,#lightbox.idle #lbBar,#lightbox.idle .navbtn{opacity:0;pointer-events:none}
#lightbox.idle{cursor:none}
#lightbox.playing #lbPlay{color:var(--accent)}
.panel{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:14px 16px;width:min(330px,calc(100% - 24px));box-shadow:0 12px 40px #000a;z-index:6}
.panel h4{margin:0 0 6px;font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em}
.panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;font-size:13px}
.panel label select{max-width:58%}
.panel label>span{display:flex;align-items:center;gap:8px;max-width:62%}
.panel input[type=range]{width:100%;min-width:70px;accent-color:var(--accent)}
.panel output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mute)}
.panel button{width:100%;margin-top:6px}
#lbPanel{position:absolute;right:12px;bottom:70px}
#pSet{position:absolute;right:12px;bottom:104px}

/* ===== Lecteur : barre colorée, infos, réglages ===== */
#seekWrap{--seekh:22px;position:relative;height:var(--seekh);display:flex;align-items:center}
#seekTrack{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .12s}
#seekWrap:hover #seekTrack{height:8px}
#seekBuf{position:absolute;top:0;bottom:0;left:0;width:0;background:rgba(255,255,255,.35)}
#seekPlayed{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--accent)}
#seek{position:relative;z-index:1;width:100%;height:var(--seekh);margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
#seek::-webkit-slider-runnable-track{background:transparent;height:var(--seekh)}
#seek::-moz-range-track{background:transparent;height:var(--seekh)}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.35);margin-top:calc((var(--seekh) - 14px) / 2)}
#seek::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.35)}
#seekTip{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;font-size:12px;padding:2px 7px;border-radius:5px;pointer-events:none;font-variant-numeric:tabular-nums}
#vid{transform-origin:center;will-change:transform}
#player{touch-action:none}
#bInfo.on,#bSet.on{color:var(--accent)}
#pInfo{position:absolute;top:68px;right:14px;z-index:3;width:230px;padding:12px 14px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid #fff2;border-radius:12px;color:#fff;font-size:13px;transition:opacity .25s}
#pInfo .irow{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
#pInfo .irow span{color:#cbd0da}
#pInfo b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
#pInfo .isub{text-align:right;font-size:12px;color:#9aa3b5;min-height:0}
#pInfo .isub:empty{display:none}
#pInfo .ibar{height:4px;background:#fff3;border-radius:2px;margin:4px 0 6px;overflow:hidden}
#pInfo .ibar i{display:block;height:100%;width:0;background:var(--accent)}
#player.idle #pInfo,#player.idle #pSet,#player.idle #ccPanel{opacity:0;pointer-events:none}
/* proposition « reprendre / recommencer » : vidéo en pause et floutée derrière */
#vid{transition:filter .35s}
#player.asking #vid{filter:blur(26px) brightness(.55);transform:scale(1.08)}
#player.asking #pBottom,#player.asking #pInfo,#player.asking #pSet,#player.asking #ccPanel{opacity:0;pointer-events:none}
#resume{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:16px}
@media (max-width:700px){
  #pInfo{top:60px;right:8px;width:190px;font-size:12px;padding:9px 11px}
  #pSet{right:8px;left:8px;width:auto;bottom:112px}
  #lbPanel{right:8px;left:8px;width:auto;bottom:74px}
  #lbZoomReset{min-width:46px}
}

/* ===== Sous-titres ===== */
.subbox{--s-base:3.4vh;--s-size:1;--s-pos:7;font-family:var(--s-font);font-size:clamp(13px,calc(var(--s-size) * var(--s-base)),80px);font-weight:var(--s-weight);font-style:var(--s-style);color:var(--s-color);text-shadow:var(--s-shadow);text-align:center;line-height:1.35}
.subbox .cue{margin:.08em 0}
.subbox .cue span{background:var(--s-bg);padding:.04em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.subbox.inv .cue{filter:invert(1)}
#subs{position:absolute;left:5%;right:5%;bottom:calc(var(--s-pos) * 1%);z-index:2;pointer-events:none;transition:margin-bottom .25s}
#player:not(.idle) #subs{margin-bottom:78px}
#subs.diff{mix-blend-mode:difference}
#player.asking #subs{display:none}
#aTrack{display:none!important}
#bCc.on{color:var(--accent)}
#ccPanel{position:absolute;right:12px;bottom:104px;width:min(390px,calc(100% - 24px));max-height:calc(100% - 180px);overflow-y:auto}
.trk{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:none;border:1px solid transparent;margin:1px 0;padding:5px 10px;border-radius:8px;font-size:14px}
.trk:hover{background:var(--panel)}
.trk.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.trk:disabled{opacity:.5;cursor:default}
.trk small{color:var(--mute);font-size:12px;margin-top:2px}
.panel .hint{color:var(--mute);font-size:13px;margin:4px 2px}
.panel .hint:empty{display:none}
.panel code{background:var(--panel);padding:1px 5px;border-radius:4px}
.panel .dl{display:flex;align-items:center;gap:4px;max-width:none}
.panel .dl button{width:auto;margin:0;padding:4px 8px;min-height:0}
.panel details.sec{border-top:1px solid var(--border)}
.panel details.sec:first-child{border-top:none}
.panel details.sec>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 4px;font-size:14px;cursor:pointer;font-weight:600;user-select:none}
.panel details.sec>summary::-webkit-details-marker{display:none}
.panel details.sec>summary small{margin-left:auto;color:var(--mute);font-weight:400;font-size:13px;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel details.sec>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 3px 2px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);transition:transform .18s}
.panel details.sec[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.panel details.sec>summary:hover{color:var(--accent)}
.panel details.sec[open]{padding-bottom:6px}
.panel input[type=color]{width:46px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;background:none}
#subPreview{isolation:isolate;margin:6px 0 10px;padding:22px 8px;border-radius:10px;background:linear-gradient(135deg,#2b6cb0,#d69e2e 50%,#2f855a);overflow:hidden;text-align:center}
#subPreviewBox{--s-base:18px}
#subPreviewBox.diff{mix-blend-mode:difference}
@media (max-width:700px){#ccPanel{right:8px;left:8px;width:auto;bottom:112px;max-height:calc(100% - 200px)}}

/* ===== explorateur integre dans /menu ===== */
.embedded #top .brand,.embedded #hubLink,.embedded #logout{display:none}
.embedded #search{display:none}
.shdlg label{display:block;color:var(--mute);font-size:13px;margin-top:10px}
.shdlg .shc{display:flex;gap:8px;align-items:center;color:var(--text);font-size:14px}
.shdlg .shc input{width:auto;margin:0}
.shdlg .shrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.shdlg .shrow label{margin:0;display:flex;gap:8px;align-items:center}
.shdlg .shrow input[type=color]{width:42px;height:32px;padding:2px;margin:0}
.shdlg .icos{display:flex;gap:4px;flex-wrap:wrap}
.shdlg .ico{padding:5px}
.shdlg .ico.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.shdlg .err{color:var(--danger);min-height:1.2em;margin-top:8px;font-size:14px}
.embedded #theme{display:none}

/* ===== Visionneuses (vidéo, photos) : boutons plus petits, sur ordinateur comme sur téléphone ===== */
#player .ibtn,#lightbox .ibtn{width:34px;height:34px;padding:5px}
#player .ibtn svg,#lightbox .ibtn svg{width:19px;height:19px}
#player button,#player select,#lightbox button,#lightbox select{min-height:32px}
#player .prow,#lbBar{gap:4px}
#player .prow select,#lightbox select{min-height:32px;font-size:12px;padding:2px 6px;max-width:90px}
#pTime{font-size:12px;margin-left:2px}
#player .ptop,#lightbox .ptop{padding:8px 12px;gap:8px}
#player .ptop span,#lightbox .ptop span{font-size:14px}
#pBottom{padding:16px 14px 8px}
#lbBar{padding:14px 12px 8px}
#seekWrap{--seekh:24px}
.navbtn{width:36px;height:50px}
.navbtn svg{width:20px;height:20px}
@media (pointer:coarse){
  #player .ibtn,#lightbox .ibtn{width:36px;height:36px}
  #player button,#player select,#lightbox button,#lightbox select{min-height:34px}
  #seekWrap{--seekh:26px}
}

/* ===== Barre du lecteur : tout sur une seule ligne, boutons toujours ronds ===== */
#player .ibtn,#lightbox .ibtn{flex:none;aspect-ratio:1/1}
#player .prow{flex-wrap:nowrap;min-width:0}
#player .prow>*{min-width:0}
#player .prow .grow{flex:1 1 0;min-width:0}
#pTime{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:clip}
#bPrev[style*="hidden"],#bNext[style*="hidden"]{display:none}
@media (max-width:700px){
  #player .prow select{max-width:64px}
  #player .prow input[type=range]{max-width:70px}
  #pTime{font-size:11px}
}
#bRot.on{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}