Merge branch 'main' into feature/add_rna_type_de_champs

2022-10-11 15:36:46 +02:00 · 2022-10-11 15:36:46 +02:00 · 73f6063c87
commit 73f6063c87
parent 2e8c0512a5 b6f3b51522
173 changed files with 1194 additions and 1316 deletions
--- a/2
+++ b/2
@ -113,6 +113,7 @@ group :development do
  gem 'brakeman', require: false
  gem 'haml-lint'
  gem 'letter_opener_web'
+  gem 'memory_profiler'
  gem 'rack-mini-profiler'
  gem 'rails-erd', require: false # generates `doc/database_models.pdf`
  gem 'rubocop', require: false
@ -120,6 +121,7 @@ group :development do
  gem 'rubocop-rails', require: false
  gem 'rubocop-rspec', require: false
  gem 'scss_lint', require: false
+  gem 'stackprof'
  gem 'web-console'
 end

--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -225,8 +225,7 @@ GEM
    ecma-re-validator (0.3.0)
      regexp_parser (~> 2.0)
    encryptor (3.0.0)
-    erubi (1.10.0)
-    erubis (2.7.0)
+    erubi (1.11.0)
    et-orbi (1.2.4)
      tzinfo
    ethon (0.15.0)
@ -306,19 +305,19 @@ GEM
      rails (>= 5.1.0)
    groupdate (5.2.2)
      activesupport (>= 5)
-    haml (5.2.1)
-      temple (>= 0.8.0)
+    haml (6.0.5)
+      temple (>= 0.8.2)
+      thor
      tilt
    haml-lint (0.999.999)
      haml_lint
-    haml-rails (2.0.1)
+    haml-rails (2.1.0)
      actionpack (>= 5.1)
      activesupport (>= 5.1)
-      haml (>= 4.0.6, < 6.0)
-      html2haml (>= 1.0.1)
+      haml (>= 4.0.6)
      railties (>= 5.1)
-    haml_lint (0.37.0)
-      haml (>= 4.0, < 5.3)
+    haml_lint (0.42.0)
+      haml (>= 4.0, < 6.1)
      parallel (~> 1.10)
      rainbow
      rubocop (>= 0.50.0)
@ -327,11 +326,6 @@ GEM
    hashdiff (1.0.1)
    hashie (4.1.0)
    highline (2.0.3)
-    html2haml (2.2.0)
-      erubis (~> 2.7.0)
-      haml (>= 4.0, < 6)
-      nokogiri (>= 1.6.0)
-      ruby_parser (~> 3.5)
    html_tokenizer (0.0.7)
    htmlentities (4.3.4)
    http-accept (1.7.0)
@ -339,7 +333,7 @@ GEM
      domain_name (~> 0.5)
    http_accept_language (2.1.1)
    httpclient (2.8.3)
-    i18n (1.11.0)
+    i18n (1.12.0)
      concurrent-ruby (~> 1.0)
    i18n-tasks (1.0.9)
      activesupport (>= 4.0.2)
@ -407,7 +401,7 @@ GEM
      railties (>= 4)
      request_store (~> 1.0)
    logstash-event (1.2.02)
-    loofah (2.18.0)
+    loofah (2.19.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.1)
@ -418,6 +412,7 @@ GEM
      rest-client (>= 2.0.0)
    marcel (1.0.2)
    matrix (0.4.2)
+    memory_profiler (1.0.0)
    method_source (1.0.0)
    mime-types (3.3.1)
      mime-types-data (~> 3.2015)
@ -428,7 +423,7 @@ GEM
    mini_magick (4.11.0)
    mini_mime (1.1.2)
    mini_portile2 (2.8.0)
-    minitest (5.16.2)
+    minitest (5.16.3)
    momentjs-rails (2.20.1)
      railties (>= 3.1)
    msgpack (1.4.2)
@ -468,7 +463,7 @@ GEM
    orm_adapter (0.5.0)
    parallel (1.22.1)
    parsby (1.1.1)
-    parser (3.1.2.0)
+    parser (3.1.2.1)
      ast (~> 2.4.1)
    pdf-core (0.9.0)
    pg (1.2.3)
@ -508,7 +503,7 @@ GEM
    rack (2.2.4)
    rack-attack (6.5.0)
      rack (>= 1.0, < 3)
-    rack-mini-profiler (2.3.1)
+    rack-mini-profiler (3.0.0)
      rack (>= 1.2.0)
    rack-oauth2 (1.19.0)
      activesupport
@ -566,7 +561,7 @@ GEM
    rb-fsevent (0.10.4)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
-    regexp_parser (2.5.0)
+    regexp_parser (2.6.0)
    request_store (1.5.0)
      rack (>= 1.4)
    responders (3.0.1)
@ -610,16 +605,17 @@ GEM
    rspec-support (3.10.2)
    rspec_junit_formatter (0.4.1)
      rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (1.30.1)
+    rubocop (1.36.0)
+      json (~> 2.3)
      parallel (~> 1.10)
-      parser (>= 3.1.0.0)
+      parser (>= 3.1.2.1)
      rainbow (>= 2.2.2, < 4.0)
      regexp_parser (>= 1.8, < 3.0)
      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.18.0, < 2.0)
+      rubocop-ast (>= 1.20.1, < 2.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.18.0)
+    rubocop-ast (1.21.0)
      parser (>= 3.1.1.0)
    rubocop-performance (1.9.2)
      rubocop (>= 0.90.0, < 2.0)
@ -637,8 +633,6 @@ GEM
    ruby-vips (2.1.4)
      ffi (~> 1.12)
    ruby2_keywords (0.0.5)
-    ruby_parser (3.15.1)
-      sexp_processor (~> 4.9)
    rubyzip (2.3.0)
    saml_idp (0.14.0)
      activesupport (>= 5.2)
@ -682,7 +676,6 @@ GEM
    sentry-ruby-core (4.8.1)
      concurrent-ruby
      faraday
-    sexp_processor (4.15.2)
    shoulda-matchers (4.5.1)
      activesupport (>= 4.2.0)
    sib-api-v3-sdk (7.4.0)
@ -713,6 +706,7 @@ GEM
      actionpack (>= 5.2)
      activesupport (>= 5.2)
      sprockets (>= 3.0.0)
+    stackprof (0.2.21)
    strong_migrations (0.8.0)
      activerecord (>= 5.2)
    strscan (3.0.3)
@ -726,7 +720,7 @@ GEM
      unicode-display_width (>= 1.1.1, < 3)
    thor (1.2.1)
    thread_safe (0.3.6)
-    tilt (2.0.10)
+    tilt (2.0.11)
    timecop (0.9.4)
    timeout (0.1.1)
    ttfunk (1.7.0)
@ -739,7 +733,7 @@ GEM
    unf (0.1.4)
      unf_ext
    unf_ext (0.0.7.7)
-    unicode-display_width (2.1.0)
+    unicode-display_width (2.3.0)
    uri_template (0.7.0)
    validate_email (0.1.6)
      activemodel (>= 3.0)
@ -795,7 +789,7 @@ GEM
      nokogiri (~> 1.11)
    xpath (3.2.0)
      nokogiri (~> 1.8)
-    zeitwerk (2.6.0)
+    zeitwerk (2.6.1)
    zip_tricks (5.6.0)
    zipline (1.4.1)
      actionpack (>= 6.0, < 8.0)
@ -873,6 +867,7 @@ DEPENDENCIES
  logstash-event
  mailjet
  matrix
+  memory_profiler
  mina
  net-imap
  net-pop
@ -918,6 +913,7 @@ DEPENDENCIES
  spreadsheet_architect
  spring
  spring-commands-rspec
+  stackprof
  strong_migrations
  timecop
  turbo-rails
--- a/app/assets/stylesheets/01_common.scss
+++ b/app/assets/stylesheets/01_common.scss
@ -0,0 +1,28 @@
+@import "placeholders";
+
+turbo-events {
+  display: none;
+}
+
+.page-wrapper {
+  position: relative;
+  min-height: 100%;
+}
+
+// Mobile Safari doesn't bubble mouse events by default, unless:
+//
+// - the target element of the event is a link or a form field.
+// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
+// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
+//
+// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
+//
+// This is a problem for us, because we bind a lot of click events as
+// `document.on('click', '.my-element', …)` – which requires proper bubbling.
+.ios .page-wrapper {
+  cursor: pointer;
+}
+
+.container {
+  @extend %container;
+}
--- a/app/assets/stylesheets/02_utils.scss
+++ b/app/assets/stylesheets/02_utils.scss
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@ -1,3 +1,5 @@
+@import "constants";
+
@mixin horizontal-padding($value) {
  padding-left: $value;
  padding-right: $value;
@ -20,3 +22,4 @@
    background-image: image-url($image-url);
  }
 }
+
--- a/app/assets/stylesheets/_placeholders.scss
+++ b/app/assets/stylesheets/_placeholders.scss
@ -1,4 +1,5 @@
@import "colors";
+@import "mixins";
@import "constants";

 %horizontal-list {
@ -25,3 +26,10 @@
    outline: 3px solid $blue-france-500;
  }
 }
+
+%container { // TODO: switch to new design with preview in two view not in two column https://github.com/betagouv/demarches-simplifiees.fr/issues/7882
+  @include horizontal-padding($default-padding);
+  max-width: $page-width + 2 * $default-padding;
+  margin-left: auto;
+  margin-right: auto;
+}
--- a/app/assets/stylesheets/_typography.scss
+++ b/app/assets/stylesheets/_typography.scss
@ -1,12 +0,0 @@
-@import "colors";
-
-%new-type {
-  font-family: "Marianne", system-ui, -apple-system, sans-serif;
-  color: $black;
-}
-
-ol {
-  line-height: 28px;
-  list-style-type: decimal;
-  list-style-position: inside;
-}
--- a/app/assets/stylesheets/admin-procedures-list.scss
+++ b/app/assets/stylesheets/admin-procedures-list.scss
@ -11,7 +11,7 @@
 .admin-procedures-list-row.infos {
  align-items: flex-start;

-  a {
-    color: $blue-france-500;
+  a:not(:hover) {
+    background-image: none; // remove DSFR underline
  }
 }
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@ -1,6 +1 @@
-// = require ./reset
-// = require ./custom_reset
-// = require ./common
-// = require ./utils
-// = require ./fonts
 // = require_tree .
--- a/app/assets/stylesheets/archive.scss
+++ b/app/assets/stylesheets/archive.scss
@ -12,4 +12,8 @@ table.archive-table {
  td {
    padding: 3 * $default-spacer $default-spacer;
  }
+
+  a.button {
+    background-image: none; // remove DSFR underline
+  }
 }
--- a/app/assets/stylesheets/attachment.scss
+++ b/app/assets/stylesheets/attachment.scss
@ -11,6 +11,14 @@

  .button {
    text-transform: lowercase;
+    background-image: none; // remove DSFR underline, TODO: switch to DSFR download links https://github.com/betagouv/demarches-simplifiees.fr/issues/7883
+  }
+
+}
+
+.attachment-link {
+  a:not(:hover) {
+    background-image: none; // remove DSFR underline
  }
 }

--- a/app/assets/stylesheets/avis.scss
+++ b/app/assets/stylesheets/avis.scss
@ -1,5 +1,4 @@
@import "colors";
-@import "common";
@import "constants";

 .give-avis {
@ -75,18 +74,6 @@
 }

 .list-avis {
-  .count {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    border: 1px solid $grey;
-    text-align: center;
-    font-size: 12px;
-    font-weight: normal;
-    margin-left: 8px;
-  }
-
  .one-avis {
    border-top: 1px solid $grey;
    padding: $default-padding 0;
@ -128,12 +115,6 @@
    }
  }

-  .date,
-  .waiting {
-    font-size: 12px;
-    color: $dark-grey;
-  }
-
  .date {
    float: right;
  }
--- a/app/assets/stylesheets/avis_sign_up.scss
+++ b/app/assets/stylesheets/avis_sign_up.scss
@ -1,6 +1,3 @@
-@import "typography";
-@import "colors";
-
 .avis-sign-up {
  .left {
    p {
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@ -183,6 +183,11 @@
  top: 5 * $default-spacer;
  cursor: default;
  z-index: 10;
+  list-style: none;
+
+  a {
+    background-image: none; // remove DSFR underline
+  }

  &.left-aligned {
    left: 0;
@ -256,6 +261,7 @@

    a {
      color: $dark-grey;
+      background-image: none; // remove DSFR underline
    }

    // Make child links fill the whole clickable area
@ -311,6 +317,10 @@
  [disabled] {
    display: none;
  }
+
+  ul {
+    list-style: none;
+  }
 }

 .link {
--- a/app/assets/stylesheets/card_admin.scss
+++ b/app/assets/stylesheets/card_admin.scss
@ -2,7 +2,6 @@
@import "constants";

 .card-admin {
-  color: $black;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 236px;
@ -45,6 +44,10 @@
    margin: auto auto 0 auto;
  }

+  p {
+    margin-bottom: 0;
+  }
+
  &:hover {
    color: $blue-france-500;

--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@ -1,86 +0,0 @@
-@import "colors";
-@import "constants";
-@import "mixins";
-@import "placeholders";
-@import "typography";
-
-body,
-input,
-textarea,
-select {
-  @extend %new-type;
-  font-size: 16px;
-  line-height: 1.42857143;
-}
-
-dt {
-  margin-bottom: 0.5em;
-}
-
-.page-wrapper {
-  position: relative;
-  min-height: 100%;
-}
-
-// Mobile Safari doesn't bubble mouse events by default, unless:
-//
-// - the target element of the event is a link or a form field.
-// - the target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
-// - the target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
-//
-// (See https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
-//
-// This is a problem for us, because we bind a lot of click events as
-// `document.on('click', '.my-element', …)` – which requires proper bubbling.
-.ios .page-wrapper {
-  cursor: pointer;
-}
-
-h1 {
-  font-size: 36px;
-  font-weight: bold;
-}
-
-strong {
-  font-weight: bold;
-}
-
-a[target="_blank"]::after {
-  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
-  margin: 0 3px 0 5px;
-}
-
-a {
-  color: $blue-france-500;
-}
-
-em {
-  font-style: italic;
-}
-
-strong {
-  font-weight: bold;
-}
-
-sup {
-  vertical-align: super;
-  font-size: 0.83em;
-}
-
-small {
-  font-size: small;
-}
-
-.container {
-  @include horizontal-padding($default-padding);
-  max-width: $page-width + 2 * $default-padding;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.small-container {
-  @include horizontal-padding($default-padding);
-  max-width: $small-page-width + 2 * $default-padding;
-  margin-left: auto;
-  margin-right: auto;
-}
--- a/app/assets/stylesheets/custom_reset.scss
+++ b/app/assets/stylesheets/custom_reset.scss
@ -1,28 +0,0 @@
-@import "colors";
-@import "placeholders";
-
-html,
-body {
-  height: 100%;
-  background-color: $white;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-a {
-  @extend %outline;
-
-  text-decoration: none;
-}
-
-turbo-events {
-  display: none;
-}
--- a/app/assets/stylesheets/dossier_annotations_privees.scss
+++ b/app/assets/stylesheets/dossier_annotations_privees.scss
@ -1,5 +1,4 @@
@import "colors";
-@import "common";
@import "constants";

 #dossier-annotations-privees {
--- a/app/assets/stylesheets/dossiers_table.scss
+++ b/app/assets/stylesheets/dossiers_table.scss
@ -17,6 +17,10 @@
    color: #000000;
  }

+  a {
+    background-image: none; // remove DSFR underline
+  }
+
  .caret-icon {
    vertical-align: top;
    margin-top: 9px;
@ -81,6 +85,10 @@

  .follow-col {
    width: 200px;
+
+    .fr-btn {
+      margin-bottom: 0;
+    }
  }
 }

--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@ -1,23 +1,13 @@
@import "colors";

-// Hacky override default text underline of DSFR because we don't want to underline links in our legacy UI.
-// We don't match links having a dsfr class (prefixed by fr-).
-// However DSFR components may contain links without fr- class on them,
-// so these links can be artificially matched by adding any fr-class on them, (like fr-underlined)
-body [href]:not([class^="fr-"]) {
-  background-image: none;
-}
-
-// override default transparent background on inputs
+// override default transparent background on inputs & font-size to 16px by default
 input,
 textarea,
 select {
  background: $white;
+  font-size: 1em;
 }

-#footer a {
-  color: #333333;
-}
 // with Marianne font, weight of font is less bolder, so bold it up
 .button.primary {
  font-weight: bold;
@ -40,3 +30,9 @@ input[type="radio"] {
 textarea {
  cursor: auto;
 }
+
+fieldset {
+  border: none;
+  padding-left: 0;
+  padding-bottom: 0;
+}
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@ -1,14 +0,0 @@
-@font-face {
-  font-family: "Marianne";
-  src: asset-url("Marianne-Regular.woff2") format("woff2"),
-        asset-url("Marianne-Regular.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Spectrale";
-  src: asset-url("Spectral-Regular.ttf") format("ttf");
-  font-weight: bold;
-  font-style: normal;
-}
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@ -85,6 +85,7 @@
      p,
      label {
        padding-left: 28px;
+        font-weight: normal;
      }

      input[type=checkbox] {
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@ -3,10 +3,6 @@
@import "mixins";
@import "placeholders";

-.landing {
-  background-color: #FFFFFF;
-}
-
 .landing-panel {
  @include vertical-padding(60px);
 }
@ -32,13 +28,11 @@ $landing-breakpoint: 1040px;
 }

 .hero-tagline {
-  font-size: 40px;
  margin-bottom: 0px;
 }

 .hero-tagline-em {
  color: $blue-france-500;
-  font-size: 40px;
  font-style: normal;
  font-weight: bold;
 }
@ -55,24 +49,10 @@ $landing-breakpoint: 1040px;
  }
 }

-.landing-panel-title {
-  width: 100%;
-  font-size: 30px;
-  font-weight: normal;
-  text-align: center;
-  margin-bottom: 40px;
-  margin-top: 0;
-  color: $g700;
-}
-
 .features-panel {
  background-color: $blue-france-500;
 }

-.features-panel-title {
-  color: #FFFFFF;
-}
-
 .features {
  @extend %horizontal-list;
  width: 100%;
@ -186,15 +166,17 @@ $landing-breakpoint: 1040px;
 }

 .number-value {
-  color: $blue-france-500;
-  font-weight: bold;
-  font-size: 36px;
+  color: var(--text-action-high-blue-france);
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: 600;
 }

 .number-label {
-  font-weight: bold;
-  font-size: 20px;
-  color: $g700;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  color: var(--text-label-grey);
 }

 $users-breakpoint: 950px;
@ -238,17 +220,6 @@ $users-breakpoint: 950px;
  height: 180px;
 }

-.cta-role-title {
-  font-size: 30px;
-  font-weight: bold;
-  margin-top: 13px;
-}
-
-.cta-role-explanation {
-  font-size: 30px;
-  margin-bottom: 10px;
-}
-
 .cta-panel {
  background-color: $blue-france-500;
  color: #FFFFFF;
@ -258,8 +229,7 @@ $users-breakpoint: 950px;
  }
 }

-.role-panel-wrapper,
-.cta-panel-wrapper {
+.role-panel-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
@ -315,24 +285,6 @@ $users-breakpoint: 950px;
  }
 }

-.half .cta-panel-title,
-.half .cta-panel-explanation {
-  text-align: center;
-}
-
-.role-panel-title {
-  font-size: 30px;
-  font-weight: bold;
-  line-height: 36px;
-  margin-bottom: 15px;
-  color: $g700;
-}
-
-.role-panel-explanation {
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
 .role-administrations-image {
  text-align: right;

@ -392,84 +344,3 @@ $cta-panel-button-border-size: 2px;
    outline: 3px solid #FFFFFF;
  }
 }
-
-.cta-panel-button-blue {
-  @include cta-panel-button;
-  border: $cta-panel-button-border-size solid $blue-france-700;
-  color: $blue-france-700;
-
-  &:hover {
-    color: #FFFFFF;
-    background-color: $blue-france-500;
-    text-decoration: none;
-
-    &:focus {
-      color: #FFFFFF;
-    }
-  }
-
-  &:focus {
-    color: $blue-france-500;
-    text-decoration: none;
-  }
-}
-
-@mixin role-button {
-  @include horizontal-padding(30px);
-  display: inline-block;
-  border-radius: 100px;
-  font-size: 20px;
-  text-align: center;
-  cursor: pointer;
-  margin-top: 20px;
-  line-height: 50px;
-}
-
-.role-panel-button-primary {
-  @include role-button;
-  background-color: $blue-france-700;
-  color: #FFFFFF;
-
-  &:hover {
-    color: #FFFFFF;
-    text-decoration: none;
-    background-color: $blue-france-500;
-  }
-
-  &:focus {
-    color: #FFFFFF;
-    text-decoration: none;
-  }
-}
-
-.role-panel-button-secondary {
-  @include role-button;
-  border: $cta-panel-button-border-size solid $blue-france-700;
-  line-height: 50px - 2 * $cta-panel-button-border-size;
-  color: $blue-france-700;
-  margin-left: 10px;
-
-  @media (max-width: $users-breakpoint) {
-    margin-left: 0px;
-  }
-
-  &:hover {
-    color: $blue-france-500;
-    border: $cta-panel-button-border-size solid $blue-france-500;
-    text-decoration: none;
-  }
-
-  &:focus {
-    color: $light-blue;
-    text-decoration: none;
-  }
-}
-
-.half {
-  width: 45%;
-  float: left;
-}
-
-.first-half {
-  margin-right: 10%;
-}
--- a/app/assets/stylesheets/layouts.scss
+++ b/app/assets/stylesheets/layouts.scss
@ -1,6 +1,6 @@
@import "colors";
-@import "common";
@import "constants";
+@import "placeholders";

 .two-columns {
  background-color: $white;
@ -9,8 +9,8 @@
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
  }

-  .columns-container {
-    @extend .container;
+  .columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
+    @extend %container;
    display: flex;
    flex-direction: column;
    justify-content: center;
--- a/app/assets/stylesheets/merci.scss
+++ b/app/assets/stylesheets/merci.scss
@ -1,5 +1,3 @@
-@import "colors";
-@import "common";
@import "constants";

 .merci .monavis {
--- a/app/assets/stylesheets/message.scss
+++ b/app/assets/stylesheets/message.scss
@ -25,12 +25,6 @@
    font-weight: bold;
  }

-  .guest,
-  .date {
-    font-size: 12px;
-    color: $dark-grey;
-  }
-
  .date {
    float: right;
  }
--- a/app/assets/stylesheets/new_footer.scss
+++ b/app/assets/stylesheets/new_footer.scss
@ -1,7 +1,4 @@
-@import "colors";
-@import "constants";
@import "mixins";
-@import "placeholders";

 .landing-footer {
  @include vertical-padding(72px);
@ -12,50 +9,6 @@
  line-height: 24px;
 }

-.footer-columns {
-  @extend %horizontal-list;
-  justify-content: flex-start;
-  margin: 0 -15px;
-}
-
-.footer-column {
-  @extend %horizontal-list-item;
-  font-size: 14px;
-  vertical-align: top;
-  flex: 0 0 33.333333%;
-  min-width: 280px;
-  margin-bottom: 30px;
-
-  @media (max-width: 550px) {
-    width: 100%;
-  }
-}
-
-.footer-logos,
-.footer-links {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-header {
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.footer-link {
-  margin-bottom: 14px;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-}
-
-.footer-text {
-  margin-bottom: 14px;
-}
-
 .footer-logo:hover {
  opacity: 0.8;
 }
@ -67,56 +20,3 @@
  height: 25px;
  margin-top: 14px;
 }
-
-.footer-logo-france {
-  @include ie-compatible-background-image("republique-francaise-logo.svg");
-
-  width: 105px;
-  height: 90px;
-}
-
-.footer-link a,
-.footer-text a {
-  color: $black;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: $blue-france-700;
-    text-decoration: none;
-  }
-}
-
-.footer-bottom-line {
-  text-align: center;
-  font-size: small;
-
-  @media (max-width: 550px) {
-    text-align: left;
-  }
-}
-
-.footer-row {
-  margin-bottom: 30px;
-
-  // In this case, the bottom margin is defined directly on each individual column
-  &.footer-columns {
-    margin-bottom: 0;
-  }
-}
-
-.footer-site-links {
-  li {
-    display: inline;
-
-
-    &::before {
-      content: "-";
-      margin: $default-spacer;
-    }
-
-    &:first-child::before {
-      content: none;
-    }
-  }
-}
--- a/app/assets/stylesheets/new_header.scss
+++ b/app/assets/stylesheets/new_header.scss
@ -1,17 +1,3 @@
-@import "colors";
-@import "common";
-@import "constants";
-@import "mixins";
-@import "utils";
-
-$header-landing-breakpoint: 1040px;
-$header-mobile-breakpoint: 550px;
-
-// FIXME: Rename when the header is generalized
-.new-header {
-  background-color: #FFFFFF;
-}
-
 // No drop shadow when a notice is shown.
 .fr-header.fr-header__with-notice-info {
  &,
@ -19,233 +5,3 @@ $header-mobile-breakpoint: 550px;
    filter: none;
  }
 }
-
-.header-inner-content {
-  @extend .container;
-  display: flex;
-  justify-content: space-between;
-  min-height: 72px;
-}
-
-.header-logo {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  color: $blue-france-500;
-
-  img {
-    margin-right: 10px;
-  }
-
-  .site-title {
-    font-size: 24px;
-    font-weight: bold;
-
-    &.small {
-      @media (min-width: $header-mobile-breakpoint) {
-        display: none;
-      }
-    }
-
-    &.big {
-      @media (max-width: $header-mobile-breakpoint) {
-        display: none;
-      }
-    }
-  }
-}
-
-.header-tabs {
-  li {
-    @include horizontal-padding($default-padding);
-    display: inline-block;
-  }
-
-  .tab-link {
-    display: inline-block;
-    height: 72px;
-    line-height: 72px;
-    font-size: 18px;
-    color: $black;
-
-    &.active,
-    &:hover {
-      color: $blue-france-500;
-      border-bottom: 2px solid $blue-france-500;
-
-      &.contact-link {
-        position: relative;
-        border-bottom: none;
-
-        .contact-details {
-          display: block;
-        }
-      }
-    }
-  }
-}
-
-.contact-details {
-  display: none;
-  position: absolute;
-  left: -165px;
-  background: #FFFFFF;
-  border: 2px solid $blue-france-500;
-  border-radius: 5px;
-  padding: 15px;
-  width: 400px;
-  color: $black;
-  z-index: 100;
-  font-size: initial;
-  line-height: 1.6;
-
-  &::after,
-  &::before {
-    bottom: 100%;
-    left: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  &::after {
-    border-color: rgba(255, 255, 255, 0);
-    border-bottom-color: #FFFFFF;
-    border-width: 15px;
-    margin-left: -15px;
-  }
-
-  &::before {
-    border-color: rgba(255, 255, 255, 0);
-    border-bottom-color: $blue-france-500;
-    border-width: 18px;
-    margin-left: -18px;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-}
-
-.header-right-content {
-  display: flex;
-  align-items: center;
-
-  > li {
-    @include horizontal-padding(8px);
-
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-.header-search {
-  position: relative;
-
-  .form input[type=text] {
-    padding: 9px;
-    padding-right: 42px;
-    float: right;
-    max-width: 300px;
-    min-width: 90px;
-    margin: 0;
-  }
-
-  label.hidden {
-    @extend .hidden;
-  }
-
-  button {
-    @extend %outline;
-
-    padding: 9px;
-    border: none;
-    background: none;
-    cursor: pointer;
-    position: absolute;
-    right: 0;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-.header-menu-opener {
-  position: relative;
-
-  img {
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-.header-menu-button {
-  border: none;
-  padding: 0;
-  line-height: 14px;
-  vertical-align: middle;
-
-  &:hover {
-    background: none;
-  }
-
-}
-
-.header-menu {
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 34px;
-  font-size: 14px;
-  background: #FFFFFF;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  border: 1px solid $border-grey;
-  min-width: 270px;
-  max-width: 340px;
-  z-index: 20;
-
-  &.open {
-    display: block;
-  }
-
-  li {
-    border-bottom: 1px solid $border-grey;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .menu-item {
-      align-items: center;
-      padding: 14px;
-      color: $dark-grey;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      img {
-        margin-right: 14px;
-      }
-    }
-
-    .menu-link {
-      display: flex;
-      color: $black;
-
-      &.active {
-        font-weight: bold;
-      }
-
-      &:hover {
-        background: $light-grey;
-      }
-    }
-  }
-}
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@ -1,5 +1,4 @@
@import "colors";
-@import "fonts";

@media print {
  .new-header,
--- a/app/assets/stylesheets/procedure_admin.scss
+++ b/app/assets/stylesheets/procedure_admin.scss
@ -1,7 +1,10 @@
-
 .procedure-grid {
  display: flex;
  flex-wrap: wrap;
+
+  > a { // TODO, re-use DSFR https://github.com/betagouv/demarches-simplifiees.fr/issues/7884
+    background-image: none; // remove DSFR underline
+  }
 }

 .procedure-admin-container {
@ -12,6 +15,10 @@
  .button {
    margin-right: 10px;
  }
+
+  a {
+    background-image: none; // remove DSFR underline
+  }
 }

 .procedure-admin-listing-container {
--- a/app/assets/stylesheets/procedure_champs_editor.scss
+++ b/app/assets/stylesheets/procedure_champs_editor.scss
@ -158,9 +158,6 @@
    font-size: 14px;

    a {
-      text-decoration: underline;
-      text-decoration-style: dotted;
-
      // Remove the icon indicating an external link (for less visual noise)
      &[target="_blank"]::after {
        display: none;
--- a/app/assets/stylesheets/procedure_list.scss
+++ b/app/assets/stylesheets/procedure_list.scss
@ -4,25 +4,11 @@

 .procedure-list {
  .procedure-item {
-    border-bottom: 1px solid $border-grey;
+    background-color: rgba(0, 0, 0, 0.02);
+  }

-    &:last-child {
-      border-bottom: none;
-    }
-
-    a {
-      @include vertical-padding(24px);
-      color: $black;
-      width: 100%;
-
-      &:hover {
-        background-color: $light-grey;
-
-        .procedure-title {
-          text-decoration: underline;
-        }
-      }
-    }
+  .procedure-logo-link {
+    background-image: none;
  }

  .procedure-logo {
@ -34,30 +20,29 @@
    background-position: 95% 50%;
  }

-  .procedure-title {
-    min-height: 40px;
-    font-size: 20px;
-    margin-bottom: 16px;
-  }
-
  .procedure-status {
    margin-left: auto;
  }

  .procedure-stats {
+    list-style-type: none;
+    padding-inline-start: 0;
+
    li {
      min-height: 36px;
-      border-left: 1px solid $border-grey;
      width: 90px;
      position: relative;

+      border-left: 1px solid $border-grey;
+
+      &:first-child {
+        border-left: none;
+      }
+
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

-      &:last-child {
-        border-right: 1px solid $border-grey;
-      }

      .stats-number,
      .stats-legend {
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@ -1,5 +1,4 @@
@import "colors";
-@import "common";
@import "constants";

 .procedure-header {
--- a/app/assets/stylesheets/reset.scss
+++ b/app/assets/stylesheets/reset.scss
@ -1,48 +0,0 @@
-/*
-  http://meyerweb.com/eric/tools/css/reset/
-  v2.0 | 20110126
-  License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-spacing: 0;
-}
--- a/app/assets/stylesheets/sub_header.scss
+++ b/app/assets/stylesheets/sub_header.scss
@ -10,4 +10,13 @@
  .container {
    margin-bottom: -1px;
  }
+
+  .breadcrumbs {
+    list-style: none;
+    padding-inline-start: 0;
+
+    a:not(:hover) {
+      background-image: none; // remove DSFR underline
+    }
+  }
 }
--- a/app/assets/stylesheets/_tabs.scss
+++ b/app/assets/stylesheets/_tabs.scss
@ -2,6 +2,10 @@
@import "mixins";

 .tabs {
+  ul {
+    margin-bottom: 0;
+  }
+
  li {
    display: inline-block;
    line-height: 36px;
@ -16,6 +20,7 @@
      padding-left: 20px;
      padding-right: 20px;
      color: $black;
+      background-image: none;
    }

    &.active {
--- a/app/components/attachment/edit_component/edit_component.html.haml
+++ b/app/components/attachment/edit_component/edit_component.html.haml
@ -2,10 +2,12 @@
  - if template&.attached?
    %p.mb-1
      Veuillez télécharger, remplir et joindre
-      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
+      = link_to(url_for(template), download: "", class: "fr-link fr-link--icon-right fr-icon-download-line") do
+        le modèle suivant

      - if helpers.administrateur_signed_in?
-        %em.fr-text-mention--grey.fr-text--xs.visible-on-previous-hover
+        %span.ml-2.fr-text--xs.fr-text-mention--grey.visible-on-previous-hover
+          %span.fr-text-action-high--blue-france.fr-icon-questionnaire-line{ "aria-hidden": "true" }
          = t('shared.ephemeral_link')

  - if persisted?
--- a/app/components/dossiers/message_component/message_component.html.haml
+++ b/app/components/dossiers/message_component/message_component.html.haml
@ -1,12 +1,12 @@
 = image_tag(icon_path, class: 'person-icon', alt: '')

 .width-100
-  %h2
+  %h2.fr-h6
    %span.mail
      = commentaire_issuer
    - if commentaire_from_guest?
-      %span.guest= t('.guest')
-    %span.date{ class: highlight_if_unseen_class, data: scroll_to_target }
+      %span.fr-text--xs.fr-text-mention--grey.font-weight-normal= t('.guest')
+    %span.date{ class: ["fr-text--xs", "fr-text-mention--grey", "font-weight-normal", highlight_if_unseen_class], data: scroll_to_target }
      = commentaire_date
  .rich-text= commentaire_body

--- a/app/components/editable_champ/champ_label_component/champ_label_component.html.haml
+++ b/app/components/editable_champ/champ_label_component/champ_label_component.html.haml
@ -1,7 +1,7 @@
 = # we do this trick because some html elements should use 'label' and some should be plain paragraphs
 - if @champ.html_label?
  = @form.label @champ.main_value_name, id: @champ.labelledby_id, for: @champ.input_id do
-    = render EditableChamp::ChampLabelContentComponent.new champ: @champ, seen_at: @seen_at
+    - render EditableChamp::ChampLabelContentComponent.new champ: @champ, seen_at: @seen_at
 - else
  .form-label.mb-4
    = render EditableChamp::ChampLabelContentComponent.new champ: @champ, seen_at: @seen_at
--- a/app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml
+++ b/app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml
@ -6,9 +6,9 @@

  .secondary{ class: @champ.has_secondary_options_for_primary? ? '' : 'hidden' }
    = @form.label :secondary_value, for: "#{@champ.input_id}-secondary" do
-      = @champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première"
-      - if @champ.type_de_champ.mandatory?
-        %span.mandatory *
+      - sanitize((@champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première") + (@champ.type_de_champ.mandatory? ? tag.span(' *', class: 'mandatory') : ''))
+      -# - if @champ.type_de_champ.mandatory?
+      -#   %span.mandatory *
    - if @champ.drop_down_secondary_description.present?
      .notice{ id: "#{@champ.describedby_id}-secondary" }= string_to_html(@champ.drop_down_secondary_description)
    = @form.select :secondary_value,
--- a/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml
+++ b/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml
@ -1,11 +1,9 @@
 - if @champ.options?
  - if @champ.render_as_checkboxes?
    = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b|
-      .editable-champ.editable-champ-checkbox
-        = b.label do
-          = b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } })
-          = b.text
-
+      - tag.div(class: 'editable-champ editable-champ-checkbox') do
+        - b.label do
+          - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text
  - else
    = @form.hidden_field :value
    = react_component("ComboMultipleDropdownList",
--- a/app/components/procedure/card/zones_component.rb
+++ b/app/components/procedure/card/zones_component.rb
@ -0,0 +1,5 @@
+class Procedure::Card::ZonesComponent < ApplicationComponent
+  def initialize(procedure:)
+    @procedure = procedure
+  end
+end
--- a/app/components/procedure/card/zones_component/zones_component.fr.yml
+++ b/app/components/procedure/card/zones_component/zones_component.fr.yml
@ -0,0 +1,4 @@
+---
+fr:
+  title: Zones
+  subtitle: Ministère(s) ou collectivité qui mettent en oeuvre la démarche
--- a/app/components/procedure/card/zones_component/zones_component.html.haml
+++ b/app/components/procedure/card/zones_component/zones_component.html.haml
@ -0,0 +1,13 @@
+= link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'card-admin' do
+  - if @procedure.zones.size >= 1
+    %div
+      %span.icon.accept
+      %p.card-admin-status-accept Validé
+  - else
+    %div
+      %span.icon.clock
+      %p.card-admin-status-todo À faire
+  %div
+    %p.card-admin-title= t('.title')
+    %p.card-admin-subtitle= t('.subtitle')
+  %p.button= t('views.shared.actions.edit')
--- a/app/components/procedure/search_component/search_component.html.haml
+++ b/app/components/procedure/search_component/search_component.html.haml
@ -7,6 +7,6 @@

  = text_field_tag :query, params[:query], required: true, placeholder: 'politique de la ville', minlength: "3"

-  = submit_tag 'Rechercher', class: 'button primary'
+  = submit_tag 'Rechercher', class: 'fr-btn'

  = render Procedure::ResultsComponent.new(grouped_procedures: @grouped_procedures)
--- a/app/controllers/administrateurs/groupe_instructeurs_controller.rb
+++ b/app/controllers/administrateurs/groupe_instructeurs_controller.rb
@ -191,10 +191,12 @@ module Administrateurs
    end

    def update_routing_criteria_name
-      procedure.update!(routing_criteria_name: routing_criteria_name)
-
-      redirect_to admin_procedure_groupe_instructeurs_path(procedure),
-        notice: "Le libellé est maintenant « #{procedure.routing_criteria_name} »."
+      if procedure.update(routing_criteria_name: routing_criteria_name)
+        flash[:notice] = "Le libellé est maintenant « #{procedure.routing_criteria_name} »."
+      else
+        flash[:alert] = "Le libellé du routage doit être rempli."
+      end
+      redirect_to admin_procedure_groupe_instructeurs_path(procedure)
    end

    def update_routing_enabled
--- a/app/controllers/administrateurs/procedures_controller.rb
+++ b/app/controllers/administrateurs/procedures_controller.rb
@ -1,6 +1,6 @@
 module Administrateurs
  class ProceduresController < AdministrateurController
-    before_action :retrieve_procedure, only: [:champs, :annotations, :modifications, :edit, :monavis, :update_monavis, :jeton, :update_jeton, :publication, :publish, :transfert, :close, :allow_expert_review, :experts_require_administrateur_invitation, :reset_draft]
+    before_action :retrieve_procedure, only: [:champs, :annotations, :modifications, :edit, :zones, :monavis, :update_monavis, :jeton, :update_jeton, :publication, :publish, :transfert, :close, :allow_expert_review, :experts_require_administrateur_invitation, :reset_draft]
    before_action :procedure_revisable?, only: [:champs, :annotations, :modifications, :reset_draft]
    before_action :draft_valid?, only: [:apercu]

@ -108,6 +108,9 @@ module Administrateurs
    def edit
    end

+    def zones
+    end
+
    def create
      @procedure = Procedure.new(procedure_params.merge(administrateurs: [current_administrateur]))
      @procedure.draft_revision = @procedure.revisions.build
@ -128,7 +131,11 @@ module Administrateurs

      if !@procedure.update(procedure_params)
        flash.now.alert = @procedure.errors.full_messages
-        render 'edit'
+        if @procedure.errors[:zones].present?
+          render 'zones'
+        else
+          render 'edit'
+        end
      elsif @procedure.brouillon?
        reset_procedure
        flash.notice = 'Démarche modifiée. Tous les dossiers de cette démarche ont été supprimés.'
@ -351,7 +358,7 @@ module Administrateurs
        :monavis_embed,
        :api_entreprise_token,
        :duree_conservation_dossiers_dans_ds,
-        :zone_id,
+        { zone_ids: [] },
        :lien_dpo,
        :opendata,
        :procedure_expires_when_termine_enabled
--- a/app/controllers/users/dossiers_controller.rb
+++ b/app/controllers/users/dossiers_controller.rb
@ -181,7 +181,14 @@ module Users

      respond_to do |format|
        format.html { render :brouillon }
-        format.turbo_stream { render layout: false }
+        format.turbo_stream do
+          @to_shows, @to_hides = @dossier.champs
+            .filter(&:conditional?)
+            .partition(&:visible?)
+            .map { |champs| champs_to_one_selector(champs) }
+
+          render(:update, layout: false)
+        end
      end
    end

@ -205,7 +212,14 @@ module Users

      respond_to do |format|
        format.html { render :modifier }
-        format.turbo_stream { render layout: false }
+        format.turbo_stream do
+          @to_shows, @to_hides = @dossier.champs
+            .filter(&:conditional?)
+            .partition(&:visible?)
+            .map { |champs| champs_to_one_selector(champs) }
+
+          render layout: false
+        end
      end
    end

@ -392,7 +406,7 @@ module Users
    end

    def dossier_with_champs
-      dossier_scope.with_champs.find(params[:id])
+      DossierPreloader.load_one(dossier)
    end

    def should_change_groupe_instructeur?
@ -520,5 +534,12 @@ module Users
        # rubocop:enable Lint/BooleanSymbol
      end
    end
+
+    def champs_to_one_selector(champs)
+      champs
+        .map(&:input_group_id)
+        .map { |id| "##{id}" }
+        .join(',')
+    end
  end
 end
--- a/app/dashboards/procedure_dashboard.rb
+++ b/app/dashboards/procedure_dashboard.rb
@ -19,7 +19,6 @@ class ProcedureDashboard < Administrate::BaseDashboard
    zone: Field::BelongsTo,
    lien_site_web: Field::String, # TODO: use Field::Url when administrate-v0.12 will be released
    organisation: Field::String,
-    direction: Field::String,
    created_at: Field::DateTime,
    updated_at: Field::DateTime,
    for_individual: Field::Boolean,
@ -38,7 +37,7 @@ class ProcedureDashboard < Administrate::BaseDashboard
    attestation_template: AttestationTemplateField,
    procedure_expires_when_termine_enabled: Field::Boolean,
    duree_conservation_dossiers_dans_ds: Field::Number,
-    duree_conservation_etendue_par_ds: Field::Boolean
+    max_duree_conservation_dossiers_dans_ds: Field::Number
  }.freeze

  # COLLECTION_ATTRIBUTES
@ -67,7 +66,6 @@ class ProcedureDashboard < Administrate::BaseDashboard
    :description,
    :lien_site_web,
    :organisation,
-    :direction,
    :zone,
    :service,
    :created_at,
@ -88,7 +86,7 @@ class ProcedureDashboard < Administrate::BaseDashboard
    :attestation_template,
    :procedure_expires_when_termine_enabled,
    :duree_conservation_dossiers_dans_ds,
-    :duree_conservation_etendue_par_ds
+    :max_duree_conservation_dossiers_dans_ds
  ].freeze

  # FORM_ATTRIBUTES
@ -97,7 +95,7 @@ class ProcedureDashboard < Administrate::BaseDashboard
  FORM_ATTRIBUTES = [
    :procedure_expires_when_termine_enabled,
    :duree_conservation_dossiers_dans_ds,
-    :duree_conservation_etendue_par_ds
+    :max_duree_conservation_dossiers_dans_ds
  ].freeze

  # Overwrite this method to customize how procedures are displayed
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -128,4 +128,8 @@ module ApplicationHelper
  def external_link_attributes
    { target: "_blank", rel: "noopener noreferrer" }
  end
+
+  def download_details(attachment)
+    "#{attachment.filename.extension.upcase} – #{number_to_human_size(attachment.byte_size)}"
+  end
 end
--- a/app/helpers/procedure_helper.rb
+++ b/app/helpers/procedure_helper.rb
@ -8,11 +8,17 @@ module ProcedureHelper
  end

  def procedure_libelle(procedure)
-    parts = procedure.brouillon? ? [tag.span(t('helpers.procedure.testing_procedure'), class: 'badge')] : []
+    parts = procedure.brouillon? ? [procedure_badge(procedure)] : []
    parts << procedure.libelle
    safe_join(parts, ' ')
  end

+  def procedure_badge(procedure)
+    return nil unless procedure.brouillon?
+
+    tag.span(t('helpers.procedure.testing_procedure'), class: 'fr-badge')
+  end
+
  def procedure_publish_label(procedure, key)
    # i18n-tasks-use t('modal.publish.body.publish')
    # i18n-tasks-use t('modal.publish.body.reopen')
--- a/app/helpers/zone_helper.rb
+++ b/app/helpers/zone_helper.rb
@ -1,13 +0,0 @@
-module ZoneHelper
-  def grouped_options_for_zone(date)
-    date ||= Time.zone.now
-    collectivite = Zone.find_by(acronym: "COLLECTIVITE")
-    {
-      "--" => [
-        [I18n.t('i_dont_know', scope: 'utils'), nil],
-        [collectivite.label, collectivite.id]
-      ],
-    I18n.t('ministeres', scope: 'zones') => (Zone.available_at(date) - [collectivite]).map { |m| [m.label_at(date), m.id] }
-    }
-  end
-end
--- a/app/javascript/components/ComboAdresseSearch.tsx
+++ b/app/javascript/components/ComboAdresseSearch.tsx
@ -25,6 +25,7 @@ export default function ComboAdresseSearch({
        minimumInputLength={2}
        transformResult={({ properties: { label } }) => [label, label, label]}
        transformResults={(_, result) => (result as RawResult).features}
+        debounceDelay={300}
      />
    </QueryClientProvider>
  );
--- a/app/javascript/components/ComboSearch.tsx
+++ b/app/javascript/components/ComboSearch.tsx
@ -1,9 +1,5 @@
-import React, {
-  useState,
-  useRef,
-  useDeferredValue,
-  ChangeEventHandler
-} from 'react';
+import React, { useState, useRef, ChangeEventHandler } from 'react';
+import { useDebounce } from 'use-debounce';
 import { useQuery } from 'react-query';
 import {
  Combobox,
@ -35,6 +31,7 @@ export type ComboSearchProps<Result> = {
  describedby?: string;
  className?: string;
  placeholder?: string;
+  debounceDelay?: number;
 };

 type QueryKey = readonly [
@ -54,6 +51,7 @@ function ComboSearch<Result>({
  transformResults = (_, results) => results as Result[],
  id,
  describedby,
+  debounceDelay = 0,
  ...props
 }: ComboSearchProps<Result>) {
  invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required');
@ -63,7 +61,7 @@ function ComboSearch<Result>({
  const [, setExternalId] = useHiddenField(group, 'external_id');
  const initialValue = externalValue ? externalValue : controlledValue;
  const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDeferredValue(searchTerm);
+  const [debouncedSearchTerm] = useDebounce(searchTerm, debounceDelay);
  const [value, setValue] = useState(initialValue);
  const resultsMap = useRef<
    Record<string, { key: string; value: string; result: Result }>
--- a/app/javascript/entrypoints/main.css
+++ b/app/javascript/entrypoints/main.css
@ -12,6 +12,7 @@
@import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
@import '@gouvfr/dsfr/dist/component/callout/callout.css';
@import '@gouvfr/dsfr/dist/component/connect/connect.css';
+@import '@gouvfr/dsfr/dist/component/download/download.css';
@import '@gouvfr/dsfr/dist/component/highlight/highlight.css';
@import '@gouvfr/dsfr/dist/component/input/input.css';
@import '@gouvfr/dsfr/dist/component/checkbox/checkbox.css';
--- a/app/lib/api_address/address_adapter.rb
+++ b/app/lib/api_address/address_adapter.rb
@ -22,7 +22,7 @@ class APIAddress::AddressAdapter
          street_address: result.street_address,
          street_number: result.street_number,
          street_name: result.street_name,
-          postal_code: result.postal_code,
+          postal_code: result.postal_code.presence || "",
          city_name: result.city_name,
          city_code: result.city_code,
          department_name: result.department_name,
--- a/app/mailers/expert_mailer.rb
+++ b/app/mailers/expert_mailer.rb
@ -2,6 +2,7 @@ class ExpertMailer < ApplicationMailer
  helper MailerHelper
  layout 'mailers/layout'

+  # TODO: replace with v2 after MEP
  def send_dossier_decision(avis_id)
    @avis = Avis.eager_load(:dossier).find(avis_id)
    @dossier = @avis.dossier
@ -11,6 +12,16 @@ class ExpertMailer < ApplicationMailer

    mail(to: email, subject: subject)
  end
+
+  def send_dossier_decision_v2(avis)
+    @avis = avis
+    @dossier = @avis.dossier
+    email = @avis.expert.email
+    @decision = decision_dossier(@dossier)
+    subject = "Dossier n° #{@dossier.id} a été #{@decision} - #{@dossier.procedure.libelle}"
+
+    mail(template_name: 'send_dossier_decision', to: email, subject: subject)
+  end
 end

 def decision_dossier(dossier)
--- a/app/models/champs/iban_champ.rb
+++ b/app/models/champs/iban_champ.rb
@ -20,5 +20,20 @@
 #  type_de_champ_id               :integer
 #
 class Champs::IbanChamp < Champ
-  validates_with IbanValidator
+  validates_with IbanValidator, if: -> { validation_context != :brouillon }
+  after_validation :format_iban
+
+  def for_api
+    to_s.gsub(/\s+/, '')
+  end
+
+  def for_api_v2
+    for_api
+  end
+
+  private
+
+  def format_iban
+    self.value = value&.gsub(/\s+/, '')&.gsub(/(.{4})/, '\0 ')
+  end
 end
--- a/app/models/dossier.rb
+++ b/app/models/dossier.rb
@ -241,19 +241,8 @@ class Dossier < ApplicationRecord
      .joins(:traitements)
      .where(traitements: { processed_at: date.beginning_of_month..date.end_of_month })
  end
-  scope :downloadable_sorted, -> {
-    state_not_brouillon
-      .visible_by_administration
-      .includes(
-        :user,
-        :individual,
-        :followers_instructeurs,
-        :traitement,
-        :groupe_instructeur,
-        :etablissement,
-        procedure: [:groupe_instructeurs],
-        avis: [:claimant, :expert]
-      ).order(depose_at: 'asc')
+  scope :ordered_for_export, -> {
+    order(depose_at: 'asc')
  }
  scope :en_cours,                    -> { not_archived.state_en_construction_ou_instruction }
  scope :without_followers,           -> { left_outer_joins(:follows).where(follows: { id: nil }) }
@ -434,7 +423,16 @@ class Dossier < ApplicationRecord
  end

  def self.downloadable_sorted_batch
-    DossierPreloader.new(downloadable_sorted).in_batches
+    DossierPreloader.new(includes(
+      :user,
+      :individual,
+      :followers_instructeurs,
+      :traitement,
+      :groupe_instructeur,
+      :etablissement,
+      procedure: [:groupe_instructeurs],
+      avis: [:claimant, :expert]
+    ).ordered_for_export).in_batches
  end

  def user_deleted?
@ -1262,11 +1260,12 @@ class Dossier < ApplicationRecord
      .pluck('avis.id, experts_procedures.id')

    # rubocop:disable Lint/UnusedBlockArgument
-    avis_ids = avis_experts_procedures_ids
+    avis = avis_experts_procedures_ids
      .uniq { |(avis_id, experts_procedures_id)| experts_procedures_id }
      .map { |(avis_id, _)| avis_id }
+      .then { |avis_ids| Avis.find(avis_ids) }
    # rubocop:enable Lint/UnusedBlockArgument

-    avis_ids.each { |avis_id| ExpertMailer.send_dossier_decision(avis_id).deliver_later }
+    avis.each { |a| ExpertMailer.send_dossier_decision_v2(a).deliver_later }
  end
 end
--- a/app/models/dossier_preloader.rb
+++ b/app/models/dossier_preloader.rb
@ -11,12 +11,16 @@ class DossierPreloader
    dossiers
  end

-  def all
+  def all(pj_template: false)
    dossiers = @dossiers.to_a
-    load_dossiers(dossiers)
+    load_dossiers(dossiers, pj_template:)
    dossiers
  end

+  def self.load_one(dossier)
+    DossierPreloader.new([dossier]).all(pj_template: true).first
+  end
+
  private

  # returns: { revision_id : { type_de_champ_id : position } }
@ -30,9 +34,17 @@ class DossierPreloader
      end
  end

-  def load_dossiers(dossiers)
+  def load_dossiers(dossiers, pj_template: false)
+    to_include = [piece_justificative_file_attachment: :blob]
+
+    if pj_template
+      to_include << { type_de_champ: { piece_justificative_template_attachment: :blob } }
+    else
+      to_include << :type_de_champ
+    end
+
    all_champs = Champ
-      .includes(:type_de_champ, piece_justificative_file_attachment: :blob)
+      .includes(to_include)
      .where(dossier_id: dossiers)
      .to_a

@ -80,6 +92,10 @@ class DossierPreloader
  def load_champs(parent, name, champs, dossier, children_by_parent)
    champs.each do |champ|
      champ.association(:dossier).target = dossier
+
+      if parent.is_a?(Champ)
+        champ.association(:parent).target = parent
+      end
    end

    parent.association(name).target = champs.sort_by do |champ|
@ -92,7 +108,6 @@ class DossierPreloader
      parent_champ.association(:dossier).target = dossier

      load_champs(parent_champ, :champs, champs, dossier, children_by_parent)
-      parent_champ.association(:champs).set_inverse_instance(parent_champ)
    end
  end
 end
--- a/app/models/procedure.rb
+++ b/app/models/procedure.rb
@ -32,6 +32,7 @@
 #  lien_dpo                                  :string
 #  lien_notice                               :string
 #  lien_site_web                             :string
+#  max_duree_conservation_dossiers_dans_ds   :integer          default(12)
 #  monavis_embed                             :text
 #  opendata                                  :boolean          default(TRUE)
 #  organisation                              :string
@ -61,6 +62,8 @@ class Procedure < ApplicationRecord

  include Discard::Model
  self.discard_column = :hidden_at
+  self.ignored_columns = [:direction, :durees_conservation_required, :cerfa_flag, :test_started_at]
+
  default_scope -> { kept }

  OLD_MAX_DUREE_CONSERVATION = 36
@ -100,6 +103,7 @@ class Procedure < ApplicationRecord
  belongs_to :replaced_by_procedure, -> { with_discarded }, inverse_of: :replaced_procedures, class_name: "Procedure", optional: true
  belongs_to :service, optional: true
  belongs_to :zone, optional: true
+  has_and_belongs_to_many :zones

  def active_dossier_submitted_message
    published_dossier_submitted_message || draft_dossier_submitted_message
@ -273,18 +277,15 @@ class Procedure < ApplicationRecord
  validates :duree_conservation_dossiers_dans_ds, allow_nil: false,
                                                  numericality: {
                                                    only_integer: true,
-                                                                  greater_than_or_equal_to: 1,
-                                                                  less_than_or_equal_to: OLD_MAX_DUREE_CONSERVATION
-                                                  },
-                                                  if: :duree_conservation_etendue_par_ds
-
-  validates :duree_conservation_dossiers_dans_ds, allow_nil: false,
-                                                    numericality: {
-                                                      only_integer: true,
-                                                                    greater_than_or_equal_to: 1,
-                                                                    less_than_or_equal_to: NEW_MAX_DUREE_CONSERVATION
-                                                    },
-                                                    unless: :duree_conservation_etendue_par_ds
+                                                    greater_than_or_equal_to: 1,
+                                                    less_than_or_equal_to: :max_duree_conservation_dossiers_dans_ds
+                                                  }
+  validates :max_duree_conservation_dossiers_dans_ds, allow_nil: false,
+                                                  numericality: {
+                                                    only_integer: true,
+                                                    greater_than_or_equal_to: 1,
+                                                    less_than_or_equal_to: 60
+                                                  }

  validates :lien_dpo, email_or_link: true, allow_nil: true
  validates_with MonAvisEmbedValidator
@ -322,6 +323,7 @@ class Procedure < ApplicationRecord

  validates :api_entreprise_token, jwt_token: true, allow_blank: true
  validates :api_particulier_token, format: { with: /\A[A-Za-z0-9\-_=.]{15,}\z/ }, allow_blank: true
+  validates :routing_criteria_name, presence: true, allow_blank: false

  before_save :update_juridique_required
  after_initialize :ensure_path_exists
@ -489,6 +491,7 @@ class Procedure < ApplicationRecord
    procedure.duree_conservation_etendue_par_ds = false
    if procedure.duree_conservation_dossiers_dans_ds > NEW_MAX_DUREE_CONSERVATION
      procedure.duree_conservation_dossiers_dans_ds = NEW_MAX_DUREE_CONSERVATION
+      procedure.max_duree_conservation_dossiers_dans_ds = NEW_MAX_DUREE_CONSERVATION
    end
    procedure.published_revision = nil
    procedure.draft_revision.procedure = procedure
@ -626,6 +629,10 @@ class Procedure < ApplicationRecord
      result << :instructeurs
    end

+    if missing_zones?
+      result << :zones
+    end
+
    result
  end

@ -658,6 +665,14 @@ class Procedure < ApplicationRecord
    !AssignTo.exists?(groupe_instructeur: groupe_instructeurs)
  end

+  def missing_zones?
+    if Flipper.enabled?(:zonage)
+      zones.empty?
+    else
+      false
+    end
+  end
+
  def revised?
    feature_enabled?(:procedure_revisions) && revisions.size > 2
  end
@ -789,6 +804,7 @@ class Procedure < ApplicationRecord
    if published_revision.present? && draft_changed?
      transaction do
        reset!
+        draft_revision.types_de_champ.filter(&:only_present_on_draft?).each(&:destroy)
        draft_revision.update(attestation_template: nil, dossier_submitted_message: nil)
        draft_revision.destroy
        update!(draft_revision: create_new_revision(published_revision))
--- a/app/models/zone.rb
+++ b/app/models/zone.rb
@ -11,7 +11,7 @@
 class Zone < ApplicationRecord
  validates :acronym, presence: true, uniqueness: true
  has_many :labels, -> { order(designated_on: :desc) }, class_name: 'ZoneLabel', inverse_of: :zone
-  has_many :procedures, -> { order(published_at: :desc) }, inverse_of: :zone
+  has_and_belongs_to_many :procedures, -> { order(published_at: :desc) }, inverse_of: :zone

  def current_label
    labels.first.name
@ -28,5 +28,8 @@ class Zone < ApplicationRecord

  def self.available_at(date)
    Zone.all.filter { |zone| zone.available_at?(date) }.sort_by { |zone| zone.label_at(date) }
+      .map do |zone|
+      OpenStruct.new(id: zone.id, label: zone.label_at(date))
+    end
  end
 end
--- a/app/schemas/adresse-ban.json
+++ b/app/schemas/adresse-ban.json
@ -19,7 +19,7 @@
          "enum": ["housenumber", "street", "locality", "municipality"]
        }
      },
-      "required": ["label", "type", "name", "postcode", "citycode", "city"]
+      "required": ["label", "type", "name", "citycode", "city"]
    },
    "geometry": {
      "type": "object",
--- a/app/serializers/procedure_serializer.rb
+++ b/app/serializers/procedure_serializer.rb
@ -6,12 +6,12 @@ class ProcedureSerializer < ActiveModel::Serializer
  attributes :id,
    :description,
    :organisation,
-    :direction,
    :archived_at,
    :geographic_information,
    :total_dossier,
    :link,
-    :state
+    :state,
+    :direction

  has_one :geographic_information, serializer: ModuleAPICartoSerializer
  has_many :types_de_champ, serializer: TypeDeChampSerializer
@ -19,6 +19,10 @@ class ProcedureSerializer < ActiveModel::Serializer
  has_many :types_de_piece_justificative
  belongs_to :service, serializer: ServiceSerializer

+  def direction
+    ""
+  end
+
  def archived_at
    object.closed_at&.in_time_zone('UTC')
  end
--- a/app/views/administrateurs/_breadcrumbs.html.haml
+++ b/app/views/administrateurs/_breadcrumbs.html.haml
@ -17,8 +17,8 @@

    - if defined?(preview) && preview
      .mb-2
-        = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button'
-        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'button accepted'
+        = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--secondary'
+        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'fr-btn fr-ml-2w fr-btn--icon-right fr-icon-arrow-right-fill'

    - if defined?(metadatas)
      .metadatas.pb-3
--- a/app/views/administrateurs/attestation_templates/edit.html.haml
+++ b/app/views/administrateurs/attestation_templates/edit.html.haml
@ -36,8 +36,8 @@
            %span.toggle-switch-label.off Attestation désactivée

        .actions-right
-          = link_to 'Annuler', edit_admin_procedure_attestation_template_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
-          = f.button 'Enregistrer', class: 'button primary send'
+          = link_to 'Annuler', edit_admin_procedure_attestation_template_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+          = f.button 'Enregistrer', class: 'fr-btn'

    .procedure-form__column--preview
      .procedure-form__preview.sticky--top
--- a/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml
@ -18,7 +18,7 @@
          label: 'Emails',
          acceptNewValues: true)

-      = f.submit 'Affecter', class: 'button primary send', disabled: disabled_as_super_admin
+      = f.submit 'Affecter', class: 'fr-btn', disabled: disabled_as_super_admin

  %table.table.mt-2
    %thead
@ -32,11 +32,11 @@
            #{instructeur.email}

          - confirmation_message = procedure.routee? ? "Ê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 'retirer',
+          %td.actions= button_to 'Retirer',
            { action: :remove_instructeur, id: groupe_instructeur.id },
            { method: :delete,
              data: { confirm: confirmation_message },
              params: { instructeur: { id: instructeur.id }},
-              class: 'button' }
+              class: 'fr-btn fr-btn--secondary' }

  = paginate instructeurs
--- a/app/views/administrateurs/groupe_instructeurs/_routing.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/_routing.html.haml
@ -6,9 +6,9 @@

  - if procedure.routee?
    - if procedure.routing_enabled? && procedure.groupe_instructeurs.size == 1
-      = link_to t('.button.routing_disable'), update_routing_enabled_admin_procedure_groupe_instructeurs_path(procedure, routing: :disable), class: 'button primary mt-1', method: 'patch'
+      = link_to t('.button.routing_disable'), update_routing_enabled_admin_procedure_groupe_instructeurs_path(procedure, routing: :disable), class: 'fr-btn', method: 'patch'
  - else
-    = link_to t('.button.routing_enable'), update_routing_enabled_admin_procedure_groupe_instructeurs_path(procedure, routing: :enable), class: 'button primary mt-1', method: 'patch'
+    = link_to t('.button.routing_enable'), update_routing_enabled_admin_procedure_groupe_instructeurs_path(procedure, routing: :enable), class: 'fr-btn', method: 'patch'
 .card
  %h2.card-title L‘autogestion des instructeurs
  %p.notice= t('.self_managment_notice_html')
--- a/app/views/administrateurs/mail_templates/index.html.haml
+++ b/app/views/administrateurs/mail_templates/index.html.haml
@ -15,4 +15,4 @@
            %span.badge.baseline modifié le #{mail_template.updated_at.strftime('%d-%m-%Y')}

        %div
-          = link_to 'Modifier', edit_admin_procedure_mail_template_path(@procedure, mail_template.class.const_get(:SLUG)), class: 'button'
+          = link_to 'Modifier', edit_admin_procedure_mail_template_path(@procedure, mail_template.class.const_get(:SLUG)), class: 'fr-btn'
--- a/app/views/administrateurs/procedures/_informations.html.haml
+++ b/app/views/administrateurs/procedures/_informations.html.haml
@ -13,12 +13,6 @@
  %span.mandatory *
 = f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control'

- if Flipper.enabled? :zonage
-  = f.label :zone do
-    = t('zone', scope: 'activerecord.attributes.procedure')
-    %span.mandatory *
-  = f.select :zone_id, grouped_options_for_zone(@procedure.published_or_created_at)
-
 %h3.header-subsection Logo de la démarche
 = render Attachment::EditComponent.new(form: f, attached_file: @procedure.logo, direct_upload: true, user_can_destroy: true)

--- a/app/views/administrateurs/procedures/_procedures_list.html.haml
+++ b/app/views/administrateurs/procedures/_procedures_list.html.haml
@ -6,7 +6,7 @@
      .flex.column.ml-1
        .card-title
          = link_to procedure.libelle, admin_procedure_path(procedure), style: 'color: black;'
-        = link_to(procedure_lien(procedure), procedure_lien(procedure), class: 'mb-1')
+        = link_to(procedure_lien(procedure), procedure_lien(procedure), class: 'fr-link fr-mb-1w')

      .admin-procedures-list-timestamps
        %p.notice N° #{procedure.id}
@ -36,13 +36,13 @@
        %span.icon.folder
        %span.badge.baseline= procedure.dossiers.state_not_brouillon.visible_by_administration.count

-      %div
+      %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
        - unless procedure.discarded?
-          = link_to admin_procedure_path(procedure), class: 'button mr-1 edit-procedure' do
-            %span.icon.edit
-            Modifier
-        .dropdown{ data: { controller: 'menu-button' } }
-          %button.button.dropdown-button.procedures-actions-btn{ data: { menu_button_target: 'button' } }
+          %li
+            = link_to admin_procedure_path(procedure), class: 'fr-btn fr-icon-draft-line fr-btn--tertiary' do
+              Modifier
+        %li.dropdown{ data: { controller: 'menu-button' } }
+          %button.fr-btn.fr-btn--tertiary.dropdown-button.procedures-actions-btn{ data: { menu_button_target: 'button' } }
            Actions
          .dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, id: dom_id(procedure, :actions_menu) }
            %ul.dropdown-items.pl-0
--- a/app/views/administrateurs/procedures/edit.html.haml
+++ b/app/views/administrateurs/procedures/edit.html.haml
@ -17,8 +17,8 @@

      .procedure-form__actions.sticky--bottom
        .actions-right
-          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
-          = f.button 'Enregistrer', class: 'button primary send'
+          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+          = f.button 'Enregistrer', class: 'fr-btn'

    .procedure-form__column--preview
      .procedure-form__preview.sticky--top
--- a/app/views/administrateurs/procedures/index.html.haml
+++ b/app/views/administrateurs/procedures/index.html.haml
@ -1,6 +1,6 @@
 .sub-header
  .procedure-admin-listing-container
-    = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'button primary'
+    = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'fr-btn'
  .container

    %nav.tabs
--- a/app/views/administrateurs/procedures/new.html.haml
+++ b/app/views/administrateurs/procedures/new.html.haml
@ -17,8 +17,8 @@

      .procedure-form__actions.sticky--bottom
        .actions-right
-          = link_to 'Annuler', admin_procedures_path, class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
-          = f.button 'Créer la démarche', class: 'button primary send'
+          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+          = f.button 'Créer la démarche', class: 'fr-btn'

    .procedure-form__column--preview
      .procedure-form__preview.sticky--top
--- a/app/views/administrateurs/procedures/new_from_existing.html.haml
+++ b/app/views/administrateurs/procedures/new_from_existing.html.haml
@ -34,11 +34,11 @@

  .form
    .send-wrapper
-      %a#from-scratch.button.primary{ href: new_admin_procedure_path }
+      %a#from-scratch.fr-btn.fr-btn--lg{ href: new_admin_procedure_path }
        Créer une nouvelle démarche de zéro

    .card
-      %h2.header-section
+      %h2.fr-h4.header-section
        Créer une nouvelle démarche à partir d’une démarche existante

      = render Procedure::SearchComponent.new(grouped_procedures: @grouped_procedures)
--- a/app/views/administrateurs/procedures/publication.html.haml
+++ b/app/views/administrateurs/procedures/publication.html.haml
@ -74,13 +74,14 @@

        - else
          .alert.alert-info
-            Pour pouvoir tester cette démarche, vous devez d’abord lui affecter
+            Pour pouvoir tester cette démarche, vous devez d’abord lui affecter :
+            %ul
+            - if @procedure.missing_zones?
+              %li= link_to("une ou plusieurs zones", zones_admin_procedure_path(id: @procedure.id))
            - if @procedure.missing_instructeurs?
-              = link_to("des instructeurs", admin_procedure_groupe_instructeur_path(@procedure, @procedure.defaut_groupe_instructeur))
-            - if @procedure.missing_instructeurs? && @procedure.service.nil?
-              et
+              %li= link_to("des instructeurs", admin_procedure_groupe_instructeur_path(@procedure, @procedure.defaut_groupe_instructeur))
            - if @procedure.service.nil?
-              = link_to("un service", admin_services_path(procedure_id: @procedure))
+              %li= link_to("un service", admin_services_path(procedure_id: @procedure))
            \.
      - else
        - if @procedure.missing_steps.include?(:service)
--- a/app/views/administrateurs/procedures/show.html.haml
+++ b/app/views/administrateurs/procedures/show.html.haml
@ -49,8 +49,8 @@
        = t(:has_changes, scope: [:administrateurs, :revision_changes])
      = render partial: 'revision_changes', locals: { changes: @procedure.revision_changes }
      .flex.mt-2.justify-end
-        = button_to "Réinitialiser les modifications", admin_procedure_reset_draft_path(@procedure), class: 'button mr-1', method: :put
-        = link_to 'Publier les modifications', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+        = button_to "Réinitialiser les modifications", admin_procedure_reset_draft_path(@procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', method: :put
+        = link_to 'Publier les modifications', admin_procedure_publication_path(@procedure), class: 'fr-btn', id: 'publish-procedure-link', data: { disable_with: "Publication..." }

 - if !@procedure.procedure_expires_when_termine_enabled?
  = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
@ -58,6 +58,7 @@
  %h2.procedure-admin-explanation Indispensable avant publication
  .procedure-grid
    = render Procedure::Card::PresentationComponent.new(procedure: @procedure)
+    = render Procedure::Card::ZonesComponent.new(procedure: @procedure) if Flipper.enabled? :zonage
    = render Procedure::Card::ChampsComponent.new(procedure: @procedure)
    = render Procedure::Card::ServiceComponent.new(procedure: @procedure, administrateur: current_administrateur)
    = render Procedure::Card::AdministrateursComponent.new(procedure: @procedure)
--- a/app/views/administrateurs/procedures/zones.html.haml
+++ b/app/views/administrateurs/procedures/zones.html.haml
@ -0,0 +1,27 @@
+- content_for(:root_class, 'scroll-margins-for-sticky-footer')
+
+= render partial: 'administrateurs/breadcrumbs',
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
+                    ['Description']] }
+.container
+  = form_for @procedure,
+    url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
+    multipart: true,
+    html: { class: 'form' } do |f|
+
+    %h1.page-title Zones
+
+    = f.label :zone do
+      = t('zone', scope: 'activerecord.attributes.procedure')
+    - if Flipper.enabled? :zonage
+      = f.collection_check_boxes :zone_ids, Zone.available_at(@procedure.published_or_created_at), :id, :label do |b|
+        .editable-champ.editable-champ-checkbox
+          = b.check_box
+          = b.label
+
+    .procedure-form__actions.sticky--bottom
+      .actions-right
+        = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'button', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+        = f.button 'Enregistrer', class: 'button primary send'
+
--- a/app/views/agent_connect/agent/index.html.haml
+++ b/app/views/agent_connect/agent/index.html.haml
@ -11,7 +11,7 @@
          %span.citizen= t('.you_are_a_citizen')
          %br
          %br
-          = link_to t('.citizen_page'), new_user_session_path, class: "button expend secondary"
+          = link_to t('.citizen_page'), new_user_session_path, class: "fr-btn fr-btn--secondary"

      .column
        %h1.fr-my-2
@ -23,7 +23,7 @@
              = t('.signin_with')
            %span.fr-connect__brand AgentConnect
          %p
-            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener", class: "fr-underlined"
+            = link_to t('.whats_agentconnect'), 'https://agentconnect.gouv.fr/', target: '_blank', rel: "noopener"


        .france-connect-login-separator
@ -45,7 +45,7 @@
              .text-right
                = link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"

-            = f.submit t('views.users.sessions.new.connection'), class: "button large primary expand"
+            = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"

 - content_for :footer do
  = render partial: 'users/dossiers/index_footer'
--- a/app/views/commencer/show.html.haml
+++ b/app/views/commencer/show.html.haml
@ -4,11 +4,11 @@
  - if !user_signed_in?
    %h2.huge-title= t('views.commencer.show.start_procedure')
    = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) }
-    = link_to commencer_sign_up_path(path: @procedure.path), class: ['button large expand primary'] do
+    = link_to commencer_sign_up_path(path: @procedure.path), class: 'fr-btn fr-btn--lg fr-my-2w' do
      = t('views.shared.account.create')
-      %span.optional-on-small-screens
+      %span.optional-on-small-screens.fr-ml-1v
        #{APPLICATION_NAME}
-    = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path), class: ['button large expand']
+    = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path), class: 'fr-btn fr-btn--secondary fr-btn--lg fr-my-2w'

  - else
    - revision = @revision.draft? ? @revision : @procedure.revisions.where.not(id: @procedure.draft_revision_id)
@ -17,28 +17,28 @@
    - not_drafts = dossiers.merge(Dossier.state_not_brouillon)

    - if dossiers.empty?
-      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: ['button large expand primary']
+      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-my-2w'

    - elsif drafts.size == 1 && not_drafts.empty?
      - dossier = drafts.first
      %h2.huge-title= t('views.commencer.show.already_draft')
      %p
        = t('views.commencer.show.already_draft_detail_html', time_ago: time_ago_in_words(dossier.created_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.continue_file'), brouillon_dossier_path(dossier), class: ['button large expand primary']
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: ['button large expand']
+      = link_to t('views.commencer.show.continue_file'), brouillon_dossier_path(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'

    - elsif not_drafts.size == 1
      - dossier = not_drafts.first
      %h2.huge-title= t('views.commencer.show.already_not_draft')
      %p
        = t('views.commencer.show.already_not_draft_detail_html', time_ago: time_ago_in_words(dossier.depose_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.show_my_submitted_file'), dossier_path(dossier), class: ['button large expand primary']
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: ['button large expand']
+      = link_to t('views.commencer.show.show_my_submitted_file'), dossier_path(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'

    - else
      %h2.huge-title= t('views.commencer.show.existing_dossiers')
-      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: ['button large expand primary']
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: ['button large expand']
+      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-btn--lg fr-my-2w"
+      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"

  - if @procedure.feature_enabled?(:dossier_pdf_vide)
    - pdf_link = @revision.draft? ? commencer_dossier_vide_test_path(path: @procedure.path) : commencer_dossier_vide_path(path: @procedure.path)
@ -46,4 +46,4 @@
    %p= t('views.commencer.show.want_empty_pdf', service: @procedure&.service&.nom, adresse: @procedure&.service&.adresse)

    %br
-    = link_to t('views.commencer.show.download_empty_pdf'), pdf_link, class: ['button large expand']
+    = link_to t('views.commencer.show.download_empty_pdf'), pdf_link, class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@ -16,4 +16,4 @@
      = f.label :email, 'Email'
      = f.email_field :email, autofocus: true

-      = f.submit t('devise.passwords.new.request_new_password'), class: 'button expand primary'
+      = f.submit t('devise.passwords.new.request_new_password'), class: 'fr-btn fr-btn--lg'
--- a/app/views/experts/avis/_header.html.haml
+++ b/app/views/experts/avis/_header.html.haml
@ -3,7 +3,9 @@
    .flex.justify-between
      %ul.breadcrumbs
        %li= link_to('Avis', expert_all_avis_path)
-        %li= link_to(dossier.procedure.libelle.truncate_words(10), procedure_expert_avis_index_path(avis.procedure))
+        %li
+          = link_to(dossier.procedure.libelle.truncate_words(10), procedure_expert_avis_index_path(avis.procedure), class: "fr-link")
+          = procedure_badge(dossier.procedure)
        %li= link_to("Dossier nº #{dossier.id}", expert_avis_path(avis.procedure, avis))

      .header-actions
--- a/app/views/experts/avis/index.html.haml
+++ b/app/views/experts/avis/index.html.haml
@ -5,39 +5,40 @@

  %ul.procedure-list
    - @avis_by_procedure.each do |p, procedure_avis|
-      %li.procedure-item.flex.align-start
-        = link_to(procedure_instructeur_avis_index_path(p)) do
-          .flex
-
+      %li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
+        .flex
+          = link_to instructeur_procedure_path(p), class: 'procedure-logo-link' do
            .procedure-logo{ style: "background-image: url(#{p.logo_url})" }

-            .procedure-details
-              %p.procedure-title
-                = procedure_libelle p
-              %ul.procedure-stats.flex
-                %li
-                  %object
-                    = link_to(procedure_instructeur_avis_index_path(p, statut: Instructeurs::AvisController::A_DONNER_STATUS)) do
-                      - without_answer_count = procedure_avis.select { |a| a.answer.nil? }.size
-                      - if without_answer_count > 0
-                        %span.notifications{ 'aria-label': "notifications" }
-                      .stats-number
-                        = without_answer_count
-                      .stats-legend
-                        avis à donner
-                %li
-                  %object
-                    = link_to(procedure_instructeur_avis_index_path(p, statut: Instructeurs::AvisController::DONNES_STATUS)) do
-                      - with_answer_count = procedure_avis.select { |a| a.answer.present? }.size
-                      .stats-number= with_answer_count
-                      .stats-legend
-                        = pluralize(with_answer_count, "avis donné")
+          .procedure-details
+            %p.fr-mb-2w
+              = procedure_badge(p)
+              = link_to(p.libelle, procedure_instructeur_avis_index_path(p), class: "fr-link fr-ml-1w")

-            - if p.close?
-              .procedure-status
-                %span.label
-                  = t('helpers.procedure.close')
-            - elsif p.depubliee?
-              .procedure-status
-                %span.label
-                  = t('helpers.procedure.unpublished')
+            %ul.procedure-stats.flex
+              %li
+                %object
+                  = link_to(procedure_instructeur_avis_index_path(p, statut: Instructeurs::AvisController::A_DONNER_STATUS)) do
+                    - without_answer_count = procedure_avis.select { |a| a.answer.nil? }.size
+                    - if without_answer_count > 0
+                      %span.notifications{ 'aria-label': "notifications" }
+                    .stats-number
+                      = without_answer_count
+                    .stats-legend
+                      avis à donner
+              %li
+                %object
+                  = link_to(procedure_instructeur_avis_index_path(p, statut: Instructeurs::AvisController::DONNES_STATUS)) do
+                    - with_answer_count = procedure_avis.select { |a| a.answer.present? }.size
+                    .stats-number= with_answer_count
+                    .stats-legend
+                      = pluralize(with_answer_count, "avis donné")
+
+          - if p.close?
+            .procedure-status
+              %span.label
+                = t('helpers.procedure.close')
+          - elsif p.depubliee?
+            .procedure-status
+              %span.label
+                = t('helpers.procedure.unpublished')
--- a/app/views/experts/avis/instruction.html.haml
+++ b/app/views/experts/avis/instruction.html.haml
@ -7,8 +7,8 @@
    %h1.tab-title Donner votre avis
    %h2.claimant
      Demandeur :
-      %span.email= safe_claimant_email(@avis.claimant)
-      %span.date Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
+      %span.email.font-weight-normal= safe_claimant_email(@avis.claimant)
+      %span.date.font-weight-normal Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
    %p.introduction= @avis.introduction

    - if @avis.introduction_file.attached?
@ -29,7 +29,7 @@
            %span
              Cet avis est partagé avec les autres experts
        .send-wrapper
-          = f.submit 'Envoyer votre avis', class: 'button send'
+          = f.submit 'Envoyer votre avis', class: 'fr-btn'

  - if !@dossier.termine? && !@avis.procedure.feature_enabled?(:expert_not_allowed_to_invite)
    = render partial: "experts/shared/avis/form", locals: { url: avis_expert_avis_path(@avis.procedure, @avis), linked_dossiers: @dossier.linked_dossiers_for(current_expert), must_be_confidentiel: @avis.confidentiel?, avis: @new_avis }
--- a/app/views/experts/shared/avis/_list.html.haml
+++ b/app/views/experts/shared/avis/_list.html.haml
@ -1,36 +1,36 @@
 %section.list-avis
  %h1.tab-title
    Avis des invités
-    %span.count= avis.count
+    %span.fr-badge= avis.count

  %ul
    - avis.each do |avis|
      %li.one-avis.flex.align-start
        .width-100
-          %h2.claimant
+          %h2.claimant.fr-h6
            = "#{t('claimant', scope: 'activerecord.attributes.avis')} :"
-            %span.email= (safe_claimant_email(avis.claimant) == current_expert.email) ? 'Vous' : safe_claimant_email(avis.claimant)
+            %span.fr-text--xs.fr-text-mention--grey.font-weight-normal= (safe_claimant_email(avis.claimant) == current_expert.email) ? 'Vous' : safe_claimant_email(avis.claimant)
            - if avis.confidentiel?
-              %span.confidentiel
+              %span.confidentiel.font-weight-normal
                = t('confidentiel', scope: 'activerecord.attributes.avis')
                %span.icon.lock{ title: t('confidentiel', scope: 'helpers.hint') }
-            %span.date{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
+            %span.date.fr-text--xs.fr-text-mention--grey.font-weight-normal{ class: highlight_if_unseen_class(avis_seen_at, avis.created_at) }
              = t('demande_envoyee_le', scope: 'views.shared.avis', date: l(avis.created_at, format: '%d/%m/%y à %H:%M'))
          %p= avis.introduction

          .answer.flex.align-start
            %span.icon.bubble.avis-icon
            .width-100
-              %h2.instructeur
+              %h2.instructeur.fr-h6
                = (avis.expert.email == current_expert.email) ? 'Vous' : avis.expert.email
                - if avis.answer.present?
                  - if avis.revoked?
-                    %span.waiting{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
+                    %span.waiting.font-weight-normal{ class: highlight_if_unseen_class(avis_seen_at, avis.revoked_at) }
                      = t('demande_revoquee_le', scope: 'views.shared.avis', date: l(avis.revoked_at, format: '%d/%m/%y à %H:%M'))
-                  %span.date{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
+                  %span.date.fr-text--xs.fr-text-mention--grey.font-weight-normal{ class: highlight_if_unseen_class(avis_seen_at, avis.updated_at) }
                    = t('reponse_donnee_le', scope: 'views.shared.avis', date: l(avis.updated_at, format: '%d/%m/%y à %H:%M'))
                - else
-                  %span.waiting
+                  %span.waiting.font-weight-normal
                    = t('en_attente', scope: 'views.shared.avis')
              - if avis.piece_justificative_file.attached?
                = render Attachment::ShowComponent.new(attachment: avis.piece_justificative_file.attachment)
--- a/app/views/instructeur_mailer/last_week_overview.html.haml
+++ b/app/views/instructeur_mailer/last_week_overview.html.haml
@ -29,9 +29,10 @@
              dont <span style='font-weight: bold; color: #FF5D60; padding: 2px 0;' >#{procedure_overview.old_dossiers_en_construction.count}</span> depuis plus de 7 jours
              - if procedure_overview.old_dossiers_en_construction.count < 6
                \:
-                - old_dossiers_en_construction = procedure_overview.old_dossiers_en_construction.map do |old_dossier|
-                  - link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
-                - end.join(', ')
+                :ruby
+                  old_dossiers_en_construction = procedure_overview.old_dossiers_en_construction.map do |old_dossier|
+                    link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
+                  end.join(', ')
                = sanitize(old_dossiers_en_construction, attributes: %w(href style))

      - if procedure_overview.dossiers_en_instruction_count > 0
@ -43,9 +44,10 @@
              dont <span style='font-weight: bold; color: #FF5D60; padding: 2px 0;' >#{procedure_overview.old_dossiers_en_instruction.count}</span> depuis plus de 7 jours
              - if procedure_overview.old_dossiers_en_instruction.count < 6
                \:
-                - old_dossiers_en_instruction = procedure_overview.old_dossiers_en_instruction.map do |old_dossier|
-                  - link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
-                - end.join(', ')
+                :ruby
+                  old_dossiers_en_instruction = procedure_overview.old_dossiers_en_instruction.map do |old_dossier|
+                    link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
+                  end.join(', ')
                = sanitize(old_dossiers_en_instruction, attributes: %w(href style))

  - if index != (@overview[:procedure_overviews].count - 1)
--- a/app/views/instructeurs/avis/_header.html.haml
+++ b/app/views/instructeurs/avis/_header.html.haml
@ -2,7 +2,9 @@
  .container
    %ul.breadcrumbs
      %li= link_to('Avis', instructeur_all_avis_path)
-      %li= link_to(dossier.procedure.libelle, procedure_instructeur_avis_index_path(avis.procedure))
+      %li
+        = link_to(procedure.libelle, procedure_instructeur_avis_index_path(avis.procedure), class: "fr-link")
+        = procedure_badge(dossier.procedure)
      %li= link_to("Dossier nº #{dossier.id}", instructeur_avis_path(avis.procedure, avis))

    %nav.tabs
--- a/app/views/instructeurs/dossiers/_header.html.haml
+++ b/app/views/instructeurs/dossiers/_header.html.haml
@ -3,10 +3,8 @@
    .flex.justify-between
      %ul.breadcrumbs
        %li
-          = link_to instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle do
-            - if dossier.procedure.brouillon?
-              %span.badge démarche en test
-            = dossier.procedure.libelle.truncate_words(10)
+          = link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"
+          = procedure_badge(dossier.procedure)
        %li
          = "Dossier nº #{dossier.id}"

--- a/app/views/instructeurs/dossiers/_header_actions.html.haml
+++ b/app/views/instructeurs/dossiers/_header_actions.html.haml
@ -1,32 +1,31 @@
-%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', data: { menu_button_target: 'button' } }
-    %span.icon.printer
-  %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
-    %li
-      = link_to "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
-    %li
-      = link_to "Uniquement cet onglet", "#", onclick: "window.print()", class: "menu-item menu-link"
-    %li
-      = link_to "Export PDF", instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"
-    - if dossier.geo_data?
+%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right
+  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+    %button.fr-btn.fr-btn--tertiary.fr-icon-printer-line.dropdown-button{ title: 'imprimer', 'aria-label': 'Imprimer', data: { menu_button_target: 'button' } } Imprimer
+    %ul#print-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
      %li
-        = link_to "Export GeoJSON", geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+        = link_to "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+      %li
+        = link_to "Uniquement cet onglet", "#", onclick: "window.print()", class: "menu-item menu-link"
+      %li
+        = link_to "Export PDF", instructeur_dossier_path(dossier.procedure, dossier, format: :pdf), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+      - if dossier.geo_data?
+        %li
+          = link_to "Export GeoJSON", geo_data_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"

-%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-  %button.button.dropdown-button.icon-only{ data: { menu_button_target: 'button' } }
-    %span.icon.attached
-  %ul#print-pj-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
-    %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
+  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+    %button.fr-btn.fr-btn--tertiary.fr-icon-download-line.dropdown-button{ data: { menu_button_target: 'button', 'aria-label': 'Télécharger' } } Télécharger
+    %ul#print-pj-menu.print-menu.dropdown-content{ data: { menu_button_target: 'menu' } }
+      %li= link_to "Télécharger le dossier et toutes ses pièces jointes", telecharger_pjs_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"

-= render partial: "instructeurs/procedures/dossier_actions",
-  locals: { procedure_id: dossier.procedure.id,
-            dossier_id: dossier.id,
-            state: dossier.state,
-            archived: dossier.archived,
-            dossier_is_followed: current_instructeur&.follow?(dossier),
-            close_to_expiration: dossier.close_to_expiration?,
-            hidden_by_administration: dossier.hidden_by_administration? }
+  %li
+    = render partial: "instructeurs/procedures/dossier_actions",
+      locals: { procedure_id: dossier.procedure.id,
+                dossier_id: dossier.id,
+                state: dossier.state,
+                archived: dossier.archived,
+                dossier_is_followed: current_instructeur&.follow?(dossier),
+                close_to_expiration: dossier.close_to_expiration?,
+                hidden_by_administration: dossier.hidden_by_administration? }

-
-.state-button
-  = render partial: "state_button", locals: { dossier: dossier }
+  %li.state-button
+    = render partial: "state_button", locals: { dossier: dossier }
--- a/app/views/instructeurs/dossiers/_state_button.html.haml
+++ b/app/views/instructeurs/dossiers/_state_button.html.haml
@ -1,6 +1,6 @@
 .dropdown{ data: { controller: 'menu-button', popover: 'true' } }
  -# Dropdown button title
-  %button.button.primary.dropdown-button{ class: button_or_label_class(dossier), data: { menu_button_target: 'button' } }
+  %button.fr-btn.dropdown-button{ class: button_or_label_class(dossier), data: { menu_button_target: 'button' } }
    = dossier_display_state dossier

  -# Dropdown content
--- a/app/views/instructeurs/dossiers/_state_button_motivation.html.haml
+++ b/app/views/instructeurs/dossiers/_state_button_motivation.html.haml
@ -1,5 +1,5 @@
 .motivation.hidden{ class: popup_class }
-  %h3
+  %h3.fr-h5
    %span.icon{ class: popup_class }
    #{popup_title}

--- a/app/views/instructeurs/procedures/_dossier_actions.html.haml
+++ b/app/views/instructeurs/procedures/_dossier_actions.html.haml
@ -1,9 +1,9 @@
 - if hidden_by_administration
-  = link_to restore_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: "button" do
+  = link_to restore_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: "fr-btn fr-btn--secondary" do
    = t('views.instructeurs.dossiers.restore')
 - elsif close_to_expiration || Dossier::TERMINE.include?(state)
  .dropdown.user-dossier-actions{ data: { controller: 'menu-button' } }
-    %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
+    %button.fr-btn.dropdown-button{ data: { menu_button_target: 'button' } }
      Actions
    .dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, id: "dossier_#{dossier_id}_actions_menu" }
      %ul.dropdown-items
@ -33,10 +33,8 @@

 - elsif Dossier::EN_CONSTRUCTION_OU_INSTRUCTION.include?(state)
  - if dossier_is_followed
-    = link_to unfollow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'button' do
-      %span.icon.unfollow>
+    = link_to unfollow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'fr-btn fr-btn--secondary fr-icon-star-fill' do
      = t('views.instructeurs.dossiers.stop_follow')
  - else
-    = link_to follow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'button' do
-      %span.icon.follow>
+    = link_to follow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'fr-btn fr-btn--secondary fr-icon-star-line' do
      = t('views.instructeurs.dossiers.follow_file')
--- a/app/views/instructeurs/procedures/_list.html.haml
+++ b/app/views/instructeurs/procedures/_list.html.haml
@ -1,81 +1,81 @@
-%li.procedure-item.flex.align-start
-  = link_to(instructeur_procedure_path(p)) do
-    .flex
-
+%li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
+  .flex
+    = link_to instructeur_procedure_path(p), class: 'procedure-logo-link' do
      .procedure-logo{ style: "background-image: url(#{p.logo_url})" }

-      .procedure-details
-        %p.procedure-title
-          = procedure_libelle p
-        %ul.procedure-stats.flex
-          %li
-            %object
-              = link_to(instructeur_procedure_path(p, statut: 'a-suivre')) do
-                - a_suivre_count = dossiers_a_suivre_count_per_procedure[p.id] || 0
-                .stats-number
-                  = number_with_html_delimiter(a_suivre_count)
-                .stats-legend
-                  = t('instructeurs.dossiers.labels.to_follow')
-          %li
-            %object
-              = link_to(instructeur_procedure_path(p, statut: 'suivis')) do
-                - if procedure_ids_en_cours_with_notifications.include?(p.id)
-                  %span.notifications{ 'aria-label': "notifications" }
-                - followed_count = followed_dossiers_count_per_procedure[p.id] || 0
-                .stats-number
-                  = number_with_html_delimiter(followed_count)
-                .stats-legend
-                  = t('pluralize.followed', count: followed_count)
-          %li
-            %object
-              = link_to(instructeur_procedure_path(p, statut: 'traites')) do
-                - if procedure_ids_termines_with_notifications.include?(p.id)
-                  %span.notifications{ 'aria-label': "notifications" }
-                - termines_count = dossiers_termines_count_per_procedure[p.id] || 0
-                .stats-number
-                  = number_with_html_delimiter(termines_count)
-                .stats-legend
-                  = t('pluralize.processed', count: termines_count)
-          %li
-            %object
-              = link_to(instructeur_procedure_path(p, statut: 'tous')) do
-                - dossier_count = dossiers_count_per_procedure[p.id] || 0
-                .stats-number
-                  = number_with_html_delimiter(dossier_count)
-                .stats-legend
-                  = t('pluralize.case', count: dossier_count)
+    .procedure-details
+      %p.fr-mb-2w
+        = procedure_badge(p)
+        = link_to(p.libelle, instructeur_procedure_path(p), class: "fr-link fr-ml-1w")
+      %ul.procedure-stats.flex
+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'a-suivre')) do
+              - a_suivre_count = dossiers_a_suivre_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(a_suivre_count)
+              .stats-legend
+                = t('instructeurs.dossiers.labels.to_follow')
+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'suivis')) do
+              - if procedure_ids_en_cours_with_notifications.include?(p.id)
+                %span.notifications{ 'aria-label': "notifications" }
+              - followed_count = followed_dossiers_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(followed_count)
+              .stats-legend
+                = t('pluralize.followed', count: followed_count)
+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'traites')) do
+              - if procedure_ids_termines_with_notifications.include?(p.id)
+                %span.notifications{ 'aria-label': "notifications" }
+              - termines_count = dossiers_termines_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(termines_count)
+              .stats-legend
+                = t('pluralize.processed', count: termines_count)
+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'tous')) do
+              - dossier_count = dossiers_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(dossier_count)
+              .stats-legend
+                = t('pluralize.case', count: dossier_count)

+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'supprimes_recemment')) do
+              - dossier_count = dossiers_supprimes_recemment_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(dossier_count)
+              .stats-legend
+                = t('pluralize.dossiers_supprimes_recemment', count: dossier_count)
+
+        - if p.procedure_expires_when_termine_enabled
          %li
            %object
-              = link_to(instructeur_procedure_path(p, statut: 'supprimes_recemment')) do
-                - dossier_count = dossiers_supprimes_recemment_count_per_procedure[p.id] || 0
+              = link_to(instructeur_procedure_path(p, statut: 'expirant')) do
+                - expirant_count = dossiers_expirant_count_per_procedure[p.id] || 0
                .stats-number
-                  = number_with_html_delimiter(dossier_count)
+                  = number_with_html_delimiter(expirant_count)
                .stats-legend
-                  = t('pluralize.dossiers_supprimes_recemment', count: dossier_count)
+                  = t('pluralize.dossiers_close_to_expiration', count: expirant_count)

-          - if p.procedure_expires_when_termine_enabled
-            %li
-              %object
-                = link_to(instructeur_procedure_path(p, statut: 'expirant')) do
-                  - expirant_count = dossiers_expirant_count_per_procedure[p.id] || 0
-                  .stats-number
-                    = number_with_html_delimiter(expirant_count)
-                  .stats-legend
-                    = t('pluralize.dossiers_close_to_expiration', count: expirant_count)
+        %li
+          %object
+            = link_to(instructeur_procedure_path(p, statut: 'archives')) do
+              - archived_count = dossiers_archived_count_per_procedure[p.id] || 0
+              .stats-number
+                = number_with_html_delimiter(archived_count)
+              .stats-legend
+                = t('pluralize.archived', count: archived_count)

-          %li
-            %object
-              = link_to(instructeur_procedure_path(p, statut: 'archives')) do
-                - archived_count = dossiers_archived_count_per_procedure[p.id] || 0
-                .stats-number
-                  = number_with_html_delimiter(archived_count)
-                .stats-legend
-                  = t('pluralize.archived', count: archived_count)
-
-      - if p.close?
-        .procedure-status
-          %span.label Close
-      - elsif p.depubliee?
-        .procedure-status
-          %span.label Dépubliée
+    - if p.close?
+      .procedure-status
+        %span.label Close
+    - elsif p.depubliee?
+      .procedure-status
+        %span.label Dépubliée
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/app/views/instructeurs/procedures/email_notifications.html.haml
@ -89,5 +89,5 @@
        = t('.utils.negative')

    .send-wrapper
-      = link_to t('.buttons.back_to_procedure'), instructeur_procedure_path(@procedure), class: 'button mr-1'
-      = form.submit t('.buttons.save'), class: "button primary"
+      = link_to t('.buttons.back_to_procedure'), instructeur_procedure_path(@procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w'
+      = form.submit t('.buttons.save'), class: "fr-btn"
--- a/app/views/instructeurs/procedures/email_usagers.html.haml
+++ b/app/views/instructeurs/procedures/email_usagers.html.haml
@ -14,7 +14,7 @@
      %section.list-avis.mt-8
        %h1.tab-title
          Messages envoyés précedemment
-          %span.count= @bulk_messages.count
+          %span.fr-badge= @bulk_messages.count

        %ul
          - @bulk_messages.each do |message|
--- a/app/views/instructeurs/procedures/show.html.haml
+++ b/app/views/instructeurs/procedures/show.html.haml
@ -134,14 +134,15 @@
                - else
                  %a.cell-link{ href: path }= status_badge(p.state)

-              %td.action-col.follow-col= render partial: '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_recemment' }
+              %td.action-col.follow-col
+                %ul.inline.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
+                  = render partial: '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_recemment' }

      = pagination
    - else
--- a/app/views/instructeurs/shared/avis/_list.html.haml
+++ b/app/views/instructeurs/shared/avis/_list.html.haml
@ -1,7 +1,7 @@
 %section.list-avis
  %h1.tab-title
    Avis des invités
-    %span.count= avis.count
+    %span.fr-badge= avis.count

  %ul
    - avis.each do |avis|
--- a/app/views/invites/_dropdown.html.haml
+++ b/app/views/invites/_dropdown.html.haml
@ -1,9 +1,10 @@
+- invites = dossier.invites.load
 .dropdown.invite-user-action{ data: { controller: 'menu-button', popover: 'true' } }
  %button.button.dropdown-button{ data: { menu_button_target: 'button' } }
    %span.icon.person
-    - if dossier.invites.count > 0
+    - if invites.size > 0
      = t('views.invites.dropdown.view_invited_people')
-      %span.badge= dossier.invites.count
+      %span.badge= invites.size
    - else
      - if dossier.read_only?
        = t('views.invites.dropdown.invite_to_view')
@ -11,4 +12,4 @@
        = t('views.invites.dropdown.invite_to_edit')

  #invite-content.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' } }
-    = render partial: "invites/form", locals: { dossier: dossier }
+    = render partial: "invites/form", locals: { dossier: dossier, invites: invites }
--- a/app/views/invites/_form.html.haml
+++ b/app/views/invites/_form.html.haml
@ -1,8 +1,8 @@
 #invites-form
-  - if dossier.invites.present?
+  - if invites.present?
    %h4= t('views.invites.form.invite_to_participate')
    %ul
-      - dossier.invites.each do |invite|
+      - invites.each do |invite|
        %li
          = invite.email
          %small{ 'data-turbo': 'true' }
@ -26,4 +26,4 @@
          = label_tag :invite_message, t('views.invites.form.invite_message')
        = text_area_tag :invite_message, '', class: 'small', placeholder: t('views.invites.form.invite_message')
      .col
-        = submit_tag t('views.invites.form.send_invitation'), class: 'button accepted'
+        = submit_tag t('views.invites.form.send_invitation'), class: 'fr-btn fr-btn--secondary'
--- a/app/views/layouts/_header.haml
+++ b/app/views/layouts/_header.haml
@ -38,7 +38,7 @@
                - if request.path == new_user_registration_path
                  %li
                    .fr-hidden-sm.fr-unhidden-lg.fr-link--sm= t('views.shared.account.already_user_question')
-                %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn"
+                %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn fr-btn--tertiary fr-icon-account-circle-fill fr-btn--icon-left"

              %li
                - if dossier.present? && nav_bar_profile == :user
--- a/Show more
+++ b/Show more