form: make the radio button larger and hoverable

As a bonus, the implementation of vertical radio buttons is now closer
from the default horizontal one.

app/assets/stylesheets/new_design/forms.scss

@@ -70,26 +70,21 @@
       visibility: visible;
     }
 
-    // Align checkboxes on the top-left side of the label
+    // Move checkbox to the top-left side of the label
     &.editable-champ-checkbox,
-    &.editable-champ-radio.vertical,
     &.editable-champ-engagement {
       p,
       label {
         padding-left: 28px;
       }
 
-      input[type=checkbox],
+      input[type=checkbox] {
-      input[type=radio] {
         position: absolute;
         top: 3px;
         left: 0px;
       }
-    }
 
-    // When the (eventual) notice is displayed after the input, give it some bottom margin
+      // When an (eventual) notice is displayed after the input, give it some bottom margin.
-    &.editable-champ-checkbox,
-    &.editable-champ-engagement {
       .notice {
         margin-bottom: $default-fields-spacer;
       }
@@ -97,13 +92,58 @@
   }
 
   .radios {
+    display: flex;
+
+    // Horizontal layout (default)
+    flex-direction: row;
+    align-items: flex-start;
+
     label {
-      display: inline;
+      margin-right: $default-padding;
-      margin-left: $default-padding;
+    }
+
+    // Vertical layout
+    &.vertical {
+      flex-direction: column;
+      align-items: stretch;
+
+      label {
+        margin-right: 0;
+      }
+    }
+
+    label {
+      padding: $default-padding $default-padding $default-padding $default-spacer;
+      border: 1px solid $border-grey;
+      border-radius: 4px;
+      font-weight: normal;
+      background: $white;
+      user-select: none;
+
+      &:last-of-type {
+        margin-bottom: $default-fields-spacer;
+      }
+
+      &:hover {
+        background: $light-grey;
+        cursor: pointer;
+      }
+
+      &:active {
+        border-color: darken($border-grey, 10);
+      }
 
       &:first-child {
         margin-left: 0;
       }
+
+      input[type=radio] {
+        margin-bottom: 0;
+      }
+
+      .notice {
+        margin: 4px 0 0 27px;
+      }
     }
   }
 
@@ -190,16 +230,14 @@
   input[type=radio] {
     @extend %outline;
 
-    margin-left: 5px;
+    // Firefox tends to display some controls smaller than other browsers.
-    margin-right: 4px;
-    margin-bottom: $default-fields-spacer;
-  }
-
-  input[type=checkbox] {
-    // Firefox tends to display checkbox controls smaller than other browsers.
     // Ensure a consistency of size between browsers.
     width: 16px;
     height: 16px;
+
+    margin-left: 5px;
+    margin-right: 4px;
+    margin-bottom: $default-fields-spacer;
   }
 
   input[type=date] {

app/views/new_administrateur/procedures/_informations.html.haml

@@ -78,18 +78,17 @@
 
 - if !@procedure.locked?
   %h2.header-section À qui s’adresse ma démarche ?
-  .editable-champ.editable-champ-radio.vertical
+  .radios.vertical
     = f.label :for_individual, value: true do
+      = f.radio_button :for_individual, true
       Ma démarche s’adresse à un particulier
       %p.notice En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-    = f.radio_button :for_individual, true
 
-  .editable-champ.editable-champ-radio.vertical
     = f.label :for_individual, value: false do
+      = f.radio_button :for_individual, false
       Ma démarche s’adresse à une personne morale
       %p.notice
         En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
-    = f.radio_button :for_individual, false
 
   %p.explication
     Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire.

app/views/root/patron.html.haml

@@ -52,16 +52,16 @@
           %label Mot de passe
           %input{ type: "password", value: "12345678" }
 
-        %h2.header-section Bouton radio verticaux
+        %h3.header-subsection Bouton radio verticaux
-        .editable-champ.editable-champ-radio.vertical
+        .radios.vertical
-          = f.label :archived, 'Option A', value: true
+          = f.label :archived, value: true do
-          %p.notice Une option tout à fait valable.
             = f.radio_button :archived, true
-
+            Option A
-        .editable-champ.editable-champ-radio.vertical
+            %p.notice Une option tout à fait valable.
-          = f.label :archived, 'Option B', value: false
+          = f.label :archived, value: false do
-          %p.notice Une autre option, pas mal non plus.
             = f.radio_button :archived, false
+            Option B
+            %p.notice Une autre option, pas mal non plus.
 
         .send-wrapper
           = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'