<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Bienvenue sur UnionFlow</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; }
    .btn { display: inline-block; margin-top: 20px; padding: 12px 28px; background: #1A568C; 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>🎉 Bienvenue sur UnionFlow !</h1>
  </div>
  <div class="body">
    <p>Bonjour <strong>{prenom} {nom}</strong>,</p>
    <p>Votre compte a été créé avec succès sur <strong>UnionFlow</strong>, la plateforme de gestion des mutuelles, coopératives et syndicats de Côte d'Ivoire.</p>

    <p>Vous faites maintenant partie de l'organisation : <strong>{nomOrganisation}</strong></p>

    <p>Votre identifiant de connexion est votre adresse email : <strong>{email}</strong></p>

    {#if lienConnexion}
    <p>
      <a href="{lienConnexion}" class="btn">Accéder à mon espace</a>
    </p>
    {/if}

    <p>En cas de question, contactez votre administrateur ou notre support : <a href="mailto:support@lions.dev">support@lions.dev</a></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>
