<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Rappel 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: #e65100; color: #fff; padding: 28px 32px; }
    .header h1 { margin: 0; font-size: 22px; }
    .body { padding: 28px 32px; color: #333; line-height: 1.6; }
    .alert { background: #fff3e0; border-left: 4px solid #e65100; padding: 14px 18px; border-radius: 4px; margin: 18px 0; }
    .btn { display: inline-block; margin-top: 16px; padding: 12px 28px; background: #e65100; color: #fff; text-decoration: none; border-radius: 5px; 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>⚠️ Rappel de cotisation</h1>
  </div>
  <div class="body">
    <p>Bonjour <strong>{prenom} {nom}</strong>,</p>

    <div class="alert">
      <strong>Votre cotisation pour la période {periode} est en attente de paiement.</strong>
    </div>

    <p>Organisation : <strong>{nomOrganisation}</strong></p>
    <p>Montant dû : <strong>{montant} XOF</strong></p>
    <p>Date limite : <strong>{dateLimite}</strong></p>

    {#if lienPaiement}
    <p>
      <a href="{lienPaiement}" class="btn">Payer ma cotisation</a>
    </p>
    {/if}

    <p>Si vous avez déjà effectué ce paiement, veuillez ignorer ce message ou contacter votre trésorier.</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>
