:root{--bg:#f6f7f9;--fg:#1d2330;--card:#fff;--accent:#d6336c;--muted:#6b7280;--border:#d9dde3;--stage:#dfe3e8;--p0:#d6336c;--p1:#1c7ed6;--p2:#2f9e44;--p3:#f08c00;--p4:#7048e8;--p5:#0c8599}
@media(prefers-color-scheme:dark){:root{--bg:#14171c;--fg:#e8eaee;--card:#1e232b;--muted:#98a1b0;--border:#313846;--stage:#0e1115}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,sans-serif;display:flex;flex-direction:column}
button{font:inherit;cursor:pointer}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 8px}

.top{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--card)}
.top h1{font-size:18px;margin:0}
.file{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .btn{margin-left:auto}

.btn{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:8px;padding:6px 12px;min-height:34px}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default}
.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}

.drop{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;margin:32px auto;max-width:640px;width:calc(100% - 32px);padding:64px 16px;border:2px dashed var(--border);border-radius:12px;text-align:center;cursor:pointer;background:var(--card)}
.drop small{color:var(--muted)}
.drop.over,.drop:hover,.drop:focus{border-color:var(--accent);outline:none}

#app{flex:1;min-height:0;display:grid;grid-template-columns:150px minmax(0,1fr) 290px}

/* Miniatures */
#side{overflow-y:auto;border-right:1px solid var(--border);background:var(--card);padding:8px}
.thumb{position:relative;border:2px solid transparent;border-left:5px solid var(--pc,var(--border));border-radius:6px;padding:4px;text-align:center;cursor:pointer;font-size:12px;color:var(--muted);background:var(--bg)}
.thumb[data-part="0"]{--pc:var(--p0)}.thumb[data-part="1"]{--pc:var(--p1)}.thumb[data-part="2"]{--pc:var(--p2)}
.thumb[data-part="3"]{--pc:var(--p3)}.thumb[data-part="4"]{--pc:var(--p4)}.thumb[data-part="5"]{--pc:var(--p5)}
.thumb.cur{border-color:var(--accent);border-left-color:var(--pc,var(--accent))}
.thumb .ph{min-height:90px;display:flex;align-items:center;justify-content:center}
.thumb canvas{max-width:100%;height:auto;background:#fff;display:block}
.thumb.del canvas{opacity:.25}
.thumb.del .num{text-decoration:line-through}
.thumb .rot{color:var(--accent)}
.cut{display:flex;align-items:center;justify-content:center;height:22px;margin:2px 0;border:0;background:none;width:100%;color:var(--muted);position:relative;padding:0}
.cut::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--border)}
.cut span{position:relative;background:var(--card);padding:0 6px;font-size:14px;opacity:.55}
.cut:hover::before,.cut.on::before{border-color:var(--accent)}
.cut:hover span,.cut.on span{opacity:1;color:var(--accent)}
.cut.on::before{border-top-style:solid}

/* Visualiseur */
#viewer{display:flex;flex-direction:column;min-width:0;min-height:0}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center;padding:8px;border-bottom:1px solid var(--border);background:var(--card)}
.grp{display:flex;gap:6px;align-items:center}
.toolbar input{width:64px;font:inherit;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg);text-align:center}
.stage{flex:1;min-height:0;overflow:auto;background:var(--stage);display:flex;padding:16px}
.sheet{margin:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.pagewrap{position:relative;display:flex;justify-content:center}
.pagewrap canvas{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.pagewrap.del canvas{opacity:.3}
.pagewrap.del::after{content:"Page supprimée";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#e03131;color:#fff;padding:6px 14px;border-radius:8px;font-weight:600}
.cutline{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-top:3px dashed var(--muted);background:none;color:var(--muted);padding:8px 0;border-radius:0}
.cutline:hover{color:var(--accent);border-top-color:var(--accent)}
.cutline.on{color:var(--accent);border-top:3px solid var(--accent);font-weight:600}

/* Panneau */
#panel{overflow-y:auto;border-left:1px solid var(--border);background:var(--card);padding:8px 16px 16px}
.parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.parts li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-left:5px solid var(--pc);border-radius:8px;background:var(--bg)}
.parts li[data-part="0"]{--pc:var(--p0)}.parts li[data-part="1"]{--pc:var(--p1)}.parts li[data-part="2"]{--pc:var(--p2)}
.parts li[data-part="3"]{--pc:var(--p3)}.parts li[data-part="4"]{--pc:var(--p4)}.parts li[data-part="5"]{--pc:var(--p5)}
.parts .t{flex:1;min-width:0}.parts .t b{display:block}.parts .t span{color:var(--muted);font-size:13px;word-break:break-word}
.hint{color:var(--muted);font-size:13px}
#zip{margin-top:10px;width:100%}
.quick{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.every{display:flex;gap:6px;align-items:center;color:var(--fg)}
.every input{width:56px;font:inherit;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg)}


.thumb .from{font-size:11px;color:var(--p1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Glisser-déposer */
.thumb.dragging{opacity:.4}
.thumb.drop-before{box-shadow:0 -4px 0 0 var(--accent)}
.thumb.drop-after{box-shadow:0 4px 0 0 var(--accent)}
.cut.drop-cut::before{border-color:var(--accent);border-top-width:4px}
.thumb canvas{pointer-events:none}

/* Fenêtre d'insertion */
.modal{position:fixed;inset:0;z-index:10;background:rgba(10,12,16,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.dialog{background:var(--card);color:var(--fg);border-radius:12px;width:min(900px,100%);max-height:100%;display:flex;flex-direction:column;padding:16px 20px;gap:8px}
.dialog h2{font-size:17px;text-transform:none;letter-spacing:0;color:var(--fg);margin:0;word-break:break-word}
.dialog .hint{margin:0}
.dialog .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dialog .spacer{flex:1}
.dialog select{font:inherit;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg)}
.dialog label{display:flex;gap:8px;align-items:center}
.picks{flex:1;min-height:120px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;padding:4px}
.pick{border:2px solid var(--border);border-radius:8px;padding:6px;text-align:center;cursor:pointer;font-size:13px;color:var(--muted);background:var(--bg);position:relative}
.pick .ph{min-height:100px;display:flex;align-items:center;justify-content:center}
.pick canvas{max-width:100%;height:auto;background:#fff}
.pick.sel{border-color:var(--accent);color:var(--fg)}
.pick.sel::after{content:"✓";position:absolute;top:4px;right:6px;background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;line-height:22px;font-size:14px}

@media(max-width:860px){
  body{height:auto;min-height:100%}
  #app{display:flex;flex-direction:column}
  #side{border-right:0;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden}
  #thumbs{display:flex;gap:4px;align-items:stretch}
  .thumb{width:84px;flex:none}
  .cut{width:22px;height:auto;margin:0}
  .cut::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--border)}
  .cut.on::before{border-left-style:solid}
  .thumb.drop-before{box-shadow:-4px 0 0 0 var(--accent)}
  .thumb.drop-after{box-shadow:4px 0 0 0 var(--accent)}
  .stage{height:62vh;flex:none}
  #panel{border-left:0;border-top:1px solid var(--border)}
}
.parts .t .size{display:block;color:var(--fg);font-weight:600}
.opt{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;color:var(--muted);font-size:13px}
.opt select{font:inherit;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg);width:100%}
#optimize{width:100%}