/* ============================================================
   Écran de paiement — 1 ₿
   Chaque animation montre une donnée vraie : le prix qui bouge,
   le temps qui passe sans qu'personne n'achète.
   ============================================================ */

.pay-body { background: var(--noir); }

.pay {
  min-height: calc(100svh - var(--frame) * 2);
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 30px) var(--gutter) clamp(22px, 2.6vw, 34px);
}

/* --- barre du haut ---------------------------------------- */
.pay__nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; color: var(--creme);
}
.pay__nav a { transition: opacity .25s; }
.pay__nav a:hover { opacity: .55; }

.pay__brand {
  color: rgba(247,244,239,.55);
  transition: color .28s;
}
.pay__brand:hover { color: var(--creme); }
.pay__live { display: inline-flex; align-items: center; gap: 9px; }
.pay__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rouge-vif);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(232,80,60,.55); }
  70%      { opacity: .5; box-shadow: 0 0 0 9px rgba(232,80,60,0); }
}

/* --- corps ------------------------------------------------- */
.pay__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(34px, 6vw, 100px);
  align-items: center;
  padding: clamp(36px, 6vh, 80px) 0;
}

/* ============================================================
   Le prix : le 1 monte, le mot se dévoile par le bas
   ============================================================ */
.glyph {
  display: block;
  color: rgba(247,244,239,.7);
  margin-bottom: clamp(22px, 3vw, 38px);
}
/* Aucune fonte ne contient le signe ₿ ; on écrit le mot. */
.glyph__one {
  display: block;
  font-size: clamp(80px, 15vw, 190px);
  line-height: .8; letter-spacing: -.05em;
  opacity: 0;
  transform: translateY(.16em);
  animation: riseIn .95s cubic-bezier(.16,1,.3,1) .15s forwards;
}
.glyph__mark {
  display: block;
  font-size: clamp(34px, 6.4vw, 82px);
  line-height: .92; letter-spacing: -.035em;
  margin-top: .05em;
  clip-path: inset(100% 0 0 0);
  animation: wipeUp 1.15s cubic-bezier(.16,1,.3,1) .35s forwards;
}

@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes wipeUp { to { clip-path: inset(0 0 0 0); } }

/* ============================================================
   Odomètre — les chiffres roulent quand le cours bouge
   ============================================================ */
.odo {
  display: flex; align-items: baseline;
  font-family: var(--mono);
  font-size: clamp(15px, 1.9vw, 26px);
  letter-spacing: .02em;
  color: var(--creme);
  min-height: 1.5em;
  opacity: 0;
  animation: riseIn .8s ease .75s forwards;
}
.odo__d {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  vertical-align: baseline;
}
.odo__reel {
  display: block;
  transition: transform .85s cubic-bezier(.22,1,.3,1);
}
.odo__reel span { display: block; height: 1.25em; line-height: 1.25em; }
.odo__sep { display: inline-block; }

.pay__note {
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.9;
  color: rgba(247,244,239,.6);
  margin: clamp(24px, 3.2vw, 40px) 0 0;
  opacity: 0;
  animation: riseIn .8s ease .95s forwards;
}
.pay__note .dim { color: rgba(247,244,239,.55); }

/* ============================================================
   QR + adresse
   ============================================================ */
.pay__right {
  display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px);
  opacity: 0;
  animation: riseIn .9s cubic-bezier(.16,1,.3,1) .55s forwards;
}

.qr {
  background: var(--blanc);
  padding: clamp(15px, 1.9vw, 24px);
  width: clamp(180px, 27vw, 260px);
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* le carré se déplie */
  clip-path: inset(0 0 100% 0);
  animation: wipeUp 1s cubic-bezier(.16,1,.3,1) .7s forwards;
}
.qr canvas, .qr img { width: 100% !important; height: auto !important; display: block; }
.qr__fallback { color: var(--noir); text-align: center; line-height: 1.9; opacity: .55; }

.addr__label { display: block; color: var(--creme); margin-bottom: 10px; }
.addr__value {
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13.5px);
  line-height: 1.7; color: var(--blanc); word-break: break-all;
  border: 1px solid rgba(247,244,239,.25);
  padding: 13px 15px; margin: 0 0 13px;
  transition: border-color .3s;
}
.addr__value.flash { border-color: var(--creme); }

.addr__actions { display: flex; gap: 24px; flex-wrap: wrap; }
.addr__actions button,
.addr__actions a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase;
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  color: var(--creme);
  border-bottom: 1px solid rgba(244,199,133,.35);
  transition: color .25s, border-color .25s;
}
.addr__actions button:hover,
.addr__actions a:hover { color: var(--blanc); border-color: var(--blanc); }
.addr__actions a.is-off { opacity: .3; pointer-events: none; }

/* ============================================================
   Le compteur — un magasin ouvert où personne n'entre
   ============================================================ */
.counter {
  border-top: 1px solid rgba(247,244,239,.16);
  padding-top: clamp(18px, 2.2vw, 26px);
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  opacity: 0;
  animation: riseIn .9s ease 1.1s forwards;
}
.counter__label { color: rgba(247,244,239,.6); }
.counter__time {
  font-family: var(--mono);
  font-size: clamp(22px, 4vw, 56px);
  letter-spacing: -.01em;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.counter__alt {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--creme);
  border-bottom: 1px solid rgba(244,199,133,.3);
  padding-bottom: 3px;
  transition: border-color .25s;
}
.counter__alt:hover { border-color: var(--creme); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .pay__body { grid-template-columns: 1fr; align-items: start; gap: 44px; }
  .counter { gap: 10px; }
  .counter__alt { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .glyph__one, .glyph__mark, .odo, .pay__note,
  .pay__right, .qr, .counter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .odo__reel { transition: none; }
  .pay__live i { animation: none; }
}

/* Visible des seuls lecteurs d'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}