style(demande): usager profile with document layout instead of columns

app/assets/stylesheets/demande.scss

@@ -2,31 +2,35 @@
 @import "constants";
 
 .dossier-show {
-  .champ-row {
+  &-instructeur {
     @media (min-width: 48em) {
+      .champ-row {
         display: flex;
       }
 
+      .champ-label {
+        flex: 3;
+        margin-right: 1rem;
+      }
+
+      .champ-content {
+        flex: 4;
+      }
+    }
+  }
+
+  .champ-row {
     padding: 0.5rem 1rem;
   }
 
   .champ-label {
     font-weight: 600;
     margin-bottom: 0;
-
-    @media (min-width: 48em) {
-      flex: 3;
-      margin-right: 1rem;
-    }
   }
 
   .champ-content {
     padding: 0 0 0.5rem;
 
-    @media (min-width: 48em) {
-      flex: 4;
-    }
-
     p {
       padding: 0;
       margin: 0;

app/views/shared/dossiers/_demande.html.haml

@@ -2,9 +2,9 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
 
-.fr-container.counter-start-header-section.dossier-show
+.fr-container.counter-start-header-section.dossier-show{ class: class_names("dossier-show-instructeur" => profile =="instructeur") }
   .fr-grid-row.fr-grid-row--center
-    .fr-col-12
+    .fr-col-12{ class: class_names("fr-col-xl-10" => profile == "usager") }
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0
         .flex-grow.fr-py-3v.fr-px-2w= t('views.shared.dossiers.demande.en_construction')
 

app/views/users/dossiers/demande.html.haml

@@ -17,5 +17,7 @@
 
   - if !@dossier.read_only?
     .fr-container.fr-mt-2w
+      .fr-grid-row
+        .fr-col-xl-10.fr-col-offset-xl-1
           %p= link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm',
             title: "Modifier mon dossier tant qu'il n'est pas passé en instruction"