/* Kodaje PAD — design tokens Apple-style + utilitaires.
 * Stack typographique système (SF Pro natif sur Apple, Inter en fallback web).
 * Palette épurée, espacement généreux, rythme vertical large.
 */

/* Inter + JetBrains Mono self-hosted : même stack, sans round-trip Google Fonts. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bon d'étiquettes rendu : polices locales du design handoff, limitées au composant. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                  "Segoe UI", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                  "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
                  "Cascadia Code", "Roboto Mono", monospace;

  --color-bg:        #FBFBFD;   /* Apple off-white */
  --color-surface:   #FFFFFF;   /* cartes, popovers */
  --color-ink:       #1D1D1F;   /* texte primaire (proche noir) */
  --color-ink-soft:  #424245;   /* texte secondaire */
  --color-ink-mute:  #6E6E73;   /* texte tertiaire / labels */
  --color-rule:      #D2D2D7;   /* hairlines */
  --color-rule-soft: #E8E8ED;   /* séparateurs très légers */
  --color-accent:    #0071E3;   /* Apple blue — CTA primaire */
  --color-accent-d:  #0058B0;   /* hover accent */
  --color-success:   #0A7F60;   /* validation / envoyé */
  --color-warning:   #B25000;   /* avertissement */
  --color-danger:    #B0001F;   /* erreur */
  --color-success-soft: #E8F5EF;
  --color-warning-soft: #FFF1E5;
  --color-danger-soft:  #FCE8EB;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-pop:  0 4px 24px rgba(0,0,0,0.08);
}

html, body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* SF-like rendering for Inter fallback */
@supports (font-variation-settings: normal) {
  html, body {
    font-feature-settings: "ss01", "cv11", "ss03";
  }
}

/* ─── Typographie ─── */

.k-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
}

.k-headline {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.k-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.k-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: -0.01em;
}

.k-body {
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.k-mute {
  color: var(--color-ink-mute);
}

/* ─── Surfaces ─── */

.k-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.k-rule {
  border-top: 1px solid var(--color-rule);
  height: 0;
}

.k-rule-soft {
  border-top: 1px solid var(--color-rule-soft);
  height: 0;
}

/* ─── Inputs ─── */

.k-input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;            /* 16px = pas de zoom auto sur iOS */
  line-height: 1.4;
  padding: 14px 16px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.k-input::placeholder { color: var(--color-ink-mute); }

.k-input:hover { border-color: #B7B7BF; }

.k-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.k-input.k-input-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(176, 0, 31, 0.10);
}

.k-label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* `.k-label` sert aussi d'étiquette de colonne sur les <th> des tableaux admin
   (tarifs, paiements, factures, dossiers…). Sur une cellule de tableau,
   `display:block` détruit la ligne d'en-tête : chaque colonne tombe l'une sous
   l'autre. On restaure le comportement de cellule sans toucher aux étiquettes
   de formulaire, qui gardent `display:block`. */
th.k-label {
  display: table-cell;
  margin-bottom: 0;
  vertical-align: bottom;
}

.k-error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 6px;
}

/* ─── Boutons ─── */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 90ms ease, box-shadow 120ms ease;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.k-btn:active { transform: translateY(0.5px); }
.k-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.k-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.k-btn-primary {
  background: var(--color-ink);
  color: #FFFFFF;
}
.k-btn-primary:hover { background: #2C2C2E; }

.k-btn-accent {
  background: var(--color-accent);
  color: #FFFFFF;
}
.k-btn-accent:hover { background: var(--color-accent-d); }

.k-btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
}
.k-btn-ghost:hover { background: #F2F2F5; }

.k-btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid transparent;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-md);
}
.k-btn-danger:hover { background: var(--color-danger-soft); }

.k-btn-block { width: 100%; }

/* ─── Badges / chips ─── */

.k-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: #F2F2F5;
  color: var(--color-ink-soft);
}

.k-chip-success { background: var(--color-success-soft); color: var(--color-success); }
.k-chip-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.k-chip-danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.k-chip-accent  { background: rgba(0,113,227,0.10);      color: var(--color-accent); }

/* ─── Layout helpers ─── */

.k-shell {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.k-shell-narrow {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.k-stack-lg > * + * { margin-top: 24px; }
.k-stack-md > * + * { margin-top: 16px; }
.k-stack-sm > * + * { margin-top: 8px; }

/* ─── Wordmark ─── */

.k-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.k-wordmark .pad {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  padding: 2px 6px;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  position: relative;
  top: -1px;
}

/* ─── Flash messages ─── */

.k-flash {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid transparent;
}
.k-flash-success { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(10,127,96,0.20); }
.k-flash-error   { background: var(--color-danger-soft);  color: var(--color-danger);  border-color: rgba(176,0,31,0.18); }
.k-flash-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(178,80,0,0.18); }
.k-flash-info    { background: #F2F2F5;                   color: var(--color-ink-soft); border-color: var(--color-rule-soft); }

/* ─── Header / Footer ─── */

.k-header {
  background: rgba(251, 251, 253, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-rule-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.k-footer {
  border-top: 1px solid var(--color-rule-soft);
  color: var(--color-ink-mute);
  font-size: 12px;
  text-align: center;
  padding: 28px 20px;
  letter-spacing: 0.01em;
}

/* ─── Sync badge (PWA offline queue) ─── */

#pending-sync-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border: 1px solid rgba(178,80,0,0.20);
}

/* ─── Bon d'étiquettes rendu ─── */

.label-sheet-card {
  width: min(100%, 360px);
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #ECEEF1;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px rgba(16,24,40,.07);
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.label-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 11px;
}

.label-sheet-title {
  max-width: 110px;
  color: #6B7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.label-sheet-frame {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #F0F2F4;
  border-radius: 12px;
}

.label-sheet-banner {
  background: #C0152E;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 7px;
  text-align: center;
  text-transform: uppercase;
}

.label-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 9px;
}

.label-sheet-scan,
.label-sheet-label {
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.label-sheet-scan {
  position: relative;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: #FFFFFF;
  border: 1.5px solid #CDD2D8;
  border-radius: 8px;
  padding: 7px 9px;
}

.label-sheet-scan-name {
  color: #8A9097;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.label-sheet-separator {
  grid-column: 1 / -1;
  margin: 2px 0;
}

.label-sheet-separator-inner {
  background: #2F7DC0;
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px;
  text-align: center;
}

.label-sheet-label {
  position: relative;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  background: #FFFFFF;
  border: 1.6px solid var(--tube-border, #9AA0A7);
  border-radius: 8px;
  padding: 7px 15px 7px 17px;
  text-align: left;
  transition: border-color .25s ease, transform .12s ease;
}

.label-sheet-label.is-autre {
  background: #F6DE12;
}

.label-sheet-label:active {
  transform: scale(.955);
}

.label-sheet-label:focus-visible {
  outline: 2px solid var(--color-accent, #0071E3);
  outline-offset: 2px;
}

.label-sheet-label.is-removed {
  border-color: #CBD0D6;
}

.label-sheet-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background: var(--tube-border, #9AA0A7);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.08);
  pointer-events: none;
  z-index: 4;
}

.label-sheet-label-name {
  position: relative;
  z-index: 1;
  color: var(--tube-text, #5E646B);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  white-space: nowrap;
  transition: color .25s ease;
}

.label-sheet-label.is-removed .label-sheet-label-name {
  color: #A2A6AB;
}

.label-sheet-barcode {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 19px;
  background-color: #FFFFFF;
  border-radius: 1px;
}

.label-sheet-barcode-v0 {
  background-image: repeating-linear-gradient(90deg,#141414 0,#141414 1px,#fff 1px,#fff 3px,#141414 3px,#141414 5px,#fff 5px,#fff 6px,#141414 6px,#141414 7px,#fff 7px,#fff 9px,#141414 9px,#141414 12px,#fff 12px,#fff 13px,#141414 13px,#141414 14px,#fff 14px,#fff 17px,#141414 17px,#141414 19px,#fff 19px,#fff 21px,#141414 21px,#141414 22px,#fff 22px,#fff 24px);
}

.label-sheet-barcode-v1 {
  background-image: repeating-linear-gradient(90deg,#141414 0,#141414 2px,#fff 2px,#fff 3px,#141414 3px,#141414 4px,#fff 4px,#fff 7px,#141414 7px,#141414 8px,#fff 8px,#fff 10px,#141414 10px,#141414 13px,#fff 13px,#fff 14px,#141414 14px,#141414 16px,#fff 16px,#fff 17px,#141414 17px,#141414 20px,#fff 20px,#fff 22px,#141414 22px,#141414 23px,#fff 23px,#fff 25px);
}

.label-sheet-barcode-v2 {
  background-image: repeating-linear-gradient(90deg,#141414 0,#141414 1px,#fff 1px,#fff 4px,#141414 4px,#141414 6px,#fff 6px,#fff 7px,#141414 7px,#141414 9px,#fff 9px,#fff 11px,#141414 11px,#141414 12px,#fff 12px,#fff 15px,#141414 15px,#141414 16px,#fff 16px,#fff 18px,#141414 18px,#141414 21px,#fff 21px,#fff 22px,#141414 22px,#141414 24px,#fff 24px,#fff 26px);
}

.label-sheet-number {
  position: relative;
  z-index: 1;
  color: #3F4651;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

.label-sheet-tag {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  color: #A6ABB2;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 1;
}

.label-sheet-wipe {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #EEF0F3;
  border-radius: 6px;
  opacity: .6;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path .36s cubic-bezier(.4,0,.2,1);
}

.label-sheet-label.is-removed .label-sheet-wipe {
  clip-path: inset(0 0 0 0);
}

.tube-hotspot-check {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16A34A;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transform: scale(.5);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}

.label-sheet-label.is-removed .tube-hotspot-check {
  opacity: 1;
  transform: scale(1);
}

.tube-hotspot-check path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .34s ease .06s;
}

.label-sheet-label.is-removed .tube-hotspot-check path {
  stroke-dashoffset: 0;
}

.k-btn.is-selected {
  box-shadow: inset 0 0 0 2px #0A7F60;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .label-sheet-label,
  .label-sheet-wipe,
  .tube-hotspot-check,
  .tube-hotspot-check path {
    transition: none;
  }
}

/* ─── Misc ─── */

.hidden { display: none !important; }

button:disabled { cursor: not-allowed; }

[x-cloak] { display: none !important; }

[data-qr-overlay] {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.95);
  color: #FFFFFF;
}

[data-qr-overlay][hidden] {
  display: none !important;
}

[data-qr-reader],
[data-qr-reader] video {
  width: 100% !important;
  height: 100% !important;
}

[data-qr-reader] video {
  object-fit: cover !important;
}

[data-qr-error-panel].hidden {
  display: none !important;
}

/* Fix : l'attribut HTML natif [hidden] doit avoir priorité sur les utilitaires
   Tailwind (flex, grid, block…) qui appliquent aussi `display:`. Sans ce
   `!important`, `flex` vainc `hidden` sur les modales et elles restent visibles. */
[hidden] { display: none !important; }

::selection { background: rgba(0, 113, 227, 0.20); color: var(--color-ink); }

/* ─────────────  Viseur caméra onboarding (selfie ovale / carte rectangle)  ───────────── */
/* Piloté par media-capture.js : data-state = framing | scanning | captured sur .k-capture-stage. */
.k-capture-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.k-capture-guide {
  position: relative;
  overflow: hidden;                                   /* clippe la ligne de scan à la forme */
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);       /* assombrit tout SAUF le guide */
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.k-capture-oval .k-capture-guide {                    /* visage : ovale portrait ~0.77 */
  width: min(72vw, 300px);
  height: min(94vw, 392px);
  border-radius: 50%;
}
.k-capture-rect .k-capture-guide {                    /* carte ID-1 : ratio 1.586 */
  width: min(90vw, 460px);
  height: calc(min(90vw, 460px) / 1.586);
  border-radius: 16px;
}
/* Ligne de scan (cachée hors scan) */
.k-capture-scan {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  height: 3px;
  border-radius: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.95), transparent);
  box-shadow: 0 0 14px 2px rgba(0, 113, 227, 0.7);
}
/* État SCAN : halo bleu accent + balayage */
.k-capture-stage[data-state="scanning"] .k-capture-guide {
  border-color: rgba(0, 113, 227, 0.95);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 26px 5px rgba(0, 113, 227, 0.55);
}
.k-capture-stage[data-state="scanning"] .k-capture-scan {
  opacity: 1;
  animation: k-capture-sweep 1.5s ease-in-out forwards;
}
/* État CAPTURÉ : halo vert success */
.k-capture-stage[data-state="captured"] .k-capture-guide {
  border-color: #0A7F60;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 24px 4px rgba(10, 127, 96, 0.5);
}
@keyframes k-capture-sweep {
  0%   { transform: translateY(2px); }
  100% { transform: translateY(calc(100% - 4px)); }
}
/* Actions post-capture */
.k-capture-actions { display: flex; gap: 10px; }
.k-capture-ghost {
  flex: 1;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.k-capture-ghost:active { background: rgba(255, 255, 255, 0.08); }
/* Respecte la préférence « moins d'animations » : feedback statique, pas de balayage */
@media (prefers-reduced-motion: reduce) {
  .k-capture-stage[data-state="scanning"] .k-capture-scan { animation: none; opacity: 1; top: 50%; }
}