/* Techno Impression — Personnalisateur */
#ti-cust{--navy:#0f2237;--txt:#4a5868;--lead:#34566f;--teal:#12b3ad;--tealD:#07586a;--mint:#1ff0cf;--mint2:#14e4ec;--line:#e3ecef;--soft:#f4f8f9;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--txt);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:36px;align-items:start;max-width:1320px;margin:0 auto;}
#ti-cust *{box-sizing:border-box;}
#ti-cust [hidden]{display:none!important;}
#ti-cust button{font-family:inherit;cursor:pointer;}
#ti-cust h3{font-family:inherit;color:var(--navy);font-size:15px;font-weight:700;letter-spacing:0;margin:0 0 12px;padding:0;display:flex;align-items:center;gap:10px;}
#ti-cust h3 .num{width:26px;height:26px;border-radius:50%;background:#c6faf0;color:var(--tealD);font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
#ti-cust p{padding:0;margin:0;}
#ti-cust small,#ti-cust .ti-drop span{line-height:1.45;}
#ti-cust a{text-decoration:none;}

/* Scène */
.ti-view{position:sticky;top:110px;}
.ti-stage-wrap{background:linear-gradient(180deg,#f7fafb,#eef4f6);border:1px solid var(--line);border-radius:22px;padding:18px;}
.ti-stage{position:relative;width:100%;aspect-ratio:1/1;user-select:none;-webkit-user-select:none;touch-action:none;}
.ti-layer-base,.ti-layer-over{position:absolute;inset:0;}
.ti-layer-base svg,.ti-layer-over svg{width:100%;height:100%;display:block;}
.ti-layer-over{pointer-events:none;z-index:3;}
.ti-stage.is-photo{background:#fff;border-radius:14px;overflow:visible;}
.ti-stage.is-photo .ti-layer-base img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px;pointer-events:none;}
.ti-zone{position:absolute;z-index:2;overflow:hidden;outline:1.5px dashed rgba(18,179,173,.75);outline-offset:0;background:rgba(31,240,207,.06);}
.ti-zone.is-dark{outline-color:rgba(31,240,207,.9);}
.has-img .ti-zone{background:transparent;}
.ti-design{position:absolute;transform-origin:50% 50%;pointer-events:none;}
.ti-design img{width:100%;height:100%;display:block;}
.ti-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.35;color:var(--tealD);font-weight:600;padding:6px;}
.ti-zone.is-dark .ti-empty{color:#bff9ef;}
.ti-empty svg{width:28px;height:28px;margin-bottom:4px;opacity:.85;}
.ti-frame{position:absolute;z-index:4;border:1.5px solid var(--teal);cursor:move;transform-origin:50% 50%;box-shadow:0 0 0 1px rgba(255,255,255,.7);outline:none;}
.ti-frame:focus-visible{box-shadow:0 0 0 3px rgba(31,240,207,.45);}
.ti-frame.is-drag{border-style:dashed;}
.ti-h{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--teal);box-shadow:0 2px 6px rgba(15,34,55,.25);}
.ti-h[data-h="nw"]{left:-9px;top:-9px;cursor:nwse-resize;}
.ti-h[data-h="ne"]{right:-9px;top:-9px;cursor:nesw-resize;}
.ti-h[data-h="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize;}
.ti-h[data-h="se"]{right:-9px;bottom:-9px;cursor:nwse-resize;}
.ti-h[data-h="rot"]{left:50%;top:-38px;margin-left:-9px;cursor:grab;background:var(--mint);}
.ti-h[data-h="rot"]:after{content:"";position:absolute;left:50%;top:14px;width:1.5px;height:16px;background:var(--teal);}
.ti-zone-label{text-align:center;font-size:12px;letter-spacing:.08em;color:#6b7885;margin-top:10px;}
.ti-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.ti-tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--navy);transition:all .2s;}
.ti-tool svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ti-tool:hover:not(:disabled){border-color:var(--mint);background:#effdfa;}
.ti-tool:disabled{opacity:.4;cursor:not-allowed;}
.ti-tool.is-danger:hover:not(:disabled){border-color:#f3b4b4;background:#fff5f5;color:#b42318;}
.ti-hint{text-align:center;font-size:12.5px;color:#6b7885;margin-top:10px!important;}

/* Panneau */
.ti-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 26px 28px;box-shadow:0 14px 40px rgba(15,34,55,.06);}
.ti-step{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line);}
.ti-step:last-of-type{border-bottom:0;margin-bottom:6px;padding-bottom:6px;}
.ti-products{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ti-prod{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--soft);border:1.5px solid transparent;border-radius:14px;padding:14px 8px 12px;transition:all .2s;}
.ti-prod svg{width:48px;height:48px;fill:#cfdde2;transition:fill .2s;}
.ti-prod .n{font-weight:700;color:var(--navy);font-size:14px;}
.ti-prod .p{font-size:12px;color:#6b7885;}
.ti-prod:hover{border-color:#bdf4ea;}
.ti-prod.is-on{background:#effdfa;border-color:var(--mint);}
.ti-prod.is-on svg{fill:var(--mint);}
.ti-prod img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff;}
.ti-prod .ti-prod-ph{width:64px;height:64px;border-radius:10px;background:#e3ecef;}
.ti-prod .n{text-align:center;line-height:1.25;}
.ti-prod[hidden]{display:none!important;}
.ti-cats{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 0 4px;scrollbar-width:thin;}
.ti-cat{flex:none;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;transition:all .2s;}
.ti-cat:hover{border-color:#bdf4ea;}
.ti-cat.is-on{border-color:var(--mint);background:#effdfa;color:var(--tealD);}
.has-cats .ti-products{max-height:372px;overflow-y:auto;padding:2px 4px 2px 2px;scrollbar-width:thin;}
.has-cats .ti-prod .n{font-size:13px;}
.ti-colors{display:flex;flex-wrap:wrap;gap:10px;}
.ti-sw{width:36px;height:36px;border-radius:50%;background:var(--c);border:1px solid rgba(15,34,55,.18);box-shadow:inset 0 0 0 3px #fff;padding:0;transition:transform .15s;}
.ti-sw:hover{transform:scale(1.08);}
.ti-sw.is-on{outline:2px solid var(--teal);outline-offset:2px;}
.ti-color-name{font-weight:500;color:#6b7885;font-size:13px;margin-left:auto;}
.ti-sizes{display:flex;flex-wrap:wrap;gap:8px;}
.ti-pill{min-width:48px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-size:14px;font-weight:700;color:var(--navy);transition:all .2s;}
.ti-pill:hover{border-color:#bdf4ea;}
.ti-pill.is-on{border-color:var(--mint);background:#effdfa;color:var(--tealD);}
.ti-drop{display:flex;align-items:center;gap:14px;border:1.5px dashed #b9d9dc;border-radius:14px;padding:16px;background:var(--soft);cursor:pointer;transition:all .2s;}
.ti-drop:hover,.ti-drop.is-over{border-color:var(--mint);background:#effdfa;}
.ti-drop svg{width:34px;height:34px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ti-drop strong{display:block;color:var(--navy);font-size:14px;}
.ti-drop small{display:block;font-size:12px;color:#6b7885;margin-top:2px;}
.ti-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.ti-file-name{font-size:12.5px;color:var(--tealD);font-weight:600;margin-top:8px;word-break:break-all;}
.ti-quality{margin-top:10px;font-size:12.5px;line-height:1.45;border-radius:10px;padding:9px 12px;}
.ti-quality span{opacity:.7;}
.ti-quality.is-good{background:#e8fbf5;color:#0b6b57;}
.ti-quality.is-ok{background:#fff8e6;color:#8a5a00;}
.ti-quality.is-bad{background:#fdecec;color:#a61b1b;}
.ti-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;}
.ti-qty button{width:42px;height:42px;border:0;background:#fff;font-size:20px;color:var(--navy);}
.ti-qty button:hover{background:#effdfa;}
.ti-qty input{width:48px;height:42px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-size:16px;font-weight:700;color:var(--navy);-moz-appearance:textfield;padding:0;}
.ti-qty input::-webkit-outer-spin-button,.ti-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ti-qty-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ti-qty-note{font-size:12.5px;color:#6b7885;}
.ti-qty-note a{color:var(--teal);font-weight:600;}
.ti-rights{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--txt);margin-top:4px;cursor:pointer;}
.ti-rights input{margin-top:3px;width:17px;height:17px;accent-color:var(--teal);flex:none;}
.ti-sum{background:var(--soft);border-radius:14px;padding:16px 18px;margin-top:18px;}
.ti-sum-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;}
.ti-sum-row.tot{font-size:18px;font-weight:800;color:var(--navy);margin:8px 0 0;padding-top:10px;border-top:1px solid var(--line);}
.ti-sum small{display:block;font-size:12px;color:#6b7885;margin-top:6px;}
.ti-add{width:100%;margin-top:16px;border:0;border-radius:999px;padding:16px 24px;font-size:16px;font-weight:700;color:var(--tealD);background:linear-gradient(90deg,var(--mint),var(--mint2));box-shadow:0 10px 24px rgba(20,228,210,.28);transition:all .25s;display:flex;align-items:center;justify-content:center;gap:10px;}
.ti-add:after{content:"\2192";transition:transform .2s;}
.ti-add:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,228,210,.4);}
.ti-add:hover:not(:disabled):after{transform:translateX(4px);}
.ti-add:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.ti-add.is-busy{opacity:.7;}
.ti-add.is-busy:after{content:"";width:16px;height:16px;border:2px solid var(--tealD);border-right-color:transparent;border-radius:50%;animation:tiSpin .8s linear infinite;}
@keyframes tiSpin{to{transform:rotate(360deg);}}
.ti-need{font-size:12.5px;color:#6b7885;text-align:center;margin-top:10px!important;min-height:18px;}
.ti-msg{font-size:13.5px;text-align:center;color:var(--tealD);font-weight:600;margin-top:8px!important;min-height:20px;}
.ti-msg.is-err{color:#b42318;}
#ti-cust:not(.is-ready){opacity:.4;pointer-events:none;}

@media (max-width:980px){
  #ti-cust{grid-template-columns:1fr;gap:22px;}
  .ti-view{position:static;}
  .ti-panel{padding:22px 18px;}
}
@media (max-width:420px){
  .ti-products{gap:6px;}
  .ti-prod{padding:10px 4px;}
  .ti-prod svg{width:36px;height:36px;}
  .ti-prod img,.ti-prod .ti-prod-ph{width:48px;height:48px;}
  .ti-products{grid-template-columns:repeat(2,1fr);}
  .ti-tool{padding:7px 11px;font-size:12px;}
}

/* Panier / commande */
.ti-cart-meta a{color:#12b3ad;font-weight:600;}
.ti-admin-design{display:flex;gap:14px;align-items:flex-start;margin:10px 0;padding:10px;border:1px solid #e3ecef;border-radius:8px;background:#f8fbfc;}
.ti-admin-design img{width:110px;height:110px;object-fit:contain;background:#fff;border:1px solid #e3ecef;border-radius:6px;}
.ti-admin-design ul{margin:0;}
.ti-panel{counter-reset:tistep;}
.ti-step:not([hidden]){counter-increment:tistep;}
.ti-step h3 .num:before{content:counter(tistep);}
@media (max-width:600px){ .ti-h{width:13px;height:13px;} .ti-h[data-h="nw"],.ti-h[data-h="sw"]{left:-7px;} .ti-h[data-h="ne"],.ti-h[data-h="se"]{right:-7px;} .ti-h[data-h="nw"],.ti-h[data-h="ne"]{top:-7px;} .ti-h[data-h="sw"],.ti-h[data-h="se"]{bottom:-7px;} .ti-h[data-h="rot"]{top:-30px;margin-left:-7px;} .ti-h[data-h="rot"]:after{top:11px;height:12px;} }