espace-paie-odentas/templates-mails/compte-revoque.html

108 lines
No EOL
4.7 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Compte révoqué</title>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
/* Reset léger compatible email */
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; }
.header { padding:28px 28px 10px 28px; text-align:left; }
.logo { height:60px; display:block; }
.title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; }
.subtitle { font-size:15px; color:#334155; margin:0 0 16px; }
.chips { margin:14px 0 4px; }
.chip { display:inline-block; font-size:13px; padding:6px 10px; border:1px solid #E5E7EB; border-radius:999px; margin-right:8px; margin-bottom:8px; color:#0F172A; background:#F8FAFC; }
.chip.error { background:#FEE2E2; color:#991B1B; border-color:#FECACA; }
.card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:18px; background:#FFFFFF; }
.card h2 { font-size:16px; margin:0 0 10px; }
.row { display:flex; gap:12px; }
.col { flex:1; }
.label { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }
.value { font-size:15px; color:#0F172A; }
.cta-wrap { padding:24px 28px 6px 28px; text-align:center; }
.note { font-size:13px; color:#475569; padding:0 28px 26px 28px; }
.footer { font-size:12px; color:#64748B; text-align:center; padding:18px 28px 0 28px; }
.muted { color:#94A3B8; }
/* Bouton "bulletproof" */
.btn { background:#efc543; color:#000; display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; }
.btn:hover { filter:brightness(0.96); }
/* Dark mode (support basique) */
@media (prefers-color-scheme: dark) {
body { background:#0B1220; color:#E5E7EB; }
.container, .card { background:#0E1628; }
.title, .value { color:#E7ECF3; }
.subtitle, .label, .note, .footer { color:#A8B3C7; }
.chip { background:#101A30; border-color:#24324A; color:#D6DEEB; }
.chip.error { background:#450A0A; color:#FECACA; border-color:#991B1B; }
.card { border-color:#1E2A41; }
.btn { background:#3B82F6; }
}
/* Mobile */
@media (max-width: 480px) {
.row { display:block; }
.cta-wrap { padding:22px 16px 6px; }
.card { margin:6px 16px 0 16px; }
.header, .note { padding-left:16px; padding-right:16px; }
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="brandbar"></div>
<div class="header">
<img class="logo" src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.webp" alt="Odentas">
<h1 class="title">Compte révoqué</h1>
<p class="subtitle">Votre accès à {{organizationName}} a été révoqué.</p>
<div class="chips">
<span class="chip">Email&nbsp;: {{userEmail}}</span>
<span class="chip error">Statut&nbsp;: Révoqué</span>
</div>
</div>
<div class="card">
<h2>Révocation d'accès</h2>
<div class="row" style="margin-bottom:10px;">
<div class="col">
<div class="label">Organisation</div>
<div class="value">{{organizationName}}</div>
</div>
<div class="col">
<div class="label">Date de révocation</div>
<div class="value">{{revocationDate}}</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="label">Raison</div>
<div class="value">{{reason}}</div>
</div>
<div class="col">
<div class="label">Révoqué par</div>
<div class="value">{{revokedBy}}</div>
</div>
</div>
</div>
<div class="cta-wrap">
<a class="btn" href="{{supportUrl}}">Contacter le support</a>
</div>
<p class="note">
Votre accès a été révoqué. Si vous pensez qu'il s'agit d'une erreur,
<a href="{{supportUrl}}">contactez le support</a> pour plus d'informations.<br><br>L'équipe Odentas reste à votre disposition.
</p>
<div class="footer">
<p>Vous recevez cet e-mail pour vous informer de la révocation de votre accès. <br><span class="muted">© 2021-2025 Odentas Media SAS</span></p>
</div>
</div>
</div>
</body>
</html>