{% autoescape off %}
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f7fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px;">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
        
        <!-- Header -->
        <tr>
          <td align="center" style="background-color: #f3f3f3; padding: 20px;">
            <h1 style="margin: 0; font-size: 28px; color: #2d2907ff;">ECOLUX BTP</h1>
          </td>
        </tr>

        <!-- Title -->
        <tr>
          <td align="center" style="padding: 20px;">
            <h2 style="color: #DFB91F; margin: 0; font-size: 22px;">{{ titre }}</h2>
          </td>
        </tr>

        
        <tr>
          <td style="padding: 0 30px 20px 30px; color: #333; font-size: 16px; line-height: 1.6; text-align: center;">
            Bonjour <b>{{ user.first_name }}</b>,<br><br>
            {{ message|safe }}
          </td>
        </tr>

        
        {% if url != "" %}
        <tr>
          <td align="center" style="padding: 20px;">
            <a href="http://{{ domain }}{{ url }}" target="_blank" rel="noopener noreferrer"
               style="background-color: #DFB91F; color: #fff; text-decoration: none; padding: 12px 25px; border-radius: 6px; font-size: 17px; display: inline-block;">
              {{ cta }}
            </a>
          </td>
        </tr>
        {% endif %}

        
        <tr>
          <td align="center" style="background-color: #f3f3f3; padding: 10px; font-size: 12px; color: #888;">
            © {{ now.year }} ECOLUX BTP. Tous droits réservés.
          </td>
        </tr>

      </table>
    </td>
  </tr>
</table>
{% endautoescape %}