/* =====================================================================
 *  Documents : 58 mm, 80 mm (thermique) et A4 (facture)
 *  Écran : largeur en px = moitié des points imprimante (rendu x2 => 384 / 576 points)
 *  Toutes les tailles internes sont en "em" => même mise en page à l'écran,
 *  dans le raster ESC/POS et à l'impression.
 * ===================================================================== */
.receipt { background: #fff; color: #000; box-shadow: 0 2px 14px rgba(0,0,0,.12); line-height: 1.3; word-wrap: break-word; overflow-wrap: anywhere; }
.receipt img { display: block; }
.capturing .receipt { box-shadow: none; }

/* ---------- Thermique ---------- */
.receipt.paper-58 { width: 192px; font-size: 11px; padding: 0.4em 0.2em; }
.receipt.paper-80 { width: 288px; font-size: 12px; padding: 0.4em 0.2em; }
.r-center { text-align: center; }
.r-logo { max-width: 70%; max-height: 7em; margin: 0 auto 0.3em; object-fit: contain; filter: grayscale(1) contrast(1.2); }
.r-store { text-align: center; font-weight: 700; font-size: 1.35em; margin-bottom: 0.15em; }
.r-small { font-size: 0.85em; }
.r-header { margin-top: 0.3em; }
.r-sep { border-top: 1px dashed #000; margin: 0.45em 0; }
.r-title { text-align: center; font-weight: 700; font-size: 1.2em; letter-spacing: 0.05em; margin-bottom: 0.25em; }
.r-row { display: flex; justify-content: space-between; gap: 0.6em; }
.r-row > :last-child { text-align: right; white-space: nowrap; }
.r-row .r-des { white-space: normal; text-align: start; }
.r-item { margin-bottom: 0.25em; }
.r-des { font-weight: 600; }
.r-sub { padding-left: 0.6em; }
.r-total { font-weight: 700; font-size: 1.3em; margin: 0.2em 0; }
.r-due { font-weight: 700; }
.r-footer { margin-top: 0.4em; font-weight: 600; }
.r-codes { margin-top: 0.5em; text-align: center; }
.r-codes .qr { width: 50%; margin: 0 auto 0.3em; image-rendering: pixelated; }
.r-codes .barcode { width: 90%; height: 3.5em; margin: 0 auto 0.15em; }

/* ---------- A4 ---------- */
.receipt.paper-A4 { width: 794px; min-height: 1123px; font-size: 13px; padding: 40px 44px; display: flex; flex-direction: column; }
.a4-head { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; border-bottom: 3px solid #1d2433; padding-bottom: 18px; }
.a4-store { display: flex; gap: 16px; align-items: flex-start; }
.a4-logo { max-width: 130px; max-height: 90px; object-fit: contain; }
.a4-store-name { font-size: 1.6em; font-weight: 700; margin-bottom: 4px; }
.a4-legal { color: #555; font-size: .9em; margin-top: 4px; }
.a4-title { text-align: right; }
.a4-doc-label { font-size: 2em; font-weight: 800; letter-spacing: .06em; color: #1d4ed8; margin-bottom: 8px; }
.a4-meta { margin-left: auto; border-collapse: collapse; }
.a4-meta th { text-align: left; color: #666; font-weight: 400; padding: 2px 12px 2px 0; }
.a4-meta td { text-align: right; padding: 2px 0; }
.a4-header-text { margin-top: 14px; color: #333; }
.a4-customer { margin: 22px 0 6px auto; width: 48%; border: 1px solid #d5d9e2; border-radius: 6px; padding: 12px 14px; background: #f8f9fb; }
.a4-customer-label { font-size: .8em; text-transform: uppercase; color: #666; letter-spacing: .08em; }
.a4-customer-name { font-weight: 700; font-size: 1.15em; }
.a4-items { width: 100%; border-collapse: collapse; margin-top: 22px; }
.a4-items th { background: #1d2433; color: #fff; padding: 9px 10px; text-align: left; font-weight: 600; }
.a4-items td { padding: 9px 10px; border-bottom: 1px solid #e3e6ec; }
.a4-items tbody tr:nth-child(even) td { background: #f8f9fb; }
.a4-items .num { text-align: right; white-space: nowrap; }
.a4-items .c-n { width: 34px; color: #888; }
.a4-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-top: 22px; }
.a4-codes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.a4-codes .qr { width: 110px; image-rendering: pixelated; }
.a4-codes .barcode { width: 200px; height: 50px; }
.a4-link { font-size: .78em; color: #666; }
.a4-totals { border-collapse: collapse; min-width: 300px; }
.a4-totals th { text-align: left; font-weight: 400; padding: 6px 12px; color: #444; }
.a4-totals td { text-align: right; padding: 6px 12px; white-space: nowrap; }
.a4-totals tr.grand th, .a4-totals tr.grand td { background: #1d2433; color: #fff; font-weight: 700; font-size: 1.15em; }
.a4-totals tr.due th, .a4-totals tr.due td { color: #c62828; font-weight: 700; }
.a4-note { margin-top: 18px; }
.a4-signatures { display: flex; justify-content: space-between; margin-top: 40px; }
.a4-signatures div { width: 42%; border-top: 1px solid #999; padding-top: 6px; text-align: center; color: #555; height: 70px; }
.a4-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #d5d9e2; text-align: center; color: #444; }

/* ---------- Impression navigateur ---------- */
@media print {
  .receipt { box-shadow: none; }
  .receipt.paper-58 { page: thermal58; width: 48mm; font-size: 2.75mm; margin: 0 auto; }
  .receipt.paper-80 { page: thermal80; width: 72mm; font-size: 3mm; margin: 0 auto; }
  .receipt.paper-A4 { page: a4; width: auto; min-height: 270mm; padding: 0; font-size: 12px; }
  .a4-items tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page thermal58 { margin: 0; }
@page thermal80 { margin: 0; }
@page a4 { size: A4 portrait; margin: 10mm; }