/* EAD · Órdenes de preparación → Albarán
   Concepto: la lettre de voiture (CMR). Chaque écran est un formulaire imprimé
   qu'on remplit, tamponne et détache. */

:root {
  /* encre & marque */
  --ink: #2a2222;
  --brand: #463939;
  --brand-strong: #2f2626;
  --muted: #6b6560;
  --on-dark: #f2eee7;
  --on-dark-2: #cfc6bb;
  --arrow: #9fb2dd;

  /* papier */
  --paper: #f2eee7;
  --sheet: #fffdf8;
  --sheet-2: #f8f4ec;
  --sheet-3: #efe9df;

  /* filets */
  --rule: #dcd5ca;
  --rule-soft: #ece6dc;
  --rule-strong: #b9afa2;
  --rule-ink: #463939;

  /* accent : bleu tampon */
  --accent: #2e4a8c;
  --accent-tint: #e9edf6;
  --accent-ring: rgba(46, 74, 140, .22);
  --focus: #2e4a8c;

  /* états */
  --crit: #b42318; --crit-bg: #fcedea; --crit-mark: #b42318;
  --warn: #8a4b00; --warn-bg: #fff4db; --warn-mark: #b87a00;
  --ok: #1f6b3a;   --ok-bg: #e7f3ea;   --ok-mark: #2e8049;
  --info: #6b6560; --info-bg: #f3efe8; --info-mark: #b9afa2;
  --changed-bg: #fff3c4;

  /* typo */
  --font-sans: "Archivo", system-ui, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* rayons */
  --r-1: 2px; --r-2: 4px; --r-3: 3px;

  /* ombres */
  --shadow-sheet: 0 1px 0 rgba(42,34,34,.04), 0 1px 2px rgba(42,34,34,.06), 0 10px 24px -14px rgba(42,34,34,.20);
  --shadow-lift: 0 2px 4px rgba(42,34,34,.08), 0 18px 40px -16px rgba(42,34,34,.30);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-stamp: cubic-bezier(.3, 1.5, .55, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  --page-max: 1240px;
}

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--font-sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent); text-underline-offset: 3px; }
::selection { background: var(--accent-tint); }

h1, h2 { font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: 20px; line-height: 1.25; margin: 0 0 4px; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono, .mono-sm { font-family: var(--font-mono); }
.mono-sm { font-size: 13px; }
.lbl {
  font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================ en-tête */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--brand-strong); color: var(--on-dark);
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 24px;
  border-bottom: 3px solid var(--brand);
}
.top :focus-visible { outline-color: var(--on-dark); }
.top-logo { display: block; flex: none; padding-right: 16px; border-right: 1px solid rgba(242,238,231,.18); line-height: 0; }
.top-logo img { height: 36px; width: auto; display: block; transition: transform var(--t-base) var(--ease-out); }
.top-logo:hover img { transform: rotate(-3deg); }
.top-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.top-kicker { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.top h1 { font-size: 17px; line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrow { font-family: var(--font-mono); font-weight: 500; color: var(--arrow); display: inline-block; }
.who { font: 400 12px var(--font-mono); color: var(--on-dark-2); }
.top form { margin: 0; }
.btn-ghost {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  background: transparent; color: var(--on-dark); text-decoration: none;
  border: 1px solid rgba(242,238,231,.35); border-radius: var(--r-2);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:hover { background: rgba(242,238,231,.10); border-color: rgba(242,238,231,.6); }

main { max-width: var(--page-max); margin: 0 auto; padding: 40px 24px 96px; }

/* ================================================================ cartes & cases */
.card {
  position: relative;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--shadow-sheet);
  margin-bottom: 28px;
  scroll-margin-top: 88px;
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 32px; border-bottom: 1px solid var(--rule);
}
.card-head p { margin: 2px 0 0; max-width: 62ch; }
.folio { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 4px; }

/* cases numérotées CMR */
.boxes { counter-reset: box; }
.box { counter-increment: box; position: relative; background: var(--sheet); padding: 34px 20px 20px; }
.box::before {
  content: counter(box, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font: 600 11px/1 var(--font-mono); color: var(--brand);
  padding: 5px 7px; background: var(--sheet-2);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.box > .lbl:first-child, .box-lbl { position: absolute; top: 5px; left: 40px; }

/* ================================================================ formulaires */
label { font-size: 13px; font-weight: 500; }
input[type=text], input[type=password], input[type=email], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder { color: #a39a90; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--r-2);
  padding: 0 18px; height: 40px; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base);
}
.btn:hover { background: var(--brand-strong); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { background: #ddd6cc; color: #7a726b; cursor: not-allowed; transform: none; }
.btn-go { width: 100%; height: 50px; justify-content: space-between; font-size: 16px; }
.go-arrow { font-family: var(--font-mono); font-weight: 500; transition: transform var(--t-base) var(--ease-out); }
.btn:not(:disabled):hover .go-arrow { transform: translateX(4px); }
.btn-light {
  display: inline-flex; align-items: center; height: 36px;
  background: var(--sheet); color: var(--brand); border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  padding: 0 13px; cursor: pointer; font-weight: 500; font-size: 14px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.btn-light:hover { border-color: var(--brand); background: #fff; }
.btn-light:active { transform: translateY(1px); }
.btn-light.small { height: 30px; padding: 0 10px; font-size: 13px; }

/* bandeaux erreur / notice (dérivés de msg_box) */
p.error, p.notice {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  margin: 0; padding: 10px 14px; border-radius: var(--r-1); border-left: 3px solid; font-size: 14px;
}
p.error { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-mark); }
p.notice { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-mark); }
p.error::before, p.notice::before { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; }
p.error::before { content: "ERROR"; }
p.notice::before { content: "AVISO"; }

/* ================================================================ envoi */
.upload {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1px;
  background: var(--rule);
}
.side { display: grid; grid-template-rows: auto 1fr; gap: 1px; background: var(--rule); }
.side .box { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
#transp {
  height: 50px; font: 500 18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
}
#transp::placeholder { text-transform: none; letter-spacing: 0; font-size: 15px; font-family: var(--font-sans); }
.box-go .error { margin-top: 2px; }

/* vitre du scanner */
.drop {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 252px; padding: 40px 24px 28px; cursor: pointer;
  background-color: var(--sheet-2);
  background-image: radial-gradient(var(--rule-strong) .9px, transparent 1.3px);
  background-size: 16px 16px;
  transition: background-color var(--t-base);
}
.drop .crop {
  position: absolute; inset: 34px 16px 16px; pointer-events: none; z-index: -1;
  --c: var(--brand);
  background:
    linear-gradient(var(--c), var(--c)) top left / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 22px no-repeat;
  transition: inset var(--t-slow) var(--ease-out);
}
.drop:hover { background-color: var(--sheet-3); }
.drop:hover .crop { inset: 31px 13px 13px; }
.drop.over { background-color: var(--accent-tint); background-image: radial-gradient(rgba(46,74,140,.35) .9px, transparent 1.3px); }
.drop.over .crop { inset: 26px 8px 8px; --c: var(--accent); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: -4px; }
.drop-ico { width: 48px; height: 48px; color: var(--brand); margin-bottom: 10px; overflow: visible; }
.drop-ico .ico-sheet { transition: transform var(--t-slow) var(--ease-out); }
.drop:hover .ico-sheet, .drop.over .ico-sheet { transform: translateY(5px); }
.drop.over .drop-ico { color: var(--accent); }
.drop-title { font-size: 19px; font-weight: 600; color: var(--ink); font-stretch: 105%; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop.has-files .drop-ico { width: 34px; height: 34px; margin-bottom: 4px; }

.filelist {
  counter-reset: f; list-style: none; margin: 16px 0 0; padding: 0;
  width: min(100%, 520px); text-align: left;
}
.filelist li {
  counter-increment: f;
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 7px 4px; border-top: 1px dashed var(--rule-strong);
  font: 400 13px var(--font-mono); color: var(--ink);
}
.filelist li:last-child { border-bottom: 1px dashed var(--rule-strong); }
.filelist li::before { content: counter(f, decimal-leading-zero); color: var(--muted); font-weight: 600; }
.filelist .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .fs { color: var(--muted); }

/* ligne de balayage pendant la lecture */
.scanline {
  position: absolute; left: 16px; right: 16px; top: 34px; height: 2px; z-index: 1; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 14px 2px var(--accent-ring), 0 0 2px var(--accent);
  opacity: 0;
}
.scanline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 46px;
  background: linear-gradient(to top, rgba(46,74,140,.14), transparent);
}
#send.reading .scanline { opacity: 1; animation: scan 2.6s var(--ease-in-out) infinite alternate; }
#send.reading .scanline::after { animation: scan-glow 2.6s steps(1) infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(calc(var(--scan-h, 220px))); } }
@keyframes scan-glow { 0% { transform: none; } 50% { transform: scaleY(-1) translateY(-48px); } }
#send.reading .drop { cursor: progress; }
#send.reading .side { opacity: .55; pointer-events: none; transition: opacity var(--t-base); }

/* ================================================================ progression */
.progress {
  display: none; padding: 18px 32px 20px; border-top: 1px solid var(--rule); background: var(--sheet-2);
}
.progress.on { display: block; animation: rise var(--t-slow) var(--ease-out) both; }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.progress-row .lbl { color: var(--accent); font-weight: 600; }
.progress-txt { font: 400 13px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.scanbar { position: relative; height: 4px; background: var(--rule); overflow: hidden; }
.scanbar i {
  position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(0);
}
.scanbar i::after {
  content: ""; position: absolute; inset: 0; width: 60px; right: 0; left: auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { opacity: .2; } 50% { opacity: 1; } to { opacity: .2; } }
.steps {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8c8278;
}
.steps li { position: relative; padding-top: 10px; transition: color var(--t-base); }
.steps li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 1px;
  border: 1.5px solid currentColor; transition: background var(--t-base), border-color var(--t-base);
}
.steps li.done { color: var(--muted); }
.steps li.done::before { background: var(--muted); }
.steps li.now { color: var(--accent); }
.steps li.now::before { background: var(--accent); animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ================================================================ carte de commande */
.order { overflow: visible; }
.order::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: var(--r-2) var(--r-2) 0 0; background: var(--rule-strong);
}
.order.state-crit::before { background: var(--crit-mark); }
.order.state-warn::before { background: var(--warn-mark); }
.order.state-ok::before { background: var(--ok-mark); }

.order-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start;
  padding: 26px 32px 20px; border-bottom: 1px solid var(--rule);
}
.order-head .titles { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: end; }
.order-id { margin: 0; grid-row: span 2; }
.order-id .lbl { display: block; margin-bottom: 6px; }
.order-id .num {
  display: inline-block; font: 600 30px/1 var(--font-mono); letter-spacing: .03em; color: var(--ink);
  padding: 7px 12px 8px; border: 2px solid var(--ink); border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
}
.order-client { margin: 0 0 2px; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-meta { margin: 0; font: 400 12.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-meta b { font-weight: 600; color: var(--ink); }
.order-pdf { text-transform: none; }

/* tampons d'état */
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 700 12px/1 var(--font-sans); font-stretch: 115%; text-transform: uppercase; letter-spacing: .14em;
  padding: 8px 11px 7px; border: 2px solid currentColor; border-radius: var(--r-3);
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px currentColor;
}
.pill.ok { color: var(--ok); background: var(--ok-bg); box-shadow: inset 0 0 0 2px var(--ok-bg), inset 0 0 0 3px currentColor; }
.pill.warn { color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--warn-bg), inset 0 0 0 3px currentColor; }
.pill.crit { color: var(--crit); background: var(--crit-bg); box-shadow: inset 0 0 0 2px var(--crit-bg), inset 0 0 0 3px currentColor; }
.pill.reviewed { transform: rotate(-3deg); mix-blend-mode: multiply; }

/* avertissements */
.warns { list-style: none; padding: 0; margin: 16px 32px 0; display: grid; gap: 6px; }
details > .warns { margin: 10px 0 0; }
.warns li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 8px 12px; border-radius: var(--r-1); border-left: 3px solid; font-size: 14px; color: var(--ink);
}
.warns li::before { font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; }
.warns li.critical { border-color: var(--crit-mark); background: var(--crit-bg); }
.warns li.critical::before { content: "CRÍTICO"; color: var(--crit); }
.warns li.warn { border-color: var(--warn-mark); background: var(--warn-bg); }
.warns li.warn::before { content: "AVISO"; color: var(--warn); }
.warns li.info { border-color: var(--info-mark); background: var(--info-bg); color: var(--muted); }
.warns li.info::before { content: "INFO"; color: var(--info); }

details { margin: 14px 32px 0; }
summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  padding: 6px 0;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "▸"; display: inline-block; transition: transform var(--t-base) var(--ease-out);
}
details[open] > summary::before { transform: rotate(90deg); }
summary:hover { color: var(--ink); }
details[open] > :not(summary) { animation: rise var(--t-base) var(--ease-out) both; }

/* tableau */
.tablewrap { overflow-x: auto; margin: 18px 32px 0; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 940px; font-size: 14px; }
th {
  text-align: left; white-space: nowrap;
  font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--sheet-2); padding: 11px 8px 10px; border-bottom: 1.5px solid var(--rule-ink);
}
th.num { text-align: right; padding-right: 11px; }
td { padding: 2px 4px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; position: relative; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--sheet-2); }
tr:last-child td { border-bottom: 0; }
td input[type=text] {
  width: 100%; height: 32px; border: 1px solid transparent; border-radius: var(--r-1); padding: 5px 7px; background: transparent;
  font-variant-numeric: tabular-nums;
}
td.mono input[type=text] { font: 400 13px var(--font-mono); }
td.col-lin input[type=text] { color: var(--muted); }
td input[type=text]:hover { border-color: var(--rule); background: #fff; }
td input[type=text]:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-ring); }
td input.changed { background: var(--changed-bg); }
td:has(input.changed)::after {
  content: ""; position: absolute; top: 3px; right: 5px; pointer-events: none;
  border: 4px solid transparent; border-top-color: var(--warn-mark); border-right-color: var(--warn-mark);
  animation: fold var(--t-base) var(--ease-out) both;
}
@keyframes fold { from { transform: scale(0); transform-origin: top right; } }
td.num input { text-align: right; }
tr.flag-critical { background: #fdf3f1; }
tr.flag-warn { background: #fff9ea; }
tr.flag-critical td:first-child { box-shadow: inset 3px 0 0 var(--crit-mark); }
tr.flag-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-mark); }
tr.flag-critical td:first-child::before {
  content: "!"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font: 700 12px var(--font-mono); color: var(--crit);
}
.col-lin { width: 62px; } .col-art { width: 118px; } .col-lote { width: 116px; }
.col-qty { width: 96px; } .col-peso { width: 108px; } .col-date { width: 116px; } .col-act { width: 100px; }
.rowact { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.icon-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  background: none; border: 0; cursor: pointer; color: var(--muted); border-radius: var(--r-1);
  transition: color var(--t-fast), background var(--t-fast);
}
.icon-btn:hover { color: var(--crit); background: var(--crit-bg); }
.remember {
  display: flex; gap: 4px; align-items: center; white-space: nowrap; cursor: pointer;
  font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--warn);
}
.remember input { accent-color: var(--brand); margin: 0; }

/* cabecera */
.hdr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
  margin: 10px 0 0; background: var(--rule); border: 1px solid var(--rule);
}
.hdr-grid > div { display: flex; flex-direction: column; gap: 6px; background: var(--sheet); padding: 12px 14px 14px; }
.hdr-grid label { font: 500 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hdr-grid textarea { min-height: 96px; resize: vertical; }
.hdr-grid .wide { grid-column: 1 / -1; }

/* actions */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 32px 20px; }
.actions .spacer { flex: 1; }
.note { font: 500 12px var(--font-mono); color: var(--warn); display: inline-flex; gap: 6px; align-items: center; }
.note::before { content: "●"; font-size: 9px; }

/* talon de téléchargement */
.stub {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--sheet-3); padding: 22px 32px 24px; margin-top: 4px;
  border-top: 2px dashed var(--rule-strong);
  transition: opacity var(--t-base);
}
.stub::before, .stub::after {
  content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule);
}
.stub::before { left: -10px; clip-path: inset(0 0 0 50%); }
.stub::after { right: -10px; clip-path: inset(0 50% 0 0); }
.stub > .lbl { flex-basis: 100%; }
.order:last-child .stub, .order .stub:last-child { border-radius: 0 0 var(--r-2) var(--r-2); }
.stub .hatch {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(70,57,57,.08) 8px 16px);
  transition: opacity var(--t-slow);
}
.stub.locked .hatch { opacity: 1; }
.actions.dls { margin: 0; padding: 0; gap: 18px; }
.dl { height: 44px; padding: 0 18px; gap: 10px; }
.dl svg { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-out); }
.dl:hover svg { transform: translateY(2px); }
a.btn { text-decoration: none; }
.disabled-link { pointer-events: none; opacity: .45; filter: grayscale(.4); transition: opacity var(--t-base); }
.csvs { font: 400 13px var(--font-mono); display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.csvs > span { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.csvs a { color: var(--accent); }

.card > .error { margin: 0 32px 16px; }
.order > details:last-child { padding-bottom: 22px; margin-bottom: 0; }
.order > .stub + .error { margin-top: 16px; }

/* carte d'erreur */
.order-error { padding: 24px 32px; display: grid; gap: 12px; }
.order-error h2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 16px var(--font-mono); margin: 0; }

/* ================================================================ auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 44%) 1fr; }
.auth-brand {
  position: relative; overflow: hidden;
  background: var(--brand-strong); color: var(--on-dark);
  padding: 48px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.auth-brand::after { /* perforation verticale */
  content: ""; position: absolute; top: 0; bottom: 0; right: -7px; width: 14px;
  background: radial-gradient(circle at 50% 50%, var(--paper) 4.5px, transparent 5px) 0 0 / 14px 18px repeat-y;
}
.auth-brand::before { /* trame fine */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(242,238,231,.08) 1px, transparent 1.2px); background-size: 18px 18px;
}
.auth-logo { height: 44px; width: auto; position: relative; align-self: flex-start; }
.auth-hero { position: relative; display: grid; gap: 40px; }
.auth-title {
  margin: 0; display: flex; flex-direction: column;
  font-weight: 800; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(34px, 4.1vw, 56px); line-height: .96; letter-spacing: -.01em;
}
.auth-title span { display: block; }
.auth-title .arrow { font-weight: 500; margin-right: .1em; }
.stack { position: relative; height: 190px; width: 260px; margin-left: 6px; }
.sheet {
  position: absolute; left: 0; top: 0; width: 220px; height: 148px; border-radius: 2px;
  background: var(--sheet); box-shadow: var(--shadow-lift);
}
.sheet.s3 { opacity: .55; transform: rotate(-7deg) translate(-6px, 10px); }
.sheet.s2 { opacity: .8; transform: rotate(-2.5deg) translate(4px, 4px); }
.sheet.s1 { transform: rotate(3deg) translate(18px, 0); overflow: hidden; }
.sheet-box {
  position: absolute; left: 0; top: 0; font: 600 9px/1 var(--font-mono); font-style: normal; color: var(--brand);
  padding: 4px 5px; background: var(--sheet-2); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.sheet-lines {
  position: absolute; left: 16px; right: 16px; top: 34px; height: 92px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 18px);
}
.sheet-lines::before {
  content: ""; position: absolute; left: 0; top: 0; width: 48%; height: 100%;
  background: repeating-linear-gradient(to bottom, transparent 0 6px, var(--rule-strong) 6px 10px, transparent 10px 18px);
  opacity: .6;
}
.sheet-stamp {
  position: absolute; right: 14px; bottom: 14px; font: 700 12px/1 var(--font-sans); font-style: normal; font-stretch: 115%;
  letter-spacing: .14em; color: var(--ok); padding: 6px 8px 5px; border: 2px solid currentColor; border-radius: var(--r-3);
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px currentColor; transform: rotate(-8deg);
}
.auth-foot { position: relative; margin: 0; font: 500 11px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }

.auth-main { display: grid; place-items: center; padding: 48px 24px; max-width: none; margin: 0; }
.auth-form { width: 100%; max-width: 400px; }
.kicker { margin: 0 0 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auth-form h1 { font-size: 32px; line-height: 1.1; font-weight: 700; margin: 0 0 10px; }
.auth-form > .muted { margin: 0 0 4px; }
.auth-form form { display: grid; gap: 1px; margin-top: 24px; background: var(--rule); border: 1px solid var(--rule); box-shadow: var(--shadow-sheet); }
.auth-form form .box input { height: 46px; font-size: 16px; }
.auth-form form > p.error, .auth-form form > p.notice { border-radius: 0; }
.auth-form form > .btn { border-radius: 0; height: 54px; padding: 0 20px; }
.auth-form > p.error, .auth-form > p.notice { margin-top: 18px; }
.auth-link { margin: 28px 0 0; font-size: 14px; }

/* ================================================================ admin */
.admin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.admin-notices { grid-column: 1 / -1; display: grid; gap: 8px; }
.admin-notices:not(:empty) { margin-bottom: 20px; }
.admin-invite { grid-column: span 4; position: sticky; top: 92px; }
.admin-accounts { grid-column: span 8; }
.admin-log { grid-column: 1 / -1; }
.invite-form { display: grid; gap: 1px; background: var(--rule); border-radius: 0 0 var(--r-2) var(--r-2); overflow: hidden; }
.invite-form input { height: 44px; }
.invite-form .box:last-child { padding-top: 20px; }
.invite-form .box:last-child::before { display: none; }
.admin .tablewrap { margin: 0; border: 0; border-radius: 0 0 var(--r-2) var(--r-2); }
table.plain { min-width: 560px; }
table.plain td { padding: 10px 12px; font-size: 14px; }
table.plain th { padding-left: 12px; }
table.plain td.mono { font: 400 13px var(--font-mono); }
.acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.acts form { margin: 0; }
.tag {
  display: inline-block; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid; border-radius: var(--r-1);
}
.tag-activa { color: var(--ok); background: var(--ok-bg); }
.tag-invitada { color: var(--accent); background: var(--accent-tint); }
.tag-desactivada { color: var(--muted); background: var(--info-bg); text-decoration: line-through; }
.admin-log { padding-left: 22px; }
.admin-log::before { /* bande « tractor feed » */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-right: 1px dashed var(--rule-strong);
  background: radial-gradient(circle, var(--paper) 3.5px, transparent 4px) 50% 8px / 22px 16px repeat-y;
}
table.log td { font: 400 13px var(--font-mono); }
table.log tbody tr:nth-child(even) { background: var(--sheet-2); }
.linkbox { width: 100%; margin-top: 6px; font: 400 13px var(--font-mono); padding: 8px; border: 1px dashed var(--rule-strong); border-radius: var(--r-1); background: #fff; }

/* ================================================================ motion : entrées */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes settle {
  from { opacity: 0; transform: translateY(18px) scale(.99); box-shadow: var(--shadow-lift); }
  to { opacity: 1; transform: none; box-shadow: var(--shadow-sheet); }
}
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.9) rotate(var(--rot, 0deg)); }
  55% { opacity: 1; transform: scale(.94) rotate(var(--rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); }
}
@keyframes row-in { from { opacity: 0; transform: translateX(-6px); } }
@keyframes row-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes flash-crit { 0%, 100% { background: var(--crit-bg); } 30% { background: #f8d3cc; } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes deal { from { opacity: 0; transform: translate(-40px, 40px) rotate(-14deg); } }
@keyframes cascade { from { opacity: 0; transform: translateY(14px); } }

.top { animation: cascade var(--t-slow) var(--ease-out) both; }
main > .card, main > section { animation: settle 620ms var(--ease-out) both; }
main > .card:nth-of-type(2) { animation-delay: 70ms; }
main > .card:nth-of-type(3) { animation-delay: 140ms; }
.admin-notices { animation: rise var(--t-slow) var(--ease-out) both; }

.order.is-new { animation: settle 620ms var(--ease-out) both; }
.order.is-new .pill { --rot: 0deg; animation: stamp 420ms var(--ease-out) 380ms both; }
.order.is-new .pill.reviewed, .order.just-saved .pill.reviewed { --rot: -3deg; }
.order.just-saved .pill { animation: stamp 460ms var(--ease-out) both; }
.order.is-new .warns li { animation: rise var(--t-base) var(--ease-out) both; animation-delay: calc(240ms + var(--i, 0) * 45ms); }
.order.is-new .warns li.critical { animation: rise var(--t-base) var(--ease-out) both, flash-crit 900ms var(--ease-in-out) 700ms 1; animation-delay: calc(240ms + var(--i, 0) * 45ms), 700ms; }
.order.is-new tbody tr.cascade { animation: row-in 320ms var(--ease-out) both; animation-delay: calc(300ms + var(--i, 0) * 22ms); }
tbody tr.row-added { animation: row-in var(--t-base) var(--ease-out) both; }
tbody tr.row-leaving { animation: row-out 200ms var(--ease-in-out) forwards; pointer-events: none; }
.note:not([hidden]) { animation: rise var(--t-base) var(--ease-out) both; }
.shake { animation: shake 360ms var(--ease-in-out); }
p.error[role=alert]:not([hidden]) { animation: rise var(--t-base) var(--ease-out) both; }
.filelist li { animation: rise 300ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }

.btn.is-saving { position: relative; color: transparent; pointer-events: none; }
.btn.is-saving::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite;
}
.btn-light.is-saving::after { border-color: var(--rule); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* auth */
.auth-brand { animation: none; }
.auth-logo { animation: rise var(--t-slow) var(--ease-out) both; }
.auth-title span { animation: cascade 620ms var(--ease-out) both; }
.auth-title span:nth-child(2) { animation-delay: 80ms; }
.auth-title span:nth-child(3) { animation-delay: 160ms; }
.sheet.s3 { animation: deal 700ms var(--ease-out) 260ms both; }
.sheet.s2 { animation: deal 700ms var(--ease-out) 360ms both; }
.sheet.s1 { animation: deal 700ms var(--ease-out) 460ms both; }
.sheet-stamp { --rot: -8deg; animation: stamp 420ms var(--ease-out) 1150ms both; }
.auth-form > * { animation: cascade 560ms var(--ease-out) both; }
.auth-form > :nth-child(2) { animation-delay: 60ms; }
.auth-form > :nth-child(3) { animation-delay: 120ms; }
.auth-form > :nth-child(4) { animation-delay: 180ms; }
.auth-form > :nth-child(5) { animation-delay: 240ms; }
.auth-form > :nth-child(6) { animation-delay: 300ms; }

/* ================================================================ responsive */
@media (max-width: 1024px) {
  .admin-invite, .admin-accounts { grid-column: 1 / -1; position: static; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 20px 20px 24px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .auth-brand::after { top: auto; left: 0; right: 0; bottom: -7px; width: auto; height: 14px;
    background: radial-gradient(circle at 50% 50%, var(--paper) 4.5px, transparent 5px) 0 0 / 18px 14px repeat-x; }
  .auth-logo { height: 34px; align-self: center; }
  .auth-hero { gap: 0; }
  .auth-title { font-size: 19px; line-height: 1.05; }
  .stack, .auth-foot { display: none; }
  .auth-main { place-items: start center; padding: 36px 16px 48px; }
}
@media (max-width: 760px) {
  .top { height: 56px; padding: 0 16px; gap: 12px; }
  .top-logo { padding-right: 12px; }
  .top-logo img { height: 30px; }
  .top-kicker, .who { display: none; }
  .top h1 { font-size: 15px; }
  main { padding: 24px 12px 64px; }
  .card-head { padding: 18px 18px; }
  .folio { display: none; }
  .upload { grid-template-columns: 1fr; }
  .drop { min-height: 200px; }
  .progress { padding: 16px 18px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li:nth-child(n+4) { display: none; }
  .order-head { padding: 22px 18px 16px; grid-template-columns: 1fr; }
  .order-head .titles { grid-template-columns: 1fr; row-gap: 10px; }
  .order-id { grid-row: auto; }
  .order-id .num { font-size: 24px; }
  .warns { margin: 14px 18px 0; }
  .warns li { grid-template-columns: 1fr; gap: 2px; }
  details { margin: 14px 18px 0; }
  .tablewrap { margin: 16px 18px 0; }
  .actions { padding: 14px 18px 18px; }
  .stub { padding: 20px 18px 22px; }
  .card > .error { margin: 0 18px 14px; }
  .icon-btn { width: 36px; height: 36px; }
  .btn-ghost { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 480px) {
  .top-title { display: none; }
  .top-logo { margin-right: auto; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  #send.reading .scanline { opacity: .9; animation: none !important; top: 50%; }
  .steps li.now::before { animation: none !important; }
  .btn.is-saving::after { animation: spin 1.6s linear infinite !important; }
}

/* ================================================================ dépôt : compléments motion */
.drop-label { display: grid; }
.drop-label > * { grid-area: 1 / 1; transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.drop-hot { opacity: 0; transform: translateY(6px); color: var(--accent); }
.drop.over .drop-idle { opacity: 0; transform: translateY(-6px); }
.drop.over .drop-hot { opacity: 1; transform: none; }
.drop.over * { pointer-events: none; }
body.dragging .drop:not(.over) .crop { inset: 30px 12px 12px; --c: var(--accent); }
body.dragging .drop:not(.over) { background-color: var(--sheet-3); }
#go { position: relative; overflow: hidden; isolation: isolate; }
#go.is-ready::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  transform: translateX(-100%); animation: sheen 640ms var(--ease-out) 80ms 1 forwards;
}
@keyframes sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { #go.is-ready::after { display: none; } }