:root{
  --hv-green:#2f5d3a;
  --hv-green-dark:#1f4329;
  --hv-cream:#f5f3ed;
  --hv-card:#ffffff;
  --hv-text:#1f271f;
  --hv-muted:#687168;
  --hv-border:#dfe4de;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--hv-text);background:var(--hv-cream)}
a{color:inherit}
.hv3d-shell{width:min(1400px,calc(100vw - 48px));max-width:1400px;margin:0 auto;padding:24px}
.hv3d-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.hv3d-kicker{margin:0 0 8px;color:var(--hv-green);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
h1{font-size:clamp(2rem,4vw,4rem);line-height:1.03;margin:0 0 12px}
.hv3d-hero p{max-width:760px;margin:0;color:var(--hv-muted);font-size:1.05rem}
.hv3d-cta,.hv3d-primary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--hv-green);color:#fff;padding:14px 18px;border-radius:12px;font-weight:800;white-space:nowrap}
.hv3d-cta:hover,.hv3d-primary:hover{background:var(--hv-green-dark)}
.hv3d-app{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:stretch;width:100%}
.hv3d-controls{display:flex;flex-direction:column;gap:12px}
.hv3d-card{background:var(--hv-card);border:1px solid var(--hv-border);border-radius:16px;padding:16px}
.hv3d-card h2{font-size:1rem;margin:0 0 12px}
.hv3d-card label{display:grid;gap:8px;margin:12px 0;font-size:.92rem}
.hv3d-card input[type="range"],.hv3d-card select,.hv3d-card input[type="file"]{width:100%}
.hv3d-card select,.hv3d-card input[type="file"]{padding:10px;border:1px solid var(--hv-border);border-radius:10px;background:#fff}
.hv3d-check{grid-template-columns:20px 1fr!important;align-items:center!important}
.hv3d-check input{width:18px;height:18px;accent-color:var(--hv-green)}
.hv3d-small{font-size:.82rem;color:var(--hv-muted);margin-top:0}
#photoPreview{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-top:10px;border:1px solid var(--hv-border)}
.hv3d-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hv3d-actions button{border:1px solid var(--hv-border);background:#fff;border-radius:12px;padding:13px 14px;font-weight:750;cursor:pointer}
.hv3d-stage-wrap{position:relative;width:100%;min-width:0;height:680px;min-height:680px;background:#e8eee8;border:1px solid var(--hv-border);border-radius:18px;overflow:hidden}
.hv3d-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important}
.hv3d-stage canvas{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important}
.hv3d-status{position:absolute;z-index:2;left:16px;top:16px;background:rgba(255,255,255,.9);border:1px solid var(--hv-border);padding:9px 12px;border-radius:10px;font-size:.86rem}
.hv3d-help{position:absolute;z-index:2;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(25,33,25,.78);color:#fff;padding:8px 12px;border-radius:999px;font-size:.78rem;white-space:nowrap}
@media (max-width:900px){
  .hv3d-hero{align-items:flex-start;flex-direction:column}
  .hv3d-app{grid-template-columns:1fr}
  .hv3d-stage-wrap,.hv3d-stage{min-height:520px}
}
@media (max-width:560px){
  .hv3d-shell{padding:14px}
  .hv3d-actions{grid-template-columns:1fr}
  .hv3d-stage-wrap,.hv3d-stage{min-height:440px}
  .hv3d-help{white-space:normal;text-align:center;width:calc(100% - 24px)}
}
.hv3d-upload{
  display:block;
  margin:10px 0;
}

.hv3d-upload span{
  display:block;
  margin-bottom:8px;
  font-weight:700;
}

.hv3d-photo-info{
  display:grid;
  gap:4px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:#eef4ee;
  border:1px solid var(--hv-border);
  font-size:.82rem;
}

.hv3d-photo-info strong{
  color:var(--hv-green);
}

.hv3d-secondary{
  width:100%;
  margin-top:8px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--hv-border);
  background:#fff;
  color:var(--hv-text);
  font-weight:750;
  cursor:pointer;
}

.hv3d-secondary:hover{
  background:#f1f4ef;
}

.hv3d-secondary:disabled,
.hv3d-primary:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.hv3d-card .hv3d-primary{
  width:100%;
  margin-top:8px;
  border:0;
  cursor:pointer;
}

.hv3d-stage-photo{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#111;
  display:none;
}

.hv3d-stage-wrap.photo-mode .hv3d-stage-photo{
  display:block;
}

.hv3d-stage-wrap.photo-mode #viewer{
  visibility:hidden;
}

.hv3d-stage-wrap.photo-mode .hv3d-help{
  display:none;
}
/* Correction affichage plein format de la photo client */
#photoPreview.hv3d-stage-photo{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  background:#e9eee8 !important;
}

#photoPreview.hv3d-stage-photo[hidden]{
  display:none !important;
}

.hv3d-stage-wrap.photo-mode #photoPreview.hv3d-stage-photo{
  display:block !important;
}
.hv3d-stage-wrap{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--hv-border);
  background:#e7ede7;
}

.hv3d-stage-title{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(20,55,35,.92);
  color:#fff;
  pointer-events:none;
}

.hv3d-stage-title strong{
  font-size:1rem;
  line-height:1.2;
}

.hv3d-stage-title span{
  font-size:.75rem;
  opacity:.82;
}

.hv3d-stage-wrap.photo-mode .hv3d-stage-title strong{
  font-size:0;
}

.hv3d-stage-wrap.photo-mode .hv3d-stage-title strong::after{
  content:"Vue avant";
  font-size:1rem;
}

.hv3d-stage-wrap.photo-mode .hv3d-stage-title span{
  font-size:0;
}

.hv3d-stage-wrap.photo-mode .hv3d-stage-title span::after{
  content:"Photo actuelle du client";
  font-size:.75rem;
}

#photoPreview.hv3d-stage-photo{
  object-fit:contain !important;
  background:#dfe6df !important;
}

.hv3d-secondary{
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.hv3d-secondary:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#9aaa98;
}

.hv3d-card .hv3d-primary{
  transition:
    transform .2s ease,
    opacity .2s ease;
}

.hv3d-card .hv3d-primary:hover:not(:disabled){
  transform:translateY(-1px);
}

@media (max-width:700px){
  .hv3d-stage-title{
    top:10px;
    left:10px;
    padding:8px 10px;
  }

  .hv3d-stage-title strong{
    font-size:.9rem;
  }

  .hv3d-stage-title span{
    font-size:.7rem;
  }
}
.hv3d-app{

