/* The home page's own styles (from concepts/v3/lumiere.html, moved out of the page for a strict CSP). */
/* Lumière (retained 03.11.2026): white page, the working till as the hero, features as the app's
   own screens. */
.hero { padding: 40px 0 72px; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 48px; align-items: center; min-height: calc(100vh - 73px - 40px); max-height: 860px; }
.hero__copy { display: grid; gap: 28px; align-content: center; }
.hero .lead { max-width: 30em; }
.hero__cta { display: grid; gap: 18px; }

/* « dans votre café. » then restaurant, boutique… : the last line turns (site.js). */
.hero__title { font-size: clamp(50px, 4.5vw, 66px); }
/* The turning word's four ways are in site.css; this page uses one (data-rotate-style). */

/* The phone on the white page: a box at the phone's own size holds it and the customer's card
   (scaled with the phone, --phone-s from the fit script below). No banner since 04.11.2026. */
/* The phone and the card beside it (662 px wide at the phone's own size) are centred together. */
.hero .stage { place-items: center start; }
.phone-box { position: relative; width: calc(414px * var(--phone-s, 0.72)); height: calc(866px * var(--phone-s, 0.72)); margin-left: max(0px, calc((500px - 662px * var(--phone-s, 0.72)) / 2)); }
.phone-box .sm-device { --s: var(--phone-s, 0.72); z-index: 2; }

/* The customer's BoltCard: it comes from the right to the top of the phone, tilted, its contactless
   face toward the phone, and touches its frame only (a phone reads a card at its top), so it never
   hides the screen's content; waves pulse between card and phone while the till reads it. It
   leaves as the payment is seen, while the paid screen arrives. */
.tapcard { position: absolute; z-index: 3; left: 97%; top: 10%; width: calc(250px * var(--phone-s, 0.72)); aspect-ratio: 85.6 / 54; font-size: calc(16px * var(--phone-s, 0.72)); border-radius: 0.9em; background: #0b1a33; color: #f5f7fb; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1.4em 2.4em -1em rgba(0, 0, 0, 0.38); opacity: 0; transform-origin: 0 50%; transform: translateX(45%) rotate(-3deg); transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms linear; pointer-events: none; }
.tapcard.is-in { opacity: 1; transform: rotate(-12deg); }
.tapcard__nfc { position: absolute; left: 1.1em; top: 1em; width: 1.9em; height: 1.9em; transform: scaleX(-1); }
.tapcard__name { position: absolute; right: 1.1em; bottom: 0.95em; font-weight: 700; font-size: 1.05em; letter-spacing: -0.01em; }
.tapcard__waves { position: absolute; left: -2.6em; top: 50%; width: 2.2em; height: 3.4em; margin-top: -1.7em; color: #f7931a; opacity: 0; transition: opacity 200ms linear; }
.tapcard.is-reading .tapcard__waves { opacity: 1; }
.tapcard.is-reading .tapcard__waves path { animation: tap-wave 900ms ease-out infinite; }
.tapcard.is-reading .tapcard__waves path:nth-child(2) { animation-delay: 150ms; }
.tapcard.is-reading .tapcard__waves path:nth-child(3) { animation-delay: 300ms; }
@keyframes tap-wave { 0% { opacity: 0.25; } 40% { opacity: 1; } 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .tapcard, .tapcard.is-in { transform: rotate(-12deg); transition: opacity 240ms linear; }
  .tapcard.is-reading .tapcard__waves path { animation: none; }
}

/* The adoption figures on an ink band, in orange, as swiss-bitcoin-pay.ch shows them (owner,
   04.11.2026: « mieux mis en avant »); orange stays a fill or display ink on ink, never body text. */
.stats-band { padding: 64px 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats li { display: grid; gap: 14px; justify-items: center; padding: 6px 24px; border-left: 1px solid var(--line); }
.stats li:first-child { border-left: 0; }
.stats b { font-size: clamp(50px, 4.5vw, 66px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #f7931a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats span { font-size: 16px; font-weight: 600; color: var(--text-2); }
/* The press, narrower and scrolling without end (owner, 04.11.2026); the second copy is hidden from
   assistive tech and out of the tab order; it pauses under the pointer or focus; reduced motion shows
   one still, wrapped row. */
.proof { padding: 44px 0 60px; border-bottom: 1px solid var(--line); }
.press-marquee { max-width: 760px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.press-marquee__track { display: flex; width: max-content; animation: press-scroll 48s linear infinite; }
.press-marquee .press { flex-wrap: nowrap; padding-right: 34px; }
.press-marquee:hover .press-marquee__track, .press-marquee:focus-within .press-marquee__track { animation-play-state: paused; }
@keyframes press-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .press-marquee { max-width: none; -webkit-mask-image: none; mask-image: none; }
  .press-marquee__track { width: auto; animation: none; }
  .press-marquee .press { flex-wrap: wrap; padding-right: 0; }
  .press-marquee .press[aria-hidden] { display: none; }
}

.section { padding: 120px 0; }
/* Section heads centred on the page (owner, 04.11.2026). */
/* The features' head takes the column's whole width: each of its two sentences holds on one line
   (owner, 04.11.2026: « Toutes les fonctions que vous pouvez imaginer. / Et bien plus encore. »). */
.section__head { display: grid; justify-items: center; gap: 18px; margin: 0 auto 56px; text-align: center; }
.section__head .lead { max-width: 36em; }

/* ---------- Illustrations: the app's own screens, one system for the whole page ----------
   A screen is drawn as the app draws it (new-app tokens: cream ground, white rows, ink text, orange
   primary fill with the app's white label, settled green). In the features, a phone or a browser window
   rises from the bottom of a white tile; in the three gestures, the screen alone. Every label in a
   screen is the app's own (src/i18n/locales/fr.ts). */
/* Section heads: the heading and its lead as one centred block (owner, 04.11.2026), here for the
   gestures and the shop; .section__head above does the same for the features. */
.head-solo { display: grid; justify-items: center; gap: 18px; max-width: 44em; margin: 0 auto 56px; text-align: center; }
.head-solo .lead { max-width: 34em; }
/* The three gestures: the till's three screens, as phones on the white page, who acts above each. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.trio li { display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center; }
.trio__fig { position: relative; }
.trio h3 { margin-top: 12px; }
.trio li > p:last-child { max-width: 22em; font-size: 16px; color: var(--text-2); }
.kp { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 6px; font-size: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.kp span { display: grid; place-items: center; height: 40px; }
.kp svg { width: 22px; height: 16px; }
.cd { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #6e675e; }
.cd p { display: flex; justify-content: space-between; }
.cd b { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; color: #0b1a33; }
.cd i { display: block; height: 4px; border-radius: 3px; background: #f7931a; }
.wait { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; }
.wait::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f7931a; }
.cardline { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 500; color: #6e675e; }
.cardline svg { flex: none; width: 26px; height: 26px; }
.crop__push { flex: 1; }
/* The customer's card at the second phone's top, as in the demo. */
.mini { display: grid; justify-items: center; gap: 8px; text-align: center; width: 100%; }
.mini__title { font-weight: 700; font-size: 14px; }
.mini__amount { font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.mini__amount small { margin-left: 6px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: #6e675e; }
.mini__sats { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #6e675e; }
.mini__sats b { color: #0b1a33; font-weight: 500; }
.mini__qr { padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); }
.mini__qr svg { width: 128px; height: 128px; display: block; }
.mini__nets { font-weight: 700; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.mini__nets em { font-style: normal; font-weight: 500; color: #6e675e; }
.mini__nets svg { flex: none; width: 16px; height: 16px; }
.mini__hint { font-size: 12.5px; font-weight: 500; color: #6e675e; }
.mini__disc { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #dcede2; color: #1f6b45; }
.mini__disc svg { width: 32px; height: 32px; }
.mini__paid { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; line-height: 1.1; }
.mini__meta { font-size: 13px; color: #6e675e; font-weight: 500; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #dcede2; color: #1f6b45; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2e9c64; }
.chip--open { background: #fcebd5; color: #8f5300; }
.chip--open::before { background: #f7931a; }
.features { background: var(--surface); }
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.ftile { grid-column: span 6; display: grid; grid-template-rows: auto 1fr; gap: 32px; padding: 44px 44px 0; border-radius: 28px; background: #fff; overflow: hidden; }
.ftile--wide { grid-column: span 12; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: none; gap: 48px; padding-top: 52px; }
.ftile--wide .ftile__text { align-self: center; padding-bottom: 44px; }
.ftile__text p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.ftile__text .ftile__note { margin-top: 12px; font-size: 14.5px; color: var(--text-3); }
.ftile__visual { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 24px; min-height: 0; }
.dev { margin: 0; display: grid; justify-items: center; align-content: end; gap: 14px; }
.dev figcaption { font-size: 13px; font-weight: 600; color: var(--text-3); }
/* Léa's phone is named by her face (owner, 04.11.2026). */
.dev__who { display: inline-flex; align-items: center; gap: 7px; }
.dev__who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.08); }

/* A phone, cut by the tile's bottom edge. */
.crop { flex: none; width: 264px; height: 372px; padding: 10px 10px 0; border-radius: 44px 44px 0 0; background: #17191d; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 24px 50px -20px rgba(16, 24, 40, 0.35); }
.crop__screen { height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 0; border-radius: 35px 35px 0 0; background: #faf6ee; color: #0b1a33; font-size: 13px; line-height: 1.35; overflow: hidden; }
.crop__status { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crop__status i { width: 70px; height: 21px; border-radius: 12px; background: #0d0e10; }
.crop__status s { width: 26px; height: 10px; border-radius: 3px; background: #0b1a33; opacity: 0.8; text-decoration: none; }
.crop__title { margin: 2px 0 4px; text-align: center; font-weight: 700; font-size: 14.5px; }
.crop__label { margin-top: 4px; font-size: 12px; font-weight: 700; color: #6e675e; }
.crop__btn { flex: none; height: 44px; border-radius: 999px; background: #f7931a; box-shadow: inset 0 0 0 1px rgba(143, 83, 0, 0.35); color: #fff; text-shadow: 0 1px 0 rgba(143, 83, 0, 0.55); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); }
.row--new { background: #dcede2; box-shadow: none; }
.row__av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f2ece0; font-weight: 700; font-size: 12px; }
/* As the app's « Employés »: the person's photo once joined, dashed initials while the invitation
   waits (new-app Avatar, tone « pending »). Photos: CC0, assets/photos/sources.json. */
img.row__av { object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.08); }
.row__av--pending { box-sizing: border-box; background: transparent; border: 1.5px dashed #8a837a; color: #6e675e; }
.row__main { flex: 1; min-width: 0; }
.row__main b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.row__main small { display: block; font-size: 11.5px; color: #6e675e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row--new .row__main small { color: #1f6b45; }
.row__amt { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: #f2ece0; font-size: 12px; font-weight: 600; color: #6e675e; text-align: center; }
.seg span { padding: 5px 0; border-radius: 999px; }
.seg .is-on { background: #fff; color: #0b1a33; box-shadow: 0 1px 2px rgba(11, 26, 51, 0.12); }
.arts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.art { position: relative; display: grid; align-content: start; gap: 2px; padding: 6px 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); font-size: 12.5px; font-weight: 700; line-height: 1.25; }
/* An article with its photo, as the app shows one (src/app/(app)/pos: the photo, then name and price). */
.art img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; margin-bottom: 5px; background: #f2ece0; }
.art small { padding-left: 2px; }
.row__ph { flex: none; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.art small { font-size: 12px; font-weight: 600; color: #6e675e; font-variant-numeric: tabular-nums; }
.art.is-on { box-shadow: 0 0 0 2px #f7931a; }
.art b { position: absolute; z-index: 1; top: 10px; right: 10px; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: #0b1a33; color: #fff; font-size: 11px; }
.viewfinder { position: relative; height: 150px; border-radius: 16px; background: #22262d; display: grid; place-items: center; }
.viewfinder::before { content: ""; position: absolute; inset: 22px 30px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 12px; }
.viewfinder svg { width: 120px; height: 56px; }
.field { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); }
.field small { display: block; font-size: 11.5px; font-weight: 600; color: #6e675e; }
.field b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.field span { display: block; margin-top: 2px; font-size: 11.5px; color: #6e675e; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); font-size: 12.5px; color: #6e675e; font-weight: 600; }
.kv b { color: #0b1a33; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The currency's round flag, as the app's currency select shows it (owner, 04.11.2026). */
.kv b { display: inline-flex; align-items: center; gap: 6px; }
.kv .flag { width: 16px; height: 16px; flex: none; }

/* ---------- The shop: a merchant's own site, large, where the order is paid in bitcoin ----------
   A browser window holds the café's shop at checkout (its cart's products, « Bitcoin » chosen among
   the payment methods, the invoice's code) and the merchant's laptop stands beside it. While the scene is
   in view the code turns paid and the order arrives in the laptop's movements, in a loop (site script
   below). Without script or with reduced motion, the paid state shows at once. */
.shopsec { padding-top: 104px; }
.shopsec .head-solo { gap: 14px; margin-bottom: 36px; }
/* The shop (the customer's side) and the laptop (the café's wallet), without captions (owner, 04.11.2026). */
.scene { position: relative; display: flex; align-items: flex-start; }
/* The café's own shop (owner, 03.11.2026: « une interface typique de WooCommerce, Wix ou Shopify,
   mais générique », another software than ours): its own fonts (Young Serif, Source Sans 3), its own
   espresso accent, square-ish corners, prices as Swiss shops print them (CHF 18.00); no platform's
   page copied. A checkout: the cart's products, the payment methods, Bitcoin chosen and its code. */
.eshop { position: relative; flex: none; width: calc(100% - 500px); height: 500px; border-radius: 16px; background: #fff; color: #1f1a17; font-family: "Source Sans 3", system-ui, sans-serif; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.1), 0 40px 80px -36px rgba(16, 24, 40, 0.35); overflow: hidden; }
.eshop .win__bar { height: 36px; }
.eshop__url { display: flex; align-items: center; justify-content: center; gap: 5px; width: 38%; height: 20px; margin-left: auto; margin-right: auto; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e3e6eb; font: 400 12px/1 system-ui, sans-serif; color: #5f6880; }
.eshop__url svg { width: 11px; height: 11px; }
.co__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 64px 0 32px; border-bottom: 1px solid #e7e2dc; }
.co__brand { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }
.co__bag { position: relative; display: block; width: 24px; height: 24px; }
.co__bag svg { display: block; width: 24px; height: 24px; }
.co__bag b { position: absolute; right: -9px; top: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #4a2f22; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; height: calc(100% - 100px); }
.co__main { display: grid; align-content: start; gap: 16px; padding: 24px 28px 0; }
.co__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6f6862; }
.co__crumbs i { font-style: normal; color: #a39b94; }
.co__crumbs b { font-weight: 600; color: #1f1a17; }
.co__h { margin-top: 4px; font-size: 19px; font-weight: 600; }
.co__methods { border: 1px solid #e2ddd8; border-radius: 6px; font-size: 15px; overflow: hidden; }
.co__method { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; }
.co__method + .co__method { border-top: 1px solid #e2ddd8; }
.co__method.is-on { background: #f8f4f0; box-shadow: inset 0 0 0 1px #4a2f22; font-weight: 600; }
.co__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #8c847d; }
.co__method.is-on .co__radio { box-shadow: inset 0 0 0 5.5px #4a2f22; }
.co__icons { display: flex; gap: 6px; margin-left: auto; }
.co__icons svg { width: 22px; height: 22px; }
.co__panel { display: flex; align-items: center; gap: 18px; padding: 16px; border-top: 1px solid #e2ddd8; background: #f8f4f0; }
.co__how { display: grid; gap: 10px; max-width: 16em; font-size: 14.5px; line-height: 1.45; color: #4d4640; }
.pay__plate { position: relative; flex: none; padding: 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e2ddd8; }
.pay__plate svg { display: block; width: 124px; height: 124px; }
/* Paid (owner, 04.11.2026: « un poil mieux »): the code fades back, a green disc pops over it with one
   ring, and its check draws itself; no green square, as on the till. */
.pay__plate [data-qr] svg { transition: opacity 320ms linear, transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.pay__green { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: #2e7d4f; color: #fff; box-shadow: 0 6px 14px -6px rgba(16, 24, 40, 0.35); transition: opacity 90ms linear, transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pay__green svg { width: 34px; height: 34px; }
.pay__green path { stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 380ms cubic-bezier(0.65, 0, 0.35, 1) 200ms; }
.pay__green::after { content: ""; position: absolute; inset: 0; border: 2px solid #2e7d4f; border-radius: 50%; opacity: 0; animation: shop-ring 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.scene:not(.is-waiting) .pay__plate [data-qr] svg { opacity: 0.08; transform: scale(0.94); }
.scene.is-waiting .pay__green { opacity: 0; transform: scale(0.4); }
.scene.is-waiting .pay__green path { stroke-dashoffset: 1.1; transition: none; }
.scene.is-waiting .pay__green::after { animation: none; }
.pay__state { display: grid; }
.pay__state > * { grid-area: 1 / 1; font-size: 15px; font-weight: 600; transition: opacity 140ms linear, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.pay__wait { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-6px); }
.pay__wait i { width: 7px; height: 7px; border-radius: 50%; background: #b07a3c; animation: shop-wait 1600ms ease-in-out infinite; }
.pay__done { display: grid; align-content: start; gap: 2px; color: #2e7d4f; transition-duration: 260ms, 460ms; transition-delay: 160ms; }
.pay__done span { font-weight: 400; }
.scene.is-waiting .pay__wait { opacity: 1; transform: none; }
.scene.is-waiting .pay__done { opacity: 0; transform: translateY(6px); transition-delay: 0ms; }
/* Between two orders the summary and the payment fade out and back in on the next order; the
   payment's own movements are skipped while it is hidden (is-reset). */
.co__sum, .co__panel, .co__bag b { transition: opacity 240ms linear; }
.scene.is-swapping .co__sum, .scene.is-swapping .co__panel, .scene.is-swapping .co__bag b { opacity: 0; }
.scene.is-reset .pay__green, .scene.is-reset .pay__green path, .scene.is-reset .pay__plate [data-qr] svg, .scene.is-reset .pay__state > * { transition: none; }
@keyframes shop-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes shop-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
/* The till, on the merchant's laptop (owner, 03.11.2026: « plutôt un laptop », several integrations
   with their logos): the web app's « Mouvements », « Par » showing an integration's platform logo
   in place of an avatar, as the app does (new-app ActivityBy, request of 18.10.2026). */
.scene__laptop { position: relative; z-index: 1; flex: none; margin-left: -40px; }
/* Drawn for the 1200 px column; from 1280 to 1359 px the column is narrower and the scene keeps its
   proportions (below 1280 px, see the rules for narrower screens at the end of this file). */
@media (max-width: 1359px) { .scene { zoom: 0.9333; } }
.laptop--sm .laptop__lid { width: 480px; padding: 13px 12px 15px; border-radius: 15px 15px 5px 5px; }
.laptop--sm .laptop__screen { height: 286px; }
.laptop--sm .laptop__base { width: 540px; height: 14px; }
.laptop--sm .win__bar { height: 26px; gap: 5px; padding: 0 11px; }
.laptop--sm .win__bar i { width: 7px; height: 7px; }
.laptop--sm .win__body { padding: 14px 16px; }
.laptop--sm .win__title { font-size: 15px; }
.laptop--sm .win__day { margin: 8px 0 5px; font-size: 11px; }
.mv { border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); font-size: 12px; overflow: hidden; }
.mv__head, .mv__row { display: grid; grid-template-columns: 36px minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 12px; }
.mv__head { height: 26px; border-bottom: 1px solid rgba(11, 26, 51, 0.1); font-size: 10.5px; font-weight: 600; color: #6e675e; }
.mv__head span:last-child, .mv__row span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mv__row { height: 36px; border-top: 1px solid rgba(11, 26, 51, 0.05); white-space: nowrap; }
.mv__row span { overflow: hidden; text-overflow: ellipsis; }
.mv__row span:first-child { color: #6e675e; font-variant-numeric: tabular-nums; }
.mv__row.is-new { background: #dcede2; color: #1f6b45; }
.arrive:first-child .mv__row, .mv__head + .arrive .mv__row { border-top: 0; }
.mv__by { display: flex; align-items: center; gap: 6px; }
.mv__by img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.mv__by img.is-face { border-radius: 50%; object-fit: cover; }
.co__sum { display: grid; align-content: start; gap: 14px; padding: 24px 56px 0 20px; border-left: 1px solid #e7e2dc; background: #faf8f6; font-size: 14.5px; }
.co__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.co__thumb { position: relative; width: 52px; height: 52px; }
.co__thumb img { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #f8f4f0; box-shadow: 0 0 0 1px #e2ddd8; }
.co__thumb b { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: #6f6862; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.co__item p { display: grid; gap: 1px; min-width: 0; }
.co__item p b { font-weight: 600; }
.co__item small { font-size: 13px; color: #6f6862; }
.co__item > span:last-child { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.co__thumb { grid-row: span 2; }
.co__line { display: flex; justify-content: space-between; color: #4d4640; }
.co__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid #e2ddd8; font-size: 17px; font-weight: 600; }
.co__total b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.co__total small { margin-right: 5px; font-size: 12.5px; font-weight: 600; color: #6f6862; }
/* The platforms and languages, as « Nouvelle intégration » shows them in the app (its logos, from
   new-app src/features/integrations/logos.ts): the shops large, three by line; the SDKs smaller. */
.kits { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; margin-top: 64px; }
.kits__label { margin-bottom: 16px; font-size: 15px; font-weight: 700; color: var(--text-3); }
.kits ul { display: grid; gap: 12px; }
.kits__shops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kits__shops li { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 20px; border-radius: 16px; background: var(--surface); font-size: 17px; font-weight: 700; }
.kits__shops img { flex: none; width: 36px; height: 36px; object-fit: contain; }
.kits__sdks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kits__sdks li { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; }
.kits__sdks img { flex: none; width: 22px; height: 22px; object-fit: contain; }
/* A whole phone (the gestures, the shop's till). In the shop it stands over the window's margin. */
.crop--full { position: relative; z-index: 1; height: 540px; padding: 10px; border-radius: 44px; }
.crop--full .crop__screen { border-radius: 35px; }
/* Each paid order arrives: its row opens at the top of the movements, green until the next one comes,
   and the older rows move down out of the screen. « Hier » separates the days when the clock passes
   midnight, as the app groups its movements by day. */
.arrive { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 560ms cubic-bezier(0.16, 1, 0.3, 1); }
.arrive > div { min-height: 0; overflow: hidden; }
.arrive > div > * { transition: opacity 320ms linear 180ms, background-color 1400ms linear, color 1400ms linear; }
.arrive.is-pending { grid-template-rows: 0fr; }
.arrive.is-pending > div > * { opacity: 0; }
.mv__day { padding: 7px 12px 5px; border-top: 1px solid rgba(11, 26, 51, 0.1); font-size: 10.5px; font-weight: 700; color: #6e675e; }
@media (prefers-reduced-motion: reduce) {
  .pay__green, .pay__green path, .pay__plate [data-qr] svg, .pay__state > *, .co__sum, .co__panel, .co__bag b, .arrive, .arrive > div > * { transition: none; }
  .pay__green::after, .pay__wait i { animation: none; }
}

/* A browser window, cut by the tile's bottom edge: the web app, or a merchant's own site. */
.win { flex: none; width: 396px; height: 372px; border-radius: 14px 14px 0 0; background: #faf6ee; color: #0b1a33; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.1), 0 24px 50px -20px rgba(16, 24, 40, 0.3); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: #eef0f3; border-bottom: 1px solid #e3e6eb; }
.win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfd4dc; }
.win__body { padding: 18px 20px; }
.win__title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.win__day { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: #6e675e; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 26, 51, 0.06); }
.tbl th { padding: 8px 12px; text-align: left; font-size: 11.5px; font-weight: 600; color: #6e675e; border-bottom: 1px solid rgba(11, 26, 51, 0.1); }
.tbl td { padding: 9px 12px; border-bottom: 1px solid rgba(11, 26, 51, 0.05); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:last-child, .tbl th:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.tbl td:first-child { color: #6e675e; font-variant-numeric: tabular-nums; }
.tbl .is-new td { background: #dcede2; color: #1f6b45; }
.shop__name { font-weight: 800; font-size: 15px; }
.shop__line { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: #46526a; }
.shop__line b { color: #0b1a33; font-variant-numeric: tabular-nums; }
.shop__total { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1px solid #e3e6eb; font-weight: 800; font-size: 14px; }
.shop__pay { height: 42px; margin-top: 4px; border-radius: 10px; background: #0b1a33; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.shop__pay svg { width: 15px; height: 15px; }
/* The order paid on the shop's page lands in the till's movements. */
.ftile__visual--two { gap: 16px; }
/* Your sales on every screen (owner, 03.11.2026: « un vrai laptop générique »): Léa's phone, whole,
   stands in front of a whole laptop, no brand on it, whose screen shows the web app's « Mouvements »
   in a browser. The phone is the gestures' phone drawn at half size (zoom keeps its layout). */
.ftile__visual--desk { align-items: flex-end; gap: 0; padding-bottom: 44px; }
.dev--hand { position: relative; z-index: 2; margin-right: -22px; margin-bottom: -10px; }
.dev--hand .crop--full { zoom: 0.58; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 36px 60px -24px rgba(16, 24, 40, 0.45); }
/* What must be read stays at 10 px or more once halved: the title, the pill, the amount's line, the button. */
.dev--hand .crop__title { font-size: 17px; }
.dev--hand .chip { height: 32px; padding: 0 14px; font-size: 17px; }
.dev--hand .mini__meta { font-size: 17px; }
.dev--hand .crop__btn { height: 52px; font-size: 17px; }
.laptop { position: relative; display: grid; justify-items: center; }
.laptop__lid { position: relative; width: 520px; padding: 14px 12px 16px; border-radius: 16px 16px 5px 5px; background: #17191d; box-shadow: 0 0 0 2px #c9cdd3, 0 0 0 3px #aeb3ba; }
.laptop__cam { position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #34373e; }
.laptop__screen { height: 310px; border-radius: 3px; overflow: hidden; background: #fff; }
.laptop__screen .win { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.laptop__base { position: relative; width: 588px; height: 15px; margin-top: 3px; border-radius: 3px 3px 14px 14px / 3px 3px 9px 9px; background: linear-gradient(#e6e8ec, #cdd1d7 55%, #aab0b8); box-shadow: 0 1px 0 #9ca2ab; }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 104px; height: 6px; margin-left: -52px; border-radius: 0 0 8px 8px; background: #b9bec6; }
.laptop__base::after { content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 22px; background: radial-gradient(50% 60% at 50% 0, rgba(16, 24, 40, 0.28), transparent); }

.free { padding: 120px 0; }
.free__grid { display: grid; gap: 64px; }
.free__head { max-width: 44em; margin: 0 auto; text-align: center; }
.free .lead { margin: 20px auto 0; max-width: 36em; color: var(--text-2); }
/* Four points, each with its own drawing (owner, 03.11.2026: « plus vivant »). */
.free__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
.free__list div { display: grid; align-content: start; gap: 8px; }
.free__art { display: grid; place-items: center; height: 168px; margin-bottom: 14px; border-radius: 20px; background: var(--surface); }
.free__art svg { width: 168px; height: 123px; }
.free__list dt { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.free__list dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }

.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 56px; border-radius: 32px; background: var(--surface); }
.price__big { font-weight: 800; font-size: 96px; line-height: 0.95; letter-spacing: -0.04em; }
.price__until { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.price__then { margin-top: 8px; font-size: 18px; color: var(--text-2); }
.price__then b { color: var(--text); }
/* The café's order of the shop scene, priced: true of the approved pricing whatever 1 % applies to. */
.price ul { display: grid; gap: 14px; margin-bottom: 28px; }
.price li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.price li svg { width: 20px; height: 20px; color: var(--paid); flex: none; margin-top: 3px; }
.price__web { margin-top: 22px; }
/* The web app's links: a globe says « in the browser » before the words; only the arrow moves on hover. */
.link-arrow .globe { width: 17px; height: 17px; }
.link-arrow:hover .globe { transform: none; }

.final { padding: 120px 0 128px; text-align: center; }
.final .lead { margin: 20px auto 0; text-align: center; }
/* The store badges on one line, the code to scan on the next (owner, 03.11.2026). */
.final__row { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* Former inline styles, as classes (strict CSP). */
.press a.press--rts { -webkit-mask-image: url(/assets/press/rts.png); mask-image: url(/assets/press/rts.png); width: 89px; height: 25px; }
.press a.press--rfj { -webkit-mask-image: url(/assets/press/rfj.png); mask-image: url(/assets/press/rfj.png); width: 55px; height: 29px; }
.press a.press--arcinfo { -webkit-mask-image: url(/assets/press/arcinfo.png); mask-image: url(/assets/press/arcinfo.png); width: 87px; height: 21px; }
.press a.press--cointribune { -webkit-mask-image: url(/assets/press/cointribune.png); mask-image: url(/assets/press/cointribune.png); width: 125px; height: 16px; }
.press a.press--jacceptebitcoin { -webkit-mask-image: url(/assets/press/jacceptebitcoin.png); mask-image: url(/assets/press/jacceptebitcoin.png); width: 135px; height: 18px; }
.press a.press--decouvrebitcoin { -webkit-mask-image: url(/assets/press/decouvrebitcoin.png); mask-image: url(/assets/press/decouvrebitcoin.png); width: 78px; height: 31px; }
.press a.press--oncebitten { -webkit-mask-image: url(/assets/press/oncebitten.png); mask-image: url(/assets/press/oncebitten.png); width: 106px; height: 22px; }
.press a.press--pow { -webkit-mask-image: url(/assets/press/pow.png); mask-image: url(/assets/press/pow.png); width: 63px; height: 24px; }
.press a.press--bitcoinlausanne { -webkit-mask-image: url(/assets/press/bitcoinlausanne.png); mask-image: url(/assets/press/bitcoinlausanne.png); width: 132px; height: 14px; }
.mini.mini--mt10 { margin-top: 10px; }
.spacer-10 { height: 10px; }
.mini__paid.mini__paid--30 { font-size: 30px; }
.spacer-12 { height: 12px; }
.mini.mini--mt56 { margin-top: 56px; }
.mini__hint.mini__hint--center { text-align: center; }
.final__web { margin-top: 28px; }

/* ---------- Narrower screens ----------
   Everything above is drawn for 1280 px and wider and stays so. Narrower, the page reflows in three
   steps: 1024 to 1279 px keeps the desktop's composition, tightened; 768 to 1023 px stacks the hero
   and the shop; 767 px and less is one column. The illustrations drawn at a fixed size (two phones,
   the laptop, the shop) are zoomed down to the width they get, never up ([data-fit], home.js). */
@media (max-width: 1279px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
  /* The phone and its card, centred together in the column whatever their scale (home.js). */
  .phone-box { margin-left: max(0px, calc((100% - 662px * var(--phone-s, 0.72)) / 2)); }
  .stats b { font-size: clamp(40px, 5.2vw, 66px); }
  .ftile--wide { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; }
  .ftile--wide .ftile__text { padding-bottom: 0; }
  .ftile__visual { justify-self: center; width: max-content; }
  /* The shop keeps its composition, drawn at 1200 px and zoomed to the column. */
  .scene { width: 1200px; zoom: 1; }
  .kits__shops li { gap: 10px; padding: 0 14px; font-size: 16px; }
  .kits__shops img { width: 30px; height: 30px; }
  .price__big { font-size: 84px; }
}

@media (max-width: 1023px) {
  .hero { padding: 32px 0 64px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; max-height: none; }
  .hero__title { font-size: 64px; }
  .hero .stage { place-items: start; }
  .section, .free { padding: 96px 0; }
  .final { padding: 96px 0 104px; }
  .trio { gap: 24px; }
  .trio__fig { zoom: 0.78; }
  .feat { gap: 20px; }
  .ftile { padding: 36px 32px 0; }
  .ftile--wide { padding-top: 36px; }
  .ftile--wide.ftile .ftile__visual--desk { padding-bottom: 36px; }
  /* The shop's window takes the column, the café's laptop stands under it. */
  .scene { width: auto; flex-direction: column; align-items: center; }
  .eshop { width: 100%; }
  .scene__laptop { margin: -40px 0 0; }
  .kits { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
  .free__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .price { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px; }
}

@media (max-width: 767px) {
  .hero { padding: 24px 0 56px; }
  .hero__copy { gap: 22px; }
  .hero__title { font-size: clamp(30px, 9.4vw, 60px); }
  .hero__cta { gap: 10px; }
  /* On a phone the customer's card comes from above to the top of the phone (where a phone reads a
     card), so the phone can take the screen's width. Smaller than beside a desktop's phone, it covers
     the frame and the camera's island only, never the clock, the battery nor the screen's content;
     the waves pulse under it, over the island. */
  .hero__grid { gap: 28px; }
  .hero .stage { place-items: start center; padding-top: calc(98px * var(--phone-s, 0.6)); }
  .phone-box { margin-left: 0; }
  .tapcard { left: calc(50% - 100px * var(--phone-s, 0.6)); top: calc(-96px * var(--phone-s, 0.6)); width: calc(200px * var(--phone-s, 0.6)); font-size: calc(12.8px * var(--phone-s, 0.6)); transform-origin: 50% 100%; transform: translateY(-40%) rotate(3deg); }
  .tapcard.is-in { transform: rotate(-3deg); }
  .tapcard__waves { left: 50%; top: 100%; margin: -0.5em 0 0 -1.1em; transform: rotate(-90deg); }
  .stats-band { padding: 40px 0; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats li { gap: 8px; padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .stats li:first-child { padding-top: 0; border-top: 0; }
  .stats li:last-child { padding-bottom: 0; }
  .stats b { font-size: 46px; }
  .stats span { font-size: 15px; }
  .proof { padding: 32px 0 40px; }
  .section, .free { padding: 72px 0; }
  .shopsec { padding-top: 72px; }
  .head-solo, .section__head, .shopsec .head-solo { gap: 14px; margin-bottom: 36px; }
  /* The three gestures as rows: the screen, then what happens. */
  .trio { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .trio li { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; justify-items: start; text-align: left; }
  .trio__fig { grid-row: span 2; zoom: 0.46; }
  .trio h3 { margin-top: 0; align-self: end; }
  .trio li > p:last-child { align-self: start; font-size: 15.5px; }
  .feat { gap: 16px; }
  .ftile { grid-column: span 12; gap: 24px; padding: 28px 24px 0; border-radius: 24px; }
  .ftile--wide { gap: 24px; padding-top: 28px; }
  .ftile--wide.ftile .ftile__visual--desk { padding-bottom: 28px; }
  .ftile__text p { font-size: 16px; }
  /* The shop on a phone: its checkout in one column, as a shop's site shows it on a phone. */
  .eshop { height: auto; border-radius: 14px; }
  .eshop__url { width: 64%; }
  .co__top { height: 56px; padding: 0 28px 0 20px; }
  .co__brand { font-size: 21px; }
  .co__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .co__main { gap: 14px; padding: 18px 18px 22px; }
  .co__crumbs { flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; }
  .co__methods { font-size: 14.5px; }
  .co__method { padding: 0 14px; }
  .co__panel { flex-direction: column; text-align: center; }
  .co__how { justify-items: center; max-width: 18em; }
  .pay__wait { justify-content: center; }
  .co__sum { gap: 12px; padding: 18px 18px 22px; border-left: 0; border-top: 1px solid #e7e2dc; }
  /* Zoomed to the column by home.js; half its size until then, so it never widens the page. */
  .scene__laptop { margin: 24px 0 0; zoom: 0.5; }
  .kits { gap: 32px; margin-top: 48px; }
  .kits__shops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kits__shops li { flex-direction: column; justify-content: center; gap: 8px; height: 88px; padding: 0 6px; border-radius: 14px; font-size: 13px; text-align: center; }
  .kits__shops img { width: 28px; height: 28px; }
  .kits__sdks { gap: 10px; }
  .kits__sdks li { height: 46px; }
  /* Security: each point as a row, its drawing beside its words. */
  .free__grid { gap: 40px; }
  .free__list { grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: left; }
  .free__list div { position: relative; min-height: 76px; padding-left: 122px; gap: 6px; }
  .free__art { position: absolute; left: 0; top: 0; width: 104px; height: 76px; margin: 0; border-radius: 16px; }
  .free__art svg { width: 104px; height: 76px; }
  .free__list dt { font-size: 17px; }
  .free__list dd { font-size: 15.5px; }
  .price { gap: 28px; padding: 32px 20px; border-radius: 24px; }
  /* The two badges side by side from 375 px. */
  .price .stores { gap: 6px; }
  .price__big { font-size: 72px; }
  .price__until { font-size: 20px; }
  .price li { font-size: 16px; }
  .final { padding: 72px 0 80px; }
  .final__row { margin-top: 32px; }
}

/* The smallest phones: the platforms' names keep to their cells. */
@media (max-width: 374px) {
  .kits__shops li { padding: 0 4px; font-size: 12px; }
}
@media (max-width: 343px) {
  .kits__shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kits__shops li { padding: 0 6px; font-size: 13px; }
}

/* A code to scan is useless on the screen that would scan it: touch screens get the badges alone. */
@media (hover: none) and (pointer: coarse) {
  .final .qr-box { display: none; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .tapcard, .tapcard.is-in { transform: rotate(-3deg); }
}