<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Souscription confirmée</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; }
    .plan-card { background: #e8f0fe; border-radius: 8px; padding: 20px; margin: 18px 0; text-align: center; }
    .plan-name { font-size: 20px; font-weight: bold; color: #1A568C; }
    .plan-price { font-size: 28px; font-weight: bold; color: #1A568C; margin: 8px 0; }
    .features { margin: 16px 0; }
    .features li { padding: 4px 0; }
    .badge { 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>✅ Souscription activée</h1>
  </div>
  <div class="body">
    <p>Bonjour <strong>{nomAdministrateur}</strong>,</p>
    <p>La souscription de votre organisation <strong>{nomOrganisation}</strong> a été activée avec succès. <span class="badge">ACTIF</span></p>

    <div class="plan-card">
      <div class="plan-name">Plan {nomFormule}</div>
      <div class="plan-price">{montant} XOF / {periodicite}</div>
    </div>

    <p><strong>Détails de la souscription :</strong></p>
    <ul class="features">
      <li>Date d'activation : {dateActivation}</li>
      <li>Date d'expiration : {dateExpiration}</li>
      <li>Membres maximum : {maxMembres}</li>
      <li>Stockage : {maxStockageMo} Mo</li>
      {#if apiAccess}<li>✓ Accès API REST</li>{/if}
      {#if supportPrioritaire}<li>✓ Support prioritaire</li>{/if}
    </ul>

    <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>
