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,9 +27,15 @@
     >
       <%== 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>
+
+      <fieldset>
+        <legend>Compte personnel</legend>
+
+        <p class="form-description">
+          Pour créer un compte en votre nom (personne physique).
         </p>
 
         <label for="first_name">Prénom</label>
@@ -59,6 +65,17 @@
         <% if error = rodauth.field_error("last_name") %>
           <p class="flash flash--error"><%= error %></p>
         <% 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
@@ -73,10 +90,12 @@
         <% 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>