/* KitE Print Studio — éditeur. Scopé .kps-app, charte rouge KitE. */
.kps-app [x-cloak], .kps-app[x-cloak] { display: none !important; }

.kps-app {
  --kps-accent: #d72b3f;
  --kps-accent2: #b21e2e;
  --kps-ink: #1f2330;
  --kps-muted: #6b7280;
  --kps-border: #e5e7eb;
  --kps-bg: #f4f5f7;
  --kps-panel: #ffffff;
  font-family: 'Montserrat', -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--kps-ink);
  background: var(--kps-panel);
  border: 1px solid var(--kps-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 30px rgba(0,0,0,.06);
}
.kps-app * { box-sizing: border-box; }

/* Barre supérieure */
.kps-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--kps-border);
  background: #fff; flex-wrap: wrap;
}
.kps-brandmark { font-size: 15px; }
.kps-brandmark strong { color: var(--kps-accent); }
.kps-fmt { color: var(--kps-muted); font-size: 13px; margin-left: 6px; }
.kps-top-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kps-sep { width: 1px; height: 22px; background: var(--kps-border); margin: 0 4px; }
.kps-zoom { font-size: 12px; color: var(--kps-muted); min-width: 40px; text-align: center; }

/* Boutons */
.kps-ic {
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--kps-border);
  background: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--kps-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.kps-ic:hover { background: #faf0f1; border-color: var(--kps-accent); }
.kps-ic.on { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); }
.kps-ic:disabled { opacity: .4; cursor: default; }
.kps-btn-primary {
  background: var(--kps-accent); color: #fff; border: 0; border-radius: 9px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: 13px;
}
.kps-btn-primary:hover { background: var(--kps-accent2); }
.kps-btn-primary:disabled { opacity: .6; }
.kps-btn-ghost {
  background: #fff; color: var(--kps-ink); border: 1px solid var(--kps-border);
  border-radius: 9px; padding: 8px 12px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.kps-btn-ghost:hover { border-color: var(--kps-accent); color: var(--kps-accent); }
.kps-btn-danger {
  background: #fff; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 9px;
  padding: 8px 12px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.kps-btn-danger:hover { background: #fef2f2; }
.kps-full { width: 100%; }
.kps-btn-print {
  background: #16a34a; color: #fff; border: 0; border-radius: 9px;
  padding: 8px 16px; font-weight: 800; cursor: pointer; font-size: 13px;
}
.kps-btn-print:hover { background: #15803d; }
.kps-btn-print:disabled { opacity: .6; }

/* Corps : 4 zones */
.kps-body { display: flex; height: 76vh; min-height: 520px; }

/* Rail gauche */
.kps-rail {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px;
  background: #fff; border-right: 1px solid var(--kps-border); width: 76px; flex: 0 0 76px;
}
.kps-rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px; border: 0; background: transparent; border-radius: 10px; cursor: pointer;
  font-size: 18px; color: var(--kps-ink);
}
.kps-rail-btn span { font-size: 10px; color: var(--kps-muted); }
.kps-rail-btn .kps-emo { font-size: 20px; line-height: 1; color: inherit; }
.kps-rail-btn:hover { background: #faf0f1; }
.kps-rail-btn.active { background: var(--kps-accent); color: #fff; }
.kps-rail-btn.active span { color: #fff; }

/* Panneau */
.kps-panel {
  width: 240px; flex: 0 0 240px; padding: 14px; overflow-y: auto;
  background: var(--kps-bg); border-right: 1px solid var(--kps-border);
}
.kps-h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--kps-ink); }
.kps-hint { font-size: 11.5px; color: var(--kps-muted); margin: 8px 0 0; line-height: 1.4; }
.kps-add {
  width: 100%; padding: 12px; margin-bottom: 8px; border: 1px solid var(--kps-border);
  background: #fff; border-radius: 10px; cursor: pointer; text-align: left; color: var(--kps-ink);
}
.kps-add:hover { border-color: var(--kps-accent); background: #fff5f5; }

.kps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kps-shape {
  aspect-ratio: 1; border: 1px solid var(--kps-border); background: #fff; border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kps-shape:hover { border-color: var(--kps-accent); }
.sh-rect { width: 30px; height: 22px; background: #374151; }
.sh-circle { width: 26px; height: 26px; background: #374151; border-radius: 50%; }
.sh-tri { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 26px solid #374151; }
.sh-line { width: 30px; height: 4px; background: #374151; }

.kps-opt { color: var(--kps-muted); font-weight: 400; font-size: 11px; }

/* Textes stylés */
.kps-styled {
  aspect-ratio: 1.6; border: 1px solid var(--kps-border); background: #fff; border-radius: 10px;
  cursor: pointer; font-size: 16px; color: var(--kps-ink); display: flex; align-items: center;
  justify-content: center; overflow: hidden; padding: 4px;
}
.kps-styled:hover { border-color: var(--kps-accent); background: #fff5f5; }
/* Grille des 150+ styles de texte — scrollable, aperçu dans la vraie police */
.kps-app .kps-styled-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px 4px 4px 2px; }
.kps-app .kps-styled-grid .kps-styled { aspect-ratio: 2.1; font-size: 18px; line-height: 1.05; white-space: nowrap; }
/* Grille des 128 combos titre + sous-titre — scrollable */
.kps-app .kps-combo-grid { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding: 2px 4px 4px 2px; }
.kps-app .kps-combo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--kps-border); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; overflow: hidden; }
.kps-app .kps-combo:hover { border-color: var(--kps-accent); background: #fff5f5; }
.kps-app .kps-combo-t { font-size: 18px; line-height: 1.1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kps-app .kps-combo-s { font-size: 12px; color: var(--kps-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Grille d'icônes / logos */
.kps-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kps-icon {
  aspect-ratio: 1; border: 1px solid var(--kps-border); background: #fff; border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px;
}
.kps-icon:hover { border-color: var(--kps-accent); background: #fff5f5; }
.kps-icon img { width: 100%; height: 100%; object-fit: contain; }

/* Grille de modèles (templates) */
.kps-tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 2px; }
.kps-tpl {
  border: 0; background: #fff; border-radius: 12px; cursor: pointer;
  padding: 0; overflow: hidden; display: block; align-self: start;
  box-shadow: 0 1px 4px rgba(15,23,42,.10); transition: transform .15s ease, box-shadow .15s ease;
}
.kps-tpl:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(15,23,42,.20); }
.kps-tpl:active { transform: translateY(-1px); }
/* height auto = respecte l'orientation (carte paysage, flyer/invitation portrait) sans recadrer */
.kps-tpl img { width: 100%; height: auto; object-fit: contain; background: #f1f5f9; display: block; }

/* Grille photos */
.kps-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kps-photo { border: 1px solid var(--kps-border); background: #fff; border-radius: 9px; cursor: pointer; padding: 0; overflow: hidden; aspect-ratio: 1.3; }
.kps-photo:hover { border-color: var(--kps-accent); }
.kps-photo img { width: 100%; height: 100%; object-fit: cover; }

.kps-upload {
  display: block; width: 100%; padding: 14px; border: 2px dashed var(--kps-border);
  border-radius: 10px; text-align: center; cursor: pointer; color: var(--kps-muted);
  font-size: 13px; margin-bottom: 8px; background: #fff;
}
.kps-upload:hover { border-color: var(--kps-accent); color: var(--kps-accent); }

.kps-input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--kps-border); border-radius: 9px;
  font-size: 13px; margin-bottom: 10px; background: #fff; color: var(--kps-ink);
}
.kps-color-full { width: 100%; height: 38px; border: 1px solid var(--kps-border); border-radius: 9px; cursor: pointer; background: #fff; }

/* Catégories (panneau Format) : pastilles qui s'enroulent */
.kps-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 2px 0 10px; margin-bottom: 10px;
}

/* Accordéon de modèles : 1 menu déroulant par catégorie */
.kps-acc { margin-bottom: 6px; }
.kps-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: 1px solid var(--kps-border); background: #fff; border-radius: 9px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--kps-ink); text-align: left;
}
.kps-acc-head:hover { border-color: var(--kps-accent); }
.kps-acc-head.active { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); }
.kps-acc-chev { font-size: 11px; opacity: .8; }
.kps-acc-body { padding: 8px 2px 4px; }
.kps-cat {
  flex: 0 0 auto; white-space: nowrap; padding: 6px 11px; border: 1px solid var(--kps-border);
  background: #fff; border-radius: 999px; cursor: pointer; font-size: 12px; color: var(--kps-ink); font-weight: 600;
}
.kps-cat:hover { border-color: var(--kps-accent); color: var(--kps-accent); }
.kps-cat.active { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); }

/* Icônes du rail : voir bloc mask en fin de fichier */
.kps-fmts { display: flex; flex-direction: column; gap: 6px; }
.kps-fmt-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--kps-border);
  background: #fff; border-radius: 9px; cursor: pointer; text-align: left;
}
.kps-fmt-item:hover { border-color: var(--kps-accent); }
.kps-fmt-item.active { border-color: var(--kps-accent); background: #fff5f5; }
.kps-fmt-ic { font-size: 16px; }
.kps-fmt-lbl { font-size: 12px; color: var(--kps-ink); }

.kps-layer {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--kps-border); background: #fff; border-radius: 8px;
  margin-bottom: 6px; cursor: pointer;
}
.kps-layer.active { border-color: var(--kps-accent); background: #fff5f5; }
.kps-layer-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kps-layer-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.kps-layer-acts button { border: 0; background: transparent; cursor: pointer; font-size: 12px; padding: 2px 3px; }

/* Zone de travail */
.kps-viewport {
  flex: 1 1 auto; background: var(--kps-bg); overflow: auto; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.kps-canvas-scale { transform-origin: center center; }
.kps-canvas {
  position: relative; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.18);
  overflow: hidden;
}
.kps-obj { position: absolute; cursor: move; }
.kps-text { cursor: move; outline: none; }
.kps-text[contenteditable="true"] { cursor: text; outline: 2px solid var(--kps-accent); }
.kps-guide { position: absolute; pointer-events: none; }
.kps-cut { border: 1px solid rgba(215,43,63,.6); border-radius: 2px; }   /* zone de coupe / fond perdu */
.kps-safe { border: 1px dashed rgba(37,85,122,.6); border-radius: 2px; } /* marge de sécurité */

/* Sélection + poignées */
.kps-selbox { position: absolute; outline: 1.5px solid var(--kps-accent); pointer-events: none; z-index: 9; }
.kps-handle {
  position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--kps-accent);
  border-radius: 2px; pointer-events: auto;
}
.h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.h-n { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.h-s { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.h-e { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.h-w { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }

/* Pages */
.kps-pages {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12); border: 1px solid var(--kps-border); z-index: 5;
}
.kps-page-tab {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--kps-border);
  background: #fff; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--kps-ink);
}
.kps-page-tab.active { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); }
.kps-page-del { opacity: .7; }
.kps-page-add { border: 1px dashed var(--kps-border); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; color: var(--kps-muted); }

/* Propriétés */
.kps-props {
  width: 240px; flex: 0 0 240px; padding: 14px; overflow-y: auto;
  background: var(--kps-panel); border-left: 1px solid var(--kps-border);
}
.kps-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--kps-muted); margin: 10px 0 5px; }
.kps-row { display: flex; gap: 6px; margin-bottom: 8px; }
.kps-row-end { margin-top: 14px; flex-wrap: wrap; }
.kps-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.kps-swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--kps-border); cursor: pointer; }

/* Toast */
.kps-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--kps-ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600; z-index: 99999; box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

@media (max-width: 900px) {
  .kps-panel, .kps-props { width: 180px; flex-basis: 180px; }
  .kps-body { height: auto; flex-wrap: wrap; }
}

/* Icônes du rail en mask-image (immunisées contre les règles svg du thème) */
.kps-ric{width:22px;height:22px;display:block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.ic-modeles{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E");}
.ic-texte{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%206V5h14v1%27%2F%3E%3Cpath%20d%3D%27M12%205v14%27%2F%3E%3Cpath%20d%3D%27M9%2019h6%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%206V5h14v1%27%2F%3E%3Cpath%20d%3D%27M12%205v14%27%2F%3E%3Cpath%20d%3D%27M9%2019h6%27%2F%3E%3C%2Fsvg%3E");}
.ic-formes{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%279%27%20height%3D%279%27%20rx%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2716.5%27%20r%3D%274.5%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%279%27%20height%3D%279%27%20rx%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2716.5%27%20r%3D%274.5%27%2F%3E%3C%2Fsvg%3E");}
.ic-image{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%279.5%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M21%2016l-5%20-5l-9%209%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%279.5%27%20r%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M21%2016l-5%20-5l-9%209%27%2F%3E%3C%2Fsvg%3E");}
.ic-qr{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2714%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M14%2014h3v3%27%2F%3E%3Cpath%20d%3D%27M20%2014v6%27%2F%3E%3Cpath%20d%3D%27M14%2020h3%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2714%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M14%2014h3v3%27%2F%3E%3Cpath%20d%3D%27M20%2014v6%27%2F%3E%3Cpath%20d%3D%27M14%2020h3%27%2F%3E%3C%2Fsvg%3E");}
.ic-icones{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l1.8%204.6L18.5%2010l-4.7%201.4L12%2016l-1.8-4.6L5.5%2010l4.7-1.4z%27%2F%3E%3Cpath%20d%3D%27M19%2016l.7%201.8l1.8%20.7l-1.8%20.7l-.7%201.8l-.7-1.8l-1.8-.7l1.8-.7z%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204l1.8%204.6L18.5%2010l-4.7%201.4L12%2016l-1.8-4.6L5.5%2010l4.7-1.4z%27%2F%3E%3Cpath%20d%3D%27M19%2016l.7%201.8l1.8%20.7l-1.8%20.7l-.7%201.8l-.7-1.8l-1.8-.7l1.8-.7z%27%2F%3E%3C%2Fsvg%3E");}
.ic-format{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2010h3%27%2F%3E%3Cpath%20d%3D%27M3%2014h2%27%2F%3E%3Cpath%20d%3D%27M21%2010h-3%27%2F%3E%3Cpath%20d%3D%27M21%2014h-2%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2010h3%27%2F%3E%3Cpath%20d%3D%27M3%2014h2%27%2F%3E%3Cpath%20d%3D%27M21%2010h-3%27%2F%3E%3Cpath%20d%3D%27M21%2014h-2%27%2F%3E%3C%2Fsvg%3E");}
.ic-calques{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l9%205l-9%205l-9-5z%27%2F%3E%3Cpath%20d%3D%27M3%2012l9%205l9-5%27%2F%3E%3Cpath%20d%3D%27M3%2016l9%205l9-5%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l9%205l-9%205l-9-5z%27%2F%3E%3Cpath%20d%3D%27M3%2012l9%205l9-5%27%2F%3E%3Cpath%20d%3D%27M3%2016l9%205l9-5%27%2F%3E%3C%2Fsvg%3E");}
.ic-marque{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018%202%202%200%200%200%202-2v-1a2%202%200%200%201%202-2h1a4%204%200%200%200%204-4%209%209%200%200%200-9-9z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018%202%202%200%200%200%202-2v-1a2%202%200%200%201%202-2h1a4%204%200%200%200%204-4%209%209%200%200%200-9-9z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2711%27%20r%3D%271%27%2F%3E%3C%2Fsvg%3E");}

/* ── Fenêtre « Finaliser la commande » (Option B) ───────────────────── */
[x-cloak]{display:none !important;}
.kps-app .kps-modal{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.kps-app .kps-modal-card{background:#fff;border-radius:14px;width:100%;max-width:430px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
.kps-app .kps-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#0f172a;color:#fff;font-weight:700;font-size:16px;}
.kps-app .kps-modal-x{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;line-height:1;padding:0 4px;}
.kps-app .kps-modal-body{padding:18px;}
.kps-app .kps-modal-loading{text-align:center;color:#64748b;padding:24px 0;}
.kps-app .kps-modal-prod{font-weight:700;font-size:15px;margin:0 0 14px;color:#0f172a;}
.kps-app .kps-modal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.kps-app .kps-modal-row label{font-size:13px;color:#334155;font-weight:600;}
.kps-app .kps-modal-row select{flex:0 0 56%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;background:#fff;color:#0f172a;}
.kps-app .kps-modal-price{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px;padding-top:14px;border-top:1px solid #e2e8f0;font-size:14px;color:#334155;}
.kps-app .kps-modal-price strong{font-size:20px;color:#d72b3f;}
.kps-app .kps-modal-actions{display:flex;gap:10px;margin-top:16px;}
.kps-app .kps-modal-actions .kps-btn-ghost{flex:1;justify-content:center;}
.kps-app .kps-modal-actions .kps-btn-print{flex:2;justify-content:center;}
.kps-app .kps-modal-note{font-size:11px;color:#94a3b8;margin:12px 0 0;text-align:center;}

/* ════════════════════════════════════════════════════════════════
 * FINITION UI — studio indépendant du thème du site (boutons raffinés)
 * ════════════════════════════════════════════════════════════════ */
.kps-app button, .kps-app input, .kps-app select, .kps-app textarea, .kps-app label {
  font-family: inherit; line-height: 1.2; letter-spacing: normal; text-transform: none;
  box-shadow: none; -webkit-appearance: none; appearance: none; text-shadow: none;
}
.kps-app svg { display: inline-block; vertical-align: middle; }
.kps-app .kps-topbar { padding: 9px 16px; gap: 8px; border-bottom: 1px solid #eef0f3; }
.kps-app .kps-brandmark { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kps-app .kps-brandmark strong { font-weight: 700; }
.kps-app .kps-sep { height: 20px; background: #e9ebef; }
.kps-app .kps-ic {
  min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #e6e8ec; border-radius: 9px;
  color: #3a3f4b; font-size: 14px; transition: background .12s, border-color .12s, color .12s;
}
.kps-app .kps-ic:hover { background: #fbe9eb; border-color: var(--kps-accent); color: var(--kps-accent); }
.kps-app .kps-ic.on { background: var(--kps-accent); border-color: var(--kps-accent); color: #fff; }
.kps-app .kps-ic svg { width: 17px; height: 17px; }
.kps-app .kps-btn-ghost {
  height: 34px; padding: 0 13px; border: 1px solid #e6e8ec; border-radius: 9px; background: #fff;
  font-weight: 600; font-size: 13px; color: #3a3f4b; display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.kps-app .kps-btn-ghost:hover { background: #f7f8fa; border-color: #cfd3da; color: var(--kps-accent); }
.kps-app .kps-btn-ghost svg { width: 16px; height: 16px; }
.kps-app .kps-btn-print {
  height: 38px; padding: 0 18px; border: 0; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  background: var(--kps-accent); color: #fff; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 2px 8px rgba(215,43,63,.28); transition: filter .12s, box-shadow .12s;
}
.kps-app .kps-btn-print:hover { filter: brightness(.96); box-shadow: 0 4px 14px rgba(215,43,63,.34); }
.kps-app .kps-btn-print svg { width: 16px; height: 16px; }
.kps-app .kps-btn-primary { border-radius: 9px; font-weight: 700; }
/* Rail + panneau plus nets */
.kps-app .kps-rail { width: 74px; flex-basis: 74px; gap: 3px; padding: 8px 7px; }
.kps-app .kps-rail-btn { padding: 9px 4px; border-radius: 11px; gap: 4px; }
.kps-app .kps-rail-btn:hover { background: #f4f5f7; }
.kps-app .kps-rail-btn span { font-size: 10.5px; font-weight: 600; }
.kps-app .kps-ric { width: 21px; height: 21px; }
.kps-app .kps-tpl { border-radius: 11px; box-shadow: 0 1px 3px rgba(15,23,42,.08); border: 1px solid #eef0f3; }
.kps-app .kps-tpl:hover { box-shadow: 0 8px 22px rgba(15,23,42,.16); border-color: #e0e3e8; transform: translateY(-3px); }
.kps-app .kps-zoom { font-size: 12px; font-weight: 600; color: #6b7280; }
/* Bouton import accentué + chips de filtre style */
.kps-app .kps-upload--accent { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); font-weight: 700; }
.kps-app .kps-upload--accent:hover { background: var(--kps-accent2); }
.kps-app .kps-chips { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.kps-app .kps-chip { flex: 1; min-width: 60px; padding: 7px 8px; border: 1px solid var(--kps-border); background: #fff; color: var(--kps-ink); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; }
.kps-app .kps-chip:hover { border-color: var(--kps-accent); }
.kps-app .kps-chip.on { background: var(--kps-accent); color: #fff; border-color: var(--kps-accent); }
.kps-app .kps-range { width: 100%; accent-color: var(--kps-accent); margin-top: 4px; cursor: pointer; }
/* Panneau texte type Illustrator : sections + colonnes */
.kps-app .kps-prop-sec { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--kps-accent); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--kps-border); }
.kps-app .kps-prop2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kps-app .kps-prop2 .kps-row { gap: 4px; }
.kps-app .kps-prop2 .kps-ic { flex: 1; }
/* Bannière panier instantané */
.kps-app .kps-cart-notice { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--kps-border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); max-width: 92vw; }
.kps-app .kps-cart-notice-msg { font-size: 13px; font-weight: 600; color: var(--kps-ink); }
.kps-app .kps-cart-notice .kps-btn-print { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.kps-app .kps-cart-notice-x { border: none; background: transparent; color: var(--kps-muted); font-size: 15px; cursor: pointer; line-height: 1; }
/* Badge format sur les vignettes de modèles */
.kps-app .kps-tpl { position: relative; }
.kps-app .kps-tpl-badge { position: absolute; bottom: 5px; left: 5px; background: rgba(15,23,42,.82); color: #fff; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 5px; pointer-events: none; letter-spacing: .3px; }