/* Parcours de paiement en 3 étapes (public/pay.js). Jetons de couleur hérités du thème ; aucun style en ligne (CSP). */
.pf-dialog { width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--line, var(--line)); border-radius: var(--r, 16px); background: var(--card); color: var(--fg, #18212b); box-shadow: 0 30px 80px -30px rgba(49, 93, 155, 0.55); overflow: auto; }
.pf-dialog::backdrop { background: rgba(60, 50, 120, 0.45); }
.pf-body { display: grid; gap: var(--s3, 12px); padding: var(--s5, 24px); }
.pf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3, 12px); }
.pf-head h2 { margin: 0.1rem 0 0; font-size: 1.25rem; }
.pf-close { min-width: var(--tap, 44px); padding: 0; font-size: 1.5rem; line-height: 1; }
.pf-steps { display: flex; gap: var(--s2, 8px); list-style: none; margin: 0; padding: 0; }
.pf-steps li { flex: 1; height: 6px; border-radius: 99px; background: var(--card); font-size: 0; }
.pf-steps li.cur, .pf-steps li.done { background: var(--violet, #594c8f); }
.pf-steps li.cur { background: var(--blue, #315d9b); }
.pf-recap { display: grid; gap: 2px; padding: var(--s3, 12px) var(--s4, 16px); border: 1px solid var(--line, var(--line)); border-radius: 12px; background: var(--card); }
.pf-recap strong { font-size: 1.4rem; }
.pf-methods { display: grid; gap: var(--s2, 8px); }
.pf-method { display: grid; justify-content: stretch; justify-items: start; width: 100%; gap: 2px; height: auto; padding: var(--s3, 12px) var(--s4, 16px); border-radius: 12px; text-align: left; }
.pf-actions { justify-content: flex-end; }
.pf-wait { display: flex; align-items: center; gap: var(--s2, 8px); }
.pf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pf-dialog input, .pf-dialog select { width: 100%; }
@media (prefers-reduced-motion: reduce) { .pf-dialog, .pf-dialog * { transition: none !important; animation: none !important; } }

/* Coupons en photo (public/photo.js) */
.photo-thumb, .photo-ticket { display: block; max-width: 100%; height: auto; border: 1px solid var(--line, var(--line)); border-radius: 12px; background: var(--card); }
.photo-ticket { width: 100%; max-height: 70vh; object-fit: contain; }
.photo-thumb { max-height: 18rem; }
.photo-locked { display: grid; place-items: center; gap: var(--s2, 8px); min-height: 10rem; padding: var(--s4, 16px); border: 1px dashed var(--line, var(--line)); border-radius: 12px; background: var(--card); text-align: center; font-size: 1.6rem; }
.photo-admin-item { display: grid; gap: var(--s3, 12px); }
.photo-admin-list { display: grid; gap: var(--s3, 12px); }