procedure: align radio buttons vertically

- Remove the unused `.radios.vertical`
- Add a `.editable-champ-radio.vertical` variant for vertical radios
- Add an example of vertical radios to the patron
- Use vertical radios to display the procedure options

app/assets/stylesheets/new_design/forms.scss

@@ -70,12 +70,14 @@
 
     // Align checkboxes on the top-left side of the label
     &.editable-champ-checkbox,
+    &.editable-champ-radio.vertical,
     &.editable-champ-engagement {
       label {
         padding-left: 28px;
       }
 
-      input[type=checkbox] {
+      input[type=checkbox],
+      input[type=radio] {
         position: absolute;
         top: 1px;
         left: 0px;
@@ -92,18 +94,6 @@
         margin-left: 0;
       }
     }
-
-    &.vertical {
-      label {
-        display: block;
-        margin-left: 0;
-        margin-bottom: 0;
-      }
-
-      input[type=radio] {
-        margin-bottom: 16px;
-      }
-    }
   }
 
   input[type=text]:not([data-address='true']),

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

@@ -106,24 +106,22 @@
 
   - if !@procedure.locked?
     %h2.header-section À qui s’adresse ma démarche ?
-    .radios
+    .editable-champ.editable-champ-radio.vertical
       = f.label :for_individual, value: true do
-        = f.radio_button :for_individual, true
         Ma démarche s’adresse à un particulier
+        %span.notice
+          %p 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
 
-      %p.explication
+    .editable-champ.editable-champ-radio.vertical
-        En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-
-    .radios
       = f.label :for_individual, value: false do
-        = f.radio_button :for_individual, false
         Ma démarche s’adresse à une personne morale
+        %span.notice
+          %p 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
-      En choisissant cette option, l’usager devra renseigner son n° SIRET. Grâce à l’API Entreprise, seront alors automatiquement remontées les informations sur la personne morale type raison sociale ou adresse du siège social.
+      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez utiliser le champ SIRET directement dans le formulaire.
-
-    %p
-      Si votre démarche s’adresse indifféremment à une personne morale ou un particulier choisissez l'option "particuliers". Vous pourrez utilisez le champ SIRET directement dans le formulaire.
 
   %h2.header-section Options avancées
   - if feature_enabled?(:administrateur_web_hook)

app/views/root/patron.html.haml

@@ -48,8 +48,23 @@
           = render partial: "shared/dossiers/editable_champs/editable_champ",
             locals: { champ: champ, form: champ_form, seen_at: nil }
 
-        %label Mot de passe
+        .editable-champ.editable-champ-text
-        %input{ type: "password", value: "12345678" }
+          %label Mot de passe
+          %input{ type: "password", value: "12345678" }
+
+        %h2.header-section Bouton radio verticaux
+        .editable-champ.editable-champ-radio.vertical
+          = f.label :archived, value: true do
+            Option A
+            %span.notice
+              %p Une option tout à fait valable.
+          = f.radio_button :archived, true
+        .editable-champ.editable-champ-radio.vertical
+          = f.label :archived, value: false do
+            Option B
+            %span.notice
+              %p Une autre option, pas mal non plus.
+          = f.radio_button :archived, false
 
         .send-wrapper
           = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'