Improve style

public/css/style.css

@@ -427,25 +427,21 @@ summary:focus-visible {
   flex: 0 0 20px;
 }
 
-/* Authentification
+/* Formulaires
 ------------------------------------------------------------------------ */
 
-.auth-panel {
+.rodauth,
-  max-width: 520px;
+.contact-form {
-}
-
-.auth-panel h1 {
-  margin-top: 0;
-}
-
-.rodauth {
   display: grid;
-  gap: 20px;
+  gap: 12px;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
 }
 
-.rodauth > p {
+.rodauth > p,
+.contact-form > p {
   margin: 0;
-  line-height: 1.5;
 }
 
 .rodauth .form-group {
@@ -454,36 +450,90 @@ summary:focus-visible {
   margin: 0;
 }
 
-.rodauth .form-label {
+.rodauth .form-label,
+.contact-form label,
+.contact-form legend {
   font-weight: 700;
 }
 
-.rodauth .form-control {
+.rodauth .form-control,
+.contact-form input:not([type="submit"]),
+.contact-form textarea {
+  display: block;
   width: 100%;
+  margin: 0;
   padding: 10px;
   border: 1px solid var(--color-text);
   border-radius: 0;
   background: var(--color-text);
   color: var(--color-background);
-  font: inherit;
+  font-family: inherit;
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.4;
 }
 
-.rodauth .btn-primary {
+.contact-form textarea {
+  min-height: 150px;
+  resize: vertical;
+  box-shadow: 0 0 10px var(--color-surface-dark);
+}
+
+.rodauth .btn-primary,
+.contact-form .submit {
+  display: block;
   width: 100%;
+  margin: 0;
   padding: 10px 16px;
   border: 2px solid var(--color-accent);
   border-radius: 0;
   background: var(--color-accent);
   color: var(--color-background);
-  font: inherit;
+  font-family: inherit;
+  font-size: 1.2rem;
   font-weight: 700;
+  line-height: 1.4;
   cursor: pointer;
 }
 
-.rodauth .btn-primary:hover {
+.rodauth .btn-primary:hover,
+.contact-form .submit:hover {
   filter: brightness(1.12);
 }
 
+.contact-form fieldset {
+  display: grid;
+  min-width: 0;
+  gap: 10px;
+  margin: 0;
+  padding: 16px;
+  border: 1px solid var(--color-shadow-light);
+}
+
+.contact-form legend {
+  padding-inline: 8px;
+  color: var(--color-highlight);
+}
+
+.contact-form .form-description {
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.contact-form .form-choice-separator {
+  margin: 0;
+  text-align: center;
+}
+
+.auth-panel {
+  max-width: 520px;
+}
+
+.auth-panel h1 {
+  margin-top: 0;
+}
+
 .auth-links {
   margin-top: 28px;
   padding-top: 20px;
@@ -506,46 +556,6 @@ summary:focus-visible {
   list-style: none;
 }
 
-/* Formulaires
------------------------------------------------------------------------- */
-
-.contact-form {
-  display: grid;
-  gap: 10px;
-  font-size: 1rem;
-  font-weight: 700;
-}
-
-.contact-form input,
-.contact-form textarea {
-  width: 100%;
-  margin: 0;
-  padding: 10px;
-  border: 0;
-  font-family: inherit;
-  font-size: 1.2rem;
-}
-
-.contact-form input:not([type="submit"]),
-.contact-form textarea {
-  background: var(--color-text);
-  color: var(--color-background);
-}
-
-.contact-form textarea {
-  min-height: 150px;
-  resize: vertical;
-  box-shadow: 0 0 10px var(--color-surface-dark);
-}
-
-.submit {
-  width: 100%;
-  background: var(--color-accent);
-  color: var(--color-background);
-  font-weight: 700;
-  cursor: pointer;
-}
-
 .honeypot {
   position: absolute;
   left: -10000px;

views/create-account.erb

@@ -27,56 +27,75 @@
     >
       <%== rodauth.csrf_tag %>
 
-      <p>
+      <p class="form-description">
-        Renseignez soit le prénom et le nom d'une personne physique,
+        Choisissez l'une des deux possibilités suivantes.
-        soit la dénomination d'une personne morale.
       </p>
 
-      <label for="first_name">Prénom</label>
+      <fieldset>
-      <input
+        <legend>Compte personnel</legend>
-        id="first_name"
-        name="first_name"
-        type="text"
-        maxlength="128"
-        autocomplete="given-name"
-        value="<%= request.params["first_name"] %>"
-      >
 
-      <% if error = rodauth.field_error("first_name") %>
+        <p class="form-description">
-        <p class="flash flash--error"><%= error %></p>
+          Pour créer un compte en votre nom (personne physique).
-      <% end %>
+        </p>
 
-      <label for="last_name">Nom</label>
+        <label for="first_name">Prénom</label>
-      <input
+        <input
-        id="last_name"
+          id="first_name"
-        name="last_name"
+          name="first_name"
-        type="text"
+          type="text"
-        maxlength="128"
+          maxlength="128"
-        autocomplete="family-name"
+          autocomplete="given-name"
-        value="<%= request.params["last_name"] %>"
+          value="<%= request.params["first_name"] %>"
-      >
+        >
 
-      <% if error = rodauth.field_error("last_name") %>
+        <% if error = rodauth.field_error("first_name") %>
-        <p class="flash flash--error"><%= error %></p>
+          <p class="flash flash--error"><%= error %></p>
-      <% end %>
+        <% end %>
 
-      <label for="organization_name">Dénomination</label>
+        <label for="last_name">Nom</label>
-      <input
+        <input
-        id="organization_name"
+          id="last_name"
-        name="organization_name"
+          name="last_name"
-        type="text"
+          type="text"
-        maxlength="255"
+          maxlength="128"
-        autocomplete="organization"
+          autocomplete="family-name"
-        value="<%= request.params["organization_name"] %>"
+          value="<%= request.params["last_name"] %>"
-      >
+        >
 
-      <% if error = rodauth.field_error("organization_name") %>
+        <% if error = rodauth.field_error("last_name") %>
-        <p class="flash flash--error"><%= error %></p>
+          <p class="flash flash--error"><%= error %></p>
-      <% end %>
+        <% end %>
+      </fieldset>
+
+      <p class="form-choice-separator">ou</p>
+
+      <fieldset>
+        <legend>Compte au nom d'une organisation</legend>
+
+        <p class="form-description">
+          Pour créer un compte au nom d'une association,
+          d'une entreprise ou d'une autre personne morale.
+        </p>
+
+        <label for="organization_name">Dénomination</label>
+        <input
+          id="organization_name"
+          name="organization_name"
+          type="text"
+          maxlength="255"
+          autocomplete="organization"
+          value="<%= request.params["organization_name"] %>"
+        >
+
+        <% if error = rodauth.field_error("organization_name") %>
+          <p class="flash flash--error"><%= error %></p>
+        <% end %>
+      </fieldset>
+
+      <p>
+        <strong>Adresse électronique</strong>
+      </p>
 
-      <label for="<%= rodauth.login_param %>">
-        Adresse électronique
-      </label>
       <input
         id="<%= rodauth.login_param %>"
         name="<%= rodauth.login_param %>"
@@ -91,7 +110,7 @@
         <p class="flash flash--error"><%= error %></p>
       <% end %>
 
-      <p>
+      <p class="form-description">
         Nous vous enverrons un courriel pour vérifier votre adresse
         électronique. Vous choisirez votre mot de passe à cette étape.
       </p>