From 43c6f03d10ce4ab77044d93b9103f8ccb784aeb0 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 28 Apr 2023 10:33:01 +0200
Subject: [PATCH] amelioration(users/dossiers#demande): passage a la nouvelle
 ui/ux

wip
---
 app/assets/stylesheets/02_utils.scss          |   1 +
 app/assets/stylesheets/demande.scss           |  42 ++-
 app/assets/stylesheets/dossier_champs.scss    |  20 +-
 app/assets/stylesheets/sections.scss          |  12 +-
 .../dossiers/champ_row_show_component.rb      |  21 ++
 .../champ_row_show_component.en.yml           |   3 +
 .../champ_row_show_component.fr.yml           |   3 +
 .../champ_row_show_component.html.haml        |  64 ++++
 .../header_section_component.rb               |  15 +-
 .../viewable_champ/section_component.rb       |  45 +++
 .../section_component.en.yml                  |   3 +
 .../section_component.fr.yml                  |   3 +
 .../section_component.html.haml               |  14 +
 .../controllers/expand_controller.ts          |   7 +
 app/javascript/shared/utils.test.ts           |  10 +-
 app/javascript/shared/utils.ts                |   4 +-
 .../shared/champs/address/_show.html.haml     |   8 +-
 .../shared/champs/communes/_show.html.haml    |  12 +-
 .../champs/dossier_link/_show.html.haml       |   8 +-
 .../shared/dossiers/_champ_row.html.haml      |  72 ----
 app/views/shared/dossiers/_champs.html.haml   |  26 +-
 app/views/shared/dossiers/_demande.html.haml  |  32 +-
 .../dossiers/_identite_entreprise.html.haml   | 326 ++++++++++--------
 .../dossiers/_identite_individual.html.haml   |  37 +-
 .../dossiers/_infos_generales.html.haml       |  28 +-
 .../shared/dossiers/_user_infos.html.haml     |   9 +-
 app/views/users/dossiers/demande.html.haml    |   1 +
 .../users/dossiers/show/_header.html.haml     |   2 +-
 config/locales/en.yml                         |   2 +
 config/locales/fr.yml                         |   4 +-
 .../shared/dossiers/_champs.html.haml_spec.rb |   2 +-
 31 files changed, 487 insertions(+), 349 deletions(-)
 create mode 100644 app/components/dossiers/champ_row_show_component.rb
 create mode 100644 app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml
 create mode 100644 app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml
 create mode 100644 app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml
 create mode 100644 app/components/viewable_champ/section_component.rb
 create mode 100644 app/components/viewable_champ/section_component/section_component.en.yml
 create mode 100644 app/components/viewable_champ/section_component/section_component.fr.yml
 create mode 100644 app/components/viewable_champ/section_component/section_component.html.haml
 delete mode 100644 app/views/shared/dossiers/_champ_row.html.haml

diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss
index 6e1a39bf1..0870552ae 100644
--- a/app/assets/stylesheets/02_utils.scss
+++ b/app/assets/stylesheets/02_utils.scss
@@ -133,6 +133,7 @@
   }
 }
 
+
 // who known
 .highlighted {
   background: $orange-bg;
diff --git a/app/assets/stylesheets/demande.scss b/app/assets/stylesheets/demande.scss
index df4fd10c4..52dd1ef07 100644
--- a/app/assets/stylesheets/demande.scss
+++ b/app/assets/stylesheets/demande.scss
@@ -1,27 +1,25 @@
 @import "colors";
 @import "constants";
 
-.demande {
-  padding-top: 3 * $default-padding;
-  padding-bottom: 3 * $default-padding;
-
-  h1 {
-    margin-bottom: $default-padding;
-  }
-
-  .intro {
-    margin: $default-padding 0;
-  }
-
-  b {
-    font-weight: bold;
-  }
-
-  hr {
-    border: none;
-    height: 1px;
-    background-color: $grey;
-    margin-top: 2 * $default-padding;
-    margin-bottom: 2 * $default-padding;
+.container {
+  @media (max-width: 48em) {
+    .d-block-sm {
+      display: block;
+    }
   }
 }
+
+.champ-content {
+  padding: 0 0 ,5rem;
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.top-bordered {
+  border-top: 1px solid var(--border-default-grey);
+}
+
+
diff --git a/app/assets/stylesheets/dossier_champs.scss b/app/assets/stylesheets/dossier_champs.scss
index 48755c339..86808d340 100644
--- a/app/assets/stylesheets/dossier_champs.scss
+++ b/app/assets/stylesheets/dossier_champs.scss
@@ -11,14 +11,22 @@
     width: 325px;
   }
 
-  td.libelle,
-  td.updated-at {
-    width: 50%;
-  }
-
   td.updated-at {
     font-size: 13px;
     color: $dark-grey;
-    text-align: left;
+    text-align: right;
+    width: 190px;
+
+    > span {
+      opacity: 0;
+
+      &.highlighted {
+        opacity: 1;
+      }
+    }
+  }
+
+  tr:hover .updated-at > span {
+    opacity: 1;
   }
 }
diff --git a/app/assets/stylesheets/sections.scss b/app/assets/stylesheets/sections.scss
index ef729ff35..7b08a1c26 100644
--- a/app/assets/stylesheets/sections.scss
+++ b/app/assets/stylesheets/sections.scss
@@ -29,32 +29,32 @@
     counter-reset: h7;
   }
 
-  .header-section.fr-h2::before {
+  .header-section.section-2::before {
     counter-increment: h2;
     content: counter(h2) ". ";
   }
 
-  .header-section.fr-h3::before {
+  .header-section.section-3::before {
     counter-increment: h3;
     content: counter(h2) "." counter(h3) ". ";
   }
 
-  .header-section.fr-h4::before {
+  .header-section.section-4::before {
     counter-increment: h4;
     content: counter(h2) "." counter(h3) "." counter(h4) ". ";
   }
 
-  .header-section.fr-h5::before {
+  .header-section.section-5::before {
     counter-increment: h5;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
   }
 
-  .header-section.fr-h6::before {
+  .header-section.section-6::before {
     counter-increment: h6;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
   }
 
-  .header-section.fr-h7::before {
+  .header-section.section-7::before {
     counter-increment: h7;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". ";
   }
diff --git a/app/components/dossiers/champ_row_show_component.rb b/app/components/dossiers/champ_row_show_component.rb
new file mode 100644
index 000000000..07c844cd9
--- /dev/null
+++ b/app/components/dossiers/champ_row_show_component.rb
@@ -0,0 +1,21 @@
+class Dossiers::ChampRowShowComponent < ApplicationComponent
+  include ChampHelper
+  include DossierHelper
+  include ApplicationHelper
+  def initialize(champs:, demande_seen_at:, profile:, repetition:)
+    @repetition = repetition
+    @champs = champs
+    @demande_seen_at = demande_seen_at
+    @profile = profile
+  end
+
+  def updated_after_deposer?(champ)
+    return false if champ.dossier.depose_at.blank?
+    champ.updated_at > champ.dossier.depose_at
+  end
+
+  def number_with_html_delimiter(num)
+    # we are using the span delimiter that doesn't insert spaces when copying and pasting the number
+    number_with_delimiter(num, delimiter: tag.span(class: 'numbers-delimiter'))
+  end
+end
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml b/app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml
new file mode 100644
index 000000000..067154666
--- /dev/null
+++ b/app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml
@@ -0,0 +1,3 @@
+---
+en:
+  blank: "blank (optional)"
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml b/app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml
new file mode 100644
index 000000000..a4af6d922
--- /dev/null
+++ b/app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml
@@ -0,0 +1,3 @@
+---
+fr:
+  blank: "non saisi (facultatif)"
diff --git a/app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml b/app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml
new file mode 100644
index 000000000..529b69470
--- /dev/null
+++ b/app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml
@@ -0,0 +1,64 @@
+- @champs.each do |champ|
+  .fr-px-4v.fr-my-2v
+    - if champ.repetition?
+      = champ.libelle
+      - champ.rows.each do |row|
+        = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
+
+    - else
+      .flex.d-block-sm
+        %p.flex-grow.fr-text-action-high--grey.fr-mb-0= "#{champ.libelle} :"
+        %p.champ-updated-at.fr-mb-0.fr-text--sm
+          - if updated_after_deposer?(champ)
+            %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
+              modifié le
+              = try_format_datetime(champ.updated_at)
+
+      - if champ.blank?
+        .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          %p= t('.blank')
+      - else
+        .champ-content.fr-text-action-high--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          - case champ.type_champ
+          - when TypeDeChamp.type_champs.fetch(:carte)
+            = render partial: "shared/champs/carte/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:dossier_link)
+            = render partial: "shared/champs/dossier_link/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:multiple_drop_down_list)
+            = render partial: "shared/champs/multiple_drop_down_list/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:piece_justificative), TypeDeChamp.type_champs.fetch(:titre_identite)
+            = render partial: "shared/champs/piece_justificative/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:siret)
+            = render partial: "shared/champs/siret/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:iban)
+            = render partial: "shared/champs/iban/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:textarea)
+            = render partial: "shared/champs/textarea/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:annuaire_education)
+            = render partial: "shared/champs/annuaire_education/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:cnaf)
+            = render partial: "shared/champs/cnaf/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:dgfip)
+            = render partial: "shared/champs/dgfip/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:pole_emploi)
+            = render partial: "shared/champs/pole_emploi/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:mesri)
+            = render partial: "shared/champs/mesri/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:address)
+            = render partial: "shared/champs/address/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:communes)
+            = render partial: "shared/champs/communes/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:regions)
+            = render partial: "shared/champs/regions/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:rna)
+            = render partial: "shared/champs/rna/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:epci)
+            = render partial: "shared/champs/epci/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:date)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:datetime)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:number)
+            %p= number_with_html_delimiter(champ.to_s)
+          - else
+            %p= format_text_value(champ.to_s.strip) unless champ.blank?
diff --git a/app/components/editable_champ/header_section_component.rb b/app/components/editable_champ/header_section_component.rb
index 31a10e7f5..e8ccadfc0 100644
--- a/app/components/editable_champ/header_section_component.rb
+++ b/app/components/editable_champ/header_section_component.rb
@@ -1,21 +1,28 @@
 class EditableChamp::HeaderSectionComponent < ApplicationComponent
-  def initialize(form: nil, champ:, seen_at: nil)
+  def initialize(form: nil, champ:, seen_at: nil, html_class: {})
     @champ = champ
+    @html_class = html_class
   end
 
   def level
     @champ.level + 1 # skip one heading level
   end
 
+  def collapsible?
+    @champ.level == 1
+  end
+
   def libelle
     @champ.libelle
   end
 
   def header_section_classnames
     class_names(
-      "fr-h#{level}": true,
-      'header-section': @champ.dossier.auto_numbering_section_headers_for?(@champ),
-      'hidden': !@champ.visible?
+      {
+        "section-#{level}": true,
+        'header-section': @champ.dossier.auto_numbering_section_headers_for?(@champ),
+        'hidden': !@champ.visible?
+      }.merge(@html_class)
     )
   end
 
diff --git a/app/components/viewable_champ/section_component.rb b/app/components/viewable_champ/section_component.rb
new file mode 100644
index 000000000..e35999a02
--- /dev/null
+++ b/app/components/viewable_champ/section_component.rb
@@ -0,0 +1,45 @@
+class ViewableChamp::SectionComponent < ApplicationComponent
+  include ApplicationHelper
+  include TreeableConcern
+
+  def initialize(champs: nil, nodes: nil, demande_seen_at:, profile:)
+    @demande_seen_at, @profile, @repetition = demande_seen_at, profile
+    if nodes.nil?
+      nodes = to_tree(champs:)
+    end
+    @nodes = to_sections(nodes:)
+  end
+
+  def section_id
+    @section_id ||= header_section ? dom_id(header_section, :content) : SecureRandom.uuid
+  end
+
+  def header_section
+    return @nodes.first if @nodes.first.is_a?(Champs::HeaderSectionChamp)
+  end
+
+  def champs
+    tail.filter { _1.is_a?(Champ) && _1.visible? && !_1.exclude_from_view? }
+  end
+
+  def sections
+    tail.filter { !_1.is_a?(Champ) }
+  end
+
+  def tail
+    return @nodes if header_section.blank?
+    _, *rest_of_champ = @nodes
+
+    rest_of_champ
+  end
+
+  def tag_for_depth
+    "h#{header_section.level + 1}" if header_section
+  end
+
+  private
+
+  def to_sections(nodes:)
+    nodes.map { _1.is_a?(Array) ? ViewableChamp::SectionComponent.new(nodes: _1, demande_seen_at: @demande_seen_at, profile: @profile) : _1 }
+  end
+end
diff --git a/app/components/viewable_champ/section_component/section_component.en.yml b/app/components/viewable_champ/section_component/section_component.en.yml
new file mode 100644
index 000000000..2f33e8cc3
--- /dev/null
+++ b/app/components/viewable_champ/section_component/section_component.en.yml
@@ -0,0 +1,3 @@
+---
+en:
+  toggle_section: "Show/hide fields of « %{section} »"
diff --git a/app/components/viewable_champ/section_component/section_component.fr.yml b/app/components/viewable_champ/section_component/section_component.fr.yml
new file mode 100644
index 000000000..57463791c
--- /dev/null
+++ b/app/components/viewable_champ/section_component/section_component.fr.yml
@@ -0,0 +1,3 @@
+---
+fr:
+  toggle_section: "Afficher/Cacher les champs de la section « %{section} »"
diff --git a/app/components/viewable_champ/section_component/section_component.html.haml b/app/components/viewable_champ/section_component/section_component.html.haml
new file mode 100644
index 000000000..35995dec4
--- /dev/null
+++ b/app/components/viewable_champ/section_component/section_component.html.haml
@@ -0,0 +1,14 @@
+= tag.div(class: "reset-#{tag_for_depth} fr-mt-4v", 'data-controller': 'expand') do
+  - if header_section
+    %div{ class: class_names(flex: true, "top-bordered" => header_section.level == 1) }
+      = render EditableChamp::HeaderSectionComponent.new(champ:  header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-3v' => header_section.level == 1, 'fr-pt-3v' => header_section.level == 1})
+      - if ![champs, sections].map(&:empty?).all? && header_section.level == 1
+        %button{ type: "button", aria: { controls: section_id, "expanded": "true", label: t('.toggle_section', section: header_section.libelle) }, href: section_id, 'data-action': 'click->expand#toggle', class: "fr-btn fr-btn--tertiary-no-outline" }
+          %i.fr-icon-arrow-up-s-line{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
+
+  %div{ id: section_id, 'data-expand-target': 'content' }
+    - if !champs.empty?
+      = render Dossiers::ChampRowShowComponent.new(champs: champs, demande_seen_at: @demande_seen_at, profile: @profile, repetition: false)
+
+    - sections.each do |section|
+      = render section
diff --git a/app/javascript/controllers/expand_controller.ts b/app/javascript/controllers/expand_controller.ts
index 48352c08d..79a847038 100644
--- a/app/javascript/controllers/expand_controller.ts
+++ b/app/javascript/controllers/expand_controller.ts
@@ -8,8 +8,15 @@ export class ExpandController extends ApplicationController {
   declare readonly iconTarget: HTMLElement;
 
   toggle(event: Event) {
+    const target = event.currentTarget as HTMLButtonElement;
+
     event.preventDefault();
     toggle(this.contentTarget);
     toggleExpandIcon(this.iconTarget);
+    if (this.contentTarget.classList.contains('hidden')) {
+      target.setAttribute('aria-expanded', 'false');
+    } else {
+      target.setAttribute('aria-expanded', 'true');
+    }
   }
 }
diff --git a/app/javascript/shared/utils.test.ts b/app/javascript/shared/utils.test.ts
index 8bfec1edb..8597cb61e 100644
--- a/app/javascript/shared/utils.test.ts
+++ b/app/javascript/shared/utils.test.ts
@@ -37,14 +37,14 @@ suite('@utils', () => {
 
   test('toggleExpandIcon', () => {
     const icon = document.createElement('icon');
-    icon.classList.add('fr-icon-add-line');
+    icon.classList.add('fr-icon-arrow-down-s-line');
 
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-add-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeFalsy();
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-add-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeFalsy();
   });
 
   test('isSelectElement', () => {
diff --git a/app/javascript/shared/utils.ts b/app/javascript/shared/utils.ts
index 77093a212..3d3d8d44e 100644
--- a/app/javascript/shared/utils.ts
+++ b/app/javascript/shared/utils.ts
@@ -88,8 +88,8 @@ export function toggle(el: Element | null, force?: boolean) {
 }
 
 export function toggleExpandIcon(icon: Element | null) {
-  icon?.classList.toggle('fr-icon-add-line');
-  icon?.classList?.toggle('fr-icon-subtract-line');
+  icon?.classList.toggle('fr-icon-arrow-down-s-line');
+  icon?.classList?.toggle('fr-icon-arrow-up-s-line');
 }
 
 export function enable(
diff --git a/app/views/shared/champs/address/_show.html.haml b/app/views/shared/champs/address/_show.html.haml
index aeafc0864..2febbf37a 100644
--- a/app/views/shared/champs/address/_show.html.haml
+++ b/app/views/shared/champs/address/_show.html.haml
@@ -1,4 +1,6 @@
-= format_text_value(champ.to_s)
+- if champ.to_s.present?
+  %p= format_text_value(champ.to_s)
 - if champ.data.present?
-  Code INSEE :
-  = champ.data['city_code']
+  %p
+    Code INSEE :
+    = champ.data['city_code']
diff --git a/app/views/shared/champs/communes/_show.html.haml b/app/views/shared/champs/communes/_show.html.haml
index 10c7563d7..8bf86290d 100644
--- a/app/views/shared/champs/communes/_show.html.haml
+++ b/app/views/shared/champs/communes/_show.html.haml
@@ -1,9 +1,9 @@
-= champ.to_s
+%p= champ.to_s
 - if champ.code?
-  %p.text-sm
+  %p.fr-text--sm
     Code INSEE :
     = champ.code
-    - if champ.departement?
-      %br
-      Departement :
-      = champ.departement_code_and_name
+- if champ.departement?
+  %p.fr-text--sm
+    Departement :
+    = champ.departement_code_and_name
diff --git a/app/views/shared/champs/dossier_link/_show.html.haml b/app/views/shared/champs/dossier_link/_show.html.haml
index 442a6c71c..7d61a243e 100644
--- a/app/views/shared/champs/dossier_link/_show.html.haml
+++ b/app/views/shared/champs/dossier_link/_show.html.haml
@@ -2,10 +2,10 @@
 - if dossier
   - path = dossier_linked_path(current_instructeur || current_user, dossier)
   - if path.present?
-    = link_to("Dossier nº #{dossier.id}", path, target: '_blank', rel: 'noopener')
+    %p= link_to("Dossier nº #{dossier.id}", path, target: '_blank', rel: 'noopener')
   - else
-    Dossier nº #{dossier.id}
+    %p Dossier nº #{dossier.id}
   %br
-  = sanitize(dossier.text_summary)
+  %p= sanitize(dossier.text_summary)
 - else
-  Pas de dossier associé
+  %p Pas de dossier associé
diff --git a/app/views/shared/dossiers/_champ_row.html.haml b/app/views/shared/dossiers/_champ_row.html.haml
deleted file mode 100644
index a3b416e77..000000000
--- a/app/views/shared/dossiers/_champ_row.html.haml
+++ /dev/null
@@ -1,72 +0,0 @@
-- champs.reject(&:exclude_from_view?).filter(&:visible?).each do |c|
-  - if c.type_champ == TypeDeChamp.type_champs.fetch(:repetition)
-    %tr
-      %td.libelle.repetition{ colspan: 3 }
-        = "#{c.libelle} :"
-    - c.rows.each do |champs|
-      = render partial: "shared/dossiers/champ_row", locals: { champs: champs, demande_seen_at: demande_seen_at, profile: profile, repetition: true }
-      %tr
-        %td.libelle{ colspan: 4 }
-  - else
-    %tr
-      - if c.type_champ == TypeDeChamp.type_champs.fetch(:header_section)
-        %th.header-section{ colspan: 3, class: c.dossier.auto_numbering_section_headers_for?(c) ? "header-section-counter" : nil }= c.libelle
-      - else
-        %td.libelle{ class: repetition ? 'padded' : '' }
-          = "#{c.libelle} :"
-      - if c.type_champ != TypeDeChamp.type_champs.fetch(:header_section)
-        %td.updated-at
-          %span{ class: highlight_if_unseen_class(demande_seen_at, c.updated_at) }
-            modifié le
-            = try_format_datetime(c.updated_at)
-
-        %tr
-          %td.rich-text{ class: c.type_champ }
-            %div{ class: highlight_if_unseen_class(demande_seen_at, c.updated_at) }
-            - case c.type_champ
-            - when TypeDeChamp.type_champs.fetch(:carte)
-              = render partial: "shared/champs/carte/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:dossier_link)
-              = render partial: "shared/champs/dossier_link/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:multiple_drop_down_list)
-              = render partial: "shared/champs/multiple_drop_down_list/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:piece_justificative)
-              = render partial: "shared/champs/piece_justificative/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:titre_identite)
-              = render partial: "shared/champs/piece_justificative/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:siret)
-              = render partial: "shared/champs/siret/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:iban)
-              = render partial: "shared/champs/iban/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:textarea)
-              = render partial: "shared/champs/textarea/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:annuaire_education)
-              = render partial: "shared/champs/annuaire_education/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:cnaf)
-              = render partial: "shared/champs/cnaf/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:dgfip)
-              = render partial: "shared/champs/dgfip/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:pole_emploi)
-              = render partial: "shared/champs/pole_emploi/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:mesri)
-              = render partial: "shared/champs/mesri/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:address)
-              = render partial: "shared/champs/address/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:communes)
-              = render partial: "shared/champs/communes/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:regions)
-              = render partial: "shared/champs/regions/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:rna)
-              = render partial: "shared/champs/rna/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:epci)
-              = render partial: "shared/champs/epci/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:date)
-              = c.to_s
-            - when TypeDeChamp.type_champs.fetch(:datetime)
-              = c.to_s
-            - when TypeDeChamp.type_champs.fetch(:number)
-              = number_with_html_delimiter(c.to_s)
-            - else
-              = format_text_value(c.to_s) unless c.blank?
-
-
diff --git a/app/views/shared/dossiers/_champs.html.haml b/app/views/shared/dossiers/_champs.html.haml
index 4eba2463f..497fe1cad 100644
--- a/app/views/shared/dossiers/_champs.html.haml
+++ b/app/views/shared/dossiers/_champs.html.haml
@@ -1,10 +1,16 @@
-%table.table.vertical.dossier-champs.counter-start-header-section{ role: :presentation }
-  %tbody
-    - if dossier.show_groupe_instructeur_details?
-      %td.libelle= dossier.procedure.routing_criteria_name
-      %td{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }= dossier.groupe_instructeur.label
-      %td.updated-at
-        %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
-          modifié le
-          = try_format_datetime(dossier.updated_at)
-    = render partial: "shared/dossiers/champ_row", locals: { champs: champs, demande_seen_at: demande_seen_at, profile: profile, repetition: false }
+- if dossier.show_groupe_instructeur_details?
+  .fr-my-4v.fr-px-4v
+    .flex
+
+      %p.flex-grow.fr-text-action-high--grey.fr-mb-0= dossier.procedure.routing_criteria_name
+      %p.champ-updated-at.fr-mb-0.fr-text--sm
+        - if demande_seen_at&.<(dossier.groupe_instructeur_updated_at)
+          %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+            modifié le
+            = try_format_datetime(dossier.updated_at)
+
+    .champ-content.fr-text-action-high--grey{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+      %p= dossier.groupe_instructeur.label
+
+
+= render ViewableChamp::SectionComponent.new(champs: champs, demande_seen_at: demande_seen_at, profile: profile)
diff --git a/app/views/shared/dossiers/_demande.html.haml b/app/views/shared/dossiers/_demande.html.haml
index 3cf1acd66..400e7e49a 100644
--- a/app/views/shared/dossiers/_demande.html.haml
+++ b/app/views/shared/dossiers/_demande.html.haml
@@ -2,38 +2,40 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
 
-.container
+.container.counter-start-header-section
+  %h2.fr-h6.fr-background-alt--grey.fr-mb-0
+    .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
+
   - if dossier.depose_at.present?
-    .card
-      = render partial: "shared/dossiers/infos_generales", locals: { dossier: dossier }
+    = render partial: "shared/dossiers/infos_generales", locals: { dossier: dossier }
 
   .tab-title
-    %h2.fr-h6= t('views.shared.dossiers.demande.requester_identity')
+    %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
+      .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.requester_identity')
+      - if dossier.etablissement.present? && profile == 'usager' && !dossier.read_only?
+        = link_to t('views.shared.dossiers.demande.edit_siret'), siret_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
+
+      - if dossier.individual.present? && profile == 'usager' && !dossier.read_only?
+        = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
+
 
     - if dossier.identity_updated_at.present? && demande_seen_at&.<(dossier.identity_updated_at)
       %span.highlighted
         modifié le
         = try_format_datetime(dossier.identity_updated_at)
 
-  .card
+  .fr-my-4v.fr-px-4v
     = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 
     - if dossier.etablissement.present?
       = render partial: "shared/dossiers/identite_entreprise", locals: { etablissement: dossier.etablissement, profile: profile }
 
-      - if profile == 'usager' && !dossier.read_only?
-        .flex.row-reverse
-          = link_to t('views.shared.dossiers.demande.edit_siret'), siret_dossier_path(dossier), class: 'button'
-
     - if dossier.individual.present?
       = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }
 
-      - if profile == 'usager' && !dossier.read_only?
-        .flex.row-reverse
-          = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-btn fr-btn--tertiary'
+  %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
+    .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.form')
 
-  %h2.fr-h6= t('views.shared.dossiers.demande.form')
   - champs = dossier.champs_public
   - if champs.any? || dossier.procedure.routing_enabled?
-    .card
-      = render partial: "shared/dossiers/champs", locals: { champs: champs, dossier: dossier, demande_seen_at: demande_seen_at, profile: profile }
+    = render partial: "shared/dossiers/champs", locals: { champs: champs, dossier: dossier, demande_seen_at: demande_seen_at, profile: profile }
diff --git a/app/views/shared/dossiers/_identite_entreprise.html.haml b/app/views/shared/dossiers/_identite_entreprise.html.haml
index 914186c36..cc986b887 100644
--- a/app/views/shared/dossiers/_identite_entreprise.html.haml
+++ b/app/views/shared/dossiers/_identite_entreprise.html.haml
@@ -1,173 +1,193 @@
 - if etablissement.as_degraded_mode?
-  %table.table.vertical.dossier-champs{ role: :presentation }
-    %tbody
-      %tr
-        %td{ colspan: 2 }
-          .fr-alert.fr-alert--warning.fr-alert--sm
-            %p
-              LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
-              - if profile == "instructeur"
-                %br
-                Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
-
-
-
-      %tr
-        %td.libelle SIRET :
-        %td= etablissement.siret
+  .fr-alert.fr-alert--warning.fr-alert--sm
+    %p
+      LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
+      - if profile == "instructeur"
+        %p
+          Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
+  .fr-my-2v
+    %p.fr-text-action-high--grey.fr-mb-0 SIRET :
+    .champ-content.fr-text-action-high--grey
+      %p= etablissement.siret
 - else
-  %table.table.vertical.dossier-champs{ role: :presentation }
-    %tbody
-      - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
-        %tr
-          %td= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
-      - else
-        %tr
-          %td.libelle Dénomination :
-          %td= raison_sociale_or_name(etablissement)
-        %tr
-          %td.libelle SIRET :
-          %td #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
+  - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
+    .fr-my-2v
+      .champ-content.fr-text-action-high--grey
+        %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
+  - else
+    .fr-my-2v
+      %p.fr-text-action-high--grey.fr-mb-0 Dénomination :
+      .champ-content.fr-text-action-high--grey
+        %p= raison_sociale_or_name(etablissement)
+    .fr-my-2v
+      %p.fr-text-action-high--grey.fr-mb-0 SIRET :
+      .champ-content.fr-text-action-high--grey
+        %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
 
 
-        - unless local_assigns[:short_identity]
-          - if etablissement.siret != etablissement.entreprise.siret_siege_social
-            %tr
-              %td.libelle SIRET du siège social:
-              %td= etablissement.entreprise.siret_siege_social
-          %tr
-            %td.libelle Forme juridique :
-            %td= sanitize(etablissement.entreprise.forme_juridique)
-          %tr
-            %td.libelle Libellé NAF :
-            %td= etablissement.libelle_naf
-          %tr
-            %td.libelle Code NAF :
-            %td= etablissement.naf
-          %tr
-            %td.libelle Date de création :
-            %td
-              = try_format_date(etablissement.entreprise.date_creation)
+    - unless local_assigns[:short_identity]
+      - if etablissement.siret != etablissement.entreprise.siret_siege_social
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 SIRET du siège social:
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.entreprise.siret_siege_social
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Forme juridique :
+        .champ-content.fr-text-action-high--grey
+          %p= sanitize(etablissement.entreprise.forme_juridique)
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Libellé NAF :
+        .champ-content.fr-text-action-high--grey
+          %p= etablissement.libelle_naf
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Code NAF :
+        .champ-content.fr-text-action-high--grey
+          %p= etablissement.naf
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Date de création :
+        .champ-content.fr-text-action-high--grey
+          %p
+          = try_format_date(etablissement.entreprise.date_creation)
 
-              - if etablissement.entreprise_etat_administratif.present?
-                %span.label= humanized_entreprise_etat_administratif(etablissement)
+          - if etablissement.entreprise_etat_administratif.present?
+            %span.label= humanized_entreprise_etat_administratif(etablissement)
 
+      - if profile == 'instructeur'
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0
+            Effectif mensuel
+            = try_format_mois_effectif(etablissement)
+            (URSSAF) :
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.entreprise_effectif_mensuel
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0
+            Effectif moyen annuel
+            = etablissement.entreprise_effectif_annuel_annee
+            (URSSAF) :
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.entreprise_effectif_annuel
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Effectif de l'organisation (INSEE) :
+        .champ-content.fr-text-action-high--grey
+          %p
+          = effectif(etablissement)
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Numéro de TVA intracommunautaire :
+        .champ-content.fr-text-action-high--grey
+          %p= etablissement.entreprise.numero_tva_intracommunautaire
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Adresse :
+        .champ-content.fr-text-action-high--grey
+          %p
+          - etablissement.adresse.split("\n").each do |line|
+            = line
+            %br
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Capital social :
+        .champ-content.fr-text-action-high--grey
+          %p= pretty_currency(etablissement.entreprise.capital_social)
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Chiffre d’affaires :
+        .champ-content.fr-text-action-high--grey
+          %p
           - if profile == 'instructeur'
-            %tr
-              %td.libelle
-                Effectif mensuel
-                = try_format_mois_effectif(etablissement)
-                (URSSAF) :
-              %td= etablissement.entreprise_effectif_mensuel
-            %tr
-              %td.libelle
-                Effectif moyen annuel
-                = etablissement.entreprise_effectif_annuel_annee
-                (URSSAF) :
-              %td= etablissement.entreprise_effectif_annuel
-          %tr
-            %td.libelle Effectif de l'organisation (INSEE) :
-            %td
-              = effectif(etablissement)
-          %tr
-            %td.libelle Numéro de TVA intracommunautaire :
-            %td= etablissement.entreprise.numero_tva_intracommunautaire
-          %tr
-            %td.libelle Adresse :
-            %td
-              - etablissement.adresse.split("\n").each do |line|
-                = line
+            %details
+              - etablissement.exercices.each_with_index do |exercice, index|
+                = "#{exercice.date_fin_exercice.year} : "
+                = pretty_currency(exercice.ca)
                 %br
-          %tr
-            %td.libelle Capital social :
-            %td= pretty_currency(etablissement.entreprise.capital_social)
-          %tr
-            %td.libelle Chiffre d’affaires :
-            %td
-              - if profile == 'instructeur'
-                %details
-                  - etablissement.exercices.each_with_index do |exercice, index|
-                    = "#{exercice.date_fin_exercice.year} : "
-                    = pretty_currency(exercice.ca)
-                    %br
-              - elsif etablissement.exercices.present?
-                = t('activemodel.models.exercices_summary', count: etablissement.exercices.count)
+          - elsif etablissement.exercices.present?
+            = t('activemodel.models.exercices_summary', count: etablissement.exercices.count)
 
 
-          - if etablissement.entreprise_bilans_bdf.present?
-            - if profile == 'instructeur'
-              = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-                locals: { libelle: 'Résultat exercice', key: 'resultat_exercice', etablissement: etablissement }
+      - if etablissement.entreprise_bilans_bdf.present?
+        - if profile == 'instructeur'
+          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+            locals: { libelle: 'Résultat exercice', key: 'resultat_exercice', etablissement: etablissement }
 
-              = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-                locals: { libelle: "Excédent brut d’exploitation", key: 'excedent_brut_exploitation', etablissement: etablissement }
+          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+            locals: { libelle: "Excédent brut d’exploitation", key: 'excedent_brut_exploitation', etablissement: etablissement }
 
-              = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-                locals: { libelle: 'Fonds de roulement net global', key: 'fonds_roulement_net_global', etablissement: etablissement }
+          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+            locals: { libelle: 'Fonds de roulement net global', key: 'fonds_roulement_net_global', etablissement: etablissement }
 
-              = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
-                locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
-              %tr
-                %td.libelle
-                  Chiffres financiers clés (Banque de France)
-                  = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
+          = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
+            locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
+          .fr-my-2v
+            %p.fr-text-action-high--grey.fr-mb-0
+              Chiffres financiers clés (Banque de France)
+              = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
-                - if controller.is_a?(Instructeurs::AvisController)
-                  %td
-                    Les consulter
-                    = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
-                    ,
-                    = link_to "au format xlsx", bilans_bdf_instructeur_avis_path(@avis, format: 'xlsx')
-                    ou
-                    = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
-                - else
-                  %td
-                    Les consulter
-                    = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
-                    ,
-                    = link_to "au format xlsx", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'xlsx')
-                    ou
-                    = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
+            - if controller.is_a?(Instructeurs::AvisController)
+              .champ-content.fr-text-action-high--grey
+                %p
+                Les consulter
+                = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
+                ,
+                = link_to "au format xlsx", bilans_bdf_instructeur_avis_path(@avis, format: 'xlsx')
+                ou
+                = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
             - else
-              %tr
-                %td.libelle
-                  Bilans Banque de France :
-                %td Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
-          - if etablissement.entreprise_attestation_sociale.attached?
-            %tr
-              %td.libelle Attestation sociale :
-              - if profile == 'instructeur'
-                %td= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
-              - else
-                %td Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
+              .champ-content.fr-text-action-high--grey
+                %p
+                Les consulter
+                = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
+                ,
+                = link_to "au format xlsx", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'xlsx')
+                ou
+                = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
+        - else
+          .fr-my-2v
+            %p.fr-text-action-high--grey.fr-mb-0
+              Bilans Banque de France :
+            .champ-content.fr-text-action-high--grey
+              %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
+      - if etablissement.entreprise_attestation_sociale.attached?
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Attestation sociale :
+          - if profile == 'instructeur'
+            .champ-content.fr-text-action-high--grey
+              %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
+          - else
+            .champ-content.fr-text-action-high--grey
+              %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
-          - if etablissement.entreprise_attestation_fiscale.attached?
-            %tr
-              %td.libelle Attestation fiscale :
-              - if profile == 'instructeur'
-                %td= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
-              - else
-                %td Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
+      - if etablissement.entreprise_attestation_fiscale.attached?
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Attestation fiscale :
+          - if profile == 'instructeur'
+            .champ-content.fr-text-action-high--grey
+              %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
+          - else
+            .champ-content.fr-text-action-high--grey
+              %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
-          - if etablissement.association?
-            %tr
-              %td.libelle Numéro RNA :
-              %td= etablissement.association_rna
-            %tr
-              %td.libelle Titre :
-              %td= etablissement.association_titre
-            %tr
-              %td.libelle Objet :
-              %td= etablissement.association_objet
-            %tr
-              %td.libelle Date de création :
-              %td= try_format_date(etablissement.association_date_creation)
-            %tr
-              %td.libelle Date de publication :
-              %td= try_format_date(etablissement.association_date_publication)
-            %tr
-              %td.libelle Date de déclaration :
-              %td= try_format_date(etablissement.association_date_declaration)
+      - if etablissement.association?
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Numéro RNA :
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.association_rna
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Titre :
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.association_titre
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Objet :
+          .champ-content.fr-text-action-high--grey
+            %p= etablissement.association_objet
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Date de création :
+          .champ-content.fr-text-action-high--grey
+            %p= try_format_date(etablissement.association_date_creation)
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Date de publication :
+          .champ-content.fr-text-action-high--grey
+            %p= try_format_date(etablissement.association_date_publication)
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Date de déclaration :
+          .champ-content.fr-text-action-high--grey
+            %p= try_format_date(etablissement.association_date_declaration)
 
 - unless local_assigns[:short_identity]
   %p
diff --git a/app/views/shared/dossiers/_identite_individual.html.haml b/app/views/shared/dossiers/_identite_individual.html.haml
index d7f0f4473..8532799d4 100644
--- a/app/views/shared/dossiers/_identite_individual.html.haml
+++ b/app/views/shared/dossiers/_identite_individual.html.haml
@@ -1,19 +1,18 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
-  %tbody
-    %tr
-      %td.libelle
-        = t('views.users.dossiers.identite.civility')
-      %td= individual.gender
-    %tr
-      %td.libelle
-        = t('views.users.dossiers.identite.first_name')
-      %td= individual.prenom
-    %tr
-      %td.libelle
-        = t('views.users.dossiers.identite.last_name')
-      %td= individual.nom
-    - if individual.birthdate.present?
-      %tr
-        %td.libelle
-          = t('views.users.dossiers.identite.birthdate')
-        %td= try_format_date(individual.birthdate)
+
+.fr-my-2v
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.civility')
+  .champ-content.fr-text-action-high--grey
+    %p= individual.gender
+.fr-my-2v
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.first_name')
+  .champ-content.fr-text-action-high--grey
+    %p= individual.prenom
+.fr-my-2v
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.last_name')
+  .champ-content.fr-text-action-high--grey
+    %p= individual.nom
+- if individual.birthdate.present?
+  .fr-my-2v
+    %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.birthdate')
+    .champ-content.fr-text-action-high--grey
+      %p= try_format_date(individual.birthdate)
diff --git a/app/views/shared/dossiers/_infos_generales.html.haml b/app/views/shared/dossiers/_infos_generales.html.haml
index 4eae901fa..752ad1754 100644
--- a/app/views/shared/dossiers/_infos_generales.html.haml
+++ b/app/views/shared/dossiers/_infos_generales.html.haml
@@ -1,26 +1,26 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
-  %tbody
-    %tr
-      %td.libelle Déposé le :
-      %td= l(dossier.depose_at, format: '%d %B %Y')
+%div
+  %p.fr-my-4v.fr-px-4v.fr-text-action-high--grey
+    = l(dossier.depose_at, format: '%d %B %Y %H:%m')
+    - if dossier.updated_at != dossier.depose_at
+      = t('views.shared.dossiers.demande.updated_at', updated_at: l(dossier.updated_at, format: '%d %B %y %H:%m'))
 
   - if dossier.justificatif_motivation.attached?
-    %tr
-      %td.libelle Justificatif :
-      %td
+    .fr-my-4v.fr-px-4v
+      %p.fr-text-action-high--grey.fr-mb-0 Justificatif :
+      .champ-content.fr-text-action-high--grey
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
-    %tr
-      %td.libelle Motivation :
-      %td
+    .fr-my-4v.fr-px-4v
+      %p.fr-text-action-high--grey.fr-mb-0 Motivation :
+      .champ-content.fr-text-action-high--grey
         .action
           = dossier.motivation
 
   - if dossier.attestation.present?
-    %tr
-      %td.libelle Attestation :
-      %td
+    .fr-my-4v.fr-px-4v
+      %p.fr-text-action-high--grey.fr-mb-0 Attestation :
+      .champ-content.fr-text-action-high--grey
         .action
           = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener')
diff --git a/app/views/shared/dossiers/_user_infos.html.haml b/app/views/shared/dossiers/_user_infos.html.haml
index 06fb41b94..c52e9367d 100644
--- a/app/views/shared/dossiers/_user_infos.html.haml
+++ b/app/views/shared/dossiers/_user_infos.html.haml
@@ -1,5 +1,4 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
-  %tbody
-    %tr
-      %td.libelle Email :
-      %td= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
+.fr-my-2v
+  %p.fr-text-action-high--grey.fr-mb-0 Email :
+  .champ-content.fr-text-action-high--grey
+    %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
diff --git a/app/views/users/dossiers/demande.html.haml b/app/views/users/dossiers/demande.html.haml
index 9f969420b..ab42fc52d 100644
--- a/app/views/users/dossiers/demande.html.haml
+++ b/app/views/users/dossiers/demande.html.haml
@@ -14,6 +14,7 @@
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
 
+
   .container
     - if !@dossier.read_only?
       = 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"
diff --git a/app/views/users/dossiers/show/_header.html.haml b/app/views/users/dossiers/show/_header.html.haml
index e5544c01a..4ec22aa40 100644
--- a/app/views/users/dossiers/show/_header.html.haml
+++ b/app/views/users/dossiers/show/_header.html.haml
@@ -18,7 +18,7 @@
         = render partial: 'invites/dropdown', locals: { dossier: dossier, morphing: false }
         - if dossier.can_be_updated_by_user? && !current_page?(modifier_dossier_path(dossier))
           = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'fr-btn fr-btn-sm',
-            title: { label: t('views.users.dossiers.show.header.edit_dossier_title') }
+            title: t('views.users.dossiers.show.header.edit_dossier_title')
         = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
 
     %nav.tabs
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e23626a0f..8daf00e0b 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -341,6 +341,8 @@ en:
             write_message_placeholder: "Write your message here"
             write_message_to_administration_placeholder: "Write your message to the administration here"
         demande:
+          en_construction: "File submission date"
+          updated_at: "updated at %{updated_at}"
           requester_identity: "Identity of the requester"
           my_identity: "My identity"
           form: "Form"
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 57a1ee46d..c44f09dc2 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -341,9 +341,11 @@ fr:
             write_message_placeholder: "Écrivez votre message ici"
             write_message_to_administration_placeholder: "Écrivez votre message à l’administration ici"
         demande:
+          en_construction: "Date de dépôt du dossier"
+          updated_at: "mis à jour le %{updated_at}"
           requester_identity: "Identité du demandeur"
           my_identity: "Mon identité"
-          form: "Formulaire"
+          form: "Sections du formulaire"
           edit_siret: "Modifier le SIRET"
           edit_identity: "Modifier l’identité"
     instructeurs:
diff --git a/spec/views/shared/dossiers/_champs.html.haml_spec.rb b/spec/views/shared/dossiers/_champs.html.haml_spec.rb
index bcf3ae719..1737cd6e9 100644
--- a/spec/views/shared/dossiers/_champs.html.haml_spec.rb
+++ b/spec/views/shared/dossiers/_champs.html.haml_spec.rb
@@ -108,7 +108,7 @@ describe 'shared/dossiers/champs', type: :view do
     let(:champ) { create(:champ_dossier_link, dossier: dossier, value: nil) }
     let(:champs) { [champ] }
 
-    it { is_expected.to include("Pas de dossier associé") }
+    it { is_expected.to include("non saisi (facultatif)") }
   end
 
   context "with seen_at" do