/* ===========================================================
   H Tools Wood — Styles "Visualisez votre projet avec l'IA"
   =========================================================== */

.ai-hero{padding:56px 24px 8px;max-width:680px;margin:0 auto;text-align:center;}
.ai-hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:34px;line-height:1.18;letter-spacing:-.015em;margin:12px 0 12px;}
.ai-hero p{color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:540px;margin:0 auto;}

/* ---------- Indicateur d'étapes ---------- */
.step-track{
  display:flex;justify-content:center;gap:6px;padding:34px 24px 8px;max-width:880px;margin:0 auto;
  flex-wrap:wrap;
}
.step-dot{
  display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--ink-soft);padding:6px 10px;border-radius:20px;
}
.step-dot .sd-num{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:10px;flex:none;
}
.step-dot.active{color:var(--accent-2);font-weight:600;}
.step-dot.active .sd-num{background:var(--accent-2);color:#fff;border-color:var(--accent-2);}
.step-dot.done .sd-num{background:var(--accent-2-soft);border-color:var(--accent-2);color:var(--accent-2-dark);}
.step-connector{width:16px;height:1px;background:var(--line);align-self:center;}

/* ---------- Panneau principal ---------- */
.ai-wizard{max-width:760px;margin:0 auto;padding:32px 24px 100px;}
.ai-step{display:none;}
.ai-step.active{display:block;animation:step-in .35s ease;}
@keyframes step-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.ai-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;}
@media (max-width:600px){.ai-panel{padding:24px 20px;}}
.ai-panel h2{font-family:'Fraunces',serif;font-weight:500;font-size:23px;margin-bottom:8px;}
.ai-panel > p.step-sub{color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin-bottom:24px;max-width:480px;}

.ai-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:12px;}
.ai-nav .spacer{flex:1;}

/* ---------- Mode toggle (importer / dessiner) ---------- */
.mode-toggle{display:flex;gap:8px;margin-bottom:22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:4px;}
.mode-toggle button{
  flex:1;padding:10px;border:none;background:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;
  font-weight:500;color:var(--ink-soft);border-radius:var(--radius);
}
.mode-toggle button.active{background:var(--panel);color:var(--accent-2);box-shadow:0 1px 3px rgba(28,26,23,.12);}
.mode-panel{display:none;}
.mode-panel.active{display:block;}

/* ---------- Dropzone + prévisualisation ---------- */
.img-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px;}
.img-preview{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.img-preview img{width:100%;height:100%;object-fit:cover;}
.img-preview .ip-remove{
  position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(20,18,15,.65);
  color:#fff;border:none;cursor:pointer;font-size:13px;line-height:1;
}

/* ---------- Croquis (canvas) ---------- */
.sketch-note{
  font-size:12.5px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;margin-bottom:16px;
}
.sketch-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.sketch-toolbar button{
  width:36px;height:36px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
}
.sketch-toolbar button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;}
.sketch-toolbar button.active{border-color:var(--accent-2);color:var(--accent-2);background:var(--accent-2-soft);}
.sketch-toolbar button.danger{margin-left:auto;color:var(--accent-2);}
.sketch-canvas-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;touch-action:none;}
#sketchCanvas{display:block;width:100%;height:340px;cursor:crosshair;}
.sketch-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.sketch-dims .form-group{margin-bottom:0;}
.sketch-dims label{font-size:12px;}

/* ---------- Dimensions étape ---------- */
.dims-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:520px){.dims-grid{grid-template-columns:1fr;}}

/* ---------- Génération ---------- */
.generate-cta{text-align:center;padding:20px 0 6px;}
.generate-loading{display:none;text-align:center;padding:50px 20px;}
.generate-loading.active{display:block;}
.spinner-ring{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent-2);
  margin:0 auto 20px;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.generate-loading .gl-status{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.03em;}

.ai-result{display:none;}
.ai-result.active{display:block;}
.ai-disclaimer{
  font-size:11.5px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-top:14px;line-height:1.55;
}
.ai-disclaimer strong{color:var(--ink);}
.demo-note{
  font-size:12px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;margin-bottom:18px;
}

/* ---------- Comparateur avant/après ---------- */
.compare-wrap{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;user-select:none;
}
.compare-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.compare-after-clip{position:absolute;inset:0;overflow:hidden;width:50%;}
.compare-after-clip img{width:var(--cw,100%);max-width:none;}
.compare-label{
  position:absolute;top:12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(20,18,15,.7);color:#fff;padding:4px 9px;border-radius:10px;z-index:3;
}
.compare-label.before{left:12px;}
.compare-label.after{right:12px;}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:4;transform:translateX(-50%);cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.compare-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.compare-handle::before{
  content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;font-size:13px;color:var(--ink);
}

/* ---------- Propositions ---------- */
.proposal-tabs{display:flex;gap:8px;margin:22px 0 14px;flex-wrap:wrap;}
.proposal-tabs button{
  padding:9px 16px;border:1px solid var(--line);background:var(--panel);border-radius:20px;cursor:pointer;
  font-size:12.5px;font-family:'Inter',sans-serif;color:var(--ink-soft);
}
.proposal-tabs button.active{border-color:var(--accent-2);color:var(--accent-2);font-weight:600;background:var(--accent-2-soft);}
.proposal-desc{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;}

/* ---------- Retouche ---------- */
.refine-row{display:flex;gap:10px;margin-top:8px;}
.refine-row input{flex:1;}
.refine-history{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.refine-history li{
  font-size:12.5px;color:var(--ink-soft);border-left:2px solid var(--accent-2);padding:4px 0 4px 12px;
}

/* ---------- Récap final ---------- */
.summary-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.summary-list li{display:flex;justify-content:space-between;gap:16px;font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:8px;}
.summary-list .sl-label{color:var(--ink-soft);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;flex:none;}
.summary-list .sl-val{text-align:right;}