<!DOCTYPE html><!DOCTYPE html><!doctype html>

<html lang="fr">

<head><html lang="fr"><html>

  <meta charset="UTF-8">

  <title>Nouvelle facture</title><head>  <body style="margin:0;padding:0;background:#f7f9fc;">

  <meta name="color-scheme" content="light dark">

  <meta name="supported-color-schemes" content="light dark">  <meta charset="UTF-8">    <!-- Preheader (masqué) -->

  <style>

    /* Reset léger compatible email */  <title>Nouvelle facture</title>    <div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">

    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; }  <meta name="color-scheme" content="light dark">      Votre facture {{invoiceNumber}} est disponible sur votre Espace Paie Odentas.

    .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; }  <meta name="supported-color-schemes" content="light dark">    </div>

    .brandbar { height:6px; background:#efc543; }

    .header { padding:28px 28px 10px 28px; text-align:left; }  <style>

    .logo { height:60px; display:block; }

    .title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; }    /* Reset léger compatible email */    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f7f9fc;">

    .subtitle { font-size:15px; color:#334155; margin:0 0 16px; }

    .chips { margin:14px 0 4px; }    body { margin:0; padding:0; background:#F4F6FA; color:#0F172A; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }      <tr>

    .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; }

    .card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:18px; background:#FFFFFF; }    a { color:#0B5FFF; text-decoration:none; }        <td align="center" style="padding:24px;">

    .card h2 { font-size:16px; margin:0 0 10px; }

    .row { display:flex; gap:12px; }    .wrapper { width:100%; padding:32px 0; }          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;background:#ffffff;border-radius:8px;">

    .col { flex:1; }

    .label { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }    .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; }            <!-- Logo -->

    .value { font-size:15px; color:#0F172A; }

    .cta-wrap { padding:24px 28px 6px 28px; text-align:center; }    .brandbar { height:6px; background:#efc543; }            <tr>

    .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; }    .header { padding:28px 28px 10px 28px; text-align:left; }              <td style="padding:24px;text-align:center;">

    .muted { color:#94A3B8; }

    /* Bouton "bulletproof" */    .logo { height:60px; display:block; }                <img src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" width="200" alt="Odentas" style="display:block;border:0;outline:none;text-decoration:none;margin:0 auto;height:auto;">

    .btn { background:#efc543; color:#000; display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; }

    .btn:hover { filter:brightness(0.96); }    .title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; }              </td>

    /* Dark mode (support basique) */

    @media (prefers-color-scheme: dark) {    .subtitle { font-size:15px; color:#334155; margin:0 0 16px; }            </tr>

      body { background:#0B1220; color:#E5E7EB; }

      .container, .card { background:#0E1628; }    .chips { margin:14px 0 4px; }

      .title, .value { color:#E7ECF3; }

      .subtitle, .label, .note, .footer { color:#A8B3C7; }    .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; }            <!-- Titre -->

      .chip { background:#101A30; border-color:#24324A; color:#D6DEEB; }

      .card { border-color:#1E2A41; }    .card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:18px; background:#FFFFFF; }            <tr>

      .btn { background:#3B82F6; }

    }    .card h2 { font-size:16px; margin:0 0 10px; }              <td style="padding:0 24px 8px 24px;text-align:center;">

    /* Mobile */

    @media (max-width: 480px) {    .row { display:flex; gap:12px; }                <div style="font-family:Arial, Helvetica, sans-serif;font-size:22px;font-weight:bold;color:#333;">

      .row { display:block; }

      .cta-wrap { padding:22px 16px 6px; }    .col { flex:1; }                  Votre facture n°{{invoiceNumber}} est disponible

      .card { margin:6px 16px 0 16px; }

      .header, .note { padding-left:16px; padding-right:16px; }    .label { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }                </div>

    }

  </style>    .value { font-size:15px; color:#0F172A; }              </td>

</head>

<body>    .cta-wrap { padding:24px 28px 6px 28px; text-align:center; }            </tr>

  <!-- Préheader (invisible) -->

  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">    .note { font-size:13px; color:#475569; padding:0 28px 26px 28px; }

    Nouvelle facture de {{organizationName}} · Montant {{amount}} · Consultez votre facture.

  </div>    .footer { font-size:12px; color:#64748B; text-align:center; padding:18px 28px 0 28px; }            <!-- Intro -->



  <div class="wrapper">    .muted { color:#94A3B8; }            <tr>

    <div class="container">

      <div class="brandbar"></div>    /* Bouton "bulletproof" */              <td style="padding:8px 24px 0 24px;">

      <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">    .btn { background:#efc543; color:#000; display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; }                <div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#333;">

        <h1 class="title">Nouvelle facture</h1>

        <p class="subtitle">Une nouvelle facture a été générée pour votre organisation.</p>    .btn:hover { filter:brightness(0.96); }                  Bonjour {{firstName}},<br><br>

        <div class="chips">

          <span class="chip">Numéro&nbsp;: {{invoiceNumber}}</span>    /* Dark mode (support basique) */                  {{{customMessage}}}{{#if period}} <strong>{{period}}</strong>{{/if}} est disponible.<br><br>

          <span class="chip">Montant&nbsp;: {{amount}}</span>

          <span class="chip">Date&nbsp;: {{invoiceDate}}</span>    @media (prefers-color-scheme: dark) {                  Vous pouvez consulter et télécharger votre facture directement depuis votre Espace Paie Odentas.

        </div>

      </div>      body { background:#0B1220; color:#E5E7EB; }                </div>



      <div class="card">      .container, .card { background:#0E1628; }              </td>

        <h2>Détails de la facture</h2>

        <div class="row" style="margin-bottom:10px;">      .title, .value { color:#E7ECF3; }            </tr>

          <div class="col">

            <div class="label">Organisation</div>      .subtitle, .label, .note, .footer { color:#A8B3C7; }

            <div class="value">{{organizationName}}</div>

          </div>      .chip { background:#101A30; border-color:#24324A; color:#D6DEEB; }            <!-- Card d'infos facture -->

          <div class="col">

            <div class="label">Période</div>      .card { border-color:#1E2A41; }            <tr>

            <div class="value">{{period}}</div>

          </div>      .btn { background:#3B82F6; }              <td align="center" style="padding:16px 24px 0 24px;">

        </div>

        <div class="row">    }                <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="max-width:420px;width:100%;background:#e6f0ff;border-radius:12px;">

          <div class="col">

            <div class="label">Montant HT</div>    /* Mobile */                  <tr>

            <div class="value">{{amountHT}}</div>

          </div>    @media (max-width: 480px) {                    <td style="padding:16px 16px;text-align:left;">

          <div class="col">

            <div class="label">TVA</div>      .row { display:block; }                      <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#111;opacity:.9;">

            <div class="value">{{vatAmount}}</div>

          </div>      .cta-wrap { padding:22px 16px 6px; }                        <div style="margin-bottom:6px;"><strong>Numéro :</strong> {{invoiceNumber}}</div>

        </div>

      </div>      .card { margin:6px 16px 0 16px; }                        <div style="margin-bottom:6px;"><strong>Montant TTC :</strong> {{amount}}</div>



      <div class="cta-wrap">      .header, .note { padding-left:16px; padding-right:16px; }                        {{#if sepaDate}}<div><strong>Prélèvement SEPA :</strong> {{sepaDate}}</div>{{/if}}

        <!--[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;">    }                      </div>

          <w:anchorlock/>

          <center style="color:#000000;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">Voir la facture</center>  </style>                    </td>

        </v:roundrect>

        <![endif]--></head>                  </tr>

        <!--[if !mso]><!-- -->

        <a class="btn" href="{{ctaUrl}}">Voir la facture</a><body>                </table>

        <!--<![endif]-->

      </div>  <!-- Préheader (invisible) -->              </td>



      <p class="note">  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">            </tr>

        Vous pouvez télécharger votre facture depuis votre espace client. <br>Si vous avez des questions concernant cette facture, 

        <a href="{{supportUrl}}">contactez le support</a>.<br><br>L'équipe Odentas vous remercie pour votre confiance.    Nouvelle facture de {{organizationName}} · Montant {{amount}} · Consultez votre facture.

      </p>

  </div>            <!-- Bouton d'accès -->

      <div class="footer">

        <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">© 2021-2025 Odentas Media SAS</span></p>            <tr>

      </div>

    </div>  <div class="wrapper">              <td align="center" style="padding:20px 24px 0 24px;">

  </div>

    <div class="container">                <a href="https://paie.odentas.fr/facturation"

  <!-- Version texte simple (fallback) -->

  <div style="display:none; font-size:0; line-height:0;">      <div class="brandbar"></div>                   style="display:inline-block;padding:12px 18px;border-radius:10px;background:#2563eb;color:#ffffff;

    Nouvelle facture – Numéro {{invoiceNumber}} pour {{organizationName}}, montant {{amount}}. 

    Voir la facture : {{ctaUrl}}.      <div class="header">                          font-family:Arial, Helvetica, sans-serif;font-size:15px;font-weight:600;text-decoration:none;">

  </div>

</body>        <img class="logo" src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.webp" alt="Odentas">                  Accéder à ma facture

</html>
        <h1 class="title">Nouvelle facture</h1>                </a>

        <p class="subtitle">Une nouvelle facture a été générée pour votre organisation.</p>              </td>

        <div class="chips">            </tr>

          <span class="chip">Numéro&nbsp;: {{invoiceNumber}}</span>

          <span class="chip">Montant&nbsp;: {{amount}}</span>            <!-- Note -->

          <span class="chip">Date&nbsp;: {{invoiceDate}}</span>            <tr>

        </div>              <td style="padding:16px 24px 0 24px;">

      </div>                <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.6;color:#333;">

                  Si vous avez des questions concernant cette facture, n'hésitez pas à nous contacter.

      <div class="card">                  <br>Toute l'équipe Odentas vous remercie pour votre confiance.

        <h2>Détails de la facture</h2>                </div>

        <div class="row" style="margin-bottom:10px;">              </td>

          <div class="col">            </tr>

            <div class="label">Organisation</div>

            <div class="value">{{organizationName}}</div>            <!-- Séparateur -->

          </div>            <tr>

          <div class="col">              <td style="padding:20px 24px 0 24px;">

            <div class="label">Période</div>                <div style="border-top:4px solid #e6eaf1;height:1px;line-height:1px;">&nbsp;</div>

            <div class="value">{{period}}</div>              </td>

          </div>            </tr>

        </div>

        <div class="row">            <!-- Footer -->

          <div class="col">            <tr>

            <div class="label">Montant HT</div>              <td style="padding:16px 24px 24px 24px;text-align:center;">

            <div class="value">{{amountHT}}</div>                <div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:1.6;color:#888;">

          </div>                  © Odentas Media SAS 2021-2025 | RCS Paris 907880348 | 6 rue d'Armaillé, 75017 Paris<br>

          <div class="col">                  <a href="mailto:paie@odentas.fr" style="color:#888;text-decoration:underline;">paie@odentas.fr</a><br><br>

            <div class="label">TVA</div>                  <span style="color:#aaa;">Vous recevez cet e-mail car une nouvelle facture est disponible sur votre Espace Paie Employeur Odentas. 

            <div class="value">{{vatAmount}}</div>                  Si vous avez des questions, merci de contacter notre équipe à <a href="mailto:paie@odentas.fr">paie@odentas.fr</a>.</span>

          </div>                </div>

        </div>              </td>

      </div>            </tr>



      <div class="cta-wrap">          </table>

        <!--[if mso]>        </td>

        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" fillcolor="#efc543" stroke="f" style="height:46px;v-text-anchor:middle;width:260px;">      </tr>

          <w:anchorlock/>    </table>

          <center style="color:#000000;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">Voir la facture</center>  </body>

        </v:roundrect></html>
        <![endif]-->
        <!--[if !mso]><!-- -->
        <a class="btn" href="{{ctaUrl}}">Voir la facture</a>
        <!--<![endif]-->
      </div>

      <p class="note">
        Vous pouvez télécharger votre facture depuis votre espace client. <br>Si vous avez des questions concernant cette facture, 
        <a href="{{supportUrl}}">contactez le support</a>.<br><br>L'équipe Odentas vous remercie pour votre confiance.
      </p>

      <div class="footer">
        <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">© 2021-2025 Odentas Media SAS</span></p>
      </div>
    </div>
  </div>

  <!-- Version texte simple (fallback) -->
  <div style="display:none; font-size:0; line-height:0;">
    Nouvelle facture – Numéro {{invoiceNumber}} pour {{organizationName}}, montant {{amount}}. 
    Voir la facture : {{ctaUrl}}.
  </div>
</body>
</html>