/* ===== Éditeur ===== */
.ed{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.ed-top{height:56px;background:var(--surf);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;flex:none;position:relative}
.ed-top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%)}
.ed-name{border:1px solid transparent;border-radius:var(--r-s);height:34px;padding:0 10px;font-weight:600;font-size:15px;min-width:120px;max-width:340px;background:transparent}
.ed-name:hover{border-color:var(--line)} .ed-name:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
.ed-dim{height:30px;border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:0 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.ed-dim:hover{background:var(--line-2)}
.save{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:99px;font-size:12.5px;font-weight:600;border:0;background:transparent;color:var(--muted)}
.save:hover{background:var(--line-2)}
.save.pending{background:var(--warn-50);color:var(--warn)} .save.saving{color:var(--blue-d)} .save.ro{background:var(--line-2);color:var(--ink-2)}
.vsep{width:1px;height:24px;background:var(--line);margin:0 4px;flex:none}
.ed-body{flex:1;display:flex;min-height:0;position:relative}
.ed-rail{width:76px;background:var(--surf);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px;flex:none}
.rail-i{width:64px;padding:8px 0 6px;border:0;background:transparent;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.rail-i:hover{background:var(--line-2)} .rail-i.on{background:var(--blue-50);color:var(--blue-d)}
.ed-panel{width:332px;background:var(--surf);border-right:1px solid var(--line);display:flex;flex-direction:column;flex:none;position:relative;min-height:0}
.ed-panel.closed{display:none}
.panel-h{padding:16px 16px 8px;font-weight:700;font-size:15px;display:flex;align-items:center}
.panel-b{padding:4px 16px 16px;overflow:auto;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.panel-collapse{position:absolute;right:-17px;top:50%;width:17px;height:56px;margin-top:-28px;border:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0;background:var(--surf);z-index:5;padding:0;color:var(--muted);display:flex;align-items:center;justify-content:center}
.panel-reopen{position:absolute;left:0;top:50%;width:17px;height:56px;margin-top:-28px;border:1px solid var(--line);border-left:0;border-radius:0 8px 8px 0;background:var(--surf);z-index:5;padding:0;color:var(--muted);display:flex;align-items:center;justify-content:center}
.sec-t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shape-btn{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.shape-btn:hover{border-color:var(--blue);background:var(--blue-50);color:var(--blue-d)}
.text-add{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surf);border-radius:10px;padding:12px 14px}
.text-add:hover{border-color:var(--blue);background:var(--blue-50)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-item{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--checker);aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;position:relative}
.mini-item img{max-width:100%;max-height:100%}
.mini-item:hover{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-100)}
.mini-item.font{background:#fff;font-size:26px}
.tex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tex-item{aspect-ratio:1;border-radius:9px;overflow:hidden;border:1px solid var(--line);padding:0;position:relative;display:block}
.tex-item img{width:100%;height:100%;object-fit:cover;display:block}
.tex-item span{position:absolute;left:0;right:0;bottom:0;background:rgba(10,12,20,.7);color:#fff;font-size:11px;font-weight:600;padding:2px 6px;text-align:left}
.tex-item:hover{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-100)}
.ly{display:flex;align-items:center;gap:6px;height:44px;padding:0 6px;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;user-select:none}
.ly:hover{background:var(--line-2)} .ly.on{background:var(--blue-50);border-color:var(--blue-100)}
.ly.over{box-shadow:0 -2px 0 var(--blue)}
.ly .ly-th{width:30px;height:30px;border-radius:6px;background:var(--checker);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;color:var(--muted)}
.ly .ly-th img{width:100%;height:100%;object-fit:cover}
.ly.grp{background:var(--bg);font-weight:600} .ly.child{margin-left:18px}
.ly.hidden-l .nm{opacity:.45}
.ly .nm{flex:1;min-width:0;font-size:13px}
.ed-stage{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--canvas)}
.ed-ctx{height:50px;background:var(--surf);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px;overflow-x:auto;flex:none;white-space:nowrap}
.ed-ctx .hint{white-space:nowrap}
.ctx-color{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);padding:0;position:relative;flex:none;background-clip:padding-box;box-shadow:inset 0 0 0 2px #fff}
.ed-ctx select{height:32px;width:auto;min-width:120px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);height:32px;background:var(--surf)}
.stepper button{border:0;background:transparent;width:26px;height:100%;color:var(--ink-2)} .stepper button:hover{background:var(--line-2)}
.stepper input{width:44px;border:0;text-align:center;height:100%;background:transparent;font-weight:600}
.stepper input:focus{outline:none}
.ed-canvas{flex:1;overflow:auto;position:relative}
.ed-pages{padding:28px 40px 120px;display:flex;flex-direction:column;align-items:center;min-width:max-content}
.pg-block{margin-bottom:26px;flex:none}
.pg-head{display:flex;align-items:center;gap:2px;margin-bottom:6px;color:var(--ink-2);font-size:12.5px;font-weight:600;height:30px}
.pg-head .nm{padding:3px 6px;border-radius:6px;cursor:text}
.pg-head .nm:hover{background:rgba(255,255,255,.7)}
.pg-head input{font:inherit;font-weight:600;border:1px solid var(--blue);border-radius:6px;padding:2px 6px;box-shadow:var(--focus);width:200px}
.pg-head .sp1{flex:1}
.pg-head .ibtn{width:28px;height:28px}
.page-wrap{position:relative;box-shadow:0 2px 10px rgba(20,25,40,.22);background:#fff}
.page-wrap.active{box-shadow:0 0 0 2px var(--blue),0 2px 10px rgba(20,25,40,.22)}
.page{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.page .el{position:absolute;transform-origin:50% 50%;cursor:move}
.page .el.lk{pointer-events:none}
.page .el-text .el-in{outline:none}
.page .el.editing{cursor:text;outline:calc(2px*var(--iz)) dashed var(--blue)}
.sel-layer{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sel{position:absolute;border:calc(1.6px*var(--iz)) solid var(--blue);pointer-events:none;transform-origin:50% 50%;box-sizing:border-box}
.sel.multi{border-style:dashed}
.sel.lockb{border-color:var(--faint);border-style:dashed}
.sel.crop{border-color:var(--red)}
.handle{position:absolute;width:calc(12px*var(--iz));height:calc(12px*var(--iz));background:#fff;border:calc(1.6px*var(--iz)) solid var(--blue);border-radius:calc(4px*var(--iz));transform:translate(-50%,-50%);pointer-events:auto;box-sizing:border-box}
.sel.crop .handle{border-color:var(--red);background:var(--red-50)}
.handle[data-h=n],.handle[data-h=s]{cursor:ns-resize;width:calc(22px*var(--iz));height:calc(8px*var(--iz))}
.handle[data-h=e],.handle[data-h=w]{cursor:ew-resize;width:calc(8px*var(--iz));height:calc(22px*var(--iz))}
.handle[data-h=nw],.handle[data-h=se]{cursor:nwse-resize}.handle[data-h=ne],.handle[data-h=sw]{cursor:nesw-resize}
.handle[data-h=rot]{cursor:grab;border-radius:50%;width:calc(16px*var(--iz));height:calc(16px*var(--iz))}
.sel-size{position:absolute;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:calc(11px*var(--iz));font-weight:600;padding:calc(2px*var(--iz)) calc(7px*var(--iz));border-radius:calc(5px*var(--iz));white-space:nowrap;top:calc(100% + 12px*var(--iz))}
.lock-badge{position:absolute;right:calc(-10px*var(--iz));top:calc(-10px*var(--iz));width:calc(22px*var(--iz));height:calc(22px*var(--iz));background:var(--ink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lock-badge svg{width:60%;height:60%}
.guide-layer{position:absolute;inset:0;pointer-events:none}
.gl{position:absolute;background:var(--red)} .gl.v{width:calc(1.5px*var(--iz));top:0;bottom:0} .gl.hz{height:calc(1.5px*var(--iz));left:0;right:0}
.gl.user{background:#00A6C8}
.margins{position:absolute;inset:5%;border:calc(1.5px*var(--iz)) dashed rgba(30,95,216,.8);pointer-events:none}
.marquee{position:absolute;border:calc(1px*var(--iz)) solid var(--blue);background:rgba(30,95,216,.1);pointer-events:none}
.brush-cursor{position:fixed;border:1.5px solid #fff;outline:1.5px solid var(--ink);border-radius:50%;pointer-events:none;z-index:50;transform:translate(-50%,-50%)}
.ed-bottom{height:46px;background:var(--surf);border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px;flex:none}
.ed-thumbs{background:var(--surf);border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:12px;overflow-x:auto;flex:none;align-items:flex-end}
.th{flex:none;display:flex;flex-direction:column;gap:4px;align-items:center;cursor:pointer}
.th .tw{border:2px solid transparent;border-radius:6px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.th.on .tw{border-color:var(--blue)} .th.over .tw{border-color:var(--red)}
.th small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.th-add{width:64px;height:64px;border:2px dashed #c4cad6;border-radius:8px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none}
.th-add:hover{border-color:var(--blue);color:var(--blue)}
.ed-load{position:absolute;inset:0;background:rgba(244,245,248,.88);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-weight:600}
.ed-busy{position:fixed;top:112px;left:50%;transform:translateX(-50%);z-index:80;background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:12px;padding:12px 16px;width:340px;display:flex;flex-direction:column;gap:8px}
.ed-drop{position:absolute;inset:8px;border:3px dashed var(--blue);border-radius:16px;background:rgba(232,240,253,.8);z-index:40;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--blue-d);pointer-events:none}
.tile-prev{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.sw-row{display:flex;gap:6px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);padding:0;box-shadow:inset 0 0 0 2px #fff}
.sw:hover{transform:scale(1.1)}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.num-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.num-row label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.num-row .input{height:30px;padding:0 6px}
.slider-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.slider-row label{width:86px;font-weight:600;color:var(--ink-2);flex:none}
.slider-row .val{width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.exp-pop{width:380px}
.fmt-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:var(--surf);text-align:left;width:100%}
.fmt-card.on{border-color:var(--blue);background:var(--blue-50)}
.fmt-card .rd{width:16px;height:16px;border-radius:50%;border:2px solid #aab2c0;flex:none;margin-top:2px}
.fmt-card.on .rd{border-color:var(--blue);background:radial-gradient(var(--blue) 45%,#fff 50%)}
.shape-btn:disabled,.text-add:disabled,.tex-item:disabled,.mini-item:disabled{opacity:.45;pointer-events:none}