From c7c46c9dffa7c9608dbf5d63958d6336c277ebf9 Mon Sep 17 00:00:00 2001
From: Martin <martin@sharypic.com>
Date: Fri, 14 Oct 2022 16:55:29 +0200
Subject: [PATCH] design(page de configuration de procedure): passage de la
 grille au DSFR

---
 app/assets/stylesheets/card_admin.scss        | 63 +------------------
 app/assets/stylesheets/procedure_admin.scss   | 15 -----
 .../administrateurs_component.html.haml       | 22 ++++---
 .../annotations_component.html.haml           | 38 +++++------
 .../api_entreprise_component.html.haml        | 25 ++++----
 .../api_particulier_component.html.haml       | 25 ++++----
 .../attestation_component.html.haml           | 25 ++++----
 .../champs_component.html.haml                | 39 ++++++------
 ...sier_submitted_message_component.html.haml | 25 ++++----
 .../emails_component.html.haml                | 17 ++---
 .../experts_component.html.haml               | 17 ++---
 .../instructeurs_component.html.haml          | 36 ++++++-----
 .../modifications_component.html.haml         | 21 ++++---
 .../mon_avis_component.html.haml              | 25 ++++----
 .../presentation_component.html.haml          | 17 ++---
 .../service_component.html.haml               | 33 +++++-----
 .../zones_component/zones_component.html.haml | 25 ++++----
 app/javascript/entrypoints/main.css           |  1 +
 .../administrateurs/_breadcrumbs.html.haml    |  2 +-
 .../api_particulier.html.haml                 | 10 +--
 .../administrateurs/procedures/show.html.haml | 38 +++++------
 .../locales/views/layouts/_breadcrumb.en.yml  |  2 +-
 .../locales/views/layouts/_breadcrumb.fr.yml  |  2 +-
 .../procedure_attestation_template_spec.rb    |  2 +-
 .../administrateurs/procedure_cloning_spec.rb |  2 +-
 .../procedure_creation_spec.rb                |  2 +-
 26 files changed, 238 insertions(+), 291 deletions(-)

diff --git a/app/assets/stylesheets/card_admin.scss b/app/assets/stylesheets/card_admin.scss
index 5d09b7cbb..8f678d3aa 100644
--- a/app/assets/stylesheets/card_admin.scss
+++ b/app/assets/stylesheets/card_admin.scss
@@ -1,65 +1,6 @@
 @import "colors";
 @import "constants";
 
-.card-admin {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 236px;
-  height: 200px;
-  border-radius: 4px;
-  border: solid 1px $border-grey;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 20px;
-  margin-right: 20px;
-
-  .card-admin-status-accept {
-    color: #50AA75;
-  }
-
-  .card-admin-status-todo {
-    color: $blue-france-500;
-  }
-
-  .card-admin-status-error {
-    color: $light-red;
-  }
-
-  .card-admin-title {
-    font-weight: bold;
-    font-size: 18px;
-    margin-bottom: $default-spacer;
-  }
-
-  .card-admin-subtitle {
-    font-size: 14px;
-  }
-
-  .card-admin-action {
-    margin-top: auto;
-  }
-
-  .button {
-    margin: auto auto 0 auto;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  &:hover {
-    color: $blue-france-500;
-
-    .button {
-      color: $blue-france-500;
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .card-admin {
-    margin-left: auto;
-    margin-right: auto;
-  }
+.fr-tile-subtitle {
+  min-height: 7rem;
 }
diff --git a/app/assets/stylesheets/procedure_admin.scss b/app/assets/stylesheets/procedure_admin.scss
index 40f6ea0dc..3d3935507 100644
--- a/app/assets/stylesheets/procedure_admin.scss
+++ b/app/assets/stylesheets/procedure_admin.scss
@@ -1,12 +1,3 @@
-.procedure-grid {
-  display: flex;
-  flex-wrap: wrap;
-
-  > a { // TODO, re-use DSFR https://github.com/betagouv/demarches-simplifiees.fr/issues/7884
-    background-image: none; // remove DSFR underline
-  }
-}
-
 .procedure-admin-container {
   display: flex;
   justify-content: flex-end;
@@ -38,12 +29,6 @@
   }
 }
 
-.procedure-admin-explanation {
-  font-weight: bold;
-  font-size: 20px;
-  margin-bottom: 20px;
-}
-
 .admin-metadata {
   margin-top: -8px;
   margin-bottom: 8px;
diff --git a/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml b/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml
index 579171381..dd7a6d608 100644
--- a/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml
+++ b/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml
@@ -1,10 +1,12 @@
-= link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'card-admin' do
-  %div
-    %span.icon.accept
-    %p.card-admin-status-accept Validé
-  %div
-    %p.card-admin-title
-      %span.badge.baseline= @procedure.administrateurs.size
-      = t('.title', count: @procedure.administrateurs.size)
-    %p.card-admin-subtitle Gestion de la démarche
-  %p.button= t('views.shared.actions.edit')
+= link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    %div
+      %span.icon.accept
+      %p.fr-tile-status-accept Validé
+    %div
+      .line-count.fr-my-1w
+        %p.fr-tag= @procedure.administrateurs.size
+      %h3.fr-h6
+        = t('.title', count: @procedure.administrateurs.size)
+      %p.fr-tile-subtitle Gestion de la démarche
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/annotations_component/annotations_component.html.haml b/app/components/procedure/card/annotations_component/annotations_component.html.haml
index 773af75f9..fb4a62f75 100644
--- a/app/components/procedure/card/annotations_component/annotations_component.html.haml
+++ b/app/components/procedure/card/annotations_component/annotations_component.html.haml
@@ -1,19 +1,21 @@
-= link_to annotations_admin_procedure_path(@procedure), class: 'card-admin', title: error_messages do
-  - if error_messages.present?
+= link_to annotations_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link', title: error_messages do
+  .fr-tile__body.flex.justify-between
+    - if error_messages.present?
+      %div
+        %span.icon.refuse
+        %p.fr-tile-status-error À modifier
+    - elsif @count == 0
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À configurer
+    - else
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
     %div
-      %span.icon.refuse
-      %p.card-admin-status-error À modifier
-  - elsif @count == 0
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À configurer
-  - else
-    %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  %div
-    %p.card-admin-title
-      %span.badge.baseline= @count
-      = t('.title')
-    %p.card-admin-subtitle Champs à remplir par l’administration
-  %p.button= t('views.shared.actions.edit')
+      .line-count.fr-my-1w
+        %p.fr-tag= @count
+      %h3.fr-h6
+        = t('.title')
+      %p.fr-tile-subtitle Champs à remplir par l’administration
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml b/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml
index 3a5990cb6..61f4fba1c 100644
--- a/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml
+++ b/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml
@@ -1,13 +1,14 @@
-= link_to jeton_admin_procedure_path(@procedure), class: 'card-admin' do
-  - if @procedure.api_entreprise_token.present?
+= link_to jeton_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.api_entreprise_token.present?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À configurer
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À configurer
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Configurer le jeton API entreprise
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Configurer le jeton API entreprise
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml b/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml
index a85788ea4..ec407cc7c 100644
--- a/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml
+++ b/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml
@@ -1,13 +1,14 @@
-= link_to admin_procedure_api_particulier_path(@procedure), class: 'card-admin', id: 'api-particulier' do
-  - if @procedure.api_particulier_token.present?
+= link_to admin_procedure_api_particulier_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'api-particulier' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.api_particulier_token.present?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept= t('.ready')
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo= t('.needs_configuration')
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept= t('.ready')
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo= t('.needs_configuration')
-  %div
-    %p.card-admin-title= Procedure.human_attribute_name(:api_particulier_token)
-    %p.card-admin-subtitle= t('.configure_api_particulier_token')
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= Procedure.human_attribute_name(:api_particulier_token)
+      %p.fr-tile-subtitle= t('.configure_api_particulier_token')
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/attestation_component/attestation_component.html.haml b/app/components/procedure/card/attestation_component/attestation_component.html.haml
index a3e72617f..c2b745642 100644
--- a/app/components/procedure/card/attestation_component/attestation_component.html.haml
+++ b/app/components/procedure/card/attestation_component/attestation_component.html.haml
@@ -1,13 +1,14 @@
-= link_to edit_admin_procedure_attestation_template_path(@procedure), class: 'card-admin' do
-  - if @procedure.draft_attestation_template&.activated?
+= link_to edit_admin_procedure_attestation_template_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.draft_attestation_template&.activated?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Activée
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo Désactivée
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Activée
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo Désactivée
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Délivrance automatique pour les dossiers acceptés
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Délivrance automatique pour les dossiers acceptés
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/champs_component/champs_component.html.haml b/app/components/procedure/card/champs_component/champs_component.html.haml
index f2294d899..344afb99b 100644
--- a/app/components/procedure/card/champs_component/champs_component.html.haml
+++ b/app/components/procedure/card/champs_component/champs_component.html.haml
@@ -1,19 +1,22 @@
-= link_to champs_admin_procedure_path(@procedure), class: 'card-admin', title: error_messages do
-  - if error_messages.present?
+= link_to champs_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link', title: error_messages do
+  .fr-tile__body.flex.justify-between
+    - if error_messages.present?
+      %div
+        %span.icon.refuse
+        %p.fr-tile-status-error À modifier
+    - elsif @count == 0
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À faire
+    - else
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
     %div
-      %span.icon.refuse
-      %p.card-admin-status-error À modifier
-  - elsif @count == 0
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À faire
-  - else
-    %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  %div
-    %p.card-admin-title
-      %span.badge.baseline= @count
-      = t('.title')
-    %p.card-admin-subtitle À remplir par les usagers
-  %p.button= t('views.shared.actions.edit')
+      .line-count.fr-my-1w
+        %p.fr-tag= @count
+
+      %h3.fr-h6
+        = t('.title')
+      %p.fr-tile-subtitle À remplir par les usagers
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml b/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml
index 5fe71033b..fb43b3184 100644
--- a/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml
+++ b/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml
@@ -1,13 +1,14 @@
-= link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'card-admin' do
-  - if @procedure.active_dossier_submitted_message.present?
+= link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.active_dossier_submitted_message.present?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À configurer
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À configurer
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Orienter l'usager suite à l'envoi de son dossier
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Orienter l'usager suite à l'envoi de son dossier
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/emails_component/emails_component.html.haml b/app/components/procedure/card/emails_component/emails_component.html.haml
index e95f413ad..b9fc4344d 100644
--- a/app/components/procedure/card/emails_component/emails_component.html.haml
+++ b/app/components/procedure/card/emails_component/emails_component.html.haml
@@ -1,8 +1,9 @@
-= link_to admin_procedure_mail_templates_path(@procedure), class: 'card-admin' do
-  %div
-    %span.icon.clock
-    %p.card-admin-status-todo À configurer
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Notifications automatiques
-  %p.button= t('views.shared.actions.edit')
+= link_to admin_procedure_mail_templates_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    %div
+      %span.icon.clock
+      %p.fr-tile-status-todo À configurer
+    %div
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Notifications automatiques
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/experts_component/experts_component.html.haml b/app/components/procedure/card/experts_component/experts_component.html.haml
index ec588a01b..e0a9f1a9d 100644
--- a/app/components/procedure/card/experts_component/experts_component.html.haml
+++ b/app/components/procedure/card/experts_component/experts_component.html.haml
@@ -1,8 +1,9 @@
-= link_to admin_procedure_experts_path(@procedure), class: 'card-admin' do
-  %div
-    %span.icon.preview
-    %p.card-admin-status-todo À configurer
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Gérer les avis des experts invités
-  %p.button= t('views.shared.actions.edit')
+= link_to admin_procedure_experts_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    %div
+      %span.icon.preview
+      %p.fr-tile-status-todo À configurer
+    %div
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Gérer les avis des experts invités
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml b/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml
index adc51e793..35eb073bc 100644
--- a/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml
+++ b/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml
@@ -1,19 +1,21 @@
-= link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'card-admin' do
-  - if @procedure.routee? || @procedure.instructeurs.size > 1
+= link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.routee? || @procedure.instructeurs.size > 1
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À faire
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À faire
-  %div
-    %p.card-admin-title
-      - if @procedure.routee?
-        %span.badge.baseline= @procedure.groupe_instructeurs.size
-      - else
-        %span.badge.baseline= @procedure.instructeurs.size
+      .line-count.fr-my-1w
+        - if @procedure.routee?
+          %p.fr-tag= @procedure.groupe_instructeurs.size
+        - else
+          %p.fr-tag= @procedure.instructeurs.size
 
-      = @procedure.routee? ? t('.routee.title', count: @procedure.groupe_instructeurs.size) : t('.title', count: @procedure.instructeurs.size)
-    %p.card-admin-subtitle Suivi des dossiers
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6
+        = @procedure.routee? ? t('.routee.title', count: @procedure.groupe_instructeurs.size) : t('.title', count: @procedure.instructeurs.size)
+      %p.fr-tile-subtitle Suivi des dossiers
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/modifications_component/modifications_component.html.haml b/app/components/procedure/card/modifications_component/modifications_component.html.haml
index fae8f9670..851569afc 100644
--- a/app/components/procedure/card/modifications_component/modifications_component.html.haml
+++ b/app/components/procedure/card/modifications_component/modifications_component.html.haml
@@ -1,11 +1,12 @@
-= link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'card-admin' do
-  %div
-    %span.icon.accept
-    %p.card-admin-status-accept Activée
-  %div
-    %p.card-admin-title
-      %span.badge.baseline= @procedure.revisions_count
-      = t('.title', count: @procedure.revisions_count)
+= link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    %div
+      %span.icon.accept
+      %p.fr-tile-status-accept Activée
+    %div
+      %h3.fr-h6.fr-mt-10v
+        %p.fr-tag= @procedure.revisions_count
+        = t('.title', count: @procedure.revisions_count)
 
-    %p.card-admin-subtitle Historique des modifications du formulaire
-  %p.button Voir
+      %p.fr-tile-subtitle Historique des modifications du formulaire
+    %p.fr-btn.fr-btn--tertiary Voir
diff --git a/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml b/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml
index 862836c23..0db3cf3b9 100644
--- a/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml
+++ b/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml
@@ -1,13 +1,14 @@
-= link_to monavis_admin_procedure_path(@procedure), class: 'card-admin' do
-  - if @procedure.monavis_embed.present?
+= link_to monavis_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.monavis_embed.present?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À configurer
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À configurer
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Avis des usagers sur votre démarche
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Avis des usagers sur votre démarche
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/presentation_component/presentation_component.html.haml b/app/components/procedure/card/presentation_component/presentation_component.html.haml
index a198d6bd0..75af0d615 100644
--- a/app/components/procedure/card/presentation_component/presentation_component.html.haml
+++ b/app/components/procedure/card/presentation_component/presentation_component.html.haml
@@ -1,8 +1,9 @@
-= link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'card-admin' do
-  %div
-    %span.icon.accept
-    %p.card-admin-status-accept Validé
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Logo, nom, description
-  %p.button= t('views.shared.actions.edit')
+= link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    %div
+      %span.icon.accept
+      %p.fr-tile-status-accept Validé
+    %div
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Logo, nom, description
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/components/procedure/card/service_component/service_component.html.haml b/app/components/procedure/card/service_component/service_component.html.haml
index ff9fe2edd..a02757190 100644
--- a/app/components/procedure/card/service_component/service_component.html.haml
+++ b/app/components/procedure/card/service_component/service_component.html.haml
@@ -1,17 +1,18 @@
-= link_to service_link, class: 'card-admin', id: 'service' do
-  - if @procedure.service_id.present?
+= link_to service_link, class: 'fr-tile fr-enlarge-link', id: 'service' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.service_id.present?
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À faire
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À faire
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle
-      - if @procedure.service_id.present?
-        = @procedure.service.nom
-      - else
-        Choix du service administratif
-  %p.button= service_button_text
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle
+        - if @procedure.service_id.present?
+          = @procedure.service.nom
+        - else
+          Choix du service administratif
+    %p.fr-btn.fr-btn--tertiary= service_button_text
diff --git a/app/components/procedure/card/zones_component/zones_component.html.haml b/app/components/procedure/card/zones_component/zones_component.html.haml
index 6cb79e58f..0e48fb4e6 100644
--- a/app/components/procedure/card/zones_component/zones_component.html.haml
+++ b/app/components/procedure/card/zones_component/zones_component.html.haml
@@ -1,13 +1,14 @@
-= link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'card-admin' do
-  - if @procedure.zones.size >= 1
+= link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
+    - if @procedure.zones.size >= 1
+      %div
+        %span.icon.accept
+        %p.fr-tile-status-accept Validé
+    - else
+      %div
+        %span.icon.clock
+        %p.fr-tile-status-todo À faire
     %div
-      %span.icon.accept
-      %p.card-admin-status-accept Validé
-  - else
-    %div
-      %span.icon.clock
-      %p.card-admin-status-todo À faire
-  %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle= t('.subtitle')
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle= t('.subtitle')
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')
diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css
index 94e208363..5d26a636b 100644
--- a/app/javascript/entrypoints/main.css
+++ b/app/javascript/entrypoints/main.css
@@ -21,6 +21,7 @@
 @import '@gouvfr/dsfr/dist/component/navigation/navigation.css';
 @import '@gouvfr/dsfr/dist/component/notice/notice.css';
 @import '@gouvfr/dsfr/dist/component/table/table.css';
+@import '@gouvfr/dsfr/dist/component/tile/tile.css';
 @import '@gouvfr/dsfr/dist/component/tag/tag.css';
 @import '@gouvfr/dsfr/dist/component/card/card.css';
 @import '@gouvfr/dsfr/dist/component/header/header.css';
diff --git a/app/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml
index 80c59b2c5..e3a97c9d2 100644
--- a/app/views/administrateurs/_breadcrumbs.html.haml
+++ b/app/views/administrateurs/_breadcrumbs.html.haml
@@ -22,7 +22,7 @@
 
     - if defined?(metadatas)
       .metadatas.pb-3
-        %p.fr-h1.fr-mb-0= t('created_at', scope: [:layouts, :breadcrumb], number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'))
+        %h1.fr-h6.fr-mb-0= t('created_at', scope: [:layouts, :breadcrumb], number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'))
         - if @procedure.close?
           %p.fr-h2= t('closed_at', scope: [:layouts, :breadcrumb], date: @procedure.closed_at.strftime('%d/%m/%Y'))
         %p
diff --git a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
index 17929aaa1..65b209440 100644
--- a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
+++ b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
@@ -9,13 +9,13 @@
       - if @procedure.api_particulier_token.blank?
         %div
           %span.icon.clock
-          %p.card-admin-status-todo= t('.needs_configuration')
+          %p.fr-text-default--info= t('.needs_configuration')
       - else
         %div
           %span.icon.accept
-          %p.card-admin-status-accept= t('.already_configured')
+          %p.fr-text-default--success= t('.already_configured')
       %div
-        %p.card-admin-title
+        %h3.fr-h6
           = Procedure.human_attribute_name(:jeton_api_particulier)
       %p.button= t('views.shared.actions.edit')
 
@@ -24,11 +24,11 @@
         - if @procedure.api_particulier_token.blank?
           %div
             %span.icon.clock
-            %p.card-admin-status-todo= t('.needs_configuration')
+            %p.fr-text-default--info= t('.needs_configuration')
         - else
           %div
             %span.icon.accept
-            %p.card-admin-status-accept= t('.already_configured')
+            %p.fr-text-default--success= t('.already_configured')
         %div
           %p.card-admin-title= t('administrateurs.sources_particulier.show.data_sources')
         %p.button= t('views.shared.actions.edit')
diff --git a/app/views/administrateurs/procedures/show.html.haml b/app/views/administrateurs/procedures/show.html.haml
index 4e443df92..91b660170 100644
--- a/app/views/administrateurs/procedures/show.html.haml
+++ b/app/views/administrateurs/procedures/show.html.haml
@@ -55,24 +55,24 @@
 - if !@procedure.procedure_expires_when_termine_enabled?
   = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
 .container
-  %h2.procedure-admin-explanation Indispensable avant publication
-  .procedure-grid
-    = render Procedure::Card::PresentationComponent.new(procedure: @procedure)
-    = render Procedure::Card::ZonesComponent.new(procedure: @procedure) if @procedure.feature_enabled?(:zonage)
-    = render Procedure::Card::ChampsComponent.new(procedure: @procedure)
-    = render Procedure::Card::ServiceComponent.new(procedure: @procedure, administrateur: current_administrateur)
-    = render Procedure::Card::AdministrateursComponent.new(procedure: @procedure)
-    = render Procedure::Card::InstructeursComponent.new(procedure: @procedure)
-    = render Procedure::Card::ModificationsComponent.new(procedure: @procedure)
+  %h2.fr-mt-5w.fr-mb-3w.fr-h1 Indispensable avant publication
+  .fr-grid-row.fr-grid-row--gutters
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::PresentationComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ZonesComponent.new(procedure: @procedure) if @procedure.feature_enabled?(:zonage)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ChampsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ServiceComponent.new(procedure: @procedure, administrateur: current_administrateur)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AdministrateursComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::InstructeursComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ModificationsComponent.new(procedure: @procedure)
 
-  %h2.procedure-admin-explanation Pour aller plus loin
-  .procedure-grid
-    = render Procedure::Card::AttestationComponent.new(procedure: @procedure)
-    = render Procedure::Card::ExpertsComponent.new(procedure: @procedure)
-    = render Procedure::Card::EmailsComponent.new(procedure: @procedure)
-    = render Procedure::Card::AnnotationsComponent.new(procedure: @procedure)
-    = render Procedure::Card::APIEntrepriseComponent.new(procedure: @procedure)
-    = render Procedure::Card::APIParticulierComponent.new(procedure: @procedure)
-    = render Procedure::Card::MonAvisComponent.new(procedure: @procedure)
-    = render Procedure::Card::DossierSubmittedMessageComponent.new(procedure: @procedure)
+  %h2.fr-mt-5w.fr-mb-3w.fr-h1 Pour aller plus loin
+  .fr-grid-row.fr-grid-row--gutters
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AttestationComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ExpertsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::EmailsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AnnotationsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::APIEntrepriseComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::APIParticulierComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::MonAvisComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::DossierSubmittedMessageComponent.new(procedure: @procedure)
 
diff --git a/config/locales/views/layouts/_breadcrumb.en.yml b/config/locales/views/layouts/_breadcrumb.en.yml
index dfd8fdf86..61c5e6746 100644
--- a/config/locales/views/layouts/_breadcrumb.en.yml
+++ b/config/locales/views/layouts/_breadcrumb.en.yml
@@ -7,7 +7,7 @@ en:
       preview: "Preview the form"
       continue: "Continue"
       continue_title: "You can comeback using this link"
-      created_at: "Created at %{date} - n° %{number}"
+      created_at: "Procedure n° %{number} created at %{date}"
       closed_at: "Closed at %{date}"
       published: "Published"
       draft: "Draft"
diff --git a/config/locales/views/layouts/_breadcrumb.fr.yml b/config/locales/views/layouts/_breadcrumb.fr.yml
index 9febfe3fc..605fae51a 100644
--- a/config/locales/views/layouts/_breadcrumb.fr.yml
+++ b/config/locales/views/layouts/_breadcrumb.fr.yml
@@ -7,7 +7,7 @@ fr:
       preview: "Prévisualiser le formulaire"
       continue: "Continuer"
       continue_title: "Vous pourrez revenir ici par la suite"
-      created_at: "Créée le %{date} - n° %{number}"
+      created_at: "Démarche n° %{number}, créée le %{date}"
       closed_at: "Close le %{date}"
       published: "Publiée – "
       draft: "Brouillon"
diff --git a/spec/system/administrateurs/procedure_attestation_template_spec.rb b/spec/system/administrateurs/procedure_attestation_template_spec.rb
index 5ea1d6ca7..5d5e3bda5 100644
--- a/spec/system/administrateurs/procedure_attestation_template_spec.rb
+++ b/spec/system/administrateurs/procedure_attestation_template_spec.rb
@@ -15,7 +15,7 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
 
   def find_attestation_card(with_nested_selector: nil)
     full_selector = [
-      ".card-admin[href=\"#{edit_admin_procedure_attestation_template_path(procedure)}\"]",
+      "a[href=\"#{edit_admin_procedure_attestation_template_path(procedure)}\"]",
       with_nested_selector
     ].compact.join(" ")
     page.find(full_selector)
diff --git a/spec/system/administrateurs/procedure_cloning_spec.rb b/spec/system/administrateurs/procedure_cloning_spec.rb
index 569481a3c..afba00816 100644
--- a/spec/system/administrateurs/procedure_cloning_spec.rb
+++ b/spec/system/administrateurs/procedure_cloning_spec.rb
@@ -26,7 +26,7 @@ describe 'As an administrateur I wanna clone a procedure', js: true do
       expect(page).to have_current_path(admin_procedure_path(id: Procedure.last))
 
       # select service
-      find("#service .button").click
+      find("#service .fr-btn").click
       click_on "Assigner"
 
       # then publish
diff --git a/spec/system/administrateurs/procedure_creation_spec.rb b/spec/system/administrateurs/procedure_creation_spec.rb
index 2b42e580e..cdea2f51b 100644
--- a/spec/system/administrateurs/procedure_creation_spec.rb
+++ b/spec/system/administrateurs/procedure_creation_spec.rb
@@ -64,7 +64,7 @@ describe 'Creating a new procedure', js: true do
       click_link procedure.libelle
       expect(page).to have_current_path(admin_procedure_path(procedure))
 
-      champs_card = find('.card-admin', text: 'Champs du formulaire')
+      champs_card = find('.fr-tile', text: 'Champs du formulaire')
       expect(champs_card).to have_selector('.icon.refuse')
       expect(champs_card).to have_content('À modifier')
     end