diff --git a/app/assets/stylesheets/01_common.scss b/app/assets/stylesheets/01_common.scss
index 94a8a9eb8..850bd6c7c 100644
--- a/app/assets/stylesheets/01_common.scss
+++ b/app/assets/stylesheets/01_common.scss
@@ -1,4 +1,4 @@
-@import "placeholders";
+@import 'placeholders';
 
 html,
 body {
@@ -7,7 +7,7 @@ body {
 }
 
 // Forces line breaks to prevent buttons from overflowing their container
-input[type="submit"] {
+input[type='submit'] {
   white-space: normal;
 }
 
diff --git a/app/assets/stylesheets/02_utils.scss b/app/assets/stylesheets/02_utils.scss
index 891a06575..3d5ae5a13 100644
--- a/app/assets/stylesheets/02_utils.scss
+++ b/app/assets/stylesheets/02_utils.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 // floats
 .pull-left {
@@ -142,7 +142,6 @@
   }
 }
 
-
 // who known
 .highlighted {
   background-color: var(
@@ -194,13 +193,29 @@
 // using $direction.key as css modifier, $direction.values to set css properties
 // scale it using $steps
 $directions: (
-  "t": ("margin-top"),
-  "r": ("margin-right"),
-  "b": ("margin-bottom"),
-  "l": ("margin-left"),
-  "x": ("margin-left", "margin-right"),
-  "y": ("margin-top", "margin-bottom"),
-  "":  ("margin")
+  't': (
+    'margin-top'
+  ),
+  'r': (
+    'margin-right'
+  ),
+  'b': (
+    'margin-bottom'
+  ),
+  'l': (
+    'margin-left'
+  ),
+  'x': (
+    'margin-left',
+    'margin-right'
+  ),
+  'y': (
+    'margin-top',
+    'margin-bottom'
+  ),
+  '': (
+    'margin'
+  )
 );
 $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
 
@@ -215,13 +230,29 @@ $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
 }
 
 $directions: (
-  "t": ("padding-top"),
-  "r": ("padding-right"),
-  "b": ("padding-bottom"),
-  "l": ("padding-left"),
-  "x": ("padding-left", "padding-right"),
-  "y": ("padding-top", "padding-bottom"),
-  "":  ("padding")
+  't': (
+    'padding-top'
+  ),
+  'r': (
+    'padding-right'
+  ),
+  'b': (
+    'padding-bottom'
+  ),
+  'l': (
+    'padding-left'
+  ),
+  'x': (
+    'padding-left',
+    'padding-right'
+  ),
+  'y': (
+    'padding-top',
+    'padding-bottom'
+  ),
+  '': (
+    'padding'
+  )
 );
 $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
 
diff --git a/app/assets/stylesheets/_colors.scss b/app/assets/stylesheets/_colors.scss
index 5a3a5838f..dab8b2027 100644
--- a/app/assets/stylesheets/_colors.scss
+++ b/app/assets/stylesheets/_colors.scss
@@ -1,26 +1,26 @@
-$light-blue: #1C7EC9;
-$lighter-blue: #C3D9FF;
+$light-blue: #1c7ec9;
+$lighter-blue: #c3d9ff;
 $black: #333333;
-$white: #FFFFFF;
+$white: #ffffff;
 $grey: #888888;
-$light-grey: #F8F8F8;
+$light-grey: #f8f8f8;
 $dark-grey: #666666;
-$border-grey: #CCCCCC;
-$dark-red: #A10005;
+$border-grey: #cccccc;
+$dark-red: #a10005;
 $medium-red: rgba(161, 0, 5, 0.9);
-$light-red: #ED1C24;
-$lighter-red: #F52A2A;
-$background-red: #FFDFDF;
+$light-red: #ed1c24;
+$lighter-red: #f52a2a;
+$background-red: #ffdfdf;
 $green: darken(#169862, 5%);
-$old-green: #15AD70;
+$old-green: #15ad70;
 $lighter-green: lighten($old-green, 30%);
 $light-green: lighten($old-green, 25%);
 $dark-green: darken($old-green, 20%);
-$orange: #F28900;
+$orange: #f28900;
 $orange-bg: lighten($orange, 35%);
-$yellow: #FEF3B8;
-$light-yellow: #FFFFDE;
-$blue-france-700: #00006D;
+$yellow: #fef3b8;
+$light-yellow: #ffffde;
+$blue-france-700: #00006d;
 $blue-france-500: #000091;
-$blue-france-400: #7F7FC8;
+$blue-france-400: #7f7fc8;
 $g700: #383838;
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/_mixins.scss
index f561d6d63..8dd06bfe0 100644
--- a/app/assets/stylesheets/_mixins.scss
+++ b/app/assets/stylesheets/_mixins.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 @mixin horizontal-padding($value) {
   padding-left: $value;
@@ -22,4 +22,3 @@
     background-image: image-url($image-url);
   }
 }
-
diff --git a/app/assets/stylesheets/_placeholders.scss b/app/assets/stylesheets/_placeholders.scss
index 5488879d0..e2354708f 100644
--- a/app/assets/stylesheets/_placeholders.scss
+++ b/app/assets/stylesheets/_placeholders.scss
@@ -1,6 +1,6 @@
-@import "colors";
-@import "mixins";
-@import "constants";
+@import 'colors';
+@import 'mixins';
+@import 'constants';
 
 %horizontal-list {
   list-style-type: none;
@@ -27,7 +27,8 @@
   }
 }
 
-%container { // TODO: switch to new design with preview in two view not in two column https://github.com/betagouv/demarches-simplifiees.fr/issues/7882
+%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;
diff --git a/app/assets/stylesheets/actiontext.scss b/app/assets/stylesheets/actiontext.scss
index 274f04774..f3c3e970e 100644
--- a/app/assets/stylesheets/actiontext.scss
+++ b/app/assets/stylesheets/actiontext.scss
@@ -11,9 +11,9 @@
 
 trix-editor {
   min-height: 10em;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
 }
 
-[data-fr-theme="dark"] .trix-button-group button {
+[data-fr-theme='dark'] .trix-button-group button {
   background: var(--background-action-high-blue-france) !important;
 }
diff --git a/app/assets/stylesheets/add_instructeur.scss b/app/assets/stylesheets/add_instructeur.scss
index ba7d7b3cf..9d63b0558 100644
--- a/app/assets/stylesheets/add_instructeur.scss
+++ b/app/assets/stylesheets/add_instructeur.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 .instructeur-wrapper {
   .select-instructeurs {
diff --git a/app/assets/stylesheets/agentconnect.scss b/app/assets/stylesheets/agentconnect.scss
index 350f85d52..3e831839b 100644
--- a/app/assets/stylesheets/agentconnect.scss
+++ b/app/assets/stylesheets/agentconnect.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 #agentconnect {
   .agent {
@@ -10,7 +10,7 @@
   }
 
   .box {
-    background-color: #F2F2F9;
+    background-color: #f2f2f9;
     padding: $default-padding;
 
     ul {
diff --git a/app/assets/stylesheets/animations.scss b/app/assets/stylesheets/animations.scss
index 4cb79aa38..2e2cc0384 100644
--- a/app/assets/stylesheets/animations.scss
+++ b/app/assets/stylesheets/animations.scss
@@ -1,4 +1,4 @@
-@import "placeholders";
+@import 'placeholders';
 
 @keyframes fade-in-down {
   0% {
diff --git a/app/assets/stylesheets/archive.scss b/app/assets/stylesheets/archive.scss
index 91da1e4ca..09bcb85c5 100644
--- a/app/assets/stylesheets/archive.scss
+++ b/app/assets/stylesheets/archive.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 table.archive-table {
   .text-right {
diff --git a/app/assets/stylesheets/attachment.scss b/app/assets/stylesheets/attachment.scss
index e8b829486..dc8300d49 100644
--- a/app/assets/stylesheets/attachment.scss
+++ b/app/assets/stylesheets/attachment.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .attachment-error,
 .attachment-upload-error {
@@ -8,7 +8,7 @@
   &::before {
     box-shadow: inset 2px 0 0 0 var(--border-plain-error);
     height: 100%;
-    content: "";
+    content: '';
     left: -0.75rem;
     position: absolute;
     width: 2px;
@@ -26,7 +26,7 @@
 }
 
 .attachment-multiple:not(.fr-downloads-group),
-.attachment-multiple.fr-downloads-group[data-controller=replace-attachment] {
+.attachment-multiple.fr-downloads-group[data-controller='replace-attachment'] {
   ul {
     list-style-type: none;
     padding-inline-start: 0;
diff --git a/app/assets/stylesheets/attestation.scss b/app/assets/stylesheets/attestation.scss
index 7af3840f3..925b943e2 100644
--- a/app/assets/stylesheets/attestation.scss
+++ b/app/assets/stylesheets/attestation.scss
@@ -1,20 +1,20 @@
 @font-face {
-  font-family: "Marianne";
-  src: url("marianne-regular.ttf");
+  font-family: 'Marianne';
+  src: url('marianne-regular.ttf');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Marianne";
-  src: url("marianne-bold.ttf");
+  font-family: 'Marianne';
+  src: url('marianne-bold.ttf');
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Marianne";
-  src: url("marianne-thin.ttf");
+  font-family: 'Marianne';
+  src: url('marianne-thin.ttf');
   font-weight: 100; // weasy print n"accepte pas lighter
   font-style: normal;
 }
@@ -25,7 +25,7 @@
 
   @bottom-center {
     font-size: 8pt;
-    content: counter(page) " / " counter(pages);
+    content: counter(page) ' / ' counter(pages);
     margin-top: 17mm;
     white-space: nowrap;
   }
@@ -45,7 +45,7 @@
       min-height: 29.7cm;
       padding: 17mm;
       margin: 0 auto;
-      background: #FFFFFF;
+      background: #ffffff;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Optional: for better visualization
       position: relative;
     }
diff --git a/app/assets/stylesheets/attestation_template_2_edit.scss b/app/assets/stylesheets/attestation_template_2_edit.scss
index 74a0a5684..53103046f 100644
--- a/app/assets/stylesheets/attestation_template_2_edit.scss
+++ b/app/assets/stylesheets/attestation_template_2_edit.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 #attestation-edit {
   .attestation-preview {
diff --git a/app/assets/stylesheets/attestation_template_edit.scss b/app/assets/stylesheets/attestation_template_edit.scss
index 4c5069655..9829c444c 100644
--- a/app/assets/stylesheets/attestation_template_edit.scss
+++ b/app/assets/stylesheets/attestation_template_edit.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 #attestation-template-edit {
   .text-active {
diff --git a/app/assets/stylesheets/auth.scss b/app/assets/stylesheets/auth.scss
index af379dcf3..01387789d 100644
--- a/app/assets/stylesheets/auth.scss
+++ b/app/assets/stylesheets/auth.scss
@@ -1,7 +1,7 @@
-@import "colors";
-@import "constants";
-@import "placeholders";
-@import "mixins";
+@import 'colors';
+@import 'constants';
+@import 'placeholders';
+@import 'mixins';
 
 #auth,
 #agentconnect {
@@ -48,15 +48,15 @@
 }
 
 .sign-in-form .form {
-  input[type="email"] {
+  input[type='email'] {
     margin-bottom: $default-spacer;
   }
 
-  input[type="password"] {
+  input[type='password'] {
     margin-bottom: $default-spacer;
   }
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     margin-bottom: 0;
   }
 }
diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss
index ed9bf6821..386bedae6 100644
--- a/app/assets/stylesheets/autosave.scss
+++ b/app/assets/stylesheets/autosave.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .autosave {
   position: relative;
diff --git a/app/assets/stylesheets/beta.scss b/app/assets/stylesheets/beta.scss
index 13dba967a..2ddfd7026 100644
--- a/app/assets/stylesheets/beta.scss
+++ b/app/assets/stylesheets/beta.scss
@@ -6,8 +6,8 @@
   right: -35px;
   transform: rotate(45deg);
   width: 150px;
-  background-color: #008CBA;
-  color: #FFFFFF;
+  background-color: #008cba;
+  color: #ffffff;
   padding: 5px;
   font-size: 15px;
   font-weight: 700;
diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index 1c60811ad..1293eb494 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -1,6 +1,6 @@
-@import "colors";
-@import "constants";
-@import "placeholders";
+@import 'colors';
+@import 'constants';
+@import 'placeholders';
 
 .button {
   @extend %outline;
@@ -11,7 +11,7 @@
   border: 1px solid $border-grey;
   font-size: 14px;
   line-height: 20px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: $black;
   text-align: center;
   -webkit-appearance: none;
@@ -29,7 +29,7 @@
   }
 
   &.primary {
-    color: #FFFFFF;
+    color: #ffffff;
     border-color: $blue-france-700;
     background-color: $blue-france-700;
 
@@ -41,10 +41,10 @@
   &.secondary {
     color: $blue-france-700;
     border-color: $blue-france-700;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
 
     &:hover:not(:disabled) {
-      color: #FFFFFF;
+      color: #ffffff;
       background: $blue-france-700;
     }
   }
@@ -52,10 +52,10 @@
   &.danger {
     color: $black;
     border-color: $border-grey;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
 
     &:hover:not(:disabled) {
-      color: #FFFFFF;
+      color: #ffffff;
       border-color: $medium-red;
       background-color: $medium-red;
 
@@ -66,35 +66,35 @@
   }
 
   &.accepted {
-    color: #FFFFFF;
+    color: #ffffff;
     border-color: $green;
     background-color: $green;
 
     &:hover:not(:disabled) {
       color: $green;
-      background-color: #FFFFFF;
+      background-color: #ffffff;
     }
   }
 
   &.without-continuation {
-    color: #FFFFFF;
+    color: #ffffff;
     border-color: $black;
     background-color: $black;
 
     &:hover:not(:disabled) {
       color: $black;
-      background-color: #FFFFFF;
+      background-color: #ffffff;
     }
   }
 
   &.refused {
-    color: #FFFFFF;
+    color: #ffffff;
     border-color: $dark-red;
     background-color: $dark-red;
 
     &:hover:not(:disabled) {
       color: $dark-red;
-      background-color: #FFFFFF;
+      background-color: #ffffff;
     }
   }
 
@@ -151,8 +151,8 @@
   .dropdown-button {
     white-space: nowrap;
 
-    [aria-hidden="true"].fr-ml-2v::after {
-      content: "▾";
+    [aria-hidden='true'].fr-ml-2v::after {
+      content: '▾';
     }
 
     &.icon-only {
@@ -172,13 +172,12 @@
   }
 }
 
-
-[data-fr-theme="dark"] .dropdown-content {
+[data-fr-theme='dark'] .dropdown-content {
   border: none;
   background: var(--background-action-low-blue-france);
 }
 
-[data-fr-theme="dark"] .dropdown-items {
+[data-fr-theme='dark'] .dropdown-items {
   li {
     &:not(.inactive) {
       &:hover,
@@ -195,7 +194,7 @@
 
 .dropdown-content {
   border: 1px solid $border-grey;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   position: absolute;
   right: 0;
@@ -343,7 +342,7 @@ ul.dropdown-items {
 
     // Make child links fill the whole clickable area
     > a,
-      .dropdown-items-link {
+    .dropdown-items-link {
       display: flex;
       flex-grow: 1;
       margin: -$default-padding;
@@ -366,7 +365,7 @@ ul.dropdown-items {
   }
 
   p + h4,
-  p + p, {
+  p + p {
     margin-top: $default-spacer;
   }
 }
diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss
index 809d4ce88..8e0459a01 100644
--- a/app/assets/stylesheets/card.scss
+++ b/app/assets/stylesheets/card.scss
@@ -1,8 +1,7 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
-
-[data-fr-theme="dark"] .card {
+[data-fr-theme='dark'] .card {
   background: none;
   border: 1px solid var(--background-action-low-blue-france);
 }
@@ -11,7 +10,7 @@
   padding: ($default-spacer * 3) ($default-spacer * 2);
   border: 1px solid $border-grey;
   margin-bottom: $default-spacer * 4;
-  background: #FFFFFF;
+  background: #ffffff;
 
   .card-title {
     font-weight: bold;
diff --git a/app/assets/stylesheets/card_admin.scss b/app/assets/stylesheets/card_admin.scss
index 8f678d3aa..122f9e734 100644
--- a/app/assets/stylesheets/card_admin.scss
+++ b/app/assets/stylesheets/card_admin.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .fr-tile-subtitle {
   min-height: 7rem;
diff --git a/app/assets/stylesheets/carte.scss b/app/assets/stylesheets/carte.scss
index 372772419..355a575bb 100644
--- a/app/assets/stylesheets/carte.scss
+++ b/app/assets/stylesheets/carte.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 .areas {
   margin-bottom: 10px;
diff --git a/app/assets/stylesheets/cnaf.scss b/app/assets/stylesheets/cnaf.scss
index 9cbd7ea36..96bb8a0c2 100644
--- a/app/assets/stylesheets/cnaf.scss
+++ b/app/assets/stylesheets/cnaf.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 table.cnaf {
   margin: 2 * $default-padding 0 $default-padding $default-padding;
@@ -7,7 +7,7 @@ table.cnaf {
 
   caption {
     font-weight: bold;
-    margin-left: - $default-padding;
+    margin-left: -$default-padding;
     margin-bottom: $default-spacer;
     text-align: left;
   }
diff --git a/app/assets/stylesheets/code_blocks.scss b/app/assets/stylesheets/code_blocks.scss
index 8dedf3021..9e3d56f66 100644
--- a/app/assets/stylesheets/code_blocks.scss
+++ b/app/assets/stylesheets/code_blocks.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 .code-block {
   background-color: $black;
diff --git a/app/assets/stylesheets/code_example.scss b/app/assets/stylesheets/code_example.scss
index 93936618f..503795041 100644
--- a/app/assets/stylesheets/code_example.scss
+++ b/app/assets/stylesheets/code_example.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 .code-example {
   background-color: var(--background-contrast-grey);
@@ -13,7 +13,6 @@
       margin-right: auto;
       padding: $default-padding;
     }
-
   }
 
   pre {
diff --git a/app/assets/stylesheets/commencer.scss b/app/assets/stylesheets/commencer.scss
index e8b5f8e3a..4b5982773 100644
--- a/app/assets/stylesheets/commencer.scss
+++ b/app/assets/stylesheets/commencer.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .commencer {
   @media (max-width: 62em) {
diff --git a/app/assets/stylesheets/conditions_component.scss b/app/assets/stylesheets/conditions_component.scss
index 59f8bf6b9..f1936841f 100644
--- a/app/assets/stylesheets/conditions_component.scss
+++ b/app/assets/stylesheets/conditions_component.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 form.form > .conditionnel {
   .condition-table {
@@ -37,7 +37,6 @@ form.form > .conditionnel {
   th {
     text-align: left;
     padding: $default-spacer;
-
   }
 
   td {
@@ -48,7 +47,7 @@ form.form > .conditionnel {
       margin-bottom: 0;
     }
 
-    input[type=text] {
+    input[type='text'] {
       display: inline-block;
       margin-bottom: 0;
     }
diff --git a/app/assets/stylesheets/demande.scss b/app/assets/stylesheets/demande.scss
index 92be4d4e0..b84008c18 100644
--- a/app/assets/stylesheets/demande.scss
+++ b/app/assets/stylesheets/demande.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .dossier-show {
   .champ-row {
diff --git a/app/assets/stylesheets/demarches_index.scss b/app/assets/stylesheets/demarches_index.scss
index ab58d5502..ef2e1cf68 100644
--- a/app/assets/stylesheets/demarches_index.scss
+++ b/app/assets/stylesheets/demarches_index.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 #demarches-index {
   margin-bottom: 30px;
diff --git a/app/assets/stylesheets/dgfip.scss b/app/assets/stylesheets/dgfip.scss
index 2efae24bd..d4e95a4bb 100644
--- a/app/assets/stylesheets/dgfip.scss
+++ b/app/assets/stylesheets/dgfip.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 table.dgfip {
   margin: 2 * $default-padding 0 $default-padding $default-padding;
@@ -7,7 +7,7 @@ table.dgfip {
 
   caption {
     font-weight: bold;
-    margin-left: - $default-padding;
+    margin-left: -$default-padding;
     margin-bottom: $default-spacer;
     text-align: left;
   }
diff --git a/app/assets/stylesheets/direct_uploads.scss b/app/assets/stylesheets/direct_uploads.scss
index 73785f9cc..595b0ab9b 100644
--- a/app/assets/stylesheets/direct_uploads.scss
+++ b/app/assets/stylesheets/direct_uploads.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 .direct-upload {
   display: inline-block;
@@ -20,7 +20,9 @@
   left: 0;
   bottom: 0;
   background-color: var(--background-contrast-grey);
-  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transition:
+    width 120ms ease-out,
+    opacity 60ms 60ms ease-in;
   transform: translate3d(0, 0, 0);
 }
 
@@ -36,7 +38,7 @@
   border-color: var(--border-plain-error);
 }
 
-input[type=file][data-direct-upload-url][disabled],
-input[type=file][data-auto-attach-url][disabled] {
+input[type='file'][data-direct-upload-url][disabled],
+input[type='file'][data-auto-attach-url][disabled] {
   display: none;
 }
diff --git a/app/assets/stylesheets/dossier_annotations_privees.scss b/app/assets/stylesheets/dossier_annotations_privees.scss
index 84273ddf5..dd9ea6fdd 100644
--- a/app/assets/stylesheets/dossier_annotations_privees.scss
+++ b/app/assets/stylesheets/dossier_annotations_privees.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 #dossier-annotations-privees {
   h1 {
diff --git a/app/assets/stylesheets/dossier_champs.scss b/app/assets/stylesheets/dossier_champs.scss
index 86808d340..fbedbee32 100644
--- a/app/assets/stylesheets/dossier_champs.scss
+++ b/app/assets/stylesheets/dossier_champs.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .table.dossier-champs {
   th,
diff --git a/app/assets/stylesheets/dossier_edit.scss b/app/assets/stylesheets/dossier_edit.scss
index 6f2ea5241..1d4459af8 100644
--- a/app/assets/stylesheets/dossier_edit.scss
+++ b/app/assets/stylesheets/dossier_edit.scss
@@ -1,9 +1,9 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 $dossier-actions-bar-border-width: 1px;
 
-[data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer {
+[data-fr-theme='dark'] .dossier-edit .dossier-edit-sticky-footer {
   background-color: var(--background-action-low-blue-france);
   border: none;
 }
@@ -32,7 +32,7 @@ $dossier-actions-bar-border-width: 1px;
     align-items: baseline;
 
     .mandatory-explanation {
-      flex-grow: 1;   // Push the "notice" button to the right
+      flex-grow: 1; // Push the "notice" button to the right
       flex-shrink: 1; // Allow the text to shrink
       margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
     }
@@ -51,8 +51,8 @@ $dossier-actions-bar-border-width: 1px;
   }
 
   .dossier-edit-sticky-footer {
-    position: fixed;           // Fallback for IE 11, and other browser that don't support sticky
-    position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+    position: fixed; // Fallback for IE 11, and other browser that don't support sticky
+    position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
     position: sticky;
 
     // IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc.
@@ -70,9 +70,9 @@ $dossier-actions-bar-border-width: 1px;
     padding-right: $default-padding - $dossier-actions-bar-border-width;
     padding-left: $default-padding - $dossier-actions-bar-border-width;
 
-    background: #FFFFFF;
+    background: #ffffff;
 
-    border: $dossier-actions-bar-border-width solid #CCCCCC;
+    border: $dossier-actions-bar-border-width solid #cccccc;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom: none;
diff --git a/app/assets/stylesheets/dossier_link.scss b/app/assets/stylesheets/dossier_link.scss
index ebe2c0bc5..8a09234d3 100644
--- a/app/assets/stylesheets/dossier_link.scss
+++ b/app/assets/stylesheets/dossier_link.scss
@@ -1,9 +1,9 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 .dossier-link {
   .help-block > p {
-    margin-top: - $default-padding;
+    margin-top: -$default-padding;
     margin-bottom: 2 * $default-padding;
   }
 
diff --git a/app/assets/stylesheets/dossier_views.scss b/app/assets/stylesheets/dossier_views.scss
index e24706016..c5d263017 100644
--- a/app/assets/stylesheets/dossier_views.scss
+++ b/app/assets/stylesheets/dossier_views.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .dossier-container {
   .sub-header {
@@ -15,7 +15,6 @@
     .header-actions {
       margin-bottom: $default-spacer;
       display: flex;
-
     }
   }
 
diff --git a/app/assets/stylesheets/dossiers_table.scss b/app/assets/stylesheets/dossiers_table.scss
index de3caa57c..4cea963a4 100644
--- a/app/assets/stylesheets/dossiers_table.scss
+++ b/app/assets/stylesheets/dossiers_table.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .table.dossiers-table {
   font-size: 14px;
@@ -22,7 +22,8 @@
     // In order to have identical height in the table header and the table rows,
     // we compensate for the height difference between the biggest element of the header
     // (the Personnaliser button, 38px) and the biggest cell-link element of the rows (the label, 28px)
-    padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2)) $default-spacer;
+    padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2))
+      $default-spacer;
     display: block;
   }
 
@@ -53,7 +54,6 @@
     width: 110px;
   }
 
-
   .follow-col {
     width: 450px;
 
diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss
index ffecdcc40..6478ea3c7 100644
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 // overwrite DSFR style for SimpleFormatComponent, some user use markdown with
 // ordered list having paragraph between list item
@@ -47,19 +47,19 @@ trix-editor.fr-input {
 }
 
 .fr-ds-combobox__menu {
-  &[data-placement=top] {
+  &[data-placement='top'] {
     --origin: translateY(8px);
   }
 
-  &[data-placement=bottom] {
+  &[data-placement='bottom'] {
     --origin: translateY(-8px);
   }
 
-  &[data-placement=right] {
+  &[data-placement='right'] {
     --origin: translateX(-8px);
   }
 
-  &[data-placement=left] {
+  &[data-placement='left'] {
     --origin: translateX(8px);
   }
 
@@ -118,7 +118,7 @@ trix-editor.fr-input {
 
 // Fix firefox < 80, Safari < 15.4, Chrome < 83 not supporting "appearance: auto" on inputs
 // This rule was set by DSFR for DSFR design, but broke our legacy forms.
-input[type="checkbox"] {
+input[type='checkbox'] {
   -moz-appearance: checkbox;
   -moz-appearance: auto;
 
@@ -126,7 +126,7 @@ input[type="checkbox"] {
   -webkit-appearance: auto;
 }
 
-input[type="radio"] {
+input[type='radio'] {
   -moz-appearance: radio;
   -moz-appearance: auto;
 
@@ -136,19 +136,20 @@ input[type="radio"] {
 
 // remove additional calendar icon on date input already handle by Firefox navigator
 @-moz-document url-prefix() {
-  .fr-input[type="date"] {
+  .fr-input[type='date'] {
     background-image: none;
   }
 }
 
-.fr-btn.fr-btn--icon-left[target="_blank"] {
+.fr-btn.fr-btn--icon-left[target='_blank'] {
   &::after {
     display: none;
   }
 }
 
 // dans le DSFR il est possible d'avoir un bouton seulement avec une icone mais j'ai du surcharger ici pour eviter d'avoir des marges de l'icone. Je n'ai pas bien compris pourquoi
-.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"].icon-only::after {
+.fr-btns-group--sm.fr-btns-group--icon-right
+  .fr-btn[class*=' fr-icon-'].icon-only::after {
   margin-left: 0;
   margin-right: 0;
 }
@@ -175,11 +176,11 @@ input[type="radio"] {
 
 button.fr-tag-bug {
   background-color: $blue-france-500;
-  color: #FFFFFF;
+  color: #ffffff;
 
   &:hover {
-    background-color: #1212FF;
-    color: #FFFFFF;
+    background-color: #1212ff;
+    color: #ffffff;
   }
 
   .tag-dismiss {
@@ -195,11 +196,10 @@ button.fr-tag-bug {
   grid-auto-flow: column;
 }
 
-.fr-translate__language[aria-current]:not([aria-current="false"]) {
+.fr-translate__language[aria-current]:not([aria-current='false']) {
   display: inline-flex;
 }
 
-
 // on veut ajouter un gris plus clair dans le side_menu
 .fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
   color: var(--text-disabled-grey);
@@ -220,11 +220,11 @@ button.fr-tag-bug {
     border: 2px solid var(--border-action-high-grey);
   }
 
-  .fr-radio-group input[type="radio"] {
+  .fr-radio-group input[type='radio'] {
     opacity: 1;
   }
 
-  .fr-tabs__tab[aria-selected=true]:not(:disabled) {
+  .fr-tabs__tab[aria-selected='true']:not(:disabled) {
     border: 5px solid var(--border-action-high-grey);
   }
 
diff --git a/app/assets/stylesheets/errors_summary.scss b/app/assets/stylesheets/errors_summary.scss
index 54843e294..e2be31dc5 100644
--- a/app/assets/stylesheets/errors_summary.scss
+++ b/app/assets/stylesheets/errors_summary.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .errors-summary {
   background: $background-red;
@@ -9,4 +9,3 @@
     padding: $default-spacer;
   }
 }
-
diff --git a/app/assets/stylesheets/exports.scss b/app/assets/stylesheets/exports.scss
index ff734fea2..4f16cb599 100644
--- a/app/assets/stylesheets/exports.scss
+++ b/app/assets/stylesheets/exports.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .export-template-preview {
   // From https://codepen.io/myramoki/pen/xZJjrr
@@ -19,7 +19,7 @@
 
   .tree:before,
   .tree ul:before {
-    content: "";
+    content: '';
     display: block;
     width: 0;
     position: absolute;
@@ -45,7 +45,7 @@
   }
 
   .tree li:before {
-    content: "";
+    content: '';
     display: block;
     width: 10px; // same with indentation
     height: 0;
@@ -61,9 +61,7 @@
   }
 
   .tree li:last-child:before {
-    background: var(
-      --background-alt-blue-france
-    ); // same with body background
+    background: var(--background-alt-blue-france); // same with body background
     height: auto;
     top: 1em; // (line-height/2)
     bottom: 0;
diff --git a/app/assets/stylesheets/flex.scss b/app/assets/stylesheets/flex.scss
index 484fbda11..9e4ccf324 100644
--- a/app/assets/stylesheets/flex.scss
+++ b/app/assets/stylesheets/flex.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .flex {
   display: flex;
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 1dfaaf189..ce83a13bb 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -1,6 +1,6 @@
-@import "constants";
-@import "colors";
-@import "placeholders";
+@import 'constants';
+@import 'colors';
+@import 'placeholders';
 
 .form {
   input.unstyled {
@@ -45,7 +45,11 @@
   }
 
   // Keep only bottom margin in nested (consecutive) header sections, ie. first legend for a same level
-  .fr-fieldset > .fr-fieldset__legend + .fr-fieldset__element > .fr-fieldset:first-of-type .header-section {
+  .fr-fieldset
+    > .fr-fieldset__legend
+    + .fr-fieldset__element
+    > .fr-fieldset:first-of-type
+    .header-section {
     margin-top: 0 !important;
   }
 
@@ -81,7 +85,7 @@
     &.required {
       &::after {
         color: $dark-red;
-        content: " *";
+        content: ' *';
       }
     }
   }
@@ -93,7 +97,7 @@
   }
 
   .notice {
-    margin-top: - $default-spacer;
+    margin-top: -$default-spacer;
     margin-bottom: $default-padding;
     color: var(--text-mention-grey);
 
@@ -128,7 +132,7 @@
         gap: 0.25rem; // Space before mandatory icon because dsfr set display:flex on checkbox label
       }
 
-      input[type=checkbox] {
+      input[type='checkbox'] {
         position: absolute;
         top: 3px;
         left: 0px;
@@ -168,7 +172,8 @@
     }
 
     label {
-      padding: $default-padding $default-padding $default-padding $default-spacer;
+      padding: $default-padding $default-padding $default-padding
+        $default-spacer;
       border: 1px solid $border-grey;
       border-radius: 4px;
       font-weight: normal;
@@ -197,7 +202,7 @@
         font-style: italic;
       }
 
-      input[type=radio] {
+      input[type='radio'] {
         margin-bottom: 0;
       }
 
@@ -222,7 +227,7 @@
     padding: inherit;
   }
 
-  input[type=password],
+  input[type='password'],
   select:not(.fr-select) {
     display: block;
     margin-bottom: 0;
@@ -241,14 +246,13 @@
     }
   }
 
-
-  input[type=checkbox] {
+  input[type='checkbox'] {
     &.small-margin {
       margin-bottom: $default-spacer;
     }
   }
 
-  input[type=text]:not(.fr-input):not(.fr-select) {
+  input[type='text']:not(.fr-input):not(.fr-select) {
     border: solid 1px $border-grey;
     padding: $default-padding;
 
@@ -282,14 +286,14 @@
     border: 1px solid $dark-red;
   }
 
-  input[type=text],
-  input[type=email],
-  input[type=password],
-  input[type=date],
-  input[type=number],
-  input[type=datetime-local],
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  input[type='date'],
+  input[type='number'],
+  input[type='datetime-local'],
   textarea,
-  input[type=tel] {
+  input[type='tel'] {
     @media (max-width: $two-columns-breakpoint) {
       width: 100%;
     }
@@ -303,17 +307,17 @@
   }
 
   @media (min-width: $two-columns-breakpoint) {
-    input[type=email],
-    input[type=password],
-    input[type=number],
-    input[inputmode=numeric],
-    input[inputmode=decimal],
-    input[type=tel] {
+    input[type='email'],
+    input[type='password'],
+    input[type='number'],
+    input[inputmode='numeric'],
+    input[inputmode='decimal'],
+    input[type='tel'] {
       max-width: 500px;
     }
   }
 
-  input[type=date] {
+  input[type='date'] {
     max-width: 180px;
   }
 
@@ -341,8 +345,8 @@
     }
   }
 
-  input[type=checkbox],
-  input[type=radio] {
+  input[type='checkbox'],
+  input[type='radio'] {
     @extend %outline;
 
     // Firefox tends to display some controls smaller than other browsers.
@@ -378,7 +382,9 @@
       }
     }
 
-    .utils-repetition-required .row:first-child .utils-repetition-required-destroy-button {
+    .utils-repetition-required
+      .row:first-child
+      .utils-repetition-required-destroy-button {
       display: none;
     }
   }
@@ -484,7 +490,7 @@
   &:before,
   &:after {
     font-weight: bold;
-    content: "/";
+    content: '/';
   }
 }
 
diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss
index 3c8331912..cf7dad075 100644
--- a/app/assets/stylesheets/gallery.scss
+++ b/app/assets/stylesheets/gallery.scss
@@ -95,6 +95,10 @@
 }
 
 .lg-sub-html {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
+  background-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 1)
+  ) !important;
   padding: 30px 40px 0 40px !important;
 }
diff --git a/app/assets/stylesheets/gaps.scss b/app/assets/stylesheets/gaps.scss
index 0d2dc2226..34a57b9d1 100644
--- a/app/assets/stylesheets/gaps.scss
+++ b/app/assets/stylesheets/gaps.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .gap-left {
   margin-left: $default-spacer;
diff --git a/app/assets/stylesheets/groupe_gestionnaire_cards.scss b/app/assets/stylesheets/groupe_gestionnaire_cards.scss
index 4ddeefdf3..17eeeaca4 100644
--- a/app/assets/stylesheets/groupe_gestionnaire_cards.scss
+++ b/app/assets/stylesheets/groupe_gestionnaire_cards.scss
@@ -3,7 +3,7 @@
     padding-left: 20px;
     padding-right: 20px;
     position: relative;
-}
+  }
 
   .notifications {
     top: 3px;
diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss
index 7246675b4..46c7fabd0 100644
--- a/app/assets/stylesheets/help_dropdown.scss
+++ b/app/assets/stylesheets/help_dropdown.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .help-dropdown {
   .dropdown-content {
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss
index d8667baad..74562860d 100644
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -12,114 +12,114 @@
   }
 
   &.follow {
-    background-image: image-url("icons/follow-folder.svg");
+    background-image: image-url('icons/follow-folder.svg');
   }
 
   &.unfollow {
-    background-image: image-url("icons/unfollow-folder.svg");
+    background-image: image-url('icons/unfollow-folder.svg');
   }
 
   &.standby {
-    background-image: image-url("icons/standby.svg");
+    background-image: image-url('icons/standby.svg');
   }
 
   &.unarchive {
-    background-image: image-url("icons/unarchive.svg");
+    background-image: image-url('icons/unarchive.svg');
   }
 
   &.edit {
-    background-image: image-url("icons/edit-folder-blue.svg");
+    background-image: image-url('icons/edit-folder-blue.svg');
   }
 
   &.bubble {
-    background-image: image-url("icons/bubble.svg");
+    background-image: image-url('icons/bubble.svg');
   }
 
   &.attached {
-    background-image: image-url("icons/attached.svg");
+    background-image: image-url('icons/attached.svg');
   }
 
   &.preview {
-    background-image: image-url("icons/preview.svg");
+    background-image: image-url('icons/preview.svg');
   }
 
   &.retry {
-    background-image: image-url("icons/retry.svg");
+    background-image: image-url('icons/retry.svg');
   }
 
   &.download {
-    background-image: image-url("icons/download.svg");
+    background-image: image-url('icons/download.svg');
   }
 
   &.lock {
-    background-image: image-url("icons/lock.svg");
+    background-image: image-url('icons/lock.svg');
   }
 
   &.add {
-    background-image: image-url("icons/add.svg");
+    background-image: image-url('icons/add.svg');
     margin-left: -5px;
     margin-right: 0px;
   }
 
   &.justificatif {
-    background-image: image-url("icons/justificatif.svg");
+    background-image: image-url('icons/justificatif.svg');
   }
 
   &.printer {
-    background-image: image-url("icons/printer.svg");
+    background-image: image-url('icons/printer.svg');
   }
 
   &.account {
-    background-image: image-url("icons/account-circle.svg");
+    background-image: image-url('icons/account-circle.svg');
   }
 
   &.super-admin {
-    background-image: image-url("icons/super-admin.svg");
+    background-image: image-url('icons/super-admin.svg');
   }
 
   &.mail {
-    background-image: image-url("icons/mail.svg");
+    background-image: image-url('icons/mail.svg');
   }
 
   &.reply {
-    background-image: image-url("icons/reply.svg");
+    background-image: image-url('icons/reply.svg');
   }
 
   &.search {
-    background-image: image-url("icons/search-blue.svg");
+    background-image: image-url('icons/search-blue.svg');
   }
 
   &.sign-out {
-    background-image: image-url("icons/sign-out.svg");
+    background-image: image-url('icons/sign-out.svg');
   }
 
   &.info {
-    background-image: image-url("icons/info-blue.svg");
+    background-image: image-url('icons/info-blue.svg');
     object-fit: contain;
   }
 
   &.help {
-    background-image: image-url("icons/help.svg");
+    background-image: image-url('icons/help.svg');
   }
 
   &.phone {
-    background-image: image-url("icons/phone.svg");
+    background-image: image-url('icons/phone.svg');
   }
 
   &.clock {
-    background-image: image-url("icons/clock.svg");
+    background-image: image-url('icons/clock.svg');
   }
 
   &.smile {
-    background-image: image-url("icons/smile-regular.svg");
+    background-image: image-url('icons/smile-regular.svg');
   }
 
   &.frown {
-    background-image: image-url("icons/frown-regular.svg");
+    background-image: image-url('icons/frown-regular.svg');
   }
 
   &.meh {
-    background-image: image-url("icons/meh-regular.svg");
+    background-image: image-url('icons/meh-regular.svg');
   }
 
   &.mandatory {
diff --git a/app/assets/stylesheets/instructeur.scss b/app/assets/stylesheets/instructeur.scss
index 8d95fdd70..b42345d6a 100644
--- a/app/assets/stylesheets/instructeur.scss
+++ b/app/assets/stylesheets/instructeur.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .page-title {
   font-size: 30px;
@@ -58,7 +58,7 @@
   right: 0;
   top: 45px;
   font-size: 14px;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   border: 1px solid $border-grey;
   min-width: 270px;
diff --git a/app/assets/stylesheets/invites_form.scss b/app/assets/stylesheets/invites_form.scss
index b0fc6c938..16263e917 100644
--- a/app/assets/stylesheets/invites_form.scss
+++ b/app/assets/stylesheets/invites_form.scss
@@ -1,4 +1,3 @@
-
 #invites-form {
   @media (min-width: 48em) {
     min-width: 400px;
diff --git a/app/assets/stylesheets/labels.scss b/app/assets/stylesheets/labels.scss
index cdfa65a5e..ab6e4bd82 100644
--- a/app/assets/stylesheets/labels.scss
+++ b/app/assets/stylesheets/labels.scss
@@ -1,12 +1,12 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .label {
   display: inline-block;
   padding: 4px $default-spacer;
   background: $dark-grey;
   border: 1px solid transparent;
-  color: #FFFFFF;
+  color: #ffffff;
   border-radius: 4px;
   font-size: 12px;
   line-height: 18px;
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index 650e06d8f..9d42ad829 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -1,7 +1,7 @@
-@import "constants";
-@import "colors";
-@import "mixins";
-@import "placeholders";
+@import 'constants';
+@import 'colors';
+@import 'mixins';
+@import 'placeholders';
 
 $landing-breakpoint: 1040px;
 
@@ -90,7 +90,7 @@ $landing-breakpoint: 1040px;
   @extend %horizontal-list-item;
   max-width: 500px;
   width: 100%;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
   padding: 24px;
   display: flex;
@@ -125,7 +125,6 @@ $landing-breakpoint: 1040px;
 }
 
 .landing {
-
   .numbers {
     @extend %horizontal-list;
     justify-content: space-around;
@@ -167,8 +166,8 @@ $landing-breakpoint: 1040px;
   }
 }
 
-html[lang="fr"] .landing .number-label-third::before {
-  content: "de ";
+html[lang='fr'] .landing .number-label-third::before {
+  content: 'de ';
 }
 
 $users-breakpoint: 950px;
@@ -248,7 +247,6 @@ $users-breakpoint: 950px;
   }
 }
 
-
 .role-administrations-image {
   text-align: right;
 
@@ -289,22 +287,22 @@ $cta-panel-button-border-size: 2px;
 
 .cta-panel-button-white {
   @include cta-panel-button;
-  border: $cta-panel-button-border-size solid #FFFFFF;
-  color: #FFFFFF;
+  border: $cta-panel-button-border-size solid #ffffff;
+  color: #ffffff;
 
   &:hover {
-    color: #FFFFFF;
+    color: #ffffff;
     text-decoration: none;
     background-color: rgba(255, 255, 255, 0.2);
   }
 
   &:focus {
-    color: #FFFFFF;
+    color: #ffffff;
     text-decoration: none;
   }
 
   &:active,
   &:focus {
-    outline: 3px solid #FFFFFF;
+    outline: 3px solid #ffffff;
   }
 }
diff --git a/app/assets/stylesheets/layouts.scss b/app/assets/stylesheets/layouts.scss
index 2432b9554..27dfa40ff 100644
--- a/app/assets/stylesheets/layouts.scss
+++ b/app/assets/stylesheets/layouts.scss
@@ -1,14 +1,20 @@
-@import "colors";
-@import "constants";
-@import "placeholders";
+@import 'colors';
+@import 'constants';
+@import 'placeholders';
 
 .two-columns {
-
   @media (min-width: $two-columns-breakpoint) {
-    background: linear-gradient(to right, transparent 0%, transparent 50%, var(--background-alt-blue-france) 50%, var(--background-alt-blue-france) 100%);
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      transparent 50%,
+      var(--background-alt-blue-france) 50%,
+      var(--background-alt-blue-france) 100%
+    );
   }
 
-  .columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
+  .columns-container {
+    // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
     @extend %container;
     display: flex;
     flex-direction: column;
diff --git a/app/assets/stylesheets/manager.scss b/app/assets/stylesheets/manager.scss
index e6fe59c3b..a81bf77d7 100644
--- a/app/assets/stylesheets/manager.scss
+++ b/app/assets/stylesheets/manager.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .hidden {
   display: none;
@@ -21,7 +21,7 @@
 }
 
 .manager-mandatory {
-  color: #A10005;
+  color: #a10005;
   font-size: 18px;
 }
 
@@ -70,19 +70,19 @@
   }
 
   .fr-ds-combobox__menu {
-    &[data-placement=top] {
+    &[data-placement='top'] {
       --origin: translateY(8px);
     }
 
-    &[data-placement=bottom] {
+    &[data-placement='bottom'] {
       --origin: translateY(-8px);
     }
 
-    &[data-placement=right] {
+    &[data-placement='right'] {
       --origin: translateX(-8px);
     }
 
-    &[data-placement=left] {
+    &[data-placement='left'] {
       --origin: translateX(8px);
     }
 
diff --git a/app/assets/stylesheets/map_info.scss b/app/assets/stylesheets/map_info.scss
index 00f7442c7..f1c7ee819 100644
--- a/app/assets/stylesheets/map_info.scss
+++ b/app/assets/stylesheets/map_info.scss
@@ -1,10 +1,10 @@
-@import "colors";
+@import 'colors';
 
-$dep-nothing: #E3E3FD; // blue-france-925
-$dep-small: #CACAFB;   // blue-france-850
-$dep-medium: #8585F6;  // blue-france-625
-$dep-large: #313178;   // blue-france-200
-$dep-xlarge: #272747;  // blue-france-125
+$dep-nothing: #e3e3fd; // blue-france-925
+$dep-small: #cacafb; // blue-france-850
+$dep-medium: #8585f6; // blue-france-625
+$dep-large: #313178; // blue-france-200
+$dep-xlarge: #272747; // blue-france-125
 
 #map-svg {
   max-width: 100%;
diff --git a/app/assets/stylesheets/menu_component.scss b/app/assets/stylesheets/menu_component.scss
index 32438e088..378b23163 100644
--- a/app/assets/stylesheets/menu_component.scss
+++ b/app/assets/stylesheets/menu_component.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 .menu-component-header {
   font-size: 12px;
diff --git a/app/assets/stylesheets/mesri.scss b/app/assets/stylesheets/mesri.scss
index 62f3891c1..37ac9f7dc 100644
--- a/app/assets/stylesheets/mesri.scss
+++ b/app/assets/stylesheets/mesri.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 table.mesri {
   margin: 2 * $default-padding 0 $default-padding $default-padding;
@@ -7,7 +7,7 @@ table.mesri {
 
   caption {
     font-weight: bold;
-    margin-left: - $default-padding;
+    margin-left: -$default-padding;
     margin-bottom: $default-spacer;
     text-align: left;
   }
diff --git a/app/assets/stylesheets/message.scss b/app/assets/stylesheets/message.scss
index 8595b0348..ccc3a1608 100644
--- a/app/assets/stylesheets/message.scss
+++ b/app/assets/stylesheets/message.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .message {
   display: flex;
diff --git a/app/assets/stylesheets/messagerie.scss b/app/assets/stylesheets/messagerie.scss
index ded8156aa..58e6a0518 100644
--- a/app/assets/stylesheets/messagerie.scss
+++ b/app/assets/stylesheets/messagerie.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .messages-list {
   max-height: 350px;
@@ -23,7 +23,7 @@
     margin-bottom: $default-spacer;
   }
 
-  .form input[type="file"] {
+  .form input[type='file'] {
     margin-bottom: 0;
   }
 }
diff --git a/app/assets/stylesheets/motivation.scss b/app/assets/stylesheets/motivation.scss
index a9199e682..caf904150 100644
--- a/app/assets/stylesheets/motivation.scss
+++ b/app/assets/stylesheets/motivation.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .motivation {
   width: 450px;
diff --git a/app/assets/stylesheets/new_alert.scss b/app/assets/stylesheets/new_alert.scss
index 6ab745363..5fc14fff0 100644
--- a/app/assets/stylesheets/new_alert.scss
+++ b/app/assets/stylesheets/new_alert.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .alert {
   padding: 15px;
@@ -8,10 +8,10 @@
 
 .alert-danger {
   background-color: $medium-red;
-  color: #FFFFFF;
+  color: #ffffff;
 
   a {
-    color: #FFFFFF;
+    color: #ffffff;
   }
 }
 
diff --git a/app/assets/stylesheets/new_footer.scss b/app/assets/stylesheets/new_footer.scss
index 68cfeffba..656cb0e1f 100644
--- a/app/assets/stylesheets/new_footer.scss
+++ b/app/assets/stylesheets/new_footer.scss
@@ -1,4 +1,4 @@
-@import "mixins";
+@import 'mixins';
 
 .landing-footer {
   @include vertical-padding(72px);
diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss
index 77f4bff98..62804bdcf 100644
--- a/app/assets/stylesheets/new_header.scss
+++ b/app/assets/stylesheets/new_header.scss
@@ -27,7 +27,12 @@
   }
 
   // Add space between button edge and content
-  .fr-container .fr-header__menu-links .fr-btns-group.flex.align-center .fr-translate.fr-nav .fr-nav__item .fr-translate__btn.fr-btn {
+  .fr-container
+    .fr-header__menu-links
+    .fr-btns-group.flex.align-center
+    .fr-translate.fr-nav
+    .fr-nav__item
+    .fr-translate__btn.fr-btn {
     margin-right: 0;
     margin-left: 0;
     padding-right: 0.5rem;
diff --git a/app/assets/stylesheets/pagination.scss b/app/assets/stylesheets/pagination.scss
index 464ed74ab..b9faa9bf4 100644
--- a/app/assets/stylesheets/pagination.scss
+++ b/app/assets/stylesheets/pagination.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .pagination {
   text-align: center;
diff --git a/app/assets/stylesheets/password_complexity.scss b/app/assets/stylesheets/password_complexity.scss
index ee521b0b3..6e68056ce 100644
--- a/app/assets/stylesheets/password_complexity.scss
+++ b/app/assets/stylesheets/password_complexity.scss
@@ -1,11 +1,11 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
-$complexity-bg: #EEEEEE;
+$complexity-bg: #eeeeee;
 $complexity-color-0: $lighter-red;
-$complexity-color-1: #FF5000;
+$complexity-color-1: #ff5000;
 $complexity-color-2: $orange;
-$complexity-color-3: #FFD000;
+$complexity-color-3: #ffd000;
 $complexity-color-4: $green;
 
 .password-complexity {
@@ -17,19 +17,35 @@ $complexity-color-4: $green;
   border-radius: 8px;
 
   &.complexity-0 {
-    background: linear-gradient(to right, $complexity-color-0 00%, $complexity-bg 20%);
+    background: linear-gradient(
+      to right,
+      $complexity-color-0 00%,
+      $complexity-bg 20%
+    );
   }
 
   &.complexity-1 {
-    background: linear-gradient(to right, $complexity-color-1 20%, $complexity-bg 40%);
+    background: linear-gradient(
+      to right,
+      $complexity-color-1 20%,
+      $complexity-bg 40%
+    );
   }
 
   &.complexity-2 {
-    background: linear-gradient(to right, $complexity-color-2 40%, $complexity-bg 60%);
+    background: linear-gradient(
+      to right,
+      $complexity-color-2 40%,
+      $complexity-bg 60%
+    );
   }
 
   &.complexity-3 {
-    background: linear-gradient(to right, $complexity-color-3 60%, $complexity-bg 80%);
+    background: linear-gradient(
+      to right,
+      $complexity-color-3 60%,
+      $complexity-bg 80%
+    );
   }
 
   &.complexity-4 {
diff --git a/app/assets/stylesheets/patron.scss b/app/assets/stylesheets/patron.scss
index 22f745a69..148340966 100644
--- a/app/assets/stylesheets/patron.scss
+++ b/app/assets/stylesheets/patron.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 .patron {
   .patron-section {
diff --git a/app/assets/stylesheets/personnes_impliquees.scss b/app/assets/stylesheets/personnes_impliquees.scss
index 42f3d07f8..ec404fcb0 100644
--- a/app/assets/stylesheets/personnes_impliquees.scss
+++ b/app/assets/stylesheets/personnes_impliquees.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 .personnes-impliquees {
   padding-bottom: 50px;
diff --git a/app/assets/stylesheets/pole_emploi.scss b/app/assets/stylesheets/pole_emploi.scss
index c51ee0103..9a09dfa3d 100644
--- a/app/assets/stylesheets/pole_emploi.scss
+++ b/app/assets/stylesheets/pole_emploi.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "colors";
+@import 'constants';
+@import 'colors';
 
 table.pole-emploi {
   margin: 2 * $default-padding 0 $default-padding $default-padding;
@@ -7,7 +7,7 @@ table.pole-emploi {
 
   caption {
     font-weight: bold;
-    margin-left: - $default-padding;
+    margin-left: -$default-padding;
     margin-bottom: $default-spacer;
     text-align: left;
   }
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index ec327f818..4997c6825 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import 'colors';
 
 @media print {
   .new-header,
@@ -16,7 +16,7 @@
   }
 
   body {
-    font-family: "Marianne";
+    font-family: 'Marianne';
   }
 
   .subtitle {
diff --git a/app/assets/stylesheets/procedure_admin.scss b/app/assets/stylesheets/procedure_admin.scss
index 47b8a0d6c..39f18528a 100644
--- a/app/assets/stylesheets/procedure_admin.scss
+++ b/app/assets/stylesheets/procedure_admin.scss
@@ -29,5 +29,4 @@
   li {
     font-size: 14px;
   }
-
 }
diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss
index 0423a6faf..ab4db4560 100644
--- a/app/assets/stylesheets/procedure_champs_editor.scss
+++ b/app/assets/stylesheets/procedure_champs_editor.scss
@@ -1,6 +1,6 @@
-@import "colors";
-@import "constants";
-@import "placeholders";
+@import 'colors';
+@import 'constants';
+@import 'placeholders';
 
 .types-de-champ-editor {
   > .types-de-champ-block {
@@ -108,7 +108,7 @@
 
     a {
       // Remove the icon indicating an external link (for less visual noise)
-      &[target="_blank"]::after {
+      &[target='_blank']::after {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/procedure_context.scss b/app/assets/stylesheets/procedure_context.scss
index 589e2b4bb..a07e39e37 100644
--- a/app/assets/stylesheets/procedure_context.scss
+++ b/app/assets/stylesheets/procedure_context.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 $procedure-context-breakpoint: $two-columns-breakpoint;
 
@@ -37,7 +37,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
       html[data-fr-theme='dark'] & {
         box-sizing: content-box;
         padding: $default-padding / 2;
-        background: #FFFFFF;
+        background: #ffffff;
       }
 
       @media (min-width: $procedure-context-breakpoint) {
@@ -49,7 +49,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
 
 .procedure-context-content {
   @media (max-width: $procedure-context-breakpoint) {
-    input[type=submit] {
+    input[type='submit'] {
       margin-bottom: 2 * $default-padding;
     }
   }
diff --git a/app/assets/stylesheets/procedure_form.scss b/app/assets/stylesheets/procedure_form.scss
index 94ebefecd..3e3b2e0a6 100644
--- a/app/assets/stylesheets/procedure_form.scss
+++ b/app/assets/stylesheets/procedure_form.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .procedure-form .page-title {
   text-align: left;
@@ -21,7 +21,7 @@
   flex: 10;
   padding: 0 $default-padding;
 
-  input[type=file] {
+  input[type='file'] {
     background-color: transparent; // Remove white bg set by DSFR
   }
 
@@ -64,7 +64,7 @@
   }
 }
 
-[data-fr-theme="dark"] .procedure-form__actions {
+[data-fr-theme='dark'] .procedure-form__actions {
   background: var(--background-action-low-blue-france);
   border-top: 1px solid var(--background-action-low-blue-france-hover);
 }
diff --git a/app/assets/stylesheets/procedure_list.scss b/app/assets/stylesheets/procedure_list.scss
index 3fa1094d2..d677f11cf 100644
--- a/app/assets/stylesheets/procedure_list.scss
+++ b/app/assets/stylesheets/procedure_list.scss
@@ -1,6 +1,6 @@
-@import "colors";
-@import "constants";
-@import "mixins";
+@import 'colors';
+@import 'constants';
+@import 'mixins';
 
 .procedure-list {
   .procedure-logo-link {
@@ -16,7 +16,6 @@
     background-position: 95% 50%;
   }
 
-
   .procedure-stats {
     list-style-type: none;
     padding-inline-start: 0;
@@ -36,7 +35,6 @@
         background-color: rgba(0, 0, 0, 0.05);
       }
 
-
       .stats-number,
       .stats-legend {
         text-align: center;
diff --git a/app/assets/stylesheets/procedure_logo.scss b/app/assets/stylesheets/procedure_logo.scss
index 073e9c78f..bf709a613 100644
--- a/app/assets/stylesheets/procedure_logo.scss
+++ b/app/assets/stylesheets/procedure_logo.scss
@@ -1,11 +1,11 @@
-@import "colors";
-@import "constants";
-@import "mixins";
+@import 'colors';
+@import 'constants';
+@import 'mixins';
 
 .procedure-logo {
   @include ie-compatible-background-image();
 
-  background-color: #FFFFFF; // also in dark mode: logos assume transparent pixels are white
+  background-color: #ffffff; // also in dark mode: logos assume transparent pixels are white
   background-position: 95% 50%;
   color: #000000; // alt text when image is not loaded
   height: 84px;
diff --git a/app/assets/stylesheets/procedure_show.scss b/app/assets/stylesheets/procedure_show.scss
index bc3ec8730..84ed620fb 100644
--- a/app/assets/stylesheets/procedure_show.scss
+++ b/app/assets/stylesheets/procedure_show.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .procedure-header {
   a.header-link {
@@ -33,7 +33,7 @@
     padding-right: 10px;
     background-color: $light-blue;
     border-radius: 4px;
-    color: #FFFFFF;
+    color: #ffffff;
     height: 36px;
     line-height: 36px;
   }
diff --git a/app/assets/stylesheets/profil.scss b/app/assets/stylesheets/profil.scss
index 1a3abdeb9..a7a385e9c 100644
--- a/app/assets/stylesheets/profil.scss
+++ b/app/assets/stylesheets/profil.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 #profil-page {
   b {
diff --git a/app/assets/stylesheets/rich_text.scss b/app/assets/stylesheets/rich_text.scss
index 5b6d2e359..f851d75cf 100644
--- a/app/assets/stylesheets/rich_text.scss
+++ b/app/assets/stylesheets/rich_text.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .rich-text:not(.piece_justificative):not(.titre_identite) {
   i {
diff --git a/app/assets/stylesheets/routing_rules_component.scss b/app/assets/stylesheets/routing_rules_component.scss
index ca5985cd3..7b2efbb6e 100644
--- a/app/assets/stylesheets/routing_rules_component.scss
+++ b/app/assets/stylesheets/routing_rules_component.scss
@@ -1,8 +1,7 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 #routing-rules {
-
   .routing-rules-table {
     table-layout: fixed;
 
@@ -39,7 +38,6 @@
   th {
     text-align: left;
     padding: $default-spacer;
-
   }
 
   td {
@@ -50,7 +48,7 @@
       margin-bottom: 0;
     }
 
-    input[type=text] {
+    input[type='text'] {
       display: inline-block;
       margin-bottom: 0;
     }
diff --git a/app/assets/stylesheets/sections.scss b/app/assets/stylesheets/sections.scss
index 7b08a1c26..8d44c8465 100644
--- a/app/assets/stylesheets/sections.scss
+++ b/app/assets/stylesheets/sections.scss
@@ -31,32 +31,34 @@
 
   .header-section.section-2::before {
     counter-increment: h2;
-    content: counter(h2) ". ";
+    content: counter(h2) '. ';
   }
 
   .header-section.section-3::before {
     counter-increment: h3;
-    content: counter(h2) "." counter(h3) ". ";
+    content: counter(h2) '.' counter(h3) '. ';
   }
 
   .header-section.section-4::before {
     counter-increment: h4;
-    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
+    content: counter(h2) '.' counter(h3) '.' counter(h4) '. ';
   }
 
   .header-section.section-5::before {
     counter-increment: h5;
-    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
+    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '. ';
   }
 
   .header-section.section-6::before {
     counter-increment: h6;
-    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
+    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.'
+      counter(h6) '. ';
   }
 
   .header-section.section-7::before {
     counter-increment: h7;
-    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". ";
+    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.'
+      counter(h6) '.' counter(h7) '. ';
   }
 
   .repetition {
diff --git a/app/assets/stylesheets/services_index.scss b/app/assets/stylesheets/services_index.scss
index 840be9ff3..73e97f9ea 100644
--- a/app/assets/stylesheets/services_index.scss
+++ b/app/assets/stylesheets/services_index.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 #services-index {
   h1 {
diff --git a/app/assets/stylesheets/site_banner.scss b/app/assets/stylesheets/site_banner.scss
index 6b4448781..47813ceb7 100644
--- a/app/assets/stylesheets/site_banner.scss
+++ b/app/assets/stylesheets/site_banner.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .site-banner {
   width: 100%;
diff --git a/app/assets/stylesheets/spinner.scss b/app/assets/stylesheets/spinner.scss
index d0be31b8a..1d2f6d8cb 100644
--- a/app/assets/stylesheets/spinner.scss
+++ b/app/assets/stylesheets/spinner.scss
@@ -2,7 +2,7 @@
   vertical-align: middle;
 
   &::before {
-    content: "";
+    content: '';
     display: inline-block;
     width: 1.5rem;
     height: 1.5rem;
diff --git a/app/assets/stylesheets/status_overview.scss b/app/assets/stylesheets/status_overview.scss
index 088885146..2c85570e0 100644
--- a/app/assets/stylesheets/status_overview.scss
+++ b/app/assets/stylesheets/status_overview.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .status-timeline {
   display: inline-block;
@@ -29,7 +29,7 @@
 
     // Arrows
     &:not(:last-child)::after {
-      content: "▸";
+      content: '▸';
       display: inline-block;
       margin-left: 10px;
       margin-right: 10px;
@@ -59,7 +59,7 @@
   }
 
   blockquote {
-    quotes: "« " " »" "‘" "’";
+    quotes: '« ' ' »' '‘' '’';
     margin-bottom: $default-padding * 3;
   }
 
diff --git a/app/assets/stylesheets/sticky.scss b/app/assets/stylesheets/sticky.scss
index c9920a4ff..3600e41c7 100644
--- a/app/assets/stylesheets/sticky.scss
+++ b/app/assets/stylesheets/sticky.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .fixed-footer {
   border-top: 2px solid var(--border-plain-blue-france);
@@ -23,7 +23,7 @@
   }
 }
 
-[data-fr-theme="dark"] .fixed-footer {
+[data-fr-theme='dark'] .fixed-footer {
   background-color: var(--background-action-low-blue-france);
 }
 
diff --git a/app/assets/stylesheets/sub_header.scss b/app/assets/stylesheets/sub_header.scss
index 533ae2138..70c9fb1bd 100644
--- a/app/assets/stylesheets/sub_header.scss
+++ b/app/assets/stylesheets/sub_header.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 .sub-header {
   background-color: var(--background-alt-blue-france);
diff --git a/app/assets/stylesheets/super_admin.scss b/app/assets/stylesheets/super_admin.scss
index 949f1aa4d..302e57639 100644
--- a/app/assets/stylesheets/super_admin.scss
+++ b/app/assets/stylesheets/super_admin.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .super-admin {
   margin-top: 40px;
diff --git a/app/assets/stylesheets/table.scss b/app/assets/stylesheets/table.scss
index aef1079e6..8a22ede37 100644
--- a/app/assets/stylesheets/table.scss
+++ b/app/assets/stylesheets/table.scss
@@ -1,8 +1,9 @@
-@import "colors";
-@import "constants";
-@import "mixins";
+@import 'colors';
+@import 'constants';
+@import 'mixins';
 
-.table { // TODO : tester de remplacer par l'élément table uniquement
+.table {
+  // TODO : tester de remplacer par l'élément table uniquement
   width: 100%;
 
   tbody tr {
@@ -10,7 +11,7 @@
   }
 
   td,
-  th[scope="row"] {
+  th[scope='row'] {
     @include vertical-padding($default-spacer);
     vertical-align: middle;
   }
diff --git a/app/assets/stylesheets/tags.scss b/app/assets/stylesheets/tags.scss
index 5d45bfb1e..6dc4c668a 100644
--- a/app/assets/stylesheets/tags.scss
+++ b/app/assets/stylesheets/tags.scss
@@ -1,30 +1,22 @@
-@import "colors";
-@import "constants";
-
-$colors: "green-tilleul-verveine",
-         "green-bourgeon",
-         "green-emeraude",
-         "green-menthe",
-         "blue-ecume",
-         "purple-glycine",
-         "pink-macaron",
-         "yellow-tournesol",
-         "brown-cafe-creme",
-         "beige-gris-galet";
+@import 'colors';
+@import 'constants';
 
+$colors: 'green-tilleul-verveine', 'green-bourgeon', 'green-emeraude',
+  'green-menthe', 'blue-ecume', 'purple-glycine', 'pink-macaron',
+  'yellow-tournesol', 'brown-cafe-creme', 'beige-gris-galet';
 
 @each $color in $colors {
   .fr-tag--#{$color},
-    a.fr-tag--#{$color},
-    button.fr-tag--#{$color},
-    input[type=button].fr-tag--#{$color},
-    input[type=image].fr-tag--#{$color},
-    input[type=reset].fr-tag--#{$color},
-    input[type=submit].fr-tag--#{$color} {
+  a.fr-tag--#{$color},
+  button.fr-tag--#{$color},
+  input[type='button'].fr-tag--#{$color},
+  input[type='image'].fr-tag--#{$color},
+  input[type='reset'].fr-tag--#{$color},
+  input[type='submit'].fr-tag--#{$color} {
     --idle: transparent;
     --hover: var(--background-action-low-#{$color}-hover);
     --active: var(--background-action-low-#{$color}-active);
     background-color: var(--background-action-low-#{$color});
     color: var(--text-action-high-#{$color});
-    }
+  }
 }
diff --git a/app/assets/stylesheets/tiptap_editor.scss b/app/assets/stylesheets/tiptap_editor.scss
index 9682989e5..a7a7497bd 100644
--- a/app/assets/stylesheets/tiptap_editor.scss
+++ b/app/assets/stylesheets/tiptap_editor.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .tiptap-editor {
   // Tags
diff --git a/app/assets/stylesheets/title.scss b/app/assets/stylesheets/title.scss
index d02120e2f..761ee51e1 100644
--- a/app/assets/stylesheets/title.scss
+++ b/app/assets/stylesheets/title.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .huge-title {
   text-align: center;
diff --git a/app/assets/stylesheets/toggle-switch.scss b/app/assets/stylesheets/toggle-switch.scss
index e25a5390d..bf1b6a73d 100644
--- a/app/assets/stylesheets/toggle-switch.scss
+++ b/app/assets/stylesheets/toggle-switch.scss
@@ -1,5 +1,5 @@
-@import "colors";
-@import "constants";
+@import 'colors';
+@import 'constants';
 
 // Toggle-switch
 // The switch - the box around
@@ -22,7 +22,7 @@
 }
 
 // Hide default HTML checkbox
-.form label.toggle-switch input[type="checkbox"] {
+.form label.toggle-switch input[type='checkbox'] {
   opacity: 0;
   width: 0;
   height: 0;
@@ -45,7 +45,7 @@
 
 .toggle-switch-control::before {
   position: absolute;
-  content: "";
+  content: '';
   height: 20px;
   width: 20px;
   left: 1px;
diff --git a/package.json b/package.json
index 46fe9e104..c3ac81a91 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript",
     "lint:types": "tsc",
     "lint:css": "prettier app/assets/stylesheets --check",
+    "lint:css:fix": "prettier app/assets/stylesheets --write",
     "graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml",
     "postinstall": "patch-package",
     "test": "vitest",