<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Commande confirmée — Merci pour votre achat</title>
  <meta name="description" content="Votre commande a été traitée avec succès. Vous recevrez un email avec votre code de suivi sous 24 heures." />
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes spin-once {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spinner-fade-out {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.8); }
    }
    @keyframes circle-pop {
      0% { transform: scale(0.4); opacity: 0; }
      60% { transform: scale(1.08); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes ring-pulse {
      0% { transform: scale(0.6); opacity: 0.6; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    @keyframes draw-check {
      to { stroke-dashoffset: 0; }
    }
    @keyframes fade-in-up {
      0% { opacity: 0; transform: translateY(12px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .spinner-track {
      animation: spin-once 1000ms ease-in-out 0ms 1 normal forwards,
                 spinner-fade-out 300ms ease-out 1000ms forwards;
    }
    .anim-ring {
      opacity: 0;
      animation: ring-pulse 900ms ease-out 1200ms both;
    }
    .anim-circle {
      opacity: 0;
      animation: circle-pop 620ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms forwards;
    }
    .anim-check-path {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: draw-check 520ms cubic-bezier(0.65, 0, 0.35, 1) 1280ms forwards;
    }
    .fade-in {
      opacity: 0;
      animation: fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .fade-1 { animation-delay: 1600ms; }
    .fade-2 { animation-delay: 1750ms; }
    .fade-3 { animation-delay: 1900ms; }
    .fade-4 { animation-delay: 2050ms; }
    .fade-5 { animation-delay: 2200ms; }
    .fade-6 { animation-delay: 2350ms; }
    .fade-7 { animation-delay: 2500ms; }
    .fade-8 { animation-delay: 2650ms; }
    .fade-9 { animation-delay: 2800ms; }
    @media (prefers-reduced-motion: reduce) {
      .spinner-track, .anim-ring, .anim-circle, .anim-check-path, .fade-in {
        animation: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
      }
    }
  </style>
</head>
<body class="relative min-h-screen overflow-hidden bg-gradient-to-br from-emerald-50 via-white to-teal-50">
  <div class="pointer-events-none absolute -top-32 -left-32 h-96 w-96 rounded-full bg-emerald-200/40 blur-3xl"></div>
  <div class="pointer-events-none absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-teal-200/40 blur-3xl"></div>

  <main class="relative mx-auto flex min-h-screen max-w-2xl items-center justify-center px-6 py-16">
    <div class="w-full">
      <div class="overflow-hidden rounded-3xl border border-emerald-100 bg-white/80 shadow-[0_20px_60px_-15px_rgba(16,185,129,0.25)] backdrop-blur-xl">
        <div class="h-2 bg-gradient-to-r from-emerald-400 via-teal-500 to-emerald-400"></div>

        <div class="px-8 pb-10 pt-12 sm:px-12">
          <div class="relative mx-auto h-24 w-24">
            <svg class="spinner-track absolute inset-0 h-24 w-24" viewBox="0 0 96 96" fill="none">
              <circle cx="48" cy="48" r="42" stroke="#d1fae5" stroke-width="6"></circle>
              <circle cx="48" cy="48" r="42" stroke="#10b981" stroke-width="6" stroke-linecap="round" stroke-dasharray="264" stroke-dashoffset="66"></circle>
            </svg>

            <span class="anim-ring absolute inset-0 rounded-full bg-emerald-400/30"></span>
            <div class="anim-circle relative flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg shadow-emerald-500/40 ring-8 ring-emerald-50">
              <svg viewBox="0 0 52 52" class="h-14 w-14" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                <path class="anim-check-path" d="M14 27 L23 36 L39 18"></path>
              </svg>
            </div>
          </div>

          <div class="mt-8 text-center">
            <p class="fade-in fade-1 text-xs font-semibold uppercase tracking-[0.25em] text-emerald-600">
              Commande confirmée
            </p>
            <h1 class="fade-in fade-2 mt-3 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
              Merci pour votre commande !
            </h1>
            <p class="fade-in fade-3 mx-auto mt-4 max-w-md text-base leading-relaxed text-slate-600">
              Votre commande a bien été traitée. Vous recevrez un email avec votre code de suivi sous 24 heures.
            </p>
          </div>

          <div class="mt-10 space-y-3">
            <div class="fade-in fade-4 flex items-start gap-4 rounded-2xl border border-slate-100 bg-slate-50/60 p-4">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-emerald-600 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                  <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                </svg>
              </div>
              <div class="text-left">
                <p class="text-sm font-semibold text-slate-900">Email de confirmation</p>
                <p class="text-sm text-slate-500">Un récapitulatif vient d'être envoyé dans votre boîte de réception.</p>
              </div>
            </div>

            <div class="fade-in fade-5 flex items-start gap-4 rounded-2xl border border-slate-100 bg-slate-50/60 p-4">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-emerald-600 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="m7.5 16.5 4.5-2.5 4.5 2.5"></path>
                  <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"></path>
                  <path d="m16.5 13.5 4.5 2.5"></path>
                  <path d="M3.29 7 12 12 20.71 7"></path>
                  <path d="M12 22V12"></path>
                </svg>
              </div>
              <div class="text-left">
                <p class="text-sm font-semibold text-slate-900">Suivi de livraison</p>
                <p class="text-sm text-slate-500">Votre numéro de suivi vous sera transmis sous 24 heures.</p>
              </div>
            </div>

            <div class="fade-in fade-6 flex items-start gap-4 rounded-2xl border border-slate-100 bg-slate-50/60 p-4">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white text-emerald-600 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                  <path d="m9 12 2 2 4-4"></path>
                </svg>
              </div>
              <div class="text-left">
                <p class="text-sm font-semibold text-slate-900">Paiement sécurisé</p>
                <p class="text-sm text-slate-500">Transaction protégée et chiffrée de bout en bout.</p>
              </div>
            </div>
          </div>

          <div class="mt-10 flex flex-col items-center gap-3">
            <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer" class="fade-in fade-7 group inline-flex w-full items-center justify-center gap-2 rounded-full bg-gradient-to-r from-emerald-500 to-teal-600 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-emerald-500/30 transition-all hover:shadow-xl hover:shadow-emerald-500/40 hover:brightness-110 active:scale-[0.98]">
              <span>Félicitations</span>
              <span class="text-lg transition-transform group-hover:scale-110">🎉</span>
            </a>
            <p class="fade-in fade-8 text-xs text-slate-500">
              Des questions ? <span class="font-medium text-slate-700">Contactez-nous</span> à tout moment.
            </p>
          </div>
        </div>
      </div>

      <p class="fade-in fade-9 mt-6 text-center text-xs text-slate-400">
        © 2026 — Tous droits réservés
      </p>
    </div>
  </main>
</body>
</html>
