/* Tout est scopé sous .plaque-configurateur-app pour ne jamais affecter
   les autres boutons, select ou textarea du thème Storefront / WooCommerce. */

.plaque-configurateur-app{
  --ink:#1C1B19;
  --canvas:#EAE4D6;
  --panel:#FBF9F4;
  --brass:#A97C3F;
  --brass-dark:#8A6530;
  --line:#DFD8C8;
  --muted:#726C60;
  --danger:#B4483A;
  display:flex;flex-direction:column;
  font-family:"IBM Plex Sans", sans-serif;
  color:var(--ink);
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  margin:28px 0;
}
.plaque-configurateur-app *{box-sizing:border-box;}
.plaque-configurateur-app .topbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:20px 28px;background:var(--panel);border-bottom:1px solid var(--line);
}
.plaque-configurateur-app .topbar h1{
  font-family:"Cinzel","IBM Plex Sans",serif;font-weight:600;font-size:19px;letter-spacing:.02em;margin:0 0 4px 0;
}
.plaque-configurateur-app .topbar p{margin:0;font-size:13px;color:var(--muted);}
.plaque-configurateur-app .topbar-actions{display:flex;gap:10px;flex-wrap:wrap;}
.plaque-configurateur-app button{font-family:inherit;cursor:pointer;}
.plaque-configurateur-app .btn-primary{
  background:var(--brass);color:#fff;border:none;border-radius:3px;padding:10px 16px;font-size:13.5px;font-weight:500;
}
.plaque-configurateur-app .btn-primary:hover{background:var(--brass-dark);}
.plaque-configurateur-app .btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:10px 16px;font-size:13.5px;
}
.plaque-configurateur-app .btn-ghost:hover{border-color:var(--brass);color:var(--brass-dark);}
.plaque-configurateur-app .validation-status{
  padding:0 28px;font-size:13px;color:#3F7A4E;min-height:0;
}
.plaque-configurateur-app .validation-status:not(:empty){padding:10px 28px;background:#F0F7F1;border-bottom:1px solid var(--line);}
.plaque-configurateur-app .shop-nudge{font-size:13px;color:var(--brass-dark);}
.plaque-configurateur-app .shop-nudge:not(:empty){padding:9px 28px;background:#FBF3EA;border-bottom:1px solid var(--line);}
.plaque-configurateur-app .shop-nudge a{color:var(--brass-dark);font-weight:600;text-decoration:underline;}
.plaque-configurateur-app .workspace{display:flex;flex-wrap:wrap;min-height:640px;}
.plaque-configurateur-app .sidebar{
  width:308px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
}
.plaque-configurateur-app .section{padding:18px 22px;border-bottom:1px solid var(--line);}
.plaque-configurateur-app .section h2{
  font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 12px 0;letter-spacing:.01em;
}
.plaque-configurateur-app .btn-row{display:flex;gap:8px;flex-wrap:wrap;}
.plaque-configurateur-app .btn-toggle{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:3px;padding:9px 10px;font-size:13px;color:var(--ink);
}
.plaque-configurateur-app .btn-toggle.active{border-color:var(--brass);background:#F4EADB;color:var(--brass-dark);font-weight:500;}
.plaque-configurateur-app .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);}
.plaque-configurateur-app .checkbox-row input{width:auto;}
.plaque-configurateur-app .option-tag{font-size:10.5px;color:var(--muted);background:#F4EADB;border-radius:10px;padding:2px 8px;}
.plaque-configurateur-app .price-estimate{font-size:15px;font-weight:600;color:var(--ink);align-self:center;}
.plaque-configurateur-app .preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.plaque-configurateur-app .btn-preset{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:12.5px;color:var(--ink);
}
.plaque-configurateur-app .btn-preset.active{border-color:var(--brass);background:#F4EADB;color:var(--brass-dark);font-weight:500;}
.plaque-configurateur-app .dims-row{display:flex;gap:10px;align-items:center;}
.plaque-configurateur-app .dims-row label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:4px;flex:1;}
.plaque-configurateur-app .dims-row input{
  border:1px solid var(--line);border-radius:3px;padding:8px;font-size:13px;font-family:inherit;width:100%;
}
.plaque-configurateur-app .swatch-grid{display:flex;flex-wrap:wrap;gap:14px;}
.plaque-configurateur-app .swatch-item{display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;}
.plaque-configurateur-app .swatch-material{
  width:38px;height:38px;border-radius:50%;border:2px solid transparent;padding:0;
}
.plaque-configurateur-app .swatch-material.active{border-color:var(--brass);box-shadow:0 0 0 2px var(--panel), 0 0 0 3px var(--brass);}
.plaque-configurateur-app .swatch-item span{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.2;}
.plaque-configurateur-app .field{display:block;margin-bottom:14px;}
.plaque-configurateur-app .field > span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
.plaque-configurateur-app textarea,
.plaque-configurateur-app select{
  width:100%;border:1px solid var(--line);border-radius:3px;padding:8px;font-size:13px;font-family:inherit;background:#fff;
}
.plaque-configurateur-app input[type="range"]{width:100%;}
.plaque-configurateur-app .swatch-row{display:flex;gap:8px;}
.plaque-configurateur-app .color-swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--line);padding:0;
}
.plaque-configurateur-app .color-swatch.active{border-color:var(--brass-dark);}
.plaque-configurateur-app .hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}
.plaque-configurateur-app #layers-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.plaque-configurateur-app .layer-row{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:3px;border:1px solid transparent;font-size:13px;
}
.plaque-configurateur-app .layer-row:hover{background:#F1ECE0;}
.plaque-configurateur-app .layer-row.active{border-color:var(--brass);background:#F4EADB;}
.plaque-configurateur-app .layer-icon{width:18px;text-align:center;color:var(--muted);font-size:12px;}
.plaque-configurateur-app .layer-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.plaque-configurateur-app .icon-btn{background:none;border:none;color:var(--muted);font-size:13px;padding:2px 4px;}
.plaque-configurateur-app .icon-btn:hover{color:var(--danger);}
.plaque-configurateur-app .layers-empty{font-size:12.5px;color:var(--muted);padding:6px 2px;}
.plaque-configurateur-app .stage{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px;min-width:280px;
  background:radial-gradient(ellipse at center, #F2EEE3 0%, var(--canvas) 72%);
}
.plaque-configurateur-app .plate-shadow{
  filter:drop-shadow(0 18px 26px rgba(28,27,25,.22)) drop-shadow(0 2px 4px rgba(28,27,25,.12));
  max-width:100%;
}
.plaque-configurateur-app svg#plate-svg{display:block;max-width:100%;height:auto;touch-action:none;}
.plaque-configurateur-app .draggable{cursor:grab;}
.plaque-configurateur-app .draggable:active{cursor:grabbing;}
@media (max-width:880px){
  .plaque-configurateur-app .workspace{flex-direction:column;}
  .plaque-configurateur-app .stage{order:-1;padding:24px 16px;min-height:220px;}
  .plaque-configurateur-app .sidebar{width:100%;}
  .plaque-configurateur-app .topbar{padding:16px 18px;}
}