/* Pages « papier » : reçu et vérification. */
body.paper { min-height: 100svh; display: flex; flex-direction: column; background: var(--ivory); }
.topbar { padding: 22px 0; }
.topbar .brand { color: #1a1816; }
.page { flex: 1; display: grid; place-items: start center; padding: 12px var(--gutter) 64px; }
.col { width: min(100%, 520px); }
.titre { text-align: center; margin: 8px 0 28px; }
.titre h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -.02em; line-height: 1.05; margin: 10px 0 8px; }
.titre h1 em { font-style: normal; font-weight: inherit; color: var(--red-deep); }
.titre p { margin: 0; color: var(--fg-dim); }

.ticket { position: relative; background: var(--paper); border-radius: 26px; box-shadow: 0 30px 60px -28px rgba(26, 24, 22, .35), 0 2px 0 rgba(26, 24, 22, .04); overflow: hidden; animation: pose .8s var(--ease); }
@keyframes pose { from { opacity: 0; transform: translateY(24px) rotate(-.6deg); } }
.t-haut { background: #0f0e0d; color: var(--ivory); padding: 28px 30px 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.t-haut img { height: 56px; width: auto; }
.t-haut .eyebrow { color: var(--red-hot); }
.t-haut .ref { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-top: 6px; letter-spacing: .01em; }
.statut { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(59, 167, 118, .18); color: #7fe0b0; }
.statut.attente { background: rgba(224, 160, 47, .18); color: #f2c46d; }
.statut.ko { background: rgba(226, 55, 43, .2); color: var(--red-hot); }
.t-corps { padding: 30px; }
.t-nom { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 4px; }
.t-sous { color: var(--fg-dim); margin: 0 0 26px; }
.t-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 0; }
.t-grille dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
.t-grille dd { margin: 3px 0 0; font-weight: 600; word-break: break-word; }
.t-grille .large { grid-column: 1 / -1; }
.perfore { position: relative; height: 0; border-top: 2px dashed rgba(26, 24, 22, .18); margin: 0 22px; }
.perfore::before, .perfore::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--ivory); }
.perfore::before { left: -36px; }
.perfore::after { right: -36px; }
.t-bas { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px 30px; }
.total small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
.total strong { font-family: var(--display); font-weight: 700; font-size: 2.1rem; color: var(--red-deep); letter-spacing: -.02em; line-height: 1.15; }
.qr { width: 112px; height: 112px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.note { text-align: center; color: var(--fg-faint); font-size: .83rem; margin: 18px 0 0; }

.actions { display: grid; gap: 10px; margin-top: 24px; }
.actions .btn-ghost { color: #1a1816; border-color: var(--line-strong); }
.carte-etat { background: var(--paper); border-radius: 26px; padding: 40px 30px; text-align: center; box-shadow: 0 30px 60px -28px rgba(26, 24, 22, .3); }
.carte-etat h2 { font-family: var(--display); font-weight: 700; font-size: 1.8rem; margin: 18px 0 8px; letter-spacing: -.015em; }
.carte-etat p { color: var(--fg-dim); margin: 0 0 8px; }
.carte-etat .btn { margin-top: 18px; }
.pastille { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: #e6f4ec; color: #237a52; }
.pastille.ko { background: #fdecea; color: #b9281e; }
.pastille.attente { background: #fbf1da; color: #9a6a0e; }
.pulse { width: 28px; height: 28px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: tourne .9s linear infinite; }
@keyframes tourne { to { rotate: 360deg; } }
.pied { text-align: center; padding: 0 var(--gutter) 40px; color: var(--fg-faint); font-size: .85rem; }

@media print {
  body.paper { background: #fff; }
  .topbar, .actions, .note, .pied, .grain::after { display: none !important; }
  body.grain::after { display: none; }
  .ticket { box-shadow: none; border: 1px solid #ccc; animation: none; }
  .t-haut { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .perfore::before, .perfore::after { background: #fff; }
}

/* 404 */
.page-404 { min-height: 100svh; place-items: center; }
.carte-etat.sombre { background: var(--ink-2); color: var(--ivory); box-shadow: none; border: 1px solid var(--line); }
.carte-etat.sombre p { color: var(--fg-dim); }
.logo-404 { margin: 0 auto; }