diff --git a/ds-ml-css/components/accordion.scss b/ds-ml-css/components/accordion.scss
index 09dafd52cf9c1f1fada243994cdfd2a527217d66..e41c62f11a980eadd4d0d901d08fe99618bddd1e 100644
--- a/ds-ml-css/components/accordion.scss
+++ b/ds-ml-css/components/accordion.scss
@@ -1,42 +1,48 @@
-/* ********************************************************************************************* */
-/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
-/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
-/* ********************************************************************************************* */
+details.accordion {
 
-/* accordion CSS rules */
-.accordion-btn {
-  border: none;
-  border-top: solid var(--ml-neutral) 2px;
-  border-bottom: transparent solid 2px;
-  background-color: var(--ml-background);
-  cursor: pointer;
-  padding: 18px;
-  width: 100%;
-  text-align: left;
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 2px solid var(--ml-border-accent-primary);
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    padding: 18px;
+  }
+
+  summary::after {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 0.2s ease-in-out;
+    margin-top: 2px;
+    flex-shrink: 0;
+  }
+
+  summary:hover {
+    background-color: var(--ml-background-button-secondary-hover);
+  }
 }
 
-.accordion-btn:last-of-type {
-  border-bottom: solid var(--ml-neutral) 2px;
+details.accordion:last-of-type summary {
+  border-bottom-color: var(--ml-border-accent-primary);
 }
 
-.accordion-btn:hover {
-  background-color: var(--ml-m200);
-  border: none;
-  border-top: transparent solid 2px;
-  border-bottom: transparent solid 2px;
+details.accordion[open] summary::after {
+  transform: rotate(-135deg);
 }
 
-.accordion-btn.expanded {
-  background-color: var(--ml-m400);
-  border: none;
-  border-top: transparent solid 2px;
-  border-bottom: transparent solid 2px;
+details.accordion[open] summary {
+  background-color: var(--ml-background-button-secondary);
 }
 
-.accordion-panel {
-  margin: 10px 18px;
-  padding: 0 5px;
-  background-color: var(--ml-neutral);
-  display: none;
+details.accordion > div:first-of-type {
+  margin: 16px;
+  padding: 0 8px;
+  background-color: var(--ml-background-accent-secondary);
   overflow: hidden;
 }
diff --git a/ds-ml-css/ds-ml-theme.scss b/ds-ml-css/ds-ml-theme.scss
index d479217dd0f62e1ebd4bed15f8d1d29db0817cd9..2de379284b5c681aa6cb64c75d0fc42f65c3902d 100644
--- a/ds-ml-css/ds-ml-theme.scss
+++ b/ds-ml-css/ds-ml-theme.scss
@@ -8,12 +8,18 @@ body.theme-purple.light {
   --ml-text-button-secondary-hover: #422c7e;
   --ml-text-button-secondary-disabled: #c1c7d0;
 
+  --ml-border-accent-primary: #ebecf0;
+  --ml-border-accent-secondary: #f4f5f7;
+  --ml-border-accent-tertiary: #fafbfc;
+
   --ml-border-button-primary: #744ddd;
   --ml-border-button-primary-hover: #422c7e;
-  --ml-border-button-secondary: #744ddd; //#1B1C22; // bug dans couleurs maquette
+  --ml-border-button-secondary: #744ddd; //#1b1c22; // bug dans couleurs maquette
   --ml-border-button-secondary-hover: #744ddd; //#353A47; // bug dans couleurs maquette
   --ml-border-button-disabled: #c1c7d0;
 
+  --ml-background-accent-secondary: #dfe1e6;
+
   --ml-background-button-primary: #744ddd;
   --ml-background-button-primary-hover: #422c7e;
   --ml-background-button-primary-disabled: #ebecf0;
@@ -34,12 +40,18 @@ body.theme-purple.dark {
   --ml-text-button-secondary-hover: #ddd0ff;
   --ml-text-button-secondary-disabled: #4f5561;
 
+  --ml-border-accent-primary: #576377;
+  --ml-border-accent-secondary: #4f5561;
+  --ml-border-accent-tertiary: #353a47;
+
   --ml-border-button-primary: #b79dff;
-  --ml-border-button-primary-hover: #744ddd; //#DDD0FF; // bug dans couleurs maquette
-  --ml-border-button-secondary: #b79dff; //#FFFFFF; // bug dans couleurs maquette
-  --ml-border-button-secondary-hover: #ddd0ff; //#DFE1E6; // bug dans couleurs maquette
+  --ml-border-button-primary-hover: #744ddd; //#ddd0ff; // bug dans couleurs maquette
+  --ml-border-button-secondary: #b79dff; //#ffffff; // bug dans couleurs maquette
+  --ml-border-button-secondary-hover: #ddd0ff; //#dfe1e6; // bug dans couleurs maquette
   --ml-border-button-disabled: #4f5561;
 
+  --ml-background-accent-secondary: #4f5561;
+
   --ml-background-button-primary: #b79dff;
   --ml-background-button-primary-hover: #744ddd;
   --ml-background-button-primary-disabled: #353a47;
@@ -61,12 +73,18 @@ body.theme-red.light {
   --ml-text-button-secondary-hover: #b50028;
   --ml-text-button-secondary-disabled: #c1c7d0;
 
+  --ml-border-accent-primary: #ebecf0;
+  --ml-border-accent-secondary: #f4f5f7;
+  --ml-border-accent-tertiary: #fafbfc;
+
   --ml-border-button-primary: #e60028;
   --ml-border-button-primary-hover: #b50028;
   --ml-border-button-secondary: #e60028;
   --ml-border-button-secondary-hover: #e60028;
   --ml-border-button-disabled: #c1c7d0;
 
+  --ml-background-accent-secondary: #dfe1e6;
+
   --ml-background-button-primary: #e60028;
   --ml-background-button-primary-hover: #b50028;
   --ml-background-button-primary-disabled: #ffedf0;
@@ -87,12 +105,18 @@ body.theme-red.dark {
   --ml-text-button-secondary-hover: #fe8896;
   --ml-text-button-secondary-disabled: #c1c7d0;
 
+  --ml-border-accent-primary: #ebecf0;
+  --ml-border-accent-secondary: #f4f5f7;
+  --ml-border-accent-tertiary: #fafbfc;
+
   --ml-border-button-primary: #fe8896;
   --ml-border-button-primary-hover: #e60028;
   --ml-border-button-secondary: #fe8896;
   --ml-border-button-secondary-hover: #fe8896;
   --ml-border-button-disabled: #c1c7d0;
 
+  --ml-background-accent-secondary: #4f5561;
+
   --ml-background-button-primary: #fe8896;
   --ml-background-button-primary-hover: #e60028;
   --ml-background-button-primary-disabled: #353a47;