/* ============================================================
   STUDIO DE PERSONNALISATION — styles (page /personnaliser/)
   Design system « Atelier / établi » du thème singularis-child.
   Préfixe .sgs- pour ne jamais entrer en collision avec Astra.
   ============================================================ */
:root{
  --kraft:#EAE3D2; --kraft-2:#E1D8C2; --paper:#F4EFE3;
  --ink:#1C1A17; --ink-soft:#3D3833; --stone:#6E665A;
  --rust:#B5572B; --rust-deep:#8F4220; --line:#C9BFA8;
  --sgs-display:"Bricolage Grotesque","Arial Narrow",sans-serif;
  --sgs-sans:"Hanken Grotesk",-apple-system,sans-serif;
  --sgs-mono:"IBM Plex Mono",ui-monospace,monospace;
  --sgs-ease:cubic-bezier(.22,.61,.36,1);
  --sgs-cut:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
}
html,body.sgs-body{height:100%;margin:0;padding:0}
body.sgs-body{
  background:var(--kraft);color:var(--ink-soft);font-family:var(--sgs-sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
}
.sgs-body ::selection{background:var(--rust);color:var(--paper)}
/* l'attribut hidden doit TOUJOURS gagner sur nos display:flex/grid */
.sgs-body [hidden]{display:none!important}
.sgs-body button{font-family:inherit}
.sgs-eyebrow{font-family:var(--sgs-mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--rust-deep)}
.sgs-eyebrow::before{content:"// ";color:var(--rust)}
.sgs-cutline{height:2px;background:var(--sgs-cut);margin:1rem 0 1.4rem}

/* ============================================================
   ENTRÉE GUIDÉE
   ============================================================ */
.sgs-entry{position:fixed;inset:0;overflow-y:auto;background:var(--kraft);z-index:50;padding:clamp(1rem,4vw,3rem)}
.sgs-entry__box{max-width:980px;margin:0 auto;position:relative}
.sgs-entry__back{position:absolute;right:0;top:.2rem;font-family:var(--sgs-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:2px solid var(--ink);background:var(--paper);padding:.5em .9em;box-shadow:3px 3px 0 rgba(28,26,23,.15)}
.sgs-entry__back:hover{background:var(--ink);color:var(--kraft)}
.sgs-entry__title{font-family:var(--sgs-display);color:var(--ink);text-transform:uppercase;letter-spacing:-.02em;line-height:.98;font-size:clamp(1.8rem,5vw,3rem);margin:.4rem 0 0}
.sgs-chosen{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;border:2px solid var(--ink);background:var(--paper);padding:.7rem 1rem;margin:0 0 .4rem;box-shadow:4px 4px 0 rgba(28,26,23,.12)}
.sgs-chosen span{font-family:var(--sgs-mono);font-size:.78rem;letter-spacing:.04em;color:var(--stone);text-transform:uppercase}
.sgs-chosen b{color:var(--ink);font-weight:600}
.sgs-chosen__change{font-family:var(--sgs-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:transparent;border:2px solid var(--ink);padding:.4em .8em;cursor:pointer;transition:all .15s var(--sgs-ease)}
.sgs-chosen__change:hover{background:var(--ink);color:var(--kraft)}
.sgs-step{margin:1.6rem 0}
.sgs-step__label{display:block;font-family:var(--sgs-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-deep);margin-bottom:.7rem}
.sgs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:1rem}
.sgs-card{display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--paper);padding:0;cursor:pointer;text-align:left;box-shadow:4px 4px 0 rgba(28,26,23,.12);transition:transform .15s var(--sgs-ease),box-shadow .15s var(--sgs-ease)}
.sgs-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rust)}
.sgs-card.on{box-shadow:4px 4px 0 var(--rust);border-color:var(--rust-deep)}
.sgs-card img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--kraft-2);border-bottom:2px solid var(--ink);display:block}
.sgs-card__body{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.sgs-card .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--sgs-display);text-transform:uppercase;font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.08}
.sgs-card .pr{display:inline-block;margin-top:auto;white-space:nowrap;font-family:var(--sgs-mono);font-weight:500;font-size:.84rem;color:var(--paper);background:var(--rust-deep);padding:.18em .5em;align-self:flex-start}
.sgs-cards--tpl .sgs-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.sgs-card .tpl-pre{width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.sgs-card .tpl-pre svg{width:100%;height:100%}
.sgs-chips{display:flex;flex-wrap:wrap;gap:.7rem}
.sgs-chip{display:flex;align-items:center;gap:.6rem;border:2px solid var(--line);background:var(--paper);padding:.5rem .8rem .5rem .5rem;cursor:pointer;transition:all .15s var(--sgs-ease);font-family:var(--sgs-sans)}
.sgs-chip:hover{border-color:var(--ink)}
.sgs-chip.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--rust)}
.sgs-chip .sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);flex-shrink:0}
.sgs-chip .nm{font-weight:600;color:var(--ink);font-size:.88rem}

/* ============================================================
   STUDIO
   ============================================================ */
.sgs-app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--paper)}

/* ---------- header ---------- */
.sgs-head{display:flex;align-items:center;gap:.9rem;border-bottom:2px solid var(--ink);background:var(--kraft);padding:.5rem .8rem;min-height:54px;flex-shrink:0}
.sgs-brand{display:flex;align-items:center;gap:.6rem;min-width:0}
.sgs-brand__txt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.sgs-brand__txt .t{font-family:var(--sgs-display);font-weight:800;text-transform:uppercase;font-size:.95rem;color:var(--ink)}
.sgs-brand__txt .p{font-family:var(--sgs-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw}
.sgs-head__mid{display:flex;align-items:center;gap:.4rem;margin:0 auto}
.sgs-head__gap{width:.5rem}
.sgs-iconbtn{font-family:var(--sgs-mono);font-size:.8rem;border:2px solid var(--ink);background:var(--paper);color:var(--ink);min-width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s var(--sgs-ease);padding:0 .45em}
.sgs-iconbtn:hover{background:var(--ink);color:var(--kraft)}
.sgs-iconbtn[disabled]{opacity:.35;pointer-events:none}
.sgs-zoomval{font-family:var(--sgs-mono);font-size:.7rem;color:var(--stone);padding:0 .25rem;min-width:3.4em;text-align:center}
.sgs-price{margin-left:auto;text-align:right;line-height:1.12}
.sgs-price .total{font-family:var(--sgs-display);font-weight:800;font-size:1.3rem;color:var(--ink)}
.sgs-price .det{font-family:var(--sgs-mono);font-size:.6rem;letter-spacing:.04em;color:var(--stone);text-transform:uppercase}
.sgs-cta{font-family:var(--sgs-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--kraft);border:2px solid var(--ink);padding:.75em 1.3em;cursor:pointer;box-shadow:4px 4px 0 rgba(28,26,23,.18);transition:all .15s var(--sgs-ease);white-space:nowrap}
.sgs-cta:hover{background:var(--rust);border-color:var(--rust);color:var(--paper);transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(28,26,23,.18)}
.sgs-cta[disabled]{opacity:.45;pointer-events:none}
.sgs-cta__short{display:none}

/* ---------- corps ---------- */
.sgs-bodyrow{display:flex;flex:1;min-height:0}
.sgs-rail{width:74px;border-right:2px solid var(--ink);background:var(--kraft);display:flex;flex-direction:column;padding-top:.35rem;flex-shrink:0}
.sgs-rtab{appearance:none;border:0;background:transparent;font-family:var(--sgs-mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding:.65rem .2rem .55rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.3rem;border-left:3px solid transparent;transition:all .15s var(--sgs-ease)}
.sgs-rtab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.sgs-rtab:hover{color:var(--rust-deep)}
.sgs-rtab.on{background:var(--paper);border-left-color:var(--rust);color:var(--ink);font-weight:600;box-shadow:inset 0 2px 0 var(--ink),inset 0 -2px 0 var(--ink)}
.sgs-panel{width:262px;border-right:2px solid var(--ink);background:var(--paper);overflow-y:auto;flex-shrink:0}
.sgs-panel__inner{padding:1rem .9rem 1.3rem}
.sgs-panel h3{font-family:var(--sgs-display);text-transform:uppercase;color:var(--ink);font-size:.92rem;margin:0 0 .1rem}
.sgs-panel .sub{font-family:var(--sgs-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:.85rem}
.sgs-note{font-size:.74rem;color:var(--stone);border-top:1px dashed var(--line);padding-top:.65rem;margin-top:.7rem;font-style:italic}
.sgs-addbtn{display:block;width:100%;font-family:var(--sgs-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--kraft);border:2px solid var(--ink);padding:.7em 1em;cursor:pointer;margin-bottom:.6rem;transition:all .15s var(--sgs-ease)}
.sgs-addbtn:hover{background:var(--rust);border-color:var(--rust)}
.sgs-addbtn--ghost{background:transparent;color:var(--ink)}
.sgs-addbtn--ghost:hover{background:var(--ink);color:var(--kraft)}

/* matières */
.sgs-mat{display:flex;align-items:center;gap:.65rem;width:100%;border:2px solid var(--line);background:var(--paper);padding:.45rem .55rem;margin-bottom:.5rem;cursor:pointer;text-align:left;transition:all .15s var(--sgs-ease)}
.sgs-mat:hover{border-color:var(--ink)}
.sgs-mat.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--rust)}
.sgs-mat .sw{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);flex-shrink:0}
.sgs-mat .nm{font-weight:600;color:var(--ink);font-size:.85rem;line-height:1.1}
.sgs-mat .gv{font-family:var(--sgs-mono);font-size:.58rem;letter-spacing:.05em;color:var(--stone);text-transform:uppercase}

/* modèles */
.sgs-tpl{display:flex;gap:.6rem;align-items:center;width:100%;border:2px solid var(--line);background:var(--kraft);margin-bottom:.55rem;padding:.5rem;cursor:pointer;text-align:left;transition:all .15s var(--sgs-ease)}
.sgs-tpl:hover{border-color:var(--ink);box-shadow:3px 3px 0 rgba(28,26,23,.12)}
.sgs-tpl .pre{width:48px;height:48px;flex-shrink:0}
.sgs-tpl .pre svg{width:100%;height:100%}
.sgs-tpl .nm{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.15}
.sgs-tpl .d{font-family:var(--sgs-mono);font-size:.56rem;color:var(--stone);text-transform:uppercase;letter-spacing:.05em}

/* motifs */
.sgs-motifs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.sgs-motif{aspect-ratio:1;border:2px solid var(--line);background:var(--kraft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s var(--sgs-ease);padding:6px}
.sgs-motif svg{width:100%;height:100%;fill:var(--ink);stroke:var(--ink)}
.sgs-motif:hover{border-color:var(--rust);background:var(--paper);transform:translate(-1px,-1px);box-shadow:2px 2px 0 rgba(28,26,23,.15)}

/* photo */
.sgs-nocolor{border:2px solid var(--rust);background:var(--kraft);padding:.55rem .65rem;font-size:.74rem;color:var(--ink-soft);margin-bottom:.7rem}
.sgs-nocolor b{font-family:var(--sgs-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rust-deep);display:block;margin-bottom:.15rem}
.sgs-drop{display:block;border:2px dashed var(--stone);background:var(--kraft);padding:1rem .8rem;text-align:center;color:var(--stone);font-size:.78rem;margin-bottom:.7rem;cursor:pointer;transition:all .15s var(--sgs-ease)}
.sgs-drop:hover{border-color:var(--rust);color:var(--rust-deep)}
.sgs-drop b{display:block;font-family:var(--sgs-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}
.sgs-ba{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.6rem}
.sgs-ba .cell{border:2px solid var(--line);aspect-ratio:1;position:relative;overflow:hidden;background:var(--kraft-2)}
.sgs-ba .cell canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sgs-ba .cell span{position:absolute;left:0;bottom:0;right:0;font-family:var(--sgs-mono);font-size:.52rem;letter-spacing:.07em;text-transform:uppercase;background:rgba(28,26,23,.82);color:var(--kraft);padding:.2em .4em}
.sgs-ctr{margin-bottom:.6rem}
.sgs-ctr label{font-family:var(--sgs-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rust-deep);display:block;margin-bottom:.2rem}
.sgs-ctr input[type=range]{width:100%;accent-color:var(--rust)}

/* options cadeau */
.sgs-gift{display:flex;gap:.6rem;align-items:flex-start;border:2px solid var(--line);background:var(--paper);padding:.6rem .7rem;margin-bottom:.6rem;cursor:pointer;transition:all .15s var(--sgs-ease)}
.sgs-gift:hover{border-color:var(--ink)}
.sgs-gift.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--rust)}
.sgs-gift input{margin-top:.25rem;accent-color:var(--rust);flex:0 0 auto;width:16px;height:16px}
.sgs-gift__txt{min-width:0}
.sgs-gift__nm{display:block;font-weight:600;color:var(--ink);font-size:.86rem;line-height:1.25}
.sgs-gift__nm b{white-space:nowrap;color:var(--rust-deep);font-family:var(--sgs-mono);font-weight:600}
.sgs-gift__desc{display:block;font-size:.74rem;color:var(--stone);line-height:1.45;margin-top:.2rem}

/* ---------- scène ---------- */
.sgs-stagecol{flex:1;display:flex;flex-direction:column;background:var(--kraft-2);position:relative;min-width:0}
.sgs-stagecol::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(28,26,23,.07) 1px,transparent 1.4px) 0 0/22px 22px;pointer-events:none}
.sgs-faces{display:flex;gap:.5rem;justify-content:center;padding:.55rem 0 .1rem;position:relative;z-index:2;flex-shrink:0}
.sgs-facetab{font-family:var(--sgs-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:.45em .9em;cursor:pointer;transition:all .15s var(--sgs-ease)}
.sgs-facetab.on{background:var(--ink);color:var(--kraft);box-shadow:3px 3px 0 var(--rust)}
.sgs-stagewrap{flex:1;position:relative;min-height:0;z-index:1}
#sgs-stage{position:absolute;inset:0}
#sgs-stage .konvajs-content{margin:0 auto}

/* toolbar contextuelle */
.sgs-ctxbar{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);display:flex;align-items:center;gap:.45rem;background:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(28,26,23,.25);padding:.45rem .6rem;z-index:6;flex-wrap:wrap;justify-content:center;max-width:94%}
.sgs-ctxbar .lbl{font-family:var(--sgs-mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:#A9A18E}
.sgs-ctxbar select,.sgs-ctxbar input[type=text]{font-family:var(--sgs-sans);font-size:.8rem;border:1.5px solid #4a463f;background:var(--paper);color:var(--ink);padding:.3em .4em;border-radius:0}
.sgs-ctxbar select{max-width:140px}
.sgs-ctxbar input[type=text]{width:120px}
.sgs-ctxbar .grp{display:flex;align-items:center;gap:.28rem}
.sgs-cbtn{font-family:var(--sgs-mono);font-size:.78rem;min-width:27px;height:27px;border:1.5px solid #4a463f;background:transparent;color:var(--kraft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s var(--sgs-ease);padding:0 .3em}
.sgs-cbtn:hover{background:var(--rust);border-color:var(--rust)}
.sgs-ctxbar input[type=range]{width:80px;accent-color:var(--rust)}
.sgs-ctxbar .val{font-family:var(--sgs-mono);font-size:.64rem;color:var(--kraft);min-width:2.6em;text-align:right}
.sgs-ctxbar .sep{width:1px;align-self:stretch;background:#4a463f}
.sgs-ctxbar .off{display:none}

/* barre d'état */
.sgs-status{border-top:2px solid var(--ink);background:var(--kraft);font-family:var(--sgs-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--stone);display:flex;gap:1.2rem;padding:.38rem .8rem;position:relative;z-index:2;flex-shrink:0;flex-wrap:wrap}
.sgs-status .ok{color:var(--rust-deep)}
.sgs-status .ko{color:#9b1f1f;font-weight:600}
.sgs-status .right{margin-left:auto}

/* voile d'envoi */
.sgs-busy{position:fixed;inset:0;background:rgba(28,26,23,.55);z-index:90;display:flex;align-items:center;justify-content:center}
.sgs-busy__box{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.3);padding:1.1rem 1.5rem;font-family:var(--sgs-mono);font-size:.78rem;letter-spacing:.05em;display:flex;align-items:center;gap:.8rem}
.sgs-busy__spin{width:16px;height:16px;border:3px solid var(--line);border-top-color:var(--rust);border-radius:50%;animation:sgsspin .8s linear infinite}
@keyframes sgsspin{to{transform:rotate(360deg)}}

/* ============================================================
   MOBILE (≤ 860 px) : rail en bas, panneau en bottom sheet
   ============================================================ */
@media (max-width:860px){
  .sgs-head{gap:.5rem;padding:.45rem .55rem;flex-wrap:nowrap}
  .sgs-brand__txt .p{display:none}
  .sgs-head__mid{gap:.25rem}
  #sgs-zoom-in,#sgs-zoom-out,.sgs-zoomval{display:none}
  .sgs-price .det{display:none}
  .sgs-price .total{font-size:1.05rem}
  .sgs-cta{padding:.7em .8em;font-size:.64rem}

  .sgs-bodyrow{flex-direction:column}
  .sgs-stagecol{order:1}
  .sgs-panel{order:2;width:100%;border-right:0;border-top:2px solid var(--ink);max-height:38vh;overflow-y:auto}
  .sgs-rail{order:3;width:100%;flex-direction:row;border-right:0;border-top:2px solid var(--ink);padding:0;justify-content:space-around}
  .sgs-rtab{flex:1;border-left:0;border-top:3px solid transparent;padding:.5rem .2rem}
  .sgs-rtab.on{border-left:0;border-top-color:var(--rust);box-shadow:none}
  .sgs-ctxbar{bottom:8px;gap:.3rem;padding:.35rem .45rem}
  .sgs-ctxbar input[type=text]{width:84px}
  .sgs-ctxbar select{max-width:104px}
  .sgs-ctxbar input[type=range]{width:60px}
  .sgs-cbtn{min-width:36px;height:36px}  /* cibles tactiles ≥ 36px (WCAG 2.5.5) */
  .sgs-status{display:none}

  /* header : on libère de la place → libellé court + « Studio » masqué */
  .sgs-cta__full{display:none}
  .sgs-cta__short{display:inline}
  .sgs-brand__txt .t{display:none}

  /* barre d'onglets du bas : les 6 onglets doivent tenir (min-width:0 +
     police réduite) — sinon « Cadeau » sortait de l'écran */
  .sgs-rtab{min-width:0;font-size:.5rem;letter-spacing:.03em;padding:.5rem .12rem;gap:.22rem}
  .sgs-rtab svg{width:18px;height:18px}

  /* écran de choix de l'objet : titre/eyebrow qui ne débordent plus */
  .sgs-entry__back{position:static;display:inline-block;margin-bottom:.7rem}
  .sgs-entry__title{font-size:1.7rem;overflow-wrap:anywhere}
  .sgs-eyebrow{font-size:.6rem;letter-spacing:.08em}
}