style(demande): layout mode doc optimized with contrasted values

app/assets/stylesheets/demande.scss

@@ -2,34 +2,23 @@
 @import "constants";
 
 .dossier-show {
-  &-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;
+    font-size: 0.8rem;
+    font-weight: 300;
   }
 
   .champ-content {
     padding: 0 0 0.5rem;
+    font-weight: 600;
+
+    a {
+      font-weight: normal;
+    }
 
     p {
       padding: 0;
@@ -41,6 +30,11 @@
     }
   }
 
+  .champ-blank {
+    font-weight: normal;
+    font-style: italic;
+  }
+
   .champ-updated {
     float: right;
   }

app/components/dossiers/row_show_component.html.haml

@@ -1,17 +1,16 @@
 .champ-row
-  %p.champ-label= "#{label} :"
+  %p.champ-label
+    = "#{label} :"
+    - if updated_at.present?
+      %span.fr-ml-3v.champ-updated{ class: badge_updated_class }
+        = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
 
   - if blank?
     .champ-content.fr-text-mention--grey{ class: content_class }
       - if usager?
-        %p
+        %p.champ-blank= blank
-          %em= blank
 
   - else
-    .champ-content{ class: content_class }
-      - if updated_at.present?
-        %p.fr-mb-1v.fr-ml-3v.champ-updated
-          %span{ class: badge_updated_class }
-            = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
 
+    .champ-content{ class: content_class }
       = value

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

@@ -4,7 +4,7 @@
 
 .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{ class: class_names("fr-col-xl-10" => profile == "usager") }
+    .fr-col-12.fr-col-xl-8
       %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/shared/dossiers/_identite_entreprise.html.haml

@@ -175,7 +175,8 @@
               %p= try_format_date(etablissement.association_date_declaration)
 
   - unless local_assigns[:short_identity]
-    %p.text-center
+    .champ-row
-      = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr » (ex: fiche d’immatriculation RNCS)",
+      %p
-        annuaire_link(etablissement.siret),
+        = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr »",
-        **external_link_attributes
+          annuaire_link(etablissement.siret),
+          **external_link_attributes

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

@@ -18,6 +18,6 @@
   - if !@dossier.read_only?
     .fr-container.fr-mt-2w
       .fr-grid-row
-        .fr-col-xl-10.fr-col-offset-xl-1
+        .fr-col-xl-8.fr-col-offset-xl-2
           %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"