/* figuredarts 23/10 : kit personnalisé (fiche 482), aperçu de la photo en peinture par numéro */
#fa-p482{--p4-accent:#a8360f;--p4-accent2:#8f3100;--p4-line:#ead8c6;--p4-bg:#fdfaf6;--p4-ink:#1a1218;--p4-muted:#6d6157;--p4-ok:#2f6b3a;
  background:var(--p4-bg);border:1px solid var(--p4-line);border-radius:14px;margin:0 0 18px;color:var(--p4-ink);font-size:14px;line-height:1.5}
#fa-p482 *{box-sizing:border-box}
#fa-p482 [hidden]{display:none!important}
#fa-p482 .p4-head{padding:14px 16px 6px}
#fa-p482 .p4-head h2{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;font-weight:700;color:var(--p4-accent);margin:0 0 4px;text-wrap:balance}
#fa-p482 .p4-head p{margin:0;color:var(--p4-muted);font-size:13.5px}
#fa-p482 .p4-body{padding:10px 16px 16px}
#fa-p482 .p4-drop{border:2px dashed var(--p4-line);border-radius:12px;padding:22px 14px;text-align:center;background:#fff}
#fa-p482 .p4-hint{font-size:12.5px;color:var(--p4-muted);margin:8px 0 0}
#fa-p482 .p4-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;border:1px solid var(--p4-line);background:#fff;color:var(--p4-ink);font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:8px;text-align:center}
#fa-p482 .p4-btn.p4-primary{background:var(--p4-accent);border-color:var(--p4-accent);color:#fff}
#fa-p482 .p4-btn.p4-primary:hover{background:var(--p4-accent2)}
#fa-p482 .p4-btn.p4-dark{background:var(--p4-ink);border-color:var(--p4-ink);color:#fff;width:100%}
#fa-p482 .p4-btn[disabled]{opacity:.45;cursor:wait}
#fa-p482 .p4-btn:focus-visible,#fa-p482 .p4-seg button:focus-visible{outline:3px solid var(--p4-ink);outline-offset:2px}
#fa-p482 .p4-seg{display:flex;gap:4px;background:#f3ebe1;border-radius:10px;padding:4px;margin-bottom:10px}
#fa-p482 .p4-seg button{all:unset;box-sizing:border-box;cursor:pointer;flex:1 1 0;text-align:center;padding:7px 6px;border-radius:7px;font-weight:700;font-size:13px;color:var(--p4-muted)}
#fa-p482 .p4-seg button[aria-selected="true"]{background:#fff;color:var(--p4-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
#fa-p482 .p4-view{position:relative;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--p4-line)}
#fa-p482 .p4-view canvas{display:block;width:100%;height:auto;cursor:zoom-in}
/* 24/10 curseur photo / toile numérotée */
#fa-p482 .p4-view.is-cmp{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
#fa-p482 .p4-view.is-cmp canvas{cursor:ew-resize}
#fa-p482 .p4-cmp{position:absolute;inset:0}
#fa-p482 .p4-top{position:absolute;inset:0;clip-path:inset(0 50% 0 0);pointer-events:none}
#fa-p482 .p4-top canvas{width:100%;height:100%}
#fa-p482 .p4-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
#fa-p482 .p4-knob{all:unset;position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.25);display:grid;place-items:center;cursor:ew-resize}
#fa-p482 .p4-knob svg{width:26px;height:26px;fill:var(--p4-accent)}
#fa-p482 .p4-knob:focus-visible{outline:3px solid var(--p4-ink);outline-offset:2px}
#fa-p482 .p4-tag{position:absolute;top:10px;padding:4px 10px;border-radius:20px;background:rgba(26,18,24,.78);color:#fff;font-size:12px;font-weight:700;pointer-events:none}
#fa-p482 .p4-tag.l{left:10px}#fa-p482 .p4-tag.r{right:10px}
#fa-p482 .p4-lead{font-size:12.5px;color:var(--p4-muted);margin:8px 0 0;text-align:center}
@media(max-width:480px){#fa-p482 .p4-tag{top:8px;padding:3px 7px;font-size:10.5px}#fa-p482 .p4-tag.l{left:6px}#fa-p482 .p4-tag.r{right:6px}#fa-p482 .p4-knob{width:40px;height:40px;margin:-20px 0 0 -20px}}
#fa-p482 .p4-wait{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;background:rgba(253,250,246,.7);font-weight:700}
#fa-p482 .p4-wait span{width:34px;height:34px;border-radius:50%;border:4px solid var(--p4-line);border-top-color:var(--p4-accent);animation:p4spin 1s linear infinite}
@keyframes p4spin{to{transform:rotate(360deg)}}
#fa-p482 .p4-meta{font-size:12.5px;color:var(--p4-muted);margin:8px 0 10px}
#fa-p482 .p4-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#fa-p482 .p4-row .p4-btn{flex:1 1 auto}
#fa-p482 .p4-msg{font-size:13px;margin-top:8px}
#fa-p482 .p4-msg.ok{color:var(--p4-ok);font-weight:700}
#fa-p482 .p4-msg.err{color:#b3173f;font-weight:700}
#fa-p482 .p4-note{font-size:12px;color:var(--p4-muted);margin:10px 0 0}
.p4-big{position:fixed;inset:0;z-index:100001;background:rgba(20,14,12,.88);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
.p4-big img{max-width:100%;max-height:100%;border-radius:8px;background:#fff}
/* le formulaire d'origine reste en place (c'est lui qui enregistre), mais caché */
body.fa-p482-on .product-customization .product-customization-wrapper{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
@media (prefers-reduced-motion:reduce){#fa-p482 .p4-wait span{animation:none}}