/* ==========================================================================
   COMPTOIR 7 — appli du patron (téléphone, thème sombre)
   Les commandes au-dessus du plafond arrivent comme des bons papier sur un
   bureau sombre : on tamponne, la réponse part chez le revendeur.
   S'appuie sur comptoir.css (jetons, boutons, pastilles, toasts).
   ========================================================================== */

html, body { height: 100%; }
body.pa {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: #0d1014;
  --bg: #14171b; --bg-2: #1b2026; --card: #1f252c; --card-2: #262d35; --rule: rgba(236, 232, 225, .09);
  --tx: #ece8e1; --tx-2: rgba(236, 232, 225, .74); --tx-3: rgba(236, 232, 225, .52);
  --map-land: #1d232a; --map-sea: #17212c; --map-coast: #5d7ea8; --map-road: rgba(236, 232, 225, .06); --map-depot: #2c4d78;
}
.pa .demo-bar { flex: none; }

.stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  align-items: center; padding: 22px 24px;
  background: radial-gradient(900px 520px at 50% 118%, rgba(255, 106, 19, .16), transparent 62%), radial-gradient(640px 420px at 8% -10%, rgba(31, 58, 95, .5), transparent 60%), #0d1014;
}

/* ---------- Le téléphone ------------------------------------------------------------- */
.app {
  grid-column: 2; grid-row: 1; position: relative; isolation: isolate;
  display: flex; flex-direction: column; width: 100%; height: min(100%, 880px);
  background: var(--bg); color: var(--tx); border: 10px solid #05070a; border-radius: 54px; overflow: hidden; overflow: clip;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.sb { flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 30px 0 34px; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sb__island { position: absolute; left: 50%; top: 9px; width: 104px; height: 29px; margin-left: -52px; border-radius: 999px; background: #000; }
.sb__icons { display: flex; align-items: center; gap: 6px; }
.sb__icons svg { height: 12px; width: auto; fill: currentColor; }

.ph { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 10px; background: var(--ink); border-bottom: 1px solid var(--rule); }
.ph__brand { display: inline-flex; min-width: 0; text-decoration: none; color: #fff; }
.ph__brand .logo-mark { width: 32px; height: 32px; }
.ph__brand .logo__word { font-size: 23px; }
.ph__live { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(46, 158, 91, .14); color: #7fd6a3; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ph__live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3ccf7a; }
.ph__live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3ccf7a; animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }

.app__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; outline: none; position: relative; }
.view { padding: 0 16px 28px; }

.tabbar { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(13, 16, 20, .97); border-top: 1px solid var(--rule); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px; border-radius: 14px; color: var(--tx-3); font-size: 11.5px; font-weight: 650; text-decoration: none; transition: color .2s; }
.tabbar a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__ico { position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 999px; transition: background-color .25s; }
.tabbar__ico .i { width: 22px; height: 22px; }
.tabbar__ico .badge { position: absolute; top: -4px; right: 4px; }
.tabbar a:hover { color: var(--tx); }
.tabbar a[aria-current="page"] { color: #fff; }
.tabbar a[aria-current="page"] .tabbar__ico { background: rgba(255, 255, 255, .12); }

.badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--signal); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #0d1014; }
.badge.is-pop { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- Commun --------------------------------------------------------------------- */
.vh { padding: 18px 0 6px; }
.vh .kicker { color: var(--tx-3); }
.vh h1 { margin-top: 4px; font-family: var(--display); font-stretch: 66%; font-weight: 800; font-size: 34px; line-height: .92; text-transform: uppercase; color: #fff; }
.vh p { margin-top: 6px; font-size: 13.5px; color: var(--tx-2); }
.vh p b { color: #fff; }
.amount { font-family: var(--display); font-stretch: 72%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.sec { margin-top: 24px; }
.sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.sec__h b { color: var(--tx-2); font-family: var(--mono); font-weight: 500; letter-spacing: 0; text-transform: none; }
.panel { border-radius: 18px; background: var(--card); border: 1px solid var(--rule); }
.muted { color: var(--tx-3); font-size: 13px; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(46, 158, 91, .1); color: #a6dfbd; font-size: 13px; line-height: 1.45; }
.note .i { width: 18px; height: 18px; margin-top: 1px; color: #3ccf7a; }
.note b { color: #fff; }

/* ---------- Le bon à valider (papier sur bureau sombre) -------------------------------- */
.tk { position: relative; margin-top: 14px; padding: 16px 16px 14px; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9); overflow: hidden; transition: box-shadow .4s; }
.tk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--warn) 0 7px, var(--ink) 7px 14px); }
.tk.is-arrive { animation: tk-in .8s var(--spring) both; box-shadow: 0 0 0 3px var(--signal), 0 24px 50px -18px rgba(255, 106, 19, .6); }
@keyframes tk-in { 0% { opacity: 0; transform: translateY(-40px) scale(.94) rotate(-1.2deg); } 100% { opacity: 1; transform: none; } }
.tk__head { display: flex; align-items: center; gap: 11px; margin-top: 2px; }
.tk__head .av { width: 42px; height: 42px; border-radius: 12px; background: var(--signal-soft); color: var(--signal-2); font-size: 17px; }
.tk__who { min-width: 0; flex: 1; }
.tk__who b { display: -webkit-box; font-size: 16.5px; line-height: 1.2; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.tk__who span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk__ago { flex: none; align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--carton); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.tk.is-arrive .tk__ago { background: var(--signal); color: #fff; }
.tk__order { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.tk__order small { display: block; font-size: 12.5px; color: var(--ink-3); }
.tk__order .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tk__order .amount { font-size: 34px; line-height: .95; }

.enc2 { margin-top: 12px; padding: 12px 12px 10px; border-radius: 12px; background: #f3eee6; }
.enc2__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.enc2__row b { font-family: var(--display); font-stretch: 74%; font-weight: 800; font-size: 19px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.enc2__row b em { font-style: normal; color: #c2410c; }
.enc2__row b .arr { display: inline-block; margin: 0 .2em; color: var(--ink-3); font-weight: 600; }
.ebar { position: relative; height: 12px; margin: 10px 0 4px; border-radius: 999px; background: var(--carton-2); }
.ebar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: var(--depot); }
.ebar__add { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(-45deg, var(--signal) 0 5px, #ff9a5c 5px 10px); }
.ebar__cap { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.enc2__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.enc2__foot .over { color: #b6460a; font-weight: 700; }
.tk__hist { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.tk__hist .i { width: 17px; height: 17px; margin-top: 1px; color: var(--ok); }
.tk__hist.is-late .i { color: var(--red); }
.tk__hist b { color: var(--ink); }

.tk__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tk__acts .btn { min-height: 50px; padding: 0 10px; border-radius: 12px; font-size: 14px; white-space: normal; line-height: 1.15; text-align: center; }
.tk__acts .btn--ok { grid-column: 1 / -1; min-height: 56px; background: var(--ok); border-color: var(--ok); color: #fff; font-size: 16.5px; box-shadow: 0 12px 24px -14px rgba(46, 158, 91, .9); }
.tk__acts .btn--ok:hover { background: #26874d; border-color: #26874d; }
.tk__acts .btn--pay { background: var(--warn-soft); border-color: #ecc979; color: #7a4f00; }
.tk__acts .btn--pay:hover { border-color: #8a5c00; }
.tk__acts .btn--no { background: transparent; border-color: var(--line-2); color: #9e2a1d; }
.tk__acts .btn--no:hover { border-color: #9e2a1d; }
.tk.is-arrive .btn--ok { animation: halo 1.6s ease-out .9s 3; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .65); } 100% { box-shadow: 0 0 0 14px rgba(46, 158, 91, 0); } }

.tk__lines { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #f3eee6; font-size: 12.5px; }
.tk__lines div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.tk__lines span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.tk__lines b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.tk__more { display: block; width: 100%; min-height: 40px; margin-top: 6px; border: 0; background: none; color: var(--depot); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Tampon : la décision se lit d'un coup d'œil */
.tk__stamp { position: absolute; z-index: 3; left: 50%; top: 46%; display: grid; place-items: center; padding: 8px 16px 6px; border: 4px solid currentColor; border-radius: 10px; font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 38px; line-height: .9; text-transform: uppercase; text-align: center; white-space: nowrap; background: rgba(255, 253, 249, .9); transform: translate(-50%, -50%) rotate(-9deg); animation: stamp .42s cubic-bezier(.3, 1.5, .5, 1) both; pointer-events: none; }
.tk__stamp small { display: block; max-width: 17em; margin-top: 5px; font-family: var(--ui); font-stretch: 100%; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: none; white-space: normal; }
.tk__stamp--valider { color: var(--ok); }
.tk__stamp--reglement { color: #b26a00; }
.tk__stamp--refuser { color: var(--red); }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.9); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }
/* le tampon tombe sur les boutons (devenus inutiles) : l'encours et les montants restent lisibles */
.tk.is-done .tk__acts { opacity: .3; filter: grayscale(.6); transition: opacity .3s; }
.tk.is-done .tk__acts { pointer-events: none; }
.tk.is-gone { animation: tk-out .5s var(--ease) forwards; }
@keyframes tk-out { to { opacity: 0; transform: translateY(16px) scale(.96); } }

.empty { display: grid; justify-items: center; gap: 8px; margin-top: 18px; padding: 26px 16px 22px; border-radius: 18px; border: 1px dashed rgba(236, 232, 225, .18); text-align: center; }
.empty svg.pallet { width: 130px; opacity: .8; }
.empty b { font-size: 16px; color: #fff; }
.empty p { max-width: 30ch; font-size: 13px; color: var(--tx-3); }

/* Décisions déjà prises */
.just { margin-top: 12px; padding: 2px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); }
.just .drow { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 14px; }
.just .drow:last-child { border-bottom: 0; }
.drow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.drow__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; }
.drow__ico .i { width: 19px; height: 19px; stroke-width: 2.2; }
.drow__ico.is-valider { background: rgba(46, 158, 91, .16); color: #3ccf7a; }
.drow__ico.is-reglement { background: rgba(227, 162, 26, .16); color: #f0bd4f; }
.drow__ico.is-refuser { background: rgba(198, 59, 43, .18); color: #ff7b69; }
.drow__main { flex: 1; min-width: 0; }
.drow__main b { display: block; font-size: 14.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow__main span { display: block; font-size: 12.5px; color: var(--tx-3); }
.drow .amount { font-size: 17px; color: #fff; }
.drow.is-new-flash { animation: dflash 2.4s var(--ease); }
@keyframes dflash { 0%, 30% { background-color: rgba(255, 106, 19, .14); } }

/* ---------- Camions --------------------------------------------------------------------- */
.cash { margin-top: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #24303d, #1a2027); border: 1px solid var(--rule); }
.cash small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.cash .amount { display: block; margin-top: 4px; font-size: 44px; line-height: 1; color: #fff; }
.cash p { margin-top: 6px; font-size: 13px; color: var(--tx-2); }
.map { margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); }
.map .routemap { display: block; }
.pa .rm-label { fill: #e5e0d6; stroke: var(--map-land); }
.pa .rm-dlabel { fill: #8fb1dd; stroke: var(--map-land); }
.pa .rm-sea { fill: rgba(143, 177, 221, .5); }
.pa .rm-city { fill: rgba(236, 232, 225, .35); }
.rm-truck { transition: transform .8s var(--ease); }

.trk2 { display: block; width: 100%; margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); color: var(--tx); text-align: start; }
.trk2__top { display: flex; align-items: center; gap: 10px; }
.trk2__no { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--c); color: #fff; font-family: var(--display); font-stretch: 66%; font-weight: 800; font-size: 20px; }
.trk2__who { flex: 1; min-width: 0; }
.trk2__who b { display: block; font-size: 15px; color: #fff; }
.trk2__who span { display: block; font-size: 12.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk2__who span span { display: inline; }
.trk2__cash { text-align: end; }
.trk2__cash .amount { display: block; font-size: 22px; color: #fff; }
.trk2__cash small { font-size: 11.5px; color: var(--tx-3); }
.stops { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.stops i { width: 12px; height: 12px; border-radius: 3px; background: rgba(236, 232, 225, .12); }
.stops i.is-done { background: var(--c); }
.stops i.is-absent { background: transparent; box-shadow: inset 0 0 0 2px #ff7b69; }
.stops i.is-resched { background: transparent; box-shadow: inset 0 0 0 2px var(--tx-3); }
.trk2__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 8px; font-size: 12.5px; color: var(--tx-2); }
.trk2__alert { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(198, 59, 43, .14); color: #ffb3a8; font-size: 12.5px; line-height: 1.4; }
.trk2__alert .i { width: 18px; height: 18px; flex: none; color: #ff7b69; }
.trk2__alert span { flex: 1; min-width: 0; }
.trk2__alert b { color: #fff; }
.trk2__alert.is-ok { background: rgba(46, 158, 91, .12); color: #a6dfbd; }
.trk2__alert.is-ok .i { color: #3ccf7a; }
.btn--dk { min-height: 44px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; }
.btn--dk:hover { border-color: rgba(255, 255, 255, .4); }
.slist { margin-top: 10px; border-top: 1px solid var(--rule); }
.slist div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.slist div:last-child { border-bottom: 0; }
.slist i { width: 10px; height: 10px; border-radius: 3px; background: rgba(236, 232, 225, .16); }
.slist i.is-done { background: var(--c); }
.slist i.is-absent { box-shadow: inset 0 0 0 2px #ff7b69; background: transparent; }
.slist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-2); }
.slist b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--tx); white-space: nowrap; }
.trk2__more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 6px; border: 0; background: none; color: var(--tx-2); font-size: 13px; font-weight: 650; }
.trk2__more .i { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .3s; }
.trk2.is-open .trk2__more .i { transform: rotate(-90deg); }

/* ---------- Encours ---------------------------------------------------------------------- */
.alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(198, 59, 43, .14); color: #ffc6bd; font-size: 13.5px; line-height: 1.45; }
.alert .i { width: 19px; height: 19px; margin-top: 1px; color: #ff7b69; }
.alert b { color: #fff; }
.crow { margin-top: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); }
.crow__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; padding: 12px; border: 0; background: none; color: var(--tx); text-align: start; }
.crow .av { grid-row: span 2; width: 38px; height: 38px; background: rgba(255, 255, 255, .08); color: #e5e0d6; font-size: 14px; }
.crow.is-over .av { background: rgba(198, 59, 43, .22); color: #ffb3a8; }
.crow__name { min-width: 0; }
.crow__name b { display: block; font-size: 14.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__name span { display: block; font-size: 12px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__amt { text-align: end; }
.crow__amt .amount { display: block; font-size: 17px; color: #fff; }
.crow__amt small { font-size: 11.5px; color: var(--tx-3); white-space: nowrap; }
.crow.is-over .crow__amt .amount { color: #ff9585; }
.cbar { grid-column: 2 / -1; position: relative; height: 6px; margin-top: 4px; border-radius: 99px; background: rgba(236, 232, 225, .1); }
.cbar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #8fb1dd; }
.crow.is-warn .cbar span { background: var(--warn); }
.crow.is-over .cbar span { background: #ff6b57; }
.cbar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; border-radius: 2px; }
.crow__more { display: none; padding: 0 12px 12px; }
.crow.is-open .crow__more { display: block; }
.crow__more dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.crow__more dt { color: var(--tx-3); }
.crow__more dd { margin: 0; text-align: end; color: #fff; font-weight: 600; white-space: nowrap; }
.crow__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crow__acts .btn { white-space: normal; line-height: 1.15; }
.plaf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 13px; color: var(--tx-2); }
.plaf b { color: #fff; font-family: var(--display); font-stretch: 72%; font-weight: 800; font-size: 17px; white-space: nowrap; }
.plaf__step { display: flex; gap: 4px; }
.plaf__step button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; }
.plaf__step .i { width: 18px; height: 18px; }
.relance { margin-top: 8px; font-size: 12.5px; color: #a6dfbd; }

/* ---------- Aujourd'hui ------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.kpi { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); min-width: 0; }
.kpi small { display: block; font-size: 12px; color: var(--tx-3); }
.kpi b { display: block; margin-top: 4px; font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: 32px; line-height: 1; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi--sig { background: var(--signal); border-color: var(--signal); }
.kpi--sig small { color: rgba(255, 255, 255, .8); }
.kpi.is-bump b { animation: bump .6s var(--ease); }
@keyframes bump { 35% { transform: scale(1.12); } }
.flow { display: flex; height: 26px; margin-top: 10px; border-radius: 8px; overflow: hidden; gap: 2px; }
.flow span { min-width: 4px; background: var(--c); transition: flex-grow .6s var(--ease); }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 10px; font-size: 12.5px; color: var(--tx-2); }
.legend span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.legend b { margin-inline-start: auto; font-family: var(--mono); font-weight: 500; color: #fff; }
.src { display: grid; gap: 8px; }
.src div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 13px; color: var(--tx-2); }
.src div > span:nth-child(2) { height: 10px; border-radius: 99px; background: rgba(236, 232, 225, .08); overflow: hidden; }
.src div > span:nth-child(2) i { display: block; height: 100%; border-radius: 99px; background: #8fb1dd; }
.src b { font-family: var(--mono); font-weight: 500; color: #fff; text-align: end; }
.ins { display: grid; gap: 8px; }
.ins p { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.ins .i { width: 18px; height: 18px; margin-top: 1px; color: var(--c, #8fb1dd); }
.ins b { color: #fff; }
.golink { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 650; font-size: 14px; text-decoration: none; }
.golink .i { width: 16px; height: 16px; }

/* ---------- Bannières « push » et toasts ------------------------------------------------- */
.pushes { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 80; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.push { padding: 11px 13px 13px; border-radius: 22px; background: rgba(40, 46, 54, .94); border: 1px solid rgba(255, 255, 255, .12); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); cursor: pointer; pointer-events: auto; user-select: none; -webkit-user-select: none; animation: push-in .64s cubic-bezier(.2, 1.3, .4, 1); transition: transform .35s var(--ease), opacity .35s; }
.push.is-out { transform: translateY(-130%) !important; opacity: 0; }
@keyframes push-in { 0% { transform: translateY(-140%); opacity: 0; } 55% { transform: translateY(8px); opacity: 1; } 78% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.push__head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.push__head .logo-mark { width: 18px; height: 18px; }
.push__app { font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.push__time { margin-inline-start: auto; }
.push__body { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.push__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--signal); color: #fff; animation: thump .7s ease .55s 2; }
.push__ico .i { width: 22px; height: 22px; stroke-width: 2; }
.push--ok .push__ico { background: var(--ok); }
.push--info .push__ico { background: var(--depot-2); animation: none; }
@keyframes thump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.push__txt { min-width: 0; }
.push__txt b { display: block; font-size: 15px; line-height: 1.25; }
.push__txt span { display: -webkit-box; margin-top: 2px; overflow: hidden; font-size: 13px; line-height: 1.38; color: rgba(255, 255, 255, .78); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.push--signal { border: 1.5px solid var(--signal); }

.app .toast-stack { position: absolute; left: 16px; right: 16px; bottom: 90px; z-index: 75; align-items: center; max-width: none; }
.app .toast { max-width: 100%; pointer-events: none; background: #f4f0ea; color: var(--ink); }
.app .toast small { color: var(--ink-3); }

/* ---------- Grand écran : le texte à gauche du téléphone ------------------------------------- */
.pitch { display: none; color: var(--tx); }
.pitch .kicker { color: var(--tx-3); }
.pitch__title { margin-top: 18px; font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: 46px; line-height: .92; text-transform: uppercase; color: #fff; }
.pitch__title em { display: block; font-style: normal; color: var(--signal); }
.pitch__lede { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.pitch__list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pitch__list li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--tx-2); }
.pitch__list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 2px; background: var(--kraft); }
.pitch__list b { color: #fff; }
.pitch__links { display: grid; gap: 6px; margin-top: 22px; }
.pitch__links a { font-weight: 700; color: #ffb48a; text-underline-offset: 3px; }
@media (min-width: 1100px) {
  .stage { column-gap: 64px; }
  .pitch { display: block; grid-column: 1; grid-row: 1; justify-self: end; align-self: center; width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
}
@media (min-width: 1100px) and (max-height: 760px) { .pitch__lede { display: none; } .pitch__title { font-size: 38px; } }
@media (min-width: 561px) and (max-height: 720px) {
  .stage { padding-top: 12px; padding-bottom: 12px; }
  .sb { height: 34px; }
  .sb__island { top: 5px; height: 24px; }
}
@media (min-width: 561px) { .pushes { top: 48px; } }

/* ---------- Téléphone réel : plein écran -------------------------------------------------- */
@media (max-width: 560px) {
  .stage { display: block; padding: 0; background: var(--bg); }
  .app { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .sb { display: none; }
  .ph { padding-top: max(10px, env(safe-area-inset-top)); }
}
@media (max-width: 370px) {
  .view { padding-left: 12px; padding-right: 12px; }
  .tk__order .amount { font-size: 30px; }
  .cash .amount { font-size: 38px; }
  .src div { grid-template-columns: 96px minmax(0, 1fr) 26px; }
}

/* Dans un cadre (page « en direct ») : pas de bandeau, l'application occupe tout */
.is-embed .demo-bar, .is-embed .pitch { display: none !important; }
.is-embed .stage { display: block; padding: 0; background: var(--bg); }
.is-embed .app { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.is-embed .sb { display: none; }
.is-embed .pushes { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .tk.is-arrive, .tk__stamp, .push, .push__ico, .ph__live i::after { animation: none !important; }
}
.trk2 { scroll-margin-top: 84px; }
.slist div.is-hl { margin: 0 -8px; padding-inline: 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, transparent); }