*{box-sizing:border-box;margin:0;padding:0}
body{background:#1a1a2e;color:#f0f0f0;font-family:'Segoe UI',sans-serif;min-height:100vh}

/* ── HEADER ── */
#header{background:#111;padding:8px 16px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #333;position:relative}
#header a{text-decoration:none}
#header-back{color:#9ca3af;font-size:18px;text-decoration:none;position:absolute;left:16px;top:50%;transform:translateY(-50%)}
#header-back:hover{color:#fbbf24}
#header-back span{display:none}
@media(min-width:768px){#header{justify-content:space-between}#header-back{position:static;transform:none;font-size:13px}#header-back span{display:inline}}

/* ── LAYOUT ── */
#app{display:flex;flex-direction:column}

/* Canvas zone */
#canvas-zone{background:#2d2d44;display:flex;align-items:center;justify-content:center;padding:10px}
#canvas-wrapper{width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.6);border-radius:4px;overflow:hidden;background:#fff}

/* Panneau bas */
#panneau{background:#111827;display:flex;flex-direction:column}

/* Onglets */
#tabs{display:flex;background:#0f172a;border-bottom:1px solid #1e293b;flex-shrink:0}
.tab{flex:1;padding:10px 4px;font-size:11px;font-weight:600;text-align:center;cursor:pointer;color:#94a3b8;border:none;background:none;border-bottom:2px solid transparent;transition:all .2s}
.tab.on{color:#fbbf24;border-bottom-color:#fbbf24}
.tab:hover{color:#e2e8f0}

/* Contenu onglets */
#tab-body{flex:1;overflow-y:auto;padding:14px}
#tab-body::-webkit-scrollbar{width:3px}
#tab-body::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}

.tab-pane{display:none}
.tab-pane.on{display:block}

/* Form */
.flabel{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px;margin-top:10px}
.flabel:first-child{margin-top:0}
.finput{width:100%;background:#1e293b;border:1px solid #334155;color:#f1f5f9;padding:8px 10px;border-radius:6px;font-size:13px;outline:none;transition:border-color .2s}
.finput:focus{border-color:#fbbf24}
textarea.finput{resize:vertical;min-height:60px}
textarea.finput::-webkit-scrollbar{width:6px}
textarea.finput::-webkit-scrollbar-track{background:transparent}
textarea.finput::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
textarea.finput::-webkit-scrollbar-thumb:hover{background:#475569}
textarea.finput{scrollbar-width:thin;scrollbar-color:#334155 transparent}

/* Color row */
.crow{display:flex;align-items:center;gap:8px;margin-top:4px}
.cpick{width:38px;height:32px;border:none;padding:2px;border-radius:6px;cursor:pointer;background:#1e293b;flex-shrink:0}
.cval{font-size:11px;color:#94a3b8;font-family:monospace}

/* Grilles */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.gitem{aspect-ratio:1;background:#1e293b;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .2s}
.gitem:hover,.gitem.on{border-color:#fbbf24}
.gitem img{width:100%;height:100%;object-fit:contain;padding:3px}
.gcadre{aspect-ratio:3/2}

/* Section title */
.stitle{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;padding:10px 0 6px;border-top:1px solid #1e293b;margin-top:6px}
.stitle:first-child{border-top:none;padding-top:0;margin-top:0}

/* Bouton télécharger */
#btn-dl{width:100%;padding:13px;background:#fbbf24;color:#111;font-weight:700;font-size:15px;border:none;border-radius:0;cursor:pointer;transition:background .2s;flex-shrink:0}
#btn-dl:hover{background:#f59e0b}
#btn-preview{width:100%;padding:10px;background:#1e293b;color:#94a3b8;font-weight:600;font-size:13px;border:none;border-top:1px solid #334155;cursor:pointer;transition:background .2s}
#btn-preview:hover{background:#334155}
@media(pointer:fine){#btn-preview{display:none}}
#overlay-preview{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9999;justify-content:center;align-items:center;flex-direction:column}
#overlay-preview.show{display:flex}
#overlay-preview img{max-width:95vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 30px rgba(0,0,0,0.5)}
#overlay-preview .close-btn{position:absolute;top:12px;right:16px;background:none;border:none;color:white;font-size:32px;cursor:pointer;z-index:10000}

/* ── DESKTOP ── */
@media(min-width:768px){
  body{overflow:hidden}
  #app{flex-direction:row;height:calc(100vh - 46px)}
  #canvas-zone{flex:1;height:100%;overflow:hidden;padding:16px}
  #canvas-wrapper{width:100%;max-width:none}
  #panneau{width:300px;min-width:280px;max-width:300px;height:100%;overflow:hidden;display:flex;flex-direction:column}
  #tab-body{flex:1;overflow-y:auto}
  .tab{font-size:10px;padding:10px 2px}
}

#illus-grid{max-height:220px;overflow-y:auto}
#illus-grid::-webkit-scrollbar{width:3px}
#illus-grid::-webkit-scrollbar-thumb{background:#334155}
/* Tooltip canvas */
#canvas-tooltip{
  position:fixed;pointer-events:none;z-index:9000;
  background:rgba(15,23,42,0.92);color:#f1f5f9;
  font-size:12px;font-weight:500;line-height:1.5;
  padding:8px 12px;border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  border:1px solid #334155;
  max-width:220px;text-align:center;
  opacity:0;transition:opacity .2s;
}
#canvas-tooltip.show{opacity:1}

/* Boutons actions textes */
.txt-action-box{margin-bottom:10px;padding:10px;background:#0f172a;border:1px solid #334155;border-radius:8px}
.txt-action-btn{width:100%;padding:8px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700}
.txt-action-btn-danger{background:#7f1d1d;border:1px solid #991b1b;color:#fca5a5}
.txt-action-btn-danger:hover{background:#991b1b}
.txt-action-btn-add{background:#fbbf24;border:1px solid #f59e0b;color:#111}
.txt-action-btn-add:hover{background:#f59e0b}