Improve style

public/css/style.css

@@ -427,25 +427,21 @@ summary:focus-visible {
   flex: 0 0 20px;
 }
 
-/* Authentification
+/* Formulaires
 ------------------------------------------------------------------------ */
 
-.auth-panel {
-  max-width: 520px;
-}
-
-.auth-panel h1 {
-  margin-top: 0;
-}
-
-.rodauth {
+.rodauth,
+.contact-form {
   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;