@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Raleway:wght@300;400;500;600&display=swap');

:root {
  --cu: #b87333; --cu2: #d4956a; --cu3: #8b5a2b;
  --bk: #0a0a0a; --d1: #111; --d2: #1a1a1a; --d3: #222; --d4: #2a2a2a;
  --tx: #e8e0d5; --tx2: #a09080; --bd: rgba(184,115,51,.22); --r: 3px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

#scm-app{
  display:grid; grid-template-columns:1fr 460px;
  min-height:680px; background:var(--bk);
  border:1px solid var(--bd);
  font-family:'Raleway',sans-serif; color:var(--tx);
  overflow:hidden; position:relative;
}

/* ── 3D ── */
#scm-left{display:flex;flex-direction:column;background:radial-gradient(ellipse at 40% 40%,#1c1208,#0a0a0a 70%);}
#scm-viewer{flex:1;position:relative;min-height:500px;}
#scm-canvas{display:block;width:100%!important;height:100%!important;cursor:grab;}
#scm-canvas:active{cursor:grabbing;}

#scm-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,#1c1208,#0a0a0a 70%);color:var(--tx2);font-size:.82em;letter-spacing:.1em;transition:opacity .5s;z-index:5;}
#scm-loading.gone{opacity:0;pointer-events:none;}
.scm-spin{width:38px;height:38px;border:2px solid rgba(184,115,51,.2);border-top-color:var(--cu);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

#scm-viewer-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:4;}
.scm-v-btn{background:rgba(0,0,0,.6);border:1px solid var(--bd);color:var(--tx2);width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75em;transition:all .18s;border-radius:var(--r);}
.scm-v-btn:hover{border-color:var(--cu);color:var(--cu);}
.scm-v-btn.active{border-color:var(--cu);color:var(--cu);background:rgba(184,115,51,.15);}

#scm-finish-bar{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--bd);background:var(--d2);align-items:center;}
#scm-finish-label{font-size:.7em;color:var(--tx2);letter-spacing:.1em;font-family:'Cinzel',serif;text-transform:uppercase;}
.scm-finish-btn{flex:1;padding:7px 0;background:var(--d3);border:1px solid var(--bd);color:var(--tx2);font-family:'Raleway',sans-serif;font-size:.75em;cursor:pointer;transition:all .18s;border-radius:var(--r);}
.scm-finish-btn:hover,.scm-finish-btn.active{border-color:var(--cu);color:var(--cu);background:rgba(184,115,51,.12);}
#scm-3d-label{text-align:center;padding:8px;font-size:.68em;letter-spacing:.12em;color:var(--tx2);border-top:1px solid var(--bd);font-family:'Cinzel',serif;text-transform:uppercase;}

/* ── DROITE ── */
#scm-right{border-left:1px solid var(--bd);background:var(--d1);display:flex;flex-direction:column;overflow:hidden;}
#scm-header{padding:16px 18px 12px;border-bottom:1px solid var(--bd);background:linear-gradient(180deg,var(--d2),var(--d1));display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
#scm-brand{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.35em;color:var(--cu);text-transform:uppercase;margin-bottom:3px;}
#scm-header h2{font-family:'Cinzel',serif;font-size:.85em;font-weight:600;color:var(--tx);letter-spacing:.08em;}
#scm-layout-size{font-size:.65em;color:var(--tx2);letter-spacing:.06em;white-space:nowrap;background:rgba(184,115,51,.1);border:1px solid var(--bd);padding:4px 10px;align-self:flex-start;}

/* ── CANVAS 2D ── */
#scm-editor-wrap{
  position:relative;
  background:repeating-conic-gradient(#1e1e1e 0% 25%,#262626 0% 50%) 0 0/20px 20px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;  /* poignées accessibles même en bord */
  padding:14px;
  height:240px;      /* hauteur fixe pour ratio 21:9.5 dans 460px = ~208px + padding */
  flex-shrink:0;
}
#scm-editor{display:block;cursor:default;box-shadow:0 4px 32px rgba(0,0,0,.6);max-width:100%;}

/* ── TOOLBAR ── */
#scm-toolbar{border-top:1px solid var(--bd);padding:10px 12px;background:var(--d2);display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:340px;}

.scm-trow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}

.scm-tbtn{display:inline-flex;align-items:center;gap:5px;background:var(--d3);border:1px solid var(--bd);color:var(--tx2);font-family:'Raleway',sans-serif;font-size:.74em;font-weight:500;letter-spacing:.03em;padding:7px 11px;cursor:pointer;transition:all .18s;border-radius:var(--r);white-space:nowrap;text-decoration:none;}
.scm-tbtn:hover{border-color:var(--cu);color:var(--tx);background:var(--d4);}
.scm-tbtn.scm-primary{background:rgba(184,115,51,.15);border-color:var(--cu);color:var(--cu);}
.scm-tbtn.scm-primary:hover{background:var(--cu);color:#000;}
.scm-tbtn.scm-danger{border-color:rgba(180,60,60,.4);color:#c0705a;}
.scm-tbtn.scm-danger:hover{border-color:#c0705a;background:rgba(180,60,60,.15);}
.scm-tbtn.active{border-color:var(--cu);color:var(--cu);background:rgba(184,115,51,.15);}
.scm-tbtn svg{flex-shrink:0;}

/* Sliders */
.scm-slider-row{display:flex;align-items:center;gap:10px;}
.scm-slider-row label{font-size:.7em;color:var(--cu);white-space:nowrap;font-family:'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase;min-width:60px;}
.scm-slider-row span{font-size:.7em;color:var(--tx2);min-width:32px;text-align:right;}
input[type=range].scm-range{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:var(--d4);outline:none;cursor:pointer;border-radius:2px;}
input[type=range].scm-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--cu);border-radius:50%;cursor:pointer;}

/* Couleur texte */
#scm-text-color-wrap{display:flex;align-items:center;gap:8px;}
#scm-text-color-wrap label{font-size:.7em;color:var(--cu);font-family:'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase;}
#scm-text-color{width:34px;height:28px;padding:0;border:1px solid var(--bd);background:none;cursor:pointer;border-radius:var(--r);}

/* Texte */
#scm-text-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
#scm-text-val{flex:1;min-width:120px;background:var(--d3);border:1px solid var(--bd);color:var(--tx);font-family:'Raleway',sans-serif;font-size:.85em;padding:7px 11px;outline:none;border-radius:var(--r);transition:border-color .18s;}
#scm-text-val:focus{border-color:var(--cu);}
#scm-text-val::placeholder{color:var(--tx2);opacity:.5;}

/* Alerte résolution */
#scm-res-alert{display:none;background:rgba(200,80,40,.15);border:1px solid rgba(200,80,40,.4);color:#e07050;font-size:.72em;padding:6px 10px;border-radius:var(--r);}

/* Séparateur */
.scm-sep{height:1px;background:var(--bd);margin:2px 0;}

/* ── MODAL POLICES ── */
#scm-font-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.8);align-items:center;justify-content:center;}
#scm-font-modal.open{display:flex;}
#scm-font-box{background:var(--d2);border:1px solid var(--cu);width:340px;max-height:500px;display:flex;flex-direction:column;}
#scm-font-box h3{font-family:'Cinzel',serif;color:var(--cu);padding:14px 16px;border-bottom:1px solid var(--bd);font-size:.85em;letter-spacing:.1em;}
#scm-font-list{overflow-y:auto;flex:1;}
.scm-font-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);font-size:22px;color:var(--tx);transition:background .15s;}
.scm-font-item:hover{background:rgba(184,115,51,.12);color:var(--cu);}
#scm-font-close{margin:10px;background:var(--d3);border:1px solid var(--bd);color:var(--tx2);padding:8px;cursor:pointer;font-family:'Raleway',sans-serif;font-size:.8em;border-radius:var(--r);transition:all .18s;}
#scm-font-close:hover{border-color:var(--cu);color:var(--cu);}

/* ── BARRE COMMANDE ── */
#scm-order-bar{border-top:1px solid var(--bd);padding:12px 14px;background:linear-gradient(180deg,var(--d2),var(--d3));display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#scm-price-wrap{display:flex;flex-direction:column;align-items:center;font-size:.68em;color:var(--tx2);gap:1px;min-width:60px;}
#scm-price-wrap strong{font-family:'Cinzel',serif;font-size:1.5em;color:var(--cu);font-weight:600;}
#scm-qty-wrap{display:flex;align-items:center;gap:6px;}
#scm-qty-wrap label{font-size:.7em;color:var(--tx2);}
#scm-qty{width:50px;background:var(--d3);border:1px solid var(--bd);color:var(--tx);font-size:.85em;padding:6px 8px;outline:none;border-radius:var(--r);text-align:center;}
#scm-email-wrap{flex:1;min-width:130px;}
#scm-email{width:100%;background:var(--d3);border:1px solid var(--bd);color:var(--tx);font-family:'Raleway',sans-serif;font-size:.78em;padding:8px 10px;outline:none;border-radius:var(--r);transition:border-color .18s;}
#scm-email:focus{border-color:var(--cu);}
#scm-email::placeholder{color:var(--tx2);opacity:.5;}
#scm-btn-order{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--cu),var(--cu3));border:none;color:#fff;font-family:'Cinzel',serif;font-size:.75em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;cursor:pointer;transition:all .2s;border-radius:var(--r);white-space:nowrap;}
#scm-btn-order:hover{background:linear-gradient(135deg,var(--cu2),var(--cu));transform:translateY(-1px);box-shadow:0 4px 16px rgba(184,115,51,.3);}
#scm-btn-order:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* Message instructions */
#scm-message-wrap{width:100%;margin-top:6px;}
#scm-message{width:100%;background:var(--d3);border:1px solid var(--bd);color:var(--tx);font-family:'Raleway',sans-serif;font-size:.78em;padding:8px 10px;outline:none;border-radius:var(--r);resize:vertical;min-height:50px;transition:border-color .18s;}
#scm-message:focus{border-color:var(--cu);}
#scm-message::placeholder{color:var(--tx2);opacity:.5;}

/* ── MODAL CONFIRMATION ── */
#scm-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;}
#scm-modal-box{background:var(--d2);border:1px solid var(--cu);padding:36px 32px;text-align:center;max-width:400px;width:90%;}
#scm-modal-icon{font-size:2.8em;margin-bottom:12px;}
#scm-modal-title{font-family:'Cinzel',serif;color:var(--cu);letter-spacing:.1em;margin-bottom:10px;}
#scm-modal-msg{color:var(--tx2);font-size:.88em;line-height:1.7;margin-bottom:22px;}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  #scm-app{grid-template-columns:1fr;grid-template-rows:400px auto;}
  #scm-right{border-left:none;border-top:1px solid var(--bd);}
  #scm-viewer{min-height:400px;}
  #scm-toolbar{max-height:none;}
}