Merge branch 'feature/add_rna_type_de_champs' of https://github.com/betagouv/demarches-simplifiees.fr into feature/add_rna_type_de_champs

Gemfile

@@ -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
 

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)
+    erubi (1.11.0)
-    erubis (2.7.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)
+    haml (6.0.5)
-      temple (>= 0.8.0)
+      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)
+      haml (>= 4.0.6)
-      html2haml (>= 1.0.1)
       railties (>= 5.1)
-    haml_lint (0.37.0)
+    haml_lint (0.42.0)
-      haml (>= 4.0, < 5.3)
+      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

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;
+}

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);
   }
 }
+

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;
+}

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;
-}

app/assets/stylesheets/admin-procedures-list.scss

@@ -11,7 +11,7 @@
 .admin-procedures-list-row.infos {
   align-items: flex-start;
 
-  a {
+  a:not(:hover) {
-    color: $blue-france-500;
+    background-image: none; // remove DSFR underline
   }
 }

app/assets/stylesheets/application.scss

@@ -1,6 +1 @@
-// = require ./reset
-// = require ./custom_reset
-// = require ./common
-// = require ./utils
-// = require ./fonts
 // = require_tree .

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
+  }
 }

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
   }
 }
 

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;
   }

app/assets/stylesheets/avis_sign_up.scss

@@ -1,6 +1,3 @@
-@import "typography";
-@import "colors";
-
 .avis-sign-up {
   .left {
     p {

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 {

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;
 

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;
-}

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;
-}

app/assets/stylesheets/dossier_annotations_privees.scss

@@ -1,5 +1,4 @@
 @import "colors";
-@import "common";
 @import "constants";
 
 #dossier-annotations-privees {

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;
+    }
   }
 }
 

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.
+// override default transparent background on inputs & font-size to 16px by default
-// 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
 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;
+}

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;
-}

app/assets/stylesheets/forms.scss

@@ -85,6 +85,7 @@
       p,
       label {
         padding-left: 28px;
+        font-weight: normal;
       }
 
       input[type=checkbox] {

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;
+  color: var(--text-action-high-blue-france);
-  font-weight: bold;
+  font-size: 2rem;
-  font-size: 36px;
+  line-height: 2rem;
+  font-weight: 600;
 }
 
 .number-label {
-  font-weight: bold;
+  font-weight: 600;
-  font-size: 20px;
+  font-size: 1.25rem;
-  color: $g700;
+  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,
+.role-panel-wrapper {
-.cta-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%;
-}

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 {
+  .columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
-    @extend .container;
+    @extend %container;
     display: flex;
     flex-direction: column;
     justify-content: center;

app/assets/stylesheets/merci.scss

@@ -1,5 +1,3 @@
-@import "colors";
-@import "common";
 @import "constants";
 
 .merci .monavis {

app/assets/stylesheets/message.scss

@@ -25,12 +25,6 @@
     font-weight: bold;
   }
 
-  .guest,
-  .date {
-    font-size: 12px;
-    color: $dark-grey;
-  }
-
   .date {
     float: right;
   }

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;
-    }
-  }
-}

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;
-      }
-    }
-  }
-}

app/assets/stylesheets/print.scss

@@ -1,5 +1,4 @@
 @import "colors";
-@import "fonts";
 
 @media print {
   .new-header,

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 {

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;

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 {
+  .procedure-logo-link {
-      @include vertical-padding(24px);
+    background-image: none;
-      color: $black;
-      width: 100%;
-
-      &:hover {
-        background-color: $light-grey;
-
-        .procedure-title {
-          text-decoration: underline;
-        }
-      }
-    }
   }
 
   .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 {

app/assets/stylesheets/procedure_show.scss

@@ -1,5 +1,4 @@
 @import "colors";
-@import "common";
 @import "constants";
 
 .procedure-header {

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;
-}

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
+    }
+  }
 }

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 {

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?

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.fr-text--xs.fr-text-mention--grey.font-weight-normal= t('.guest')
-    %span.date{ class: highlight_if_unseen_class, data: scroll_to_target }
+    %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
 

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

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"
+      - 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?
+      -# - if @champ.type_de_champ.mandatory?
-        %span.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,

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
+      - tag.div(class: 'editable-champ editable-champ-checkbox') do
-        = b.label do
+        - b.label do
-          = b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } })
+          - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text
-          = b.text
-
   - else
     = @form.hidden_field :value
     = react_component("ComboMultipleDropdownList",

app/components/procedure/card/zones_component.rb

@@ -0,0 +1,5 @@
+class Procedure::Card::ZonesComponent < ApplicationComponent
+  def initialize(procedure:)
+    @procedure = procedure
+  end
+end

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

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')

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)

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)
+      if procedure.update(routing_criteria_name: routing_criteria_name)
-
+        flash[:notice] = "Le libellé est maintenant « #{procedure.routing_criteria_name} »."
-      redirect_to admin_procedure_groupe_instructeurs_path(procedure),
+      else
-        notice: "Le libellé est maintenant « #{procedure.routing_criteria_name} »."
+        flash[:alert] = "Le libellé du routage doit être rempli."
+      end
+      redirect_to admin_procedure_groupe_instructeurs_path(procedure)
     end
 
     def update_routing_enabled

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
+        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

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

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

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

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')

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

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>
   );

app/javascript/components/ComboSearch.tsx

@@ -1,9 +1,5 @@
-import React, {
+import React, { useState, useRef, ChangeEventHandler } from 'react';
-  useState,
+import { useDebounce } from 'use-debounce';
-  useRef,
-  useDeferredValue,
-  ChangeEventHandler
-} from 'react';
 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 }>

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';

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,

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)

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

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, -> {
+  scope :ordered_for_export, -> {
-    state_not_brouillon
+    order(depose_at: 'asc')
-      .visible_by_administration
-      .includes(
-        :user,
-        :individual,
-        :followers_instructeurs,
-        :traitement,
-        :groupe_instructeur,
-        :etablissement,
-        procedure: [:groupe_instructeurs],
-        avis: [:claimant, :expert]
-      ).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

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

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
@@ -274,17 +278,14 @@ class Procedure < ApplicationRecord
                                                   numericality: {
                                                     only_integer: true,
                                                     greater_than_or_equal_to: 1,
-                                                                  less_than_or_equal_to: OLD_MAX_DUREE_CONSERVATION
+                                                    less_than_or_equal_to: :max_duree_conservation_dossiers_dans_ds
-                                                  },
+                                                  }
-                                                  if: :duree_conservation_etendue_par_ds
+  validates :max_duree_conservation_dossiers_dans_ds, allow_nil: false,
-
-  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
+                                                    less_than_or_equal_to: 60
-                                                    },
+                                                  }
-                                                    unless: :duree_conservation_etendue_par_ds
 
   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))

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

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",

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

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('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: 'button accepted'
+        = 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

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 ?'}
+          = 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: 'button primary send'
+          = f.button 'Enregistrer', class: 'fr-btn'
 
     .procedure-form__column--preview
       .procedure-form__preview.sticky--top

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

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')

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'

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)
 

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
+          %li
-            %span.icon.edit
+            = link_to admin_procedure_path(procedure), class: 'fr-btn fr-icon-draft-line fr-btn--tertiary' do
               Modifier
-        .dropdown{ data: { controller: 'menu-button' } }
+        %li.dropdown{ data: { controller: 'menu-button' } }
-          %button.button.dropdown-button.procedures-actions-btn{ data: { menu_button_target: '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

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 ?'}
+          = 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: 'button primary send'
+          = f.button 'Enregistrer', class: 'fr-btn'
 
     .procedure-form__column--preview
       .procedure-form__preview.sticky--top

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

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 ?'}
+          = 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: 'button primary send'
+          = f.button 'Créer la démarche', class: 'fr-btn'
 
     .procedure-form__column--preview
       .procedure-form__preview.sticky--top

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)

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))
+              %li= link_to("des instructeurs", admin_procedure_groupe_instructeur_path(@procedure, @procedure.defaut_groupe_instructeur))
-            - if @procedure.missing_instructeurs? && @procedure.service.nil?
-              et
             - 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)

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
+        = 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: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+        = 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)

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'
+

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'

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.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: ['button large expand']
+      = 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.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: ['button large expand']
+      = 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.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: ['button large expand']
+      = 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"

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'

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

app/views/experts/avis/index.html.haml

@@ -5,15 +5,16 @@
 
   %ul.procedure-list
     - @avis_by_procedure.each do |p, procedure_avis|
-      %li.procedure-item.flex.align-start
+      %li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
-        = link_to(procedure_instructeur_avis_index_path(p)) do
         .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
+            %p.fr-mb-2w
-                = procedure_libelle p
+              = procedure_badge(p)
+              = link_to(p.libelle, procedure_instructeur_avis_index_path(p), class: "fr-link fr-ml-1w")
+
             %ul.procedure-stats.flex
               %li
                 %object

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.email.font-weight-normal= safe_claimant_email(@avis.claimant)
-      %span.date Demande d’avis envoyée le #{l(@avis.created_at, format: '%d/%m/%y')}
+      %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 }

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)

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|
+                :ruby
-                  - link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
+                  old_dossiers_en_construction = procedure_overview.old_dossiers_en_construction.map do |old_dossier|
-                - end.join(', ')
+                    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|
+                :ruby
-                  - link_to "nº #{old_dossier.id}", instructeur_dossier_url(procedure_overview.procedure, old_dossier), style: 'color: #0069CC;'
+                  old_dossiers_en_instruction = procedure_overview.old_dossiers_en_instruction.map do |old_dossier|
-                - end.join(', ')
+                    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)

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

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
+          = link_to dossier.procedure.libelle.truncate_words(10), instructeur_procedure_path(dossier.procedure), title: dossier.procedure.libelle, class: "fr-link"
-            - if dossier.procedure.brouillon?
+          = procedure_badge(dossier.procedure)
-              %span.badge démarche en test
-            = dossier.procedure.libelle.truncate_words(10)
         %li
           = "Dossier nº #{dossier.id}"
 

app/views/instructeurs/dossiers/_header_actions.html.haml

@@ -1,6 +1,6 @@
-%span.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
+%ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline-md.fr-btns-group--icon-right
-  %button.button.dropdown-button.icon-only{ title: 'imprimer', 'aria-label': 'imprimer', data: { menu_button_target: 'button' } }
+  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-    %span.icon.printer
+    %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 "Tout le dossier", print_instructeur_dossier_path(dossier.procedure, dossier), target: "_blank", rel: "noopener", class: "menu-item menu-link"
@@ -12,12 +12,12 @@
         %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' } }
+  %li.dropdown.print-menu-opener{ data: { controller: 'menu-button' } }
-  %button.button.dropdown-button.icon-only{ data: { menu_button_target: '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
-    %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
     = render partial: "instructeurs/procedures/dossier_actions",
       locals: { procedure_id: dossier.procedure.id,
                 dossier_id: dossier.id,
@@ -27,6 +27,5 @@
                 close_to_expiration: dossier.close_to_expiration?,
                 hidden_by_administration: dossier.hidden_by_administration? }
 
-
+  %li.state-button
-.state-button
     = render partial: "state_button", locals: { dossier: dossier }

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

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}
 

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
+    = link_to unfollow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'fr-btn fr-btn--secondary fr-icon-star-fill' do
-      %span.icon.unfollow>
       = t('views.instructeurs.dossiers.stop_follow')
   - else
-    = link_to follow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'button' do
+    = link_to follow_instructeur_dossier_path(procedure_id, dossier_id), method: :patch, class: 'fr-btn fr-btn--secondary fr-icon-star-line' do
-      %span.icon.follow>
       = t('views.instructeurs.dossiers.follow_file')

app/views/instructeurs/procedures/_list.html.haml

@@ -1,12 +1,12 @@
-%li.procedure-item.flex.align-start
+%li.procedure-item.flex.align-start.fr-my-3w.fr-p-2w
-  = link_to(instructeur_procedure_path(p)) do
   .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
+      %p.fr-mb-2w
-          = procedure_libelle p
+        = procedure_badge(p)
+        = link_to(p.libelle, instructeur_procedure_path(p), class: "fr-link fr-ml-1w")
       %ul.procedure-stats.flex
         %li
           %object

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'
+      = 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: "button primary"
+      = form.submit t('.buttons.save'), class: "fr-btn"

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|

app/views/instructeurs/procedures/show.html.haml

@@ -134,8 +134,9 @@
                 - else
                   %a.cell-link{ href: path }= status_badge(p.state)
 
-              %td.action-col.follow-col= render partial: 'dossier_actions',
+              %td.action-col.follow-col
-                locals: { procedure_id: @procedure.id,
+                %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,

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|

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 }

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'

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