/* Styles du module js/bat (préfixe bat- / mk-, voir docs/DESIGN.md). Réutiliser base.css avant de créer un style.
   Rappel DA : aucune ombre, aucune bordure, séparations par fonds gris ; rouge uniquement pour « Valider le BAT ». */

/* =========================================================
   Fiche BAT — formulaire (admin)
   ========================================================= */
dialog.modal.bat-modal { width: min(760px, calc(100vw - 24px)); }
.bat-modal .modal__body { padding: 0; }
.bat-form__form { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 0; }
.bat-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bat-form__head .t-desc { margin-top: 4px; }
.bat-form__head h2:focus, .mk-top__title h2:focus { outline: none; }
.bat-form__empty { padding: 2px 2px 0; }

.bat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bat-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px 8px 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--grey-100); color: var(--ink); cursor: pointer; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 14px; transition: background .15s; }
.bat-chip:hover { background: var(--grey-200); }
.bat-chip__tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); color: transparent; transition: background .15s, color .15s; }
.bat-chip[aria-pressed="true"] { background: var(--grad-navy); color: var(--on-accent); }
.bat-chip[aria-pressed="true"] .bat-chip__tick { background: rgba(255, 255, 255, .16); color: var(--on-accent); }

.bat-fsec { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-card); background: var(--grey-50); }
.bat-fsec .input, .bat-fsec .select, .bat-fsec .textarea { background: var(--paper); }
.bat-fsec--notes { background: transparent; padding: 0; }
.bat-fsec--notes .textarea { background: var(--grey-100); }
.bat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bat-grid3 { display: grid; grid-template-columns: 1fr 1fr 110px; gap: 12px; align-items: start; }
.bat-form__other { margin-top: -4px; }

.bat-rows { display: flex; flex-direction: column; gap: 8px; }
.bat-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.bat-row--qty { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 32px; }
.bat-row--head span { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); padding-left: 4px; }
.bat-num { text-align: right; font-variant-numeric: tabular-nums; }
.input.is-invalid { box-shadow: 0 0 0 2px var(--red-500); }

.bat-addline { display: flex; gap: 8px; }
.bat-addline .input { flex: 1; min-width: 0; }
.bat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bat-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--radius-pill); background: var(--paper); font-size: 14px; }
.bat-tag button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.bat-tag button:hover { background: var(--grey-100); color: var(--ink); }

.bat-sizes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bat-size { display: flex; flex-direction: column; gap: 4px; text-align: center; cursor: text; }
.bat-size > span { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 13px; }
.bat-size .input { text-align: center; padding: 10px 6px; }
.bat-form__sum { flex-wrap: wrap; }
.bat-form__sum strong { color: var(--ink); font-size: 15px; }
.bat-form__recalc { font-size: 12px; }

.bat-sum { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--paper); }
.bat-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.bat-sum .bat-sum__tvac { color: var(--ink); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 17px; padding-top: 8px; margin-top: 4px; box-shadow: inset 0 1px 0 var(--rule); }

.bat-form__actions { position: sticky; bottom: 0; margin: 0 -28px; padding: 16px 28px 24px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper) 30%); }

@media (max-width: 640px) {
  .bat-form__form { padding: 20px 16px 0; }
  .bat-form__actions { margin: 0 -16px; padding: 14px 16px 18px; }
  .bat-grid2, .bat-grid3 { grid-template-columns: 1fr; }
  .bat-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bat-row { grid-template-columns: minmax(0, 1fr) 72px 72px 32px; gap: 6px; }
  .bat-fsec { padding: 16px; }
  .bat-fsec--notes { padding: 0; }
  .bat-chip { font-size: 13px; padding-right: 12px; }
}

/* =========================================================
   Fiche BAT — lecture (client et admin)
   ========================================================= */
.bat-sheet { display: flex; flex-direction: column; gap: 12px; }
.bat-sheet:empty { display: none; }
.bat-sheet__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bat-sheet__head .t-mention { margin-left: auto; }
.bat-sheet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.bat-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--grey-50); min-width: 0; }
.bat-card[data-section="notes"] { grid-column: 1 / -1; }
.bat-card h4 { color: var(--ink-2); font-size: 13px; letter-spacing: .01em; }
.bat-sheet--compact .bat-sheet__grid, aside .bat-sheet__grid { grid-template-columns: 1fr; }

.bat-kv { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bat-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bat-kv dt { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); flex: none; }
.bat-kv dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.bat-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bat-places li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper); }
.bat-places__label { font-weight: 600; }
.bat-places__size { font-family: var(--font-display); font-style: italic; font-weight: 600; white-space: nowrap; }

.bat-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bat-swatches li { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--paper); font-size: 14px; font-weight: 600; }

.bat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bat-table th, .bat-table td { padding: 7px 0; text-align: left; font-weight: 400; }
.bat-table thead th { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); padding-top: 0; }
.bat-table tbody tr + tr td, .bat-table tbody tr + tr th { box-shadow: inset 0 1px 0 var(--rule); }
.bat-table .num { text-align: right; white-space: nowrap; }
.bat-table tbody th { color: var(--ink-2); }
.bat-table tfoot th, .bat-table tfoot td { padding-top: 10px; box-shadow: inset 0 1px 0 var(--rule); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 15px; color: var(--ink); }
.bat-table tfoot .bat-tvac th, .bat-table tfoot .bat-tvac td { font-size: 18px; }
.bat-notes { white-space: pre-wrap; overflow-wrap: anywhere; }

/* =========================================================
   Signature du BAT
   ========================================================= */
.bat-sign { display: flex; flex-direction: column; gap: 10px; }
.bat-sign__form { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius-card); background: var(--grey-50); }
.bat-sign__form .input { background: var(--paper); }
.bat-sign__checkline { font-size: 15px; line-height: 1.4; }
.bat-sign__statement { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--paper); font-family: var(--font-ui); font-style: italic; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.bat-sign__err { margin: 0; color: var(--red-700); font-size: 14px; }
.bat-sign__changes .textarea { min-height: 80px; }
.bat-stamp { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--ok-bg); color: var(--ok); }
.bat-stamp .t-sub { color: var(--ok); }
.bat-stamp .t-mention { color: var(--ok); opacity: .85; }
.bat-stamp__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: var(--on-accent); flex: none; }
.bat-stamp--changes { display: block; background: var(--warn-bg); color: var(--warn); }
.bat-stamp--changes .t-sub { color: var(--warn); }

/* =========================================================
   Générateur de mockups (plein écran)
   ========================================================= */
html.mk-lock, html.mk-lock body { overflow: hidden; }
dialog.mk-dialog { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: var(--paper); color: var(--ink); }
dialog.mk-dialog::backdrop { background: var(--paper); }
.mk-shell { display: flex; flex-direction: column; height: 100%; }
.mk-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.mk-top__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-top__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-redo .icon { transform: scaleX(-1); }
.mk-close .icon { display: none; }
@media (max-width: 760px) { .mk-close .icon { display: block; } }
.mk-progress { position: absolute; left: 20px; right: 20px; bottom: 0; }
.mk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 12px; padding: 0 12px 12px; }
.mk-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.mk-panel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: var(--grey-50); }
.mk-panel .input { background: var(--paper); }
.mk-panel__btns { display: flex; flex-wrap: wrap; gap: 6px; }

.mk-lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.mk-lib__loading { grid-column: 1 / -1; display: grid; place-items: center; padding: 16px; }
.mk-lib__item { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--paper); cursor: pointer; font-family: var(--font-ui); font-size: 11px; color: var(--ink-2); text-align: left; min-width: 0; }
.mk-lib__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: var(--grey-100); }
.mk-lib__item:hover { background: var(--grey-200); }
.mk-lib__item[aria-pressed="true"] { background: var(--grad-navy); color: var(--on-accent); }
.mk-lib .t-desc { grid-column: 1 / -1; }

.mk-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-layers__empty { padding: 4px 0; }
.mk-layers__item { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper); }
.mk-layers__item.is-sel { box-shadow: inset 0 0 0 2px var(--navy-500); }
.mk-layers__item .btn--ghost { background: transparent; }
.mk-layers__item .btn--ghost:hover { background: var(--grey-100); }
.mk-layers__item .icon[aria-hidden] { flex: none; }
.mk-layers__item button:nth-of-type(2) .icon { transform: rotate(90deg); }
.mk-layers__pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-size: 14px; }
.mk-layers__thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--grey-100); flex: none; }

.mk-stage { position: relative; min-height: 0; border-radius: 24px; background: var(--grey-100); display: grid; place-items: center; overflow: hidden; }
.mk-stage.is-over { background: var(--grey-200); }
.mk-stage__inner { display: grid; place-items: center; }
.mk-canvas { touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 4px; outline: none; }
.mk-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.mk-stage__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; cursor: pointer; }
.mk-stage__empty .drop__plus { margin-bottom: 4px; }

.mk-props { display: flex; flex-direction: column; gap: 16px; }
.mk-props .field small { line-height: 1.35; }
.mk-small { width: 96px; flex: none; }
.mk-range { flex: 1; min-width: 0; accent-color: var(--navy-500); height: 28px; }
.mk-seg { display: flex; width: 100%; }
.mk-seg button { flex: 1; padding: 8px 6px; }
.mk-real { padding-bottom: 14px; box-shadow: inset 0 -1px 0 var(--rule); }

@media (max-width: 1100px) {
  .mk-body { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mk-side--right { grid-column: 1 / -1; overflow: visible; }
  .mk-side--right .mk-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
}
@media (max-width: 760px) {
  .mk-hide-sm { display: none; }
  .mk-close { width: 40px; padding: 0; }
  dialog.mk-dialog { overflow: auto; }
  .mk-shell { height: auto; min-height: 100%; }
  .mk-top { padding: 12px 14px; }
  .mk-top__title .t-mention { display: none; }
  .mk-top__actions { width: 100%; }
  .mk-top__actions .mk-export { margin-left: auto; }
  .mk-body { display: flex; flex-direction: column; padding: 0 10px 16px; }
  .mk-stage { order: -1; height: 62vh; height: 62dvh; flex: none; border-radius: 20px; }
  .mk-side { overflow: visible; }
  .mk-panel { padding: 16px; border-radius: 20px; }
  .mk-lib { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: none; }
  .mk-side--right .mk-props { display: flex; }
}

/* Zone d'impression (fenêtre) */
dialog.modal.mk-zone-modal { width: min(820px, calc(100vw - 24px)); }
.mk-zone { display: grid; place-items: center; padding: 12px; border-radius: var(--radius-card); background: var(--grey-100); }
.mk-zone__surface { position: relative; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; line-height: 0; }
.mk-zone__img { max-height: 60vh; width: auto; max-width: 100%; border-radius: 4px; pointer-events: none; }
.mk-zone__rect { position: absolute; outline: 2px dashed var(--paper); box-shadow: 0 0 0 1px var(--navy-900), 0 0 0 9999px rgba(20, 28, 39, .35); pointer-events: none; }

/* =========================================================
   Page /mockups
   ========================================================= */
.mk-page__main { padding-bottom: 64px; gap: 24px; }
.mk-page__head { align-items: flex-end; flex-wrap: wrap; }
.mk-page__head .t-desc { max-width: 560px; }
.mk-drop { min-height: 160px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mk-grid__empty { grid-column: 1 / -1; padding: 32px; }
.mk-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; border-radius: 24px; background: var(--grey-50); min-width: 0; }
.mk-card__img { aspect-ratio: 1; border-radius: 16px; background: var(--grey-100); display: grid; place-items: center; overflow: hidden; }
.mk-card__fit { position: relative; line-height: 0; width: 100%; aspect-ratio: 1; }
.mk-card__fit.is-tall { width: auto; height: 100%; }
.mk-card__fit img { width: 100%; height: 100%; object-fit: fill; }
.mk-card__zone { position: absolute; outline: 1.5px dashed var(--paper); box-shadow: 0 0 0 1px rgba(20, 28, 39, .55); border-radius: 2px; pointer-events: none; }
.mk-card__name { display: flex; align-items: center; gap: 4px; padding: 4px 4px 0 6px; min-height: 40px; }
.mk-card__name .t-sub { flex: 1; min-width: 0; }
.mk-card__name .btn--ghost, .mk-card__actions .btn--icon { background: transparent; }
.mk-card__name .btn--ghost:hover, .mk-card__actions .btn--icon:hover { background: var(--grey-100); }
.mk-card__input { min-height: 36px; padding: 6px 10px; background: var(--paper); }
.mk-card > .t-mention { padding: 0 6px; }
.mk-card__actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 4px 2px 0; }
.mk-card__actions .btn--sm:not(.btn--icon) { background: var(--paper); }
.mk-card--busy { opacity: .7; }

@media (max-width: 640px) {
  .mk-hide-sm { display: none; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-card { border-radius: 20px; padding: 8px 8px 10px; }
  .mk-card__actions .btn--sm:not(.btn--icon) { padding: 6px 10px; font-size: 12px; }
}

/* Banc d'essai (public/dev/bat.html, développement uniquement) */
.harness-box { padding: 32px 0; }
.harness-box--narrow { max-width: 420px; }