Page de paiement interactive

<div class="checkout" id="checkout">
  <header class="top">
    <div class="brand"><span class="brand-icon">✦</span><strong>TAPLA</strong> CHECKOUT</div>
    <nav class="steps">
      <span class="step done"><i>✓</i>Main page</span>
      <span class="step done"><i>✓</i>Shipping details</span>
      <span class="step active"><i>3</i>Payment method</span>
    </nav>
  </header>

  <div class="body" id="body">
    <!-- Carte bancaire (recto / verso) -->
    <section class="card-side" id="cardSide">
      <div class="card-stage" id="cardStage">
        <div class="card-ghost"></div>
        <div class="card" id="card">
          <div class="face front">
            <div class="row">
              <span class="chip"></span>
              <svg class="wave" viewBox="0 0 24 24"><path d="M8 8a6 6 0 0 1 0 8M11 6a9 9 0 0 1 0 12M14 4a12 12 0 0 1 0 16" /></svg>
              <span class="tier">PLATINUM</span>
            </div>
            <p class="number" id="cardNumber">•••• •••• •••• ••••</p>
            <div class="row bottom">
              <div><small>CARDHOLDER NAME</small><b id="cardName">YOUR NAME</b></div>
              <div><small>EXPIRES</small><b id="cardExpiry">MM/YY</b></div>
              <div class="network" id="cardNetwork">VISA<small>INFINITE</small></div>
            </div>
          </div>
          <div class="face back">
            <span class="stripe"></span>
            <small class="cvv-label">SECURITY CODE (CVV)</small>
            <div class="cvv-strip"><b id="cardCvv"></b></div>
            <p class="legal">This card is for demonstration only. Do not enter a real card number. Use of this card is subject to the terms of the issuer.</p>
          </div>
        </div>
      </div>

      <div class="status" id="status" aria-live="polite">
        <svg class="status-check" viewBox="0 0 52 52"><circle cx="26" cy="26" r="22" /><path d="M16 27l7 7 14-15" /></svg>
        <p class="status-title" id="statusTitle">Processing Secure Transaction…</p>
        <p class="status-text" id="statusText"></p>
        <button type="button" class="again" id="again">New payment</button>
      </div>

      <div class="badges">
        <span>🛡 256-Bit SSL Encrypted</span>
        <span>🔒 PCI-DSS Compliant</span>
      </div>
    </section>

    <!-- Formulaire -->
    <form class="form-side" id="form" novalidate>
      <h1>Payment details</h1>
      <p class="lead">Enter your card information to complete the transaction<br>Demo card: <b>4242 4242 4242 4242</b> · any future date · any CVV</p>

      <label>Cardholder name
        <span class="field"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>
          <input id="name" autocomplete="cc-name" placeholder="Full name" maxlength="26"></span>
      </label>

      <label>Card number
        <span class="field"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
          <input id="number" inputmode="numeric" autocomplete="cc-number" placeholder="0000 0000 0000 0000" maxlength="19">
          <em class="field-brand" id="fieldBrand"></em></span>
      </label>

      <div class="two">
        <label>Expiry date
          <span class="field"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></svg>
            <input id="expiry" inputmode="numeric" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5"></span>
        </label>
        <label>CVV / CVC
          <span class="field"><svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>
            <input id="cvv" type="password" inputmode="numeric" autocomplete="cc-csc" placeholder="•••" maxlength="4"></span>
        </label>
      </div>

      <div class="amount"><span>Payment amount:</span><strong>1,234$</strong></div>

      <button type="submit" class="pay" id="pay">Pay 1,234$ Now <span>→</span></button>
    </form>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@700&display=swap");

* { box-sizing: border-box; }

@property --spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 12px;
  background: #e9e7ec;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: #0f172a;
}

/* ---------- Fenêtre ---------- */
.checkout {
  width: min(920px, 100%);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(15, 23, 42, .14);
  overflow: hidden;
  animation: rise .7s cubic-bezier(.2, .9, .3, 1.1) both;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 26px 0;
  border-bottom: 1px solid #eef0f4;
}
.brand { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; font-size: 14px; letter-spacing: .02em; color: #334155; }
.brand strong { color: #0f172a; }
.brand-icon {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #1e3a8a); color: #fff; font-size: 13px;
}
.steps { display: flex; gap: 18px; font-size: 12px; font-weight: 600; color: #475569; }
.step { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid transparent; }
.step i {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font-style: normal; font-size: 9px; color: #fff; background: #10b981;
}
.step.active { color: #2563eb; border-color: #2563eb; }
.step.active i { background: #2563eb; }

.body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 420px;
}
.checkout.is-busy .body { grid-template-columns: minmax(0, 1fr); }

/* ---------- Colonne carte ---------- */
.card-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 34px 24px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-right: 1px solid #eef0f4;
}
.checkout.is-busy .card-side { border-right: 0; background: #fafbfc; }

.card-stage {
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 1.586;
  perspective: 1200px;
}

.card-ghost {
  position: absolute;
  inset: 10px -14px -14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(148, 163, 184, .35), rgba(203, 213, 225, .15));
  filter: blur(1px);
  transition: opacity .4s ease;
}
.checkout.is-busy .card-ghost { opacity: 0; }

.card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, 1.2, .4, 1);
}
.card.is-flipped { transform: rotateY(180deg); }

/* Halo animé pendant le paiement (rouge → vert) */
.card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 21px;
  background: conic-gradient(from var(--spin), var(--g1), var(--g2), var(--g1));
  filter: blur(10px);
  opacity: 0;
  transform: translateZ(-1px);
  transition: opacity .5s ease;
  --g1: #fb7185;
  --g2: #f43f5e;
}
.checkout.is-processing .card::before { opacity: .9; animation: spin 1.6s linear infinite; }
.checkout.is-success .card::before { opacity: .85; --g1: #34d399; --g2: #14b8a6; animation: spin 3s linear infinite; }

.face {
  position: absolute;
  inset: 0;
  padding: 20px 22px;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #e2e8f0;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(15, 23, 42, .3);
}
.front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 85% 15%, rgba(96, 165, 250, .28), transparent 45%),
    linear-gradient(135deg, #0f1f4b 0%, #142a6b 55%, #1d3a8f 100%);
}
.front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: sheen 4s ease-in-out 1s infinite;
}
.row { display: flex; align-items: center; gap: 10px; }
.chip {
  width: 38px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, #fde68a, #eab308 60%, #ca8a04);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.wave { width: 18px; height: 18px; fill: none; stroke: rgba(226, 232, 240, .8); stroke-width: 1.8; stroke-linecap: round; }
.tier { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #cbd5e1; }
.number {
  margin: 0;
  font: 700 clamp(15px, 4.6vw, 20px) "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.number span { display: inline-block; animation: digit .25s ease; }
.bottom { align-items: flex-end; gap: 22px; }
.bottom small { display: block; margin-bottom: 3px; font-size: 7.5px; letter-spacing: .14em; color: #94a3b8; }
.bottom b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.network { margin-left: auto; text-align: right; font: italic 800 22px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; color: #fff; }
.network small { display: block; margin-top: 2px; font: 600 6.5px/1 sans-serif; letter-spacing: .25em; color: #93c5fd; font-style: normal; }
.network.mc { display: flex; }
.network.mc::before, .network.mc::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: #eb001b; }
.network.mc::after { margin-left: -12px; background: rgba(247, 158, 27, .9); }

.back {
  transform: rotateY(180deg);
  padding: 0;
  background: linear-gradient(135deg, #111827, #1f2937);
}
.stripe { display: block; height: 42px; margin-top: 22px; background: #0b0f17; }
.cvv-label { display: block; margin: 14px 22px 4px; text-align: right; font-size: 7.5px; letter-spacing: .14em; color: #94a3b8; }
.cvv-strip {
  margin: 0 22px;
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #f1f5f9 0 6px, #e2e8f0 6px 12px);
  color: #0f172a;
  font: 700 15px "Space Mono", monospace;
  letter-spacing: .15em;
}
.legal { margin: 14px 22px 0; font-size: 7px; line-height: 1.5; color: #6b7280; text-align: center; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 10.5px; color: #64748b; transition: opacity .3s; }
.badges span { padding: 5px 10px; border-radius: 99px; background: #fff; border: 1px solid #e2e8f0; }
.checkout.is-busy .badges { opacity: 0; height: 0; overflow: hidden; margin: -11px 0; }

/* ---------- Statut (paiement en cours / réussi) ---------- */
.status { display: none; flex-direction: column; align-items: center; text-align: center; }
.checkout.is-busy .status { display: flex; animation: fade-up .5s ease both; }
.status-check { width: 0; height: 0; fill: none; stroke: #10b981; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.status-check circle { stroke-dasharray: 140; stroke-dashoffset: 140; }
.status-check path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.checkout.is-success .status-check { width: 46px; height: 46px; margin-bottom: 12px; }
.checkout.is-success .status-check circle { animation: draw .7s ease forwards; }
.checkout.is-success .status-check path { animation: draw .4s ease .55s forwards; }
.status-title { margin: 0; font-size: 15px; font-weight: 700; }
.checkout.is-processing .status-title::after { content: ""; animation: dots 1.2s steps(4) infinite; }
.checkout.is-success .status-title { font-size: 19px; animation: fade-up .4s ease both; }
.status-text { margin: 6px 0 0; max-width: 300px; font-size: 12px; color: #64748b; }
.again {
  margin-top: 16px; padding: 9px 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
  font: 600 12px "Plus Jakarta Sans", sans-serif; color: #334155; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .4s ease 1.2s;
}
.checkout.is-success .again { opacity: 1; pointer-events: auto; }

/* ---------- Formulaire ---------- */
.form-side { padding: 34px 32px 30px; transition: opacity .4s ease, filter .4s ease; }
.checkout.is-leaving .form-side { opacity: 0; filter: blur(6px); pointer-events: none; }
.checkout.is-busy .form-side { display: none; }

.form-side h1 { margin: 0; font-size: 19px; font-weight: 800; }
.lead { margin: 4px 0 22px; font-size: 11.5px; color: #64748b; }

label { display: block; margin-bottom: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.field svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: none;
  font: 600 13px "Plus Jakarta Sans", sans-serif;
  letter-spacing: .04em;
  color: #0f172a;
}
.field input::placeholder { color: #cbd5e1; font-weight: 500; }
.field:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); }
.field.valid { border-color: #34d399; }
.field.valid:focus-within { box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); }
.field.invalid { border-color: #f43f5e; box-shadow: 0 0 0 4px rgba(244, 63, 94, .12); animation: shake .35s ease; }
.field-brand { font: italic 800 13px "Plus Jakarta Sans", sans-serif; color: #1d4ed8; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.amount {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 18px; padding: 16px 18px; border-radius: 12px; background: #f1f5f9;
  font-size: 12px; color: #64748b;
}
.amount strong { font: 700 20px "Space Mono", monospace; color: #1d4ed8; }

.pay {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font: 700 14px "Plus Jakarta Sans", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .3);
  transition: transform .2s, box-shadow .2s;
}
.pay span { display: inline-block; transition: transform .2s; }
.pay:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(37, 99, 235, .38); }
.pay:hover span { transform: translateX(4px); }
.pay:active { transform: scale(.98); }

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .card-side { border-right: 0; border-bottom: 1px solid #eef0f4; padding: 28px 18px; }
  .form-side { padding: 26px 20px; }
  .steps { gap: 12px; font-size: 10.5px; }
  .top { padding: 14px 18px 0; }
}

/* ---------- Animations ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { --spin: 360deg; } }
@keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes digit { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes shake { 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

// Interactive Payment Checkout — vanilla JS (démo : aucun paiement réel n'est effectué)
const $ = (id) => document.getElementById(id);
const checkout = $('checkout');
const form = $('form');
const card = $('card');
const stage = $('cardStage');
const inputs = { name: $('name'), number: $('number'), expiry: $('expiry'), cvv: $('cvv') };
const view = { number: $('cardNumber'), name: $('cardName'), expiry: $('cardExpiry'), cvv: $('cardCvv'), network: $('cardNetwork'), brand: $('fieldBrand') };

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const digitsOf = (v) => v.replace(/\D/g, '');

// ---------- Réseau de la carte et validité (algorithme de Luhn) ----------
function networkOf(d) {
  if (/^4/.test(d)) return 'visa';
  if (/^(5[1-5]|2[2-7])/.test(d)) return 'mastercard';
  if (/^3[47]/.test(d)) return 'amex';
  return '';
}

function luhn(d) {
  let sum = 0;
  for (let i = 0; i < d.length; i++) {
    let n = Number(d[d.length - 1 - i]);
    if (i % 2) { n *= 2; if (n > 9) n -= 9; }
    sum += n;
  }
  return d.length >= 13 && sum % 10 === 0;
}

const validExpiry = (v) => {
  const m = v.match(/^(\d{2})\/(\d{2})$/);
  if (!m || +m[1] < 1 || +m[1] > 12) return false;
  const end = new Date(2000 + +m[2], +m[1], 1);
  return end > new Date();
};

const checks = {
  name: () => inputs.name.value.trim().length >= 2,
  number: () => luhn(digitsOf(inputs.number.value)),
  expiry: () => validExpiry(inputs.expiry.value),
  cvv: () => digitsOf(inputs.cvv.value).length >= 3,
};

function mark(key) {
  const field = inputs[key].closest('.field');
  field.classList.remove('invalid'); // l'erreur disparaît dès qu'on corrige
  field.classList.toggle('valid', checks[key]());
}

// ---------- Mise à jour de la carte en direct ----------
inputs.name.addEventListener('input', () => {
  view.name.textContent = inputs.name.value.trim() || 'YOUR NAME';
  mark('name');
});

inputs.number.addEventListener('input', () => {
  const d = digitsOf(inputs.number.value).slice(0, 16);
  inputs.number.value = d.replace(/(.{4})(?=.)/g, '$1 ');

  // Chiffres saisis + points pour le reste, le dernier chiffre « tombe » en place.
  const shown = (d + '•'.repeat(16 - d.length)).replace(/(.{4})(?=.)/g, '$1 ');
  let count = 0;
  view.number.innerHTML = [...shown].map((c) => {
    if (!/\d/.test(c)) return c;
    count += 1;
    return count === d.length ? `<span>${c}</span>` : c;
  }).join('');

  const net = networkOf(d);
  view.brand.textContent = { visa: 'VISA', mastercard: 'MC', amex: 'AMEX' }[net] || '';
  view.network.className = 'network' + (net === 'mastercard' ? ' mc' : '');
  view.network.innerHTML = net === 'mastercard' ? '' : `${net === 'amex' ? 'AMEX' : 'VISA'}<small>${net === 'amex' ? 'CENTURION' : 'INFINITE'}</small>`;
  mark('number');
});

inputs.expiry.addEventListener('input', (e) => {
  let d = digitsOf(inputs.expiry.value).slice(0, 4);
  if (d.length === 1 && +d > 1) d = '0' + d;               // « 4 » devient « 04 »
  inputs.expiry.value = d.length > 2 || (d.length === 2 && e.inputType !== 'deleteContentBackward') ? `${d.slice(0, 2)}/${d.slice(2)}` : d;
  view.expiry.textContent = inputs.expiry.value || 'MM/YY';
  mark('expiry');
});

inputs.cvv.addEventListener('input', () => {
  inputs.cvv.value = digitsOf(inputs.cvv.value).slice(0, 4);
  view.cvv.textContent = inputs.cvv.value;
  mark('cvv');
});

// La carte se retourne quand on tape le code de sécurité.
inputs.cvv.addEventListener('focus', () => card.classList.add('is-flipped'));
inputs.cvv.addEventListener('blur', () => card.classList.remove('is-flipped'));

// Légère inclinaison de la carte qui suit la souris.
stage.addEventListener('pointermove', (e) => {
  if (checkout.classList.contains('is-busy')) return;
  const r = stage.getBoundingClientRect();
  const x = (e.clientX - r.left) / r.width - 0.5;
  const y = (e.clientY - r.top) / r.height - 0.5;
  stage.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`;
});
stage.addEventListener('pointerleave', () => { stage.style.transform = ''; });

// ---------- Paiement ----------
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const wrong = Object.keys(checks).filter((k) => !checks[k]());
  if (wrong.length) {
    wrong.forEach((k) => {
      const field = inputs[k].closest('.field');
      field.classList.remove('invalid'); void field.offsetWidth; field.classList.add('invalid');
      setTimeout(() => field.classList.remove('invalid'), 1200);
    });
    inputs[wrong[0]].focus();
    return;
  }

  card.classList.remove('is-flipped');
  stage.style.transform = '';
  document.activeElement.blur();

  // 1. Le formulaire s'efface…
  const first = stage.getBoundingClientRect();
  checkout.classList.add('is-leaving');
  await wait(400);

  // 2. … et la carte glisse au centre (technique FLIP), entourée d'un halo rouge animé.
  checkout.classList.add('is-busy', 'is-processing');
  $('statusTitle').textContent = 'Processing Secure Transaction';
  $('statusText').textContent = '';
  const last = stage.getBoundingClientRect();
  stage.animate(
    [{ transform: `translate(${first.left - last.left}px, ${first.top - last.top}px)` }, { transform: 'none' }],
    { duration: 700, easing: 'cubic-bezier(.2, .9, .3, 1)' },
  );

  // 3. Réponse de la banque (simulée) : ici, appelez votre vraie API de paiement.
  await wait(2800);
  checkout.classList.remove('is-processing');
  checkout.classList.add('is-success');
  $('statusTitle').textContent = 'Payment Successful!';
  $('statusText').textContent = 'Your transaction of $1,234.00 has been processed successfully.';
});

$('again').addEventListener('click', () => {
  checkout.classList.remove('is-busy', 'is-processing', 'is-success', 'is-leaving');
  form.reset();
  Object.values(inputs).forEach((i) => i.dispatchEvent(new Event('input')));
  document.querySelectorAll('.field').forEach((f) => f.classList.remove('valid', 'invalid'));
  inputs.name.focus();
});