/* ===========================================================
   H Tools Wood — Styles spécifiques au configurateur de dressing
   =========================================================== */

.wrap{padding:36px 24px 64px;}
.page-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;margin-bottom:32px;
  flex-wrap:wrap;gap:12px;
}
.brand{display:flex;flex-direction:column;gap:2px;}
.brand h1{
  font-family:'Fraunces',serif;font-weight:500;font-size:30px;margin:2px 0 0;
  letter-spacing:-.01em;
}
.page-header p{margin:0;color:var(--ink-soft);font-size:13.5px;max-width:280px;text-align:right;}

.layout{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start;}
@media (max-width:860px){.layout{grid-template-columns:1fr;}}

.preview{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:sticky;top:80px;
}
.preview-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.preview-top .label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;}
.canvas-holder{
  width:100%;aspect-ratio:4/3;position:relative;border-radius:var(--radius);
  background:linear-gradient(180deg,#FBF8F3 0%, #F1EADC 100%);
  cursor:grab;overflow:hidden;
}
.canvas-holder:active{cursor:grabbing;}
.canvas-holder canvas{display:block;width:100%;height:100%;}
.canvas-hint{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);
  background:rgba(255,253,249,.8);padding:3px 8px;border-radius:10px;letter-spacing:.04em;
  pointer-events:none;
}
.dims-caption{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);text-align:center;margin-top:8px;}
.price-box{
  margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;align-items:flex-end;
}
.price-box .total-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;}
.price-box .total{font-family:'Fraunces',serif;font-size:28px;font-weight:500;}
.price-box .note{font-size:11px;color:var(--ink-soft);margin-top:2px;}

.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.field-row label{font-size:13.5px;font-weight:500;}
.field-row .val{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-2);}
input[type=range]{
  width:100%;-webkit-appearance:none;height:2px;background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;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]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent-2);cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent-2);
}
.slider-row{display:flex;align-items:center;gap:8px;}
.slider-row input[type=range]{flex:1;}
.step-btn{
  flex:none;width:24px;height:24px;border:1px solid var(--line);background:var(--panel);
  font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1;cursor:pointer;
  border-radius:var(--radius);color:var(--accent-2);
}
.step-btn:hover{background:var(--accent-2-soft);border-color:var(--accent-2);}
.modules{display:flex;flex-direction:column;gap:10px;}
.module-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);padding:8px 10px;border-radius:var(--radius);
}
.module-row .m-label{font-size:12.5px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;}
select{
  font-family:'Inter',sans-serif;font-size:13px;padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);
}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.swatch{
  aspect-ratio:1;border-radius:50%;cursor:pointer;border:2px solid transparent;
  position:relative;transition:transform .12s ease;
}
.swatch:hover{transform:scale(1.08);}
.swatch.active{border-color:var(--accent-2);}
.swatch-name{
  text-align:center;font-size:9.5px;color:var(--ink-soft);margin-top:4px;line-height:1.2;
}
.swatch-wrap{display:flex;flex-direction:column;align-items:center;}
.stepper{display:flex;align-items:center;gap:10px;}
.stepper button{
  width:28px;height:28px;border:1px solid var(--line);background:var(--panel);
  font-family:'JetBrains Mono',monospace;font-size:15px;cursor:pointer;border-radius:var(--radius);color:var(--accent-2);
}
.stepper button:hover{background:var(--accent-2-soft);border-color:var(--accent-2);}
.cta{
  width:100%;padding:13px;background:var(--accent-2);color:#fff;border:none;border-radius:var(--radius);
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;cursor:pointer;letter-spacing:.01em;
}
.cta:hover{background:var(--accent-2-dark);}
.cta.secondary{background:transparent;color:var(--accent-2);border:1px solid var(--accent-2);margin-top:8px;}
.cta.secondary:hover{background:var(--accent-2-soft);}
.breakdown{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.7;}
.breakdown span{color:var(--ink);font-family:'JetBrains Mono',monospace;}

/* ---------- Options (interrupteurs) — configurateur meuble TV ---------- */
.toggle-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.toggle-row + .toggle-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.toggle-row .t-label{font-size:13.5px;font-weight:500;}
.toggle-row .t-desc{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.switch{
  position:relative;flex:none;width:38px;height:22px;
}
.switch input{opacity:0;width:0;height:0;}
.switch .track{
  position:absolute;inset:0;background:var(--line);border-radius:20px;cursor:pointer;transition:background .15s ease;
}
.switch .track::before{
  content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--panel);
  border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 2px rgba(42,35,25,.25);
}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track::before{transform:translateX(16px);}

/* ---------- Mobile : preview non collante (évite un aperçu 3D coupé) ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;}
  .preview{position:static;top:auto;}
}