<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Demande de signature électronique - avenant</title>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <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; 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; }
    .logo { height:60px; display:block; }
    .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; }
    @media (max-width: 480px) {
      .wrapper { padding:16px 0; }
    }
  </style>
</head>
<body>
  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">Demande de signature électronique - avenant · Signez votre avenant au contrat de travail</div>

  <div class="wrapper">
    <div class="container">
      <div style="padding:28px 28px 10px 28px; text-align:left; background:#FFFFFF;">
        <img class="logo" src="https://i.imgur.com/yDQU9G9.png" alt="Odentas">
        
        <div style="display:flex; align-items:baseline; margin:18px 0 16px 0;">
          <div style="width:8px; height:8px; background:#F59E0B; border-radius:50%; margin-right:12px; margin-top:8px; flex-shrink:0;"></div>
          <h1 style="font-size:22px; line-height:1.3; margin:0; font-weight:700; color:#0F172A;">Demande de signature électronique</h1>
        </div>
        
        <!-- Info Card -->
        <div 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">Votre structure</div>
            <div class="value">{{structure}}</div>
          </div>
          <div style="margin-bottom:8px;">
            <div class="label">Votre code employeur</div>
            <div class="value">{{code_employeur}}</div>
          </div>
          <div style="margin-bottom:0;">
            <div class="label">Votre gestionnaire</div>
            <div class="value">Renaud BREVIERE-ABRAHAM</div>
          </div>
        </div>

        <div style="margin:20px 0;">
          <p style="font-size:15px; color:#334155; margin:0 0 8px; font-weight:500;">👋 Bonjour {{prenom_signataire}},</p>
          <p style="font-size:15px; color:#334155; margin:0 0 8px; line-height:1.4;">Nous vous invitons à signer l'avenant au contrat de travail ci-dessous.</p>
          <p style="font-size:15px; color:#334155; margin:0 0 8px; line-height:1.4;">Cliquez sur "Signer l'avenant" pour accéder à Odentas Sign.</p>
          <p style="font-size:15px; color:#334155; margin:0; line-height:1.4;">Votre salarié·e recevra ensuite son exemplaire pour signature. Vous recevrez une notification par e-mail dès réception de toutes les signatures.</p>
        </div>
      </div>

      <!-- CTA Button -->
      <div style="padding:0 28px 24px 28px; text-align:center;">
        <a href="{{signatureLink}}" style="display:inline-block; padding:14px 32px; background:#F59E0B; color:#1C1917; font-weight:700; font-size:16px; border-radius:10px; text-decoration:none; transition: background 0.3s;">
          Signer l'avenant
        </a>
      </div>

      <!-- Details Card -->
      <div style="margin:0px 28px 24px 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 de l'avenant</h2>
        <div style="margin-bottom:12px;">
          <div class="label">Référence contrat</div>
          <div class="value">{{reference}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label">Numéro avenant</div>
          <div class="value">{{numero_avenant}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label">Type de contrat</div>
          <div class="value">CDDU (contrat intermittent)</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label">Salarié·e</div>
          <div class="value">{{salarie}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label">Début contrat</div>
          <div class="value">{{date_debut}}</div>
        </div>
        <div style="margin-bottom:12px;">
          <div class="label">Poste</div>
          <div class="value">{{poste}}</div>
        </div>
        <div style="margin-bottom:0;">
          <div class="label">Analytique</div>
          <div class="value">{{analytique}}</div>
        </div>
      </div>

      <!-- Closing message -->
      <div style="padding:0 28px 24px 28px;">
        <p style="font-size:15px; color:#334155; margin:0 0 8px; line-height:1.4;">N'hésitez pas à répondre à cet e-mail si vous avez besoin d'assistance.</p>
        <p style="font-size:15px; color:#334155; margin:0 0 4px; line-height:1.4;">Merci pour votre confiance,</p>
        <p style="font-size:15px; color:#334155; margin:0; font-weight:500;">L'équipe Odentas</p>
      </div>

      <!-- Footer -->
      <div style="padding:24px 28px; border-top:1px solid #E5E7EB; text-align:center; background:#F8FAFC;">
        <img src="https://i.imgur.com/yDQU9G9.png" alt="Odentas" style="height:32px; display:block; margin:0 auto 12px;">
        <p style="font-size:11px; color:#94A3B8; margin:0 0 4px; line-height:1.4;">Odentas Media SAS | RCS Paris 907880348</p>
        <p style="font-size:11px; color:#94A3B8; margin:0 0 4px; line-height:1.4;">6 rue d'Armaillé, 75017 Paris</p>
        <p style="font-size:11px; color:#94A3B8; margin:0 0 8px; line-height:1.4;">
          <a href="mailto:paie@odentas.fr" style="color:#0B5FFF;">paie@odentas.fr</a> · 
          <a href="https://paie.odentas.fr" style="color:#0B5FFF;">Accès à l'Espace Paie</a>
        </p>
        <p style="font-size:11px; color:#94A3B8; margin:0 0 8px; line-height:1.4;">
          🇫🇷 Vos documents sont stockés dans un datacenter AWS à Paris
        </p>
        <p style="font-size:10px; color:#94A3B8; margin:0; line-height:1.3;">
          Nous vous recommandons d'ajouter paie@odentas.fr à vos contacts pour être sûr de recevoir nos notifications. Vous recevez cet e-mail car vous êtes client·e de Odentas.
        </p>
      </div>
    </div>
  </div>
</body>
</html>
