@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--canvas);min-height:100%}
body{
  font-family:var(--texte);color:var(--encre);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-left) + 14px)
          calc(env(safe-area-inset-bottom) + 100px) calc(env(safe-area-inset-right) + 14px);
}
.wrap{max-width:480px;margin:0 auto}

/* ---------- en-tete ---------- */
.head{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.mark{width:38px;height:38px;border-radius:var(--r-sm);background:var(--jaune);flex:none;
  display:grid;place-items:center;box-shadow:var(--ombre-jaune)}
.mark svg{width:21px;height:21px;display:block}
.head h1{font-family:var(--titre);font-size:21px;font-weight:600;margin:0;letter-spacing:-.015em}
.head p{margin:1px 0 0;font-size:12px;color:var(--encre-doux)}

/* ---------- typographie ---------- */
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-doux)}
h2{font-family:var(--titre);font-size:18px;font-weight:600;margin:0 0 11px;letter-spacing:-.01em}
h3{font-family:var(--titre);font-size:15px;font-weight:600;margin:0 0 8px}
.muted{color:var(--encre-doux);font-size:12.5px;line-height:1.65}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--positif)} .neg{color:var(--negatif)} .dim{color:var(--encre-doux)}
b,strong{font-weight:700}

/* ---------- surfaces ---------- */
.card{background:var(--papier);border-radius:var(--r-md);padding:18px;box-shadow:var(--ombre-sm);margin-bottom:14px}
.card.tint{background:var(--creme);box-shadow:none;border:1px solid var(--jaune-doux)}
.card.flat{box-shadow:none;border:1.5px solid var(--filet)}

.hero{border-radius:var(--r-lg);padding:24px;margin-bottom:14px;box-shadow:var(--ombre-md)}
.hero.gain{background:var(--jaune);color:var(--bleu)}
.hero.gain .eyebrow{color:rgba(22,50,79,.62)}
.hero.gain .sub{color:rgba(22,50,79,.78)}
.hero.perte{background:var(--rouge);color:#fff}
.hero.perte .eyebrow{color:rgba(255,255,255,.72)}
.hero.perte .sub{color:rgba(255,255,255,.85)}
.hero .amount{font-family:var(--titre);font-size:48px;font-weight:600;line-height:1;margin:12px 0 8px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero .sub{font-size:12.5px;line-height:1.6}

/* ---------- listes ---------- */
.row{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:13.5px}
.row + .row{border-top:1px solid var(--filet)}
.row .lbl{flex:1;min-width:0;overflow-wrap:anywhere}
.row .val{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.row .note{display:block;font-size:11px;color:var(--encre-doux);font-weight:400;margin-top:2px;line-height:1.45}

.bar{height:6px;border-radius:var(--r-pill);background:var(--filet);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--jaune);border-radius:var(--r-pill)}
.bar.b i{background:var(--bleu)}
.bar.mini{height:4px;max-width:110px;display:block;margin-top:5px}

/* ---------- controles ---------- */
button{font:inherit;cursor:pointer;border:0;border-radius:var(--r-pill);font-family:var(--texte)}
.btn{display:block;width:100%;padding:15px;background:var(--jaune);color:var(--bleu);font-weight:800;font-size:14.5px;margin-top:11px;box-shadow:var(--ombre-jaune)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--bleu);color:#fff;box-shadow:none}
.btn.out{background:transparent;color:var(--bleu);border:2px solid var(--bleu);box-shadow:none}
.btn.quiet{background:transparent;color:var(--encre-doux);border:1.5px solid var(--filet);font-weight:600;box-shadow:none}
.btn.danger{background:transparent;color:var(--rouge);border:1.5px solid var(--rouge);font-weight:600;box-shadow:none}
.btn:disabled{opacity:.4;box-shadow:none}

.chip{padding:8px 14px;background:var(--papier);border:1.5px solid var(--filet);color:var(--encre);
  font-size:12px;font-weight:600;border-radius:var(--r-pill)}
.chip.on{background:var(--jaune);border-color:var(--jaune);color:var(--bleu)}
.chip.b.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.chip.mini{padding:4px 10px;font-size:10.5px}
.chips{display:flex;flex-wrap:wrap;gap:7px}

.tag{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);font-size:10px;font-weight:700;
  letter-spacing:.03em;background:var(--creme);color:var(--bleu);border:1px solid var(--jaune-doux)}
.tag.ok{background:#E8F5EE;border-color:#BFE3D0;color:var(--vert)}
.tag.no{background:#FDECEA;border-color:#F7C7C2;color:var(--rouge)}
.tag.warn{background:#FFF4D6;border-color:#FFE08A;color:#8A6A00}

label.f{display:block;font-size:11.5px;font-weight:700;color:var(--encre-doux);margin:15px 0 5px}
input,textarea,select{font:inherit;font-family:var(--texte);font-size:16px;width:100%;padding:12px 14px;
  border:1.5px solid var(--filet);border-radius:var(--r-sm);background:var(--papier);color:var(--encre);-webkit-appearance:none}
select{background-image:none}
textarea{min-height:170px;font-family:var(--mono);font-size:13px;line-height:1.65}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(255,203,3,.35)}
.inline{display:flex;gap:8px;align-items:center}
.inline>*{min-width:0}
.w-qty{width:74px;flex:none}
.w-date{width:148px;flex:none}
.w-fmt{width:106px;flex:none}
.w-sm{width:96px;flex:none}

/* ---------- navigation ---------- */
nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--filet);
  padding:8px 14px calc(env(safe-area-inset-bottom) + 8px);z-index:5}
nav .in{max-width:480px;margin:0 auto;display:flex;gap:6px}
nav button{flex:1;background:transparent;color:var(--encre-doux);font-size:11.5px;font-weight:700;
  padding:10px 4px;border-radius:var(--r-sm);position:relative}
nav button.on{background:var(--jaune);color:var(--bleu)}
nav .dot{position:absolute;top:4px;right:calc(50% - 32px);min-width:17px;height:17px;line-height:17px;
  padding:0 4px;background:var(--rouge);color:#fff;border-radius:var(--r-pill);font-size:9.5px;font-weight:700}

/* ---------- divers ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--encre-doux);font-size:13px;line-height:1.75}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translate(-50%,8px);
  background:var(--bleu);color:#fff;font-size:12.5px;font-weight:600;padding:12px 20px;border-radius:var(--r-pill);
  z-index:9;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;box-shadow:var(--ombre-md);max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.hide{display:none!important}

.split{display:flex;gap:10px;margin-bottom:14px}
.split>div{flex:1;background:var(--papier);border-radius:var(--r-md);padding:15px;box-shadow:var(--ombre-sm)}
.split .k{font-size:10px;color:var(--encre-doux);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.split .v{font-family:var(--titre);font-size:23px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}

/* relecture d'un ticket colle */
.draft-line{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:11px 0}
.draft-line + .draft-line{border-top:1px solid var(--filet)}
.draft-line input{font-size:14px;padding:9px 11px}
.draft-line .lib{flex:1 0 100%}
.draft-line .lib input{width:100%}
.draft-line .x{flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:transparent;
  border:1.5px solid var(--filet);color:var(--encre-doux);font-size:15px;line-height:1;padding:0}
.draft-meta{font-size:10.5px;color:var(--encre-doux);margin-top:3px}

.fade{animation:fade .25s ease-out both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.btn:active{transform:none}}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}