

.scn{width:100%;max-width:470px;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.65)}
.scn-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#F0F2F9;
  border-bottom:1px solid rgba(11,15,34,.08)}
.scn-bar s{width:9px;height:9px;border-radius:50%;background:#D9DDEC}
.scn-bar s:first-child{background:#FF8A8A}
.scn-bar s:nth-child(2){background:#FFD37D}
.scn-bar s:nth-child(3){background:#8FE3B0}
.scn-bar u{text-decoration:none;margin-left:7px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scn-bar em{margin-left:auto;flex:none;font-style:normal;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:rgba(255,197,61,.3);color:#7A5E14}
.scn-in{padding:14px 16px 16px;display:grid;gap:8px;justify-items:start}
.scn.nuit .scn-in{background:#171B2B}


.app{opacity:0;transform:translateY(6px);animation:scn-app .4s ease forwards}
@keyframes scn-app{to{opacity:1;transform:none}}
.scn .de{margin:0;font-size:12.5px;color:var(--ink-4)}
.scn .de b{color:var(--ink)}
.scn .obj{margin:0;font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.scn .corps{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.scn .corps.sc{position:relative;overflow:hidden;padding:2px 4px;border-radius:6px}
.scn .corps.sc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(18,194,224,.3) 50%,transparent 80%);
  transform:translateX(-100%);animation:scn-scan 1.1s ease .15s forwards}
@keyframes scn-scan{to{transform:translateX(100%)}}
.scn .chip{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px}
.scn .chip.v{background:var(--ok-soft);color:#06614A}
.scn .chip.t{background:var(--cy-soft,#DDF4F9);color:#075E6E}
.scn .chip.f{background:var(--v-soft);color:var(--v-ink)}
.scn .champ{margin:0;display:grid;gap:1px}
.scn .champ small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4)}
.scn .champ b{font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.scn .ligne{margin:0;width:100%;display:flex;justify-content:space-between;gap:14px;
  font-size:13px;color:var(--ink-3)}
.scn .ligne b{color:var(--ink)}
.scn .ligne.total{border-top:1px dashed var(--line);padding-top:7px;font-weight:600}
.scn .gros-montant{margin:0;font-family:var(--f-mono);font-weight:600;font-size:27px;
  letter-spacing:-.03em;color:var(--ink)}
.scn .bulle{max-width:100%;background:#2B3149;color:#EAEEFC;border-radius:12px;
  padding:10px 13px;font-size:12.5px;line-height:1.5}
.scn .bulle b{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8B93B8;margin-bottom:4px}
.scn .bulle.wa{background:#DCF8C6;color:#173D24}
.scn .bulle.wa b{color:#4E7A5C}
.scn .tape{min-height:72px}
.scn .curseur{display:inline-block;width:2px;height:13px;background:var(--v);
  vertical-align:-2px;margin-left:1px;animation:scn-cli .8s steps(1) infinite}
@keyframes scn-cli{50%{opacity:0}}


.scn .ocr{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;width:100%}
.scn .feuille{position:relative;overflow:hidden;background:#FBFCFE;border:1px solid var(--line);
  border-radius:8px;padding:12px 12px 14px;display:grid;gap:7px;justify-items:start}
.scn .feuille b{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3)}
.scn .feuille s{display:block;width:100%;height:6px;border-radius:3px;background:rgba(11,15,34,.12);
  text-decoration:none}
.scn .feuille s.mi{width:52%}
.scn .feuille .scan{position:absolute;left:0;right:0;top:0;height:14px;border-radius:3px;
  background:linear-gradient(180deg,rgba(18,194,224,.4),rgba(18,194,224,0));
  animation:scn-bal 1.5s ease-in-out .1s 2}
@keyframes scn-bal{50%{transform:translateY(96px)}}
.scn .champs{display:grid;gap:6px;justify-items:start}
.scn .feuille.pleine{width:100%;padding:14px 16px 16px}
.scn .feuille.pleine b{font-size:12px;letter-spacing:.02em;color:var(--ink);
  font-family:var(--f-sans);font-weight:700}
.scn .feuille .sign{margin-top:6px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;
  color:var(--v-ink);border-bottom:1.5px dashed var(--v);padding-bottom:3px}


.scn .tbl{width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.scn .tr{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:8px;padding:6px 10px;
  font-size:11.5px;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.scn .tr:last-child{border-bottom:0}
.scn .tr.th{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);background:#F6F8FC}
.scn .tr.neuf{background:var(--v-soft);color:var(--ink);font-weight:600}

@media (prefers-reduced-motion: reduce){
  .app{animation:none;opacity:1;transform:none}
  .scn .corps.sc::after,.scn .feuille .scan{animation:none;display:none}
  .scn .curseur{animation:none}
}
