harmony-back/public/confirmation.html

<!-- Pré-en-tête (préheader) : aperçu dans certaines boîtes mail -->
<span style="display: none; max-height: 0; overflow: hidden"
  >Confirme ton adresse e-mail en un clic pour activer ton compte.</span
>

<table
  role="presentation"
  width="100%"
  cellpadding="0"
  cellspacing="0"
  style="
    background-color: #f5f7fa;
    padding: 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
      &quot;Helvetica Neue&quot;, Arial;
  "
>
  <tr>
    <td align="center">
      <table
        role="presentation"
        width="600"
        cellpadding="0"
        cellspacing="0"
        style="
          background-color: #ffffff;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 6px 18px rgba(20, 30, 50, 0.08);
        "
      >
        <!-- En-tête -->
        <tr>
          <td style="padding: 28px 32px 8px">
            <div style="display: flex; align-items: center; gap: 12px">
              <img
                src="https://www.choralsync.com/logo_mini.png"
                alt="Votre application"
                width="48"
                height="48"
                style="display: block; border-radius: 8px; border: 0"
              />
              <div>
                <h1 style="margin: 0; font-size: 18px; color: #0f1724">
                  ChoralSync
                </h1>
                <p style="margin: 2px 0 0; font-size: 12px; color: #6b7280">
                  Bienvenue — plus qu’une étape
                </p>
              </div>
            </div>
          </td>
        </tr>

        <!-- Corps -->
        <tr>
          <td style="padding: 20px 32px 8px; color: #0f1724">
            <h2 style="margin: 0 0 8px; font-size: 20px">
              Bonjour {{USER_NAME}},
            </h2>
            <p
              style="
                margin: 0 0 16px;
                font-size: 15px;
                line-height: 1.5;
                color: #374151;
              "
            >
              Merci de t’être inscrit. Clique sur le bouton ci-dessous pour
              confirmer ton adresse e-mail et activer ton compte.
            </p>

            <!-- Bouton -->
            <table
              role="presentation"
              cellpadding="0"
              cellspacing="0"
              style="margin: 20px 0"
            >
              <tr>
                <td align="center">
                  <a
                    href="{{CONFIRM_URL}}"
                    style="
                      display: inline-block;
                      padding: 12px 22px;
                      border-radius: 10px;
                      text-decoration: none;
                      font-weight: 600;
                      font-size: 15px;
                      background-image: linear-gradient(
                        90deg,
                        #6366f1,
                        #06b6d4
                      );
                      color: #ffffff;
                    "
                  >
                    Confirmer mon e-mail
                  </a>
                </td>
              </tr>
            </table>

            <!-- Lien de secours -->
            <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">
              Si le bouton ne fonctionne pas, copie-colle ce lien dans ton
              navigateur :
            </p>
            <p
              style="
                word-break: break-all;
                font-size: 12px;
                color: #0f1724;
                margin: 8px 0 0;
                padding: 10px;
                background: #f3f4f6;
                border-radius: 8px;
                border: 1px solid #e6e9ef;
              "
            >
              <a
                href="{{CONFIRM_URL}}"
                style="color: #0369a1; text-decoration: underline"
                >{{CONFIRM_URL}}</a
              >
            </p>
          </td>
        </tr>

        <!-- Pied de mail -->
        <tr>
          <td
            style="
              padding: 18px 32px 28px;
              color: #9ca3af;
              font-size: 13px;
              border-top: 1px solid #f1f3f6;
            "
          >
            <p style="margin: 0 0 6px">
              Si tu n’es pas à l’origine de cette inscription, ignore cet
              e-mail.
            </p>
            <p style="margin: 0; font-size: 12px; color: #9ca3af">
              © ChoralSync {{YEAR}} •
              <a
                href="https://www.choralsync.com"
                style="color: #9ca3af; text-decoration: underline"
                >www.choralsync.com</a
              >
            </p>
          </td>
        </tr>
      </table>

      <div style="height: 14px"></div>
      <p style="font-size: 12px; color: #9ca3af; margin: 0">
        Besoin d’aide ? Réponds directement à cet e-mail ou consulte notre
        <a href="https://www.choralsync.com/help" style="color: #0369a1"
          >centre d’aide</a
        >.
      </p>
    </td>
  </tr>
</table>