From baa7a1b227cc85a8f8ae12d0fa38ba6d7cf5ba84 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Thu, 31 Oct 2024 14:26:47 +0100
Subject: [PATCH 1/9] Modifie les locales

---
 .../locales/views/instructeurs/header/en.yml  |  2 +-
 .../locales/views/instructeurs/header/fr.yml  | 19 ++++++++++++++-----
 .../procedures/email_notifications/fr.yml     |  2 +-
 .../views/instructeurs/procedures/en.yml      |  5 +----
 .../views/instructeurs/procedures/fr.yml      |  6 ++----
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/config/locales/views/instructeurs/header/en.yml b/config/locales/views/instructeurs/header/en.yml
index ad343adb4..46f4ee9b2 100644
--- a/config/locales/views/instructeurs/header/en.yml
+++ b/config/locales/views/instructeurs/header/en.yml
@@ -16,4 +16,4 @@ en:
           exports_notification_label: A new export is ready to download
           statistics: statistics
           instructeurs: instructors
-          contact_users: contact users (draft)
+          contact_users: Contact users with a draft file
diff --git a/config/locales/views/instructeurs/header/fr.yml b/config/locales/views/instructeurs/header/fr.yml
index 46b2d77c1..d3b7e4fbe 100644
--- a/config/locales/views/instructeurs/header/fr.yml
+++ b/config/locales/views/instructeurs/header/fr.yml
@@ -12,9 +12,18 @@ fr:
             termine: Le traitement de ce dossier est terminé, mais il va bientôt être supprimé. Si vous souhaitez en conserver une trace, vous pouvez le télécharger au format PDF.
           button_delay_expiration: "Conserver un mois de plus"
           notification_management: Gestion des notifications
-          administrators_list: Voir les administrateurs
-          exports_list: Voir les exports et modèles d'export
+          follow_up: Suivi des dossiers
+          procedure_management: Gestion de la démarche
+          administrators_list: Administrateurs de la démarche
+          exports_list: Liste des exports
+          exports_models: Modèles d'exports
           exports_notification_label: Un nouvel export est prêt à être téléchargé
-          statistics: Statistiques
-          instructeurs: instructeurs
-          contact_users: Contacter les usagers (brouillon)
+          statistics: Statistiques de la démarche
+          user_support: Accompagnement des usagers
+          instructeurs: Gestion des instructeurs
+          contact_users: Contacter les usagers avec un dossier "brouillon"
+          preview: Prévisualiser le formulaire
+          copy_link_button: Copier le lien usager de la démarche
+          downloads: Téléchargements
+          archives: Téléchargement mensuel
+          procedure_navigation: "Navigation dans la démarche"
diff --git a/config/locales/views/instructeurs/procedures/email_notifications/fr.yml b/config/locales/views/instructeurs/procedures/email_notifications/fr.yml
index 8a98dbbb7..5a1d662d2 100644
--- a/config/locales/views/instructeurs/procedures/email_notifications/fr.yml
+++ b/config/locales/views/instructeurs/procedures/email_notifications/fr.yml
@@ -5,7 +5,7 @@ fr:
         utils:
           positive: Oui
           negative: Non
-        title: Notifications par email
+        title: Gestion des notifications
         subtitle: Configurez sur cette page les notifications que vous souhaitez recevoir par email pour cette démarche.
         for_each_file_submitted:
           title: Recevoir une notification à chaque dossier déposé
diff --git a/config/locales/views/instructeurs/procedures/en.yml b/config/locales/views/instructeurs/procedures/en.yml
index bc3536ab4..6f57ac768 100644
--- a/config/locales/views/instructeurs/procedures/en.yml
+++ b/config/locales/views/instructeurs/procedures/en.yml
@@ -14,14 +14,11 @@ en:
         dossiers_supprimes: recently deleted
         copy_link_button: Copy the procedure link to clipboard
       email_usagers:
-        contact_users: Contact users (draft)
         hint:
           zero: "There is no user with a draft."
           one: "You will send a message to <strong>1</strong> user."
           other: "You will send a message to <strong>%{count}</strong> users."
       administrators_list:
-        title: "%{procedure_libelle} - n°%{procedure_id} - administrators"
-      stats:
-        title: Statistics
+        title: Procedure administrators
       exports:
         title: Exports
diff --git a/config/locales/views/instructeurs/procedures/fr.yml b/config/locales/views/instructeurs/procedures/fr.yml
index 08d0d2fd2..3203fa4f3 100644
--- a/config/locales/views/instructeurs/procedures/fr.yml
+++ b/config/locales/views/instructeurs/procedures/fr.yml
@@ -14,12 +14,10 @@ fr:
         dossiers_supprimes: supprimés
         copy_link_button: Copier le lien de la démarche dans le presse-papiers
       email_usagers:
-        contact_users: Contacter les usagers (brouillon)
         hint:
           zero: "Aucun usager n'a de dossier en brouillon."
           one: "Vous allez envoyer un message à <strong>1</strong> usager ayant un dossier en brouillon."
           other: "Vous allez envoyer un message à <strong>%{count}</strong> usagers ayant un dossier en brouillon."
       administrators_list:
-        title: "%{procedure_libelle} - n°%{procedure_id} - administrateurs"
-      stats:
-        title: Statistiques
+        title: Administrateurs de la démarche
+

From e3473fbe9147ee59c6224aee6488943520100422 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Thu, 31 Oct 2024 14:28:14 +0100
Subject: [PATCH 2/9] Ajout des dropdowns dans l'interface instructeur pour une
 meilleure navigation

---
 app/assets/stylesheets/02_utils.scss          |  4 +
 .../instructeurs/archives/index.html.haml     | 13 +++-
 .../groupe_instructeurs/index.html.haml       |  9 ++-
 .../instructeurs/procedures/_header.html.haml | 77 +++++++++++--------
 .../procedures/administrateurs.html.haml      |  7 +-
 .../procedures/deleted_dossiers.html.haml     | 10 +--
 .../procedures/email_notifications.html.haml  |  8 +-
 .../procedures/email_usagers.html.haml        | 10 ++-
 .../instructeurs/procedures/exports.html.haml | 11 ++-
 .../instructeurs/procedures/show.html.haml    |  3 -
 .../instructeurs/procedures/stats.html.haml   |  9 ++-
 11 files changed, 96 insertions(+), 65 deletions(-)

diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss
index 3d5ae5a13..df1f8c4ee 100644
--- a/app/assets/stylesheets/02_utils.scss
+++ b/app/assets/stylesheets/02_utils.scss
@@ -85,6 +85,10 @@
   position: relative;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .sticky {
   position: sticky;
   top: 2em;
diff --git a/app/views/instructeurs/archives/index.html.haml b/app/views/instructeurs/archives/index.html.haml
index d6cc4a63b..b04375126 100644
--- a/app/views/instructeurs/archives/index.html.haml
+++ b/app/views/instructeurs/archives/index.html.haml
@@ -1,11 +1,16 @@
 - content_for(:title, "Archives pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    ['Archives']] }
+-# = render partial: 'administrateurs/breadcrumbs',
+-#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+-#                     ['Archives']] }
+
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .container
-  %h1.mb-2 Archives
+  %h1.mb-2 Téléchargement mensuel
 
   = render partial: "shared/archives/notice"
   = render partial: "shared/archives/table", locals: {count_dossiers_termines_by_month: @count_dossiers_termines_by_month, archives: @archives, average_dossier_weight: @average_dossier_weight, procedure: @procedure }
diff --git a/app/views/instructeurs/groupe_instructeurs/index.html.haml b/app/views/instructeurs/groupe_instructeurs/index.html.haml
index 64b986960..3eeefd1ed 100644
--- a/app/views/instructeurs/groupe_instructeurs/index.html.haml
+++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml
@@ -1,11 +1,12 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    ['Groupes d’instructeurs']] }
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .fr-container.groupe-instructeur
-  %h1 Gestion des Groupes
+  %h1 Gestion des instructeurs
   .card
     %h2.fr-h3 Liste des groupes
     %table.table.mt-2
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index 99ee79e51..44868b6f2 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -1,36 +1,51 @@
 .procedure-header
-  .flex.clipboard-container
+  .clipboard-container
     %h1.fr-h3
-      = "#{procedure_libelle procedure} - n°#{procedure.id}"
-    = render Dsfr::CopyButtonComponent.new(title: t('instructeurs.procedures.index.copy_link_button'), text: commencer_url(procedure.path))
-  = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'header-link'
-  |
-  = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'header-link'
+      = "#{procedure_libelle procedure} (n°#{procedure.id})"
+  %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') }
+    .fr-nav__item
+      = link_to instructeur_procedure_path(procedure), class: "account-btn fr-btn fr-btn--tertiary fr-btn--no-border", style: "box-shadow: none; background: none;" do
+        %span.fr-mr-1w= t('instructeurs.dossiers.header.banner.follow_up')
+    .fr-nav__item.relative
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+        = t('instructeurs.dossiers.header.banner.procedure_management')
+      #procedure-management.fr-collapse.fr-menu.absolute
+        %ul.fr-menu__list
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
 
-  - if current_administrateur&.owns?(procedure)
-    |
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class: 'header-link'
-  - elsif procedure.instructeurs_self_management? && procedure.routing_enabled?
-    |
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'header-link'
-  - elsif procedure.instructeurs_self_management?
-    |
-    = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupe_path(procedure, procedure.defaut_groupe_instructeur), class: 'header-link'
+    .fr-nav__item.relative
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+        = t('instructeurs.dossiers.header.banner.user_support')
+      #user-support.fr-collapse.fr-menu.absolute
+        %ul.fr-menu__list
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.preview'), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-nav__link'
+          %li
+            = link_to "#", class: "fr-nav__link fr-link fr-link--md fr-link--icon-left fr-icon-clipboard-line", data: {controller: "clipboard", clipboard_text_value: commencer_url(@procedure.path), action: "click->clipboard#copy" } do
+              = t('instructeurs.dossiers.header.banner.copy_link_button')
 
-  - if can_send_groupe_message?(procedure)
-    |
-    = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'header-link'
+    .fr-nav__item.relative
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+        = t('instructeurs.dossiers.header.banner.downloads')
+      #downloads.fr-collapse.fr-menu.absolute
+        %ul.fr-menu__list
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.archives'), instructeur_archives_path(procedure), class: 'fr-nav__link'
+          %li
+            = link_to t('instructeurs.dossiers.header.banner.exports_models'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
 
-  |
-  = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'header-link'
-  |
-  = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: "header-link"
-  |
-  = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'header-link'
-  - if @has_export_notification
-    %span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
-
-
-
-  #last-export-alert
-    = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }
+  -# #last-export-alert
+  -#   = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }
diff --git a/app/views/instructeurs/procedures/administrateurs.html.haml b/app/views/instructeurs/procedures/administrateurs.html.haml
index 09242021f..dde38335e 100644
--- a/app/views/instructeurs/procedures/administrateurs.html.haml
+++ b/app/views/instructeurs/procedures/administrateurs.html.haml
@@ -1,8 +1,9 @@
 - content_for(:title, "Administrateurs de #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), administrateurs_instructeur_procedure_path(@procedure)],['Administrateurs']] }
-
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 .container
   %h1
     = t('instructeurs.procedures.administrators_list.title', procedure_id: @procedure.id, procedure_libelle: @procedure.libelle)
diff --git a/app/views/instructeurs/procedures/deleted_dossiers.html.haml b/app/views/instructeurs/procedures/deleted_dossiers.html.haml
index 3b7bb170a..b4d9b5934 100644
--- a/app/views/instructeurs/procedures/deleted_dossiers.html.haml
+++ b/app/views/instructeurs/procedures/deleted_dossiers.html.haml
@@ -1,11 +1,9 @@
 - content_for(:title, "#{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    ['Historique des dossiers supprimés']] }
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
-.fr-container
-  .fr-mb-3w
-    = link_to "Retour à la démarche", instructeur_procedure_path(@procedure), class: "fr-link fr-icon-arrow-left-line fr-link--icon-left"
 
 = render Dossiers::DeletedDossiersComponent.new(deleted_dossiers: @deleted_dossiers)
diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml
index 2761015c0..e688abe7e 100644
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@@ -1,8 +1,10 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    ['Notifications']] }
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
+
 
 .fr-container
   %h1.fr-h3
diff --git a/app/views/instructeurs/procedures/email_usagers.html.haml b/app/views/instructeurs/procedures/email_usagers.html.haml
index d22d23021..974d4cf0a 100644
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@@ -1,10 +1,12 @@
 - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}")
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    [t('.contact_users')]] }
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
+
 .messagerie.fr-container
-  %h1 Contacter les usagers
+  %h1= t('instructeurs.dossiers.header.banner.contact_users')
   %p.fr-highlight
     = t('.hint', count: @dossiers_without_groupe_count).html_safe
 
diff --git a/app/views/instructeurs/procedures/exports.html.haml b/app/views/instructeurs/procedures/exports.html.haml
index fad0a8022..3e0a40b43 100644
--- a/app/views/instructeurs/procedures/exports.html.haml
+++ b/app/views/instructeurs/procedures/exports.html.haml
@@ -1,9 +1,14 @@
 - title = "Exports · #{@procedure.libelle}"
 - content_for(:title, title)
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    [t('.title')]] }
+-# = render partial: 'administrateurs/breadcrumbs',
+-#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+-#                     [t('.title')]] }
+
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 .fr-container
   .fr-tabs.mb-3
diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index 00753ecb1..b5208a1c4 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@@ -4,9 +4,6 @@
   .sub-header
     .fr-container.flex
 
-      .procedure-logo{ style: "background-image: url(#{@procedure.logo_url})",
-        role: 'img', 'aria-label': "logo de la démarche #{@procedure.libelle}" }
-
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
 
       .procedure-actions
diff --git a/app/views/instructeurs/procedures/stats.html.haml b/app/views/instructeurs/procedures/stats.html.haml
index b1f2648fe..8b45c323f 100644
--- a/app/views/instructeurs/procedures/stats.html.haml
+++ b/app/views/instructeurs/procedures/stats.html.haml
@@ -1,8 +1,9 @@
-- title = "Statistiques · #{@procedure.libelle}"
+- title = "Statistiques de la démarche"
 - content_for(:title, title)
 
-= render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
-                    [t('.title')]] }
+.sub-header
+  .fr-container.flex
+    = render partial: 'instructeurs/procedures/header',
+      locals: { procedure: @procedure }
 
 = render partial: 'shared/procedures/stats', locals: { title: title }

From 21f696a6e5d823f09ce58be995c12daa1f3e38af Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Mon, 4 Nov 2024 11:13:13 +0000
Subject: [PATCH 3/9] Ajoute le bouton retour dans l'interface instructeur

---
 app/assets/stylesheets/buttons.scss           | 21 +++++++++++++++++++
 .../instructeurs/procedures/_header.html.haml | 11 ++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index 1293eb494..ad93cf731 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -393,3 +393,24 @@ ul.dropdown-items {
     content: none !important;
   }
 }
+
+.btn-back {
+  border: 1px solid $blue-france-500;
+  color: $blue-france-500;
+  background-color: transparent;
+  height: 2em;
+  width: 2em;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: $default-spacer * 2;
+
+  &:hover {
+    background-color: transparent !important;
+  }
+}
+
+.btn-back .fr-icon-arrow-left-line {
+  font-size: 0.8em;
+}
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index 44868b6f2..66b6fa33a 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -1,5 +1,8 @@
 .procedure-header
-  .clipboard-container
+  .clipboard-container.flex
+    = link_to "javascript:history.back()", class: "fr-btn btn-back" do
+      %span.fr-icon-arrow-left-line{ "aria-hidden" => "true", style: "font-size: 14px;" }
+
     %h1.fr-h3
       = "#{procedure_libelle procedure} (n°#{procedure.id})"
   %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') }
@@ -7,7 +10,7 @@
       = link_to instructeur_procedure_path(procedure), class: "account-btn fr-btn fr-btn--tertiary fr-btn--no-border", style: "box-shadow: none; background: none;" do
         %span.fr-mr-1w= t('instructeurs.dossiers.header.banner.follow_up')
     .fr-nav__item.relative
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.procedure_management')
       #procedure-management.fr-collapse.fr-menu.absolute
         %ul.fr-menu__list
@@ -23,7 +26,7 @@
             = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
 
     .fr-nav__item.relative
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.user_support')
       #user-support.fr-collapse.fr-menu.absolute
         %ul.fr-menu__list
@@ -36,7 +39,7 @@
               = t('instructeurs.dossiers.header.banner.copy_link_button')
 
     .fr-nav__item.relative
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
+      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.downloads')
       #downloads.fr-collapse.fr-menu.absolute
         %ul.fr-menu__list

From 29a297575229edeaf31175449f09cfd5e999ffc9 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Mon, 4 Nov 2024 17:54:08 +0000
Subject: [PATCH 4/9] Adapte les breadcrumbs sur l'interface instructeur

---
 app/views/instructeurs/_breadcrumbs.html.haml | 45 +++++++++++++++++++
 .../instructeurs/archives/index.html.haml     |  9 ++--
 .../groupe_instructeurs/index.html.haml       |  6 ++-
 .../procedures/administrateurs.html.haml      |  5 ++-
 .../procedures/deleted_dossiers.html.haml     |  6 ++-
 .../procedures/email_notifications.html.haml  |  5 ++-
 .../procedures/email_usagers.html.haml        |  5 ++-
 .../instructeurs/procedures/exports.html.haml |  6 ++-
 .../instructeurs/procedures/show.html.haml    |  5 ++-
 .../instructeurs/procedures/stats.html.haml   |  6 ++-
 .../locales/views/layouts/_breadcrumb.en.yml  |  2 +-
 .../locales/views/layouts/_breadcrumb.fr.yml  |  2 +-
 12 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 app/views/instructeurs/_breadcrumbs.html.haml

diff --git a/app/views/instructeurs/_breadcrumbs.html.haml b/app/views/instructeurs/_breadcrumbs.html.haml
new file mode 100644
index 000000000..b4339980f
--- /dev/null
+++ b/app/views/instructeurs/_breadcrumbs.html.haml
@@ -0,0 +1,45 @@
+%nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
+  %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
+    = t('show', scope: [:layouts, :breadcrumb])
+
+  .fr-collapse#breadcrumb-1
+    %ol.fr-breadcrumb__list
+      %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link'
+
+      - steps.each.with_index do |step, i|
+        - if i == 0
+          %li= link_to "#{step[0]} - Suivi des dossiers", step[1], class: 'fr-breadcrumb__link'
+        - else
+          %li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
+
+- if defined?(metadatas)
+  .metadatas.pb-3
+    %h1.fr-h6.fr-mb-1w
+      = @procedure.libelle
+
+    - if @procedure.close?
+      .flex
+        %span.fr-badge.fr-badge--warning.fr-mr-1w
+          = t('closed', scope: [:layouts, :breadcrumb])
+        = t('since', scope: [:layouts, :breadcrumb], date: l(@procedure.closed_at.to_date))
+
+    - elsif @procedure.locked?
+      = link_to commencer_url(@procedure.path), commencer_url(@procedure.path), class: "fr-link"
+      .flex.fr-mt-1w
+
+        - if @procedure.api_entreprise_token_expired_or_expires_soon?
+          %span.fr-badge.fr-badge--error.fr-mr-1w
+            = t('to_modify', scope: [:layouts, :breadcrumb])
+
+        %span.fr-badge.fr-badge--success.fr-mr-1w
+          = t('published', scope: [:layouts, :breadcrumb])
+        = t('since', scope: [:layouts, :breadcrumb], number: @procedure.id, date: l(@procedure.published_at.to_date))
+
+    - else
+      %p.fr-mb-1w
+        = t('more_info_on_test', scope: [:layouts, :breadcrumb])
+        = link_to t('go_to_FAQ', scope: [:layouts, :breadcrumb]), t("url_FAQ", scope: [:layouts, :breadcrumb]), title: new_tab_suffix(t('go_to_FAQ', scope: [:layouts, :breadcrumb]))
+      .flex
+        %span.fr-badge.fr-badge--new.fr-mr-1w
+          = t('draft', scope: [:layouts, :breadcrumb])
+        = t('since', scope: [:layouts, :breadcrumb], number: @procedure.id, date: l(@procedure.created_at.to_date))
diff --git a/app/views/instructeurs/archives/index.html.haml b/app/views/instructeurs/archives/index.html.haml
index b04375126..a34c4d96c 100644
--- a/app/views/instructeurs/archives/index.html.haml
+++ b/app/views/instructeurs/archives/index.html.haml
@@ -1,11 +1,12 @@
 - content_for(:title, "Archives pour #{@procedure.libelle}")
 
--# = render partial: 'administrateurs/breadcrumbs',
--#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
--#                     ['Archives']] }
+
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                    [t('instructeurs.dossiers.header.banner.downloads')]] }
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/groupe_instructeurs/index.html.haml b/app/views/instructeurs/groupe_instructeurs/index.html.haml
index 3eeefd1ed..11611f7e3 100644
--- a/app/views/instructeurs/groupe_instructeurs/index.html.haml
+++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml
@@ -1,7 +1,11 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        ['Gestion des instructeurs']] }
+
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/procedures/administrateurs.html.haml b/app/views/instructeurs/procedures/administrateurs.html.haml
index dde38335e..fe542e5ff 100644
--- a/app/views/instructeurs/procedures/administrateurs.html.haml
+++ b/app/views/instructeurs/procedures/administrateurs.html.haml
@@ -1,7 +1,10 @@
 - content_for(:title, "Administrateurs de #{@procedure.libelle}")
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), administrateurs_instructeur_procedure_path(@procedure)],[t('instructeurs.dossiers.header.banner.administrators_list')]] }
+
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 .container
diff --git a/app/views/instructeurs/procedures/deleted_dossiers.html.haml b/app/views/instructeurs/procedures/deleted_dossiers.html.haml
index b4d9b5934..04101b41f 100644
--- a/app/views/instructeurs/procedures/deleted_dossiers.html.haml
+++ b/app/views/instructeurs/procedures/deleted_dossiers.html.haml
@@ -1,7 +1,11 @@
 - content_for(:title, "#{@procedure.libelle}")
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        ['Historique des dossiers supprimés']] }
+
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml
index e688abe7e..28a60e696 100644
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@@ -1,7 +1,10 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        [t('instructeurs.dossiers.header.banner.notification_management')]] }
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/procedures/email_usagers.html.haml b/app/views/instructeurs/procedures/email_usagers.html.haml
index 974d4cf0a..dbf621dae 100644
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@@ -1,7 +1,10 @@
 - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}")
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        [t('instructeurs.dossiers.header.banner.contact_users')]] }
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/procedures/exports.html.haml b/app/views/instructeurs/procedures/exports.html.haml
index 3e0a40b43..f06d2d760 100644
--- a/app/views/instructeurs/procedures/exports.html.haml
+++ b/app/views/instructeurs/procedures/exports.html.haml
@@ -6,7 +6,11 @@
 -#                     [t('.title')]] }
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        [t('instructeurs.dossiers.header.banner.exports_list')]] }
+
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index b5208a1c4..d89c58da1 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@@ -2,8 +2,9 @@
 
 #procedure-show
   .sub-header
-    .fr-container.flex
-
+    .fr-container.flex.column
+      = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)]] }
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
 
       .procedure-actions
diff --git a/app/views/instructeurs/procedures/stats.html.haml b/app/views/instructeurs/procedures/stats.html.haml
index 8b45c323f..0ffd9d5c6 100644
--- a/app/views/instructeurs/procedures/stats.html.haml
+++ b/app/views/instructeurs/procedures/stats.html.haml
@@ -2,7 +2,11 @@
 - content_for(:title, title)
 
 .sub-header
-  .fr-container.flex
+  .fr-container.flex.column
+    = render partial: 'instructeurs/breadcrumbs',
+      locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
+                        [t('instructeurs.dossiers.header.banner.statistics')]] }
+
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 
diff --git a/config/locales/views/layouts/_breadcrumb.en.yml b/config/locales/views/layouts/_breadcrumb.en.yml
index 129028235..d6003ef6f 100644
--- a/config/locales/views/layouts/_breadcrumb.en.yml
+++ b/config/locales/views/layouts/_breadcrumb.en.yml
@@ -1,7 +1,7 @@
 en:
   layouts:
     breadcrumb:
-      root: "Home"
+      root: "Home - List of procedures"
       you_are_here: "You are here"
       show: Show breadcrumb
       preview: "Preview the form"
diff --git a/config/locales/views/layouts/_breadcrumb.fr.yml b/config/locales/views/layouts/_breadcrumb.fr.yml
index cc60f2133..5fd78a4d2 100644
--- a/config/locales/views/layouts/_breadcrumb.fr.yml
+++ b/config/locales/views/layouts/_breadcrumb.fr.yml
@@ -1,7 +1,7 @@
 fr:
   layouts:
     breadcrumb:
-      root: "Accueil"
+      root: "Accueil - Liste des démarches"
       you_are_here: "Vous êtes ici"
       show: "Voir le fil d’Ariane"
       preview: "Prévisualiser le formulaire"

From e81f829545f36722dcb400f2ecd17d11b430bbbc Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Wed, 13 Nov 2024 14:03:51 +0000
Subject: [PATCH 5/9] =?UTF-8?q?Ajoute=20le=20liseret=20indicatif=20de=20la?=
 =?UTF-8?q?=20section=20en=20cours.=20Retire=20le=20bouton=20retour,=20g?=
 =?UTF-8?q?=C3=A9r=C3=A9=20dans=20une=20autre=20PR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/stylesheets/dsfr.scss              | 15 +++++++++
 app/helpers/navigation_helper.rb              | 33 +++++++++++++++++++
 .../instructeurs/procedures/_header.html.haml | 27 ++++++++-------
 3 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 app/helpers/navigation_helper.rb

diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss
index 6478ea3c7..baddb347c 100644
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@@ -89,6 +89,21 @@ trix-editor.fr-input {
     }
   }
 }
+/* prettier-ignore */
+.fr-nav__item.section-active {
+  position: relative;
+
+  &::after {
+    content: '';  // scss-lint:disable StringQuotes
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--blue-france-sun-113-625);
+    transform: translateY(100%);
+  }
+}
 
 @keyframes popover-slide {
   from {
diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb
new file mode 100644
index 000000000..870785327
--- /dev/null
+++ b/app/helpers/navigation_helper.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module NavigationHelper
+  def current_nav_section
+    if procedure_management_section?
+      'procedure_management'
+    elsif user_support_section?
+      'user_support'
+    elsif downloads_section?
+      'downloads'
+    else
+      'follow_up'
+    end
+  end
+
+  private
+
+  def procedure_management_section?
+    return true if params[:action].in?(['administrateurs', 'stats', 'email_notifications', 'deleted_dossiers'])
+    return true if params[:controller] == 'instructeurs/groupe_instructeurs'
+
+    false
+  end
+
+  def user_support_section?
+    params[:action] == 'email_usagers' || params[:action] == 'apercu'
+  end
+
+  def downloads_section?
+    params[:action] == 'exports' ||
+    params[:controller] == 'instructeurs/archives'
+  end
+end
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index 66b6fa33a..fe3208ff9 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -1,23 +1,24 @@
 .procedure-header
-  .clipboard-container.flex
-    = link_to "javascript:history.back()", class: "fr-btn btn-back" do
-      %span.fr-icon-arrow-left-line{ "aria-hidden" => "true", style: "font-size: 14px;" }
-
+  .clipboard-container
     %h1.fr-h3
       = "#{procedure_libelle procedure} (n°#{procedure.id})"
   %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') }
-    .fr-nav__item
+    .fr-nav__item{ class: ('section-active' if current_nav_section == 'follow_up') }
       = link_to instructeur_procedure_path(procedure), class: "account-btn fr-btn fr-btn--tertiary fr-btn--no-border", style: "box-shadow: none; background: none;" do
         %span.fr-mr-1w= t('instructeurs.dossiers.header.banner.follow_up')
-    .fr-nav__item.relative
+    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'procedure_management') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.procedure_management')
       #procedure-management.fr-collapse.fr-menu.absolute
         %ul.fr-menu__list
           %li
             = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
+          - if procedure.instructeurs_self_management_enabled?
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
+          - elsif procedure.administrateurs.exists?(id: current_administrateur&.id)
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class: 'fr-nav__link'
           %li
             = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'fr-nav__link'
           %li
@@ -25,7 +26,7 @@
           %li
             = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
 
-    .fr-nav__item.relative
+    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'user_support') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.user_support')
       #user-support.fr-collapse.fr-menu.absolute
@@ -38,7 +39,7 @@
             = link_to "#", class: "fr-nav__link fr-link fr-link--md fr-link--icon-left fr-icon-clipboard-line", data: {controller: "clipboard", clipboard_text_value: commencer_url(@procedure.path), action: "click->clipboard#copy" } do
               = t('instructeurs.dossiers.header.banner.copy_link_button')
 
-    .fr-nav__item.relative
+    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'downloads') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.downloads')
       #downloads.fr-collapse.fr-menu.absolute
@@ -49,6 +50,8 @@
             = link_to t('instructeurs.dossiers.header.banner.archives'), instructeur_archives_path(procedure), class: 'fr-nav__link'
           %li
             = link_to t('instructeurs.dossiers.header.banner.exports_models'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+  - if @has_export_notification
+    %span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
 
-  -# #last-export-alert
-  -#   = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }
+  #last-export-alert
+    = render partial: "instructeurs/procedures/last_export_alert", locals: { export: @last_export, statut: @statut }

From cdceddafe1b01f44cfbdbec4b505dbaa4fa73efe Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Thu, 14 Nov 2024 08:59:38 +0000
Subject: [PATCH 6/9] Fixe les tests

---
 spec/helpers/navigation_helper_spec.rb       | 65 ++++++++++++++++++++
 spec/system/instructeurs/instruction_spec.rb |  3 +-
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 spec/helpers/navigation_helper_spec.rb

diff --git a/spec/helpers/navigation_helper_spec.rb b/spec/helpers/navigation_helper_spec.rb
new file mode 100644
index 000000000..b7289e445
--- /dev/null
+++ b/spec/helpers/navigation_helper_spec.rb
@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+RSpec.describe NavigationHelper do
+  describe '#current_nav_section' do
+    subject { helper.current_nav_section }
+
+    context 'when in procedure management section' do
+      it 'returns procedure_management for administrateurs action' do
+        allow(helper).to receive(:params).and_return({ action: 'administrateurs' })
+        expect(subject).to eq('procedure_management')
+      end
+
+      it 'returns procedure_management for stats action' do
+        allow(helper).to receive(:params).and_return({ action: 'stats' })
+        expect(subject).to eq('procedure_management')
+      end
+
+      it 'returns procedure_management for email_notifications action' do
+        allow(helper).to receive(:params).and_return({ action: 'email_notifications' })
+        expect(subject).to eq('procedure_management')
+      end
+
+      it 'returns procedure_management for deleted_dossiers action' do
+        allow(helper).to receive(:params).and_return({ action: 'deleted_dossiers' })
+        expect(subject).to eq('procedure_management')
+      end
+
+      it 'returns procedure_management for groupe_instructeurs controller' do
+        allow(helper).to receive(:params).and_return({ controller: 'instructeurs/groupe_instructeurs' })
+        expect(subject).to eq('procedure_management')
+      end
+    end
+
+    context 'when in user support section' do
+      it 'returns user_support for email_usagers action' do
+        allow(helper).to receive(:params).and_return({ action: 'email_usagers' })
+        expect(subject).to eq('user_support')
+      end
+
+      it 'returns user_support for apercu action' do
+        allow(helper).to receive(:params).and_return({ action: 'apercu' })
+        expect(subject).to eq('user_support')
+      end
+    end
+
+    context 'when in downloads section' do
+      it 'returns downloads for exports action' do
+        allow(helper).to receive(:params).and_return({ action: 'exports' })
+        expect(subject).to eq('downloads')
+      end
+
+      it 'returns downloads for archives controller' do
+        allow(helper).to receive(:params).and_return({ controller: 'instructeurs/archives' })
+        expect(subject).to eq('downloads')
+      end
+    end
+
+    context 'when in no specific section' do
+      it 'returns follow_up by default' do
+        allow(helper).to receive(:params).and_return({ action: 'show', controller: 'procedures' })
+        expect(subject).to eq('follow_up')
+      end
+    end
+  end
+end
diff --git a/spec/system/instructeurs/instruction_spec.rb b/spec/system/instructeurs/instruction_spec.rb
index bfd9447d2..5e06cd74f 100644
--- a/spec/system/instructeurs/instruction_spec.rb
+++ b/spec/system/instructeurs/instruction_spec.rb
@@ -139,7 +139,8 @@ describe 'Instructing a dossier:', js: true do
 
     expect(page).to have_text('Nous générons cet export.')
 
-    click_on "Voir les exports et modèles d'export"
+    find("button", text: "Téléchargements").click
+    click_on "Liste des exports"
     expect(page).to have_text("Export .csv d’un dossier « à suivre » demandé il y a moins d'une minute")
     expect(page).to have_text("En préparation")
 

From 172d81856b9f7f82b9eeb7fbfd7259154e06a264 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Mon, 18 Nov 2024 23:04:21 +0000
Subject: [PATCH 7/9] =?UTF-8?q?Fix=20apr=C3=A8s=20retours?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/stylesheets/02_utils.scss          |  4 --
 app/assets/stylesheets/buttons.scss           | 21 ----------
 .../deleted_dossiers_component.html.haml      |  2 +-
 app/views/instructeurs/_breadcrumbs.html.haml | 40 ++-----------------
 .../instructeurs/archives/index.html.haml     |  2 +-
 .../groupe_instructeurs/index.html.haml       |  2 +-
 .../instructeurs/procedures/_header.html.haml |  6 +--
 .../procedures/administrateurs.html.haml      |  2 +-
 .../procedures/email_notifications.html.haml  |  2 +-
 .../procedures/email_usagers.html.haml        |  2 +-
 .../instructeurs/procedures/exports.html.haml |  5 +--
 .../instructeurs/procedures/show.html.haml    |  3 +-
 app/views/shared/procedures/_stats.html.haml  |  2 +-
 .../views/instructeurs/procedures/en.yml      |  2 +
 .../views/instructeurs/procedures/fr.yml      |  3 +-
 .../procedure_export_template_tabular_spec.rb |  4 +-
 .../procedure_export_template_zip_spec.rb     |  4 +-
 17 files changed, 27 insertions(+), 79 deletions(-)

diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss
index df1f8c4ee..3d5ae5a13 100644
--- a/app/assets/stylesheets/02_utils.scss
+++ b/app/assets/stylesheets/02_utils.scss
@@ -85,10 +85,6 @@
   position: relative;
 }
 
-.absolute {
-  position: absolute;
-}
-
 .sticky {
   position: sticky;
   top: 2em;
diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index ad93cf731..1293eb494 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -393,24 +393,3 @@ ul.dropdown-items {
     content: none !important;
   }
 }
-
-.btn-back {
-  border: 1px solid $blue-france-500;
-  color: $blue-france-500;
-  background-color: transparent;
-  height: 2em;
-  width: 2em;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: $default-spacer * 2;
-
-  &:hover {
-    background-color: transparent !important;
-  }
-}
-
-.btn-back .fr-icon-arrow-left-line {
-  font-size: 0.8em;
-}
diff --git a/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml b/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
index 1fc51132a..d32eac862 100644
--- a/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
+++ b/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
@@ -1,6 +1,6 @@
 
 .fr-container
-  %h1.fr-h2
+  %h1.fr-h4
     Historique des dossiers supprimés
 
 .fr-container
diff --git a/app/views/instructeurs/_breadcrumbs.html.haml b/app/views/instructeurs/_breadcrumbs.html.haml
index b4339980f..b5b98fec9 100644
--- a/app/views/instructeurs/_breadcrumbs.html.haml
+++ b/app/views/instructeurs/_breadcrumbs.html.haml
@@ -1,4 +1,4 @@
-%nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
+%nav.fr-mb-0.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
   %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
     = t('show', scope: [:layouts, :breadcrumb])
 
@@ -7,39 +7,7 @@
       %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link'
 
       - steps.each.with_index do |step, i|
-        - if i == 0
-          %li= link_to "#{step[0]} - Suivi des dossiers", step[1], class: 'fr-breadcrumb__link'
+        - if i == steps.size - 1
+          %li= link_to step[0], '', { aria: { current: "page" } , class: 'fr-breadcrumb__link' }
         - else
-          %li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
-
-- if defined?(metadatas)
-  .metadatas.pb-3
-    %h1.fr-h6.fr-mb-1w
-      = @procedure.libelle
-
-    - if @procedure.close?
-      .flex
-        %span.fr-badge.fr-badge--warning.fr-mr-1w
-          = t('closed', scope: [:layouts, :breadcrumb])
-        = t('since', scope: [:layouts, :breadcrumb], date: l(@procedure.closed_at.to_date))
-
-    - elsif @procedure.locked?
-      = link_to commencer_url(@procedure.path), commencer_url(@procedure.path), class: "fr-link"
-      .flex.fr-mt-1w
-
-        - if @procedure.api_entreprise_token_expired_or_expires_soon?
-          %span.fr-badge.fr-badge--error.fr-mr-1w
-            = t('to_modify', scope: [:layouts, :breadcrumb])
-
-        %span.fr-badge.fr-badge--success.fr-mr-1w
-          = t('published', scope: [:layouts, :breadcrumb])
-        = t('since', scope: [:layouts, :breadcrumb], number: @procedure.id, date: l(@procedure.published_at.to_date))
-
-    - else
-      %p.fr-mb-1w
-        = t('more_info_on_test', scope: [:layouts, :breadcrumb])
-        = link_to t('go_to_FAQ', scope: [:layouts, :breadcrumb]), t("url_FAQ", scope: [:layouts, :breadcrumb]), title: new_tab_suffix(t('go_to_FAQ', scope: [:layouts, :breadcrumb]))
-      .flex
-        %span.fr-badge.fr-badge--new.fr-mr-1w
-          = t('draft', scope: [:layouts, :breadcrumb])
-        = t('since', scope: [:layouts, :breadcrumb], number: @procedure.id, date: l(@procedure.created_at.to_date))
+          %li= link_to "#{step[0]} - Suivi des dossiers", step[1], class: 'fr-breadcrumb__link'
diff --git a/app/views/instructeurs/archives/index.html.haml b/app/views/instructeurs/archives/index.html.haml
index a34c4d96c..b8d8560f3 100644
--- a/app/views/instructeurs/archives/index.html.haml
+++ b/app/views/instructeurs/archives/index.html.haml
@@ -11,7 +11,7 @@
       locals: { procedure: @procedure }
 
 .container
-  %h1.mb-2 Téléchargement mensuel
+  %h1.mb-2.fr-h4 Téléchargement mensuel
 
   = render partial: "shared/archives/notice"
   = render partial: "shared/archives/table", locals: {count_dossiers_termines_by_month: @count_dossiers_termines_by_month, archives: @archives, average_dossier_weight: @average_dossier_weight, procedure: @procedure }
diff --git a/app/views/instructeurs/groupe_instructeurs/index.html.haml b/app/views/instructeurs/groupe_instructeurs/index.html.haml
index 11611f7e3..435df6d24 100644
--- a/app/views/instructeurs/groupe_instructeurs/index.html.haml
+++ b/app/views/instructeurs/groupe_instructeurs/index.html.haml
@@ -10,7 +10,7 @@
       locals: { procedure: @procedure }
 
 .fr-container.groupe-instructeur
-  %h1 Gestion des instructeurs
+  %h1.fr-h4 Gestion des instructeurs
   .card
     %h2.fr-h3 Liste des groupes
     %table.table.mt-2
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index fe3208ff9..45b2c5b2d 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -9,7 +9,7 @@
     .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'procedure_management') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.procedure_management')
-      #procedure-management.fr-collapse.fr-menu.absolute
+      #procedure-management.fr-collapse.fr-menu
         %ul.fr-menu__list
           %li
             = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
@@ -29,7 +29,7 @@
     .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'user_support') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.user_support')
-      #user-support.fr-collapse.fr-menu.absolute
+      #user-support.fr-collapse.fr-menu
         %ul.fr-menu__list
           %li
             = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'fr-nav__link'
@@ -42,7 +42,7 @@
     .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'downloads') }
       %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
         = t('instructeurs.dossiers.header.banner.downloads')
-      #downloads.fr-collapse.fr-menu.absolute
+      #downloads.fr-collapse.fr-menu
         %ul.fr-menu__list
           %li
             = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
diff --git a/app/views/instructeurs/procedures/administrateurs.html.haml b/app/views/instructeurs/procedures/administrateurs.html.haml
index fe542e5ff..4af281b0e 100644
--- a/app/views/instructeurs/procedures/administrateurs.html.haml
+++ b/app/views/instructeurs/procedures/administrateurs.html.haml
@@ -8,7 +8,7 @@
     = render partial: 'instructeurs/procedures/header',
       locals: { procedure: @procedure }
 .container
-  %h1
+  %h1.fr-h4
     = t('instructeurs.procedures.administrators_list.title', procedure_id: @procedure.id, procedure_libelle: @procedure.libelle)
 
   %ul
diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml
index 28a60e696..87300c39d 100644
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@@ -10,7 +10,7 @@
 
 
 .fr-container
-  %h1.fr-h3
+  %h1.fr-h4
     = t('.title')
 
   = form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form|
diff --git a/app/views/instructeurs/procedures/email_usagers.html.haml b/app/views/instructeurs/procedures/email_usagers.html.haml
index dbf621dae..937dbdce5 100644
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@@ -9,7 +9,7 @@
       locals: { procedure: @procedure }
 
 .messagerie.fr-container
-  %h1= t('instructeurs.dossiers.header.banner.contact_users')
+  %h1.fr-h4= t('instructeurs.dossiers.header.banner.contact_users')
   %p.fr-highlight
     = t('.hint', count: @dossiers_without_groupe_count).html_safe
 
diff --git a/app/views/instructeurs/procedures/exports.html.haml b/app/views/instructeurs/procedures/exports.html.haml
index f06d2d760..f22aecc25 100644
--- a/app/views/instructeurs/procedures/exports.html.haml
+++ b/app/views/instructeurs/procedures/exports.html.haml
@@ -1,10 +1,6 @@
 - title = "Exports · #{@procedure.libelle}"
 - content_for(:title, title)
 
--# = render partial: 'administrateurs/breadcrumbs',
--#   locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)],
--#                     [t('.title')]] }
-
 .sub-header
   .fr-container.flex.column
     = render partial: 'instructeurs/breadcrumbs',
@@ -15,6 +11,7 @@
       locals: { procedure: @procedure }
 
 .fr-container
+  %h1.fr-h4= t('.title')
   .fr-tabs.mb-3
     %ul.fr-tabs__list{ role: 'tablist' }
       %li{ role: 'presentation' }
diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index d89c58da1..3496e55b5 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@@ -6,7 +6,8 @@
       = render partial: 'instructeurs/breadcrumbs',
       locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)]] }
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
-
+      %hr.fr-mt-1v
+      %h1.fr-h3.fr-mb-0= t('.file_tracking')
       .procedure-actions
         - if @can_download_dossiers
           = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), export_url: method(:download_export_instructeur_procedure_path))
diff --git a/app/views/shared/procedures/_stats.html.haml b/app/views/shared/procedures/_stats.html.haml
index fd6fb1c85..671b8024a 100644
--- a/app/views/shared/procedures/_stats.html.haml
+++ b/app/views/shared/procedures/_stats.html.haml
@@ -1,5 +1,5 @@
 .fr-container.fr-my-4w
-  %h1= title
+  %h1.fr-h4= title
   .fr-grid-row.fr-grid-row--gutters
     - if @usual_traitement_time.present?
       .fr-col-xs-12
diff --git a/config/locales/views/instructeurs/procedures/en.yml b/config/locales/views/instructeurs/procedures/en.yml
index 6f57ac768..68dc01456 100644
--- a/config/locales/views/instructeurs/procedures/en.yml
+++ b/config/locales/views/instructeurs/procedures/en.yml
@@ -13,6 +13,8 @@ en:
         dossiers_close_to_expiration: expiring
         dossiers_supprimes: recently deleted
         copy_link_button: Copy the procedure link to clipboard
+      show:
+        file_tracking: File tracking
       email_usagers:
         hint:
           zero: "There is no user with a draft."
diff --git a/config/locales/views/instructeurs/procedures/fr.yml b/config/locales/views/instructeurs/procedures/fr.yml
index 3203fa4f3..4f10bf351 100644
--- a/config/locales/views/instructeurs/procedures/fr.yml
+++ b/config/locales/views/instructeurs/procedures/fr.yml
@@ -13,6 +13,8 @@ fr:
         dossiers_close_to_expiration: expirant
         dossiers_supprimes: supprimés
         copy_link_button: Copier le lien de la démarche dans le presse-papiers
+      show:
+        file_tracking: Suivi des dossiers
       email_usagers:
         hint:
           zero: "Aucun usager n'a de dossier en brouillon."
@@ -20,4 +22,3 @@ fr:
           other: "Vous allez envoyer un message à <strong>%{count}</strong> usagers ayant un dossier en brouillon."
       administrators_list:
         title: Administrateurs de la démarche
-
diff --git a/spec/system/instructeurs/procedure_export_template_tabular_spec.rb b/spec/system/instructeurs/procedure_export_template_tabular_spec.rb
index 6ed66c910..bdefa98f6 100644
--- a/spec/system/instructeurs/procedure_export_template_tabular_spec.rb
+++ b/spec/system/instructeurs/procedure_export_template_tabular_spec.rb
@@ -10,7 +10,9 @@ describe "procedure exports" do
     Flipper.enable(:export_template, procedure)
     visit instructeur_procedure_path(procedure)
 
-    click_on "Voir les exports et modèles d'export"
+    find("button", text: "Téléchargements").click
+
+    click_on "Liste des exports"
 
     click_on "Modèles d'export"
 
diff --git a/spec/system/instructeurs/procedure_export_template_zip_spec.rb b/spec/system/instructeurs/procedure_export_template_zip_spec.rb
index 44eb7b787..90e376751 100644
--- a/spec/system/instructeurs/procedure_export_template_zip_spec.rb
+++ b/spec/system/instructeurs/procedure_export_template_zip_spec.rb
@@ -9,7 +9,9 @@ describe "procedure exports zip" do
   scenario "create an export_template zip", chome: true do
     visit instructeur_procedure_path(procedure)
 
-    click_on "Voir les exports et modèles d'export"
+    find("button", text: "Téléchargements").click
+
+    click_on "Liste des exports"
 
     click_on "Modèles d'export"
 

From 1601ca7bb95163aabf9c2d566143e779ba80d6b7 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Tue, 19 Nov 2024 15:24:22 +0000
Subject: [PATCH 8/9] =?UTF-8?q?Retire=20le=20bouton=20t=C3=A9l=C3=A9charge?=
 =?UTF-8?q?r=20tous=20les=20dossiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/instructeurs/procedures/show.html.haml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index 3496e55b5..4c879d707 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@@ -7,10 +7,7 @@
       locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)]] }
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
       %hr.fr-mt-1v
-      %h1.fr-h3.fr-mb-0= t('.file_tracking')
-      .procedure-actions
-        - if @can_download_dossiers
-          = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), export_url: method(:download_export_instructeur_procedure_path))
+      %h1.fr-h5.fr-mb-0= t('.file_tracking')
 
     .fr-container.flex= render partial: "tabs", locals: { procedure: @procedure,
         statut: @statut,

From 99e4dfae9d5395a1572f25365849b4b234959db8 Mon Sep 17 00:00:00 2001
From: Kara Diaby <kdiaby.pro@gmail.com>
Date: Tue, 19 Nov 2024 20:17:05 +0000
Subject: [PATCH 9/9] =?UTF-8?q?Utilise=20le=20bon=20menu=20d=C3=A9roulant?=
 =?UTF-8?q?=20du=20DSFR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/stylesheets/dsfr.scss              | 15 ---
 .../instructeurs/procedures/_header.html.haml | 98 ++++++++++---------
 .../instructeurs/procedures/_tabs.html.haml   |  2 +-
 .../instructeurs/procedures/show.html.haml    |  2 +-
 .../locales/views/instructeurs/header/en.yml  |  4 +
 5 files changed, 57 insertions(+), 64 deletions(-)

diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss
index baddb347c..6478ea3c7 100644
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@@ -89,21 +89,6 @@ trix-editor.fr-input {
     }
   }
 }
-/* prettier-ignore */
-.fr-nav__item.section-active {
-  position: relative;
-
-  &::after {
-    content: '';  // scss-lint:disable StringQuotes
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: var(--blue-france-sun-113-625);
-    transform: translateY(100%);
-  }
-}
 
 @keyframes popover-slide {
   from {
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index 45b2c5b2d..ec64a8015 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -1,55 +1,59 @@
 .procedure-header
   .clipboard-container
-    %h1.fr-h3
+    %h1.fr-h3.fr-mb-0
       = "#{procedure_libelle procedure} (n°#{procedure.id})"
-  %nav.flex.align-center.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('instructeurs.dossiers.header.banner.procedure_navigation') }
-    .fr-nav__item{ class: ('section-active' if current_nav_section == 'follow_up') }
-      = link_to instructeur_procedure_path(procedure), class: "account-btn fr-btn fr-btn--tertiary fr-btn--no-border", style: "box-shadow: none; background: none;" do
-        %span.fr-mr-1w= t('instructeurs.dossiers.header.banner.follow_up')
-    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'procedure_management') }
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "procedure-management", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
-        = t('instructeurs.dossiers.header.banner.procedure_management')
-      #procedure-management.fr-collapse.fr-menu
-        %ul.fr-menu__list
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          - if procedure.instructeurs_self_management_enabled?
-            %li
-              = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
-          - elsif procedure.administrateurs.exists?(id: current_administrateur&.id)
-            %li
-              = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
+  %nav.fr-nav#navigation{ role: "navigation", "aria-label": t('instructeurs.dossiers.header.banner.procedure_navigation') }
+    %ul.fr-nav__list
+      %li.fr-nav__item
+        = link_to t('instructeurs.dossiers.header.banner.follow_up'), instructeur_procedure_path(procedure), target: "_self", "aria-current": ('page' if current_nav_section == 'follow_up'), class: "fr-nav__link"
 
-    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'user_support') }
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "user-support", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
-        = t('instructeurs.dossiers.header.banner.user_support')
-      #user-support.fr-collapse.fr-menu
-        %ul.fr-menu__list
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.preview'), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-nav__link'
-          %li
-            = link_to "#", class: "fr-nav__link fr-link fr-link--md fr-link--icon-left fr-icon-clipboard-line", data: {controller: "clipboard", clipboard_text_value: commencer_url(@procedure.path), action: "click->clipboard#copy" } do
-              = t('instructeurs.dossiers.header.banner.copy_link_button')
+      %li.fr-nav__item.relative
+        %button.fr-nav__btn{ 'aria-expanded': 'false', 'aria-controls': "menu-procedure", 'aria-current': ('page' if current_nav_section == 'procedure_management') }
+          = t('instructeurs.dossiers.header.banner.procedure_management')
+        #menu-procedure.fr-collapse.fr-menu
+          %ul.fr-menu__list
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.administrators_list'), administrateurs_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+
+            - if procedure.instructeurs_self_management_enabled?
+              %li
+                = link_to t('instructeurs.dossiers.header.banner.instructeurs'), instructeur_groupes_path(procedure), class: 'fr-nav__link'
+
+            - elsif procedure.administrateurs.exists?(id: current_administrateur&.id)
+              %li
+                = link_to t('instructeurs.dossiers.header.banner.instructeurs'), admin_procedure_groupe_instructeurs_path(procedure), class:
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.notification_management'), email_notifications_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.statistics'), stats_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+            %li
+              = link_to t('views.instructeurs.dossiers.show_deleted_dossiers'), deleted_dossiers_instructeur_procedure_path(@procedure), class: 'fr-nav__link'
+
+      %li.fr-nav__item.relative
+        %button.fr-nav__btn{ 'aria-expanded': 'false', 'aria-controls': 'menu-support', 'aria-current': ('page' if current_nav_section == 'user_support') }
+          = t('instructeurs.dossiers.header.banner.user_support')
+        #menu-support.fr-collapse.fr-menu
+          %ul.fr-menu__list
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.contact_users'), email_usagers_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.preview'), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-nav__link'
+            %li
+              = link_to "#", class: "fr-nav__link fr-link fr-link--md fr-link--icon-left fr-icon-clipboard-line", data: {controller: "clipboard", clipboard_text_value: commencer_url(@procedure.path), action: "click->clipboard#copy" } do
+                = t('instructeurs.dossiers.header.banner.copy_link_button')
+
+      %li.fr-nav__item.relative
+        %button.fr-nav__btn{ 'aria-expanded': 'false', 'aria-controls': 'menu-downloads', 'aria-current': ('page' if current_nav_section == 'downloads') }
+          = t('instructeurs.dossiers.header.banner.downloads')
+        #menu-downloads.fr-collapse.fr-menu
+          %ul.fr-menu__list
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.archives'), instructeur_archives_path(procedure), class: 'fr-nav__link'
+            %li
+              = link_to t('instructeurs.dossiers.header.banner.exports_models'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
 
-    .fr-nav__item.relative{ class: ('section-active' if current_nav_section == 'downloads') }
-      %button.account-btn.fr-translate__btn.fr-btn.fr-btn--tertiary.fr-btn--no-border.fr-text--md{ "aria-controls" => "downloads", "aria-expanded" => "false", style: "box-shadow: none; background: none;" }
-        = t('instructeurs.dossiers.header.banner.downloads')
-      #downloads.fr-collapse.fr-menu
-        %ul.fr-menu__list
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.exports_list'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.archives'), instructeur_archives_path(procedure), class: 'fr-nav__link'
-          %li
-            = link_to t('instructeurs.dossiers.header.banner.exports_models'), exports_instructeur_procedure_path(procedure), class: 'fr-nav__link'
   - if @has_export_notification
     %span.notifications{ 'aria-label': t('instructeurs.dossiers.header.banner.exports_notification_label') }
 
diff --git a/app/views/instructeurs/procedures/_tabs.html.haml b/app/views/instructeurs/procedures/_tabs.html.haml
index bfaa2760b..3f556258c 100644
--- a/app/views/instructeurs/procedures/_tabs.html.haml
+++ b/app/views/instructeurs/procedures/_tabs.html.haml
@@ -1,5 +1,5 @@
 %nav.fr-tabs.mt-3
-  %ul.fr-tabs__list{ role: 'tablist' }
+  %ul.fr-tabs__list.fr-pl-0{ role: 'tablist' }
     = tab_item(t(tab_i18n_key_from_status('a-suivre')),
       instructeur_procedure_path(procedure, statut: 'a-suivre'),
       active: statut == 'a-suivre',
diff --git a/app/views/instructeurs/procedures/show.html.haml b/app/views/instructeurs/procedures/show.html.haml
index 4c879d707..9fb78de03 100644
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@@ -6,7 +6,7 @@
       = render partial: 'instructeurs/breadcrumbs',
       locals: { steps: [[@procedure.libelle.truncate_words(10), instructeur_procedure_path(@procedure)]] }
       = render partial: 'header', locals: { procedure: @procedure, statut: @statut }
-      %hr.fr-mt-1v
+      %hr
       %h1.fr-h5.fr-mb-0= t('.file_tracking')
 
     .fr-container.flex= render partial: "tabs", locals: { procedure: @procedure,
diff --git a/config/locales/views/instructeurs/header/en.yml b/config/locales/views/instructeurs/header/en.yml
index 46f4ee9b2..3e4299acb 100644
--- a/config/locales/views/instructeurs/header/en.yml
+++ b/config/locales/views/instructeurs/header/en.yml
@@ -10,6 +10,8 @@ en:
             en_construction: This file is pending for instruction. The maximum delay is 6 months, you can extend the duration by a month by clicking on the underneath button.
             termine: This file had been processed and will soon expire. So it will be deleted soon. If you want to keep it, you can dowload a PDF file of it.
           button_delay_expiration: "Keep for one more month"
+          follow_up: File tracking
+          procedure_management: File management
           notification_management: notification management
           administrators_list: administrators list
           exports_list: exports and export templates
@@ -17,3 +19,5 @@ en:
           statistics: statistics
           instructeurs: instructors
           contact_users: Contact users with a draft file
+          downloads: Downloads
+          user_support: User support