/* ---------- police des étiquettes ---------- */
@font-face{
  font-family:Bangers;
  src:url("fonts/Bangers-Regular.ttf") format("truetype");
  font-display:block;
}

/* ---------- jetons ---------- */
:root{
  --ink:#1b1f2a;
  --ink-soft:#5a6376;
  --line:#dfe3ec;
  --bg:#f2f4f8;
  --card:#ffffff;
  --accent:#3b4ea0;
  --accent-soft:#eaedf8;
  --go:#17784f;
  --danger:#b3372b;
  --radius:12px;
  --mm:3.779528px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;
}
h2,h3{margin:0;font-size:16px}
.muted{color:var(--ink-soft);font-size:13px}
code{background:var(--accent-soft);padding:1px 5px;border-radius:4px;font-size:12px}

/* ---------- barre du haut ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:30px;height:30px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,#ffd23f 0 50%,#e05a8a 50% 100%);
  border:1.5px solid var(--ink);
}
.brand strong{display:block;font-size:15px;line-height:1.1}
.brand small{display:block;color:var(--ink-soft);font-size:12px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;
  white-space:nowrap;
}
.btn:hover{border-color:#b9c0d4;background:#fbfcfe}
.btn:disabled{opacity:.45;cursor:default}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#334590;border-color:#334590}
.btn-go{background:var(--go);border-color:var(--go);color:#fff}
.btn-go:hover{background:#13643f;border-color:#13643f}
.btn-quiet{color:var(--danger);border-color:#f0d6d2;background:#fdf6f5}
.btn-quiet:hover{background:#fbeae7;border-color:#e3b5ad}

/* ---------- mise en page ---------- */
main{flex:1;display:grid;grid-template-columns:minmax(360px,420px) 1fr;min-height:0}
.side{
  background:var(--card);border-right:1px solid var(--line);
  padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
}
.side-head{display:flex;flex-direction:column;gap:8px}
.side-head h2{display:flex;align-items:center;gap:8px}
.count{
  background:var(--accent-soft);color:var(--accent);border-radius:20px;
  padding:1px 9px;font-size:13px;font-weight:600;
}
.help summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600}
.help ol{margin:8px 0 0;padding-left:20px;color:var(--ink-soft);font-size:13px}
.help li{margin-bottom:5px}

.list{display:flex;flex-direction:column;gap:10px}

/* ---------- carte d'édition ---------- */
.item{
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;
  display:grid;grid-template-columns:96px 1fr;gap:10px;background:#fcfcfe;
}
.item.warn{border-color:#e8c37a;background:#fffaf0}
.thumb{
  width:96px;height:74px;border:1px solid #444;overflow:hidden;background:#eef0f5;
  position:relative;cursor:pointer;border-radius:3px;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .no-img{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ink-soft);text-align:center;padding:4px;
}
.thumb:hover::after{
  content:"Remplacer";position:absolute;inset:auto 0 0 0;
  background:rgba(27,31,42,.8);color:#fff;font-size:11px;text-align:center;padding:2px;
}
.fields{display:flex;flex-direction:column;gap:7px;min-width:0}
.fields textarea{
  width:100%;resize:none;border:1px solid var(--line);border-radius:7px;padding:6px 8px;
  font:inherit;font-size:14px;line-height:1.25;overflow:hidden;
}
.fields textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sw{
  width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(0,0,0,.25);
  cursor:pointer;padding:0;flex:none;
}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.sw.auto{position:relative}
.sw.auto::after{
  content:"";position:absolute;inset:0;border-radius:3px;
  box-shadow:inset 0 0 0 2px #fff;
}
.sw-custom{width:18px;height:18px;border:none;padding:0;background:none;cursor:pointer;flex:none}
.crop{flex:1;min-width:64px;accent-color:var(--accent)}
.mini{
  border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;
  width:24px;height:24px;font-size:13px;line-height:1;color:var(--ink-soft);padding:0;
}
.mini:hover{background:var(--accent-soft);color:var(--accent)}
.mini.del:hover{background:#fbeae7;color:var(--danger)}
.tag{font-size:11px;color:#8a6420;background:#fdf1da;border-radius:5px;padding:1px 6px}
.lbl{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}

.dropzone{
  border:2px dashed #c3cadb;border-radius:var(--radius);padding:22px 14px;text-align:center;
  color:var(--ink-soft);font-size:13px;cursor:pointer;background:#fafbfe;
}
.dropzone p{margin:6px 0 0}
.dropzone svg{width:26px;height:26px;fill:none;stroke:#9aa5bf;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dropzone.hot{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ---------- aperçu ---------- */
.preview{display:flex;flex-direction:column;min-width:0;min-height:0}
.preview-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 16px;color:var(--ink-soft);font-size:13px;border-bottom:1px solid var(--line);
  background:#e9ecf3;
}
.zoom{display:flex;align-items:center;gap:8px}
.zoom input{width:110px;accent-color:var(--accent)}
.pages-wrap{flex:1;overflow:auto;padding:18px}
.pages{transform-origin:top left}

/* ---------- la planche A4 (identique à l'impression) ---------- */
.page{
  width:210mm;height:296.8mm;padding:10mm;background:#fff;
  box-shadow:0 2px 14px rgba(27,31,42,.18);margin:0 auto 16px;overflow:hidden;
}
.sheet{
  width:190mm;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6mm;align-content:start;
}
.label{
  min-width:0;background:#fff;border:.4mm solid #cfd6dd;height:40mm;
  display:flex;align-items:flex-start;gap:4mm;padding:3mm;break-inside:avoid;
}
.art{
  width:44mm;height:34mm;flex:none;border:.3mm solid #444;overflow:hidden;background:#f3f5f8;
}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.title{
  flex:1;min-width:0;min-height:11mm;max-height:26mm;overflow:hidden;margin-top:1mm;padding:1.5mm 2.5mm;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:Bangers,"Comic Sans MS",cursive;line-height:1.05;letter-spacing:.3mm;
  border:.3mm solid #222;word-break:normal;overflow-wrap:normal;
}
.label.sel{outline:2px solid var(--accent);outline-offset:2px}

.empty-preview{
  margin:60px auto;max-width:330px;text-align:center;color:var(--ink-soft);font-size:14px;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;
  font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:50;
  display:flex;align-items:center;gap:12px;
}
.toast button{
  background:none;border:none;color:#ffd23f;font:inherit;font-weight:600;cursor:pointer;padding:0;
}

/* ---------- dialogue ---------- */
dialog{
  border:none;border-radius:14px;padding:0;max-width:560px;width:92vw;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
dialog::backdrop{background:rgba(27,31,42,.45)}
dialog form{padding:18px;display:flex;flex-direction:column;gap:10px}
dialog textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;font:inherit;resize:vertical;
}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}

@media (max-width:900px){
  main{grid-template-columns:1fr}
  .side{border-right:none;border-bottom:1px solid var(--line);max-height:50vh}
}

/* ---------- impression ---------- */
@page{size:A4;margin:0}
@media print{
  body{background:#fff;display:block}
  .topbar,.side,.preview-head,.toast,.dropzone{display:none!important}
  .preview{display:block}
  .pages-wrap{padding:0;overflow:visible}
  .pages{zoom:1!important;transform:none!important}
  .page{box-shadow:none;margin:0;break-after:page;page-break-after:always}
  .page:last-child{break-after:auto;page-break-after:auto}
  .label.sel{outline:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}