<!DOCTYPE html>
<html lang="fr">
  <head><meta charset="UTF-8"></head>
  <body style="font-family: Arial, sans-serif; background: #f1f5f9; margin: 0; padding: 32px 16px;">
    <div style="max-width: 520px; margin: 0 auto; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.12);">
      <div style="background: #0a0f1e; padding: 28px 32px; text-align: center;">
        <span style="font-size: 22px; font-weight: 700; color: white; letter-spacing: -0.5px;">Scan Inventaire</span>
      </div>
      <div style="padding: 40px 32px;">
        <h2 style="color: #0a0f1e; margin: 0 0 12px; font-size: 20px; font-weight: 700;">
          Nouvelle demande d'accès
        </h2>
        <p style="color: #475569; margin: 0 0 24px; font-size: 15px; line-height: 1.5;">
          Un utilisateur demande l'accès à Scan Inventaire et attend votre validation.
        </p>
        <table style="width: 100%; border-collapse: collapse; margin-bottom: 24px;">
          <tr>
            <td style="padding: 8px 0; color: #94a3b8; font-size: 13px;">Email</td>
            <td style="padding: 8px 0; color: #0a0f1e; font-size: 14px; font-weight: 600; text-align: right;">{{ requesterEmail }}</td>
          </tr>
          <tr>
            <td style="padding: 8px 0; color: #94a3b8; font-size: 13px;">Groupe demandé</td>
            <td style="padding: 8px 0; color: #0a0f1e; font-size: 14px; font-weight: 600; text-align: right;">{{ requestedRoleLabel }}</td>
          </tr>
          <tr>
            <td style="padding: 8px 0; color: #94a3b8; font-size: 13px; vertical-align: top;">Concessions</td>
            <td style="padding: 8px 0; color: #0a0f1e; font-size: 13px; text-align: right;">
              {{ concessions|length > 0 ? concessions|join(', ') : '—' }}
            </td>
          </tr>
        </table>
        <div style="text-align: center; margin-bottom: 8px;">
          <a href="{{ validationUrl }}" style="display: inline-block; background: #21409A; color: white; text-decoration: none; font-weight: 600; font-size: 14px; padding: 12px 28px; border-radius: 10px;">
            Examiner la demande
          </a>
        </div>
      </div>
      <div style="background: #f8fafc; padding: 16px 32px; text-align: center; border-top: 1px solid #e2e8f0;">
        <p style="color: #94a3b8; font-size: 11px; margin: 0;">Scan Inventaire — Emil Frey France</p>
      </div>
    </div>
  </body>
</html>
