/*
 * HPAY TPE web — feuille de style
 * Design system Claude Design « HPAY TPE » (docs/hpay-tpe-ui/claude-design/hpay.css) :
 * mêmes jetons, mêmes composants, adaptés au navigateur (mobile, terminal, ordinateur).
 */
:root{--o:#F15922;--op:#C94716;--os:#FFF1EB;--sp:#FFFFFF;--cv:#FAFAF8;--sm:#F3F4F6;--tp:#171A21;--ts:#5E6470;--bd:#D9DCE1;--dis:#A8ADB5;--ok:#199447;--oks:#EAF7EE;--er:#C9342F;--ers:#FCEDEC;--wa:#A86400;--was:#FFF4DA;--in:#3569A8;--ins:#ECF3FB;--scrim:rgba(23,26,33,.45);--r1:10px;--r2:14px;--r3:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--o:#FF7A47;--op:#F15922;--os:#3A241B;--sp:#1C2028;--cv:#12141A;--sm:#272B35;--tp:#F2F3F5;--ts:#A9AFBB;--bd:#363B47;--dis:#6B7280;--ok:#4CC27A;--oks:#16301F;--er:#F0716C;--ers:#3A1D1C;--wa:#E8A33D;--was:#35280F;--in:#7AA7E0;--ins:#17263A}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tp);background:var(--cv);font-size:16px;line-height:24px;font-variant-numeric:tabular-nums}
a{color:var(--op)}
.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:24px;line-height:1;display:inline-block;letter-spacing:normal;white-space:nowrap;font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 500,'opsz' 24;flex:none;user-select:none}
.ms.f{font-variation-settings:'FILL' 1,'wght' 500,'opsz' 24}.ms.s20{font-size:20px}.ms.s32{font-size:32px}.ms.s48{font-size:48px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- coque */
.app{max-width:480px;min-height:100%;margin:0 auto;background:var(--cv);display:flex;flex-direction:column;position:relative}
@media (min-width:720px){body{background:#E9EAEC}.app{margin:24px auto;min-height:calc(100% - 48px);border:1px solid var(--bd);border-radius:24px;overflow:hidden;box-shadow:0 8px 30px rgba(23,26,33,.08)}}
.ab{height:56px;flex:none;background:var(--sp);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;padding:0 8px 0 4px;position:sticky;top:0;z-index:5}
.ab h1{margin:0;font-size:20px;line-height:26px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab .ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--tp);background:none;border:0;border-radius:12px;cursor:pointer;text-decoration:none}
.ab .logo{height:32px;width:auto;margin-left:10px}
.bd{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}
.ft{flex:none;padding:12px 16px 16px;background:var(--sp);border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0}
.nav{flex:none;height:64px;background:var(--sp);border-top:1px solid var(--bd);display:grid;grid-template-columns:repeat(4,1fr);position:sticky;bottom:0;z-index:5}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:500;color:var(--ts);text-decoration:none}
.nav a.on{color:var(--o)}

/* ---------- typo */
.h1{font-size:28px;line-height:34px;font-weight:700;margin:0}
.h2{font-size:20px;line-height:26px;font-weight:600;margin:0}
.pg{margin:0;color:var(--ts)}
.cap{font-size:12px;line-height:16px;color:var(--ts)}
.lab{font-size:14px;font-weight:500;color:var(--ts)}
.ctr{text-align:center}

/* ---------- boutons */
.btn{height:56px;border-radius:var(--r2);background:var(--o);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .15s}
.btn:active{background:var(--op)}
.btn:focus-visible,.kp button:focus-visible,.fld input:focus-visible{outline:3px solid var(--in);outline-offset:2px}
.btn.s{background:transparent;color:var(--op);border:2px solid var(--o)}
.btn.t{background:transparent;color:var(--ts);height:48px;font-weight:600;font-size:16px}
.btn.d{background:var(--er)}
.btn[disabled]{background:var(--sm);color:var(--dis);cursor:not-allowed}
.btn.sm{height:44px;font-size:15px;width:auto;padding:0 16px;border-radius:12px}

/* ---------- cartes, lignes */
.card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--r3);padding:16px;display:flex;flex-direction:column;gap:4px}
.card.os{background:var(--os);border-color:transparent}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;min-height:36px}
.row .k{color:var(--ts);font-size:15px}.row .v{font-weight:500;text-align:right}
.row.tot{border-top:1px solid var(--bd);margin-top:6px;padding-top:12px}.row.tot .v{font-size:22px;font-weight:700}

/* ---------- montant et claviers */
.amt{text-align:center;font-size:44px;line-height:52px;font-weight:700;letter-spacing:-.5px;word-break:break-all}
.amt small{font-size:20px;font-weight:600;color:var(--ts);margin-left:6px}
.amt.empty{color:var(--dis)}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp button{height:60px;border-radius:var(--r3);background:var(--sm);border:0;font-family:inherit;font-size:26px;font-weight:500;color:var(--tp);display:flex;align-items:center;justify-content:center;cursor:pointer}
.kp button:active{background:var(--bd)}
.kp button.g{background:transparent}
.kp.pin button{border-radius:50%;width:68px;height:68px;margin:0 auto}
.dots{display:flex;gap:16px;justify-content:center;padding:8px 0}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--bd);display:block}
.dots i.on{background:var(--tp);border-color:var(--tp)}
.dots.er i{border-color:var(--er)}

/* ---------- champs */
.fld{display:flex;flex-direction:column;gap:6px}
.fld input,.fld select{height:56px;border:1px solid var(--bd);border-radius:var(--r1);background:var(--sp);color:var(--tp);padding:0 14px;font-size:17px;font-family:inherit;width:100%}
.fld input:focus,.fld select:focus{border:2px solid var(--o);outline:0}
.fld input.carte{font-size:22px;letter-spacing:1.5px;font-weight:500}
.fld .hp{font-size:13px;color:var(--ts)}.fld .hp.er{color:var(--er)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sm);border-radius:12px;padding:4px;gap:4px}
.seg button{height:40px;border:0;background:transparent;border-radius:9px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ts);cursor:pointer}
.seg button.on{background:var(--sp);color:var(--tp);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- badges, bannières */
.bg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:600;white-space:nowrap}
.bg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bg.ok{background:var(--oks);color:var(--ok)}.bg.er{background:var(--ers);color:var(--er)}.bg.wa{background:var(--was);color:var(--wa)}.bg.ne{background:var(--sm);color:var(--ts)}.bg.in{background:var(--ins);color:var(--in)}
.bn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:14px;line-height:20px}
.bn.in{background:var(--ins);color:var(--in)}.bn.wa{background:var(--was);color:var(--wa)}.bn.er{background:var(--ers);color:var(--er)}.bn.ok{background:var(--oks);color:var(--ok)}

/* ---------- accueil : solde et opérations */
.solde{background:linear-gradient(135deg,var(--o),var(--op));color:#fff;border-radius:20px;padding:20px}
.solde .cap{color:rgba(255,255,255,.85)}
.solde .val{font-size:32px;line-height:40px;font-weight:700;margin-top:4px}
.ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op{background:var(--sp);border:1px solid var(--bd);border-radius:var(--r3);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--tp);min-height:120px}
.op .ic{width:48px;height:48px;border-radius:14px;background:var(--os);color:var(--op);display:flex;align-items:center;justify-content:center}
.op b{font-size:17px}.op span{font-size:13px;color:var(--ts);line-height:18px}

/* ---------- listes */
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);text-decoration:none;color:var(--tp)}
.li:last-child{border-bottom:0}
.li .ic{width:40px;height:40px;border-radius:12px;background:var(--sm);display:flex;align-items:center;justify-content:center;color:var(--ts);flex:none}
.li .tx{flex:1;min-width:0}.li .tx b{display:block;font-weight:600}.li .tx span{font-size:13px;color:var(--ts)}
.li .r{text-align:right;font-weight:600;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.vide{text-align:center;color:var(--ts);padding:32px 12px}

/* ---------- étapes de l'opération */
.etape{display:none;flex-direction:column;gap:12px}.etape.on{display:flex}
.client{display:flex;align-items:center;gap:12px}
.client .av{width:44px;height:44px;border-radius:50%;background:var(--oks);color:var(--ok);display:flex;align-items:center;justify-content:center}
.big{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:16px 0}
.cc{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cc.ok{background:var(--oks);color:var(--ok)}.cc.er{background:var(--ers);color:var(--er)}
#lecteur{width:100%;border-radius:var(--r3);overflow:hidden;background:#000;min-height:240px}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--os);border-top-color:var(--o);animation:sp 1s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- reçu thermique 58 mm */
.rcpt{background:#fff;color:#111;font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-size:13px;line-height:18px;padding:16px 14px;border-radius:6px;border:1px dashed #C9CDD3;width:100%;max-width:300px;margin:0 auto}
.rcpt .c{text-align:center}.rcpt .b{font-weight:700}.rcpt .r{display:flex;justify-content:space-between;gap:8px}
.rcpt hr{border:0;border-top:1px dashed #999;margin:8px 0}
.rcpt img{display:block;margin:0 auto 6px;height:34px;filter:grayscale(1)}

/* ---------- connexion */
.cnx{max-width:420px;margin:0 auto;padding:40px 20px;display:flex;flex-direction:column;gap:16px;min-height:100%;justify-content:center}
.cnx img{height:48px;align-self:center}

/* ---------- boîte de dialogue */
.scrim{position:fixed;inset:0;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
.scrim.on{display:flex}
.dlg{background:var(--sp);border-radius:20px;padding:20px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:12px}

@media print{
  @page{size:58mm auto;margin:0}
  body{background:#fff}
  .app{max-width:none;margin:0;border:0;box-shadow:none}
  .ab,.ft,.nav,.no-print{display:none!important}
  .bd{padding:0}
  .rcpt{border:0;max-width:58mm;padding:2mm;font-size:11px;line-height:14px}
}