use DSFR class for dossier states badge

app/assets/stylesheets/dossiers_table.scss

@@ -58,13 +58,7 @@
   }
 
   .status-col {
-    width: 110px;
-
-    .label {
-      width: 110px;
-      text-align: center;
-      margin: 0 4px;
-    }
+    width: 175px;
   }
 
   .updated-at-col {

app/assets/stylesheets/labels.scss

@@ -1,61 +1,3 @@
-@import "colors";
-@import "constants";
-
-.label {
-  display: inline-block;
-  padding: 4px $default-spacer;
-  background: $dark-grey;
-  border: 1px solid transparent;
-  color: #FFFFFF;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 18px;
-
-  &.instruction {
-    background-color: #FFFFFF;
-    color: $blue-france-500;
-    border: 1px solid $blue-france-500;
-  }
-
-  &.en-instruction {
-    @extend .instruction;
-  }
-
-  &.construction {
-    background-color: #FFFFFF;
-    color: $black;
-    border: 1px solid $black;
-  }
-
-  &.en-construction {
-    @extend .construction;
-  }
-
-  &.accepted {
-    background-color: $green;
-  }
-
-  &.accepte {
-    @extend .accepted;
-  }
-
-  &.refused {
-    background-color: $dark-red;
-  }
-
-  &.refuse {
-    @extend .refused;
-  }
-
-  &.without-continuation {
-    background-color: $black;
-  }
-
-  &.sans-suite {
-    @extend .without-continuation;
-  }
-}
-
 // Labels that we only want for screen readers
 // https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
 .sr-only {
@@ -69,10 +11,3 @@
   position: absolute !important;
   word-wrap: normal !important;
 }
-
-.label-bold {
-  font-size: 18px;
-  margin-bottom: 16px;
-  display: block;
-  font-weight: bold;
-}

app/helpers/dossier_helper.rb

@@ -60,10 +60,28 @@ module DossierHelper
     end
   end
 
+  def class_badge_state(state)
+    case state
+    when Dossier.states.fetch(:en_construction)
+      'fr-badge--info'
+    when Dossier.states.fetch(:en_instruction)
+      'fr-badge--info'
+    when Dossier.states.fetch(:accepte)
+      'fr-badge--success'
+    when Dossier.states.fetch(:refuse)
+      'fr-badge--warning'
+    when Dossier.states.fetch(:sans_suite)
+      'fr-badge--new'
+    when Dossier.states.fetch(:brouillon)
+      ''
+    else
+      ''
+    end
+  end
+
   def status_badge(state, alignment_class = '')
     status_text = dossier_display_state(state, lower: true)
-    status_class = state.tr('_', '-')
-    tag.span(status_text, class: "label #{status_class} #{alignment_class}", role: 'status')
+    tag.span(status_text, class: "fr-badge #{class_badge_state(state)} fr-badge--no-icon #{alignment_class}", role: 'status')
   end
 
   def deletion_reason_badge(reason)