Merge pull request #11043 from colinux/dsfr-1.12

Tech: dsfr 1.11 => 1.12, mise à jour du design des tableaux
2024-11-22 10:22:33 +00:00 · 2024-11-22 10:22:33 +00:00 · 971bc39912
commit 971bc39912
parent 87c05c5887 0286a56b78
56 changed files with 653 additions and 691 deletions
--- a/app/assets/images/footer/logo-france-services.svg
+++ b/app/assets/images/footer/logo-france-services.svg
--- a/app/assets/stylesheets/archive.scss
+++ b/app/assets/stylesheets/archive.scss
@ -1,19 +0,0 @@
-@import 'constants';
-
-table.archive-table {
-  .text-right {
-    text-align: right;
-  }
-
-  .center {
-    text-align: center;
-  }
-
-  td {
-    padding: 3 * $default-spacer $default-spacer;
-  }
-
-  a.button {
-    background-image: none; // remove DSFR underline
-  }
-}
--- a/app/assets/stylesheets/dossiers_table.scss
+++ b/app/assets/stylesheets/dossiers_table.scss
@ -1,70 +1,20 @@
@import 'colors';
@import 'constants';

-.table.dossiers-table {
-  font-size: 14px;
-
-  th {
-    padding: (2 * $default-spacer) $default-spacer;
-  }
-
+.dossiers-table {
  a {
    background-image: none; // remove DSFR underline
  }

-  .caret-icon {
-    vertical-align: top;
-    margin-top: 9px;
-    margin-left: 4px;
-  }
-
-  .cell-link {
-    // In order to have identical height in the table header and the table rows,
-    // we compensate for the height difference between the biggest element of the header
-    // (the Personnaliser button, 38px) and the biggest cell-link element of the rows (the label, 28px)
-    padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2))
-      $default-spacer;
-    display: block;
-  }
-
-  .deleted-cell {
-    padding: (2 * $default-spacer) $default-spacer;
-  }
-
-  .notification-col {
-    a {
-      font-size: 16px;
-    }
-  }
-
-  .number-col,
  .fr-badge {
    white-space: nowrap;
  }

-  .text-center {
-    text-align: center;
-  }
-
-  .status-col {
-    width: 175px;
-  }
-
-  .updated-at-col {
-    width: 110px;
-  }
-
  .follow-col {
-    width: 450px;
-
    .fr-btn {
      margin-bottom: 0;
    }
  }
-
-  .no-border {
-    background-image: none;
-  }
 }

 .file-hidden-by-user {
@ -74,7 +24,3 @@
    background-color: rgba(242, 137, 0, 0.6) !important;
  }
 }
-
-table.display-table {
-  display: table;
-}
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@ -159,11 +159,6 @@ input[type='radio'] {
  box-shadow: 0px 0px 0px 1px $light-red;
 }

-.fr-table table.hack-to-display-dropdown {
-  padding-bottom: 300px;
-  margin-bottom: -300px;
-}
-
 // on utilise le dropdown de sélecteur de langue pour un autre usage donc on veut retirer l'icone
 .fr-translate .fr-translate__btn.custom-fr-translate-no-icon::before {
  display: none;
@ -174,21 +169,6 @@ input[type='radio'] {
  width: max-content;
 }

-button.fr-tag-bug {
-  background-color: $blue-france-500;
-  color: #ffffff;
-
-  &:hover {
-    background-color: #1212ff;
-    color: #ffffff;
-  }
-
-  .tag-dismiss {
-    font-size: 1rem;
-    margin-left: 10px;
-  }
-}
-
 // on applique le comportement desktop du sélecteur de langue aux terminaux de toute dimension
 .fr-translate .fr-menu__list {
  display: grid;
@ -248,13 +228,6 @@ button.fr-tag-bug {
  display: block; // Pour cette valeur spécifique, on récupère celle de .fr-label
 }

-// Fix toggles having labels on 2 lines
-// From upstream https://github.com/GouvernementFR/dsfr/pull/928
-// Remove it when PR is merged (v1.12 ?)
-.fr-toggle label[data-fr-unchecked-label][data-fr-checked-label]::before {
-  word-wrap: normal;
-}
-
 // We use the DSFR badge design to highlight the email in France Connect page
 // but we don't want it to be uppercase
 .fr-badge--lowercase {
@ -266,7 +239,16 @@ button.fr-tag-bug {
  white-space: nowrap;
 }

+// Caption is bold, but all-procedures table use fr-tag in caption
+.fr-table caption .fr-tag {
+  font-weight: normal;
+}
+
 // We remove the line height because it creates unharmonized spaces - most of all in table
 .fr-tags-group > li {
  line-height: inherit;
 }
+
+.fr-cell--numeric {
+  font-variant-numeric: tabular-nums;
+}
--- a/app/assets/stylesheets/flex.scss
+++ b/app/assets/stylesheets/flex.scss
@ -56,6 +56,10 @@
  flex-grow: 1;
 }

+.flex-no-grow {
+  flex-grow: 0;
+}
+
 .flex-no-shrink {
  flex-shrink: 0;
 }
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@ -9,15 +9,6 @@
 }

 #procedure-show {
-  .titre-dossiers {
-    text-align: center;
-  }
-
-  .dossiers-table {
-    margin-top: $default-spacer;
-    margin-bottom: 3 * $default-spacer;
-  }
-
  .procedure-actions {
    margin-left: auto;
    flex-shrink: 0;
@ -48,9 +39,4 @@
  .fr-ds-combobox__multiple {
    margin-bottom: $default-fields-spacer;
  }
-
-  // fix/dsfr
-  .fr-checkbox-group.fix-dsfr-notified-toggle-component {
-    margin-top: -0.5rem;
-  }
 }
--- a/app/assets/stylesheets/table.scss
+++ b/app/assets/stylesheets/table.scss
@ -27,12 +27,6 @@
    }
  }

-  &.hoverable {
-    tbody tr:hover {
-      background-color: var(--hover);
-    }
-  }
-
  &.vertical {
    font-size: 16px;
    line-height: 22px;
@ -52,22 +46,3 @@
    }
  }
 }
-
-.force-table-100 {
-  width: calc(100vw);
-}
-
-.fr-table--bordered {
-  .table {
-    &.hoverable {
-      tbody tr:hover {
-        background-color: var(--hover);
-      }
-    }
-  }
-}
-
-// Hacky css to display dropdown "customize table" for table with only 1 or 2 lines
-table.min-height-300 {
-  min-height: 300px;
-}
--- a/app/components/dossiers/batch_select_more_component/batch_select_more_component.html.haml
+++ b/app/components/dossiers/batch_select_more_component/batch_select_more_component.html.haml
@ -1,5 +1,5 @@
-%tr#js_batch_select_more.fr-background-alt--blue-france.hidden
-  %td.fr-py-2w.text-center{ colspan: 100 }
+%tr#js_batch_select_more.hidden
+  %td.fr-py-2w.fr-cell--center.fr-background-alt--blue-france{ colspan: 100 }
    #not_selected
      %p{ role: "status" }
        = t('.pagination_files_selected_html')
--- a/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
+++ b/app/components/dossiers/deleted_dossiers_component/deleted_dossiers_component.html.haml
@ -16,31 +16,38 @@
          %li
            = t(".deleted_explanation_second_#{role}")

-    .fr-table.fr-table--layout-fixed.fr-mt-3w
-      %table
-        %thead
-          %tr
-            %th.number-col N° dossier
-            %th Libellé de la démarche
-            %th Raison de suppression
-            %th Date de suppression
-        %tbody
-          - @deleted_dossiers.each do |deleted_dossier|
-            %tr
-              %td.number-col
-                = deleted_dossier.dossier_id
+    .fr-table
+      .fr-table__wrapper
+        .fr-table__container
+          .fr-table__content
+            %table
+              %thead
+                %tr
+                  %th N° dossier
+                  %th Libellé de la démarche
+                  %th Raison de suppression
+                  %th Date de suppression
+              %tbody
+                - @deleted_dossiers.each do |deleted_dossier|
+                  %tr
+                    %td.fr-cell--numeric
+                      = deleted_dossier.dossier_id

-              %td.number-col
-                = deleted_dossier.procedure.libelle.truncate_words(10)
+                    %td.fr-cell--numeric
+                      = deleted_dossier.procedure.libelle.truncate_words(10)

-              %td
-                = deletion_reason_badge(deleted_dossier.reason)
-                -# .fr-badge
-                -#   = t("activerecord.attributes.deleted_dossier.reason.#{deleted_dossier.reason}")
-              %td.deleted-cell
-                = l(deleted_dossier.deleted_at, format: '%d/%m/%y')
+                    %td
+                      = deletion_reason_badge(deleted_dossier.reason)
+                      -# .fr-badge
+                      -#   = t("activerecord.attributes.deleted_dossier.reason.#{deleted_dossier.reason}")
+                    %td.deleted-cell
+                      = l(deleted_dossier.deleted_at, format: '%d/%m/%y')

-      = paginate @deleted_dossiers, views_prefix: 'shared'
+      .fr-table__footer
+        .fr-table__footer--start
+        .fr-table__footer--middle
+          = paginate @deleted_dossiers, views_prefix: 'shared'
+        .fr-table__footer--end.flex-no-grow

  - else
    %p
--- a/app/components/dossiers/export_dropdown_component.rb
+++ b/app/components/dossiers/export_dropdown_component.rb
@ -3,7 +3,10 @@
 class Dossiers::ExportDropdownComponent < ApplicationComponent
  include ApplicationHelper

-  def initialize(procedure:, export_templates: nil, statut: nil, count: nil, class_btn: nil, export_url: nil, show_export_template_tab: true)
+  attr_reader :wrapper
+  attr_reader :export_templates
+
+  def initialize(procedure:, export_templates: nil, statut: nil, count: nil, class_btn: nil, export_url: nil, show_export_template_tab: true, wrapper: :div)
    @procedure = procedure
    @export_templates = export_templates
    @statut = statut
@ -11,6 +14,7 @@ class Dossiers::ExportDropdownComponent < ApplicationComponent
    @class_btn = class_btn
    @export_url = export_url
    @show_export_template_tab = show_export_template_tab
+    @wrapper = wrapper
  end

  def formats
@ -32,8 +36,4 @@ class Dossiers::ExportDropdownComponent < ApplicationComponent
      statut: @statut,
      no_progress_notification: no_progress_notification)
  end
-
-  def export_templates
-    @export_templates
-  end
 end
--- a/app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml
+++ b/app/components/dossiers/export_dropdown_component/export_dropdown_component.html.haml
@ -1,4 +1,4 @@
-= render Dropdown::MenuComponent.new(wrapper: :div, button_options: { class: ['fr-btn--sm', @class_btn.present? ? @class_btn : 'fr-btn--secondary']}, menu_options: { id: @count.nil? ? "download_menu" : "download_all_menu", class: ['dropdown-export'] }) do |menu|
+= render Dropdown::MenuComponent.new(wrapper:, button_options: { class: ['fr-btn--sm', @class_btn.present? ? @class_btn : 'fr-btn--secondary']}, menu_options: { id: @count.nil? ? "download_all_menu" : "download_menu", class: ['dropdown-export'] }) do |menu|
  - menu.with_button_inner_html do
    = @count.nil? ? t(".download_all") : t(".download", count: @count)

--- a/app/components/dsfr/toggle_component.rb
+++ b/app/components/dsfr/toggle_component.rb
@ -1,6 +1,14 @@
 # frozen_string_literal: true

 class Dsfr::ToggleComponent < ApplicationComponent
+  attr_reader :target
+  attr_reader :title
+  attr_reader :hint
+  attr_reader :toggle_labels
+  attr_reader :disabled
+  attr_reader :data
+  attr_reader :extra_class_names
+
  def initialize(form:, target:, title:, disabled: nil, hint: nil, toggle_labels: { checked: 'Activé', unchecked: 'Désactivé' }, opt: nil, extra_class_names: nil)
    @form = form
    @target = target
@ -8,9 +16,13 @@ class Dsfr::ToggleComponent < ApplicationComponent
    @hint = hint
    @disabled = disabled
    @toggle_labels = toggle_labels
-    @opt = opt
+    @data = opt
    @extra_class_names = extra_class_names
  end

-  attr_reader :toggle_labels, :extra_class_names
+  private
+
+  def input_id
+    dom_id(@form.object, target)
+  end
 end
--- a/app/components/dsfr/toggle_component/toggle_component.html.haml
+++ b/app/components/dsfr/toggle_component/toggle_component.html.haml
@ -1,9 +1,10 @@
 %div{ class: "fr-toggle fr-toggle--label-left #{extra_class_names}" }
-  = @form.check_box @target, class: 'fr-toggle__input', disabled: @disabled,
-    data: @opt
-  = @form.label @target,
-    @title,
+  = @form.check_box target, class: 'fr-toggle__input', disabled:, data:, id: input_id
+  = @form.label target,
+    title,
+    for: input_id,
    data: { 'fr-checked-label': toggle_labels[:checked], 'fr-unchecked-label': toggle_labels[:unchecked] },
    class: 'fr-toggle__label'
-  - if @hint
-    %p.fr-hint-text= @hint
+
+  - if hint
+    %p.fr-hint-text= hint
--- a/app/components/instructeurs/column_table_header_component.rb
+++ b/app/components/instructeurs/column_table_header_component.rb
@ -10,7 +10,6 @@ class Instructeurs::ColumnTableHeaderComponent < ApplicationComponent
  private

  def classname(column)
-    return 'status-col' if column.dossier_state?
    return 'number-col' if column.dossier_id?
    return 'sva-col' if column.column == 'sva_svr_decision_on'
  end
--- a/app/controllers/instructeurs/procedures_controller.rb
+++ b/app/controllers/instructeurs/procedures_controller.rb
@ -137,11 +137,6 @@ module Instructeurs
        .groupe_instructeurs
        .where(procedure: procedure)

-      @can_download_dossiers = current_instructeur
-        .dossiers
-        .visible_by_administration
-        .exists?(groupe_instructeur_id: groupe_instructeur_ids) && !instructeur_as_manager?
-
      export = Export.find_or_create_fresh_export(export_format, groupe_instructeurs, current_instructeur, **export_options)

      @procedure = procedure
--- a/app/javascript/controllers/batch_operation_controller.ts
+++ b/app/javascript/controllers/batch_operation_controller.ts
@ -17,10 +17,16 @@ export class BatchOperationController extends ApplicationController {
  onCheckAll(event: Event) {
    const target = event.target as HTMLInputElement;

-    this.inputTargets.forEach((e) => (e.checked = target.checked));
+    this.inputTargets.forEach((e) => {
+      e.checked = target.checked;
+      e.dispatchEvent(new Event('change')); // dispatch change for dsfr checkbox behavior
+    });
+
    this.toggleSubmitButtonWhenNeeded();

-    const pagination = document.querySelector('tfoot .fr-pagination');
+    const pagination = document.querySelector(
+      '.fr-table__footer .fr-pagination'
+    );
    if (pagination) {
      displayNotice(this.inputTargets);
    }
--- a/app/javascript/shared/dsfr.ts
+++ b/app/javascript/shared/dsfr.ts
@ -4,6 +4,7 @@ import '@gouvfr/dsfr/dist/scheme/scheme.module';
 import '@gouvfr/dsfr/dist/component/display/display.module';
 import '@gouvfr/dsfr/dist/component/toggle/toggle.module';
 import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module';
+import '@gouvfr/dsfr/dist/component/checkbox/checkbox.module';
 import '@gouvfr/dsfr/dist/component/modal/modal.module';
 import '@gouvfr/dsfr/dist/component/navigation/navigation.module';
 import '@gouvfr/dsfr/dist/component/segmented/segmented.module';
--- a/app/views/administrateurs/archives/index.html.haml
+++ b/app/views/administrateurs/archives/index.html.haml
@ -4,12 +4,14 @@
                    ['Export et Archives']] }


-.container.flex
-  %h1.mb-2.mr-2
+.fr-container.flex
+  %h1
    Archives
    -# index not renderable as administrateur flagged as manager, so render it anyway
-  = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_url: method(:download_admin_procedure_exports_path), show_export_template_tab: false)
-.container
+  .fr-ml-2w.fr-my-1w
+    = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_url: method(:download_admin_procedure_exports_path), show_export_template_tab: false)
+
+.fr-container
  = render Dossiers::ExportLinkComponent.new(procedure: @procedure, exports: @exports, export_url: method(:download_admin_procedure_exports_path))

  = render partial: "shared/archives/notice"
--- a/app/views/administrateurs/experts_procedures/index.html.haml
+++ b/app/views/administrateurs/experts_procedures/index.html.haml
@ -4,8 +4,7 @@
                    ['Avis externes']] }

 .fr-container
-  %h1.fr-h2
-    Avis externes
+  %h1 Avis externes

  = render Dsfr::CalloutComponent.new(title: nil) do |c|
    - c.with_body do
@ -15,106 +14,106 @@
          title: t('.experts_doc.title'),
          **external_link_attributes)

-  %ul.fr-toggle__list
-    %li
-      = form_for @procedure,
-        method: :put,
-        url: allow_expert_review_admin_procedure_path(@procedure),
-        data: { controller: 'autosubmit', turbo: 'true' } do |f|
+  %fieldset.fr-fieldset
+    .fr-fieldset__element
+      %ul.fr-toggle__list
+        %li
+          = form_for @procedure,
+            method: :put,
+            url: allow_expert_review_admin_procedure_path(@procedure),
+            data: { controller: 'autosubmit', turbo: 'true' } do |f|

-        = render Dsfr::ToggleComponent.new(form: f,
-          target: :allow_expert_review,
-          title: t('.titles.allow_invite_experts'),
-          hint: t('.descriptions.allow_invite_experts'),
-          disabled: false,
-          extra_class_names: 'fr-toggle--border-bottom')
+            = render Dsfr::ToggleComponent.new(form: f,
+              target: :allow_expert_review,
+              title: t('.titles.allow_invite_experts'),
+              hint: t('.descriptions.allow_invite_experts'),
+              disabled: false,
+              extra_class_names: 'fr-toggle--border-bottom')

-    - if @procedure.allow_expert_review?
-      %li
-        = form_for @procedure,
-          method: :put,
-          url: allow_expert_messaging_admin_procedure_path(@procedure),
-          data: { controller: 'autosubmit', turbo: 'true' } do |f|
+        - if @procedure.allow_expert_review?
+          %li
+            = form_for @procedure,
+              method: :put,
+              url: allow_expert_messaging_admin_procedure_path(@procedure),
+              data: { controller: 'autosubmit', turbo: 'true' } do |f|

-          = render Dsfr::ToggleComponent.new(form: f,
-            target: :allow_expert_messaging,
-            title: t('.titles.allow_expert_messaging'),
-            hint: t('.descriptions.allow_expert_messaging'),
-            disabled: false,
-            extra_class_names: 'fr-toggle--border-bottom')
+              = render Dsfr::ToggleComponent.new(form: f,
+                target: :allow_expert_messaging,
+                title: t('.titles.allow_expert_messaging'),
+                hint: t('.descriptions.allow_expert_messaging'),
+                disabled: false,
+                extra_class_names: 'fr-toggle--border-bottom')

-      %li
-        = form_for @procedure,
-          method: :put,
-          url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
-          data: { controller: 'autosubmit', turbo: 'true' } do |f|
+          %li
+            = form_for @procedure,
+              method: :put,
+              url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
+              data: { controller: 'autosubmit', turbo: 'true' } do |f|

-          = render Dsfr::ToggleComponent.new(form: f,
-            target: :experts_require_administrateur_invitation,
-            title: t('.titles.manage_procedure_experts'),
-            hint: t('.descriptions.manage_procedure_experts'),
-            disabled: false)
+              = render Dsfr::ToggleComponent.new(form: f,
+                target: :experts_require_administrateur_invitation,
+                title: t('.titles.manage_procedure_experts'),
+                hint: t('.descriptions.manage_procedure_experts'),
+                disabled: false)


-      - if @procedure.experts_require_administrateur_invitation?
-        .card
-          = render Procedure::InvitationWithTypoComponent.new(maybe_typos: @maybe_typos, url: admin_procedure_experts_path(@procedure), title: "Avant d'ajouter l'email à la liste d'expert prédéfinie, veuillez confirmer" )
-          = form_for :experts_procedure,
-            url: admin_procedure_experts_path(@procedure),
-            html: { class: 'form' } do |f|
+  - if @procedure.experts_require_administrateur_invitation?
+    .card
+      = render Procedure::InvitationWithTypoComponent.new(maybe_typos: @maybe_typos, url: admin_procedure_experts_path(@procedure), title: "Avant d'ajouter l'email à la liste d'expert prédéfinie, veuillez confirmer" )
+      = form_for :experts_procedure,
+        url: admin_procedure_experts_path(@procedure),
+        html: { class: 'form' } do |f|

-            .instructeur-wrapper
-              %p#experts-emails Entrez les adresses emails des experts que vous souhaitez ajouter à la liste prédéfinie
-              %react-fragment
-                = render ReactComponent.new "ComboBox/MultiComboBox",
-                  id: 'emails',
-                  name: 'emails[]',
-                  allows_custom_value: true,
-                  'aria-label': 'Emails',
-                  'aria-describedby': 'experts-emails'
+        .instructeur-wrapper
+          %p#experts-emails Entrez les adresses emails des experts que vous souhaitez ajouter à la liste prédéfinie
+          %react-fragment
+            = render ReactComponent.new "ComboBox/MultiComboBox",
+              id: 'emails',
+              name: 'emails[]',
+              allows_custom_value: true,
+              'aria-label': 'Emails',
+              'aria-describedby': 'experts-emails'

-              = f.submit 'Ajouter à la liste', class: 'fr-btn'
+          = f.submit 'Ajouter à la liste', class: 'fr-btn'

-    - if @experts_procedure.present?
-      .fr-table.fr-table--no-caption.fr-table--layout-fixed.fr-mt-3w
-        %table
-          %thead
+  - if @experts_procedure.present?
+    .fr-table.fr-table--no-caption.fr-table--layout-fixed.fr-mt-3w
+      %table
+        %thead
+          %tr
+            %th Liste des experts
+            %th Nombre d’avis
+            - if @procedure.experts_require_administrateur_invitation
+              %th Notifier des décisions sur les dossiers
+            - if @procedure.experts_require_administrateur_invitation
+              %th Action
+        %tbody
+          - @experts_procedure.each do |expert_procedure|
            %tr
-              %th Liste des experts
-              %th Nombre d’avis
+              %td
+                = dsfr_icon('fr-icon-user-fill')
+                = expert_procedure.expert.email
+              %td.fr-cell--center
+                = expert_procedure.avis.count
              - if @procedure.experts_require_administrateur_invitation
-                %th Notifier des décisions sur les dossiers
+                %td.fr-cell--center
+                  = form_for expert_procedure,
+                    url: admin_procedure_expert_path(id: expert_procedure),
+                    method: :put,
+                    data: { controller: 'autosubmit', turbo: 'true' } do |f|
+                    = render Dsfr::ToggleComponent.new(form: f,
+                      title: "Notifier",
+                      target: :allow_decision_access,
+                    )
              - if @procedure.experts_require_administrateur_invitation
-                %th Action
-          %tbody
-            - @experts_procedure.each do |expert_procedure|
-              %tr
-                %td
-                  = dsfr_icon('fr-icon-user-fill')
-                  = expert_procedure.expert.email
-                %td.text-center
-                  = expert_procedure.avis.count
-                - if @procedure.experts_require_administrateur_invitation
-                  %td.text-center
-                    = form_for expert_procedure,
-                      url: admin_procedure_expert_path(id: expert_procedure),
-                      method: :put,
-                      data: { turbo: true },
-                      html: { class: 'form procedure-form__column--form no-background' } do |f|
-                      %label.toggle-switch{ data: { controller: 'autosubmit' } }
-                        = f.check_box :allow_decision_access, class: 'toggle-switch-checkbox'
-                        %span.toggle-switch-control.round
-                        %span.toggle-switch-label.on
-                        %span.toggle-switch-label.off
-                - if @procedure.experts_require_administrateur_invitation
-                  %td.actions= button_to 'retirer',
-                    admin_procedure_expert_path(id: expert_procedure, procedure: @procedure),
-                    method: :delete,
-                    data: { confirm: "Êtes-vous sûr de vouloir révoquer l'expert « #{expert_procedure.expert.email} » de la démarche #{expert_procedure.procedure.libelle} ? Les instructeurs ne pourront plus lui demander d’avis" },
-                    class: 'fr-btn fr-btn--secondary'
-    - else
-      .blank-tab
-        %h2.empty-text Aucun expert invité pour le moment.
-        %p.empty-text-details Les instructeurs de cette démarche n’ont pas encore fait appel aux experts.
+                %td.actions= button_to 'Retirer',
+                  admin_procedure_expert_path(id: expert_procedure, procedure: @procedure),
+                  method: :delete,
+                  data: { confirm: "Êtes-vous sûr de vouloir révoquer l'expert « #{expert_procedure.expert.email} » de la démarche #{expert_procedure.procedure.libelle} ? Les instructeurs ne pourront plus lui demander d’avis" },
+                  class: 'fr-btn fr-btn--secondary'
+  - else
+    .blank-tab
+      %h2.empty-text Aucun expert invité pour le moment.
+      %p.empty-text-details Les instructeurs de cette démarche n’ont pas encore fait appel aux experts.

 = render Procedure::FixedFooterComponent.new(procedure: @procedure)
--- a/app/views/administrateurs/exports/download.turbo_stream.haml
+++ b/app/views/administrateurs/exports/download.turbo_stream.haml
@ -1,4 +1 @@
-# not renderable as administrateur flagged as manager, so render it anyway
- if @can_download_dossiers
-  = turbo_stream.update_all '.procedure-actions' do
-    = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, count: @dossiers_count, export_url: method(:admin_procedure_exports_path))
+-# empty file so notice are still rendered
--- a/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
@ -19,28 +19,38 @@
  %hr.fr-mt-4w

  .flex.justify-between.align-baseline
-    .card-title= t('.assigned_instructeur', count: instructeurs.count)
+    .card-title= t('.assigned_instructeur', count: instructeurs.total_count)
    = button_to export_groupe_instructeurs_admin_procedure_groupe_instructeurs_path(procedure, format: :csv), method: :get, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-download-line' do
      Exporter la liste (.CSV)

-  %table.fr-table.fr-table--bordered.width-100
-    %thead
-      %tr
-        %th= t('.title')
-        %th.text-right= t('.actions')
-    %tbody
-      - instructeurs.each do |instructeur|
-        %tr
-          %td
-            = dsfr_icon('fr-icon-user-line')
-            #{instructeur.email}
+  .fr-table
+    .fr-table__wrapper
+      .fr-table__container
+        .fr-table__content
+          %table
+            %thead
+              %tr
+                %th{ scope: 'col' }= t('.title')
+                %th{ scope: 'col' }= t('.actions')
+            %tbody
+              - instructeurs.each do |instructeur|
+                %tr
+                  %td
+                    = dsfr_icon('fr-icon-user-line')
+                    #{instructeur.email}

-          - confirmation_message = procedure.routing_enabled? ? "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » du groupe « #{groupe_instructeur.label} » ?" : "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » de la démarche ?"
-          %td.actions= button_to t('.remove'),
-            { action: :remove_instructeur, id: groupe_instructeur.id },
-            { method: :delete,
-              data: { confirm: confirmation_message },
-              params: { instructeur: { id: instructeur.id }},
-              class: 'fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-subtract-line' }
+                  - confirmation_message = procedure.routing_enabled? ? "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » du groupe « #{groupe_instructeur.label} » ?" : "Êtes-vous sûr de vouloir retirer l’instructeur « #{instructeur.email} » de la démarche ?"
+                  %td.actions= button_to t('.remove'),
+                    { action: :remove_instructeur, id: groupe_instructeur.id },
+                    { method: :delete,
+                      data: { confirm: confirmation_message },
+                      params: { instructeur: { id: instructeur.id }},
+                      class: 'fr-btn fr-btn--sm fr-btn--secondary fr-btn--icon-left fr-icon-subtract-line' }

-  = paginate instructeurs, views_prefix: 'shared'
+    .fr-table__footer
+      .fr-table__footer--start
+        %p.fr-table__detail
+          = number_with_delimiter instructeurs.total_count
+          = t('activerecord.models.instructeur', count: instructeurs.total_count).downcase
+      .fr-table__footer--middle
+        = paginate instructeurs, views_prefix: 'shared'
--- a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
@ -4,23 +4,34 @@
                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
                    [@groupe_instructeur.label]] }

-.container.groupe-instructeur
+.fr-container
+  %h1.fr-h2 Réaffectation des dossiers du groupe « #{@groupe_instructeur.label} »
+  %p
+    Le groupe « #{@groupe_instructeur.label} » contient des dossiers. Afin de procéder à sa suppression, vous devez réaffecter ses dossiers à un autre groupe d’instructeurs.

-  .card
-    .card-title Réaffectation des dossiers du groupe « #{@groupe_instructeur.label} »
-    %p
-      Le groupe « #{@groupe_instructeur.label} » contient des dossiers. Afin de procéder à sa suppression, vous devez réaffecter ses dossiers à un autre groupe d’instructeurs.
-    %table.table.mt-2
-      %thead
-        %tr
-          %th{ colspan: 2 }= t(".existing_groupe", count: @groupes_instructeurs.total_count)
-      %tbody
-        - @groupes_instructeurs.each do |group|
-          .flex.justify-between.align-center.fr-mb-2w
-            %p.fr-mb-0= group.label
-            = button_to 'Réaffecter les dossiers à ce groupe',
-              reaffecter_admin_procedure_groupe_instructeur_path(:target_group => group),
-              { class: 'fr-btn fr-btn--secondary fr-btn--sm',
-                data: { confirm: "Êtes-vous sûr de vouloir réaffecter les dossiers du groupe « #{@groupe_instructeur.label} » vers le groupe  « #{group.label} » ?" } }
+  .fr-table
+    .fr-table__wrapper
+      .fr-table__container
+        .fr-table__content
+          %table
+            %caption
+              = t(".existing_groupe", count: @groupes_instructeurs.total_count)
+            %thead
+              %tr
+                %th{ scope: 'col' } Groupe
+                %th{ scope: 'col' } Réaffectation
+            %tbody
+              - @groupes_instructeurs.each do |group|
+                %tr
+                  %td= group.label
+                  %td
+                    = button_to 'Réaffecter les dossiers à ce groupe',
+                      reaffecter_admin_procedure_groupe_instructeur_path(:target_group => group),
+                      { class: 'fr-btn fr-btn--secondary fr-btn--sm',
+                        data: { confirm: "Êtes-vous sûr de vouloir réaffecter les dossiers du groupe « #{@groupe_instructeur.label} » vers le groupe  « #{group.label} » ?" } }

-    = paginate @groupes_instructeurs, views_prefix: 'shared'
+    .fr-table__footer
+      .fr-table__footer--start
+        %p.fr-table__detail
+      .fr-table__footer--middle
+        = paginate @groupes_instructeurs, views_prefix: 'shared'
--- a/app/views/administrateurs/labels/index.html.haml
+++ b/app/views/administrateurs/labels/index.html.haml
@ -13,7 +13,7 @@
    class: "fr-btn fr-btn--primary fr-btn--icon-left fr-icon-add-circle-line mb-3"

  - if @procedure.labels.present?
-    .fr-table.fr-table--layout-fixed.fr-table--bordered
+    .fr-table.fr-table--layout-fixed
      %table
        %caption Liste des labels
        %thead
--- a/app/views/administrateurs/procedures/_detail.html.haml
+++ b/app/views/administrateurs/procedures/_detail.html.haml
@ -1,9 +1,9 @@
 %tr.procedure{ id: "procedure_#{procedure.id}" }
-  %td
+  %th.fr-cell--fixed{ scope: 'row' }
    - title = show_detail ? 'Cacher les détails de la démarche' : 'Afficher les détails de la démarche'
    - icon = show_detail ? 'fr-icon-subtract-line' : 'fr-icon-add-line'
    - params = show_detail ? {} : { show_detail: true }
-    = button_to detail_admin_procedure_path(procedure["id"]), method: :post, params:, title:, class: [icon, "fr-icon--sm fr-mr-1w fr-mb-1w fr-text-action-high--blue-france fr-btn fr-btn--tertiary-no-outline" ] do
+    = button_to detail_admin_procedure_path(procedure["id"]), method: :post, params:, title:, class: [icon, "fr-icon--sm fr-mb-1w fr-text-action-high--blue-france fr-btn fr-btn--tertiary-no-outline" ] do
      = title
  %td
    - if procedure.template
@ -11,7 +11,7 @@
      %abbr{ title: APPLICATION_NAME }= acronymize(APPLICATION_NAME)
    = procedure.libelle
  %td= procedure.id
-  %td= procedure.estimated_dossiers_count
+  %td.fr-cell--right= procedure.estimated_dossiers_count
  %td
    - if procedure.respond_to?(:parsed_latest_zone_labels)
      - procedure.parsed_latest_zone_labels.uniq.each do |zone_label|
@ -31,8 +31,7 @@

 - if show_detail
  %tr.procedure{ id: "procedure_detail_#{procedure.id}" }
-    %td.fr-highlight--green-emeraude{ colspan: '8' }
-      .fr-container
-        .fr-col-6
-          - procedure.administrateurs.uniq.each do |admin|
-            = admin.email
+    %td.fr-background-alt--green-emeraude{ colspan: '8' }
+      %ul
+        - procedure.administrateurs.uniq.each do |admin|
+          %li= admin.email
--- a/app/views/administrateurs/procedures/all.html.haml
+++ b/app/views/administrateurs/procedures/all.html.haml
@ -14,55 +14,64 @@
    .actions
      .link.fr-mx-1w= link_to 'Voir les administrateurs', administrateurs_admin_procedures_path(@filter.params), class: 'fr-btn fr-btn--secondary'
      .link.fr-mx-1w{ "data-turbo": "false" }= link_to 'Exporter les résultats', all_admin_procedures_path(@filter.params.merge(format: :xlsx)), class: 'fr-btn fr-btn--secondary'
-  .fr-table.fr-table--bordered
-    %table#all-demarches
-      %caption
-        = "#{@procedures.total_count} #{t('pluralize.procedures', count: @procedures.total_count)}"
-        %span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
-      - if @filter.libelle
-        .selected-query.fr-mb-2w
-          = link_to @filter.libelle, all_admin_procedures_path(@filter.without(:libelle)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.service_siret
-        .selected-query.fr-mb-2w
-          = link_to @filter.service_siret, all_admin_procedures_path(@filter.without(:service_siret)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.service_departement
-        .selected-query.fr-mb-2w
-          = link_to "#{@filter.service_departement} – #{APIGeoService.departement_name(@filter.service_departement)}", all_admin_procedures_path(@filter.without(:service_departement)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.selected_zones.present?
-        .selected-zones.fr-mb-2w
-          - @filter.selected_zones.each do |zone|
-            = link_to zone.current_label, all_admin_procedures_path(@filter.without(:zone_ids, zone.id)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.statuses.present?
-        .selected-statuses.fr-mb-2w
-          - @filter.statuses.each do |status|
-            = link_to status, all_admin_procedures_path(@filter.without(:statuses, status)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.kind_usagers.present?
-        .selected-kind_usagers.fr-mb-2w
-          - @filter.kind_usagers.each do |kind_usager|
-            = link_to t(kind_usager, scope: 'activerecord.attributes.procedure.kind_usager'), all_admin_procedures_path(@filter.without(:kind_usagers, kind_usager)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.tags.present?
-        .selected-tag.fr-mb-2w
-          - @filter.tags.each do |tag|
-            = link_to tag, all_admin_procedures_path(@filter.without(:tags, tag)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-            - params[:tags].delete(tag)
-      - if @filter.template?
-        .selected-template.fr-mb-2w
-          = link_to "Modèle DS", all_admin_procedures_path(@filter.without(:template)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      - if @filter.from_publication_date.present?
-        .selected-from-publication-date.fr-mb-2w
-          = link_to "Depuis #{l(@filter.from_publication_date)}", all_admin_procedures_path(@filter.without(:from_publication_date)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
-      = paginate @procedures, params: @filter.params, views_prefix: 'shared'
-      %thead
-        %tr
-          %th{ scope: 'col' }
-          %th{ scope: 'col' } Démarche
-          %th{ scope: 'col' } №
-          %th{ scope: 'col' } Nombre de dossiers
-          %th{ scope: 'col' } Zones
-          %th{ scope: 'col' } Statut
-          %th{ scope: 'col' } Date
-          %th{ scope: 'col' } Action
-      %tbody{ 'data-turbo': 'true' }
-        - @procedures.each do |procedure|
-          = render partial: 'detail', locals: { procedure: procedure, show_detail: false }
-    .fr-mt-2w= paginate @procedures, params: @filter.params, views_prefix: 'shared'
+
+  - if @filter.libelle
+    .selected-query.fr-mb-2w
+      = link_to @filter.libelle, all_admin_procedures_path(@filter.without(:libelle)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.service_siret
+    .selected-query.fr-mb-2w
+      = link_to @filter.service_siret, all_admin_procedures_path(@filter.without(:service_siret)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.service_departement
+    .selected-query.fr-mb-2w
+      = link_to "#{@filter.service_departement} – #{APIGeoService.departement_name(@filter.service_departement)}", all_admin_procedures_path(@filter.without(:service_departement)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.selected_zones.present?
+    .selected-zones.fr-mb-2w
+      - @filter.selected_zones.each do |zone|
+        = link_to zone.current_label, all_admin_procedures_path(@filter.without(:zone_ids, zone.id)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.statuses.present?
+    .selected-statuses.fr-mb-2w
+      - @filter.statuses.each do |status|
+        = link_to status, all_admin_procedures_path(@filter.without(:statuses, status)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.kind_usagers.present?
+    .selected-kind_usagers.fr-mb-2w
+      - @filter.kind_usagers.each do |kind_usager|
+        = link_to t(kind_usager, scope: 'activerecord.attributes.procedure.kind_usager'), all_admin_procedures_path(@filter.without(:kind_usagers, kind_usager)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.tags.present?
+    .selected-tag.fr-mb-2w
+      - @filter.tags.each do |tag|
+        = link_to tag, all_admin_procedures_path(@filter.without(:tags, tag)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+        - params[:tags].delete(tag)
+  - if @filter.template?
+    .selected-template.fr-mb-2w
+      = link_to "Modèle DS", all_admin_procedures_path(@filter.without(:template)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+  - if @filter.from_publication_date.present?
+    .selected-from-publication-date.fr-mb-2w
+      = link_to "Depuis #{l(@filter.from_publication_date)}", all_admin_procedures_path(@filter.without(:from_publication_date)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'
+
+  .fr-table.fr-table--sm.fr-table--no-scroll.fr-table--bordered{ 'data-turbo': 'true', 'data-turbo-force': 'server' }
+    .fr-table__wrapper
+      .fr-table__container
+        .fr-table__content
+          %table
+            %caption
+              = "#{@procedures.total_count} #{t('pluralize.procedures', count: @procedures.total_count)}"
+              %span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
+
+            %thead
+              %tr
+                %th{ role: 'columnheader' }
+                %th{ scope: 'col' } Démarche
+                %th{ scope: 'col' } №
+                %th{ scope: 'col' } Nombre de dossiers
+                %th{ scope: 'col' } Zones
+                %th{ scope: 'col' } Statut
+                %th{ scope: 'col' } Date
+                %th{ scope: 'col' } Action
+            %tbody
+              - @procedures.each do |procedure|
+                = render partial: 'detail', locals: { procedure: procedure, show_detail: false }
+    .fr-table__footer
+      .fr-table__footer--start
+      .fr-table__footer--middle
+        = paginate @procedures, params: @filter.params, views_prefix: 'shared'
+      .fr-table__footer--end.flex-no-grow
--- a/app/views/experts/avis/procedure.html.haml
+++ b/app/views/experts/avis/procedure.html.haml
@ -29,20 +29,28 @@

 .fr-container
  - if @avis.present?
-    %table.table.dossiers-table.hoverable
-      %thead
-        %tr
-          %th.number-col Nº dossier
-          %th Demandeur
-          %th Démarche
-      %tbody
-        - @avis.each do |avis|
-          %tr
-            %td.number-col
-              = link_to(expert_avis_path(avis.procedure, avis), class: 'cell-link') do
-                = avis.dossier.id
-            %td= link_to(avis.dossier.user_email_for(:display), expert_avis_path(avis.procedure, avis), class: 'cell-link')
-            %td= link_to(avis.procedure.libelle, expert_avis_path(avis.procedure, avis), class: 'cell-link')
-    = paginate @avis, views_prefix: 'shared'
+    .fr-table.fr-table--no-scroll.fr-table--bordered
+      .fr-table__wrapper
+        .fr-table__container
+          .fr-table__content
+            %table.dossiers-table
+              %thead
+                %tr
+                  %th Nº dossier
+                  %th Demandeur
+                  %th Démarche
+              %tbody
+                - @avis.each do |avis|
+                  %tr
+                    %td.fr-cell--numeric
+                      = link_to(expert_avis_path(avis.procedure, avis), class: 'cell-link') do
+                        = avis.dossier.id
+                    %td= link_to(avis.dossier.user_email_for(:display), expert_avis_path(avis.procedure, avis), class: 'cell-link')
+                    %td= link_to(avis.procedure.libelle, expert_avis_path(avis.procedure, avis), class: 'cell-link')
+      .fr-table__footer
+        .fr-table__footer--start
+        .fr-table__footer--middle
+          = paginate @avis, views_prefix: 'shared'
+        .fr-table__footer--end.flex-no-grow
  - else
    %h2.empty-text Aucun avis
--- a/app/views/instructeurs/procedures/_dossiers_filter_dropdown.html.haml
+++ b/app/views/instructeurs/procedures/_dossiers_filter_dropdown.html.haml
@ -1,4 +1,4 @@
-= render Dropdown::MenuComponent.new(wrapper: :div, button_options: { class: ['fr-btn--secondary', 'fr-btn--sm', 'fr-mr-1w'] }, menu_options: { id: 'filter-menu', class:['left-aligned'] }) do |menu|
+= render Dropdown::MenuComponent.new(wrapper: :div, button_options: { class: ['fr-btn--secondary', 'fr-btn--sm', 'fr-mr-1w', 'fr-mb-2w'] }, menu_options: { id: 'filter-menu', class:['left-aligned'] }) do |menu|
  - menu.with_button_inner_html do
    = t('views.instructeurs.dossiers.filters.title')

--- a/app/views/instructeurs/procedures/download_export.turbo_stream.haml
+++ b/app/views/instructeurs/procedures/download_export.turbo_stream.haml
@ -1,11 +1,2 @@
-# not renderable as instructeur flagged as manager, so render it anyway
- if @can_download_dossiers
-  - if @statut.nil?
-    = turbo_stream.update_all '.procedure-actions' do
-      = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), export_url: method(:download_export_instructeur_procedure_path))
-  - else
-    = turbo_stream.update_all '.dossiers-export' do
-      = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), statut: @statut, count: @dossiers_count, export_url: method(:download_export_instructeur_procedure_path))
-
 = turbo_stream.update "last-export-alert" do
  = render partial: "last_export_alert", locals: { export: @last_export, statut: @statut }
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@ -44,7 +44,7 @@
      %p
        = t('views.instructeurs.dossiers.tab_explainations.archives')
        %br
-        Ces dossiers seront supprimés lorsque leur délai de conservation dans Démarches-simplifiées
+        Ces dossiers seront supprimés lorsque leur délai de conservation dans #{APPLICATION_NAME}
        - if @procedure.duree_conservation_dossiers_dans_ds
          = "(#{@procedure.duree_conservation_dossiers_dans_ds} mois)"
        sera expiré.
@ -62,8 +62,15 @@

        .fr-ml-auto
          - if @dossiers_count > 0
-            %span.dossiers-export
-              = render Dossiers::ExportDropdownComponent.new(procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), statut: @statut, count: @dossiers_count, class_btn: 'fr-btn--tertiary', export_url: method(:download_export_instructeur_procedure_path))
+            %ul.fr-btns-group.fr-btns-group--right.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-left
+              = render Dossiers::ExportDropdownComponent.new(wrapper: :li, procedure: @procedure, export_templates: current_instructeur.export_templates_for(@procedure), statut: @statut, count: @dossiers_count,
+                class_btn: 'fr-btn--secondary fr-icon-download-line', export_url: method(:download_export_instructeur_procedure_path))
+
+              = render Dropdown::MenuComponent.new(wrapper: :li, button_options: { class: ['fr-btn--tertiary', 'fr-icon-settings-5-line'] }, menu_options: { id: 'custom-menu' }) do |menu|
+                - menu.with_button_inner_html do
+                  = t('views.instructeurs.dossiers.customize')
+                - menu.with_form do
+                  = render Instructeurs::ColumnPickerComponent.new(procedure: @procedure, procedure_presentation: @procedure_presentation)

    - if @filtered_sorted_paginated_ids.present? || @current_filters.count > 0
      = render Instructeurs::FilterButtonsComponent.new(filters: @current_filters, procedure_presentation: @procedure_presentation, statut: @statut)
@ -82,92 +89,102 @@
          = render batch_operation_component

        .fr-table.fr-table--bordered
-          %table.table.dossiers-table.hoverable.min-height-300
-            %thead
-              %tr
-                - if batch_operation_component.render?
-                  %th.text-center
-                    %input{ type: "checkbox", disabled: @disable_checkbox_all, checked: @disable_checkbox_all, data: { action: "batch-operation#onCheckAll" }, id: dom_id(BatchOperation.new, :checkbox_all), aria: { label: t('views.instructeurs.dossiers.select_all') } }
+          .fr-table__wrapper
+            .fr-table__container
+              .fr-table__content
+                %table#table-dossiers.dossiers-table
+                  %thead
+                    %tr
+                      - if batch_operation_component.render?
+                        %th.fr-cell--fixed{ role: 'columnheader', scope: 'col' }
+                          .fr-checkbox-group.fr-checkbox-group--sm
+                            %input{ type: "checkbox", disabled: @disable_checkbox_all, checked: @disable_checkbox_all, data: { action: "batch-operation#onCheckAll" }, id: dom_id(BatchOperation.new, :checkbox_all), aria: { label: t('views.instructeurs.dossiers.select_all') } }
+                            = label_tag dom_id(BatchOperation.new, :checkbox_all), "Sélectionner tous les dossiers", class: 'fr-label'

-                = render Instructeurs::ColumnTableHeaderComponent.new(procedure_presentation: @procedure_presentation)
+                      = render Instructeurs::ColumnTableHeaderComponent.new(procedure_presentation: @procedure_presentation)

-                %th.follow-col
-                  Actions
+                      %th.follow-col{ scope: 'col' }
+                        Actions

-                %th.text-right
-                  = render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm', 'fr-btn--tertiary-no-outline', 'fr-btn--icon-right', 'fr-icon-settings-5-line'] }, menu_options: { id: 'custom-menu' }) do |menu|
-                    - menu.with_button_inner_html do
-                      = t('views.instructeurs.dossiers.personalize')
-                    - menu.with_form do
-                      = render Instructeurs::ColumnPickerComponent.new(procedure: @procedure, procedure_presentation: @procedure_presentation)
+                  %tbody
+                    = render Dossiers::BatchSelectMoreComponent.new(dossiers_count: @dossiers_count, filtered_sorted_ids: @filtered_sorted_ids)

-            %tbody
-              = render Dossiers::BatchSelectMoreComponent.new(dossiers_count: @dossiers_count, filtered_sorted_ids: @filtered_sorted_ids)
+                    - @projected_dossiers.each do |p|
+                      - path = instructeur_dossier_path(@procedure, p.dossier_id)
+                      %tr{ class: class_names("file-hidden-by-user" => p.hidden_by_user_at.present?), id: "table-dossiers-row-#{p.dossier_id}", "aria-selected" => "false", "data-row-key" => p.dossier_id }
+                        - if batch_operation_component.render?
+                          %th.fr-cell--fixed{ scope: 'row' }
+                            .fr-checkbox-group.fr-checkbox-group--sm
+                              - if p.batch_operation_id.present?
+                                = check_box_tag "batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true,
+                                  id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"),
+                                  aria: { label: t('views.instructeurs.dossiers.batch_operation.disabled', dossier_id: p.dossier_id) },
+                                  data: { "fr-row-select" => "true" }
+                              - else
+                                = check_box_tag "batch_operation[dossier_ids][]", p.dossier_id, false,
+                                    data: { batch_operation_target: "input", action: "batch-operation#onCheckOne", operations: batch_operation_component.operations_for_dossier(p).join(','), "fr-row-select" => "true" },
+                                    form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"),
+                                    aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled', dossier_id: p.dossier_id) }
+                              = label_tag dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), "Sélectionner le dossier #{p.dossier_id}", class: 'fr-label'

-              - @projected_dossiers.each do |p|
-                - path = instructeur_dossier_path(@procedure, p.dossier_id)
-                %tr{ class: [p.hidden_by_user_at.present? && "file-hidden-by-user"] }
-                  - if batch_operation_component.render?
-                    %td.text-center
-                      - if p.batch_operation_id.present?
-                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, true, disabled: true, id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.disabled', dossier_id: p.dossier_id) }
-                      - else
-                        = check_box_tag :"batch_operation[dossier_ids][]", p.dossier_id, false, data: { batch_operation_target: "input", action: "batch-operation#onCheckOne", operations: batch_operation_component.operations_for_dossier(p).join(',') }, form: dom_id(BatchOperation.new), id: dom_id(BatchOperation.new, "checkbox_#{p.dossier_id}"), aria: { label: t('views.instructeurs.dossiers.batch_operation.enabled', dossier_id: p.dossier_id) }
-
-                  %td.number-col
-                    - if p.hidden_by_administration_at.present?
-                      %span.cell-link= p.dossier_id
-                    - else
-                      %a.cell-link.relative{ href: path }
-                        = p.dossier_id
-                        - if @not_archived_notifications_dossier_ids.include?(p.dossier_id)
-                          %span.notifications{ 'aria-label': 'notifications' }
+                        %td.fr-cell--numeric
+                          - if p.hidden_by_administration_at.present?
+                            %span.cell-link= p.dossier_id
+                          - else
+                            %a.cell-link.relative{ href: path }
+                              = p.dossier_id
+                              - if @not_archived_notifications_dossier_ids.include?(p.dossier_id)
+                                %span.notifications{ 'aria-label': 'notifications' }


-                  - p.columns.each do |column|
-                    %td
-                      - if p.hidden_by_administration_at.present?
-                        %span.cell-link
-                          = column.is_a?(Hash) ? tags_label(column[:value]) : column
-                          - if p.hidden_by_user_at.present?
-                            = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}"
-                      - else
-                        %a.cell-link{ href: path }
-                          = column.is_a?(Hash) ? tags_label(column[:value]) : column
-                          = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}" if p.hidden_by_user_at.present?
+                        - p.columns.each do |column|
+                          %td
+                            - if p.hidden_by_administration_at.present?
+                              %span.cell-link
+                                = column.is_a?(Hash) ? tags_label(column[:value]) : column
+                                - if p.hidden_by_user_at.present?
+                                  = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}"
+                            - else
+                              %a.cell-link{ href: path }
+                                = column.is_a?(Hash) ? tags_label(column[:value]) : column
+                                = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}" if p.hidden_by_user_at.present?

-                  %td.status-col
-                    - status = [status_badge(p.state)]
-                    - if p.pending_correction?
-                      - status << pending_correction_badge(:for_instructeur, html_class: "fr-mt-1v")
-                    - elsif p.state.to_sym == :en_construction && p.resolved_corrections?
-                      - status << correction_resolved_badge(html_class: "fr-mt-1v")
-                    = link_to_if(p.hidden_by_administration_at.blank?, safe_join(status), path, class: class_names("cell-link": true, "fr-py-0": status.many?))
+                        %td
+                          - status = [status_badge(p.state)]
+                          - if p.pending_correction?
+                            - status << pending_correction_badge(:for_instructeur, html_class: "fr-mt-1v")
+                          - elsif p.state.to_sym == :en_construction && p.resolved_corrections?
+                            - status << correction_resolved_badge(html_class: "fr-mt-1v")
+                          = link_to_if(p.hidden_by_administration_at.blank?, safe_join(status), path, class: "cell-link flex column")

-                  - if @procedure.sva_svr_enabled?
-                    %td
-                      %span.cell-link
-                        = link_to_if p.hidden_by_administration_at.blank?, render(Instructeurs::SVASVRDecisionBadgeComponent.new(projection_or_dossier: p, procedure: @procedure)), path
+                        - if @procedure.sva_svr_enabled?
+                          %td
+                            %span.cell-link
+                              = link_to_if p.hidden_by_administration_at.blank?, render(Instructeurs::SVASVRDecisionBadgeComponent.new(projection_or_dossier: p, procedure: @procedure)), path

-                  %td.follow-col{ colspan:'2' }
-                    %ul.inline.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
-                      = render partial: 'instructeurs/procedures/dossier_actions', locals: { procedure_id: @procedure.id,
-                                  dossier_id: p.dossier_id,
-                                  state: p.state,
-                                  archived: p.archived,
-                                  dossier_is_followed: @followed_dossiers_id.include?(p.dossier_id),
-                                  close_to_expiration: @statut == 'expirant',
-                                  hidden_by_administration: @statut == 'supprimes',
-                                  hidden_by_expired: p.hidden_by_reason == 'expired',
-                                  sva_svr: @procedure.sva_svr_enabled?,
-                                  has_blocking_pending_correction: @procedure.feature_enabled?(:blocking_pending_correction) && p.pending_correction?,
-                                  turbo: false,
-                                  with_menu: false }
+                        %td.follow-col
+                          %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
+                            = render partial: 'instructeurs/procedures/dossier_actions', locals: { procedure_id: @procedure.id,
+                                        dossier_id: p.dossier_id,
+                                        state: p.state,
+                                        archived: p.archived,
+                                        dossier_is_followed: @followed_dossiers_id.include?(p.dossier_id),
+                                        close_to_expiration: @statut == 'expirant',
+                                        hidden_by_administration: @statut == 'supprimes',
+                                        hidden_by_expired: p.hidden_by_reason == 'expired',
+                                        sva_svr: @procedure.sva_svr_enabled?,
+                                        has_blocking_pending_correction: @procedure.feature_enabled?(:blocking_pending_correction) && p.pending_correction?,
+                                        turbo: false,
+                                        with_menu: false }

-            %tfoot
-              %tr
-                %td.force-table-100{ colspan: @procedure_presentation.displayed_fields_for_headers.size + 2 }
-                  = paginate @filtered_sorted_paginated_ids, views_prefix: 'shared'
+          .fr-table__footer
+            .fr-table__footer--start
+              %p.fr-table__detail
+                = number_with_delimiter @dossiers_count
+                = t('activerecord.models.dossier', count: @dossiers_count).downcase
+            .fr-table__footer--middle
+              = paginate @filtered_sorted_paginated_ids, views_prefix: 'shared'
+            .fr-table__footer--end.flex-no-grow

    - else
      %h2.empty-text
--- a/app/views/layouts/all.html.haml
+++ b/app/views/layouts/all.html.haml
@ -12,7 +12,7 @@

    .fr-container--fluid{ data: { turbo: 'true' } }
      %turbo-frame#procedures.fr-grid-row.fr-grid-row--gutters{ 'data-turbo-action': 'advance' }
-        .fr-col-3
+        .fr-col-12.fr-col-lg-3
          = form_with(url: all_admin_procedures_path, method: :get, data: { controller: 'autosubmit', turbo_frame: 'procedures' }) do |f|

            %fieldset.sidebar-filter
@ -120,6 +120,6 @@
                        = b.check_box(checked: @filter.status_filtered?(b.value))
                        = b.label(class: 'fr-label') { t b.text, scope: 'activerecord.attributes.procedure.aasm_state' }

-        .fr-col-9
+        .fr-col-12.fr-col-lg-9
          = yield(:results)
 = render template: 'layouts/application'
--- a/app/views/recherche/_hidden_dossier.html.haml
+++ b/app/views/recherche/_hidden_dossier.html.haml
@ -1,4 +1,4 @@
-%td.number-col
+%td.fr-cell--numeric
  %p.cell-link= p.dossier_id

 %td
@ -9,5 +9,5 @@
    = user_email
    = "- #{t('views.instructeurs.dossiers.deleted_by_administration')}" if p.hidden_by_administration_at.present?

-%td.status-col
-  %p.cell-link= status_badge(p.state)
+%td
+  %p.cell-link.flex.column= status_badge(p.state)
--- a/app/views/recherche/index.html.haml
+++ b/app/views/recherche/index.html.haml
@ -9,108 +9,113 @@
    .fr-alert.fr-alert--info.fr-alert--sm.fr-mt-3w
      = p t('views.instructeurs.search.deleted_dossier', dossier_id: @deleted_dossier.dossier_id, procedure_libelle: @deleted_dossier.procedure.libelle, deleted_at: l(@deleted_dossier.deleted_at))

-  .page-title
-    Résultat de la recherche :
-    = t('pluralize.dossier_trouve', count: @dossiers_count)
-
  - if @projected_dossiers.present?
-    = paginate @paginated_ids, views_prefix: 'shared'
-    .fr-table.fr-table--bordered
-      %table.table.dossiers-table.hoverable
-        %thead
-          %tr
-            %th.number-col Nº dossier
-            %th Démarche
-            %th Demandeur
-            %th.status-col Statut
-            %th.follow-col
-        %tbody
-        - @projected_dossiers.each do |p|
-          - procedure_libelle, user_email, procedure_id = p.columns
-          - instructeur_dossier =  @instructeur_dossiers_ids.include?(p.dossier_id)
-          - expert_dossier = @dossier_avis_ids_h[p.dossier_id].present?
-          - hidden_by_administration = p.hidden_by_administration_at.present?
-          - instructeur_and_expert_dossier = instructeur_dossier && expert_dossier
-          - path = instructeur_dossier ? instructeur_dossier_path(procedure_id, p.dossier_id) : expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id])
+    .fr-table.fr-table--no-scroll.fr-table--bordered
+      .fr-table__wrapper
+        .fr-table__container
+          .fr-table__content
+            %table.dossiers-table
+              %caption
+                Résultat de la recherche :
+                = t('pluralize.dossier_trouve', count: @dossiers_count)
+              %thead
+                %tr
+                  %th Nº dossier
+                  %th Démarche
+                  %th Demandeur
+                  %th Statut
+                  %th.follow-col
+              %tbody
+              - @projected_dossiers.each do |p|
+                - procedure_libelle, user_email, procedure_id = p.columns
+                - instructeur_dossier =  @instructeur_dossiers_ids.include?(p.dossier_id)
+                - expert_dossier = @dossier_avis_ids_h[p.dossier_id].present?
+                - hidden_by_administration = p.hidden_by_administration_at.present?
+                - instructeur_and_expert_dossier = instructeur_dossier && expert_dossier
+                - path = instructeur_dossier ? instructeur_dossier_path(procedure_id, p.dossier_id) : expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id])

-          %tr{ class: [p.hidden_by_administration_at.present? && "file-hidden-by-user"] }
-            - if instructeur_and_expert_dossier
-              %td.number-col
-                .cell-link.relative
-                  = p.dossier_id
-                  - if @notifications_dossier_ids.include?(p.dossier_id)
-                    %span.notifications{ 'aria-label': 'notifications' }
-              %td
-                .cell-link= procedure_libelle
-              %td
-                .cell-link= user_email
-              %td.status-col
-                .cell-link= status_badge(p.state)
+                %tr{ class: [p.hidden_by_administration_at.present? && "file-hidden-by-user"] }
+                  - if instructeur_and_expert_dossier
+                    %td.fr-cell--numeric
+                      .cell-link.relative
+                        = p.dossier_id
+                        - if @notifications_dossier_ids.include?(p.dossier_id)
+                          %span.notifications{ 'aria-label': 'notifications' }
+                    %td
+                      .cell-link= procedure_libelle
+                    %td
+                      .cell-link= user_email
+                    %td
+                      .cell-link.flex.column= status_badge(p.state)

-            - elsif hidden_by_administration
-              = render partial: "recherche/hidden_dossier", locals: {p: p, procedure_libelle: procedure_libelle, user_email: user_email}
+                  - elsif hidden_by_administration
+                    = render partial: "recherche/hidden_dossier", locals: {p: p, procedure_libelle: procedure_libelle, user_email: user_email}

-            - else
-              %td.number-col
-                %a.cell-link.relative{ href: path }
-                  = p.dossier_id
-                  - if @notifications_dossier_ids.include?(p.dossier_id)
-                    %span.notifications{ 'aria-label': 'notifications' }
+                  - else
+                    %td.fr-cell--numeric
+                      %a.cell-link.relative{ href: path }
+                        = p.dossier_id
+                        - if @notifications_dossier_ids.include?(p.dossier_id)
+                          %span.notifications{ 'aria-label': 'notifications' }

-              %td
-                %a.cell-link{ href: path }= procedure_libelle
+                    %td
+                      %a.cell-link{ href: path }= procedure_libelle

-              %td
-                %a.cell-link{ href: path }= user_email
+                    %td
+                      %a.cell-link{ href: path }= user_email

-              %td.status-col
-                %a.cell-link{ href: path }= status_badge(p.state)
+                    %td
+                      %a.cell-link.flex.column{ href: path }= status_badge(p.state)


-            - if instructeur_dossier && expert_dossier
-              %td.follow-col
-                = render Dropdown::MenuComponent.new(wrapper: :div, button_options: {class: ['fr-btn--sm']}) do |menu|
-                  - menu.with_button_inner_html do
-                    Actions
+                  - if instructeur_dossier && expert_dossier
+                    %td.follow-col
+                      = render Dropdown::MenuComponent.new(wrapper: :div, button_options: {class: ['fr-btn--sm']}) do |menu|
+                        - menu.with_button_inner_html do
+                          Actions

-                  - menu.with_item do
-                    = link_to(instructeur_dossier_path(procedure_id, p.dossier_id), role: 'menuitem') do
-                      = dsfr_icon('fr-icon-file-text-fill', :sm)
-                      .dropdown-description
-                        Voir le dossier
+                        - menu.with_item do
+                          = link_to(instructeur_dossier_path(procedure_id, p.dossier_id), role: 'menuitem') do
+                            = dsfr_icon('fr-icon-file-text-fill', :sm)
+                            .dropdown-description
+                              Voir le dossier

-                  - menu.with_item do
-                    = link_to(expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id]), role: 'menuitem') do
-                      = dsfr_icon('fr-icon-chat-3-fill', :sm)
-                      .dropdown-description
-                        Donner mon avis
+                        - menu.with_item do
+                          = link_to(expert_avis_path(procedure_id, @dossier_avis_ids_h[p.dossier_id]), role: 'menuitem') do
+                            = dsfr_icon('fr-icon-chat-3-fill', :sm)
+                            .dropdown-description
+                              Donner mon avis

-            - elsif instructeur_dossier
-              - if hidden_by_administration
-                %td.follow-col
-                  = link_to restore_instructeur_dossier_path(procedure_id, p.dossier_id), method: :patch, class: "button primary" do
-                    = t('views.instructeurs.dossiers.restore')
+                  - elsif instructeur_dossier
+                    - if hidden_by_administration
+                      %td.follow-col
+                        = link_to restore_instructeur_dossier_path(procedure_id, p.dossier_id), method: :patch, class: "button primary" do
+                          = t('views.instructeurs.dossiers.restore')

-              - else
-                %td.follow-col
-                  %ul.inline.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
-                    = render partial: "instructeurs/procedures/dossier_actions",
-                                                            locals: { procedure_id: procedure_id,
-                                                                      dossier_id: p.dossier_id,
-                                                                      state: p.state,
-                                                                      archived: p.archived,
-                                                                      dossier_is_followed: @followed_dossiers_id.include?(p.dossier_id),
-                                                                      close_to_expiration: nil,
-                                                                      hidden_by_administration: nil,
-                                                                      hidden_by_expired: nil,
-                                                                      sva_svr: p.sva_svr_decision_on.present?,
-                                                                      has_blocking_pending_correction: p.pending_correction? && Flipper.enabled?(:blocking_pending_correction, ProcedureFlipperActor.new(procedure_id)),
-                                                                      turbo: false,
-                                                                      with_menu: false }
+                    - else
+                      %td.follow-col
+                        %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-lg.fr-btns-group--icon-right
+                          = render partial: "instructeurs/procedures/dossier_actions",
+                                                                  locals: { procedure_id: procedure_id,
+                                                                            dossier_id: p.dossier_id,
+                                                                            state: p.state,
+                                                                            archived: p.archived,
+                                                                            dossier_is_followed: @followed_dossiers_id.include?(p.dossier_id),
+                                                                            close_to_expiration: nil,
+                                                                            hidden_by_administration: nil,
+                                                                            hidden_by_expired: nil,
+                                                                            sva_svr: p.sva_svr_decision_on.present?,
+                                                                            has_blocking_pending_correction: p.pending_correction? && Flipper.enabled?(:blocking_pending_correction, ProcedureFlipperActor.new(procedure_id)),
+                                                                            turbo: false,
+                                                                            with_menu: false }

-            - else
-              %td
-    = paginate @paginated_ids, views_prefix: 'shared'
+                  - else
+                    %td
+      .fr-table__footer
+        .fr-table__footer--start
+        .fr-table__footer--middle
+          = paginate @paginated_ids, views_prefix: 'shared'
+        .fr-table__footer--end

  - else
-    %h2 Aucun dossier correspondant à votre recherche n’a été trouvé
+    %h2.fr-h4.fr-my-4w Aucun dossier correspondant à votre recherche n’a été trouvé
--- a/app/views/root/patron.html.haml
+++ b/app/views/root/patron.html.haml
@ -180,21 +180,6 @@
          %td Table Data 3
          %td Table Data 4

-    %h2 Hoverable (.table.hoverable)
-
-    %table.table.hoverable
-      %thead
-        %tr
-          %th Header 1
-          %th Header 2
-      %tbody
-        %tr
-          %td Table Data 1
-          %td Table Data 2
-        %tr
-          %td Table Data 3
-          %td Table Data 4
-
    %h2 Vertical layout (.table.vertical)

    %table.table.vertical
--- a/app/views/shared/_footer_content_list.html.haml
+++ b/app/views/shared/_footer_content_list.html.haml
@ -1,9 +1,9 @@
 %ul.fr-footer__content-list
-  %li.fr-footer__content-item
-    = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.legifrance.title')), class: 'fr-footer__content-link', hreflang: 'fr', **external_link_attributes
  %li.fr-footer__content-item
    = link_to t('users.procedure_footer.official_links.gouvernement.title'), t('users.procedure_footer.official_links.gouvernement.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.gouvernement.title')), class: 'fr-footer__content-link', hreflang:'fr', **external_link_attributes
  %li.fr-footer__content-item
    = link_to t('users.procedure_footer.official_links.service_public.title'), t('users.procedure_footer.official_links.service_public.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.service_public.title')), class: 'fr-footer__content-link', hreflang:'fr', **external_link_attributes
+  %li.fr-footer__content-item
+    = link_to t('users.procedure_footer.official_links.legifrance.title'), t('users.procedure_footer.official_links.legifrance.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.legifrance.title')), class: 'fr-footer__content-link', hreflang: 'fr', **external_link_attributes
  %li.fr-footer__content-item
    = link_to t('users.procedure_footer.official_links.data_gouv.title'), t('users.procedure_footer.official_links.data_gouv.url'), title: new_tab_suffix(t('users.procedure_footer.official_links.data_gouv.title')), class: 'fr-footer__content-link', hreflang:'fr', **external_link_attributes
--- a/app/views/shared/archives/_table.html.haml
+++ b/app/views/shared/archives/_table.html.haml
@ -1,32 +1,36 @@
-%table.table.hoverable.archive-table
-  %thead
-    %tr
-      %th &nbsp;
-      %th.text-right Nombre de dossiers terminés
-      %th.text-right Poids estimé
-      %th.center Télécharger
+.fr-table.fr-table--bordered.fr-my-4w
+  .fr-table__wrapper
+    .fr-table__container
+      .fr-table__content
+        %table
+          %thead
+            %tr
+              %th{ scope: 'col' }
+              %th.fr-cell---right{ scope: 'col' } Nombre de dossiers terminés
+              %th.fr-cell---right{ scope: 'col' } Poids estimé
+              %th{ scope: 'col' } Télécharger

-  %tbody
-  - count_dossiers_termines_by_month.each do |date, count|
-    - matching_archive = archives.find { |archive| archive.time_span_type == 'monthly' && archive.month == date }
-    - weight = estimate_weight(matching_archive, count, average_dossier_weight)
+          %tbody
+          - count_dossiers_termines_by_month.each do |date, count|
+            - matching_archive = archives.find { |archive| archive.time_span_type == 'monthly' && archive.month == date }
+            - weight = estimate_weight(matching_archive, count, average_dossier_weight)

-    %tr
-      %td
-        = I18n.l(date, format: "%B %Y").capitalize
-      %td.text-right
-        = count
-      %td.text-right
-        = number_to_human_size(weight)
-      %td.center
-        - if matching_archive.present?
-          - if matching_archive.available?
-            = link_to url_for(matching_archive.file), class: 'fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm' do
-              = t(:archive_ready_html, scope: [:instructeurs, :procedure], generated_period: time_ago_in_words(matching_archive.updated_at))
-          - else
-            = dsfr_icon("fr-icon-flashlight-line", :sm)
-            = t(:archive_pending_html, scope: [:instructeurs, :procedure], created_period: time_ago_in_words(matching_archive.created_at))
-        - elsif weight.nil? || weight < Archive::MAX_SIZE
-          = link_to "Demander la création", create_archive_url(procedure, date), method: :post, class: "fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm"
-        - else
-          Archive trop volumineuse
+            %tr
+              %td
+                = I18n.l(date, format: "%B %Y").capitalize
+              %td.fr-cell--right.fr-cell--numeric
+                = count
+              %td.fr-cell--right
+                = number_to_human_size(weight)
+              %td
+                - if matching_archive.present?
+                  - if matching_archive.available?
+                    = link_to url_for(matching_archive.file), class: 'fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm' do
+                      = t(:archive_ready_html, scope: [:instructeurs, :procedure], generated_period: time_ago_in_words(matching_archive.updated_at))
+                  - else
+                    = dsfr_icon("fr-icon-flashlight-line", :sm)
+                    = t(:archive_pending_html, scope: [:instructeurs, :procedure], created_period: time_ago_in_words(matching_archive.created_at))
+                - elsif weight.nil? || weight < Archive::MAX_SIZE
+                  = link_to "Demander la création", create_archive_url(procedure, date), method: :post, class: "fr-btn fr-btn--secondary fr-icon-download-line fr-btn--icon-left fr-btn--sm"
+                - else
+                  Archive trop volumineuse
--- a/app/views/shared/kaminari/_paginator.html.haml
+++ b/app/views/shared/kaminari/_paginator.html.haml
@ -1,5 +1,5 @@
 = paginator.render do
-  %nav.fr-pagination.fr-mt-2w{ role: 'navigation', 'aria-label': 'Pagination' }
+  %nav.fr-pagination{ role: 'navigation', 'aria-label': 'Pagination' }
    %ul.fr-pagination__list
      = first_page_tag unless current_page.first?
      = prev_page_tag unless current_page.first?
--- a/app/views/users/_procedure_footer.html.haml
+++ b/app/views/users/_procedure_footer.html.haml
@ -37,9 +37,14 @@
            .fr-download
              = link_to I18n.t('users.procedure_footer.dematerialisation.title_1'), commencer_dossier_vide_for_revision_path(procedure.active_revision), download: 'true', class: 'fr-download__link'
          %h3.fr-footer__top-cat= I18n.t('users.procedure_footer.support.header')
-          .fr-footer__brand.fr-enlarge-link
-            = link_to t("users.procedure_footer.dematerialisation.link"), title: t("users.procedure_footer.dematerialisation.alt"), class: "fr-footer__brand-link" do
-              = image_tag("footer/logo-france-services.svg", class: "fr-footer__logo logo-france-service-fr", alt: t("users.procedure_footer.dematerialisation.alt"))
+          %ul.fr-footer__top-list
+            %li
+              = link_to I18n.t('users.procedure_footer.support_links.france_service.title'), t("users.procedure_footer.support_links.france_service.url"),
+                title: new_tab_suffix(t("users.procedure_footer.support_links.france_service.title")), class: "fr-footer__link", **external_link_attributes
+
+            %li
+              = link_to I18n.t('users.procedure_footer.support_links.carte_inclusion.title'), t("users.procedure_footer.support_links.carte_inclusion.url"),
+                title: new_tab_suffix(t("users.procedure_footer.support_links.carte_inclusion.title")), class: "fr-footer__link", **external_link_attributes

  .fr-footer__bottom.fr-mt-0
    .fr-container
--- a/bun.lockb
+++ b/bun.lockb
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -409,7 +409,7 @@ en:
        batch_operation:
          enabled: "Add file %{dossier_id} to the selection for the bulk operation"
          disabled: "Impossible to add file %{dossier_id} to the selection because it is already in a bulk operation"
-        personalize: Personalize
+        customize: Customize the table
        passer_en_instruction: Switch to instruction
        repasser_en_construction: Revert to submitted
        show_deleted_dossiers: Show deleted files
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@ -413,7 +413,7 @@ fr:
          enabled: "Ajouter le dossier %{dossier_id} à la sélection pour un traitement de masse"
          disabled: "Impossible d'ajouter le dossier %{dossier_id} à la selection car il est déjà dans un traitement de masse"
        show_deleted_dossiers: Historique des dossiers supprimés
-        personalize: Personnaliser
+        customize: Personnaliser le tableau
        passer_en_instruction: Passer en instruction
        repasser_en_construction: Repasser en construction
        follow_file: Suivre le dossier
--- a/config/locales/kaminari.en.yml
+++ b/config/locales/kaminari.en.yml
@ -13,8 +13,8 @@ en:
          other: "%{count} %{entry_name}"
  views:
    pagination:
-      first: "&laquo; First"
-      last: Last &raquo;
-      next: Next &rsaquo;
-      previous: "&lsaquo; Prev"
-      truncate: "&hellip;"
+      first: 'First'
+      last: Last
+      next: Next
+      previous: 'Prev'
+      truncate: '&hellip;'
--- a/config/locales/kaminari.fr.yml
+++ b/config/locales/kaminari.fr.yml
@ -13,8 +13,8 @@ fr:
          other: "%{count} %{entry_name}"
  views:
    pagination:
-      first: "&laquo; Premier"
-      last: Dernier &raquo;
-      next: Suivant &rsaquo;
-      previous: "&lsaquo; Précédent"
-      truncate: "&hellip;"
+      first: 'Premier'
+      last: Dernier
+      next: Suivant
+      previous: 'Précédent'
+      truncate: '&hellip;'
--- a/config/locales/links.en.yml
+++ b/config/locales/links.en.yml
@ -61,7 +61,7 @@ en:
      security:
        label: "Security"
        title: "Security policy and procedures"
-        url: "https://github.com/betagouv/demarches-simplifiees.fr/blob/main/SECURITY.md"
+        url: 'https://github.com/demarches-simplifiees/demarches-simplifiees.fr/blob/main/SECURITY.md'
      carte:
        label: "Deployment map"
        title: "Deployment map by department"
--- a/config/locales/links.fr.yml
+++ b/config/locales/links.fr.yml
@ -66,7 +66,7 @@ fr:
      security:
        label: "Sécurité"
        title: "Politique et procédure de sécurité"
-        url: "https://github.com/betagouv/demarches-simplifiees.fr/blob/main/SECURITY.md"
+        url: 'https://github.com/demarches-simplifiees/demarches-simplifiees.fr/blob/main/SECURITY.md'
      stats:
        label: "Statistiques"
      carte:
--- a/config/locales/views/users/procedure_footer/en.yml
+++ b/config/locales/views/users/procedure_footer/en.yml
@ -23,7 +23,12 @@ en:
      dematerialisation:
        header: Paperless
        title_1: Download the PDF form
-        link: "https://www.transformation.gouv.fr/france-services"
-        alt: France services
      support:
        header: Being supported in your approach
+      support_links:
+        france_service:
+          title: Find a France Services house
+          url: 'https://www.transformation.gouv.fr/france-services'
+        carte_inclusion:
+          title: Map of digital inclusion sites
+          url: 'https://cartographie.societenumerique.gouv.fr/'
--- a/config/locales/views/users/procedure_footer/fr.yml
+++ b/config/locales/views/users/procedure_footer/fr.yml
@ -39,8 +39,12 @@ fr:
      dematerialisation:
        header: Dématérialisation
        title_1: Télécharger le formulaire PDF
-        title_2: Trouver une maison France Services
-        link: "https://www.transformation.gouv.fr/france-services"
-        alt: France services
      support:
        header: Être accompagné dans votre démarche
+      support_links:
+        france_service:
+          title: Trouver une maison France Services
+          url: 'https://www.transformation.gouv.fr/france-services'
+        carte_inclusion:
+          title: Carte des lieux d‘inclusion numérique
+          url: 'https://cartographie.societenumerique.gouv.fr/'
--- a/package.json
+++ b/package.json
@ -7,7 +7,7 @@
    "@coldwired/utils": "^0.13.0",
    "@formatjs/intl-listformat": "^7.5.7",
    "@frsource/autoresize-textarea": "^2.0.87",
-    "@gouvfr/dsfr": "^1.11.2",
+    "@gouvfr/dsfr": "^1.12.1",
    "@graphiql/plugin-explorer": "^3.1.0",
    "@graphiql/toolkit": "^0.9.1",
    "@heroicons/react": "^1.0.6",
@ -53,7 +53,6 @@
    "lightgallery": "^2.7.2",
    "maplibre-gl": "^4.5.0",
    "match-sorter": "^6.3.4",
-    "patch-package": "^8.0.0",
    "react": "^18.3.1",
    "react-aria-components": "^1.3.1",
    "react-coordinate-input": "^1.0.0",
@ -112,7 +111,6 @@
    "lint:css": "prettier app/assets/stylesheets --check",
    "lint:css:fix": "prettier app/assets/stylesheets --write",
    "graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml",
-    "postinstall": "patch-package",
    "test": "vitest",
    "coverage": "vitest run --coverage",
    "up": "bunx npm-check-updates --root --format group -i",
@ -195,5 +193,9 @@
        }
      }
    ]
+  },
+  "patchedDependencies": {
+    "@gouvfr/dsfr@1.12.1": "patches/@gouvfr%2Fdsfr@1.12.1.patch",
+    "@hotwired/turbo@7.3.0": "patches/@hotwired%2Fturbo@7.3.0.patch"
  }
 }
--- a/patches/@gouvfr%2Fdsfr@1.12.1.patch
+++ b/patches/@gouvfr%2Fdsfr@1.12.1.patch
@ -0,0 +1,16 @@
+index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
+diff --git a/dist/component/table/table.module.js b/dist/component/table/table.module.js
+index 5d61112f0cdc60ec85adc0c1a39ddabca4c332d2..0de2a3fadaaec783903def5084c4c77add3fc723 100644
+--- a/dist/component/table/table.module.js
+++ b/dist/component/table/table.module.js
+@@ -157,7 +157,9 @@ class TableRow extends api.core.Instance {
+   }
+ 
+   _handleCheckboxChange (node) {
+-    if (node.name === 'row-select') {
+    if (node.name === 'row-select' ||
+      node.getAttribute(api.internals.ns.attr('row-select')) === 'true'
+    ) {
+       this.isSelected = node.checked === true;
+     }
+   }
--- a/patches/@hotwired%2Fturbo@7.3.0.patch
+++ b/patches/@hotwired%2Fturbo@7.3.0.patch
@ -1,7 +1,7 @@
-diff --git a/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js b/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
+diff --git a/dist/turbo.es2017-esm.js b/dist/turbo.es2017-esm.js
 index cfe4084..fd54933 100644
--- a/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
-+++ b/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js
+--- a/dist/turbo.es2017-esm.js
+++ b/dist/turbo.es2017-esm.js
@@ -802,6 +802,7 @@ class FormSubmission {
         var _a;
         this.state = FormSubmissionState.stopped;
@ -10,10 +10,10 @@ index cfe4084..fd54933 100644
         this.resetSubmitterText();
         dispatch("turbo:submit-end", {
             target: this.formElement,
-diff --git a/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js b/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js
+diff --git a/dist/turbo.es2017-umd.js b/dist/turbo.es2017-umd.js
 index 303ecf2..08dd969 100644
--- a/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js
-+++ b/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js
+--- a/dist/turbo.es2017-umd.js
+++ b/dist/turbo.es2017-umd.js
@@ -808,6 +808,7 @@ Copyright © 2023 37signals LLC
             var _a;
             this.state = FormSubmissionState.stopped;
--- a/publiccode.yml
+++ b/publiccode.yml
@ -1,13 +1,13 @@
-# This repository adheres to the publiccode.yml standard by including this 
+# This repository adheres to the publiccode.yml standard by including this
 # metadata file that makes public software easily discoverable.
 # More info at https://github.com/italia/publiccode.yml

 publiccodeYmlVersion: '0.2'
 name: Démarches Simplifiéees
-url: 'https://github.com/betagouv/demarches-simplifiees.fr'
+url: 'https://github.com/demarches-simplifiees/demarches-simplifiees.fr'
 landingURL: 'https://www.demarches-simplifiees.fr/'
-roadmap: 'https://github.com/betagouv/demarches-simplifiees.fr/wiki/Feuille-de-route'
-releaseDate: 'https://github.com/betagouv/demarches-simplifiees.fr/releases/latest'
+roadmap: 'https://github.com/demarches-simplifiees/demarches-simplifiees.fr/wiki/Feuille-de-route'
+releaseDate: 'https://github.com/demarches-simplifiees/demarches-simplifiees.fr/releases/latest'
 developmentStatus: beta
 softwareType: standalone/backend
 categories:
--- a/spec/controllers/administrateurs/exports_controller_spec.rb
+++ b/spec/controllers/administrateurs/exports_controller_spec.rb
@ -59,7 +59,6 @@ describe Administrateurs::ExportsController, type: :controller do
        end

        it 'responds in the correct format' do
-          expect(response.media_type).to eq('text/vnd.turbo-stream.html')
          expect(response).to have_http_status(:ok)
        end
      end
--- a/spec/system/administrateurs/procedure_archive_and_export_spec.rb
+++ b/spec/system/administrateurs/procedure_archive_and_export_spec.rb
@ -32,7 +32,7 @@ describe 'Creating a new procedure', js: true do

    # check archive
    expect {
-      page.first(".archive-table .fr-btn").click
+      page.first(".fr-table .fr-btn").click
    }.to have_enqueued_job(ArchiveCreationJob).with(procedure, an_instance_of(Archive), administrateur)
    expect(page).to have_content("Votre demande a été prise en compte. Selon le nombre de dossiers, cela peut prendre de quelques minutes à plusieurs heures. Vous recevrez un courriel lorsque le fichier sera disponible.")
    expect(Archive.first.month).not_to be_nil
--- a/spec/system/instructeurs/instruction_spec.rb
+++ b/spec/system/instructeurs/instruction_spec.rb
@ -208,7 +208,7 @@ describe 'Instructing a dossier:', js: true do
    end
    scenario 'download' do
      expect {
-        page.first(".archive-table .fr-btn").click
+        page.first(".fr-table .fr-btn").click
      }.to have_enqueued_job(ArchiveCreationJob).with(procedure, an_instance_of(Archive), instructeur)
      expect(Archive.first.month).not_to be_nil
    end
--- a/spec/system/instructeurs/procedure_sort_spec.rb
+++ b/spec/system/instructeurs/procedure_sort_spec.rb
@ -19,18 +19,18 @@ describe "procedure sort", js: true do
  scenario "should be able to sort with header" do
    # sorted by notifications (updated_at desc) by default, filtered by followed
    expect(all(".dossiers-table tbody tr").count).to eq(3)
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)

    click_on "Nº dossier" # sort by id asc

-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)

    click_on "Nº dossier" # reverse order - sort by id desc

-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
  end

  scenario "should be able to sort with header with sva date" do
@ -41,20 +41,20 @@ describe "procedure sort", js: true do
    visit instructeur_procedure_path(procedure, statut: "suivis")
    # sorted by notifications (updated_at desc) by default, filtered by followed
    expect(all(".dossiers-table tbody tr").count).to eq(3)
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)

    click_on "Date décision SVA", exact: true # sort by sva date asc
    # find("thead .sva-col a").click # sort by sva date asc

-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)

    click_on "Date décision SVA ↑", exact: true # reverse order - sort by sva date desc
    # find("thead .sva-col a").click # reverse order - sort by sva date desc

-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
  end

  scenario "should be able to sort with direct link to notification sort" do
@ -65,14 +65,14 @@ describe "procedure sort", js: true do
    find("label", text: "Remonter les dossiers avec une notification").click # reverse order - sort by updated_at asc

    expect(page).not_to have_checked_field("Remonter les dossiers avec une notification")
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier_2.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)

    find("label", text: "Remonter les dossiers avec une notification").click # set order back - sort by updated_at desc

    expect(page).to have_checked_field("Remonter les dossiers avec une notification")
-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
  end

  scenario "should be able to sort back by notification filter after any other sort" do
@ -83,7 +83,7 @@ describe "procedure sort", js: true do
    find("label", text: "Remonter les dossiers avec une notification").click # sort by updated_at desc
    expect(page).to have_checked_field("Remonter les dossiers avec une notification")

-    expect(find(".dossiers-table tbody tr:nth-child(2) .number-col a").text).to eq(followed_dossier.id.to_s)
-    expect(find(".dossiers-table tbody tr:nth-child(3) .number-col a").text).to eq(followed_dossier_2.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(2) .fr-cell--numeric a").text).to eq(followed_dossier.id.to_s)
+    expect(find(".dossiers-table tbody tr:nth-child(3) .fr-cell--numeric a").text).to eq(followed_dossier_2.id.to_s)
  end
 end
--- a/spec/system/routing/rules_full_scenario_spec.rb
+++ b/spec/system/routing/rules_full_scenario_spec.rb
@ -157,7 +157,7 @@ describe 'The routing with rules', js: true do
    # the search only show litteraires dossiers
    fill_in 'q', with: scientifique_user.email
    find('.fr-search-bar .fr-btn').click
-    expect(page).to have_text('0 dossier trouvé')
+    expect(page).to have_text('Aucun dossier')

    # weird bug, capabary appends text instead of replaces it
    # see https://github.com/redux-form/redux-form/issues/686
@ -284,7 +284,7 @@ describe 'The routing with rules', js: true do
    expect(dossier.groupe_instructeur_id).to be_nil
    expect(page).to have_text(procedure.service.nom)

-    choose(groupe)
+    choose(groupe, allow_label_click: true)
    wait_for_autosave

    expect(dossier.reload.groupe_instructeur_id).not_to be_nil
@ -303,7 +303,7 @@ describe 'The routing with rules', js: true do
    click_on user.dossiers.first.procedure.libelle
    click_on "Modifier mon dossier"

-    choose(new_group)
+    choose(new_group, allow_label_click: true)
    wait_for_autosave

    expect(page).to have_text(new_group)
--- a/spec/system/users/dropdown_spec.rb
+++ b/spec/system/users/dropdown_spec.rb
@ -25,20 +25,20 @@ describe 'dropdown list with other option activated', js: true do
    scenario 'Select other option and the other input hidden must appear' do
      fill_individual

-      choose I18n.t('shared.champs.drop_down_list.other')
+      choose I18n.t('shared.champs.drop_down_list.other'), allow_label_click: true
      expect(page).to have_selector('.drop_down_other', visible: true)
    end

    scenario "Getting back from other save the new option" do
      fill_individual

-      choose I18n.t('shared.champs.drop_down_list.other')
+      choose I18n.t('shared.champs.drop_down_list.other'), allow_label_click: true
      fill_in(I18n.t('shared.champs.drop_down_list.other_label'), with: "My choice")

      wait_until { user_dossier.reload.project_champs_public.first.value == "My choice" }
      expect(user_dossier.project_champs_public.first.value).to eq("My choice")

-      choose "Secondary 1.1"
+      choose "Secondary 1.1", allow_label_click: true

      wait_until { user_dossier.reload.project_champs_public.first.value == "Secondary 1.1" }
      expect(user_dossier.project_champs_public.first.value).to eq("Secondary 1.1")