.payment-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, rgba(184, 88, 48, 0.08), transparent 26rem),
    radial-gradient(circle at 92% 28%, rgba(53, 101, 71, 0.09), transparent 32rem),
    var(--bg);
}

.payment-header {
  border-bottom: 1px solid rgba(212, 221, 212, 0.9);
  background: rgba(245, 241, 232, 0.94);
  backdrop-filter: blur(14px);
}

.payment-header-inner {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.payment-home-link {
  color: var(--text-strong);
  font-weight: 750;
  text-decoration: none;
}

.payment-home-link:hover { color: var(--terracotta-strong); }

.payment-main { min-height: calc(100vh - 11rem); }

.mode-banner {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #d69a39;
  border-radius: 0.8rem;
  color: #5b3a00;
  background: #fff4d8;
  text-align: center;
}

.payment-hero { padding: clamp(2.2rem, 6vw, 5.5rem) 0; }

.payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(24rem, 0.74fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.payment-copy { padding-top: clamp(0.5rem, 3vw, 2.5rem); }

.payment-copy h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(2.45rem, 6vw, 4.9rem);
  line-height: 0.99;
  letter-spacing: -0.052em;
}

.payment-lead {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.72;
}

.payment-trust-card {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.1rem;
  margin-top: 2.2rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, 0.78);
}

.payment-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 1rem;
  color: var(--brand-green);
  background: var(--surface-soft);
}

.payment-icon svg {
  width: 2.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-trust-card h2 {
  margin: 0 0 0.3rem;
  color: var(--text-strong);
  font-size: 1.05rem;
}

.payment-trust-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.payment-points {
  display: grid;
  gap: 0.55rem;
  margin: 1.65rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.93rem;
}

.payment-points li {
  position: relative;
  padding-left: 1.45rem;
}

.payment-points li::before {
  content: '';
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--terracotta);
}

.payment-form-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.payment-form-card::before {
  content: '';
  display: block;
  height: 0.45rem;
  background: linear-gradient(90deg, var(--brand-green), var(--terracotta));
}

.payment-form-heading { padding: 1.8rem 1.8rem 0.4rem; }
.payment-form-heading h2 { margin: 0; color: var(--text-strong); font-size: 1.55rem; }

.payment-form { display: grid; gap: 1.05rem; padding: 1.2rem 1.8rem 1.8rem; }

.form-alert {
  margin: 1rem 1.8rem 0;
  padding: 0.9rem 1rem;
  border-radius: 0.8rem;
  font-weight: 650;
}

.form-alert-error { color: #6e1f18; background: #f8ded8; border: 1px solid #e5a89e; }

.payment-choice {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label,
.form-field > label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

.choice-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-content {
  display: block;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.choice-content strong,
.choice-content small { display: block; }
.choice-content strong { color: var(--text-strong); font-size: 0.96rem; }
.choice-content small { margin-top: 0.16rem; color: var(--muted); font-size: 0.82rem; }

.choice-card input:checked + .choice-content {
  border-color: var(--brand-green);
  background: var(--surface-soft);
  box-shadow: inset 4px 0 0 var(--terracotta);
}

.choice-card input:focus-visible + .choice-content {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.form-field input {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #bfcbbf;
  border-radius: 0.78rem;
  color: var(--text-strong);
  background: #fff;
}

.form-field input:hover { border-color: var(--accent); }
.form-field input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(53, 101, 71, 0.13); outline: 0; }

.field-help { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }

.amount-input-wrap { position: relative; }
.amount-input-wrap input { padding-right: 4.2rem; font-size: 1.12rem; font-weight: 760; }
.amount-input-wrap > span {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.confirmation-check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--text);
  font-size: 0.83rem;
  line-height: 1.5;
}

.confirmation-check input { width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; accent-color: var(--brand-green); }

.payment-submit {
  display: inline-flex;
  width: 100%;
  min-height: 3.35rem;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  cursor: pointer;
}

.payment-submit svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-submit:disabled { cursor: not-allowed; opacity: 0.58; }
.payment-submit.is-loading svg { animation: payment-pulse 850ms ease-in-out infinite alternate; }
@keyframes payment-pulse { to { transform: translateX(0.3rem); } }

.payment-legal-note { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-align: center; }
.payment-legal-note a { color: var(--brand-green); font-weight: 700; }

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.payment-footer { padding: 1.5rem 0; border-top: 1px solid var(--line); background: rgba(232, 239, 232, 0.55); }
.payment-footer-inner { display: flex; justify-content: space-between; gap: 1rem 2rem; color: var(--muted); font-size: 0.78rem; }
.payment-footer p { margin: 0; }

.payment-result-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 0;
}

.payment-result-wrap { width: min(calc(100% - 2rem), 46rem); }
.result-brand { display: block; width: min(20rem, 80%); margin: 0 auto 2rem; }

.payment-result-card {
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-top: 0.5rem solid var(--brand-green);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.payment-result-error { border-top-color: #9f3e32; }
.payment-result-pending { border-top-color: #bb7a25; }

.result-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.1rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-green);
  font-size: 2rem;
  font-weight: 900;
}

.payment-result-error .result-icon { background: #9f3e32; }
.payment-result-pending .result-icon { background: #bb7a25; }
.payment-result-card h1 { margin: 0; color: var(--text-strong); font-size: clamp(2rem, 6vw, 3.3rem); letter-spacing: -0.04em; }
.result-message { max-width: 38rem; margin: 1rem auto 1.8rem; color: var(--muted); font-size: 1.04rem; }

.payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--line);
  text-align: left;
}

.payment-summary > div { padding: 0.9rem 1rem; background: #fff; }
.payment-summary dt { color: var(--muted); font-size: 0.74rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.05em; }
.payment-summary dd { margin: 0.18rem 0 0; color: var(--text-strong); font-weight: 760; overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.result-help { margin: 1.6rem auto 0; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 860px) {
  .payment-grid { grid-template-columns: 1fr; }
  .payment-copy h1 { max-width: 16ch; }
  .payment-copy { padding-top: 0; }
}

@media (max-width: 620px) {
  .payment-header-inner { min-height: 4.5rem; }
  .payment-header .brand small { display: none; }
  .payment-home-link { font-size: 0.83rem; }
  .payment-form-heading { padding: 1.35rem 1.15rem 0.25rem; }
  .payment-form { padding: 1rem 1.15rem 1.35rem; }
  .form-alert { margin-inline: 1.15rem; }
  .payment-footer-inner { display: grid; text-align: center; }
  .payment-summary { grid-template-columns: 1fr; }
  .result-actions { display: grid; }
  .result-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-content,
  .payment-submit svg { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   JUSTIFICATIF DE PAIEMENT — écran de retour Stancer
   -------------------------------------------------------------------------- */
.receipt-print-heading {
  display: none;
}

.payment-receipt-summary {
  margin-bottom: 1rem;
}

.receipt-disclaimer {
  max-width: 38rem;
  margin: 0 auto 1.15rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.receipt-action {
  display: flex;
  justify-content: center;
  margin: 0 0 1rem;
}

.receipt-print-button {
  cursor: pointer;
  appearance: none;
  font: inherit;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 16mm;
  }

  html,
  body,
  .payment-body {
    background: #fff !important;
  }

  body {
    color: #122718;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .payment-result-main {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .payment-result-wrap {
    width: 100%;
    max-width: none;
  }

  .result-brand {
    width: 72mm;
    margin: 0 0 12mm;
  }

  .payment-result-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  .payment-result-card > .result-icon,
  .payment-result-card > .eyebrow,
  .payment-result-card > h1,
  .payment-result-card > .result-message,
  .no-print {
    display: none !important;
  }

  .receipt-print-heading {
    display: block;
    margin-bottom: 8mm;
  }

  .receipt-print-heading p {
    margin: 0 0 2mm;
    color: #356547;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .receipt-print-heading h2 {
    margin: 0;
    color: #122718;
    font-size: 24pt;
    line-height: 1.1;
  }

  .payment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #cbd6cb;
    background: #cbd6cb;
  }

  .payment-summary > div {
    break-inside: avoid;
    background: #fff;
  }

  .payment-summary dt {
    color: #5e6b63;
  }

  .payment-summary dd {
    color: #122718;
  }

  .receipt-disclaimer {
    max-width: none;
    margin: 7mm 0 0;
    color: #5e6b63;
    font-size: 8.5pt;
  }
}