/* ===========================================================
   H Tools Wood — Configurateur de dressing 3D avancé
   =========================================================== */

body{overflow-x:hidden;}
.dc-shell{
  display:grid;grid-template-columns:1fr 400px;gap:0;
  height:calc(100vh - 65px);min-height:640px;
}
@media (max-width:1100px){
  .dc-shell{grid-template-columns:1fr;height:auto;}
}

/* ---------- Colonne 3D ---------- */
.dc-viewport{display:flex;flex-direction:column;background:#F1EADC;border-right:1px solid var(--line);}
.dc-canvas-wrap{
  position:relative;flex:1;min-height:420px;cursor:grab;overflow:hidden;
  background:linear-gradient(180deg,#F7F2E7 0%,#EAE0CC 60%,#E3D7BE 100%);
}
.dc-canvas-wrap:active{cursor:grabbing;}
.dc-canvas-wrap canvas{display:block;width:100%;height:100%;}

.dc-view-badge{
  position:absolute;top:16px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,253,249,.85);
  padding:6px 12px;border-radius:20px;pointer-events:none;z-index:3;
}
.dc-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);
  background:rgba(255,253,249,.85);padding:4px 10px;border-radius:12px;letter-spacing:.03em;
  pointer-events:none;z-index:3;
}

.dc-warning-banner{
  position:absolute;top:16px;right:16px;left:auto;max-width:340px;z-index:4;
  background:#2A1F16;color:#F7EFE2;border-left:3px solid var(--accent-2);
  padding:12px 14px;border-radius:var(--radius);font-size:12.5px;line-height:1.55;
  box-shadow:0 12px 28px rgba(20,15,8,.28);
}
.dc-warning-banner strong{display:block;margin-bottom:3px;font-size:12.5px;}
.dc-warning-banner .dc-warning-fix{
  display:inline-block;margin-top:8px;font-size:11px;font-family:'JetBrains Mono',monospace;
  color:#E4C89A;cursor:pointer;text-decoration:underline;letter-spacing:.02em;
}

/* ---------- Toolbar sous la vue 3D ---------- */
.dc-toolbar{
  display:flex;align-items:center;gap:6px;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--panel);flex-wrap:wrap;
}
.dc-tool-btn{
  display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;
  padding:8px 12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:var(--radius);cursor:pointer;white-space:nowrap;transition:background .15s ease, border-color .15s ease;
}
.dc-tool-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.dc-tool-btn:hover{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--accent-2-dark);}
.dc-tool-btn.active{background:var(--accent-2);color:#fff;border-color:var(--accent-2);}
.dc-tool-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px;}

/* ---------- Panneau de configuration ---------- */
.dc-panel{display:flex;flex-direction:column;background:var(--panel);height:100%;overflow:hidden;}
.dc-panel-scroll{flex:1;overflow-y:auto;padding:24px 22px 8px;}
.dc-panel-scroll::-webkit-scrollbar{width:6px;}
.dc-panel-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

/* ---------- Onglets Formulaire / Fonction ---------- */
.dc-tabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1px solid var(--line);}
.dc-tab-btn{
  flex:1;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 8px;border:none;background:none;color:var(--ink-soft);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease, border-color .15s ease;
}
.dc-tab-btn:hover{color:var(--accent-2);}
.dc-tab-btn.active{color:var(--accent-2);border-bottom-color:var(--accent-2);}

/* ---------- Stepper hauteur ---------- */
.dc-stepper{display:flex;align-items:center;gap:8px;}
.dc-stepper .dc-range{flex:1;}
.dc-step-btn{
  flex:none;width:26px;height:26px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.dc-step-btn:hover{background:var(--accent-2-soft);color:var(--accent-2-dark);border-color:var(--accent-2);}

/* ---------- Échantillons de finition ---------- */
.dc-swatch-groups{display:flex;flex-direction:column;gap:12px;}
.dc-swatch-group-label{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  font-family:'JetBrains Mono',monospace;margin-bottom:6px;}
.dc-swatch-row{display:flex;gap:8px;flex-wrap:wrap;}
.dc-swatch{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);
  cursor:pointer;padding:0;
}
.dc-swatch.active{box-shadow:0 0 0 2px var(--accent-2);}
.dc-color-input{width:34px;height:28px;border:1px solid var(--line);border-radius:6px;padding:2px;cursor:pointer;background:var(--panel);}

/* ---------- Puces de sélection de module ---------- */
.dc-module-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dc-module-chip{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;padding:8px 12px;border:1px solid var(--line);
  background:var(--panel);border-radius:var(--radius);cursor:pointer;color:var(--ink-soft);
}
.dc-module-chip span{font-family:'JetBrains Mono',monospace;font-size:10.5px;opacity:.75;margin-left:4px;}
.dc-module-chip:hover{border-color:var(--accent-2);color:var(--accent-2);}
.dc-module-chip.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}

/* ---------- Cartes de composition intérieure ---------- */
.dc-comp-group-label{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  font-family:'JetBrains Mono',monospace;margin:12px 0 6px;}
.dc-comp-group-label:first-child{margin-top:0;}
.dc-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;}
.dc-comp-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);cursor:pointer;font-size:10.5px;color:var(--ink-soft);
  text-align:center;line-height:1.3;
}
.dc-comp-card svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.dc-comp-card:hover{border-color:var(--accent-2);color:var(--accent-2);}
.dc-comp-card.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}

/* ---------- Accessoires ---------- */
.dc-accessory-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}
.dc-accessory-item{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink);cursor:pointer;padding:4px 0;
}
.dc-accessory-item input{accent-color:var(--accent-2);width:14px;height:14px;flex:none;}
.dc-accessory-item.disabled{opacity:.4;cursor:not-allowed;}
.dc-accessory-item.disabled input{cursor:not-allowed;}

.dc-section{margin-bottom:30px;}
.dc-section h2{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:14px;
}
.dc-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.dc-section-head h2{margin-bottom:0;}

.dc-field{margin-bottom:14px;}
.dc-field:last-child{margin-bottom:0;}
.dc-field-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.dc-field-row label{font-size:13px;font-weight:500;color:var(--ink);}
.dc-field-row .dc-val{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent-2);}
.dc-field-note{font-size:11px;color:var(--ink-soft);margin-top:5px;line-height:1.5;}

input[type=range].dc-range{
  width:100%;-webkit-appearance:none;height:2px;background:var(--line);outline:none;margin:6px 0;
}
input[type=range].dc-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent-2);cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent-2);
}
input[type=range].dc-range::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--accent-2);cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent-2);
}

.dc-preset-row{display:flex;gap:6px;flex-wrap:wrap;}
.dc-preset-chip{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:7px 12px;border:1px solid var(--line);
  background:var(--panel);border-radius:20px;cursor:pointer;color:var(--ink-soft);
}
.dc-preset-chip:hover{border-color:var(--accent-2);color:var(--accent-2);}
.dc-preset-chip.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff;}

.dc-add-btn{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;padding:8px 14px;
  border:1px solid var(--accent-2);color:var(--accent-2);background:none;border-radius:var(--radius);cursor:pointer;
}
.dc-add-btn:hover{background:var(--accent-2);color:#fff;}
.dc-add-btn:disabled{opacity:.35;cursor:not-allowed;}
.dc-add-btn:disabled:hover{background:none;color:var(--accent-2);}

.dc-modules-list{display:flex;flex-direction:column;gap:12px;}
.dc-module-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 12px;background:var(--bg);
}
.dc-module-card.has-warning{border-color:#C77A3A;}
.dc-module-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.dc-module-num{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.05em;color:var(--ink);
  font-weight:600;text-transform:uppercase;
}
.dc-module-remove{
  width:22px;height:22px;border:none;background:none;color:var(--ink-soft);cursor:pointer;
  font-size:15px;line-height:1;border-radius:50%;
}
.dc-module-remove:hover{background:var(--accent-2-soft);color:var(--accent-2-dark);}

.dc-module-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;}
.dc-module-grid .dc-field{margin-bottom:8px;grid-column:span 2;}
.dc-module-grid .dc-field.dc-half{grid-column:span 1;}

.dc-select, .dc-input-num{
  width:100%;font-family:'Inter',sans-serif;font-size:12.5px;padding:8px 9px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);
}
.dc-select:focus, .dc-input-num:focus{outline:none;border-color:var(--accent-2);}
.dc-field label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.04em;font-family:'JetBrains Mono',monospace;}

.dc-module-warning{
  margin-top:10px;padding:9px 10px;background:#FBF1E4;border:1px solid #E7C99A;border-radius:var(--radius);
  font-size:11.5px;color:#7A4B1E;line-height:1.55;display:none;
}
.dc-module-warning.visible{display:block;}
.dc-module-warning .dc-fix-btn{
  display:inline-block;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  text-decoration:underline;cursor:pointer;color:#7A4B1E;font-weight:600;
}

/* ---------- Résumé ---------- */
.dc-summary{
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--bg);
  font-size:12.5px;line-height:1.7;color:var(--ink);
}
.dc-summary .dc-summary-title{font-family:'Fraunces',serif;font-size:15px;margin-bottom:8px;}
.dc-summary ol{margin:0;padding-left:18px;}
.dc-summary li{margin-bottom:6px;}
.dc-summary li b{font-weight:600;}
.dc-summary .dc-summary-meta{color:var(--ink-soft);}

/* ---------- Indications (collapsible) ---------- */
.dc-collapse{border-top:1px solid var(--line);padding-top:14px;margin-bottom:14px;}
.dc-collapse-head{
  width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;
  cursor:pointer;padding:4px 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);
}
.dc-chevron{transition:transform .2s ease;color:var(--ink-soft);}
.dc-collapse.open .dc-chevron{transform:rotate(180deg);}
.dc-collapse-body{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.dc-collapse.open .dc-collapse-body{max-height:800px;}
.dc-collapse-body-inner{padding:12px 0 4px;font-size:12.5px;color:var(--ink-soft);line-height:1.7;}
.dc-tip{display:flex;gap:8px;margin-bottom:10px;}
.dc-tip:last-child{margin-bottom:0;}
.dc-tip-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent-2);margin-top:7px;}
.dc-indication-log{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.dc-log-entry{font-size:11.5px;color:#7A4B1E;margin-bottom:6px;}

/* ---------- Pied de panneau ---------- */
.dc-panel-footer{
  border-top:1px solid var(--line);padding:16px 22px 20px;background:var(--panel);
}
.dc-disclaimer{font-size:10.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px;}
.dc-quote-btn{width:100%;text-align:center;padding:14px;font-size:13.5px;}

@media (max-width:1100px){
  .dc-canvas-wrap{min-height:60vh;}
  .dc-panel{max-height:none;}
  .dc-panel-scroll{max-height:70vh;}
}

@media (max-width:600px){
  .dc-tool-sep{display:none;}
  .dc-toolbar{gap:8px 6px;padding:10px 12px;}
  .dc-tool-btn{padding:7px 10px;font-size:11.5px;}
  .dc-canvas-wrap{min-height:46vh;}
  .dc-panel-scroll{padding:20px 16px 8px;}
  .dc-comp-grid, .dc-accessory-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .dc-module-grid{grid-template-columns:1fr;}
  .dc-module-grid .dc-field.dc-half{grid-column:span 1;}
  .dc-tabs{gap:0;}
  .dc-tab-btn{font-size:10.5px;padding:10px 4px;}
}