--- a/templates/default/association/membership.html	Tue Nov 30 17:38:36 2021 +0100
+++ b/templates/default/association/membership.html	Tue Nov 30 17:39:46 2021 +0100
@@ -3,71 +3,66 @@
 {% import 'input/field.html' as field with context %}
 
 {% block body %}
-    <h1 class='heading__subtitle'>{% trans %}Salut à Toi association membership request{% endtrans %}</h1>
-    <p class='instructions--head'>{% trans %}Please fill the form below if you're willing to join the Salut à Toi association.{% endtrans %}</p>
+    <h1 class='title is-4'>{% trans %}Salut à Toi association membership request{% endtrans %}</h1>
+    <article class="message is-info">
+        <div class="message-body">{% trans %}Please fill the form below if you're willing to join the Salut à Toi association.{% endtrans %}</div>
+    </article>
     <div>
-        {% call form.form(class="form--paper form__panel--center") %}
-            <h3 class="center">{% trans %}Identity{% endtrans %}</h3 class="center">
+        {% call form.form() %}
             {{ field.text("firstname",
                           _("firstname"),
                           placeholder=_("Given name"),
                           required=true,
-                          class="form__field--big") }}
+                          ) }}
             {{ field.text("name",
                           _("name"),
                           placeholder=_("Family name"),
                           required=true,
-                          class="form__field--big") }}
+                          ) }}
             {{ field.textarea("address",
                               _("address"),
                               placeholder=_("Address, post code, city"),
                               required=true,
-                              class="form__field--big") }}
-            <h3 class="center">{% trans %}Contacts{% endtrans %}</h3 class="center">
+                              ) }}
             {{ field.email("email",
                           _("email address"),
                           placeholder=_("please double check your email address"),
                           required=true,
-                          class="form__field--big") }}
+                          ) }}
             {{ field.text("jid",
                           "Jabber ID",
                           placeholder=_("XMPP identifier (may be your SàT login)"),
-                          class="form__field--big") }}
-            <h3 class="center">{% trans %}Subscription{% endtrans %}</h3 class="center">
-            {{ field.select("subscription",
-                            (("0", _("0€")),
-                            ("10", _("10€")),
-                            ("20", _("20€")),
-                            ("30", _("30€")),
-                            ("50", _("50€")),
-                            ("80", _("80€")),
-                            ("100", _("100€"))),
-                            selected=["10"],
-                            required=true,
-                            class="form__field--big",
-            ) }}
-            <h3 class="center">{% trans %}Reference{% endtrans %}</h3 class="center">
+                          ) }}
+            <label class="has-text-weight-bold">
+                {% trans %}Subscription{% endtrans %}
+                {{ field.select("subscription",
+                                (("0", _("0€")),
+                                ("10", _("10€")),
+                                ("20", _("20€")),
+                                ("30", _("30€")),
+                                ("50", _("50€")),
+                                ("80", _("80€")),
+                                ("100", _("100€"))),
+                                selected=["10"],
+                                required=true,
+                ) }}
+            </label>
             {{ field.text("reference",
                           _("reference (in case of renewal)"),
                           placeholder=_("Your adherent number. You may let empty if you don't know it."),
-                          class="form__field--big") }}
-            <h3 class="center">{% trans %}Comment{% endtrans %}</h3 class="center">
+                          ) }}
             {{ field.textarea("comment",
                               _("comment"),
                               placeholder=_("This is a free field if you have anything to say or request."),
-                              class="form__field--big") }}
-
+                              ) }}
             {{ field.checkbox("mailing_list",
-                              _("I would like to subscribe to the adherents' mailing list (low traffic)."),
                               checked=true) }}
+                              {% trans %}I would like to subscribe to the adherents' mailing list (low traffic).{% endtrans %}
             {{ field.checkbox("documents_read",
-                              _("I have read the %(statutes)s and %(rules)s and I agree with both of them",
-                                statutes='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/statuts.pdf">'|safe + _("statutes") + '</a>'|safe,
-                                rules='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/r%C3%A8glement%20int%C3%A9rieur.pdf">'|safe + _("rules") + '</a>'|safe,
-                                ),
                               checked=false,
                               required=true) }}
-            {{ field.submit(_("join the association"), id="membership_submit") }}
+                              {% trans statutes='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/statuts.pdf">'|safe + _("statutes") + '</a>'|safe, rules='<a href="https://repos.goffi.org/sat_docs/raw-file/tip/association/r%C3%A8glement%20int%C3%A9rieur.pdf">'|safe + _("rules") + '</a>'|safe %}I have read the {{statutes}} and {{rules}} and I agree with both of them{% endtrans %}
+            {{ field.submit(_("join the association"), id="membership_submit", class="mt-3") }}
         {% endcall %}
     </div>