✨(models/api) allow inviting external users to a document by their email

We want to be able to share a document with a person even if this person
does not have an account in impress yet.

This code is ported from https://github.com/numerique-gouv/people.

src/mail/mjml/hello.mjml

@@ -1,28 +0,0 @@
-<mjml>
-  <mj-include path="./partial/header.mjml" />
-  <mj-body mj-class="bg--blue-100">
-    <mj-wrapper css-class="wrapper" padding="20px 40px 40px 40px">
-    <mj-section>
-      <mj-column>
-        <mj-image src="{% base64_static 'impress/images/logo_impress.png' %}" width="200px" align="left" alt="{%trans 'Company logo' %}" />
-      </mj-column>
-    </mj-section>
-      <mj-section mj-class="bg--blue-100" border-radius="6px 6px 0 0" padding="30px 50px 60px 50px">
-        <mj-column>
-          <mj-text padding="0">
-            <p>
-              {%if fullname%}
-                {% blocktranslate with name=fullname %}Hello {{ name }}{% endblocktranslate %}
-              {% else %}
-                {%trans "Hello" %}
-              {% endif %}<br/>
-              <strong>{%trans "Thank you very much for your visit!"%}</strong>
-            </p>
-          </mj-text>
-        </mj-column>
-      </mj-section>
-    </mj-wrapper>
-    <mj-include path="./partial/footer.mjml" />
-  </mj-body>
-</mjml>
-

src/mail/mjml/invitation.mjml

@@ -0,0 +1,54 @@
+<mjml>
+  <mj-include path="./partial/header.mjml" />
+
+  <mj-body mj-class="bg--blue-100">
+    <mj-wrapper css-class="wrapper" padding="0 40px 40px 40px">
+      <mj-section background-url="{% base64_static 'images/mail-header-background.png' %}" background-size="cover" background-repeat="no-repeat" background-position="0 -30px">
+        <mj-column>
+            <mj-image align="center" src="{% base64_static 'images/logo-suite-numerique.png' %}" width="250px" align="left" alt="{%trans 'La Suite Numérique' %}" />
+        </mj-column>
+      </mj-section>
+      <mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
+        <mj-column>
+          <mj-text font-size="14px">
+            <p>{% trans "Invitation to join a team" %}</p>
+          </mj-text>
+
+          <!-- Welcome Message -->
+          <mj-text>
+            <h1>{% blocktrans %}Welcome to <strong>Impress</strong>{% endblocktrans %}</h1>
+          </mj-text>
+          <mj-divider border-width="1px" border-style="solid" border-color="#DDDDDD" width="30%" align="left"/>
+
+          <mj-image src="{% base64_static 'images/logo.svg' %}" width="157px" align="left" alt="{%trans 'Logo' %}" />
+
+          <!-- Main Message -->
+          <mj-text>{% trans "We are delighted to welcome you to our community on Impress, your new companion to collaborate on documents efficiently, intuitively, and securely." %}</mj-text>
+          <mj-text>{% trans "Our application is designed to help you organize, collaborate, and manage permissions." %}</mj-text>
+          <mj-text>
+            {% trans "With Impress, you will be able to:" %}
+            <ul>
+              <li>{% trans "Create documents."%}</li>
+              <li>{% trans "Invite members of your document or community in just a few clicks."%}</li>
+            </ul>
+          </mj-text>
+          <mj-button href="//{{site.domain}}" background-color="#000091" color="white" padding-bottom="30px">
+            {% trans "Visit Impress"%}
+          </mj-button>
+          <mj-text>{% trans "We are confident that Impress will help you increase efficiency and productivity while strengthening the bond among members." %}</mj-text>
+          <mj-text>{% trans "Feel free to explore all the features of the application and share your feedback and suggestions with us. Your feedback is valuable to us and will enable us to continually improve our service." %}</mj-text>
+          <mj-text>{% trans "Once again, welcome aboard! We are eager to accompany you on you collaboration adventure." %}</mj-text>
+
+          <!-- Signature -->
+          <mj-text>
+            <p>{% trans "Sincerely," %}</p>
+            <p>{% trans "The La Suite Numérique Team" %}</p>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+  </mj-body>
+
+  <mj-include path="./partial/footer.mjml" />
+</mjml>
+

src/mail/mjml/partial/header.mjml

@@ -14,10 +14,8 @@
                 font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
                 font-size="16px"
                 line-height="1.5em"
-                color="#031963"
+                color="#3A3A3A"
         />
-        <mj-class name="text--small" font-size="0.875rem" />
-        <mj-class name="bg--blue-100" background-color="#EDF5FA" />
     </mj-attributes>
     <mj-style>
         /* Reset */
@@ -33,7 +31,7 @@
     <mj-style>
         /* Global styles */
         h1 {
-            color: #055FD2;
+            color: #161616;
             font-size: 2rem;
             line-height: 1em;
             font-weight: 700;