/* Styles du reçu — totalement autonomes du storefront (§5).
   Une évolution du reçu (structure, espacement, couleurs) se fait uniquement ici.
   Les couleurs et polices utilisent les variables du design system (--ink, --paper,
   --accent, --ink-soft, --line, --sans, --serif) : le reçu reste cohérent avec le
   reste du site automatiquement, sans jamais introduire de police ou de couleur
   indépendante (§6). */

.receipt-capture-host { position: fixed; left: -100000px; top: 0; width: 520px; pointer-events: none; opacity: 1; }
.receipt-ready { visibility: visible; }

/* Coupe toute transition/animation pendant la capture, même si le storefront
   en ajoute un jour sur une classe partagée — la capture doit être déterministe (§4). */
#receipt-capture.is-capturing, #receipt-capture.is-capturing * { transition: none !important; animation: none !important; }

.receipt-shell { width: 520px; padding: 34px; background: var(--paper); color: var(--ink); font-family: var(--sans); border: 1px solid var(--line); }
.receipt-topline { width: 100%; height: 6px; background: var(--accent); margin-bottom: 22px; }
.receipt-brand { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.receipt-kicker { margin-top: 18px; font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.receipt-meta { display: flex; justify-content: space-between; gap: 18px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.receipt-rule { height: 1px; background: var(--line); margin: 22px 0; }
.receipt-items { display: grid; gap: 15px; }
.receipt-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; }
.receipt-thumb { width: 58px; height: 72px; object-fit: cover; background: var(--line); }
.receipt-item-main { display: grid; gap: 2px; }
.receipt-item-main strong { font-size: 13px; }
.receipt-item-main span { font-size: 11px; color: var(--ink-soft); text-transform: none; }
.receipt-item > strong { font-size: 12px; }
.receipt-total-row { display: flex; justify-content: space-between; gap: 14px; margin: 8px 0; font-size: 12px; }
.receipt-grand-total { margin-top: 15px; font-size: 16px; }
.receipt-grand-total strong { font-family: var(--serif); font-size: 24px; }
.receipt-channel { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }
.receipt-footer { display: grid; gap: 6px; text-align: center; font-size: 11px; color: var(--ink-soft); }
.receipt-footer strong { color: var(--ink); font-family: var(--serif); font-size: 14px; }

@media (max-width: 760px) {
  .receipt-capture-host, .receipt-shell { width: 420px; }
}

@media (max-width: 390px) {
  .receipt-capture-host, .receipt-shell { width: 360px; }
}

/* P5.6.2 — reçu minimal et indépendant des ressources externes. */
.receipt-simple {
  width: 520px;
  box-sizing: border-box;
  padding: 34px;
  background: #F7F4EE;
  color: #14192B;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #E1DCCF;
}
.receipt-simple-topline { width: 100%; height: 6px; background: #C6952F; margin-bottom: 22px; }
.receipt-simple-brand { font-size: 30px; font-weight: 700; letter-spacing: .08em; }
.receipt-simple-kicker { margin-top: 18px; font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.receipt-simple-meta { display:flex; justify-content:space-between; gap:18px; margin-top:8px; font-size:12px; color:#4A4F63; }
.receipt-simple-rule { height:1px; background:#E1DCCF; margin:22px 0; }
.receipt-simple-items { display:grid; gap:14px; }
.receipt-simple-item { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; font-size:12px; }
.receipt-simple-item > div { display:grid; gap:3px; }
.receipt-simple-item span { color:#4A4F63; }
.receipt-simple-total, .receipt-simple-grand, .receipt-simple-channel { display:flex; justify-content:space-between; gap:14px; margin:8px 0; font-size:12px; }
.receipt-simple-grand { margin-top:15px; font-size:17px; font-weight:700; }
.receipt-simple-grand strong { font-size:24px; }
.receipt-simple-footer { display:grid; gap:6px; text-align:center; font-size:11px; color:#4A4F63; }
.receipt-simple-footer strong { color:#14192B; font-size:14px; }
@media (max-width:760px) { .receipt-simple { width:420px; } }
@media (max-width:390px) { .receipt-simple { width:360px; } }