<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>CDDU annulé</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; background:#F4F6FA; }
    .container { width:100%; max-width:520px; 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; display:block; width:100%; }
    .header { padding:28px 28px 10px 28px; text-align:left; background:#FFFFFF; }
    .logo { height:60px; display:block; }
    .title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; color:#0F172A; }
    .subtitle { font-size:15px; color:#334155; margin:0 0 16px; line-height:1.4; }
    .chips { margin:14px 0 4px; }
    .chip { display:inline-block; font-size:13px; padding:8px 12px; border:1px solid #E5E7EB; border-radius:999px; margin-right:8px; margin-bottom:8px; color:#0F172A; background:#F8FAFC; }
    .card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:20px; background:#FFFFFF; }
    .card h2 { font-size:16px; margin:0 0 12px; color:#0F172A; font-weight:600; }
    .row { display:flex; gap:16px; margin-bottom:12px; }
    .col { flex:1; min-width:0; }
    .label { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500; }
    .value { font-size:15px; color:#0F172A; font-weight:500; line-height:1.3; }
    .cta-wrap { padding:24px 28px 6px 28px; text-align:center; background:#FFFFFF; }
    .note { font-size:13px; color:#475569; padding:0 28px 26px 28px; line-height:1.5; }
    .footer { font-size:12px; color:#64748B; text-align:center; padding:18px 28px 0 28px; line-height:1.4; }
    .muted { color:#94A3B8; }
    /* Bouton "bulletproof" */
    .btn { 
      background:#efc543; 
      color:#000; 
      display:inline-block; 
      padding:16px 32px; 
      border-radius:10px; 
      font-weight:700; 
      font-size:16px;
      text-decoration:none;
      border:none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .btn:hover { filter:brightness(0.96); }
    /* Dark mode (support basique) */
    @media (prefers-color-scheme: dark) {
      body, .wrapper { background:#0B1220; color:#E5E7EB; }
      .container, .card, .header, .cta-wrap { background:#0E1628; }
      .title, .value { color:#E7ECF3; }
      .subtitle, .label, .note, .footer { color:#A8B3C7; }
      .chip { background:#101A30; border-color:#24324A; color:#D6DEEB; }
      .card { border-color:#1E2A41; }
      .btn { background:#efc543; color:#000; }
    }
    /* Mobile */
    @media (max-width: 480px) {
      .row { display:block; gap:0; }
      .col { margin-bottom:12px; }
      .cta-wrap { padding:22px 16px 6px; }
      .card { margin:6px 16px 0 16px; padding:16px; }
      .header, .note { padding-left:16px; padding-right:16px; }
      .wrapper { padding:16px 0; }
    }
  </style>
</head>
<body style="margin:0; padding:0; background:#F4F6FA; color:#0F172A; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;">
  <!-- Préheader (invisible) -->
  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">
    CDDU annulé pour {{employeeName}} · Réf {{contractReference}} · Plus d'informations disponibles.
  </div>

  <div class="wrapper" style="width:100%; padding:32px 0; background:#F4F6FA;">
    <div class="container" style="width:100%; max-width:520px; margin:0 auto; background:#FFFFFF; border-radius:14px; box-shadow: 0 6px 20px rgba(15,23,42,0.06); overflow:hidden;">
      <div class="brandbar" style="height:6px; background:#efc543; display:block; width:100%;"></div>
      <div class="header" style="padding:28px 28px 10px 28px; text-align:left; background:#FFFFFF;">
        <img class="logo" src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" alt="Odentas" style="height:60px; display:block;">
        
        <!-- Titre avec voyant rouge (annulation) -->
        <div style="display:flex; align-items:baseline; margin:18px 0 16px 0;">
          <div style="width:8px; height:8px; background:#EF4444; border-radius:50%; margin-right:12px; margin-top:8px; flex-shrink:0;"></div>
          <h1 class="title" style="font-size:22px; line-height:1.3; margin:0; font-weight:700; color:#0F172A;">CDDU annulé</h1>
        </div>
        
        <!-- Mini card avec infos structure -->
        <div class="card" style="margin:0 0 24px 0; border:1px solid #E5E7EB; border-radius:12px; padding:16px; background:#F8FAFC;">
          <div style="margin-bottom:8px;">
            <div class="label" style="font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; font-weight:500;">Votre structure</div>
            <div class="value" style="font-size:13px; color:#0F172A; font-weight:500; line-height:1.3;">{{companyName}}</div>
          </div>
          <div style="margin-bottom:8px;">
            <div class="label" style="font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; font-weight:500;">Votre code employeur</div>
            <div class="value" style="font-size:13px; color:#0F172A; font-weight:500; line-height:1.3;">{{employerCode}}</div>
          </div>
          <div style="margin-bottom:0;">
            <div class="label" style="font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; font-weight:500;">Votre gestionnaire</div>
            <div class="value" style="font-size:13px; color:#0F172A; font-weight:500; line-height:1.3;">Renaud BREVIERE-ABRAHAM</div>
          </div>
        </div>

        <!-- Salutation personnalisée centrée verticalement -->
        <div style="margin:20px 0;">
          <p style="font-size:15px; color:#334155; margin:0 0 8px; font-weight:500;">Bonjour {{userName}},</p>
          <p class="subtitle" style="font-size:15px; color:#334155; margin:0; line-height:1.4;">Votre contrat CDDU a été annulé.</p>
        </div>
      </div>

      <div class="card" style="margin:0px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:20px; background:#FFFFFF;">
        <h2 style="font-size:16px; margin:0 0 12px; color:#0F172A; font-weight:600;">Détails du contrat</h2>
        <div style="margin-bottom:12px;">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">Référence</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3; margin-bottom:12px;">{{contractReference}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">Salarié</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3; margin-bottom:12px;">{{employeeName}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">Poste</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3; margin-bottom:12px;">{{profession}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">Date de début</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3; margin-bottom:12px;">{{startDate}}</div>
        </div>
        <div style="margin-bottom:0;">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">Production</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3;">{{productionName}}</div>
        </div>
      </div>

      <div class="cta-wrap" style="padding:24px 28px 6px 28px; text-align:center; background:#FFFFFF;">
        <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" fillcolor="#efc543" stroke="f" style="height:46px;v-text-anchor:middle;width:260px;">
          <w:anchorlock/>
          <center style="color:#000000;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">Voir les détails</center>
        </v:roundrect>
        <![endif]-->
        <!--[if !mso]><!-- -->
        <a class="btn" href="{{ctaUrl}}" style="background:#efc543; color:#000; display:inline-block; padding:16px 32px; border-radius:10px; font-weight:700; font-size:16px; text-decoration:none; border:none; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Accès à l'Espace Paie</a>
        <!--<![endif]-->
      </div>

      <p class="note" style="font-size:13px; color:#475569; padding:0 28px 26px 28px; line-height:1.5;">
  Pour votre sécurité, ne partagez jamais ce message. <br>Si vous n'êtes pas à l'origine de cette création, 
  <a href="{{supportUrl}}" style="color:#0B5FFF; text-decoration:none;">contactez le support</a>.<br><br>L'équipe Odentas vous remercie pour votre confiance.
      </p>

      <div class="footer" style="font-size:12px; color:#64748B; text-align:center; padding:18px 28px 0 28px; line-height:1.4;">
        <p>Vous recevez cet e-mail car vous êtes client de Odentas, <br>pour vous notifier d'une action sur votre compte. <br><span class="muted" style="color:#94A3B8;">© 2021-2025 Odentas Media SAS</span></p>
      </div>
    </div>
  </div>

  <!-- Version texte simple (fallback) -->
  <div style="display:none; font-size:0; line-height:0;">
    CDDU annulé – Réf {{contractReference}} pour {{employeeName}}, poste {{profession}}. 
    Voir les détails : {{ctaUrl}}.
  </div>
</body>
</html>