<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Confirmation de cotisation</title>
  <style>
    body { font-family: Arial, sans-serif; background: #f4f6f9; margin: 0; padding: 0; }
    .container { max-width: 600px; margin: 30px auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    .header { background: #1A568C; color: #fff; padding: 28px 32px; }
    .header h1 { margin: 0; font-size: 22px; }
    .body { padding: 28px 32px; color: #333; line-height: 1.6; }
    .receipt { background: #f8faff; border: 1px solid #dce8f8; border-radius: 6px; padding: 18px; margin: 18px 0; }
    .receipt table { width: 100%; border-collapse: collapse; }
    .receipt td { padding: 7px 0; }
    .receipt td:last-child { text-align: right; font-weight: bold; }
    .amount { font-size: 24px; font-weight: bold; color: #1A568C; }
    .badge-success { display: inline-block; background: #e6f4ea; color: #2e7d32; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: bold; }
    .footer { background: #f4f6f9; text-align: center; padding: 16px; font-size: 12px; color: #999; }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>✅ Cotisation confirmée</h1>
  </div>
  <div class="body">
    <p>Bonjour <strong>{prenom} {nom}</strong>,</p>
    <p>Nous avons bien reçu votre cotisation. <span class="badge-success">CONFIRMÉ</span></p>

    <div class="receipt">
      <table>
        <tr><td>Organisation</td><td>{nomOrganisation}</td></tr>
        <tr><td>Période</td><td>{periode}</td></tr>
        <tr><td>Référence</td><td>{numeroReference}</td></tr>
        <tr><td>Mode de paiement</td><td>{methodePaiement}</td></tr>
        <tr><td>Date de paiement</td><td>{datePaiement}</td></tr>
        <tr><td>Montant</td><td><span class="amount">{montant} XOF</span></td></tr>
      </table>
    </div>

    <p>Conservez cet email comme justificatif de paiement.</p>
    <p>Cordialement,<br>L'équipe UnionFlow</p>
  </div>
  <div class="footer">UnionFlow © 2026 — Lions Tech SARL — Abidjan, Côte d'Ivoire</div>
</div>
</body>
</html>
