/* ---- Polices embarquées (Google Fonts, licence OFL, subset latin) ---- */
@font-face{font-family:'Anton';src:url('../fonts/Anton.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('../fonts/BebasNeue.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Archivo Black';src:url('../fonts/ArchivoBlack.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Oswald';src:url('../fonts/Oswald.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bangers';src:url('../fonts/Bangers.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Pacifico';src:url('../fonts/Pacifico.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lobster';src:url('../fonts/Lobster.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Permanent Marker';src:url('../fonts/PermanentMarker.woff2') format('woff2');font-display:swap}

/* ============================================================
   TSL 2.0 — Studio mobile-first (port du prototype validé)
   Overlay plein écran au-dessus du thème. Tout est scopé sous
   #tsl2-studio ; z-index fixés à la conception (CDC §6.3) :
   overlay 999990 < scrim 999994 < sheet 999995 < toast 999999
   ============================================================ */
#tsl2-studio{
  /* Identité TSL v1 : fond chaud, ambre, mono pour les libellés */
  --tsl2-bg:#f3f1ee;
  --tsl2-surface:#ffffff;
  --tsl2-ink:#17181c;
  --tsl2-ink-dim:#8b8a90;
  --tsl2-line:#e7e4df;
  --tsl2-accent:#e89005;
  --tsl2-accent-soft:#fdf3dd;
  --tsl2-cta:#ffb020;
  --tsl2-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --tsl2-radius:18px;
  --tsl2-actionbar-h:calc(64px + env(safe-area-inset-bottom));

  position:fixed;inset:0;z-index:999990;
  display:none;flex-direction:column;overflow:hidden;
  background:var(--tsl2-bg);color:var(--tsl2-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.4;
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
#tsl2-studio.tsl2-on{display:flex}
#tsl2-studio *{box-sizing:border-box;margin:0;padding:0}
#tsl2-studio button{font:inherit;cursor:pointer}

/* ---- Barre haute ---- */
#tsl2-topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
}
#tsl2-quit{
  border:0;background:#e9e6e0;width:34px;height:34px;border-radius:11px;
  font-size:16px;color:var(--tsl2-ink);
}
#tsl2-topbar .histbtn{
  border:0;background:#e9e6e0;width:34px;height:34px;border-radius:11px;
  font-size:16px;color:var(--tsl2-ink);margin-right:2px;
}
#tsl2-topbar .histbtn:disabled{opacity:.35}
#tsl2-topbar .brand{font-weight:800;font-size:15px;letter-spacing:.3px}
#tsl2-topbar .brand span{color:var(--tsl2-accent)}
#tsl2-topbar .spacer{flex:1}
/* Chips d'état façon v1 : • 2 calques · • T-Shirt · • 19,90 € */
#tsl2-status{display:flex;gap:6px;align-items:center;overflow:hidden}
#tsl2-status .stat{
  font-family:var(--tsl2-mono);font-size:11px;font-weight:600;white-space:nowrap;
  background:var(--tsl2-surface);border:1px solid var(--tsl2-line);border-radius:999px;
  padding:5px 10px;color:var(--tsl2-ink);flex:0 0 auto;
}
#tsl2-status .stat::before{content:"●";font-size:8px;margin-right:5px;vertical-align:1px}
#tsl2-status .stat.g::before{color:#2fbf71}
#tsl2-status .stat.o::before{color:var(--tsl2-accent)}
/* Petit écran : brand compact, seul le compteur de calques reste,
   contrôles resserrés pour que Recto/Verso tienne. */
@media (max-width:560px){
  #tsl2-status .stat.o{display:none}
  #tsl2-status .stat{font-size:10px;padding:4px 8px}
  #tsl2-topbar{gap:6px;padding-left:10px;padding-right:10px}
  #tsl2-topbar .brand{display:none}
  #tsl2-topbar .histbtn{width:30px;height:30px;font-size:14px}
  #tsl2-color-dot{width:26px;height:26px}
  #tsl2-view-toggle button{padding:5px 10px;font-size:11.5px}
}
#tsl2-view-toggle{display:flex;background:#e9e6e0;border-radius:999px;padding:3px}
#tsl2-view-toggle button{
  border:0;background:transparent;font-size:12.5px;font-weight:600;
  padding:6px 14px;border-radius:999px;color:var(--tsl2-ink-dim);
}
#tsl2-view-toggle button.on{background:var(--tsl2-surface);color:var(--tsl2-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ---- Pastille couleurs (vraies couleurs produit) ---- */
#tsl2-colorpick{position:relative}
#tsl2-color-dot{
  width:30px;height:30px;border-radius:50%;border:2.5px solid var(--tsl2-surface);
  box-shadow:0 0 0 1.5px var(--tsl2-line);background:#fff;cursor:pointer;
}
#tsl2-color-pop{
  position:absolute;top:40px;right:-4px;z-index:999997;display:none;
  background:var(--tsl2-surface);border:1px solid var(--tsl2-line);border-radius:14px;
  padding:12px;box-shadow:0 10px 30px rgba(23,24,28,.16);
  grid-template-columns:repeat(6,30px);gap:9px;max-height:240px;overflow-y:auto;
}
#tsl2-color-pop.open{display:grid}
#tsl2-color-pop button{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--tsl2-line);cursor:pointer;
}
#tsl2-color-pop button.on{box-shadow:0 0 0 2.5px var(--tsl2-accent)}
@media (hover:hover){ #tsl2-colorpick:hover #tsl2-color-pop{display:grid} }

/* ---- Panneau calques gauche (desktop) + bouton flottant (mobile) ---- */
#tsl2-sidepanel{display:none}
#tsl2-sidepanel .side-title{
  font-family:var(--tsl2-mono);font-size:10.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--tsl2-ink-dim);margin-bottom:10px;
}
#tsl2-layers-fab{
  position:fixed;right:14px;bottom:calc(var(--tsl2-actionbar-h) + 14px);z-index:30;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--tsl2-line);
  background:var(--tsl2-surface);font-size:17px;color:var(--tsl2-ink);
  box-shadow:0 4px 14px rgba(23,24,28,.14);
}
#tsl2-studio .layerrow .grip{cursor:grab;color:var(--tsl2-ink-dim);font-size:12px;letter-spacing:-2px}
#tsl2-studio .layerrow.dragging{opacity:.4}
#tsl2-studio .layerrow.over{border-color:var(--tsl2-accent);box-shadow:0 0 0 2px var(--tsl2-accent-soft)}

/* ---- En-tête coloris du panier ---- */
#tsl2-cart-color{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:2px 0 10px}
#tsl2-cart-color .dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--tsl2-line);flex:0 0 auto}
#tsl2-cart-color .note{flex-basis:100%;font-size:11px;color:var(--tsl2-ink-dim)}

/* ---- Scène ---- */
#tsl2-stage{
  flex:1;position:relative;min-height:0;padding:10px 12px 12px;
}
/* Panneau ouvert : le t-shirt NE BOUGE PAS (il est déjà ancré en haut,
   donc visible au-dessus du sheet) — seule l'entrée tactile est coupée. */
#tsl2-studio.sheet-open #tsl2-stage{pointer-events:none}
#tsl2-stage canvas{touch-action:none}
/* Carte canvas façon v1 */
#tsl2-canvas-wrap{
  position:absolute;inset:10px 12px 12px;
  background:var(--tsl2-surface);border:1px solid var(--tsl2-line);
  border-radius:var(--tsl2-radius);box-shadow:0 2px 14px rgba(23,24,28,.05);
  overflow:hidden;
}

/* ---- N3 : mini-barre objet ---- */
#tsl2-minibar{
  position:absolute;z-index:5;display:none;
  background:var(--tsl2-ink);border-radius:12px;padding:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transform:translate(-50%,-100%);white-space:nowrap;
}
#tsl2-minibar.show{display:flex;gap:2px}
#tsl2-minibar button{
  border:0;background:transparent;color:#fff;font-size:11px;font-weight:600;
  padding:8px 10px;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
#tsl2-minibar button:active{background:rgba(255,255,255,.15)}
#tsl2-minibar button .ic{font-size:15px;line-height:1}
#tsl2-minibar button.del{color:#ff8a80}

/* ---- N0 : barre d'action ---- */
#tsl2-actionbar{
  flex:0 0 var(--tsl2-actionbar-h);
  background:var(--tsl2-surface);border-top:1px solid var(--tsl2-line);
  display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
#tsl2-actionbar button{
  flex:1;border:0;background:transparent;color:var(--tsl2-ink-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:14px;padding:4px 0;font-size:10.5px;font-weight:600;position:relative;
}
#tsl2-actionbar button .ic{font-size:21px;line-height:1}
#tsl2-actionbar button.on{color:var(--tsl2-accent);background:var(--tsl2-accent-soft)}
#tsl2-cart-badge{
  position:absolute;top:2px;right:calc(50% - 22px);min-width:17px;height:17px;
  background:var(--tsl2-accent);color:#fff;font-size:10px;font-weight:700;
  border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 4px;
}
#tsl2-cart-badge.show{display:flex}

/* ---- Scrim : zone de capture dédiée (pas de tap-extérieur global) ---- */
#tsl2-scrim{
  position:fixed;inset:0;z-index:999994;background:rgba(20,18,16,.38);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#tsl2-studio.sheet-open #tsl2-scrim{opacity:1;pointer-events:auto}

/* ---- Bottom sheets ---- */
#tsl2-studio .sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:999995;
  background:var(--tsl2-surface);border-radius:var(--tsl2-radius) var(--tsl2-radius) 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
  max-height:62dvh;display:flex;flex-direction:column;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.32,.72,.28,1);
  padding-bottom:env(safe-area-inset-bottom);
}
#tsl2-studio .sheet.open{transform:translateY(0)}
#tsl2-studio .sheet.dragging{transition:none}
#tsl2-studio .sheet-grab{flex:0 0 auto;padding:10px 0 4px;display:flex;justify-content:center;touch-action:none;cursor:grab}
#tsl2-studio .sheet-grab::before{content:"";width:42px;height:5px;border-radius:99px;background:#d8d4cd}
#tsl2-studio .sheet-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:2px 14px 10px}
#tsl2-studio .sheet-head .back{
  border:0;background:#f0ede8;width:34px;height:34px;border-radius:11px;
  font-size:16px;color:var(--tsl2-ink);display:none;align-items:center;justify-content:center;
}
#tsl2-studio .sheet-head .back.show{display:flex}
#tsl2-studio .sheet-head h2{font-size:16px;font-weight:800;flex:1;color:var(--tsl2-ink)}
#tsl2-studio .sheet-head .close{border:0;background:#f0ede8;width:34px;height:34px;border-radius:11px;font-size:15px;color:var(--tsl2-ink-dim)}
#tsl2-studio .sheet-body{flex:1;overflow-y:auto;padding:2px 16px 18px;overscroll-behavior:contain}

/* N1 : catégories */
#tsl2-studio .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#tsl2-studio .catgrid button{
  border:1px solid var(--tsl2-line);background:var(--tsl2-bg);border-radius:16px;
  padding:16px 6px 12px;font-size:12px;font-weight:600;color:var(--tsl2-ink);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
#tsl2-studio .catgrid button:active{background:var(--tsl2-accent-soft);border-color:var(--tsl2-accent)}
#tsl2-studio .catgrid button .ic{font-size:26px;line-height:1}
#tsl2-studio .catgrid button .soon{font-size:9px;color:var(--tsl2-ink-dim);font-weight:500}

/* N2 : contrôles */
#tsl2-studio .ctl{margin-bottom:16px}
#tsl2-studio .ctl label{display:block;font-family:var(--tsl2-mono);font-size:10.5px;font-weight:700;color:var(--tsl2-ink-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
#tsl2-studio .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
#tsl2-studio .chips button{
  border:1.5px solid var(--tsl2-line);background:var(--tsl2-surface);border-radius:999px;
  padding:8px 15px;font-size:13px;white-space:nowrap;flex:0 0 auto;color:var(--tsl2-ink);
}
#tsl2-studio .chips button.on{border-color:var(--tsl2-accent);background:var(--tsl2-accent-soft);font-weight:700;color:#c47a00}
#tsl2-studio .swatches{display:flex;gap:10px;flex-wrap:wrap}
#tsl2-studio .swatches button{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--tsl2-line);flex:0 0 auto}
#tsl2-studio .swatches button.on{border-color:var(--tsl2-accent);box-shadow:0 0 0 2px var(--tsl2-accent-soft)}
#tsl2-studio .swatches input[type=color]{
  width:38px;height:38px;border-radius:50%;border:2.5px dashed var(--tsl2-ink-dim);
  padding:0;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
  -webkit-appearance:none;appearance:none;overflow:hidden;cursor:pointer;
}
#tsl2-studio .swatches input[type=color]::-webkit-color-swatch-wrapper{padding:0;opacity:0}
#tsl2-studio .swatches input[type=color]::-webkit-color-swatch{border:none;opacity:0}
#tsl2-studio input[type=text]{
  width:100%;border:1.5px solid var(--tsl2-line);border-radius:12px;padding:12px;
  font:inherit;font-size:15px;background:var(--tsl2-bg);color:var(--tsl2-ink);user-select:text;-webkit-user-select:text;
}
#tsl2-studio input[type=range]{width:100%;accent-color:var(--tsl2-accent)}

/* Panier */
#tsl2-studio .sizerow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--tsl2-line)}
#tsl2-studio .sizerow .sz{width:64px;font-weight:800;font-size:14px}
#tsl2-studio .sizerow .unit{flex:1;font-size:12px;color:var(--tsl2-ink-dim)}
#tsl2-studio .stepper{display:flex;align-items:center;border:1.5px solid var(--tsl2-line);border-radius:12px;overflow:hidden}
#tsl2-studio .stepper button{border:0;background:var(--tsl2-bg);width:38px;height:38px;font-size:18px;color:var(--tsl2-ink)}
#tsl2-studio .stepper button:active{background:var(--tsl2-accent-soft);color:var(--tsl2-accent)}
#tsl2-studio .stepper .qty{width:36px;text-align:center;font-weight:700;font-size:14px}
#tsl2-tierbar{margin:14px 0 4px}
#tsl2-tierbar .track{height:7px;border-radius:99px;background:#ece9e3;overflow:hidden}
#tsl2-tierbar .fill{height:100%;background:linear-gradient(90deg,var(--tsl2-accent),#f0813d);border-radius:99px;width:0;transition:width .3s}
#tsl2-tierbar .hint{font-size:11.5px;color:var(--tsl2-ink-dim);margin-top:6px}
#tsl2-tierbar .hint b{color:var(--tsl2-accent)}
#tsl2-studio .totalrow{display:flex;align-items:baseline;gap:8px;margin-top:12px}
#tsl2-studio .totalrow .lbl{font-size:13px;color:var(--tsl2-ink-dim);flex:1}
#tsl2-studio .totalrow .amount{font-size:22px;font-weight:800}
#tsl2-studio .totalrow .per{font-size:12px;color:var(--tsl2-ink-dim)}
/* CTA ambre v1 : texte sombre, gras, léger relief */
#tsl2-studio .cta{
  width:100%;border:0;background:var(--tsl2-cta);color:#241a06;font-size:15px;
  font-weight:800;padding:15px;border-radius:13px;margin-top:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
#tsl2-studio .cta:active{transform:translateY(1px);box-shadow:none}
#tsl2-studio .cta:disabled{opacity:.4}
#tsl2-studio .cta.ghost{
  background:var(--tsl2-bg);color:var(--tsl2-ink);border:1.5px dashed var(--tsl2-ink-dim);
  font-weight:600;font-size:13.5px;box-shadow:none;margin-top:0;
}
#tsl2-studio .cta.ghost small{display:block;font-weight:500;font-size:10.5px;color:var(--tsl2-ink-dim);margin-top:2px}

/* Calques */
#tsl2-studio .layerrow{
  display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--tsl2-line);
  border-radius:13px;margin-bottom:8px;background:var(--tsl2-bg);
}
#tsl2-studio .layerrow.sel{border-color:var(--tsl2-accent);background:var(--tsl2-accent-soft)}
#tsl2-studio .layerrow .ic{font-size:19px}
#tsl2-studio .layerrow .nm{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tsl2-studio .layerrow .mv{background:var(--tsl2-surface);border:1px solid var(--tsl2-line);width:32px;height:32px;border-radius:9px;font-size:13px;color:var(--tsl2-ink)}
#tsl2-studio .empty{padding:26px 10px;text-align:center;color:var(--tsl2-ink-dim);font-size:13px}

/* Bibliothèque */
#tsl2-studio .libgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#tsl2-studio .libgrid button{
  aspect-ratio:1;border:1px solid var(--tsl2-line);border-radius:14px;background:var(--tsl2-bg);
  font-size:30px;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;
}
#tsl2-studio .libgrid button img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}

/* Toast */
#tsl2-toast{
  position:fixed;left:50%;bottom:calc(var(--tsl2-actionbar-h) + 14px);transform:translate(-50%,20px);
  z-index:999999;background:var(--tsl2-ink);color:#fff;font-size:13px;font-weight:600;
  padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;
  max-width:86vw;text-align:center;
}
#tsl2-toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   Desktop (≥1024px) : le desktop HÉRITE du mobile (CDC §6.1).
   Mêmes niveaux, mêmes panneaux — simplement dockés à droite
   au lieu de monter du bas. La scène reste en place.
   ============================================================ */
@media (min-width:1024px){
  /* Panneau droit permanent façon v1 : rangée d'onglets en haut,
     contenu de l'outil en dessous. La scène laisse la place à droite
     et au panneau calques fixe à gauche. */
  #tsl2-stage{margin-right:404px;margin-left:236px}
  #tsl2-topbar{margin-right:404px}

  #tsl2-sidepanel{
    display:block;position:fixed;left:12px;top:72px;bottom:12px;width:216px;
    background:var(--tsl2-surface);border:1px solid var(--tsl2-line);
    border-radius:var(--tsl2-radius);padding:14px;overflow-y:auto;z-index:5;
  }
  #tsl2-layers-fab{display:none}

  #tsl2-actionbar{
    position:fixed;top:0;right:0;left:auto;bottom:auto;width:404px;height:64px;
    border-top:0;border-left:1px solid var(--tsl2-line);border-bottom:1px solid var(--tsl2-line);
    padding:6px 10px;z-index:999996;justify-content:space-between;
  }
  #tsl2-actionbar button{flex:1;font-family:var(--tsl2-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase}
  #tsl2-actionbar button .ic{font-size:19px}
  #tsl2-actionbar button.on{background:transparent;box-shadow:inset 0 -2.5px 0 var(--tsl2-accent)}

  #tsl2-studio .sheet{
    left:auto;right:0;top:64px;bottom:0;width:404px;max-height:none;
    border-radius:0;border-left:1px solid var(--tsl2-line);box-shadow:none;
    transform:translateX(105%);
  }
  #tsl2-studio .sheet.open{transform:translateX(0)}
  #tsl2-studio .sheet-grab{display:none}   /* pas de drag-close à la souris */
  #tsl2-studio .sheet-head{padding-top:16px}
  #tsl2-studio .sheet-head .close{display:none} /* le panneau vit à demeure, on change d'outil via les onglets */
  /* Desktop : la scène ne bouge pas, le canvas reste utilisable panneau ouvert. */
  #tsl2-studio.sheet-open #tsl2-scrim{opacity:0;pointer-events:none}
  #tsl2-studio.sheet-open #tsl2-stage{pointer-events:auto}

  #tsl2-toast{bottom:24px}
}

/* Bouton lanceur sur la fiche produit */
#tsl2-open{margin-bottom:1em}