/* Kontex Ventes — Maquette automatique v2 (drawer and editor, quote card, line editor colour, Paramètres › Maquette).
   Spec: design/15-maquette-v2.md §3 (on design/13 §2.M). Kontex Design System only (tokens of /kontex.css): no amber
   anywhere in the maquette (the host screen owns its single amber), Teal 700 actions, Plex Mono for refs and
   measures, flat UI chrome around the garment canvas, drawers full screen and no horizontal scroll at 390 px.
   Every class is prefixed "mq-". */

/* ---------- drawer: the stage on the left, the side panel on the right ---------- */
.kx-drawer.mq-drawer{width:min(1320px,100vw)}
.mq-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.mq-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.mq-stagehead{display:flex;align-items:flex-end;gap:12px 16px;min-width:0}
.mq-tabs{flex:1 1 auto;min-width:0}
.mq-stagehead .mq-check{flex-shrink:0;padding-bottom:8px}
.mq-canvasbox{position:relative;min-width:0;border-radius:var(--kx-radius-md);overflow:hidden;background:var(--kx-slate-50);border:1px solid var(--border-subtle)}
.mq-canvas{display:block;width:100%;height:480px;touch-action:none;cursor:default}
.mq-canvas:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kx-teal-600)}
.mq-canvas.is-drag{cursor:move}
.mq-busy{position:absolute;inset-inline:0;top:0;display:flex;justify-content:center;pointer-events:none}
.mq-busy:empty{display:none}
.mq-busy .loading{padding:12px 16px;margin-top:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--kx-radius-sm)}
.mq-ctl{display:flex;flex-direction:column;gap:8px;min-width:0}
.mq-ctl:empty{display:none}
.mq-readout{margin:0;font:500 13px/1.45 var(--kx-font-sans);color:var(--text);overflow-wrap:anywhere}
.mq-steppers{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.mq-stepper{display:inline-flex;align-items:center;gap:6px}
.mq-stepper__l{font:500 13px/1.4 var(--kx-font-sans);color:var(--text2);margin-inline-end:2px}
/* S9 « Taille affichée »: the line's sizes and L, a segmented control that wraps rather than scrolls */
.mq-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.mq-sizes .seg{flex-wrap:wrap;max-width:100%}
.mq-sizes .seg button{min-width:44px;font-family:var(--kx-font-mono)}
.mq-hint{margin:0}
/* « Position standard » when the print already sits there: the same ghost text button, faded (art round 2: a filled
   grey pill read heavier than the enabled teal link) */
.mq-steppers .kx-btn--ghost:disabled,.mq-steppers .kx-btn--ghost[aria-disabled="true"]{background:none;border-color:transparent;color:var(--brand-text);opacity:.4}
.mq-side{min-width:0}
.mq-side .field .help{overflow-wrap:anywhere}
.mq-check{display:inline-flex;gap:8px;align-items:center;font:500 13px/1.4 var(--kx-font-sans);color:var(--text2);cursor:pointer;min-height:32px}
.mq-check input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.mq-check .ico{color:var(--text3)}
/* visually hidden (radios inside their tiles, the export legend) */
.mq-vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* chips: warnings are sentences, so a chip that wraps, in sentence case */
.mq-chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mq-chip.kx-chip{height:auto;min-height:22px;padding:4px 8px;white-space:normal;text-transform:none;letter-spacing:0;font:500 12px/1.35 var(--kx-font-sans);align-items:flex-start;max-width:100%}
.mq-chip .kx-chip__dot{margin-top:5px}
.mq-chip .ico{flex-shrink:0;margin-top:0}

/* garment colour, shade, style */
.mq-colour{display:flex;align-items:center;gap:8px;min-width:0}
.mq-colour b{font:600 14px/1.4 var(--kx-font-sans);color:var(--text);overflow-wrap:anywhere}
.mq-colour select{flex:1 1 auto}
.mq-swatch{width:28px;height:28px;flex-shrink:0;border-radius:var(--kx-radius-sm);border:1px solid var(--border-strong)}
.mq-swatch--sm{width:16px;height:16px;border-radius:4px}
.mq-shade{display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--kx-font-sans);color:var(--text2)}
.mq-picker{width:44px;height:40px;flex-shrink:0;padding:3px;border:1px solid var(--border);border-radius:var(--kx-radius-sm);background:var(--surface);cursor:pointer}
.mq-picker:focus-visible{outline:none;box-shadow:var(--focus)}
.mq-seg button{min-height:34px}

/* placement cards */
.mq-place{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--kx-radius-md);background:var(--surface);min-width:0}
.mq-place.is-sel{border-color:var(--kx-teal-600);box-shadow:inset 3px 0 0 var(--identity)}
.mq-place__head{display:flex;align-items:flex-start;gap:8px;min-width:0;width:100%;padding:0;border:none;background:none;text-align:start;cursor:pointer;color:inherit;font:inherit;border-radius:var(--kx-radius-xs)}
.mq-place__head:focus-visible{outline:none;box-shadow:var(--focus)}
.mq-place__head b{flex:1 1 auto;font:600 14px/1.4 var(--kx-font-sans);color:var(--text);overflow-wrap:anywhere}
.mq-fmt{flex-shrink:0;font:500 12px/22px var(--kx-font-mono);color:var(--text3)}
.mq-badge{width:22px;height:22px;flex-shrink:0;border-radius:999px;background:var(--kx-teal-700);color:#ffffff;font:600 12px/22px var(--kx-font-mono);text-align:center}
.mq-size{margin:0;font:500 13px/1.45 var(--kx-font-sans);color:var(--text2);overflow-wrap:anywhere}
.mq-sizehelp{margin:-6px 0 0}
.mq-place__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mq-place__row:empty{display:none}
.mq-import{flex:0 0 auto}
.mq-angle{font:500 13px/1 var(--kx-font-mono);color:var(--text2);min-width:36px}
/* visual picker: 56 × 56 radio tiles on a checkerboard drawn on their canvas */
.mq-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.mq-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;cursor:pointer}
.mq-tile__img{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--kx-radius-sm);border:1px solid var(--border);background:#ffffff;color:var(--text3)}
/* a visual's name on two lines at most, ellipsis after (the whole name in the tile's title) */
.mq-tile__n{max-width:100%;font:400 12px/1.3 var(--kx-font-sans);color:var(--text3);text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.mq-tile:hover .mq-tile__img{border-color:var(--kx-teal-300)}
.mq-tile.is-on .mq-tile__img{border-color:var(--kx-teal-600);box-shadow:0 0 0 1px var(--kx-teal-600)}
.mq-tile.is-on .mq-tile__n{color:var(--brand-text);font-weight:600}
.mq-tile:has(input:focus-visible) .mq-tile__img{box-shadow:var(--focus)}
/* « Retirer le fond » */
.mq-knock{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mq-tol{display:flex;align-items:center;gap:10px;width:100%;font:500 13px/1.4 var(--kx-font-sans);color:var(--text2)}
.mq-tol input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--primary)}
.mq-tol .mono{min-width:24px;text-align:end;font:500 13px/1 var(--kx-font-mono);color:var(--text)}

/* « Exporter » */
.mq-export{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:none;min-width:0}
.mq-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--kx-radius-sm);background:var(--surface);cursor:pointer;font:400 13px/1.45 var(--kx-font-sans);color:var(--text2)}
.mq-radio input{margin:2px 0 0;width:16px;height:16px;flex-shrink:0;accent-color:var(--primary)}
.mq-radio b{font-weight:600;color:var(--text)}
.mq-radio.is-on{border-color:var(--kx-teal-600);background:var(--tint)}
.mq-coloris{display:flex;flex-wrap:wrap;gap:6px}
.mq-cchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font:500 12px/1.3 var(--kx-font-sans);color:var(--text2);cursor:pointer}
.mq-cchip:hover:not(:disabled){background:var(--tint)}
.mq-cchip[aria-pressed="true"]{border-color:var(--identity);background:var(--tint);color:var(--brand-text);font-weight:600}
.mq-cchip:disabled{cursor:not-allowed;opacity:.55}
.mq-cchip:focus-visible{outline:none;box-shadow:var(--focus)}

/* footer */
.mq-status{flex:1 1 260px;min-width:0}
.mq-status:empty{display:none}
.mq-status .loading{padding:0}
.mq-saved{display:flex;align-items:center;gap:6px;margin:0}
.mq-saved .ico{color:var(--done-dot);flex-shrink:0}
.mq-actions{justify-content:flex-end}
.mq-full{display:block;width:100%;height:auto;border:1px solid var(--border-subtle);border-radius:var(--kx-radius-sm);background:#ffffff}
/* « Aperçu » at full resolution: a lightbox over everything, fitted to the screen, « Agrandir » (or a tap on the
   image) shows it at its real size to scroll; pinch zoom stays the browser's own */
.mq-canvas.is-apercu{cursor:zoom-in}
.mq-lightbox{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--kx-slate-900, #243243)}
.mq-lightbox__bar{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:max(10px, env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border)}
.mq-lightbox__t{flex:1 1 auto;min-width:0;font:500 13px/1.4 var(--kx-font-mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-lightbox__bar .kx-btn{min-width:44px;height:44px;justify-content:center}
.mq-lightbox__scroll{flex:1 1 auto;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.mq-lightbox__scroll .loading{color:#ffffff}
.mq-lightbox__scroll img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#ffffff;border-radius:var(--kx-radius-xs);cursor:zoom-in}
.mq-lightbox.is-zoom .mq-lightbox__scroll{display:block}
.mq-lightbox.is-zoom .mq-lightbox__scroll img{max-width:none;max-height:none;cursor:zoom-out}
/* desktop: the stage stays in view while the side panel scrolls, so every card edit is seen on the garment */
@media (min-width:1024px){.mq-stage{position:sticky;top:0}}
@media (max-width:1023px){.mq-layout{grid-template-columns:minmax(0,1fr)}}
/* phones: full-screen drawer, the stage first with its readout and steppers right under the canvas, then the
   side panel; the two footer buttons side by side; nothing sticky, never a horizontal scroll */
@media (max-width:767px){
  .mq-layout{gap:16px}
  .mq-stagehead{flex-wrap:wrap}
  .mq-tabs{flex:1 1 100%;gap:16px}
  .mq-stagehead .mq-check{padding-bottom:0}
  .mq-actions{width:100%;flex-wrap:nowrap}
  .mq-actions .kx-btn{flex:1 1 50%;min-width:0;height:44px;justify-content:center;padding-inline:8px}
  .mq-actions .kx-btn[hidden]{display:none}
}
/* small phones: the Hauteur / Côté steppers are 44 × 44 touch targets */
@media (max-width:480px){
  .mq-stepper{gap:8px}
  .mq-stepper [data-mq-nudge]{width:44px;height:44px;min-width:44px;padding:0;justify-content:center}
}

/* ---------- quote card « Maquettes » ---------- */
.mq-rows{display:flex;flex-direction:column}
.mq-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px 16px;align-items:center;padding-block:12px;border-top:1px solid var(--border-subtle)}
.mq-row:first-child{border-top:none;padding-top:0}
.mq-row:last-child{padding-bottom:0}
.mq-row__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mq-row__t b{font:600 14px/1.4 var(--kx-font-sans);color:var(--text)}
.mq-row__t span{font:400 13px/1.45 var(--kx-font-sans);color:var(--text2);overflow-wrap:anywhere}
.mq-row__t span.hint{font-size:12px;color:var(--text3)}
.mq-row__none{margin:0}
.mq-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.mq-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--kx-radius-sm);background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.mq-thumb:hover{background:var(--tint);border-color:var(--kx-teal-200)}
.mq-thumb:focus-visible{outline:none;box-shadow:var(--focus)}
.mq-thumb img{display:block;width:120px;height:78px;object-fit:contain;background:#ffffff;border-radius:var(--kx-radius-xs)}
@media (max-width:640px){
  .mq-row{grid-template-columns:minmax(0,1fr)}
  .mq-row__act .kx-btn{width:100%;justify-content:center}
}

/* ---------- line editor: « Couleur du vêtement » ---------- */
.mq-le-colour{flex:1 1 200px}
.mq-le-colour .mq-colour .kx-input{flex:1 1 auto}

/* ---------- Paramètres › Maquette ---------- */
.mq-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:8px 24px}
.mq-prow{display:grid;grid-template-columns:40px minmax(0,1fr) 44px 116px 40px;gap:8px;align-items:center}
.mq-prow .kx-input{min-width:0}
.mq-pthumb{display:block;width:40px;height:44px;border-radius:var(--kx-radius-xs);background:var(--kx-slate-50)}
.mq-hexin{text-transform:uppercase}
.mq-shapes{display:flex;flex-direction:column}
.mq-srow{display:grid;grid-template-columns:40px minmax(0,1fr) 220px;gap:8px 16px;align-items:center;padding-block:10px;border-top:1px solid var(--border-subtle)}
.mq-srow:first-child{border-top:none;padding-top:0}
.mq-srow__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mq-srow__t b{font:500 14px/1.4 var(--kx-font-sans);color:var(--text);overflow-wrap:anywhere}
.mq-code{font:400 12px/1.4 var(--kx-font-mono);color:var(--text3);overflow-wrap:anywhere}
@media (max-width:767px){.mq-pal{grid-template-columns:minmax(0,1fr)}}
/* phones: one row per colour: picker, name, code, remove (the picker shows the colour; the thumbnail would leave the
   name too narrow to read) */
@media (max-width:560px){
  .mq-prow{grid-template-columns:40px minmax(0,1fr) 92px 36px;grid-template-areas:"pick name hex rm";gap:6px}
  .mq-prow .mq-pthumb{display:none}
  .mq-prow [data-c="name"]{grid-area:name}
  .mq-prow [data-c="pick"]{grid-area:pick;width:40px}
  .mq-prow [data-c="hex"]{grid-area:hex;padding-inline:8px}
  .mq-prow [data-rm]{grid-area:rm;width:36px}
  .mq-srow{grid-template-columns:40px minmax(0,1fr)}
  .mq-srow select{grid-column:1/-1}
}
/* « le format suit le visuel »: notice after the quote line followed the visual, with « Annuler » */
.mq-fitnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:8px 10px;border-radius:var(--kx-radius-sm);background:var(--done-bg);color:var(--done-text);font:500 13px/1.45 var(--kx-font-sans)}
.mq-fitnote > span{flex:1 1 220px;min-width:0}
.mq-fitnote .kx-btn{margin-inline-start:auto}