<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>{{subject}}</title>
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <style>
    /* Minimal static CSS for emails. Dynamic colors and other dynamic values are applied inline to avoid static-linter issues. */
    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; }
    /* Container defaults (kept minimal) */
    .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; }
    .muted { color:#94A3B8; }
    @media (prefers-color-scheme: dark) {
      body, .wrapper { background:#0B1220; color:#E5E7EB; }
    }
    @media (max-width: 480px) {
      .row { display:block; gap:0; }
      .col { margin-bottom:12px; }
      .wrapper { padding:16px 0; }
    }
  </style>
</head>
<body>
  <div style="display:none;max-height:0;overflow:hidden;opacity:0;">{{subject}} · {{preheaderText}}</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="header" style="padding:28px 28px 10px 28px; text-align:left; background:#FFFFFF;">
        <img class="logo" src="{{logoUrl}}" alt="Odentas" style="height:60px; display:block;">
        
        <div style="display:flex; align-items:baseline; margin:18px 0 16px 0;">
          {{#if alertIndicatorColor}}
          <div style="width:8px; height:8px; background:{{alertIndicatorColor}}; border-radius:50%; margin-right:12px; margin-top:8px; flex-shrink:0;"></div>
          {{/if}}
          <h1 class="title" style="font-size:22px; line-height:1.3; margin:0; font-weight:700; color:{{titleColor}};">{{title}}</h1>
        </div>
        
        {{#if showInfoCard}}
        <div class="card" style="margin:0 0 24px 0; border:1px solid #E5E7EB; border-radius:12px; padding:16px; background:#F8FAFC;">
          {{#each infoCardRows}}
          <div style="margin-bottom:{{#unless @last}}8px{{else}}0{{/unless}};">
            <div class="label" style="font-size:11px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; font-weight:500;">{{this.label}}</div>
            <div class="value" style="font-size:13px; color:#0F172A; font-weight:500; line-height:1.3;">{{this.value}}</div>
          </div>
          {{/each}}
        </div>
        {{/if}}

        {{#if greeting}}
        <div style="margin:20px 0;">
          <p style="font-size:15px; color:#334155; margin:0 0 8px; font-weight:500;">{{greeting}}</p>
          <p class="subtitle" style="font-size:15px; color:#334155; margin:0; line-height:1.4;">{{{mainMessage}}}</p>
        </div>
        {{else}}
          <p class="subtitle" style="font-size:15px; color:#334155; margin:0; line-height:1.4;">{{{mainMessage}}}</p>
        {{/if}}
      </div>

      {{#if showDetailsCard}}
      <div class="card" style="margin:0px 28px 0 28px; border:1px solid {{cardBorder}}; border-radius:12px; padding:20px; background:{{cardBackgroundColor}};">
        <h2 style="font-size:16px; margin:0 0 12px; color:{{cardTitleColor}}; font-weight:600;">{{detailsCardTitle}}</h2>
        {{#each detailsCardRows}}
        <div style="margin-bottom:{{#unless @last}}12px{{else}}0{{/unless}};">
          <div class="label" style="font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">{{this.label}}</div>
          <div class="value" style="font-size:15px; color:#0F172A; font-weight:500; line-height:1.3;">{{{this.value}}}</div>
        </div>
        {{/each}}
        {{#if detailsCardDisclaimer}}
        <div style="margin-top:16px; padding-top:12px; border-top:1px solid {{cardBorder}};">
          <p style="font-size:11px; color:#6B7280; font-style:italic; margin:0; line-height:1.4;">{{detailsCardDisclaimer}}</p>
        </div>
        {{/if}}
      </div>
      {{/if}}

      {{#if showBankCard}}
      <div class="card" style="margin:16px 28px 0 28px; border:2px solid #3B82F6; border-radius:12px; padding:20px; background:#EBF8FF;">
        <h2 style="font-size:16px; margin:0 0 16px; color:#1D4ED8; font-weight:600;">{{bankCardTitle}}</h2>
        {{#each bankCardRows}}
        <div style="margin-bottom:{{#unless @last}}12px{{else}}0{{/unless}};">
          <div class="label" style="font-size:12px; color:#1E40AF; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; font-weight:500;">{{this.label}}</div>
          <div class="value" style="font-size:15px; color:#1E3A8A; font-weight:600; line-height:1.3; font-family: 'Courier New', monospace;">{{this.value}}</div>
        </div>
        {{/each}}
        {{#if bankCardDisclaimer}}
        <div style="margin-top:16px; padding-top:12px; border-top:1px solid #93C5FD;">
          <p style="font-size:12px; color:#6B7280; font-style:italic; margin:0;">{{bankCardDisclaimer}}</p>
        </div>
        {{/if}}
      </div>
      {{/if}}

      {{#if showAlert}}
      <div class="card" style="margin:6px 28px 0 28px; border:1px solid {{alertBorderColor}}; border-radius:12px; padding:16px; background:{{alertBackgroundColor}};">
        <div style="font-size:15px; font-weight:600; margin-bottom:8px; color:{{alertTitleColor}};">{{alertTitle}}</div>
        <div style="font-size:14px; color:{{alertTextColor}};">{{{alertText}}}</div>
      </div>
      {{/if}}

      {{#if ctaUrl}}
      <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="{{buttonColor}}" stroke="f" style="height:46px;v-text-anchor:middle;width:260px;">
            <w:anchorlock/>
            <center style="color:{{buttonTextColor}};font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">{{ctaText}}</center>
        </v:roundrect>
        <![endif]-->
        <!--[if !mso]><!-- -->
        <a class="btn" href="{{ctaUrl}}" style="background:{{buttonColor}}; color:{{buttonTextColor}}; 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);">{{ctaText}}</a>
        <!--<![endif]-->
        {{#if ctaSubtext}}
        <div style="font-size:12px; color:#64748B; font-style:italic; margin-top:8px;">
          {{ctaSubtext}}
        </div>
        {{/if}}
      </div>
      {{/if}}

      {{#if closingMessage}}
      <p class="note" style="font-size:13px; color:#475569; padding:0 28px 26px 28px; line-height:1.5;">
        {{{closingMessage}}}
      </p>
      {{/if}}

      <div class="footer" style="font-size:12px; color:#64748B; text-align:center; padding:18px 28px 28px 28px; line-height:1.4;">
        <p>{{{footerText}}}<br><span class="muted" style="color:#94A3B8;">© 2021-2025 Odentas Media SAS<br>RCS Paris 907880348 | 6 rue d'Armaillé, 75017 Paris</span></p>
      </div>
    </div>
  </div>

  <div style="display:none; font-size:0; line-height:0;">{{subject}} – {{textFallback}}</div>
</body>
</html>
