/* VTracer-like UI (clean, stable, with dark mode) */
:root{
  --bg0:#FAFAFA;
  --bg1:#FFFFFF;
  --bg2:#F4F4F5;
  --bd:#E4E4E7;
  --bd2:#D4D4D8;
  --t1:#0A0A0A;
  --t2:#27272A;
  --t3:#71717A;
  --acc:#2563EB;
  --acc2:#1D4ED8;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --r:10px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
}
body.dark{
  --bg0:#0B0C0F;
  --bg1:#101218;
  --bg2:#141824;
  --bd:#262B3D;
  --bd2:#323B57;
  --t1:#F4F6FF;
  --t2:#C7CBE0;
  --t3:#7D87B3;
  --acc:#5B8CFF;
  --acc2:#7BA1FF;
  --shadow:0 1px 3px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg0);
  color:var(--t1);
}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid var(--bd);
  background:var(--bg1);
  position:sticky;
  top:0;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--acc),#7C3AED);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
}
.brand-mark svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-weight:800;letter-spacing:-.02em}
.brand-sub{font-size:12px;color:var(--t3);margin-top:1px}
.sp{flex:1}

.btn{
  appearance:none;
  border:1px solid var(--bd);
  background:var(--bg1);
  color:var(--t1);
  border-radius:12px;
  padding:9px 12px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,transform .02s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{background:var(--bg2);border-color:var(--bd2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.ghost{background:transparent}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:16px;
  padding:16px;
  align-items:start;
}

.stage{
  min-height: calc(100vh - 56px - 32px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.frame{
  position:relative;
  border:1px solid var(--bd);
  border-radius:16px;
  background:var(--bg1);
  box-shadow:var(--shadow);
  overflow:hidden;
  flex:1 1 auto;        /* remplit toute la hauteur disponible de la scene */
  min-height:520px;     /* plancher plus grand */
}

/* Canvas et SVG sortis du flux : taille stable, plus de saut au chargement */
#frameCanvas,#svgOut{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;   /* image/SVG centres, ratio preserve */
}

.drop{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(37,99,235,.35);
  border-radius:16px;
  background:rgba(37,99,235,.06);
  z-index:2;
  cursor:copy;
}
.drop[hidden]{display:none}
body.dark .drop{
  border-color:rgba(91,140,255,.35);
  background:rgba(91,140,255,.10);
}
.drop.hover{
  border-color:rgba(37,99,235,.85);
  background:rgba(37,99,235,.10);
}
.drop-inner{text-align:center;padding:24px}
.drop-title{font-weight:800;font-size:18px;letter-spacing:-.02em}
.drop-sub{margin-top:6px;color:var(--t3);font-size:13px}
.drop .btn{margin-top:14px}

.progress-wrap{
  position:absolute;left:12px;right:12px;top:12px;
  z-index:3;
}
progress{width:100%;height:10px;border-radius:999px;overflow:hidden}
progress::-webkit-progress-bar{background:rgba(0,0,0,.06)}
progress::-webkit-progress-value{background:var(--acc)}
body.dark progress::-webkit-progress-bar{background:rgba(255,255,255,.10)}

.panel{
  border:1px solid var(--bd);
  border-radius:16px;
  background:var(--bg1);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:sticky;
  top:72px;
}
.pg{border-top:1px solid var(--bd)}
.pg:first-child{border-top:none}
.pg-title{
  padding:12px 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t3);
  background:var(--bg1);
}
.row{padding:10px 14px;border-top:1px solid var(--bd)}
.row:first-of-type{border-top:none}
.lbl{font-weight:700;font-size:13px}
.hint{color:var(--t3);font-weight:600;font-size:12px}
.ctl{display:flex;align-items:center;gap:10px;margin-top:8px}
.val{min-width:26px;text-align:left;font-family:var(--mono);color:var(--t3);font-size:12px}
input[type="range"]{width:100%}

.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{
  appearance:none;
  border:1px solid var(--bd);
  background:var(--bg1);
  color:var(--t2);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.seg-btn:hover{background:var(--bg2);border-color:var(--bd2);color:var(--t1)}
.seg-btn.on{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.35);color:var(--t1)}
body.dark .seg-btn.on{background:rgba(91,140,255,.18);border-color:rgba(91,140,255,.35)}

.gallery{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px;
}
.g-item{
  border:1px solid var(--bd);
  border-radius:14px;
  overflow:hidden;
  background:var(--bg1);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .08s,border-color .12s;
}
.g-item:hover{transform:translateY(-1px);border-color:rgba(37,99,235,.35)}
.g-item img{display:block;width:100%;height:68px;object-fit:cover}

@media (max-width: 1100px){
  .layout{grid-template-columns:1fr}
  .panel{position:relative;top:auto}
  .gallery{grid-template-columns: repeat(3, minmax(0,1fr))}
}


/* Fenetre modale d'acces administrateur */
.admin-modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
}
.admin-modal[hidden]{display:none}
.admin-card{
  background:var(--bg1); border:1px solid var(--bd);
  border-radius:16px; box-shadow:var(--shadow);
  padding:18px; width:min(360px,92vw);
  display:flex; flex-direction:column; gap:10px;
}
.admin-title{font-weight:800; letter-spacing:-.01em}
.admin-input{
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--bd); background:var(--bg2);
  color:var(--t1); font:inherit;
}
.admin-msg{min-height:16px; font-size:12px; color:#e0564f}
.admin-actions{display:flex; justify-content:flex-end; gap:8px}

/* ===== Barre "Simplify" (flottante en bas du cadre) ===== */
.simplify-bar{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:6; display:flex; align-items:center; gap:6px;
  padding:6px; border-radius:14px;
  background:rgba(20,24,36,.82); backdrop-filter:blur(10px);
  border:1px solid var(--bd2); box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.sb-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:700 13px/1 var(--font); color:var(--t1);
  background:var(--acc); border:1px solid var(--acc); color:#08122b;
  border-radius:10px; padding:8px 12px; cursor:pointer; transition:.12s;
}
.sb-btn:hover{ filter:brightness(1.06) }
.sb-btn:active{ transform:translateY(1px) }
.sb-btn.ghost{ background:transparent; border-color:transparent; color:var(--t2); padding:8px }
.sb-btn.ghost:hover{ background:rgba(255,255,255,.06); color:var(--t1) }
.sb-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.sb-sep{ width:1px; height:22px; background:var(--bd2); margin:0 2px }

.simplify-pop{
  position:absolute; right:0; bottom:54px; width:240px;
  background:var(--bg1); border:1px solid var(--bd2); border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); padding:12px;
}
.simplify-pop[hidden]{ display:none }
.sp-row{ margin-bottom:10px }
.sp-row label{ display:flex; justify-content:space-between; font:600 12px/1 var(--font); color:var(--t2) }
.sp-row label b{ font-family:var(--mono); color:var(--acc2); font-weight:700 }
.sp-row input[type=range]{ width:100%; margin-top:7px; accent-color:var(--acc) }
.sp-hint{ font-size:11px; color:var(--t3); line-height:1.45; margin-top:4px }

.simplify-toast{
  position:absolute; left:50%; bottom:62px; transform:translate(-50%,6px);
  z-index:6; font:700 12px/1 var(--mono); color:var(--t1);
  background:rgba(11,12,15,.9); border:1px solid var(--bd2);
  padding:7px 11px; border-radius:9px; opacity:0; pointer-events:none; transition:.18s;
}
.simplify-toast.on{ opacity:1; transform:translate(-50%,0) }