espace-paie-odentas/templates-mails/facture.html
2025-10-12 17:05:46 +02:00

137 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Nouvelle facture</title>
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style>
body {
margin:0;
padding:0;
background:#F4F6FA;
color:#0F172A;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color:#0B5FFF; text-decoration:none; }
.wrapper { width:100%; padding:32px 0; }
.container {
width:100%;
max-width:640px;
margin:0 auto;
background:#FFFFFF;
border-radius:14px;
box-shadow: 0 6px 20px rgba(15,23,42,0.06);
overflow:hidden;
}
.brandbar { height:6px; background:#efc543; }
.btn {
background:#efc543;
color:#000;
display:inline-block;
padding:14px 26px;
border-radius:10px;
font-weight:700;
text-decoration:none;
}
.btn:hover { filter:brightness(0.96); }
@media (max-width: 480px) {
.container { width:95% !important; max-width:95% !important; }
}
</style>
</head>
<body>
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Votre facture {{invoiceNumber}} est disponible sur votre Espace Paie Odentas.
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#F4F6FA;">
<tr>
<td align="center" style="padding:20px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;background:#ffffff;border-radius:14px;box-shadow:0 6px 20px rgba(15,23,42,0.06);">
<tr>
<td style="padding:0;background:#efc543;height:6px;border-radius:14px 14px 0 0;"></td>
</tr>
<tr>
<td style="padding:24px;text-align:center;">
<img src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" width="240" height="60" alt="Odentas" style="display:block;margin:0 auto;" />
</td>
</tr>
<tr>
<td style="padding:0 24px 8px 24px;text-align:center;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:22px;font-weight:bold;color:#333;">
Votre facture n°{{invoiceNumber}} est disponible
</div>
</td>
</tr>
<tr>
<td style="padding:0 24px 16px 24px;text-align:center;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#666;">
Consultez et téléchargez votre facture depuis votre espace client
</div>
</td>
</tr>
<tr>
<td style="padding:16px 24px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f8f9fa;border:1px solid #e5e7eb;border-radius:12px;padding:18px;">
<tr>
<td>
<div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;margin-bottom:10px;">
Détails de la facture
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="padding:4px 0;vertical-align:top;width:50%;">
<div style="font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;">Numéro</div>
<div style="font-size:15px;color:#0f172a;">{{invoiceNumber}}</div>
</td>
<td style="padding:4px 0;vertical-align:top;width:50%;">
<div style="font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;">Date</div>
<div style="font-size:15px;color:#0f172a;">{{invoiceDate}}</div>
</td>
</tr>
<tr>
<td style="padding:4px 0;vertical-align:top;width:50%;">
<div style="font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;">Montant</div>
<div style="font-size:15px;color:#0f172a;">{{invoiceAmount}}</div>
</td>
<td style="padding:4px 0;vertical-align:top;width:50%;">
<div style="font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px;">Échéance</div>
<div style="font-size:15px;color:#0f172a;">{{dueDate}}</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:24px;text-align:center;">
<a href="{{loginUrl}}" style="background:#efc543;color:#000;display:inline-block;padding:14px 26px;border-radius:10px;font-weight:bold;text-decoration:none;font-family:Arial, Helvetica, sans-serif;">
Consulter ma facture
</a>
</td>
</tr>
<tr>
<td style="padding:18px 24px;text-align:center;border-top:1px solid #e5e7eb;">
<div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#64748b;">
Cette facture a été générée automatiquement par votre Espace Paie Odentas.<br>
<span style="color:#94a3b8;">Si vous avez des questions, contactez votre gestionnaire de paie.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>