<!doctype html>
<html lang="fr">
<head>
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="{{ description }}">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>{% block title %}{{ subject }}{% endblock title %}</title>
  <!-- https://github.com/leemunroe/responsive-html-email-template/ -->
  <style>
    /* -------------------------------------
        GLOBAL
    ------------------------------------- */
    * {
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 100%;
      line-height: 1.6em;
      margin: 0;
      padding: 0;
    }

    img {
      max-width: 600px;
      width: auto;
    }

    body {
      -webkit-font-smoothing: antialiased;
      height: 100%;
      -webkit-text-size-adjust: none;
      width: 100% !important;
    }

    /* -------------------------------------
        ELEMENTS
    ------------------------------------- */
    a {
      color: #348eda;
    }

    .btn-primary {
      display: inline-block;
      cursor: pointer;
      margin-bottom: 10px;
      width: auto !important;
      background-color: #348eda;
      color: #ffffff;
      border: solid 1px #3269b2;
      padding: 5px;
      font-weight: bold;
      line-height: 2;
      text-decoration: none;
      border-radius: 10px;
      font-size: 14px;
      text-align: center;
      vertical-align: top;
    }

    .last {
      margin-bottom: 0;
    }

    .first {
      margin-top: 0;
    }

    .padding {
      padding: 10px 0;
    }

    .text-right {
      text-align: right;
    }

    .text-left {
      text-align: left;
    }

    /* -------------------------------------
        BODY
    ------------------------------------- */
    table.body-wrap {
      padding: 20px;
      width: 100%;
    }

    table.body-wrap .container {
      border: 1px solid #f0f0f0;
    }

    /* -------------------------------------
        FOOTER
    ------------------------------------- */
    table.footer-wrap {
      clear: both !important;
      width: 100%;
    }

    .footer-wrap .container p {
      color: #666666;
      font-size: 12px;

    }

    table.footer-wrap a {
      color: #999999;
    }

    /* -------------------------------------
        TYPOGRAPHY
    ------------------------------------- */
    h1,
    h2,
    h3 {
      color: #111111;
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: 200;
      line-height: 1.2em;
      margin: 40px 0 10px;
    }

    h1 {
      font-size: 36px;
    }

    h2 {
      font-size: 28px;
    }

    h3 {
      font-size: 22px;
    }

    p,
    ul,
    ol {
      font-size: 14px;
      font-weight: normal;
      margin-bottom: 10px;
    }

    ul li,
    ol li {
      margin-left: 5px;
      list-style-position: inside;
    }

    /* ---------------------------------------------------
        RESPONSIVENESS
    ------------------------------------------------------ */
    /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
    .container {
      clear: both !important;
      display: block !important;
      Margin: 0 auto !important;
      max-width: 600px !important;
    }

    /* Set the padding on the td rather than the div for Outlook compatibility */
    .body-wrap .container {
      padding: 20px;
    }

    /* This should also be a block element, so that it will fill 100% of the .container */
    .content {
      display: block;
      margin: 0 auto;
      max-width: 600px;
    }

    /* Let's make sure tables in the content area are 100% wide */
    .content table {
      width: 100%;
    }

    table tr > td,
    table tr > th {
      padding: 5px;
    }
  </style>
</head>

<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap">
  <tbody>
  <tr>
    <td></td>
    <td class="container" bgcolor="#FFFFFF">
      <!-- content -->
      <div class="content">
        <table>
          <tr>
            <td>
              {% block page_title %}
                <h1>{% block title-content %}{% endblock title-content %}</h1>
              {% endblock page_title %}
              <!-- main-content -->
              {% block main-content %}
              {% endblock main-content %}
              <!-- /main-content -->
              <!-- button -->
              {% block buttons %}
                <div class="buttons" {# djLint:off #}style="text-align: center; "{# djLint:on #}>
                  {% block buttons-content %}{% endblock buttons-content %}
                </div>
              {% endblock buttons %}
              <!-- /button -->
              <!-- signature -->
              {% block signature %}
                <div class="signature" {# djLint:off #}style="text-align: center; "{# djLint:on #}>
                  {% block signature-content %}{% endblock signature-content %}
                </div>
              {% endblock signature %}
              <!-- /signature -->
            </td>
          </tr>
        </table>
      </div>
      <!-- /content -->
    </td>
    <td></td>
  </tr>
  </tbody>
</table>
<!-- /body -->

<!-- footer -->
<table class="footer-wrap">
  <tr>
    <td></td>
    <td class="container">
      <!-- footer-content -->
      <div class="content">
        <table>
          <tr>
            <td align="center">
              {% block footer-content %}
                {{ footer|safe }}
              {% endblock footer-content %}
            </td>
          </tr>
        </table>
      </div>
      <!-- footer-content -->
    </td>
    <td></td>
  </tr>
</table>
<!-- /footer -->

</body>
</html>
