/* Volta, côté app : la page du client, l'inscription au comptoir et l'app du staff.
   La même identité que la landing : blanc, noir, gris brume, une seule couleur (celle du café
   chez le client, le bleu Volta au comptoir), des titres très serrés et des boutons pilule.
   Chargé APRÈS styles.css et le style de chaque page : il remplace les jetons, puis les composants. */
:root, .swap-page {
  --ink: #0b0b0c;
  --ink-2: #ffffff;
  --ink-line: #e6e6e3;
  --paper: #f3f3f1;
  --paper-2: #ececea;
  --paper-line: #e6e6e3;
  --text: #0b0b0c;
  --muted: #6e6e73;
  --muted-dk: #6e6e73;
  --carimbo: #3d63c9;
  --carimbo-dk: #3d63c9;
  --verde: #1f8a5b;
  --verde-dk: #1f8a5b;
  --crema: #a8681f;
  --red-dk: #b5483e;
  --display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass: rgba(255, 255, 255, .72);
}
body { font-variation-settings: normal; -webkit-font-smoothing: antialiased; }
.label { font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; }

/* ── La page du client (moi.html, client.html) et l'inscription (aderir.html) ──────────── */
body.app-client { background: #ffffff; }
.app-client main { padding-top: calc(1.2rem + env(safe-area-inset-top, 0px)); }
.app-client .cafe { margin-bottom: 1.4rem; }
.app-client .cafe .lg { border-radius: 14px; font: 600 1.15rem/1 var(--sans); letter-spacing: -0.03em; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--cafe) 70%, transparent); }
.app-client .cafe b { font: 600 1.15rem/1.1 var(--sans); letter-spacing: -0.03em; }
.app-client h1 { font: 500 clamp(2.1rem, 9vw, 2.6rem)/1 var(--sans); letter-spacing: -0.045em; }
.app-client h2 { font: 500 1.35rem/1.1 var(--sans); letter-spacing: -0.035em; margin: 0 0 .9rem; }

/* Le solde : la couleur du café, une lueur qui bouge à peine, le chiffre énorme. */
.solde { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px !important; padding: 1.5rem 1.5rem 1.35rem !important; box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--cafe) 80%, transparent); }
.solde::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(40% 40% at 75% 20%, rgba(255,255,255,.28), transparent 70%), radial-gradient(35% 35% at 15% 90%, rgba(0,0,0,.18), transparent 70%); animation: lueur 16s ease-in-out infinite alternate; }
@keyframes lueur { to { transform: translate(-6%, 5%) rotate(10deg); } }
.solde .label { color: rgba(255,255,255,.78) !important; }
.solde .pts { font: 500 clamp(4.4rem, 22vw, 5.6rem)/0.95 var(--sans) !important; letter-spacing: -0.06em !important; margin: .7rem 0 .2rem !important; font-variant-numeric: tabular-nums; }
.solde .pts small { font: 500 1rem/1 var(--sans) !important; letter-spacing: -0.01em !important; opacity: .75; margin-left: .35rem; }
.solde .next { font-size: 1rem !important; letter-spacing: -0.01em; }
.solde .bar { height: 6px !important; background: rgba(255,255,255,.25) !important; }
.solde .bar i { transition: width 1.1s var(--ease) !important; }

.app-client .stats div { background: var(--paper) !important; box-shadow: none !important; border-radius: 18px !important; padding: .9rem !important; }
.app-client .stats b { font: 500 1.25rem/1.1 var(--sans) !important; letter-spacing: -0.03em; }

.app-client .rw { background: var(--paper) !important; box-shadow: none !important; border-radius: 22px !important; padding: .95rem 1rem !important; transition: transform .4s var(--ease); }
.app-client .rw .ic { background: #ffffff !important; border-radius: 14px !important; }
.app-client .rw b { font-weight: 500 !important; letter-spacing: -0.02em; font-size: 1.02rem; }
.app-client .rw .cost { font-family: var(--sans) !important; font-size: 13px !important; }
.app-client .rw .prog { background: #ffffff !important; height: 4px !important; }
.app-client .rw.ready { background: var(--cafe) !important; color: #ffffff; box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--cafe) 90%, transparent) !important; }
.app-client .rw.ready .cost { color: rgba(255,255,255,.75) !important; }
.app-client .rw.ready .ic { background: rgba(255,255,255,.18) !important; color: #ffffff !important; }
.app-client .rw.ready .ok { background: #ffffff !important; color: var(--ink) !important; font-weight: 500 !important; }
.app-client .rw.ready { animation: pret 2.8s var(--ease) infinite; }
@keyframes pret { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.015); } }

.app-client .hist { background: var(--paper) !important; box-shadow: none !important; border-radius: 22px !important; }
.app-client .hist li { border-bottom-color: #e6e6e3 !important; padding: .85rem 1rem !important; }
.app-client .hist .plus { font-family: var(--sans) !important; font-weight: 500 !important; }
.app-client .powered { font-family: var(--sans) !important; font-size: 12px !important; }

/* La feuille « écran d'accueil » : verre dépoli, boutons pilule. */
.app-client .guide { background: var(--glass) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-radius: 28px 28px 0 0 !important; box-shadow: 0 -1px 0 rgba(0,0,0,.06), 0 -30px 60px -30px rgba(0,0,0,.35) !important; animation: monte .5s var(--ease) both; }
@keyframes monte { from { transform: translateY(100%); } }
.app-client .guide h3 { font: 500 1.6rem/1.05 var(--sans) !important; letter-spacing: -0.04em !important; }
.app-client .guide li::before { font: 500 13px/1 var(--sans) !important; }
.app-client .gbtn { font-weight: 500 !important; }
.app-client .gbtn:not(.ghost) { background: var(--ink) !important; }
.app-client .etat h1 { font: 500 1.9rem/1.05 var(--sans) !important; letter-spacing: -0.04em; }

/* L'inscription (aderir.html) */
.app-client .paid { background: var(--paper) !important; box-shadow: none !important; font-family: var(--sans) !important; }
.app-client .go, .app-client .link { background: var(--ink) !important; font-weight: 500 !important; transition: transform .2s var(--ease), background-color .3s; }
.app-client .go:active, .app-client .link:active { transform: scale(.98); }
.app-client .ch, .app-client .hint, .app-client .sum { background: var(--paper) !important; box-shadow: none !important; border-radius: 18px !important; }
.app-client .ch:has(input:checked) { background: #ffffff !important; box-shadow: inset 0 0 0 2px var(--cafe) !important; }
.app-client .topics span { background: var(--paper) !important; box-shadow: none !important; }
.app-client .topics input:checked + span { background: var(--cafe) !important; }
.app-client .telrow select, .app-client .telrow input, .app-client input.field, .app-client .f input, .app-client .f select { background: var(--paper) !important; border-color: transparent !important; border-radius: 14px !important; }
.app-client .done .pts { font: 500 4.2rem/1 var(--sans) !important; letter-spacing: -0.06em !important; }
.app-client .steps i { height: 3px !important; }
.app-client .steps i.on { background: var(--ink) !important; }
.app-client .proto { background: var(--ink) !important; color: #ffffff !important; font-family: var(--mono) !important; }

/* ── L'app du comptoir (staff.html) : blanche, lisible à un mètre ──────────────────────── */
body.app-staff { background: #ffffff; color: var(--ink); }
.app-staff .proto { background: var(--ink) !important; color: #ffffff !important; }
.app-staff .proto a { color: #9ab3f0 !important; }
.app-staff .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 1rem !important; padding: .8rem max(16px, env(safe-area-inset-left, 0px)); }
.app-staff .top b { font: 600 1.25rem/1.1 var(--sans) !important; letter-spacing: -0.035em; }
.app-staff .live { font-family: var(--sans) !important; font-size: 12.5px !important; }
.app-staff .day div { background: var(--paper) !important; border: 0 !important; border-radius: 20px !important; padding: .85rem .9rem !important; }
.app-staff .day b { font: 500 clamp(1.4rem, 6vw, 1.9rem)/1 var(--sans) !important; letter-spacing: -0.05em; margin-top: .45rem !important; font-variant-numeric: tabular-nums; }
.app-staff .day .label { color: var(--muted) !important; }

.app-staff .feed { gap: .55rem !important; }
.app-staff .pay { background: var(--paper) !important; border: 0 !important; border-radius: 22px !important; padding: 1rem 1.1rem !important; transition: transform .35s var(--ease), box-shadow .35s; }
.app-staff .pay.clic:hover { box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.app-staff .pay.clic:active { transform: scale(.985); }
.app-staff .pay .who { font: 500 1.08rem/1.2 var(--sans) !important; letter-spacing: -0.02em; }
.app-staff .pay .meta { font-family: var(--sans) !important; color: var(--muted) !important; font-size: 13px !important; }
.app-staff .pay .amt { font: 500 1.25rem/1 var(--sans) !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.app-staff .pay .pts { font-family: var(--sans) !important; }
/* L'état se lit sans lire : une pastille devant le nom. */
.app-staff .pay .who::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; vertical-align: .12em; background: #c7c7cc; }
.app-staff .pay.back-card .who::before { background: var(--verde); }
.app-staff .pay.new .who::before { background: var(--carimbo); box-shadow: 0 0 0 4px rgba(61,99,201,.16); }
.app-staff .pay.reward .who::before { background: var(--crema); }
.app-staff .pay.new { box-shadow: inset 0 0 0 1.5px rgba(61,99,201,.35); }
.app-staff .pay.fresh { animation: arrive .7s var(--ease) both !important; }
@keyframes arrive { from { transform: translateY(-14px) scale(.98); opacity: 0; } }
.app-staff .nudge { color: var(--crema) !important; }
.app-staff .empty-feed { background: var(--paper) !important; box-shadow: none !important; border-radius: 22px !important; color: var(--muted) !important; }
.app-staff .back { color: var(--carimbo) !important; }

/* Boutons : pilule noire pour l'action, contour pour le reste. */
.app-staff .offer { background: var(--ink) !important; color: #ffffff !important; font-weight: 500 !important; transition: transform .2s var(--ease), background-color .3s; }
.app-staff .offer:hover { background: var(--carimbo) !important; }
.app-staff .offer:active { transform: scale(.97); }
.app-staff .skip { border-color: var(--ink-line) !important; color: var(--ink) !important; background: #ffffff !important; }
.app-staff .skip:hover { border-color: var(--ink) !important; }
.app-staff .big.a { background: var(--ink) !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 500 !important; }
.app-staff .big.b { background: var(--paper) !important; color: var(--ink) !important; border: 0 !important; border-radius: 999px !important; font-weight: 500 !important; }
.app-staff .scanbar { background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--ink-line) !important; }

/* La fiche : une feuille en verre dépoli, un très grand titre. */
.app-staff .sheet { background: rgba(11,11,12,.42) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: voile .3s ease both; }
@keyframes voile { from { opacity: 0; } }
.app-staff .sheet .card { border-radius: 30px 30px 0 0 !important; animation: monte .45s var(--ease) both; box-shadow: 0 -30px 60px -30px rgba(0,0,0,.4); }
@media (min-width: 700px) { .app-staff .sheet .card { border-radius: 30px !important; animation-name: pose; } }
@keyframes pose { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.app-staff .sheet h2 { font: 500 clamp(1.9rem, 8vw, 2.4rem)/1 var(--sans) !important; letter-spacing: -0.045em !important; }
.app-staff .sheet p { color: var(--muted) !important; }
.app-staff .qr { border-radius: 24px !important; box-shadow: 0 0 0 1px var(--ink-line), 0 20px 40px -24px rgba(0,0,0,.35) !important; }
.app-staff .cd { font-family: var(--sans) !important; }
.app-staff .ok-b { color: var(--verde) !important; font-weight: 500 !important; font-size: 1.15rem !important; }
.app-staff .give { background: var(--paper) !important; color: var(--ink) !important; border-radius: 999px !important; font-weight: 500 !important; transition: transform .2s var(--ease), background-color .3s; }
.app-staff .give span { font-family: var(--sans) !important; }
.app-staff .give.sure { background: var(--ink) !important; color: #ffffff !important; animation: tape .4s var(--ease); }
@keyframes tape { 40% { transform: scale(1.03); } }

/* Le PIN de la démo */
.app-staff .pin h1 { font: 500 2.2rem/1 var(--sans) !important; letter-spacing: -0.045em !important; }
.app-staff .dots i { border-color: #c7c7cc !important; }
.app-staff .dots i.on { background: var(--ink) !important; border-color: var(--ink) !important; }
.app-staff .keys button { background: var(--paper) !important; border: 0 !important; color: var(--ink) !important; font: 500 1.6rem/1 var(--sans) !important; transition: transform .15s var(--ease), background-color .2s; }
.app-staff .keys button:active { transform: scale(.94); background: #e3e3e0 !important; }

@media (prefers-reduced-motion: reduce) {
  .solde::before, .app-client .rw.ready, .app-client .guide, .app-staff .sheet, .app-staff .sheet .card, .app-staff .pay.fresh, .app-staff .give.sure { animation: none !important; }
}

/* Derniers alignements : tous les champs de l'inscription, et les montants de l'historique. */
.app-client input:not([type="checkbox"]):not([type="radio"]), .app-client select, .app-client textarea { background: var(--paper) !important; border-color: transparent !important; border-radius: 14px !important; }
.app-client .amount input { font: 500 1.7rem/1 var(--sans) !important; letter-spacing: -0.03em; }
.app-client .amount::after { font-family: var(--sans) !important; }
.app-client .hist .num { font-family: var(--sans) !important; }
.app-staff .pay .who { overflow-wrap: anywhere; }

/* ── L'app du comptoir sur tablette ───────────────────────────────────────────────────── */
/* L'action sur la ligne du paiement : une carte = une ligne, même pour une carte à inscrire. */
@media (min-width: 700px) {
  .app-staff .pay { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "who act amt"; column-gap: 1.2rem !important; }
  .app-staff .pay > div:first-child { grid-area: who; }
  .app-staff .pay > div:nth-child(2) { grid-area: amt; }
  .app-staff .pay .act { grid-area: act; justify-content: flex-end; }
  .app-staff .pay .amt { font-size: 1.4rem !important; }
  .app-staff .sheet .card { width: min(100%, 34rem) !important; }
  .app-staff .qr { width: min(100%, 20rem) !important; }
}
/* En paysage : les chiffres du jour fixés à gauche, le fil des paiements à droite. */
@media (min-width: 960px) {
  .app-staff .app { max-width: 76rem !important; display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0 1.6rem; align-items: start; }
  .app-staff .top { grid-column: 1 / -1; }
  .app-staff .day { grid-column: 1; grid-template-columns: minmax(0, 1fr) !important; position: sticky; top: calc(4.6rem + env(safe-area-inset-top, 0px)); margin: 0 !important; gap: .6rem !important; }
  .app-staff .day div { padding: 1.1rem 1.2rem !important; }
  .app-staff .day b { font-size: 2.4rem !important; }
  .app-staff .feed { grid-column: 2; }
}