From 9033821014f99ea2a24de11f9a58f64c8d858e7e Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 13:59:14 +0200
Subject: [PATCH 01/37] chore(client): :arrow_up: Upgrade patch dependencies

---
 yarn.lock | 47 +++++++++++++++++++++--------------------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9faa844868..5de18566c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -461,9 +461,9 @@
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
 "@codegouvfr/react-dsfr@^1.9.11":
-  version "1.9.20"
-  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.9.20.tgz#6c495d55140cbebf506cae983b601c846303ae61"
-  integrity sha512-Q4W4K0ZZZtC5ogVmrNXGTkbkeordoNGHVl+w1Msz3zLwk5FZNVZt+/lAaeKZ/j+4rMbVzAEB9ggQe4FohSBnag==
+  version "1.9.23"
+  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.9.23.tgz#a7892212f3b7f1b6c94f05e65ac5311cc4b15f87"
+  integrity sha512-afdSWAYpKqpLyI48m8wg6dJIJWMWtH1POFF5EwDoXOxchzIaJtaur2FPZxd0Q6HLWazp/L36j+ic0B50RN/y6w==
   dependencies:
     tsafe "^1.6.3"
     yargs-parser "^21.1.1"
@@ -2002,12 +2002,7 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/lodash@^4.14.151":
-  version "4.17.5"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz"
-  integrity sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==
-
-"@types/lodash@^4.14.165":
+"@types/lodash@^4.14.151", "@types/lodash@^4.14.165":
   version "4.17.6"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543"
   integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA==
@@ -7665,7 +7660,7 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.0.0, postcss@^8.4.35:
+postcss@^8.0.0, postcss@^8.4.35, postcss@^8.4.5:
   version "8.4.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
   integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
@@ -7674,15 +7669,6 @@ postcss@^8.0.0, postcss@^8.4.35:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-postcss@^8.4.5:
-  version "8.4.38"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.2.0"
-
 prebuild-install@^7.1.1:
   version "7.1.2"
   resolved "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz"
@@ -8052,9 +8038,9 @@ react-google-autocomplete@^2.6.1:
     prop-types "^15.5.0"
 
 react-hook-form@^7.43.1:
-  version "7.52.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.0.tgz#e52b33043e283719586b9dd80f6d51b68dd3999c"
-  integrity sha512-mJX506Xc6mirzLsmXUJyqlAI3Kj9Ph2RhplYhUVffeOQSnubK2uVqBFOBJmvKikvbFV91pxVXmDiR+QMF19x6A==
+  version "7.52.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.1.tgz#ec2c96437b977f8b89ae2d541a70736c66284852"
+  integrity sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==
 
 react-i18next@^12.0.0:
   version "12.3.1"
@@ -8563,7 +8549,16 @@ saslprep@^1.0.3:
   dependencies:
     sparse-bitfield "^3.0.3"
 
-sass@^1.57.1, sass@^1.70.0:
+sass@^1.57.1:
+  version "1.77.7"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.7.tgz#ef3520edc8f59da089f25891d8a6bebf93668ee0"
+  integrity sha512-9ywH75cO+rLjbrZ6en3Gp8qAMwPGBapFtlsMJoDTkcMU/bSe5a6cjKVUn5Jr4Gzg5GbP3HE8cm+02pLCgcoMow==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+sass@^1.70.0:
   version "1.77.6"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
   integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
@@ -9249,9 +9244,9 @@ supports-preserve-symlinks-flag@^1.0.0:
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 sweetalert2@^11.6.16:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.12.0.tgz#a3039c537b2193161e8effcd09fdc83cd6a6d817"
-  integrity sha512-Fe6sitTNReNdPF1q1w4uz1GAVv9acZff9Q7YILH5n6O/ti3MzwgfEA0aQ6tLjpy+O1NLXnZjUE//xrbluGXzJw==
+  version "11.12.2"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.12.2.tgz#3430b6bd66f732ae6c36b19ff965da5b01b1e3fd"
+  integrity sha512-Rwv5iRYlApkDSXeX22aLhhWMlWPzFxnNBVLZajkFKYhaVEfQkMOPQQRhBtSFxKBPCoko9U3SccWm9hI4o3Id0Q==
 
 symbol-tree@^3.2.4:
   version "3.2.4"

From 975e9503e040708fa4f38818ac0afcbbd6c2fdd8 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:00:00 +0200
Subject: [PATCH 02/37] chore(server): :arrow_up: Upgrade patch dependencies

---
 yarn.lock | 210 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 118 insertions(+), 92 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5de18566c4..cac0a83c2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1322,7 +1322,7 @@
 
 "@mongodb-js/saslprep@^1.1.5":
   version "1.1.7"
-  resolved "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.7.tgz"
+  resolved "https://registry.yarnpkg.com/@mongodb-js/saslprep/-/saslprep-1.1.7.tgz#d1700facfd6916c50c2c88fd6d48d363a56c702f"
   integrity sha512-dCHW/oEX0KJ4NjDULBo3JiOaK5+6axtpBbS+ao2ZInoAL9/YRQLhXzSNAFz7hP4nzLkIqsfYAK/PDE3+XHny0Q==
   dependencies:
     sparse-bitfield "^3.0.3"
@@ -1393,7 +1393,7 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
@@ -1401,7 +1401,7 @@
 
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
@@ -1728,15 +1728,15 @@
     validator "^13.11.0"
 
 "@typegoose/typegoose@^12.0.0":
-  version "12.5.0"
-  resolved "https://registry.npmjs.org/@typegoose/typegoose/-/typegoose-12.5.0.tgz"
-  integrity sha512-+2ucXC89PrlPUIw/204X5+fjRDHfAXqdH5V40H1W1GcFA2G6yTi6eU22EO3Uq0nRyQyO9keFCzjcoQXUMJOvBQ==
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/@typegoose/typegoose/-/typegoose-12.6.0.tgz#49e5169b3a98434568383313774bbabd0c509c53"
+  integrity sha512-CUhJaQ6krTYH6y4ZzxShEYu2IltlK5o/gWLp56gTozQvk6BU7g7NNZlBWpBW625LSgSQgae/JqjnBwmgQrIQig==
   dependencies:
     lodash "^4.17.20"
     loglevel "^1.9.1"
     reflect-metadata "^0.2.2"
     semver "^7.6.2"
-    tslib "^2.6.2"
+    tslib "^2.6.3"
 
 "@types/accepts@*":
   version "1.3.7"
@@ -2045,7 +2045,14 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@>=13.7.0", "@types/node@^20.14.9":
+"@types/node@*", "@types/node@^20.14.9":
+  version "20.14.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.10.tgz#a1a218290f1b6428682e3af044785e5874db469a"
+  integrity sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@types/node@>=13.7.0":
   version "20.14.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.9.tgz#12e8e765ab27f8c421a1820c99f5f313a933b420"
   integrity sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==
@@ -2309,15 +2316,15 @@
     tsutils "^3.21.0"
 
 "@typescript-eslint/eslint-plugin@^7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.15.0.tgz#8eaf396ac2992d2b8f874b68eb3fcd6b179cb7f3"
-  integrity sha512-uiNHpyjZtFrLwLDpHnzaDlP3Tt6sGMqTCiqmxaN4n4RP0EfYZDODJyddiFDF44Hjwxr5xAcaYxVKm9QKQFJFLA==
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.0.tgz#b3563927341eca15124a18c6f94215f779f5c02a"
+  integrity sha512-py1miT6iQpJcs1BiJjm54AMzeuMPBSPuKPlnT8HlfudbcS5rYeX5jajpLf3mrdRh9dA/Ec2FVUY0ifeVNDIhZw==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "7.15.0"
-    "@typescript-eslint/type-utils" "7.15.0"
-    "@typescript-eslint/utils" "7.15.0"
-    "@typescript-eslint/visitor-keys" "7.15.0"
+    "@typescript-eslint/scope-manager" "7.16.0"
+    "@typescript-eslint/type-utils" "7.16.0"
+    "@typescript-eslint/utils" "7.16.0"
+    "@typescript-eslint/visitor-keys" "7.16.0"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
@@ -2345,14 +2352,14 @@
     debug "^4.3.4"
 
 "@typescript-eslint/parser@^7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.15.0.tgz#f4a536e5fc6a1c05c82c4d263a2bfad2da235c80"
-  integrity sha512-k9fYuQNnypLFcqORNClRykkGOMOj+pV6V91R4GO/l1FDGwpqmSwoOQrOHo3cGaH63e+D3ZiCAOsuS/D2c99j/A==
-  dependencies:
-    "@typescript-eslint/scope-manager" "7.15.0"
-    "@typescript-eslint/types" "7.15.0"
-    "@typescript-eslint/typescript-estree" "7.15.0"
-    "@typescript-eslint/visitor-keys" "7.15.0"
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.16.0.tgz#53fae8112f8c912024aea7b499cf7374487af6d8"
+  integrity sha512-ar9E+k7CU8rWi2e5ErzQiC93KKEFAXA2Kky0scAlPcxYblLt8+XZuHUZwlyfXILyQa95P6lQg+eZgh/dDs3+Vw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.16.0"
+    "@typescript-eslint/types" "7.16.0"
+    "@typescript-eslint/typescript-estree" "7.16.0"
+    "@typescript-eslint/visitor-keys" "7.16.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
@@ -2363,13 +2370,13 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.15.0.tgz#201b34b0720be8b1447df17b963941bf044999b2"
-  integrity sha512-Q/1yrF/XbxOTvttNVPihxh1b9fxamjEoz2Os/Pe38OHwxC24CyCqXxGTOdpb4lt6HYtqw9HetA/Rf6gDGaMPlw==
+"@typescript-eslint/scope-manager@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.16.0.tgz#eb0757af5720c9c53c8010d7a0355ae27e17b7e5"
+  integrity sha512-8gVv3kW6n01Q6TrI1cmTZ9YMFi3ucDT7i7aI5lEikk2ebk1AEjrwX8MDTdaX5D7fPXMBLvnsaa0IFTAu+jcfOw==
   dependencies:
-    "@typescript-eslint/types" "7.15.0"
-    "@typescript-eslint/visitor-keys" "7.15.0"
+    "@typescript-eslint/types" "7.16.0"
+    "@typescript-eslint/visitor-keys" "7.16.0"
 
 "@typescript-eslint/scope-manager@7.2.0":
   version "7.2.0"
@@ -2389,13 +2396,13 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.15.0.tgz#5b83c904c6de91802fb399305a50a56d10472c39"
-  integrity sha512-SkgriaeV6PDvpA6253PDVep0qCqgbO1IOBiycjnXsszNTVQe5flN5wR5jiczoEoDEnAqYFSFFc9al9BSGVltkg==
+"@typescript-eslint/type-utils@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.16.0.tgz#ec52b1932b8fb44a15a3e20208e0bd49d0b6bd00"
+  integrity sha512-j0fuUswUjDHfqV/UdW6mLtOQQseORqfdmoBNDFOqs9rvNVR2e+cmu6zJu/Ku4SDuqiJko6YnhwcL8x45r8Oqxg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "7.15.0"
-    "@typescript-eslint/utils" "7.15.0"
+    "@typescript-eslint/typescript-estree" "7.16.0"
+    "@typescript-eslint/utils" "7.16.0"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
@@ -2404,10 +2411,10 @@
   resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.15.0.tgz#fb894373a6e3882cbb37671ffddce44f934f62fc"
-  integrity sha512-aV1+B1+ySXbQH0pLK0rx66I3IkiZNidYobyfn0WFsdGhSXw+P3YOqeTq5GED458SfB24tg+ux3S+9g118hjlTw==
+"@typescript-eslint/types@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.16.0.tgz#60a19d7e7a6b1caa2c06fac860829d162a036ed2"
+  integrity sha512-fecuH15Y+TzlUutvUl9Cc2XJxqdLr7+93SQIbcZfd4XRGGKoxyljK27b+kxKamjRkU7FYC6RrbSCg0ALcZn/xw==
 
 "@typescript-eslint/types@7.2.0":
   version "7.2.0"
@@ -2427,13 +2434,13 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.15.0.tgz#e323bfa3966e1485b638ce751f219fc1f31eba37"
-  integrity sha512-gjyB/rHAopL/XxfmYThQbXbzRMGhZzGw6KpcMbfe8Q3nNQKStpxnUKeXb0KiN/fFDR42Z43szs6rY7eHk0zdGQ==
+"@typescript-eslint/typescript-estree@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.16.0.tgz#98ac779d526fab2a781e5619c9250f3e33867c09"
+  integrity sha512-a5NTvk51ZndFuOLCh5OaJBELYc2O3Zqxfl3Js78VFE1zE46J2AaVuW+rEbVkQznjkmlzWsUI15BG5tQMixzZLw==
   dependencies:
-    "@typescript-eslint/types" "7.15.0"
-    "@typescript-eslint/visitor-keys" "7.15.0"
+    "@typescript-eslint/types" "7.16.0"
+    "@typescript-eslint/visitor-keys" "7.16.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -2469,15 +2476,15 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.15.0.tgz#9e6253c4599b6e7da2fb64ba3f549c73eb8c1960"
-  integrity sha512-hfDMDqaqOqsUVGiEPSMLR/AjTSCsmJwjpKkYQRo1FNbmW4tBwBspYDwO9eh7sKSTwMQgBw9/T4DHudPaqshRWA==
+"@typescript-eslint/utils@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.16.0.tgz#b38dc0ce1778e8182e227c98d91d3418449aa17f"
+  integrity sha512-PqP4kP3hb4r7Jav+NiRCntlVzhxBNWq6ZQ+zQwII1y/G/1gdIPeYDCKr2+dH6049yJQsWZiHU6RlwvIFBXXGNA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "7.15.0"
-    "@typescript-eslint/types" "7.15.0"
-    "@typescript-eslint/typescript-estree" "7.15.0"
+    "@typescript-eslint/scope-manager" "7.16.0"
+    "@typescript-eslint/types" "7.16.0"
+    "@typescript-eslint/typescript-estree" "7.16.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
@@ -2487,12 +2494,12 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.15.0.tgz#1da0726201a859343fe6a05742a7c1792fff5b66"
-  integrity sha512-Hqgy/ETgpt2L5xueA/zHHIl4fJI2O4XUE9l4+OIfbJIRSnTJb/QscncdqqZzofQegIJugRIF57OJea1khw2SDw==
+"@typescript-eslint/visitor-keys@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.0.tgz#a1d99fa7a3787962d6e0efd436575ef840e23b06"
+  integrity sha512-rMo01uPy9C7XxG7AFsxa8zLnWXTF8N3PYclekWSrurvhwiw1eW88mrKiAYe6s53AUY57nTRz8dJsuuXdkAhzCg==
   dependencies:
-    "@typescript-eslint/types" "7.15.0"
+    "@typescript-eslint/types" "7.16.0"
     eslint-visitor-keys "^3.4.3"
 
 "@typescript-eslint/visitor-keys@7.2.0":
@@ -2746,7 +2753,7 @@ array-includes@^3.1.6, array-includes@^3.1.7, array-includes@^3.1.8:
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
 array.prototype.findlast@^1.2.5:
@@ -3089,7 +3096,7 @@ brace-expansion@^1.1.7:
 
 brace-expansion@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
   integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
   dependencies:
     balanced-match "^1.0.0"
@@ -3246,7 +3253,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3919,7 +3926,7 @@ diff@^4.0.1:
 
 dir-glob@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
   integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
   dependencies:
     path-type "^4.0.0"
@@ -4058,6 +4065,13 @@ ee-first@1.1.1:
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
+ejs@^3.0.0:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
+  dependencies:
+    jake "^10.8.5"
+
 electron-to-chromium@^1.4.796:
   version "1.4.801"
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.801.tgz"
@@ -4708,7 +4722,7 @@ fastest-stable-stringify@^2.0.2:
 
 fastq@^1.6.0:
   version "1.17.1"
-  resolved "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
   integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
   dependencies:
     reusify "^1.0.4"
@@ -4732,6 +4746,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+filelist@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
+  integrity sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==
+  dependencies:
+    minimatch "^5.0.1"
+
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -5092,7 +5113,7 @@ globalthis@^1.0.3:
 
 globby@^11.1.0:
   version "11.1.0"
-  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
   dependencies:
     array-union "^2.1.0"
@@ -5151,7 +5172,7 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11,
 
 graphemer@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 gtoken@^7.0.0:
@@ -5448,7 +5469,7 @@ ignore-by-default@^1.0.1:
 
 ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 image-size@~0.5.0:
@@ -5913,6 +5934,16 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jake@^10.8.5:
+  version "10.9.1"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.1.tgz#8dc96b7fcc41cb19aa502af506da4e1d56f5e62b"
+  integrity sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.4"
+    minimatch "^3.1.2"
+
 jest-changed-files@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz"
@@ -6716,7 +6747,7 @@ logform@^2.3.2, logform@^2.4.0:
 
 loglevel@^1.9.1:
   version "1.9.1"
-  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.1.tgz#d63976ac9bcd03c7c873116d41c2a85bafff1be7"
   integrity sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==
 
 long@^5.0.0:
@@ -6817,7 +6848,7 @@ merge-stream@^2.0.0:
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 methods@~1.1.2:
@@ -6827,7 +6858,7 @@ methods@~1.1.2:
 
 micromatch@^4.0.4:
   version "4.0.7"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
   integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
   dependencies:
     braces "^3.0.3"
@@ -6891,6 +6922,13 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^9.0.1:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
@@ -6978,7 +7016,7 @@ mongoose@*:
     ms "2.1.3"
     sift "17.1.3"
 
-mongoose@8.5.0:
+mongoose@8.5.0, mongoose@^8.0.1:
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-8.5.0.tgz#70e5f032225c20ab8819513fd8cb94b7e6a956bb"
   integrity sha512-iGgZvgO+fIgX1AQMehkG+Wj8qrWc9it8vUZrSKWjrebgfwHTqUcIdTgWK8mT1us1xd83NOQxiuGbg9ZJtLxs2Q==
@@ -6991,19 +7029,6 @@ mongoose@8.5.0:
     ms "2.1.3"
     sift "17.1.3"
 
-mongoose@^8.0.1:
-  version "8.4.4"
-  resolved "https://registry.yarnpkg.com/mongoose/-/mongoose-8.4.4.tgz#2a70f47cc69f3b0ad756af6a97484d4fb1835fb3"
-  integrity sha512-Nya808odIJoHP4JuJKbWA2eIaerXieu59kE8pQlvJpUBoSKWUyhLji0g1WMVaYXWmzPYXP2Jd6XdR4KJE8RELw==
-  dependencies:
-    bson "^6.7.0"
-    kareem "2.6.3"
-    mongodb "6.6.2"
-    mpath "0.9.0"
-    mquery "5.0.0"
-    ms "2.1.3"
-    sift "17.1.3"
-
 mpath@0.9.0, mpath@^0.9.0:
   version "0.9.0"
   resolved "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz"
@@ -7071,7 +7096,7 @@ natural-compare-lite@^1.4.0:
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 needle@^3.1.0:
@@ -7547,7 +7572,7 @@ path-type@^1.0.0:
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 performance-now@^2.1.0:
@@ -7866,7 +7891,7 @@ querystringify@^2.1.1:
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 raf@^3.4.0, raf@^3.4.1:
@@ -8472,7 +8497,7 @@ retry@^0.12.0:
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rimraf@^3.0.2:
@@ -8491,7 +8516,7 @@ rtl-css-js@^1.16.1:
 
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
@@ -8805,7 +8830,7 @@ sisteransi@^1.0.5:
 
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 smart-buffer@^4.2.0:
@@ -9455,11 +9480,12 @@ ts-jest@29.0.3:
     yargs-parser "^21.0.1"
 
 ts-jest@^29.1.1:
-  version "29.1.5"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.5.tgz#d6c0471cc78bffa2cb4664a0a6741ef36cfe8f69"
-  integrity sha512-UuClSYxM7byvvYfyWdFI+/2UxMmwNyJb0NPkZPQE2hew3RurV7l7zURgOHAd/1I1ZdPpe3GUsXNXAcN8TFKSIg==
+  version "29.2.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.2.1.tgz#9a460bb27446d141c48a17cf24f060dbe9b58254"
+  integrity sha512-7obwtH5gw0b0XZi0wmprCSvGSvHliMBI47lPnU47vmbxWS6B+v1X94yWFo1f1vt9k/he+gttsrXjkxmgY41XNQ==
   dependencies:
     bs-logger "0.x"
+    ejs "^3.0.0"
     fast-json-stable-stringify "2.x"
     jest-util "^29.0.0"
     json5 "^2.2.3"
@@ -9516,7 +9542,7 @@ tslib@^1.8.1:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2:
+tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.3:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==

From 6ec6076fdd47204aa814787e826cbb3e09790f66 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:31:13 +0200
Subject: [PATCH 03/37] chore(client): :arrow_up: Update lexical

---
 client/package.json                           |   4 +-
 .../ToolbarPlugin/ToolbarPlugin.tsx           |   6 +-
 .../FloatingLinkEditorPlugin/index.tsx        |   3 +-
 yarn.lock                                     | 337 ++++++++++--------
 4 files changed, 199 insertions(+), 151 deletions(-)

diff --git a/client/package.json b/client/package.json
index e3c924526e..01f2530902 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@codegouvfr/react-dsfr": "^1.9.11",
     "@hedgedoc/html-to-react": "^1.4.5",
-    "@lexical/react": "^0.11.0",
+    "@lexical/react": "^0.16.1",
     "@react-google-maps/api": "^2.17.0",
     "@refugies-info/api-types": "*",
     "algoliasearch": "^4.14.2",
@@ -28,7 +28,7 @@
     "i18next": "^22.0.6",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
-    "lexical": "^0.11.0",
+    "lexical": "^0.16.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "^14.2.4",
diff --git a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.tsx b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.tsx
index 673abb1c12..3bb0d6d910 100644
--- a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.tsx
@@ -27,12 +27,12 @@ import {
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
-  DEPRECATED_$isGridSelection,
   FORMAT_TEXT_COMMAND,
   REDO_COMMAND,
   SELECTION_CHANGE_COMMAND,
   UNDO_COMMAND,
 } from "lexical";
+import { $isTableSelection } from "@lexical/table"
 import { cls } from "lib/classname";
 import { $isCalloutNode, INSERT_CALLOUT_COMMAND, REMOVE_CALLOUT_COMMAND } from "../plugins/CalloutPlugin";
 import { CalloutLevel, CalloutNode } from "../plugins/CalloutPlugin/CalloutNode";
@@ -140,7 +140,7 @@ export default function ToolbarPlugin() {
     if (blockType !== "paragraph") {
       editor.update(() => {
         const selection = $getSelection();
-        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
+        if ($isRangeSelection(selection) || $isTableSelection(selection))
           $setBlocksType(selection, () => $createParagraphNode());
       });
     }
@@ -149,7 +149,7 @@ export default function ToolbarPlugin() {
   const formatHeading = () => {
     editor.update(() => {
       const selection = $getSelection();
-      if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+      if ($isRangeSelection(selection) || $isTableSelection(selection)) {
         if (blockType !== "h3") {
           $setBlocksType(selection, () => $createHeadingNode("h3"));
         } else {
diff --git a/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/index.tsx b/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/index.tsx
index a5c6235d51..97051c4b2a 100644
--- a/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/index.tsx
+++ b/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -19,6 +19,7 @@ import {
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
+  TextNode,
 } from "lexical";
 import { cls } from "lib/classname";
 import { sanitizeUrl } from "lib/sanitizeUrl";
@@ -188,7 +189,7 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, initialOpen
     editor.update(() => {
       const node = $getSelection();
       const childTextNode = node?.getNodes()?.[0];
-      if (childTextNode) childTextNode.setTextContent(linkText);
+      if (childTextNode instanceof TextNode) childTextNode.setTextContent(linkText);
       editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: sanitizeUrl(linkUrl), rel: "noreferrer", target: "_blank" });
       setIsModalOpen(false);
       setIsFloatingVisible(false);
diff --git a/yarn.lock b/yarn.lock
index cac0a83c2e..554a941d29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1166,159 +1166,206 @@
   resolved "https://registry.yarnpkg.com/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz#9299f82874bab9e4c7f9c48d865becbfe8d6907c"
   integrity sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==
 
-"@lexical/clipboard@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.11.3.tgz"
-  integrity sha512-6xggT8b0hd4OQy25mBH+yiJsr3Bm8APHjDOd3yINCGeiiHXIC+2qKQn3MG70euxQQuyzq++tYHcSsFq42g8Jyw==
-  dependencies:
-    "@lexical/html" "0.11.3"
-    "@lexical/list" "0.11.3"
-    "@lexical/selection" "0.11.3"
-    "@lexical/utils" "0.11.3"
-
-"@lexical/code@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/code/-/code-0.11.3.tgz"
-  integrity sha512-BIMPd2op65iP4N9SkKIUVodZoWeSsnk6skNJ8UHBO/Rg0ZxyAqxLpnBhEgHq2QOoTBbEW6OEFtkc7/+f9LINZg==
-  dependencies:
-    "@lexical/utils" "0.11.3"
+"@lexical/clipboard@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/clipboard/-/clipboard-0.16.1.tgz#50d09887eeceab1debbc2428a02b8135b66c4e1d"
+  integrity sha512-0dWs/SwKS5KPpuf6fUVVt9vSCl6HAqcDGhSITw/okv0rrIlXTUT6WhVsMJtXfFxTyVvwMeOecJHvQH3i/jRQtA==
+  dependencies:
+    "@lexical/html" "0.16.1"
+    "@lexical/list" "0.16.1"
+    "@lexical/selection" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/code@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/code/-/code-0.16.1.tgz#c62df85881b03485ea4b4492d0dadc6682ddb983"
+  integrity sha512-pOC28rRZ2XkmI2nIJm50DbKaCJtk5D0o7r6nORYp4i0z+lxt5Sf2m82DL9ksUHJRqKy87pwJDpoWvJ2SAI0ohw==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
     prismjs "^1.27.0"
 
-"@lexical/dragon@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.11.3.tgz"
-  integrity sha512-S18uwqOOpV2yIAFVWqSvBdhZ5BGadPQO4ejZF15wP8LUuqkxCs+0I/MjLovQ7tx0Cx34KdDaOXtM6XeG74ixYw==
-
-"@lexical/hashtag@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.11.3.tgz"
-  integrity sha512-7auoaWp2QhsX9/Bq0SxLXatUaSwqoT9HlWNTH2vKsw8tdeUBYacTHLuBNncTGrznXLG0/B5+FWoLuM6Pzqq4Ig==
-  dependencies:
-    "@lexical/utils" "0.11.3"
-
-"@lexical/history@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/history/-/history-0.11.3.tgz"
-  integrity sha512-QLJQRH2rbadRwXd4c/U4TqjLWDQna6Q43nCocIZF+SdVG9TlASp7m6dS7hiHfPtV1pkxJUxPhZY6EsB/Ok5WGA==
-  dependencies:
-    "@lexical/utils" "0.11.3"
-
-"@lexical/html@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/html/-/html-0.11.3.tgz"
-  integrity sha512-+8AYnxxml9PneZLkGfdTenqDjE2yD1ZfCmQLrD/L1TEn22OjZh4uvKVHb13wEhgUZTuLKF0PNdnuecko9ON/aQ==
-  dependencies:
-    "@lexical/selection" "0.11.3"
-
-"@lexical/link@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/link/-/link-0.11.3.tgz"
-  integrity sha512-stAjIrDrF18dPKK25ExPwMCcMe0KKD0FWVzo3F7ejh9DvrQcLFeBPcs8ze71chS3D5fQDB/CzdwvMjEViKmq2A==
-  dependencies:
-    "@lexical/utils" "0.11.3"
-
-"@lexical/list@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/list/-/list-0.11.3.tgz"
-  integrity sha512-Cs9071wDfqi4j1VgodceiR1jTHj13eCoEJDhr3e/FW0x5we7vfbTMtWlOWbveIoryAh+rQNgiD5e8SrAm6Zs3g==
-  dependencies:
-    "@lexical/utils" "0.11.3"
-
-"@lexical/mark@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/mark/-/mark-0.11.3.tgz"
-  integrity sha512-0wAtufmaA0rMVFXoiJ0sY/tiJsQbHuDpgywb1Qa8qnZZcg7ZTrQMz9Go0fEWYcbSp8OH2o0cjbDTz3ACS1qCUA==
-  dependencies:
-    "@lexical/utils" "0.11.3"
-
-"@lexical/markdown@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.11.3.tgz"
-  integrity sha512-sF8ow32BDme3UvxaKpf+j+vMc4T/XvDEzteZHmvvP7NX/iUtK3yUkTyT7rKuGwiKLYfMBwQaKMGjU3/nlIOzUg==
-  dependencies:
-    "@lexical/code" "0.11.3"
-    "@lexical/link" "0.11.3"
-    "@lexical/list" "0.11.3"
-    "@lexical/rich-text" "0.11.3"
-    "@lexical/text" "0.11.3"
-    "@lexical/utils" "0.11.3"
-
-"@lexical/offset@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/offset/-/offset-0.11.3.tgz"
-  integrity sha512-3H9X8iqDSk0LrMOHZuqYuqX4EYGb78TIhtjrFbLJi/OgKmHaSeLx59xcMZdgd5kBdRitzQYMmvbRDvbLfMgWrA==
-
-"@lexical/overflow@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.11.3.tgz"
-  integrity sha512-ShjCG8lICShOBKwrpP+9PjRFKEBCSUUMjbIGZfLnoL//3hyRtGv5aRgRyfJlRgDhCve0ROt5znLJV88EXzGRyA==
-
-"@lexical/plain-text@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.11.3.tgz"
-  integrity sha512-cQ5Us+GNzShyjjgRqWTnYv0rC+jHJ96LvBA1aSieM77H8/Im5BeoLl6TgBK2NqPkp8fGpj8JnDEdT8h9Qh1jtA==
-
-"@lexical/react@^0.11.0":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/react/-/react-0.11.3.tgz"
-  integrity sha512-Rn0Agnrz3uLIWbNyS9PRlkxOxcIDl2kxaVfgBacqQtYKR0ZVB2Hnoi89Cq6VmWPovauPyryx4Q3FC8Y11X7Otg==
-  dependencies:
-    "@lexical/clipboard" "0.11.3"
-    "@lexical/code" "0.11.3"
-    "@lexical/dragon" "0.11.3"
-    "@lexical/hashtag" "0.11.3"
-    "@lexical/history" "0.11.3"
-    "@lexical/link" "0.11.3"
-    "@lexical/list" "0.11.3"
-    "@lexical/mark" "0.11.3"
-    "@lexical/markdown" "0.11.3"
-    "@lexical/overflow" "0.11.3"
-    "@lexical/plain-text" "0.11.3"
-    "@lexical/rich-text" "0.11.3"
-    "@lexical/selection" "0.11.3"
-    "@lexical/table" "0.11.3"
-    "@lexical/text" "0.11.3"
-    "@lexical/utils" "0.11.3"
-    "@lexical/yjs" "0.11.3"
+"@lexical/devtools-core@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/devtools-core/-/devtools-core-0.16.1.tgz#e166e08c74735f8837843b3e3da4492312cdbc58"
+  integrity sha512-8CvGERGL7ySDVGLU+YPeq+JupIXsOFlXa3EuJ88koLKqXxYenwMleZgGqayFp6lCP78xqPKnATVeoOZUt/NabQ==
+  dependencies:
+    "@lexical/html" "0.16.1"
+    "@lexical/link" "0.16.1"
+    "@lexical/mark" "0.16.1"
+    "@lexical/table" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/dragon@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.16.1.tgz#bc122770fe3bd8002f057b99d4ca5aee95ec3b31"
+  integrity sha512-Rvd60GIYN5kpjjBumS34EnNbBaNsoseI0AlzOdtIV302jiHPCLH0noe9kxzu9nZy+MZmjZy8Dx2zTbQT2mueRw==
+  dependencies:
+    lexical "0.16.1"
+
+"@lexical/hashtag@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.16.1.tgz#4a55b8f03f2754d39a15e44e30a80bdc6fb1710b"
+  integrity sha512-G+YOxStAKs3q1utqm9KR4D4lCkwIH52Rctm4RgaVTI+4lvTaybeDRGFV75P/pI/qlF7/FvAYHTYEzCjtC3GNMQ==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/history@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/history/-/history-0.16.1.tgz#1c9f4f06f4bcdc2e91cfd6dac7c508633e7779d2"
+  integrity sha512-WQhScx0TJeKSQAnEkRpIaWdUXqirrNrom2MxbBUc/32zEUMm9FzV7nRGknvUabEFUo7vZq6xTZpOExQJqHInQA==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/html@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/html/-/html-0.16.1.tgz#40211fda59246ff797a63b060787cb76a31608d2"
+  integrity sha512-vbtAdCvQ3PaAqa5mFmtmrvbiAvjCu1iXBAJ0bsHqFXCF2Sba5LwHVe8dUAOTpfEZEMbiHfjul6b5fj4vNPGF2A==
+  dependencies:
+    "@lexical/selection" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/link@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.16.1.tgz#ba15ca875f9f7f37aef7d6bc7f3f010168571e31"
+  integrity sha512-zG36gEnEqbIe6tK/MhXi7wn/XMY/zdivnPcOY5WyC3derkEezeLSSIFsC1u5UNeK5pbpNMSy4LDpLhi1Ww4Y5w==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/list@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.16.1.tgz#109c0c1e9ea8b19e9a89c2887b831690e05f20a7"
+  integrity sha512-i9YhLAh5N6YO9dP+R1SIL9WEdCKeTiQQYVUzj84vDvX5DIBxMPUjTmMn3LXu9T+QO3h1s2L/vJusZASrl45eAw==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/mark@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/mark/-/mark-0.16.1.tgz#942465a7d34858a559ad29410c5d543f1c340708"
+  integrity sha512-CZRGMLcxn5D+jzf1XnH+Z+uUugmpg1mBwTbGybCPm8UWpBrKDHkrscfMgWz62iRWz0cdVjM5+0zWpNElxFTRjQ==
+  dependencies:
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/markdown@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/markdown/-/markdown-0.16.1.tgz#3e68fbac6ce65f6331ae712bb7d494c885550e3d"
+  integrity sha512-0sBLttMvfQO/hVaIqpHdvDowpgV2CoRuWo2CNwvRLZPPWvPVjL4Nkb73wmi8zAZsAOTbX2aw+g4m/+k5oJqNig==
+  dependencies:
+    "@lexical/code" "0.16.1"
+    "@lexical/link" "0.16.1"
+    "@lexical/list" "0.16.1"
+    "@lexical/rich-text" "0.16.1"
+    "@lexical/text" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/offset@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/offset/-/offset-0.16.1.tgz#e5fc9363fffe3abaa23c7212dfa363878c5bab15"
+  integrity sha512-/i2J04lQmFeydUZIF8tKXLQTXiJDTQ6GRnkfv1OpxU4amc0rwGa7+qAz/PuF1n58rP6InpLmSHxgY5JztXa2jw==
+  dependencies:
+    lexical "0.16.1"
+
+"@lexical/overflow@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/overflow/-/overflow-0.16.1.tgz#e791b3d19d6f5a8aeef5506441f1345ef2904bdb"
+  integrity sha512-xh5YpoxwA7K4wgMQF/Sjl8sdjaxqesLCtH5ZrcMsaPlmucDIEEs+i8xxk+kDUTEY7y+3FvRxs4lGNgX8RVWkvQ==
+  dependencies:
+    lexical "0.16.1"
+
+"@lexical/plain-text@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/plain-text/-/plain-text-0.16.1.tgz#bb459d82f19280ff90676a457d50dbfe81d33780"
+  integrity sha512-GjY4ylrBZIaAVIF8IFnmW0XGyHAuRmWA6gKB8iTTlsjgFrCHFIYC74EeJSp309O0Hflg9rRBnKoX1TYruFHVwA==
+  dependencies:
+    "@lexical/clipboard" "0.16.1"
+    "@lexical/selection" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
+
+"@lexical/react@^0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/react/-/react-0.16.1.tgz#2cf6dadef79120413cb5264849acfe8efb7c1a5f"
+  integrity sha512-SsGgLt9iKfrrMRy9lFb6ROVPUYOgv6b+mCn9Al+TLqs/gBReDBi3msA7m526nrtBUKYUnjHdQ1QXIJzuKgOxcg==
+  dependencies:
+    "@lexical/clipboard" "0.16.1"
+    "@lexical/code" "0.16.1"
+    "@lexical/devtools-core" "0.16.1"
+    "@lexical/dragon" "0.16.1"
+    "@lexical/hashtag" "0.16.1"
+    "@lexical/history" "0.16.1"
+    "@lexical/link" "0.16.1"
+    "@lexical/list" "0.16.1"
+    "@lexical/mark" "0.16.1"
+    "@lexical/markdown" "0.16.1"
+    "@lexical/overflow" "0.16.1"
+    "@lexical/plain-text" "0.16.1"
+    "@lexical/rich-text" "0.16.1"
+    "@lexical/selection" "0.16.1"
+    "@lexical/table" "0.16.1"
+    "@lexical/text" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    "@lexical/yjs" "0.16.1"
+    lexical "0.16.1"
     react-error-boundary "^3.1.4"
 
-"@lexical/rich-text@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.11.3.tgz"
-  integrity sha512-fBFs6wMS7GFLbk+mzIWtwpP+EmnTZZ5bHpveuQ5wXONBuUuLcsYF5KO7UhLxXNLmiViV6lxatZPavEzgZdW7oQ==
+"@lexical/rich-text@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/rich-text/-/rich-text-0.16.1.tgz#71f0b765b96071b0d6cf5fdde9ada0c5a5a0316c"
+  integrity sha512-4uEVXJur7tdSbqbmsToCW4YVm0AMh4y9LK077Yq2O9hSuA5dqpI8UbTDnxZN2D7RfahNvwlqp8eZKFB1yeiJGQ==
+  dependencies:
+    "@lexical/clipboard" "0.16.1"
+    "@lexical/selection" "0.16.1"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
 
-"@lexical/selection@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/selection/-/selection-0.11.3.tgz"
-  integrity sha512-15lQpcKT/vd7XZ5pnF1nb+kpKb72e9Yi1dVqieSxTeXkzt1cAZFKP3NB4RlhOKCv1N+glSBnjSxRwgsFfbD+NQ==
+"@lexical/selection@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/selection/-/selection-0.16.1.tgz#8a9756b377acf1c831440c588ad3d1789b02230f"
+  integrity sha512-+nK3RvXtyQvQDq7AZ46JpphmM33pwuulwiRfeXR5T9iFQTtgWOEjsAi/KKX7vGm70BxACfiSxy5QCOgBWFwVJg==
+  dependencies:
+    lexical "0.16.1"
 
-"@lexical/table@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/table/-/table-0.11.3.tgz"
-  integrity sha512-EyRnN39CSPsMceADBR7Kf+sBHNpNQlPEkn/52epeDSnakR6s80woyrA3kIzKo6mLB4afvoqdYc7RfR96M9JLIA==
+"@lexical/table@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.16.1.tgz#ac0f15b3145720fcd3d53c7241042dc8ad354173"
+  integrity sha512-GWb0/MM1sVXpi1p2HWWOBldZXASMQ4c6WRNYnRmq7J/aB5N66HqQgJGKp3m66Kz4k1JjhmZfPs7F018qIBhnFQ==
   dependencies:
-    "@lexical/utils" "0.11.3"
+    "@lexical/utils" "0.16.1"
+    lexical "0.16.1"
 
-"@lexical/text@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/text/-/text-0.11.3.tgz"
-  integrity sha512-gCEN8lJyR6b+yaOwKWGj79pbOfCQPWU/PHWyoNFUkEJXn3KydCzr2EYb6ta2cvQWRQU4G2BClKCR56jL4NS+qg==
+"@lexical/text@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/text/-/text-0.16.1.tgz#a028a2dd888536a32fa99d14183b148ec69211b6"
+  integrity sha512-Os/nKQegORTrKKN6vL3/FMVszyzyqaotlisPynvTaHTUC+yY4uyjM2hlF93i5a2ixxyiPLF9bDroxUP96TMPXg==
+  dependencies:
+    lexical "0.16.1"
 
-"@lexical/utils@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/utils/-/utils-0.11.3.tgz"
-  integrity sha512-vC4saCrlcmyIJnvrYKw1uYxZojlD1DCIBsFlgmO8kXyRYXjj+o/8PBdn2dsgSQ3rADrC2mUloOm/maekDcYe9Q==
+"@lexical/utils@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.16.1.tgz#f7bcd36eff2ac142ad72106e45fe0da219ec873e"
+  integrity sha512-BVyJxDQi/rIxFTDjf2zE7rMDKSuEaeJ4dybHRa/hRERt85gavGByQawSLeQlTjLaYLVsy+x7wCcqh2fNhlLf0g==
   dependencies:
-    "@lexical/list" "0.11.3"
-    "@lexical/selection" "0.11.3"
-    "@lexical/table" "0.11.3"
+    "@lexical/list" "0.16.1"
+    "@lexical/selection" "0.16.1"
+    "@lexical/table" "0.16.1"
+    lexical "0.16.1"
 
-"@lexical/yjs@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.11.3.tgz"
-  integrity sha512-TLDQG2FSEw/aOfppEBb0wRlIuzJ57W//8ImfzyZvckSC12tvU0YKQQX8nQz/rybXdyfRy5eN+8gX5K2EyZx+pQ==
+"@lexical/yjs@0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@lexical/yjs/-/yjs-0.16.1.tgz#ed43581a1f96f581d36fd82f0b2e124a103fecd9"
+  integrity sha512-QHw1bmzB/IypIV1tRWMH4hhwE1xX7wV+HxbzBS8oJAkoU5AYXM/kyp/sQicgqiwVfpai1Px7zatOoUDFgbyzHQ==
   dependencies:
-    "@lexical/offset" "0.11.3"
+    "@lexical/offset" "0.16.1"
+    lexical "0.16.1"
 
 "@mongodb-js/saslprep@^1.1.5":
   version "1.1.7"
@@ -6623,10 +6670,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lexical@^0.11.0:
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/lexical/-/lexical-0.11.3.tgz"
-  integrity sha512-xsMKgx/Fa+QHg/nweemU04lCy7TnEr8LyeDtsKUC7fIDN9wH3GqbnQ0+e3Hbg4FmxlhDCiPPt0GcZAROq3R8uw==
+lexical@0.16.1, lexical@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.16.1.tgz#1d2cd3f364224889caa2939df179434af936283b"
+  integrity sha512-+R05d3+N945OY8pTUjTqQrWoApjC+ctzvjnmNETtx9WmVAaiW0tQVG+AYLt5pDGY8dQXtd4RPorvnxBTECt9SA==
 
 lilconfig@^2.0.5:
   version "2.1.0"

From 166d08d86cefcac0cd4ce722e1abfacb80287a4a Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:36:46 +0200
Subject: [PATCH 04/37] chore(client):

---
 client/package.json                   |  4 ++--
 client/src/services/User/user.saga.ts |  6 +++---
 yarn.lock                             | 19 ++++++-------------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/client/package.json b/client/package.json
index 01f2530902..a64c9a797d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,7 +19,7 @@
     "@refugies-info/api-types": "*",
     "algoliasearch": "^4.14.2",
     "autosuggest-highlight": "^3.1.1",
-    "axios": "^0.26.0",
+    "axios": "^1.7.2",
     "bootstrap": "^5.2.3",
     "eva-icons": "^1.1.3",
     "flag-icons": "^6.6.6",
@@ -27,7 +27,7 @@
     "html2plaintext": "^2.1.4",
     "i18next": "^22.0.6",
     "js-cookie": "^3.0.1",
-    "jwt-decode": "^3.1.2",
+    "jwt-decode": "^4.0.0",
     "lexical": "^0.16.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
diff --git a/client/src/services/User/user.saga.ts b/client/src/services/User/user.saga.ts
index 373a99fd29..e7431dccd9 100644
--- a/client/src/services/User/user.saga.ts
+++ b/client/src/services/User/user.saga.ts
@@ -6,11 +6,11 @@ import { addToQueryActionCreator } from "services/SearchResults/searchResults.ac
 import { logger } from "../../logger";
 import API from "../../utils/API";
 import { finishLoading, LoadingStatusKey, setError, startLoading } from "../LoadingStatus/loadingStatus.actions";
-import { searchQuerySelector } from "../SearchResults/searchResults.selector"
+import { searchQuerySelector } from "../SearchResults/searchResults.selector";
 import { fetchUserStructureActionCreator } from "../UserStructure/userStructure.actions";
 import { fetchUserActionCreator, saveUserActionCreator, setUserActionCreator } from "./user.actions";
 import { FETCH_USER, SAVE_USER } from "./user.actionTypes";
-import { userSelector } from "./user.selectors"
+import { userSelector } from "./user.selectors";
 
 export function* fetchUser(action: ReturnType<typeof fetchUserActionCreator>): SagaIterator {
   try {
@@ -67,7 +67,7 @@ export function* saveUser(action: ReturnType<typeof saveUserActionCreator>): Sag
     yield put(finishLoading(LoadingStatusKey.SAVE_USER));
   } catch (error) {
     logger.error("[saveUser] saga error", { error });
-    if ((<AxiosError>error).response?.data?.code === "WRONG_CODE") {
+    if ((<AxiosError<{ code?: string }, unknown>>error).response?.data?.code === "WRONG_CODE") {
       yield put(setError(LoadingStatusKey.SAVE_USER, "WRONG_CODE"));
     } else {
       yield put(setUserActionCreator(null));
diff --git a/yarn.lock b/yarn.lock
index 554a941d29..ade31ea137 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2948,14 +2948,7 @@ axe-core@=4.7.0:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
-axios@^0.26.0:
-  version "0.26.1"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz"
-  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
-  dependencies:
-    follow-redirects "^1.14.8"
-
-axios@^1.6.3, axios@^1.6.8:
+axios@^1.6.3, axios@^1.6.8, axios@^1.7.2:
   version "1.7.2"
   resolved "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz"
   integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
@@ -4873,7 +4866,7 @@ fn.name@1.x.x:
   resolved "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz"
   integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
 
-follow-redirects@^1.14.8, follow-redirects@^1.15.6:
+follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
@@ -6584,10 +6577,10 @@ jws@^4.0.0:
     jwa "^2.0.0"
     safe-buffer "^5.0.1"
 
-jwt-decode@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
-  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+jwt-decode@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
+  integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
 
 jwt-simple@^0.5.5:
   version "0.5.6"

From 2f86bf1c30be0dd97fcff582d914069aa70f4eb9 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:39:08 +0200
Subject: [PATCH 05/37] chore(client): :arrow_up: Upgrade several miscellaneous
 dependencies

---
 client/package.json |  10 +-
 yarn.lock           | 374 +++++++++++++++++++++-----------------------
 2 files changed, 181 insertions(+), 203 deletions(-)

diff --git a/client/package.json b/client/package.json
index a64c9a797d..61a8a9906c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "^1.9.11",
-    "@hedgedoc/html-to-react": "^1.4.5",
+    "@hedgedoc/html-to-react": "^2.1.1",
     "@lexical/react": "^0.16.1",
     "@react-google-maps/api": "^2.17.0",
     "@refugies-info/api-types": "*",
@@ -22,7 +22,7 @@
     "axios": "^1.7.2",
     "bootstrap": "^5.2.3",
     "eva-icons": "^1.1.3",
-    "flag-icons": "^6.6.6",
+    "flag-icons": "^7.2.3",
     "google-oauth-gsi": "^4.0.0",
     "html2plaintext": "^2.1.4",
     "i18next": "^22.0.6",
@@ -61,13 +61,13 @@
     "reactstrap": "^9.2.2",
     "redux": "^4.0.1",
     "redux-saga": "^1.1.3",
-    "remixicon": "^2.5.0",
-    "sharp": "^0.31.2",
+    "remixicon": "^4.3.0",
+    "sharp": "^0.33.4",
     "sortablejs": "^1.15.0",
     "styled-components": "^5.3.6",
     "sweetalert2": "^11.6.16",
     "typesafe-actions": "^5.1.0",
-    "uuid": "^9.0.0"
+    "uuid": "^10.0.0"
   },
   "scripts": {
     "predev": "only-include-used-icons",
diff --git a/yarn.lock b/yarn.lock
index ade31ea137..2a62004a06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -494,6 +494,13 @@
     enabled "2.0.x"
     kuler "^2.0.0"
 
+"@emnapi/runtime@^1.1.1":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.2.0.tgz#71d018546c3a91f3b51106530edbc056b9f2f2e3"
+  integrity sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==
+  dependencies:
+    tslib "^2.4.0"
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.2"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz"
@@ -873,14 +880,14 @@
     "@hapi/bourne" "^3.0.0"
     "@hapi/hoek" "^11.0.2"
 
-"@hedgedoc/html-to-react@^1.4.5":
-  version "1.4.6"
-  resolved "https://registry.npmjs.org/@hedgedoc/html-to-react/-/html-to-react-1.4.6.tgz"
-  integrity sha512-1tPj04jsYvDml2mz1Rl7vc6rPGg08UaLhcw0MLsGqubRbQ6t27LMj/bnZ3ux1e10KbxQ0i6biGfAZlvsHKXG+Q==
+"@hedgedoc/html-to-react@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@hedgedoc/html-to-react/-/html-to-react-2.1.1.tgz#06ba9be4774dfa89869c37e941ba32a577122289"
+  integrity sha512-jZQYG8XWi7CmhUo5F3YcnDjwlTIaY3PwuCSRgcP01CXEVHz8+dYKtHwaP7Fpu9qMRMoMQSWLgHXIKaGgbch/bA==
   dependencies:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
-    htmlparser2 "^8.0.0"
+    htmlparser2 "^9.0.0"
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -901,6 +908,119 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@img/sharp-darwin-arm64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz#a1cf4a7febece334f16e0328b9689f05797d7aec"
+  integrity sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.0.2"
+
+"@img/sharp-darwin-x64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz#f77be2d7c3609d3e77cd337b199a772e07b87bd2"
+  integrity sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.0.2"
+
+"@img/sharp-libvips-darwin-arm64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz#b69f49fecbe9572378675769b189410721b0fa53"
+  integrity sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==
+
+"@img/sharp-libvips-darwin-x64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz#5665da7360d8e5ed7bee314491c8fe736b6a3c39"
+  integrity sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==
+
+"@img/sharp-libvips-linux-arm64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz#8a05e5e9e9b760ff46561e32f19bd5e035fa881c"
+  integrity sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==
+
+"@img/sharp-libvips-linux-arm@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz#0fd33b9bf3221948ce0ca7a5a725942626577a03"
+  integrity sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==
+
+"@img/sharp-libvips-linux-s390x@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz#4b89150ec91b256ee2cbb5bb125321bf029a4770"
+  integrity sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==
+
+"@img/sharp-libvips-linux-x64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz#947ccc22ca5bc8c8cfe921b39a5fdaebc5e39f3f"
+  integrity sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz#821d58ce774f0f8bed065b69913a62f65d512f2f"
+  integrity sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz#4309474bd8b728a61af0b3b4fad0c476b5f3ccbe"
+  integrity sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==
+
+"@img/sharp-linux-arm64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz#bd390113e256487041411b988ded13a26cfc5f95"
+  integrity sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.0.2"
+
+"@img/sharp-linux-arm@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz#14ecc81f38f75fb4cd7571bc83311746d6745fca"
+  integrity sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.0.2"
+
+"@img/sharp-linux-s390x@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz#119e8081e2c6741b5ac908fe02244e4c559e525f"
+  integrity sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.0.2"
+
+"@img/sharp-linux-x64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz#21d4c137b8da9a313b069ff5c920ded709f853d7"
+  integrity sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.0.2"
+
+"@img/sharp-linuxmusl-arm64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz#f3fde68fd67b85a32da6f1155818c3b58b8e7ae0"
+  integrity sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.2"
+
+"@img/sharp-linuxmusl-x64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz#44373724aecd7b69900e0578228144e181db7892"
+  integrity sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.2"
+
+"@img/sharp-wasm32@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz#88e3f18d7e7cd8cfe1af98e9963db4d7b6491435"
+  integrity sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==
+  dependencies:
+    "@emnapi/runtime" "^1.1.1"
+
+"@img/sharp-win32-ia32@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz#b1c772dd2952e983980b1eb85808fa8129484d46"
+  integrity sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==
+
+"@img/sharp-win32-x64@0.33.4":
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz#106f911134035b4157ec92a0c154a6b6f88fa4c1"
+  integrity sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -3079,15 +3199,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-bl@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
-  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
 bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.7.2"
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -3187,14 +3298,6 @@ buffer-from@^1.0.0:
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer@^5.5.0:
-  version "5.7.1"
-  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz"
-  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.1.13"
-
 buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
@@ -3345,11 +3448,6 @@ cheerio@1.0.0-rc.10:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chownr@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz"
-  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
-
 ci-info@^3.2.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
@@ -3850,13 +3948,6 @@ decode-uri-component@^0.4.1:
   resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz"
   integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==
 
-decompress-response@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz"
-  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
-  dependencies:
-    mimic-response "^3.1.0"
-
 dedent@^1.0.0:
   version "1.5.3"
   resolved "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz"
@@ -3886,11 +3977,6 @@ deep-equal@^2.0.5:
     which-collection "^1.0.1"
     which-typed-array "^1.1.13"
 
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -3944,9 +4030,9 @@ destroy@1.2.0:
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-libc@^2.0.0, detect-libc@^2.0.1:
+detect-libc@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
   integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
 
 detect-newline@^3.0.0:
@@ -4056,9 +4142,9 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
-domutils@^3.0.1:
+domutils@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
   integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
   dependencies:
     dom-serializer "^2.0.0"
@@ -4142,7 +4228,7 @@ encodeurl@~1.0.2:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -4162,7 +4248,7 @@ entities@^2.0.0:
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^4.2.0, entities@^4.4.0:
+entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -4626,11 +4712,6 @@ exit@^0.1.2:
   resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
   integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
 
-expand-template@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz"
-  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
-
 expect@^29.0.0, expect@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz"
@@ -4842,10 +4923,10 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-flag-icons@^6.6.6:
-  version "6.15.0"
-  resolved "https://registry.npmjs.org/flag-icons/-/flag-icons-6.15.0.tgz"
-  integrity sha512-ARo9Q+aATZEjyjveeec9e+orx+xLWUBdOX9baOKoGqDzMbvZ65ghPhaHbVt5T7ZB+Q4OFsB4Hr+eQnpV8Q+dLA==
+flag-icons@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/flag-icons/-/flag-icons-7.2.3.tgz#b67f379fa0ef28c4e605319a78035131bdd8ced7"
+  integrity sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==
 
 flat-cache@^3.0.4:
   version "3.2.0"
@@ -4928,11 +5009,6 @@ fresh@0.5.2:
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
 fs-extra@^11.2.0:
   version "11.2.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
@@ -5065,11 +5141,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-github-from-package@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz"
-  integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -5371,15 +5442,15 @@ htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
-htmlparser2@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz"
-  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+htmlparser2@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.1.0.tgz#cdb498d8a75a51f739b61d3f718136c369bc8c23"
+  integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==
   dependencies:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
-    domutils "^3.0.1"
-    entities "^4.4.0"
+    domutils "^3.1.0"
+    entities "^4.5.0"
 
 http-errors@2.0.0:
   version "2.0.0"
@@ -5497,7 +5568,7 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
-ieee754@^1.1.13, ieee754@^1.2.1:
+ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -5561,16 +5632,11 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@~1.3.0:
-  version "1.3.8"
-  resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
-  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
-
 inline-style-prefixer@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz"
@@ -6938,11 +7004,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-response@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz"
-  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
@@ -6983,7 +7044,7 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
+minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -6993,11 +7054,6 @@ minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz"
-  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
-
 mockdate@^3.0.5:
   version "3.0.5"
   resolved "https://registry.npmjs.org/mockdate/-/mockdate-3.0.5.tgz"
@@ -7124,11 +7180,6 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-napi-build-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz"
-  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
-
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz"
@@ -7209,18 +7260,6 @@ next@^14.2.4:
     "@next/swc-win32-ia32-msvc" "14.2.4"
     "@next/swc-win32-x64-msvc" "14.2.4"
 
-node-abi@^3.3.0:
-  version "3.65.0"
-  resolved "https://registry.npmjs.org/node-abi/-/node-abi-3.65.0.tgz"
-  integrity sha512-ThjYBfoDNr08AWx6hGaRbfPwxKV9kVzAzOzlLKbk2CuqXE2xnCh+cbAGnwM3t8Lq4v9rUB7VfondlkBckcJrVA==
-  dependencies:
-    semver "^7.3.5"
-
-node-addon-api@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz"
-  integrity sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==
-
 node-cache@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/node-cache/-/node-cache-5.1.2.tgz"
@@ -7413,7 +7452,7 @@ on-headers@~1.0.2:
   resolved "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@@ -7734,24 +7773,6 @@ postcss@^8.0.0, postcss@^8.4.35, postcss@^8.4.5:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-prebuild-install@^7.1.1:
-  version "7.1.2"
-  resolved "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz"
-  integrity sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==
-  dependencies:
-    detect-libc "^2.0.0"
-    expand-template "^2.0.3"
-    github-from-package "0.0.0"
-    minimist "^1.2.3"
-    mkdirp-classic "^0.5.3"
-    napi-build-utils "^1.0.1"
-    node-abi "^3.3.0"
-    pump "^3.0.0"
-    rc "^1.2.7"
-    simple-get "^4.0.0"
-    tar-fs "^2.0.0"
-    tunnel-agent "^0.6.0"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -7873,14 +7894,6 @@ pstree.remy@^1.1.8:
   resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
   integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
 
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
 punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -8020,16 +8033,6 @@ rc-util@^4.0.4, rc-util@^4.15.3, rc-util@^4.4.0:
     react-lifecycles-compat "^3.0.4"
     shallowequal "^1.1.0"
 
-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-anchor-link-smooth-scroll@^1.0.12:
   version "1.0.12"
   resolved "https://registry.npmjs.org/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.12.tgz"
@@ -8410,10 +8413,10 @@ regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
-remixicon@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.npmjs.org/remixicon/-/remixicon-2.5.0.tgz"
-  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+remixicon@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-4.3.0.tgz#61c3fd6ca11149bd05850152f9c08e5f5de7b0c9"
+  integrity sha512-jRYQ37dTFSkJtvcxwTUAkIiXkYRvA9EDvVuXPNrmt2xf/VS//CRgFtsX2TAFBoQOhh9SDh7l6La4Xu12snEyxg==
 
 remove-accents@^0.4.2:
   version "0.4.4"
@@ -8676,7 +8679,7 @@ section-iterator@^2.0.0:
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@7.x, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
+semver@7.x, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
   version "7.6.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
@@ -8767,19 +8770,34 @@ shallowequal@^1.1.0:
   resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.31.2:
-  version "0.31.3"
-  resolved "https://registry.npmjs.org/sharp/-/sharp-0.31.3.tgz"
-  integrity sha512-XcR4+FCLBFKw1bdB+GEhnUNXNXvnt0tDo4WsBsraKymuo/IAuPuCBVAL2wIkUw2r/dwFW5Q5+g66Kwl2dgDFVg==
+sharp@^0.33.4:
+  version "0.33.4"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.4.tgz#b88e6e843e095c6ab5e1a0c59c4885e580cd8405"
+  integrity sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==
   dependencies:
     color "^4.2.3"
-    detect-libc "^2.0.1"
-    node-addon-api "^5.0.0"
-    prebuild-install "^7.1.1"
-    semver "^7.3.8"
-    simple-get "^4.0.1"
-    tar-fs "^2.1.1"
-    tunnel-agent "^0.6.0"
+    detect-libc "^2.0.3"
+    semver "^7.6.0"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.4"
+    "@img/sharp-darwin-x64" "0.33.4"
+    "@img/sharp-libvips-darwin-arm64" "1.0.2"
+    "@img/sharp-libvips-darwin-x64" "1.0.2"
+    "@img/sharp-libvips-linux-arm" "1.0.2"
+    "@img/sharp-libvips-linux-arm64" "1.0.2"
+    "@img/sharp-libvips-linux-s390x" "1.0.2"
+    "@img/sharp-libvips-linux-x64" "1.0.2"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.2"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.2"
+    "@img/sharp-linux-arm" "0.33.4"
+    "@img/sharp-linux-arm64" "0.33.4"
+    "@img/sharp-linux-s390x" "0.33.4"
+    "@img/sharp-linux-x64" "0.33.4"
+    "@img/sharp-linuxmusl-arm64" "0.33.4"
+    "@img/sharp-linuxmusl-x64" "0.33.4"
+    "@img/sharp-wasm32" "0.33.4"
+    "@img/sharp-win32-ia32" "0.33.4"
+    "@img/sharp-win32-x64" "0.33.4"
 
 shebang-command@^1.2.0:
   version "1.2.0"
@@ -8835,20 +8853,6 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-simple-concat@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz"
-  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
-
-simple-get@^4.0.0, simple-get@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz"
-  integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
-  dependencies:
-    decompress-response "^6.0.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
@@ -9221,11 +9225,6 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz"
-  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
-
 strnum@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz"
@@ -9328,27 +9327,6 @@ tapable@^2.2.0:
   resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar-fs@^2.0.0, tar-fs@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz"
-  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.1.4"
-
-tar-stream@^2.1.4:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz"
-  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
-  dependencies:
-    bl "^4.0.3"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
 teeny-request@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/teeny-request/-/teeny-request-9.0.0.tgz#18140de2eb6595771b1b02203312dfad79a4716d"

From b101b037bde1582897a331442068cc3d5a66f6d9 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:52:57 +0200
Subject: [PATCH 06/37] chore(client): :arrow_up: Upgrade i18next related
 dependencies and fix issues in codebase

---
 client/package.json                           |  6 +--
 .../Edition/DropdownModals/DropdownModals.tsx |  4 +-
 yarn.lock                                     | 42 +++++++++----------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/client/package.json b/client/package.json
index 61a8a9906c..05acd751df 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,14 +25,14 @@
     "flag-icons": "^7.2.3",
     "google-oauth-gsi": "^4.0.0",
     "html2plaintext": "^2.1.4",
-    "i18next": "^22.0.6",
+    "i18next": "^23.11.5",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0",
     "lexical": "^0.16.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "^14.2.4",
-    "next-i18next": "^13.0.0",
+    "next-i18next": "^15.3.0",
     "next-redux-wrapper": "^8.0.0",
     "next-sitemap": "^3.1.32",
     "process": "^0.11.10",
@@ -48,7 +48,7 @@
     "react-ga4": "^2.1.0",
     "react-google-autocomplete": "^2.6.1",
     "react-hook-form": "^7.43.1",
-    "react-i18next": "^12.0.0",
+    "react-i18next": "^14.1.2",
     "react-intersection-observer": "^9.4.1",
     "react-loading-skeleton": "^3.1.0",
     "react-notifications": "^1.7.3",
diff --git a/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.tsx b/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.tsx
index c9faef04c3..19f9dfcc3c 100644
--- a/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.tsx
+++ b/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.tsx
@@ -35,13 +35,13 @@ function DropdownModals<T extends Options>(props: Props<T>) {
   return (
     <Dropdown isOpen={dropdownOpen} toggle={() => setDropdownOpen((o) => !o)} className={styles.dropdown}>
       <DropdownToggle className={styles.toggle}>
-        {jsUcfirst(t(`Infocards.${props.selected}`, { count }) || "")}
+        {jsUcfirst(t(`Infocards.${props.selected}`, "", { count }))}
         <EVAIcon name="chevron-down-outline" size={16} fill="dark" className={cls(styles.icon, "ms-4")} />
       </DropdownToggle>
       <DropdownMenu className={styles.menu}>
         {props.options.map((key, i) => (
           <ChoiceButton
-            text={jsUcfirst(t(`Infocards.${key}`, { count }))}
+            text={jsUcfirst(t(`Infocards.${key}`, "", { count }))}
             selected={props.selected === key}
             type="radio"
             key={i}
diff --git a/yarn.lock b/yarn.lock
index 2a62004a06..fb3d07cfea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -414,7 +414,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz"
   integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
@@ -2067,7 +2067,7 @@
   resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1", "@types/hoist-non-react-statics@^3.3.4":
   version "3.3.5"
   resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -5537,17 +5537,17 @@ hyphenate-style-name@^1.0.3:
   resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.5.tgz"
   integrity sha512-fedL7PRwmeVkgyhu9hLeTBaI6wcGk7JGJswdaRsa5aUbkXI1kr1xZwTPBtaYPpwf56878iDek6VbVnuWMebJmw==
 
-i18next-fs-backend@^2.1.1:
+i18next-fs-backend@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-2.3.1.tgz#0c7d2459ff4a039e2b3228131809fbc0e74ff1a8"
   integrity sha512-tvfXskmG/9o+TJ5Fxu54sSO5OkY6d+uMn+K6JiUGLJrwxAVfer+8V3nU8jq3ts9Pe5lXJv4b1N7foIjJ8Iy2Gg==
 
-i18next@^22.0.6:
-  version "22.5.1"
-  resolved "https://registry.npmjs.org/i18next/-/i18next-22.5.1.tgz"
-  integrity sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==
+i18next@^23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
   dependencies:
-    "@babel/runtime" "^7.20.6"
+    "@babel/runtime" "^7.23.2"
 
 iconv-lite@0.4.24:
   version "0.4.24"
@@ -7208,16 +7208,16 @@ neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-next-i18next@^13.0.0:
-  version "13.3.0"
-  resolved "https://registry.npmjs.org/next-i18next/-/next-i18next-13.3.0.tgz"
-  integrity sha512-X4kgi51BCOoGdKbv87eZ8OU7ICQDg5IP+T5fNjqDY3os9ea0OKTY4YpAiVFiwcI9XimcUmSPbKO4a9jFUyYSgg==
+next-i18next@^15.3.0:
+  version "15.3.0"
+  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-15.3.0.tgz#b4530c80573854d00f95229af405e1e5beedbf18"
+  integrity sha512-bq7Cc9XJFcmGOCLnyEtHaeJ3+JJNsI/8Pkj9BaHAnhm4sZ9vNNC4ZsaqYnlRZ7VH5ypSo73fEqLK935jLsmCvQ==
   dependencies:
-    "@babel/runtime" "^7.20.13"
-    "@types/hoist-non-react-statics" "^3.3.1"
+    "@babel/runtime" "^7.23.2"
+    "@types/hoist-non-react-statics" "^3.3.4"
     core-js "^3"
     hoist-non-react-statics "^3.3.2"
-    i18next-fs-backend "^2.1.1"
+    i18next-fs-backend "^2.3.1"
 
 next-redux-wrapper@^8.0.0:
   version "8.1.0"
@@ -8110,12 +8110,12 @@ react-hook-form@^7.43.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.1.tgz#ec2c96437b977f8b89ae2d541a70736c66284852"
   integrity sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==
 
-react-i18next@^12.0.0:
-  version "12.3.1"
-  resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-12.3.1.tgz"
-  integrity sha512-5v8E2XjZDFzK7K87eSwC7AJcAkcLt5xYZ4+yTPDAW1i7C93oOY1dnr4BaQM7un4Hm+GmghuiPvevWwlca5PwDA==
+react-i18next@^14.1.2:
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
+  integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
   dependencies:
-    "@babel/runtime" "^7.20.6"
+    "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
 react-intersection-observer@^9.4.1:

From 8d997cd285da665868c23a6d9af403818c252d50 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 14:58:38 +0200
Subject: [PATCH 07/37] chore(client): :arrow_up: Upgrade styled components to
 6.x.  Migrate source files

---
 client/package.json                           |   2 +-
 .../Backend/UserDetail/UserDetail.tsx         |   4 +-
 .../Backend/screens/Admin/Admin.tsx           |   2 +-
 .../Admin/sharedComponents/SubComponents.tsx  |  10 +-
 .../components/SubComponents.tsx              |   4 +-
 .../components/NoFavorites.component.tsx      |   4 +-
 .../components/Notification.tsx               |   6 +-
 .../UserStructure/components/MembresTable.tsx |   6 +-
 .../screens/UserStructure/components/Role.tsx |   2 +-
 .../components/SubComponents.tsx              |   2 +-
 .../components/SubComponents.tsx              |   8 +-
 .../TranslationLanguagesChoiceModal.tsx       |   4 +-
 .../Pages/annuaire-create/ActivityCard.tsx    |   2 +-
 .../Pages/annuaire-create/AnnuaireGauge.tsx   |   6 +-
 .../Pages/annuaire-create/HoursDetails.tsx    |   2 +-
 .../Pages/annuaire-create/Modifications.tsx   |   2 +-
 .../Pages/annuaire-create/Step3.tsx           |   2 +-
 .../Pages/annuaire-create/Step4.tsx           |   2 +-
 .../Pages/annuaire-create/Step5.tsx           |   2 +-
 .../Pages/annuaire/index/Letter.tsx           |   2 +-
 .../recherche/ThemeDropdown/NeedsList.tsx     |   2 +-
 .../components/UI/ThemeButton/ThemeButton.tsx |   4 +-
 client/src/pages/qui-sommes-nous.tsx          |   4 +-
 yarn.lock                                     | 101 +++++++++---------
 24 files changed, 90 insertions(+), 95 deletions(-)

diff --git a/client/package.json b/client/package.json
index 05acd751df..dee44abcbe 100644
--- a/client/package.json
+++ b/client/package.json
@@ -64,7 +64,7 @@
     "remixicon": "^4.3.0",
     "sharp": "^0.33.4",
     "sortablejs": "^1.15.0",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.11",
     "sweetalert2": "^11.6.16",
     "typesafe-actions": "^5.1.0",
     "uuid": "^10.0.0"
diff --git a/client/src/components/Backend/UserDetail/UserDetail.tsx b/client/src/components/Backend/UserDetail/UserDetail.tsx
index 4e41fc0958..816e5ebca1 100644
--- a/client/src/components/Backend/UserDetail/UserDetail.tsx
+++ b/client/src/components/Backend/UserDetail/UserDetail.tsx
@@ -12,7 +12,7 @@ interface Props {
   onSelectItem: (data: GetActiveUsersResponse) => void;
 }
 
-const UserDetailContainer = styled.div`
+const UserDetailContainer = styled.div<{ isSelected: boolean }>`
   width: 100%;
   height: 66px;
   margin-bottom: 10px;
@@ -34,7 +34,7 @@ const UserDetailContainer = styled.div`
   }
 `;
 
-const Text = styled.div`
+const Text = styled.div<{ isSelected: boolean }>`
   font-size: 16px;
   line-height: 20px;
   color: ${(props: { isSelected: boolean }) => (props.isSelected ? colors.white : colors.gray90)};
diff --git a/client/src/components/Backend/screens/Admin/Admin.tsx b/client/src/components/Backend/screens/Admin/Admin.tsx
index d4b7634876..82a88773a8 100644
--- a/client/src/components/Backend/screens/Admin/Admin.tsx
+++ b/client/src/components/Backend/screens/Admin/Admin.tsx
@@ -20,7 +20,7 @@ import { fetchNeedsActionCreator } from "services/Needs/needs.actions";
 import styles from "./Admin.module.scss";
 import { getInitialTab, setSavedQuery, TabQuery } from "lib/getAdminUrlParams";
 
-const OngletText = styled.span`
+const OngletText = styled.span<{ isActive: boolean }>`
   color: ${(props: { isActive: boolean }) => (props.isActive ? colors.bleuCharte : colors.gray90)};
   font-weight: ${(props: { isActive: boolean }) => (props.isActive ? "bold" : "normal")};
 `;
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
index 806bebffdd..f93a7eccb8 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
@@ -9,7 +9,7 @@ import styles from "../Admin.module.scss";
 import { GetAllDispositifsResponse, Id } from "@refugies-info/api-types";
 import { useUser } from "hooks";
 
-const Container = styled.div`
+const Container = styled.div<{ isDarkBackground: boolean }>`
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -101,7 +101,7 @@ interface StyledStatusContainer {
   textColor?: string;
   color: string;
 }
-export const StyledStatusContainer = styled.div`
+export const StyledStatusContainer = styled.div<StyledStatusContainer>`
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -175,7 +175,7 @@ interface ButtonContainerProps {
   disabled?: boolean;
   hoverColor?: string;
 }
-const ButtonContainer = styled.div`
+const ButtonContainer = styled.div<ButtonContainerProps>`
   width: 40px;
   height: 40px;
   background-color: ${colors.gray70};
@@ -234,7 +234,7 @@ export const DeleteButton = (props: { onClick: (event: any) => void; disabled: b
   </ButtonContainer>
 );
 
-const FilterButtonContainer = styled.div`
+const FilterButtonContainer = styled.div<{ isSelected: boolean }>`
   background: ${(props: { isSelected: boolean }) => (props.isSelected ? colors.gray90 : colors.white)};
   color: ${(props: { isSelected: boolean }) => (props.isSelected ? colors.white : colors.gray90)};
   border-radius: 12px;
@@ -253,7 +253,7 @@ export const FilterButton = (props: { onClick: () => void; text: string; isSelec
   </FilterButtonContainer>
 );
 
-const StyledTabHeader = styled.div`
+const StyledTabHeader = styled.div<{ order: number }>`
   display: flex;
   flex-direction: row;
   font-weight: bold;
diff --git a/client/src/components/Backend/screens/UserContributions/components/SubComponents.tsx b/client/src/components/Backend/screens/UserContributions/components/SubComponents.tsx
index d83e1881fd..c6f60e70c8 100644
--- a/client/src/components/Backend/screens/UserContributions/components/SubComponents.tsx
+++ b/client/src/components/Backend/screens/UserContributions/components/SubComponents.tsx
@@ -17,7 +17,7 @@ export const ContribContainer = styled.div`
   height: fit-content;
 `;
 
-const Container = styled.div`
+const Container = styled.div<{ isDarkBackground: boolean }>`
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -67,7 +67,7 @@ interface ContribStyledStatusContainerProps {
   textColor?: string;
   color: string;
 }
-const ContribStyledStatusContainer = styled.div`
+const ContribStyledStatusContainer = styled.div<ContribStyledStatusContainerProps>`
   display: flex;
   align-items: center;
   font-weight: bold;
diff --git a/client/src/components/Backend/screens/UserFavorites/components/NoFavorites.component.tsx b/client/src/components/Backend/screens/UserFavorites/components/NoFavorites.component.tsx
index 00e86fba8a..35ded77a3b 100644
--- a/client/src/components/Backend/screens/UserFavorites/components/NoFavorites.component.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/components/NoFavorites.component.tsx
@@ -30,7 +30,7 @@ const EmptyCardContainer = styled.div`
   justify-content: space-between;
 `;
 
-const GrayLine = styled.div`
+const GrayLine = styled.div<{ width: string }>`
   background: ${colors.gray60};
   border-radius: 8px;
   width: ${(props: { width: string }) => props.width};
@@ -38,7 +38,7 @@ const GrayLine = styled.div`
   margin-bottom: 8px;
 `;
 
-const SmallGrayLine = styled.div`
+const SmallGrayLine = styled.div<{ width: string }>`
   background: ${colors.gray60};
   border-radius: 3px;
   width: ${(props: { width: string }) => props.width};
diff --git a/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx b/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
index 81886950d4..113a71d53d 100644
--- a/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
@@ -7,7 +7,7 @@ import FButton from "components/UI/FButton/FButton";
 import { colors } from "colors";
 import { getPath } from "routes";
 
-const Container = styled.div`
+const Container = styled.div<{ read: boolean }>`
   background: ${(props: { read: boolean }) => (props.read ? colors.white : colors.focus)};
   border-radius: 12px;
   padding: 8px 8px 8px 20px;
@@ -31,7 +31,7 @@ const RowContainer = styled.div`
   align-items: center;
 `;
 
-const TextContainer = styled.div`
+const TextContainer = styled.div<{ read: boolean }>`
   font-weight: bold;
   font-size: 18px;
   line-height: 23px;
@@ -49,7 +49,7 @@ const DispositifTitle = styled.div`
   margin-left: 8px;
 `;
 
-const DateContainer = styled.div`
+const DateContainer = styled.div<{ read: boolean }>`
   font-weight: bold;
   font-size: 16px;
   line-height: 20px;
diff --git a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
index 84b3d2d6e8..2e00a6db5a 100644
--- a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
@@ -17,14 +17,14 @@ const RowContainer = styled.div`
   align-items: center;
 `;
 
-const UserName = styled.div`
+const UserName = styled.div<{ isUser: boolean }>`
   font-weight: bold;
   font-size: 16px;
   line-height: 20px;
   color: ${(props: { isUser: boolean }) => (props.isUser ? colors.bleuCharte : colors.gray90)};
 `;
 
-const RoleContainer = styled.div`
+const RoleContainer = styled.div<{ isUser: boolean }>`
   background: ${colors.white};
   border-radius: 8px;
   padding: 8px;
@@ -35,7 +35,7 @@ const RoleContainer = styled.div`
   width: fit-content;
 `;
 
-const DateContainer = styled.div`
+const DateContainer = styled.div<{ isUser: boolean }>`
   color: ${(props: { isUser: boolean }) => (props.isUser ? colors.bleuCharte : colors.gray90)};
   max-width: 190px;
 `;
diff --git a/client/src/components/Backend/screens/UserStructure/components/Role.tsx b/client/src/components/Backend/screens/UserStructure/components/Role.tsx
index cd6922cc57..759bdf7f8a 100644
--- a/client/src/components/Backend/screens/UserStructure/components/Role.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/Role.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { colors } from "colors";
 import EVAIcon from "components/UI/EVAIcon";
 
-const MainContainer = styled.div`
+const MainContainer = styled.div<{ state: string }>`
   background: ${(props: { state: string }) =>
     props.state === "selected" ? colors.focus : props.state === "current" ? colors.grey2 : colors.white};
   border-width: 1px;
diff --git a/client/src/components/Backend/screens/UserStructure/components/SubComponents.tsx b/client/src/components/Backend/screens/UserStructure/components/SubComponents.tsx
index 572501cea4..189157c239 100644
--- a/client/src/components/Backend/screens/UserStructure/components/SubComponents.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/SubComponents.tsx
@@ -32,7 +32,7 @@ export const StructurePictureContainer = styled.div`
   height: fit-content;
 `;
 
-export const Title = styled.div`
+export const Title = styled.div<{marginTop?: string}>`
   font-weight: bold;
   font-size: 18px;
   line-height: 23px;
diff --git a/client/src/components/Backend/screens/UserTranslation/components/SubComponents.tsx b/client/src/components/Backend/screens/UserTranslation/components/SubComponents.tsx
index fc1b44c443..cc1ebfb90b 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/SubComponents.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/components/SubComponents.tsx
@@ -12,7 +12,7 @@ interface Props {
   hasMultipleLanguages: boolean;
 }
 
-const MainContainer = styled.div`
+const MainContainer = styled.div<{ hasMultipleLanguages: boolean }>`
   display: flex;
   flex-direction: row;
   margin-right: 16px;
@@ -24,7 +24,7 @@ interface TitleProps {
   hasMultipleLanguages: boolean;
   isSelected: boolean;
 }
-const Title = styled.div`
+const Title = styled.div<TitleProps>`
   font-weight: bold;
   font-size: ${(props: TitleProps) => (props.isSelected ? "28px" : "16px")};
   line-height: ${(props: TitleProps) => (props.isSelected ? "35px" : "20px")};
@@ -96,7 +96,7 @@ interface TradStatusProps {
   status: TraductionsStatus;
 }
 
-const TradStatusContainer = styled.div`
+const TradStatusContainer = styled.div<{ backgroundColor: string }>`
   font-weight: bold;
   font-size: 12px;
   line-height: 15px;
@@ -132,7 +132,7 @@ interface FilterButtonContainerProps {
   isSelected: boolean;
   color: string;
 }
-const FilterButtonContainer = styled.button`
+const FilterButtonContainer = styled.button<FilterButtonContainerProps>`
   color: ${(props: FilterButtonContainerProps) => (props.isSelected ? colors.white : props.color)};
   background-color: ${(props: FilterButtonContainerProps) => (props.isSelected ? props.color : colors.white)};
 
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.tsx b/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.tsx
index f7a8207666..50d9ed2fdb 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.tsx
@@ -31,7 +31,7 @@ const SubTitle = styled.div`
   margin: 45px 50px 15px 50px;
 `;
 
-const LangueItemContainer = styled.div`
+const LangueItemContainer = styled.div<{ isSelected: boolean }>`
   background: ${(props: { isSelected: boolean }) => (props.isSelected ? colors.validation : colors.gray20)};
   border-radius: 12px;
   display: flex;
@@ -54,7 +54,7 @@ const LanguesContainer = styled.div`
   margin: 0px 45px 0px 45px;
 `;
 
-const CheckBoxContainer = styled.div`
+const CheckBoxContainer = styled.div<{ isSelected: boolean }>`
   background: ${(props: { isSelected: boolean }) => (props.isSelected ? colors.validationDefault : colors.white)};
   border: ${(props: { isSelected: boolean }) =>
     props.isSelected ? `1px solid ${colors.validationDefault}` : `1px solid ${colors.gray50}`};
diff --git a/client/src/components/Pages/annuaire-create/ActivityCard.tsx b/client/src/components/Pages/annuaire-create/ActivityCard.tsx
index 866fad3006..e0bfcfdcee 100644
--- a/client/src/components/Pages/annuaire-create/ActivityCard.tsx
+++ b/client/src/components/Pages/annuaire-create/ActivityCard.tsx
@@ -24,7 +24,7 @@ interface CardContainerProps {
   lightColor: string;
   darkColor: string;
 }
-const CardContainer = styled.div`
+const CardContainer = styled.div<CardContainerProps>`
   width: 200px;
   height: ${(props: CardContainerProps) => (props.isLectureMode ? "260px" : "220px")};
   background: ${(props: CardContainerProps) => (props.isSelected ? props.lightColor : "#ffffff")};
diff --git a/client/src/components/Pages/annuaire-create/AnnuaireGauge.tsx b/client/src/components/Pages/annuaire-create/AnnuaireGauge.tsx
index 1f794ac948..e05751c26c 100644
--- a/client/src/components/Pages/annuaire-create/AnnuaireGauge.tsx
+++ b/client/src/components/Pages/annuaire-create/AnnuaireGauge.tsx
@@ -13,7 +13,7 @@ interface StickLineProps {
   colorFilled: string
   colorToDo: string
 }
-const StickLine = styled.div`
+const StickLine = styled.div<StickLineProps>`
   display: flex;
   flex: 1;
   background: ${(props: StickLineProps) =>
@@ -28,7 +28,7 @@ interface StepContainerProps {
   value: number
   filled: boolean
 }
-const StepContainer = styled.div`
+const StepContainer = styled.div<StepContainerProps>`
   background: #ffffff;
   border-width: ${(props: StepContainerProps) => (props.selected ? "3px" : "0px")};
   border-style: solid;
@@ -52,7 +52,7 @@ interface StepTextProps {
   selected: boolean
   colorFilled: string
 }
-const StepText = styled.div`
+const StepText = styled.div<StepTextProps>`
   font-weight: bold;
   font-size: 18px;
   line-height: 23px;
diff --git a/client/src/components/Pages/annuaire-create/HoursDetails.tsx b/client/src/components/Pages/annuaire-create/HoursDetails.tsx
index cc653edfc8..43d19f6c41 100644
--- a/client/src/components/Pages/annuaire-create/HoursDetails.tsx
+++ b/client/src/components/Pages/annuaire-create/HoursDetails.tsx
@@ -12,7 +12,7 @@ interface Props {
   onChange: (arg1: any, arg2: string, arg3: string) => void;
 }
 
-const MainContainer = styled.div`
+const MainContainer = styled.div<{ isDayChecked: boolean }>`
   background: ${(props: { isDayChecked: boolean }) => (props.isDayChecked ? "#DEF7C2" : "#f2f2f2")};
   border-radius: 12px;
   padding: 12px;
diff --git a/client/src/components/Pages/annuaire-create/Modifications.tsx b/client/src/components/Pages/annuaire-create/Modifications.tsx
index 74ed06832b..c5f96cd199 100644
--- a/client/src/components/Pages/annuaire-create/Modifications.tsx
+++ b/client/src/components/Pages/annuaire-create/Modifications.tsx
@@ -7,7 +7,7 @@ interface Props {
   hasModifications: boolean;
 }
 
-const MainContainer = styled.div`
+const MainContainer = styled.div<{hasModifications: boolean}>`
   width: 360px;
   background: ${(props: {hasModifications: boolean}) => (props.hasModifications ? "#ffe2b8" : "#BDF0C7")};
   border-radius: 12px;
diff --git a/client/src/components/Pages/annuaire-create/Step3.tsx b/client/src/components/Pages/annuaire-create/Step3.tsx
index 8e9665d02e..4c48d5661d 100644
--- a/client/src/components/Pages/annuaire-create/Step3.tsx
+++ b/client/src/components/Pages/annuaire-create/Step3.tsx
@@ -42,7 +42,7 @@ interface TagActivityProps {
   backgroundColor: string;
   color: string;
 }
-const TagActivity = styled.div`
+const TagActivity = styled.div<TagActivityProps>`
   width: 740px;
   background: ${(props: TagActivityProps) => props.backgroundColor};
   border-radius: 12px;
diff --git a/client/src/components/Pages/annuaire-create/Step4.tsx b/client/src/components/Pages/annuaire-create/Step4.tsx
index fea7df1bde..3b4a88a82a 100644
--- a/client/src/components/Pages/annuaire-create/Step4.tsx
+++ b/client/src/components/Pages/annuaire-create/Step4.tsx
@@ -64,7 +64,7 @@ const DepartmentContainer = styled.div`
   flex-wrap: wrap;
 `;
 
-const CheckboxContainer = styled.div`
+const CheckboxContainer = styled.div<{ checked: boolean }>`
   background: ${(props: { checked: boolean }) => (props.checked ? "#DEF7C2" : "#f2f2f2")};
   border-radius: 12px;
   width: fit-content;
diff --git a/client/src/components/Pages/annuaire-create/Step5.tsx b/client/src/components/Pages/annuaire-create/Step5.tsx
index 833a40dff2..8683b4d1de 100644
--- a/client/src/components/Pages/annuaire-create/Step5.tsx
+++ b/client/src/components/Pages/annuaire-create/Step5.tsx
@@ -58,7 +58,7 @@ const Title = styled.div`
   margin-bottom: 16px;
 `;
 
-const RemainingCaracters = styled.div`
+const RemainingCaracters = styled.div<{ caractersRemaining: boolean }>`
   margin-top: 8px;
   align-self: flex-end;
   color: ${(props: { caractersRemaining: boolean }) => (props.caractersRemaining ? "#4CAF50" : "red")};
diff --git a/client/src/components/Pages/annuaire/index/Letter.tsx b/client/src/components/Pages/annuaire/index/Letter.tsx
index 86af332615..fb539cc644 100644
--- a/client/src/components/Pages/annuaire/index/Letter.tsx
+++ b/client/src/components/Pages/annuaire/index/Letter.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 interface MainContainerProps {
   isClickable: boolean
 }
-const MainContainer = styled.a`
+const MainContainer = styled.a<MainContainerProps>`
   border-radius: 8px;
   width: 36px;
   height: 36px;
diff --git a/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx b/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
index de2eeaac7d..21a52e183a 100644
--- a/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
+++ b/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
@@ -22,7 +22,7 @@ type ButtonNeedProps = {
   color30: string;
   selected: boolean;
 };
-const ButtonNeed = styled.button`
+const ButtonNeed = styled.button<ButtonNeedProps>`
   background-color: ${(props: ButtonNeedProps) => (props.selected ? props.color30 : "transparent")};
   color: ${(props: ButtonNeedProps) => props.color100};
   :hover {
diff --git a/client/src/components/UI/ThemeButton/ThemeButton.tsx b/client/src/components/UI/ThemeButton/ThemeButton.tsx
index 5cb2192bab..1f652fd17e 100644
--- a/client/src/components/UI/ThemeButton/ThemeButton.tsx
+++ b/client/src/components/UI/ThemeButton/ThemeButton.tsx
@@ -6,7 +6,7 @@ import { getThemeName } from "lib/getThemeName";
 import ThemeIcon from "../ThemeIcon";
 import { GetThemeResponse } from "@refugies-info/api-types";
 
-const ThemeButtonContainer = styled.div`
+const ThemeButtonContainer = styled.div<{ color: string }>`
   background-color: ${(props: { color: string }) => props.color};
   display: flex;
   flex-direction: row;
@@ -18,7 +18,7 @@ const ThemeButtonContainer = styled.div`
   width: fit-content;
 `;
 
-const ThemeText = styled.p`
+const ThemeText = styled.p<{ mr?: number }>`
   color: white;
   font-size: 12px;
   margin-left: 8px;
diff --git a/client/src/pages/qui-sommes-nous.tsx b/client/src/pages/qui-sommes-nous.tsx
index 22e253b45c..4eabadd15a 100644
--- a/client/src/pages/qui-sommes-nous.tsx
+++ b/client/src/pages/qui-sommes-nous.tsx
@@ -35,7 +35,7 @@ const HeaderTextContainer = styled.div`
   margin-bottom: 4px;
 `;
 
-const NavBarContainer = styled.div`
+const NavBarContainer = styled.div<{ isToolbarVisible: boolean }>`
   position: sticky;
   position: -webkit-sticky;
   top: 75px;
@@ -49,7 +49,7 @@ const NavBarContainer = styled.div`
   top: ${(props: { isToolbarVisible: boolean }) => (!props.isToolbarVisible ? "0px !important" : "0px !important")};
 `;
 
-const NavBarText = styled.div`
+const NavBarText = styled.div<{ isVisibleSection: boolean }>`
   padding: 22px;
   height: 100%;
   &:hover {
diff --git a/yarn.lock b/yarn.lock
index fb3d07cfea..eb7cc8b640 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -199,13 +199,6 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.22.5":
-  version "7.24.7"
-  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz"
-  integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
-  dependencies:
-    "@babel/types" "^7.24.7"
-
 "@babel/helper-compilation-targets@^7.24.7":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.7.tgz"
@@ -239,7 +232,7 @@
   dependencies:
     "@babel/types" "^7.24.7"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.24.7":
+"@babel/helper-module-imports@^7.24.7":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz"
   integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
@@ -351,7 +344,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.22.5", "@babel/plugin-syntax-jsx@^7.7.2":
+"@babel/plugin-syntax-jsx@^7.7.2":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz"
   integrity sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==
@@ -430,7 +423,7 @@
     "@babel/parser" "^7.24.7"
     "@babel/types" "^7.24.7"
 
-"@babel/traverse@^7.24.7", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.24.7":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.7.tgz"
   integrity sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==
@@ -501,9 +494,9 @@
   dependencies:
     tslib "^2.4.0"
 
-"@emotion/is-prop-valid@^1.1.0":
+"@emotion/is-prop-valid@1.2.2":
   version "1.2.2"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
   integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
@@ -513,15 +506,10 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/unitless@0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -2400,6 +2388,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/stylis@4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
 "@types/testing-library__jest-dom@^5.9.1":
   version "5.14.9"
   resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz"
@@ -3118,17 +3111,6 @@ babel-plugin-jest-hoist@^29.6.3:
     "@types/babel__core" "^7.1.14"
     "@types/babel__traverse" "^7.0.6"
 
-"babel-plugin-styled-components@>= 1.12.0":
-  version "2.1.4"
-  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz"
-  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-module-imports" "^7.22.5"
-    "@babel/plugin-syntax-jsx" "^7.22.5"
-    lodash "^4.17.21"
-    picomatch "^2.3.1"
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz"
@@ -3789,9 +3771,9 @@ css-select@^4.3.0:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
-css-to-react-native@^3.0.0:
+css-to-react-native@3.2.0:
   version "3.2.0"
-  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
   integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
   dependencies:
     camelize "^1.0.0"
@@ -3838,7 +3820,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2, csstype@^3.1.2:
+csstype@3.1.3, csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -5382,7 +5364,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7764,6 +7746,15 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@8.4.38:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
+
 postcss@^8.0.0, postcss@^8.4.35, postcss@^8.4.5:
   version "8.4.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
@@ -8765,7 +8756,7 @@ shallow-equal@^1.2.1:
   resolved "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -9235,21 +9226,20 @@ stubs@^3.0.0:
   resolved "https://registry.yarnpkg.com/stubs/-/stubs-3.0.0.tgz#e8d2ba1fa9c90570303c030b6900f7d5f89abe5b"
   integrity sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==
 
-styled-components@^5.3.6:
-  version "5.3.11"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz"
-  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+styled-components@^6.1.11:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.11.tgz#01948e5195bf1d39e57e0a85b41958c80e40cfb8"
+  integrity sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.2"
+    "@emotion/unitless" "0.8.1"
+    "@types/stylis" "4.2.5"
+    css-to-react-native "3.2.0"
+    csstype "3.1.3"
+    postcss "8.4.38"
+    shallowequal "1.1.0"
+    stylis "4.3.2"
+    tslib "2.6.2"
 
 styled-jsx@5.1.1:
   version "5.1.1"
@@ -9258,7 +9248,7 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
-stylis@^4.3.0:
+stylis@4.3.2, stylis@^4.3.0:
   version "4.3.2"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
@@ -9555,6 +9545,11 @@ tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"

From c049c68d7f9dc48a663b49bd7b6f3fa7ff0872f2 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 15:03:57 +0200
Subject: [PATCH 08/37] chore(client): :white_check_mark: Update snapshots due
 to new styledcomponents library

---
 .../__snapshots__/index.test.tsx.snap         | 260 +++++----
 .../__snapshots__/recherche.test.tsx.snap     | 162 +++---
 .../__snapshots__/SubComponents.test.tsx.snap | 176 +-----
 .../UserContributions.component.test.tsx.snap | 296 +---------
 .../UserFavorites.component.test.tsx.snap     |  78 +--
 .../UserNotifications.test.tsx.snap           |  67 +--
 .../__snapshots__/UserStructure.test.tsx.snap | 514 ++----------------
 .../UserTranslation.component.test.tsx.snap   |  69 ---
 8 files changed, 371 insertions(+), 1251 deletions(-)

diff --git a/client/src/__tests__/__snapshots__/index.test.tsx.snap b/client/src/__tests__/__snapshots__/index.test.tsx.snap
index 0e8386e4b3..8178b7d930 100644
--- a/client/src/__tests__/__snapshots__/index.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`homepage renders homepage 1`] = `
   color: #443023;
 }
 
-.c13:hover {
+.c13 :hover {
   background-color: #EEE7E5;
 }
 
@@ -14,8 +14,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: #443023;
 }
 
-.c0:not(:disabled):hover {
-  background-color: #443023 !important;
+.c0 :not(:disabled):hover {
+  background-color: #443023!important;
   border-color: #443023;
   color: #443023;
 }
@@ -24,8 +24,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c1:not(:disabled):hover {
-  background-color: #EFE8F4 !important;
+.c1 :not(:disabled):hover {
+  background-color: #EFE8F4!important;
   border-color: #3D2884;
   color: #3D2884;
 }
@@ -34,8 +34,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c2:not(:disabled):hover {
-  background-color: #E8F4E8 !important;
+.c2 :not(:disabled):hover {
+  background-color: #E8F4E8!important;
   border-color: #095411;
   color: #095411;
 }
@@ -44,8 +44,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c3:not(:disabled):hover {
-  background-color: #EDFDF9 !important;
+.c3 :not(:disabled):hover {
+  background-color: #EDFDF9!important;
   border-color: #055E5A;
   color: #055E5A;
 }
@@ -54,8 +54,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c4:not(:disabled):hover {
-  background-color: #DDF2F9 !important;
+.c4 :not(:disabled):hover {
+  background-color: #DDF2F9!important;
   border-color: #06508C;
   color: #06508C;
 }
@@ -64,8 +64,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c5:not(:disabled):hover {
-  background-color: #FFEDED !important;
+.c5 :not(:disabled):hover {
+  background-color: #FFEDED!important;
   border-color: #910940;
   color: #910940;
 }
@@ -74,8 +74,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c6:not(:disabled):hover {
-  background-color: #FEEBDE !important;
+.c6 :not(:disabled):hover {
+  background-color: #FEEBDE!important;
   border-color: #CD5605;
   color: #CD5605;
 }
@@ -84,8 +84,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c7:not(:disabled):hover {
-  background-color: #FFEAF4 !important;
+.c7 :not(:disabled):hover {
+  background-color: #FFEAF4!important;
   border-color: #770649;
   color: #770649;
 }
@@ -94,8 +94,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c8:not(:disabled):hover {
-  background-color: #F2F9E5 !important;
+.c8 :not(:disabled):hover {
+  background-color: #F2F9E5!important;
   border-color: #204F01;
   color: #204F01;
 }
@@ -104,8 +104,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c9:not(:disabled):hover {
-  background-color: #EEF8FF !important;
+.c9 :not(:disabled):hover {
+  background-color: #EEF8FF!important;
   border-color: #073099;
   color: #073099;
 }
@@ -114,8 +114,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c10:not(:disabled):hover {
-  background-color: #F9F1FD !important;
+.c10 :not(:disabled):hover {
+  background-color: #F9F1FD!important;
   border-color: #600566;
   color: #600566;
 }
@@ -124,8 +124,8 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c11:not(:disabled):hover {
-  background-color: #F9E8E8 !important;
+.c11 :not(:disabled):hover {
+  background-color: #F9E8E8!important;
   border-color: #9E180A;
   color: #9E180A;
 }
@@ -134,296 +134,296 @@ exports[`homepage renders homepage 1`] = `
   background-color: transparent;
 }
 
-.c12:not(:disabled):hover {
-  background-color: #FDC4FC !important;
+.c12 :not(:disabled):hover {
+  background-color: #FDC4FC!important;
   border-color: #77057A;
   color: #77057A;
 }
 
 .c14 {
-  background: linear-gradient(90deg,#443023 22%,#715F56 100%);
+  background: linear-gradient(90deg, #443023 22%, #715F56 100%);
 }
 
-.c14:hover {
+.c14 :hover {
   background: #EEE7E5;
   box-shadow: 0 0 0 1px #443023,0 0 40px 0 #00000040;
-  color: #443023 !important;
+  color: #443023!important;
 }
 
 .c15 {
-  background: linear-gradient(90deg,#3D2884 22%,#705FA4 100%);
+  background: linear-gradient(90deg, #3D2884 22%, #705FA4 100%);
 }
 
-.c15:hover {
+.c15 :hover {
   background: #EFE8F4;
   box-shadow: 0 0 0 1px #3D2884,0 0 40px 0 #00000040;
-  color: #3D2884 !important;
+  color: #3D2884!important;
 }
 
 .c16 {
-  background: linear-gradient(90deg,#095411 22%,#26B759 100%);
+  background: linear-gradient(90deg, #095411 22%, #26B759 100%);
 }
 
-.c16:hover {
+.c16 :hover {
   background: #E8F4E8;
   box-shadow: 0 0 0 1px #095411,0 0 40px 0 #00000040;
-  color: #095411 !important;
+  color: #095411!important;
 }
 
 .c17 {
-  background: linear-gradient(90deg,#055E5A 22%,#27A8A5 100%);
+  background: linear-gradient(90deg, #055E5A 22%, #27A8A5 100%);
 }
 
-.c17:hover {
+.c17 :hover {
   background: #EDFDF9;
   box-shadow: 0 0 0 1px #055E5A,0 0 40px 0 #00000040;
-  color: #055E5A !important;
+  color: #055E5A!important;
 }
 
 .c18 {
-  background: linear-gradient(90deg,#06508C 22%,#1E9ED1 100%);
+  background: linear-gradient(90deg, #06508C 22%, #1E9ED1 100%);
 }
 
-.c18:hover {
+.c18 :hover {
   background: #DDF2F9;
   box-shadow: 0 0 0 1px #06508C,0 0 40px 0 #00000040;
-  color: #06508C !important;
+  color: #06508C!important;
 }
 
 .c19 {
-  background: linear-gradient(90deg,#910940 22%,#D64B71 100%);
+  background: linear-gradient(90deg, #910940 22%, #D64B71 100%);
 }
 
-.c19:hover {
+.c19 :hover {
   background: #FFEDED;
   box-shadow: 0 0 0 1px #910940,0 0 40px 0 #00000040;
-  color: #910940 !important;
+  color: #910940!important;
 }
 
 .c20 {
-  background: linear-gradient(90deg,#CD5605 22%,#F97319 100%);
+  background: linear-gradient(90deg, #CD5605 22%, #F97319 100%);
 }
 
-.c20:hover {
+.c20 :hover {
   background: #FEEBDE;
   box-shadow: 0 0 0 1px #CD5605,0 0 40px 0 #00000040;
-  color: #CD5605 !important;
+  color: #CD5605!important;
 }
 
 .c21 {
-  background: linear-gradient(90deg,#770649 22%,#D01F67 100%);
+  background: linear-gradient(90deg, #770649 22%, #D01F67 100%);
 }
 
-.c21:hover {
+.c21 :hover {
   background: #FFEAF4;
   box-shadow: 0 0 0 1px #770649,0 0 40px 0 #00000040;
-  color: #770649 !important;
+  color: #770649!important;
 }
 
 .c22 {
-  background: linear-gradient(90deg,#204F01 22%,#47AA0A 100%);
+  background: linear-gradient(90deg, #204F01 22%, #47AA0A 100%);
 }
 
-.c22:hover {
+.c22 :hover {
   background: #F2F9E5;
   box-shadow: 0 0 0 1px #204F01,0 0 40px 0 #00000040;
-  color: #204F01 !important;
+  color: #204F01!important;
 }
 
 .c23 {
-  background: linear-gradient(90deg,#073099 22%,#1C66DD 100%);
+  background: linear-gradient(90deg, #073099 22%, #1C66DD 100%);
 }
 
-.c23:hover {
+.c23 :hover {
   background: #EEF8FF;
   box-shadow: 0 0 0 1px #073099,0 0 40px 0 #00000040;
-  color: #073099 !important;
+  color: #073099!important;
 }
 
 .c24 {
-  background: linear-gradient(90deg,#600566 22%,#9E2DAD 100%);
+  background: linear-gradient(90deg, #600566 22%, #9E2DAD 100%);
 }
 
-.c24:hover {
+.c24 :hover {
   background: #F9F1FD;
   box-shadow: 0 0 0 1px #600566,0 0 40px 0 #00000040;
-  color: #600566 !important;
+  color: #600566!important;
 }
 
 .c25 {
-  background: linear-gradient(90deg,#9E180A 22%,#E05A3E 100%);
+  background: linear-gradient(90deg, #9E180A 22%, #E05A3E 100%);
 }
 
-.c25:hover {
+.c25 :hover {
   background: #F9E8E8;
   box-shadow: 0 0 0 1px #9E180A,0 0 40px 0 #00000040;
-  color: #9E180A !important;
+  color: #9E180A!important;
 }
 
 .c26 {
-  background: linear-gradient(90deg,#77057A 22%,#9E2DAD 100%);
+  background: linear-gradient(90deg, #77057A 22%, #9E2DAD 100%);
 }
 
-.c26:hover {
+.c26 :hover {
   background: #FDC4FC;
   box-shadow: 0 0 0 1px #77057A,0 0 40px 0 #00000040;
-  color: #77057A !important;
+  color: #77057A!important;
 }
 
-.c27:hover,
-.favorite:hover + .c27 {
-  background-color: #EEEEEE !important;
-  border-color: #3A3A3A !important;
-  color: #3A3A3A !important;
+.c27 :hover,
+.favorite:hover+.c27 {
+  background-color: #EEEEEE!important;
+  border-color: #3A3A3A!important;
+  color: #3A3A3A!important;
 }
 
-.c28:hover,
-.favorite:hover + .c28 {
-  background-color: #EEEEEE !important;
-  border-color: #3A3A3A !important;
-  color: #3A3A3A !important;
+.c28 :hover,
+.favorite:hover+.c28 {
+  background-color: #EEEEEE!important;
+  border-color: #3A3A3A!important;
+  color: #3A3A3A!important;
 }
 
 @media screen and (max-width:767px) {
   .c0 {
-    background-color: #443023 !important;
-    color: white !important;
-    border-color: white !important;
+    background-color: #443023!important;
+    color: white!important;
+    border-color: white!important;
   }
 
-  .c0:hover {
+  .c0 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c1 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c1:hover {
+  .c1 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c2 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c2:hover {
+  .c2 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c3 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c3:hover {
+  .c3 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c4 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c4:hover {
+  .c4 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c5 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c5:hover {
+  .c5 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c6 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c6:hover {
+  .c6 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c7 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c7:hover {
+  .c7 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c8 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c8:hover {
+  .c8 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c9 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c9:hover {
+  .c9 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c10 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c10:hover {
+  .c10 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c11 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c11:hover {
+  .c11 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c12 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c12:hover {
+  .c12 :hover {
     background-color: transparent;
   }
 }
@@ -628,6 +628,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c0 btn"
+                      color100="#443023"
+                      color30="#EEE7E5"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -694,6 +696,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c1 btn"
+                      color100="#3D2884"
+                      color30="#EFE8F4"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -745,6 +749,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c2 btn"
+                      color100="#095411"
+                      color30="#E8F4E8"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -796,6 +802,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c3 btn"
+                      color100="#055E5A"
+                      color30="#EDFDF9"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -847,6 +855,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c4 btn"
+                      color100="#06508C"
+                      color30="#DDF2F9"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -898,6 +908,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c5 btn"
+                      color100="#910940"
+                      color30="#FFEDED"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -949,6 +961,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c6 btn"
+                      color100="#CD5605"
+                      color30="#FEEBDE"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1000,6 +1014,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c7 btn"
+                      color100="#770649"
+                      color30="#FFEAF4"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1051,6 +1067,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c8 btn"
+                      color100="#204F01"
+                      color30="#F2F9E5"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1102,6 +1120,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c9 btn"
+                      color100="#073099"
+                      color30="#EEF8FF"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1153,6 +1173,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c10 btn"
+                      color100="#600566"
+                      color30="#F9F1FD"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1204,6 +1226,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c11 btn"
+                      color100="#9E180A"
+                      color30="#F9E8E8"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1255,6 +1279,8 @@ exports[`homepage renders homepage 1`] = `
                   <div>
                     <button
                       className="c12 btn"
+                      color100="#77057A"
+                      color30="#FDC4FC"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1309,6 +1335,8 @@ exports[`homepage renders homepage 1`] = `
                 >
                   <button
                     className="c13 btn need"
+                    color100="#443023"
+                    color30="#EEE7E5"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     selected={false}
diff --git a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
index 98b5d1cb53..132cf26e6b 100644
--- a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`recherche renders search results 1`] = `
   color: #3D2884;
 }
 
-.c13:hover {
+.c13 :hover {
   background-color: #EFE8F4;
 }
 
@@ -14,8 +14,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c0:not(:disabled):hover {
-  background-color: #EEE7E5 !important;
+.c0 :not(:disabled):hover {
+  background-color: #EEE7E5!important;
   border-color: #443023;
   color: #443023;
 }
@@ -24,8 +24,8 @@ exports[`recherche renders search results 1`] = `
   background-color: #3D2884;
 }
 
-.c1:not(:disabled):hover {
-  background-color: #3D2884 !important;
+.c1 :not(:disabled):hover {
+  background-color: #3D2884!important;
   border-color: #3D2884;
   color: #3D2884;
 }
@@ -34,8 +34,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c2:not(:disabled):hover {
-  background-color: #E8F4E8 !important;
+.c2 :not(:disabled):hover {
+  background-color: #E8F4E8!important;
   border-color: #095411;
   color: #095411;
 }
@@ -44,8 +44,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c3:not(:disabled):hover {
-  background-color: #EDFDF9 !important;
+.c3 :not(:disabled):hover {
+  background-color: #EDFDF9!important;
   border-color: #055E5A;
   color: #055E5A;
 }
@@ -54,8 +54,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c4:not(:disabled):hover {
-  background-color: #DDF2F9 !important;
+.c4 :not(:disabled):hover {
+  background-color: #DDF2F9!important;
   border-color: #06508C;
   color: #06508C;
 }
@@ -64,8 +64,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c5:not(:disabled):hover {
-  background-color: #FFEDED !important;
+.c5 :not(:disabled):hover {
+  background-color: #FFEDED!important;
   border-color: #910940;
   color: #910940;
 }
@@ -74,8 +74,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c6:not(:disabled):hover {
-  background-color: #FEEBDE !important;
+.c6 :not(:disabled):hover {
+  background-color: #FEEBDE!important;
   border-color: #CD5605;
   color: #CD5605;
 }
@@ -84,8 +84,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c7:not(:disabled):hover {
-  background-color: #FFEAF4 !important;
+.c7 :not(:disabled):hover {
+  background-color: #FFEAF4!important;
   border-color: #770649;
   color: #770649;
 }
@@ -94,8 +94,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c8:not(:disabled):hover {
-  background-color: #F2F9E5 !important;
+.c8 :not(:disabled):hover {
+  background-color: #F2F9E5!important;
   border-color: #204F01;
   color: #204F01;
 }
@@ -104,8 +104,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c9:not(:disabled):hover {
-  background-color: #EEF8FF !important;
+.c9 :not(:disabled):hover {
+  background-color: #EEF8FF!important;
   border-color: #073099;
   color: #073099;
 }
@@ -114,8 +114,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c10:not(:disabled):hover {
-  background-color: #F9F1FD !important;
+.c10 :not(:disabled):hover {
+  background-color: #F9F1FD!important;
   border-color: #600566;
   color: #600566;
 }
@@ -124,8 +124,8 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c11:not(:disabled):hover {
-  background-color: #F9E8E8 !important;
+.c11 :not(:disabled):hover {
+  background-color: #F9E8E8!important;
   border-color: #9E180A;
   color: #9E180A;
 }
@@ -134,152 +134,152 @@ exports[`recherche renders search results 1`] = `
   background-color: transparent;
 }
 
-.c12:not(:disabled):hover {
-  background-color: #FDC4FC !important;
+.c12 :not(:disabled):hover {
+  background-color: #FDC4FC!important;
   border-color: #77057A;
   color: #77057A;
 }
 
 @media screen and (max-width:767px) {
   .c0 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c0:hover {
+  .c0 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c1 {
-    background-color: #3D2884 !important;
-    color: white !important;
-    border-color: white !important;
+    background-color: #3D2884!important;
+    color: white!important;
+    border-color: white!important;
   }
 
-  .c1:hover {
+  .c1 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c2 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c2:hover {
+  .c2 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c3 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c3:hover {
+  .c3 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c4 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c4:hover {
+  .c4 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c5 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c5:hover {
+  .c5 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c6 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c6:hover {
+  .c6 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c7 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c7:hover {
+  .c7 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c8 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c8:hover {
+  .c8 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c9 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c9:hover {
+  .c9 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c10 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c10:hover {
+  .c10 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c11 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c11:hover {
+  .c11 :hover {
     background-color: transparent;
   }
 }
 
 @media screen and (max-width:767px) {
   .c12 {
-    background-color: transparent !important;
-    color: white !important;
+    background-color: transparent!important;
+    color: white!important;
   }
 
-  .c12:hover {
+  .c12 :hover {
     background-color: transparent;
   }
 }
@@ -511,6 +511,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c0 btn"
+                      color100="#443023"
+                      color30="#EEE7E5"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -562,6 +564,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c1 btn"
+                      color100="#3D2884"
+                      color30="#EFE8F4"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -629,6 +633,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c2 btn"
+                      color100="#095411"
+                      color30="#E8F4E8"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -680,6 +686,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c3 btn"
+                      color100="#055E5A"
+                      color30="#EDFDF9"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -731,6 +739,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c4 btn"
+                      color100="#06508C"
+                      color30="#DDF2F9"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -782,6 +792,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c5 btn"
+                      color100="#910940"
+                      color30="#FFEDED"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -833,6 +845,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c6 btn"
+                      color100="#CD5605"
+                      color30="#FEEBDE"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -884,6 +898,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c7 btn"
+                      color100="#770649"
+                      color30="#FFEAF4"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -935,6 +951,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c8 btn"
+                      color100="#204F01"
+                      color30="#F2F9E5"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -986,6 +1004,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c9 btn"
+                      color100="#073099"
+                      color30="#EEF8FF"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1037,6 +1057,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c10 btn"
+                      color100="#600566"
+                      color30="#F9F1FD"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1088,6 +1110,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c11 btn"
+                      color100="#9E180A"
+                      color30="#F9E8E8"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1139,6 +1163,8 @@ exports[`recherche renders search results 1`] = `
                   <div>
                     <button
                       className="c12 btn"
+                      color100="#77057A"
+                      color30="#FDC4FC"
                       disabled={true}
                       onClick={[Function]}
                       onKeyDown={[Function]}
@@ -1193,6 +1219,8 @@ exports[`recherche renders search results 1`] = `
                 >
                   <button
                     className="c13 btn need"
+                    color100="#3D2884"
+                    color30="#EFE8F4"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     selected={true}
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
index a6d650e5e0..e533e467ad 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
@@ -6,17 +6,8 @@ exports[`should render DeleteButton disabled 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -31,6 +22,7 @@ exports[`should render DeleteButton disabled 1`] = `
   className="c0"
   data-test-id="delete-button"
   disabled={true}
+  hoverColor="#f44336"
 >
   <div
     style={
@@ -66,17 +58,8 @@ exports[`should render DeleteButton not disabled 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -91,6 +74,7 @@ exports[`should render DeleteButton not disabled 1`] = `
   className="c0"
   data-test-id="delete-button"
   disabled={false}
+  hoverColor="#f44336"
   onClick={[Function]}
 >
   <div
@@ -130,18 +114,15 @@ exports[`should render FilterButton isSelected false 1`] = `
   font-size: 16px;
   line-height: 20px;
   padding: 15px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   margin-right: 8px;
   cursor: pointer;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 <div
   className="c0"
+  isSelected={false}
   onClick={[Function]}
 >
   test
@@ -157,18 +138,15 @@ exports[`should render FilterButton isSelected true 1`] = `
   font-size: 16px;
   line-height: 20px;
   padding: 15px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   margin-right: 8px;
   cursor: pointer;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 <div
   className="c0"
+  isSelected={true}
   onClick={[Function]}
 >
   test
@@ -181,17 +159,8 @@ exports[`should render SeeButton 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -204,6 +173,7 @@ exports[`should render SeeButton 1`] = `
 
 <div
   className="c0"
+  hoverColor="#212121"
 >
   <a
     href="test-burl"
@@ -241,16 +211,8 @@ exports[`should render SeeButton 1`] = `
 
 exports[`should render Structure with null sponsor 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 300px;
 }
@@ -285,16 +247,8 @@ exports[`should render Structure with null sponsor 1`] = `
 
 exports[`should render Structure with sponsor actif 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 300px;
 }
@@ -329,16 +283,8 @@ exports[`should render Structure with sponsor actif 1`] = `
 
 exports[`should render Structure with sponsor en attente 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 300px;
 }
@@ -373,16 +319,8 @@ exports[`should render Structure with sponsor en attente 1`] = `
 
 exports[`should render Structure with sponsor supprime 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 300px;
 }
@@ -417,16 +355,8 @@ exports[`should render Structure with sponsor supprime 1`] = `
 
 exports[`should render Structure with sponsor without nom 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 300px;
 }
@@ -465,8 +395,6 @@ exports[`should render StyledStatus Accepté structure  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #FF9800;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -480,6 +408,7 @@ exports[`should render StyledStatus Accepté structure  1`] = `
   className="c0"
   color="#FF9800"
   disabled={false}
+  textColor="#ffffff"
 >
   Accepté
 </div>
@@ -491,8 +420,6 @@ exports[`should render StyledStatus Brouillon  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #FFEB3B;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -506,6 +433,7 @@ exports[`should render StyledStatus Brouillon  1`] = `
   className="c0"
   color="#FFEB3B"
   disabled={false}
+  textColor="#212121"
 >
   Brouillon
 </div>
@@ -517,8 +445,6 @@ exports[`should render StyledStatus En attente admin  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #8BC34A;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -532,6 +458,7 @@ exports[`should render StyledStatus En attente admin  1`] = `
   className="c0"
   color="#8BC34A"
   disabled={false}
+  textColor="#ffffff"
 >
   Relecture en cours
 </div>
@@ -543,8 +470,6 @@ exports[`should render StyledStatus Rejeté structure  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #F44336;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -558,6 +483,7 @@ exports[`should render StyledStatus Rejeté structure  1`] = `
   className="c0"
   color="#F44336"
   disabled={false}
+  textColor="#ffffff"
 >
   Rejeté
 </div>
@@ -569,8 +495,6 @@ exports[`should render StyledStatus Supprimé  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #F44336;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -584,6 +508,7 @@ exports[`should render StyledStatus Supprimé  1`] = `
   className="c0"
   color="#F44336"
   disabled={false}
+  textColor="#ffffff"
 >
   Supprimé
 </div>
@@ -595,8 +520,6 @@ exports[`should render StyledStatus actif  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #4CAF50;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -621,8 +544,6 @@ exports[`should render StyledStatus en attente  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #FF9800;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -636,6 +557,7 @@ exports[`should render StyledStatus en attente  1`] = `
   className="c0"
   color="#FF9800"
   disabled={false}
+  textColor="#ffffff"
 >
   En attente
 </div>
@@ -647,8 +569,6 @@ exports[`should render StyledStatus no corresponding status  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -662,6 +582,7 @@ exports[`should render StyledStatus no corresponding status  1`] = `
   className="c0"
   color="#0421b1"
   disabled={false}
+  textColor="#ffffff"
 >
   Nouveau !
 </div>
@@ -673,8 +594,6 @@ exports[`should render StyledStatus no corresponding with color  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: color;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -688,6 +607,7 @@ exports[`should render StyledStatus no corresponding with color  1`] = `
   className="c0"
   color="color"
   disabled={false}
+  textColor="textColor"
 >
   test
 </div>
@@ -699,8 +619,6 @@ exports[`should render StyledStatus no corresponding with override  1`] = `
   border-radius: 6px;
   padding: 8px;
   background-color: #828282;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: normal;
   font-size: 12px;
@@ -714,6 +632,7 @@ exports[`should render StyledStatus no corresponding with override  1`] = `
   className="c0"
   color="#828282"
   disabled={false}
+  textColor="#ffffff"
 >
   test
 </div>
@@ -721,12 +640,7 @@ exports[`should render StyledStatus no corresponding with override  1`] = `
 
 exports[`should render TabHeader down 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   font-weight: bold;
   cursor: pointer;
@@ -759,12 +673,7 @@ exports[`should render TabHeader down 1`] = `
 
 exports[`should render TabHeader no order 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   font-weight: bold;
   cursor: inherit;
@@ -780,12 +689,7 @@ exports[`should render TabHeader no order 1`] = `
 
 exports[`should render TabHeader up 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   font-weight: bold;
   cursor: pointer;
@@ -818,24 +722,14 @@ exports[`should render TabHeader up 1`] = `
 
 exports[`should render Title with titre marque 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
   align-items: flex-start;
   text-align: left;
   font-style: normal;
   font-size: 16px;
   line-height: 20px;
   max-width: 370px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   cursor: pointer;
 }
@@ -854,24 +748,14 @@ exports[`should render Title with titre marque 1`] = `
 
 exports[`should render Title without titre marque 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
   align-items: flex-start;
   text-align: left;
   font-style: normal;
   font-size: 16px;
   line-height: 20px;
   max-width: 370px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   cursor: pointer;
 }
@@ -894,14 +778,13 @@ exports[`should render TypeContenu with demarche, detailed vue 1`] = `
   background-color: #212121;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
 }
 
 <div
   className="c0"
+  isDarkBackground={true}
 >
   Démarche
 </div>
@@ -916,14 +799,13 @@ exports[`should render TypeContenu with demarche, not detailed vue 1`] = `
   background-color: #ffffff;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
 }
 
 <div
   className="c0"
+  isDarkBackground={false}
 >
   Démarche
 </div>
@@ -938,14 +820,13 @@ exports[`should render TypeContenu with dispositif, detailed vue 1`] = `
   background-color: #212121;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
 }
 
 <div
   className="c0"
+  isDarkBackground={true}
 >
   Dispositif
 </div>
@@ -960,14 +841,13 @@ exports[`should render TypeContenu with dispositif, not detailed vue 1`] = `
   background-color: #212121;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
 }
 
 <div
   className="c0"
+  isDarkBackground={true}
 >
   Dispositif
 </div>
@@ -979,17 +859,8 @@ exports[`should render ValidateButton disabled 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -1004,6 +875,7 @@ exports[`should render ValidateButton disabled 1`] = `
   className="c0"
   data-test-id="validate-button"
   disabled={true}
+  hoverColor="#4caf50"
   onClick={[Function]}
 >
   <div
@@ -1040,17 +912,8 @@ exports[`should render ValidateButton not disabled 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -1065,6 +928,7 @@ exports[`should render ValidateButton not disabled 1`] = `
   className="c0"
   data-test-id="validate-button"
   disabled={false}
+  hoverColor="#4caf50"
   onClick={[Function]}
 >
   <div
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
index 35830c1d06..1f6bab95d0 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
@@ -8,15 +8,8 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
   margin-left: 100px;
   margin-right: 100px;
   width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -24,8 +17,6 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
   font-weight: bold;
   font-size: 28px;
   line-height: 35px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
   align-self: center;
   color: #212121;
   margin-bottom: 40px;
@@ -36,16 +27,8 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
   border-radius: 12px;
   width: 100%;
   height: 300px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -66,34 +49,17 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
 }
 
 .c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-top: 40px;
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -194,24 +160,14 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
 
 exports[`userContributions should render correctly when click on delete 1`] = `
 .c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
   align-items: flex-start;
   text-align: left;
   font-style: normal;
   font-size: 16px;
   line-height: 20px;
   max-width: 370px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   cursor: pointer;
 }
@@ -221,17 +177,8 @@ exports[`userContributions should render correctly when click on delete 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -247,17 +194,8 @@ exports[`userContributions should render correctly when click on delete 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -275,15 +213,8 @@ exports[`userContributions should render correctly when click on delete 1`] = `
   margin-left: 100px;
   margin-right: 100px;
   width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -295,24 +226,14 @@ exports[`userContributions should render correctly when click on delete 1`] = `
   background-color: #212121;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: default;
   border: 1px solid #212121;
 }
 
 .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 16px;
@@ -321,20 +242,12 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 }
 
 .c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #FFEB3B;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -344,17 +257,9 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 }
 
 .c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -377,38 +282,18 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
 
 .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -568,6 +453,7 @@ exports[`userContributions should render correctly when click on delete 1`] = `
                 >
                   <div
                     className="c8"
+                    isDarkBackground={true}
                   >
                     Dispositif
                   </div>
@@ -644,6 +530,7 @@ exports[`userContributions should render correctly when click on delete 1`] = `
                       color="#FFEB3B"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#212121"
                     >
                       Brouillon
                     </div>
@@ -682,6 +569,7 @@ exports[`userContributions should render correctly when click on delete 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/dispositif/id1"
@@ -719,6 +607,7 @@ exports[`userContributions should render correctly when click on delete 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -761,24 +650,14 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 
 exports[`userContributions should render correctly when contributions 1`] = `
 .c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
   align-items: flex-start;
   text-align: left;
   font-style: normal;
   font-size: 16px;
   line-height: 20px;
   max-width: 370px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   cursor: pointer;
 }
@@ -788,17 +667,8 @@ exports[`userContributions should render correctly when contributions 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -814,17 +684,8 @@ exports[`userContributions should render correctly when contributions 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -840,17 +701,8 @@ exports[`userContributions should render correctly when contributions 1`] = `
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -868,15 +720,8 @@ exports[`userContributions should render correctly when contributions 1`] = `
   margin-left: 100px;
   margin-right: 100px;
   width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -888,8 +733,6 @@ exports[`userContributions should render correctly when contributions 1`] = `
   background-color: #212121;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: default;
   border: 1px solid #212121;
@@ -903,24 +746,14 @@ exports[`userContributions should render correctly when contributions 1`] = `
   background-color: #ffffff;
   padding: 8px;
   border-radius: 6px;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   cursor: default;
   border: 1px solid #212121;
 }
 
 .c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 16px;
@@ -929,20 +762,12 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #FFEB3B;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -952,20 +777,12 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c14 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #FF9800;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -975,20 +792,12 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #8BC34A;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -998,20 +807,12 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #F44336;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -1021,20 +822,12 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
   background-color: #4CAF50;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
   font-weight: bold;
   font-size: 16px;
@@ -1044,17 +837,9 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -1077,38 +862,18 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
 
 .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -1268,6 +1033,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c8"
+                    isDarkBackground={true}
                   >
                     Dispositif
                   </div>
@@ -1344,6 +1110,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       color="#FFEB3B"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#212121"
                     >
                       Brouillon
                     </div>
@@ -1382,6 +1149,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/dispositif/id1"
@@ -1419,6 +1187,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -1459,6 +1228,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -1532,6 +1302,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       color="#FF9800"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#ffffff"
                     >
                       En attente
                     </div>
@@ -1570,6 +1341,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id2"
@@ -1607,6 +1379,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -1647,6 +1420,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -1690,6 +1464,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       color="#8BC34A"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#ffffff"
                     >
                       Relecture en cours
                     </div>
@@ -1728,6 +1503,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id3"
@@ -1765,6 +1541,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -1805,6 +1582,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -1848,6 +1626,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       color="#FF9800"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#ffffff"
                     >
                       Accepté
                     </div>
@@ -1886,6 +1665,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id4"
@@ -1923,6 +1703,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -1963,6 +1744,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -2036,6 +1818,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       color="#F44336"
                       onMouseEnter={[Function]}
                       onMouseLeave={[Function]}
+                      textColor="#ffffff"
                     >
                       Rejeté
                     </div>
@@ -2074,6 +1857,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id5"
@@ -2111,6 +1895,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -2151,6 +1936,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -2238,6 +2024,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id6"
@@ -2275,6 +2062,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c12"
                       data-test-id="delete-button"
                       disabled={false}
+                      hoverColor="#f44336"
                       onClick={[Function]}
                     >
                       <div
@@ -2315,6 +2103,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                 >
                   <div
                     className="c13"
+                    isDarkBackground={false}
                   >
                     Démarche
                   </div>
@@ -2432,6 +2221,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                   >
                     <div
                       className="c11"
+                      hoverColor="#212121"
                     >
                       <a
                         href="/demarche/id7"
@@ -2469,6 +2259,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       className="c18"
                       data-test-id="delete-button"
                       disabled={true}
+                      hoverColor="#f44336"
                     >
                       <div
                         style={
@@ -2516,30 +2307,15 @@ exports[`userContributions should render correctly when loading 1`] = `
   margin-left: 100px;
   margin-right: 100px;
   width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -2562,23 +2338,11 @@ exports[`userContributions should render correctly when loading 1`] = `
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
index 1194cb3a37..2e8ff4e2c0 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
@@ -2,17 +2,9 @@
 
 exports[`UserFavorites should render correctly when 0 favorites 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -44,16 +36,8 @@ exports[`UserFavorites should render correctly when 0 favorites 1`] = `
   font-size: 22px;
   line-height: 28px;
   color: #2d9cdb;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -62,16 +46,8 @@ exports[`UserFavorites should render correctly when 0 favorites 1`] = `
   border-radius: 12px;
   width: 248px;
   height: 248px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -338,17 +314,9 @@ exports[`UserFavorites should render correctly when 0 favorites 1`] = `
 
 exports[`UserFavorites should render correctly when 3 favorites 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -370,25 +338,25 @@ exports[`UserFavorites should render correctly when 3 favorites 1`] = `
   margin-bottom: 8px;
 }
 
-.c5:hover,
-.favorite:hover + .c5 {
-  background-color: #DDF2F9 !important;
-  border-color: #06508C !important;
-  color: #06508C !important;
+.c5 :hover,
+.favorite:hover+.c5 {
+  background-color: #DDF2F9!important;
+  border-color: #06508C!important;
+  color: #06508C!important;
 }
 
-.c3:hover,
-.favorite:hover + .c3 {
-  background-color: #EFE8F4 !important;
-  border-color: #3D2884 !important;
-  color: #3D2884 !important;
+.c3 :hover,
+.favorite:hover+.c3 {
+  background-color: #EFE8F4!important;
+  border-color: #3D2884!important;
+  color: #3D2884!important;
 }
 
-.c4:hover,
-.favorite:hover + .c4 {
-  background-color: #EEE7E5 !important;
-  border-color: #443023 !important;
-  color: #443023 !important;
+.c4 :hover,
+.favorite:hover+.c4 {
+  background-color: #EEE7E5!important;
+  border-color: #443023!important;
+  color: #443023!important;
 }
 
 <div
@@ -986,17 +954,9 @@ exports[`UserFavorites should render correctly when 3 favorites 1`] = `
 
 exports[`UserFavorites should render correctly when loading 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -1023,16 +983,8 @@ exports[`UserFavorites should render correctly when loading 1`] = `
   border-radius: 12px;
   width: 248px;
   height: 248px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap b/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
index 00ea3eb6cf..330a8fbf13 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
@@ -8,8 +8,6 @@ exports[`UserNotifications should render correctly when 0 notif 1`] = `
   margin-top: 26px;
   margin-right: 120px;
   margin-left: 120px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -23,16 +21,8 @@ exports[`UserNotifications should render correctly when 0 notif 1`] = `
 .c1 {
   color: #5e5e5e;
   margin-top: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -88,17 +78,9 @@ exports[`UserNotifications should render correctly when 0 notif 1`] = `
 
 exports[`UserNotifications should render correctly when loading 1`] = `
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -127,8 +109,6 @@ exports[`UserNotifications should render correctly when loading 1`] = `
   margin-top: 26px;
   margin-right: 120px;
   margin-left: 120px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -211,20 +191,9 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
   border-radius: 12px;
   padding: 8px 8px 8px 20px;
   margin: 8px 0px 0px 0px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   cursor: pointer;
   border-width: 2px;
@@ -241,20 +210,9 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
   border-radius: 12px;
   padding: 8px 8px 8px 20px;
   margin: 8px 0px 0px 0px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   cursor: pointer;
   border-width: 2px;
@@ -267,16 +225,8 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -316,17 +266,9 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
 }
 
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -355,8 +297,6 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
   margin-top: 26px;
   margin-right: 120px;
   margin-left: 120px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
@@ -395,6 +335,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
       className="c4"
       data-test-id="test-notif-annuaire"
       onClick={[Function]}
+      read={false}
     >
       <div
         className="c5"
@@ -418,6 +359,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
         </span>
         <div
           className="c6"
+          read={false}
         >
           Recensez votre structure dans l'annuaire de l'intégration
         </div>
@@ -476,6 +418,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
       className="c4"
       data-test-id="test-notif-new content"
       onClick={[Function]}
+      read={false}
     >
       <div
         className="c5"
@@ -499,6 +442,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
         </span>
         <div
           className="c6"
+          read={false}
         >
           Une nouvelle fiche a été attribuée à votre structure
         </div>
@@ -508,6 +452,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
       >
         <div
           className="c7"
+          read={false}
         >
           Depuis 5 jours
         </div>
@@ -625,6 +570,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
       className="c9"
       data-test-id="test-notif-reaction"
       onClick={[Function]}
+      read={true}
     >
       <div
         className="c5"
@@ -648,6 +594,7 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
         </span>
         <div
           className="c10"
+          read={true}
         >
           Nouvelle réaction sur la fiche :
         </div>
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
index bc81d72d67..cbdaa0ab19 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
@@ -2,23 +2,11 @@
 
 exports[`UserStructure should render correctly when add member modal is open 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -28,12 +16,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -42,35 +25,17 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -97,17 +62,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -123,17 +79,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -145,16 +92,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -180,8 +119,6 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   font-size: 16px;
   line-height: 20px;
   color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -193,8 +130,6 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   font-size: 16px;
   line-height: 20px;
   color: #212121;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -215,16 +150,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 }
 
 .c19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
   justify-content: flex-end;
   margin-top: 8px;
 }
@@ -250,16 +177,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -432,6 +351,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                   />
                   <div
                     className="c9"
+                    isUser={true}
                   >
                     membre2
                   </div>
@@ -442,6 +362,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c10"
+                  isUser={true}
                 >
                   Rédacteur
                 </div>
@@ -451,6 +372,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c11"
+                  isUser={true}
                 >
                   undefined undefined
                 </div>
@@ -460,6 +382,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c11"
+                  isUser={true}
                 />
               </td>
               <td
@@ -475,6 +398,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -507,6 +431,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -568,6 +493,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                   />
                   <div
                     className="c14"
+                    isUser={false}
                   >
                     membre1
                   </div>
@@ -578,6 +504,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c15"
+                  isUser={false}
                 >
                   Rédacteur
                 </div>
@@ -587,6 +514,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c16"
+                  isUser={false}
                 >
                   undefined undefined
                 </div>
@@ -596,6 +524,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
               >
                 <div
                   className="c16"
+                  isUser={false}
                 />
               </td>
               <td
@@ -611,6 +540,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -643,6 +573,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -788,23 +719,11 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 
 exports[`UserStructure should render correctly when edit member modal is open, select respo and validate 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -814,12 +733,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -828,35 +742,17 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -883,17 +779,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -909,17 +796,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -931,16 +809,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -966,8 +836,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   font-size: 16px;
   line-height: 20px;
   color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -979,8 +847,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   font-size: 16px;
   line-height: 20px;
   color: #212121;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -1028,20 +894,9 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -1053,31 +908,15 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
   justify-content: flex-end;
   margin-top: 12px;
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-bottom: 16px;
 }
@@ -1097,16 +936,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -1279,6 +1110,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                   />
                   <div
                     className="c9"
+                    isUser={true}
                   >
                     membre2
                   </div>
@@ -1289,6 +1121,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c10"
+                  isUser={true}
                 >
                   Rédacteur
                 </div>
@@ -1298,6 +1131,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c11"
+                  isUser={true}
                 >
                   undefined undefined
                 </div>
@@ -1307,6 +1141,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c11"
+                  isUser={true}
                 />
               </td>
               <td
@@ -1322,6 +1157,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -1354,6 +1190,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -1415,6 +1252,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                   />
                   <div
                     className="c14"
+                    isUser={false}
                   >
                     membre1
                   </div>
@@ -1425,6 +1263,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c15"
+                  isUser={false}
                 >
                   Rédacteur
                 </div>
@@ -1434,6 +1273,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c16"
+                  isUser={false}
                 >
                   undefined undefined
                 </div>
@@ -1443,6 +1283,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c16"
+                  isUser={false}
                 />
               </td>
               <td
@@ -1458,6 +1299,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -1490,6 +1332,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -1564,6 +1407,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
         className="c20"
         data-test-id="test-role-Rédacteur"
         onClick={[Function]}
+        state="current"
       >
         <div
           className="c21"
@@ -1604,6 +1448,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
         className="c23"
         data-test-id="test-role-Responsable"
         onClick={[Function]}
+        state="none"
       >
         <div
           className="c21"
@@ -1707,23 +1552,11 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 
 exports[`UserStructure should render correctly when edit member modal is open, select respo and validate 2`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -1733,12 +1566,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -1747,35 +1575,17 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -1802,17 +1612,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -1828,17 +1629,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -1850,16 +1642,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -1885,8 +1669,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   font-size: 16px;
   line-height: 20px;
   color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -1898,8 +1680,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   font-size: 16px;
   line-height: 20px;
   color: #212121;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -1947,20 +1727,9 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c21 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -1972,31 +1741,15 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
   justify-content: flex-end;
   margin-top: 12px;
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-bottom: 16px;
 }
@@ -2016,16 +1769,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -2198,6 +1943,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                   />
                   <div
                     className="c9"
+                    isUser={true}
                   >
                     membre2
                   </div>
@@ -2208,6 +1954,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c10"
+                  isUser={true}
                 >
                   Rédacteur
                 </div>
@@ -2217,6 +1964,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c11"
+                  isUser={true}
                 >
                   undefined undefined
                 </div>
@@ -2226,6 +1974,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c11"
+                  isUser={true}
                 />
               </td>
               <td
@@ -2241,6 +1990,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -2273,6 +2023,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -2334,6 +2085,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                   />
                   <div
                     className="c14"
+                    isUser={false}
                   >
                     membre1
                   </div>
@@ -2344,6 +2096,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c15"
+                  isUser={false}
                 >
                   Rédacteur
                 </div>
@@ -2353,6 +2106,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c16"
+                  isUser={false}
                 >
                   undefined undefined
                 </div>
@@ -2362,6 +2116,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
               >
                 <div
                   className="c16"
+                  isUser={false}
                 />
               </td>
               <td
@@ -2377,6 +2132,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -2409,6 +2165,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -2483,6 +2240,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
         className="c20"
         data-test-id="test-role-Rédacteur"
         onClick={[Function]}
+        state="none"
       >
         <div
           className="c21"
@@ -2523,6 +2281,7 @@ exports[`UserStructure should render correctly when edit member modal is open, s
         className="c23"
         data-test-id="test-role-Responsable"
         onClick={[Function]}
+        state="selected"
       >
         <div
           className="c21"
@@ -2626,23 +2385,11 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 
 exports[`UserStructure should render correctly when loading 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -2652,12 +2399,7 @@ exports[`UserStructure should render correctly when loading 1`] = `
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -2666,35 +2408,17 @@ exports[`UserStructure should render correctly when loading 1`] = `
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -2835,19 +2559,9 @@ exports[`UserStructure should render correctly when loading 1`] = `
 exports[`UserStructure should render correctly when no structure 1`] = `
 .c0 {
   margin-top: 60px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
 }
 
@@ -2882,23 +2596,11 @@ exports[`UserStructure should render correctly when no structure 1`] = `
 
 exports[`UserStructure should render correctly when structure with membres when user is redacteur 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -2908,12 +2610,7 @@ exports[`UserStructure should render correctly when structure with membres when
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -2922,35 +2619,17 @@ exports[`UserStructure should render correctly when structure with membres when
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -2973,16 +2652,8 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -3008,8 +2679,6 @@ exports[`UserStructure should render correctly when structure with membres when
   font-size: 16px;
   line-height: 20px;
   color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -3021,8 +2690,6 @@ exports[`UserStructure should render correctly when structure with membres when
   font-size: 16px;
   line-height: 20px;
   color: #212121;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -3045,16 +2712,8 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -3201,6 +2860,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   />
                   <div
                     className="c9"
+                    isUser={true}
                   >
                     membre1
                   </div>
@@ -3211,6 +2871,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c10"
+                  isUser={true}
                 >
                   Rédacteur
                 </div>
@@ -3220,6 +2881,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c11"
+                  isUser={true}
                 >
                   undefined undefined
                 </div>
@@ -3229,6 +2891,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c11"
+                  isUser={true}
                 />
               </td>
             </tr>
@@ -3262,6 +2925,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   />
                   <div
                     className="c12"
+                    isUser={false}
                   >
                     membre2
                   </div>
@@ -3272,6 +2936,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c13"
+                  isUser={false}
                 >
                   Rédacteur
                 </div>
@@ -3281,6 +2946,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c14"
+                  isUser={false}
                 >
                   undefined undefined
                 </div>
@@ -3290,6 +2956,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c14"
+                  isUser={false}
                 />
               </td>
             </tr>
@@ -3303,23 +2970,11 @@ exports[`UserStructure should render correctly when structure with membres when
 
 exports[`UserStructure should render correctly when structure with membres when user is respo 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   margin-top: 26px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
   margin-bottom: 42px;
 }
@@ -3329,12 +2984,7 @@ exports[`UserStructure should render correctly when structure with membres when
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
@@ -3343,35 +2993,17 @@ exports[`UserStructure should render correctly when structure with membres when
   border-radius: 12px;
   padding: 40px;
   margin: 0px 20px 0px 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   width: 315px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
   height: fit-content;
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 32px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
   align-items: flex-end;
 }
 
@@ -3398,17 +3030,8 @@ exports[`UserStructure should render correctly when structure with membres when
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -3424,17 +3047,8 @@ exports[`UserStructure should render correctly when structure with membres when
   height: 40px;
   background-color: #828282;
   border-radius: 8px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   margin-right: 4px;
   margin-left: 4px;
@@ -3446,16 +3060,8 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 .c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -3481,8 +3087,6 @@ exports[`UserStructure should render correctly when structure with membres when
   font-size: 16px;
   line-height: 20px;
   color: #0421b1;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -3494,8 +3098,6 @@ exports[`UserStructure should render correctly when structure with membres when
   font-size: 16px;
   line-height: 20px;
   color: #212121;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -3518,16 +3120,8 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 .c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -3700,6 +3294,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   />
                   <div
                     className="c9"
+                    isUser={true}
                   >
                     membre2
                   </div>
@@ -3710,6 +3305,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c10"
+                  isUser={true}
                 >
                   Rédacteur
                 </div>
@@ -3719,6 +3315,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c11"
+                  isUser={true}
                 >
                   undefined undefined
                 </div>
@@ -3728,6 +3325,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c11"
+                  isUser={true}
                 />
               </td>
               <td
@@ -3743,6 +3341,7 @@ exports[`UserStructure should render correctly when structure with membres when
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -3775,6 +3374,7 @@ exports[`UserStructure should render correctly when structure with membres when
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
@@ -3836,6 +3436,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   />
                   <div
                     className="c14"
+                    isUser={false}
                   >
                     membre1
                   </div>
@@ -3846,6 +3447,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c15"
+                  isUser={false}
                 >
                   Rédacteur
                 </div>
@@ -3855,6 +3457,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c16"
+                  isUser={false}
                 >
                   undefined undefined
                 </div>
@@ -3864,6 +3467,7 @@ exports[`UserStructure should render correctly when structure with membres when
               >
                 <div
                   className="c16"
+                  isUser={false}
                 />
               </td>
               <td
@@ -3879,6 +3483,7 @@ exports[`UserStructure should render correctly when structure with membres when
                 >
                   <div
                     className="c12"
+                    hoverColor="#212121"
                     onClick={[Function]}
                   >
                     <div
@@ -3911,6 +3516,7 @@ exports[`UserStructure should render correctly when structure with membres when
                     className="c13"
                     data-test-id="delete-button"
                     disabled={false}
+                    hoverColor="#f44336"
                     onClick={[Function]}
                   >
                     <div
diff --git a/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap b/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
index 4a6e0375b6..28d782ab63 100644
--- a/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
@@ -9,20 +9,10 @@ exports[`user translation should redirect if user has language but not langue in
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
   margin-top: 40px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
 }
 
@@ -30,16 +20,8 @@ exports[`user translation should redirect if user has language but not langue in
   background: #ffffff;
   border-radius: 12px;
   width: 1040px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -59,12 +41,7 @@ exports[`user translation should redirect if user has language but not langue in
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 60px;
 }
@@ -259,20 +236,10 @@ exports[`user translation should redirect if user has no language but langue in
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
   margin-top: 40px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
 }
 
@@ -280,16 +247,8 @@ exports[`user translation should redirect if user has no language but langue in
   background: #ffffff;
   border-radius: 12px;
   width: 1040px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -309,12 +268,7 @@ exports[`user translation should redirect if user has no language but langue in
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 60px;
 }
@@ -836,20 +790,10 @@ exports[`user translation should return loader langue in url = first selected la
 }
 
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
   margin-top: 40px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
 }
 
@@ -857,16 +801,8 @@ exports[`user translation should return loader langue in url = first selected la
   background: #ffffff;
   border-radius: 12px;
   width: 1040px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -886,12 +822,7 @@ exports[`user translation should return loader langue in url = first selected la
 }
 
 .c5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   margin-bottom: 60px;
 }

From 9aa3607cb16ef47491052aba521d3a3015206fe6 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 15:06:27 +0200
Subject: [PATCH 09/37] chore(client): :arrow_up: redux - Major upgrade

---
 client/package.json |  4 ++--
 yarn.lock           | 23 ++++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/package.json b/client/package.json
index dee44abcbe..20166cef2f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -52,14 +52,14 @@
     "react-intersection-observer": "^9.4.1",
     "react-loading-skeleton": "^3.1.0",
     "react-notifications": "^1.7.3",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.4.3",
     "react-sortablejs": "^6.1.4",
     "react-to-print": "^2.12.1",
     "react-use": "^17.4.0",
     "reactstrap": "^9.2.2",
-    "redux": "^4.0.1",
+    "redux": "^5.0.1",
     "redux-saga": "^1.1.3",
     "remixicon": "^4.3.0",
     "sharp": "^0.33.4",
diff --git a/yarn.lock b/yarn.lock
index eb7cc8b640..da1ddde4da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -407,7 +407,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz"
   integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
@@ -2055,7 +2055,7 @@
   resolved "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1", "@types/hoist-non-react-statics@^3.3.4":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.4":
   version "3.3.5"
   resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -8157,16 +8157,12 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-redux@^8.0.5:
-  version "8.1.3"
-  resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz"
-  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
+react-redux@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
+  integrity sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==
   dependencies:
-    "@babel/runtime" "^7.12.1"
-    "@types/hoist-non-react-statics" "^3.3.1"
     "@types/use-sync-external-store" "^0.0.3"
-    hoist-non-react-statics "^3.3.2"
-    react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
 react-router-dom@^5.3.4:
@@ -8359,13 +8355,18 @@ redux-saga@^1.1.3:
   dependencies:
     "@redux-saga/core" "^1.3.0"
 
-redux@^4.0.1, redux@^4.0.5:
+redux@^4.0.5:
   version "4.2.1"
   resolved "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
 reflect-metadata@^0.2.1, reflect-metadata@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz"

From 093cb4fae66cf284f30d39d858676ddb403e603d Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Wed, 10 Jul 2024 16:38:55 +0200
Subject: [PATCH 10/37] chore(client): :arrow_up: Major typescript version
 upgrade and typing error fix

---
 client/package.json                              | 2 +-
 client/src/components/UI/SearchBar/SearchBar.tsx | 6 ++++--
 yarn.lock                                        | 5 -----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/client/package.json b/client/package.json
index 20166cef2f..a3d4ec5e83 100644
--- a/client/package.json
+++ b/client/package.json
@@ -134,7 +134,7 @@
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
     "ts-jest": "29.0.3",
-    "typescript": "^4.9.3",
+    "typescript": "^5.5.3",
     "typescript-plugin-css-modules": "^5.1.0"
   },
   "volta": {
diff --git a/client/src/components/UI/SearchBar/SearchBar.tsx b/client/src/components/UI/SearchBar/SearchBar.tsx
index c18ed2e690..f59e6ebccb 100644
--- a/client/src/components/UI/SearchBar/SearchBar.tsx
+++ b/client/src/components/UI/SearchBar/SearchBar.tsx
@@ -60,7 +60,6 @@ interface Props {
  */
 const SearchBar = (props: Props) => {
   const [value, setValue] = useState("");
-  const [suggestions, setSuggestions] = useState([]);
   const [isLoadingResults, setIsLoadingResults] = useState(false);
 
   const onChange = (_: any, { newValue }: { newValue: string }) => {
@@ -86,6 +85,8 @@ const SearchBar = (props: Props) => {
     });
   };
 
+  const [suggestions, setSuggestions] = useState<ReturnType<typeof getSuggestions>>([]);
+
   const onSuggestionsFetchRequested = debounce(({ value }) => {
     setSuggestions(getSuggestions(value));
     setIsLoadingResults(false);
@@ -171,7 +172,7 @@ const SearchBar = (props: Props) => {
       <Autosuggest
         shouldRenderSuggestions={(value) => value.length >= 0}
         highlightFirstSuggestion
-        suggestions={suggestions}
+        suggestions={suggestions as GetActiveUsersResponse[]}
         onSuggestionsFetchRequested={onSuggestionsFetchRequested}
         getSuggestionValue={(s) => getSuggestionValue(s)}
         renderSuggestion={renderSuggestion}
@@ -179,6 +180,7 @@ const SearchBar = (props: Props) => {
         onSuggestionSelected={onSuggestionSelected}
         onSuggestionsClearRequested={() => setSuggestions([])}
         focusInputOnSuggestionClick
+        multiSection={false}
       />
       {isNoResult && props.structures && !isLoadingResults && (
         <NoResultContainer>
diff --git a/yarn.lock b/yarn.lock
index da1ddde4da..59e0cf2c66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9721,11 +9721,6 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^4.9.3:
-  version "4.9.5"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
-
 typescript@^5.3.3:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507"

From a1400d5eb95095505bdb26ec2b3c2a63c4534d16 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 09:35:47 +0200
Subject: [PATCH 11/37] chore(client):

---
 client/package.json              |  11 +-
 client/src/pages/_app.tsx        |   7 -
 client/src/types/react-dsfr.d.ts |   8 +
 client/src/types/style.d.ts      |   5 -
 client/tsconfig.json             |   1 -
 yarn.lock                        | 399 ++-----------------------------
 6 files changed, 36 insertions(+), 395 deletions(-)
 create mode 100644 client/src/types/react-dsfr.d.ts
 delete mode 100644 client/src/types/style.d.ts

diff --git a/client/package.json b/client/package.json
index a3d4ec5e83..e92758d06c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -95,7 +95,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.0.5",
+    "@next/eslint-plugin-next": "^14.2.5",
     "@redux-devtools/extension": "^3.2.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.4.0",
@@ -117,11 +117,11 @@
     "@types/styled-components": "^5.1.1",
     "@types/uuid": "^9.0.1",
     "@types/webrtc": "^0.0.43",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "csvtojson": "^2.0.10",
     "eslint": "^8.28.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.5",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jest-mock-axios": "^4.7.0-beta2",
@@ -134,8 +134,7 @@
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
     "ts-jest": "29.0.3",
-    "typescript": "^5.5.3",
-    "typescript-plugin-css-modules": "^5.1.0"
+    "typescript": "^5.5.3"
   },
   "volta": {
     "node": "20.13.1",
diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
index 628c197b88..6051ad2bbf 100644
--- a/client/src/pages/_app.tsx
+++ b/client/src/pages/_app.tsx
@@ -20,13 +20,6 @@ import { finishLoading, startLoading } from "services/LoadingStatus/loadingStatu
 import { LoadingStatusKey } from "services/LoadingStatus/loadingStatus.actions";
 import { ConsentBannerAndConsentManagement, useConsent } from "hooks/useConsentContext";
 
-// Only in TypeScript projects
-declare module "@codegouvfr/react-dsfr/next-pagesdir" {
-  interface RegisterLink {
-    Link: typeof Link;
-  }
-}
-
 const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
   defaultColorScheme: "light",
   Link,
diff --git a/client/src/types/react-dsfr.d.ts b/client/src/types/react-dsfr.d.ts
new file mode 100644
index 0000000000..477177baaa
--- /dev/null
+++ b/client/src/types/react-dsfr.d.ts
@@ -0,0 +1,8 @@
+// Only in TypeScript projects
+import Link from "next/link";
+
+declare module "@codegouvfr/react-dsfr/next-pagesdir" {
+  interface RegisterLink {
+    Link: typeof Link;
+  }
+}
diff --git a/client/src/types/style.d.ts b/client/src/types/style.d.ts
deleted file mode 100644
index b728b100ff..0000000000
--- a/client/src/types/style.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module "*.scss";
-declare module "*.svg";
-declare module "*.gif";
-declare module "*.png";
-declare module "*.jpg";
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 2a07a2c313..560ed91bd5 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -21,7 +21,6 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": "src",
     "incremental": true,
-    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "exclude": ["node_modules"],
   "include": ["src"]
diff --git a/yarn.lock b/yarn.lock
index 59e0cf2c66..7f79ddf85d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,11 +7,6 @@
   resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz"
   integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==
 
-"@adobe/css-tools@~4.3.1":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
-  integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
-
 "@algolia/cache-browser-local-storage@4.24.0":
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz#97bc6d067a9fd932b9c922faa6b7fd6e546e1348"
@@ -523,7 +518,7 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
   integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
 
-"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.6.1":
   version "4.10.1"
   resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz"
   integrity sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==
@@ -1487,20 +1482,13 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.4.tgz#5546813dc4f809884a37d257b254a5ce1b0248d7"
   integrity sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==
 
-"@next/eslint-plugin-next@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.4.tgz#c7f965cb76f0b454e726ef0f69157c4fb4e28f53"
-  integrity sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==
+"@next/eslint-plugin-next@14.2.5", "@next/eslint-plugin-next@^14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz#f7e3ff3efe40a2855e5f29bc2692175f85913ba8"
+  integrity sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==
   dependencies:
     glob "10.3.10"
 
-"@next/eslint-plugin-next@^13.0.5":
-  version "13.5.6"
-  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz"
-  integrity sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==
-  dependencies:
-    glob "7.1.7"
-
 "@next/swc-darwin-arm64@14.2.4":
   version "14.2.4"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz#da9f04c34a3d5f0b8401ed745768420e4a604036"
@@ -2121,11 +2109,6 @@
     "@types/tough-cookie" "*"
     parse5 "^7.0.0"
 
-"@types/json-schema@^7.0.9":
-  version "7.0.15"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
-  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
-
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
@@ -2231,20 +2214,6 @@
   resolved "https://registry.npmjs.org/@types/password-hash/-/password-hash-1.2.24.tgz"
   integrity sha512-rdIR0oa8Pd2JP/KZ22UeLD6vrJWfZ2vgSKtWNCFpWtmUu5LR61+0yx051BN7IKpfxDI595jjhLcVBC3rZ2qfeQ==
 
-"@types/postcss-modules-local-by-default@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.2.tgz#8fee7513dd1558d74713d817c183a33a6dc583f9"
-  integrity sha512-CtYCcD+L+trB3reJPny+bKWKMzPfxEyQpKIwit7kErnOexf5/faaGpkFy4I5AwbV4hp1sk7/aTg0tt0B67VkLQ==
-  dependencies:
-    postcss "^8.0.0"
-
-"@types/postcss-modules-scope@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/postcss-modules-scope/-/postcss-modules-scope-3.0.4.tgz#f82d15ec9023c924b531a49e8087b32646233f41"
-  integrity sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==
-  dependencies:
-    postcss "^8.0.0"
-
 "@types/prop-types@*":
   version "15.7.12"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
@@ -2347,11 +2316,6 @@
     "@types/tough-cookie" "*"
     form-data "^2.5.0"
 
-"@types/semver@^7.3.12":
-  version "7.5.8"
-  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz"
-  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
-
 "@types/send@*":
   version "0.17.4"
   resolved "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz"
@@ -2459,23 +2423,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.10.1":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz"
-  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
-  dependencies:
-    "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/type-utils" "5.62.0"
-    "@typescript-eslint/utils" "5.62.0"
-    debug "^4.3.4"
-    graphemer "^1.4.0"
-    ignore "^5.2.0"
-    natural-compare-lite "^1.4.0"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/eslint-plugin@^7.15.0":
+"@typescript-eslint/eslint-plugin@^7.15.0", "@typescript-eslint/eslint-plugin@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.0.tgz#b3563927341eca15124a18c6f94215f779f5c02a"
   integrity sha512-py1miT6iQpJcs1BiJjm54AMzeuMPBSPuKPlnT8HlfudbcS5rYeX5jajpLf3mrdRh9dA/Ec2FVUY0ifeVNDIhZw==
@@ -2490,16 +2438,6 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@^5.10.1":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz"
-  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    debug "^4.3.4"
-
 "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.2.0.tgz#44356312aea8852a3a82deebdacd52ba614ec07a"
@@ -2511,7 +2449,7 @@
     "@typescript-eslint/visitor-keys" "7.2.0"
     debug "^4.3.4"
 
-"@typescript-eslint/parser@^7.15.0":
+"@typescript-eslint/parser@^7.15.0", "@typescript-eslint/parser@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.16.0.tgz#53fae8112f8c912024aea7b499cf7374487af6d8"
   integrity sha512-ar9E+k7CU8rWi2e5ErzQiC93KKEFAXA2Kky0scAlPcxYblLt8+XZuHUZwlyfXILyQa95P6lQg+eZgh/dDs3+Vw==
@@ -2522,14 +2460,6 @@
     "@typescript-eslint/visitor-keys" "7.16.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz"
-  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
-
 "@typescript-eslint/scope-manager@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.16.0.tgz#eb0757af5720c9c53c8010d7a0355ae27e17b7e5"
@@ -2546,16 +2476,6 @@
     "@typescript-eslint/types" "7.2.0"
     "@typescript-eslint/visitor-keys" "7.2.0"
 
-"@typescript-eslint/type-utils@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz"
-  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
-  dependencies:
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    "@typescript-eslint/utils" "5.62.0"
-    debug "^4.3.4"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/type-utils@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.16.0.tgz#ec52b1932b8fb44a15a3e20208e0bd49d0b6bd00"
@@ -2566,11 +2486,6 @@
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/types@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz"
-  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
-
 "@typescript-eslint/types@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.16.0.tgz#60a19d7e7a6b1caa2c06fac860829d162a036ed2"
@@ -2581,19 +2496,6 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.2.0.tgz#0feb685f16de320e8520f13cca30779c8b7c403f"
   integrity sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==
 
-"@typescript-eslint/typescript-estree@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz"
-  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
 "@typescript-eslint/typescript-estree@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.16.0.tgz#98ac779d526fab2a781e5619c9250f3e33867c09"
@@ -2622,20 +2524,6 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/utils@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz"
-  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
 "@typescript-eslint/utils@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.16.0.tgz#b38dc0ce1778e8182e227c98d91d3418449aa17f"
@@ -2646,14 +2534,6 @@
     "@typescript-eslint/types" "7.16.0"
     "@typescript-eslint/typescript-estree" "7.16.0"
 
-"@typescript-eslint/visitor-keys@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz"
-  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    eslint-visitor-keys "^3.3.0"
-
 "@typescript-eslint/visitor-keys@7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.0.tgz#a1d99fa7a3787962d6e0efd436575ef840e23b06"
@@ -3654,13 +3534,6 @@ cookie@0.6.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
-copy-anything@^2.0.1:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz"
-  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
-  dependencies:
-    is-what "^3.14.1"
-
 copy-to-clipboard@^3.3.1:
   version "3.3.3"
   resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
@@ -3798,11 +3671,6 @@ css.escape@^1.5.1:
   resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz"
@@ -4133,7 +4001,7 @@ domutils@^3.1.0:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
-dotenv@^16.4.2, dotenv@^16.4.5:
+dotenv@^16.4.5:
   version "16.4.5"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
@@ -4240,13 +4108,6 @@ err-code@^2.0.2:
   resolved "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
-errno@^0.1.1:
-  version "0.1.8"
-  resolved "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -4433,12 +4294,12 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@^14.2.4:
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.2.4.tgz#eb0bedfe4a894bc2aea918214bb5243ee4fa7d4b"
-  integrity sha512-Qr0wMgG9m6m4uYy2jrYJmyuNlYZzPRQq5Kvb9IDlYwn+7yq6W6sfMNFgb+9guM1KYwuIo6TIaiFhZJ6SnQ/Efw==
+eslint-config-next@^14.2.5:
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.2.5.tgz#cdd43d89047eb7391ba25445d5855b4600b6adb9"
+  integrity sha512-zogs9zlOiZ7ka+wgUnmcM0KBEDjo4Jis7kxN1jvC0N4wynQ2MIx/KBkg4mVF63J5EK4W0QMCn7xO3vNisjaAoA==
   dependencies:
-    "@next/eslint-plugin-next" "14.2.4"
+    "@next/eslint-plugin-next" "14.2.5"
     "@rushstack/eslint-patch" "^1.3.3"
     "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0"
     eslint-import-resolver-node "^0.3.6"
@@ -4551,14 +4412,6 @@ eslint-plugin-react@^7.33.2:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.11"
 
-eslint-scope@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz"
@@ -4644,11 +4497,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
@@ -5148,18 +4996,6 @@ glob@10.3.10:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-glob@7.1.7:
-  version "7.1.7"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@^10.3.10:
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.2.tgz#bed6b95dade5c1f80b4434daced233aee76160e5"
@@ -5172,7 +5008,7 @@ glob@^10.3.10:
     package-json-from-dist "^1.0.0"
     path-scurry "^1.11.1"
 
-glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.1.3, glob@^7.1.4:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -5538,18 +5374,13 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3, iconv-lite@^0.6.3:
+iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-icss-utils@^5.0.0, icss-utils@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz"
-  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
-
 ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
@@ -5565,11 +5396,6 @@ ignore@^5.2.0, ignore@^5.3.1:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
-  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
-
 immutable@^4.0.0, immutable@^4.3.4:
   version "4.3.6"
   resolved "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz"
@@ -5905,11 +5731,6 @@ is-weakset@^2.0.3:
     call-bind "^1.0.7"
     get-intrinsic "^1.2.4"
 
-is-what@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz"
-  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
-
 is-what@^4.1.8:
   version "4.1.16"
   resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.16.tgz#1ad860a19da8b4895ad5495da3182ce2acdd7a6f"
@@ -6681,23 +6502,6 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-less@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
-  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
-  dependencies:
-    copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
-    tslib "^2.3.0"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    make-dir "^2.1.0"
-    mime "^1.4.1"
-    needle "^3.1.0"
-    source-map "~0.6.0"
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
@@ -6716,11 +6520,6 @@ lexical@0.16.1, lexical@^0.16.1:
   resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.16.1.tgz#1d2cd3f364224889caa2939df179434af936283b"
   integrity sha512-+R05d3+N945OY8pTUjTqQrWoApjC+ctzvjnmNETtx9WmVAaiW0tQVG+AYLt5pDGY8dQXtd4RPorvnxBTECt9SA==
 
-lilconfig@^2.0.5:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
@@ -6875,14 +6674,6 @@ lz-string@^1.5.0:
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
-make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
 make-dir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz"
@@ -6976,7 +6767,7 @@ mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0, mime@^1.4.1:
+mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -7162,24 +6953,11 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-natural-compare-lite@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz"
-  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-needle@^3.1.0:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz"
-  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
-  dependencies:
-    iconv-lite "^0.6.3"
-    sax "^1.2.4"
-
 negotiator@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
@@ -7541,11 +7319,6 @@ parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-node-version@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz"
-  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
-
 parse5-htmlparser2-tree-adapter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
@@ -7656,11 +7429,6 @@ pify@^2.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
@@ -7695,44 +7463,7 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
-  dependencies:
-    lilconfig "^2.0.5"
-    yaml "^1.10.2"
-
-postcss-modules-extract-imports@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
-  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
-
-postcss-modules-local-by-default@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz#f1b9bd757a8edf4d8556e8d0f4f894260e3df78f"
-  integrity sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==
-  dependencies:
-    icss-utils "^5.0.0"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
-postcss-modules-scope@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz#a43d28289a169ce2c15c00c4e64c0858e43457d5"
-  integrity sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz#49694cb4e7c649299fea510a29fa6577104bcf53"
-  integrity sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.2:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -7755,7 +7486,7 @@ postcss@8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-postcss@^8.0.0, postcss@^8.4.35, postcss@^8.4.5:
+postcss@^8.4.5:
   version "8.4.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
   integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
@@ -7865,11 +7596,6 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz"
-  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
-
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz"
@@ -8456,11 +8182,6 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reserved-words@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz"
-  integrity sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==
-
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
@@ -8618,25 +8339,6 @@ sass@^1.57.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.70.0:
-  version "1.77.6"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
-  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
-sax@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz"
-  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
-
-sax@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
-  integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
-
 saxes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz"
@@ -8666,12 +8368,12 @@ section-iterator@^2.0.0:
   resolved "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz"
   integrity sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ==
 
-"semver@2 || 3 || 4 || 5", semver@^5.6.0:
+"semver@2 || 3 || 4 || 5":
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@7.x, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
+semver@7.x, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
   version "7.6.2"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
@@ -8905,16 +8607,11 @@ source-map@0.5.6:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
   integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
-  version "0.7.4"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
-  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
-
 sparse-bitfield@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11"
@@ -9254,17 +8951,6 @@ stylis@4.3.2, stylis@^4.3.0:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
-stylus@^0.62.0:
-  version "0.62.0"
-  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz#648a020e2bf90ed87587ab9c2f012757e977bb5d"
-  integrity sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==
-  dependencies:
-    "@adobe/css-tools" "~4.3.1"
-    debug "^4.3.2"
-    glob "^7.1.6"
-    sax "~1.3.0"
-    source-map "^0.7.3"
-
 supercluster@^8.0.1:
   version "8.0.1"
   resolved "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz"
@@ -9551,12 +9237,7 @@ tslib@2.6.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.3:
+tslib@^2.1.0, tslib@^2.2.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.3:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
@@ -9569,13 +9250,6 @@ tsoa@^6.3.1:
     "@tsoa/cli" "^6.3.1"
     "@tsoa/runtime" "^6.3.0"
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
@@ -9692,28 +9366,6 @@ typescript-logic@^0.0.0:
   resolved "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz"
   integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
 
-typescript-plugin-css-modules@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.1.0.tgz#faa0ceffe8a8ffcbbc2f77ed637a64464195044a"
-  integrity sha512-6h+sLBa4l+XYSTn/31vZHd/1c3SvAbLpobY6FxDiUOHJQG1eD9Gh3eCs12+Eqc+TCOAdxcO+zAPvUq0jBfdciw==
-  dependencies:
-    "@types/postcss-modules-local-by-default" "^4.0.2"
-    "@types/postcss-modules-scope" "^3.0.4"
-    dotenv "^16.4.2"
-    icss-utils "^5.1.0"
-    less "^4.2.0"
-    lodash.camelcase "^4.3.0"
-    postcss "^8.4.35"
-    postcss-load-config "^3.1.4"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.4"
-    postcss-modules-scope "^3.1.1"
-    reserved-words "^0.1.2"
-    sass "^1.70.0"
-    source-map-js "^1.0.2"
-    stylus "^0.62.0"
-    tsconfig-paths "^4.2.0"
-
 typescript-tuple@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz"
@@ -9816,7 +9468,7 @@ use-sync-external-store@^1.0.0:
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -10170,11 +9822,6 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yaml@^1.10.2:
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
 yaml@^2.4.1:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.5.tgz#60630b206dd6d84df97003d33fc1ddf6296cca5e"

From 7828ed1fa756191ab78acaa6aa448c644b2ad81b Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 09:37:11 +0200
Subject: [PATCH 12/37] chore(client): :rotating_light: Fix linting issues
 related to useEffect dependencies

---
 client/src/components/Backend/screens/Dashboard/Dashboard.tsx   | 2 +-
 .../Backend/screens/UserContributions/UserContributions.tsx     | 2 +-
 .../Backend/screens/UserStructure/UserStructure.component.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Backend/screens/Dashboard/Dashboard.tsx b/client/src/components/Backend/screens/Dashboard/Dashboard.tsx
index f628c935b2..ce0c732127 100644
--- a/client/src/components/Backend/screens/Dashboard/Dashboard.tsx
+++ b/client/src/components/Backend/screens/Dashboard/Dashboard.tsx
@@ -108,7 +108,7 @@ const Dashboard = (props: Props) => {
       }
       Promise.all(promises).finally(() => setLoaded(true));
     }
-  }, [loaded, props.visible]);
+  }, [loaded, props.visible, themes]);
 
   const toggleNoGeolocModal = () => setShowNoGeolocModal(!showNoGeolocModal);
 
diff --git a/client/src/components/Backend/screens/UserContributions/UserContributions.tsx b/client/src/components/Backend/screens/UserContributions/UserContributions.tsx
index c52de8f9c3..d67b6db6a7 100644
--- a/client/src/components/Backend/screens/UserContributions/UserContributions.tsx
+++ b/client/src/components/Backend/screens/UserContributions/UserContributions.tsx
@@ -84,7 +84,7 @@ const UserContributions = (props: Props) => {
       );
     }
     window.scrollTo(0, 0);
-  }, [dispatch]);
+  }, [dispatch, userStructure]);
 
   const { user } = useUser();
   const contributions = formatContributions(
diff --git a/client/src/components/Backend/screens/UserStructure/UserStructure.component.tsx b/client/src/components/Backend/screens/UserStructure/UserStructure.component.tsx
index 13fc59c710..46588892df 100644
--- a/client/src/components/Backend/screens/UserStructure/UserStructure.component.tsx
+++ b/client/src/components/Backend/screens/UserStructure/UserStructure.component.tsx
@@ -56,7 +56,7 @@ export const UserStructureComponent = (props: Props) => {
       );
     }
     window.scrollTo(0, 0);
-  }, [dispatch]);
+  }, [dispatch, userStructure]);
 
   const isLoadingFetch = useSelector(isLoadingSelector(LoadingStatusKey.FETCH_USER_STRUCTURE));
   const isLoadingUpdate = useSelector(isLoadingSelector(LoadingStatusKey.UPDATE_USER_STRUCTURE));

From 8e4ec313473dbf5a86d40ea832ac7c53bcd4d19c Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 09:44:55 +0200
Subject: [PATCH 13/37] build(client): :green_heart: Bring back typescript
 module declarations for image files

---
 client/src/types/images.d.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 client/src/types/images.d.ts

diff --git a/client/src/types/images.d.ts b/client/src/types/images.d.ts
new file mode 100644
index 0000000000..1020b54538
--- /dev/null
+++ b/client/src/types/images.d.ts
@@ -0,0 +1,4 @@
+declare module "*.gif";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.svg";

From ce651dcbea4d3f44f738fcaa5ccccb6e99d79d45 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 09:45:40 +0200
Subject: [PATCH 14/37] chore: :arrow_up: upgrade client and server patch
 dependencies

---
 client/package.json |   4 +-
 server/package.json |   4 +-
 yarn.lock           | 164 ++++++++++++++++++++++++--------------------
 3 files changed, 92 insertions(+), 80 deletions(-)

diff --git a/client/package.json b/client/package.json
index e92758d06c..62e1070446 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,7 +12,7 @@
     "url": "git@github.com:entrepreneur-interet-general/karfur.git"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^1.9.11",
+    "@codegouvfr/react-dsfr": "^1.9.25",
     "@hedgedoc/html-to-react": "^2.1.1",
     "@lexical/react": "^0.16.1",
     "@react-google-maps/api": "^2.17.0",
@@ -31,7 +31,7 @@
     "lexical": "^0.16.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "next-i18next": "^15.3.0",
     "next-redux-wrapper": "^8.0.0",
     "next-sitemap": "^3.1.32",
diff --git a/server/package.json b/server/package.json
index 3e7e878381..64e768601c 100644
--- a/server/package.json
+++ b/server/package.json
@@ -49,7 +49,7 @@
     "twilio": "^5.2.0",
     "uniqid": "^5.0.3",
     "uuid": "^10.0.0",
-    "winston": "^3.2.1"
+    "winston": "^3.13.1"
   },
   "devDependencies": {
     "@types/compression": "^1.7.2",
@@ -70,7 +70,7 @@
     "mockdate": "^3.0.5",
     "mongodb": "^6.5.0",
     "nodemon": "^3.1.0",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.2.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.5.3"
   },
diff --git a/yarn.lock b/yarn.lock
index 7f79ddf85d..0817406a24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -448,10 +448,10 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@codegouvfr/react-dsfr@^1.9.11":
-  version "1.9.23"
-  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.9.23.tgz#a7892212f3b7f1b6c94f05e65ac5311cc4b15f87"
-  integrity sha512-afdSWAYpKqpLyI48m8wg6dJIJWMWtH1POFF5EwDoXOxchzIaJtaur2FPZxd0Q6HLWazp/L36j+ic0B50RN/y6w==
+"@codegouvfr/react-dsfr@^1.9.25":
+  version "1.9.25"
+  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.9.25.tgz#5288370d0a58721a3edf62e1e8232131ca02bc76"
+  integrity sha512-ikZNn2bT7KEtN5DBHkOIH7z5OubJTI6g069mh5CnlpZx19gIMMEYtJ/V2y+WbDmNlARZwxmuPbzfXeoBRY117g==
   dependencies:
     tsafe "^1.6.3"
     yargs-parser "^21.1.1"
@@ -1477,10 +1477,10 @@
   dependencies:
     sparse-bitfield "^3.0.3"
 
-"@next/env@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.4.tgz#5546813dc4f809884a37d257b254a5ce1b0248d7"
-  integrity sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==
+"@next/env@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.5.tgz#1d9328ab828711d3517d0a1d505acb55e5ef7ad0"
+  integrity sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==
 
 "@next/eslint-plugin-next@14.2.5", "@next/eslint-plugin-next@^14.2.5":
   version "14.2.5"
@@ -1489,50 +1489,50 @@
   dependencies:
     glob "10.3.10"
 
-"@next/swc-darwin-arm64@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz#da9f04c34a3d5f0b8401ed745768420e4a604036"
-  integrity sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==
-
-"@next/swc-darwin-x64@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz#46dedb29ec5503bf171a72a3ecb8aac6e738e9d6"
-  integrity sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==
-
-"@next/swc-linux-arm64-gnu@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz#c9697ab9eb422bd1d7ffd0eb0779cc2aefa9d4a1"
-  integrity sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==
-
-"@next/swc-linux-arm64-musl@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz#cbbceb2008571c743b5a310a488d2e166d200a75"
-  integrity sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==
-
-"@next/swc-linux-x64-gnu@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz#d79184223f857bacffb92f643cb2943a43632568"
-  integrity sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==
-
-"@next/swc-linux-x64-musl@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz#6b6c3e5ac02ca5e63394d280ec8ee607491902df"
-  integrity sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==
-
-"@next/swc-win32-arm64-msvc@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz#dbad3906e870dba84c5883d9d4c4838472e0697f"
-  integrity sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==
-
-"@next/swc-win32-ia32-msvc@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz#6074529b91ba49132922ce89a2e16d25d2ec235d"
-  integrity sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==
-
-"@next/swc-win32-x64-msvc@14.2.4":
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz#e65a1c6539a671f97bb86d5183d6e3a1733c29c7"
-  integrity sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==
+"@next/swc-darwin-arm64@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz#d0a160cf78c18731c51cc0bff131c706b3e9bb05"
+  integrity sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==
+
+"@next/swc-darwin-x64@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz#eb832a992407f6e6352eed05a073379f1ce0589c"
+  integrity sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==
+
+"@next/swc-linux-arm64-gnu@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz#098fdab57a4664969bc905f5801ef5a89582c689"
+  integrity sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==
+
+"@next/swc-linux-arm64-musl@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz#243a1cc1087fb75481726dd289c7b219fa01f2b5"
+  integrity sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==
+
+"@next/swc-linux-x64-gnu@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz#b8a2e436387ee4a52aa9719b718992e0330c4953"
+  integrity sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==
+
+"@next/swc-linux-x64-musl@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz#cb8a9adad5fb8df86112cfbd363aab5c6d32757b"
+  integrity sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==
+
+"@next/swc-win32-arm64-msvc@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz#81f996c1c38ea0900d4e7719cc8814be8a835da0"
+  integrity sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==
+
+"@next/swc-win32-ia32-msvc@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz#f61c74ce823e10b2bc150e648fc192a7056422e0"
+  integrity sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==
+
+"@next/swc-win32-x64-msvc@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz#ed199a920efb510cfe941cd75ed38a7be21e756f"
+  integrity sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -6620,7 +6620,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-logform@^2.3.2, logform@^2.4.0:
+logform@^2.3.2:
   version "2.6.0"
   resolved "https://registry.npmjs.org/logform/-/logform-2.6.0.tgz"
   integrity sha512-1ulHeNPp6k/LD8H91o7VYFBng5i1BDE7HoKxVbZiGFidS1Rj65qcywLxX+pVfAPoQJEjRdvKcusKwOupHCVOVQ==
@@ -6632,6 +6632,18 @@ logform@^2.3.2, logform@^2.4.0:
     safe-stable-stringify "^2.3.1"
     triple-beam "^1.3.0"
 
+logform@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/logform/-/logform-2.6.1.tgz#71403a7d8cae04b2b734147963236205db9b3df0"
+  integrity sha512-CdaO738xRapbKIMVn2m4F6KTj4j7ooJ8POVnebSgKo3KBz5axNXRAL7ZdRjIV6NOr2Uf4vjtRkxrFETOioCqSA==
+  dependencies:
+    "@colors/colors" "1.6.0"
+    "@types/triple-beam" "^1.3.2"
+    fecha "^4.2.0"
+    ms "^2.1.1"
+    safe-stable-stringify "^2.3.1"
+    triple-beam "^1.3.0"
+
 loglevel@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.1.tgz#d63976ac9bcd03c7c873116d41c2a85bafff1be7"
@@ -6997,12 +7009,12 @@ next-sitemap@^3.1.32:
     "@corex/deepmerge" "^4.0.29"
     minimist "^1.2.7"
 
-next@^14.2.4:
-  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.4.tgz#ef66c39c71e2d8ad0a3caa0383c8933f4663e4d1"
-  integrity sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==
+next@^14.2.5:
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.5.tgz#afe4022bb0b752962e2205836587a289270efbea"
+  integrity sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==
   dependencies:
-    "@next/env" "14.2.4"
+    "@next/env" "14.2.5"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -7010,15 +7022,15 @@ next@^14.2.4:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.4"
-    "@next/swc-darwin-x64" "14.2.4"
-    "@next/swc-linux-arm64-gnu" "14.2.4"
-    "@next/swc-linux-arm64-musl" "14.2.4"
-    "@next/swc-linux-x64-gnu" "14.2.4"
-    "@next/swc-linux-x64-musl" "14.2.4"
-    "@next/swc-win32-arm64-msvc" "14.2.4"
-    "@next/swc-win32-ia32-msvc" "14.2.4"
-    "@next/swc-win32-x64-msvc" "14.2.4"
+    "@next/swc-darwin-arm64" "14.2.5"
+    "@next/swc-darwin-x64" "14.2.5"
+    "@next/swc-linux-arm64-gnu" "14.2.5"
+    "@next/swc-linux-arm64-musl" "14.2.5"
+    "@next/swc-linux-x64-gnu" "14.2.5"
+    "@next/swc-linux-x64-musl" "14.2.5"
+    "@next/swc-win32-arm64-msvc" "14.2.5"
+    "@next/swc-win32-ia32-msvc" "14.2.5"
+    "@next/swc-win32-x64-msvc" "14.2.5"
 
 node-cache@^5.1.2:
   version "5.1.2"
@@ -9174,10 +9186,10 @@ ts-jest@29.0.3:
     semver "7.x"
     yargs-parser "^21.0.1"
 
-ts-jest@^29.1.1:
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.2.1.tgz#9a460bb27446d141c48a17cf24f060dbe9b58254"
-  integrity sha512-7obwtH5gw0b0XZi0wmprCSvGSvHliMBI47lPnU47vmbxWS6B+v1X94yWFo1f1vt9k/he+gttsrXjkxmgY41XNQ==
+ts-jest@^29.2.2:
+  version "29.2.2"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.2.2.tgz#0d2387bb04d39174b20a05172a968f258aedff4d"
+  integrity sha512-sSW7OooaKT34AAngP6k1VS669a0HdLxkQZnlC7T76sckGCokXFnvJ3yRlQZGRTAoV5K19HfSgCiSwWOSIfcYlg==
   dependencies:
     bs-logger "0.x"
     ejs "^3.0.0"
@@ -9702,16 +9714,16 @@ winston-transport@^4.7.0:
     readable-stream "^3.6.0"
     triple-beam "^1.3.0"
 
-winston@^3.2.1:
-  version "3.13.0"
-  resolved "https://registry.npmjs.org/winston/-/winston-3.13.0.tgz"
-  integrity sha512-rwidmA1w3SE4j0E5MuIufFhyJPBDG7Nu71RkZor1p2+qHvJSZ9GYDA81AyleQcZbh/+V6HjeBdfnTZJm9rSeQQ==
+winston@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/winston/-/winston-3.13.1.tgz#53ddadb9c2332eb12cff8306413b3480dc82b6c3"
+  integrity sha512-SvZit7VFNvXRzbqGHsv5KSmgbEYR5EiQfDAL9gxYkRqa934Hnk++zze0wANKtMHcy/gI4W/3xmSDwlhf865WGw==
   dependencies:
     "@colors/colors" "^1.6.0"
     "@dabh/diagnostics" "^2.0.2"
     async "^3.2.3"
     is-stream "^2.0.0"
-    logform "^2.4.0"
+    logform "^2.6.0"
     one-time "^1.0.0"
     readable-stream "^3.4.0"
     safe-stable-stringify "^2.3.1"

From e2c13cf4aa16e7f802d37b2d1c7cbfc5ad31315c Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 09:57:16 +0200
Subject: [PATCH 15/37] chore: :arrow_up: Upgrade minor dependencies

---
 client/package.json |  4 ++--
 yarn.lock           | 36 +++++++++++-------------------------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/client/package.json b/client/package.json
index 62e1070446..18a6f800e3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -49,7 +49,7 @@
     "react-google-autocomplete": "^2.6.1",
     "react-hook-form": "^7.43.1",
     "react-i18next": "^14.1.2",
-    "react-intersection-observer": "^9.4.1",
+    "react-intersection-observer": "^9.11.0",
     "react-loading-skeleton": "^3.1.0",
     "react-notifications": "^1.7.3",
     "react-redux": "^9.1.2",
@@ -133,7 +133,7 @@
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
-    "ts-jest": "29.0.3",
+    "ts-jest": "29.2.2",
     "typescript": "^5.5.3"
   },
   "volta": {
diff --git a/yarn.lock b/yarn.lock
index 0817406a24..386f218b44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6362,7 +6362,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
+json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -7847,10 +7847,10 @@ react-i18next@^14.1.2:
     "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
-react-intersection-observer@^9.4.1:
-  version "9.10.3"
-  resolved "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.3.tgz"
-  integrity sha512-9NYfKwPZRovB6QJee7fDg0zz/SyYrqXtn5xTZU0vwLtLVBtfu9aZt1pVmr825REE49VPDZ7Lm5SNHjJBOTZHpA==
+react-intersection-observer@^9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.11.0.tgz#f9e271ceb09391dcb612eeeb9dd564889f8e005c"
+  integrity sha512-fIaYm1nN7FGa4Lpa+sIf8YZWPGbYvctAHQWFjWMv+z+MSMiq9gfPkHLtCglyiPMpaH49ZgGxXuH+THCGcHX75Q==
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
@@ -8385,16 +8385,16 @@ section-iterator@^2.0.0:
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@7.x, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
-  version "7.6.2"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
-  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
-
 semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2:
+  version "7.6.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz"
+  integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
@@ -9172,21 +9172,7 @@ ts-easing@^0.2.0:
   resolved "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
-ts-jest@29.0.3:
-  version "29.0.3"
-  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-29.0.3.tgz"
-  integrity sha512-Ibygvmuyq1qp/z3yTh9QTwVVAbFdDy/+4BtIQR2sp6baF2SJU/8CKK/hhnGIDY2L90Az2jIqTwZPnN2p+BweiQ==
-  dependencies:
-    bs-logger "0.x"
-    fast-json-stable-stringify "2.x"
-    jest-util "^29.0.0"
-    json5 "^2.2.1"
-    lodash.memoize "4.x"
-    make-error "1.x"
-    semver "7.x"
-    yargs-parser "^21.0.1"
-
-ts-jest@^29.2.2:
+ts-jest@29.2.2, ts-jest@^29.2.2:
   version "29.2.2"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.2.2.tgz#0d2387bb04d39174b20a05172a968f258aedff4d"
   integrity sha512-sSW7OooaKT34AAngP6k1VS669a0HdLxkQZnlC7T76sckGCokXFnvJ3yRlQZGRTAoV5K19HfSgCiSwWOSIfcYlg==

From b9621bbb36b82ff921090bb435f0a8ba66ab2587 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 10:16:49 +0200
Subject: [PATCH 16/37] chore: :arrow_up: Upgrade testing library dependencies

---
 client/package.json |  11 ++-
 server/package.json |   2 +-
 yarn.lock           | 224 +++++++++++++++-----------------------------
 3 files changed, 82 insertions(+), 155 deletions(-)

diff --git a/client/package.json b/client/package.json
index 18a6f800e3..a2d8c0bb8c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -97,8 +97,9 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.5",
     "@redux-devtools/extension": "^3.2.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/file-saver": "^2.0.1",
     "@types/html-to-draftjs": "^1.4.0",
@@ -108,14 +109,14 @@
     "@types/react": "^18.3.3",
     "@types/react-autosuggest": "^10.1.5",
     "@types/react-dom": "^18.3.0",
-    "@types/react-highlight-words": "^0.16.4",
+    "@types/react-highlight-words": "^0.20.0",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/react-test-renderer": "^18.0.0",
     "@types/recompose": "^0.30.7",
     "@types/redux-mock-store": "^1.0.3",
     "@types/sortablejs": "^1.13.0",
     "@types/styled-components": "^5.1.1",
-    "@types/uuid": "^9.0.1",
+    "@types/uuid": "^10.0.0",
     "@types/webrtc": "^0.0.43",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
@@ -126,7 +127,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-mock-axios": "^4.7.0-beta2",
     "jest-styled-components": "^7.0.0",
-    "next-router-mock": "^0.8.0",
+    "next-router-mock": "^0.9.13",
     "papaparse": "^5.3.0",
     "postcss": "^8.4.5",
     "react-test-renderer": "^18.2.0",
diff --git a/server/package.json b/server/package.json
index 64e768601c..dd60d6b729 100644
--- a/server/package.json
+++ b/server/package.json
@@ -64,7 +64,7 @@
     "@types/uniqid": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
-    "concurrently": "^7.6.0",
+    "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "mockdate": "^3.0.5",
diff --git a/yarn.lock b/yarn.lock
index 386f218b44..1406d51711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-"@adobe/css-tools@^4.0.1":
+"@adobe/css-tools@^4.0.1", "@adobe/css-tools@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz"
   integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==
@@ -1776,43 +1776,40 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
-"@testing-library/dom@^8.5.0":
-  version "8.20.1"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz"
-  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+"@testing-library/dom@^10.3.1":
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.3.1.tgz#c960204cce7e969ac03ae5f3550e420226c61a21"
+  integrity sha512-q/WL+vlXMpC0uXDyfsMtc1rmotzLV8Y0gq6q1gfrrDjQeHoeLrqHbxdPvPNAh1i+xuJl7+BezywcXArz7vLqKQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
     "@types/aria-query" "^5.0.1"
-    aria-query "5.1.3"
+    aria-query "5.3.0"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.16.2":
-  version "5.17.0"
-  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz"
-  integrity sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==
+"@testing-library/jest-dom@^6.4.6":
+  version "6.4.6"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz#ec1df8108651bed5475534955565bed88c6732ce"
+  integrity sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==
   dependencies:
-    "@adobe/css-tools" "^4.0.1"
+    "@adobe/css-tools" "^4.4.0"
     "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
+    dom-accessibility-api "^0.6.3"
+    lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/react@^13.4.0":
-  version "13.4.0"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz"
-  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
+"@testing-library/react@^16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.0.0.tgz#0a1e0c7a3de25841c3591b8cb7fb0cf0c0a27321"
+  integrity sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.5.0"
-    "@types/react-dom" "^18.0.0"
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -1890,7 +1887,7 @@
 
 "@types/aria-query@^5.0.1":
   version "5.0.4"
-  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
   integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
 "@types/autosuggest-highlight@^3.2.0":
@@ -2087,7 +2084,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*", "@types/jest@^29.2.3", "@types/jest@^29.5.12":
+"@types/jest@^29.2.3", "@types/jest@^29.5.12":
   version "29.5.12"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz"
   integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
@@ -2236,17 +2233,17 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
+"@types/react-dom@^18.3.0":
   version "18.3.0"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz"
   integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-highlight-words@^0.16.4":
-  version "0.16.7"
-  resolved "https://registry.npmjs.org/@types/react-highlight-words/-/react-highlight-words-0.16.7.tgz"
-  integrity sha512-+upXTIaRd3rGvh1aDQSs9z5X+sV3UM6Jrmjk03GN2GXl4v/+iOJKQj2LZHo6Vp2IoTvMdtxgME26feqo12xXLg==
+"@types/react-highlight-words@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/@types/react-highlight-words/-/react-highlight-words-0.20.0.tgz#c7e3e8302acb5082980e611ce2d93c6e6d3b4022"
+  integrity sha512-Qm512TiOakvtNzHJ2+TNVHnLn5cJ2wLQV0+LrhuispVth6dRf5b8ydjq3Kc0thpZ7bz4s6RnG6meboAXHWRK+Q==
   dependencies:
     "@types/react" "*"
 
@@ -2357,13 +2354,6 @@
   resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
   integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.9"
-  resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz"
-  integrity sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz"
@@ -2384,10 +2374,10 @@
   resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
-"@types/uuid@^9.0.1":
-  version "9.0.8"
-  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz"
-  integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
+"@types/uuid@^10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d"
+  integrity sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==
 
 "@types/webidl-conversions@*":
   version "7.0.3"
@@ -2752,21 +2742,14 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
-  dependencies:
-    deep-equal "^2.0.5"
-
-aria-query@^5.0.0, aria-query@^5.3.0:
+aria-query@5.3.0, aria-query@^5.0.0, aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
   dependencies:
     dequal "^2.0.3"
 
-array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz"
   integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
@@ -3258,7 +3241,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3481,20 +3464,20 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-concurrently@^7.6.0:
-  version "7.6.0"
-  resolved "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz"
-  integrity sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==
+concurrently@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.2.tgz#353141985c198cfa5e4a3ef90082c336b5851784"
+  integrity sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==
   dependencies:
-    chalk "^4.1.0"
-    date-fns "^2.29.1"
+    chalk "^4.1.2"
+    date-fns "^2.30.0"
     lodash "^4.17.21"
-    rxjs "^7.0.0"
-    shell-quote "^1.7.3"
-    spawn-command "^0.0.2-1"
-    supports-color "^8.1.0"
+    rxjs "^7.8.1"
+    shell-quote "^1.8.1"
+    spawn-command "0.0.2"
+    supports-color "^8.1.1"
     tree-kill "^1.2.2"
-    yargs "^17.3.1"
+    yargs "^17.7.2"
 
 connect-multiparty@^2.2.0:
   version "2.2.0"
@@ -3750,9 +3733,9 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-date-fns@^2.29.1:
+date-fns@^2.30.0:
   version "2.30.0"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
@@ -3803,30 +3786,6 @@ dedent@^1.0.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz"
   integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
 
-deep-equal@^2.0.5:
-  version "2.2.3"
-  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz"
-  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.5"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.2"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.13"
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -3921,11 +3880,16 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.16"
-  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-accessibility-api@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
+  integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
+
 dom-align@^1.7.0:
   version "1.12.4"
   resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz"
@@ -4186,21 +4150,6 @@ es-errors@^1.2.1, es-errors@^1.3.0:
   resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-get-iterator@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz"
-  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    has-symbols "^1.0.3"
-    is-arguments "^1.1.1"
-    is-map "^2.0.2"
-    is-set "^2.0.2"
-    is-string "^1.0.7"
-    isarray "^2.0.5"
-    stop-iteration-iterator "^1.0.0"
-
 es-iterator-helpers@^1.0.15, es-iterator-helpers@^1.0.19:
   version "1.0.19"
   resolved "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz"
@@ -4927,7 +4876,7 @@ get-caller-file@^2.0.5:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
@@ -5453,7 +5402,7 @@ inline-style-prefixer@^7.0.0:
     css-in-js-utils "^3.1.0"
     fast-loops "^1.1.3"
 
-internal-slot@^1.0.4, internal-slot@^1.0.7:
+internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz"
   integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
@@ -5492,15 +5441,7 @@ ipaddr.js@1.9.1:
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz"
   integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
@@ -5623,7 +5564,7 @@ is-html@^2.0.0:
   dependencies:
     html-tags "^3.0.0"
 
-is-map@^2.0.2, is-map@^2.0.3:
+is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz"
   integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
@@ -5663,7 +5604,7 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-set@^2.0.2, is-set@^2.0.3:
+is-set@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz"
   integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
@@ -6615,7 +6556,7 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6683,7 +6624,7 @@ lru-cache@^5.1.1:
 
 lz-string@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
 make-dir@^4.0.0:
@@ -6996,10 +6937,10 @@ next-redux-wrapper@^8.0.0:
   resolved "https://registry.npmjs.org/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz"
   integrity sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==
 
-next-router-mock@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/next-router-mock/-/next-router-mock-0.8.0.tgz"
-  integrity sha512-aw/QnDFRqGDIkC3y4mCL5HQCNK94IzIfrEYy2c17WVp6Q4V5GUarFx751Sccf8fUPdkzD2/RsldyScvNZGA8lw==
+next-router-mock@^0.9.13:
+  version "0.9.13"
+  resolved "https://registry.yarnpkg.com/next-router-mock/-/next-router-mock-0.9.13.tgz#bdee2011ea6c09e490121c354ef917f339767f72"
+  integrity sha512-906n2RRaE6Y28PfYJbaz5XZeJ6Tw8Xz1S6E31GGwZ0sXB6/XjldD1/2azn1ZmBmRk5PQRkzjg+n+RHZe5xQzWA==
 
 next-sitemap@^3.1.32:
   version "3.1.55"
@@ -7136,14 +7077,6 @@ object-inspect@^1.13.1:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
   integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
 
-object-is@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz"
-  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
@@ -7514,7 +7447,7 @@ prelude-ls@^1.2.1:
 
 pretty-format@^27.0.2:
   version "27.5.1"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
   integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
   dependencies:
     ansi-regex "^5.0.1"
@@ -7864,7 +7797,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
 
 react-is@^17.0.1:
   version "17.0.2"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-lifecycles-compat@^3.0.4:
@@ -8133,7 +8066,7 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
-regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
+regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz"
   integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
@@ -8289,9 +8222,9 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs@^7.0.0:
+rxjs@^7.8.1:
   version "7.8.1"
-  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
   integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
   dependencies:
     tslib "^2.1.0"
@@ -8529,9 +8462,9 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.7.3:
+shell-quote@^1.8.1:
   version "1.8.1"
-  resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
 side-channel@^1.0.4, side-channel@^1.0.6:
@@ -8631,10 +8564,10 @@ sparse-bitfield@^3.0.3:
   dependencies:
     memory-pager "^1.0.2"
 
-spawn-command@^0.0.2-1:
-  version "0.0.2-1"
-  resolved "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz"
-  integrity sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
+spawn-command@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
 
 spdx-correct@^3.0.0:
   version "3.2.0"
@@ -8743,13 +8676,6 @@ statuses@2.0.1:
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
 stream-events@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.5.tgz#bbc898ec4df33a4902d892333d47da9bf1c406d5"
@@ -8984,7 +8910,7 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0, supports-color@^8.1.0:
+supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -9666,7 +9592,7 @@ which-module@^1.0.0:
   resolved "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz"
   integrity sha512-F6+WgncZi/mJDrammbTuHe1q0R5hOXv/mBaiNA2TCNT/LTHusX0V+CJnj9XT8ki5ln2UZyyddDgHfCzyrOH7MQ==
 
-which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.9:
+which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.9:
   version "1.1.15"
   resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz"
   integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==

From 01440915258821d8c2e1a5dc5cb34003162b8c13 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 10:24:25 +0200
Subject: [PATCH 17/37] chore(client): :arrow_up: Upgrade few remaining non
 problematic dependencies

---
 client/package.json |  4 ++--
 yarn.lock           | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client/package.json b/client/package.json
index a2d8c0bb8c..0153105fa7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,7 +36,7 @@
     "next-redux-wrapper": "^8.0.0",
     "next-sitemap": "^3.1.32",
     "process": "^0.11.10",
-    "query-string": "^8.1.0",
+    "query-string": "^9.0.0",
     "rc-time-picker": "^3.7.3",
     "react": "^18.3.1",
     "react-anchor-link-smooth-scroll": "^1.0.12",
@@ -49,7 +49,7 @@
     "react-google-autocomplete": "^2.6.1",
     "react-hook-form": "^7.43.1",
     "react-i18next": "^14.1.2",
-    "react-intersection-observer": "^9.11.0",
+    "react-intersection-observer": "^9.12.0",
     "react-loading-skeleton": "^3.1.0",
     "react-notifications": "^1.7.3",
     "react-redux": "^9.1.2",
diff --git a/yarn.lock b/yarn.lock
index 1406d51711..3f895dcb6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7590,10 +7590,10 @@ qs@~6.5.2:
   resolved "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz"
   integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
-query-string@^8.1.0:
-  version "8.2.0"
-  resolved "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz"
-  integrity sha512-tUZIw8J0CawM5wyGBiDOAp7ObdRQh4uBor/fUR9ZjmbZVvw95OD9If4w3MQxr99rg0DJZ/9CIORcpEqU5hQG7g==
+query-string@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-9.0.0.tgz#1fe177cd95545600f0deab93f5fb02fd4e3e7273"
+  integrity sha512-4EWwcRGsO2H+yzq6ddHcVqkCQ2EFUSfDMEjF8ryp8ReymyZhIuaFRGLomeOQLkrzacMHoyky2HW0Qe30UbzkKw==
   dependencies:
     decode-uri-component "^0.4.1"
     filter-obj "^5.1.0"
@@ -7780,10 +7780,10 @@ react-i18next@^14.1.2:
     "@babel/runtime" "^7.23.9"
     html-parse-stringify "^3.0.1"
 
-react-intersection-observer@^9.11.0:
-  version "9.11.0"
-  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.11.0.tgz#f9e271ceb09391dcb612eeeb9dd564889f8e005c"
-  integrity sha512-fIaYm1nN7FGa4Lpa+sIf8YZWPGbYvctAHQWFjWMv+z+MSMiq9gfPkHLtCglyiPMpaH49ZgGxXuH+THCGcHX75Q==
+react-intersection-observer@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.12.0.tgz#40498b13f6fc6fd311077369ee402f8219d5f006"
+  integrity sha512-KmczTRfcIg5hcmqFbb1fKPprT7AkOjj0ohUCs1iOwWe9BJPnC5nQ7dRX44z2W1jHiRt1uQST0AxGqWL6X8pN2A==
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"

From b18f30b78b52b40c3f7cf718fbb444636a29d8c7 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 11 Jul 2024 10:27:44 +0200
Subject: [PATCH 18/37] chore(client): :arrow_up: Major upgrade of next-sitemap
 package and compatibily fixes to codebase

---
 client/package.json                           |  2 +-
 client/src/pages/sitemap-index.xml/index.tsx  |  6 ++---
 client/src/pages/sitemap-index/[...index].tsx | 12 ++++-----
 yarn.lock                                     | 27 ++++++++++++-------
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/client/package.json b/client/package.json
index 0153105fa7..48ca3fbb96 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,7 +34,7 @@
     "next": "^14.2.5",
     "next-i18next": "^15.3.0",
     "next-redux-wrapper": "^8.0.0",
-    "next-sitemap": "^3.1.32",
+    "next-sitemap": "^4.2.3",
     "process": "^0.11.10",
     "query-string": "^9.0.0",
     "rc-time-picker": "^3.7.3",
diff --git a/client/src/pages/sitemap-index.xml/index.tsx b/client/src/pages/sitemap-index.xml/index.tsx
index c2590e2c99..df7591c742 100644
--- a/client/src/pages/sitemap-index.xml/index.tsx
+++ b/client/src/pages/sitemap-index.xml/index.tsx
@@ -1,13 +1,13 @@
-import { getServerSideSitemapIndex } from "next-sitemap";
 import { GetServerSideProps } from "next";
+import { getServerSideSitemapIndexLegacy } from "next-sitemap";
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const siteUrl = process.env.NEXT_PUBLIC_REACT_APP_SITE_URL;
   const locales = (ctx.locales || []).filter((ln) => ln !== "default");
 
-  return getServerSideSitemapIndex(
+  return getServerSideSitemapIndexLegacy(
     ctx,
-    locales.map((ln) => `${siteUrl}/sitemap-index/sitemap-index-${ln}.xml`)
+    locales.map((ln) => `${siteUrl}/sitemap-index/sitemap-index-${ln}.xml`),
   );
 };
 
diff --git a/client/src/pages/sitemap-index/[...index].tsx b/client/src/pages/sitemap-index/[...index].tsx
index 569bdd571c..3b9a795295 100644
--- a/client/src/pages/sitemap-index/[...index].tsx
+++ b/client/src/pages/sitemap-index/[...index].tsx
@@ -1,7 +1,7 @@
-import { GetServerSideProps } from "next";
-import { getServerSideSitemap, getServerSideSitemapIndex } from "next-sitemap";
 import { extractIndexFromUrl } from "lib/sitemap/extractIndexFromUrl";
 import { getAllUrls } from "lib/sitemap/getAllUrls";
+import { GetServerSideProps } from "next";
+import { getServerSideSitemapIndexLegacy, getServerSideSitemapLegacy } from "next-sitemap";
 
 const SITE_URL = process.env.NEXT_PUBLIC_REACT_APP_SITE_URL;
 const TYPES = ["dispositifs", "demarches", "structures", "pages"];
@@ -16,9 +16,9 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   // /sitemap-index/sitemap-index-LN
   if (index.length === 1) {
-    return getServerSideSitemapIndex(
+    return getServerSideSitemapIndexLegacy(
       ctx,
-      TYPES.map((type) => `${SITE_URL}/sitemap-index/sitemap-index-${locale}/sitemap-index-${type}.xml`)
+      TYPES.map((type) => `${SITE_URL}/sitemap-index/sitemap-index-${locale}/sitemap-index-${type}.xml`),
     );
   }
 
@@ -32,10 +32,10 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     const urls = await getAllUrls(type, locale);
     const fields = urls.map((url) => ({
       loc: url,
-      lastmod: new Date().toISOString()
+      lastmod: new Date().toISOString(),
     }));
 
-    return getServerSideSitemap(ctx, fields);
+    return getServerSideSitemapLegacy(ctx, fields);
   }
 
   // 404 wrong path
diff --git a/yarn.lock b/yarn.lock
index 3f895dcb6a..84dc9093a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -461,9 +461,9 @@
   resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz"
   integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
 
-"@corex/deepmerge@^4.0.29":
+"@corex/deepmerge@^4.0.43":
   version "4.0.43"
-  resolved "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz"
+  resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-4.0.43.tgz#9bd42559ebb41cc5a7fb7cfeea5f231c20977dca"
   integrity sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==
 
 "@cspotcode/source-map-support@^0.8.0":
@@ -1482,6 +1482,11 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.5.tgz#1d9328ab828711d3517d0a1d505acb55e5ef7ad0"
   integrity sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==
 
+"@next/env@^13.4.3":
+  version "13.5.6"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.5.6.tgz#c1148e2e1aa166614f05161ee8f77ded467062bc"
+  integrity sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==
+
 "@next/eslint-plugin-next@14.2.5", "@next/eslint-plugin-next@^14.2.5":
   version "14.2.5"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz#f7e3ff3efe40a2855e5f29bc2692175f85913ba8"
@@ -4577,7 +4582,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9, fast-glob@^3.3.1:
+fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -6770,7 +6775,7 @@ minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
+minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -6942,13 +6947,15 @@ next-router-mock@^0.9.13:
   resolved "https://registry.yarnpkg.com/next-router-mock/-/next-router-mock-0.9.13.tgz#bdee2011ea6c09e490121c354ef917f339767f72"
   integrity sha512-906n2RRaE6Y28PfYJbaz5XZeJ6Tw8Xz1S6E31GGwZ0sXB6/XjldD1/2azn1ZmBmRk5PQRkzjg+n+RHZe5xQzWA==
 
-next-sitemap@^3.1.32:
-  version "3.1.55"
-  resolved "https://registry.npmjs.org/next-sitemap/-/next-sitemap-3.1.55.tgz"
-  integrity sha512-ZjkRfkqoSLbU+e8W9TWWe0zfOGNA47lpvm35kNcUCmj73gpLX2PIn51gwHT/B6bgGVAFYY0OXixJDrxIIwcEHw==
+next-sitemap@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-4.2.3.tgz#5db3f650351a51e84b9fd6b58c5af2f9257b5058"
+  integrity sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==
   dependencies:
-    "@corex/deepmerge" "^4.0.29"
-    minimist "^1.2.7"
+    "@corex/deepmerge" "^4.0.43"
+    "@next/env" "^13.4.3"
+    fast-glob "^3.2.12"
+    minimist "^1.2.8"
 
 next@^14.2.5:
   version "14.2.5"

From b92df089f386ba92dd094393b798e5946d1ddf1d Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Mon, 15 Jul 2024 15:58:14 +0200
Subject: [PATCH 19/37] chore(client): :arrow_up: Add dependencies to move from
 react-test-renderer to @testing-library/react

---
 client/package.json |  2 --
 yarn.lock           | 34 +++++-----------------------------
 2 files changed, 5 insertions(+), 31 deletions(-)

diff --git a/client/package.json b/client/package.json
index 48ca3fbb96..101f3d3039 100644
--- a/client/package.json
+++ b/client/package.json
@@ -111,7 +111,6 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-highlight-words": "^0.20.0",
     "@types/react-router-hash-link": "^2.4.5",
-    "@types/react-test-renderer": "^18.0.0",
     "@types/recompose": "^0.30.7",
     "@types/redux-mock-store": "^1.0.3",
     "@types/sortablejs": "^1.13.0",
@@ -130,7 +129,6 @@
     "next-router-mock": "^0.9.13",
     "papaparse": "^5.3.0",
     "postcss": "^8.4.5",
-    "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
diff --git a/yarn.lock b/yarn.lock
index 84dc9093a7..b74c869a03 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2278,13 +2278,6 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-test-renderer@^18.0.0":
-  version "18.3.0"
-  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz"
-  integrity sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^18.3.3":
   version "18.3.3"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz"
@@ -7797,16 +7790,16 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
-
 react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
@@ -7878,14 +7871,6 @@ react-router@5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-shallow-renderer@^16.15.0:
-  version "16.15.0"
-  resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz"
-  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-
 react-sortablejs@^6.1.4:
   version "6.1.4"
   resolved "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-6.1.4.tgz"
@@ -7894,15 +7879,6 @@ react-sortablejs@^6.1.4:
     classnames "2.3.1"
     tiny-invariant "1.2.0"
 
-react-test-renderer@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz"
-  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
-  dependencies:
-    react-is "^18.3.1"
-    react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.2"
-
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz"

From aac8f076fd670cd8c8742b5a377f1a0d6bec6692 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Mon, 15 Jul 2024 16:05:07 +0200
Subject: [PATCH 20/37] refactor(client): :fire: Remove
 wrapWithProvidersAndRender in favor of wrapWithProvidersAndRenderForTesting

---
 .../jest/lib/wrapWithProvidersAndRender.tsx   | 31 +--------------
 client/src/__tests__/agir.test.tsx            | 10 ++---
 client/src/__tests__/auth/auth.test.tsx       | 10 ++---
 .../__tests__/auth/code-connexion.test.tsx    | 12 +++---
 .../src/__tests__/auth/code-securite.test.tsx | 12 +++---
 client/src/__tests__/auth/connexion.test.tsx  | 12 +++---
 .../mail-envoye.test.tsx                      | 10 ++---
 .../nouveau.test.tsx                          | 10 ++---
 .../reinitialiser-mot-de-passe.test.tsx       | 12 +++---
 client/src/__tests__/index.test.tsx           |  4 +-
 client/src/__tests__/publier.test.tsx         | 10 ++---
 client/src/__tests__/recherche.test.tsx       | 10 ++---
 client/src/__tests__/traduire.test.tsx        | 10 ++---
 .../__tests__/SubComponents.test.tsx          | 39 +++++++++----------
 .../UserContributions.component.test.tsx      | 21 +++++-----
 .../UserFavorites.component.test.tsx          | 24 ++++++------
 .../__tests__/UserNotifications.test.tsx      | 29 +++++++-------
 .../__test__/UserProfile.component.test.tsx   | 17 ++++----
 .../__tests__/UserStructure.test.tsx          | 24 ++++++------
 .../UserTranslation.component.test.tsx        | 28 ++++++-------
 .../Pages/auth/CheckCode/CheckCode.test.tsx   | 15 +++----
 21 files changed, 156 insertions(+), 194 deletions(-)

diff --git a/client/jest/lib/wrapWithProvidersAndRender.tsx b/client/jest/lib/wrapWithProvidersAndRender.tsx
index 6d2f6401df..1967b13e9e 100644
--- a/client/jest/lib/wrapWithProvidersAndRender.tsx
+++ b/client/jest/lib/wrapWithProvidersAndRender.tsx
@@ -1,11 +1,10 @@
+import { render } from "@testing-library/react";
 import React from "react";
-import renderer from "react-test-renderer";
 import { Provider } from "react-redux";
+import { BrowserRouter as Router } from "react-router-dom";
 import configureStore from "redux-mock-store";
 import { RootState } from "services/rootReducer";
 import { initialMockStore } from "__fixtures__/reduxStore";
-import { BrowserRouter as Router } from "react-router-dom";
-import { render } from "@testing-library/react";
 
 interface WrapWithProvidersAndRenderParams<Props> {
   Component: React.FunctionComponent<any>;
@@ -13,32 +12,6 @@ interface WrapWithProvidersAndRenderParams<Props> {
   reduxState?: Partial<RootState>;
 }
 
-/**
- * Provide all the ugly-to-set-up providers for your component to be ready to test
- * @param Component
- * @param compProps properties passed on to [getPropsWithNavigation()] to gen navigation props
- * @param reduxState defaults to initialRootState
- */
-
-export function wrapWithProvidersAndRender<T>({
-  Component,
-  compProps,
-  reduxState = initialMockStore,
-}: WrapWithProvidersAndRenderParams<T>) {
-  const mockStore = configureStore([]);
-  const store = mockStore(reduxState);
-
-  const componentWithRedux = (
-    <Router>
-      <Provider store={store}>
-        <Component {...compProps} />
-      </Provider>
-    </Router>
-  );
-
-  return renderer.create(componentWithRedux);
-}
-
 /**
  * Provide all the ugly-to-set-up providers for your component to be ready to test
  * @param Component
diff --git a/client/src/__tests__/agir.test.tsx b/client/src/__tests__/agir.test.tsx
index 3102b9c25f..816a4c123c 100644
--- a/client/src/__tests__/agir.test.tsx
+++ b/client/src/__tests__/agir.test.tsx
@@ -1,8 +1,8 @@
-import { wrapWithProvidersAndRender } from "../../jest/lib/wrapWithProvidersAndRender";
-import agir from "../pages/agir";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import "jest-styled-components";
+import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
+import agir from "../pages/agir";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -16,7 +16,7 @@ describe("agir", () => {
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: agir,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/auth.test.tsx b/client/src/__tests__/auth/auth.test.tsx
index e4bfdaa284..a80ac8a04d 100644
--- a/client/src/__tests__/auth/auth.test.tsx
+++ b/client/src/__tests__/auth/auth.test.tsx
@@ -1,9 +1,9 @@
-import { wrapWithProvidersAndRender } from "../../../jest/lib/wrapWithProvidersAndRender";
-import auth from "../../pages/auth";
-import { initialMockStore } from "__fixtures__/reduxStore";
+import "jest-styled-components";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
+import auth from "../../pages/auth";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import "jest-styled-components";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -18,7 +18,7 @@ describe("auth", () => {
   it("renders auth", () => {
     window.scrollTo = jest.fn();
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: auth,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/code-connexion.test.tsx b/client/src/__tests__/auth/code-connexion.test.tsx
index 5dc2ec362c..5324e3ddf1 100644
--- a/client/src/__tests__/auth/code-connexion.test.tsx
+++ b/client/src/__tests__/auth/code-connexion.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../jest/lib/wrapWithProvidersAndRender";
-import codeConnexion from "../../pages/auth/code-connexion";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
+import codeConnexion from "../../pages/auth/code-connexion";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import "jest-styled-components";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -18,7 +18,7 @@ describe("auth/connexion", () => {
 
   it("renders null if no email", () => {
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: codeConnexion,
         reduxState: {
           ...initialMockStore,
@@ -36,7 +36,7 @@ describe("auth/connexion", () => {
       mockRouter.push("/auth/code-connexion?email=test@example.com");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: codeConnexion,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/code-securite.test.tsx b/client/src/__tests__/auth/code-securite.test.tsx
index 3b2b624f3f..db546424c1 100644
--- a/client/src/__tests__/auth/code-securite.test.tsx
+++ b/client/src/__tests__/auth/code-securite.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../jest/lib/wrapWithProvidersAndRender";
-import codeSecurite from "../../pages/auth/code-securite";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
+import codeSecurite from "../../pages/auth/code-securite";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import "jest-styled-components";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -18,7 +18,7 @@ describe("auth/connexion", () => {
 
   it("renders null if no email", () => {
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: codeSecurite,
         reduxState: {
           ...initialMockStore,
@@ -36,7 +36,7 @@ describe("auth/connexion", () => {
       mockRouter.push("/auth/code-securite?email=test@example.com");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: codeSecurite,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/connexion.test.tsx b/client/src/__tests__/auth/connexion.test.tsx
index d87a0ab7af..ce64034df2 100644
--- a/client/src/__tests__/auth/connexion.test.tsx
+++ b/client/src/__tests__/auth/connexion.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../jest/lib/wrapWithProvidersAndRender";
-import connexion from "../../pages/auth/connexion";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
+import connexion from "../../pages/auth/connexion";
 import { setupGoogleMock } from "../../__mocks__/react-google-autocomplete";
-import "jest-styled-components";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -18,7 +18,7 @@ describe("auth/connexion", () => {
 
   it("renders null if no email", () => {
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: connexion,
         reduxState: {
           ...initialMockStore,
@@ -32,7 +32,7 @@ describe("auth/connexion", () => {
       mockRouter.push("/auth/connexion?email=test@example.com");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: connexion,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
index 6b6fdaf595..3dcf906300 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../../jest/lib/wrapWithProvidersAndRender";
-import pageComponent from "pages/auth/reinitialiser-mot-de-passe/mail-envoye";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
+import pageComponent from "pages/auth/reinitialiser-mot-de-passe/mail-envoye";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
-import "jest-styled-components";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -21,7 +21,7 @@ describe("auth/reinitialiser-mot-de-passe/mail-envoye", () => {
       mockRouter.push("/auth/reinitialiser-mot-de-passe/mail-envoye?email=test@example.com");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: pageComponent,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
index 7ca10fe3b6..7e02e6af6b 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../../jest/lib/wrapWithProvidersAndRender";
-import pageComponent from "pages/auth/reinitialiser-mot-de-passe/nouveau";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
+import pageComponent from "pages/auth/reinitialiser-mot-de-passe/nouveau";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
-import "jest-styled-components";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -21,7 +21,7 @@ describe("auth/reinitialiser-mot-de-passe/nouveau", () => {
       mockRouter.push("/auth/reinitialiser-mot-de-passe/nouveau?token=aaa");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: pageComponent,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
index 0cc857e893..31ebb002b3 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
@@ -1,10 +1,10 @@
-import { wrapWithProvidersAndRender } from "../../../../jest/lib/wrapWithProvidersAndRender";
-import pageComponent from "pages/auth/reinitialiser-mot-de-passe";
+import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { initialMockStore } from "__fixtures__/reduxStore";
+import pageComponent from "pages/auth/reinitialiser-mot-de-passe";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
-import "jest-styled-components";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -18,7 +18,7 @@ describe("auth/reinitialiser-mot-de-passe", () => {
 
   it("renders page if no email", () => {
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: pageComponent,
         reduxState: {
           ...initialMockStore,
@@ -32,7 +32,7 @@ describe("auth/reinitialiser-mot-de-passe", () => {
       mockRouter.push("/auth/reinitialiser-mot-de-passe?email=test@example.com");
     });
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: pageComponent,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/index.test.tsx b/client/src/__tests__/index.test.tsx
index ea559195f1..43b6933130 100644
--- a/client/src/__tests__/index.test.tsx
+++ b/client/src/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import { wrapWithProvidersAndRender } from "../../jest/lib/wrapWithProvidersAndRender";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import index, { Props } from "../pages/index";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { lastDemarches, lastDispositifs } from "__fixtures__/getDispositifs";
@@ -18,7 +18,7 @@ describe("homepage", () => {
   it("renders homepage", () => {
     window.scrollTo = jest.fn();
     act(() => {
-      component = wrapWithProvidersAndRender<Props>({
+      component = wrapWithProvidersAndRenderForTesting<Props>({
         Component: index,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/publier.test.tsx b/client/src/__tests__/publier.test.tsx
index 30812917b7..cddc0aab16 100644
--- a/client/src/__tests__/publier.test.tsx
+++ b/client/src/__tests__/publier.test.tsx
@@ -1,8 +1,8 @@
-import { wrapWithProvidersAndRender } from "../../jest/lib/wrapWithProvidersAndRender";
-import publier from "../pages/publier";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import "jest-styled-components";
+import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
+import publier from "../pages/publier";
 
 jest.mock("components/Modals/WriteContentModal/WriteContentModal", () => jest.fn().mockReturnValue(<></>));
 jest.mock("next/router", () => require("next-router-mock"));
@@ -16,7 +16,7 @@ describe("publier", () => {
   it("renders publier", () => {
     window.scrollTo = jest.fn();
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: publier,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/recherche.test.tsx b/client/src/__tests__/recherche.test.tsx
index b1a2762424..08efd36081 100644
--- a/client/src/__tests__/recherche.test.tsx
+++ b/client/src/__tests__/recherche.test.tsx
@@ -1,9 +1,9 @@
-import { wrapWithProvidersAndRender } from "../../jest/lib/wrapWithProvidersAndRender";
-import recherche from "../pages/recherche";
-import { initialMockStore } from "__fixtures__/reduxStore";
+import "jest-styled-components";
 import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
+import recherche from "../pages/recherche";
 import { setupGoogleMock } from "../__mocks__/react-google-autocomplete";
-import "jest-styled-components";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -19,7 +19,7 @@ describe("recherche", () => {
     window.scrollTo = jest.fn();
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: recherche,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/__tests__/traduire.test.tsx b/client/src/__tests__/traduire.test.tsx
index 98362cd303..b527da7fa0 100644
--- a/client/src/__tests__/traduire.test.tsx
+++ b/client/src/__tests__/traduire.test.tsx
@@ -1,8 +1,8 @@
-import { wrapWithProvidersAndRender } from "../../jest/lib/wrapWithProvidersAndRender";
-import traduire from "../pages/traduire";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import "jest-styled-components";
+import { act, ReactTestRenderer } from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
+import traduire from "../pages/traduire";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -16,7 +16,7 @@ describe("traduire", () => {
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: traduire,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index eeeedff415..8ed5f925d8 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -1,20 +1,19 @@
 //@ts-nocheck
-import React from "react";
-import TestRenderer from "react-test-renderer";
 import "jest-styled-components";
+import TestRenderer from "react-test-renderer";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
 import {
-  TypeContenu,
-  Title,
+  DeleteButton,
+  FilterButton,
+  SeeButton,
   Structure,
   StyledStatus,
-  ValidateButton,
-  SeeButton,
-  DeleteButton,
   TabHeader,
-  FilterButton,
+  Title,
+  TypeContenu,
+  ValidateButton,
 } from "../SubComponents";
-import { wrapWithProvidersAndRender } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
-import { initialMockStore } from "__fixtures__/reduxStore";
 
 let component;
 
@@ -78,7 +77,7 @@ test("should render Structure with sponsor supprime", () => {
 });
 
 test("should render StyledStatus actif ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif" },
     reduxState: {
@@ -89,7 +88,7 @@ test("should render StyledStatus actif ", () => {
 });
 
 test("should render StyledStatus en attente ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente" },
     reduxState: {
@@ -99,7 +98,7 @@ test("should render StyledStatus en attente ", () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 test("should render StyledStatus Brouillon ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Brouillon" },
     reduxState: {
@@ -109,7 +108,7 @@ test("should render StyledStatus Brouillon ", () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 test("should render StyledStatus Rejeté structure ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Rejeté structure" },
     reduxState: {
@@ -119,7 +118,7 @@ test("should render StyledStatus Rejeté structure ", () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 test("should render StyledStatus En attente admin ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente admin" },
     reduxState: {
@@ -129,7 +128,7 @@ test("should render StyledStatus En attente admin ", () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 test("should render StyledStatus Accepté structure ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Accepté structure" },
     reduxState: {
@@ -139,7 +138,7 @@ test("should render StyledStatus Accepté structure ", () => {
   expect(component.toJSON()).toMatchSnapshot();
 });
 test("should render StyledStatus Supprimé ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Supprimé" },
     reduxState: {
@@ -150,7 +149,7 @@ test("should render StyledStatus Supprimé ", () => {
 });
 
 test("should render StyledStatus no corresponding status ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "test" },
     reduxState: {
@@ -161,7 +160,7 @@ test("should render StyledStatus no corresponding status ", () => {
 });
 
 test("should render StyledStatus no corresponding with override ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: true, textToDisplay: "test" },
     reduxState: {
@@ -172,7 +171,7 @@ test("should render StyledStatus no corresponding with override ", () => {
 });
 
 test("should render StyledStatus no corresponding with color ", () => {
-  component = wrapWithProvidersAndRender({
+  component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: false, textToDisplay: "test", textColor: "textColor", color: "color" },
     reduxState: {
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
index 9781a23daa..4be7ce9620 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
@@ -1,14 +1,13 @@
 // @ts-nocheck
-import UserContributions from "../UserContributions";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { wrapWithProvidersAndRender } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
-import Swal from "sweetalert2";
 import { colors } from "colors";
+import "jest-styled-components";
 import { act } from "react-test-renderer";
 import { fetchUserContributionsActionCreator } from "services/UserContributions/userContributions.actions";
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
-import "jest-styled-components";
-import Router from "next/router";
+import Swal from "sweetalert2";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import UserContributions from "../UserContributions";
 jest.mock("components/Modals/WriteContentModal/WriteContentModal", () => jest.fn().mockReturnValue(<></>));
 
 jest.mock("next/router", () => require("next-router-mock"));
@@ -34,7 +33,7 @@ describe("userContributions", () => {
 
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserContributions,
         reduxState: {
           ...initialMockStore,
@@ -51,7 +50,7 @@ describe("userContributions", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserContributions,
       });
     });
@@ -136,7 +135,7 @@ describe("userContributions", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserContributions,
         reduxState: {
           ...initialMockStore,
@@ -158,7 +157,7 @@ describe("userContributions", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserContributions,
         reduxState: {
           ...initialMockStore,
@@ -179,7 +178,7 @@ describe("userContributions", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserContributions,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
index 727188a327..22160ea17f 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
@@ -1,14 +1,14 @@
 //@ts-nocheck
-import UserFavorites from "../UserFavorites";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { wrapWithProvidersAndRender } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import mockAxios from "jest-mock-axios";
+import routerMock from "next/router";
+import { act } from "react-test-renderer";
 import {
-  updateUserFavoritesActionCreator,
   fetchUserFavoritesActionCreator,
+  updateUserFavoritesActionCreator,
 } from "services/UserFavoritesInLocale/UserFavoritesInLocale.actions";
-import { act } from "react-test-renderer";
-import routerMock from "next/router";
-import mockAxios from "jest-mock-axios";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import UserFavorites from "../UserFavorites";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -32,7 +32,7 @@ describe("UserFavorites", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserFavorites,
         reduxState: {
           ...initialMockStore,
@@ -50,7 +50,7 @@ describe("UserFavorites", () => {
 
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserFavorites,
         compProps: { t: (_: string, element2: string) => element2 },
       });
@@ -130,7 +130,7 @@ describe("UserFavorites", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserFavorites,
         compProps: { t: (_: string, element2: string) => element2 },
         reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
@@ -144,7 +144,7 @@ describe("UserFavorites", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserFavorites,
         compProps: { t: (_: string, element2: string) => element2 },
         reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
@@ -165,7 +165,7 @@ describe("UserFavorites", () => {
 
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserFavorites,
         compProps: { t: (_: string, element2: string) => element2 },
         reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 66d6060db7..49f9287041 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -1,16 +1,13 @@
 // @ts-nocheck
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { wrapWithProvidersAndRender } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
-import { act } from "react-test-renderer";
 import "jest-styled-components";
-import UserNotifications from "../UserNotifications";
-import {
-  fetchUserStructureActionCreator,
-  updateUserStructureActionCreator,
-} from "services/UserStructure/userStructure.actions";
-import { fetchSelectedStructureActionCreator } from "services/SelectedStructure/selectedStructure.actions";
-import { updateDispositifReactionActionCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
 import Router from "next/router";
+import { act } from "react-test-renderer";
+import { updateDispositifReactionActionCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
+import { fetchSelectedStructureActionCreator } from "services/SelectedStructure/selectedStructure.actions";
+import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import UserNotifications from "../UserNotifications";
 jest.mock("next/router", () => require("next-router-mock"));
 
 jest.mock("services/UserStructure/userStructure.actions", () => {
@@ -43,7 +40,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
@@ -64,7 +61,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
@@ -129,7 +126,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
@@ -158,7 +155,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
@@ -190,7 +187,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
@@ -220,7 +217,7 @@ describe("UserNotifications", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserNotifications,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
index b678b61472..b5156ee324 100644
--- a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
+++ b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
@@ -1,15 +1,12 @@
-import { UserProfile } from "../UserProfile";
+import "@testing-library/jest-dom";
+import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
+import "jest-styled-components";
 import { act, ReactTestRenderer } from "react-test-renderer";
-import {
-  wrapWithProvidersAndRender,
-  wrapWithProvidersAndRenderForTesting,
-} from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { testUser } from "__fixtures__/user";
-import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
-import "jest-styled-components";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
-import "@testing-library/jest-dom";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import { UserProfile } from "../UserProfile";
 
 jest.mock("next/router", () => require("next-router-mock"));
 jest.mock("components/UI/Tooltip", () => jest.fn().mockReturnValue(<></>));
@@ -41,7 +38,7 @@ describe("UserProfile", () => {
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
     let component: ReactTestRenderer;
-    component = wrapWithProvidersAndRender({
+    component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
@@ -54,7 +51,7 @@ describe("UserProfile", () => {
   it("should render correctly", () => {
     window.scrollTo = jest.fn();
     let component: ReactTestRenderer;
-    component = wrapWithProvidersAndRender({
+    component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
index e70bc419be..ae8ecf8b23 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
@@ -1,15 +1,15 @@
-import { wrapWithProvidersAndRender } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
-import { UserStructureComponent } from "../UserStructure.component";
+import { GetStructureResponse, StructureMemberRole, StructureStatus, UserStatus } from "@refugies-info/api-types";
+import { colors } from "colors";
 import "jest-styled-components";
 import { act, ReactTestRenderer } from "react-test-renderer";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import {
   fetchUserStructureActionCreator,
   updateUserStructureActionCreator,
 } from "services/UserStructure/userStructure.actions";
 import Swal from "sweetalert2";
-import { colors } from "colors";
-import { GetStructureResponse, StructureMemberRole, StructureStatus, UserStatus } from "@refugies-info/api-types";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import { UserStructureComponent } from "../UserStructure.component";
 jest.mock("next/router", () => require("next-router-mock"));
 
 // need to mock react strap because issue with modal
@@ -37,7 +37,7 @@ describe("UserStructure", () => {
     window.scrollTo = jest.fn();
     let component: ReactTestRenderer;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -66,7 +66,7 @@ describe("UserStructure", () => {
     window.scrollTo = jest.fn();
     let component: ReactTestRenderer;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -113,7 +113,7 @@ describe("UserStructure", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -153,7 +153,7 @@ describe("UserStructure", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -193,7 +193,7 @@ describe("UserStructure", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -236,7 +236,7 @@ describe("UserStructure", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
@@ -301,7 +301,7 @@ describe("UserStructure", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserStructureComponent,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
index 8f603009da..bd54443c25 100644
--- a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
@@ -1,13 +1,13 @@
 //@ts-nocheck
-import { wrapWithProvidersAndRender } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
-import UserTranslation from "../UserTranslation";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { fetchDispositifsWithTranslationsStatusActionCreator } from "services/DispositifsWithTranslationsStatus/dispositifsWithTranslationsStatus.actions";
+import "jest-styled-components";
+import { useParams } from "react-router-dom";
 import { act } from "react-test-renderer";
-import { dispositifsWithTranslations } from "__fixtures__/dispositifsWithTrad";
+import { fetchDispositifsWithTranslationsStatusActionCreator } from "services/DispositifsWithTranslationsStatus/dispositifsWithTranslationsStatus.actions";
 import API from "utils/API";
-import { useParams } from "react-router-dom";
-import "jest-styled-components";
+import { dispositifsWithTranslations } from "__fixtures__/dispositifsWithTrad";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
+import UserTranslation from "../UserTranslation";
 jest.mock("next/router", () => require("next-router-mock"));
 
 // Mock history
@@ -40,7 +40,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -63,7 +63,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -81,7 +81,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -100,7 +100,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -120,7 +120,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -140,7 +140,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
@@ -160,7 +160,7 @@ describe("user translation", () => {
     window.scrollTo = jest.fn();
     let component;
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: UserTranslation,
         reduxState: {
           ...initialMockStore,
diff --git a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
index 933e9f86b6..6d88fd319b 100644
--- a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
+++ b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
@@ -1,13 +1,10 @@
-import CheckCode from "./CheckCode";
+import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
 import mockRouter from "next-router-mock";
 import { act, ReactTestRenderer } from "react-test-renderer";
-import {
-  wrapWithProvidersAndRender,
-  wrapWithProvidersAndRenderForTesting,
-} from "../../../../../jest/lib/wrapWithProvidersAndRender";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
 import API from "utils/API";
+import { initialMockStore } from "__fixtures__/reduxStore";
+import { wrapWithProvidersAndRenderForTesting } from "../../../../../jest/lib/wrapWithProvidersAndRender";
+import CheckCode from "./CheckCode";
 
 jest.mock("next/router", () => require("next-router-mock"));
 const logUserMock = jest.fn();
@@ -28,7 +25,7 @@ describe("CheckCode", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: CheckCode,
         reduxState: {
           ...initialMockStore,
@@ -50,7 +47,7 @@ describe("CheckCode", () => {
     let component: ReactTestRenderer;
 
     act(() => {
-      component = wrapWithProvidersAndRender({
+      component = wrapWithProvidersAndRenderForTesting({
         Component: CheckCode,
         reduxState: {
           ...initialMockStore,

From b39528a41184f6da1b021bcdf4c7f27271f6a7d1 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Mon, 15 Jul 2024 18:02:32 +0200
Subject: [PATCH 21/37] chore(client): :arrow_up: Add
 @testing-library/user-event dependency

---
 client/package.json | 1 +
 yarn.lock           | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/client/package.json b/client/package.json
index 101f3d3039..d42475a2c1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -100,6 +100,7 @@
     "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/file-saver": "^2.0.1",
     "@types/html-to-draftjs": "^1.4.0",
diff --git a/yarn.lock b/yarn.lock
index b74c869a03..a322636449 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1816,6 +1816,11 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"

From 535ccd50d76e6f23b470e7dd074216927ffe24f7 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Mon, 15 Jul 2024 18:06:58 +0200
Subject: [PATCH 22/37] refactor(client): :recycle: Use data-testid instead of
 data-test-id attribute

---
 .../Admin/sharedComponents/SubComponents.tsx  | 17 ++++-----
 .../__tests__/SubComponents.test.tsx          |  4 +-
 .../UserContributions.component.test.tsx      |  2 +-
 .../components/UserContribTable.tsx           | 15 ++++----
 .../screens/UserFavorites/UserFavorites.tsx   | 26 ++++++-------
 .../UserFavorites.component.test.tsx          |  4 +-
 .../__tests__/UserNotifications.test.tsx      |  8 ++--
 .../components/Notification.tsx               | 19 ++++------
 .../__tests__/UserStructure.test.tsx          | 10 ++---
 .../components/EditMemberModal.tsx            | 12 +++---
 .../UserStructure/components/MembresTable.tsx | 15 ++++----
 .../screens/UserStructure/components/Role.tsx |  5 +--
 .../components/UserStructureDetails.tsx       | 23 ++++++-----
 .../components/TranslationAvancementTable.tsx | 38 +++++++++----------
 .../TranslationsAvancement.tsx                | 24 ++++++------
 15 files changed, 105 insertions(+), 117 deletions(-)

diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
index f93a7eccb8..2b309732aa 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
@@ -1,13 +1,12 @@
-import React from "react";
-import styled from "styled-components";
-import { limitNbCaracters } from "lib";
-import { correspondingStatus, progressionData, publicationData } from "../AdminContenu/data";
-import EVAIcon from "components/UI/EVAIcon/EVAIcon";
+import { GetAllDispositifsResponse, Id } from "@refugies-info/api-types";
 import { colors } from "colors";
+import EVAIcon from "components/UI/EVAIcon/EVAIcon";
+import { useUser } from "hooks";
+import { limitNbCaracters } from "lib";
 import moment from "moment";
+import styled from "styled-components";
 import styles from "../Admin.module.scss";
-import { GetAllDispositifsResponse, Id } from "@refugies-info/api-types";
-import { useUser } from "hooks";
+import { correspondingStatus, progressionData, publicationData } from "../AdminContenu/data";
 
 const Container = styled.div<{ isDarkBackground: boolean }>`
   font-weight: normal;
@@ -195,7 +194,7 @@ export const ValidateButton = (props: { onClick: () => void; disabled: boolean }
     onClick={props.onClick}
     disabled={props.disabled}
     hoverColor={colors.validationHover}
-    data-test-id="validate-button"
+    data-testid="validate-button"
   >
     <div style={{ marginBottom: "4px" }}>
       <EVAIcon name="checkmark-outline" fill={colors.white} size={20} />
@@ -226,7 +225,7 @@ export const DeleteButton = (props: { onClick: (event: any) => void; disabled: b
     onClick={props.disabled ? undefined : props.onClick}
     hoverColor={colors.error}
     disabled={props.disabled}
-    data-test-id="delete-button"
+    data-testid="delete-button"
   >
     <div style={{ marginBottom: "4px" }}>
       <EVAIcon name="trash" fill={colors.white} size={20} />
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index 8ed5f925d8..e3cfa958e4 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -194,7 +194,7 @@ test("should render ValidateButton not disabled", () => {
 test("should call onClick ValidateButton", () => {
   const onClick = jest.fn();
   component = TestRenderer.create(<ValidateButton onClick={onClick} disabled={false} />);
-  component.root.findByProps({ "data-test-id": "validate-button" }).props.onClick();
+  component.root.findByProps({ "data-testid": "validate-button" }).props.onClick();
   expect(onClick).toHaveBeenCalled();
 });
 
@@ -216,7 +216,7 @@ test("should render DeleteButton not disabled", () => {
 test("should call onClick DeleteButton", () => {
   const onClick = jest.fn();
   component = TestRenderer.create(<DeleteButton onClick={onClick} disabled={false} />);
-  component.root.findByProps({ "data-test-id": "delete-button" }).props.onClick();
+  component.root.findByProps({ "data-testid": "delete-button" }).props.onClick();
   expect(onClick).toHaveBeenCalled();
 });
 
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
index 4be7ce9620..b1e4341ece 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
@@ -193,7 +193,7 @@ describe("userContributions", () => {
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
     act(() =>
-      component.root.findByProps({ "data-test-id": "test_delete_id1" }).props.onClick({ stopPropagation: () => {} }),
+      component.root.findByProps({ "data-testid": "test_delete_id1" }).props.onClick({ stopPropagation: () => {} }),
     );
     expect(component.toJSON()).toMatchSnapshot();
     expect(Swal.fire).toHaveBeenCalledWith({
diff --git a/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx b/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
index 4bc6974ba1..b3af27f324 100644
--- a/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
+++ b/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
@@ -1,11 +1,10 @@
-import React from "react";
-import { Table } from "reactstrap";
+import { Id } from "@refugies-info/api-types";
 import Link from "next/link";
-import { FormattedUserContribution } from "../types";
-import { TypeContenu, Responsabilite, ContribStyledStatus, StatutHeader } from "./SubComponents";
-import { Title, DeleteButton, SeeButton } from "../../Admin/sharedComponents/SubComponents";
+import { Table } from "reactstrap";
 import styles from "scss/components/adminTable.module.scss";
-import { Id } from "@refugies-info/api-types";
+import { DeleteButton, SeeButton, Title } from "../../Admin/sharedComponents/SubComponents";
+import { FormattedUserContribution } from "../types";
+import { ContribStyledStatus, Responsabilite, StatutHeader, TypeContenu } from "./SubComponents";
 
 const headers = ["Type", "Titre", "Responsabilité", "Statut", "Merci", "Vues"];
 interface Props {
@@ -43,7 +42,7 @@ export const UserContribTable = (props: Props) => (
         const burl = "/" + (element.typeContenu || "dispositif") + "/" + element._id;
 
         return (
-          <tr key={key} className={styles.line} data-test-id={`test_${element._id}`}>
+          <tr key={key} className={styles.line} data-testid={`test_${element._id}`}>
             <td className={styles.first + " align-middle"}>
               <TypeContenu type={element.typeContenu || "dispositif"} isDetailedVue={false} />
             </td>
@@ -105,7 +104,7 @@ export const UserContribTable = (props: Props) => (
               <div style={{ display: "flex", flexDirection: "row" }}>
                 <SeeButton burl={burl} />
                 <DeleteButton
-                  data-test-id={"test_delete_" + element._id}
+                  data-testid={"test_delete_" + element._id}
                   onClick={(event: any) => props.deleteDispositif(event, element._id, element.isAuthorizedToDelete)}
                   disabled={!element.isAuthorizedToDelete}
                 />
diff --git a/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx b/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
index 0e107f70b6..27555bdf7a 100644
--- a/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import TitleWithNumber from "components/Backend/TitleWithNumber";
+import { FrameModal } from "components/Modals";
+import DemarcheCard from "components/UI/DemarcheCard";
+import DispositifCard from "components/UI/DispositifCard";
+import FButton from "components/UI/FButton/FButton";
+import Toast from "components/UI/Toast";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { LoadingStatusKey } from "services/LoadingStatus/loadingStatus.actions";
+import { isLoadingSelector } from "services/LoadingStatus/loadingStatus.selectors";
 import {
   fetchUserFavoritesActionCreator,
   updateUserFavoritesActionCreator,
 } from "services/UserFavoritesInLocale/UserFavoritesInLocale.actions";
-import { LoadingStatusKey } from "services/LoadingStatus/loadingStatus.actions";
-import { isLoadingSelector } from "services/LoadingStatus/loadingStatus.selectors";
 import { userFavoritesSelector } from "services/UserFavoritesInLocale/UserFavoritesInLocale.selectors";
-import { NoFavorites } from "./components/NoFavorites.component";
-import { FrameModal } from "components/Modals";
-import TitleWithNumber from "components/Backend/TitleWithNumber";
-import FButton from "components/UI/FButton/FButton";
-import DemarcheCard from "components/UI/DemarcheCard";
-import DispositifCard from "components/UI/DispositifCard";
-import Toast from "components/UI/Toast";
 import { FavoritesLoading } from "./components/FavoritesLoading";
-import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
+import { NoFavorites } from "./components/NoFavorites.component";
 import styles from "./UserFavorites.module.scss";
 
 interface Props {
@@ -82,7 +82,7 @@ const UserFavorites = (props: Props) => {
                   type="outline-black"
                   name="trash-outline"
                   onClick={removeAllFavorites}
-                  data-test-id="test-delete-button"
+                  data-testid="test-delete-button"
                 >
                   {t("UserFavorites.Tout supprimer", "Tout supprimer")}
                 </FButton>
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
index 22160ea17f..55a5201be3 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
@@ -151,7 +151,7 @@ describe("UserFavorites", () => {
       });
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    component.root.findByProps({ "data-test-id": "test-delete-button" }).props.onClick();
+    component.root.findByProps({ "data-testid": "test-delete-button" }).props.onClick();
 
     expect(updateUserFavoritesActionCreator).toHaveBeenCalledWith({
       type: "remove-all",
@@ -173,7 +173,7 @@ describe("UserFavorites", () => {
     });
 
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("en");
-    component.root.findByProps({ "data-test-id": "test-delete-button" }).props.onClick();
+    component.root.findByProps({ "data-testid": "test-delete-button" }).props.onClick();
 
     expect(updateUserFavoritesActionCreator).toHaveBeenCalledWith({
       type: "remove-all",
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 49f9287041..4a50fc6b94 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -178,7 +178,7 @@ describe("UserNotifications", () => {
       locale: "fr",
     });
     component.root
-      .findByProps({ "data-test-id": "test-notif-new content" })
+      .findByProps({ "data-testid": "test-notif-new content" })
       .props.onClick({ stopPropagation: jest.fn() });
     expect(Router).toMatchObject({ asPath: "/dispositif/id" });
   });
@@ -209,7 +209,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.root.findByProps({ "data-test-id": "test-notif-annuaire" }).props.onClick({ stopPropagation: jest.fn() });
+    component.root.findByProps({ "data-testid": "test-notif-annuaire" }).props.onClick({ stopPropagation: jest.fn() });
     expect(Router).toMatchObject({ asPath: "/directory-create" });
   });
 
@@ -239,9 +239,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.root
-      .findByProps({ "data-test-id": "test-delete-reaction" })
-      .props.onClick({ stopPropagation: jest.fn() });
+    component.root.findByProps({ "data-testid": "test-delete-reaction" }).props.onClick({ stopPropagation: jest.fn() });
     expect(updateDispositifReactionActionCreator).toHaveBeenLastCalledWith({
       suggestion: {
         dispositifId: "id2",
diff --git a/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx b/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
index 113a71d53d..62ffa86710 100644
--- a/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/components/Notification.tsx
@@ -1,11 +1,10 @@
-import React from "react";
-import { useRouter } from "next/router";
-import styled from "styled-components";
+import { colors } from "colors";
 import EVAIcon from "components/UI/EVAIcon/EVAIcon";
-import moment, { Moment } from "moment";
 import FButton from "components/UI/FButton/FButton";
-import { colors } from "colors";
+import moment from "moment";
+import { useRouter } from "next/router";
 import { getPath } from "routes";
+import styled from "styled-components";
 
 const Container = styled.div<{ read: boolean }>`
   background: ${(props: { read: boolean }) => (props.read ? colors.white : colors.focus)};
@@ -114,11 +113,7 @@ export const Notification = (props: Props) => {
   };
 
   return (
-    <Container
-      read={props.read}
-      onClick={(event: any) => onNotifClick(event)}
-      data-test-id={"test-notif-" + props.type}
-    >
+    <Container read={props.read} onClick={(event: any) => onNotifClick(event)} data-testid={"test-notif-" + props.type}>
       <RowContainer>
         <EVAIcon name={props.read ? "bell-outline" : "bell"} fill={props.read ? colors.gray90 : colors.white} />
         <TextContainer read={props.read}>{getText(props.type)}</TextContainer>
@@ -138,7 +133,7 @@ export const Notification = (props: Props) => {
               name="trash-2"
               onClick={onAnnuaireNotifDeleteClick}
               className="ms-2"
-              data-test-id="test-delete-annuaire"
+              data-testid="test-delete-annuaire"
             />
           </>
         )}
@@ -157,7 +152,7 @@ export const Notification = (props: Props) => {
               name="trash-2"
               onClick={onReactionDeleteClick}
               className="ms-2"
-              data-test-id="test-delete-reaction"
+              data-testid="test-delete-reaction"
             />
           </>
         )}
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
index ae8ecf8b23..c752938813 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
@@ -225,7 +225,7 @@ describe("UserStructure", () => {
       });
     });
     act(() => {
-      component.root.findByProps({ "data-test-id": "test-add-member" }).props.onClick();
+      component.root.findByProps({ "data-testid": "test-add-member" }).props.onClick();
     });
     //@ts-ignore
     expect(component.toJSON()).toMatchSnapshot();
@@ -268,18 +268,18 @@ describe("UserStructure", () => {
       });
     });
     act(() => {
-      component.root.findByProps({ "data-test-id": "test_see_id1" }).props.onClick();
+      component.root.findByProps({ "data-testid": "test_see_id1" }).props.onClick();
     });
     //@ts-ignore
     expect(component.toJSON()).toMatchSnapshot();
     act(() => {
-      component.root.findByProps({ "data-test-id": "test-role-Responsable" }).props.onClick();
+      component.root.findByProps({ "data-testid": "test-role-Responsable" }).props.onClick();
     });
     //@ts-ignore
     expect(component.toJSON()).toMatchSnapshot();
 
     act(() => {
-      component.root.findByProps({ "data-test-id": "test-validate-edit" }).props.onClick();
+      component.root.findByProps({ "data-testid": "test-validate-edit" }).props.onClick();
     });
     expect(updateUserStructureActionCreator).toHaveBeenCalledWith({
       membres: {
@@ -333,7 +333,7 @@ describe("UserStructure", () => {
       });
     });
     act(() => {
-      component.root.findByProps({ "data-test-id": "test_delete_id1" }).props.onClick();
+      component.root.findByProps({ "data-testid": "test_delete_id1" }).props.onClick();
     });
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
diff --git a/client/src/components/Backend/screens/UserStructure/components/EditMemberModal.tsx b/client/src/components/Backend/screens/UserStructure/components/EditMemberModal.tsx
index e9eb1603a6..2d71b9f174 100644
--- a/client/src/components/Backend/screens/UserStructure/components/EditMemberModal.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/EditMemberModal.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import { Modal } from "reactstrap";
+import { Id, StructureMember, StructureMemberRole } from "@refugies-info/api-types";
+import marioProfile from "assets/mario-profile.jpg";
 import FButton from "components/UI/FButton/FButton";
 import Image from "next/image";
+import { useState } from "react";
+import { Modal } from "reactstrap";
 import styled from "styled-components";
-import marioProfile from "assets/mario-profile.jpg";
-import { Role } from "./Role";
 import styles from "./MemberModal.module.scss";
-import { Id, StructureMember, StructureMemberRole } from "@refugies-info/api-types";
+import { Role } from "./Role";
 
 const Title = styled.div`
   font-weight: normal;
@@ -101,7 +101,7 @@ const EditMemberModal = (props: Props) => {
           name="checkmark-outline"
           onClick={modifyRole}
           disabled={!selectedRole || selectedRole === props.selectedUser.mainRole}
-          data-test-id="test-validate-edit"
+          data-testid="test-validate-edit"
         >
           Valider
         </FButton>
diff --git a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
index 2e00a6db5a..22a65c5e33 100644
--- a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
@@ -1,14 +1,13 @@
-import { Table } from "reactstrap";
-import React from "react";
-import Image from "next/image";
-import { EditButtonWithoutNavigation, DeleteButton } from "../../Admin/sharedComponents/SubComponents";
 import marioProfile from "assets/mario-profile.jpg";
-import styled from "styled-components";
 import { colors } from "colors";
+import Image from "next/image";
+import { Table } from "reactstrap";
+import styled from "styled-components";
+import { DeleteButton, EditButtonWithoutNavigation } from "../../Admin/sharedComponents/SubComponents";
 // import "./MembresTable.scss";
+import { GetStructureResponse, Id, StructureMember } from "@refugies-info/api-types";
 import moment from "moment";
 import "moment/locale/fr";
-import { GetStructureResponse, Id, StructureMember } from "@refugies-info/api-types";
 
 moment.locale("fr");
 const RowContainer = styled.div`
@@ -101,14 +100,14 @@ export const MembresTable = (props: Props) => (
               <td className="align-middle">
                 <div style={{ display: "flex", flexDirection: "row" }}>
                   <EditButtonWithoutNavigation
-                    data-test-id={"test_see_" + element.userId}
+                    data-testid={"test_see_" + element.userId}
                     onClick={() => {
                       props.setSelectedUser(element);
                       props.toggleEditMemberModal();
                     }}
                   />
                   <DeleteButton
-                    data-test-id={"test_delete_" + element.userId}
+                    data-testid={"test_delete_" + element.userId}
                     disabled={false}
                     onClick={() => props.deleteUserFromStructure(element.userId)}
                   />
diff --git a/client/src/components/Backend/screens/UserStructure/components/Role.tsx b/client/src/components/Backend/screens/UserStructure/components/Role.tsx
index 759bdf7f8a..adbd6e3549 100644
--- a/client/src/components/Backend/screens/UserStructure/components/Role.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/Role.tsx
@@ -1,7 +1,6 @@
-import React from "react";
-import styled from "styled-components";
 import { colors } from "colors";
 import EVAIcon from "components/UI/EVAIcon";
+import styled from "styled-components";
 
 const MainContainer = styled.div<{ state: string }>`
   background: ${(props: { state: string }) =>
@@ -45,7 +44,7 @@ export const Role = (props: Props) => (
   <MainContainer
     onClick={() => props.onRoleSelect(props.role)}
     state={props.state}
-    data-test-id={"test-role-" + props.role}
+    data-testid={"test-role-" + props.role}
   >
     <Row>
       <Title>{getTitle(props.role)}</Title>
diff --git a/client/src/components/Backend/screens/UserStructure/components/UserStructureDetails.tsx b/client/src/components/Backend/screens/UserStructure/components/UserStructureDetails.tsx
index 6f0139f512..e855514a80 100644
--- a/client/src/components/Backend/screens/UserStructure/components/UserStructureDetails.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/UserStructureDetails.tsx
@@ -1,19 +1,18 @@
-import React, { useState } from "react";
-import { MainContainer, StructurePictureContainer, StructureContainer } from "./SubComponents";
-import Image from "next/image";
-import TitleWithNumber from "components/Backend/TitleWithNumber";
-import { Picture, StructureMemberRole } from "@refugies-info/api-types";
+import { GetStructureResponse, Id, Picture, StructureMember, StructureMemberRole } from "@refugies-info/api-types";
 import placeholder from "assets/no_results_alt.svg";
-import styled from "styled-components";
+import TitleWithNumber from "components/Backend/TitleWithNumber";
 import FButton from "components/UI/FButton/FButton";
-import { MembresTable } from "./MembresTable";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { getPath } from "routes";
+import styled from "styled-components";
 import AddMemberModal from "./AddMemberModal";
 import EditMemberModal from "./EditMemberModal";
+import { MembresTable } from "./MembresTable";
+import { MainContainer, StructureContainer, StructurePictureContainer } from "./SubComponents";
 import styles from "./UserStructureDetails.module.scss";
-import Link from "next/link";
-import { getPath } from "routes";
-import { useRouter } from "next/router";
-import { GetStructureResponse, Id, StructureMember } from "@refugies-info/api-types";
 
 const StructureName = styled.div`
   font-weight: bold;
@@ -114,7 +113,7 @@ export const UserStructureDetails = (props: Props) => {
                 type="dark"
                 name="person-add-outline"
                 onClick={toggleAddMemberModal}
-                data-test-id="test-add-member"
+                data-testid="test-add-member"
               >
                 Ajouter un membre
               </FButton>
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationAvancementTable.tsx b/client/src/components/Backend/screens/UserTranslation/components/TranslationAvancementTable.tsx
index 121dc12949..436c4af37d 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationAvancementTable.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationAvancementTable.tsx
@@ -1,27 +1,27 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { colors } from "colors";
-import { Table } from "reactstrap";
-import { TypeContenu } from "../../UserContributions/components/SubComponents";
-import { Title, TabHeader } from "../../Admin/sharedComponents/SubComponents";
-import { ProgressWithValue, TradStatus } from "./SubComponents";
-import moment from "moment";
-import "moment/locale/fr";
-import Swal from "sweetalert2";
-import API from "utils/API";
-import FButton from "components/UI/FButton/FButton";
-import { fetchDispositifsWithTranslationsStatusActionCreator } from "services/DispositifsWithTranslationsStatus/dispositifsWithTranslationsStatus.actions";
-import { useDispatch } from "react-redux";
-import { sortData } from "./functions";
-import styles from "scss/components/adminTable.module.scss";
 import {
   GetDispositifsWithTranslationAvancementResponse,
   GetUserInfoResponse,
   Languages,
 } from "@refugies-info/api-types";
+import { colors } from "colors";
+import FButton from "components/UI/FButton/FButton";
+import { useLanguages } from "hooks";
 import { handleApiError } from "lib/handleApiErrors";
+import moment from "moment";
+import "moment/locale/fr";
 import { useRouter } from "next/router";
-import { useLanguages } from "hooks";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { Table } from "reactstrap";
+import styles from "scss/components/adminTable.module.scss";
+import { fetchDispositifsWithTranslationsStatusActionCreator } from "services/DispositifsWithTranslationsStatus/dispositifsWithTranslationsStatus.actions";
+import styled from "styled-components";
+import Swal from "sweetalert2";
+import API from "utils/API";
+import { TabHeader, Title } from "../../Admin/sharedComponents/SubComponents";
+import { TypeContenu } from "../../UserContributions/components/SubComponents";
+import { sortData } from "./functions";
+import { ProgressWithValue, TradStatus } from "./SubComponents";
 
 moment.locale("fr");
 
@@ -171,7 +171,7 @@ export const TranslationAvancementTable = (props: Props) => {
                 <td className="align-middle">
                   <div style={{ maxWidth: "350px" }}>
                     <button
-                      data-test-id={`test-line-${element._id}`}
+                      data-testid={`test-line-${element._id}`}
                       onClick={(e) => {
                         e.preventDefault();
                         goToTranslation(element);
@@ -215,7 +215,7 @@ export const TranslationAvancementTable = (props: Props) => {
                       type="error"
                       name="trash-2"
                       onClick={(event: any) => deleteTrad(event, element)}
-                      data-test-id="test-trash"
+                      data-testid="test-trash"
                     />
                   </td>
                 )}
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationsAvancement/TranslationsAvancement.tsx b/client/src/components/Backend/screens/UserTranslation/components/TranslationsAvancement/TranslationsAvancement.tsx
index 99d342173e..be5bf7ec54 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationsAvancement/TranslationsAvancement.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationsAvancement/TranslationsAvancement.tsx
@@ -1,6 +1,3 @@
-import React, { useMemo, useState } from "react";
-import styled from "styled-components";
-import { Link } from "react-router-dom";
 import {
   ContentType,
   GetDispositifsWithTranslationAvancementResponse,
@@ -11,18 +8,21 @@ import {
   Languages,
   TraductionsStatus,
 } from "@refugies-info/api-types";
-import { useSelector } from "react-redux";
-import isUndefined from "lodash/isUndefined";
-import { useLanguages, useRouterLocale } from "hooks";
-import { needsSelector } from "services/Needs/needs.selectors";
-import FButton from "components/UI/FButton/FButton";
 import { colors } from "colors";
 import CustomSearchBar from "components/UI/CustomSeachBar";
-import { LanguageTitle, FilterButton } from "../SubComponents";
-import { filterData, getStatus } from "./functions";
+import FButton from "components/UI/FButton/FButton";
+import { useLanguages, useRouterLocale } from "hooks";
+import isUndefined from "lodash/isUndefined";
+import { useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import { needsSelector } from "services/Needs/needs.selectors";
+import styled from "styled-components";
+import { NeedTradStatus } from "../../types";
+import { FilterButton, LanguageTitle } from "../SubComponents";
 import { TranslationAvancementTable } from "../TranslationAvancementTable";
 import TranslationNeedsList from "../TranslationNeedsList";
-import { NeedTradStatus } from "../../types";
+import { filterData, getStatus } from "./functions";
 
 export type SortedNeed = GetNeedResponse & { status: NeedTradStatus };
 
@@ -157,7 +157,7 @@ const TranslationsAvancement = (props: Props) => {
             getLanguage(_langue) ? (
               <div key={_langue.toString()}>
                 <Link
-                  data-test-id={`test-langue-${_langue}`}
+                  data-testid={`test-langue-${_langue}`}
                   onClick={(e) => navigateToLanguage(e, getLanguage(_langue).i18nCode)}
                   to={routerLocale + "/backend/user-translation/" + getLanguage(_langue).i18nCode}
                 >

From 1a6e0644b62b2c536341704c5ab0687772ceb46c Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Mon, 15 Jul 2024 22:47:32 +0200
Subject: [PATCH 23/37] test(client): :white_check_mark: Update tests to use
 @testing-library

---
 client/src/__tests__/agir.test.tsx            |  19 +-
 client/src/__tests__/auth/auth.test.tsx       |  17 +-
 .../__tests__/auth/code-connexion.test.tsx    |  37 +-
 .../src/__tests__/auth/code-securite.test.tsx |  37 +-
 client/src/__tests__/auth/connexion.test.tsx  |  37 +-
 .../mail-envoye.test.tsx                      |  23 +-
 .../nouveau.test.tsx                          |  23 +-
 .../reinitialiser-mot-de-passe.test.tsx       |  37 +-
 client/src/__tests__/index.test.tsx           |  70 ++--
 client/src/__tests__/publier.test.tsx         |  16 +-
 client/src/__tests__/recherche.test.tsx       |  59 ++-
 client/src/__tests__/traduire.test.tsx        |  36 +-
 .../__tests__/SubComponents.test.tsx          | 132 +++---
 .../UserContributions.component.test.tsx      |  90 ++--
 .../UserFavorites.component.test.tsx          |  66 ++-
 .../__tests__/UserNotifications.test.tsx      | 149 +++----
 .../__test__/UserProfile.component.test.tsx   |  51 +--
 .../__tests__/UserStructure.test.tsx          | 385 ++++++++----------
 .../UserTranslation.component.test.tsx        | 154 +++----
 .../Pages/auth/CheckCode/CheckCode.test.tsx   | 191 ++++-----
 20 files changed, 689 insertions(+), 940 deletions(-)

diff --git a/client/src/__tests__/agir.test.tsx b/client/src/__tests__/agir.test.tsx
index 816a4c123c..f669d1e20b 100644
--- a/client/src/__tests__/agir.test.tsx
+++ b/client/src/__tests__/agir.test.tsx
@@ -1,5 +1,4 @@
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import agir from "../pages/agir";
@@ -11,19 +10,15 @@ describe("agir", () => {
     jest.clearAllMocks();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: agir,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {},
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: agir,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {},
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/auth.test.tsx b/client/src/__tests__/auth/auth.test.tsx
index a80ac8a04d..46d75da5b5 100644
--- a/client/src/__tests__/auth/auth.test.tsx
+++ b/client/src/__tests__/auth/auth.test.tsx
@@ -1,5 +1,4 @@
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import auth from "../../pages/auth";
@@ -13,18 +12,14 @@ describe("auth", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders auth", () => {
     window.scrollTo = jest.fn();
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: auth,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: auth,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/code-connexion.test.tsx b/client/src/__tests__/auth/code-connexion.test.tsx
index 5324e3ddf1..d62dd20560 100644
--- a/client/src/__tests__/auth/code-connexion.test.tsx
+++ b/client/src/__tests__/auth/code-connexion.test.tsx
@@ -1,6 +1,5 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import codeConnexion from "../../pages/auth/code-connexion";
@@ -14,35 +13,27 @@ describe("auth/connexion", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders null if no email", () => {
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: codeConnexion,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: codeConnexion,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
-  it("renders code-connexion if email", () => {
+  it("renders code-connexion if email", async () => {
     const url = "http://refugies.info/auth/code-connexion?email=test@example.com";
     Object.defineProperty(window, "location", {
       value: new URL(url),
     });
-    act(() => {
-      mockRouter.push("/auth/code-connexion?email=test@example.com");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: codeConnexion,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    await mockRouter.push("/auth/code-connexion?email=test@example.com");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: codeConnexion,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/code-securite.test.tsx b/client/src/__tests__/auth/code-securite.test.tsx
index db546424c1..197f924b6e 100644
--- a/client/src/__tests__/auth/code-securite.test.tsx
+++ b/client/src/__tests__/auth/code-securite.test.tsx
@@ -1,6 +1,5 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import codeSecurite from "../../pages/auth/code-securite";
@@ -14,35 +13,27 @@ describe("auth/connexion", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders null if no email", () => {
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: codeSecurite,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: codeSecurite,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
-  it("renders code-securite if email", () => {
+  it("renders code-securite if email", async () => {
     const url = "http://refugies.info/auth/code-securite?email=test@example.com";
     Object.defineProperty(window, "location", {
       value: new URL(url),
     });
-    act(() => {
-      mockRouter.push("/auth/code-securite?email=test@example.com");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: codeSecurite,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    await mockRouter.push("/auth/code-securite?email=test@example.com");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: codeSecurite,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/connexion.test.tsx b/client/src/__tests__/auth/connexion.test.tsx
index ce64034df2..5dee7940fb 100644
--- a/client/src/__tests__/auth/connexion.test.tsx
+++ b/client/src/__tests__/auth/connexion.test.tsx
@@ -1,6 +1,5 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../jest/lib/wrapWithProvidersAndRender";
 import connexion from "../../pages/auth/connexion";
@@ -14,31 +13,23 @@ describe("auth/connexion", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders null if no email", () => {
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: connexion,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: connexion,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
-  it("renders connexion if email", () => {
-    act(() => {
-      mockRouter.push("/auth/connexion?email=test@example.com");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: connexion,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+  it("renders connexion if email", async () => {
+    await mockRouter.push("/auth/connexion?email=test@example.com");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: connexion,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
index 3dcf906300..0f16bc407d 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
@@ -1,7 +1,6 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import pageComponent from "pages/auth/reinitialiser-mot-de-passe/mail-envoye";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
@@ -14,20 +13,14 @@ describe("auth/reinitialiser-mot-de-passe/mail-envoye", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
-  it("renders page", () => {
-    act(() => {
-      mockRouter.push("/auth/reinitialiser-mot-de-passe/mail-envoye?email=test@example.com");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: pageComponent,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+  it("renders page", async () => {
+    await mockRouter.push("/auth/reinitialiser-mot-de-passe/mail-envoye?email=test@example.com");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: pageComponent,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
index 7e02e6af6b..14345ee123 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
@@ -1,7 +1,6 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import pageComponent from "pages/auth/reinitialiser-mot-de-passe/nouveau";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
@@ -14,20 +13,14 @@ describe("auth/reinitialiser-mot-de-passe/nouveau", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
-  it("renders page", () => {
-    act(() => {
-      mockRouter.push("/auth/reinitialiser-mot-de-passe/nouveau?token=aaa");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: pageComponent,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+  it("renders page", async () => {
+    await mockRouter.push("/auth/reinitialiser-mot-de-passe/nouveau?token=aaa");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: pageComponent,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
index 31ebb002b3..37fcbcc540 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
@@ -1,7 +1,6 @@
 import "jest-styled-components";
 import mockRouter from "next-router-mock";
 import pageComponent from "pages/auth/reinitialiser-mot-de-passe";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../jest/lib/wrapWithProvidersAndRender";
@@ -14,31 +13,23 @@ describe("auth/reinitialiser-mot-de-passe", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders page if no email", () => {
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: pageComponent,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: pageComponent,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
-  it("renders page if email", () => {
-    act(() => {
-      mockRouter.push("/auth/reinitialiser-mot-de-passe?email=test@example.com");
-    });
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: pageComponent,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+  it("renders page if email", async () => {
+    await mockRouter.push("/auth/reinitialiser-mot-de-passe?email=test@example.com");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: pageComponent,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/index.test.tsx b/client/src/__tests__/index.test.tsx
index 43b6933130..0e805c6f70 100644
--- a/client/src/__tests__/index.test.tsx
+++ b/client/src/__tests__/index.test.tsx
@@ -1,10 +1,9 @@
-import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
-import index, { Props } from "../pages/index";
-import { initialMockStore } from "__fixtures__/reduxStore";
-import { lastDemarches, lastDispositifs } from "__fixtures__/getDispositifs";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import "jest-styled-components";
+import { lastDemarches, lastDispositifs } from "__fixtures__/getDispositifs";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
+import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
+import index, { Props } from "../pages/index";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
@@ -14,42 +13,39 @@ describe("homepage", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
   it("renders homepage", () => {
     window.scrollTo = jest.fn();
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting<Props>({
-        Component: index,
-        reduxState: {
-          ...initialMockStore,
+    const component = wrapWithProvidersAndRenderForTesting<Props>({
+      Component: index,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        contentStatistics: {
+          nbMercis: 2344,
+          nbVues: 120432,
+          nbVuesMobile: 100324,
+          nbDispositifs: 500,
+          nbDemarches: 80,
+          nbUpdatedRecently: 23,
+        },
+        structuresStatistics: {
+          nbStructures: 320,
+          nbCDA: 24,
+          nbStructureAdmins: 300,
         },
-        compProps: {
-          contentStatistics: {
-            nbMercis: 2344,
-            nbVues: 120432,
-            nbVuesMobile: 100324,
-            nbDispositifs: 500,
-            nbDemarches: 80,
-            nbUpdatedRecently: 23,
-          },
-          structuresStatistics: {
-            nbStructures: 320,
-            nbCDA: 24,
-            nbStructureAdmins: 300,
-          },
-          translationStatistics: {
-            nbTranslators: 12,
-            nbWordsTranslated: 156,
-            nbActiveTranslators: [
-              { languageId: "en", count: 4 },
-              { languageId: "ru", count: 2 },
-            ],
-          },
-          demarches: lastDemarches,
-          dispositifs: lastDispositifs,
+        translationStatistics: {
+          nbTranslators: 12,
+          nbWordsTranslated: 156,
+          nbActiveTranslators: [
+            { languageId: "en", count: 4 },
+            { languageId: "ru", count: 2 },
+          ],
         },
-      });
+        demarches: lastDemarches,
+        dispositifs: lastDispositifs,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/publier.test.tsx b/client/src/__tests__/publier.test.tsx
index cddc0aab16..8533154483 100644
--- a/client/src/__tests__/publier.test.tsx
+++ b/client/src/__tests__/publier.test.tsx
@@ -1,5 +1,4 @@
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import publier from "../pages/publier";
@@ -12,17 +11,14 @@ describe("publier", () => {
     jest.clearAllMocks();
   });
 
-  let component: ReactTestRenderer;
   it("renders publier", () => {
     window.scrollTo = jest.fn();
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: publier,
-        reduxState: {
-          ...initialMockStore,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: publier,
+      reduxState: {
+        ...initialMockStore,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/recherche.test.tsx b/client/src/__tests__/recherche.test.tsx
index 08efd36081..4a30be86a4 100644
--- a/client/src/__tests__/recherche.test.tsx
+++ b/client/src/__tests__/recherche.test.tsx
@@ -1,5 +1,4 @@
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import recherche from "../pages/recherche";
@@ -13,42 +12,38 @@ describe("recherche", () => {
     setupGoogleMock();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders search results", () => {
     window.scrollTo = jest.fn();
 
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: recherche,
-        reduxState: {
-          ...initialMockStore,
-          searchResults: {
-            results: {
-              dispositifs: [],
-              demarches: [],
-              dispositifsSecondaryTheme: [],
-            },
-            query: {
-              search: "",
-              departments: [],
-              themes: ["6319f6b363ab2bbb162d7df5"],
-              needs: [],
-              age: [],
-              frenchLevel: [],
-              language: [],
-              sort: "date",
-              type: "all",
-            },
-            inputFocused: {
-              search: false,
-              location: false,
-              theme: false,
-            },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: recherche,
+      reduxState: {
+        ...initialMockStore,
+        searchResults: {
+          results: {
+            dispositifs: [],
+            demarches: [],
+            dispositifsSecondaryTheme: [],
+          },
+          query: {
+            search: "",
+            departments: [],
+            themes: ["6319f6b363ab2bbb162d7df5"],
+            needs: [],
+            age: [],
+            frenchLevel: [],
+            language: [],
+            sort: "date",
+            type: "all",
+          },
+          inputFocused: {
+            search: false,
+            location: false,
+            theme: false,
           },
         },
-      });
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/traduire.test.tsx b/client/src/__tests__/traduire.test.tsx
index b527da7fa0..61722cbf07 100644
--- a/client/src/__tests__/traduire.test.tsx
+++ b/client/src/__tests__/traduire.test.tsx
@@ -1,5 +1,4 @@
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../jest/lib/wrapWithProvidersAndRender";
 import traduire from "../pages/traduire";
@@ -11,28 +10,25 @@ describe("traduire", () => {
     jest.clearAllMocks();
   });
 
-  let component: ReactTestRenderer;
-
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: traduire,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          translationStatistics: {
-            nbTranslators: 12,
-            nbWordsTranslated: 156,
-            nbActiveTranslators: [
-              { languageId: "en", count: 4 },
-              { languageId: "ru", count: 2 },
-            ],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: traduire,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        translationStatistics: {
+          nbTranslators: 12,
+          nbWordsTranslated: 156,
+          nbActiveTranslators: [
+            { languageId: "en", count: 4 },
+            { languageId: "ru", count: 2 },
+          ],
         },
-      });
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index e3cfa958e4..3c8ec03fe4 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -1,6 +1,6 @@
 //@ts-nocheck
+import { render } from "@testing-library/react";
 import "jest-styled-components";
-import TestRenderer from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
 import {
@@ -15,232 +15,230 @@ import {
   ValidateButton,
 } from "../SubComponents";
 
-let component;
-
 test("should render TypeContenu with dispositif, detailed vue", () => {
-  component = TestRenderer.create(<TypeContenu type={"dispositif"} isDetailedVue={true} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TypeContenu type={"dispositif"} isDetailedVue={true} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TypeContenu with demarche, detailed vue", () => {
-  component = TestRenderer.create(<TypeContenu type={"demarche"} isDetailedVue={true} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TypeContenu type={"demarche"} isDetailedVue={true} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TypeContenu with dispositif, not detailed vue", () => {
-  component = TestRenderer.create(<TypeContenu type={"dispositif"} isDetailedVue={false} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TypeContenu type={"dispositif"} isDetailedVue={false} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TypeContenu with demarche, not detailed vue", () => {
-  component = TestRenderer.create(<TypeContenu type={"demarche"} isDetailedVue={false} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TypeContenu type={"demarche"} isDetailedVue={false} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Title with titre marque", () => {
-  component = TestRenderer.create(<Title titreInformatif="titre informatif" titreMarque="titre marque" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Title titreInformatif="titre informatif" titreMarque="titre marque" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Title without titre marque", () => {
-  component = TestRenderer.create(<Title titreInformatif="titre informatif" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Title titreInformatif="titre informatif" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Structure with null sponsor", () => {
-  component = TestRenderer.create(<Structure sponsor={null} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Structure sponsor={null} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor without nom", () => {
   const sponsor = { name: "test" };
-  component = TestRenderer.create(<Structure sponsor={sponsor} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Structure sponsor={sponsor} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor actif", () => {
   const sponsor = { _id: "abc", nom: "test", status: "Actif" };
-  component = TestRenderer.create(<Structure sponsor={sponsor} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Structure sponsor={sponsor} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor en attente", () => {
   const sponsor = { _id: "abc", nom: "test", status: "En attente" };
-  component = TestRenderer.create(<Structure sponsor={sponsor} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Structure sponsor={sponsor} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor supprime", () => {
   const sponsor = { _id: "abc", nom: "test", status: "Supprimé" };
-  component = TestRenderer.create(<Structure sponsor={sponsor} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<Structure sponsor={sponsor} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render StyledStatus actif ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test("should render StyledStatus en attente ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 test("should render StyledStatus Brouillon ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Brouillon" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 test("should render StyledStatus Rejeté structure ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Rejeté structure" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 test("should render StyledStatus En attente admin ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente admin" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 test("should render StyledStatus Accepté structure ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Accepté structure" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 test("should render StyledStatus Supprimé ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Supprimé" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding status ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "test" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding with override ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: true, textToDisplay: "test" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding with color ", () => {
-  component = wrapWithProvidersAndRenderForTesting({
+  const component = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: false, textToDisplay: "test", textColor: "textColor", color: "color" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(component).toMatchSnapshot();
 });
 
 test("should render ValidateButton disabled", () => {
-  component = TestRenderer.create(<ValidateButton onClick={() => {}} disabled={true} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<ValidateButton onClick={() => {}} disabled={true} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render ValidateButton not disabled", () => {
-  component = TestRenderer.create(<ValidateButton onClick={() => {}} disabled={false} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<ValidateButton onClick={() => {}} disabled={false} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should call onClick ValidateButton", () => {
   const onClick = jest.fn();
-  component = TestRenderer.create(<ValidateButton onClick={onClick} disabled={false} />);
+  const component = render(<ValidateButton onClick={onClick} disabled={false} />);
   component.root.findByProps({ "data-testid": "validate-button" }).props.onClick();
   expect(onClick).toHaveBeenCalled();
 });
 
 test("should render SeeButton", () => {
-  component = TestRenderer.create(<SeeButton burl="test-burl" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<SeeButton burl="test-burl" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render DeleteButton disabled", () => {
-  component = TestRenderer.create(<DeleteButton disabled={true} onClick={() => {}} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<DeleteButton disabled={true} onClick={() => {}} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render DeleteButton not disabled", () => {
-  component = TestRenderer.create(<DeleteButton disabled={false} onClick={() => {}} />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<DeleteButton disabled={false} onClick={() => {}} />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should call onClick DeleteButton", () => {
   const onClick = jest.fn();
-  component = TestRenderer.create(<DeleteButton onClick={onClick} disabled={false} />);
+  const component = render(<DeleteButton onClick={onClick} disabled={false} />);
   component.root.findByProps({ "data-testid": "delete-button" }).props.onClick();
   expect(onClick).toHaveBeenCalled();
 });
 
 test("should render FilterButton isSelected false", () => {
-  component = TestRenderer.create(<FilterButton isSelected={false} onClick={() => {}} text="test" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<FilterButton isSelected={false} onClick={() => {}} text="test" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render FilterButton isSelected true", () => {
-  component = TestRenderer.create(<FilterButton isSelected={true} onClick={() => {}} text="test" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<FilterButton isSelected={true} onClick={() => {}} text="test" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TabHeader up", () => {
-  component = TestRenderer.create(<TabHeader name="test" order="true" isSortedHeader={true} sens="up" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="up" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TabHeader down", () => {
-  component = TestRenderer.create(<TabHeader name="test" order="true" isSortedHeader={true} sens="down" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="down" />);
+  expect(component).toMatchSnapshot();
 });
 
 test("should render TabHeader no order", () => {
-  component = TestRenderer.create(<TabHeader name="test" order={null} isSortedHeader={false} sens="down" />);
-  expect(component.toJSON()).toMatchSnapshot();
+  const component = render(<TabHeader name="test" order={null} isSortedHeader={false} sens="down" />);
+  expect(component).toMatchSnapshot();
 });
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
index b1e4341ece..daaf83ebe1 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { colors } from "colors";
 import "jest-styled-components";
-import { act } from "react-test-renderer";
 import { fetchUserContributionsActionCreator } from "services/UserContributions/userContributions.actions";
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
 import Swal from "sweetalert2";
@@ -31,31 +30,25 @@ describe("userContributions", () => {
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
 
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserContributions,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_CONTRIBUTIONS: { isLoading: true } },
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserContributions,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_CONTRIBUTIONS: { isLoading: true } },
+      },
     });
 
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when 0 contributions", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserContributions,
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserContributions,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   const userContributions = [
@@ -133,39 +126,33 @@ describe("userContributions", () => {
   };
   it("should render correctly when contributions", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserContributions,
-        reduxState: {
-          ...initialMockStore,
-          userContributions,
-          userStructure,
-          user: userState,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserContributions,
+      reduxState: {
+        ...initialMockStore,
+        userContributions,
+        userStructure,
+        user: userState,
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "userStructureId",
       shouldRedirect: false,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when clicks", async () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserContributions,
-        reduxState: {
-          ...initialMockStore,
-          userContributions,
-          userStructure,
-          user: userState,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserContributions,
+      reduxState: {
+        ...initialMockStore,
+        userContributions,
+        userStructure,
+        user: userState,
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "userStructureId",
@@ -176,26 +163,21 @@ describe("userContributions", () => {
 
   it("should render correctly when click on delete", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserContributions,
-        reduxState: {
-          ...initialMockStore,
-          userContributions: [userContributions[0]],
-          user: userState,
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserContributions,
+      reduxState: {
+        ...initialMockStore,
+        userContributions: [userContributions[0]],
+        user: userState,
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "userStructureId",
       shouldRedirect: false,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    act(() =>
-      component.root.findByProps({ "data-testid": "test_delete_id1" }).props.onClick({ stopPropagation: () => {} }),
-    );
-    expect(component.toJSON()).toMatchSnapshot();
+    component.getByTestId("test_delete_id1").click();
+    expect(component).toMatchSnapshot();
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
       text: "La suppression d'un dispositif est irréversible",
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
index 55a5201be3..ff71da80e1 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
@@ -1,7 +1,6 @@
 //@ts-nocheck
 import mockAxios from "jest-mock-axios";
 import routerMock from "next/router";
-import { act } from "react-test-renderer";
 import {
   fetchUserFavoritesActionCreator,
   updateUserFavoritesActionCreator,
@@ -30,35 +29,29 @@ describe("UserFavorites", () => {
   });
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserFavorites,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_FAVORITES: { isLoading: true } },
-        },
-        compProps: { t: (_: string, element2: string) => element2 },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserFavorites,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_FAVORITES: { isLoading: true } },
+      },
+      compProps: { t: (_: string, element2: string) => element2 },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when 0 favorites", () => {
     window.scrollTo = jest.fn();
 
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserFavorites,
-        compProps: { t: (_: string, element2: string) => element2 },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserFavorites,
+      compProps: { t: (_: string, element2: string) => element2 },
     });
 
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
 
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   const fav1 = {
@@ -128,27 +121,21 @@ describe("UserFavorites", () => {
   };
   it("should render correctly when 3 favorites", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserFavorites,
-        compProps: { t: (_: string, element2: string) => element2 },
-        reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserFavorites,
+      compProps: { t: (_: string, element2: string) => element2 },
+      reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserFavorites,
-        compProps: { t: (_: string, element2: string) => element2 },
-        reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserFavorites,
+      compProps: { t: (_: string, element2: string) => element2 },
+      reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
     component.root.findByProps({ "data-testid": "test-delete-button" }).props.onClick();
@@ -163,13 +150,10 @@ describe("UserFavorites", () => {
     routerMock.locale = "en";
     window.scrollTo = jest.fn();
 
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserFavorites,
-        compProps: { t: (_: string, element2: string) => element2 },
-        reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserFavorites,
+      compProps: { t: (_: string, element2: string) => element2 },
+      reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
     });
 
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("en");
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 4a50fc6b94..47b52f4c26 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import "jest-styled-components";
 import Router from "next/router";
-import { act } from "react-test-renderer";
 import { updateDispositifReactionActionCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
 import { fetchSelectedStructureActionCreator } from "services/SelectedStructure/selectedStructure.actions";
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
@@ -38,42 +37,36 @@ describe("UserNotifications", () => {
   });
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: true } },
-          user: { user: { structures: ["structureId"] } },
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: true } },
+        user: { user: { structures: ["structureId"] } },
+      },
     });
 
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
       shouldRedirect: false,
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when 0 notif", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          user: { user: { structures: ["structureId"] } },
-          userStructure: {
-            _id: 1,
-            hasResponsibleSeenNotification: true,
-            dispositifsAssocies: [],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        user: { user: { structures: ["structureId"] } },
+        userStructure: {
+          _id: 1,
+          hasResponsibleSeenNotification: true,
+          dispositifsAssocies: [],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
@@ -83,7 +76,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   const notifNewContent = {
@@ -124,21 +117,18 @@ describe("UserNotifications", () => {
 
   it("should render correctly when notif not read annuaire, not read reaction, not read new content, read reaction ", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          user: { user: { structures: ["structureId"] } },
-          userStructure: {
-            _id: 1,
-            hasResponsibleSeenNotification: false,
-            dispositifsAssocies: [notifNewContent, notifReactionRead, notifReactionNotRead],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        user: { user: { structures: ["structureId"] } },
+        userStructure: {
+          _id: 1,
+          hasResponsibleSeenNotification: false,
+          dispositifsAssocies: [notifNewContent, notifReactionRead, notifReactionNotRead],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
@@ -148,26 +138,23 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should link to dispositif when click on new content notif", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          user: { user: { structures: ["structureId"] } },
-          userStructure: {
-            _id: 1,
-            hasResponsibleSeenNotification: false,
-            dispositifsAssocies: [notifNewContent],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        user: { user: { structures: ["structureId"] } },
+        userStructure: {
+          _id: 1,
+          hasResponsibleSeenNotification: false,
+          dispositifsAssocies: [notifNewContent],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
@@ -185,21 +172,18 @@ describe("UserNotifications", () => {
 
   it("should link to dispositif when click on annuaire notif", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          user: { user: { structures: ["structureId"] } },
-          userStructure: {
-            _id: 1,
-            hasResponsibleSeenNotification: false,
-            dispositifsAssocies: [],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        user: { user: { structures: ["structureId"] } },
+        userStructure: {
+          _id: 1,
+          hasResponsibleSeenNotification: false,
+          dispositifsAssocies: [],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
@@ -215,21 +199,18 @@ describe("UserNotifications", () => {
 
   it("should delete notif reaction", () => {
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserNotifications,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          user: { user: { structures: ["structureId"] } },
-          userStructure: {
-            _id: 1,
-            hasResponsibleSeenNotification: true,
-            dispositifsAssocies: [notifReactionRead],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserNotifications,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        user: { user: { structures: ["structureId"] } },
+        userStructure: {
+          _id: 1,
+          hasResponsibleSeenNotification: true,
+          dispositifsAssocies: [notifReactionRead],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
diff --git a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
index b5156ee324..9f5ddab924 100644
--- a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
+++ b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
@@ -1,7 +1,6 @@
 import "@testing-library/jest-dom";
-import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { testUser } from "__fixtures__/user";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
@@ -37,45 +36,38 @@ describe("UserProfile", () => {
 
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-    component = wrapWithProvidersAndRenderForTesting({
+    const component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
         loadingStatus: { FETCH_USER: { isLoading: true } },
       },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-    component = wrapWithProvidersAndRenderForTesting({
+    const component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
         user: { ...initialMockStore.user, user: { ...testUser } },
       },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when editing profile", async () => {
     window.scrollTo = jest.fn();
-    let component: RenderResult;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserProfile,
-        reduxState: {
-          ...initialMockStore,
-          user: { ...initialMockStore.user, user: { ...testUser } },
-        },
-      });
-    });
-    act(() => {
-      fireEvent.click(component.getByText("Modifier mes informations personnelles"));
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserProfile,
+      reduxState: {
+        ...initialMockStore,
+        user: { ...initialMockStore.user, user: { ...testUser } },
+      },
     });
+    component.getByText("Modifier mes informations personnelles").click();
     await waitFor(() => expect(component.getByTitle("pseudo-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("firstname-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("email-input")).not.toBeDisabled());
@@ -86,19 +78,14 @@ describe("UserProfile", () => {
 
   it("should render correctly when editing profile without password", async () => {
     window.scrollTo = jest.fn();
-    let component: RenderResult;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserProfile,
-        reduxState: {
-          ...initialMockStore,
-          user: { ...initialMockStore.user, user: { ...testUser, sso: true } },
-        },
-      });
-    });
-    act(() => {
-      fireEvent.click(component.getByText("Modifier mes informations personnelles"));
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserProfile,
+      reduxState: {
+        ...initialMockStore,
+        user: { ...initialMockStore.user, user: { ...testUser, sso: true } },
+      },
     });
+    component.getByText("Modifier mes informations personnelles").click();
     await waitFor(() => expect(component.getByTitle("pseudo-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("firstname-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("email-input")).not.toBeDisabled());
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
index c752938813..73aa446650 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
@@ -1,7 +1,6 @@
 import { GetStructureResponse, StructureMemberRole, StructureStatus, UserStatus } from "@refugies-info/api-types";
 import { colors } from "colors";
 import "jest-styled-components";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import {
   fetchUserStructureActionCreator,
   updateUserStructureActionCreator,
@@ -35,48 +34,39 @@ describe("UserStructure", () => {
 
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: true } },
-          userStructure: {
-            _id: "structureId",
-            createur: "",
-            nom: "",
-            adminPercentageProgressionStatus: "",
-            membres: [],
-            dispositifsAssocies: [],
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: true } },
+        userStructure: {
+          _id: "structureId",
+          createur: "",
+          nom: "",
+          adminPercentageProgressionStatus: "",
+          membres: [],
+          dispositifsAssocies: [],
         },
-      });
+      },
     });
     expect(fetchUserStructureActionCreator).toHaveBeenCalledWith({
       structureId: "structureId",
       shouldRedirect: false,
     });
-
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when no structure", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+      },
     });
     expect(fetchUserStructureActionCreator).not.toHaveBeenCalled();
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   const structure: GetStructureResponse = {
@@ -110,177 +100,154 @@ describe("UserStructure", () => {
   };
   it("should render correctly when structure with membres when user is respo", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          userStructure: structure,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        userStructure: structure,
+        user: {
+          userId: "id2",
           user: {
-            userId: "id2",
-            user: {
-              _id: "id2",
-              contributions: [],
-              email: "",
-              phone: "",
-              roles: [],
-              selectedLanguages: [],
-              status: UserStatus.ACTIVE,
-              username: "membre2",
-              structures: [],
-              sso: false,
-            },
-            admin: false,
-            traducteur: false,
-            expertTrad: false,
-            contributeur: false,
-            caregiver: false,
-            hasStructure: false,
-            rolesInStructure: [StructureMemberRole.ADMIN],
+            _id: "id2",
+            contributions: [],
+            email: "",
+            phone: "",
+            roles: [],
+            selectedLanguages: [],
+            status: UserStatus.ACTIVE,
+            username: "membre2",
+            structures: [],
+            sso: false,
           },
+          admin: false,
+          traducteur: false,
+          expertTrad: false,
+          contributeur: false,
+          caregiver: false,
+          hasStructure: false,
+          rolesInStructure: [StructureMemberRole.ADMIN],
         },
-      });
+      },
     });
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly when structure with membres when user is redacteur", () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          userStructure: structure,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        userStructure: structure,
+        user: {
+          userId: "id1",
           user: {
-            userId: "id1",
-            user: {
-              _id: "id1",
-              contributions: [],
-              email: "",
-              phone: "",
-              roles: [],
-              selectedLanguages: [],
-              status: UserStatus.ACTIVE,
-              username: "membre1",
-              structures: [],
-              sso: false,
-            },
-            admin: false,
-            traducteur: false,
-            expertTrad: false,
-            contributeur: false,
-            caregiver: false,
-            hasStructure: false,
-            rolesInStructure: [StructureMemberRole.ADMIN],
+            _id: "id1",
+            contributions: [],
+            email: "",
+            phone: "",
+            roles: [],
+            selectedLanguages: [],
+            status: UserStatus.ACTIVE,
+            username: "membre1",
+            structures: [],
+            sso: false,
           },
+          admin: false,
+          traducteur: false,
+          expertTrad: false,
+          contributeur: false,
+          caregiver: false,
+          hasStructure: false,
+          rolesInStructure: [StructureMemberRole.ADMIN],
         },
-      });
+      },
     });
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
-  it("should render correctly when add member modal is open", () => {
+  it("should render correctly when add member modal is open", async () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          userStructure: structure,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        userStructure: structure,
+        user: {
+          userId: "id2",
           user: {
-            userId: "id2",
-            user: {
-              _id: "id2",
-              contributions: [],
-              email: "",
-              phone: "",
-              roles: [],
-              selectedLanguages: [],
-              status: UserStatus.ACTIVE,
-              username: "membre2",
-              structures: [],
-              sso: false,
-            },
-            admin: false,
-            traducteur: false,
-            expertTrad: false,
-            contributeur: false,
-            caregiver: false,
-            hasStructure: false,
-            rolesInStructure: [StructureMemberRole.ADMIN],
+            _id: "id2",
+            contributions: [],
+            email: "",
+            phone: "",
+            roles: [],
+            selectedLanguages: [],
+            status: UserStatus.ACTIVE,
+            username: "membre2",
+            structures: [],
+            sso: false,
           },
+          admin: false,
+          traducteur: false,
+          expertTrad: false,
+          contributeur: false,
+          caregiver: false,
+          hasStructure: false,
+          rolesInStructure: [StructureMemberRole.ADMIN],
         },
-      });
-    });
-    act(() => {
-      component.root.findByProps({ "data-testid": "test-add-member" }).props.onClick();
+      },
     });
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    const element = await component.findByTestId("test-add-member");
+    element.click();
+    expect(component).toMatchSnapshot();
   });
 
-  it("should render correctly when edit member modal is open, select respo and validate", () => {
+  it("should render correctly when edit member modal is open, select respo and validate", async () => {
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          userStructure: structure,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        userStructure: structure,
+        user: {
+          userId: "id2",
           user: {
-            userId: "id2",
-            user: {
-              _id: "id2",
-              contributions: [],
-              email: "",
-              phone: "",
-              roles: [],
-              selectedLanguages: [],
-              status: UserStatus.ACTIVE,
-              username: "membre2",
-              structures: [],
-              sso: false,
-            },
-            admin: false,
-            traducteur: false,
-            expertTrad: false,
-            contributeur: false,
-            caregiver: false,
-            hasStructure: false,
-            rolesInStructure: [StructureMemberRole.ADMIN],
+            _id: "id2",
+            contributions: [],
+            email: "",
+            phone: "",
+            roles: [],
+            selectedLanguages: [],
+            status: UserStatus.ACTIVE,
+            username: "membre2",
+            structures: [],
+            sso: false,
           },
+          admin: false,
+          traducteur: false,
+          expertTrad: false,
+          contributeur: false,
+          caregiver: false,
+          hasStructure: false,
+          rolesInStructure: [StructureMemberRole.ADMIN],
         },
-      });
-    });
-    act(() => {
-      component.root.findByProps({ "data-testid": "test_see_id1" }).props.onClick();
-    });
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
-    act(() => {
-      component.root.findByProps({ "data-testid": "test-role-Responsable" }).props.onClick();
+      },
     });
-    //@ts-ignore
-    expect(component.toJSON()).toMatchSnapshot();
+    const element1 = await component.findByTestId("test-edit-id1");
+    element1.click();
+    expect(component).toMatchSnapshot();
+
+    const element2 = await component.findByTestId("test-role-Responsable");
+    element2.click();
+    expect(component).toMatchSnapshot();
+
+    const element3 = await component.findByTestId("test-validate-edit");
+    element3.click();
 
-    act(() => {
-      component.root.findByProps({ "data-testid": "test-validate-edit" }).props.onClick();
-    });
     expect(updateUserStructureActionCreator).toHaveBeenCalledWith({
       membres: {
         structureId: "structureId",
@@ -292,49 +259,42 @@ describe("UserStructure", () => {
   });
 
   it("should delete user ", async () => {
-    const promise = Promise.resolve();
-
-    //@ts-ignore
-    Swal.fire.mockResolvedValueOnce({ value: true });
+    Swal.fire = jest.fn().mockResolvedValueOnce({ value: true });
 
     window.scrollTo = jest.fn();
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserStructureComponent,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
-          userStructure: structure,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserStructureComponent,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: { FETCH_USER_STRUCTURE: { isLoading: false } },
+        userStructure: structure,
+        user: {
+          userId: "id2",
           user: {
-            userId: "id2",
-            user: {
-              _id: "id2",
-              contributions: [],
-              email: "",
-              phone: "",
-              roles: [],
-              selectedLanguages: [],
-              status: UserStatus.ACTIVE,
-              username: "membre2",
-              structures: [],
-              sso: false,
-            },
-            admin: false,
-            traducteur: false,
-            expertTrad: false,
-            contributeur: false,
-            caregiver: false,
-            hasStructure: false,
-            rolesInStructure: [StructureMemberRole.ADMIN],
+            _id: "id2",
+            contributions: [],
+            email: "",
+            phone: "",
+            roles: [],
+            selectedLanguages: [],
+            status: UserStatus.ACTIVE,
+            username: "membre2",
+            structures: [],
+            sso: false,
           },
+          admin: false,
+          traducteur: false,
+          expertTrad: false,
+          contributeur: false,
+          caregiver: false,
+          hasStructure: false,
+          rolesInStructure: [StructureMemberRole.ADMIN],
         },
-      });
-    });
-    act(() => {
-      component.root.findByProps({ "data-testid": "test_delete_id1" }).props.onClick();
+      },
     });
+
+    const element = await component.findByTestId("test_delete_id1");
+    element.click();
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
       text: "Vous êtes sur le point d'enlever un membre de votre structure.",
@@ -345,6 +305,5 @@ describe("UserStructure", () => {
       confirmButtonText: "Oui, l'enlever",
       cancelButtonText: "Annuler",
     });
-    await act(() => promise);
   });
 });
diff --git a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
index bd54443c25..971940dbf9 100644
--- a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
@@ -1,7 +1,6 @@
 //@ts-nocheck
 import "jest-styled-components";
 import { useParams } from "react-router-dom";
-import { act } from "react-test-renderer";
 import { fetchDispositifsWithTranslationsStatusActionCreator } from "services/DispositifsWithTranslationsStatus/dispositifsWithTranslationsStatus.actions";
 import API from "utils/API";
 import { dispositifsWithTranslations } from "__fixtures__/dispositifsWithTrad";
@@ -38,57 +37,48 @@ describe("user translation", () => {
   it("should return loader langue in url = first selected langue", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          loadingStatus: {
-            FETCH_DISPOSITIFS_TRANSLATIONS_STATUS: { isLoading: false },
-          },
-          user: {
-            user: { selectedLanguages: ["en"], _id: "userId" },
-          },
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        loadingStatus: {
+          FETCH_DISPOSITIFS_TRANSLATIONS_STATUS: { isLoading: false },
         },
-      });
+        user: {
+          user: { selectedLanguages: ["en"], _id: "userId" },
+        },
+      },
     });
     expect(fetchDispositifsWithTranslationsStatusActionCreator).toHaveBeenCalledWith("en");
     expect(API.get_progression).toHaveBeenCalledWith({ onlyTotal: true });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should redirect if user has language but not langue in url + snap view without content", () => {
     useParams.mockReturnValueOnce({});
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: { user: { selectedLanguages: ["en"] } },
-          dispositifsWithTranslations: [],
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: { user: { selectedLanguages: ["en"] } },
+        dispositifsWithTranslations: [],
+      },
     });
     expect(replace).toHaveBeenCalledWith("/fr/backend/user-translation/en");
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should redirect if user has no language but langue in url", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: { user: { selectedLanguages: [] } },
-          dispositifsWithTranslations: [],
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: { user: { selectedLanguages: [] } },
+        dispositifsWithTranslations: [],
+      },
     });
     expect(fetchDispositifsWithTranslationsStatusActionCreator).not.toHaveBeenCalled();
     expect(API.get_progression).not.toHaveBeenCalled();
@@ -98,83 +88,71 @@ describe("user translation", () => {
   it("should redirect if user has no language but langue in url + snap no langue", () => {
     useParams.mockReturnValueOnce({ id: "test" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: { user: { selectedLanguages: [] } },
-          dispositifsWithTranslations: [{ _id: "id" }],
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: { user: { selectedLanguages: [] } },
+        dispositifsWithTranslations: [{ _id: "id" }],
+      },
     });
     expect(fetchDispositifsWithTranslationsStatusActionCreator).not.toHaveBeenCalled();
     expect(API.get_progression).not.toHaveBeenCalled();
     expect(replace).toHaveBeenCalledWith("/fr/backend/user-translation");
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly with non expert, non admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: {
-            user: { selectedLanguages: [{ i18nCode: "en", _id: "idEn" }] },
-            expertTrad: false,
-          },
-          dispositifsWithTranslations,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: {
+          user: { selectedLanguages: [{ i18nCode: "en", _id: "idEn" }] },
+          expertTrad: false,
         },
-      });
+        dispositifsWithTranslations,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly with expert, non admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: {
-            user: { selectedLanguages: [{ i18nCode: "en", _id: "idEn" }] },
-            expertTrad: true,
-          },
-          dispositifsWithTranslations,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: {
+          user: { selectedLanguages: [{ i18nCode: "en", _id: "idEn" }] },
+          expertTrad: true,
         },
-      });
+        dispositifsWithTranslations,
+      },
     });
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   it("should render correctly with expert, admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    let component;
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: UserTranslation,
-        reduxState: {
-          ...initialMockStore,
-          user: {
-            user: { selectedLanguages: [{ i18nCode: "en" }] },
-            expertTrad: true,
-            admin: true,
-          },
-          dispositifsWithTranslations,
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: UserTranslation,
+      reduxState: {
+        ...initialMockStore,
+        user: {
+          user: { selectedLanguages: [{ i18nCode: "en" }] },
+          expertTrad: true,
+          admin: true,
         },
-        compProps: {},
-      });
+        dispositifsWithTranslations,
+      },
+      compProps: {},
     });
 
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
index 6d88fd319b..8ab35d7312 100644
--- a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
+++ b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
@@ -1,6 +1,5 @@
-import { fireEvent, RenderResult, waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
 import mockRouter from "next-router-mock";
-import { act, ReactTestRenderer } from "react-test-renderer";
 import API from "utils/API";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../jest/lib/wrapWithProvidersAndRender";
@@ -18,101 +17,75 @@ jest.mock("hooks/useLogin", () => {
 
 describe("CheckCode", () => {
   // Renders the component with the correct title and subtitle
-  it("should render the component with the correct title and subtitle", () => {
-    act(() => {
-      mockRouter.push("/check-code?email=test@example.com");
-    });
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
-
-      expect(component.toJSON()).toMatchSnapshot();
+  it("should render the component with the correct title and subtitle", async () => {
+    await mockRouter.push("/check-code?email=test@example.com");
+
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
     });
+
+    expect(component).toMatchSnapshot();
   });
 
   // Does not render the component if the email is not provided
-  it("should not render the component if the email is not provided", () => {
-    act(() => {
-      mockRouter.push("/check-code");
-    });
-    let component: ReactTestRenderer;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
-
-      expect(component.toJSON()).toMatchSnapshot();
-    });
+  it("should not render the component if the email is not provided", async () => {
+    await mockRouter.push("/check-code");
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
+    });
+
+    expect(component).toMatchSnapshot();
   });
 
   it("should display an error message if code is wrong", async () => {
-    act(() => {
-      mockRouter.push("/check-code?email=test@example.com");
-    });
+    await mockRouter.push("/check-code?email=test@example.com");
 
     jest.spyOn(API, "checkCode").mockRejectedValueOnce({ response: { data: { code: "WRONG_CODE" } } });
-    let component: RenderResult;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
-    });
 
-    act(() => {
-      fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
-      fireEvent.click(component.getByText("Valider"));
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
     });
 
+    fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
+    fireEvent.click(component.getByText("Valider"));
+
     await waitFor(() => expect(component.getByText("Code incorrect, veuillez réessayer.")).toBeTruthy());
   });
 
   it("should display an error message if an API error occurs", async () => {
-    act(() => {
-      mockRouter.push("/check-code?email=test@example.com");
-    });
+    mockRouter.push("/check-code?email=test@example.com");
 
     jest.spyOn(API, "checkCode").mockRejectedValueOnce(new Error());
-    let component: RenderResult;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
     });
 
-    act(() => {
-      fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
-      fireEvent.click(component.getByText("Valider"));
-    });
+    fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
+    fireEvent.click(component.getByText("Valider"));
 
     await waitFor(() =>
       expect(
@@ -122,30 +95,22 @@ describe("CheckCode", () => {
   });
 
   it("should display an error message if no token is returned", async () => {
-    act(() => {
-      mockRouter.push("/check-code?email=test@example.com");
-    });
+    await mockRouter.push("/check-code?email=test@example.com");
 
     //@ts-expect-error
     jest.spyOn(API, "checkCode").mockResolvedValue({});
-    let component: RenderResult;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
     });
 
-    act(() => {
-      fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
-      fireEvent.click(component.getByText("Valider"));
-    });
+    fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
+    fireEvent.click(component.getByText("Valider"));
 
     await waitFor(() =>
       expect(
@@ -155,29 +120,21 @@ describe("CheckCode", () => {
   });
 
   it("should call logUser if all is ok", async () => {
-    act(() => {
-      mockRouter.push("/check-code?email=test@example.com");
-    });
+    await mockRouter.push("/check-code?email=test@example.com");
 
     jest.spyOn(API, "checkCode").mockResolvedValue({ token: "ok" });
-    let component: RenderResult;
-
-    act(() => {
-      component = wrapWithProvidersAndRenderForTesting({
-        Component: CheckCode,
-        reduxState: {
-          ...initialMockStore,
-        },
-        compProps: {
-          type: "2fa",
-        },
-      });
-    });
-
-    act(() => {
-      fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
-      fireEvent.click(component.getByText("Valider"));
-    });
+    const component = wrapWithProvidersAndRenderForTesting({
+      Component: CheckCode,
+      reduxState: {
+        ...initialMockStore,
+      },
+      compProps: {
+        type: "2fa",
+      },
+    });
+
+    fireEvent.change(component.getByRole("textbox"), { target: { value: "12345" } });
+    fireEvent.click(component.getByText("Valider"));
     await waitFor(() => expect(logUserMock).toHaveBeenCalled());
   });
 });

From e88fb3634db9f4c6dd91929ee995d0cab637ecff Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Tue, 16 Jul 2024 11:03:18 +0200
Subject: [PATCH 24/37] test(client): :white_check_mark: Add mock
 IntersectionObserver

---
 client/jest/setup.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/client/jest/setup.js b/client/jest/setup.js
index 241108d514..6f3c8e2276 100644
--- a/client/jest/setup.js
+++ b/client/jest/setup.js
@@ -80,3 +80,28 @@ jest.mock("next-i18next", () => ({
     return WrappedComponent;
   },
 }));
+
+// Mock the IntersectionObserver, see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+export class IntersectionObserver {
+  root = null;
+  rootMargin = "";
+  thresholds = [];
+
+  disconnect() {
+    return null;
+  }
+
+  observe() {
+    return null;
+  }
+
+  takeRecords() {
+    return [];
+  }
+
+  unobserve() {
+    return null;
+  }
+}
+window.IntersectionObserver = IntersectionObserver;
+global.IntersectionObserver = IntersectionObserver;

From bcae882ce5442084e3871277f3291c157ba64561 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Tue, 16 Jul 2024 11:21:12 +0200
Subject: [PATCH 25/37] test(client): :white_check_mark: Use asFragment api to
 get generated HTML

---
 client/src/__tests__/agir.test.tsx            |   4 +-
 client/src/__tests__/auth/auth.test.tsx       |   4 +-
 .../__tests__/auth/code-connexion.test.tsx    |   8 +-
 .../src/__tests__/auth/code-securite.test.tsx |   8 +-
 client/src/__tests__/auth/connexion.test.tsx  |   8 +-
 .../mail-envoye.test.tsx                      |   4 +-
 .../nouveau.test.tsx                          |   4 +-
 .../reinitialiser-mot-de-passe.test.tsx       |   8 +-
 client/src/__tests__/index.test.tsx           |   4 +-
 client/src/__tests__/publier.test.tsx         |   4 +-
 client/src/__tests__/recherche.test.tsx       |   4 +-
 client/src/__tests__/traduire.test.tsx        |   4 +-
 .../__tests__/SubComponents.test.tsx          | 134 +++++++++---------
 .../UserContributions.component.test.tsx      |  20 +--
 .../UserFavorites.component.test.tsx          |  12 +-
 .../__tests__/UserNotifications.test.tsx      |  12 +-
 .../__test__/UserProfile.component.test.tsx   |   8 +-
 .../__tests__/UserStructure.test.tsx          |  36 ++---
 .../UserTranslation.component.test.tsx        |  24 ++--
 .../Pages/auth/CheckCode/CheckCode.test.tsx   |   8 +-
 20 files changed, 161 insertions(+), 157 deletions(-)

diff --git a/client/src/__tests__/agir.test.tsx b/client/src/__tests__/agir.test.tsx
index f669d1e20b..c1fb4e04bc 100644
--- a/client/src/__tests__/agir.test.tsx
+++ b/client/src/__tests__/agir.test.tsx
@@ -12,13 +12,13 @@ describe("agir", () => {
 
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: agir,
       reduxState: {
         ...initialMockStore,
       },
       compProps: {},
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/auth.test.tsx b/client/src/__tests__/auth/auth.test.tsx
index 46d75da5b5..e421e29b0c 100644
--- a/client/src/__tests__/auth/auth.test.tsx
+++ b/client/src/__tests__/auth/auth.test.tsx
@@ -14,12 +14,12 @@ describe("auth", () => {
 
   it("renders auth", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: auth,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/code-connexion.test.tsx b/client/src/__tests__/auth/code-connexion.test.tsx
index d62dd20560..6cee41a2ad 100644
--- a/client/src/__tests__/auth/code-connexion.test.tsx
+++ b/client/src/__tests__/auth/code-connexion.test.tsx
@@ -14,13 +14,13 @@ describe("auth/connexion", () => {
   });
 
   it("renders null if no email", () => {
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: codeConnexion,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
   it("renders code-connexion if email", async () => {
     const url = "http://refugies.info/auth/code-connexion?email=test@example.com";
@@ -28,12 +28,12 @@ describe("auth/connexion", () => {
       value: new URL(url),
     });
     await mockRouter.push("/auth/code-connexion?email=test@example.com");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: codeConnexion,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/code-securite.test.tsx b/client/src/__tests__/auth/code-securite.test.tsx
index 197f924b6e..8bf94a53d2 100644
--- a/client/src/__tests__/auth/code-securite.test.tsx
+++ b/client/src/__tests__/auth/code-securite.test.tsx
@@ -14,13 +14,13 @@ describe("auth/connexion", () => {
   });
 
   it("renders null if no email", () => {
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: codeSecurite,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
   it("renders code-securite if email", async () => {
     const url = "http://refugies.info/auth/code-securite?email=test@example.com";
@@ -28,12 +28,12 @@ describe("auth/connexion", () => {
       value: new URL(url),
     });
     await mockRouter.push("/auth/code-securite?email=test@example.com");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: codeSecurite,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/connexion.test.tsx b/client/src/__tests__/auth/connexion.test.tsx
index 5dee7940fb..4c15bacc29 100644
--- a/client/src/__tests__/auth/connexion.test.tsx
+++ b/client/src/__tests__/auth/connexion.test.tsx
@@ -14,22 +14,22 @@ describe("auth/connexion", () => {
   });
 
   it("renders null if no email", () => {
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: connexion,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
   it("renders connexion if email", async () => {
     await mockRouter.push("/auth/connexion?email=test@example.com");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: connexion,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
index 0f16bc407d..7e4405e6f7 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/mail-envoye.test.tsx
@@ -15,12 +15,12 @@ describe("auth/reinitialiser-mot-de-passe/mail-envoye", () => {
 
   it("renders page", async () => {
     await mockRouter.push("/auth/reinitialiser-mot-de-passe/mail-envoye?email=test@example.com");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: pageComponent,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
index 14345ee123..50d881b55c 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/nouveau.test.tsx
@@ -15,12 +15,12 @@ describe("auth/reinitialiser-mot-de-passe/nouveau", () => {
 
   it("renders page", async () => {
     await mockRouter.push("/auth/reinitialiser-mot-de-passe/nouveau?token=aaa");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: pageComponent,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
index 37fcbcc540..ee6185fc1f 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/reinitialiser-mot-de-passe.test.tsx
@@ -14,22 +14,22 @@ describe("auth/reinitialiser-mot-de-passe", () => {
   });
 
   it("renders page if no email", () => {
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: pageComponent,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
   it("renders page if email", async () => {
     await mockRouter.push("/auth/reinitialiser-mot-de-passe?email=test@example.com");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: pageComponent,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/index.test.tsx b/client/src/__tests__/index.test.tsx
index 0e805c6f70..bb3d6cb509 100644
--- a/client/src/__tests__/index.test.tsx
+++ b/client/src/__tests__/index.test.tsx
@@ -15,7 +15,7 @@ describe("homepage", () => {
 
   it("renders homepage", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting<Props>({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting<Props>({
       Component: index,
       reduxState: {
         ...initialMockStore,
@@ -46,6 +46,6 @@ describe("homepage", () => {
         dispositifs: lastDispositifs,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/publier.test.tsx b/client/src/__tests__/publier.test.tsx
index 8533154483..45c9c4b380 100644
--- a/client/src/__tests__/publier.test.tsx
+++ b/client/src/__tests__/publier.test.tsx
@@ -13,12 +13,12 @@ describe("publier", () => {
 
   it("renders publier", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: publier,
       reduxState: {
         ...initialMockStore,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/recherche.test.tsx b/client/src/__tests__/recherche.test.tsx
index 4a30be86a4..5efddb99f6 100644
--- a/client/src/__tests__/recherche.test.tsx
+++ b/client/src/__tests__/recherche.test.tsx
@@ -15,7 +15,7 @@ describe("recherche", () => {
   it("renders search results", () => {
     window.scrollTo = jest.fn();
 
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: recherche,
       reduxState: {
         ...initialMockStore,
@@ -44,6 +44,6 @@ describe("recherche", () => {
         },
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/__tests__/traduire.test.tsx b/client/src/__tests__/traduire.test.tsx
index 61722cbf07..e9d729b314 100644
--- a/client/src/__tests__/traduire.test.tsx
+++ b/client/src/__tests__/traduire.test.tsx
@@ -12,7 +12,7 @@ describe("traduire", () => {
 
   it("renders traduire", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: traduire,
       reduxState: {
         ...initialMockStore,
@@ -29,6 +29,6 @@ describe("traduire", () => {
       },
     });
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index 3c8ec03fe4..417e9934d7 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "jest-styled-components";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
@@ -16,229 +16,229 @@ import {
 } from "../SubComponents";
 
 test("should render TypeContenu with dispositif, detailed vue", () => {
-  const component = render(<TypeContenu type={"dispositif"} isDetailedVue={true} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TypeContenu type={"dispositif"} isDetailedVue={true} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TypeContenu with demarche, detailed vue", () => {
-  const component = render(<TypeContenu type={"demarche"} isDetailedVue={true} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TypeContenu type={"demarche"} isDetailedVue={true} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TypeContenu with dispositif, not detailed vue", () => {
-  const component = render(<TypeContenu type={"dispositif"} isDetailedVue={false} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TypeContenu type={"dispositif"} isDetailedVue={false} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TypeContenu with demarche, not detailed vue", () => {
-  const component = render(<TypeContenu type={"demarche"} isDetailedVue={false} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TypeContenu type={"demarche"} isDetailedVue={false} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Title with titre marque", () => {
-  const component = render(<Title titreInformatif="titre informatif" titreMarque="titre marque" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Title titreInformatif="titre informatif" titreMarque="titre marque" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Title without titre marque", () => {
-  const component = render(<Title titreInformatif="titre informatif" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Title titreInformatif="titre informatif" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Structure with null sponsor", () => {
-  const component = render(<Structure sponsor={null} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Structure sponsor={null} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor without nom", () => {
   const sponsor = { name: "test" };
-  const component = render(<Structure sponsor={sponsor} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Structure sponsor={sponsor} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor actif", () => {
   const sponsor = { _id: "abc", nom: "test", status: "Actif" };
-  const component = render(<Structure sponsor={sponsor} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Structure sponsor={sponsor} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor en attente", () => {
   const sponsor = { _id: "abc", nom: "test", status: "En attente" };
-  const component = render(<Structure sponsor={sponsor} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Structure sponsor={sponsor} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render Structure with sponsor supprime", () => {
   const sponsor = { _id: "abc", nom: "test", status: "Supprimé" };
-  const component = render(<Structure sponsor={sponsor} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<Structure sponsor={sponsor} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render StyledStatus actif ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render StyledStatus en attente ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 test("should render StyledStatus Brouillon ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Brouillon" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 test("should render StyledStatus Rejeté structure ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Rejeté structure" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 test("should render StyledStatus En attente admin ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "En attente admin" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 test("should render StyledStatus Accepté structure ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Accepté structure" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 test("should render StyledStatus Supprimé ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Supprimé" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding status ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "test" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding with override ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: true, textToDisplay: "test" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render StyledStatus no corresponding with color ", () => {
-  const component = wrapWithProvidersAndRenderForTesting({
+  const { asFragment } = wrapWithProvidersAndRenderForTesting({
     Component: StyledStatus,
     compProps: { text: "Actif", overrideColor: false, textToDisplay: "test", textColor: "textColor", color: "color" },
     reduxState: {
       ...initialMockStore,
     },
   });
-  expect(component).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render ValidateButton disabled", () => {
-  const component = render(<ValidateButton onClick={() => {}} disabled={true} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<ValidateButton onClick={() => {}} disabled={true} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render ValidateButton not disabled", () => {
-  const component = render(<ValidateButton onClick={() => {}} disabled={false} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<ValidateButton onClick={() => {}} disabled={false} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should call onClick ValidateButton", () => {
   const onClick = jest.fn();
-  const component = render(<ValidateButton onClick={onClick} disabled={false} />);
-  component.root.findByProps({ "data-testid": "validate-button" }).props.onClick();
+  render(<ValidateButton onClick={onClick} disabled={false} />);
+  screen.findByProps({ "data-testid": "validate-button" }).click();
   expect(onClick).toHaveBeenCalled();
 });
 
 test("should render SeeButton", () => {
-  const component = render(<SeeButton burl="test-burl" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<SeeButton burl="test-burl" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render DeleteButton disabled", () => {
-  const component = render(<DeleteButton disabled={true} onClick={() => {}} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<DeleteButton disabled={true} onClick={() => {}} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render DeleteButton not disabled", () => {
-  const component = render(<DeleteButton disabled={false} onClick={() => {}} />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<DeleteButton disabled={false} onClick={() => {}} />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should call onClick DeleteButton", () => {
   const onClick = jest.fn();
-  const component = render(<DeleteButton onClick={onClick} disabled={false} />);
-  component.root.findByProps({ "data-testid": "delete-button" }).props.onClick();
+  render(<DeleteButton onClick={onClick} disabled={false} />);
+  screen.findByProps({ "data-testid": "delete-button" }).click();
   expect(onClick).toHaveBeenCalled();
 });
 
 test("should render FilterButton isSelected false", () => {
-  const component = render(<FilterButton isSelected={false} onClick={() => {}} text="test" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<FilterButton isSelected={false} onClick={() => {}} text="test" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render FilterButton isSelected true", () => {
-  const component = render(<FilterButton isSelected={true} onClick={() => {}} text="test" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<FilterButton isSelected={true} onClick={() => {}} text="test" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TabHeader up", () => {
-  const component = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="up" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="up" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TabHeader down", () => {
-  const component = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="down" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TabHeader name="test" order="true" isSortedHeader={true} sens="down" />);
+  expect(asFragment()).toMatchSnapshot();
 });
 
 test("should render TabHeader no order", () => {
-  const component = render(<TabHeader name="test" order={null} isSortedHeader={false} sens="down" />);
-  expect(component).toMatchSnapshot();
+  const { asFragment } = render(<TabHeader name="test" order={null} isSortedHeader={false} sens="down" />);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
index daaf83ebe1..1b3e95e731 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { screen } from "@testing-library/react";
 import { colors } from "colors";
 import "jest-styled-components";
 import { fetchUserContributionsActionCreator } from "services/UserContributions/userContributions.actions";
@@ -7,6 +8,7 @@ import Swal from "sweetalert2";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import UserContributions from "../UserContributions";
+
 jest.mock("components/Modals/WriteContentModal/WriteContentModal", () => jest.fn().mockReturnValue(<></>));
 
 jest.mock("next/router", () => require("next-router-mock"));
@@ -30,7 +32,7 @@ describe("userContributions", () => {
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
 
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserContributions,
       reduxState: {
         ...initialMockStore,
@@ -39,16 +41,16 @@ describe("userContributions", () => {
     });
 
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when 0 contributions", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserContributions,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   const userContributions = [
@@ -126,7 +128,7 @@ describe("userContributions", () => {
   };
   it("should render correctly when contributions", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserContributions,
       reduxState: {
         ...initialMockStore,
@@ -140,7 +142,7 @@ describe("userContributions", () => {
       shouldRedirect: false,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when clicks", async () => {
@@ -163,7 +165,7 @@ describe("userContributions", () => {
 
   it("should render correctly when click on delete", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserContributions,
       reduxState: {
         ...initialMockStore,
@@ -176,8 +178,8 @@ describe("userContributions", () => {
       shouldRedirect: false,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    component.getByTestId("test_delete_id1").click();
-    expect(component).toMatchSnapshot();
+    screen.getByTestId("test_delete_id1").click();
+    expect(asFragment()).toMatchSnapshot();
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
       text: "La suppression d'un dispositif est irréversible",
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
index ff71da80e1..159df07487 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
@@ -29,7 +29,7 @@ describe("UserFavorites", () => {
   });
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserFavorites,
       reduxState: {
         ...initialMockStore,
@@ -38,20 +38,20 @@ describe("UserFavorites", () => {
       compProps: { t: (_: string, element2: string) => element2 },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when 0 favorites", () => {
     window.scrollTo = jest.fn();
 
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserFavorites,
       compProps: { t: (_: string, element2: string) => element2 },
     });
 
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   const fav1 = {
@@ -121,13 +121,13 @@ describe("UserFavorites", () => {
   };
   it("should render correctly when 3 favorites", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserFavorites,
       compProps: { t: (_: string, element2: string) => element2 },
       reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer", () => {
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 47b52f4c26..8ed06f8e0d 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -37,7 +37,7 @@ describe("UserNotifications", () => {
   });
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserNotifications,
       reduxState: {
         ...initialMockStore,
@@ -50,12 +50,12 @@ describe("UserNotifications", () => {
       structureId: "structureId",
       shouldRedirect: false,
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when 0 notif", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserNotifications,
       reduxState: {
         ...initialMockStore,
@@ -76,7 +76,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   const notifNewContent = {
@@ -117,7 +117,7 @@ describe("UserNotifications", () => {
 
   it("should render correctly when notif not read annuaire, not read reaction, not read new content, read reaction ", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserNotifications,
       reduxState: {
         ...initialMockStore,
@@ -138,7 +138,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should link to dispositif when click on new content notif", () => {
diff --git a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
index 9f5ddab924..d789d2e0d2 100644
--- a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
+++ b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
@@ -36,26 +36,26 @@ describe("UserProfile", () => {
 
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
         loadingStatus: { FETCH_USER: { isLoading: true } },
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
       reduxState: {
         ...initialMockStore,
         user: { ...initialMockStore.user, user: { ...testUser } },
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when editing profile", async () => {
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
index 73aa446650..ed45ebfe75 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
@@ -1,4 +1,5 @@
 import { GetStructureResponse, StructureMemberRole, StructureStatus, UserStatus } from "@refugies-info/api-types";
+import { screen } from "@testing-library/react";
 import { colors } from "colors";
 import "jest-styled-components";
 import {
@@ -9,6 +10,7 @@ import Swal from "sweetalert2";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import { UserStructureComponent } from "../UserStructure.component";
+
 jest.mock("next/router", () => require("next-router-mock"));
 
 // need to mock react strap because issue with modal
@@ -34,7 +36,7 @@ describe("UserStructure", () => {
 
   it("should render correctly when loading", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -53,12 +55,12 @@ describe("UserStructure", () => {
       structureId: "structureId",
       shouldRedirect: false,
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when no structure", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -66,7 +68,7 @@ describe("UserStructure", () => {
       },
     });
     expect(fetchUserStructureActionCreator).not.toHaveBeenCalled();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   const structure: GetStructureResponse = {
@@ -100,7 +102,7 @@ describe("UserStructure", () => {
   };
   it("should render correctly when structure with membres when user is respo", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -130,12 +132,12 @@ describe("UserStructure", () => {
         },
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when structure with membres when user is redacteur", () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -165,12 +167,12 @@ describe("UserStructure", () => {
         },
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when add member modal is open", async () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -200,14 +202,14 @@ describe("UserStructure", () => {
         },
       },
     });
-    const element = await component.findByTestId("test-add-member");
+    const element = await screen.findByTestId("test-add-member");
     element.click();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when edit member modal is open, select respo and validate", async () => {
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
       reduxState: {
         ...initialMockStore,
@@ -237,15 +239,15 @@ describe("UserStructure", () => {
         },
       },
     });
-    const element1 = await component.findByTestId("test-edit-id1");
+    const element1 = await screen.findByTestId("test-edit-id1");
     element1.click();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
-    const element2 = await component.findByTestId("test-role-Responsable");
+    const element2 = await screen.findByTestId("test-role-Responsable");
     element2.click();
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
 
-    const element3 = await component.findByTestId("test-validate-edit");
+    const element3 = await screen.findByTestId("test-validate-edit");
     element3.click();
 
     expect(updateUserStructureActionCreator).toHaveBeenCalledWith({
diff --git a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
index 971940dbf9..211683408f 100644
--- a/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
+++ b/client/src/components/Backend/screens/UserTranslation/__tests__/UserTranslation.component.test.tsx
@@ -37,7 +37,7 @@ describe("user translation", () => {
   it("should return loader langue in url = first selected langue", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -51,13 +51,13 @@ describe("user translation", () => {
     });
     expect(fetchDispositifsWithTranslationsStatusActionCreator).toHaveBeenCalledWith("en");
     expect(API.get_progression).toHaveBeenCalledWith({ onlyTotal: true });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should redirect if user has language but not langue in url + snap view without content", () => {
     useParams.mockReturnValueOnce({});
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -66,7 +66,7 @@ describe("user translation", () => {
       },
     });
     expect(replace).toHaveBeenCalledWith("/fr/backend/user-translation/en");
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should redirect if user has no language but langue in url", () => {
@@ -88,7 +88,7 @@ describe("user translation", () => {
   it("should redirect if user has no language but langue in url + snap no langue", () => {
     useParams.mockReturnValueOnce({ id: "test" });
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -99,13 +99,13 @@ describe("user translation", () => {
     expect(fetchDispositifsWithTranslationsStatusActionCreator).not.toHaveBeenCalled();
     expect(API.get_progression).not.toHaveBeenCalled();
     expect(replace).toHaveBeenCalledWith("/fr/backend/user-translation");
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly with non expert, non admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -116,13 +116,13 @@ describe("user translation", () => {
         dispositifsWithTranslations,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly with expert, non admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -133,13 +133,13 @@ describe("user translation", () => {
         dispositifsWithTranslations,
       },
     });
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly with expert, admin", () => {
     useParams.mockReturnValueOnce({ id: "en" });
     window.scrollTo = jest.fn();
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserTranslation,
       reduxState: {
         ...initialMockStore,
@@ -153,6 +153,6 @@ describe("user translation", () => {
       compProps: {},
     });
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });
diff --git a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
index 8ab35d7312..5f6a782c34 100644
--- a/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
+++ b/client/src/components/Pages/auth/CheckCode/CheckCode.test.tsx
@@ -20,7 +20,7 @@ describe("CheckCode", () => {
   it("should render the component with the correct title and subtitle", async () => {
     await mockRouter.push("/check-code?email=test@example.com");
 
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: CheckCode,
       reduxState: {
         ...initialMockStore,
@@ -30,13 +30,13 @@ describe("CheckCode", () => {
       },
     });
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   // Does not render the component if the email is not provided
   it("should not render the component if the email is not provided", async () => {
     await mockRouter.push("/check-code");
-    const component = wrapWithProvidersAndRenderForTesting({
+    const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: CheckCode,
       reduxState: {
         ...initialMockStore,
@@ -46,7 +46,7 @@ describe("CheckCode", () => {
       },
     });
 
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("should display an error message if code is wrong", async () => {

From 35c581470fa6b6a4e9ff609dbc4e1f8682073137 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Tue, 16 Jul 2024 11:23:02 +0200
Subject: [PATCH 26/37] test(client): :lipstick: Update snapshots

---
 .../__snapshots__/agir.test.tsx.snap          | 2621 +++++++-------
 .../__snapshots__/recherche.test.tsx.snap     | 3144 +++++++++--------
 .../__snapshots__/traduire.test.tsx.snap      | 2198 ++++++------
 .../auth/__snapshots__/auth.test.tsx.snap     |  216 +-
 .../code-connexion.test.tsx.snap              |  237 +-
 .../__snapshots__/code-securite.test.tsx.snap |  255 +-
 .../__snapshots__/connexion.test.tsx.snap     |  162 +-
 .../__snapshots__/mail-envoye.test.tsx.snap   |   76 +-
 .../__snapshots__/nouveau.test.tsx.snap       |  195 +-
 .../reinitialiser-mot-de-passe.test.tsx.snap  |  197 +-
 .../__snapshots__/SubComponents.test.tsx.snap |  919 +++--
 .../UserContributions.component.test.tsx.snap | 2958 ++++++++--------
 .../UserFavorites.component.test.tsx.snap     | 1717 +++++----
 .../UserNotifications.test.tsx.snap           |  939 ++---
 .../UserProfile.component.test.tsx.snap       | 1215 +++----
 .../__snapshots__/UserStructure.test.tsx.snap | 2291 ++++++------
 .../UserTranslation.component.test.tsx.snap   | 1362 ++++---
 .../__snapshots__/CheckCode.test.tsx.snap     |  133 +-
 18 files changed, 10567 insertions(+), 10268 deletions(-)

diff --git a/client/src/__tests__/__snapshots__/agir.test.tsx.snap b/client/src/__tests__/__snapshots__/agir.test.tsx.snap
index f29cae8172..ac75b79779 100644
--- a/client/src/__tests__/__snapshots__/agir.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/agir.test.tsx.snap
@@ -1,1530 +1,1391 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`agir renders traduire 1`] = `
-<div
-  className="w-100"
->
+<DocumentFragment>
   <div
-    className="hero"
+    class="w-100"
   >
     <div
-      className="container"
+      class="hero"
     >
       <div
-        className="row row"
+        class="container"
       >
         <div
-          className="col"
+          class="row row"
         >
-          <h1
-            className="title"
-          >
-            Le programme AGIR en bref
-          </h1>
-          <p
-            className="subtitle mb-10"
-          >
-            Ce programme interministériel est piloté par la Direction générale des étrangers en France (DGEF) en partenariat avec la DIHAL, la DIAIR, l’OFII et la DGEFP.
-          </p>
-          <a
-            className="fr-btn fr-btn--lg fr-icon-arrow-right-line fr-btn--icon-right colored mb-4"
-            href="#program"
-            id="fr-button-:r0:"
-            style={{}}
+          <div
+            class="col"
           >
-            Découvrir le programme
-          </a>
-          <a
-            className="fr-btn fr-btn--secondary fr-btn--lg fr-icon-arrow-right-line fr-btn--icon-right colored"
-            href="#map"
-            id="fr-button-:r1:"
-            style={{}}
+            <h1
+              class="title"
+            >
+              Le programme AGIR en bref
+            </h1>
+            <p
+              class="subtitle mb-10"
+            >
+              Ce programme interministériel est piloté par la Direction générale des étrangers en France (DGEF) en partenariat avec la DIHAL, la DIAIR, l’OFII et la DGEFP.
+            </p>
+            <a
+              class="fr-btn fr-btn--lg fr-icon-arrow-right-line fr-btn--icon-right colored mb-4"
+              href="#program"
+              id="fr-button-:r0:"
+            >
+              Découvrir le programme
+            </a>
+            <a
+              class="fr-btn fr-btn--secondary fr-btn--lg fr-icon-arrow-right-line fr-btn--icon-right colored"
+              href="#map"
+              id="fr-button-:r1:"
+            >
+              Trouver mon opérateur
+            </a>
+          </div>
+          <div
+            class="d-flex justify-content-center justify-lg-content-end col"
           >
-            Trouver mon opérateur
-          </a>
-        </div>
-        <div
-          className="d-flex justify-content-center justify-lg-content-end col"
-        >
-          <img
-            alt=""
-            data-nimg="1"
-            decoding="async"
-            height={280}
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="/_next/image?url=%2Fimg.jpg&w=828&q=75"
-            srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=828&q=75 2x"
-            style={
-              {
-                "color": "transparent",
-              }
-            }
-            width={400}
-          />
+            <img
+              alt=""
+              data-nimg="1"
+              decoding="async"
+              height="280"
+              loading="lazy"
+              src="/_next/image?url=%2Fimg.jpg&w=828&q=75"
+              srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=828&q=75 2x"
+              style="color: transparent;"
+              width="400"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="nav"
-  >
     <div
-      className="container"
+      class="nav"
     >
-      <fieldset
-        className="fr-segmented fr-segmented--no-legend"
-        id="fr-segmented-:r2:"
+      <div
+        class="container"
       >
-        <div
-          className="fr-segmented__elements"
+        <fieldset
+          class="fr-segmented fr-segmented--no-legend"
+          id="fr-segmented-:r2:"
         >
           <div
-            className="fr-segmented__element"
+            class="fr-segmented__elements"
           >
-            <input
-              checked={false}
-              id="fr-segmented-:r2:-0"
-              name="segmented-name-:r3:"
-              onClick={[Function]}
-              readOnly={true}
-              type="radio"
-            />
-            <label
-              className="fr-label"
-              htmlFor="fr-segmented-:r2:-0"
+            <div
+              class="fr-segmented__element"
             >
-              Le programme
-            </label>
-          </div>
-          <div
-            className="fr-segmented__element"
-          >
-            <input
-              checked={false}
-              id="fr-segmented-:r2:-1"
-              name="segmented-name-:r3:"
-              onClick={[Function]}
-              readOnly={true}
-              type="radio"
-            />
-            <label
-              className="fr-label"
-              htmlFor="fr-segmented-:r2:-1"
+              <input
+                id="fr-segmented-:r2:-0"
+                name="segmented-name-:r3:"
+                readonly=""
+                type="radio"
+              />
+              <label
+                class="fr-label"
+                for="fr-segmented-:r2:-0"
+              >
+                Le programme
+              </label>
+            </div>
+            <div
+              class="fr-segmented__element"
             >
-              Les opérateurs
-            </label>
-          </div>
-          <div
-            className="fr-segmented__element"
-          >
-            <input
-              checked={false}
-              id="fr-segmented-:r2:-2"
-              name="segmented-name-:r3:"
-              onClick={[Function]}
-              readOnly={true}
-              type="radio"
-            />
-            <label
-              className="fr-label"
-              htmlFor="fr-segmented-:r2:-2"
+              <input
+                id="fr-segmented-:r2:-1"
+                name="segmented-name-:r3:"
+                readonly=""
+                type="radio"
+              />
+              <label
+                class="fr-label"
+                for="fr-segmented-:r2:-1"
+              >
+                Les opérateurs
+              </label>
+            </div>
+            <div
+              class="fr-segmented__element"
             >
-              Aller plus loin
-            </label>
+              <input
+                id="fr-segmented-:r2:-2"
+                name="segmented-name-:r3:"
+                readonly=""
+                type="radio"
+              />
+              <label
+                class="fr-label"
+                for="fr-segmented-:r2:-2"
+              >
+                Aller plus loin
+              </label>
+            </div>
           </div>
-        </div>
-      </fieldset>
+        </fieldset>
+      </div>
     </div>
-  </div>
-  <div
-    className="container"
-  >
-    <span
-      className="anchor"
-      id="program"
-    />
     <div
-      className="py-10 py-lg-20"
+      class="container"
     >
       <span
-        className="step"
-      >
-        1
-      </span>
+        class="anchor"
+        id="program"
+      />
       <div
-        className="gx-20 row"
+        class="py-10 py-lg-20"
       >
+        <span
+          class="step"
+        >
+          1
+        </span>
         <div
-          className="col-lg-6"
+          class="gx-20 row"
         >
-          <h2
-            className="blue fr-display--xs"
+          <div
+            class="col-lg-6"
           >
-            Accompagner les bénéficiaires
-          </h2>
-          <p
-            className="subtitle blue"
+            <h2
+              class="blue fr-display--xs"
+            >
+              Accompagner les bénéficiaires
+            </h2>
+            <p
+              class="subtitle blue"
+            >
+              Le programme AGIR vise à systématiser l’accompagnement global des bénéficiaires de la protection internationale (BPI) vers l’emploi, le logement et l’accès aux droits.
+            </p>
+          </div>
+          <div
+            class="col-lg-6"
           >
-            Le programme AGIR vise à systématiser l’accompagnement global des bénéficiaires de la protection internationale (BPI) vers l’emploi, le logement et l’accès aux droits.
-          </p>
+            <ul
+              class="list"
+            >
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                L’accompagnement est réalisé auprès de BPI orientés par les directions territoriales de l’OFII (DT OFII) et peut s’étendre jusqu’à 24 mois maximum.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Il concerne les bénéficiaires ayant obtenu la protection depuis moins de 24 mois.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                L’accompagnement est assuré par un binôme de travailleurs sociaux et de conseillers en insertion professionnelle.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Il démarre par la signature d’un contrat d’engagements réciproques entre le BPI et l’opérateur AGIR.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Un bilan complet en matière d’accès aux droits, au logement, à l’emploi ou la formation est réalisé en début de prise en charge.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Un entretien de suivi tous les deux mois est obligatoire.
+              </li>
+            </ul>
+          </div>
         </div>
         <div
-          className="col-lg-6"
+          class="mt-10 mt-lg-20 row"
         >
-          <ul
-            className="list"
+          <div
+            class="mb-10 mb-lg-0 col-lg-4"
           >
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              L’accompagnement est réalisé auprès de BPI orientés par les directions territoriales de l’OFII (DT OFII) et peut s’étendre jusqu’à 24 mois maximum.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              Il concerne les bénéficiaires ayant obtenu la protection depuis moins de 24 mois.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              L’accompagnement est assuré par un binôme de travailleurs sociaux et de conseillers en insertion professionnelle.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
+            <div
+              class="card"
+            >
+              <img
+                alt=""
+                class="mb-8"
+                data-nimg="1"
+                decoding="async"
+                height="80"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                style="color: transparent;"
+                width="80"
               />
-              Il démarre par la signature d’un contrat d’engagements réciproques entre le BPI et l’opérateur AGIR.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
+              <h3
+                class="mb-4"
+              >
+                L’accompagnement social
+              </h3>
+              <p>
+                Droit au séjour, obtention de documents de voyage, reconstitution de l’état-civil auprès de l’OFPRA, accès à la réunification familiale
+              </p>
+              <p>
+                <strong>
+                  Accès aux prestations sociales
+                </strong>
+                 : RSA, prestations familiales
+              </p>
+              <p>
+                <strong>
+                  Appui à l’ouverture d’un compte bancaire
+                </strong>
+              </p>
+              <p>
+                <strong>
+                  Appui à la mobilité
+                </strong>
+                 : échange de permis de conduire ou orientation vers un dispositif préparant à la présentation à l’examen du permis français
+              </p>
+              <p>
+                <strong>
+                  Accès à l’assurance maladie
+                </strong>
+                 : PUMA et CMU-C
+              </p>
+            </div>
+          </div>
+          <div
+            class="mb-10 mb-lg-0 col-lg-4"
+          >
+            <div
+              class="card"
+            >
+              <img
+                alt=""
+                class="mb-8"
+                data-nimg="1"
+                decoding="async"
+                height="80"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                style="color: transparent;"
+                width="80"
               />
-              Un bilan complet en matière d’accès aux droits, au logement, à l’emploi ou la formation est réalisé en début de prise en charge.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
+              <h3
+                class="mb-4"
+              >
+                Le logement
+              </h3>
+              <p>
+                L’accompagnement vise à favoriser les sorties réussies des structures d’hébergement et de logement temporaire et à garantir l’accès et le maintien durable des ménages dans leur lieu de vie ainsi que dans leur environnement.
+              </p>
+            </div>
+          </div>
+          <div
+            class="mb-10 mb-lg-0 col-lg-4"
+          >
+            <div
+              class="card"
+            >
+              <img
+                alt=""
+                class="mb-8"
+                data-nimg="1"
+                decoding="async"
+                height="80"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                style="color: transparent;"
+                width="80"
               />
-              Un entretien de suivi tous les deux mois est obligatoire.
-            </li>
-          </ul>
+              <h3
+                class="mb-4"
+              >
+                L’emploi
+              </h3>
+              <p>
+                <strong>
+                  Réaliser un pré-diagnostic
+                </strong>
+                 sur tous les aspects de la situation professionnelle en lien avec le bilan de la situation globale
+              </p>
+              <p>
+                <strong>
+                  Assurer l’inscription à France Travail ou le suivi par la Mission locale
+                </strong>
+                 ainsi que leur maintien dans le temps
+              </p>
+              <p>
+                <strong>
+                  Orienter vers les acteurs du Service public de l’emploi (SPE)
+                </strong>
+                 si niveau de langue requis (A2) avec mobilisation de l’offre de service SPE
+              </p>
+            </div>
+          </div>
         </div>
       </div>
+      <span
+        class="anchor"
+        id="operators"
+      />
       <div
-        className="mt-10 mt-lg-20 row"
+        class="py-10 py-lg-20"
       >
-        <div
-          className="mb-10 mb-lg-0 col-lg-4"
+        <span
+          class="step"
         >
-          <div
-            className="card"
-          >
-            <img
-              alt=""
-              className="mb-8"
-              data-nimg="1"
-              decoding="async"
-              height={80}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={80}
-            />
-            <h3
-              className="mb-4"
-            >
-              L’accompagnement social
-            </h3>
-            <p>
-              Droit au séjour, obtention de documents de voyage, reconstitution de l’état-civil auprès de l’OFPRA, accès à la réunification familiale
-            </p>
-            <p>
-              <strong>
-                Accès aux prestations sociales
-              </strong>
-               : RSA, prestations familiales
-            </p>
-            <p>
-              <strong>
-                Appui à l’ouverture d’un compte bancaire
-              </strong>
-            </p>
-            <p>
-              <strong>
-                Appui à la mobilité
-              </strong>
-               : échange de permis de conduire ou orientation vers un dispositif préparant à la présentation à l’examen du permis français
-            </p>
-            <p>
-              <strong>
-                Accès à l’assurance maladie
-              </strong>
-               : PUMA et CMU-C
-            </p>
-          </div>
-        </div>
+          2
+        </span>
         <div
-          className="mb-10 mb-lg-0 col-lg-4"
+          class="gx-20 row"
         >
           <div
-            className="card"
+            class="col-lg-6"
           >
-            <img
-              alt=""
-              className="mb-8"
-              data-nimg="1"
-              decoding="async"
-              height={80}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={80}
-            />
-            <h3
-              className="mb-4"
+            <h2
+              class="blue fr-display--xs"
+            >
+              Coordonner les acteurs de l’intégration
+            </h2>
+            <p
+              class="subtitle blue"
             >
-              Le logement
-            </h3>
-            <p>
-              L’accompagnement vise à favoriser les sorties réussies des structures d’hébergement et de logement temporaire et à garantir l’accès et le maintien durable des ménages dans leur lieu de vie ainsi que dans leur environnement.
+              L’objectif du programme AGIR est de proposer un guichet unique par département pour favoriser l’intégration des BPI, pour des parcours adaptés et sans ruptures.
             </p>
           </div>
-        </div>
-        <div
-          className="mb-10 mb-lg-0 col-lg-4"
-        >
           <div
-            className="card"
+            class="col-lg-6"
           >
-            <img
-              alt=""
-              className="mb-8"
-              data-nimg="1"
-              decoding="async"
-              height={80}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={80}
-            />
-            <h3
-              className="mb-4"
+            <ul
+              class="list"
             >
-              L’emploi
-            </h3>
-            <p>
-              <strong>
-                Réaliser un pré-diagnostic
-              </strong>
-               sur tous les aspects de la situation professionnelle en lien avec le bilan de la situation globale
-            </p>
-            <p>
-              <strong>
-                Assurer l’inscription à France Travail ou le suivi par la Mission locale
-              </strong>
-               ainsi que leur maintien dans le temps
-            </p>
-            <p>
-              <strong>
-                Orienter vers les acteurs du Service public de l’emploi (SPE)
-              </strong>
-               si niveau de langue requis (A2) avec mobilisation de l’offre de service SPE
-            </p>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                L’opérateur AGIR appuie le préfet dans l’animation du réseau des acteurs de droit commun et spécialisés.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                L’opérateur AGIR noue les partenariats nécessaires à l’accompagnement pour faciliter la prise en charge des BPI et répondre à tous les besoins d’intégration identifiés.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Pour identifier puis coordonner les acteurs sur le territoire, il incite au recensement des actions sur Réfugiés.info.
+              </li>
+              <li>
+                <i
+                  class="fr-icon-arrow-right-line"
+                />
+                Permettant ainsi la constitution d’une cartographie exhaustive et pratique pour l’ensemble de l’écosystème.
+              </li>
+            </ul>
           </div>
         </div>
-      </div>
-    </div>
-    <span
-      className="anchor"
-      id="operators"
-    />
-    <div
-      className="py-10 py-lg-20"
-    >
-      <span
-        className="step"
-      >
-        2
-      </span>
-      <div
-        className="gx-20 row"
-      >
+        <span
+          class="anchor"
+          id="map"
+        />
         <div
-          className="col-lg-6"
+          class="mt-10 mt-lg-20"
         >
-          <h2
-            className="blue fr-display--xs"
+          <h3
+            class="h3"
           >
-            Coordonner les acteurs de l’intégration
-          </h2>
+            Trouver l’opérateur de mon territoire
+          </h3>
           <p
-            className="subtitle blue"
+            class="w-lg-50 fst-italic"
           >
-            L’objectif du programme AGIR est de proposer un guichet unique par département pour favoriser l’intégration des BPI, pour des parcours adaptés et sans ruptures.
+            Sélectionner votre département sur la carte pour obtenir les coordonnées de l’opérateur sur votre territoire.
           </p>
-        </div>
-        <div
-          className="col-lg-6"
-        >
-          <ul
-            className="list"
-          >
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              L’opérateur AGIR appuie le préfet dans l’animation du réseau des acteurs de droit commun et spécialisés.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              L’opérateur AGIR noue les partenariats nécessaires à l’accompagnement pour faciliter la prise en charge des BPI et répondre à tous les besoins d’intégration identifiés.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              Pour identifier puis coordonner les acteurs sur le territoire, il incite au recensement des actions sur Réfugiés.info.
-            </li>
-            <li>
-              <i
-                className="fr-icon-arrow-right-line"
-              />
-              Permettant ainsi la constitution d’une cartographie exhaustive et pratique pour l’ensemble de l’écosystème.
-            </li>
-          </ul>
-        </div>
-      </div>
-      <span
-        className="anchor"
-        id="map"
-      />
-      <div
-        className="mt-10 mt-lg-20"
-      >
-        <h3
-          className="h3"
-        >
-          Trouver l’opérateur de mon territoire
-        </h3>
-        <p
-          className="w-lg-50 fst-italic"
-        >
-          Sélectionner votre département sur la carte pour obtenir les coordonnées de l’opérateur sur votre territoire.
-        </p>
-        <div
-          className="row"
-        >
           <div
-            className="col-lg-8"
+            class="row"
           >
-            <div>
-              <svg
-                height="544px"
-                style={
-                  {
-                    "maxWidth": "100%",
-                  }
-                }
-                viewBox="0 0 578 544"
-                width="578px"
-              >
-                <g
-                  fill="none"
-                  fillRule="evenodd"
-                  id="Page-1"
-                  stroke="none"
-                  strokeWidth="1"
+            <div
+              class="col-lg-8"
+            >
+              <div>
+                <svg
+                  height="544px"
+                  style="max-width: 100%;"
+                  viewBox="0 0 578 544"
+                  width="578px"
                 >
                   <g
-                    id="par-commune"
+                    fill="none"
+                    fill-rule="evenodd"
+                    id="Page-1"
+                    stroke="none"
+                    stroke-width="1"
                   >
                     <g
-                      id="legende"
+                      id="par-commune"
                     >
-                      <polyline
-                        id="sous-cadre_Corse"
-                        points="512.722 540.993 512.722 465.565 547.781 428.317 577.576 428.317"
-                        stroke="#333333"
-                      />
-                      <polyline
-                        id="sous-cadre_DOM_TOM"
-                        points="0.974 490.199 298.678 490.199 298.678 543.898"
-                        stroke="#333333"
-                        strokeWidth="0.9638"
-                      />
-                      <path
-                        d="M0.27,80.696 C79.696,80.696 79.696,80.696 79.696,80.696 L79.696,0.416"
-                        id="sous-cadre_Île-de-France"
-                        stroke="#333333"
-                      />
-                      <text
-                        fill="#000000"
-                        fontSize="9"
-                        fontWeight="normal"
-                        id="Guadeloupe"
+                      <g
+                        id="legende"
                       >
-                        <tspan
-                          x="1.124"
-                          y="538.123"
+                        <polyline
+                          id="sous-cadre_Corse"
+                          points="512.722 540.993 512.722 465.565 547.781 428.317 577.576 428.317"
+                          stroke="#333333"
+                        />
+                        <polyline
+                          id="sous-cadre_DOM_TOM"
+                          points="0.974 490.199 298.678 490.199 298.678 543.898"
+                          stroke="#333333"
+                          stroke-width="0.9638"
+                        />
+                        <path
+                          d="M0.27,80.696 C79.696,80.696 79.696,80.696 79.696,80.696 L79.696,0.416"
+                          id="sous-cadre_Île-de-France"
+                          stroke="#333333"
+                        />
+                        <text
+                          fill="#000000"
+                          font-size="9"
+                          font-weight="normal"
+                          id="Guadeloupe"
                         >
-                          Guadeloupe
-                        </tspan>
-                      </text>
-                      <text
-                        fill="#000000"
-                        fontSize="9"
-                        fontWeight="normal"
-                        id="Martinique"
-                      >
-                        <tspan
-                          x="65.7607"
-                          y="537.9072"
+                          <tspan
+                            x="1.124"
+                            y="538.123"
+                          >
+                            Guadeloupe
+                          </tspan>
+                        </text>
+                        <text
+                          fill="#000000"
+                          font-size="9"
+                          font-weight="normal"
+                          id="Martinique"
                         >
-                          Martinique
-                        </tspan>
-                      </text>
-                      <text
-                        fill="#000000"
-                        fontSize="9"
-                        fontWeight="normal"
-                        id="Guyane"
-                      >
-                        <tspan
-                          x="129.8804"
-                          y="537.9648"
+                          <tspan
+                            x="65.7607"
+                            y="537.9072"
+                          >
+                            Martinique
+                          </tspan>
+                        </text>
+                        <text
+                          fill="#000000"
+                          font-size="9"
+                          font-weight="normal"
+                          id="Guyane"
                         >
-                          Guyane
-                        </tspan>
-                      </text>
-                      <text
-                        fill="#000000"
-                        fontSize="9"
-                        fontWeight="normal"
-                        id="La-Réunion"
-                      >
-                        <tspan
-                          x="182.8291"
-                          y="537.8789"
+                          <tspan
+                            x="129.8804"
+                            y="537.9648"
+                          >
+                            Guyane
+                          </tspan>
+                        </text>
+                        <text
+                          fill="#000000"
+                          font-size="9"
+                          font-weight="normal"
+                          id="La-Réunion"
                         >
-                          La Réunion
-                        </tspan>
-                      </text>
-                      <text
-                        fill="#000000"
-                        fontSize="9"
-                        fontWeight="normal"
-                        id="Mayotte"
-                      >
-                        <tspan
-                          x="250.6118"
-                          y="537.8457"
+                          <tspan
+                            x="182.8291"
+                            y="537.8789"
+                          >
+                            La Réunion
+                          </tspan>
+                        </text>
+                        <text
+                          fill="#000000"
+                          font-size="9"
+                          font-weight="normal"
+                          id="Mayotte"
                         >
-                          Mayotte
-                        </tspan>
-                      </text>
-                      <text
-                        fill="#000000"
-                        fontSize="7"
-                        fontWeight="normal"
-                        id="Paris et proche banlieue"
-                      >
-                        <tspan
-                          x="7.1025"
-                          y="74.7178"
+                          <tspan
+                            x="250.6118"
+                            y="537.8457"
+                          >
+                            Mayotte
+                          </tspan>
+                        </text>
+                        <text
+                          fill="#000000"
+                          font-size="7"
+                          font-weight="normal"
+                          id="Paris et proche banlieue"
                         >
-                          Paris petit couronne
-                        </tspan>
-                      </text>
-                    </g>
-                    <g
-                      fill="#e3e3fe"
-                      id="carte"
-                      stroke="#ffffff"
-                      strokeWidth="0.4"
-                      transform="translate(12.000000, 2.000000)"
-                    >
-                      <path
-                        className="dep"
-                        d="M194.995,496.96 L192.664,497.005 L191.817,497.42 L190.852,498.163 L190.674,498.326 L190.006,498.326 L188.595,498.86 L187.987,499.39 L186.042,499.672 L185.864,500.696 L185.329,502.834 C185.329,502.834 184.585,503.331 184.364,503.413 C184.143,503.495 182.909,504.155 182.909,504.155 L182.686,506.426 L183.22,507.78 L184.675,509.503 L185.373,510.29 L185.937,510.171 L185.596,510.334 L185.64,513.423 L187.095,515.235 L188.595,516.631 L191.238,518.193 L191.416,518.089 L191.208,518.237 L194.341,520.123 L196.761,521 L199.359,521.445 L201.438,522.186 L202.759,522.439 C202.759,522.439 204.796,522.024 205.061,522.024 C205.326,522.024 207.436,521.608 207.436,521.608 L209.604,520.91 L211.059,519.589 L210.925,517.243 L211.193,515.772 L211.772,514.941 L212.737,513.664 L213.227,512.06 L213.093,510.498 L212.069,509.919 L210.747,509.315 L210.139,509.271 L209.159,507.875 C208.938,507.71 207.747,506.388 207.659,506.185 C207.571,505.981 206.783,504.207 206.783,504.207 L206.516,501.445 L205.016,500.005 L203.249,499.026 C203.249,499.026 201.836,498.207 201.571,498.166 C201.306,498.125 198.971,497.631 198.795,497.631 C198.618,497.631 196.894,497.753 196.85,497.794 L196.627,497.705 L194.995,496.96 Z"
-                        id="dpt-974"
-                        onClick={[Function]}
-                      />
-                      <path
-                        className="dep"
-                        d="M128.604,494.792 C128.527,494.797 128.47,494.82 128.443,494.846 L126.962,496.719 L125.677,498.2 L124.196,499.679 L124.41,503.64 L124.303,507.298 L125.588,509.082 L126.855,511.349 L127.586,512.745 L126.855,513.638 L125.999,516.011 L126.106,519.282 L125.053,521.156 L123.358,522.548 L123.876,523.137 L125.161,523.922 L126.321,524.618 L128.016,524.118 L129.818,523.026 L133.529,522.935 L134.921,523.916 L136.402,524.023 L137.883,524.326 L140.007,522.631 L142.452,518.385 L144.254,514.727 L146.056,512.05 L147.966,509.587 L149.019,507.695 L148.18,506.012 L147.538,503.639 L146.164,503.139 L144.594,502.074 L143.291,500.879 L141.596,499.79 L140.436,499.394 L137.046,497.025 L134.816,496.218 L132.692,495.932 C132.692,495.932 131.741,495.541 131.211,495.343 C130.746,495.172 129.14,494.757 128.604,494.792 Z"
-                        id="dpt-973"
-                        onClick={[Function]}
-                      />
-                      <path
-                        className="dep"
-                        d="M74.279,495.505 C74.279,495.505 70.667,495.593 70.225,495.757 C69.784,495.922 68.013,497.153 68.013,497.153 L67.746,497.222 L66.692,498.795 L67.048,500.845 L70.137,503.889 L69.602,504.72 L69.602,506.368 L70.923,508.179 L75.17,511.965 L78.957,511.965 L79.313,511.965 L80.367,511.876 L80.545,511.876 L80.367,512.618 L80.367,513.197 L81.614,513.524 L82.134,513.846 C82.134,513.846 81.96,515.247 82.402,515.329 L81.08,515.404 L79.224,514.84 L77.992,514.587 L76.403,515.24 L75.512,516.307 L75.081,517.536 L75.422,518.783 L76.313,520.014 L77.456,520.663 C77.456,520.663 78.603,520.34 79.045,520.174 C79.486,520.012 79.847,519.273 79.847,519.273 C79.847,519.273 81.159,519.192 81.778,519.11 C82.396,519.027 83.025,519.852 83.025,519.852 L85.935,520.248 L87.257,520.991 L88.044,520.917 L88.044,520.086 L88.757,519.69 L89.47,520.086 L89.114,521.08 L88.312,521.822 L88.668,523.292 L89.722,523.871 L90.969,523.798 L92.201,522.804 L92.557,521.496 L93.789,520.175 L92.987,518.529 L92.467,517.044 L91.843,515.069 L91.219,513.673 C91.219,513.673 89.719,512.194 89.719,511.861 C89.719,511.528 88.308,510.792 88.308,510.792 L88.13,509.476 C88.13,509.476 88.49,509.077 88.932,508.912 C89.373,508.748 88.665,508.008 88.665,508.008 L87.789,508.17 L86.453,508.496 L86.111,508.081 L85.576,507.502 L85.665,506.76 L86.63,506.943 L87.432,506.037 L86.288,505.132 L85.397,504.879 L85.129,504.392 L85.129,503.816 L86.109,503.4 L86.807,503.976 L88.039,504.464 L88.663,503.722 L88.663,502.91 L89.197,502.257 L88.752,501.752 L87.787,501.354 L87.163,501.916 L84.698,502.169 L83.896,502.748 L82.842,502.421 L81.61,500.446 L78.774,497.634 L77.185,496.986 L74.279,495.505 Z"
-                        id="dpt-972"
-                        onClick={[Function]}
-                      />
-                      <path
-                        className="dep"
-                        d="M18.939,497.65 L17.439,498.004 L16.058,499.222 L16.118,501.953 L17.187,502.132 L17.247,503.824 L16.193,504.636 L16,505.979 L16,506.216 L15.065,507.196 L15.005,507.374 L12.941,507.256 L12.689,506.261 L11.189,505.405 L8.516,504.009 L5.576,504.009 L4.21,506.1 L4.27,509.119 L4.641,510.348 L4.701,510.576 L4.894,512.907 L5.77,517.214 L6.646,519.485 C6.646,519.485 7.264,520.07 7.389,520.36 C7.514,520.651 8.205,521.58 8.205,521.58 L9.571,521.758 L9.957,521.046 L10.016,521.12 L11.382,521.12 L13.446,519.367 L14.753,517.569 L14.693,513.381 L13.936,511.168 L14.188,509.356 L15.614,509.079 L15.629,509.079 L16.06,509.6 L17.248,509.882 L18.184,510.236 L18.273,510.191 L18.377,510.535 L20.189,510.639 L23.307,510.06 L25.059,508.785 L28.118,508.67 L30.731,507.794 L29.112,506.872 L28.919,505.994 L26.855,504.658 L22.935,504.596 L21.747,502.562 L21.747,500.291 L20.93,498.539 L18.939,497.65 Z"
-                        id="dpt-971"
-                        onClick={[Function]}
-                      />
-                      <path
-                        className="dep"
-                        d="M260.945,522.599 C260.69,522.599 260.492,522.621 260.369,522.872 C260.22,523.178 259.939,522.855 259.765,522.802 C259.431,522.698 259.183,522.864 259.047,523.172 C258.992,523.298 259.024,523.409 258.987,523.535 C258.938,523.706 258.761,523.668 258.753,523.508 C258.725,522.944 258.789,522.34 258.128,522.175 C257.439,522.004 257.158,522.327 257.295,522.986 C257.318,523.092 257.34,523.215 257.326,523.329 C257.234,523.328 257.136,523.348 257.077,523.426 C256.978,523.559 257.013,523.748 256.902,523.877 C256.789,524.008 256.457,524.176 256.284,524.187 C255.967,524.208 255.984,523.686 255.852,523.499 C255.724,523.311 255.389,523.197 255.189,523.35 C255.072,523.441 255.117,523.702 254.904,523.621 C254.796,523.392 254.821,523.059 254.744,522.809 C254.666,522.554 254.294,522.454 254.048,522.454 C253.778,522.454 253.588,523.164 253.267,523.342 C253.184,523.397 253.096,522.843 253.222,522.728 C253.47,522.502 253.339,522.352 253.36,521.999 C253.382,521.639 253.737,520.585 252.96,520.798 C252.745,520.858 252.708,521.089 252.499,521.152 C252.268,521.222 251.951,521.311 251.715,521.214 C251.517,521.132 251.589,520.887 251.279,520.93 C250.939,520.978 250.934,520.808 251.208,520.652 C251.429,520.522 251.646,520.41 251.896,520.346 C252.197,520.272 252.275,520.034 252.489,519.839 C252.821,519.539 252.938,518.827 252.781,518.411 C252.713,518.226 252.665,517.975 252.436,517.95 C252.274,517.929 251.697,518.539 251.697,518.012 C251.697,517.672 251.623,517.71 251.378,517.533 C251.152,517.367 251.082,517.061 251.001,516.808 C250.932,516.593 250.959,516.246 250.756,516.108 C250.595,516.004 250.26,515.999 250.318,515.722 C250.662,515.678 251.047,515.618 251.394,515.623 C251.533,515.626 251.652,515.704 251.791,515.715 C251.938,515.725 252.052,515.658 252.191,515.633 C252.328,515.606 252.658,515.834 252.716,515.946 C252.787,516.089 252.734,516.258 252.747,516.402 C252.767,516.623 252.819,516.826 252.83,517.048 C252.844,517.337 253.067,517.471 253.218,517.692 C253.399,517.96 253.68,517.921 253.941,518.045 C254.21,518.174 254.443,518.281 254.732,518.365 C255.057,518.462 255.285,518.733 255.635,518.761 C255.829,518.775 256.164,518.704 256.309,518.561 C256.445,518.423 256.769,518.112 256.766,517.957 C256.763,517.816 256.777,517.678 256.762,517.539 C256.808,517.435 256.913,517.531 256.886,517.359 C256.836,517.042 256.506,516.853 256.41,516.558 C256.378,516.46 256.44,516.353 256.319,516.291 C256.214,516.232 256.104,516.251 256.078,516.1 C256.021,515.769 256.086,515.752 255.816,515.556 C255.607,515.406 255.671,515.118 255.524,514.925 C255.449,514.828 255.334,514.85 255.239,514.787 C255.075,514.677 254.951,514.516 254.797,514.394 C254.364,514.053 253.748,513.814 253.638,513.205 C253.597,512.975 253.584,512.734 253.277,512.733 C252.984,512.732 252.639,512.539 252.47,512.296 C252.377,512.165 252.078,512.047 252.16,511.832 C252.199,511.728 252.364,511.747 252.442,511.696 C252.559,511.623 252.557,511.54 252.602,511.423 C252.779,510.96 253.902,511.158 253.942,510.902 C253.979,510.666 253.769,510.645 253.592,510.616 C253.347,510.571 253.165,510.412 252.897,510.386 C252.603,510.358 252.754,510.03 252.859,509.872 C253.053,509.587 253.054,509.226 253.054,508.893 C253.054,508.395 252.323,508.084 252.637,507.478 C252.778,507.207 253.105,507.426 253.258,507.224 C253.571,506.809 252.785,506.978 252.648,506.964 C252.391,506.943 252.3,506.599 252.324,506.389 C252.352,506.143 252.568,506.046 252.685,505.844 C252.763,505.71 252.952,505.274 252.894,505.125 C252.784,504.844 252.666,504.699 252.4,504.91 C251.881,505.32 251.557,504.389 251.08,504.64 C250.835,504.773 250.586,504.72 250.455,504.452 C250.388,504.306 250.281,504.336 250.172,504.25 C250.072,504.173 249.978,504.034 249.889,503.938 C249.726,503.769 249.556,503.613 249.312,503.586 C249.108,503.566 248.807,503.863 248.627,503.774 C248.52,503.717 248.493,503.565 248.412,503.488 C248.305,503.383 248.167,503.378 248.038,503.319 C247.701,503.17 248.192,502.774 248.283,502.671 C248.562,502.344 248.974,502.007 249.121,501.634 C249.383,500.971 248.184,501.279 247.933,501.125 C247.712,500.992 248.511,500.375 248.558,500.171 C248.613,499.934 248.483,499.669 248.6,499.442 C248.742,499.171 248.86,499.307 249.092,499.363 C249.332,499.417 249.678,499.432 249.804,499.185 C249.873,499.05 250.065,498.706 250.188,498.623 C250.338,498.518 250.563,498.237 250.374,498.048 C250.08,497.754 250.228,497.808 250.602,497.757 C250.769,497.736 251.15,497.774 251.176,497.543 C251.198,497.352 251.176,496.891 251.341,496.761 C251.521,496.619 251.654,496.454 251.834,496.319 C251.917,496.257 252.04,496.206 252.096,496.11 C252.179,495.968 252.028,495.756 252.27,495.727 C252.528,495.703 252.544,495.812 252.741,495.558 C252.815,495.464 253.264,494.999 253.247,495.37 C253.239,495.552 252.788,495.699 253.033,495.884 C253.299,496.083 252.979,496.115 252.831,496.155 C252.407,496.259 251.415,496.634 252.173,497.051 C252.409,497.18 252.657,497.239 252.912,497.29 C253.33,497.377 252.602,497.639 253.078,497.728 C253.229,497.757 253.274,497.72 253.357,497.845 C253.398,497.907 253.456,498.046 253.52,498.085 C253.761,498.231 253.666,498.439 253.788,498.664 C253.896,498.864 254.206,499.017 254.399,499.129 C254.546,499.216 254.705,499.297 254.881,499.297 C255.03,499.297 255.246,499.245 255.333,499.413 C255.42,499.582 254.568,499.854 254.84,500.285 C254.982,500.508 255.263,500.62 255.369,500.88 C255.457,501.096 255.31,501.55 255.632,501.509 C255.752,501.493 255.905,501.424 256.019,501.505 C256.112,501.569 256.125,501.63 256.257,501.636 C256.568,501.651 256.567,501.44 256.832,501.72 C257.424,502.349 257.74,501.389 258.19,501.215 C258.481,501.104 258.51,501.156 258.696,501.365 C258.805,501.487 258.975,501.803 259.189,501.716 C259.473,501.592 259.687,501.758 259.94,501.709 C260.236,501.647 260.348,501.688 260.598,501.849 C260.782,501.967 261.111,501.812 261.328,501.913 C261.418,501.955 261.57,501.951 261.634,502.04 C261.676,502.099 261.625,502.181 261.751,502.18 C261.908,502.179 261.943,501.963 262.027,502.228 C262.057,502.323 262.123,502.338 262.062,502.418 C261.978,502.526 262.231,502.71 262.283,502.779 C262.452,503.004 262.746,502.99 263.006,503.008 C263.211,503.029 263.412,503.321 263.504,503.487 C263.582,503.623 263.696,503.616 263.783,503.717 C263.904,503.864 264.092,504.071 264.156,504.252 C264.323,504.721 263.3,505.206 263.693,505.781 C263.836,505.99 264.014,506.073 264.039,506.364 C264.075,506.784 263.664,506.426 263.501,506.524 C263.145,506.736 262.42,506.991 262.343,507.457 C262.266,507.916 262.044,507.881 261.755,508.15 C261.587,508.301 261.172,508.495 261.176,508.778 C261.18,509.12 261.162,509.197 260.873,509.398 C260.629,509.567 260.447,509.548 260.33,509.846 C260.286,509.956 260.368,510.024 260.435,510.088 C260.57,510.232 260.432,510.24 260.397,510.377 C260.326,510.648 260.194,510.912 260.376,511.18 C260.457,511.299 260.474,511.395 260.519,511.527 C260.553,511.626 260.473,511.718 260.545,511.8 C260.619,511.885 260.695,511.999 260.782,512.071 C260.865,512.135 261.064,512.113 261.114,512.214 C261.262,512.514 261.116,512.645 261.521,512.7 C261.663,512.721 262.181,512.929 261.805,512.982 C261.718,513.261 261.921,513.628 262.228,513.628 C262.321,513.629 262.423,513.581 262.515,513.614 C262.654,513.664 262.385,513.832 262.37,513.873 C262.263,514.171 262.366,514.535 262.112,514.769 C261.885,514.978 261.554,515.118 261.286,515.273 C261.078,515.392 260.812,515.627 260.687,515.838 C260.555,516.065 260.708,516.687 260.729,516.942 C260.739,517.066 261.212,517.612 260.661,517.38 C260.192,517.192 259.969,517.355 259.771,517.737 C259.647,517.979 259.322,517.936 259.108,518.113 C258.919,518.267 259.018,518.779 259.114,518.967 C259.294,519.321 259.182,519.374 258.797,519.358 C258.424,519.337 258.327,519.901 258.434,520.17 C258.56,520.487 258.902,520.566 258.928,520.941 C258.95,521.28 259.283,521.417 259.561,521.544 C259.742,521.626 259.915,521.683 260.077,521.802 C260.182,521.882 260.27,522.024 260.409,522.038 C260.57,522.059 260.752,521.989 260.893,522.099 C261.127,522.278 260.955,522.349 260.991,522.578 L260.945,522.599 Z"
-                        id="dpt-976"
-                        onClick={[Function]}
-                      />
-                      <path
-                        className="dep"
-                        d="M268.594,508.362 C268.566,508.424 268.447,508.404 268.391,508.422 C268.237,508.47 268.098,508.485 267.987,508.613 C267.941,508.667 267.927,508.719 267.905,508.787 C267.867,508.891 267.813,508.996 267.767,509.098 C267.71,509.222 267.756,509.404 267.636,509.494 C267.579,509.539 267.516,509.536 267.443,509.544 C267.332,509.557 267.324,509.569 267.252,509.483 C267.192,509.414 267.162,509.386 267.155,509.295 C267.149,509.209 267.155,509.119 267.155,509.031 C267.155,508.948 267.164,508.901 267.099,508.843 C267.037,508.789 266.962,508.752 266.896,508.701 C266.836,508.655 266.757,508.603 266.712,508.543 C266.659,508.473 266.642,508.376 266.602,508.3 C266.502,508.113 266.456,507.955 266.261,507.875 C266.177,507.84 266.119,507.773 266.039,507.732 C265.93,507.67 265.829,507.643 265.733,507.564 C265.567,507.423 265.4,507.286 265.433,507.043 C265.603,506.961 265.666,507.108 265.799,507.176 C265.925,507.24 266.045,507.306 266.159,507.384 C266.304,507.488 266.44,507.508 266.464,507.304 C266.473,507.225 266.45,507.158 266.443,507.08 C266.44,507.042 266.454,506.993 266.444,506.957 C266.435,506.922 266.402,506.902 266.387,506.873 C266.362,506.823 266.335,506.728 266.341,506.674 C266.352,506.583 266.46,506.578 266.525,506.528 C266.587,506.479 266.623,506.406 266.671,506.349 C266.725,506.287 266.8,506.236 266.87,506.192 C266.942,506.147 267.025,506.142 267.092,506.087 C267.164,506.027 267.212,505.983 267.28,505.902 C267.322,505.854 267.38,505.817 267.422,505.763 C267.485,505.692 267.516,505.604 267.565,505.524 C267.61,505.449 267.689,505.328 267.767,505.279 C267.897,505.198 267.955,505.318 268.011,505.412 C268.038,505.458 268.076,505.499 268.103,505.543 C268.162,505.647 268.172,505.688 268.291,505.681 C268.438,505.679 268.512,505.752 268.539,505.884 C268.565,506.016 268.56,506.138 268.575,506.275 C268.582,506.334 268.61,506.379 268.641,506.428 C268.689,506.507 268.685,506.545 268.696,506.636 C268.709,506.745 268.733,506.872 268.794,506.963 C268.834,507.025 268.894,507.031 268.936,507.086 C268.975,507.137 268.967,507.216 268.958,507.281 C268.739,507.274 268.636,507.499 268.637,507.689 C268.637,507.917 268.729,508.117 268.694,508.355 C268.658,508.373 268.618,508.383 268.576,508.376 L268.594,508.362 Z"
-                        id="dpt-976"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-95"
-                        onClick={[Function]}
-                        points="286.814 102.337 285.296 104.213 284.15 108.389 282.879 110.537 287.483 112.595 290.993 111.96 295.347 114.744 300.007 114.955 303.305 116.953 304.158 119.737 304.128 119.798 304.491 119.737 307.88 117.922 312.964 117.589 315.748 116.318 317.533 115.047 318.108 111.325 316.867 110.084 312.721 107.633 308.728 105.545 306.669 106.483 304.399 107.058 302.88 105.908 299.859 104.032 297.408 105.908 293.804 106.302 288.695 105.908 287.546 104.032"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-94"
-                        onClick={[Function]}
-                        points="36.085 31.82 33.496 33.911 30.907 34.309 30.708 35.703 30.21 36.997 31.504 36.997 32.201 36.399 31.902 35.403 35.885 35.204 36.881 35.602 36.881 37.693 35.885 39.784 30.11 38.987 29.214 38.191 26.526 40.083 23.937 40.78 20.253 40.581 19.158 44.464 20.154 46.157 18.561 50.837 20.154 53.824 22.942 52.43 29.613 56.114 41.163 56.114 48.034 59.301 47.934 58.604 52.813 46.357 52.813 40.781 49.726 39.984 48.93 38.49 47.636 37.893 44.848 34.806 39.969 32.018"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-93"
-                        onClick={[Function]}
-                        points="49.926 4.836 44.051 9.018 34.891 13.2 18.163 14.295 18.661 16.585 20.055 16.884 21.349 18.875 20.055 21.663 18.363 21.962 19.558 24.85 27.623 24.75 30.212 28.733 30.71 34.309 33.498 33.911 36.087 31.82 39.97 32.019 44.849 34.807 47.637 37.894 48.931 38.491 49.727 39.985 52.814 40.782 52.814 31.721 49.13 9.814"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-92"
-                        onClick={[Function]}
-                        points="18.163 14.295 7.01 20.27 5.815 20.469 0.338 32.418 3.823 41.877 9.4 48.15 9.4 48.847 18.063 54.921 20.154 53.826 18.561 50.839 20.154 46.159 19.158 44.466 20.253 40.583 20.054 40.583 13.98 37.496 9.001 36.102 8.304 33.912 8.204 32.02 11.191 28.635 14.477 28.436 15.971 26.445 19.556 24.852 18.361 21.964 20.053 21.665 21.347 18.877 20.053 16.886 18.659 16.587"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-91"
-                        onClick={[Function]}
-                        points="304.881 128.21 303.186 128.967 301.34 129.693 300.977 131.751 298.198 133.052 297.835 135.079 299.137 137.318 297.261 139.89 294.507 139.89 295.596 141.555 294.295 143.038 293.841 146.034 294.749 146.216 295.112 148.667 295.505 149.242 295.9 154.326 301.957 153.782 304.408 151.512 306.496 153.206 311.58 153.569 312.306 154.658 312.306 150.845 316.543 148.061 315.272 146.396 315.819 141.373 316.548 140.284 315.64 135.261 317.304 133.96 316.971 131.6 314.883 130.632 311.373 130.632 309.346 129.512 307.866 130.268"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-90"
-                        onClick={[Function]}
-                        points="475.494 176.265 476.065 177.413 479.091 177.595 482.511 180.258 483.055 181.559 482.873 183.829 481.936 185.554 482.298 187.824 484.96 187.43 486.473 193.542 483.964 193.937 483.239 194.784 471.587 189.519 472.616 188.46 473.073 185.434 473.073 183.558 472.257 180.683 472.257 178.262 473.739 177.173"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-89"
-                        onClick={[Function]}
-                        points="347.7 148.485 346.005 149.786 338.621 149.423 335.232 151.118 333.9 153.962 335.414 155.657 333.143 158.32 331.417 160.378 334.837 163.616 335.775 166.642 338.254 169.275 338.254 172.694 333.322 176.84 335.011 178.747 334.653 181.561 331.99 183.468 328.208 183.468 328.782 185.556 331.233 188.945 331.803 191.971 332.378 194.059 331.258 194.392 333.654 194.936 335.44 194.936 336.378 193.453 337.589 193.453 338.95 194.663 338.678 196.176 339.919 196.993 341.674 196.993 344.125 198.627 345.215 198.083 346.304 199.021 347.394 198.749 349.27 197.539 351.055 198.084 352.266 197.812 352.266 194.423 352.931 194.544 353.358 196.299 355.539 197.661 355.539 199.719 358.656 199.84 362.741 203.653 365.308 203.774 365.162 202.564 366.252 200.93 367.22 202.14 366.408 203.502 366.802 204.743 368.284 203.775 370.064 203.775 369.918 206.498 371.553 207.588 372.793 207.043 375.814 204.985 375.632 204.591 373.847 203.502 373.726 201.595 375.632 200.657 376.448 199.568 375.904 198.63 375.904 196.451 377.383 194.272 379.562 189.642 379.958 187.614 381.318 187.07 381.465 186.676 380.77 186.132 380.77 184.498 382.954 182.864 383.498 180.141 382.56 178.537 381.047 178.537 380.652 178.113 380.652 175.813 382.554 174.451 382.408 173.089 382.136 171.728 381.167 173.816 379.836 173.634 378.716 171.546 374.934 173.452 367.372 173.058 366.434 170.97 364.346 168.156 363.985 164.737 360.962 161.135 359.056 162.467 355.636 159.835 356.211 154.721 351.309 149.607 349.039 149.607"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-88"
-                        onClick={[Function]}
-                        points="482.812 137.439 480.874 137.863 477.908 138.983 476.426 140.829 474.762 141.949 471.584 143.431 470.676 143.25 468.442 142.675 466.231 142.493 465.472 140.072 463.993 140.647 463.806 143.25 462.691 142.13 460.665 143.613 458.638 144.34 456.217 144.158 454.552 144.733 452.706 143.613 451.586 144.521 448.803 144.521 447.501 146.942 441.389 147.305 440.087 145.641 438.06 145.278 438.247 144.34 439.549 143.432 438.429 143.039 438.247 140.073 435.463 139.891 433.829 140.406 432.679 141.949 429.714 142.857 429.714 141.768 428.8 141.768 428.8 143.039 425.078 143.795 425.078 145.46 421.749 145.883 420.478 147.154 421.783 149.03 424.804 149.241 427.467 152.812 429.738 152.812 430.282 155.293 432.761 155.656 433.306 157.351 431.617 158.501 430.497 163.615 435.793 166.248 435.793 170.212 437.851 169.456 439.58 170.817 440.881 170.03 440.153 168.91 441.091 168.335 442.392 169.848 444.299 168.516 444.873 166.64 448.443 166.065 449.412 166.822 449.225 168.91 451.676 170.786 453.195 170.605 454.884 169.273 458.848 169.273 461.698 172.481 462.636 172.481 464.151 171.543 464.365 170.423 465.879 169.666 467.573 170.786 469.263 172.693 475.225 175.84 477.585 173.813 477.766 166.429 481.004 163.615 482.88 159.258 482.306 156.413 484.577 151.874 486.665 147.153 483.061 146.215 482.305 141.101 483.061 137.682"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-87"
-                        onClick={[Function]}
-                        points="271.291 258.363 269.597 260.057 264.846 259.694 264.301 259.573 260.7 260.239 258.612 261.964 258.612 264.234 254.466 264.416 252.015 267.26 250.502 268.38 251.803 269.893 251.621 275.007 250.683 276.702 252.196 278.396 254.829 278.607 255.404 281.241 255.585 282.935 252.196 283.691 250.502 284.265 250.865 288.986 248.595 290.501 246.689 291.075 245.751 293.739 244.238 293.921 243.602 296.796 248.02 296.945 248.988 298.823 248.201 300.911 249.926 303.182 251.227 302.819 252.559 300.917 258.611 301.487 259.579 305.27 263.725 305.843 264.663 307.145 261.818 308.477 263.15 309.415 267.145 309.99 267.447 310.746 268.507 308.6 270.777 309.451 273.258 306.362 274.68 306.546 275.921 304.485 279.613 304.912 281.065 303.459 282.917 303.459 284.369 300.797 286.603 300.584 288.056 298.134 290.118 298.738 291.568 298.738 292.539 297.075 291.568 296.471 291.141 294.022 292.594 294.022 292.594 292.996 290.115 291.33 287.452 290.121 287.846 287.642 287.034 287.642 286.005 289.094 282.707 289.279 280.859 289.094 280.859 287.217 283.13 285.368 281.677 283.522 278.197 284.549 278.802 276.738 277.168 275.075 275.504 270.961 273.053 270.356 272.629 268.086 274.899 263.577 274.838 260.793 274.324 261.398"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-86"
-                        onClick={[Function]}
-                        points="222.117 214.666 218.516 218.448 217.608 220.022 217.911 224.682 219.545 224.47 219.756 226.528 220.392 229.826 221.421 232.096 220.18 233.518 220.785 234.547 219.968 236 219.968 236.605 221.421 238.27 221.421 239.299 220.786 240.933 218.728 244.019 220.786 244.836 221.421 246.289 220.574 248.528 220.392 249.557 219.151 251.615 219.151 253.068 219.968 253.28 219.968 257.608 221.421 258.637 220.786 260.059 220.997 261.3 222.631 263.146 223.478 261.905 223.478 260.876 225.112 260.059 226.353 260.876 226.353 263.962 225.112 265.415 224.083 267.866 225.505 270.136 228.41 270.953 227.775 272.83 225.082 273.283 227.563 276.308 230.861 276.097 233.736 275.068 236.641 276.732 237.67 275.916 237.459 273.223 239.093 271.983 240.546 274.463 241.756 275.704 245.266 274.252 246.719 272.617 249.987 272.617 251.682 273.465 251.803 269.894 250.502 268.381 252.015 267.261 254.466 264.417 258.612 264.235 258.612 261.965 260.7 260.24 265.814 259.302 266.177 256.457 264.119 255.337 262.969 251.373 259.943 250.979 258.067 249.103 254.466 246.258 255.223 243.988 255.223 240.387 251.804 236.998 251.441 234.335 248.203 230.946 247.083 226.407 245.751 225.832 244.238 223.744 242.725 224.682 243.119 226.77 238.186 227.92 232.527 227.92 232.709 225.65 232.709 222.049 228.169 220.717 228.169 218.447 224.568 217.691 223.812 214.665"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-85"
-                        onClick={[Function]}
-                        points="173.487 218.418 172.398 220.446 169.281 220.446 170.522 221.717 169.584 224.834 166.77 225.772 165.681 224.985 166.165 221.868 165.378 220.143 163.653 220.143 162.412 221.535 163.017 225.923 164.439 227.95 163.017 229.524 160.384 229.04 156.481 228.102 155.392 225.137 152.88 224.834 149.611 223.412 148.824 221.536 145.253 219.206 139.625 226.469 139.443 231.008 145.283 236.667 145.101 238.362 146.796 238.362 150.397 249.165 154.18 251.041 157.962 254.824 162.32 254.824 164.014 258.607 168.19 258.607 170.066 261.451 174.242 263.539 174.424 260.876 175.483 261.875 181.263 258.365 183.926 258.183 185.046 261.209 188.647 259.696 191.673 261.966 194.124 260.816 196.212 260.241 197.15 259.121 199.782 257.427 197.906 255.52 196.393 256.67 196.211 255.157 197.543 252.676 196.211 250.406 197.331 248.893 196.756 243.597 194.88 240.783 196.212 239.058 193.186 235.669 194.306 233.218 189.767 229.435 189.767 227.165 187.891 224.502 188.254 224.351 185.682 222.172 180.84 222.172 179.266 221.234 177.087 220.931 174.575 218.571"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-84"
-                        onClick={[Function]}
-                        points="414.093 365.396 411.43 365.607 409.372 368.816 409.916 372.206 413.124 372.6 412.579 374.118 410.098 374.3 407.286 377.148 406.53 376.21 407.075 372.427 405.955 371.096 400.841 371.854 399.843 373.88 400.387 374.184 403.595 379.509 403.595 383.807 409.224 389.405 409.224 391.83 407.045 393.067 407.196 393.129 414.035 396.031 416.939 399.269 418.332 401.172 422.084 402.867 426.532 402.716 433.886 405.775 438.002 406.293 443.148 405.111 445.262 403.445 445.533 402.023 441.595 397.577 437.298 397.577 437.298 396.032 438.841 394.306 438.841 392.429 435.422 390.736 435.089 387.982 436.965 387.131 436.965 384.74 434.907 384.377 434.756 381.808 434.731 381.623 433.002 381.502 430.157 379.414 429.4 376.963 424.103 376.567 420.137 376.207 419.741 373.936 421.073 371.088 418.622 373.178 414.839 372.782 414.083 371.451 416.716 367.88"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-83"
-                        onClick={[Function]}
-                        points="481.634 395.232 478.759 395.353 477.403 396.745 472.257 396.562 467.809 399.795 464.752 397.737 459.94 399.281 459.091 401.006 455.672 403.578 449.498 399.463 444.505 401.101 444.264 402.433 444.356 402.371 447.444 404.432 443.331 407.186 441.637 410.604 443.699 412.297 443.512 415.901 446.783 418.991 445.905 419.681 442.148 419.499 442.148 420.861 443.842 421.708 443.842 422.223 442.298 423.619 443.176 424.642 444.537 424.642 445.895 426.004 446.081 427.032 444.352 428.057 442.995 429.602 442.808 433.357 443.328 434.047 446.718 435.566 447.656 439.343 449.744 439.739 451.647 438.407 455.04 436.319 460.911 436.892 460.724 438.407 458.822 439.345 463.362 439.558 462.242 438.412 461.846 435.961 464.297 434.267 467.142 435.205 468.291 435.568 469.229 436.714 470.561 435.776 470.923 433.296 472.438 431.994 476.405 431.994 477.551 430.266 480.183 431.026 483.209 429.719 483.209 424.786 479.245 424.968 482.266 423.092 483.784 421.004 484.178 417.982 489.657 417.223 492.714 413.803 490.596 411.622 490.596 410.412 489.571 409.385 490.929 408.203 490.596 406.298 488.358 405.449 487.177 405.449 485.118 403.39 484.756 399.786 482.546 398.759 480.307 398.61 479.46 396.55"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-82"
-                        onClick={[Function]}
-                        points="252.559 368.634 251.227 372.961 253.315 375.231 252.377 378.835 251.227 380.167 252.014 382.438 248.413 383.194 245.569 383.953 246.325 386.586 244.903 387.01 245.751 387.797 248.504 387.797 249.866 387.131 251.076 387.797 248.837 388.826 248.837 390.551 246.779 392.094 246.779 394.303 250.562 394.488 251.742 395.699 251.742 398.092 253.134 399.451 251.924 401.328 252.438 402.357 254.829 401.328 259.792 401.328 261.184 400.48 262.878 400.48 264.754 402.716 269.051 401.506 270.231 399.629 268.537 398.752 269.717 398.271 270.08 396.543 271.956 396.728 272.985 397.908 273.832 396.549 276.586 395.52 277.827 396.094 278.795 394.49 277.1 392.615 280.338 392.615 281.365 390.738 283.605 388.676 281.365 388.676 282.062 385.776 287.873 385.081 290.112 383.72 292.836 382.691 293.713 381.814 292.654 379.09 294.197 376.003 291.468 375.821 291.135 371.55 287.025 373.426 284.267 372.761 282.577 374.822 279.672 374.459 279.158 377.88 277.766 377.88 276.918 376 276.404 375.152 274.861 375.298 271.956 378.385 268.355 378.238 267.84 376 267.84 374.3 267.507 373.938 266.297 375.298 264.754 375.298 263.059 373.422 261.516 373.422 260.487 371.363 261.849 369.82 261.698 368.822 259.277 368.913 259.58 369.579 255.404 370.335"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-81"
-                        onClick={[Function]}
-                        points="301.582 380.436 298.312 380.623 296.099 382.832 295.408 381.289 293.865 382.166 293.714 381.804 292.837 382.685 290.113 383.71 287.874 385.067 282.062 385.762 281.367 388.666 283.607 388.666 281.367 390.725 280.339 392.602 277.101 392.602 278.796 394.477 277.828 396.081 278.131 396.202 278.978 398.745 281.036 401.165 281.55 401.499 281.701 403.891 283.427 406.643 284.788 408.188 284.788 410.063 283.427 410.583 284.455 412.126 288.903 414.002 289.751 415.212 291.99 417.941 294.557 418.632 296.619 418.273 296.619 420.694 296.557 421.931 297.677 421.785 297.406 423.116 301.158 423.116 304.637 424.206 304.908 420.726 306.512 420.726 312.382 421.788 318.011 421.788 322.282 420.456 323.372 416.977 320.434 414.287 321.221 411.625 322.825 409.229 325.488 411.08 332.448 408.686 333.537 406.54 329.997 404.269 328.454 403.909 327.425 405.267 325.367 405.784 322.096 404.092 318.677 399.645 318.677 397.768 316.8 394.319 316.987 392.776 315.441 388.84 312.539 387.479 310.477 383.876 304.824 382.848"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-80"
-                        onClick={[Function]}
-                        points="281.217 39.212 280.701 45.446 284.878 49.228 284.878 51.135 279.764 48.109 273.621 55.674 275.255 56.37 277.343 56.189 278.281 58.065 286.598 66.205 287.173 69.594 289.049 73.013 288.413 73.8 290.804 73.8 291.2 74.375 291.2 76.463 292.348 77.25 294.827 76.282 298.306 76.282 300.035 77.614 306.541 77.039 311.353 78.401 314.041 81.094 317.49 81.457 320.94 82.607 325.172 78.583 330.164 77.251 332.857 77.614 336.851 77.22 336.488 75.132 335.55 71.289 335.154 68.989 336.881 67.051 336.881 64.57 339.36 61.877 338.906 59.214 337.454 58.82 335.764 57.126 331.224 57.126 328.376 58.639 328.376 57.307 327.649 55.975 325.921 56.731 323.831 57.881 324.98 56.187 324.795 54.674 322.316 52.949 322.316 54.856 320.622 54.856 316.658 53.524 314.966 52.192 313.238 53.342 312.693 54.855 311.937 55.037 310.999 54.099 310.999 51.436 313.812 49.56 312.692 47.654 310.421 48.622 309.275 47.654 304.552 48.229 302.103 49.167 299.622 48.229 299.622 46.353 296.232 44.84 295.294 42.57 293.962 43.115 290.359 40.301 288.665 39.726 287.335 41.421 285.064 41.996 284.126 39.908"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-79"
-                        onClick={[Function]}
-                        points="215.308 218.267 210.194 218.448 205.473 219.386 200.359 219.779 200.359 222.412 197.726 224.137 191.855 222.805 187.891 224.499 189.767 227.162 189.767 229.432 194.306 233.215 193.186 235.666 196.212 239.055 194.88 240.78 196.756 243.594 197.331 248.89 196.211 250.403 197.543 252.673 196.211 255.154 196.393 256.667 197.906 255.517 199.782 257.424 197.15 259.118 196.212 260.238 194.124 260.813 191.673 261.963 191.491 261.812 191.582 264.596 193.64 266.835 193.64 268.076 196.727 270.346 200.631 270.558 203.294 274.038 207.622 273.644 211.132 276.095 213.795 277.33 214.218 279.392 215.701 280.814 217.486 279.816 217.093 278.788 218.515 277.124 218.515 275.701 220.996 275.064 224.295 273.429 227.775 272.825 228.41 270.948 225.505 270.131 224.083 267.861 225.112 265.41 226.353 263.957 226.353 260.871 225.112 260.054 223.478 260.871 223.478 261.9 222.631 263.141 220.997 261.295 220.786 260.054 221.421 258.632 219.968 257.603 219.968 253.275 219.151 253.063 219.151 251.61 220.392 249.552 220.574 248.523 221.421 246.284 220.786 244.831 218.728 244.014 220.786 240.928 221.421 239.294 221.421 238.265 219.968 236.6 219.968 236 220.785 234.547 220.18 233.518 221.421 232.096 220.392 229.826 219.756 226.528 219.545 224.47 217.911 224.682 217.608 220.022 217.215 220.718 215.883 219.598"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-78"
-                        onClick={[Function]}
-                        points="282.881 110.538 282.82 110.659 277.524 112.172 276.768 113.11 277.736 114.623 277.736 116.136 279.43 116.499 278.462 117.467 278.553 118.314 278.674 118.224 280.55 120.1 281.124 122.37 282.639 123.883 281.881 125.971 281.881 127.847 283.212 129.36 281.881 131.63 283.212 134.868 285.845 136.744 286.241 138.832 288.511 139.195 289.056 143.371 290.785 145.459 293.842 146.034 294.296 143.038 295.597 141.555 294.508 139.89 297.262 139.89 299.138 137.318 297.836 135.079 298.199 133.052 300.983 131.751 301.341 129.693 303.192 128.967 304.882 128.21 305.214 128.422 305.214 128.21 303.525 126.304 302.463 123.429 304.157 119.737 303.304 116.953 300.006 114.955 295.346 114.744 290.992 111.96 287.482 112.595"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-77"
-                        onClick={[Function]}
-                        points="318.104 111.438 320.466 109.9 322.542 111.229 323.492 111.958 325.186 111.776 326.336 110.263 328.968 111.776 332.206 110.444 334.082 111.019 335.958 109.506 337.108 108.931 339.197 110.447 339.772 114.623 344.856 119.525 346.55 120.1 347.519 122.37 350.604 123.083 350.151 123.702 350.363 124.822 348.85 125.79 348.456 128.423 349.97 129.361 350.726 132.206 349.788 133.9 350.362 135.232 353.176 135.05 353.179 136.561 350.546 137.681 350.364 139.951 349.033 141.676 348.276 145.459 347.833 148.417 346.005 149.786 338.621 149.423 335.232 151.118 333.9 153.962 335.414 155.657 331.418 160.378 326.729 162.938 326.337 161.528 324.248 161.346 323.674 162.859 321.797 163.222 316.684 163.04 314.595 164.372 313 162.833 315.928 160.767 315.745 157.563 313.475 156.413 312.294 154.658 312.294 150.845 316.533 148.061 315.26 146.396 315.833 141.417 316.521 140.333 315.624 135.261 317.29 133.96 316.925 131.388 318.406 127.688 318.422 123.188 317.288 116.56"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-76"
-                        onClick={[Function]}
-                        points="228.137 81.396 232.677 74.587 240.521 70.417 249.896 67.022 264.27 63.421 272.38 57.187 273.621 55.674 275.255 56.37 277.343 56.189 278.281 58.065 286.603 66.205 287.178 69.594 288.979 73 287.178 75.285 286.5 77.125 287.854 77.188 287.166 79 286.421 82.85 287.541 84.726 287.562 87.896 289.354 88 287.359 91.746 286.844 93.32 283.85 92.987 278.812 90.396 274.468 90.536 272.168 92.563 270.928 96.104 266.056 96.649 261.583 98.021 262.979 99.062 262.394 100.734 260.229 100.667 259.021 98.188 257.643 98.131 255.583 96.521 258.416 95.562 253.833 92.292 249.23 92.562 248.146 90.708 245.538 90.958 243.667 87.708 242.028 88.084 239.849 90.414 236.208 90.833 235.875 90.542 230.982 89.536 227.199 86.691"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-75"
-                        onClick={[Function]}
-                        points="27.622 24.751 19.557 24.851 15.972 26.444 14.478 28.435 11.192 28.634 8.205 32.019 8.305 33.911 9.002 36.101 13.981 37.495 20.055 40.582 23.938 40.781 26.527 40.084 29.215 38.192 30.111 38.988 35.886 39.785 36.882 37.694 36.882 35.603 35.886 35.205 31.903 35.404 32.202 36.4 31.505 36.998 30.211 36.998 30.709 35.704 30.908 34.31 30.709 34.31 30.211 28.734"
-                      />
-                      <path
-                        className="dep"
-                        d="M308.108648,130.182479 L307.530827,130.485068 L304.827665,128.589765 L304.827665,128.372277 L303.087443,126.414879 L302,123.463336 L303.709018,119.734825 L304.0819,119.67273 L307.562031,117.808318 L307.568375,117.934276 L312.52433,117.609864 L315.382574,116.304932 L317.215782,115 L316.967401,116.553312 L318.11694,123.389071 L318.11694,126.035656 C318.179187,126.09712 318.241698,126.158936 318.304473,126.221105 L318.304473,127.961014 L316.782052,131.782511 L316.813256,132 L314.669261,131.005543 L311.065252,131.005543 L308.983664,129.856005 L308.113709,130.290982 L308.108648,130.182479 Z"
-                        id="dpt-75-92-93-94"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-74"
-                        onClick={[Function]}
-                        points="471.347 253.884 467.019 254.64 462.843 258.029 461.724 256.335 459.636 256.516 457.729 260.692 457.946 262.387 460.004 264.081 456.222 266.562 453.771 268.832 449.595 268.832 447.689 270.345 445.842 270.95 444.814 272.827 442.968 271.798 442.544 277.124 443.57 279 443.631 281.027 445.205 282.267 445.205 287.621 448.927 288.225 450.349 290.917 453.652 291.311 454.256 290.1 455.92 290.1 458.795 293.188 459.823 294.217 463.122 293.579 463.934 291.945 464.75 288.646 466.597 287.193 468.049 282.896 469.897 281.657 471.348 282.051 471.744 283.291 470.716 284.532 472.562 286.803 475.653 286.803 477.53 289.889 477.101 290.917 478.952 289.678 480.405 288.042 481.676 288.193 481.767 284.894 488.213 282.23 488.969 280.355 488.575 276.179 484.429 271.851 483.098 272.607 483.098 270.88 483.098 268.066 479.496 266.341 479.309 264.828 481.401 262.558 481.401 259.926 477.979 256.325 477.796 253.874 471.351 253.874"
-                      />
-                      <path
-                        className="dep selectable"
-                        d="M443.143,280.635 L442.75,286.173 L441.509,287.201 L441.509,293.375 L439.03,293.799 L438.634,297.309 L436.364,298.944 L436.334,298.918 L436.576,299.98 L438.846,302.429 L438.846,304.092 L441.085,308.208 L445.836,309.233 L447.471,310.473 L448.111,309.836 L447.259,308.202 L448.499,305.51 L449.952,305.327 L452.403,308.596 L453.426,307.173 L454.879,307.173 L458.782,311.077 L459,313.74 L457.154,314.769 L456.301,318.667 L457.965,320.332 L457.965,321.968 L457.541,323.63 L458.782,322.394 L460.84,323.63 L461.93,325.112 L465.349,324.75 L466.469,325.869 L467.043,328.532 L470.434,328.136 L470.83,325.292 L472.524,324.534 L476.156,324.716 L476.094,324.597 L481.752,322.326 L483.84,323.658 L485.928,323.658 L486.115,321.387 L488.565,320.055 L489.503,318.936 L494.436,317.032 L495.011,313.823 L494.042,312.309 L496.705,307.77 L494.254,306.832 L493.497,304.169 L488.383,301.145 C488.383,301.145 488.694,295.346 488.202,294.305 C488.182,294.284 488.153,294.231 488.14,294.214 C488.135,294.208 488.119,294.19 488.115,294.184 C488.111,294.184 488.087,294.184 488.085,294.184 C488.085,294.178 488.084,294.16 488.085,294.159 C488.081,294.159 488.057,294.159 488.055,294.159 C488.052,294.158 488.033,294.159 488.029,294.159 C488.021,294.159 488.002,294.159 488,294.159 C487.243,294.347 484.429,294.555 484.429,294.555 L481.584,291.317 L481.675,288.202 L480.404,288.051 L478.953,289.687 L477.102,290.926 L477.529,289.898 L475.652,286.812 L472.563,286.812 L470.717,284.541 L471.745,283.3 L471.349,282.06 L469.896,281.666 L468.05,282.905 L466.598,287.203 L464.751,288.655 L463.935,291.955 L463.123,293.588 L459.824,294.226 L458.796,293.197 L455.921,290.111 L454.257,290.111 L453.653,291.32 L450.353,290.926 L448.931,288.234 L445.209,287.63 L445.209,282.276 L443.143,280.635 Z"
-                        fill="#313278"
-                        id="dpt-73"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-72"
-                        onClick={[Function]}
-                        points="235.371 143.189 230.257 143.37 225.143 148.091 222.48 147.94 218.939 149.09 217.85 150.966 217.366 155.021 217.699 157.502 214.885 159.862 214.098 161.405 214.734 162.827 213.947 164.703 214.25 165.49 211.133 165.793 210.679 167.185 212.071 170.635 211.92 171.573 210.679 172.662 208.016 172.813 207.683 173.751 208.318 174.689 208.318 180.317 207.713 181.739 209.407 183.131 209.407 185.007 212.221 185.158 219.575 187.337 227.533 192.179 230.105 193.178 231.376 190.636 235.159 193.299 237.247 193.299 236.097 189.516 238.397 191.029 239.698 189.123 245.175 187.61 244.237 185.34 245.569 183.646 248.413 182.526 251.046 179.106 251.046 175.505 252.953 175.505 253.709 172.873 253.891 168.909 252.015 167.184 253.528 164.552 255.767 161.707 253.134 159.831 250.683 159.437 248.02 155.473 247.263 155.473 247.082 157.349 246.9 156.048 242.936 156.048 241.03 153.203 237.822 152.053 236.884 145.244"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-71"
-                        onClick={[Function]}
-                        points="379.686 216.754 379.686 216.936 376.841 216.936 374.541 218.297 373.18 220.204 374.269 221.838 375.207 222.382 374.541 224.016 373.573 224.56 372.511 226.043 373.722 226.86 373.576 228.767 373.847 230.794 375.632 231.883 375.632 232.7 373.726 233.79 373.726 235 375.087 236.211 374.936 236.907 371.97 236.756 371.699 237.724 370.338 237.996 368.977 239.751 367.221 239.751 365.865 241.113 364.08 241.384 363.142 239.084 361.932 238.933 358.966 240.779 362.476 247.376 362.476 250.221 363.414 251.371 366.622 251.371 367.741 252.884 370.762 252.884 372.093 254.76 371.911 262.144 367.947 265.17 367.854 265.382 368.125 265.352 368.7 265.534 368.882 268.56 371.726 269.135 372.089 270.467 373.606 270.467 375.877 269.135 381.929 270.073 383.079 271.223 384.592 269.71 386.68 269.71 387.8 263.658 388.556 263.083 390.433 263.083 392.738 264.596 394.427 263.083 395.546 264.596 397.274 262.901 399.335 262.719 400.303 265.745 401.032 269.528 402.364 269.709 403.51 267.046 407.081 253.065 408.412 250.614 410.5 250.403 412.588 252.128 414.102 251.734 415.978 250.403 417.884 250.796 419.004 253.247 420.093 253.671 425.056 253.066 426.962 251.553 426.206 250.403 423.935 249.646 423.723 247.013 425.629 245.682 426.386 242.474 424.693 239.448 423.547 237.935 424.121 237.36 424.121 235.484 422.603 234.516 422.209 233.003 426.563 232.459 426.959 230.946 425.628 230.946 424.508 229.614 422.42 229.614 420.695 226.769 419.177 226.588 419.363 224.318 417.724 224.136 415.545 225.618 413.366 226.163 411.884 225.225 409.98 225.104 409.433 225.891 407.677 226.163 403.743 227.404 398.023 229.431 395.839 227.676 393.268 227.131 393.151 224.831 390.7 223.045 387.307 220.473 383.495 220.594 379.834 216.811"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-70"
-                        onClick={[Function]}
-                        points="448.438 166.066 444.872 166.641 444.298 168.517 442.391 169.849 441.09 168.336 440.152 168.911 440.88 170.031 439.004 171.181 439.579 172.694 437.49 173.45 437.49 175.901 434.828 175.901 434.641 177.414 432.008 177.989 432.195 180.259 433.884 180.441 432.946 181.561 432.372 185.344 430.677 185.344 427.832 186.494 424.807 185.344 422.174 186.494 422.174 188.401 424.236 188.764 425.749 191.79 425.961 193.303 423.51 196.147 422.364 196.51 421.604 197.448 423.695 198.416 424.053 201.442 425.747 201.623 425.959 205.406 426.716 206.163 426.807 206.768 428.259 207.162 429.896 208.524 432.345 208.524 433.283 207.586 434.947 207.646 436.673 207.707 440.485 204.59 441.575 204.59 442.785 203.652 446.72 203.773 449.715 201.322 451.895 200.928 452.711 198.901 454.466 198.356 456.222 195.36 458.673 193.453 461.244 193.06 463.151 194.422 466.691 193.998 466.691 192.091 468.114 191.274 469.233 189.731 471.412 189.731 472.623 188.46 473.076 185.434 473.076 183.558 472.26 180.683 472.26 178.262 473.742 177.173 475.497 176.265 475.316 175.902 469.258 172.694 467.569 170.787 465.874 169.667 464.361 170.424 464.149 171.544 462.631 172.482 461.693 172.482 458.843 169.274 454.879 169.274 453.19 170.606 451.671 170.787 449.22 168.911 449.407 166.823"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-69"
-                        onClick={[Function]}
-                        points="399.325 262.72 397.263 262.902 395.537 264.597 394.418 263.084 392.724 264.597 390.424 263.084 388.547 263.084 387.791 263.659 387.396 265.838 388.42 266.655 388.42 268.501 389.661 270.559 388.632 271.8 384.734 271.8 384.521 275.491 383.282 276.73 384.094 279.818 384.094 281.665 385.759 283.299 385.759 285.569 388.209 287.84 388.209 290.503 386.999 292.35 388.421 293.201 388.421 294.624 387.184 295.649 387.184 297.313 392.538 302.25 398.923 303.274 399.528 305.125 397.466 307.576 399.13 308.6 401.192 307.788 403.401 308.12 407.365 306.149 406.73 304.913 404.067 302.25 408.179 300.798 413.533 299.56 417.648 294.236 414.955 291.965 415.106 289.997 411.261 288.877 408.782 289.693 408.386 286.394 406.115 284.332 404.663 284.121 400.975 281.881 401.579 280.431 401.579 274.044 402.607 272.621 402.968 268.204 402.33 269.717 400.998 269.536 400.271 265.753"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-68"
-                        onClick={[Function]}
-                        points="489.199 147.698 486.349 147.849 484.569 151.873 482.298 156.412 482.872 159.257 480.996 163.614 477.758 166.426 477.577 173.81 475.217 175.837 475.308 175.898 476.069 177.411 479.09 177.593 482.51 180.256 483.054 181.557 482.872 183.827 481.934 185.552 482.296 187.823 484.958 187.429 485.533 189.517 486.471 193.541 488.71 193.178 488.316 195.236 489.647 196.386 496.633 196.204 500.237 193.36 500.419 189.184 502.325 186.733 499.844 183.888 498.543 180.862 500.056 178.804 500.056 174.053 500.994 171.783 500.994 168 502.686 165.549 500.811 162.916 500.625 157.469 497.72 156.198 496.056 151.386 492.333 151.568 490.854 149.722"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-67"
-                        onClick={[Function]}
-                        points="503.846 104.849 500.244 105.848 498.58 108.753 498.58 111.598 497.066 112.93 495.735 112.93 493.284 111.205 491.378 112.537 489.108 112.537 487.232 110.661 483.628 110.086 481.54 109.148 480.783 106.304 479.089 108.18 478.151 112.537 475.67 113.294 475.67 115.745 478.151 116.895 480.028 118.227 479.271 119.921 480.996 121.041 484.022 118.771 489.288 121.797 487.049 125.973 487.236 127.305 488.749 128.818 487.599 132.782 483.822 136.565 481.734 136.383 483.06 137.684 482.304 141.103 483.06 146.217 486.664 147.155 486.361 147.851 489.206 147.7 490.87 149.727 492.349 151.573 496.077 151.391 497.741 156.203 500.641 157.474 500.616 156.869 505.549 147.216 504.974 141.739 507.245 134.355 507.82 127.909 512.717 124.338 512.717 122.068 514.623 119.587 516.136 119.587 517.831 117.893 517.468 114.685 519.162 110.145 521.795 109.57 519.162 107.482 514.44 106.937 510.26 104.849 507.415 106.543 505.902 104.849 503.846 104.849"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-66"
-                        onClick={[Function]}
-                        points="330.33 448.945 326.215 451.154 326.547 453.575 308.603 453.575 308.754 456.813 310.63 459.567 302.943 463.319 302.127 462.835 295.802 463.289 295.016 464.893 291.808 465.71 289.662 467.586 283.792 468.948 284.124 470.945 286.969 473.608 292.628 475.121 292.81 478.511 295.835 481.173 298.105 480.78 301.343 476.815 305.307 476.054 311.541 478.147 316.837 482.681 318.35 480.78 319.681 480.78 321.013 481.718 322.132 481.173 322.314 478.511 328.003 477.179 329.879 474.729 332.724 473.791 336.688 473.791 339.169 476.423 342.195 476.635 342.195 473.614 340.676 471.525 338.014 470.376 337.59 453.855 335.111 452.708"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-65"
-                        onClick={[Function]}
-                        points="212.887 411.09 211.011 412.089 211.344 412.119 214.552 417.414 212.464 419.321 213.977 421.591 216.247 424.985 214.371 427.431 211.345 434.243 206.231 438.597 207.563 441.26 206.413 442.016 203.599 441.447 202.812 447.676 201.299 448.825 200.996 452.726 201.48 452.455 204.688 454.361 208.471 457.206 208.834 459.477 211.86 461.925 214.341 461.925 220.575 459.262 223.208 462.288 226.809 463.256 228.14 460.986 229.835 461.743 233.497 461.985 233.255 451.817 235.162 451.817 236.856 452.665 238.066 451.484 237.884 449.608 240.275 448.212 239.428 444.644 238.399 443.764 236.341 444.459 237.37 442.734 236.855 440.525 233.769 438.286 233.951 436.743 235.676 433.838 237.885 432.99 237.885 431.78 239.247 429.718 240.155 428.447 236.705 426.662 232.075 426.662 231.379 425.268 228.988 425.268 228.292 423.724 226.083 423.724 225.387 424.417 222.815 424.417 222.664 422.873 220.606 421.515 221.302 420.821 221.635 419.127 221.12 418.612 220.091 415.857 217.852 415.525 215.643 414.314 215.794 411.077 212.887 411.077"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-64"
-                        onClick={[Function]}
-                        points="206.048 411.423 203.324 412.967 197.847 412.785 197.332 411.937 193.731 413.148 190.978 413.995 188.92 412.452 186.711 413.148 186.015 412.269 183.291 412.269 181.566 413.148 177.117 412.961 174.726 414.836 170.429 414.504 169.582 415.72 168.553 415.357 169.914 413.995 167.523 412.119 164.618 414.691 159.655 415.023 154.208 412.295 153.421 413.691 149.064 418.988 145.675 420.319 143.224 420.677 143.224 422.765 145.494 424.859 148.883 425.04 149.065 427.491 151.728 427.703 152.484 425.974 156.085 427.492 158.355 428.067 158.9 430.337 157.599 431.487 157.599 435.052 154.936 436.384 154.754 438.078 156.449 439.984 159.475 440.922 160.05 438.077 161.744 436.201 161.562 438.652 162.894 440.553 166.283 440.553 167.796 442.615 172.335 443.372 176.693 446.035 183.865 446.035 184.258 449.999 189.16 453.781 191.067 456.051 193.155 454.932 195.031 454.538 195.969 455.476 197.694 454.538 200.992 452.723 201.295 448.824 202.808 447.675 203.595 441.446 206.409 442.015 207.559 441.259 206.227 438.596 211.341 434.242 214.367 427.43 216.243 424.979 213.973 421.59 212.46 419.32 214.548 417.413 211.34 412.117 206.226 411.755"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-63"
-                        onClick={[Function]}
-                        points="320.222 274.311 321.765 273.614 322.976 270.709 324.156 270.376 324.188 268.891 326.188 268.703 326.391 269.562 328.968 266.775 331.871 266.769 332.386 267.798 331.025 269.674 333.052 271.914 333.415 273.275 338.196 276.029 343.922 276.891 345.731 276.695 348.303 277.209 350.512 275.848 352.238 276.695 352.57 279.087 354.734 279.609 357.714 279.451 358.562 281.508 361.203 282.516 361.135 283.328 364.094 285.781 362.466 287.473 361.892 291.65 364.162 294.675 366.22 299.577 371.153 302.814 372.781 309.031 369.245 312.438 369.82 314.708 371.219 315.234 370.545 315.915 368.154 315.219 366.469 313.531 365.422 315.5 362.495 315.4 361.141 314.203 360.062 316.469 358.229 315.734 357.031 313.516 355.475 313.495 354.114 312.314 351.984 313.141 349.665 313.346 348.303 312.466 347.453 312.922 347.109 312.141 345.731 312.829 345.688 313.969 343.673 314.191 341.797 315.736 338.377 316.25 337.591 317.369 336.834 317.279 336.138 318.641 333.415 318.458 330.843 314.523 329.814 314.373 327.756 313.346 326.516 314.469 323.489 314.525 321.945 311.287 316.135 309.593 316.5 308.312 315.926 305.083 314.776 303.751 314.776 301.089 316.484 298.266 316.108 295.611 311.748 291.255 311.385 289.562 317.047 286.375 317.625 283.734 319.859 282 319.133 278.395 317.609 276.469 317.375 272.156"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-62"
-                        onClick={[Function]}
-                        points="300.069 4.503 289.599 6.5 281.278 12.916 281.278 38.457 281.217 39.213 284.153 39.909 285.091 41.997 287.362 41.422 288.693 39.727 290.383 40.302 293.987 43.116 295.319 42.571 296.257 44.841 299.651 46.354 299.651 48.23 302.13 49.168 304.581 48.23 309.302 47.655 310.451 48.623 312.721 47.655 313.841 49.561 311.029 51.437 311.029 54.1 311.967 55.038 312.723 54.856 313.268 53.343 314.997 52.193 316.687 53.525 320.656 54.857 322.345 54.857 322.345 52.95 324.826 54.675 325.008 56.188 323.862 57.882 325.951 56.732 327.676 55.976 328.405 57.308 328.405 58.64 331.25 57.127 335.79 57.127 335.971 57.309 337.091 55.161 336.516 54.192 334.791 53.829 332.885 53.829 331.737 53.435 333.641 52.285 335.37 52.467 337.095 52.285 337.307 49.198 338.456 48.442 338.638 46.717 336.52 45.355 334.041 45.173 333.467 44.779 335.01 43.629 335.373 42.479 334.041 41.541 332.103 39.211 332.316 38.061 334.796 36.911 335.191 35.579 333.465 34.792 332.496 32.311 329.046 31.917 325.597 30.979 325.202 27.136 327.681 25.593 326.743 23.656 324.805 23.656 323.474 25.774 317.512 25.411 312.7 24.231 310.038 21.356 310.038 19.056 312.126 18.088 310.398 16.756 306.193 16.574 303.678 10.219"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-61"
-                        onClick={[Function]}
-                        points="194.859 128.594 192.794 127.273 196.606 126.123 199.42 122.855 203.323 123.944 206.742 121.584 208.8 120.827 210.979 123.006 214.58 122.37 217.697 124.095 221.601 122.854 225.172 120.191 227.532 117.528 229.106 117.225 229.562 119.172 230.801 118.95 230.952 117.528 234.553 116.923 235.794 117.679 239.638 116.832 238.759 119.344 240.272 121.25 245.568 121.432 246.656 123.984 248.594 125.971 251.227 126.909 252.014 129.754 250.683 131.63 254.071 133.899 254.253 137.137 258.247 140.526 258.609 147.469 256.734 149.786 253.89 150.361 251.045 152.055 251.439 153.568 252.74 155.293 252.719 159.703 250.682 159.441 248.016 155.5 247.262 155.477 247.094 157 246.922 156.078 242.935 156.052 241.031 153.203 237.812 152 236.906 145.234 235.344 143.188 230.256 143.371 225.142 148.092 221.969 147.859 220.969 144.5 218.515 143.552 217.758 139.406 216.047 137.891 214.188 138.075 213.401 139.951 210.587 141.101 205.473 140.345 200.344 143.312 198.483 142.04 195.625 143.891 193.516 142.375 192.344 140.281 195.484 137.547 196.609 133.875 196.297 132.391 196.734 130.516"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-60"
-                        onClick={[Function]}
-                        points="288.418 73.801 287.178 75.284 286.421 77.16 287.935 77.16 287.178 79.066 286.421 82.849 287.541 84.725 287.541 87.963 289.447 87.963 288.69 89.264 287.359 91.745 286.814 93.439 288.503 94.952 289.048 99.309 290.022 100.822 288.69 101.185 286.996 100.247 286.693 102.486 286.814 102.335 287.541 104.029 288.69 105.905 293.799 106.299 297.403 105.905 299.854 104.029 302.875 105.905 304.392 107.055 306.663 106.48 308.721 105.542 312.715 107.63 316.861 110.081 318.193 111.413 320.463 109.9 322.339 111.02 323.489 111.958 325.178 111.776 326.328 110.263 328.96 111.776 332.198 110.444 334.074 111.019 335.95 109.506 337.098 108.931 337.458 109.203 337.854 106.631 336.492 105.088 334.192 103.545 333.223 105.088 332.649 105.269 332.463 102.394 334.192 102 333.796 99.337 331.496 98.944 332.646 97.007 335.914 96.251 337.064 91.651 338.789 90.864 336.489 89.139 337.276 87.414 337.637 81.664 336.852 77.216 332.858 77.61 330.165 77.247 325.173 78.579 320.941 82.603 317.491 81.453 314.042 81.09 311.354 78.397 306.542 77.035 300.036 77.61 298.307 76.278 294.828 76.278 292.348 77.246 291.202 76.459 291.202 74.371 290.806 73.796 288.415 73.796"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-59"
-                        onClick={[Function]}
-                        points="316.077 0.055 310.024 2.899 300.583 4.412 300.069 4.503 303.67 10.222 306.182 16.577 310.388 16.759 312.117 18.091 310.029 19.059 310.029 21.359 312.687 24.234 317.499 25.414 323.461 25.777 324.792 23.659 326.73 23.659 327.668 25.596 325.187 27.139 325.583 30.982 329.032 31.92 332.482 32.314 333.451 34.795 335.176 35.582 334.782 36.914 332.301 38.064 332.089 39.214 334.027 41.544 335.359 42.482 334.996 43.632 333.453 44.782 334.027 45.176 336.506 45.358 338.624 46.72 338.442 48.445 337.293 49.201 337.081 52.288 335.356 52.47 333.627 52.288 331.721 53.438 332.871 53.832 334.777 53.832 336.502 54.195 337.077 55.164 335.957 57.312 337.471 58.825 338.989 59.219 340.503 58.251 342.591 58.251 343.165 59.401 343.922 59.219 346.193 57.887 348.463 59.219 351.489 57.131 352.82 57.131 354.334 58.463 357.359 56.375 358.661 56.557 359.807 57.495 363.989 57.888 364.347 59.583 366.435 57.707 367.554 57.707 368.312 60.158 371.916 61.096 372.945 60.4 372.637 60.4 372.455 58.524 376.238 56.254 375.663 52.653 372.059 51.715 372.999 50.747 372.999 48.114 375.844 46.026 375.087 44.513 369.035 39.792 358.443 40.367 357.323 42.243 355.992 42.243 356.174 35.616 353.153 32.045 350.882 32.408 349.551 30.895 345.768 32.589 344.467 31.288 341.804 30.894 341.047 28.443 340.865 20.878 339.171 20.122 338.959 18.972 337.84 18.972 337.446 16.702 334.995 16.914 330.271 18.427 328 21.237 325.73 21.237 324.211 19.361 323.637 17.273 321.76 15.185 319.099 15.185 317.983 13.127 317.983 9.89 319.284 7.832 318.528 4.988"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-58"
-                        onClick={[Function]}
-                        points="336.382 193.453 335.444 194.936 333.658 194.936 331.262 194.392 328.605 195.179 328.786 197.085 331.057 199.718 331.057 203.319 329.367 205.77 329.912 208.04 333.332 210.703 333.514 213.336 335.42 217.33 335.026 221.87 337.114 223.928 336.539 228.861 336.352 231.312 337.29 233.006 335.838 237.636 335.958 239.058 339.196 240.571 341.466 243.052 343.528 241.902 345.429 240.782 345.825 242.476 348.637 242.476 349.394 240.963 351.088 241.719 351.663 244.17 353.176 243.807 356.78 238.874 358.656 240.206 358.959 240.781 361.925 238.935 363.135 239.086 364.073 241.386 365.858 241.114 367.214 239.752 368.97 239.752 370.331 237.997 371.692 237.725 371.963 236.757 374.929 236.908 375.08 236.212 373.719 235.001 373.719 233.791 375.625 232.701 375.625 231.884 373.84 230.795 373.569 228.768 373.715 226.861 372.504 226.044 373.566 224.561 374.534 224.017 375.2 222.383 374.262 221.839 373.173 220.205 374.534 218.298 376.834 216.937 379.679 216.937 379.679 214.789 380.496 214.517 380.496 213.7 379.285 211.794 376.561 211.249 375.623 209.615 376.019 208.132 376.29 206.074 375.81 204.985 372.785 207.043 371.545 207.588 369.91 206.498 370.06 203.775 368.276 203.775 366.794 204.743 366.4 203.502 367.212 202.14 366.244 200.93 365.154 202.564 365.3 203.774 362.733 203.653 358.648 199.84 355.531 199.719 355.531 197.661 353.351 196.299 352.923 194.544 352.258 194.423 352.258 197.812 351.047 198.084 349.265 197.539 347.389 198.749 346.296 199.021 345.207 198.083 344.117 198.627 341.666 196.993 339.911 196.993 338.67 196.176 338.942 194.663 337.581 193.453 336.382 193.453"
-                      />
-                      <path
-                        className="dep selectable"
-                        d="M448.044,83.666 L445.199,83.847 L442.928,85.754 L442.353,86.692 L439.151,86.692 L438.031,85.542 L437.547,85.542 C437.622,87.169 437.698,88.387 437.698,88.387 L436.76,89.869 L439.181,95.044 L440.088,95.8 L441.208,98.766 L439.725,101.338 L441.39,103.002 L440.663,104.485 L440.663,106.543 L438.6,106.543 L438.418,108.934 L442.321,111.355 L442.134,114.321 L445.105,114.321 L446.584,116.348 L450.275,116.348 L453.997,121.008 L454.905,123.58 L457.326,123.58 L462.138,125.638 L466.409,128.21 L466.409,128.967 L469.193,129.148 L472.704,131.176 L476.032,131.176 L478.816,133.234 L481.962,135.443 L484.201,136.17 L487.59,132.78 L488.74,128.816 L487.222,127.303 L487.04,125.971 L489.279,121.795 L484.008,118.769 L480.987,121.039 L479.258,119.919 L480.019,118.225 L478.14,116.893 L475.661,115.743 L475.661,113.292 L478.14,112.535 L479.078,108.178 L480.772,106.302 L481.529,109.146 L483.617,110.084 L487.219,110.659 L489.095,112.535 L491.366,112.535 L493.272,111.203 L495.718,112.928 L497.049,112.928 L498.568,111.596 L498.568,108.751 L500.232,105.846 L499.836,105.967 L498.535,104.091 L494.752,101.821 L493.421,99.733 L488.882,100.127 L486.219,102.578 L479.804,102.76 L477.902,101.428 C477.775,101.196 476.84,99.553 476.026,99.098 C475.995,99.081 475.942,99.054 475.905,99.037 C475.878,99.026 475.838,99.013 475.813,99.007 C475.799,99.002 475.759,98.982 475.751,98.977 C475.749,98.977 475.725,98.977 475.721,98.977 C475.7,98.976 475.655,98.977 475.63,98.977 C474.744,98.977 473.027,97.982 472.818,97.857 L470.155,98.977 L469.968,101.247 L466.76,101.64 L464.859,98.039 L463.739,97.645 L463.739,95.012 L461.076,93.862 L460.894,89.323 L458.988,87.447 L455.024,85.541 L453.147,85.541 L452.573,85.935 L450.667,85.935 L448.044,83.666 Z"
-                        fill="#313278"
-                        id="dpt-57"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-56"
-                        onClick={[Function]}
-                        points="93.567 151.632 90.42 153.145 88.211 153.145 85.881 155.021 86.032 156.413 87.424 160.015 88.211 162.829 93.053 163.616 95.413 165.492 96.351 164.372 97.894 166.43 97.107 167.368 96.956 170.152 95.564 170.152 94.475 171.877 92.266 171.877 91.358 175.599 93.477 178.989 96.503 179.745 97.623 178.05 97.079 180.108 99.711 181.258 103.13 184.647 104.25 186.735 103.887 189.186 103.493 191.667 105.763 193.362 106.913 192.03 105.763 190.517 105.763 187.128 108.033 187.672 108.79 185.402 109.365 186.734 111.816 188.822 112.966 186.916 111.816 184.283 113.904 187.128 116.537 186.734 115.993 185.402 118.444 185.977 120.32 188.247 119.382 189.76 116.931 189.004 114.086 187.672 112.573 189.579 114.843 190.335 116.537 192.968 126.766 192.03 129.398 192.605 128.097 193.725 128.279 195.45 128.642 195.722 129.459 195.571 131.154 193.876 132.274 195.177 135.3 195.177 138.901 193.301 144.197 191.213 144.379 185.918 145.499 185.313 143.502 181.561 145.227 180.169 144.924 179.231 143.835 178.596 145.53 177.809 147.104 175.933 146.953 174.057 144.925 174.057 144.441 172.211 145.863 170.335 144.289 167.521 141.959 166.099 139.296 166.099 138.358 165.797 138.358 164.556 139.75 163.285 140.537 160.168 140.083 158.141 139.448 158.928 135.696 158.626 133.971 155.479 132.579 155.479 130.4 156.266 130.4 158.293 127.434 160.169 125.074 159.231 124.136 157.204 123.379 158.293 121.17 158.293 120.081 156.901 118.992 156.901 116.662 154.541 113.999 155.177 111.185 152.665 108.673 152.847 107.916 154.39 104.951 155.964 101.35 154.39 100.412 153.452 98.838 154.541 96.962 154.39 96.659 152.847 93.693 152.06"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-55"
-                        onClick={[Function]}
-                        points="408.369 81.155 408.913 81.911 411.758 81.911 413.09 83.212 414.784 82.092 416.115 79.913 417.209 80.065 418.722 81.578 419.479 85.179 420.386 85.179 420.265 87.449 421.384 89.295 420.627 91.716 420.809 92.442 421.747 91.716 422.655 90.051 424.531 89.869 427.678 88.931 429.342 90.232 430.643 93.379 430.643 95.044 431.551 95.8 431.551 97.071 430.643 98.191 430.461 100.612 431.188 101.732 431.552 105.606 432.671 106.544 434.336 107.271 433.609 108.753 435.636 110.629 433.79 112.656 434.153 113.957 435.999 114.865 435.999 115.803 433.79 115.803 432.852 117.104 433.034 118.042 434.517 119.525 431.764 126.364 432.491 128.422 432.491 131.751 433.247 133.416 434.337 133.416 434.75 134.281 433.247 134.354 431.765 135.08 431.765 136.2 433.611 137.864 433.611 140.467 432.672 141.949 429.707 142.857 429.688 141.844 428.799 141.772 428.799 143.039 425.077 143.795 425.077 145.46 421.875 145.75 422.172 145.464 418.178 141.102 416.483 140.527 411.844 138.188 409.493 135.624 405.529 135.049 405.346 128.423 401.744 125.578 401.351 124.065 402.683 121.798 401.533 120.857 402.683 118.016 404.771 117.078 406.219 112.406 403.469 112.375 404.875 110.688 403.621 106.483 402.319 103.639 404.014 102.129 403.045 101.944 402.68 99.858 404.875 98.781 406.073 97.589 405.343 95.712 405.131 94.38 407.219 92.685 407.979 88.903 405.706 86.058"
-                      />
-                      <path
-                        className="dep selectable"
-                        d="M427.225,81.759 L424.955,83.847 L421.747,84.029 L420.627,85.179 L420.386,85.179 L420.265,87.449 L421.384,89.295 L420.99,90.415 L420.627,91.716 L420.809,92.442 L421.747,91.716 L422.655,90.051 L424.531,89.869 L427.677,88.931 L429.341,90.232 L430.07,91.715 L430.639,93.379 L430.639,95.044 L431.547,95.8 L431.547,97.071 L430.639,98.191 L430.457,100.612 L431.184,101.732 L431.371,103.215 L431.553,105.606 L432.672,106.544 L434.337,107.271 L433.61,108.753 L435.632,110.629 L433.786,112.656 L434.149,113.957 L435.995,114.865 L435.995,115.803 L433.786,115.803 L432.848,117.104 L433.035,118.042 L434.514,119.525 L433.243,123.035 L431.761,126.364 L432.49,128.422 L432.49,131.751 L433.246,133.416 L434.336,133.416 L434.91,134.354 L433.246,134.354 L431.764,135.08 L431.764,136.2 L433.615,137.864 L433.615,140.467 L435.461,139.892 L438.245,140.074 L438.427,143.04 L439.547,143.433 L438.245,144.341 L438.058,145.279 L440.085,145.642 L441.387,147.306 L447.499,146.943 L448.801,144.522 L451.584,144.522 L452.704,143.614 L454.55,144.734 L456.215,144.159 L458.636,144.341 L460.663,143.614 L462.69,142.131 L463.804,143.251 L463.991,140.648 L465.47,140.073 L466.231,142.494 L468.44,142.676 L470.674,143.251 L471.582,143.432 L474.76,141.95 L476.424,140.83 L477.906,138.984 L480.872,137.864 L482.81,137.44 L481.716,136.381 L483.806,136.563 L484.202,136.17 L481.963,135.443 L478.817,133.234 L476.033,131.176 L472.705,131.176 L469.194,129.148 L466.41,128.967 L466.41,128.21 L462.143,125.638 L457.331,123.58 L454.91,123.58 L454.002,121.008 L450.28,116.348 L446.589,116.348 L445.11,114.321 L442.144,114.321 L442.326,111.355 L438.423,108.934 L438.61,106.543 L440.668,106.543 L440.668,104.485 L441.397,103.002 L439.732,101.338 L441.211,98.766 L440.091,95.8 L439.184,95.044 L436.763,89.869 L437.701,88.387 C437.701,88.387 437.625,87.169 437.55,85.542 L435.008,85.542 L431.589,81.759 L427.225,81.759 Z"
-                        fill="#313278"
-                        id="dpt-54"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-53"
-                        onClick={[Function]}
-                        points="216.064 137.894 214.188 138.076 213.401 139.952 210.587 141.102 205.473 140.346 200.359 143.372 198.483 142.041 195.639 143.947 193.551 142.434 192.219 140.164 189.405 139.014 187.499 140.527 184.291 140.133 184.109 145.066 185.047 145.822 185.047 149.605 183.14 151.512 183.14 154.538 183.715 156.414 183.715 161.892 185.047 163.224 185.047 168.338 181.839 167.945 180.507 168.701 178.056 174.753 177.087 178.172 176.785 178.838 180.204 179.534 183.018 179.534 186.135 181.561 187.406 180.018 193.004 181.712 195.213 182.983 200.206 182.801 202.385 180.622 205.835 181.711 207.681 181.711 207.711 181.741 208.316 180.319 208.316 174.691 207.681 173.753 208.014 172.815 210.677 172.664 211.918 171.575 212.069 170.637 210.677 167.187 211.131 165.795 214.248 165.492 213.945 164.705 214.732 162.829 214.096 161.407 214.883 159.864 217.697 157.504 217.364 155.023 217.848 150.968 218.937 149.092 222.478 147.942 221.934 147.912 220.966 144.492 218.515 143.554 217.758 139.408"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-52"
-                        onClick={[Function]}
-                        points="406.438 131.418 401.994 132.174 401.419 136.955 397.395 139.83 395.307 139.104 394.308 141.192 394.126 144.067 397.576 148.879 400.844 150.029 401.601 154.053 401.813 160.953 400.667 162.678 397.396 162.89 395.283 164.796 396.826 165.765 397.462 168.186 399.732 169.457 403.126 173.058 407.48 178.929 405.03 181.561 406.724 182.711 406.909 185.919 409.931 185.737 410.688 187.25 412.959 187.431 414.648 186.493 417.674 190.276 418.069 191.214 422.215 190.276 423.002 188.37 423.184 188.4 423.184 186.493 425.818 185.343 428.842 186.493 431.687 185.343 433.382 185.343 433.956 181.56 434.894 180.44 433.205 180.258 433.018 177.988 435.652 177.413 435.838 175.9 438.5 175.9 438.5 173.449 440.589 172.693 440.014 171.18 440.589 170.817 438.86 169.456 436.802 170.212 436.802 166.248 431.506 163.615 432.626 158.501 434.315 157.351 433.77 155.656 431.291 155.293 430.747 152.812 428.476 152.812 425.813 149.241 422.792 149.03 421.486 147.154 423.18 145.46 419.186 141.102 417.496 140.527 412.957 138.257 410.506 135.624 406.542 135.049"
-                      />
-                      <path
-                        className="dep selectable"
-                        d="M366.038,92.29 L363.767,93.259 L364.163,95.135 L360.168,95.135 L356.598,97.798 L356.598,102.881 L359.236,104.606 L359.992,106.301 L355.635,106.664 L355.09,108.389 L356.785,109.509 L356.028,110.659 L354.334,111.415 L354.697,112.716 L357.143,112.716 L358.116,114.048 L356.422,115.198 L354.909,119.162 L352.059,120.494 L351.09,122.552 L350.152,123.702 L350.364,124.822 L348.846,125.79 L348.452,128.423 L349.966,129.361 L350.722,132.206 L349.784,133.9 L350.358,135.232 L353.17,135.05 L353.17,135.988 L353.987,135.806 L357.255,139.256 L361.859,138.5 L367.245,134.838 L370.483,134.838 L373.752,132.538 L377.595,130.42 L380.47,130.632 L380.866,134.475 L384.315,139.65 L388.159,139.65 L393.545,138.5 L397.389,139.831 L401.413,136.956 L401.988,132.175 L406.434,131.419 L406.34,128.423 L402.738,125.578 L402.342,124.065 L403.673,121.795 L402.527,120.857 L403.673,118.013 L405.762,117.075 L407.279,112.354 L404.254,112.535 L405.948,110.659 L404.617,106.483 L403.315,103.639 L405.004,102.126 L404.036,101.944 L403.794,100.643 C403.755,100.649 403.523,100.673 403.523,100.673 L401.794,99.13 L399.857,101.067 L399.282,101.067 L398.525,100.099 L393.921,99.917 L393.137,101.067 L391.806,101.067 L390.657,98.555 L388.146,98.555 L387.571,99.13 L385.091,98.948 L382.003,96.648 L379.886,96.073 L379.128,94.923 L375.107,92.411 L370.503,92.29 L370.565,94.015 L369.233,94.378 L366.038,92.29 Z"
-                        fill="#313278"
-                        id="dpt-51"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-50"
-                        onClick={[Function]}
-                        points="155.119 71.168 154.362 73.074 158.357 76.282 158.357 80.458 156.844 82.334 157.782 83.272 158.357 83.666 157.963 87.267 159.295 90.293 163.653 95.195 164.591 99.552 165.529 100.884 165.529 107.693 167.799 112.233 167.799 117.528 165.348 122.43 167.981 129.239 172.157 130.177 172.52 132.084 170.462 133.022 166.891 133.022 167.466 135.413 168.586 139.014 171.824 141.859 173.337 142.222 174.85 140.164 176.545 139.952 178.603 137.501 180.509 139.014 182.779 139.014 184.292 139.77 184.292 140.133 187.5 140.527 189.406 139.014 192.22 140.164 192.281 140.285 195.519 137.531 196.608 133.93 196.305 132.357 196.759 130.511 194.883 128.635 190.041 125.488 186.47 125.186 182.869 120.646 185.835 119.557 187.076 117.227 185.533 115.805 186.925 114.564 188.317 115.653 190.829 114.11 192.403 111.598 193.008 109.117 191.919 106.908 192.554 106.121 191.132 103.791 192.705 101.763 191.464 100.19 189.891 102.217 187.712 100.976 184.111 97.375 183.96 95.832 185.049 94.743 184.716 92.655 182.93 93.109 182.749 88.57 177.816 82.729 179.329 78.947 181.417 78.947 179.541 73.833 171.401 73.439 167.044 76.465 162.142 73.257"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-49"
-                        onClick={[Function]}
-                        points="176.786 178.837 176.362 179.684 176.09 179.623 176.302 180.319 176.302 182.498 178.329 183.739 179.57 187.037 181.446 189.367 178.965 191.576 179.116 194.36 180.054 195.147 183.473 194.693 186.287 197.326 186.922 201.23 185.046 202.501 178.963 202.35 175.059 203.106 172.88 204.226 172.88 206.072 174.907 208.584 176.934 208.584 177.085 211.247 177.872 212.034 176.934 214.213 175.361 214.667 175.361 216.089 174.574 216.876 175.512 217.33 175.996 217.179 177.388 217.179 178.962 219.206 178.901 221.173 179.264 221.234 180.838 222.172 185.68 222.172 188.252 224.351 191.853 222.808 197.724 224.14 200.357 222.415 200.357 219.782 205.471 219.389 210.192 218.451 215.306 218.27 215.881 219.601 217.213 220.721 218.514 218.451 222.115 214.669 223.567 214.669 225.716 206.922 228.742 203.321 228.53 199.175 230.437 196.694 230.437 195.574 229.499 194.424 230.104 193.183 227.532 192.184 219.574 187.342 212.22 185.163 209.406 185.012 209.406 183.136 207.681 181.714 205.835 181.714 202.385 180.625 200.206 182.804 195.213 182.986 193.004 181.715 187.406 180.021 186.135 181.564 183.018 179.537 180.204 179.537"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-48"
-                        onClick={[Function]}
-                        points="349.97 337.223 344.674 339.129 343.16 342.52 339.771 340.249 337.108 348.57 334.379 354.835 338.343 359.707 338.072 363.459 340.734 365.336 340.734 369.875 341.546 376.29 344.754 377.652 344.483 379.769 349.022 378.982 350.626 379.769 349.628 380.646 355.468 384.55 360.461 383.521 361.314 382.312 360.618 380.617 362.676 380.103 365.581 382.826 370.544 383.342 372.783 379.922 372.783 377.016 374.143 375.473 372.933 375.141 372.933 371.206 370.205 368.301 372.444 367.938 373.625 366.915 374.563 365.103 373.625 364.527 374.169 360.534 370.962 357.055 369.63 350.094 364.818 343.951 361.307 344.798 360.546 342.165 358.645 342.165 358.282 344.436 353.38 345.948"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-47"
-                        onClick={[Function]}
-                        points="228.411 347.996 226.414 348.267 224.719 348.783 222.298 349.297 221.632 351.174 222.479 353.049 224.537 353.231 224.204 354.926 222.661 355.44 220.936 357.502 218.031 361.95 216.669 364.341 217.184 366.913 218.031 368.641 216.155 369.824 214.279 369.824 213.916 371.729 215.126 372.754 215.308 374.629 213.916 375.991 210.89 376.472 211.344 377.015 212.04 381.13 215.792 380.797 218.364 381.795 220.603 381.978 221.632 383.189 219.574 385.251 219.06 389 219.514 390.18 220.24 388.666 222.479 390.573 225.505 387.547 226.837 389.424 230.045 388.848 233.464 388.487 234.977 385.828 240.636 385.278 243.481 388.092 244.449 387.154 246.325 386.578 245.569 383.945 248.413 383.189 252.014 382.433 251.227 380.162 252.377 378.83 253.315 375.226 251.227 372.955 252.559 368.628 255.404 370.322 259.58 369.564 257.674 365.388 256.161 359.728 259.944 359.544 260.7 357.549 257.735 356.31 256.373 354.765 254.315 354.765 251.924 356.974 250.048 356.826 249.534 355.615 250.895 354.765 250.895 353.556 249.352 351.863 247.99 351.679 247.143 352.705 243.36 352.705 243.027 351.347 241.817 351.162 239.759 352.854 236.007 352.854 234.282 354.397 231.377 353.371 231.044 349.801"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-46"
-                        onClick={[Function]}
-                        points="273.2 335.714 274.501 334.594 274.531 334.406 274.952 334.318 278.977 332.441 283.777 334.582 287.499 339.908 289.647 339.637 292.855 336.428 293.896 338.229 296.062 336.188 298.998 336.973 300.088 343.934 303.208 346.333 300.874 351.956 303.208 353.021 302.236 356.225 303.779 356.436 303.5 357.375 302.236 358.857 298.816 358.857 298.12 359.736 296.426 359.553 293.339 362.973 292.315 362.641 290.106 364.516 290.771 367.936 292.497 370.508 291.146 371.833 291.083 371.604 287.024 373.414 284.266 372.749 282.576 374.807 279.671 374.443 279.125 377.771 277.771 377.792 276.958 376.104 276.403 375.141 274.86 375.29 271.955 378.377 268.354 378.227 267.839 375.991 267.839 374.297 267.506 373.938 266.271 375.229 264.708 375.229 263.058 373.419 261.515 373.419 260.486 371.357 261.792 369.833 261.697 368.816 259.276 368.91 257.646 365.333 256.159 359.741 259.875 359.583 260.883 357.087 262.583 355.417 262.79 352.548 266.875 352.208 269.542 348.438 268.449 348.01 268.333 346 271.438 345.583 271.688 343.75 273.229 342.729 274.854 339.729 273.2 337.803"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-45"
-                        onClick={[Function]}
-                        points="304.396 151.511 301.945 153.782 296.407 154.266 296.195 154.629 296.74 155.718 294.985 157.201 295.379 160.742 293.9 161.014 292.927 164.524 291.292 166.309 288.992 166.309 286.813 167.519 285.603 166.157 284.241 165.613 282.759 166.581 282.759 168.064 281.669 168.881 279.914 167.792 278.825 168.609 278.946 169.819 278.431 170.939 278.825 171.06 280.429 171.06 280.308 172.149 279.224 174.025 279.224 174.993 280.308 174.993 281.246 176.082 281.518 177.171 279.37 179.319 280.431 181.922 280.431 183.132 282.216 184.342 284.666 184.614 286.27 185.976 286.694 188.306 288.449 190.333 290.356 189.788 291.168 188.033 294.164 188.427 294.83 189.123 296.736 189.123 297.674 188.034 304.609 188.306 306.243 190.727 308.149 191.544 309.783 193.057 311.811 192.785 312.355 192.089 313.566 192.089 315.079 193.996 318.196 194.147 319.008 195.206 321.192 198.202 322.13 199.019 323.341 198.898 323.492 196.174 324.036 195.902 324.853 196.023 326.21 197.809 327.148 198.202 329.085 197.415 328.782 197.082 328.601 195.176 332.378 194.056 331.808 191.968 331.233 188.942 328.782 185.553 328.208 183.465 331.99 183.465 334.653 181.558 335.016 178.744 333.322 176.837 338.254 172.691 338.254 169.272 335.775 166.639 334.837 163.613 331.417 160.375 326.696 163.038 326.334 161.525 324.245 161.343 323.671 162.856 321.794 163.219 316.686 163.037 314.592 164.369 312.903 162.856 315.924 160.768 315.742 157.56 313.471 156.41 311.568 153.566 306.484 153.203"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-44"
-                        onClick={[Function]}
-                        points="168.01 176.083 167.828 178.171 163.682 178.746 161.775 180.622 161.019 182.71 149.308 183.285 144.375 185.918 144.193 191.213 138.897 193.301 135.296 195.177 132.27 195.177 131.15 193.876 129.455 195.571 128.638 195.722 129.606 196.388 126.005 199.596 126.762 200.353 127.518 201.866 125.612 204.529 127.7 205.649 131.301 206.405 131.664 204.892 133.752 207.555 137.171 207.555 139.622 204.892 142.83 204.892 139.441 206.586 139.623 208.493 140.379 210.187 138.291 212.275 136.021 212.275 136.414 215.119 140.56 214.363 145.493 218.902 145.251 219.205 148.822 221.535 149.609 223.411 152.878 224.833 155.39 225.136 156.479 228.101 160.382 229.039 163.015 229.523 164.437 227.949 163.015 225.922 162.41 221.534 163.651 220.142 165.376 220.142 166.163 221.867 165.679 224.984 166.768 225.771 169.582 224.833 170.52 221.716 169.279 220.445 172.396 220.445 173.485 218.417 174.574 218.568 177.086 220.928 178.902 221.17 178.963 219.203 177.389 217.176 175.997 217.176 175.513 217.327 174.575 216.873 175.362 216.086 175.362 214.664 176.935 214.21 177.873 212.031 177.086 211.244 176.935 208.581 174.908 208.581 172.881 206.069 172.881 204.223 175.06 203.103 178.964 202.347 185.047 202.498 186.923 201.227 186.288 197.323 183.474 194.69 180.055 195.144 179.117 194.357 178.966 191.573 181.447 189.364 179.571 187.034 178.33 183.736 176.303 182.495 176.303 180.316 176.091 179.62 172.55 178.743 170.856 176.473"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-43"
-                        onClick={[Function]}
-                        points="337.591 317.369 338.377 316.25 341.797 315.736 343.673 314.191 345.688 313.969 345.731 312.829 347.098 312.201 347.453 312.922 348.303 312.466 349.665 313.346 351.984 313.141 354.114 312.314 355.475 313.495 357.031 313.516 358.229 315.734 360.062 316.469 361.118 314.295 362.495 315.4 365.422 315.5 366.436 313.603 368.154 315.219 370.545 315.915 371.219 315.234 375.113 316.428 379.289 313.008 381.347 312.824 387.404 315.457 387.041 319.061 390.067 318.877 392.458 321.633 391.394 326.27 388.733 327.389 387.614 329.295 388.813 332.995 386.101 333.077 385.846 336.582 382.868 336.859 381.35 341.58 376.811 341.58 371.913 345.182 369.13 349.438 364.888 343.957 361.337 344.722 360.535 342.19 358.647 342.163 358.277 344.357 353.416 345.887 349.993 337.256 349.516 337.369 349.556 335.8 348.518 334.233 346.515 332.977 347.498 331.466 346.715 330.683 347.589 330.373 348.791 329.299 346.757 329.076 345.787 327.715 345.386 324.146 344.221 322.907 343.347 319.885 339.04 319.846 338.212 317.463"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-42"
-                        onClick={[Function]}
-                        points="368.126 265.353 364.706 265.928 364.162 268.016 365.493 270.649 365.856 281.422 361.317 281.633 361.13 283.328 364.156 285.779 362.461 287.472 361.887 291.65 364.158 294.671 366.216 299.573 371.154 302.806 372.843 309.039 369.241 312.429 369.816 314.7 375.112 316.427 379.288 313.007 381.346 312.823 387.404 315.456 387.041 319.06 390.067 318.876 392.458 321.632 394.213 321.148 397.484 320.544 398.331 316.822 402.84 314.159 403.264 308.198 403.415 308.104 401.206 307.772 399.144 308.587 397.485 307.559 399.543 305.111 398.938 303.262 392.553 302.236 387.199 297.301 387.199 295.637 388.434 294.61 388.434 293.186 387.012 292.337 388.222 290.489 388.222 287.826 385.775 285.555 385.775 283.284 384.11 281.65 384.11 279.802 383.296 276.714 384.536 275.474 384.748 271.785 388.649 271.785 389.675 270.544 388.434 268.486 388.434 266.64 387.411 265.823 386.682 269.696 384.594 269.696 383.081 271.209 381.931 270.059 375.879 269.121 373.608 270.453 372.091 270.453 371.728 269.121 368.884 268.546 368.702 265.52"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-41"
-                        onClick={[Function]}
-                        points="254.798 162.919 253.527 164.553 252.014 167.185 253.89 168.91 253.708 172.874 252.952 175.506 251.045 175.506 251.045 179.107 248.412 182.527 245.568 183.647 244.236 185.341 244.811 186.763 253.98 187.066 254.767 187.762 254.646 188.428 253.284 189.124 253.556 191 254.766 191.817 256.673 190.455 257.217 190.455 259.396 192.089 261.303 192.24 261.575 197.112 263.058 201.046 263.058 207.855 264.147 209.489 267.809 209.489 270.654 213.695 271.713 214.603 271.743 214.512 273.649 214.24 275.283 212.878 278.551 212.727 278.823 213.272 279.489 211.789 282.334 210.821 284.785 210.972 285.995 210.548 287.63 212.061 290.505 213.695 292.926 213.544 292.805 211.093 293.894 209.883 294.989 209.762 295.927 210.821 299.74 210.427 302.161 209.065 301.889 208.127 301.223 207.31 301.344 205.524 303.129 202.286 305.429 201.318 305.429 199.29 305.974 198.08 304.495 197.535 303.521 195.477 301.075 194.811 300.954 193.994 303.404 191.967 306.159 190.605 304.616 188.305 297.681 188.033 296.743 189.122 294.837 189.122 294.171 188.426 291.175 188.032 290.363 189.787 288.457 190.332 286.702 188.305 286.275 185.975 284.671 184.613 282.22 184.341 280.439 183.131 280.439 181.921 279.377 179.318 281.523 177.17 281.252 176.081 280.314 174.992 279.223 174.992 279.223 174.024 280.314 172.148 280.433 171.059 278.829 171.059 276.378 170.363 274.078 172.542 271.475 172.814 267.269 171.725 266.059 169.001 264.425 168.063 263.487 165.884 260.763 165.884 259.674 165.067 261.308 164.129 261.429 163.312 259.674 163.312 256.678 163.856"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-40"
-                        onClick={[Function]}
-                        points="174.728 358.709 168.736 361.795 167.193 361.856 163.834 379.835 159.477 396.481 158.145 402.923 157.025 407.462 154.211 412.307 159.658 415.03 164.621 414.699 167.526 412.128 169.917 414.004 168.556 415.364 169.585 415.727 170.432 414.516 174.729 414.848 177.12 412.973 181.569 413.155 183.294 412.276 186.018 412.276 186.714 413.155 188.923 412.461 190.981 414.004 193.734 413.155 197.335 411.944 197.85 412.794 203.327 412.978 206.051 411.435 204.719 409.105 206.051 405.501 207.927 403.05 207.352 399.842 208.865 398.329 206.626 394.546 208.502 392.275 210.59 391.879 212.466 392.636 215.129 390.365 216.067 393.21 217.005 394.541 219.093 393.967 218.911 391.519 219.516 390.187 219.06 389 219.575 385.247 221.633 383.189 220.604 381.978 218.365 381.791 215.793 380.793 212.041 381.126 211.345 377.015 208.954 374.111 207.925 373.777 208.288 377.197 208.288 378.226 205.02 378.372 201.601 377.186 200.905 372.889 198.514 370.322 196.82 370.173 196.638 368.628 194.762 367.418 191.675 366.57 192.522 365.541 192.522 364.517 191.493 363.665 190.313 362.642 186.863 363.156 184.836 364.851 183.444 365.033 181.235 363.49 177.967 364.851 176.424 363.822 177.816 362.128 177.967 359.889"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-39"
-                        onClick={[Function]}
-                        points="427.801 206.768 427.892 207.283 427.135 207.283 426.741 210.309 426.197 212.397 426.554 213.728 425.44 215.241 424.29 216.754 424.29 218.267 421.083 219.78 420.145 221.293 420.508 222.413 420.695 223.381 419.388 224.138 419.177 226.589 420.695 226.77 422.42 229.615 424.508 229.615 425.628 230.947 426.959 230.947 426.563 232.46 422.209 233.004 422.603 234.517 424.121 235.485 424.121 237.361 423.547 237.936 424.695 239.449 426.386 242.475 425.629 245.683 423.723 247.014 423.935 249.647 426.206 250.404 426.962 251.554 425.056 253.067 420.093 253.672 422.423 254.58 426.206 259.876 428.657 260.996 428.657 263.659 431.501 263.266 435.103 259.302 438.129 260.815 438.129 263.085 443.607 263.085 451.474 254.43 451.141 254.248 451.504 250.284 454.349 246.894 452.447 246.138 452.629 244.988 450.329 244.776 450.179 243.414 451.661 241.932 451.265 240.449 450.452 238.543 453.843 237.453 455.083 235.698 455.354 233.519 452.63 230.916 450.724 230.401 446.518 229.04 446.518 225.227 446.247 222.382 442.853 222.654 437.557 220.868 438.373 218.992 439.584 216.117 440.008 214.241 438.646 212.455 436.199 210.821 435.928 208.793 435.958 207.643 434.294 207.583 433.356 208.521 430.908 208.521 429.269 207.159"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-37"
-                        onClick={[Function]}
-                        points="244.812 186.765 245.175 187.612 239.698 189.125 238.397 191.031 236.097 189.518 237.247 193.301 235.159 193.301 231.376 190.638 229.5 194.421 230.438 195.571 230.438 196.691 228.531 199.172 228.743 203.318 225.717 206.919 223.568 214.666 223.81 214.666 224.566 217.692 228.167 218.448 228.167 220.718 232.707 222.05 232.707 225.651 232.525 227.921 238.184 227.921 243.117 226.771 242.723 224.683 244.236 223.745 245.749 225.833 247.081 226.408 248.201 230.947 251.439 234.336 251.802 236.999 254.737 239.904 256.402 239.753 258.46 237.847 259.943 230.131 260.881 227.407 261.577 224.018 264.573 222.929 266.6 223.322 267.962 224.563 269.445 222.112 270.807 220.871 270.807 219.389 272.562 219.268 272.986 217.482 271.473 215.455 271.715 214.608 270.656 213.7 267.811 209.494 264.149 209.494 263.06 207.86 263.06 201.051 261.577 197.117 261.305 192.245 259.398 192.094 257.219 190.46 256.675 190.46 254.768 191.822 253.558 191.005 253.286 189.129 254.648 188.433 254.769 187.767 253.982 187.071"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-36"
-                        onClick={[Function]}
-                        points="285.997 210.55 284.787 210.974 282.336 210.823 279.491 211.791 278.825 213.274 278.553 212.729 275.285 212.88 273.651 214.242 271.745 214.514 271.473 215.452 272.986 217.479 272.562 219.265 270.807 219.386 270.807 220.868 269.445 222.109 267.962 224.56 266.6 223.319 264.573 222.926 261.577 224.015 260.881 227.404 259.943 230.128 258.46 237.844 256.402 239.75 254.737 239.901 255.221 240.385 255.221 243.986 254.464 246.256 258.065 249.101 259.941 250.977 262.967 251.371 264.117 255.335 266.175 256.455 265.812 259.3 264.299 259.572 264.844 259.693 269.595 260.056 271.289 258.362 274.315 261.388 278.098 257.031 279.792 258.181 282.063 257.969 282.819 258.363 286.243 258.545 287.363 255.519 296.835 256.669 300.437 257.607 302.076 257.425 302.167 255.912 304.073 254.005 303.677 252.371 302.587 250.223 302.982 249.406 303.132 246.955 303.798 246.138 303.949 245.594 302.31 244.111 301.765 242.204 299.198 240.843 299.198 239.209 301.074 238.12 301.074 237.031 299.317 235.548 298.77 234.61 300.13 233.914 300.01 232.704 302.158 230.919 302.037 230.132 300.281 230.132 299.192 228.891 299.192 228.225 300.13 226.591 300.13 225.381 297.951 222.506 298.375 219.934 297.135 218.996 294.567 219.117 292.541 219.934 289.814 219.541 288.455 218.451 288.184 217.634 290.368 215.849 290.514 213.7 287.639 212.066"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-35"
-                        onClick={[Function]}
-                        points="151.911 127.726 150.096 129.784 151.155 135.503 152.729 136.108 153.667 137.984 152.729 141.434 151.791 150.028 148.825 150.633 147.403 149.241 146.011 151.269 143.348 152.207 141.32 156.564 140.079 158.138 140.533 160.165 139.746 163.282 138.354 164.553 138.354 165.794 139.292 166.096 141.955 166.096 144.285 167.518 145.859 170.332 144.437 172.208 144.921 174.054 146.949 174.054 147.1 175.93 145.526 177.806 143.831 178.593 144.92 179.228 145.223 180.166 143.498 181.558 145.495 185.31 149.308 183.283 161.019 182.708 161.775 180.62 163.682 178.744 167.828 178.169 168.01 176.081 170.855 176.475 172.549 178.745 176.362 179.683 177.088 178.17 178.057 174.751 180.508 168.699 181.84 167.943 185.048 168.336 185.048 163.222 183.716 161.89 183.716 156.412 183.141 154.536 183.141 151.51 185.048 149.603 185.048 145.82 184.11 145.064 184.292 139.768 182.779 139.012 180.509 139.012 178.603 137.499 176.545 139.95 174.85 140.162 173.337 142.22 171.824 141.857 168.586 139.012 167.466 135.411 166.891 133.02 157.601 133.02 154.182 130.932 156.452 127.906"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-34"
-                        onClick={[Function]}
-                        points="323.37 416.961 320.434 414.268 321.221 411.605 322.825 409.214 325.488 411.061 332.448 408.67 333.537 406.521 338.348 406.521 338.077 399.047 339.681 399.047 342.617 400.65 345.552 400.65 345.038 397.443 346.642 396.081 349.85 395.566 349.85 394.568 352.573 395.506 352.573 397.049 353.784 397.745 354.812 396.867 356.174 396.867 356.87 398.41 358.928 398.41 359.956 394.809 361.651 394.809 364.223 391.572 367.309 391.902 367.824 396.352 369.005 397.744 370.911 396.716 374.148 398.408 375.359 400.468 380.988 403.889 383.046 408.699 383.046 411.24 379.444 413.299 377.225 415.331 374.511 415.205 357.867 427.885 356.173 429.973 350.877 430.155 350.121 431.85 343.311 433.938 343.19 434.966 340.769 434.875 339.945 432.225 337.531 431.97 335.291 428.701 333.566 428.883 331.539 427.672 331.175 424.769 330.148 425.282 330.589 427.184 328.272 427.34 328.09 430.76 324.519 431.971 322.794 428.369 320.403 429.912 318.345 428.369 317.316 425.978 319.041 423.92 318.225 421.711 322.28 420.444"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-33"
-                        onClick={[Function]}
-                        points="176.12 301.363 173.094 305.902 172.156 321.79 169.705 337.857 167.98 350.326 167.798 353.564 169.13 349.207 171.763 345.787 175.546 349.207 175.939 350.326 177.059 351.839 172.338 352.051 171.582 350.901 169.706 351.663 169.312 354.508 167.224 357.357 167.224 361.681 167.194 361.867 168.737 361.805 174.729 358.719 177.967 359.901 177.816 362.138 176.424 363.832 177.967 364.859 181.235 363.5 183.444 365.043 184.836 364.859 186.863 363.166 190.313 362.65 191.493 363.675 192.522 364.527 192.522 365.551 191.675 366.58 194.762 367.428 196.638 368.64 196.82 370.185 198.514 370.332 200.905 372.901 201.601 377.201 205.02 378.382 208.288 378.234 208.288 377.204 207.925 373.785 208.954 374.117 210.891 376.478 213.917 375.994 215.309 374.633 215.127 372.758 213.917 371.731 214.28 369.826 216.156 369.826 218.032 368.643 217.185 366.917 216.67 364.345 218.032 361.953 220.937 357.506 222.662 355.445 224.205 354.929 224.538 353.236 222.48 353.051 221.633 351.176 222.299 349.299 224.72 348.783 226.415 348.266 228.412 347.995 228.291 347.902 228.14 344.15 230.016 342.79 227.625 341.247 225.234 344.15 219.394 344.333 218.879 342.939 217.185 342.089 218.547 340.361 218.547 338.486 217.851 337.458 217.851 336.433 219.576 335.404 220.09 332.349 221.119 329.593 220.09 328.047 218.214 328.047 217.215 326.866 216.246 328.891 214.37 327.559 211.707 328.891 209.437 328.531 205.11 324.175 202.447 323.992 201.691 317.936 196.758 317.364 196.576 314.516 195.638 315.454 190.039 315.454 190.311 316.665 191.643 322.144 192.006 327.623 191.068 329.137 190.13 324.598 187.467 314.217 177.814 305.502 178.026 301.537"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-32"
-                        onClick={[Function]}
-                        points="240.636 385.277 234.977 385.822 233.464 388.484 230.045 388.847 226.837 389.418 225.505 387.541 222.479 390.563 220.24 388.66 218.908 391.506 219.09 393.957 217.002 394.531 216.064 393.2 215.126 390.35 212.463 392.621 210.587 391.865 208.499 392.26 206.623 394.531 208.862 398.312 207.349 399.827 207.924 403.035 206.048 405.486 204.716 409.087 206.229 411.75 211.01 412.083 212.886 411.084 215.791 411.084 215.64 414.322 217.849 415.533 220.088 415.865 221.117 418.619 221.632 419.134 221.299 420.828 220.603 421.524 222.661 422.88 222.812 424.424 225.384 424.424 226.08 423.733 228.289 423.733 228.985 425.276 231.376 425.276 232.072 426.669 236.702 426.669 240.152 428.454 240.455 428.03 242.331 427.002 245.75 422.553 252.104 423.073 254.828 424.949 255.705 423.739 257.067 419.654 258.762 415.717 262.363 414.171 264.088 413.477 263.574 411.934 261.849 411.75 261.183 410.057 259.791 410.057 257.582 407.82 257.733 406.277 254.828 403.373 254.314 401.525 252.438 402.34 251.924 401.313 253.134 399.436 251.742 398.078 251.742 395.684 250.562 394.473 246.779 394.289 246.779 392.08 248.837 390.537 248.837 388.81 251.076 387.783 249.866 387.117 248.504 387.783 245.751 387.783 244.903 387 244.449 387.15 243.481 388.088"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-31"
-                        onClick={[Function]}
-                        points="276.586 395.506 273.832 396.535 272.985 397.896 271.956 396.711 270.08 396.528 269.717 398.254 268.537 398.738 270.231 399.615 269.051 401.492 264.754 402.702 262.878 400.463 261.184 400.463 259.792 401.316 254.829 401.316 254.315 401.527 254.829 403.373 257.734 406.279 257.583 407.822 259.792 410.06 261.184 410.06 261.85 411.75 263.575 411.937 264.089 413.48 262.364 414.171 258.763 415.72 257.068 419.654 255.706 423.739 254.829 424.949 252.105 423.073 245.751 422.553 242.332 427.002 240.456 428.03 239.246 429.721 237.884 431.783 237.884 432.993 235.675 433.841 233.95 436.746 233.768 438.289 236.854 440.528 237.369 442.737 236.34 444.462 238.398 443.772 239.427 444.649 240.274 448.215 237.883 449.611 238.065 451.487 236.855 452.668 235.161 451.82 233.254 451.82 233.496 461.988 241.183 462.503 241.576 453.213 244.209 453.609 248.113 455.88 249.717 454.401 249.021 453.373 249.021 449.953 250.715 447.891 255.194 446.68 255.86 444.138 254.831 443.448 254.68 440.177 258.614 437.786 260.823 437.635 263.062 438.301 264.938 440.03 266.148 440.176 267.177 438.487 266.299 437.273 264.756 436.757 264.605 436.242 265.785 434.547 269.9 434.185 270.415 433.187 269.719 431.976 267.328 430.25 267.842 429.222 269.052 428.374 270.232 428.707 272.138 431.279 272.289 433.004 275.558 433.337 276.224 431.794 274.681 429.917 275.71 430.25 279.492 431.976 281.55 431.643 283.065 431.007 282.706 430.613 285.127 429.523 285.642 426.585 288.609 425.253 287.796 423.377 290.487 420.956 291.816 423.377 295.809 422.046 296.568 421.925 296.63 420.685 296.63 418.265 294.57 418.626 292 417.933 289.761 415.206 288.913 413.996 284.465 412.12 283.438 410.577 284.798 410.059 284.798 408.184 283.438 406.639 281.711 403.887 281.561 401.493 281.046 401.159 278.988 398.738 278.141 396.195"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-30"
-                        onClick={[Function]}
-                        points="374.571 365.094 373.633 366.909 372.452 367.937 370.213 368.295 372.942 371.2 372.942 375.138 374.152 375.47 372.791 377.013 372.791 379.915 370.552 383.334 365.589 382.819 362.684 380.091 360.626 380.608 361.322 382.3 360.469 383.512 355.476 384.538 349.636 380.637 348.516 381.634 348.516 384.327 346.37 384.841 346.915 386.989 349.578 387.534 352.514 387.534 353.33 391.257 349.851 392.861 349.851 394.554 352.579 395.492 352.579 397.035 353.79 397.729 354.818 396.852 356.175 396.852 356.871 398.395 358.929 398.395 359.957 394.791 361.652 394.791 364.219 391.557 367.305 391.889 367.825 396.337 369.006 397.729 370.912 396.703 374.149 398.395 375.36 400.455 380.989 403.875 383.047 408.687 383.047 411.228 379.445 413.288 377.115 415.378 380.019 415.591 380.019 419.371 384.342 419.159 386.672 419.28 388.366 415.343 394.51 411.59 393.178 409.713 394.782 405.444 400.38 406.231 401.742 396.061 409.217 391.794 409.217 389.372 403.588 383.771 403.588 379.474 400.38 374.148 393.692 370.396 393.172 373.333 390.484 373.604 389.697 370.666 387.004 371.184 386.489 374.938 384.341 374.151 379.802 371.184 377.656 372.274 377.656 366.92"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-38"
-                        onClick={[Function]}
-                        points="424.653 285.355 423.413 286.808 422.172 290.496 419.693 291.734 417.03 289.255 415.179 289.255 414.967 291.948 417.66 294.219 413.545 299.541 408.191 300.782 404.076 302.232 406.739 304.894 407.374 306.132 403.259 308.194 402.835 314.155 402.714 314.217 403.864 316.609 407.163 317.638 409.433 316.822 412.096 314.974 415.611 317.849 418.486 317.849 420.544 320.724 419.696 322.784 420.12 325.687 419.092 328.562 419.515 329.589 420.941 329.163 424.241 330.19 428.569 331.428 430.415 330.19 431.227 328.766 431.868 328.766 432.05 344.167 433.079 345.195 435.767 345.195 438.218 346.646 440.067 348.099 441.945 348.282 443.155 349.308 446.575 349.704 446.812 349.131 445.299 348.372 445.299 346.101 450.021 346.101 451.538 344.586 450.6 342.894 453.051 340.989 454.78 341.745 457.226 339.657 461.553 340.415 463.071 338.721 466.673 338.907 466.673 334.761 465.159 334.003 464.401 331.554 460.433 331.158 459.862 330.22 460.62 326.255 461.952 325.107 460.86 323.627 458.799 322.387 457.558 323.627 457.985 321.961 457.985 320.328 456.323 318.663 457.171 314.762 459 313.74 458.788 311.078 454.885 307.174 453.432 307.174 452.409 308.596 449.958 305.328 448.505 305.51 447.265 308.203 448.117 309.837 447.477 310.473 445.842 309.233 441.091 308.209 438.852 304.093 438.852 302.429 436.582 299.982 436.34 298.92 428.778 289.691 427.927 287.027 426.293 285.576"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-29"
-                        onClick={[Function]}
-                        points="78.709 121.099 76.651 123.369 74.381 122.431 70.205 122.825 69.45 124.7 66.999 125.275 66.605 123.187 62.278 123.762 62.278 125.094 59.252 125.276 57.92 124.338 56.407 125.095 56.013 127.365 50.929 127.547 48.266 130.755 50.536 132.45 47.51 134.931 48.448 136.626 47.692 140.772 50.718 141.165 51.868 140.015 52.443 140.772 59.615 139.834 64.336 136.445 60.19 140.409 60.553 142.285 64.336 140.591 63.58 143.254 67.756 143.435 67.574 144.555 63.035 144.374 59.434 143.436 55.077 141.348 52.444 144.374 55.833 145.524 55.651 150.607 56.589 149.851 58.677 146.643 62.641 148.913 64.548 149.306 65.304 152.332 64.154 154.39 61.703 154.208 59.433 154.208 55.65 154.783 49.205 155.146 47.904 156.871 49.78 157.991 51.868 157.809 53.562 159.322 56.013 159.14 60.008 163.679 60.946 168.581 59.614 171.244 63.578 172 67.935 171.789 68.873 170.094 67.179 167.824 68.873 168.58 70.598 168.398 73.624 170.093 75.5 169.73 75.5 166.492 76.256 169.73 78.707 173.694 84.003 174.057 84.214 172.937 85.515 174.813 88.753 175.388 91.204 175.388 91.355 175.599 92.263 171.877 94.472 171.877 95.561 170.152 96.953 170.152 97.104 167.368 97.891 166.43 96.348 164.372 95.41 165.492 93.05 163.616 88.208 162.829 87.421 160.015 86.029 156.413 85.878 155.021 88.208 153.145 90.417 153.145 93.564 151.632 92.898 149.241 93.836 148.303 93.534 142.826 92.112 140.95 92.112 138.619 94.321 137.984 91.961 137.197 91.81 135.351 92.899 134.564 94.473 132.99 92.748 131.901 92.899 129.874 90.569 129.723 91.658 124.639 88.541 122.824 83.245 123.006 83.245 126.788 81.732 126.788 81.369 125.094 79.099 125.457"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-28"
-                        onClick={[Function]}
-                        points="278.674 118.224 277.524 119.162 277.524 122.188 273.741 124.064 273.741 126.908 272.621 128.24 267.87 128.24 265.631 127.302 258.792 130.873 256.159 130.873 253.435 133.476 254.071 133.899 254.253 137.137 258.247 140.526 258.61 147.516 256.734 149.786 253.89 150.361 251.045 152.055 251.439 153.568 252.74 155.293 252.74 159.772 253.133 159.833 255.766 161.709 254.798 162.919 256.674 163.857 259.67 163.313 261.425 163.313 261.304 164.13 259.67 165.068 260.759 165.885 263.483 165.885 264.421 168.064 266.055 169.002 267.265 171.726 271.471 172.815 274.074 172.543 276.374 170.364 278.432 170.939 278.947 169.819 278.826 168.609 279.915 167.792 281.67 168.881 282.76 168.064 282.76 166.581 284.242 165.613 285.599 166.157 286.814 167.519 288.993 166.309 291.293 166.309 292.928 164.524 293.897 161.014 295.379 160.742 294.985 157.201 296.74 155.718 296.195 154.629 296.407 154.266 295.887 154.327 295.493 149.243 295.097 148.668 294.739 146.217 290.773 145.461 289.044 143.373 288.499 139.197 286.228 138.834 285.832 136.746 283.199 134.87 281.868 131.632 283.199 129.362 281.868 127.849 281.868 125.973 282.625 123.885 281.109 122.372 280.537 120.102"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-27"
-                        onClick={[Function]}
-                        points="243.662 87.69 242.028 88.084 239.849 90.414 235.612 90.958 236.489 97.979 238.396 98.554 238.396 99.31 236.489 100.43 238.759 103.638 239.909 108.177 239.697 110.083 238.002 111.203 238.184 112.535 240.09 113.292 240.272 114.986 238.759 119.344 240.272 121.25 245.568 121.432 246.688 124.065 248.594 125.971 251.227 126.909 252.014 129.754 250.683 131.63 253.436 133.476 256.16 130.873 258.793 130.873 265.632 127.302 267.871 128.24 272.622 128.24 273.742 126.908 273.742 124.064 277.525 122.188 277.525 119.162 278.554 118.314 278.463 117.467 279.431 116.499 277.737 116.136 277.737 114.623 276.769 113.11 277.525 112.172 282.82 110.659 284.152 108.389 285.298 104.213 286.694 102.488 286.997 100.249 288.691 101.187 290.023 100.824 289.049 99.311 288.504 94.954 286.814 93.441 286.84 93.32 283.849 92.987 278.826 90.415 274.469 90.536 272.169 92.563 270.929 96.104 266.057 96.649 261.427 98.011 263.061 99.1 262.395 100.734 260.216 100.734 259.006 98.131 257.644 98.131 255.465 96.497 258.461 95.559 253.831 92.29 249.231 92.562 248.142 90.686 245.539 90.958"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-26"
-                        onClick={[Function]}
-                        points="412.096 314.98 409.433 316.827 407.163 317.644 404.892 316.947 404.892 324.664 406.345 330.414 407.373 333.713 409.008 337.828 407.984 340.491 406.133 344.002 405.709 346.059 403.863 346.455 404.886 351.205 404.886 355.291 402.407 358.193 401.802 361.882 402.83 363.519 402.226 364.972 402.226 366.421 403.038 366.607 403.643 367.455 403.428 371.45 405.943 371.087 407.063 372.418 406.518 376.2 407.274 377.138 410.086 374.29 412.567 374.104 413.112 372.59 409.904 372.195 409.36 368.804 411.418 365.597 414.081 365.386 416.714 367.865 414.081 371.435 414.837 372.765 418.62 373.161 421.071 371.073 419.739 373.918 420.133 376.189 424.101 376.551 429.398 376.945 430.155 379.396 433 381.484 435.451 381.667 437.144 380.155 438.114 377.308 439.627 378.64 440.746 379.972 441.503 372.951 439.627 372.589 438.479 370.139 432.067 368.412 431.28 365.205 433.58 363.691 431.674 362.359 432.07 360.666 435.091 360.85 437.724 362.182 439.817 359.731 437.724 358.039 437.911 355.768 439.057 352.164 443.021 351.768 446.229 350.467 446.562 349.709 443.142 349.314 441.932 348.287 440.056 348.103 438.21 346.65 435.759 345.2 433.071 345.2 432.042 344.173 431.855 328.77 431.219 328.77 430.407 330.197 428.556 331.434 424.229 330.197 420.93 329.168 419.507 329.593 419.084 328.566 420.112 325.691 419.684 322.789 420.536 320.728 418.474 317.853 415.6 317.853"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-25"
-                        onClick={[Function]}
-                        points="471.587 189.519 471.405 189.73 469.221 189.73 468.107 191.273 466.679 192.09 466.679 193.997 463.139 194.421 461.237 193.059 458.666 193.452 456.215 195.359 454.459 198.355 452.704 198.9 451.887 200.927 449.708 201.321 446.713 203.772 442.778 203.651 441.568 204.589 440.474 204.589 436.662 207.706 434.934 207.645 434.906 208.795 435.177 210.823 437.628 212.457 438.99 214.243 438.566 216.119 437.355 218.994 436.539 220.87 441.835 222.656 445.224 222.384 445.496 225.229 445.496 229.042 449.702 230.403 451.608 230.918 454.332 233.521 454.061 235.7 452.824 237.455 449.429 238.545 450.246 240.451 450.64 241.934 449.161 243.416 449.308 244.778 451.611 244.99 451.636 244.808 463.348 233.824 462.99 224.745 467.136 222.687 469.986 221.355 472.619 218.904 472.831 215.303 475.463 213.971 481.516 206.981 480.578 204.711 482.666 203.773 485.117 200.747 483.786 199.415 479.247 200.353 479.06 199.596 483.241 194.784"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-24"
-                        onClick={[Function]}
-                        points="242.542 296.764 240.848 299.79 238.185 300.152 238.003 304.691 229.107 310.744 228.925 317.371 225.506 320.762 223.63 322.491 219.847 322.095 217.759 325.699 217.215 326.881 218.214 328.063 220.09 328.063 221.119 329.608 220.09 332.363 219.576 335.421 217.851 336.447 217.851 337.473 218.547 338.502 218.547 340.378 217.185 342.106 218.879 342.955 219.394 344.349 225.234 344.166 227.625 341.263 230.016 342.806 228.14 344.166 228.291 347.919 231.045 349.822 231.378 353.393 234.283 354.419 236.008 352.876 239.76 352.876 241.818 351.184 243.028 351.369 243.361 352.727 247.144 352.727 247.991 351.7 249.353 351.883 250.896 353.578 250.896 354.787 249.535 355.636 250.049 356.847 251.925 356.996 254.316 354.787 256.374 354.787 257.736 356.332 260.701 357.57 260.883 357.088 262.608 355.396 262.79 352.549 266.936 352.189 269.599 348.406 268.449 348.011 268.267 345.95 271.475 345.554 271.687 343.677 273.2 342.709 274.894 339.683 273.2 337.804 273.2 335.715 274.501 334.595 272.806 331.935 272.988 327.789 268.842 327.972 267.148 326.823 268.661 324.948 266.573 323.256 268.086 321.352 266.573 320.594 266.573 317.961 270.356 314.541 268.268 312.846 267.148 310.002 263.153 309.428 261.821 308.49 264.666 307.158 263.728 305.856 259.582 305.283 258.614 301.502 252.562 300.929 251.23 302.834 249.929 303.195 248.204 300.924 248.991 298.836 248.023 296.959"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-23"
-                        onClick={[Function]}
-                        points="278.098 257.031 279.792 258.181 282.062 257.969 282.818 258.363 286.242 258.545 287.362 255.519 296.834 256.669 300.436 257.607 306.609 256.844 308.937 260.058 308.937 262.328 310.203 263.938 311.547 262.406 313.087 264.991 315.175 265.748 317.263 270.65 317.619 276.518 319.133 278.395 319.859 282 317.619 283.689 317.047 286.375 311.385 289.562 311.734 291.188 315.679 295.189 313.785 296.656 310.06 296.656 308.848 298.505 306.578 298.505 304.688 296.594 303.906 295.438 299.159 295.417 298.156 294 296.679 294.01 295.844 296.016 292.781 296.674 292.531 297.016 291.568 296.469 291.172 294.062 292.531 294.016 292.578 292.984 290.116 291.327 287.453 290.118 287.828 287.656 287.034 287.639 286.005 289.091 282.707 289.275 280.878 289.023 280.895 287.265 283.076 285.381 281.678 283.52 278.209 284.47 278.806 276.712 277.169 275.073 275.505 270.959 273.091 270.304 272.63 268.084 274.896 263.568 274.828 260.782"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-22"
-                        onClick={[Function]}
-                        points="106.913 115.44 105.188 116.772 100.86 117.316 99.892 118.648 96.866 116.378 92.902 119.041 94.415 121.099 91.782 124.7 91.661 124.639 90.572 129.723 92.902 129.874 92.751 131.901 94.476 132.99 92.902 134.564 91.813 135.351 91.964 137.197 94.324 137.984 92.115 138.619 92.115 140.95 93.537 142.826 93.839 148.303 92.901 149.241 93.688 152.055 96.654 152.842 96.957 154.385 98.833 154.536 100.407 153.447 101.345 154.385 104.946 155.959 107.911 154.385 108.668 152.842 111.18 152.66 113.994 155.172 116.657 154.536 118.987 156.896 120.076 156.896 121.165 158.288 123.374 158.288 124.131 157.199 125.069 159.226 127.429 160.164 130.395 158.288 130.395 156.261 132.574 155.474 133.966 155.474 135.691 158.621 139.443 158.923 141.319 156.563 143.347 152.206 146.01 151.268 147.402 149.24 148.824 150.632 151.79 150.027 152.728 141.433 153.666 137.983 152.728 136.107 151.154 135.502 150.095 129.783 148.885 131.145 145.284 130.751 144.921 132.839 142.651 133.021 142.469 130.388 140.563 129.813 139.231 131.326 139.231 127.543 136.961 129.237 133.572 128.662 132.422 130.932 125.432 134.715 125.432 136.621 123.919 136.621 123.919 133.202 119.955 131.326 120.318 127.906 116.747 125.274 116.747 122.066 114.084 121.491 114.266 118.465 112.208 118.283 112.39 116.195 108.607 116.195 108.032 118.071"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-21"
-                        onClick={[Function]}
-                        points="391.215 167.761 390.821 170.212 388.37 171.544 382.137 171.726 382.409 173.087 382.555 174.449 380.654 175.811 380.654 178.111 381.048 178.535 382.561 178.535 383.499 180.139 382.955 182.862 380.776 184.496 380.776 186.13 381.466 186.674 381.32 187.068 379.959 187.612 379.565 189.64 377.381 194.27 375.902 196.449 375.902 198.628 376.446 199.566 375.63 200.655 373.724 201.593 373.845 203.5 375.63 204.589 376.296 206.072 376.025 208.13 375.629 209.613 376.567 211.247 379.291 211.792 380.502 213.698 380.502 214.515 379.686 214.787 379.686 216.754 379.836 216.815 383.497 220.598 387.309 220.477 390.702 223.049 393.153 224.835 393.273 227.135 395.841 227.68 398.025 229.435 403.745 227.408 407.679 226.167 409.436 225.895 409.98 225.108 411.886 225.229 413.368 226.167 415.547 225.622 417.726 224.14 419.365 224.322 419.39 224.14 420.697 223.383 420.51 222.415 420.148 221.295 421.086 219.782 424.293 218.269 424.293 216.756 425.443 215.243 426.557 213.73 426.2 212.399 426.744 210.311 427.138 207.285 427.896 207.285 427.713 206.165 426.956 205.408 426.744 201.625 425.05 201.444 424.687 198.418 422.599 197.45 423.357 196.512 424.505 196.149 426.956 193.305 426.744 191.792 425.226 188.766 422.992 188.373 422.205 190.279 418.059 191.217 417.665 190.279 414.639 186.496 412.949 187.434 410.678 187.253 409.921 185.74 406.896 185.922 406.714 182.714 405.019 181.564 407.47 178.932 403.116 173.061 399.723 169.46 396.701 167.765 391.222 167.765"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-19"
-                        onClick={[Function]}
-                        points="296.68 294.01 295.868 296.069 292.782 296.674 291.571 298.731 290.119 298.731 288.057 298.127 286.604 300.577 284.37 300.79 282.918 303.452 281.066 303.452 279.614 304.905 275.922 304.48 274.681 306.539 273.259 306.357 270.778 309.443 268.508 308.595 267.448 310.741 268.265 312.829 270.353 314.521 266.57 317.943 266.57 320.577 268.083 321.333 266.57 323.239 268.658 324.931 267.145 326.806 268.839 327.954 272.985 327.77 272.803 331.916 274.377 334.395 274.952 334.305 278.977 332.428 283.789 334.574 287.511 339.9 289.659 339.629 292.867 336.419 293.926 338.297 296.074 336.178 299.01 336.965 299.101 337.602 301.552 335.874 300.795 333.999 299.649 332.85 301.162 330.975 302.675 330.975 303.647 327.951 304.406 326.436 303.831 323.016 306.282 319.624 309.701 317.535 309.883 312.24 311.578 313.178 313.483 315.266 315.36 315.266 316.506 313.936 315.568 311.665 316.506 308.275 315.931 305.068 314.785 303.736 314.785 301.074 316.511 298.262 316.117 295.598 315.692 295.174 313.787 296.654 310.061 296.654 308.849 298.503 306.579 298.503 304.733 296.654 303.88 295.415 299.159 295.415 298.13 293.991 296.679 293.991"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-18"
-                        onClick={[Function]}
-                        points="306.151 190.608 303.397 191.97 300.946 193.997 301.067 194.814 303.513 195.48 304.487 197.538 305.966 198.083 305.421 199.293 305.421 201.321 303.121 202.289 301.336 205.527 301.215 207.313 301.881 208.13 302.153 209.068 299.732 210.43 295.919 210.824 294.981 209.765 293.886 209.886 292.797 211.096 292.918 213.547 290.497 213.698 290.349 215.847 288.167 217.632 288.438 218.449 289.795 219.539 292.524 219.932 294.546 219.115 297.118 218.994 298.358 219.932 297.932 222.504 300.113 225.379 300.113 226.589 299.175 228.223 299.175 228.889 300.266 230.13 302.024 230.13 302.145 230.917 299.997 232.702 300.117 233.912 298.756 234.608 299.301 235.546 301.059 237.029 301.059 238.118 299.182 239.207 299.182 240.841 301.752 242.202 302.297 244.109 303.934 245.592 303.785 246.136 303.119 246.953 302.968 249.404 302.574 250.221 303.664 252.369 304.06 254.003 302.157 255.91 302.066 257.423 306.509 256.878 307.416 254.941 309.867 252.127 314.588 251.159 317.069 251.915 319.702 249.857 319.518 248.344 318.58 247.588 318.58 244.562 323.664 239.448 325.57 241.536 327.26 239.811 328.777 239.63 331.41 236.24 335.766 236.603 335.828 237.632 337.28 233.002 336.342 231.308 336.529 228.857 337.104 223.924 335.011 221.866 335.407 217.326 333.501 213.332 333.319 210.699 329.899 208.036 329.354 205.766 331.044 203.315 331.044 199.714 329.076 197.414 327.138 198.201 326.2 197.808 324.838 196.022 324.026 195.901 323.482 196.173 323.331 198.897 322.12 199.018 321.182 198.201 319 195.205 318.188 194.146 315.071 193.995 313.555 192.088 312.343 192.088 311.798 192.784 309.775 193.056 308.138 191.543 306.235 190.726"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-17"
-                        onClick={[Function]}
-                        points="172.336 288.288 174.999 288.288 174.424 287.35 174.242 284.718 176.512 284.901 177.45 280.723 175.755 278.272 176.512 277.153 178.782 277.516 178.964 275.428 177.269 274.671 176.301 272.038 173.668 271.463 172.912 269.768 170.831 269.864 170.355 268.98 170.643 267.864 173.487 267.501 173.85 265.595 176.876 263.144 175.484 261.873 181.264 258.363 183.927 258.181 185.042 261.203 188.643 259.69 191.487 261.808 191.578 264.592 193.636 266.831 193.636 268.072 196.723 270.342 200.627 270.554 203.29 274.034 207.618 273.64 211.128 276.086 213.791 277.326 214.214 279.388 215.697 280.81 215.636 280.836 214.002 286.8 213.579 290.701 212.157 291.305 210.099 291.12 209.675 290.096 207.405 290.096 206.195 291.12 203.502 291.12 201.232 292.331 202.897 292.971 203.108 297.295 203.925 297.479 202.472 299.143 204.137 300.17 206.376 302.231 207.617 304.29 209.07 305.712 208.646 307.773 207.829 308.587 209.07 309.828 209.07 311.28 206.589 313.339 207.618 314.155 209.071 314.579 209.071 314.974 207.013 315.79 207.195 316.818 208.436 317.454 212.34 316.818 214.004 318.664 215.245 320.329 219.27 323.054 217.757 325.687 216.244 328.894 214.368 327.564 211.705 328.894 209.435 328.535 205.108 324.18 202.445 323.996 201.689 317.942 196.756 317.368 196.574 314.521 195.636 315.459 190.037 315.459 188.615 308.923 182.563 302.871 180.475 302.475 180.293 300.6 177.63 299.083 173.666 295.848 171.396 296.061 171.002 291.885 170.687 288.453"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-17"
-                        onClick={[Function]}
-                        points="170.254 287.084 169.883 284.141 165.526 280.934 165.92 274.307 168.553 277.514 171.761 277.91 172.154 282.451 173.092 283.207 173.411 284.186 172.545 287.214 171.093 287.545"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-17"
-                        onClick={[Function]}
-                        points="170.024 267.911 169.129 266.169 165.346 265.806 164.953 263.899 162.683 262.386 159.475 263.535 161.563 266.561 164.196 266.561 166.859 268.256 168.947 269.95 169.897 268.7"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-16"
-                        onClick={[Function]}
-                        points="239.093 271.98 237.459 273.22 237.67 275.908 236.641 276.72 233.736 275.056 230.861 276.085 227.563 276.298 225.082 273.271 224.295 273.423 220.996 275.056 218.515 275.697 218.515 277.12 217.093 278.784 217.486 279.808 215.64 280.837 214.006 286.798 213.583 290.701 212.161 291.305 210.103 291.118 209.679 290.094 207.409 290.094 206.199 291.118 203.506 291.118 201.236 292.329 202.901 292.969 203.112 297.295 203.929 297.479 202.476 299.143 204.141 300.17 206.38 302.229 207.621 304.288 209.074 305.71 208.65 307.769 207.833 308.585 209.074 309.826 209.074 311.278 206.593 313.337 207.622 314.153 209.075 314.577 209.075 314.97 207.017 315.788 207.199 316.815 208.44 317.452 212.344 316.815 214.008 318.662 215.249 320.327 219.274 323.05 219.849 322.081 223.632 322.476 225.508 320.75 228.927 317.36 229.109 310.733 238.005 304.68 238.187 300.141 240.85 299.778 242.544 296.753 243.603 296.784 244.239 293.909 245.752 293.727 246.69 291.063 248.596 290.489 250.866 288.975 250.503 284.25 252.197 283.68 255.586 282.918 255.405 281.229 254.83 278.596 252.197 278.381 250.684 276.69 251.622 274.995 251.683 273.452 249.988 272.604 246.72 272.604 245.267 274.239 241.757 275.69 240.547 274.45"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        fillRule="nonzero"
-                        id="dpt-15"
-                        onClick={[Function]}
-                        points="321.945 311.287 323.489 314.525 326.516 314.469 327.756 313.346 329.814 314.373 330.843 314.523 333.415 318.458 336.138 318.641 336.834 317.279 338.212 317.463 339.031 319.797 343.347 319.885 344.221 322.907 345.4 324.113 345.732 327.714 346.757 329.076 348.672 329.328 347.609 330.286 346.781 330.656 347.391 331.438 346.515 332.977 348.518 334.233 349.516 335.766 349.516 337.369 344.674 339.124 343.156 342.422 339.771 340.244 337.108 348.562 334.359 354.766 332.724 352.775 332.172 347.438 330.359 347.359 329.516 342.078 325.781 342.531 325.266 339.156 324.701 338.312 319.345 342.878 319.312 347.344 318.014 347.417 317.469 351.688 316.138 352.232 315.078 354.624 309.178 354.624 308.663 353.837 305.97 353.837 304.366 356.5 302.297 356.188 303.234 353.094 300.938 351.922 303.208 346.333 300.088 343.934 299.1 337.604 301.5 335.891 300.794 334.001 299.703 332.844 301.161 330.977 302.625 330.984 303.646 327.952 304.404 326.438 303.829 323.018 306.28 319.626 309.699 317.537 309.906 312.359 311.531 313.203 313.438 315.266 315.297 315.297 316.504 313.938 315.566 311.667 316.135 309.593"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-14"
-                        onClick={[Function]}
-                        points="235.583 90.808 231.165 91.595 223.963 95.771 215.853 98.979 209.407 95.378 193.913 93.108 190.312 91.232 184.714 92.654 185.047 94.742 183.958 95.831 184.109 97.374 187.71 100.975 189.889 102.216 191.462 100.189 192.703 101.762 191.13 103.79 192.552 106.12 191.917 106.907 193.006 109.116 192.401 111.597 190.827 114.109 188.315 115.652 186.923 114.563 185.531 115.804 187.074 117.226 185.833 119.556 182.867 120.645 186.468 125.185 190.039 125.487 192.793 127.273 196.606 126.123 199.42 122.855 203.323 123.944 206.742 121.584 208.8 120.827 210.979 123.006 214.58 122.37 217.697 124.095 221.601 122.854 225.172 120.191 227.532 117.528 229.106 117.225 229.56 119.253 230.801 118.95 230.952 117.528 234.553 116.923 235.794 117.679 239.637 116.832 240.272 114.986 240.09 113.292 238.184 112.535 238.002 111.203 239.697 110.083 239.909 108.177 238.759 103.638 236.489 100.43 238.396 99.31 238.396 98.554 236.489 97.979"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-13"
-                        onClick={[Function]}
-                        points="407.042 392.055 401.746 395.08 400.384 405.248 394.786 404.461 393.182 408.729 394.514 410.606 388.37 414.358 386.676 418.296 392.668 418.568 400.626 419.138 402.14 420.656 399.295 420.656 397.419 423.864 405.528 425.553 411.969 424.433 408.549 421.201 410.82 419.324 414.422 420.838 416.116 424.442 426.919 424.625 429.733 423.477 430.305 425.206 427.282 427.839 431.458 428.022 430.702 429.927 429.552 431.258 438.817 431.258 443.356 432.773 443.805 433.377 443.992 429.624 445.35 428.081 447.079 427.052 446.894 426.027 445.535 424.667 444.174 424.667 443.296 423.639 444.84 422.246 444.84 421.726 443.15 420.879 443.15 419.517 446.903 419.704 447.781 419.009 444.51 415.922 444.697 412.32 442.635 410.625 444.329 407.207 448.444 404.453 445.355 402.391 443.143 404.12 437.999 405.303 433.883 404.786 426.529 401.728 422.081 401.876 418.329 400.181 416.933 398.28 414.034 395.042 407.195 392.139"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-12"
-                        onClick={[Function]}
-                        points="324.701 338.312 319.345 342.877 319.345 347.416 318.014 347.416 317.469 351.687 316.138 352.232 315.078 354.624 309.178 354.624 308.663 353.837 305.97 353.837 304.366 356.5 303.791 356.439 303.458 357.499 302.248 358.859 298.828 358.859 298.132 359.738 296.438 359.556 293.351 362.974 292.328 362.642 290.119 364.519 290.784 367.937 292.51 370.505 291.178 371.901 291.482 375.805 294.21 375.987 292.667 379.074 293.877 382.16 295.42 381.283 296.115 382.826 298.325 380.617 301.594 380.434 304.832 382.826 310.49 383.854 312.548 387.456 315.453 388.817 316.996 392.752 316.809 394.295 318.686 397.745 318.686 399.621 322.105 404.069 325.376 405.762 327.434 405.244 328.463 403.887 330.006 404.245 333.546 406.516 333.576 406.516 335.145 406.516 338.352 406.516 338.081 400.914 338.081 399.039 339.685 399.039 342.623 400.643 345.558 400.643 345.044 397.436 346.648 396.076 349.851 395.559 349.851 392.869 353.33 391.265 352.514 387.541 349.578 387.541 346.918 387 346.373 384.852 348.519 384.338 348.519 381.645 350.636 379.768 349.032 378.983 344.493 379.768 344.764 377.651 341.556 376.294 340.744 369.879 340.744 365.34 338.082 363.463 338.353 359.711 332.725 352.776 332.18 347.422 330.334 347.422 329.517 342.068 325.765 342.613 325.25 339.133"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-11"
-                        onClick={[Function]}
-                        points="304.91 420.713 304.639 424.193 301.16 423.103 297.408 423.103 297.679 421.772 295.802 422.043 291.808 423.374 290.477 420.953 287.789 423.374 288.601 425.25 285.636 426.582 285.121 429.52 282.7 430.612 284.846 433.003 284.301 434.607 293.682 439.143 294.469 445.588 294.469 449.067 295.014 453.606 290.202 453.606 288.87 455.483 295.014 460.567 298.493 458.69 302.76 463.774 302.125 463.835 302.941 464.319 310.628 460.567 308.752 457.813 308.601 454.575 326.545 454.575 326.213 452.154 330.328 449.945 335.109 453.697 337.588 454.843 337.44 449.426 337.654 443.197 335.383 443.379 333.476 440.567 334.995 438.086 338.203 441.112 341.047 438.841 342.954 436.964 343.194 434.967 340.769 434.876 339.922 432.152 337.531 431.966 335.292 428.697 333.565 428.879 331.539 427.668 331.176 424.765 330.152 425.283 330.668 427.341 328.276 427.341 328.09 430.761 324.519 431.972 322.794 428.37 320.403 429.913 318.341 428.37 317.314 425.979 319.043 423.917 318.226 421.708 318.014 421.77 312.385 421.77 306.515 420.708"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-10"
-                        onClick={[Function]}
-                        points="377.598 130.419 373.755 132.537 370.486 134.837 367.248 134.837 361.862 138.499 357.258 139.255 353.99 135.805 353.173 135.987 353.173 136.562 350.54 137.682 350.358 139.952 349.027 141.677 348.268 145.46 347.841 148.637 349.027 149.605 351.297 149.605 356.199 154.719 355.624 159.833 359.044 162.465 360.95 161.133 363.971 164.735 364.334 168.154 366.422 170.966 367.36 173.054 374.922 173.448 378.704 171.542 379.824 173.63 381.155 173.812 382.124 171.724 388.357 171.542 390.806 170.21 391.202 167.759 396.681 167.759 397.441 168.183 396.802 165.762 395.257 164.793 397.375 162.887 400.646 162.675 401.792 160.95 401.58 154.05 400.823 150.026 397.552 148.876 394.105 144.064 394.287 141.189 395.286 139.101 393.53 138.496 388.144 139.646 384.297 139.646 380.85 134.471 380.454 130.628"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-9"
-                        onClick={[Function]}
-                        points="269.051 428.369 267.841 429.217 267.327 430.245 269.718 431.971 270.414 433.181 269.899 434.18 265.784 434.542 264.604 436.237 264.755 436.752 266.298 437.266 267.176 438.477 266.147 440.171 264.937 440.02 263.061 438.295 260.822 437.629 258.613 437.78 254.679 440.171 254.83 443.442 255.859 444.132 255.193 446.674 250.714 447.885 249.02 449.947 249.02 453.367 249.716 454.391 248.112 455.873 249.141 456.447 254.981 457.567 257.462 457.567 260.67 461.743 268.81 461.347 272.018 466.46 274.862 465.314 283.184 466.46 283.789 469.94 289.659 468.578 291.805 466.702 295.013 465.886 295.799 464.282 302.759 463.765 298.492 458.68 295.013 460.558 288.869 455.474 290.201 453.595 295.013 453.595 294.468 449.058 294.468 445.579 293.681 439.134 284.3 434.594 284.845 432.99 283.062 431 281.543 431.636 279.485 431.969 275.703 430.243 274.674 429.91 276.217 431.787 275.551 433.33 272.282 432.997 272.131 431.268 270.225 428.7"
-                      />
-                      <path
-                        className="dep"
-                        d="M395.331,50.197 L393.424,53.011 L391.735,54.736 L391.735,56.43 L391.735,58.7 L389.464,60.213 L385.318,61.545 L383.047,62.483 L380.384,60.395 L376.782,60.395 L376.263,63.754 L377.957,66.962 L376.263,68.475 L376.081,71.32 L377.019,72.833 L376.262,75.103 L373.417,76.616 L373.417,79.067 L369.815,79.824 L369.24,81.337 L371.719,82.668 L370.963,85.301 L370.388,87.571 L370.509,92.292 L375.113,92.413 L379.134,94.925 L379.891,96.075 L382.009,96.65 L385.096,98.95 L387.577,99.132 L388.152,98.557 L390.663,98.557 L391.809,101.069 L393.139,101.069 L393.926,99.919 L398.53,100.101 L399.287,101.069 L399.862,101.069 L401.799,99.132 L403.528,100.675 C403.528,100.675 403.757,100.651 403.799,100.645 L403.678,99.858 L405.949,98.738 L407.069,97.588 L406.34,95.712 L406.128,94.38 L408.216,92.685 L408.973,88.902 L406.703,86.058 L407.459,84.726 L409.366,81.155 L409.91,81.911 L412.755,81.911 L414.087,83.212 L415.781,82.092 L417.112,79.913 L415.751,79.701 L415,75.919 L413.487,74.769 L408.191,74.194 L407.253,71.743 L405.527,70.623 L399.47,69.867 L399.112,65.51 L399.869,64.754 L399.869,63.059 L396.843,61.152 L397.418,59.064 L398.174,57.188 L396.843,56.038 L398.931,54.162 L398.931,50.743 L398.174,50.199 L395.331,50.199 L395.331,50.197 Z"
-                        id="dpt-8"
-                        onClick={[Function]}
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-7"
-                        onClick={[Function]}
-                        points="402.714 314.225 398.326 316.829 397.474 320.551 394.205 321.155 392.45 321.639 392.511 321.731 391.393 326.27 388.733 327.389 387.614 329.295 388.37 331.746 388.915 333.077 386.101 333.077 385.889 336.648 382.868 336.859 381.349 341.58 376.81 341.58 371.913 345.182 369.185 349.509 369.638 350.084 370.97 357.044 374.177 360.523 373.633 364.517 377.657 366.939 377.657 372.293 379.803 371.204 384.342 374.17 386.49 374.957 387.005 371.204 389.698 370.687 390.485 373.625 393.173 373.354 393.693 370.418 399.837 373.867 400.835 371.84 403.439 371.445 403.651 367.451 403.046 366.603 402.234 366.417 402.234 364.965 402.838 363.515 401.81 361.878 402.415 358.189 404.894 355.287 404.894 351.201 403.871 346.451 405.717 346.055 406.141 343.998 407.992 340.486 409.016 337.824 407.381 333.709 406.353 330.41 404.902 324.66 404.902 316.943 403.877 316.611"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-6"
-                        onClick={[Function]}
-                        points="487.168 366.06 484.596 367.418 484.414 369.814 482.537 371.357 481.509 373.777 480.818 378.226 482.876 381.283 483.058 383.855 484.244 384.213 487.689 387.45 490.926 390.35 489.568 391.227 487.506 389.836 484.934 391.227 484.244 392.08 481.515 392.08 481.848 393.436 481 394.465 481.696 396.194 479.457 397.553 480.304 399.615 482.543 399.762 484.753 400.789 485.115 404.391 487.174 406.453 488.354 406.453 490.593 407.305 490.926 409.207 489.57 410.393 490.593 411.416 490.593 412.626 492.711 414.811 492.862 414.624 493.044 410.296 496.826 411.059 498.158 409.33 500.064 409.726 500.246 403.855 504.602 403.494 508.381 400.075 511.775 400.075 511.957 397.984 515.377 395.925 513.471 391.57 516.32 389.121 515.746 386.273 519.922 384.943 521.041 380.797 520.497 377.952 519.528 376.258 518.767 373.779 515.955 373.993 507.059 377.2 504.212 377.2 499.314 373.233 494.378 371.901 491.533 371.901 491.533 368.481 487.568 366.034"
-                      />
-                      <polygon
-                        className="dep"
-                        fillRule="nonzero"
-                        id="dpt-5"
-                        onClick={[Function]}
-                        points="459.618 326.256 460.95 325.107 464.35 324.751 465.47 325.87 466.062 328.484 469.435 328.137 469.831 325.293 471.525 324.535 475.078 324.703 477.337 329.361 480.149 330.3 480.922 335.906 485.843 338.439 488.477 338.043 490.564 338.8 491.139 344.279 493.772 345.611 493.719 347.234 491.713 347.12 489.875 349.078 487.478 348.939 485.417 352.025 482.514 353.753 481.5 355.75 478.915 355.962 478.922 357.734 478.219 358.797 477.188 361.359 471.048 361.285 468.146 359.742 466.239 361.105 462.67 360.92 461.859 362.078 462.67 362.13 463.188 365.363 462.311 365.727 459.072 363.668 459.078 362.453 457.196 360.915 456.168 360.915 456.156 362.578 454.624 362.973 451.356 364.85 449.294 368.298 448.779 369.993 449.989 370.325 450.141 373 448.962 373.079 447.084 371.354 446.141 371.562 446.575 373.079 449.375 376.281 447.604 377.01 446.242 376.161 442.792 376.161 439.888 378.855 440.503 372.953 438.627 372.591 437.479 370.141 431.066 368.414 430.328 365.219 432.531 363.688 430.673 362.361 431.069 360.668 434.062 360.844 436.656 362.156 438.781 359.734 436.724 358.04 436.906 355.703 438.056 352.165 441.953 351.797 445.219 350.5 445.781 349.156 444.298 348.374 444.312 346.188 448.984 346.109 450.5 344.609 449.598 342.896 452.016 340.984 453.766 341.734 456.203 339.703 460.516 340.422 462.062 338.719 465.609 338.891 465.641 334.766 464.157 334.004 463.406 331.562 459.432 331.159 458.86 330.221"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-4"
-                        onClick={[Function]}
-                        points="487.504 348.934 485.446 352.022 482.541 353.751 481.513 355.813 478.946 355.96 478.946 357.835 478.25 358.859 477.222 361.431 471.078 361.285 468.174 359.742 466.267 361.099 462.702 360.917 461.822 362.127 462.702 362.127 463.217 365.364 462.339 365.727 459.101 363.665 459.101 362.455 457.225 360.912 456.2 360.912 456.2 362.641 454.654 362.973 451.385 364.85 449.326 368.294 448.807 369.989 450.017 370.321 450.204 373.075 448.994 373.075 447.115 371.346 446.089 371.533 446.604 373.076 449.508 376.309 447.632 377.004 446.271 376.157 442.823 376.157 439.921 378.881 439.891 378.854 439.77 379.971 438.652 378.639 437.138 377.307 436.169 380.158 434.475 381.67 433.747 381.608 433.773 381.792 433.924 384.364 435.983 384.723 435.983 387.118 434.106 387.968 434.439 390.724 437.859 392.414 437.859 394.29 436.315 396.019 436.315 397.562 440.614 397.562 444.551 402.009 444.521 402.101 449.514 400.466 455.688 404.579 459.108 402.009 459.959 400.282 464.771 398.739 467.831 400.796 472.277 397.562 477.423 397.746 478.781 396.353 481.656 396.232 481.718 396.202 481.022 394.476 481.873 393.448 481.54 392.087 484.266 392.087 484.96 391.239 487.53 389.845 489.592 391.239 490.95 390.362 487.714 387.457 484.266 384.221 483.083 383.858 482.899 381.29 480.84 378.229 481.533 373.785 482.559 371.36 484.436 369.817 484.622 367.426 487.191 366.065 487.587 365.917 487.587 362.256 490.249 361.896 488.733 360.566 486.83 359.991 485.892 357.541 486.65 355.848 490.041 352.245 489.497 349.582 489.977 349.066"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-3"
-                        onClick={[Function]}
-                        points="331.419 236.242 328.786 239.632 327.273 239.813 325.579 241.538 323.673 239.45 318.589 244.564 318.589 247.59 319.527 248.346 319.709 249.859 317.076 251.917 314.595 251.161 309.874 252.129 307.423 254.943 306.516 256.88 306.667 256.85 308.937 260.058 308.937 262.328 310.243 264.022 311.575 262.328 313.088 264.991 315.176 265.748 317.264 270.65 317.355 272.07 320.23 274.31 321.775 273.615 322.988 270.71 324.169 270.377 324.169 268.834 326.228 268.652 326.414 269.681 328.981 266.776 331.886 266.776 332.404 267.805 331.045 269.681 333.068 271.921 333.43 273.281 338.211 276.036 344.021 276.884 345.75 276.702 348.321 277.216 350.53 275.856 352.257 276.708 352.589 279.101 354.829 279.617 357.728 279.468 358.581 281.526 361.244 282.588 361.335 281.65 365.874 281.439 365.511 270.665 364.18 268.032 364.724 265.944 367.871 265.4 367.962 265.188 371.926 262.162 372.109 254.778 370.78 252.902 367.756 252.902 366.637 251.389 363.429 251.389 362.491 250.239 362.491 247.394 358.679 240.222 356.803 238.89 353.2 243.823 351.683 244.186 351.109 241.735 349.419 240.979 348.661 242.492 345.848 242.492 345.453 240.798 343.548 241.918 341.489 243.068 339.218 240.587 335.98 239.074 335.799 236.623"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-2"
-                        onClick={[Function]}
-                        points="357.353 56.37 354.332 58.458 352.818 57.126 351.487 57.126 348.461 59.214 346.191 57.882 343.92 59.214 343.163 59.396 342.589 58.246 340.5 58.246 338.986 59.214 338.924 59.214 339.378 61.877 336.899 64.57 336.899 67.051 335.17 68.988 335.566 71.288 336.504 75.131 337.654 81.667 337.291 87.417 336.504 89.142 338.804 90.867 337.079 91.654 335.929 96.254 332.661 97.01 331.511 98.947 333.811 99.34 334.207 102.003 332.478 102.397 332.665 105.272 333.24 105.091 334.208 103.548 336.508 105.091 337.87 106.634 337.474 109.206 339.203 110.447 339.778 114.623 344.862 119.525 346.551 120.1 347.52 122.37 350.702 123.036 351.096 122.552 352.067 120.494 354.915 119.162 356.428 115.198 358.122 114.048 357.151 112.716 354.7 112.716 354.337 111.415 356.031 110.659 356.788 109.509 355.093 108.389 355.638 106.664 359.995 106.301 359.239 104.606 356.601 102.881 356.601 97.798 360.171 95.135 364.166 95.135 363.77 93.259 366.041 92.29 369.248 94.378 370.58 94.015 370.396 87.569 370.968 85.299 371.724 82.666 369.245 81.335 369.82 79.822 373.422 79.065 373.422 76.614 376.267 75.101 377.028 72.831 376.09 71.318 376.274 68.473 377.966 66.96 376.274 63.752 376.791 60.393 372.948 60.393 371.919 61.089 368.315 60.151 367.556 57.7 366.44 57.7 364.349 59.576 363.991 57.881 359.81 57.488 358.664 56.55"
-                      />
-                      <polygon
-                        className="dep selectable"
-                        fill="#313278"
-                        id="dpt-1"
-                        onClick={[Function]}
-                        points="410.491 250.404 408.403 250.615 407.072 253.066 403.501 267.047 402.986 268.197 402.623 272.614 401.595 274.042 401.595 280.427 400.991 281.879 404.679 284.118 406.131 284.33 408.402 286.39 408.796 289.693 411.277 288.875 415.12 289.994 415.181 289.265 417.032 289.265 419.694 291.744 422.173 290.506 423.414 286.818 424.654 285.365 426.289 285.576 427.923 287.029 428.771 289.693 436.371 298.954 438.641 297.318 439.037 293.804 441.516 293.38 441.516 287.2 442.757 286.172 443.15 280.634 443.634 281.028 443.573 279.006 442.545 277.13 442.969 271.806 444.815 272.833 445.843 270.956 447.69 270.351 449.596 268.838 447.538 268.838 447.538 265.237 449.808 263.905 453.201 263.542 453.414 261.636 452.265 260.88 455.109 257.279 454.716 256.159 451.478 254.434 443.61 263.089 438.133 263.089 438.133 260.819 435.107 259.306 431.505 263.27 428.66 263.663 428.66 261 426.21 259.88 422.427 254.584 419.008 253.252 417.888 250.801 415.982 250.408 414.106 251.739 412.592 252.133"
-                      />
-                      <polygon
-                        className="dep"
-                        id="dpt-2B"
-                        onClick={[Function]}
-                        points="549.137 436.703 546.293 438.609 546.686 440.485 548.205 442.386 546.51 443.693 547.267 445.206 546.121 446.538 546.121 448.232 548.027 449.957 548.027 452.59 546.877 455.041 545.576 455.616 544.058 453.528 541.395 453.74 540.825 453.344 538.554 453.344 536.496 455.25 535.709 458.458 530.807 459.396 527.029 462.603 526.268 464.692 524.392 464.505 523.423 463.359 522.878 466.591 521.547 467.137 521.153 470.162 521.723 471.493 519.635 473.007 519.064 474.525 521.178 474.919 521.541 475.947 525.293 475.947 526.322 476.613 529.076 476.093 530.256 476.789 529.742 477.641 531.618 480.209 535.219 480.209 536.098 482.78 538.639 482.78 538.493 484.324 540.551 486.896 541.58 487.411 542.939 488.258 542.939 491.529 543.965 492.376 546.027 492.376 546.542 493.229 546.874 497.859 548.085 498.707 547.57 499.403 547.901 502.126 551.837 501.975 555.136 499.796 555.015 494.198 559.554 487.782 559.554 477.191 557.678 473.587 557.105 462.239 555.775 460.151 553.326 458.275 552.93 451.254 554.079 448.046 552.564 442.937 551.626 438.791 550.84 437.641"
-                      />
-                      <path
-                        className="dep"
-                        d="M517.545,474.529 L517.545,476.617 L519.451,477.949 L522.658,479.825 L522.87,481.338 L520.964,481.913 L517.938,482.488 L517.938,483.789 L519.058,484.939 L519.27,488.716 L523.416,490.047 L524.93,490.41 L526.261,492.498 L525.323,493.83 L523.805,494.375 L522.659,496.463 L521.54,497.794 L522.085,501.189 L524.93,501.002 L525.686,501.577 L528.349,500.245 L529.106,501.002 L527.775,503.849 L529.106,505.178 L526.836,506.872 L525.322,510.263 L529.468,511.236 L535.338,511.78 L532.887,514.625 C532.887,514.625 531.74,514.181 531.223,514.413 C531.207,514.421 531.176,514.434 531.162,514.443 C531.158,514.447 531.136,514.465 531.132,514.468 C531.128,514.476 531.106,514.494 531.102,514.498 C531.098,514.502 531.08,514.524 531.076,514.528 C531.065,514.537 531.053,514.549 531.047,514.558 C531.044,514.563 531.05,514.579 531.047,514.584 C531.042,514.599 531.021,514.637 531.017,514.646 C531.015,514.652 531.019,514.667 531.017,514.675 C531.014,514.689 530.991,514.724 530.987,514.737 C530.986,514.751 530.987,514.783 530.987,514.799 C530.987,515.742 529.686,518.035 529.686,518.035 L531.562,520.097 L534.981,522.185 L541.397,523.874 L543.273,524.636 L545.002,525.393 L543.854,527.481 L546.878,527.296 L547.45,528.625 L550.475,528.625 L551.232,525.024 L549.327,524.628 L551.988,521.816 L551.05,520.848 L551.232,519.153 L554.651,517.277 L554.838,515.189 L552.567,515.005 L551.054,516.308 L551.054,514.432 L554.077,514.245 L555.015,511.975 L555.772,505.348 L555.197,502.5 L555.136,499.774 L551.837,501.953 L547.899,502.104 L547.566,499.381 L548.086,498.685 L546.875,497.835 L546.543,493.204 L546.023,492.354 L543.965,492.354 L542.936,491.507 L542.936,488.236 L541.579,487.389 L540.551,486.872 L538.49,484.302 L538.639,482.758 L536.097,482.758 L535.219,480.187 L531.618,480.187 L529.741,477.617 L530.256,476.767 L529.075,476.071 L526.317,476.59 L525.293,475.925 L521.541,475.925 L521.178,474.897 L519.06,474.501 L517.547,474.501 L517.545,474.529 Z"
-                        id="dpt-2A"
-                        onClick={[Function]}
-                      />
+                          <tspan
+                            x="7.1025"
+                            y="74.7178"
+                          >
+                            Paris petit couronne
+                          </tspan>
+                        </text>
+                      </g>
+                      <g
+                        fill="#e3e3fe"
+                        id="carte"
+                        stroke="#ffffff"
+                        stroke-width="0.4"
+                        transform="translate(12.000000, 2.000000)"
+                      >
+                        <path
+                          class="dep"
+                          d="M194.995,496.96 L192.664,497.005 L191.817,497.42 L190.852,498.163 L190.674,498.326 L190.006,498.326 L188.595,498.86 L187.987,499.39 L186.042,499.672 L185.864,500.696 L185.329,502.834 C185.329,502.834 184.585,503.331 184.364,503.413 C184.143,503.495 182.909,504.155 182.909,504.155 L182.686,506.426 L183.22,507.78 L184.675,509.503 L185.373,510.29 L185.937,510.171 L185.596,510.334 L185.64,513.423 L187.095,515.235 L188.595,516.631 L191.238,518.193 L191.416,518.089 L191.208,518.237 L194.341,520.123 L196.761,521 L199.359,521.445 L201.438,522.186 L202.759,522.439 C202.759,522.439 204.796,522.024 205.061,522.024 C205.326,522.024 207.436,521.608 207.436,521.608 L209.604,520.91 L211.059,519.589 L210.925,517.243 L211.193,515.772 L211.772,514.941 L212.737,513.664 L213.227,512.06 L213.093,510.498 L212.069,509.919 L210.747,509.315 L210.139,509.271 L209.159,507.875 C208.938,507.71 207.747,506.388 207.659,506.185 C207.571,505.981 206.783,504.207 206.783,504.207 L206.516,501.445 L205.016,500.005 L203.249,499.026 C203.249,499.026 201.836,498.207 201.571,498.166 C201.306,498.125 198.971,497.631 198.795,497.631 C198.618,497.631 196.894,497.753 196.85,497.794 L196.627,497.705 L194.995,496.96 Z"
+                          id="dpt-974"
+                        />
+                        <path
+                          class="dep"
+                          d="M128.604,494.792 C128.527,494.797 128.47,494.82 128.443,494.846 L126.962,496.719 L125.677,498.2 L124.196,499.679 L124.41,503.64 L124.303,507.298 L125.588,509.082 L126.855,511.349 L127.586,512.745 L126.855,513.638 L125.999,516.011 L126.106,519.282 L125.053,521.156 L123.358,522.548 L123.876,523.137 L125.161,523.922 L126.321,524.618 L128.016,524.118 L129.818,523.026 L133.529,522.935 L134.921,523.916 L136.402,524.023 L137.883,524.326 L140.007,522.631 L142.452,518.385 L144.254,514.727 L146.056,512.05 L147.966,509.587 L149.019,507.695 L148.18,506.012 L147.538,503.639 L146.164,503.139 L144.594,502.074 L143.291,500.879 L141.596,499.79 L140.436,499.394 L137.046,497.025 L134.816,496.218 L132.692,495.932 C132.692,495.932 131.741,495.541 131.211,495.343 C130.746,495.172 129.14,494.757 128.604,494.792 Z"
+                          id="dpt-973"
+                        />
+                        <path
+                          class="dep"
+                          d="M74.279,495.505 C74.279,495.505 70.667,495.593 70.225,495.757 C69.784,495.922 68.013,497.153 68.013,497.153 L67.746,497.222 L66.692,498.795 L67.048,500.845 L70.137,503.889 L69.602,504.72 L69.602,506.368 L70.923,508.179 L75.17,511.965 L78.957,511.965 L79.313,511.965 L80.367,511.876 L80.545,511.876 L80.367,512.618 L80.367,513.197 L81.614,513.524 L82.134,513.846 C82.134,513.846 81.96,515.247 82.402,515.329 L81.08,515.404 L79.224,514.84 L77.992,514.587 L76.403,515.24 L75.512,516.307 L75.081,517.536 L75.422,518.783 L76.313,520.014 L77.456,520.663 C77.456,520.663 78.603,520.34 79.045,520.174 C79.486,520.012 79.847,519.273 79.847,519.273 C79.847,519.273 81.159,519.192 81.778,519.11 C82.396,519.027 83.025,519.852 83.025,519.852 L85.935,520.248 L87.257,520.991 L88.044,520.917 L88.044,520.086 L88.757,519.69 L89.47,520.086 L89.114,521.08 L88.312,521.822 L88.668,523.292 L89.722,523.871 L90.969,523.798 L92.201,522.804 L92.557,521.496 L93.789,520.175 L92.987,518.529 L92.467,517.044 L91.843,515.069 L91.219,513.673 C91.219,513.673 89.719,512.194 89.719,511.861 C89.719,511.528 88.308,510.792 88.308,510.792 L88.13,509.476 C88.13,509.476 88.49,509.077 88.932,508.912 C89.373,508.748 88.665,508.008 88.665,508.008 L87.789,508.17 L86.453,508.496 L86.111,508.081 L85.576,507.502 L85.665,506.76 L86.63,506.943 L87.432,506.037 L86.288,505.132 L85.397,504.879 L85.129,504.392 L85.129,503.816 L86.109,503.4 L86.807,503.976 L88.039,504.464 L88.663,503.722 L88.663,502.91 L89.197,502.257 L88.752,501.752 L87.787,501.354 L87.163,501.916 L84.698,502.169 L83.896,502.748 L82.842,502.421 L81.61,500.446 L78.774,497.634 L77.185,496.986 L74.279,495.505 Z"
+                          id="dpt-972"
+                        />
+                        <path
+                          class="dep"
+                          d="M18.939,497.65 L17.439,498.004 L16.058,499.222 L16.118,501.953 L17.187,502.132 L17.247,503.824 L16.193,504.636 L16,505.979 L16,506.216 L15.065,507.196 L15.005,507.374 L12.941,507.256 L12.689,506.261 L11.189,505.405 L8.516,504.009 L5.576,504.009 L4.21,506.1 L4.27,509.119 L4.641,510.348 L4.701,510.576 L4.894,512.907 L5.77,517.214 L6.646,519.485 C6.646,519.485 7.264,520.07 7.389,520.36 C7.514,520.651 8.205,521.58 8.205,521.58 L9.571,521.758 L9.957,521.046 L10.016,521.12 L11.382,521.12 L13.446,519.367 L14.753,517.569 L14.693,513.381 L13.936,511.168 L14.188,509.356 L15.614,509.079 L15.629,509.079 L16.06,509.6 L17.248,509.882 L18.184,510.236 L18.273,510.191 L18.377,510.535 L20.189,510.639 L23.307,510.06 L25.059,508.785 L28.118,508.67 L30.731,507.794 L29.112,506.872 L28.919,505.994 L26.855,504.658 L22.935,504.596 L21.747,502.562 L21.747,500.291 L20.93,498.539 L18.939,497.65 Z"
+                          id="dpt-971"
+                        />
+                        <path
+                          class="dep"
+                          d="M260.945,522.599 C260.69,522.599 260.492,522.621 260.369,522.872 C260.22,523.178 259.939,522.855 259.765,522.802 C259.431,522.698 259.183,522.864 259.047,523.172 C258.992,523.298 259.024,523.409 258.987,523.535 C258.938,523.706 258.761,523.668 258.753,523.508 C258.725,522.944 258.789,522.34 258.128,522.175 C257.439,522.004 257.158,522.327 257.295,522.986 C257.318,523.092 257.34,523.215 257.326,523.329 C257.234,523.328 257.136,523.348 257.077,523.426 C256.978,523.559 257.013,523.748 256.902,523.877 C256.789,524.008 256.457,524.176 256.284,524.187 C255.967,524.208 255.984,523.686 255.852,523.499 C255.724,523.311 255.389,523.197 255.189,523.35 C255.072,523.441 255.117,523.702 254.904,523.621 C254.796,523.392 254.821,523.059 254.744,522.809 C254.666,522.554 254.294,522.454 254.048,522.454 C253.778,522.454 253.588,523.164 253.267,523.342 C253.184,523.397 253.096,522.843 253.222,522.728 C253.47,522.502 253.339,522.352 253.36,521.999 C253.382,521.639 253.737,520.585 252.96,520.798 C252.745,520.858 252.708,521.089 252.499,521.152 C252.268,521.222 251.951,521.311 251.715,521.214 C251.517,521.132 251.589,520.887 251.279,520.93 C250.939,520.978 250.934,520.808 251.208,520.652 C251.429,520.522 251.646,520.41 251.896,520.346 C252.197,520.272 252.275,520.034 252.489,519.839 C252.821,519.539 252.938,518.827 252.781,518.411 C252.713,518.226 252.665,517.975 252.436,517.95 C252.274,517.929 251.697,518.539 251.697,518.012 C251.697,517.672 251.623,517.71 251.378,517.533 C251.152,517.367 251.082,517.061 251.001,516.808 C250.932,516.593 250.959,516.246 250.756,516.108 C250.595,516.004 250.26,515.999 250.318,515.722 C250.662,515.678 251.047,515.618 251.394,515.623 C251.533,515.626 251.652,515.704 251.791,515.715 C251.938,515.725 252.052,515.658 252.191,515.633 C252.328,515.606 252.658,515.834 252.716,515.946 C252.787,516.089 252.734,516.258 252.747,516.402 C252.767,516.623 252.819,516.826 252.83,517.048 C252.844,517.337 253.067,517.471 253.218,517.692 C253.399,517.96 253.68,517.921 253.941,518.045 C254.21,518.174 254.443,518.281 254.732,518.365 C255.057,518.462 255.285,518.733 255.635,518.761 C255.829,518.775 256.164,518.704 256.309,518.561 C256.445,518.423 256.769,518.112 256.766,517.957 C256.763,517.816 256.777,517.678 256.762,517.539 C256.808,517.435 256.913,517.531 256.886,517.359 C256.836,517.042 256.506,516.853 256.41,516.558 C256.378,516.46 256.44,516.353 256.319,516.291 C256.214,516.232 256.104,516.251 256.078,516.1 C256.021,515.769 256.086,515.752 255.816,515.556 C255.607,515.406 255.671,515.118 255.524,514.925 C255.449,514.828 255.334,514.85 255.239,514.787 C255.075,514.677 254.951,514.516 254.797,514.394 C254.364,514.053 253.748,513.814 253.638,513.205 C253.597,512.975 253.584,512.734 253.277,512.733 C252.984,512.732 252.639,512.539 252.47,512.296 C252.377,512.165 252.078,512.047 252.16,511.832 C252.199,511.728 252.364,511.747 252.442,511.696 C252.559,511.623 252.557,511.54 252.602,511.423 C252.779,510.96 253.902,511.158 253.942,510.902 C253.979,510.666 253.769,510.645 253.592,510.616 C253.347,510.571 253.165,510.412 252.897,510.386 C252.603,510.358 252.754,510.03 252.859,509.872 C253.053,509.587 253.054,509.226 253.054,508.893 C253.054,508.395 252.323,508.084 252.637,507.478 C252.778,507.207 253.105,507.426 253.258,507.224 C253.571,506.809 252.785,506.978 252.648,506.964 C252.391,506.943 252.3,506.599 252.324,506.389 C252.352,506.143 252.568,506.046 252.685,505.844 C252.763,505.71 252.952,505.274 252.894,505.125 C252.784,504.844 252.666,504.699 252.4,504.91 C251.881,505.32 251.557,504.389 251.08,504.64 C250.835,504.773 250.586,504.72 250.455,504.452 C250.388,504.306 250.281,504.336 250.172,504.25 C250.072,504.173 249.978,504.034 249.889,503.938 C249.726,503.769 249.556,503.613 249.312,503.586 C249.108,503.566 248.807,503.863 248.627,503.774 C248.52,503.717 248.493,503.565 248.412,503.488 C248.305,503.383 248.167,503.378 248.038,503.319 C247.701,503.17 248.192,502.774 248.283,502.671 C248.562,502.344 248.974,502.007 249.121,501.634 C249.383,500.971 248.184,501.279 247.933,501.125 C247.712,500.992 248.511,500.375 248.558,500.171 C248.613,499.934 248.483,499.669 248.6,499.442 C248.742,499.171 248.86,499.307 249.092,499.363 C249.332,499.417 249.678,499.432 249.804,499.185 C249.873,499.05 250.065,498.706 250.188,498.623 C250.338,498.518 250.563,498.237 250.374,498.048 C250.08,497.754 250.228,497.808 250.602,497.757 C250.769,497.736 251.15,497.774 251.176,497.543 C251.198,497.352 251.176,496.891 251.341,496.761 C251.521,496.619 251.654,496.454 251.834,496.319 C251.917,496.257 252.04,496.206 252.096,496.11 C252.179,495.968 252.028,495.756 252.27,495.727 C252.528,495.703 252.544,495.812 252.741,495.558 C252.815,495.464 253.264,494.999 253.247,495.37 C253.239,495.552 252.788,495.699 253.033,495.884 C253.299,496.083 252.979,496.115 252.831,496.155 C252.407,496.259 251.415,496.634 252.173,497.051 C252.409,497.18 252.657,497.239 252.912,497.29 C253.33,497.377 252.602,497.639 253.078,497.728 C253.229,497.757 253.274,497.72 253.357,497.845 C253.398,497.907 253.456,498.046 253.52,498.085 C253.761,498.231 253.666,498.439 253.788,498.664 C253.896,498.864 254.206,499.017 254.399,499.129 C254.546,499.216 254.705,499.297 254.881,499.297 C255.03,499.297 255.246,499.245 255.333,499.413 C255.42,499.582 254.568,499.854 254.84,500.285 C254.982,500.508 255.263,500.62 255.369,500.88 C255.457,501.096 255.31,501.55 255.632,501.509 C255.752,501.493 255.905,501.424 256.019,501.505 C256.112,501.569 256.125,501.63 256.257,501.636 C256.568,501.651 256.567,501.44 256.832,501.72 C257.424,502.349 257.74,501.389 258.19,501.215 C258.481,501.104 258.51,501.156 258.696,501.365 C258.805,501.487 258.975,501.803 259.189,501.716 C259.473,501.592 259.687,501.758 259.94,501.709 C260.236,501.647 260.348,501.688 260.598,501.849 C260.782,501.967 261.111,501.812 261.328,501.913 C261.418,501.955 261.57,501.951 261.634,502.04 C261.676,502.099 261.625,502.181 261.751,502.18 C261.908,502.179 261.943,501.963 262.027,502.228 C262.057,502.323 262.123,502.338 262.062,502.418 C261.978,502.526 262.231,502.71 262.283,502.779 C262.452,503.004 262.746,502.99 263.006,503.008 C263.211,503.029 263.412,503.321 263.504,503.487 C263.582,503.623 263.696,503.616 263.783,503.717 C263.904,503.864 264.092,504.071 264.156,504.252 C264.323,504.721 263.3,505.206 263.693,505.781 C263.836,505.99 264.014,506.073 264.039,506.364 C264.075,506.784 263.664,506.426 263.501,506.524 C263.145,506.736 262.42,506.991 262.343,507.457 C262.266,507.916 262.044,507.881 261.755,508.15 C261.587,508.301 261.172,508.495 261.176,508.778 C261.18,509.12 261.162,509.197 260.873,509.398 C260.629,509.567 260.447,509.548 260.33,509.846 C260.286,509.956 260.368,510.024 260.435,510.088 C260.57,510.232 260.432,510.24 260.397,510.377 C260.326,510.648 260.194,510.912 260.376,511.18 C260.457,511.299 260.474,511.395 260.519,511.527 C260.553,511.626 260.473,511.718 260.545,511.8 C260.619,511.885 260.695,511.999 260.782,512.071 C260.865,512.135 261.064,512.113 261.114,512.214 C261.262,512.514 261.116,512.645 261.521,512.7 C261.663,512.721 262.181,512.929 261.805,512.982 C261.718,513.261 261.921,513.628 262.228,513.628 C262.321,513.629 262.423,513.581 262.515,513.614 C262.654,513.664 262.385,513.832 262.37,513.873 C262.263,514.171 262.366,514.535 262.112,514.769 C261.885,514.978 261.554,515.118 261.286,515.273 C261.078,515.392 260.812,515.627 260.687,515.838 C260.555,516.065 260.708,516.687 260.729,516.942 C260.739,517.066 261.212,517.612 260.661,517.38 C260.192,517.192 259.969,517.355 259.771,517.737 C259.647,517.979 259.322,517.936 259.108,518.113 C258.919,518.267 259.018,518.779 259.114,518.967 C259.294,519.321 259.182,519.374 258.797,519.358 C258.424,519.337 258.327,519.901 258.434,520.17 C258.56,520.487 258.902,520.566 258.928,520.941 C258.95,521.28 259.283,521.417 259.561,521.544 C259.742,521.626 259.915,521.683 260.077,521.802 C260.182,521.882 260.27,522.024 260.409,522.038 C260.57,522.059 260.752,521.989 260.893,522.099 C261.127,522.278 260.955,522.349 260.991,522.578 L260.945,522.599 Z"
+                          id="dpt-976"
+                        />
+                        <path
+                          class="dep"
+                          d="M268.594,508.362 C268.566,508.424 268.447,508.404 268.391,508.422 C268.237,508.47 268.098,508.485 267.987,508.613 C267.941,508.667 267.927,508.719 267.905,508.787 C267.867,508.891 267.813,508.996 267.767,509.098 C267.71,509.222 267.756,509.404 267.636,509.494 C267.579,509.539 267.516,509.536 267.443,509.544 C267.332,509.557 267.324,509.569 267.252,509.483 C267.192,509.414 267.162,509.386 267.155,509.295 C267.149,509.209 267.155,509.119 267.155,509.031 C267.155,508.948 267.164,508.901 267.099,508.843 C267.037,508.789 266.962,508.752 266.896,508.701 C266.836,508.655 266.757,508.603 266.712,508.543 C266.659,508.473 266.642,508.376 266.602,508.3 C266.502,508.113 266.456,507.955 266.261,507.875 C266.177,507.84 266.119,507.773 266.039,507.732 C265.93,507.67 265.829,507.643 265.733,507.564 C265.567,507.423 265.4,507.286 265.433,507.043 C265.603,506.961 265.666,507.108 265.799,507.176 C265.925,507.24 266.045,507.306 266.159,507.384 C266.304,507.488 266.44,507.508 266.464,507.304 C266.473,507.225 266.45,507.158 266.443,507.08 C266.44,507.042 266.454,506.993 266.444,506.957 C266.435,506.922 266.402,506.902 266.387,506.873 C266.362,506.823 266.335,506.728 266.341,506.674 C266.352,506.583 266.46,506.578 266.525,506.528 C266.587,506.479 266.623,506.406 266.671,506.349 C266.725,506.287 266.8,506.236 266.87,506.192 C266.942,506.147 267.025,506.142 267.092,506.087 C267.164,506.027 267.212,505.983 267.28,505.902 C267.322,505.854 267.38,505.817 267.422,505.763 C267.485,505.692 267.516,505.604 267.565,505.524 C267.61,505.449 267.689,505.328 267.767,505.279 C267.897,505.198 267.955,505.318 268.011,505.412 C268.038,505.458 268.076,505.499 268.103,505.543 C268.162,505.647 268.172,505.688 268.291,505.681 C268.438,505.679 268.512,505.752 268.539,505.884 C268.565,506.016 268.56,506.138 268.575,506.275 C268.582,506.334 268.61,506.379 268.641,506.428 C268.689,506.507 268.685,506.545 268.696,506.636 C268.709,506.745 268.733,506.872 268.794,506.963 C268.834,507.025 268.894,507.031 268.936,507.086 C268.975,507.137 268.967,507.216 268.958,507.281 C268.739,507.274 268.636,507.499 268.637,507.689 C268.637,507.917 268.729,508.117 268.694,508.355 C268.658,508.373 268.618,508.383 268.576,508.376 L268.594,508.362 Z"
+                          id="dpt-976"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-95"
+                          points="286.814 102.337 285.296 104.213 284.15 108.389 282.879 110.537 287.483 112.595 290.993 111.96 295.347 114.744 300.007 114.955 303.305 116.953 304.158 119.737 304.128 119.798 304.491 119.737 307.88 117.922 312.964 117.589 315.748 116.318 317.533 115.047 318.108 111.325 316.867 110.084 312.721 107.633 308.728 105.545 306.669 106.483 304.399 107.058 302.88 105.908 299.859 104.032 297.408 105.908 293.804 106.302 288.695 105.908 287.546 104.032"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-94"
+                          points="36.085 31.82 33.496 33.911 30.907 34.309 30.708 35.703 30.21 36.997 31.504 36.997 32.201 36.399 31.902 35.403 35.885 35.204 36.881 35.602 36.881 37.693 35.885 39.784 30.11 38.987 29.214 38.191 26.526 40.083 23.937 40.78 20.253 40.581 19.158 44.464 20.154 46.157 18.561 50.837 20.154 53.824 22.942 52.43 29.613 56.114 41.163 56.114 48.034 59.301 47.934 58.604 52.813 46.357 52.813 40.781 49.726 39.984 48.93 38.49 47.636 37.893 44.848 34.806 39.969 32.018"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-93"
+                          points="49.926 4.836 44.051 9.018 34.891 13.2 18.163 14.295 18.661 16.585 20.055 16.884 21.349 18.875 20.055 21.663 18.363 21.962 19.558 24.85 27.623 24.75 30.212 28.733 30.71 34.309 33.498 33.911 36.087 31.82 39.97 32.019 44.849 34.807 47.637 37.894 48.931 38.491 49.727 39.985 52.814 40.782 52.814 31.721 49.13 9.814"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-92"
+                          points="18.163 14.295 7.01 20.27 5.815 20.469 0.338 32.418 3.823 41.877 9.4 48.15 9.4 48.847 18.063 54.921 20.154 53.826 18.561 50.839 20.154 46.159 19.158 44.466 20.253 40.583 20.054 40.583 13.98 37.496 9.001 36.102 8.304 33.912 8.204 32.02 11.191 28.635 14.477 28.436 15.971 26.445 19.556 24.852 18.361 21.964 20.053 21.665 21.347 18.877 20.053 16.886 18.659 16.587"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-91"
+                          points="304.881 128.21 303.186 128.967 301.34 129.693 300.977 131.751 298.198 133.052 297.835 135.079 299.137 137.318 297.261 139.89 294.507 139.89 295.596 141.555 294.295 143.038 293.841 146.034 294.749 146.216 295.112 148.667 295.505 149.242 295.9 154.326 301.957 153.782 304.408 151.512 306.496 153.206 311.58 153.569 312.306 154.658 312.306 150.845 316.543 148.061 315.272 146.396 315.819 141.373 316.548 140.284 315.64 135.261 317.304 133.96 316.971 131.6 314.883 130.632 311.373 130.632 309.346 129.512 307.866 130.268"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-90"
+                          points="475.494 176.265 476.065 177.413 479.091 177.595 482.511 180.258 483.055 181.559 482.873 183.829 481.936 185.554 482.298 187.824 484.96 187.43 486.473 193.542 483.964 193.937 483.239 194.784 471.587 189.519 472.616 188.46 473.073 185.434 473.073 183.558 472.257 180.683 472.257 178.262 473.739 177.173"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-89"
+                          points="347.7 148.485 346.005 149.786 338.621 149.423 335.232 151.118 333.9 153.962 335.414 155.657 333.143 158.32 331.417 160.378 334.837 163.616 335.775 166.642 338.254 169.275 338.254 172.694 333.322 176.84 335.011 178.747 334.653 181.561 331.99 183.468 328.208 183.468 328.782 185.556 331.233 188.945 331.803 191.971 332.378 194.059 331.258 194.392 333.654 194.936 335.44 194.936 336.378 193.453 337.589 193.453 338.95 194.663 338.678 196.176 339.919 196.993 341.674 196.993 344.125 198.627 345.215 198.083 346.304 199.021 347.394 198.749 349.27 197.539 351.055 198.084 352.266 197.812 352.266 194.423 352.931 194.544 353.358 196.299 355.539 197.661 355.539 199.719 358.656 199.84 362.741 203.653 365.308 203.774 365.162 202.564 366.252 200.93 367.22 202.14 366.408 203.502 366.802 204.743 368.284 203.775 370.064 203.775 369.918 206.498 371.553 207.588 372.793 207.043 375.814 204.985 375.632 204.591 373.847 203.502 373.726 201.595 375.632 200.657 376.448 199.568 375.904 198.63 375.904 196.451 377.383 194.272 379.562 189.642 379.958 187.614 381.318 187.07 381.465 186.676 380.77 186.132 380.77 184.498 382.954 182.864 383.498 180.141 382.56 178.537 381.047 178.537 380.652 178.113 380.652 175.813 382.554 174.451 382.408 173.089 382.136 171.728 381.167 173.816 379.836 173.634 378.716 171.546 374.934 173.452 367.372 173.058 366.434 170.97 364.346 168.156 363.985 164.737 360.962 161.135 359.056 162.467 355.636 159.835 356.211 154.721 351.309 149.607 349.039 149.607"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-88"
+                          points="482.812 137.439 480.874 137.863 477.908 138.983 476.426 140.829 474.762 141.949 471.584 143.431 470.676 143.25 468.442 142.675 466.231 142.493 465.472 140.072 463.993 140.647 463.806 143.25 462.691 142.13 460.665 143.613 458.638 144.34 456.217 144.158 454.552 144.733 452.706 143.613 451.586 144.521 448.803 144.521 447.501 146.942 441.389 147.305 440.087 145.641 438.06 145.278 438.247 144.34 439.549 143.432 438.429 143.039 438.247 140.073 435.463 139.891 433.829 140.406 432.679 141.949 429.714 142.857 429.714 141.768 428.8 141.768 428.8 143.039 425.078 143.795 425.078 145.46 421.749 145.883 420.478 147.154 421.783 149.03 424.804 149.241 427.467 152.812 429.738 152.812 430.282 155.293 432.761 155.656 433.306 157.351 431.617 158.501 430.497 163.615 435.793 166.248 435.793 170.212 437.851 169.456 439.58 170.817 440.881 170.03 440.153 168.91 441.091 168.335 442.392 169.848 444.299 168.516 444.873 166.64 448.443 166.065 449.412 166.822 449.225 168.91 451.676 170.786 453.195 170.605 454.884 169.273 458.848 169.273 461.698 172.481 462.636 172.481 464.151 171.543 464.365 170.423 465.879 169.666 467.573 170.786 469.263 172.693 475.225 175.84 477.585 173.813 477.766 166.429 481.004 163.615 482.88 159.258 482.306 156.413 484.577 151.874 486.665 147.153 483.061 146.215 482.305 141.101 483.061 137.682"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-87"
+                          points="271.291 258.363 269.597 260.057 264.846 259.694 264.301 259.573 260.7 260.239 258.612 261.964 258.612 264.234 254.466 264.416 252.015 267.26 250.502 268.38 251.803 269.893 251.621 275.007 250.683 276.702 252.196 278.396 254.829 278.607 255.404 281.241 255.585 282.935 252.196 283.691 250.502 284.265 250.865 288.986 248.595 290.501 246.689 291.075 245.751 293.739 244.238 293.921 243.602 296.796 248.02 296.945 248.988 298.823 248.201 300.911 249.926 303.182 251.227 302.819 252.559 300.917 258.611 301.487 259.579 305.27 263.725 305.843 264.663 307.145 261.818 308.477 263.15 309.415 267.145 309.99 267.447 310.746 268.507 308.6 270.777 309.451 273.258 306.362 274.68 306.546 275.921 304.485 279.613 304.912 281.065 303.459 282.917 303.459 284.369 300.797 286.603 300.584 288.056 298.134 290.118 298.738 291.568 298.738 292.539 297.075 291.568 296.471 291.141 294.022 292.594 294.022 292.594 292.996 290.115 291.33 287.452 290.121 287.846 287.642 287.034 287.642 286.005 289.094 282.707 289.279 280.859 289.094 280.859 287.217 283.13 285.368 281.677 283.522 278.197 284.549 278.802 276.738 277.168 275.075 275.504 270.961 273.053 270.356 272.629 268.086 274.899 263.577 274.838 260.793 274.324 261.398"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-86"
+                          points="222.117 214.666 218.516 218.448 217.608 220.022 217.911 224.682 219.545 224.47 219.756 226.528 220.392 229.826 221.421 232.096 220.18 233.518 220.785 234.547 219.968 236 219.968 236.605 221.421 238.27 221.421 239.299 220.786 240.933 218.728 244.019 220.786 244.836 221.421 246.289 220.574 248.528 220.392 249.557 219.151 251.615 219.151 253.068 219.968 253.28 219.968 257.608 221.421 258.637 220.786 260.059 220.997 261.3 222.631 263.146 223.478 261.905 223.478 260.876 225.112 260.059 226.353 260.876 226.353 263.962 225.112 265.415 224.083 267.866 225.505 270.136 228.41 270.953 227.775 272.83 225.082 273.283 227.563 276.308 230.861 276.097 233.736 275.068 236.641 276.732 237.67 275.916 237.459 273.223 239.093 271.983 240.546 274.463 241.756 275.704 245.266 274.252 246.719 272.617 249.987 272.617 251.682 273.465 251.803 269.894 250.502 268.381 252.015 267.261 254.466 264.417 258.612 264.235 258.612 261.965 260.7 260.24 265.814 259.302 266.177 256.457 264.119 255.337 262.969 251.373 259.943 250.979 258.067 249.103 254.466 246.258 255.223 243.988 255.223 240.387 251.804 236.998 251.441 234.335 248.203 230.946 247.083 226.407 245.751 225.832 244.238 223.744 242.725 224.682 243.119 226.77 238.186 227.92 232.527 227.92 232.709 225.65 232.709 222.049 228.169 220.717 228.169 218.447 224.568 217.691 223.812 214.665"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-85"
+                          points="173.487 218.418 172.398 220.446 169.281 220.446 170.522 221.717 169.584 224.834 166.77 225.772 165.681 224.985 166.165 221.868 165.378 220.143 163.653 220.143 162.412 221.535 163.017 225.923 164.439 227.95 163.017 229.524 160.384 229.04 156.481 228.102 155.392 225.137 152.88 224.834 149.611 223.412 148.824 221.536 145.253 219.206 139.625 226.469 139.443 231.008 145.283 236.667 145.101 238.362 146.796 238.362 150.397 249.165 154.18 251.041 157.962 254.824 162.32 254.824 164.014 258.607 168.19 258.607 170.066 261.451 174.242 263.539 174.424 260.876 175.483 261.875 181.263 258.365 183.926 258.183 185.046 261.209 188.647 259.696 191.673 261.966 194.124 260.816 196.212 260.241 197.15 259.121 199.782 257.427 197.906 255.52 196.393 256.67 196.211 255.157 197.543 252.676 196.211 250.406 197.331 248.893 196.756 243.597 194.88 240.783 196.212 239.058 193.186 235.669 194.306 233.218 189.767 229.435 189.767 227.165 187.891 224.502 188.254 224.351 185.682 222.172 180.84 222.172 179.266 221.234 177.087 220.931 174.575 218.571"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-84"
+                          points="414.093 365.396 411.43 365.607 409.372 368.816 409.916 372.206 413.124 372.6 412.579 374.118 410.098 374.3 407.286 377.148 406.53 376.21 407.075 372.427 405.955 371.096 400.841 371.854 399.843 373.88 400.387 374.184 403.595 379.509 403.595 383.807 409.224 389.405 409.224 391.83 407.045 393.067 407.196 393.129 414.035 396.031 416.939 399.269 418.332 401.172 422.084 402.867 426.532 402.716 433.886 405.775 438.002 406.293 443.148 405.111 445.262 403.445 445.533 402.023 441.595 397.577 437.298 397.577 437.298 396.032 438.841 394.306 438.841 392.429 435.422 390.736 435.089 387.982 436.965 387.131 436.965 384.74 434.907 384.377 434.756 381.808 434.731 381.623 433.002 381.502 430.157 379.414 429.4 376.963 424.103 376.567 420.137 376.207 419.741 373.936 421.073 371.088 418.622 373.178 414.839 372.782 414.083 371.451 416.716 367.88"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-83"
+                          points="481.634 395.232 478.759 395.353 477.403 396.745 472.257 396.562 467.809 399.795 464.752 397.737 459.94 399.281 459.091 401.006 455.672 403.578 449.498 399.463 444.505 401.101 444.264 402.433 444.356 402.371 447.444 404.432 443.331 407.186 441.637 410.604 443.699 412.297 443.512 415.901 446.783 418.991 445.905 419.681 442.148 419.499 442.148 420.861 443.842 421.708 443.842 422.223 442.298 423.619 443.176 424.642 444.537 424.642 445.895 426.004 446.081 427.032 444.352 428.057 442.995 429.602 442.808 433.357 443.328 434.047 446.718 435.566 447.656 439.343 449.744 439.739 451.647 438.407 455.04 436.319 460.911 436.892 460.724 438.407 458.822 439.345 463.362 439.558 462.242 438.412 461.846 435.961 464.297 434.267 467.142 435.205 468.291 435.568 469.229 436.714 470.561 435.776 470.923 433.296 472.438 431.994 476.405 431.994 477.551 430.266 480.183 431.026 483.209 429.719 483.209 424.786 479.245 424.968 482.266 423.092 483.784 421.004 484.178 417.982 489.657 417.223 492.714 413.803 490.596 411.622 490.596 410.412 489.571 409.385 490.929 408.203 490.596 406.298 488.358 405.449 487.177 405.449 485.118 403.39 484.756 399.786 482.546 398.759 480.307 398.61 479.46 396.55"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-82"
+                          points="252.559 368.634 251.227 372.961 253.315 375.231 252.377 378.835 251.227 380.167 252.014 382.438 248.413 383.194 245.569 383.953 246.325 386.586 244.903 387.01 245.751 387.797 248.504 387.797 249.866 387.131 251.076 387.797 248.837 388.826 248.837 390.551 246.779 392.094 246.779 394.303 250.562 394.488 251.742 395.699 251.742 398.092 253.134 399.451 251.924 401.328 252.438 402.357 254.829 401.328 259.792 401.328 261.184 400.48 262.878 400.48 264.754 402.716 269.051 401.506 270.231 399.629 268.537 398.752 269.717 398.271 270.08 396.543 271.956 396.728 272.985 397.908 273.832 396.549 276.586 395.52 277.827 396.094 278.795 394.49 277.1 392.615 280.338 392.615 281.365 390.738 283.605 388.676 281.365 388.676 282.062 385.776 287.873 385.081 290.112 383.72 292.836 382.691 293.713 381.814 292.654 379.09 294.197 376.003 291.468 375.821 291.135 371.55 287.025 373.426 284.267 372.761 282.577 374.822 279.672 374.459 279.158 377.88 277.766 377.88 276.918 376 276.404 375.152 274.861 375.298 271.956 378.385 268.355 378.238 267.84 376 267.84 374.3 267.507 373.938 266.297 375.298 264.754 375.298 263.059 373.422 261.516 373.422 260.487 371.363 261.849 369.82 261.698 368.822 259.277 368.913 259.58 369.579 255.404 370.335"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-81"
+                          points="301.582 380.436 298.312 380.623 296.099 382.832 295.408 381.289 293.865 382.166 293.714 381.804 292.837 382.685 290.113 383.71 287.874 385.067 282.062 385.762 281.367 388.666 283.607 388.666 281.367 390.725 280.339 392.602 277.101 392.602 278.796 394.477 277.828 396.081 278.131 396.202 278.978 398.745 281.036 401.165 281.55 401.499 281.701 403.891 283.427 406.643 284.788 408.188 284.788 410.063 283.427 410.583 284.455 412.126 288.903 414.002 289.751 415.212 291.99 417.941 294.557 418.632 296.619 418.273 296.619 420.694 296.557 421.931 297.677 421.785 297.406 423.116 301.158 423.116 304.637 424.206 304.908 420.726 306.512 420.726 312.382 421.788 318.011 421.788 322.282 420.456 323.372 416.977 320.434 414.287 321.221 411.625 322.825 409.229 325.488 411.08 332.448 408.686 333.537 406.54 329.997 404.269 328.454 403.909 327.425 405.267 325.367 405.784 322.096 404.092 318.677 399.645 318.677 397.768 316.8 394.319 316.987 392.776 315.441 388.84 312.539 387.479 310.477 383.876 304.824 382.848"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-80"
+                          points="281.217 39.212 280.701 45.446 284.878 49.228 284.878 51.135 279.764 48.109 273.621 55.674 275.255 56.37 277.343 56.189 278.281 58.065 286.598 66.205 287.173 69.594 289.049 73.013 288.413 73.8 290.804 73.8 291.2 74.375 291.2 76.463 292.348 77.25 294.827 76.282 298.306 76.282 300.035 77.614 306.541 77.039 311.353 78.401 314.041 81.094 317.49 81.457 320.94 82.607 325.172 78.583 330.164 77.251 332.857 77.614 336.851 77.22 336.488 75.132 335.55 71.289 335.154 68.989 336.881 67.051 336.881 64.57 339.36 61.877 338.906 59.214 337.454 58.82 335.764 57.126 331.224 57.126 328.376 58.639 328.376 57.307 327.649 55.975 325.921 56.731 323.831 57.881 324.98 56.187 324.795 54.674 322.316 52.949 322.316 54.856 320.622 54.856 316.658 53.524 314.966 52.192 313.238 53.342 312.693 54.855 311.937 55.037 310.999 54.099 310.999 51.436 313.812 49.56 312.692 47.654 310.421 48.622 309.275 47.654 304.552 48.229 302.103 49.167 299.622 48.229 299.622 46.353 296.232 44.84 295.294 42.57 293.962 43.115 290.359 40.301 288.665 39.726 287.335 41.421 285.064 41.996 284.126 39.908"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-79"
+                          points="215.308 218.267 210.194 218.448 205.473 219.386 200.359 219.779 200.359 222.412 197.726 224.137 191.855 222.805 187.891 224.499 189.767 227.162 189.767 229.432 194.306 233.215 193.186 235.666 196.212 239.055 194.88 240.78 196.756 243.594 197.331 248.89 196.211 250.403 197.543 252.673 196.211 255.154 196.393 256.667 197.906 255.517 199.782 257.424 197.15 259.118 196.212 260.238 194.124 260.813 191.673 261.963 191.491 261.812 191.582 264.596 193.64 266.835 193.64 268.076 196.727 270.346 200.631 270.558 203.294 274.038 207.622 273.644 211.132 276.095 213.795 277.33 214.218 279.392 215.701 280.814 217.486 279.816 217.093 278.788 218.515 277.124 218.515 275.701 220.996 275.064 224.295 273.429 227.775 272.825 228.41 270.948 225.505 270.131 224.083 267.861 225.112 265.41 226.353 263.957 226.353 260.871 225.112 260.054 223.478 260.871 223.478 261.9 222.631 263.141 220.997 261.295 220.786 260.054 221.421 258.632 219.968 257.603 219.968 253.275 219.151 253.063 219.151 251.61 220.392 249.552 220.574 248.523 221.421 246.284 220.786 244.831 218.728 244.014 220.786 240.928 221.421 239.294 221.421 238.265 219.968 236.6 219.968 236 220.785 234.547 220.18 233.518 221.421 232.096 220.392 229.826 219.756 226.528 219.545 224.47 217.911 224.682 217.608 220.022 217.215 220.718 215.883 219.598"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-78"
+                          points="282.881 110.538 282.82 110.659 277.524 112.172 276.768 113.11 277.736 114.623 277.736 116.136 279.43 116.499 278.462 117.467 278.553 118.314 278.674 118.224 280.55 120.1 281.124 122.37 282.639 123.883 281.881 125.971 281.881 127.847 283.212 129.36 281.881 131.63 283.212 134.868 285.845 136.744 286.241 138.832 288.511 139.195 289.056 143.371 290.785 145.459 293.842 146.034 294.296 143.038 295.597 141.555 294.508 139.89 297.262 139.89 299.138 137.318 297.836 135.079 298.199 133.052 300.983 131.751 301.341 129.693 303.192 128.967 304.882 128.21 305.214 128.422 305.214 128.21 303.525 126.304 302.463 123.429 304.157 119.737 303.304 116.953 300.006 114.955 295.346 114.744 290.992 111.96 287.482 112.595"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-77"
+                          points="318.104 111.438 320.466 109.9 322.542 111.229 323.492 111.958 325.186 111.776 326.336 110.263 328.968 111.776 332.206 110.444 334.082 111.019 335.958 109.506 337.108 108.931 339.197 110.447 339.772 114.623 344.856 119.525 346.55 120.1 347.519 122.37 350.604 123.083 350.151 123.702 350.363 124.822 348.85 125.79 348.456 128.423 349.97 129.361 350.726 132.206 349.788 133.9 350.362 135.232 353.176 135.05 353.179 136.561 350.546 137.681 350.364 139.951 349.033 141.676 348.276 145.459 347.833 148.417 346.005 149.786 338.621 149.423 335.232 151.118 333.9 153.962 335.414 155.657 331.418 160.378 326.729 162.938 326.337 161.528 324.248 161.346 323.674 162.859 321.797 163.222 316.684 163.04 314.595 164.372 313 162.833 315.928 160.767 315.745 157.563 313.475 156.413 312.294 154.658 312.294 150.845 316.533 148.061 315.26 146.396 315.833 141.417 316.521 140.333 315.624 135.261 317.29 133.96 316.925 131.388 318.406 127.688 318.422 123.188 317.288 116.56"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-76"
+                          points="228.137 81.396 232.677 74.587 240.521 70.417 249.896 67.022 264.27 63.421 272.38 57.187 273.621 55.674 275.255 56.37 277.343 56.189 278.281 58.065 286.603 66.205 287.178 69.594 288.979 73 287.178 75.285 286.5 77.125 287.854 77.188 287.166 79 286.421 82.85 287.541 84.726 287.562 87.896 289.354 88 287.359 91.746 286.844 93.32 283.85 92.987 278.812 90.396 274.468 90.536 272.168 92.563 270.928 96.104 266.056 96.649 261.583 98.021 262.979 99.062 262.394 100.734 260.229 100.667 259.021 98.188 257.643 98.131 255.583 96.521 258.416 95.562 253.833 92.292 249.23 92.562 248.146 90.708 245.538 90.958 243.667 87.708 242.028 88.084 239.849 90.414 236.208 90.833 235.875 90.542 230.982 89.536 227.199 86.691"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-75"
+                          points="27.622 24.751 19.557 24.851 15.972 26.444 14.478 28.435 11.192 28.634 8.205 32.019 8.305 33.911 9.002 36.101 13.981 37.495 20.055 40.582 23.938 40.781 26.527 40.084 29.215 38.192 30.111 38.988 35.886 39.785 36.882 37.694 36.882 35.603 35.886 35.205 31.903 35.404 32.202 36.4 31.505 36.998 30.211 36.998 30.709 35.704 30.908 34.31 30.709 34.31 30.211 28.734"
+                        />
+                        <path
+                          class="dep"
+                          d="M308.108648,130.182479 L307.530827,130.485068 L304.827665,128.589765 L304.827665,128.372277 L303.087443,126.414879 L302,123.463336 L303.709018,119.734825 L304.0819,119.67273 L307.562031,117.808318 L307.568375,117.934276 L312.52433,117.609864 L315.382574,116.304932 L317.215782,115 L316.967401,116.553312 L318.11694,123.389071 L318.11694,126.035656 C318.179187,126.09712 318.241698,126.158936 318.304473,126.221105 L318.304473,127.961014 L316.782052,131.782511 L316.813256,132 L314.669261,131.005543 L311.065252,131.005543 L308.983664,129.856005 L308.113709,130.290982 L308.108648,130.182479 Z"
+                          id="dpt-75-92-93-94"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-74"
+                          points="471.347 253.884 467.019 254.64 462.843 258.029 461.724 256.335 459.636 256.516 457.729 260.692 457.946 262.387 460.004 264.081 456.222 266.562 453.771 268.832 449.595 268.832 447.689 270.345 445.842 270.95 444.814 272.827 442.968 271.798 442.544 277.124 443.57 279 443.631 281.027 445.205 282.267 445.205 287.621 448.927 288.225 450.349 290.917 453.652 291.311 454.256 290.1 455.92 290.1 458.795 293.188 459.823 294.217 463.122 293.579 463.934 291.945 464.75 288.646 466.597 287.193 468.049 282.896 469.897 281.657 471.348 282.051 471.744 283.291 470.716 284.532 472.562 286.803 475.653 286.803 477.53 289.889 477.101 290.917 478.952 289.678 480.405 288.042 481.676 288.193 481.767 284.894 488.213 282.23 488.969 280.355 488.575 276.179 484.429 271.851 483.098 272.607 483.098 270.88 483.098 268.066 479.496 266.341 479.309 264.828 481.401 262.558 481.401 259.926 477.979 256.325 477.796 253.874 471.351 253.874"
+                        />
+                        <path
+                          class="dep selectable"
+                          d="M443.143,280.635 L442.75,286.173 L441.509,287.201 L441.509,293.375 L439.03,293.799 L438.634,297.309 L436.364,298.944 L436.334,298.918 L436.576,299.98 L438.846,302.429 L438.846,304.092 L441.085,308.208 L445.836,309.233 L447.471,310.473 L448.111,309.836 L447.259,308.202 L448.499,305.51 L449.952,305.327 L452.403,308.596 L453.426,307.173 L454.879,307.173 L458.782,311.077 L459,313.74 L457.154,314.769 L456.301,318.667 L457.965,320.332 L457.965,321.968 L457.541,323.63 L458.782,322.394 L460.84,323.63 L461.93,325.112 L465.349,324.75 L466.469,325.869 L467.043,328.532 L470.434,328.136 L470.83,325.292 L472.524,324.534 L476.156,324.716 L476.094,324.597 L481.752,322.326 L483.84,323.658 L485.928,323.658 L486.115,321.387 L488.565,320.055 L489.503,318.936 L494.436,317.032 L495.011,313.823 L494.042,312.309 L496.705,307.77 L494.254,306.832 L493.497,304.169 L488.383,301.145 C488.383,301.145 488.694,295.346 488.202,294.305 C488.182,294.284 488.153,294.231 488.14,294.214 C488.135,294.208 488.119,294.19 488.115,294.184 C488.111,294.184 488.087,294.184 488.085,294.184 C488.085,294.178 488.084,294.16 488.085,294.159 C488.081,294.159 488.057,294.159 488.055,294.159 C488.052,294.158 488.033,294.159 488.029,294.159 C488.021,294.159 488.002,294.159 488,294.159 C487.243,294.347 484.429,294.555 484.429,294.555 L481.584,291.317 L481.675,288.202 L480.404,288.051 L478.953,289.687 L477.102,290.926 L477.529,289.898 L475.652,286.812 L472.563,286.812 L470.717,284.541 L471.745,283.3 L471.349,282.06 L469.896,281.666 L468.05,282.905 L466.598,287.203 L464.751,288.655 L463.935,291.955 L463.123,293.588 L459.824,294.226 L458.796,293.197 L455.921,290.111 L454.257,290.111 L453.653,291.32 L450.353,290.926 L448.931,288.234 L445.209,287.63 L445.209,282.276 L443.143,280.635 Z"
+                          fill="#313278"
+                          id="dpt-73"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-72"
+                          points="235.371 143.189 230.257 143.37 225.143 148.091 222.48 147.94 218.939 149.09 217.85 150.966 217.366 155.021 217.699 157.502 214.885 159.862 214.098 161.405 214.734 162.827 213.947 164.703 214.25 165.49 211.133 165.793 210.679 167.185 212.071 170.635 211.92 171.573 210.679 172.662 208.016 172.813 207.683 173.751 208.318 174.689 208.318 180.317 207.713 181.739 209.407 183.131 209.407 185.007 212.221 185.158 219.575 187.337 227.533 192.179 230.105 193.178 231.376 190.636 235.159 193.299 237.247 193.299 236.097 189.516 238.397 191.029 239.698 189.123 245.175 187.61 244.237 185.34 245.569 183.646 248.413 182.526 251.046 179.106 251.046 175.505 252.953 175.505 253.709 172.873 253.891 168.909 252.015 167.184 253.528 164.552 255.767 161.707 253.134 159.831 250.683 159.437 248.02 155.473 247.263 155.473 247.082 157.349 246.9 156.048 242.936 156.048 241.03 153.203 237.822 152.053 236.884 145.244"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-71"
+                          points="379.686 216.754 379.686 216.936 376.841 216.936 374.541 218.297 373.18 220.204 374.269 221.838 375.207 222.382 374.541 224.016 373.573 224.56 372.511 226.043 373.722 226.86 373.576 228.767 373.847 230.794 375.632 231.883 375.632 232.7 373.726 233.79 373.726 235 375.087 236.211 374.936 236.907 371.97 236.756 371.699 237.724 370.338 237.996 368.977 239.751 367.221 239.751 365.865 241.113 364.08 241.384 363.142 239.084 361.932 238.933 358.966 240.779 362.476 247.376 362.476 250.221 363.414 251.371 366.622 251.371 367.741 252.884 370.762 252.884 372.093 254.76 371.911 262.144 367.947 265.17 367.854 265.382 368.125 265.352 368.7 265.534 368.882 268.56 371.726 269.135 372.089 270.467 373.606 270.467 375.877 269.135 381.929 270.073 383.079 271.223 384.592 269.71 386.68 269.71 387.8 263.658 388.556 263.083 390.433 263.083 392.738 264.596 394.427 263.083 395.546 264.596 397.274 262.901 399.335 262.719 400.303 265.745 401.032 269.528 402.364 269.709 403.51 267.046 407.081 253.065 408.412 250.614 410.5 250.403 412.588 252.128 414.102 251.734 415.978 250.403 417.884 250.796 419.004 253.247 420.093 253.671 425.056 253.066 426.962 251.553 426.206 250.403 423.935 249.646 423.723 247.013 425.629 245.682 426.386 242.474 424.693 239.448 423.547 237.935 424.121 237.36 424.121 235.484 422.603 234.516 422.209 233.003 426.563 232.459 426.959 230.946 425.628 230.946 424.508 229.614 422.42 229.614 420.695 226.769 419.177 226.588 419.363 224.318 417.724 224.136 415.545 225.618 413.366 226.163 411.884 225.225 409.98 225.104 409.433 225.891 407.677 226.163 403.743 227.404 398.023 229.431 395.839 227.676 393.268 227.131 393.151 224.831 390.7 223.045 387.307 220.473 383.495 220.594 379.834 216.811"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-70"
+                          points="448.438 166.066 444.872 166.641 444.298 168.517 442.391 169.849 441.09 168.336 440.152 168.911 440.88 170.031 439.004 171.181 439.579 172.694 437.49 173.45 437.49 175.901 434.828 175.901 434.641 177.414 432.008 177.989 432.195 180.259 433.884 180.441 432.946 181.561 432.372 185.344 430.677 185.344 427.832 186.494 424.807 185.344 422.174 186.494 422.174 188.401 424.236 188.764 425.749 191.79 425.961 193.303 423.51 196.147 422.364 196.51 421.604 197.448 423.695 198.416 424.053 201.442 425.747 201.623 425.959 205.406 426.716 206.163 426.807 206.768 428.259 207.162 429.896 208.524 432.345 208.524 433.283 207.586 434.947 207.646 436.673 207.707 440.485 204.59 441.575 204.59 442.785 203.652 446.72 203.773 449.715 201.322 451.895 200.928 452.711 198.901 454.466 198.356 456.222 195.36 458.673 193.453 461.244 193.06 463.151 194.422 466.691 193.998 466.691 192.091 468.114 191.274 469.233 189.731 471.412 189.731 472.623 188.46 473.076 185.434 473.076 183.558 472.26 180.683 472.26 178.262 473.742 177.173 475.497 176.265 475.316 175.902 469.258 172.694 467.569 170.787 465.874 169.667 464.361 170.424 464.149 171.544 462.631 172.482 461.693 172.482 458.843 169.274 454.879 169.274 453.19 170.606 451.671 170.787 449.22 168.911 449.407 166.823"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-69"
+                          points="399.325 262.72 397.263 262.902 395.537 264.597 394.418 263.084 392.724 264.597 390.424 263.084 388.547 263.084 387.791 263.659 387.396 265.838 388.42 266.655 388.42 268.501 389.661 270.559 388.632 271.8 384.734 271.8 384.521 275.491 383.282 276.73 384.094 279.818 384.094 281.665 385.759 283.299 385.759 285.569 388.209 287.84 388.209 290.503 386.999 292.35 388.421 293.201 388.421 294.624 387.184 295.649 387.184 297.313 392.538 302.25 398.923 303.274 399.528 305.125 397.466 307.576 399.13 308.6 401.192 307.788 403.401 308.12 407.365 306.149 406.73 304.913 404.067 302.25 408.179 300.798 413.533 299.56 417.648 294.236 414.955 291.965 415.106 289.997 411.261 288.877 408.782 289.693 408.386 286.394 406.115 284.332 404.663 284.121 400.975 281.881 401.579 280.431 401.579 274.044 402.607 272.621 402.968 268.204 402.33 269.717 400.998 269.536 400.271 265.753"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-68"
+                          points="489.199 147.698 486.349 147.849 484.569 151.873 482.298 156.412 482.872 159.257 480.996 163.614 477.758 166.426 477.577 173.81 475.217 175.837 475.308 175.898 476.069 177.411 479.09 177.593 482.51 180.256 483.054 181.557 482.872 183.827 481.934 185.552 482.296 187.823 484.958 187.429 485.533 189.517 486.471 193.541 488.71 193.178 488.316 195.236 489.647 196.386 496.633 196.204 500.237 193.36 500.419 189.184 502.325 186.733 499.844 183.888 498.543 180.862 500.056 178.804 500.056 174.053 500.994 171.783 500.994 168 502.686 165.549 500.811 162.916 500.625 157.469 497.72 156.198 496.056 151.386 492.333 151.568 490.854 149.722"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-67"
+                          points="503.846 104.849 500.244 105.848 498.58 108.753 498.58 111.598 497.066 112.93 495.735 112.93 493.284 111.205 491.378 112.537 489.108 112.537 487.232 110.661 483.628 110.086 481.54 109.148 480.783 106.304 479.089 108.18 478.151 112.537 475.67 113.294 475.67 115.745 478.151 116.895 480.028 118.227 479.271 119.921 480.996 121.041 484.022 118.771 489.288 121.797 487.049 125.973 487.236 127.305 488.749 128.818 487.599 132.782 483.822 136.565 481.734 136.383 483.06 137.684 482.304 141.103 483.06 146.217 486.664 147.155 486.361 147.851 489.206 147.7 490.87 149.727 492.349 151.573 496.077 151.391 497.741 156.203 500.641 157.474 500.616 156.869 505.549 147.216 504.974 141.739 507.245 134.355 507.82 127.909 512.717 124.338 512.717 122.068 514.623 119.587 516.136 119.587 517.831 117.893 517.468 114.685 519.162 110.145 521.795 109.57 519.162 107.482 514.44 106.937 510.26 104.849 507.415 106.543 505.902 104.849 503.846 104.849"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-66"
+                          points="330.33 448.945 326.215 451.154 326.547 453.575 308.603 453.575 308.754 456.813 310.63 459.567 302.943 463.319 302.127 462.835 295.802 463.289 295.016 464.893 291.808 465.71 289.662 467.586 283.792 468.948 284.124 470.945 286.969 473.608 292.628 475.121 292.81 478.511 295.835 481.173 298.105 480.78 301.343 476.815 305.307 476.054 311.541 478.147 316.837 482.681 318.35 480.78 319.681 480.78 321.013 481.718 322.132 481.173 322.314 478.511 328.003 477.179 329.879 474.729 332.724 473.791 336.688 473.791 339.169 476.423 342.195 476.635 342.195 473.614 340.676 471.525 338.014 470.376 337.59 453.855 335.111 452.708"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-65"
+                          points="212.887 411.09 211.011 412.089 211.344 412.119 214.552 417.414 212.464 419.321 213.977 421.591 216.247 424.985 214.371 427.431 211.345 434.243 206.231 438.597 207.563 441.26 206.413 442.016 203.599 441.447 202.812 447.676 201.299 448.825 200.996 452.726 201.48 452.455 204.688 454.361 208.471 457.206 208.834 459.477 211.86 461.925 214.341 461.925 220.575 459.262 223.208 462.288 226.809 463.256 228.14 460.986 229.835 461.743 233.497 461.985 233.255 451.817 235.162 451.817 236.856 452.665 238.066 451.484 237.884 449.608 240.275 448.212 239.428 444.644 238.399 443.764 236.341 444.459 237.37 442.734 236.855 440.525 233.769 438.286 233.951 436.743 235.676 433.838 237.885 432.99 237.885 431.78 239.247 429.718 240.155 428.447 236.705 426.662 232.075 426.662 231.379 425.268 228.988 425.268 228.292 423.724 226.083 423.724 225.387 424.417 222.815 424.417 222.664 422.873 220.606 421.515 221.302 420.821 221.635 419.127 221.12 418.612 220.091 415.857 217.852 415.525 215.643 414.314 215.794 411.077 212.887 411.077"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-64"
+                          points="206.048 411.423 203.324 412.967 197.847 412.785 197.332 411.937 193.731 413.148 190.978 413.995 188.92 412.452 186.711 413.148 186.015 412.269 183.291 412.269 181.566 413.148 177.117 412.961 174.726 414.836 170.429 414.504 169.582 415.72 168.553 415.357 169.914 413.995 167.523 412.119 164.618 414.691 159.655 415.023 154.208 412.295 153.421 413.691 149.064 418.988 145.675 420.319 143.224 420.677 143.224 422.765 145.494 424.859 148.883 425.04 149.065 427.491 151.728 427.703 152.484 425.974 156.085 427.492 158.355 428.067 158.9 430.337 157.599 431.487 157.599 435.052 154.936 436.384 154.754 438.078 156.449 439.984 159.475 440.922 160.05 438.077 161.744 436.201 161.562 438.652 162.894 440.553 166.283 440.553 167.796 442.615 172.335 443.372 176.693 446.035 183.865 446.035 184.258 449.999 189.16 453.781 191.067 456.051 193.155 454.932 195.031 454.538 195.969 455.476 197.694 454.538 200.992 452.723 201.295 448.824 202.808 447.675 203.595 441.446 206.409 442.015 207.559 441.259 206.227 438.596 211.341 434.242 214.367 427.43 216.243 424.979 213.973 421.59 212.46 419.32 214.548 417.413 211.34 412.117 206.226 411.755"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-63"
+                          points="320.222 274.311 321.765 273.614 322.976 270.709 324.156 270.376 324.188 268.891 326.188 268.703 326.391 269.562 328.968 266.775 331.871 266.769 332.386 267.798 331.025 269.674 333.052 271.914 333.415 273.275 338.196 276.029 343.922 276.891 345.731 276.695 348.303 277.209 350.512 275.848 352.238 276.695 352.57 279.087 354.734 279.609 357.714 279.451 358.562 281.508 361.203 282.516 361.135 283.328 364.094 285.781 362.466 287.473 361.892 291.65 364.162 294.675 366.22 299.577 371.153 302.814 372.781 309.031 369.245 312.438 369.82 314.708 371.219 315.234 370.545 315.915 368.154 315.219 366.469 313.531 365.422 315.5 362.495 315.4 361.141 314.203 360.062 316.469 358.229 315.734 357.031 313.516 355.475 313.495 354.114 312.314 351.984 313.141 349.665 313.346 348.303 312.466 347.453 312.922 347.109 312.141 345.731 312.829 345.688 313.969 343.673 314.191 341.797 315.736 338.377 316.25 337.591 317.369 336.834 317.279 336.138 318.641 333.415 318.458 330.843 314.523 329.814 314.373 327.756 313.346 326.516 314.469 323.489 314.525 321.945 311.287 316.135 309.593 316.5 308.312 315.926 305.083 314.776 303.751 314.776 301.089 316.484 298.266 316.108 295.611 311.748 291.255 311.385 289.562 317.047 286.375 317.625 283.734 319.859 282 319.133 278.395 317.609 276.469 317.375 272.156"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-62"
+                          points="300.069 4.503 289.599 6.5 281.278 12.916 281.278 38.457 281.217 39.213 284.153 39.909 285.091 41.997 287.362 41.422 288.693 39.727 290.383 40.302 293.987 43.116 295.319 42.571 296.257 44.841 299.651 46.354 299.651 48.23 302.13 49.168 304.581 48.23 309.302 47.655 310.451 48.623 312.721 47.655 313.841 49.561 311.029 51.437 311.029 54.1 311.967 55.038 312.723 54.856 313.268 53.343 314.997 52.193 316.687 53.525 320.656 54.857 322.345 54.857 322.345 52.95 324.826 54.675 325.008 56.188 323.862 57.882 325.951 56.732 327.676 55.976 328.405 57.308 328.405 58.64 331.25 57.127 335.79 57.127 335.971 57.309 337.091 55.161 336.516 54.192 334.791 53.829 332.885 53.829 331.737 53.435 333.641 52.285 335.37 52.467 337.095 52.285 337.307 49.198 338.456 48.442 338.638 46.717 336.52 45.355 334.041 45.173 333.467 44.779 335.01 43.629 335.373 42.479 334.041 41.541 332.103 39.211 332.316 38.061 334.796 36.911 335.191 35.579 333.465 34.792 332.496 32.311 329.046 31.917 325.597 30.979 325.202 27.136 327.681 25.593 326.743 23.656 324.805 23.656 323.474 25.774 317.512 25.411 312.7 24.231 310.038 21.356 310.038 19.056 312.126 18.088 310.398 16.756 306.193 16.574 303.678 10.219"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-61"
+                          points="194.859 128.594 192.794 127.273 196.606 126.123 199.42 122.855 203.323 123.944 206.742 121.584 208.8 120.827 210.979 123.006 214.58 122.37 217.697 124.095 221.601 122.854 225.172 120.191 227.532 117.528 229.106 117.225 229.562 119.172 230.801 118.95 230.952 117.528 234.553 116.923 235.794 117.679 239.638 116.832 238.759 119.344 240.272 121.25 245.568 121.432 246.656 123.984 248.594 125.971 251.227 126.909 252.014 129.754 250.683 131.63 254.071 133.899 254.253 137.137 258.247 140.526 258.609 147.469 256.734 149.786 253.89 150.361 251.045 152.055 251.439 153.568 252.74 155.293 252.719 159.703 250.682 159.441 248.016 155.5 247.262 155.477 247.094 157 246.922 156.078 242.935 156.052 241.031 153.203 237.812 152 236.906 145.234 235.344 143.188 230.256 143.371 225.142 148.092 221.969 147.859 220.969 144.5 218.515 143.552 217.758 139.406 216.047 137.891 214.188 138.075 213.401 139.951 210.587 141.101 205.473 140.345 200.344 143.312 198.483 142.04 195.625 143.891 193.516 142.375 192.344 140.281 195.484 137.547 196.609 133.875 196.297 132.391 196.734 130.516"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-60"
+                          points="288.418 73.801 287.178 75.284 286.421 77.16 287.935 77.16 287.178 79.066 286.421 82.849 287.541 84.725 287.541 87.963 289.447 87.963 288.69 89.264 287.359 91.745 286.814 93.439 288.503 94.952 289.048 99.309 290.022 100.822 288.69 101.185 286.996 100.247 286.693 102.486 286.814 102.335 287.541 104.029 288.69 105.905 293.799 106.299 297.403 105.905 299.854 104.029 302.875 105.905 304.392 107.055 306.663 106.48 308.721 105.542 312.715 107.63 316.861 110.081 318.193 111.413 320.463 109.9 322.339 111.02 323.489 111.958 325.178 111.776 326.328 110.263 328.96 111.776 332.198 110.444 334.074 111.019 335.95 109.506 337.098 108.931 337.458 109.203 337.854 106.631 336.492 105.088 334.192 103.545 333.223 105.088 332.649 105.269 332.463 102.394 334.192 102 333.796 99.337 331.496 98.944 332.646 97.007 335.914 96.251 337.064 91.651 338.789 90.864 336.489 89.139 337.276 87.414 337.637 81.664 336.852 77.216 332.858 77.61 330.165 77.247 325.173 78.579 320.941 82.603 317.491 81.453 314.042 81.09 311.354 78.397 306.542 77.035 300.036 77.61 298.307 76.278 294.828 76.278 292.348 77.246 291.202 76.459 291.202 74.371 290.806 73.796 288.415 73.796"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-59"
+                          points="316.077 0.055 310.024 2.899 300.583 4.412 300.069 4.503 303.67 10.222 306.182 16.577 310.388 16.759 312.117 18.091 310.029 19.059 310.029 21.359 312.687 24.234 317.499 25.414 323.461 25.777 324.792 23.659 326.73 23.659 327.668 25.596 325.187 27.139 325.583 30.982 329.032 31.92 332.482 32.314 333.451 34.795 335.176 35.582 334.782 36.914 332.301 38.064 332.089 39.214 334.027 41.544 335.359 42.482 334.996 43.632 333.453 44.782 334.027 45.176 336.506 45.358 338.624 46.72 338.442 48.445 337.293 49.201 337.081 52.288 335.356 52.47 333.627 52.288 331.721 53.438 332.871 53.832 334.777 53.832 336.502 54.195 337.077 55.164 335.957 57.312 337.471 58.825 338.989 59.219 340.503 58.251 342.591 58.251 343.165 59.401 343.922 59.219 346.193 57.887 348.463 59.219 351.489 57.131 352.82 57.131 354.334 58.463 357.359 56.375 358.661 56.557 359.807 57.495 363.989 57.888 364.347 59.583 366.435 57.707 367.554 57.707 368.312 60.158 371.916 61.096 372.945 60.4 372.637 60.4 372.455 58.524 376.238 56.254 375.663 52.653 372.059 51.715 372.999 50.747 372.999 48.114 375.844 46.026 375.087 44.513 369.035 39.792 358.443 40.367 357.323 42.243 355.992 42.243 356.174 35.616 353.153 32.045 350.882 32.408 349.551 30.895 345.768 32.589 344.467 31.288 341.804 30.894 341.047 28.443 340.865 20.878 339.171 20.122 338.959 18.972 337.84 18.972 337.446 16.702 334.995 16.914 330.271 18.427 328 21.237 325.73 21.237 324.211 19.361 323.637 17.273 321.76 15.185 319.099 15.185 317.983 13.127 317.983 9.89 319.284 7.832 318.528 4.988"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-58"
+                          points="336.382 193.453 335.444 194.936 333.658 194.936 331.262 194.392 328.605 195.179 328.786 197.085 331.057 199.718 331.057 203.319 329.367 205.77 329.912 208.04 333.332 210.703 333.514 213.336 335.42 217.33 335.026 221.87 337.114 223.928 336.539 228.861 336.352 231.312 337.29 233.006 335.838 237.636 335.958 239.058 339.196 240.571 341.466 243.052 343.528 241.902 345.429 240.782 345.825 242.476 348.637 242.476 349.394 240.963 351.088 241.719 351.663 244.17 353.176 243.807 356.78 238.874 358.656 240.206 358.959 240.781 361.925 238.935 363.135 239.086 364.073 241.386 365.858 241.114 367.214 239.752 368.97 239.752 370.331 237.997 371.692 237.725 371.963 236.757 374.929 236.908 375.08 236.212 373.719 235.001 373.719 233.791 375.625 232.701 375.625 231.884 373.84 230.795 373.569 228.768 373.715 226.861 372.504 226.044 373.566 224.561 374.534 224.017 375.2 222.383 374.262 221.839 373.173 220.205 374.534 218.298 376.834 216.937 379.679 216.937 379.679 214.789 380.496 214.517 380.496 213.7 379.285 211.794 376.561 211.249 375.623 209.615 376.019 208.132 376.29 206.074 375.81 204.985 372.785 207.043 371.545 207.588 369.91 206.498 370.06 203.775 368.276 203.775 366.794 204.743 366.4 203.502 367.212 202.14 366.244 200.93 365.154 202.564 365.3 203.774 362.733 203.653 358.648 199.84 355.531 199.719 355.531 197.661 353.351 196.299 352.923 194.544 352.258 194.423 352.258 197.812 351.047 198.084 349.265 197.539 347.389 198.749 346.296 199.021 345.207 198.083 344.117 198.627 341.666 196.993 339.911 196.993 338.67 196.176 338.942 194.663 337.581 193.453 336.382 193.453"
+                        />
+                        <path
+                          class="dep selectable"
+                          d="M448.044,83.666 L445.199,83.847 L442.928,85.754 L442.353,86.692 L439.151,86.692 L438.031,85.542 L437.547,85.542 C437.622,87.169 437.698,88.387 437.698,88.387 L436.76,89.869 L439.181,95.044 L440.088,95.8 L441.208,98.766 L439.725,101.338 L441.39,103.002 L440.663,104.485 L440.663,106.543 L438.6,106.543 L438.418,108.934 L442.321,111.355 L442.134,114.321 L445.105,114.321 L446.584,116.348 L450.275,116.348 L453.997,121.008 L454.905,123.58 L457.326,123.58 L462.138,125.638 L466.409,128.21 L466.409,128.967 L469.193,129.148 L472.704,131.176 L476.032,131.176 L478.816,133.234 L481.962,135.443 L484.201,136.17 L487.59,132.78 L488.74,128.816 L487.222,127.303 L487.04,125.971 L489.279,121.795 L484.008,118.769 L480.987,121.039 L479.258,119.919 L480.019,118.225 L478.14,116.893 L475.661,115.743 L475.661,113.292 L478.14,112.535 L479.078,108.178 L480.772,106.302 L481.529,109.146 L483.617,110.084 L487.219,110.659 L489.095,112.535 L491.366,112.535 L493.272,111.203 L495.718,112.928 L497.049,112.928 L498.568,111.596 L498.568,108.751 L500.232,105.846 L499.836,105.967 L498.535,104.091 L494.752,101.821 L493.421,99.733 L488.882,100.127 L486.219,102.578 L479.804,102.76 L477.902,101.428 C477.775,101.196 476.84,99.553 476.026,99.098 C475.995,99.081 475.942,99.054 475.905,99.037 C475.878,99.026 475.838,99.013 475.813,99.007 C475.799,99.002 475.759,98.982 475.751,98.977 C475.749,98.977 475.725,98.977 475.721,98.977 C475.7,98.976 475.655,98.977 475.63,98.977 C474.744,98.977 473.027,97.982 472.818,97.857 L470.155,98.977 L469.968,101.247 L466.76,101.64 L464.859,98.039 L463.739,97.645 L463.739,95.012 L461.076,93.862 L460.894,89.323 L458.988,87.447 L455.024,85.541 L453.147,85.541 L452.573,85.935 L450.667,85.935 L448.044,83.666 Z"
+                          fill="#313278"
+                          id="dpt-57"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-56"
+                          points="93.567 151.632 90.42 153.145 88.211 153.145 85.881 155.021 86.032 156.413 87.424 160.015 88.211 162.829 93.053 163.616 95.413 165.492 96.351 164.372 97.894 166.43 97.107 167.368 96.956 170.152 95.564 170.152 94.475 171.877 92.266 171.877 91.358 175.599 93.477 178.989 96.503 179.745 97.623 178.05 97.079 180.108 99.711 181.258 103.13 184.647 104.25 186.735 103.887 189.186 103.493 191.667 105.763 193.362 106.913 192.03 105.763 190.517 105.763 187.128 108.033 187.672 108.79 185.402 109.365 186.734 111.816 188.822 112.966 186.916 111.816 184.283 113.904 187.128 116.537 186.734 115.993 185.402 118.444 185.977 120.32 188.247 119.382 189.76 116.931 189.004 114.086 187.672 112.573 189.579 114.843 190.335 116.537 192.968 126.766 192.03 129.398 192.605 128.097 193.725 128.279 195.45 128.642 195.722 129.459 195.571 131.154 193.876 132.274 195.177 135.3 195.177 138.901 193.301 144.197 191.213 144.379 185.918 145.499 185.313 143.502 181.561 145.227 180.169 144.924 179.231 143.835 178.596 145.53 177.809 147.104 175.933 146.953 174.057 144.925 174.057 144.441 172.211 145.863 170.335 144.289 167.521 141.959 166.099 139.296 166.099 138.358 165.797 138.358 164.556 139.75 163.285 140.537 160.168 140.083 158.141 139.448 158.928 135.696 158.626 133.971 155.479 132.579 155.479 130.4 156.266 130.4 158.293 127.434 160.169 125.074 159.231 124.136 157.204 123.379 158.293 121.17 158.293 120.081 156.901 118.992 156.901 116.662 154.541 113.999 155.177 111.185 152.665 108.673 152.847 107.916 154.39 104.951 155.964 101.35 154.39 100.412 153.452 98.838 154.541 96.962 154.39 96.659 152.847 93.693 152.06"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-55"
+                          points="408.369 81.155 408.913 81.911 411.758 81.911 413.09 83.212 414.784 82.092 416.115 79.913 417.209 80.065 418.722 81.578 419.479 85.179 420.386 85.179 420.265 87.449 421.384 89.295 420.627 91.716 420.809 92.442 421.747 91.716 422.655 90.051 424.531 89.869 427.678 88.931 429.342 90.232 430.643 93.379 430.643 95.044 431.551 95.8 431.551 97.071 430.643 98.191 430.461 100.612 431.188 101.732 431.552 105.606 432.671 106.544 434.336 107.271 433.609 108.753 435.636 110.629 433.79 112.656 434.153 113.957 435.999 114.865 435.999 115.803 433.79 115.803 432.852 117.104 433.034 118.042 434.517 119.525 431.764 126.364 432.491 128.422 432.491 131.751 433.247 133.416 434.337 133.416 434.75 134.281 433.247 134.354 431.765 135.08 431.765 136.2 433.611 137.864 433.611 140.467 432.672 141.949 429.707 142.857 429.688 141.844 428.799 141.772 428.799 143.039 425.077 143.795 425.077 145.46 421.875 145.75 422.172 145.464 418.178 141.102 416.483 140.527 411.844 138.188 409.493 135.624 405.529 135.049 405.346 128.423 401.744 125.578 401.351 124.065 402.683 121.798 401.533 120.857 402.683 118.016 404.771 117.078 406.219 112.406 403.469 112.375 404.875 110.688 403.621 106.483 402.319 103.639 404.014 102.129 403.045 101.944 402.68 99.858 404.875 98.781 406.073 97.589 405.343 95.712 405.131 94.38 407.219 92.685 407.979 88.903 405.706 86.058"
+                        />
+                        <path
+                          class="dep selectable"
+                          d="M427.225,81.759 L424.955,83.847 L421.747,84.029 L420.627,85.179 L420.386,85.179 L420.265,87.449 L421.384,89.295 L420.99,90.415 L420.627,91.716 L420.809,92.442 L421.747,91.716 L422.655,90.051 L424.531,89.869 L427.677,88.931 L429.341,90.232 L430.07,91.715 L430.639,93.379 L430.639,95.044 L431.547,95.8 L431.547,97.071 L430.639,98.191 L430.457,100.612 L431.184,101.732 L431.371,103.215 L431.553,105.606 L432.672,106.544 L434.337,107.271 L433.61,108.753 L435.632,110.629 L433.786,112.656 L434.149,113.957 L435.995,114.865 L435.995,115.803 L433.786,115.803 L432.848,117.104 L433.035,118.042 L434.514,119.525 L433.243,123.035 L431.761,126.364 L432.49,128.422 L432.49,131.751 L433.246,133.416 L434.336,133.416 L434.91,134.354 L433.246,134.354 L431.764,135.08 L431.764,136.2 L433.615,137.864 L433.615,140.467 L435.461,139.892 L438.245,140.074 L438.427,143.04 L439.547,143.433 L438.245,144.341 L438.058,145.279 L440.085,145.642 L441.387,147.306 L447.499,146.943 L448.801,144.522 L451.584,144.522 L452.704,143.614 L454.55,144.734 L456.215,144.159 L458.636,144.341 L460.663,143.614 L462.69,142.131 L463.804,143.251 L463.991,140.648 L465.47,140.073 L466.231,142.494 L468.44,142.676 L470.674,143.251 L471.582,143.432 L474.76,141.95 L476.424,140.83 L477.906,138.984 L480.872,137.864 L482.81,137.44 L481.716,136.381 L483.806,136.563 L484.202,136.17 L481.963,135.443 L478.817,133.234 L476.033,131.176 L472.705,131.176 L469.194,129.148 L466.41,128.967 L466.41,128.21 L462.143,125.638 L457.331,123.58 L454.91,123.58 L454.002,121.008 L450.28,116.348 L446.589,116.348 L445.11,114.321 L442.144,114.321 L442.326,111.355 L438.423,108.934 L438.61,106.543 L440.668,106.543 L440.668,104.485 L441.397,103.002 L439.732,101.338 L441.211,98.766 L440.091,95.8 L439.184,95.044 L436.763,89.869 L437.701,88.387 C437.701,88.387 437.625,87.169 437.55,85.542 L435.008,85.542 L431.589,81.759 L427.225,81.759 Z"
+                          fill="#313278"
+                          id="dpt-54"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-53"
+                          points="216.064 137.894 214.188 138.076 213.401 139.952 210.587 141.102 205.473 140.346 200.359 143.372 198.483 142.041 195.639 143.947 193.551 142.434 192.219 140.164 189.405 139.014 187.499 140.527 184.291 140.133 184.109 145.066 185.047 145.822 185.047 149.605 183.14 151.512 183.14 154.538 183.715 156.414 183.715 161.892 185.047 163.224 185.047 168.338 181.839 167.945 180.507 168.701 178.056 174.753 177.087 178.172 176.785 178.838 180.204 179.534 183.018 179.534 186.135 181.561 187.406 180.018 193.004 181.712 195.213 182.983 200.206 182.801 202.385 180.622 205.835 181.711 207.681 181.711 207.711 181.741 208.316 180.319 208.316 174.691 207.681 173.753 208.014 172.815 210.677 172.664 211.918 171.575 212.069 170.637 210.677 167.187 211.131 165.795 214.248 165.492 213.945 164.705 214.732 162.829 214.096 161.407 214.883 159.864 217.697 157.504 217.364 155.023 217.848 150.968 218.937 149.092 222.478 147.942 221.934 147.912 220.966 144.492 218.515 143.554 217.758 139.408"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-52"
+                          points="406.438 131.418 401.994 132.174 401.419 136.955 397.395 139.83 395.307 139.104 394.308 141.192 394.126 144.067 397.576 148.879 400.844 150.029 401.601 154.053 401.813 160.953 400.667 162.678 397.396 162.89 395.283 164.796 396.826 165.765 397.462 168.186 399.732 169.457 403.126 173.058 407.48 178.929 405.03 181.561 406.724 182.711 406.909 185.919 409.931 185.737 410.688 187.25 412.959 187.431 414.648 186.493 417.674 190.276 418.069 191.214 422.215 190.276 423.002 188.37 423.184 188.4 423.184 186.493 425.818 185.343 428.842 186.493 431.687 185.343 433.382 185.343 433.956 181.56 434.894 180.44 433.205 180.258 433.018 177.988 435.652 177.413 435.838 175.9 438.5 175.9 438.5 173.449 440.589 172.693 440.014 171.18 440.589 170.817 438.86 169.456 436.802 170.212 436.802 166.248 431.506 163.615 432.626 158.501 434.315 157.351 433.77 155.656 431.291 155.293 430.747 152.812 428.476 152.812 425.813 149.241 422.792 149.03 421.486 147.154 423.18 145.46 419.186 141.102 417.496 140.527 412.957 138.257 410.506 135.624 406.542 135.049"
+                        />
+                        <path
+                          class="dep selectable"
+                          d="M366.038,92.29 L363.767,93.259 L364.163,95.135 L360.168,95.135 L356.598,97.798 L356.598,102.881 L359.236,104.606 L359.992,106.301 L355.635,106.664 L355.09,108.389 L356.785,109.509 L356.028,110.659 L354.334,111.415 L354.697,112.716 L357.143,112.716 L358.116,114.048 L356.422,115.198 L354.909,119.162 L352.059,120.494 L351.09,122.552 L350.152,123.702 L350.364,124.822 L348.846,125.79 L348.452,128.423 L349.966,129.361 L350.722,132.206 L349.784,133.9 L350.358,135.232 L353.17,135.05 L353.17,135.988 L353.987,135.806 L357.255,139.256 L361.859,138.5 L367.245,134.838 L370.483,134.838 L373.752,132.538 L377.595,130.42 L380.47,130.632 L380.866,134.475 L384.315,139.65 L388.159,139.65 L393.545,138.5 L397.389,139.831 L401.413,136.956 L401.988,132.175 L406.434,131.419 L406.34,128.423 L402.738,125.578 L402.342,124.065 L403.673,121.795 L402.527,120.857 L403.673,118.013 L405.762,117.075 L407.279,112.354 L404.254,112.535 L405.948,110.659 L404.617,106.483 L403.315,103.639 L405.004,102.126 L404.036,101.944 L403.794,100.643 C403.755,100.649 403.523,100.673 403.523,100.673 L401.794,99.13 L399.857,101.067 L399.282,101.067 L398.525,100.099 L393.921,99.917 L393.137,101.067 L391.806,101.067 L390.657,98.555 L388.146,98.555 L387.571,99.13 L385.091,98.948 L382.003,96.648 L379.886,96.073 L379.128,94.923 L375.107,92.411 L370.503,92.29 L370.565,94.015 L369.233,94.378 L366.038,92.29 Z"
+                          fill="#313278"
+                          id="dpt-51"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-50"
+                          points="155.119 71.168 154.362 73.074 158.357 76.282 158.357 80.458 156.844 82.334 157.782 83.272 158.357 83.666 157.963 87.267 159.295 90.293 163.653 95.195 164.591 99.552 165.529 100.884 165.529 107.693 167.799 112.233 167.799 117.528 165.348 122.43 167.981 129.239 172.157 130.177 172.52 132.084 170.462 133.022 166.891 133.022 167.466 135.413 168.586 139.014 171.824 141.859 173.337 142.222 174.85 140.164 176.545 139.952 178.603 137.501 180.509 139.014 182.779 139.014 184.292 139.77 184.292 140.133 187.5 140.527 189.406 139.014 192.22 140.164 192.281 140.285 195.519 137.531 196.608 133.93 196.305 132.357 196.759 130.511 194.883 128.635 190.041 125.488 186.47 125.186 182.869 120.646 185.835 119.557 187.076 117.227 185.533 115.805 186.925 114.564 188.317 115.653 190.829 114.11 192.403 111.598 193.008 109.117 191.919 106.908 192.554 106.121 191.132 103.791 192.705 101.763 191.464 100.19 189.891 102.217 187.712 100.976 184.111 97.375 183.96 95.832 185.049 94.743 184.716 92.655 182.93 93.109 182.749 88.57 177.816 82.729 179.329 78.947 181.417 78.947 179.541 73.833 171.401 73.439 167.044 76.465 162.142 73.257"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-49"
+                          points="176.786 178.837 176.362 179.684 176.09 179.623 176.302 180.319 176.302 182.498 178.329 183.739 179.57 187.037 181.446 189.367 178.965 191.576 179.116 194.36 180.054 195.147 183.473 194.693 186.287 197.326 186.922 201.23 185.046 202.501 178.963 202.35 175.059 203.106 172.88 204.226 172.88 206.072 174.907 208.584 176.934 208.584 177.085 211.247 177.872 212.034 176.934 214.213 175.361 214.667 175.361 216.089 174.574 216.876 175.512 217.33 175.996 217.179 177.388 217.179 178.962 219.206 178.901 221.173 179.264 221.234 180.838 222.172 185.68 222.172 188.252 224.351 191.853 222.808 197.724 224.14 200.357 222.415 200.357 219.782 205.471 219.389 210.192 218.451 215.306 218.27 215.881 219.601 217.213 220.721 218.514 218.451 222.115 214.669 223.567 214.669 225.716 206.922 228.742 203.321 228.53 199.175 230.437 196.694 230.437 195.574 229.499 194.424 230.104 193.183 227.532 192.184 219.574 187.342 212.22 185.163 209.406 185.012 209.406 183.136 207.681 181.714 205.835 181.714 202.385 180.625 200.206 182.804 195.213 182.986 193.004 181.715 187.406 180.021 186.135 181.564 183.018 179.537 180.204 179.537"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-48"
+                          points="349.97 337.223 344.674 339.129 343.16 342.52 339.771 340.249 337.108 348.57 334.379 354.835 338.343 359.707 338.072 363.459 340.734 365.336 340.734 369.875 341.546 376.29 344.754 377.652 344.483 379.769 349.022 378.982 350.626 379.769 349.628 380.646 355.468 384.55 360.461 383.521 361.314 382.312 360.618 380.617 362.676 380.103 365.581 382.826 370.544 383.342 372.783 379.922 372.783 377.016 374.143 375.473 372.933 375.141 372.933 371.206 370.205 368.301 372.444 367.938 373.625 366.915 374.563 365.103 373.625 364.527 374.169 360.534 370.962 357.055 369.63 350.094 364.818 343.951 361.307 344.798 360.546 342.165 358.645 342.165 358.282 344.436 353.38 345.948"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-47"
+                          points="228.411 347.996 226.414 348.267 224.719 348.783 222.298 349.297 221.632 351.174 222.479 353.049 224.537 353.231 224.204 354.926 222.661 355.44 220.936 357.502 218.031 361.95 216.669 364.341 217.184 366.913 218.031 368.641 216.155 369.824 214.279 369.824 213.916 371.729 215.126 372.754 215.308 374.629 213.916 375.991 210.89 376.472 211.344 377.015 212.04 381.13 215.792 380.797 218.364 381.795 220.603 381.978 221.632 383.189 219.574 385.251 219.06 389 219.514 390.18 220.24 388.666 222.479 390.573 225.505 387.547 226.837 389.424 230.045 388.848 233.464 388.487 234.977 385.828 240.636 385.278 243.481 388.092 244.449 387.154 246.325 386.578 245.569 383.945 248.413 383.189 252.014 382.433 251.227 380.162 252.377 378.83 253.315 375.226 251.227 372.955 252.559 368.628 255.404 370.322 259.58 369.564 257.674 365.388 256.161 359.728 259.944 359.544 260.7 357.549 257.735 356.31 256.373 354.765 254.315 354.765 251.924 356.974 250.048 356.826 249.534 355.615 250.895 354.765 250.895 353.556 249.352 351.863 247.99 351.679 247.143 352.705 243.36 352.705 243.027 351.347 241.817 351.162 239.759 352.854 236.007 352.854 234.282 354.397 231.377 353.371 231.044 349.801"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-46"
+                          points="273.2 335.714 274.501 334.594 274.531 334.406 274.952 334.318 278.977 332.441 283.777 334.582 287.499 339.908 289.647 339.637 292.855 336.428 293.896 338.229 296.062 336.188 298.998 336.973 300.088 343.934 303.208 346.333 300.874 351.956 303.208 353.021 302.236 356.225 303.779 356.436 303.5 357.375 302.236 358.857 298.816 358.857 298.12 359.736 296.426 359.553 293.339 362.973 292.315 362.641 290.106 364.516 290.771 367.936 292.497 370.508 291.146 371.833 291.083 371.604 287.024 373.414 284.266 372.749 282.576 374.807 279.671 374.443 279.125 377.771 277.771 377.792 276.958 376.104 276.403 375.141 274.86 375.29 271.955 378.377 268.354 378.227 267.839 375.991 267.839 374.297 267.506 373.938 266.271 375.229 264.708 375.229 263.058 373.419 261.515 373.419 260.486 371.357 261.792 369.833 261.697 368.816 259.276 368.91 257.646 365.333 256.159 359.741 259.875 359.583 260.883 357.087 262.583 355.417 262.79 352.548 266.875 352.208 269.542 348.438 268.449 348.01 268.333 346 271.438 345.583 271.688 343.75 273.229 342.729 274.854 339.729 273.2 337.803"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-45"
+                          points="304.396 151.511 301.945 153.782 296.407 154.266 296.195 154.629 296.74 155.718 294.985 157.201 295.379 160.742 293.9 161.014 292.927 164.524 291.292 166.309 288.992 166.309 286.813 167.519 285.603 166.157 284.241 165.613 282.759 166.581 282.759 168.064 281.669 168.881 279.914 167.792 278.825 168.609 278.946 169.819 278.431 170.939 278.825 171.06 280.429 171.06 280.308 172.149 279.224 174.025 279.224 174.993 280.308 174.993 281.246 176.082 281.518 177.171 279.37 179.319 280.431 181.922 280.431 183.132 282.216 184.342 284.666 184.614 286.27 185.976 286.694 188.306 288.449 190.333 290.356 189.788 291.168 188.033 294.164 188.427 294.83 189.123 296.736 189.123 297.674 188.034 304.609 188.306 306.243 190.727 308.149 191.544 309.783 193.057 311.811 192.785 312.355 192.089 313.566 192.089 315.079 193.996 318.196 194.147 319.008 195.206 321.192 198.202 322.13 199.019 323.341 198.898 323.492 196.174 324.036 195.902 324.853 196.023 326.21 197.809 327.148 198.202 329.085 197.415 328.782 197.082 328.601 195.176 332.378 194.056 331.808 191.968 331.233 188.942 328.782 185.553 328.208 183.465 331.99 183.465 334.653 181.558 335.016 178.744 333.322 176.837 338.254 172.691 338.254 169.272 335.775 166.639 334.837 163.613 331.417 160.375 326.696 163.038 326.334 161.525 324.245 161.343 323.671 162.856 321.794 163.219 316.686 163.037 314.592 164.369 312.903 162.856 315.924 160.768 315.742 157.56 313.471 156.41 311.568 153.566 306.484 153.203"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-44"
+                          points="168.01 176.083 167.828 178.171 163.682 178.746 161.775 180.622 161.019 182.71 149.308 183.285 144.375 185.918 144.193 191.213 138.897 193.301 135.296 195.177 132.27 195.177 131.15 193.876 129.455 195.571 128.638 195.722 129.606 196.388 126.005 199.596 126.762 200.353 127.518 201.866 125.612 204.529 127.7 205.649 131.301 206.405 131.664 204.892 133.752 207.555 137.171 207.555 139.622 204.892 142.83 204.892 139.441 206.586 139.623 208.493 140.379 210.187 138.291 212.275 136.021 212.275 136.414 215.119 140.56 214.363 145.493 218.902 145.251 219.205 148.822 221.535 149.609 223.411 152.878 224.833 155.39 225.136 156.479 228.101 160.382 229.039 163.015 229.523 164.437 227.949 163.015 225.922 162.41 221.534 163.651 220.142 165.376 220.142 166.163 221.867 165.679 224.984 166.768 225.771 169.582 224.833 170.52 221.716 169.279 220.445 172.396 220.445 173.485 218.417 174.574 218.568 177.086 220.928 178.902 221.17 178.963 219.203 177.389 217.176 175.997 217.176 175.513 217.327 174.575 216.873 175.362 216.086 175.362 214.664 176.935 214.21 177.873 212.031 177.086 211.244 176.935 208.581 174.908 208.581 172.881 206.069 172.881 204.223 175.06 203.103 178.964 202.347 185.047 202.498 186.923 201.227 186.288 197.323 183.474 194.69 180.055 195.144 179.117 194.357 178.966 191.573 181.447 189.364 179.571 187.034 178.33 183.736 176.303 182.495 176.303 180.316 176.091 179.62 172.55 178.743 170.856 176.473"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-43"
+                          points="337.591 317.369 338.377 316.25 341.797 315.736 343.673 314.191 345.688 313.969 345.731 312.829 347.098 312.201 347.453 312.922 348.303 312.466 349.665 313.346 351.984 313.141 354.114 312.314 355.475 313.495 357.031 313.516 358.229 315.734 360.062 316.469 361.118 314.295 362.495 315.4 365.422 315.5 366.436 313.603 368.154 315.219 370.545 315.915 371.219 315.234 375.113 316.428 379.289 313.008 381.347 312.824 387.404 315.457 387.041 319.061 390.067 318.877 392.458 321.633 391.394 326.27 388.733 327.389 387.614 329.295 388.813 332.995 386.101 333.077 385.846 336.582 382.868 336.859 381.35 341.58 376.811 341.58 371.913 345.182 369.13 349.438 364.888 343.957 361.337 344.722 360.535 342.19 358.647 342.163 358.277 344.357 353.416 345.887 349.993 337.256 349.516 337.369 349.556 335.8 348.518 334.233 346.515 332.977 347.498 331.466 346.715 330.683 347.589 330.373 348.791 329.299 346.757 329.076 345.787 327.715 345.386 324.146 344.221 322.907 343.347 319.885 339.04 319.846 338.212 317.463"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-42"
+                          points="368.126 265.353 364.706 265.928 364.162 268.016 365.493 270.649 365.856 281.422 361.317 281.633 361.13 283.328 364.156 285.779 362.461 287.472 361.887 291.65 364.158 294.671 366.216 299.573 371.154 302.806 372.843 309.039 369.241 312.429 369.816 314.7 375.112 316.427 379.288 313.007 381.346 312.823 387.404 315.456 387.041 319.06 390.067 318.876 392.458 321.632 394.213 321.148 397.484 320.544 398.331 316.822 402.84 314.159 403.264 308.198 403.415 308.104 401.206 307.772 399.144 308.587 397.485 307.559 399.543 305.111 398.938 303.262 392.553 302.236 387.199 297.301 387.199 295.637 388.434 294.61 388.434 293.186 387.012 292.337 388.222 290.489 388.222 287.826 385.775 285.555 385.775 283.284 384.11 281.65 384.11 279.802 383.296 276.714 384.536 275.474 384.748 271.785 388.649 271.785 389.675 270.544 388.434 268.486 388.434 266.64 387.411 265.823 386.682 269.696 384.594 269.696 383.081 271.209 381.931 270.059 375.879 269.121 373.608 270.453 372.091 270.453 371.728 269.121 368.884 268.546 368.702 265.52"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-41"
+                          points="254.798 162.919 253.527 164.553 252.014 167.185 253.89 168.91 253.708 172.874 252.952 175.506 251.045 175.506 251.045 179.107 248.412 182.527 245.568 183.647 244.236 185.341 244.811 186.763 253.98 187.066 254.767 187.762 254.646 188.428 253.284 189.124 253.556 191 254.766 191.817 256.673 190.455 257.217 190.455 259.396 192.089 261.303 192.24 261.575 197.112 263.058 201.046 263.058 207.855 264.147 209.489 267.809 209.489 270.654 213.695 271.713 214.603 271.743 214.512 273.649 214.24 275.283 212.878 278.551 212.727 278.823 213.272 279.489 211.789 282.334 210.821 284.785 210.972 285.995 210.548 287.63 212.061 290.505 213.695 292.926 213.544 292.805 211.093 293.894 209.883 294.989 209.762 295.927 210.821 299.74 210.427 302.161 209.065 301.889 208.127 301.223 207.31 301.344 205.524 303.129 202.286 305.429 201.318 305.429 199.29 305.974 198.08 304.495 197.535 303.521 195.477 301.075 194.811 300.954 193.994 303.404 191.967 306.159 190.605 304.616 188.305 297.681 188.033 296.743 189.122 294.837 189.122 294.171 188.426 291.175 188.032 290.363 189.787 288.457 190.332 286.702 188.305 286.275 185.975 284.671 184.613 282.22 184.341 280.439 183.131 280.439 181.921 279.377 179.318 281.523 177.17 281.252 176.081 280.314 174.992 279.223 174.992 279.223 174.024 280.314 172.148 280.433 171.059 278.829 171.059 276.378 170.363 274.078 172.542 271.475 172.814 267.269 171.725 266.059 169.001 264.425 168.063 263.487 165.884 260.763 165.884 259.674 165.067 261.308 164.129 261.429 163.312 259.674 163.312 256.678 163.856"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-40"
+                          points="174.728 358.709 168.736 361.795 167.193 361.856 163.834 379.835 159.477 396.481 158.145 402.923 157.025 407.462 154.211 412.307 159.658 415.03 164.621 414.699 167.526 412.128 169.917 414.004 168.556 415.364 169.585 415.727 170.432 414.516 174.729 414.848 177.12 412.973 181.569 413.155 183.294 412.276 186.018 412.276 186.714 413.155 188.923 412.461 190.981 414.004 193.734 413.155 197.335 411.944 197.85 412.794 203.327 412.978 206.051 411.435 204.719 409.105 206.051 405.501 207.927 403.05 207.352 399.842 208.865 398.329 206.626 394.546 208.502 392.275 210.59 391.879 212.466 392.636 215.129 390.365 216.067 393.21 217.005 394.541 219.093 393.967 218.911 391.519 219.516 390.187 219.06 389 219.575 385.247 221.633 383.189 220.604 381.978 218.365 381.791 215.793 380.793 212.041 381.126 211.345 377.015 208.954 374.111 207.925 373.777 208.288 377.197 208.288 378.226 205.02 378.372 201.601 377.186 200.905 372.889 198.514 370.322 196.82 370.173 196.638 368.628 194.762 367.418 191.675 366.57 192.522 365.541 192.522 364.517 191.493 363.665 190.313 362.642 186.863 363.156 184.836 364.851 183.444 365.033 181.235 363.49 177.967 364.851 176.424 363.822 177.816 362.128 177.967 359.889"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-39"
+                          points="427.801 206.768 427.892 207.283 427.135 207.283 426.741 210.309 426.197 212.397 426.554 213.728 425.44 215.241 424.29 216.754 424.29 218.267 421.083 219.78 420.145 221.293 420.508 222.413 420.695 223.381 419.388 224.138 419.177 226.589 420.695 226.77 422.42 229.615 424.508 229.615 425.628 230.947 426.959 230.947 426.563 232.46 422.209 233.004 422.603 234.517 424.121 235.485 424.121 237.361 423.547 237.936 424.695 239.449 426.386 242.475 425.629 245.683 423.723 247.014 423.935 249.647 426.206 250.404 426.962 251.554 425.056 253.067 420.093 253.672 422.423 254.58 426.206 259.876 428.657 260.996 428.657 263.659 431.501 263.266 435.103 259.302 438.129 260.815 438.129 263.085 443.607 263.085 451.474 254.43 451.141 254.248 451.504 250.284 454.349 246.894 452.447 246.138 452.629 244.988 450.329 244.776 450.179 243.414 451.661 241.932 451.265 240.449 450.452 238.543 453.843 237.453 455.083 235.698 455.354 233.519 452.63 230.916 450.724 230.401 446.518 229.04 446.518 225.227 446.247 222.382 442.853 222.654 437.557 220.868 438.373 218.992 439.584 216.117 440.008 214.241 438.646 212.455 436.199 210.821 435.928 208.793 435.958 207.643 434.294 207.583 433.356 208.521 430.908 208.521 429.269 207.159"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-37"
+                          points="244.812 186.765 245.175 187.612 239.698 189.125 238.397 191.031 236.097 189.518 237.247 193.301 235.159 193.301 231.376 190.638 229.5 194.421 230.438 195.571 230.438 196.691 228.531 199.172 228.743 203.318 225.717 206.919 223.568 214.666 223.81 214.666 224.566 217.692 228.167 218.448 228.167 220.718 232.707 222.05 232.707 225.651 232.525 227.921 238.184 227.921 243.117 226.771 242.723 224.683 244.236 223.745 245.749 225.833 247.081 226.408 248.201 230.947 251.439 234.336 251.802 236.999 254.737 239.904 256.402 239.753 258.46 237.847 259.943 230.131 260.881 227.407 261.577 224.018 264.573 222.929 266.6 223.322 267.962 224.563 269.445 222.112 270.807 220.871 270.807 219.389 272.562 219.268 272.986 217.482 271.473 215.455 271.715 214.608 270.656 213.7 267.811 209.494 264.149 209.494 263.06 207.86 263.06 201.051 261.577 197.117 261.305 192.245 259.398 192.094 257.219 190.46 256.675 190.46 254.768 191.822 253.558 191.005 253.286 189.129 254.648 188.433 254.769 187.767 253.982 187.071"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-36"
+                          points="285.997 210.55 284.787 210.974 282.336 210.823 279.491 211.791 278.825 213.274 278.553 212.729 275.285 212.88 273.651 214.242 271.745 214.514 271.473 215.452 272.986 217.479 272.562 219.265 270.807 219.386 270.807 220.868 269.445 222.109 267.962 224.56 266.6 223.319 264.573 222.926 261.577 224.015 260.881 227.404 259.943 230.128 258.46 237.844 256.402 239.75 254.737 239.901 255.221 240.385 255.221 243.986 254.464 246.256 258.065 249.101 259.941 250.977 262.967 251.371 264.117 255.335 266.175 256.455 265.812 259.3 264.299 259.572 264.844 259.693 269.595 260.056 271.289 258.362 274.315 261.388 278.098 257.031 279.792 258.181 282.063 257.969 282.819 258.363 286.243 258.545 287.363 255.519 296.835 256.669 300.437 257.607 302.076 257.425 302.167 255.912 304.073 254.005 303.677 252.371 302.587 250.223 302.982 249.406 303.132 246.955 303.798 246.138 303.949 245.594 302.31 244.111 301.765 242.204 299.198 240.843 299.198 239.209 301.074 238.12 301.074 237.031 299.317 235.548 298.77 234.61 300.13 233.914 300.01 232.704 302.158 230.919 302.037 230.132 300.281 230.132 299.192 228.891 299.192 228.225 300.13 226.591 300.13 225.381 297.951 222.506 298.375 219.934 297.135 218.996 294.567 219.117 292.541 219.934 289.814 219.541 288.455 218.451 288.184 217.634 290.368 215.849 290.514 213.7 287.639 212.066"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-35"
+                          points="151.911 127.726 150.096 129.784 151.155 135.503 152.729 136.108 153.667 137.984 152.729 141.434 151.791 150.028 148.825 150.633 147.403 149.241 146.011 151.269 143.348 152.207 141.32 156.564 140.079 158.138 140.533 160.165 139.746 163.282 138.354 164.553 138.354 165.794 139.292 166.096 141.955 166.096 144.285 167.518 145.859 170.332 144.437 172.208 144.921 174.054 146.949 174.054 147.1 175.93 145.526 177.806 143.831 178.593 144.92 179.228 145.223 180.166 143.498 181.558 145.495 185.31 149.308 183.283 161.019 182.708 161.775 180.62 163.682 178.744 167.828 178.169 168.01 176.081 170.855 176.475 172.549 178.745 176.362 179.683 177.088 178.17 178.057 174.751 180.508 168.699 181.84 167.943 185.048 168.336 185.048 163.222 183.716 161.89 183.716 156.412 183.141 154.536 183.141 151.51 185.048 149.603 185.048 145.82 184.11 145.064 184.292 139.768 182.779 139.012 180.509 139.012 178.603 137.499 176.545 139.95 174.85 140.162 173.337 142.22 171.824 141.857 168.586 139.012 167.466 135.411 166.891 133.02 157.601 133.02 154.182 130.932 156.452 127.906"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-34"
+                          points="323.37 416.961 320.434 414.268 321.221 411.605 322.825 409.214 325.488 411.061 332.448 408.67 333.537 406.521 338.348 406.521 338.077 399.047 339.681 399.047 342.617 400.65 345.552 400.65 345.038 397.443 346.642 396.081 349.85 395.566 349.85 394.568 352.573 395.506 352.573 397.049 353.784 397.745 354.812 396.867 356.174 396.867 356.87 398.41 358.928 398.41 359.956 394.809 361.651 394.809 364.223 391.572 367.309 391.902 367.824 396.352 369.005 397.744 370.911 396.716 374.148 398.408 375.359 400.468 380.988 403.889 383.046 408.699 383.046 411.24 379.444 413.299 377.225 415.331 374.511 415.205 357.867 427.885 356.173 429.973 350.877 430.155 350.121 431.85 343.311 433.938 343.19 434.966 340.769 434.875 339.945 432.225 337.531 431.97 335.291 428.701 333.566 428.883 331.539 427.672 331.175 424.769 330.148 425.282 330.589 427.184 328.272 427.34 328.09 430.76 324.519 431.971 322.794 428.369 320.403 429.912 318.345 428.369 317.316 425.978 319.041 423.92 318.225 421.711 322.28 420.444"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-33"
+                          points="176.12 301.363 173.094 305.902 172.156 321.79 169.705 337.857 167.98 350.326 167.798 353.564 169.13 349.207 171.763 345.787 175.546 349.207 175.939 350.326 177.059 351.839 172.338 352.051 171.582 350.901 169.706 351.663 169.312 354.508 167.224 357.357 167.224 361.681 167.194 361.867 168.737 361.805 174.729 358.719 177.967 359.901 177.816 362.138 176.424 363.832 177.967 364.859 181.235 363.5 183.444 365.043 184.836 364.859 186.863 363.166 190.313 362.65 191.493 363.675 192.522 364.527 192.522 365.551 191.675 366.58 194.762 367.428 196.638 368.64 196.82 370.185 198.514 370.332 200.905 372.901 201.601 377.201 205.02 378.382 208.288 378.234 208.288 377.204 207.925 373.785 208.954 374.117 210.891 376.478 213.917 375.994 215.309 374.633 215.127 372.758 213.917 371.731 214.28 369.826 216.156 369.826 218.032 368.643 217.185 366.917 216.67 364.345 218.032 361.953 220.937 357.506 222.662 355.445 224.205 354.929 224.538 353.236 222.48 353.051 221.633 351.176 222.299 349.299 224.72 348.783 226.415 348.266 228.412 347.995 228.291 347.902 228.14 344.15 230.016 342.79 227.625 341.247 225.234 344.15 219.394 344.333 218.879 342.939 217.185 342.089 218.547 340.361 218.547 338.486 217.851 337.458 217.851 336.433 219.576 335.404 220.09 332.349 221.119 329.593 220.09 328.047 218.214 328.047 217.215 326.866 216.246 328.891 214.37 327.559 211.707 328.891 209.437 328.531 205.11 324.175 202.447 323.992 201.691 317.936 196.758 317.364 196.576 314.516 195.638 315.454 190.039 315.454 190.311 316.665 191.643 322.144 192.006 327.623 191.068 329.137 190.13 324.598 187.467 314.217 177.814 305.502 178.026 301.537"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-32"
+                          points="240.636 385.277 234.977 385.822 233.464 388.484 230.045 388.847 226.837 389.418 225.505 387.541 222.479 390.563 220.24 388.66 218.908 391.506 219.09 393.957 217.002 394.531 216.064 393.2 215.126 390.35 212.463 392.621 210.587 391.865 208.499 392.26 206.623 394.531 208.862 398.312 207.349 399.827 207.924 403.035 206.048 405.486 204.716 409.087 206.229 411.75 211.01 412.083 212.886 411.084 215.791 411.084 215.64 414.322 217.849 415.533 220.088 415.865 221.117 418.619 221.632 419.134 221.299 420.828 220.603 421.524 222.661 422.88 222.812 424.424 225.384 424.424 226.08 423.733 228.289 423.733 228.985 425.276 231.376 425.276 232.072 426.669 236.702 426.669 240.152 428.454 240.455 428.03 242.331 427.002 245.75 422.553 252.104 423.073 254.828 424.949 255.705 423.739 257.067 419.654 258.762 415.717 262.363 414.171 264.088 413.477 263.574 411.934 261.849 411.75 261.183 410.057 259.791 410.057 257.582 407.82 257.733 406.277 254.828 403.373 254.314 401.525 252.438 402.34 251.924 401.313 253.134 399.436 251.742 398.078 251.742 395.684 250.562 394.473 246.779 394.289 246.779 392.08 248.837 390.537 248.837 388.81 251.076 387.783 249.866 387.117 248.504 387.783 245.751 387.783 244.903 387 244.449 387.15 243.481 388.088"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-31"
+                          points="276.586 395.506 273.832 396.535 272.985 397.896 271.956 396.711 270.08 396.528 269.717 398.254 268.537 398.738 270.231 399.615 269.051 401.492 264.754 402.702 262.878 400.463 261.184 400.463 259.792 401.316 254.829 401.316 254.315 401.527 254.829 403.373 257.734 406.279 257.583 407.822 259.792 410.06 261.184 410.06 261.85 411.75 263.575 411.937 264.089 413.48 262.364 414.171 258.763 415.72 257.068 419.654 255.706 423.739 254.829 424.949 252.105 423.073 245.751 422.553 242.332 427.002 240.456 428.03 239.246 429.721 237.884 431.783 237.884 432.993 235.675 433.841 233.95 436.746 233.768 438.289 236.854 440.528 237.369 442.737 236.34 444.462 238.398 443.772 239.427 444.649 240.274 448.215 237.883 449.611 238.065 451.487 236.855 452.668 235.161 451.82 233.254 451.82 233.496 461.988 241.183 462.503 241.576 453.213 244.209 453.609 248.113 455.88 249.717 454.401 249.021 453.373 249.021 449.953 250.715 447.891 255.194 446.68 255.86 444.138 254.831 443.448 254.68 440.177 258.614 437.786 260.823 437.635 263.062 438.301 264.938 440.03 266.148 440.176 267.177 438.487 266.299 437.273 264.756 436.757 264.605 436.242 265.785 434.547 269.9 434.185 270.415 433.187 269.719 431.976 267.328 430.25 267.842 429.222 269.052 428.374 270.232 428.707 272.138 431.279 272.289 433.004 275.558 433.337 276.224 431.794 274.681 429.917 275.71 430.25 279.492 431.976 281.55 431.643 283.065 431.007 282.706 430.613 285.127 429.523 285.642 426.585 288.609 425.253 287.796 423.377 290.487 420.956 291.816 423.377 295.809 422.046 296.568 421.925 296.63 420.685 296.63 418.265 294.57 418.626 292 417.933 289.761 415.206 288.913 413.996 284.465 412.12 283.438 410.577 284.798 410.059 284.798 408.184 283.438 406.639 281.711 403.887 281.561 401.493 281.046 401.159 278.988 398.738 278.141 396.195"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-30"
+                          points="374.571 365.094 373.633 366.909 372.452 367.937 370.213 368.295 372.942 371.2 372.942 375.138 374.152 375.47 372.791 377.013 372.791 379.915 370.552 383.334 365.589 382.819 362.684 380.091 360.626 380.608 361.322 382.3 360.469 383.512 355.476 384.538 349.636 380.637 348.516 381.634 348.516 384.327 346.37 384.841 346.915 386.989 349.578 387.534 352.514 387.534 353.33 391.257 349.851 392.861 349.851 394.554 352.579 395.492 352.579 397.035 353.79 397.729 354.818 396.852 356.175 396.852 356.871 398.395 358.929 398.395 359.957 394.791 361.652 394.791 364.219 391.557 367.305 391.889 367.825 396.337 369.006 397.729 370.912 396.703 374.149 398.395 375.36 400.455 380.989 403.875 383.047 408.687 383.047 411.228 379.445 413.288 377.115 415.378 380.019 415.591 380.019 419.371 384.342 419.159 386.672 419.28 388.366 415.343 394.51 411.59 393.178 409.713 394.782 405.444 400.38 406.231 401.742 396.061 409.217 391.794 409.217 389.372 403.588 383.771 403.588 379.474 400.38 374.148 393.692 370.396 393.172 373.333 390.484 373.604 389.697 370.666 387.004 371.184 386.489 374.938 384.341 374.151 379.802 371.184 377.656 372.274 377.656 366.92"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-38"
+                          points="424.653 285.355 423.413 286.808 422.172 290.496 419.693 291.734 417.03 289.255 415.179 289.255 414.967 291.948 417.66 294.219 413.545 299.541 408.191 300.782 404.076 302.232 406.739 304.894 407.374 306.132 403.259 308.194 402.835 314.155 402.714 314.217 403.864 316.609 407.163 317.638 409.433 316.822 412.096 314.974 415.611 317.849 418.486 317.849 420.544 320.724 419.696 322.784 420.12 325.687 419.092 328.562 419.515 329.589 420.941 329.163 424.241 330.19 428.569 331.428 430.415 330.19 431.227 328.766 431.868 328.766 432.05 344.167 433.079 345.195 435.767 345.195 438.218 346.646 440.067 348.099 441.945 348.282 443.155 349.308 446.575 349.704 446.812 349.131 445.299 348.372 445.299 346.101 450.021 346.101 451.538 344.586 450.6 342.894 453.051 340.989 454.78 341.745 457.226 339.657 461.553 340.415 463.071 338.721 466.673 338.907 466.673 334.761 465.159 334.003 464.401 331.554 460.433 331.158 459.862 330.22 460.62 326.255 461.952 325.107 460.86 323.627 458.799 322.387 457.558 323.627 457.985 321.961 457.985 320.328 456.323 318.663 457.171 314.762 459 313.74 458.788 311.078 454.885 307.174 453.432 307.174 452.409 308.596 449.958 305.328 448.505 305.51 447.265 308.203 448.117 309.837 447.477 310.473 445.842 309.233 441.091 308.209 438.852 304.093 438.852 302.429 436.582 299.982 436.34 298.92 428.778 289.691 427.927 287.027 426.293 285.576"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-29"
+                          points="78.709 121.099 76.651 123.369 74.381 122.431 70.205 122.825 69.45 124.7 66.999 125.275 66.605 123.187 62.278 123.762 62.278 125.094 59.252 125.276 57.92 124.338 56.407 125.095 56.013 127.365 50.929 127.547 48.266 130.755 50.536 132.45 47.51 134.931 48.448 136.626 47.692 140.772 50.718 141.165 51.868 140.015 52.443 140.772 59.615 139.834 64.336 136.445 60.19 140.409 60.553 142.285 64.336 140.591 63.58 143.254 67.756 143.435 67.574 144.555 63.035 144.374 59.434 143.436 55.077 141.348 52.444 144.374 55.833 145.524 55.651 150.607 56.589 149.851 58.677 146.643 62.641 148.913 64.548 149.306 65.304 152.332 64.154 154.39 61.703 154.208 59.433 154.208 55.65 154.783 49.205 155.146 47.904 156.871 49.78 157.991 51.868 157.809 53.562 159.322 56.013 159.14 60.008 163.679 60.946 168.581 59.614 171.244 63.578 172 67.935 171.789 68.873 170.094 67.179 167.824 68.873 168.58 70.598 168.398 73.624 170.093 75.5 169.73 75.5 166.492 76.256 169.73 78.707 173.694 84.003 174.057 84.214 172.937 85.515 174.813 88.753 175.388 91.204 175.388 91.355 175.599 92.263 171.877 94.472 171.877 95.561 170.152 96.953 170.152 97.104 167.368 97.891 166.43 96.348 164.372 95.41 165.492 93.05 163.616 88.208 162.829 87.421 160.015 86.029 156.413 85.878 155.021 88.208 153.145 90.417 153.145 93.564 151.632 92.898 149.241 93.836 148.303 93.534 142.826 92.112 140.95 92.112 138.619 94.321 137.984 91.961 137.197 91.81 135.351 92.899 134.564 94.473 132.99 92.748 131.901 92.899 129.874 90.569 129.723 91.658 124.639 88.541 122.824 83.245 123.006 83.245 126.788 81.732 126.788 81.369 125.094 79.099 125.457"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-28"
+                          points="278.674 118.224 277.524 119.162 277.524 122.188 273.741 124.064 273.741 126.908 272.621 128.24 267.87 128.24 265.631 127.302 258.792 130.873 256.159 130.873 253.435 133.476 254.071 133.899 254.253 137.137 258.247 140.526 258.61 147.516 256.734 149.786 253.89 150.361 251.045 152.055 251.439 153.568 252.74 155.293 252.74 159.772 253.133 159.833 255.766 161.709 254.798 162.919 256.674 163.857 259.67 163.313 261.425 163.313 261.304 164.13 259.67 165.068 260.759 165.885 263.483 165.885 264.421 168.064 266.055 169.002 267.265 171.726 271.471 172.815 274.074 172.543 276.374 170.364 278.432 170.939 278.947 169.819 278.826 168.609 279.915 167.792 281.67 168.881 282.76 168.064 282.76 166.581 284.242 165.613 285.599 166.157 286.814 167.519 288.993 166.309 291.293 166.309 292.928 164.524 293.897 161.014 295.379 160.742 294.985 157.201 296.74 155.718 296.195 154.629 296.407 154.266 295.887 154.327 295.493 149.243 295.097 148.668 294.739 146.217 290.773 145.461 289.044 143.373 288.499 139.197 286.228 138.834 285.832 136.746 283.199 134.87 281.868 131.632 283.199 129.362 281.868 127.849 281.868 125.973 282.625 123.885 281.109 122.372 280.537 120.102"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-27"
+                          points="243.662 87.69 242.028 88.084 239.849 90.414 235.612 90.958 236.489 97.979 238.396 98.554 238.396 99.31 236.489 100.43 238.759 103.638 239.909 108.177 239.697 110.083 238.002 111.203 238.184 112.535 240.09 113.292 240.272 114.986 238.759 119.344 240.272 121.25 245.568 121.432 246.688 124.065 248.594 125.971 251.227 126.909 252.014 129.754 250.683 131.63 253.436 133.476 256.16 130.873 258.793 130.873 265.632 127.302 267.871 128.24 272.622 128.24 273.742 126.908 273.742 124.064 277.525 122.188 277.525 119.162 278.554 118.314 278.463 117.467 279.431 116.499 277.737 116.136 277.737 114.623 276.769 113.11 277.525 112.172 282.82 110.659 284.152 108.389 285.298 104.213 286.694 102.488 286.997 100.249 288.691 101.187 290.023 100.824 289.049 99.311 288.504 94.954 286.814 93.441 286.84 93.32 283.849 92.987 278.826 90.415 274.469 90.536 272.169 92.563 270.929 96.104 266.057 96.649 261.427 98.011 263.061 99.1 262.395 100.734 260.216 100.734 259.006 98.131 257.644 98.131 255.465 96.497 258.461 95.559 253.831 92.29 249.231 92.562 248.142 90.686 245.539 90.958"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-26"
+                          points="412.096 314.98 409.433 316.827 407.163 317.644 404.892 316.947 404.892 324.664 406.345 330.414 407.373 333.713 409.008 337.828 407.984 340.491 406.133 344.002 405.709 346.059 403.863 346.455 404.886 351.205 404.886 355.291 402.407 358.193 401.802 361.882 402.83 363.519 402.226 364.972 402.226 366.421 403.038 366.607 403.643 367.455 403.428 371.45 405.943 371.087 407.063 372.418 406.518 376.2 407.274 377.138 410.086 374.29 412.567 374.104 413.112 372.59 409.904 372.195 409.36 368.804 411.418 365.597 414.081 365.386 416.714 367.865 414.081 371.435 414.837 372.765 418.62 373.161 421.071 371.073 419.739 373.918 420.133 376.189 424.101 376.551 429.398 376.945 430.155 379.396 433 381.484 435.451 381.667 437.144 380.155 438.114 377.308 439.627 378.64 440.746 379.972 441.503 372.951 439.627 372.589 438.479 370.139 432.067 368.412 431.28 365.205 433.58 363.691 431.674 362.359 432.07 360.666 435.091 360.85 437.724 362.182 439.817 359.731 437.724 358.039 437.911 355.768 439.057 352.164 443.021 351.768 446.229 350.467 446.562 349.709 443.142 349.314 441.932 348.287 440.056 348.103 438.21 346.65 435.759 345.2 433.071 345.2 432.042 344.173 431.855 328.77 431.219 328.77 430.407 330.197 428.556 331.434 424.229 330.197 420.93 329.168 419.507 329.593 419.084 328.566 420.112 325.691 419.684 322.789 420.536 320.728 418.474 317.853 415.6 317.853"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-25"
+                          points="471.587 189.519 471.405 189.73 469.221 189.73 468.107 191.273 466.679 192.09 466.679 193.997 463.139 194.421 461.237 193.059 458.666 193.452 456.215 195.359 454.459 198.355 452.704 198.9 451.887 200.927 449.708 201.321 446.713 203.772 442.778 203.651 441.568 204.589 440.474 204.589 436.662 207.706 434.934 207.645 434.906 208.795 435.177 210.823 437.628 212.457 438.99 214.243 438.566 216.119 437.355 218.994 436.539 220.87 441.835 222.656 445.224 222.384 445.496 225.229 445.496 229.042 449.702 230.403 451.608 230.918 454.332 233.521 454.061 235.7 452.824 237.455 449.429 238.545 450.246 240.451 450.64 241.934 449.161 243.416 449.308 244.778 451.611 244.99 451.636 244.808 463.348 233.824 462.99 224.745 467.136 222.687 469.986 221.355 472.619 218.904 472.831 215.303 475.463 213.971 481.516 206.981 480.578 204.711 482.666 203.773 485.117 200.747 483.786 199.415 479.247 200.353 479.06 199.596 483.241 194.784"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-24"
+                          points="242.542 296.764 240.848 299.79 238.185 300.152 238.003 304.691 229.107 310.744 228.925 317.371 225.506 320.762 223.63 322.491 219.847 322.095 217.759 325.699 217.215 326.881 218.214 328.063 220.09 328.063 221.119 329.608 220.09 332.363 219.576 335.421 217.851 336.447 217.851 337.473 218.547 338.502 218.547 340.378 217.185 342.106 218.879 342.955 219.394 344.349 225.234 344.166 227.625 341.263 230.016 342.806 228.14 344.166 228.291 347.919 231.045 349.822 231.378 353.393 234.283 354.419 236.008 352.876 239.76 352.876 241.818 351.184 243.028 351.369 243.361 352.727 247.144 352.727 247.991 351.7 249.353 351.883 250.896 353.578 250.896 354.787 249.535 355.636 250.049 356.847 251.925 356.996 254.316 354.787 256.374 354.787 257.736 356.332 260.701 357.57 260.883 357.088 262.608 355.396 262.79 352.549 266.936 352.189 269.599 348.406 268.449 348.011 268.267 345.95 271.475 345.554 271.687 343.677 273.2 342.709 274.894 339.683 273.2 337.804 273.2 335.715 274.501 334.595 272.806 331.935 272.988 327.789 268.842 327.972 267.148 326.823 268.661 324.948 266.573 323.256 268.086 321.352 266.573 320.594 266.573 317.961 270.356 314.541 268.268 312.846 267.148 310.002 263.153 309.428 261.821 308.49 264.666 307.158 263.728 305.856 259.582 305.283 258.614 301.502 252.562 300.929 251.23 302.834 249.929 303.195 248.204 300.924 248.991 298.836 248.023 296.959"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-23"
+                          points="278.098 257.031 279.792 258.181 282.062 257.969 282.818 258.363 286.242 258.545 287.362 255.519 296.834 256.669 300.436 257.607 306.609 256.844 308.937 260.058 308.937 262.328 310.203 263.938 311.547 262.406 313.087 264.991 315.175 265.748 317.263 270.65 317.619 276.518 319.133 278.395 319.859 282 317.619 283.689 317.047 286.375 311.385 289.562 311.734 291.188 315.679 295.189 313.785 296.656 310.06 296.656 308.848 298.505 306.578 298.505 304.688 296.594 303.906 295.438 299.159 295.417 298.156 294 296.679 294.01 295.844 296.016 292.781 296.674 292.531 297.016 291.568 296.469 291.172 294.062 292.531 294.016 292.578 292.984 290.116 291.327 287.453 290.118 287.828 287.656 287.034 287.639 286.005 289.091 282.707 289.275 280.878 289.023 280.895 287.265 283.076 285.381 281.678 283.52 278.209 284.47 278.806 276.712 277.169 275.073 275.505 270.959 273.091 270.304 272.63 268.084 274.896 263.568 274.828 260.782"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-22"
+                          points="106.913 115.44 105.188 116.772 100.86 117.316 99.892 118.648 96.866 116.378 92.902 119.041 94.415 121.099 91.782 124.7 91.661 124.639 90.572 129.723 92.902 129.874 92.751 131.901 94.476 132.99 92.902 134.564 91.813 135.351 91.964 137.197 94.324 137.984 92.115 138.619 92.115 140.95 93.537 142.826 93.839 148.303 92.901 149.241 93.688 152.055 96.654 152.842 96.957 154.385 98.833 154.536 100.407 153.447 101.345 154.385 104.946 155.959 107.911 154.385 108.668 152.842 111.18 152.66 113.994 155.172 116.657 154.536 118.987 156.896 120.076 156.896 121.165 158.288 123.374 158.288 124.131 157.199 125.069 159.226 127.429 160.164 130.395 158.288 130.395 156.261 132.574 155.474 133.966 155.474 135.691 158.621 139.443 158.923 141.319 156.563 143.347 152.206 146.01 151.268 147.402 149.24 148.824 150.632 151.79 150.027 152.728 141.433 153.666 137.983 152.728 136.107 151.154 135.502 150.095 129.783 148.885 131.145 145.284 130.751 144.921 132.839 142.651 133.021 142.469 130.388 140.563 129.813 139.231 131.326 139.231 127.543 136.961 129.237 133.572 128.662 132.422 130.932 125.432 134.715 125.432 136.621 123.919 136.621 123.919 133.202 119.955 131.326 120.318 127.906 116.747 125.274 116.747 122.066 114.084 121.491 114.266 118.465 112.208 118.283 112.39 116.195 108.607 116.195 108.032 118.071"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-21"
+                          points="391.215 167.761 390.821 170.212 388.37 171.544 382.137 171.726 382.409 173.087 382.555 174.449 380.654 175.811 380.654 178.111 381.048 178.535 382.561 178.535 383.499 180.139 382.955 182.862 380.776 184.496 380.776 186.13 381.466 186.674 381.32 187.068 379.959 187.612 379.565 189.64 377.381 194.27 375.902 196.449 375.902 198.628 376.446 199.566 375.63 200.655 373.724 201.593 373.845 203.5 375.63 204.589 376.296 206.072 376.025 208.13 375.629 209.613 376.567 211.247 379.291 211.792 380.502 213.698 380.502 214.515 379.686 214.787 379.686 216.754 379.836 216.815 383.497 220.598 387.309 220.477 390.702 223.049 393.153 224.835 393.273 227.135 395.841 227.68 398.025 229.435 403.745 227.408 407.679 226.167 409.436 225.895 409.98 225.108 411.886 225.229 413.368 226.167 415.547 225.622 417.726 224.14 419.365 224.322 419.39 224.14 420.697 223.383 420.51 222.415 420.148 221.295 421.086 219.782 424.293 218.269 424.293 216.756 425.443 215.243 426.557 213.73 426.2 212.399 426.744 210.311 427.138 207.285 427.896 207.285 427.713 206.165 426.956 205.408 426.744 201.625 425.05 201.444 424.687 198.418 422.599 197.45 423.357 196.512 424.505 196.149 426.956 193.305 426.744 191.792 425.226 188.766 422.992 188.373 422.205 190.279 418.059 191.217 417.665 190.279 414.639 186.496 412.949 187.434 410.678 187.253 409.921 185.74 406.896 185.922 406.714 182.714 405.019 181.564 407.47 178.932 403.116 173.061 399.723 169.46 396.701 167.765 391.222 167.765"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-19"
+                          points="296.68 294.01 295.868 296.069 292.782 296.674 291.571 298.731 290.119 298.731 288.057 298.127 286.604 300.577 284.37 300.79 282.918 303.452 281.066 303.452 279.614 304.905 275.922 304.48 274.681 306.539 273.259 306.357 270.778 309.443 268.508 308.595 267.448 310.741 268.265 312.829 270.353 314.521 266.57 317.943 266.57 320.577 268.083 321.333 266.57 323.239 268.658 324.931 267.145 326.806 268.839 327.954 272.985 327.77 272.803 331.916 274.377 334.395 274.952 334.305 278.977 332.428 283.789 334.574 287.511 339.9 289.659 339.629 292.867 336.419 293.926 338.297 296.074 336.178 299.01 336.965 299.101 337.602 301.552 335.874 300.795 333.999 299.649 332.85 301.162 330.975 302.675 330.975 303.647 327.951 304.406 326.436 303.831 323.016 306.282 319.624 309.701 317.535 309.883 312.24 311.578 313.178 313.483 315.266 315.36 315.266 316.506 313.936 315.568 311.665 316.506 308.275 315.931 305.068 314.785 303.736 314.785 301.074 316.511 298.262 316.117 295.598 315.692 295.174 313.787 296.654 310.061 296.654 308.849 298.503 306.579 298.503 304.733 296.654 303.88 295.415 299.159 295.415 298.13 293.991 296.679 293.991"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-18"
+                          points="306.151 190.608 303.397 191.97 300.946 193.997 301.067 194.814 303.513 195.48 304.487 197.538 305.966 198.083 305.421 199.293 305.421 201.321 303.121 202.289 301.336 205.527 301.215 207.313 301.881 208.13 302.153 209.068 299.732 210.43 295.919 210.824 294.981 209.765 293.886 209.886 292.797 211.096 292.918 213.547 290.497 213.698 290.349 215.847 288.167 217.632 288.438 218.449 289.795 219.539 292.524 219.932 294.546 219.115 297.118 218.994 298.358 219.932 297.932 222.504 300.113 225.379 300.113 226.589 299.175 228.223 299.175 228.889 300.266 230.13 302.024 230.13 302.145 230.917 299.997 232.702 300.117 233.912 298.756 234.608 299.301 235.546 301.059 237.029 301.059 238.118 299.182 239.207 299.182 240.841 301.752 242.202 302.297 244.109 303.934 245.592 303.785 246.136 303.119 246.953 302.968 249.404 302.574 250.221 303.664 252.369 304.06 254.003 302.157 255.91 302.066 257.423 306.509 256.878 307.416 254.941 309.867 252.127 314.588 251.159 317.069 251.915 319.702 249.857 319.518 248.344 318.58 247.588 318.58 244.562 323.664 239.448 325.57 241.536 327.26 239.811 328.777 239.63 331.41 236.24 335.766 236.603 335.828 237.632 337.28 233.002 336.342 231.308 336.529 228.857 337.104 223.924 335.011 221.866 335.407 217.326 333.501 213.332 333.319 210.699 329.899 208.036 329.354 205.766 331.044 203.315 331.044 199.714 329.076 197.414 327.138 198.201 326.2 197.808 324.838 196.022 324.026 195.901 323.482 196.173 323.331 198.897 322.12 199.018 321.182 198.201 319 195.205 318.188 194.146 315.071 193.995 313.555 192.088 312.343 192.088 311.798 192.784 309.775 193.056 308.138 191.543 306.235 190.726"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-17"
+                          points="172.336 288.288 174.999 288.288 174.424 287.35 174.242 284.718 176.512 284.901 177.45 280.723 175.755 278.272 176.512 277.153 178.782 277.516 178.964 275.428 177.269 274.671 176.301 272.038 173.668 271.463 172.912 269.768 170.831 269.864 170.355 268.98 170.643 267.864 173.487 267.501 173.85 265.595 176.876 263.144 175.484 261.873 181.264 258.363 183.927 258.181 185.042 261.203 188.643 259.69 191.487 261.808 191.578 264.592 193.636 266.831 193.636 268.072 196.723 270.342 200.627 270.554 203.29 274.034 207.618 273.64 211.128 276.086 213.791 277.326 214.214 279.388 215.697 280.81 215.636 280.836 214.002 286.8 213.579 290.701 212.157 291.305 210.099 291.12 209.675 290.096 207.405 290.096 206.195 291.12 203.502 291.12 201.232 292.331 202.897 292.971 203.108 297.295 203.925 297.479 202.472 299.143 204.137 300.17 206.376 302.231 207.617 304.29 209.07 305.712 208.646 307.773 207.829 308.587 209.07 309.828 209.07 311.28 206.589 313.339 207.618 314.155 209.071 314.579 209.071 314.974 207.013 315.79 207.195 316.818 208.436 317.454 212.34 316.818 214.004 318.664 215.245 320.329 219.27 323.054 217.757 325.687 216.244 328.894 214.368 327.564 211.705 328.894 209.435 328.535 205.108 324.18 202.445 323.996 201.689 317.942 196.756 317.368 196.574 314.521 195.636 315.459 190.037 315.459 188.615 308.923 182.563 302.871 180.475 302.475 180.293 300.6 177.63 299.083 173.666 295.848 171.396 296.061 171.002 291.885 170.687 288.453"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-17"
+                          points="170.254 287.084 169.883 284.141 165.526 280.934 165.92 274.307 168.553 277.514 171.761 277.91 172.154 282.451 173.092 283.207 173.411 284.186 172.545 287.214 171.093 287.545"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-17"
+                          points="170.024 267.911 169.129 266.169 165.346 265.806 164.953 263.899 162.683 262.386 159.475 263.535 161.563 266.561 164.196 266.561 166.859 268.256 168.947 269.95 169.897 268.7"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-16"
+                          points="239.093 271.98 237.459 273.22 237.67 275.908 236.641 276.72 233.736 275.056 230.861 276.085 227.563 276.298 225.082 273.271 224.295 273.423 220.996 275.056 218.515 275.697 218.515 277.12 217.093 278.784 217.486 279.808 215.64 280.837 214.006 286.798 213.583 290.701 212.161 291.305 210.103 291.118 209.679 290.094 207.409 290.094 206.199 291.118 203.506 291.118 201.236 292.329 202.901 292.969 203.112 297.295 203.929 297.479 202.476 299.143 204.141 300.17 206.38 302.229 207.621 304.288 209.074 305.71 208.65 307.769 207.833 308.585 209.074 309.826 209.074 311.278 206.593 313.337 207.622 314.153 209.075 314.577 209.075 314.97 207.017 315.788 207.199 316.815 208.44 317.452 212.344 316.815 214.008 318.662 215.249 320.327 219.274 323.05 219.849 322.081 223.632 322.476 225.508 320.75 228.927 317.36 229.109 310.733 238.005 304.68 238.187 300.141 240.85 299.778 242.544 296.753 243.603 296.784 244.239 293.909 245.752 293.727 246.69 291.063 248.596 290.489 250.866 288.975 250.503 284.25 252.197 283.68 255.586 282.918 255.405 281.229 254.83 278.596 252.197 278.381 250.684 276.69 251.622 274.995 251.683 273.452 249.988 272.604 246.72 272.604 245.267 274.239 241.757 275.69 240.547 274.45"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          fill-rule="nonzero"
+                          id="dpt-15"
+                          points="321.945 311.287 323.489 314.525 326.516 314.469 327.756 313.346 329.814 314.373 330.843 314.523 333.415 318.458 336.138 318.641 336.834 317.279 338.212 317.463 339.031 319.797 343.347 319.885 344.221 322.907 345.4 324.113 345.732 327.714 346.757 329.076 348.672 329.328 347.609 330.286 346.781 330.656 347.391 331.438 346.515 332.977 348.518 334.233 349.516 335.766 349.516 337.369 344.674 339.124 343.156 342.422 339.771 340.244 337.108 348.562 334.359 354.766 332.724 352.775 332.172 347.438 330.359 347.359 329.516 342.078 325.781 342.531 325.266 339.156 324.701 338.312 319.345 342.878 319.312 347.344 318.014 347.417 317.469 351.688 316.138 352.232 315.078 354.624 309.178 354.624 308.663 353.837 305.97 353.837 304.366 356.5 302.297 356.188 303.234 353.094 300.938 351.922 303.208 346.333 300.088 343.934 299.1 337.604 301.5 335.891 300.794 334.001 299.703 332.844 301.161 330.977 302.625 330.984 303.646 327.952 304.404 326.438 303.829 323.018 306.28 319.626 309.699 317.537 309.906 312.359 311.531 313.203 313.438 315.266 315.297 315.297 316.504 313.938 315.566 311.667 316.135 309.593"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-14"
+                          points="235.583 90.808 231.165 91.595 223.963 95.771 215.853 98.979 209.407 95.378 193.913 93.108 190.312 91.232 184.714 92.654 185.047 94.742 183.958 95.831 184.109 97.374 187.71 100.975 189.889 102.216 191.462 100.189 192.703 101.762 191.13 103.79 192.552 106.12 191.917 106.907 193.006 109.116 192.401 111.597 190.827 114.109 188.315 115.652 186.923 114.563 185.531 115.804 187.074 117.226 185.833 119.556 182.867 120.645 186.468 125.185 190.039 125.487 192.793 127.273 196.606 126.123 199.42 122.855 203.323 123.944 206.742 121.584 208.8 120.827 210.979 123.006 214.58 122.37 217.697 124.095 221.601 122.854 225.172 120.191 227.532 117.528 229.106 117.225 229.56 119.253 230.801 118.95 230.952 117.528 234.553 116.923 235.794 117.679 239.637 116.832 240.272 114.986 240.09 113.292 238.184 112.535 238.002 111.203 239.697 110.083 239.909 108.177 238.759 103.638 236.489 100.43 238.396 99.31 238.396 98.554 236.489 97.979"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-13"
+                          points="407.042 392.055 401.746 395.08 400.384 405.248 394.786 404.461 393.182 408.729 394.514 410.606 388.37 414.358 386.676 418.296 392.668 418.568 400.626 419.138 402.14 420.656 399.295 420.656 397.419 423.864 405.528 425.553 411.969 424.433 408.549 421.201 410.82 419.324 414.422 420.838 416.116 424.442 426.919 424.625 429.733 423.477 430.305 425.206 427.282 427.839 431.458 428.022 430.702 429.927 429.552 431.258 438.817 431.258 443.356 432.773 443.805 433.377 443.992 429.624 445.35 428.081 447.079 427.052 446.894 426.027 445.535 424.667 444.174 424.667 443.296 423.639 444.84 422.246 444.84 421.726 443.15 420.879 443.15 419.517 446.903 419.704 447.781 419.009 444.51 415.922 444.697 412.32 442.635 410.625 444.329 407.207 448.444 404.453 445.355 402.391 443.143 404.12 437.999 405.303 433.883 404.786 426.529 401.728 422.081 401.876 418.329 400.181 416.933 398.28 414.034 395.042 407.195 392.139"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-12"
+                          points="324.701 338.312 319.345 342.877 319.345 347.416 318.014 347.416 317.469 351.687 316.138 352.232 315.078 354.624 309.178 354.624 308.663 353.837 305.97 353.837 304.366 356.5 303.791 356.439 303.458 357.499 302.248 358.859 298.828 358.859 298.132 359.738 296.438 359.556 293.351 362.974 292.328 362.642 290.119 364.519 290.784 367.937 292.51 370.505 291.178 371.901 291.482 375.805 294.21 375.987 292.667 379.074 293.877 382.16 295.42 381.283 296.115 382.826 298.325 380.617 301.594 380.434 304.832 382.826 310.49 383.854 312.548 387.456 315.453 388.817 316.996 392.752 316.809 394.295 318.686 397.745 318.686 399.621 322.105 404.069 325.376 405.762 327.434 405.244 328.463 403.887 330.006 404.245 333.546 406.516 333.576 406.516 335.145 406.516 338.352 406.516 338.081 400.914 338.081 399.039 339.685 399.039 342.623 400.643 345.558 400.643 345.044 397.436 346.648 396.076 349.851 395.559 349.851 392.869 353.33 391.265 352.514 387.541 349.578 387.541 346.918 387 346.373 384.852 348.519 384.338 348.519 381.645 350.636 379.768 349.032 378.983 344.493 379.768 344.764 377.651 341.556 376.294 340.744 369.879 340.744 365.34 338.082 363.463 338.353 359.711 332.725 352.776 332.18 347.422 330.334 347.422 329.517 342.068 325.765 342.613 325.25 339.133"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-11"
+                          points="304.91 420.713 304.639 424.193 301.16 423.103 297.408 423.103 297.679 421.772 295.802 422.043 291.808 423.374 290.477 420.953 287.789 423.374 288.601 425.25 285.636 426.582 285.121 429.52 282.7 430.612 284.846 433.003 284.301 434.607 293.682 439.143 294.469 445.588 294.469 449.067 295.014 453.606 290.202 453.606 288.87 455.483 295.014 460.567 298.493 458.69 302.76 463.774 302.125 463.835 302.941 464.319 310.628 460.567 308.752 457.813 308.601 454.575 326.545 454.575 326.213 452.154 330.328 449.945 335.109 453.697 337.588 454.843 337.44 449.426 337.654 443.197 335.383 443.379 333.476 440.567 334.995 438.086 338.203 441.112 341.047 438.841 342.954 436.964 343.194 434.967 340.769 434.876 339.922 432.152 337.531 431.966 335.292 428.697 333.565 428.879 331.539 427.668 331.176 424.765 330.152 425.283 330.668 427.341 328.276 427.341 328.09 430.761 324.519 431.972 322.794 428.37 320.403 429.913 318.341 428.37 317.314 425.979 319.043 423.917 318.226 421.708 318.014 421.77 312.385 421.77 306.515 420.708"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-10"
+                          points="377.598 130.419 373.755 132.537 370.486 134.837 367.248 134.837 361.862 138.499 357.258 139.255 353.99 135.805 353.173 135.987 353.173 136.562 350.54 137.682 350.358 139.952 349.027 141.677 348.268 145.46 347.841 148.637 349.027 149.605 351.297 149.605 356.199 154.719 355.624 159.833 359.044 162.465 360.95 161.133 363.971 164.735 364.334 168.154 366.422 170.966 367.36 173.054 374.922 173.448 378.704 171.542 379.824 173.63 381.155 173.812 382.124 171.724 388.357 171.542 390.806 170.21 391.202 167.759 396.681 167.759 397.441 168.183 396.802 165.762 395.257 164.793 397.375 162.887 400.646 162.675 401.792 160.95 401.58 154.05 400.823 150.026 397.552 148.876 394.105 144.064 394.287 141.189 395.286 139.101 393.53 138.496 388.144 139.646 384.297 139.646 380.85 134.471 380.454 130.628"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-9"
+                          points="269.051 428.369 267.841 429.217 267.327 430.245 269.718 431.971 270.414 433.181 269.899 434.18 265.784 434.542 264.604 436.237 264.755 436.752 266.298 437.266 267.176 438.477 266.147 440.171 264.937 440.02 263.061 438.295 260.822 437.629 258.613 437.78 254.679 440.171 254.83 443.442 255.859 444.132 255.193 446.674 250.714 447.885 249.02 449.947 249.02 453.367 249.716 454.391 248.112 455.873 249.141 456.447 254.981 457.567 257.462 457.567 260.67 461.743 268.81 461.347 272.018 466.46 274.862 465.314 283.184 466.46 283.789 469.94 289.659 468.578 291.805 466.702 295.013 465.886 295.799 464.282 302.759 463.765 298.492 458.68 295.013 460.558 288.869 455.474 290.201 453.595 295.013 453.595 294.468 449.058 294.468 445.579 293.681 439.134 284.3 434.594 284.845 432.99 283.062 431 281.543 431.636 279.485 431.969 275.703 430.243 274.674 429.91 276.217 431.787 275.551 433.33 272.282 432.997 272.131 431.268 270.225 428.7"
+                        />
+                        <path
+                          class="dep"
+                          d="M395.331,50.197 L393.424,53.011 L391.735,54.736 L391.735,56.43 L391.735,58.7 L389.464,60.213 L385.318,61.545 L383.047,62.483 L380.384,60.395 L376.782,60.395 L376.263,63.754 L377.957,66.962 L376.263,68.475 L376.081,71.32 L377.019,72.833 L376.262,75.103 L373.417,76.616 L373.417,79.067 L369.815,79.824 L369.24,81.337 L371.719,82.668 L370.963,85.301 L370.388,87.571 L370.509,92.292 L375.113,92.413 L379.134,94.925 L379.891,96.075 L382.009,96.65 L385.096,98.95 L387.577,99.132 L388.152,98.557 L390.663,98.557 L391.809,101.069 L393.139,101.069 L393.926,99.919 L398.53,100.101 L399.287,101.069 L399.862,101.069 L401.799,99.132 L403.528,100.675 C403.528,100.675 403.757,100.651 403.799,100.645 L403.678,99.858 L405.949,98.738 L407.069,97.588 L406.34,95.712 L406.128,94.38 L408.216,92.685 L408.973,88.902 L406.703,86.058 L407.459,84.726 L409.366,81.155 L409.91,81.911 L412.755,81.911 L414.087,83.212 L415.781,82.092 L417.112,79.913 L415.751,79.701 L415,75.919 L413.487,74.769 L408.191,74.194 L407.253,71.743 L405.527,70.623 L399.47,69.867 L399.112,65.51 L399.869,64.754 L399.869,63.059 L396.843,61.152 L397.418,59.064 L398.174,57.188 L396.843,56.038 L398.931,54.162 L398.931,50.743 L398.174,50.199 L395.331,50.199 L395.331,50.197 Z"
+                          id="dpt-8"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-7"
+                          points="402.714 314.225 398.326 316.829 397.474 320.551 394.205 321.155 392.45 321.639 392.511 321.731 391.393 326.27 388.733 327.389 387.614 329.295 388.37 331.746 388.915 333.077 386.101 333.077 385.889 336.648 382.868 336.859 381.349 341.58 376.81 341.58 371.913 345.182 369.185 349.509 369.638 350.084 370.97 357.044 374.177 360.523 373.633 364.517 377.657 366.939 377.657 372.293 379.803 371.204 384.342 374.17 386.49 374.957 387.005 371.204 389.698 370.687 390.485 373.625 393.173 373.354 393.693 370.418 399.837 373.867 400.835 371.84 403.439 371.445 403.651 367.451 403.046 366.603 402.234 366.417 402.234 364.965 402.838 363.515 401.81 361.878 402.415 358.189 404.894 355.287 404.894 351.201 403.871 346.451 405.717 346.055 406.141 343.998 407.992 340.486 409.016 337.824 407.381 333.709 406.353 330.41 404.902 324.66 404.902 316.943 403.877 316.611"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-6"
+                          points="487.168 366.06 484.596 367.418 484.414 369.814 482.537 371.357 481.509 373.777 480.818 378.226 482.876 381.283 483.058 383.855 484.244 384.213 487.689 387.45 490.926 390.35 489.568 391.227 487.506 389.836 484.934 391.227 484.244 392.08 481.515 392.08 481.848 393.436 481 394.465 481.696 396.194 479.457 397.553 480.304 399.615 482.543 399.762 484.753 400.789 485.115 404.391 487.174 406.453 488.354 406.453 490.593 407.305 490.926 409.207 489.57 410.393 490.593 411.416 490.593 412.626 492.711 414.811 492.862 414.624 493.044 410.296 496.826 411.059 498.158 409.33 500.064 409.726 500.246 403.855 504.602 403.494 508.381 400.075 511.775 400.075 511.957 397.984 515.377 395.925 513.471 391.57 516.32 389.121 515.746 386.273 519.922 384.943 521.041 380.797 520.497 377.952 519.528 376.258 518.767 373.779 515.955 373.993 507.059 377.2 504.212 377.2 499.314 373.233 494.378 371.901 491.533 371.901 491.533 368.481 487.568 366.034"
+                        />
+                        <polygon
+                          class="dep"
+                          fill-rule="nonzero"
+                          id="dpt-5"
+                          points="459.618 326.256 460.95 325.107 464.35 324.751 465.47 325.87 466.062 328.484 469.435 328.137 469.831 325.293 471.525 324.535 475.078 324.703 477.337 329.361 480.149 330.3 480.922 335.906 485.843 338.439 488.477 338.043 490.564 338.8 491.139 344.279 493.772 345.611 493.719 347.234 491.713 347.12 489.875 349.078 487.478 348.939 485.417 352.025 482.514 353.753 481.5 355.75 478.915 355.962 478.922 357.734 478.219 358.797 477.188 361.359 471.048 361.285 468.146 359.742 466.239 361.105 462.67 360.92 461.859 362.078 462.67 362.13 463.188 365.363 462.311 365.727 459.072 363.668 459.078 362.453 457.196 360.915 456.168 360.915 456.156 362.578 454.624 362.973 451.356 364.85 449.294 368.298 448.779 369.993 449.989 370.325 450.141 373 448.962 373.079 447.084 371.354 446.141 371.562 446.575 373.079 449.375 376.281 447.604 377.01 446.242 376.161 442.792 376.161 439.888 378.855 440.503 372.953 438.627 372.591 437.479 370.141 431.066 368.414 430.328 365.219 432.531 363.688 430.673 362.361 431.069 360.668 434.062 360.844 436.656 362.156 438.781 359.734 436.724 358.04 436.906 355.703 438.056 352.165 441.953 351.797 445.219 350.5 445.781 349.156 444.298 348.374 444.312 346.188 448.984 346.109 450.5 344.609 449.598 342.896 452.016 340.984 453.766 341.734 456.203 339.703 460.516 340.422 462.062 338.719 465.609 338.891 465.641 334.766 464.157 334.004 463.406 331.562 459.432 331.159 458.86 330.221"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-4"
+                          points="487.504 348.934 485.446 352.022 482.541 353.751 481.513 355.813 478.946 355.96 478.946 357.835 478.25 358.859 477.222 361.431 471.078 361.285 468.174 359.742 466.267 361.099 462.702 360.917 461.822 362.127 462.702 362.127 463.217 365.364 462.339 365.727 459.101 363.665 459.101 362.455 457.225 360.912 456.2 360.912 456.2 362.641 454.654 362.973 451.385 364.85 449.326 368.294 448.807 369.989 450.017 370.321 450.204 373.075 448.994 373.075 447.115 371.346 446.089 371.533 446.604 373.076 449.508 376.309 447.632 377.004 446.271 376.157 442.823 376.157 439.921 378.881 439.891 378.854 439.77 379.971 438.652 378.639 437.138 377.307 436.169 380.158 434.475 381.67 433.747 381.608 433.773 381.792 433.924 384.364 435.983 384.723 435.983 387.118 434.106 387.968 434.439 390.724 437.859 392.414 437.859 394.29 436.315 396.019 436.315 397.562 440.614 397.562 444.551 402.009 444.521 402.101 449.514 400.466 455.688 404.579 459.108 402.009 459.959 400.282 464.771 398.739 467.831 400.796 472.277 397.562 477.423 397.746 478.781 396.353 481.656 396.232 481.718 396.202 481.022 394.476 481.873 393.448 481.54 392.087 484.266 392.087 484.96 391.239 487.53 389.845 489.592 391.239 490.95 390.362 487.714 387.457 484.266 384.221 483.083 383.858 482.899 381.29 480.84 378.229 481.533 373.785 482.559 371.36 484.436 369.817 484.622 367.426 487.191 366.065 487.587 365.917 487.587 362.256 490.249 361.896 488.733 360.566 486.83 359.991 485.892 357.541 486.65 355.848 490.041 352.245 489.497 349.582 489.977 349.066"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-3"
+                          points="331.419 236.242 328.786 239.632 327.273 239.813 325.579 241.538 323.673 239.45 318.589 244.564 318.589 247.59 319.527 248.346 319.709 249.859 317.076 251.917 314.595 251.161 309.874 252.129 307.423 254.943 306.516 256.88 306.667 256.85 308.937 260.058 308.937 262.328 310.243 264.022 311.575 262.328 313.088 264.991 315.176 265.748 317.264 270.65 317.355 272.07 320.23 274.31 321.775 273.615 322.988 270.71 324.169 270.377 324.169 268.834 326.228 268.652 326.414 269.681 328.981 266.776 331.886 266.776 332.404 267.805 331.045 269.681 333.068 271.921 333.43 273.281 338.211 276.036 344.021 276.884 345.75 276.702 348.321 277.216 350.53 275.856 352.257 276.708 352.589 279.101 354.829 279.617 357.728 279.468 358.581 281.526 361.244 282.588 361.335 281.65 365.874 281.439 365.511 270.665 364.18 268.032 364.724 265.944 367.871 265.4 367.962 265.188 371.926 262.162 372.109 254.778 370.78 252.902 367.756 252.902 366.637 251.389 363.429 251.389 362.491 250.239 362.491 247.394 358.679 240.222 356.803 238.89 353.2 243.823 351.683 244.186 351.109 241.735 349.419 240.979 348.661 242.492 345.848 242.492 345.453 240.798 343.548 241.918 341.489 243.068 339.218 240.587 335.98 239.074 335.799 236.623"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-2"
+                          points="357.353 56.37 354.332 58.458 352.818 57.126 351.487 57.126 348.461 59.214 346.191 57.882 343.92 59.214 343.163 59.396 342.589 58.246 340.5 58.246 338.986 59.214 338.924 59.214 339.378 61.877 336.899 64.57 336.899 67.051 335.17 68.988 335.566 71.288 336.504 75.131 337.654 81.667 337.291 87.417 336.504 89.142 338.804 90.867 337.079 91.654 335.929 96.254 332.661 97.01 331.511 98.947 333.811 99.34 334.207 102.003 332.478 102.397 332.665 105.272 333.24 105.091 334.208 103.548 336.508 105.091 337.87 106.634 337.474 109.206 339.203 110.447 339.778 114.623 344.862 119.525 346.551 120.1 347.52 122.37 350.702 123.036 351.096 122.552 352.067 120.494 354.915 119.162 356.428 115.198 358.122 114.048 357.151 112.716 354.7 112.716 354.337 111.415 356.031 110.659 356.788 109.509 355.093 108.389 355.638 106.664 359.995 106.301 359.239 104.606 356.601 102.881 356.601 97.798 360.171 95.135 364.166 95.135 363.77 93.259 366.041 92.29 369.248 94.378 370.58 94.015 370.396 87.569 370.968 85.299 371.724 82.666 369.245 81.335 369.82 79.822 373.422 79.065 373.422 76.614 376.267 75.101 377.028 72.831 376.09 71.318 376.274 68.473 377.966 66.96 376.274 63.752 376.791 60.393 372.948 60.393 371.919 61.089 368.315 60.151 367.556 57.7 366.44 57.7 364.349 59.576 363.991 57.881 359.81 57.488 358.664 56.55"
+                        />
+                        <polygon
+                          class="dep selectable"
+                          fill="#313278"
+                          id="dpt-1"
+                          points="410.491 250.404 408.403 250.615 407.072 253.066 403.501 267.047 402.986 268.197 402.623 272.614 401.595 274.042 401.595 280.427 400.991 281.879 404.679 284.118 406.131 284.33 408.402 286.39 408.796 289.693 411.277 288.875 415.12 289.994 415.181 289.265 417.032 289.265 419.694 291.744 422.173 290.506 423.414 286.818 424.654 285.365 426.289 285.576 427.923 287.029 428.771 289.693 436.371 298.954 438.641 297.318 439.037 293.804 441.516 293.38 441.516 287.2 442.757 286.172 443.15 280.634 443.634 281.028 443.573 279.006 442.545 277.13 442.969 271.806 444.815 272.833 445.843 270.956 447.69 270.351 449.596 268.838 447.538 268.838 447.538 265.237 449.808 263.905 453.201 263.542 453.414 261.636 452.265 260.88 455.109 257.279 454.716 256.159 451.478 254.434 443.61 263.089 438.133 263.089 438.133 260.819 435.107 259.306 431.505 263.27 428.66 263.663 428.66 261 426.21 259.88 422.427 254.584 419.008 253.252 417.888 250.801 415.982 250.408 414.106 251.739 412.592 252.133"
+                        />
+                        <polygon
+                          class="dep"
+                          id="dpt-2B"
+                          points="549.137 436.703 546.293 438.609 546.686 440.485 548.205 442.386 546.51 443.693 547.267 445.206 546.121 446.538 546.121 448.232 548.027 449.957 548.027 452.59 546.877 455.041 545.576 455.616 544.058 453.528 541.395 453.74 540.825 453.344 538.554 453.344 536.496 455.25 535.709 458.458 530.807 459.396 527.029 462.603 526.268 464.692 524.392 464.505 523.423 463.359 522.878 466.591 521.547 467.137 521.153 470.162 521.723 471.493 519.635 473.007 519.064 474.525 521.178 474.919 521.541 475.947 525.293 475.947 526.322 476.613 529.076 476.093 530.256 476.789 529.742 477.641 531.618 480.209 535.219 480.209 536.098 482.78 538.639 482.78 538.493 484.324 540.551 486.896 541.58 487.411 542.939 488.258 542.939 491.529 543.965 492.376 546.027 492.376 546.542 493.229 546.874 497.859 548.085 498.707 547.57 499.403 547.901 502.126 551.837 501.975 555.136 499.796 555.015 494.198 559.554 487.782 559.554 477.191 557.678 473.587 557.105 462.239 555.775 460.151 553.326 458.275 552.93 451.254 554.079 448.046 552.564 442.937 551.626 438.791 550.84 437.641"
+                        />
+                        <path
+                          class="dep"
+                          d="M517.545,474.529 L517.545,476.617 L519.451,477.949 L522.658,479.825 L522.87,481.338 L520.964,481.913 L517.938,482.488 L517.938,483.789 L519.058,484.939 L519.27,488.716 L523.416,490.047 L524.93,490.41 L526.261,492.498 L525.323,493.83 L523.805,494.375 L522.659,496.463 L521.54,497.794 L522.085,501.189 L524.93,501.002 L525.686,501.577 L528.349,500.245 L529.106,501.002 L527.775,503.849 L529.106,505.178 L526.836,506.872 L525.322,510.263 L529.468,511.236 L535.338,511.78 L532.887,514.625 C532.887,514.625 531.74,514.181 531.223,514.413 C531.207,514.421 531.176,514.434 531.162,514.443 C531.158,514.447 531.136,514.465 531.132,514.468 C531.128,514.476 531.106,514.494 531.102,514.498 C531.098,514.502 531.08,514.524 531.076,514.528 C531.065,514.537 531.053,514.549 531.047,514.558 C531.044,514.563 531.05,514.579 531.047,514.584 C531.042,514.599 531.021,514.637 531.017,514.646 C531.015,514.652 531.019,514.667 531.017,514.675 C531.014,514.689 530.991,514.724 530.987,514.737 C530.986,514.751 530.987,514.783 530.987,514.799 C530.987,515.742 529.686,518.035 529.686,518.035 L531.562,520.097 L534.981,522.185 L541.397,523.874 L543.273,524.636 L545.002,525.393 L543.854,527.481 L546.878,527.296 L547.45,528.625 L550.475,528.625 L551.232,525.024 L549.327,524.628 L551.988,521.816 L551.05,520.848 L551.232,519.153 L554.651,517.277 L554.838,515.189 L552.567,515.005 L551.054,516.308 L551.054,514.432 L554.077,514.245 L555.015,511.975 L555.772,505.348 L555.197,502.5 L555.136,499.774 L551.837,501.953 L547.899,502.104 L547.566,499.381 L548.086,498.685 L546.875,497.835 L546.543,493.204 L546.023,492.354 L543.965,492.354 L542.936,491.507 L542.936,488.236 L541.579,487.389 L540.551,486.872 L538.49,484.302 L538.639,482.758 L536.097,482.758 L535.219,480.187 L531.618,480.187 L529.741,477.617 L530.256,476.767 L529.075,476.071 L526.317,476.59 L525.293,475.925 L521.541,475.925 L521.178,474.897 L519.06,474.501 L517.547,474.501 L517.545,474.529 Z"
+                          id="dpt-2A"
+                        />
+                      </g>
                     </g>
                   </g>
-                </g>
-              </svg>
+                </svg>
+              </div>
             </div>
+            <div
+              class="col-lg-4"
+            />
           </div>
-          <div
-            className="col-lg-4"
-          />
         </div>
       </div>
     </div>
-  </div>
-  <span
-    className="anchor"
-    id="next"
-  />
-  <div
-    className="next py-10 py-lg-20"
-  >
+    <span
+      class="anchor"
+      id="next"
+    />
     <div
-      className="container"
+      class="next py-10 py-lg-20"
     >
-      <h3
-        className="h2"
-      >
-        Vous êtes acteur de l’intégration ?
-      </h3>
-      <p
-        className="subtitle"
-      >
-        Découvrez Réfugiés.info et comment l’utiliser au quotidien avec vos bénéficiaires.
-      </p>
       <div
-        className="mt-10 mt-lg-20 cards"
+        class="container"
       >
+        <h3
+          class="h2"
+        >
+          Vous êtes acteur de l’intégration ?
+        </h3>
+        <p
+          class="subtitle"
+        >
+          Découvrez Réfugiés.info et comment l’utiliser au quotidien avec vos bénéficiaires.
+        </p>
         <div
-          className="gx-6 row"
+          class="mt-10 mt-lg-20 cards"
         >
           <div
-            className="mb-4 mb-lg-0 col-lg-3"
+            class="gx-6 row"
           >
             <div
-              className="fr-card fr-enlarge-link fr-card--sm h-100"
-              id="fr-card-:r4:"
+              class="mb-4 mb-lg-0 col-lg-3"
             >
               <div
-                className="fr-card__body"
+                class="fr-card fr-enlarge-link fr-card--sm h-100"
+                id="fr-card-:r4:"
               >
                 <div
-                  className="fr-card__content"
+                  class="fr-card__body"
                 >
-                  <h4
-                    className="fr-card__title"
+                  <div
+                    class="fr-card__content"
                   >
-                    <a
-                      className=""
-                      href="/recherche?undefined"
+                    <h4
+                      class="fr-card__title"
                     >
-                      Je découvre +100 fiches pratiques
-                    </a>
-                  </h4>
-                  <p
-                    className="fr-card__desc"
-                  >
-                    Sur la CAF, le RSA, France Travail, l’ANEF, la carte vitale, le permis de conduire...
-                  </p>
-                  <div
-                    className="fr-card__start"
-                  />
-                  <div
-                    className="fr-card__end"
-                  />
+                      <a
+                        class=""
+                        href="/recherche?undefined"
+                      >
+                        Je découvre +100 fiches pratiques
+                      </a>
+                    </h4>
+                    <p
+                      class="fr-card__desc"
+                    >
+                      Sur la CAF, le RSA, France Travail, l’ANEF, la carte vitale, le permis de conduire...
+                    </p>
+                    <div
+                      class="fr-card__start"
+                    />
+                    <div
+                      class="fr-card__end"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                className="fr-card__header"
-              >
                 <div
-                  className="fr-card__img"
+                  class="fr-card__header"
                 >
-                  <img
-                    alt=""
-                    className="fr-responsive-img"
-                    src="/img.jpg"
-                  />
+                  <div
+                    class="fr-card__img"
+                  >
+                    <img
+                      alt=""
+                      class="fr-responsive-img"
+                      src="/img.jpg"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            className="mb-4 mb-lg-0 col-lg-3"
-          >
             <div
-              className="fr-card fr-enlarge-link fr-card--sm h-100"
-              id="fr-card-:r5:"
+              class="mb-4 mb-lg-0 col-lg-3"
             >
               <div
-                className="fr-card__body"
+                class="fr-card fr-enlarge-link fr-card--sm h-100"
+                id="fr-card-:r5:"
               >
                 <div
-                  className="fr-card__content"
+                  class="fr-card__body"
                 >
-                  <h4
-                    className="fr-card__title"
+                  <div
+                    class="fr-card__content"
                   >
-                    <a
-                      className=""
-                      href="/recherche"
+                    <h4
+                      class="fr-card__title"
                     >
-                      Je découvre les acteurs de mon département
-                    </a>
-                  </h4>
-                  <p
-                    className="fr-card__desc"
-                  >
-                    Les cours de français, les formations professionnelles, les loisirs...
-                  </p>
-                  <div
-                    className="fr-card__start"
-                  />
-                  <div
-                    className="fr-card__end"
-                  />
+                      <a
+                        class=""
+                        href="/recherche"
+                      >
+                        Je découvre les acteurs de mon département
+                      </a>
+                    </h4>
+                    <p
+                      class="fr-card__desc"
+                    >
+                      Les cours de français, les formations professionnelles, les loisirs...
+                    </p>
+                    <div
+                      class="fr-card__start"
+                    />
+                    <div
+                      class="fr-card__end"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                className="fr-card__header"
-              >
                 <div
-                  className="fr-card__img"
+                  class="fr-card__header"
                 >
-                  <img
-                    alt=""
-                    className="fr-responsive-img"
-                    src="/img.jpg"
-                  />
+                  <div
+                    class="fr-card__img"
+                  >
+                    <img
+                      alt=""
+                      class="fr-responsive-img"
+                      src="/img.jpg"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            className="mb-4 mb-lg-0 col-lg-3"
-          >
             <div
-              className="fr-card fr-enlarge-link fr-card--sm h-100"
-              id="fr-card-:r6:"
+              class="mb-4 mb-lg-0 col-lg-3"
             >
               <div
-                className="fr-card__body"
+                class="fr-card fr-enlarge-link fr-card--sm h-100"
+                id="fr-card-:r6:"
               >
                 <div
-                  className="fr-card__content"
+                  class="fr-card__body"
                 >
-                  <h4
-                    className="fr-card__title"
+                  <div
+                    class="fr-card__content"
                   >
-                    <a
-                      className=""
-                      href="/publier"
+                    <h4
+                      class="fr-card__title"
                     >
-                      Je recense mon action sur Réfugiés.info
-                    </a>
-                  </h4>
-                  <p
-                    className="fr-card__desc"
-                  >
-                    Vous êtes porteur d’un dispositif ? Recensez-le sur Réfugiés.info.
-                  </p>
-                  <div
-                    className="fr-card__start"
-                  />
-                  <div
-                    className="fr-card__end"
-                  />
+                      <a
+                        class=""
+                        href="/publier"
+                      >
+                        Je recense mon action sur Réfugiés.info
+                      </a>
+                    </h4>
+                    <p
+                      class="fr-card__desc"
+                    >
+                      Vous êtes porteur d’un dispositif ? Recensez-le sur Réfugiés.info.
+                    </p>
+                    <div
+                      class="fr-card__start"
+                    />
+                    <div
+                      class="fr-card__end"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                className="fr-card__header"
-              >
                 <div
-                  className="fr-card__img"
+                  class="fr-card__header"
                 >
-                  <img
-                    alt=""
-                    className="fr-responsive-img"
-                    src="/img.jpg"
-                  />
+                  <div
+                    class="fr-card__img"
+                  >
+                    <img
+                      alt=""
+                      class="fr-responsive-img"
+                      src="/img.jpg"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            className="mb-4 mb-lg-0 col-lg-3"
-          >
             <div
-              className="fr-card fr-enlarge-link fr-card--sm h-100"
-              id="fr-card-:r7:"
+              class="mb-4 mb-lg-0 col-lg-3"
             >
               <div
-                className="fr-card__body"
+                class="fr-card fr-enlarge-link fr-card--sm h-100"
+                id="fr-card-:r7:"
               >
                 <div
-                  className="fr-card__content"
+                  class="fr-card__body"
                 >
-                  <h4
-                    className="fr-card__title"
+                  <div
+                    class="fr-card__content"
                   >
-                    <a
-                      className=""
-                      href="https://kit.refugies.info/formation/"
-                      target="_blank"
+                    <h4
+                      class="fr-card__title"
                     >
-                      Je participe à un webinaire gratuit
-                    </a>
-                  </h4>
-                  <p
-                    className="fr-card__desc"
-                  >
-                    Comment utiliser Réfugiés.info avec vos bénéficiaires au quotidien.
-                  </p>
-                  <div
-                    className="fr-card__start"
-                  />
-                  <div
-                    className="fr-card__end"
-                  />
+                      <a
+                        class=""
+                        href="https://kit.refugies.info/formation/"
+                        target="_blank"
+                      >
+                        Je participe à un webinaire gratuit
+                      </a>
+                    </h4>
+                    <p
+                      class="fr-card__desc"
+                    >
+                      Comment utiliser Réfugiés.info avec vos bénéficiaires au quotidien.
+                    </p>
+                    <div
+                      class="fr-card__start"
+                    />
+                    <div
+                      class="fr-card__end"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div
-                className="fr-card__header"
-              >
                 <div
-                  className="fr-card__img"
+                  class="fr-card__header"
                 >
-                  <img
-                    alt=""
-                    className="fr-responsive-img"
-                    src="/img.jpg"
-                  />
+                  <div
+                    class="fr-card__img"
+                  >
+                    <img
+                      alt=""
+                      class="fr-responsive-img"
+                      src="/img.jpg"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -1533,5 +1394,5 @@ exports[`agir renders traduire 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
index 132cf26e6b..2684c3a8e1 100644
--- a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`recherche renders search results 1`] = `
-.c13 {
+<DocumentFragment>
+  .c13 {
   background-color: #EFE8F4;
   color: #3D2884;
 }
@@ -285,1740 +286,1909 @@ exports[`recherche renders search results 1`] = `
 }
 
 <div
-  className="container"
->
-  <div
-    className=""
+    class="container"
   >
     <div
-      className="container"
+      class=""
     >
       <div
-        className="container_inner container"
+        class="container"
       >
-        <h1
-          className="h1 text-white"
-        >
-          Recherche.titleResults
-        </h1>
         <div
-          className="inputs"
+          class="container_inner container"
         >
+          <h1
+            class="h1 text-white"
+          >
+            Recherche.titleResults
+          </h1>
           <div
-            className="dropdown dropdown"
-            onKeyDown={[Function]}
+            class="inputs"
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="dropdown dropdown"
             >
-              <div
-                className="filter searchpage"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-secondary"
+                type="button"
               >
-                <span
-                  className="icon"
+                <div
+                  class="filter searchpage"
                 >
                   <span
-                    className="icon"
+                    class="icon"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-pin-outline" fill="black"><g data-name="Layer 2"><g data-name="pin"><rect width="24" height="24" opacity="0"/><path d="M12 2a8 8 0 0 0-8 7.92c0 5.48 7.05 11.58 7.35 11.84a1 1 0 0 0 1.3 0C13 21.5 20 15.4 20 9.92A8 8 0 0 0 12 2zm0 17.65c-1.67-1.59-6-6-6-9.73a6 6 0 0 1 12 0c0 3.7-4.33 8.14-6 9.73z"/><path d="M12 6a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 12 6zm0 5a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 12 11z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-pin-outline"
+                          fill="black"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="pin"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M12 2a8 8 0 0 0-8 7.92c0 5.48 7.05 11.58 7.35 11.84a1 1 0 0 0 1.3 0C13 21.5 20 15.4 20 9.92A8 8 0 0 0 12 2zm0 17.65c-1.67-1.59-6-6-6-9.73a6 6 0 0 1 12 0c0 3.7-4.33 8.14-6 9.73z"
+                              />
+                              <path
+                                d="M12 6a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 12 6zm0 5a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 12 11z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
-                <span
-                  className="search"
-                >
-                  <label
-                    className="label"
-                    htmlFor="Dispositif.Département"
-                  >
-                    Dispositif.Département
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Dispositif.Département"
-                    onChange={[Function]}
-                    placeholder="Recherche.department"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value empty"
+                  <span
+                    class="search"
                   >
-                    Recherche.all
-                  </div>
-                </span>
-              </div>
-            </button>
-            <div
-              aria-hidden={true}
-              className="menu dropdown-menu"
-              data-bs-popper="static"
-              role="menu"
-              tabIndex="-1"
-            >
+                    <label
+                      class="label"
+                      for="Dispositif.Département"
+                    >
+                      Dispositif.Département
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Dispositif.Département"
+                      placeholder="Recherche.department"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value empty"
+                    >
+                      Recherche.all
+                    </div>
+                  </span>
+                </div>
+              </button>
               <div
-                className="container"
+                aria-hidden="true"
+                class="menu dropdown-menu"
+                data-bs-popper="static"
+                role="menu"
+                tabindex="-1"
               >
                 <div
-                  className="header no_results"
+                  class="container"
                 >
-                  <button
-                    className="btn btn btn-secondary"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
+                  <div
+                    class="header no_results"
                   >
-                    <span
-                      className="icon"
+                    <button
+                      class="btn btn btn-secondary"
+                      type="button"
                     >
                       <span
-                        className="icon"
+                        class="icon"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" class="eva eva-navigation-2-outline" fill="black"><g data-name="Layer 2"><g data-name="navigation-2"><rect width="24" height="24" opacity="0"/><path d="M13.67 22h-.06a1 1 0 0 1-.92-.8L11 13l-8.2-1.69a1 1 0 0 1-.12-1.93l16-5.33A1 1 0 0 1 20 5.32l-5.33 16a1 1 0 0 1-1 .68zm-6.8-11.9l5.19 1.06a1 1 0 0 1 .79.78l1.05 5.19 3.52-10.55z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "16px",
-                              "lineHeight": "16px",
-                            }
-                          }
-                        />
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 16px; line-height: 16px;"
+                          >
+                            <svg
+                              class="eva eva-navigation-2-outline"
+                              fill="black"
+                              height="16px"
+                              viewBox="0 0 24 24"
+                              width="16px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="navigation-2"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M13.67 22h-.06a1 1 0 0 1-.92-.8L11 13l-8.2-1.69a1 1 0 0 1-.12-1.93l16-5.33A1 1 0 0 1 20 5.32l-5.33 16a1 1 0 0 1-1 .68zm-6.8-11.9l5.19 1.06a1 1 0 0 1 .79.78l1.05 5.19 3.52-10.55z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
                       </span>
-                    </span>
-                    Recherche.positionButton
-                  </button>
+                      Recherche.positionButton
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            className="dropdown dropdown"
-            onKeyDown={[Function]}
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="dropdown dropdown"
             >
-              <div
-                className="filter searchpage"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-secondary"
+                type="button"
               >
-                <span
-                  className="icon active"
+                <div
+                  class="filter searchpage"
                 >
                   <span
-                    className="icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-list-outline" fill="white"><g data-name="Layer 2"><g data-name="list"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><circle cx="4" cy="7" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="17" r="1"/><rect x="7" y="11" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="16" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="6" width="14" height="2" rx=".94" ry=".94"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </span>
-                <span
-                  className="search"
-                >
-                  <label
-                    className="label"
-                    htmlFor="Recherche.themes"
-                  >
-                    Recherche.themes
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Recherche.themes"
-                    onChange={[Function]}
-                    placeholder="Rechercher2"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value"
-                  >
-                    Français
-                  </div>
-                  <div
-                    className="empty_btn"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    tabIndex={0}
+                    class="icon active"
                   >
                     <span
-                      className="icon"
+                      class="icon"
                     >
                       <i
-                        dangerouslySetInnerHTML={
-                          {
-                            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="dark"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                          }
-                        }
-                        style={
-                          {
-                            "height": "20px",
-                            "lineHeight": "20px",
-                          }
-                        }
-                      />
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-list-outline"
+                          fill="white"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="list"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(180 12 12)"
+                                width="24"
+                              />
+                              <circle
+                                cx="4"
+                                cy="7"
+                                r="1"
+                              />
+                              <circle
+                                cx="4"
+                                cy="12"
+                                r="1"
+                              />
+                              <circle
+                                cx="4"
+                                cy="17"
+                                r="1"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="11"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="16"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="6"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
                     </span>
-                  </div>
-                </span>
-              </div>
-            </button>
-            <div
-              aria-hidden={true}
-              className="menu dropdown-menu"
-              data-bs-popper="static"
-              role="menu"
-              tabIndex="-1"
-            >
+                  </span>
+                  <span
+                    class="search"
+                  >
+                    <label
+                      class="label"
+                      for="Recherche.themes"
+                    >
+                      Recherche.themes
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Recherche.themes"
+                      placeholder="Rechercher2"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value"
+                    >
+                      Français
+                    </div>
+                    <div
+                      class="empty_btn"
+                      role="button"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                      >
+                        <i
+                          style="height: 20px; line-height: 20px;"
+                        >
+                          <svg
+                            class="eva eva-close-outline"
+                            fill="dark"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              data-name="Layer 2"
+                            >
+                              <g
+                                data-name="close"
+                              >
+                                <rect
+                                  height="24"
+                                  opacity="0"
+                                  transform="rotate(180 12 12)"
+                                  width="24"
+                                />
+                                <path
+                                  d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </i>
+                      </span>
+                    </div>
+                  </span>
+                </div>
+              </button>
               <div
-                className="container"
+                aria-hidden="true"
+                class="menu dropdown-menu"
+                data-bs-popper="static"
+                role="menu"
+                tabindex="-1"
               >
                 <div
-                  className="themes"
+                  class="container"
                 >
-                  <div>
-                    <button
-                      className="c0 btn"
-                      color100="#443023"
-                      color30="#EEE7E5"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                  <div
+                    class="themes"
+                  >
+                    <div>
+                      <button
+                        class="c0 btn"
+                        color100="#443023"
+                        color30="#EEE7E5"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#443023",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(68, 48, 35);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Administratif
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Administratif
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c1 btn"
-                      color100="#3D2884"
-                      color30="#EFE8F4"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c1 btn"
+                        color100="#3D2884"
+                        color30="#EFE8F4"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={{}}
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
                           >
-                            <img
-                              alt=""
-                              data-nimg="1"
-                              decoding="async"
-                              height={20}
-                              loading="lazy"
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              src="/images/icon_elearning.svg"
-                              style={
-                                {
-                                  "color": "transparent",
-                                }
-                              }
-                              width={20}
-                            />
+                            <span
+                              class="icon"
+                            >
+                              <img
+                                alt=""
+                                data-nimg="1"
+                                decoding="async"
+                                height="20"
+                                loading="lazy"
+                                src="/images/icon_elearning.svg"
+                                style="color: transparent;"
+                                width="20"
+                              />
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Français
+                            </span>
                           </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                          0
+                        </span>
+                        <span
+                          class="ms-2 icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            Français
-                          </span>
+                            <svg
+                              class="eva eva-chevron-right-outline"
+                              fill="white"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="chevron-right"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    transform="rotate(-90 12 12)"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M10.5 17a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L13.1 12 9.92 8.69a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l3.86 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-.7.32z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
-                        0
-                      </span>
-                      <span
-                        className="ms-2 icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-right-outline" fill="white"><g data-name="Layer 2"><g data-name="chevron-right"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M10.5 17a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L13.1 12 9.92 8.69a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l3.86 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-.7.32z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c2 btn"
-                      color100="#095411"
-                      color30="#E8F4E8"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c2 btn"
+                        color100="#095411"
+                        color30="#E8F4E8"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#095411",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(9, 84, 17);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Formation pro
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Formation pro
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c3 btn"
-                      color100="#055E5A"
-                      color30="#EDFDF9"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c3 btn"
+                        color100="#055E5A"
+                        color30="#EDFDF9"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#055E5A",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(5, 94, 90);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Insertion pro
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c4 btn"
+                        color100="#06508C"
+                        color30="#DDF2F9"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(6, 80, 140);"
                           >
-                            Insertion pro
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Logement
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c4 btn"
-                      color100="#06508C"
-                      color30="#DDF2F9"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c5 btn"
+                        color100="#910940"
+                        color30="#FFEDED"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#06508C",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(145, 9, 64);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Santé
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c6 btn"
+                        color100="#CD5605"
+                        color30="#FEEBDE"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(205, 86, 5);"
                           >
-                            Logement
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Mobilité
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c5 btn"
-                      color100="#910940"
-                      color30="#FFEDED"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c7 btn"
+                        color100="#770649"
+                        color30="#FFEAF4"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#910940",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(119, 6, 73);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Rencontre
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c8 btn"
+                        color100="#204F01"
+                        color30="#F2F9E5"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(32, 79, 1);"
                           >
-                            Santé
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Études
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c6 btn"
-                      color100="#CD5605"
-                      color30="#FEEBDE"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c9 btn"
+                        color100="#073099"
+                        color30="#EEF8FF"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#CD5605",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(7, 48, 153);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Bénévolat
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c10 btn"
+                        color100="#600566"
+                        color30="#F9F1FD"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(96, 5, 102);"
                           >
-                            Mobilité
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Loisir
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c7 btn"
-                      color100="#770649"
-                      color30="#FFEAF4"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c11 btn"
+                        color100="#9E180A"
+                        color30="#F9E8E8"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#770649",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(158, 24, 10);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Culture
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c12 btn"
+                        color100="#77057A"
+                        color30="#FDC4FC"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(119, 5, 122);"
                           >
-                            Rencontre
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Famille
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
+                      </button>
+                    </div>
                   </div>
-                  <div>
+                  <div
+                    class="needs"
+                  >
                     <button
-                      className="c8 btn"
-                      color100="#204F01"
-                      color30="#F2F9E5"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                      class="c13 btn need"
+                      color100="#3D2884"
+                      color30="#EFE8F4"
+                      tabindex="0"
                     >
-                      <span
-                        className="btn_content"
+                      <div
+                        class="checkbox"
                       >
+                        <input
+                          checked=""
+                          tabindex="-1"
+                          type="checkbox"
+                        />
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#204F01",
-                            }
-                          }
+                          class="check"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                            <i
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-checkmark-square-2"
+                                fill="#3D2884"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="checkmark-square-2"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      transform="rotate(180 12 12)"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M18 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm-1.7 6.61l-4.57 6a1 1 0 0 1-.79.39 1 1 0 0 1-.79-.38l-2.44-3.11a1 1 0 0 1 1.58-1.23l1.63 2.08 3.78-5a1 1 0 1 1 1.6 1.22z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
+                        </span>
+                        <label>
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="all"
                           >
-                            Études
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-grid"
+                                  fill="#3D2884"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="grid"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <path
+                                        d="M9 3H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M19 3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M9 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M19 13h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                            Recherche.all
+                            <span
+                              class="badge"
+                              style="background-color: rgb(239, 232, 244); color: rgb(61, 40, 132);"
+                            >
+                              0
+                            </span>
                           </span>
-                        </span>
-                      </span>
+                        </label>
+                      </div>
                     </button>
                   </div>
-                  <div>
-                    <button
-                      className="c9 btn"
-                      color100="#073099"
-                      color30="#EEF8FF"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                </div>
+              </div>
+            </div>
+            <div
+              class="dropdown"
+            >
+              <button
+                class="btn btn-secondary"
+                type="button"
+              >
+                <div
+                  class="filter searchpage"
+                >
+                  <span
+                    class="icon"
+                  >
+                    <span
+                      class="icon"
                     >
-                      <span
-                        className="btn_content"
+                      <i
+                        style="height: 24px; line-height: 24px;"
                       >
-                        <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#073099",
-                            }
-                          }
+                        <svg
+                          class="eva eva-search-outline"
+                          fill="black"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <span
-                            className="icon"
+                          <g
+                            data-name="Layer 2"
                           >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            <g
+                              data-name="search"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </span>
+                  <span
+                    class="search"
+                  >
+                    <label
+                      class="label"
+                      for="Recherche.keyword"
+                    >
+                      Recherche.keyword
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Recherche.keyword"
+                      placeholder="Rechercher2"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value empty"
+                    >
+                      Recherche.keywordPlaceholder
+                    </div>
+                  </span>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div
+            class="subheader"
+          >
+            <div
+              class="filters"
+            >
+              <div
+                class="dropdown dropdown"
+              >
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  <span
+                    class="value"
+                  >
+                    Recherche.filterAge
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-chevron-down-outline"
+                        fill="gray"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="chevron-down"
                           >
-                            Bénévolat
-                          </span>
-                        </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c10 btn"
-                      color100="#600566"
-                      color30="#F9F1FD"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  aria-hidden="true"
+                  class="menu dropdown-menu"
+                  data-bs-popper="static"
+                  role="menu"
+                  tabindex="-1"
+                >
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="checkbox"
                     >
+                      <input
+                        type="checkbox"
+                      />
                       <span
-                        className="btn_content"
+                        class="check"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#600566",
-                            }
-                          }
+                          class="icon"
                         >
-                          <span
-                            className="icon"
-                          >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            Loisir
-                          </span>
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c11 btn"
-                      color100="#9E180A"
-                      color30="#F9E8E8"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                      <label>
+                        Filters.age-18
+                      </label>
+                    </div>
+                  </button>
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="checkbox"
                     >
+                      <input
+                        type="checkbox"
+                      />
                       <span
-                        className="btn_content"
+                        class="check"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#9E180A",
-                            }
-                          }
+                          class="icon"
                         >
-                          <span
-                            className="icon"
-                          >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            Culture
-                          </span>
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c12 btn"
-                      color100="#77057A"
-                      color30="#FDC4FC"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                      <label>
+                        Filters.age18-25
+                      </label>
+                    </div>
+                  </button>
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="checkbox"
                     >
+                      <input
+                        type="checkbox"
+                      />
                       <span
-                        className="btn_content"
+                        class="check"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#77057A",
-                            }
-                          }
+                          class="icon"
                         >
-                          <span
-                            className="icon"
-                          >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            Famille
-                          </span>
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </span>
-                    </button>
-                  </div>
+                      <label>
+                        Filters.age+25
+                      </label>
+                    </div>
+                  </button>
                 </div>
+              </div>
+              <div
+                class="dropdown dropdown"
+              >
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary"
+                  type="button"
+                >
+                  <span
+                    class="value"
+                  >
+                    Recherche.filterFrenchLevel
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-chevron-down-outline"
+                        fill="gray"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="chevron-down"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
                 <div
-                  className="needs"
+                  aria-hidden="true"
+                  class="menu dropdown-menu"
+                  data-bs-popper="static"
+                  role="menu"
+                  tabindex="-1"
                 >
                   <button
-                    className="c13 btn need"
-                    color100="#3D2884"
-                    color30="#EFE8F4"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    selected={true}
-                    tabIndex={0}
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
                   >
                     <div
-                      className="checkbox"
+                      class="checkbox"
                     >
                       <input
-                        defaultChecked={true}
-                        tabIndex={-1}
                         type="checkbox"
                       />
                       <span
-                        className="check"
+                        class="check"
                       >
                         <span
-                          className="icon"
+                          class="icon"
                         >
                           <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-square-2" fill="#3D2884"><g data-name="Layer 2"><g data-name="checkmark-square-2"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M18 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm-1.7 6.61l-4.57 6a1 1 0 0 1-.79.39 1 1 0 0 1-.79-.38l-2.44-3.11a1 1 0 0 1 1.58-1.23l1.63 2.08 3.78-5a1 1 0 1 1 1.6 1.22z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </span>
                       <label>
+                        Filters.frenchLevelA
+                      </label>
+                    </div>
+                  </button>
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="checkbox"
+                    >
+                      <input
+                        type="checkbox"
+                      />
+                      <span
+                        class="check"
+                      >
                         <span
-                          className="all"
+                          class="icon"
                         >
-                          <span
-                            className="icon"
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-grid" fill="#3D2884"><g data-name="Layer 2"><g data-name="grid"><rect width="24" height="24" opacity="0"/><path d="M9 3H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path d="M19 3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path d="M9 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/><path d="M19 13h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
-                          </span>
-                          Recherche.all
-                          <span
-                            className="badge"
-                            style={
-                              {
-                                "backgroundColor": "#EFE8F4",
-                                "color": "#3D2884",
-                              }
-                            }
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </span>
+                      <label>
+                        Filters.frenchLevelB
+                      </label>
+                    </div>
+                  </button>
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <div
+                      class="checkbox"
+                    >
+                      <input
+                        type="checkbox"
+                      />
+                      <span
+                        class="check"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            0
-                          </span>
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
+                      </span>
+                      <label>
+                        Filters.frenchLevelC
                       </label>
                     </div>
                   </button>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            className="dropdown"
-          >
-            <button
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
               <div
-                className="filter searchpage"
+                class="dropdown dropdown"
               >
-                <span
-                  className="icon"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  class="btn btn-secondary"
+                  type="button"
                 >
                   <span
-                    className="icon"
+                    class="value"
+                  >
+                    Recherche.filterLanguage
+                  </span>
+                  <span
+                    class="icon icon"
                   >
                     <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-search-outline" fill="black"><g data-name="Layer 2"><g data-name="search"><rect width="24" height="24" opacity="0"/><path d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-chevron-down-outline"
+                        fill="gray"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="chevron-down"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
                   </span>
-                </span>
-                <span
-                  className="search"
+                </button>
+                <div
+                  aria-hidden="true"
+                  class="menu dropdown-menu"
+                  data-bs-popper="static"
+                  role="menu"
+                  tabindex="-1"
                 >
-                  <label
-                    className="label"
-                    htmlFor="Recherche.keyword"
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
                   >
-                    Recherche.keyword
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Recherche.keyword"
-                    onChange={[Function]}
-                    placeholder="Rechercher2"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value empty"
+                    <div
+                      class="checkbox"
+                    >
+                      <input
+                        type="checkbox"
+                      />
+                      <span
+                        class="check"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </span>
+                      <label>
+                        <span
+                          class="flag fi fi-fr"
+                          id="fr"
+                          title="fr"
+                        />
+                        Français
+                      </label>
+                    </div>
+                  </button>
+                  <button
+                    class="item dropdown-item"
+                    role="menuitem"
+                    tabindex="0"
+                    type="button"
                   >
-                    Recherche.keywordPlaceholder
-                  </div>
-                </span>
-              </div>
-            </button>
-          </div>
-        </div>
-        <div
-          className="subheader"
-        >
-          <div
-            className="filters"
-          >
-            <div
-              className="dropdown dropdown"
-              onKeyDown={[Function]}
-            >
-              <button
-                aria-expanded={false}
-                aria-haspopup={true}
-                className="btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="value"
-                >
-                  Recherche.filterAge
-                </span>
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-down-outline" fill="gray"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"/><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
-              <div
-                aria-hidden={true}
-                className="menu dropdown-menu"
-                data-bs-popper="static"
-                role="menu"
-                tabIndex="-1"
-              >
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
-                  >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </span>
-                    <label>
-                      Filters.age-18
-                    </label>
-                  </div>
-                </button>
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
-                  >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
+                    <div
+                      class="checkbox"
                     >
+                      <input
+                        type="checkbox"
+                      />
                       <span
-                        className="icon"
+                        class="check"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-square-outline"
+                              fill="black"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="square"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
                       </span>
-                    </span>
-                    <label>
-                      Filters.age18-25
-                    </label>
-                  </div>
-                </button>
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
-                  >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
+                      <label>
+                        <span
+                          class="flag fi fi-en"
+                          id="en"
+                          title="en"
                         />
-                      </span>
-                    </span>
-                    <label>
-                      Filters.age+25
-                    </label>
-                  </div>
-                </button>
+                        Anglais
+                      </label>
+                    </div>
+                  </button>
+                </div>
               </div>
             </div>
-            <div
-              className="dropdown dropdown"
-              onKeyDown={[Function]}
+            <button
+              class="reset btn btn-secondary"
+              type="button"
             >
-              <button
-                aria-expanded={false}
-                aria-haspopup={true}
-                className="btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="value"
-                >
-                  Recherche.filterFrenchLevel
-                </span>
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-down-outline" fill="gray"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"/><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
-              <div
-                aria-hidden={true}
-                className="menu dropdown-menu"
-                data-bs-popper="static"
-                role="menu"
-                tabIndex="-1"
+              <span
+                class="me-2 icon"
               >
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
+                <i
+                  style="height: 20px; line-height: 20px;"
                 >
-                  <div
-                    className="checkbox"
+                  <svg
+                    class="eva eva-refresh-outline"
+                    fill="white"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
+                    <g
+                      data-name="Layer 2"
                     >
-                      <span
-                        className="icon"
+                      <g
+                        data-name="refresh"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
                         />
-                      </span>
-                    </span>
-                    <label>
-                      Filters.frenchLevelA
-                    </label>
-                  </div>
-                </button>
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
-                  >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
+                        <path
+                          d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19 7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7 7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83 1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06.33.33 0 0 0 .1-.06.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3 9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25z"
                         />
-                      </span>
-                    </span>
-                    <label>
-                      Filters.frenchLevelB
-                    </label>
-                  </div>
-                </button>
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Recherche.resetFilters
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="container no_result"
+      >
+        <div
+          class="container_inner container"
+        >
+          <div
+            class="types"
+          >
+            <button
+              class="btn selected btn btn-secondary"
+              type="button"
+            >
+              Filters.typeAll (0)
+            </button>
+            <button
+              class="btn btn btn-secondary"
+              type="button"
+            >
+              Filters.typeDispositif (0)
+            </button>
+            <button
+              class="btn btn btn-secondary"
+              type="button"
+            >
+              Filters.typeDemarche (0)
+            </button>
+          </div>
+          <div
+            class="dropdown"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="dropdown btn btn-secondary"
+              type="button"
+            >
+              <span
+                class="icon icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
                 >
-                  <div
-                    className="checkbox"
+                  <svg
+                    class="eva eva-swap-outline"
+                    fill="black"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
+                    <g
+                      data-name="Layer 2"
                     >
-                      <span
-                        className="icon"
+                      <g
+                        data-name="swap"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
+                        <rect
+                          height="24"
+                          opacity="0"
+                          transform="rotate(-90 12 12)"
+                          width="24"
                         />
-                      </span>
-                    </span>
-                    <label>
-                      Filters.frenchLevelC
-                    </label>
-                  </div>
-                </button>
-              </div>
-            </div>
+                        <path
+                          d="M4 9h13l-1.6 1.2a1 1 0 0 0-.2 1.4 1 1 0 0 0 .8.4 1 1 0 0 0 .6-.2l4-3a1 1 0 0 0 0-1.59l-3.86-3a1 1 0 0 0-1.23 1.58L17.08 7H4a1 1 0 0 0 0 2z"
+                        />
+                        <path
+                          d="M20 16H7l1.6-1.2a1 1 0 0 0-1.2-1.6l-4 3a1 1 0 0 0 0 1.59l3.86 3a1 1 0 0 0 .61.21 1 1 0 0 0 .79-.39 1 1 0 0 0-.17-1.4L6.92 18H20a1 1 0 0 0 0-2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Filters.sortDate
+            </button>
             <div
-              className="dropdown dropdown"
-              onKeyDown={[Function]}
+              aria-hidden="true"
+              class="menu dropdown-menu"
+              data-bs-popper="static"
+              role="menu"
+              tabindex="-1"
             >
               <button
-                aria-expanded={false}
-                aria-haspopup={true}
-                className="btn btn-secondary"
-                onClick={[Function]}
+                class="item selected dropdown-item"
+                role="menuitem"
+                tabindex="0"
                 type="button"
               >
+                Filters.sortDate
                 <span
-                  className="value"
-                >
-                  Recherche.filterLanguage
-                </span>
-                <span
-                  className="icon icon"
+                  class="icon"
                 >
                   <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-down-outline" fill="gray"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"/><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
-              <div
-                aria-hidden={true}
-                className="menu dropdown-menu"
-                data-bs-popper="static"
-                role="menu"
-                tabIndex="-1"
-              >
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
+                    style="height: 20px; line-height: 20px;"
                   >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
+                    <svg
+                      class="eva eva-checkmark-outline"
+                      fill="white"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <span
-                        className="icon"
+                      <g
+                        data-name="Layer 2"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </span>
-                    <label>
-                      <span
-                        className="flag fi fi-fr"
-                        id="fr"
-                        title="fr"
-                      />
-                      Français
-                    </label>
-                  </div>
-                </button>
-                <button
-                  className="item dropdown-item"
-                  onClick={[Function]}
-                  role="menuitem"
-                  tabIndex="0"
-                  type="button"
-                >
-                  <div
-                    className="checkbox"
-                  >
-                    <input
-                      defaultChecked={false}
-                      type="checkbox"
-                    />
-                    <span
-                      className="check"
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="black"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </span>
-                    <label>
-                      <span
-                        className="flag fi fi-en"
-                        id="en"
-                        title="en"
-                      />
-                      Anglais
-                    </label>
-                  </div>
-                </button>
-              </div>
+                        <g
+                          data-name="checkmark"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <button
+                class="item dropdown-item"
+                role="menuitem"
+                tabindex="0"
+                type="button"
+              >
+                Filters.sortView
+              </button>
             </div>
           </div>
-          <button
-            className="reset btn btn-secondary"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="me-2 icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-refresh-outline" fill="white"><g data-name="Layer 2"><g data-name="refresh"><rect width="24" height="24" opacity="0"/><path d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19 7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7 7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83 1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06.33.33 0 0 0 .1-.06.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3 9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Recherche.resetFilters
-          </button>
         </div>
       </div>
     </div>
     <div
-      className="container no_result"
+      class="container_inner container"
     >
       <div
-        className="container_inner container"
+        class="no_results"
       >
-        <div
-          className="types"
+        <h2>
+          Recherche.noResultTitle
+        </h2>
+        <p>
+          Recherche.noResultText
+        </p>
+        <button
+          class="btn login"
         >
-          <button
-            className="btn selected btn btn-secondary"
-            onClick={[Function]}
-            type="button"
-          >
-            Filters.typeAll
-             
-            (0)
-          </button>
-          <button
-            className="btn btn btn-secondary"
-            onClick={[Function]}
-            type="button"
-          >
-            Filters.typeDispositif
-             
-            (0)
-          </button>
-          <button
-            className="btn btn btn-secondary"
-            onClick={[Function]}
-            type="button"
+          <span
+            class="me-2 icon"
           >
-            Filters.typeDemarche
-             
-            (0)
-          </button>
-        </div>
-        <div
-          className="dropdown"
-          onKeyDown={[Function]}
-        >
-          <button
-            aria-expanded={false}
-            aria-haspopup={true}
-            className="dropdown btn btn-secondary"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-swap-outline" fill="black"><g data-name="Layer 2"><g data-name="swap"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M4 9h13l-1.6 1.2a1 1 0 0 0-.2 1.4 1 1 0 0 0 .8.4 1 1 0 0 0 .6-.2l4-3a1 1 0 0 0 0-1.59l-3.86-3a1 1 0 0 0-1.23 1.58L17.08 7H4a1 1 0 0 0 0 2z"/><path d="M20 16H7l1.6-1.2a1 1 0 0 0-1.2-1.6l-4 3a1 1 0 0 0 0 1.59l3.86 3a1 1 0 0 0 .61.21 1 1 0 0 0 .79-.39 1 1 0 0 0-.17-1.4L6.92 18H20a1 1 0 0 0 0-2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Filters.sortDate
-          </button>
-          <div
-            aria-hidden={true}
-            className="menu dropdown-menu"
-            data-bs-popper="static"
-            role="menu"
-            tabIndex="-1"
-          >
-            <button
-              className="item selected dropdown-item"
-              onClick={[Function]}
-              role="menuitem"
-              tabIndex="0"
-              type="button"
+            <i
+              style="height: 20px; line-height: 20px;"
             >
-              Filters.sortDate
-              <span
-                className="icon"
+              <svg
+                class="eva eva-refresh-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="white"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <button
-              className="item dropdown-item"
-              onClick={[Function]}
-              role="menuitem"
-              tabIndex="0"
-              type="button"
-            >
-              Filters.sortView
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="container_inner container"
-  >
-    <div
-      className="no_results"
-    >
-      <h2>
-        Recherche.noResultTitle
-      </h2>
-      <p>
-        Recherche.noResultText
-      </p>
-      <button
-        className="btn login"
-        onClick={[Function]}
-      >
-        <span
-          className="me-2 icon"
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="refresh"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19 7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7 7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83 1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06.33.33 0 0 0 .1-.06.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3 9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Recherche.resetFilters
+        </button>
+        <div
+          class="image"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-refresh-outline" fill="#fff"><g data-name="Layer 2"><g data-name="refresh"><rect width="24" height="24" opacity="0"/><path d="M20.3 13.43a1 1 0 0 0-1.25.65A7.14 7.14 0 0 1 12.18 19 7.1 7.1 0 0 1 5 12a7.1 7.1 0 0 1 7.18-7 7.26 7.26 0 0 1 4.65 1.67l-2.17-.36a1 1 0 0 0-1.15.83 1 1 0 0 0 .83 1.15l4.24.7h.17a1 1 0 0 0 .34-.06.33.33 0 0 0 .1-.06.78.78 0 0 0 .2-.11l.09-.11c0-.05.09-.09.13-.15s0-.1.05-.14a1.34 1.34 0 0 0 .07-.18l.75-4a1 1 0 0 0-2-.38l-.27 1.45A9.21 9.21 0 0 0 12.18 3 9.1 9.1 0 0 0 3 12a9.1 9.1 0 0 0 9.18 9A9.12 9.12 0 0 0 21 14.68a1 1 0 0 0-.7-1.25z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
+          <img
+            alt="No results"
+            data-nimg="1"
+            decoding="async"
+            height="280"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
+            style="color: transparent;"
+            width="420"
           />
-        </span>
-        Recherche.resetFilters
-      </button>
-      <div
-        className="image"
-      >
-        <img
-          alt="No results"
-          data-nimg="1"
-          decoding="async"
-          height={280}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={420}
-        />
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/__snapshots__/traduire.test.tsx.snap b/client/src/__tests__/__snapshots__/traduire.test.tsx.snap
index 6d8d94f359..979040bdc8 100644
--- a/client/src/__tests__/__snapshots__/traduire.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/traduire.test.tsx.snap
@@ -1,1284 +1,1330 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`traduire renders traduire 1`] = `
-<div
-  className="main"
->
+<DocumentFragment>
   <div
-    className="section bg_blue mb-4"
+    class="main"
   >
     <div
-      className="container container"
+      class="section bg_blue mb-4"
     >
       <div
-        className="hero row"
+        class="container container"
       >
         <div
-          className="hero_title col-sm-12 col-lg-6"
+          class="hero row"
         >
-          <h1
-            className="text-white"
-          >
-            Translate.title
-          </h1>
-          <p
-            className="subtitle"
-          >
-            Translate.subtitle
-          </p>
           <div
-            className="container"
+            class="hero_title col-sm-12 col-lg-6"
           >
-            <a
-              className="btn"
-              href="/undefined#who"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Suivant"
+            <h1
+              class="text-white"
             >
-              <span
-                className="icon"
+              Translate.title
+            </h1>
+            <p
+              class="subtitle"
+            >
+              Translate.subtitle
+            </p>
+            <div
+              class="container"
+            >
+              <a
+                class="btn"
+                href="/undefined#who"
+                title="Suivant"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-downward-outline" fill="#0421b1"><g data-name="Layer 2"><g data-name="arrow-downward"><rect width="24" height="24" opacity="0"/><path d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "24px",
-                      "lineHeight": "24px",
-                    }
-                  }
-                />
-              </span>
-            </a>
+                <span
+                  class="icon"
+                >
+                  <i
+                    style="height: 24px; line-height: 24px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-downward-outline"
+                      fill="#0421b1"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </a>
+            </div>
+          </div>
+          <div
+            class="col-sm-12 col-lg-6"
+          >
+            <img
+              alt=""
+              data-nimg="1"
+              decoding="async"
+              height="40"
+              loading="lazy"
+              src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+              srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+              style="color: transparent; max-width: 100%; height: auto;"
+              width="40"
+            />
           </div>
-        </div>
-        <div
-          className="col-sm-12 col-lg-6"
-        >
-          <img
-            alt=""
-            data-nimg="1"
-            decoding="async"
-            height={40}
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-            srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-            style={
-              {
-                "color": "transparent",
-                "height": "auto",
-                "maxWidth": "100%",
-              }
-            }
-            width={40}
-          />
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="container shadow"
-  >
     <div
-      className="inner container"
+      class="container shadow"
     >
-      <div>
-        <a
-          className="btn green"
-          href="/undefined#who"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Translate.navbarItem1
-        </a>
-        <a
-          className="btn orange"
-          href="/undefined#steps"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Translate.navbarItem2
-        </a>
-        <a
-          className="btn purple"
-          href="/undefined#next"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Translate.navbarItem3
-        </a>
+      <div
+        class="inner container"
+      >
+        <div>
+          <a
+            class="btn green"
+            href="/undefined#who"
+          >
+            Translate.navbarItem1
+          </a>
+          <a
+            class="btn orange"
+            href="/undefined#steps"
+          >
+            Translate.navbarItem2
+          </a>
+          <a
+            class="btn purple"
+            href="/undefined#next"
+          >
+            Translate.navbarItem3
+          </a>
+          <a
+            class="btn red"
+            href="/undefined#faq"
+          >
+            Translate.navbarItem4
+          </a>
+        </div>
         <a
-          className="btn red"
-          href="/undefined#faq"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
+          class="btn blue"
+          href="/undefined#register"
         >
-          Translate.navbarItem4
+          <span
+            class="icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-plus-circle-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="plus-circle"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                    />
+                    <path
+                      d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Translate.navbarItem5
         </a>
       </div>
-      <a
-        className="btn blue"
-        href="/undefined#register"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-plus-circle-outline" fill="#fff"><g data-name="Layer 2"><g data-name="plus-circle"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Translate.navbarItem5
-      </a>
     </div>
-  </div>
-  <div
-    className="scrollspy_section"
-  >
     <div
-      className="section"
+      class="scrollspy_section"
     >
-      <span
-        className="anchor"
-        id="who"
-      />
       <div
-        className="container container"
+        class="section"
       >
-        <h2
-          className="title2 mb-0"
-        >
-          Translate.whoTitle
-        </h2>
-        <p
-          className="subtitle"
-        >
-          Translate.whoSubtitle
-        </p>
+        <span
+          class="anchor"
+          id="who"
+        />
         <div
-          className="top_space row"
+          class="container container"
         >
+          <h2
+            class="title2 mb-0"
+          >
+            Translate.whoTitle
+          </h2>
+          <p
+            class="subtitle"
+          >
+            Translate.whoSubtitle
+          </p>
           <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="top_space row"
           >
             <div
-              className="container grey"
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
             >
-              <div>
-                <div
-                  className="header"
-                >
+              <div
+                class="container grey"
+              >
+                <div>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="header"
                   >
-                    <span
-                      className="flag fi fi-ua"
-                      title="ua"
-                    />
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ua"
+                        title="ua"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ir"
+                        title="ir"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-sa"
+                        title="sa"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-gb"
+                        title="gb"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-af"
+                        title="af"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ru"
+                        title="ru"
+                      />
+                    </div>
+                    <div
+                      class="container"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-er"
+                        title="er"
+                      />
+                    </div>
                   </div>
-                  <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                  <h3
+                    class="title"
                   >
-                    <span
-                      className="flag fi fi-ir"
-                      title="ir"
-                    />
-                  </div>
+                    Translate.whoCardTitle1
+                  </h3>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="text mb-0"
                   >
-                    <span
-                      className="flag fi fi-sa"
-                      title="sa"
-                    />
+                    <p
+                      class="mb-0"
+                    >
+                      Translate.whoCardText1
+                    </p>
                   </div>
+                </div>
+                <div />
+              </div>
+            </div>
+            <div
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            >
+              <div
+                class="container grey"
+              >
+                <div>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="header"
                   >
-                    <span
-                      className="flag fi fi-gb"
-                      title="gb"
-                    />
+                    <div
+                      class="container"
+                      style="width: 56px; height: 56px;"
+                    >
+                      <span
+                        class="flag fi fi-fr"
+                        title="fr"
+                      />
+                    </div>
                   </div>
+                  <h3
+                    class="title"
+                  >
+                    Translate.whoCardTitle2
+                  </h3>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="text mb-0"
                   >
-                    <span
-                      className="flag fi fi-af"
-                      title="af"
-                    />
+                    <p
+                      class="mb-0"
+                    >
+                      Translate.whoCardText2
+                    </p>
                   </div>
+                </div>
+                <div />
+              </div>
+            </div>
+            <div
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            >
+              <div
+                class="container grey"
+              >
+                <div>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="header"
                   >
-                    <span
-                      className="flag fi fi-ru"
-                      title="ru"
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
                     />
                   </div>
+                  <h3
+                    class="title"
+                  >
+                    Translate.whoCardTitle3
+                  </h3>
                   <div
-                    className="container"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="text mb-0"
                   >
-                    <span
-                      className="flag fi fi-er"
-                      title="er"
-                    />
+                    <p
+                      class="mb-0"
+                    >
+                      Translate.whoCardText3
+                    </p>
                   </div>
                 </div>
-                <h3
-                  className="title"
-                >
-                  Translate.whoCardTitle1
-                </h3>
-                <div
-                  className="text mb-0"
-                >
-                  <p
-                    className="mb-0"
-                  >
-                    Translate.whoCardText1
-                  </p>
-                </div>
+                <div />
               </div>
-              <div />
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="section bg_green"
+      >
+        <div
+          class="container needs container"
+        >
+          <h2
+            class="title2 text-center text-white"
+          >
+            Translate.needTitle
+          </h2>
           <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="row"
           >
             <div
-              className="container grey"
+              class="col-sm-12 col-lg-4"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <div
-                    className="container"
-                    style={
-                      {
-                        "height": 56,
-                        "width": 56,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-fr"
-                      title="fr"
-                    />
-                  </div>
-                </div>
-                <h3
-                  className="title"
-                >
-                  Translate.whoCardTitle2
-                </h3>
+              <a
+                class="container"
+                href="/undefined#register"
+              >
                 <div
-                  className="text mb-0"
+                  class="title"
+                />
+                <p
+                  class="subtitle"
                 >
-                  <p
-                    className="mb-0"
+                  Translate.need 
+                  <span
+                    class="need strong"
                   >
-                    Translate.whoCardText2
-                  </p>
-                </div>
-              </div>
-              <div />
+                    Translate.strong
+                  </span>
+                </p>
+              </a>
             </div>
-          </div>
-          <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-          >
             <div
-              className="container grey"
+              class="col-sm-12 col-lg-4"
             >
-              <div>
+              <a
+                class="container"
+                href="/undefined#register"
+              >
                 <div
-                  className="header"
+                  class="title"
                 >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
+                  <span
+                    class="flag fi fi-en d-block me-2"
+                    title="en"
                   />
+                  Anglais
                 </div>
-                <h3
-                  className="title"
+                <p
+                  class="subtitle"
                 >
-                  Translate.whoCardTitle3
-                </h3>
-                <div
-                  className="text mb-0"
-                >
-                  <p
-                    className="mb-0"
+                  Translate.need 
+                  <span
+                    class="need medium"
                   >
-                    Translate.whoCardText3
-                  </p>
-                </div>
-              </div>
-              <div />
+                    Translate.medium
+                  </span>
+                </p>
+              </a>
             </div>
+            <div
+              class="col-sm-12 col-lg-4"
+            />
           </div>
         </div>
       </div>
     </div>
     <div
-      className="section bg_green"
+      class="section"
     >
+      <span
+        class="anchor"
+        id="steps"
+      />
       <div
-        className="container needs container"
+        class="container container"
       >
         <h2
-          className="title2 text-center text-white"
+          class="title2"
         >
-          Translate.needTitle
+          Translate.stepsTitle
         </h2>
         <div
-          className="row"
+          class="warning_mobile"
         >
-          <div
-            className="col-sm-12 col-lg-4"
+          <span
+            class="icon"
           >
-            <a
-              className="container"
-              href="/undefined#register"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
+            <i
+              style="height: 24px; line-height: 24px;"
             >
-              <div
-                className="title"
-              />
-              <p
-                className="subtitle"
+              <svg
+                class="eva eva-alert-circle-outline"
+                fill="black"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                Translate.need
-                 
-                <span
-                  className="need strong"
+                <g
+                  data-name="Layer 2"
                 >
-                  Translate.strong
-                </span>
-              </p>
-            </a>
-          </div>
+                  <g
+                    data-name="alert-circle"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                    />
+                    <circle
+                      cx="12"
+                      cy="16"
+                      r="1"
+                    />
+                    <path
+                      d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          <p>
+            Translate.stepsWarningMobile
+          </p>
+        </div>
+        <div
+          class="row orange"
+        >
           <div
-            className="col-sm-12 col-lg-4"
+            class="content"
           >
+            <div
+              class="step"
+            >
+              <span>
+                1
+              </span>
+            </div>
+            <h3
+              class="title"
+            >
+              Translate.stepsSubtitle1
+            </h3>
+            <p
+              class="text"
+            >
+              Translate.stepsText1
+            </p>
             <a
-              className="container"
+              class="link color_orange"
               href="/undefined#register"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
+              rel="noopener noreferrer"
             >
-              <div
-                className="title"
-              >
-                <span
-                  className="flag fi fi-en d-block me-2"
-                  title="en"
-                />
-                Anglais
-              </div>
-              <p
-                className="subtitle"
+              <span>
+                Translate.stepsCTA1
+              </span>
+              <span
+                class="icon icon"
               >
-                Translate.need
-                 
-                <span
-                  className="need medium"
+                <i
+                  style="height: 24px; line-height: 24px;"
                 >
-                  Translate.medium
-                </span>
-              </p>
+                  <svg
+                    class="eva eva-arrow-forward-outline"
+                    fill="orange"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="arrow-forward"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          transform="rotate(-90 12 12)"
+                          width="24"
+                        />
+                        <path
+                          d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
             </a>
           </div>
           <div
-            className="col-sm-12 col-lg-4"
-          />
+            class="media"
+          >
+            <video
+              class="video autoplay-video"
+              height="320"
+              loop=""
+            >
+              <source
+                src="/video/publier-video-step1.mp4"
+                type="video/mp4"
+              />
+            </video>
+          </div>
         </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="section"
-  >
-    <span
-      className="anchor"
-      id="steps"
-    />
-    <div
-      className="container container"
-    >
-      <h2
-        className="title2"
-      >
-        Translate.stepsTitle
-      </h2>
-      <div
-        className="warning_mobile"
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-alert-circle-outline" fill="black"><g data-name="Layer 2"><g data-name="alert-circle"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><circle cx="12" cy="16" r="1"/><path d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "24px",
-                "lineHeight": "24px",
-              }
-            }
-          />
-        </span>
-        <p>
-          Translate.stepsWarningMobile
-        </p>
-      </div>
-      <div
-        className="row orange"
-      >
         <div
-          className="content"
+          class="row orange"
         >
           <div
-            className="step"
+            class="content"
           >
-            <span>
-              1
-            </span>
+            <div
+              class="step"
+            >
+              <span>
+                2
+              </span>
+            </div>
+            <h3
+              class="title"
+            >
+              Translate.stepsSubtitle2
+            </h3>
+            <p
+              class="text"
+            >
+              Translate.stepsText2
+            </p>
           </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "Translate.stepsSubtitle1",
-              }
-            }
-          />
-          <p
-            className="text"
-          >
-            Translate.stepsText1
-          </p>
-          <a
-            className="link color_orange"
-            href="/undefined#register"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            rel="noopener noreferrer"
+          <div
+            class="media"
           >
-            <span>
-              Translate.stepsCTA1
-            </span>
-            <span
-              className="icon icon"
+            <video
+              class="video autoplay-video"
+              height="320"
+              loop=""
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="orange"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "24px",
-                    "lineHeight": "24px",
-                  }
-                }
+              <source
+                src="/video/translate-video-step2.mp4"
+                type="video/mp4"
               />
-            </span>
-          </a>
-        </div>
-        <div
-          className="media"
-        >
-          <video
-            className="video autoplay-video"
-            height={320}
-            loop={true}
-            muted={true}
-            playsInline=""
-            style={{}}
-          >
-            <source
-              src="/video/publier-video-step1.mp4"
-              type="video/mp4"
-            />
-          </video>
+            </video>
+          </div>
         </div>
-      </div>
-      <div
-        className="row orange"
-      >
         <div
-          className="content"
+          class="row orange"
         >
           <div
-            className="step"
-          >
-            <span>
-              2
-            </span>
-          </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "Translate.stepsSubtitle2",
-              }
-            }
-          />
-          <p
-            className="text"
+            class="content"
           >
-            Translate.stepsText2
-          </p>
-        </div>
-        <div
-          className="media"
-        >
-          <video
-            className="video autoplay-video"
-            height={320}
-            loop={true}
-            muted={true}
-            playsInline=""
-            style={{}}
-          >
-            <source
-              src="/video/translate-video-step2.mp4"
-              type="video/mp4"
-            />
-          </video>
-        </div>
-      </div>
-      <div
-        className="row orange"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="step"
-          >
-            <span>
-              3
-            </span>
-          </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "Translate.stepsSubtitle3",
-              }
-            }
-          />
-          <p
-            className="text"
-          >
-            Translate.stepsText3
-          </p>
-          <div
-            className="warning"
-          >
-            <ul
-              className="mb-0"
+            <div
+              class="step"
             >
-              <li
-                className="mb-2"
-              >
-                Translate.stepsList3Item1
-              </li>
-              <li
-                className="mb-2"
+              <span>
+                3
+              </span>
+            </div>
+            <h3
+              class="title"
+            >
+              Translate.stepsSubtitle3
+            </h3>
+            <p
+              class="text"
+            >
+              Translate.stepsText3
+            </p>
+            <div
+              class="warning"
+            >
+              <ul
+                class="mb-0"
               >
-                Translate.stepsList3Item2
-              </li>
-              <li>
-                Translate.stepsList3Item3
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div
-          className="media"
-        >
-          <video
-            className="video autoplay-video"
-            height={320}
-            loop={true}
-            muted={true}
-            playsInline=""
-            style={{}}
-          >
-            <source
-              src="/video/translate-video-step3.mp4"
-              type="video/mp4"
-            />
-          </video>
-        </div>
-      </div>
-      <div
-        className="row orange has_btn_step"
-      >
-        <div
-          className="content"
-        >
-          <div
-            className="step"
-          >
-            <span>
-              4
-            </span>
+                <li
+                  class="mb-2"
+                >
+                  Translate.stepsList3Item1
+                </li>
+                <li
+                  class="mb-2"
+                >
+                  Translate.stepsList3Item2
+                </li>
+                <li>
+                  Translate.stepsList3Item3
+                </li>
+              </ul>
+            </div>
           </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "Translate.stepsSubtitle4",
-              }
-            }
-          />
-          <p
-            className="text"
-          >
-            Translate.stepsText4a
-          </p>
-          <p
-            className="text"
-          >
-            Translate.stepsText4b
-          </p>
           <div
-            className="btn_step last"
+            class="media"
           >
-            Translate.stepsButton
+            <video
+              class="video autoplay-video"
+              height="320"
+              loop=""
+            >
+              <source
+                src="/video/translate-video-step3.mp4"
+                type="video/mp4"
+              />
+            </video>
           </div>
         </div>
         <div
-          className="media"
-        >
-          <img
-            alt=""
-            data-nimg="1"
-            decoding="async"
-            height={415}
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
-            srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
-            style={
-              {
-                "color": "transparent",
-                "objectFit": "contain",
-              }
-            }
-            width={550}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="scrollspy_section"
-  >
-    <div
-      className="section bg_purple"
-    >
-      <span
-        className="anchor"
-        id="next"
-      />
-      <div
-        className="container container"
-      >
-        <div
-          className="row"
+          class="row orange has_btn_step"
         >
           <div
-            className="col-sm-12 col-lg-6"
+            class="content"
           >
-            <h2
-              className="title2 bottom_space mb-0 text-white"
+            <div
+              class="step"
             >
-              Translate.nextTitle
-            </h2>
+              <span>
+                4
+              </span>
+            </div>
+            <h3
+              class="title"
+            >
+              Translate.stepsSubtitle4
+            </h3>
             <p
-              className="p bottom_space"
+              class="text"
             >
-              Translate.nextText1
+              Translate.stepsText4a
             </p>
             <p
-              className="p"
+              class="text"
             >
-              Translate.nextText2
+              Translate.stepsText4b
             </p>
+            <div
+              class="btn_step last"
+            >
+              Translate.stepsButton
+            </div>
           </div>
           <div
-            className="text-end col-sm-12 col-lg-6"
+            class="media"
           >
-            <video
-              className="video autoplay-video"
-              height={320}
-              loop={true}
-              muted={true}
-              playsInline=""
-              style={{}}
-            >
-              <source
-                src="/video/translate-video-next.mp4"
-                type="video/mp4"
-              />
-            </video>
+            <img
+              alt=""
+              data-nimg="1"
+              decoding="async"
+              height="415"
+              loading="lazy"
+              src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
+              srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
+              style="color: transparent; object-fit: contain;"
+              width="550"
+            />
           </div>
         </div>
       </div>
     </div>
     <div
-      className="section bg_grey"
+      class="scrollspy_section"
     >
       <div
-        className="container container"
+        class="section bg_purple"
       >
-        <h2
-          className="title2 center mb-0"
-        >
-          StaticPages.helpTitle
-        </h2>
+        <span
+          class="anchor"
+          id="next"
+        />
         <div
-          className="top_space justify-content-center row"
+          class="container container"
         >
           <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="row"
           >
             <div
-              className="container"
+              class="col-sm-12 col-lg-6"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  Translate.helpTileTitle1
-                </h3>
-                <div
-                  className="text"
-                >
-                  <p>
-                    Translate.helpTileText1
-                  </p>
-                </div>
-              </div>
-              <div>
-                <a
-                  className="link color_red"
-                  href="https://help.refugies.info/fr/category/traduire-1dvep4w/"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onTouchStart={[Function]}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <span>
-                    Translate.helpTileCTA1
-                  </span>
-                  <span
-                    className="icon icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </a>
-              </div>
+              <h2
+                class="title2 bottom_space mb-0 text-white"
+              >
+                Translate.nextTitle
+              </h2>
+              <p
+                class="p bottom_space"
+              >
+                Translate.nextText1
+              </p>
+              <p
+                class="p"
+              >
+                Translate.nextText2
+              </p>
+            </div>
+            <div
+              class="text-end col-sm-12 col-lg-6"
+            >
+              <video
+                class="video autoplay-video"
+                height="320"
+                loop=""
+              >
+                <source
+                  src="/video/translate-video-next.mp4"
+                  type="video/mp4"
+                />
+              </video>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        class="section bg_grey"
+      >
+        <div
+          class="container container"
+        >
+          <h2
+            class="title2 center mb-0"
+          >
+            StaticPages.helpTitle
+          </h2>
           <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="top_space justify-content-center row"
           >
             <div
-              className="container"
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
+              <div
+                class="container"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    Translate.helpTileTitle1
+                  </h3>
+                  <div
+                    class="text"
+                  >
+                    <p>
+                      Translate.helpTileText1
+                    </p>
+                  </div>
                 </div>
-                <h3
-                  className="title"
-                >
-                  StaticPages.helpTileTitle3
-                </h3>
-                <div
-                  className="text"
-                >
-                  <p>
-                    StaticPages.helpTileText3
-                  </p>
+                <div>
+                  <a
+                    class="link color_red"
+                    href="https://help.refugies.info/fr/category/traduire-1dvep4w/"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <span>
+                      Translate.helpTileCTA1
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </a>
                 </div>
               </div>
-              <div>
-                <button
-                  className="link color_red"
-                  onClick={[Function]}
-                >
-                  <span>
-                    StaticPages.helpTileCTA3
-                  </span>
-                  <span
-                    className="icon icon"
+            </div>
+            <div
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            >
+              <div
+                class="container"
+              >
+                <div>
+                  <div
+                    class="header"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
                     />
-                  </span>
-                </button>
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    StaticPages.helpTileTitle3
+                  </h3>
+                  <div
+                    class="text"
+                  >
+                    <p>
+                      StaticPages.helpTileText3
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <button
+                    class="link color_red"
+                  >
+                    <span>
+                      StaticPages.helpTileCTA3
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section"
-  >
-    <span
-      className="anchor"
-      id="faq"
-    />
     <div
-      className="container faq container"
+      class="section"
     >
-      <h2
-        className="title2 text-center"
-      >
-        StaticPages.faqTitle
-      </h2>
+      <span
+        class="anchor"
+        id="faq"
+      />
       <div
-        className="row"
+        class="container faq container"
       >
+        <h2
+          class="title2 text-center"
+        >
+          StaticPages.faqTitle
+        </h2>
         <div
-          className="infos col"
+          class="row"
         >
           <div
-            className="container"
+            class="infos col"
           >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              Translate.faqAccordionTitle1
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
             <div
-              className="collapse"
-              style={{}}
-            >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Translate.faqAccordionText1",
-                  }
-                }
-              />
-            </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+              class="container"
             >
-              Translate.faqAccordionTitle2
-              <span
-                className="icon icon"
+              <button
+                class="btn btn btn-secondary"
+                type="button"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <div
-              className="collapse"
-              style={{}}
-            >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Translate.faqAccordionText2",
-                  }
-                }
-              />
-            </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              Translate.faqAccordionTitle3
-              <span
-                className="icon icon"
+                Translate.faqAccordionTitle1
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <div
-              className="collapse"
-              style={{}}
-            >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Translate.faqAccordionText3",
-                  }
-                }
-              />
+                <p
+                  class="text"
+                >
+                  Translate.faqAccordionText1
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="container"
             >
-              Translate.faqAccordionTitle4
-              <span
-                className="icon icon"
+              <button
+                class="btn btn btn-secondary"
+                type="button"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
+                Translate.faqAccordionTitle2
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Translate.faqAccordionText2
+                </p>
+              </div>
+            </div>
             <div
-              className="collapse"
-              style={{}}
+              class="container"
             >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Translate.faqAccordionText4",
-                  }
-                }
-              />
+              <button
+                class="btn btn btn-secondary"
+                type="button"
+              >
+                Translate.faqAccordionTitle3
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Translate.faqAccordionText3
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="container"
             >
-              Translate.faqAccordionTitle5
-              <span
-                className="icon icon"
+              <button
+                class="btn btn btn-secondary"
+                type="button"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
+                Translate.faqAccordionTitle4
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Translate.faqAccordionText4
+                </p>
+              </div>
+            </div>
             <div
-              className="collapse"
-              style={{}}
+              class="container"
             >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Translate.faqAccordionText5",
-                  }
-                }
-              />
+              <button
+                class="btn btn btn-secondary"
+                type="button"
+              >
+                Translate.faqAccordionTitle5
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
               <div
-                className="cta"
+                class="collapse"
               >
-                <a
-                  className="link color_blue"
-                  href="https://airtable.com/shrQxPHedgZ5PuXot"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onTouchStart={[Function]}
-                  rel="noopener noreferrer"
-                  target="_blank"
+                <p
+                  class="text"
                 >
-                  <span>
-                    Translate.faqAccordionCTA5
-                  </span>
-                  <span
-                    className="icon icon"
+                  Translate.faqAccordionText5
+                </p>
+                <div
+                  class="cta"
+                >
+                  <a
+                    class="link color_blue"
+                    href="https://airtable.com/shrQxPHedgZ5PuXot"
+                    rel="noopener noreferrer"
+                    target="_blank"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="blue"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </a>
+                    <span>
+                      Translate.faqAccordionCTA5
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="blue"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_grey"
-  >
-    <span
-      className="anchor"
-      id="register"
-    />
     <div
-      className="register container"
+      class="section bg_grey"
     >
-      <h2
-        className="title2 mb-0"
-      >
-        StaticPages.registerTitle
-      </h2>
-      <p
-        className="subtitle mb-14"
-      >
-        Translate.registerSubtitle
-      </p>
-      <button
-        className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right submit_btn"
-        id="fr-button-:r0:"
-        onClick={[Function]}
-        style={{}}
+      <span
+        class="anchor"
+        id="register"
+      />
+      <div
+        class="register container"
       >
-        login_or_signup
-      </button>
+        <h2
+          class="title2 mb-0"
+        >
+          StaticPages.registerTitle
+        </h2>
+        <p
+          class="subtitle mb-14"
+        >
+          Translate.registerSubtitle
+        </p>
+        <button
+          class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right submit_btn"
+          id="fr-button-:r0:"
+        >
+          login_or_signup
+        </button>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/auth/__snapshots__/auth.test.tsx.snap b/client/src/__tests__/auth/__snapshots__/auth.test.tsx.snap
index 14fb625451..46eea17e94 100644
--- a/client/src/__tests__/auth/__snapshots__/auth.test.tsx.snap
+++ b/client/src/__tests__/auth/__snapshots__/auth.test.tsx.snap
@@ -1,137 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth renders auth 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r0:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Bienvenue !
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      Votre compte Réfugiés.info vous permet d’avoir une expérience personnalisée.
-    </p>
-  </div>
-  <form
-    onSubmit={[Function]}
-  >
+      Retour
+    </button>
     <div
-      className="fr-input-group"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="input-:r1:"
+      <h1>
+        Bienvenue !
+      </h1>
+      <p
+        class="subtitle"
       >
-        Adresse mail
-      </label>
-      <input
-        aria-describedby="input-:r1:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        id="input-:r1:"
-        onChange={[Function]}
-        type="email"
-        value=""
-      />
+        Votre compte Réfugiés.info vous permet d’avoir une expérience personnalisée.
+      </p>
+    </div>
+    <form>
+      <div
+        class="fr-input-group"
+      >
+        <label
+          class="fr-label"
+          for="input-:r1:"
+        >
+          Adresse mail
+        </label>
+        <input
+          aria-describedby="input-:r1:-desc-error"
+          class="fr-input"
+          id="input-:r1:"
+          type="email"
+          value=""
+        />
+      </div>
+      <button
+        class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button"
+        id="fr-button-:r2:"
+        type="submit"
+      >
+        Continuer
+      </button>
+    </form>
+    <div
+      class="separator mx"
+    >
+      <span>
+        ou connectez-vous avec
+      </span>
     </div>
     <button
-      className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button"
-      disabled={false}
-      id="fr-button-:r2:"
-      style={{}}
-      type="submit"
+      class="fr-btn fr-btn--tertiary button mb-4"
+      id="fr-button-:r3:"
     >
-      Continuer
+      <img
+        alt=""
+        class="me-2"
+        data-nimg="1"
+        decoding="async"
+        height="24"
+        loading="lazy"
+        src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+        srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+        style="color: transparent;"
+        width="24"
+      />
+      Google
+    </button>
+    <button
+      class="fr-btn fr-btn--tertiary button mb-4"
+      id="fr-button-:r4:"
+    >
+      <img
+        alt=""
+        class="me-2"
+        data-nimg="1"
+        decoding="async"
+        height="24"
+        loading="lazy"
+        src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+        srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+        style="color: transparent;"
+        width="24"
+      />
+      <img
+        alt=""
+        class="me-2"
+        data-nimg="1"
+        decoding="async"
+        height="24"
+        loading="lazy"
+        src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+        srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+        style="color: transparent;"
+        width="24"
+      />
+      Microsoft ou Outlook
     </button>
-  </form>
-  <div
-    className="separator mx"
-  >
-    <span>
-      ou connectez-vous avec
-    </span>
   </div>
-  <button
-    className="fr-btn fr-btn--tertiary button mb-4"
-    id="fr-button-:r3:"
-    onClick={[Function]}
-    style={{}}
-  >
-    <img
-      alt=""
-      className="me-2"
-      data-nimg="1"
-      decoding="async"
-      height={24}
-      loading="lazy"
-      onError={[Function]}
-      onLoad={[Function]}
-      src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-      srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-      style={
-        {
-          "color": "transparent",
-        }
-      }
-      width={24}
-    />
-    Google
-  </button>
-  <button
-    className="fr-btn fr-btn--tertiary button mb-4"
-    id="fr-button-:r4:"
-    onClick={[Function]}
-    style={{}}
-  >
-    <img
-      alt=""
-      className="me-2"
-      data-nimg="1"
-      decoding="async"
-      height={24}
-      loading="lazy"
-      onError={[Function]}
-      onLoad={[Function]}
-      src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-      srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-      style={
-        {
-          "color": "transparent",
-        }
-      }
-      width={24}
-    />
-    <img
-      alt=""
-      className="me-2"
-      data-nimg="1"
-      decoding="async"
-      height={24}
-      loading="lazy"
-      onError={[Function]}
-      onLoad={[Function]}
-      src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-      srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-      style={
-        {
-          "color": "transparent",
-        }
-      }
-      width={24}
-    />
-    Microsoft ou Outlook
-  </button>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/auth/__snapshots__/code-connexion.test.tsx.snap b/client/src/__tests__/auth/__snapshots__/code-connexion.test.tsx.snap
index a47bc20b03..a164bd022d 100644
--- a/client/src/__tests__/auth/__snapshots__/code-connexion.test.tsx.snap
+++ b/client/src/__tests__/auth/__snapshots__/code-connexion.test.tsx.snap
@@ -1,151 +1,124 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/connexion renders code-connexion if email 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r6:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
-  >
-    <h1>
-      Entrez le code reçu
-    </h1>
-    <p
-      className="subtitle"
-    >
-      Un code temporaire à 6 chiffres vous a été envoyé à 
-      test@example.com
-      .
-       
-      <a
-        className="text-decoration-underline"
-        href="/auth"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        Ce n'est pas vous ?
-      </a>
-    </p>
-  </div>
-  <form
-    onSubmit={[Function]}
+    class="container half"
   >
-    <div
-      className="fr-input-group mb-0"
-    >
-      <label
-        className="fr-label"
-        htmlFor="input-:r7:"
-      >
-        Code de connexion temporaire
-      </label>
-      <input
-        aria-describedby="input-:r7:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        id="input-:r7:"
-        name="code"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
-    </div>
-    <button
-      className="fr-btn fr-icon-check-line fr-btn--icon-right button mt mb-4"
-      id="fr-button-:r8:"
-      style={{}}
-      type="submit"
-    >
-      Valider
-    </button>
     <button
-      className="fr-btn fr-btn--tertiary fr-icon-mail-line fr-btn--icon-right button"
-      id="fr-button-:r9:"
-      onClick={[Function]}
-      style={{}}
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      Renvoyer le code
+      Retour
     </button>
-  </form>
-  <div
-    className="mb-4 space_top row"
-  >
     <div
-      className="col"
+      class="title"
     >
-      <a
-        className="fr-btn fr-btn--tertiary button"
-        href="https://mail.google.com/mail/u/0/"
-        id="fr-button-:ra:"
-        style={{}}
+      <h1>
+        Entrez le code reçu
+      </h1>
+      <p
+        class="subtitle"
       >
-        <img
-          alt=""
-          className="me-2"
-          data-nimg="1"
-          decoding="async"
-          height={24}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={24}
-        />
-        Ouvrir Gmail
-      </a>
+        Un code temporaire à 6 chiffres vous a été envoyé à test@example.com. 
+        <a
+          class="text-decoration-underline"
+          href="/auth"
+        >
+          Ce n'est pas vous ?
+        </a>
+      </p>
     </div>
+    <form>
+      <div
+        class="fr-input-group mb-0"
+      >
+        <label
+          class="fr-label"
+          for="input-:r1:"
+        >
+          Code de connexion temporaire
+        </label>
+        <input
+          aria-describedby="input-:r1:-desc-error"
+          class="fr-input"
+          id="input-:r1:"
+          name="code"
+          type="text"
+          value=""
+        />
+      </div>
+      <button
+        class="fr-btn fr-icon-check-line fr-btn--icon-right button mt mb-4"
+        id="fr-button-:r2:"
+        type="submit"
+      >
+        Valider
+      </button>
+      <button
+        class="fr-btn fr-btn--tertiary fr-icon-mail-line fr-btn--icon-right button"
+        id="fr-button-:r3:"
+      >
+        Renvoyer le code
+      </button>
+    </form>
     <div
-      className="col"
+      class="mb-4 space_top row"
     >
-      <a
-        className="fr-btn fr-btn--tertiary button"
-        href="https://outlook.live.com/mail/0/"
-        id="fr-button-:rb:"
-        style={{}}
+      <div
+        class="col"
       >
-        <img
-          alt=""
-          className="me-2"
-          data-nimg="1"
-          decoding="async"
-          height={24}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={24}
-        />
-        Ouvrir Outlook
-      </a>
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://mail.google.com/mail/u/0/"
+          id="fr-button-:r4:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Gmail
+        </a>
+      </div>
+      <div
+        class="col"
+      >
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://outlook.live.com/mail/0/"
+          id="fr-button-:r5:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Outlook
+        </a>
+      </div>
     </div>
+    <p
+      class="small mt-6 text-center"
+    >
+      Pensez à vérifiez votre courrier indésirable !
+    </p>
   </div>
-  <p
-    className="small mt-6 text-center"
-  >
-    Pensez à vérifiez votre courrier indésirable !
-  </p>
-</div>
+</DocumentFragment>
 `;
 
-exports[`auth/connexion renders null if no email 1`] = `null`;
+exports[`auth/connexion renders null if no email 1`] = `<DocumentFragment />`;
diff --git a/client/src/__tests__/auth/__snapshots__/code-securite.test.tsx.snap b/client/src/__tests__/auth/__snapshots__/code-securite.test.tsx.snap
index 57544e0325..b42967e683 100644
--- a/client/src/__tests__/auth/__snapshots__/code-securite.test.tsx.snap
+++ b/client/src/__tests__/auth/__snapshots__/code-securite.test.tsx.snap
@@ -1,163 +1,134 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/connexion renders code-securite if email 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r6:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Vérifions votre identité !
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      Un code temporaire à 6 chiffres vous a été envoyé à 
-      test@example.com
-      .
-       
-      <a
-        className="text-decoration-underline"
-        href="/auth"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        Ce n'est pas vous ?
-      </a>
-    </p>
-  </div>
-  <form
-    onSubmit={[Function]}
-  >
+      Retour
+    </button>
     <div
-      className="fr-input-group mb-0"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="input-:r7:"
+      <h1>
+        Vérifions votre identité !
+      </h1>
+      <p
+        class="subtitle"
       >
-        Code d'authentification
-      </label>
-      <input
-        aria-describedby="input-:r7:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        id="input-:r7:"
-        name="code"
-        onChange={[Function]}
-        type="text"
-        value=""
-      />
+        Un code temporaire à 6 chiffres vous a été envoyé à test@example.com. 
+        <a
+          class="text-decoration-underline"
+          href="/auth"
+        >
+          Ce n'est pas vous ?
+        </a>
+      </p>
     </div>
-    <button
-      className="fr-btn fr-icon-check-line fr-btn--icon-right button mt mb-4"
-      id="fr-button-:r8:"
-      style={{}}
-      type="submit"
-    >
-      Valider
-    </button>
-    <button
-      className="fr-btn fr-btn--tertiary fr-icon-mail-line fr-btn--icon-right button"
-      id="fr-button-:r9:"
-      onClick={[Function]}
-      style={{}}
-    >
-      Renvoyer le code
-    </button>
-  </form>
-  <div
-    className="small mx text-center"
-  >
-    L'adresse mail n'est plus valable ?
-     
-    <button
-      className="link"
-      onClick={[Function]}
-    >
-      Contactez-nous
-    </button>
-  </div>
-  <div
-    className="mb-4 row"
-  >
+    <form>
+      <div
+        class="fr-input-group mb-0"
+      >
+        <label
+          class="fr-label"
+          for="input-:r1:"
+        >
+          Code d'authentification
+        </label>
+        <input
+          aria-describedby="input-:r1:-desc-error"
+          class="fr-input"
+          id="input-:r1:"
+          name="code"
+          type="text"
+          value=""
+        />
+      </div>
+      <button
+        class="fr-btn fr-icon-check-line fr-btn--icon-right button mt mb-4"
+        id="fr-button-:r2:"
+        type="submit"
+      >
+        Valider
+      </button>
+      <button
+        class="fr-btn fr-btn--tertiary fr-icon-mail-line fr-btn--icon-right button"
+        id="fr-button-:r3:"
+      >
+        Renvoyer le code
+      </button>
+    </form>
     <div
-      className="col"
+      class="small mx text-center"
     >
-      <a
-        className="fr-btn fr-btn--tertiary button"
-        href="https://mail.google.com/mail/u/0/"
-        id="fr-button-:ra:"
-        style={{}}
+      L'adresse mail n'est plus valable ? 
+      <button
+        class="link"
       >
-        <img
-          alt=""
-          className="me-2"
-          data-nimg="1"
-          decoding="async"
-          height={24}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={24}
-        />
-        Ouvrir Gmail
-      </a>
+        Contactez-nous
+      </button>
     </div>
     <div
-      className="col"
+      class="mb-4 row"
     >
-      <a
-        className="fr-btn fr-btn--tertiary button"
-        href="https://outlook.live.com/mail/0/"
-        id="fr-button-:rb:"
-        style={{}}
+      <div
+        class="col"
       >
-        <img
-          alt=""
-          className="me-2"
-          data-nimg="1"
-          decoding="async"
-          height={24}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={24}
-        />
-        Ouvrir Outlook
-      </a>
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://mail.google.com/mail/u/0/"
+          id="fr-button-:r4:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Gmail
+        </a>
+      </div>
+      <div
+        class="col"
+      >
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://outlook.live.com/mail/0/"
+          id="fr-button-:r5:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Outlook
+        </a>
+      </div>
     </div>
+    <p
+      class="small mt-6 text-center"
+    >
+      Pensez à vérifiez votre courrier indésirable !
+    </p>
   </div>
-  <p
-    className="small mt-6 text-center"
-  >
-    Pensez à vérifiez votre courrier indésirable !
-  </p>
-</div>
+</DocumentFragment>
 `;
 
-exports[`auth/connexion renders null if no email 1`] = `null`;
+exports[`auth/connexion renders null if no email 1`] = `<DocumentFragment />`;
diff --git a/client/src/__tests__/auth/__snapshots__/connexion.test.tsx.snap b/client/src/__tests__/auth/__snapshots__/connexion.test.tsx.snap
index 44ed41ece3..27a675353e 100644
--- a/client/src/__tests__/auth/__snapshots__/connexion.test.tsx.snap
+++ b/client/src/__tests__/auth/__snapshots__/connexion.test.tsx.snap
@@ -1,112 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/connexion renders connexion if email 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r6:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Ravis de vous revoir !
-    </h1>
     <button
-      className="fr-tag fr-tag--dismiss tag"
-      id="fr-tag-:r7:"
-      onClick={[Function]}
-      style={{}}
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      test@example.com
+      Retour
     </button>
-  </div>
-  <form
-    onSubmit={[Function]}
-  >
     <div
-      className="fr-password"
-      id="password-input-:r8:"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="password-:r9:"
+      <h1>
+        Ravis de vous revoir !
+      </h1>
+      <button
+        class="fr-tag fr-tag--dismiss tag"
+        id="fr-tag-:r1:"
       >
-        Mot de passe
-      </label>
+        test@example.com
+      </button>
+    </div>
+    <form>
       <div
-        className="fr-input-wrap"
+        class="fr-password"
+        id="password-input-:r2:"
       >
-        <input
-          autoFocus={true}
-          className="fr-password__input fr-input"
-          disabled={false}
-          id="password-:r9:"
-          name="password"
-          type="password"
-        />
+        <label
+          class="fr-label"
+          for="password-:r3:"
+        >
+          Mot de passe
+        </label>
+        <div
+          class="fr-input-wrap"
+        >
+          <input
+            class="fr-password__input fr-input"
+            id="password-:r3:"
+            name="password"
+            type="password"
+          />
+        </div>
+        <div
+          class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm"
+        >
+          <input
+            aria-label="Afficher le mot de passe"
+            id="password-:r3:-toggle-show"
+            type="checkbox"
+          />
+          <label
+            class="fr-password__checkbox fr-label"
+            for="password-:r3:-toggle-show"
+          >
+            Afficher
+          </label>
+        </div>
       </div>
       <div
-        className="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm"
+        class="mt-2 mb"
       >
-        <input
-          aria-label="Afficher le mot de passe"
-          id="password-:r9:-toggle-show"
-          type="checkbox"
-        />
-        <label
-          className="fr-password__checkbox fr-label"
-          htmlFor="password-:r9:-toggle-show"
+        <a
+          class="fr-link link"
+          href="/auth/reinitialiser-mot-de-passe?email=test@example.com"
         >
-          Afficher
-        </label>
+          Mot de passe oublié ?
+        </a>
       </div>
-    </div>
+      <button
+        class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button"
+        id="fr-button-:r4:"
+        type="submit"
+      >
+        Me connecter
+      </button>
+    </form>
     <div
-      className="mt-2 mb"
+      class="separator my-10"
     >
-      <a
-        className="fr-link link"
-        href="/auth/reinitialiser-mot-de-passe?email=test@example.com"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        Mot de passe oublié ?
-      </a>
+      <span>
+        ou
+      </span>
     </div>
-    <button
-      className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button"
-      disabled={false}
-      id="fr-button-:ra:"
-      style={{}}
-      type="submit"
+    <a
+      class="fr-btn fr-btn--tertiary button"
+      href="/auth/code-connexion?email=test@example.com"
+      id="fr-button-:r5:"
     >
-      Me connecter
-    </button>
-  </form>
-  <div
-    className="separator my-10"
-  >
-    <span>
-      ou
-    </span>
+      Me connecter avec un code reçu par mail
+    </a>
   </div>
-  <a
-    className="fr-btn fr-btn--tertiary button"
-    href="/auth/code-connexion?email=test@example.com"
-    id="fr-button-:rb:"
-    style={{}}
-  >
-    Me connecter avec un code reçu par mail
-  </a>
-</div>
+</DocumentFragment>
 `;
 
-exports[`auth/connexion renders null if no email 1`] = `null`;
+exports[`auth/connexion renders null if no email 1`] = `<DocumentFragment />`;
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/mail-envoye.test.tsx.snap b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/mail-envoye.test.tsx.snap
index 8ccf0cbf1e..2f29e000c7 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/mail-envoye.test.tsx.snap
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/mail-envoye.test.tsx.snap
@@ -1,49 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/reinitialiser-mot-de-passe/mail-envoye renders page 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r0:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Un lien a été envoyé
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
+    >
+      Retour
+    </button>
+    <div
+      class="title"
+    >
+      <h1>
+        Un lien a été envoyé
+      </h1>
+      <p
+        class="subtitle"
+      >
+        Nous venons de vous envoyer un mail pour réinitialiser votre mot de passe à l’adresse suivante : test@example.com.
+        <br />
+        <br />
+        Si vous ne recevez pas de mail d’ici quelques minutes, pensez à vérifier vos courriers indésirables ou vos spams.
+      </p>
+    </div>
+    <button
+      class="fr-btn fr-icon-mail-line fr-btn--icon-right button mb-4"
+      id="fr-button-:r1:"
     >
-      Nous venons de vous envoyer un mail pour réinitialiser votre mot de passe à l’adresse suivante : 
-      test@example.com
-      .
-      <br />
-      <br />
-      Si vous ne recevez pas de mail d’ici quelques minutes, pensez à vérifier vos courriers indésirables ou vos spams.
-    </p>
+      Renvoyer le lien de réinitialisation
+    </button>
+    <button
+      class="fr-btn fr-btn--tertiary button"
+      id="fr-button-:r2:"
+    >
+      Contacter le chat
+    </button>
   </div>
-  <button
-    className="fr-btn fr-icon-mail-line fr-btn--icon-right button mb-4"
-    id="fr-button-:r1:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Renvoyer le lien de réinitialisation
-  </button>
-  <button
-    className="fr-btn fr-btn--tertiary button"
-    id="fr-button-:r2:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Contacter le chat
-  </button>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/nouveau.test.tsx.snap b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/nouveau.test.tsx.snap
index 3cb289a624..b4819fc973 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/nouveau.test.tsx.snap
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/nouveau.test.tsx.snap
@@ -1,124 +1,117 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/reinitialiser-mot-de-passe/nouveau renders page 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r0:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Nouveau mot de passe
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      Veuillez choisir votre nouveau mot de passe
-    </p>
-  </div>
-  <form
-    onSubmit={[Function]}
-  >
+      Retour
+    </button>
     <div
-      className="fr-password mb-0"
-      id="password-input-:r1:"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="password-:r2:"
-      >
-        Mot de passe
-      </label>
-      <div
-        className="fr-input-wrap"
+      <h1>
+        Nouveau mot de passe
+      </h1>
+      <p
+        class="subtitle"
       >
-        <input
-          aria-describedby="password-:r2:-messages-group"
-          autoFocus={true}
-          className="fr-password__input fr-input"
-          disabled={false}
-          id="password-:r2:"
-          name="password"
-          onChange={[Function]}
-          type="password"
-          value=""
-        />
-      </div>
+        Veuillez choisir votre nouveau mot de passe
+      </p>
+    </div>
+    <form>
       <div
-        aria-live="assertive"
-        className="fr-messages-group"
-        id="password-:r2:-messages-group"
+        class="fr-password mb-0"
+        id="password-input-:r1:"
       >
-        <p
-          className="fr-message fr-message--info"
-          id="password-:r2:-message-group-0"
+        <label
+          class="fr-label"
+          for="password-:r2:"
+        >
+          Mot de passe
+        </label>
+        <div
+          class="fr-input-wrap"
         >
-          Register.criteria_special
-        </p>
-        <p
-          className="fr-message fr-message--info"
-          id="password-:r2:-message-group-1"
+          <input
+            aria-describedby="password-:r2:-messages-group"
+            class="fr-password__input fr-input"
+            id="password-:r2:"
+            name="password"
+            type="password"
+            value=""
+          />
+        </div>
+        <div
+          aria-live="assertive"
+          class="fr-messages-group"
+          id="password-:r2:-messages-group"
         >
-          Register.criteria_number
-        </p>
-        <p
-          className="fr-message fr-message--info"
-          id="password-:r2:-message-group-2"
+          <p
+            class="fr-message fr-message--info"
+            id="password-:r2:-message-group-0"
+          >
+            Register.criteria_special
+          </p>
+          <p
+            class="fr-message fr-message--info"
+            id="password-:r2:-message-group-1"
+          >
+            Register.criteria_number
+          </p>
+          <p
+            class="fr-message fr-message--info"
+            id="password-:r2:-message-group-2"
+          >
+            Register.criteria_minlength
+          </p>
+        </div>
+        <div
+          class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm"
         >
-          Register.criteria_minlength
-        </p>
+          <input
+            aria-label="Afficher le mot de passe"
+            id="password-:r2:-toggle-show"
+            type="checkbox"
+          />
+          <label
+            class="fr-password__checkbox fr-label"
+            for="password-:r2:-toggle-show"
+          >
+            Afficher
+          </label>
+        </div>
       </div>
       <div
-        className="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm"
+        class="fr-input-group mb-0 hidden"
       >
-        <input
-          aria-label="Afficher le mot de passe"
-          id="password-:r2:-toggle-show"
-          type="checkbox"
-        />
         <label
-          className="fr-password__checkbox fr-label"
-          htmlFor="password-:r2:-toggle-show"
+          class="fr-label"
+          for="input-:r3:"
         >
-          Afficher
+          Code d'authentification
         </label>
+        <input
+          aria-describedby="input-:r3:-desc-error"
+          class="fr-input"
+          id="input-:r3:"
+          name="code"
+          type="text"
+        />
       </div>
-    </div>
-    <div
-      className="fr-input-group mb-0 hidden"
-    >
-      <label
-        className="fr-label"
-        htmlFor="input-:r3:"
+      <button
+        class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt"
+        disabled=""
+        id="fr-button-:r4:"
+        type="submit"
       >
-        Code d'authentification
-      </label>
-      <input
-        aria-describedby="input-:r3:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        id="input-:r3:"
-        name="code"
-        type="text"
-      />
-    </div>
-    <button
-      className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt"
-      disabled={true}
-      id="fr-button-:r4:"
-      style={{}}
-      type="submit"
-    >
-      Changer le mot de passe
-    </button>
-  </form>
-</div>
+        Changer le mot de passe
+      </button>
+    </form>
+  </div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/reinitialiser-mot-de-passe.test.tsx.snap b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/reinitialiser-mot-de-passe.test.tsx.snap
index 03d6f83307..75a8f4f4e8 100644
--- a/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/reinitialiser-mot-de-passe.test.tsx.snap
+++ b/client/src/__tests__/auth/reinitialiser-mot-de-passe/__snapshots__/reinitialiser-mot-de-passe.test.tsx.snap
@@ -1,126 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`auth/reinitialiser-mot-de-passe renders page if email 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r3:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Mot de passe oublié
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r3:"
     >
-      Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
-    </p>
-  </div>
-  <form
-    className="container"
-    onSubmit={[Function]}
-  >
+      Retour
+    </button>
     <div
-      className="fr-input-group mb-0"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="input-:r4:"
+      <h1>
+        Mot de passe oublié
+      </h1>
+      <p
+        class="subtitle"
       >
-        Adresse mail
-      </label>
-      <input
-        aria-describedby="input-:r4:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        defaultValue="test@example.com"
-        id="input-:r4:"
-        name="email"
-        type="email"
-      />
+        Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
+      </p>
     </div>
-    <div
-      className="text-end"
+    <form
+      class="container"
     >
-      <button
-        className="fr-btn fr-icon-mail-line fr-btn--icon-right button full mt"
-        id="fr-button-:r5:"
-        style={{}}
-        type="submit"
+      <div
+        class="fr-input-group mb-0"
       >
-        Envoyer le lien de réinitialisation
-      </button>
-    </div>
-  </form>
-</div>
+        <label
+          class="fr-label"
+          for="input-:r4:"
+        >
+          Adresse mail
+        </label>
+        <input
+          aria-describedby="input-:r4:-desc-error"
+          class="fr-input"
+          id="input-:r4:"
+          name="email"
+          type="email"
+          value="test@example.com"
+        />
+      </div>
+      <div
+        class="text-end"
+      >
+        <button
+          class="fr-btn fr-icon-mail-line fr-btn--icon-right button full mt"
+          id="fr-button-:r5:"
+          type="submit"
+        >
+          Envoyer le lien de réinitialisation
+        </button>
+      </div>
+    </form>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`auth/reinitialiser-mot-de-passe renders page if no email 1`] = `
-<div
-  className="container half"
->
-  <button
-    className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
-    id="fr-button-:r0:"
-    onClick={[Function]}
-    style={{}}
-  >
-    Retour
-  </button>
+<DocumentFragment>
   <div
-    className="title"
+    class="container half"
   >
-    <h1>
-      Mot de passe oublié
-    </h1>
-    <p
-      className="subtitle"
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
     >
-      Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
-    </p>
-  </div>
-  <form
-    className="container"
-    onSubmit={[Function]}
-  >
+      Retour
+    </button>
     <div
-      className="fr-input-group mb-0"
+      class="title"
     >
-      <label
-        className="fr-label"
-        htmlFor="input-:r1:"
+      <h1>
+        Mot de passe oublié
+      </h1>
+      <p
+        class="subtitle"
       >
-        Adresse mail
-      </label>
-      <input
-        aria-describedby="input-:r1:-desc-error"
-        autoFocus={true}
-        className="fr-input"
-        id="input-:r1:"
-        name="email"
-        type="email"
-      />
+        Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
+      </p>
     </div>
-    <div
-      className="text-end"
+    <form
+      class="container"
     >
-      <button
-        className="fr-btn fr-icon-mail-line fr-btn--icon-right button full mt"
-        id="fr-button-:r2:"
-        style={{}}
-        type="submit"
+      <div
+        class="fr-input-group mb-0"
       >
-        Envoyer le lien de réinitialisation
-      </button>
-    </div>
-  </form>
-</div>
+        <label
+          class="fr-label"
+          for="input-:r1:"
+        >
+          Adresse mail
+        </label>
+        <input
+          aria-describedby="input-:r1:-desc-error"
+          class="fr-input"
+          id="input-:r1:"
+          name="email"
+          type="email"
+          value=""
+        />
+      </div>
+      <div
+        class="text-end"
+      >
+        <button
+          class="fr-btn fr-icon-mail-line fr-btn--icon-right button full mt"
+          id="fr-button-:r2:"
+          type="submit"
+        >
+          Envoyer le lien de réinitialisation
+        </button>
+      </div>
+    </form>
+  </div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
index e533e467ad..f90827b951 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render DeleteButton disabled 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   width: 40px;
   height: 40px;
   background-color: #828282;
@@ -19,41 +20,55 @@ exports[`should render DeleteButton disabled 1`] = `
 }
 
 <div
-  className="c0"
-  data-test-id="delete-button"
-  disabled={true}
-  hoverColor="#f44336"
->
-  <div
-    style={
-      {
-        "marginBottom": "4px",
-      }
-    }
+    class="c0"
+    data-testid="delete-button"
+    disabled=""
+    hovercolor="#f44336"
   >
-    <span
-      className="icon"
+    <div
+      style="margin-bottom: 4px;"
     >
-      <i
-        dangerouslySetInnerHTML={
-          {
-            "__html": "",
-          }
-        }
-        style={
-          {
-            "height": "20px",
-            "lineHeight": "20px",
-          }
-        }
-      />
-    </span>
+      <span
+        class="icon"
+      >
+        <i
+          style="height: 20px; line-height: 20px;"
+        >
+          <svg
+            class="eva eva-trash"
+            fill="#ffffff"
+            height="20px"
+            viewBox="0 0 24 24"
+            width="20px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              data-name="Layer 2"
+            >
+              <g
+                data-name="trash"
+              >
+                <rect
+                  height="24"
+                  opacity="0"
+                  width="24"
+                />
+                <path
+                  d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                />
+              </g>
+            </g>
+          </svg>
+        </i>
+      </span>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render DeleteButton not disabled 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   width: 40px;
   height: 40px;
   background-color: #828282;
@@ -71,42 +86,54 @@ exports[`should render DeleteButton not disabled 1`] = `
 }
 
 <div
-  className="c0"
-  data-test-id="delete-button"
-  disabled={false}
-  hoverColor="#f44336"
-  onClick={[Function]}
->
-  <div
-    style={
-      {
-        "marginBottom": "4px",
-      }
-    }
+    class="c0"
+    data-testid="delete-button"
+    hovercolor="#f44336"
   >
-    <span
-      className="icon"
+    <div
+      style="margin-bottom: 4px;"
     >
-      <i
-        dangerouslySetInnerHTML={
-          {
-            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-          }
-        }
-        style={
-          {
-            "height": "20px",
-            "lineHeight": "20px",
-          }
-        }
-      />
-    </span>
+      <span
+        class="icon"
+      >
+        <i
+          style="height: 20px; line-height: 20px;"
+        >
+          <svg
+            class="eva eva-trash"
+            fill="#ffffff"
+            height="20px"
+            viewBox="0 0 24 24"
+            width="20px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              data-name="Layer 2"
+            >
+              <g
+                data-name="trash"
+              >
+                <rect
+                  height="24"
+                  opacity="0"
+                  width="24"
+                />
+                <path
+                  d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                />
+              </g>
+            </g>
+          </svg>
+        </i>
+      </span>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render FilterButton isSelected false 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   background: #ffffff;
   color: #212121;
   border-radius: 12px;
@@ -121,16 +148,16 @@ exports[`should render FilterButton isSelected false 1`] = `
 }
 
 <div
-  className="c0"
-  isSelected={false}
-  onClick={[Function]}
->
-  test
-</div>
+    class="c0"
+  >
+    test
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render FilterButton isSelected true 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   background: #212121;
   color: #ffffff;
   border-radius: 12px;
@@ -145,16 +172,16 @@ exports[`should render FilterButton isSelected true 1`] = `
 }
 
 <div
-  className="c0"
-  isSelected={true}
-  onClick={[Function]}
->
-  test
-</div>
+    class="c0"
+  >
+    test
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render SeeButton 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   width: 40px;
   height: 40px;
   background-color: #828282;
@@ -172,45 +199,64 @@ exports[`should render SeeButton 1`] = `
 }
 
 <div
-  className="c0"
-  hoverColor="#212121"
->
-  <a
-    href="test-burl"
-    rel="noopener noreferrer"
-    target="_blank"
+    class="c0"
+    hovercolor="#212121"
   >
-    <div
-      style={
-        {
-          "marginBottom": "4px",
-        }
-      }
+    <a
+      href="test-burl"
+      rel="noopener noreferrer"
+      target="_blank"
     >
-      <span
-        className="icon"
+      <div
+        style="margin-bottom: 4px;"
       >
-        <i
-          dangerouslySetInnerHTML={
-            {
-              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-            }
-          }
-          style={
-            {
-              "height": "20px",
-              "lineHeight": "20px",
-            }
-          }
-        />
-      </span>
-    </div>
-  </a>
-</div>
+        <span
+          class="icon"
+        >
+          <i
+            style="height: 20px; line-height: 20px;"
+          >
+            <svg
+              class="eva eva-eye"
+              fill="#ffffff"
+              height="20px"
+              viewBox="0 0 24 24"
+              width="20px"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g
+                data-name="Layer 2"
+              >
+                <g
+                  data-name="eye"
+                >
+                  <rect
+                    height="24"
+                    opacity="0"
+                    width="24"
+                  />
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="1.5"
+                  />
+                  <path
+                    d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                  />
+                </g>
+              </g>
+            </svg>
+          </i>
+        </span>
+      </div>
+    </a>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render Structure with null sponsor 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -231,22 +277,24 @@ exports[`should render Structure with null sponsor 1`] = `
 }
 
 <div
-  className="c0"
->
-  <div
-    className="c1"
-    color="#f44336"
-  />
-  <div
-    className="c2"
+    class="c0"
   >
-    Sans structure
+    <div
+      class="c1"
+      color="#f44336"
+    />
+    <div
+      class="c2"
+    >
+      Sans structure
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render Structure with sponsor actif 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -267,22 +315,24 @@ exports[`should render Structure with sponsor actif 1`] = `
 }
 
 <div
-  className="c0"
->
-  <div
-    className="c1"
-    color="#4caf50"
-  />
-  <div
-    className="c2"
+    class="c0"
   >
-    test
+    <div
+      class="c1"
+      color="#4caf50"
+    />
+    <div
+      class="c2"
+    >
+      test
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render Structure with sponsor en attente 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -303,22 +353,24 @@ exports[`should render Structure with sponsor en attente 1`] = `
 }
 
 <div
-  className="c0"
->
-  <div
-    className="c1"
-    color="#FF9800"
-  />
-  <div
-    className="c2"
+    class="c0"
   >
-    test
+    <div
+      class="c1"
+      color="#FF9800"
+    />
+    <div
+      class="c2"
+    >
+      test
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render Structure with sponsor supprime 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -339,22 +391,24 @@ exports[`should render Structure with sponsor supprime 1`] = `
 }
 
 <div
-  className="c0"
->
-  <div
-    className="c1"
-    color="#f44336"
-  />
-  <div
-    className="c2"
+    class="c0"
   >
-    test
+    <div
+      class="c1"
+      color="#f44336"
+    />
+    <div
+      class="c2"
+    >
+      test
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render Structure with sponsor without nom 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -375,22 +429,24 @@ exports[`should render Structure with sponsor without nom 1`] = `
 }
 
 <div
-  className="c0"
->
-  <div
-    className="c1"
-    color="#f44336"
-  />
-  <div
-    className="c2"
+    class="c0"
   >
-    Sans structure
+    <div
+      class="c1"
+      color="#f44336"
+    />
+    <div
+      class="c2"
+    >
+      Sans structure
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus Accepté structure  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -405,17 +461,18 @@ exports[`should render StyledStatus Accepté structure  1`] = `
 }
 
 <div
-  className="c0"
-  color="#FF9800"
-  disabled={false}
-  textColor="#ffffff"
->
-  Accepté
-</div>
+    class="c0"
+    color="#FF9800"
+    textcolor="#ffffff"
+  >
+    Accepté
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus Brouillon  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -430,17 +487,18 @@ exports[`should render StyledStatus Brouillon  1`] = `
 }
 
 <div
-  className="c0"
-  color="#FFEB3B"
-  disabled={false}
-  textColor="#212121"
->
-  Brouillon
-</div>
+    class="c0"
+    color="#FFEB3B"
+    textcolor="#212121"
+  >
+    Brouillon
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus En attente admin  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -455,17 +513,18 @@ exports[`should render StyledStatus En attente admin  1`] = `
 }
 
 <div
-  className="c0"
-  color="#8BC34A"
-  disabled={false}
-  textColor="#ffffff"
->
-  Relecture en cours
-</div>
+    class="c0"
+    color="#8BC34A"
+    textcolor="#ffffff"
+  >
+    Relecture en cours
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus Rejeté structure  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -480,17 +539,18 @@ exports[`should render StyledStatus Rejeté structure  1`] = `
 }
 
 <div
-  className="c0"
-  color="#F44336"
-  disabled={false}
-  textColor="#ffffff"
->
-  Rejeté
-</div>
+    class="c0"
+    color="#F44336"
+    textcolor="#ffffff"
+  >
+    Rejeté
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus Supprimé  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -505,17 +565,18 @@ exports[`should render StyledStatus Supprimé  1`] = `
 }
 
 <div
-  className="c0"
-  color="#F44336"
-  disabled={false}
-  textColor="#ffffff"
->
-  Supprimé
-</div>
+    class="c0"
+    color="#F44336"
+    textcolor="#ffffff"
+  >
+    Supprimé
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus actif  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -530,16 +591,17 @@ exports[`should render StyledStatus actif  1`] = `
 }
 
 <div
-  className="c0"
-  color="#4CAF50"
-  disabled={false}
->
-  Publié
-</div>
+    class="c0"
+    color="#4CAF50"
+  >
+    Publié
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus en attente  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -554,17 +616,18 @@ exports[`should render StyledStatus en attente  1`] = `
 }
 
 <div
-  className="c0"
-  color="#FF9800"
-  disabled={false}
-  textColor="#ffffff"
->
-  En attente
-</div>
+    class="c0"
+    color="#FF9800"
+    textcolor="#ffffff"
+  >
+    En attente
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus no corresponding status  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -579,17 +642,18 @@ exports[`should render StyledStatus no corresponding status  1`] = `
 }
 
 <div
-  className="c0"
-  color="#0421b1"
-  disabled={false}
-  textColor="#ffffff"
->
-  Nouveau !
-</div>
+    class="c0"
+    color="#0421b1"
+    textcolor="#ffffff"
+  >
+    Nouveau !
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus no corresponding with color  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -604,17 +668,18 @@ exports[`should render StyledStatus no corresponding with color  1`] = `
 }
 
 <div
-  className="c0"
-  color="color"
-  disabled={false}
-  textColor="textColor"
->
-  test
-</div>
+    class="c0"
+    color="color"
+    textcolor="textColor"
+  >
+    test
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render StyledStatus no corresponding with override  1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: bold;
   border-radius: 6px;
   padding: 8px;
@@ -629,17 +694,18 @@ exports[`should render StyledStatus no corresponding with override  1`] = `
 }
 
 <div
-  className="c0"
-  color="#828282"
-  disabled={false}
-  textColor="#ffffff"
->
-  test
-</div>
+    class="c0"
+    color="#828282"
+    textcolor="#ffffff"
+  >
+    test
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TabHeader down 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   font-weight: bold;
@@ -647,32 +713,50 @@ exports[`should render TabHeader down 1`] = `
 }
 
 <div
-  className="c0"
-  order={1}
->
-  test
-  <span
-    className="icon"
+    class="c0"
+    order="1"
   >
-    <i
-      dangerouslySetInnerHTML={
-        {
-          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-down" fill="#212121"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"/><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"/></g></g></svg>",
-        }
-      }
-      style={
-        {
-          "height": "20px",
-          "lineHeight": "20px",
-        }
-      }
-    />
-  </span>
-</div>
+    test
+    <span
+      class="icon"
+    >
+      <i
+        style="height: 20px; line-height: 20px;"
+      >
+        <svg
+          class="eva eva-chevron-down"
+          fill="#212121"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            data-name="Layer 2"
+          >
+            <g
+              data-name="chevron-down"
+            >
+              <rect
+                height="24"
+                opacity="0"
+                width="24"
+              />
+              <path
+                d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"
+              />
+            </g>
+          </g>
+        </svg>
+      </i>
+    </span>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TabHeader no order 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   font-weight: bold;
@@ -680,15 +764,17 @@ exports[`should render TabHeader no order 1`] = `
 }
 
 <div
-  className="c0"
-  order={0}
->
-  test
-</div>
+    class="c0"
+    order="0"
+  >
+    test
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TabHeader up 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   font-weight: bold;
@@ -696,32 +782,51 @@ exports[`should render TabHeader up 1`] = `
 }
 
 <div
-  className="c0"
-  order={1}
->
-  test
-  <span
-    className="icon"
+    class="c0"
+    order="1"
   >
-    <i
-      dangerouslySetInnerHTML={
-        {
-          "__html": "",
-        }
-      }
-      style={
-        {
-          "height": "20px",
-          "lineHeight": "20px",
-        }
-      }
-    />
-  </span>
-</div>
+    test
+    <span
+      class="icon"
+    >
+      <i
+        style="height: 20px; line-height: 20px;"
+      >
+        <svg
+          class="eva eva-chevron-up"
+          fill="#212121"
+          height="20px"
+          viewBox="0 0 24 24"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            data-name="Layer 2"
+          >
+            <g
+              data-name="chevron-up"
+            >
+              <rect
+                height="24"
+                opacity="0"
+                transform="rotate(180 12 12)"
+                width="24"
+              />
+              <path
+                d="M16 14.5a1 1 0 0 1-.71-.29L12 10.9l-3.3 3.18a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.42l4-3.86a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1 0 1.42 1 1 0 0 1-.69.28z"
+              />
+            </g>
+          </g>
+        </svg>
+      </i>
+    </span>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render Title with titre marque 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -735,19 +840,21 @@ exports[`should render Title with titre marque 1`] = `
 }
 
 <div
-  className="c0"
->
-  <b>
-    titre informatif
-  </b>
-  <span>
-    avec titre marque
-  </span>
-</div>
+    class="c0"
+  >
+    <b>
+      titre informatif
+    </b>
+    <span>
+      avec titre marque
+    </span>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render Title without titre marque 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -761,16 +868,18 @@ exports[`should render Title without titre marque 1`] = `
 }
 
 <div
-  className="c0"
->
-  <b>
-    titre informatif
-  </b>
-</div>
+    class="c0"
+  >
+    <b>
+      titre informatif
+    </b>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TypeContenu with demarche, detailed vue 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -783,15 +892,16 @@ exports[`should render TypeContenu with demarche, detailed vue 1`] = `
 }
 
 <div
-  className="c0"
-  isDarkBackground={true}
->
-  Démarche
-</div>
+    class="c0"
+  >
+    Démarche
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TypeContenu with demarche, not detailed vue 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -804,15 +914,16 @@ exports[`should render TypeContenu with demarche, not detailed vue 1`] = `
 }
 
 <div
-  className="c0"
-  isDarkBackground={false}
->
-  Démarche
-</div>
+    class="c0"
+  >
+    Démarche
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TypeContenu with dispositif, detailed vue 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -825,15 +936,16 @@ exports[`should render TypeContenu with dispositif, detailed vue 1`] = `
 }
 
 <div
-  className="c0"
-  isDarkBackground={true}
->
-  Dispositif
-</div>
+    class="c0"
+  >
+    Dispositif
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render TypeContenu with dispositif, not detailed vue 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
@@ -846,15 +958,16 @@ exports[`should render TypeContenu with dispositif, not detailed vue 1`] = `
 }
 
 <div
-  className="c0"
-  isDarkBackground={true}
->
-  Dispositif
-</div>
+    class="c0"
+  >
+    Dispositif
+  </div>
+</DocumentFragment>
 `;
 
 exports[`should render ValidateButton disabled 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   width: 40px;
   height: 40px;
   background-color: #828282;
@@ -872,42 +985,55 @@ exports[`should render ValidateButton disabled 1`] = `
 }
 
 <div
-  className="c0"
-  data-test-id="validate-button"
-  disabled={true}
-  hoverColor="#4caf50"
-  onClick={[Function]}
->
-  <div
-    style={
-      {
-        "marginBottom": "4px",
-      }
-    }
+    class="c0"
+    data-testid="validate-button"
+    disabled=""
+    hovercolor="#4caf50"
   >
-    <span
-      className="icon"
+    <div
+      style="margin-bottom: 4px;"
     >
-      <i
-        dangerouslySetInnerHTML={
-          {
-            "__html": "",
-          }
-        }
-        style={
-          {
-            "height": "20px",
-            "lineHeight": "20px",
-          }
-        }
-      />
-    </span>
+      <span
+        class="icon"
+      >
+        <i
+          style="height: 20px; line-height: 20px;"
+        >
+          <svg
+            class="eva eva-checkmark-outline"
+            fill="#ffffff"
+            height="20px"
+            viewBox="0 0 24 24"
+            width="20px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              data-name="Layer 2"
+            >
+              <g
+                data-name="checkmark"
+              >
+                <rect
+                  height="24"
+                  opacity="0"
+                  width="24"
+                />
+                <path
+                  d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                />
+              </g>
+            </g>
+          </svg>
+        </i>
+      </span>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`should render ValidateButton not disabled 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   width: 40px;
   height: 40px;
   background-color: #828282;
@@ -925,36 +1051,47 @@ exports[`should render ValidateButton not disabled 1`] = `
 }
 
 <div
-  className="c0"
-  data-test-id="validate-button"
-  disabled={false}
-  hoverColor="#4caf50"
-  onClick={[Function]}
->
-  <div
-    style={
-      {
-        "marginBottom": "4px",
-      }
-    }
+    class="c0"
+    data-testid="validate-button"
+    hovercolor="#4caf50"
   >
-    <span
-      className="icon"
+    <div
+      style="margin-bottom: 4px;"
     >
-      <i
-        dangerouslySetInnerHTML={
-          {
-            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-          }
-        }
-        style={
-          {
-            "height": "20px",
-            "lineHeight": "20px",
-          }
-        }
-      />
-    </span>
+      <span
+        class="icon"
+      >
+        <i
+          style="height: 20px; line-height: 20px;"
+        >
+          <svg
+            class="eva eva-checkmark-outline"
+            fill="#ffffff"
+            height="20px"
+            viewBox="0 0 24 24"
+            width="20px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              data-name="Layer 2"
+            >
+              <g
+                data-name="checkmark"
+              >
+                <rect
+                  height="24"
+                  opacity="0"
+                  width="24"
+                />
+                <path
+                  d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                />
+              </g>
+            </g>
+          </svg>
+        </i>
+      </span>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
index 1f6bab95d0..0e93168acc 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`userContributions should render correctly when 0 contributions 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   background: #edebeb;
   border-radius: 12px;
   padding: 40px;
@@ -65,97 +66,125 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
-      >
-        Vous n'avez pas encore rédigé de fiche.
-      </div>
-      <div
-        className="c3"
+        class="c1"
       >
         <div
-          className="c4"
+          class="c2"
         >
-          C'est parti ?
+          Vous n'avez pas encore rédigé de fiche.
         </div>
         <div
-          className="c5"
+          class="c3"
         >
-          Chacun peut apporter sa contribution pour enrichir le site.
-        </div>
-        <div
-          className="c5"
-        >
-          Lancez-vous !
-        </div>
-        <div
-          className="c6"
-        >
-          <button
-            className="btn dark me-2"
-            onClick={[Function]}
+          <div
+            class="c4"
           >
-            <span
-              className="me-2 icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-file-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="file-add"><rect width="24" height="24" opacity="0"/><path d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"/><path d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Créer une nouvelle fiche
-          </button>
-          <button
-            className="btn tuto ms-2"
-            onClick={[Function]}
+            C'est parti ?
+          </div>
+          <div
+            class="c5"
           >
-            <span
-              className="me-2 icon"
+            Chacun peut apporter sa contribution pour enrichir le site.
+          </div>
+          <div
+            class="c5"
+          >
+            Lancez-vous !
+          </div>
+          <div
+            class="c6"
+          >
+            <button
+              class="btn dark me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Explications
-          </button>
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-file-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="file-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"
+                        />
+                        <path
+                          d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Créer une nouvelle fiche
+            </button>
+            <button
+              class="btn tuto ms-2"
+            >
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`userContributions should render correctly when click on delete 1`] = `
@@ -649,7 +678,8 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 `;
 
 exports[`userContributions should render correctly when contributions 1`] = `
-.c9 {
+<DocumentFragment>
+  .c9 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -885,1422 +915,1607 @@ exports[`userContributions should render correctly when contributions 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
+        class="c1"
       >
         <div
-          className="c3"
+          class="c2"
         >
           <div
-            className="c4"
-          >
-            Vous avez rédigé
-          </div>
-          <div
-            className="c5"
-          >
-            7
-          </div>
-          <div
-            className="c4"
+            class="c3"
           >
-            fiches.
+            <div
+              class="c4"
+            >
+              Vous avez rédigé
+            </div>
+            <div
+              class="c5"
+            >
+              7
+            </div>
+            <div
+              class="c4"
+            >
+              fiches.
+            </div>
           </div>
-        </div>
-        <div>
-          <button
-            className="btn tuto me-2"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
+          <div>
+            <button
+              class="btn tuto me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Explications
-          </button>
-          <button
-            className="btn dark"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+            <button
+              class="btn dark"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-file-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="file-add"><rect width="24" height="24" opacity="0"/><path d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"/><path d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Créer une nouvelle fiche
-          </button>
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-file-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="file-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"
+                        />
+                        <path
+                          d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Créer une nouvelle fiche
+            </button>
+          </div>
         </div>
-      </div>
-      <div
-        className="c6"
-      >
         <div
-          className="table-responsive"
+          class="c6"
         >
-          <table
-            className="table table-borderless"
+          <div
+            class="table-responsive"
           >
-            <thead>
-              <tr>
-                <th>
-                  Type
-                </th>
-                <th>
-                  Titre
-                </th>
-                <th>
-                  Responsabilité
-                </th>
-                <th>
-                  <div
-                    className="c7"
-                    onClick={[Function]}
-                  >
-                    Statut
-                    <span
-                      className="ms-2 icon"
+            <table
+              class="table table-borderless"
+            >
+              <thead>
+                <tr>
+                  <th>
+                    Type
+                  </th>
+                  <th>
+                    Titre
+                  </th>
+                  <th>
+                    Responsabilité
+                  </th>
+                  <th>
+                    <div
+                      class="c7"
                     >
-                      <i
-                        dangerouslySetInnerHTML={
-                          {
-                            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-question-mark-circle-outline" fill="#212121"><g data-name="Layer 2"><g data-name="menu-arrow-circle"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"/><circle cx="12" cy="17" r="1"/></g></g></svg>",
-                          }
-                        }
-                        style={
-                          {
-                            "height": "20px",
-                            "lineHeight": "20px",
-                          }
-                        }
-                      />
-                    </span>
-                  </div>
-                </th>
-                <th>
-                  Merci
-                </th>
-                <th>
-                  Vues
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                className="line"
-                data-test-id="test_id1"
-              >
-                <td
-                  className="first align-middle"
+                      Statut
+                      <span
+                        class="ms-2 icon"
+                      >
+                        <i
+                          style="height: 20px; line-height: 20px;"
+                        >
+                          <svg
+                            class="eva eva-question-mark-circle-outline"
+                            fill="#212121"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              data-name="Layer 2"
+                            >
+                              <g
+                                data-name="menu-arrow-circle"
+                              >
+                                <rect
+                                  height="24"
+                                  opacity="0"
+                                  transform="rotate(180 12 12)"
+                                  width="24"
+                                />
+                                <path
+                                  d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                                />
+                                <path
+                                  d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"
+                                />
+                                <circle
+                                  cx="12"
+                                  cy="17"
+                                  r="1"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </i>
+                      </span>
+                    </div>
+                  </th>
+                  <th>
+                    Merci
+                  </th>
+                  <th>
+                    Vues
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  class="line"
+                  data-testid="test_id1"
                 >
-                  <div
-                    className="c8"
-                    isDarkBackground={true}
-                  >
-                    Dispositif
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/dispositif/id1"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
+                  <td
+                    class="first align-middle"
                   >
                     <div
-                      className="c9"
+                      class="c8"
                     >
-                      <b>
-                        titre info1
-                      </b>
-                      <span>
-                        avec titreMarque1
-                      </span>
+                      Dispositif
                     </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div
-                    className="c7"
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/dispositif/id1"
+                    >
+                      <div
+                        class="c9"
+                      >
+                        <b>
+                          titre info1
+                        </b>
+                        <span>
+                          avec titreMarque1
+                        </span>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                          "marginRight": "8px",
-                        }
-                      }
+                      class="c7"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px; margin-right: 8px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-outline" fill="#212121"><g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-person-outline"
+                              fill="#212121"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="person"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                                  />
+                                  <path
+                                    d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                      Moi
                     </div>
-                    Moi
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      className="c10"
-                      color="#FFEB3B"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#212121"
+                      style="width: 120px;"
                     >
-                      Brouillon
+                      <div
+                        class="c10"
+                        color="#FFEB3B"
+                        textcolor="#212121"
+                      >
+                        Brouillon
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="last align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
+                      style="display: flex; flex-direction: row;"
                     >
-                      <a
-                        href="/dispositif/id1"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/dispositif/id1"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
                       >
                         <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
+                          style="margin-bottom: 4px;"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
                             <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
                         </div>
-                      </a>
+                      </div>
                     </div>
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id2"
+                >
+                  <td
+                    class="first align-middle"
+                  >
                     <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
+                      class="c13"
+                    >
+                      Démarche
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id2"
                     >
                       <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
+                        class="c9"
+                      >
+                        <b>
+                          titre info2
+                        </b>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div
+                      class="c7"
+                    >
+                      <div
+                        style="margin-bottom: 4px; margin-right: 8px;"
                       >
                         <span
-                          className="icon"
+                          class="icon"
                         >
                           <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-person-outline"
+                              fill="#212121"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="person"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                                  />
+                                  <path
+                                    d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </div>
+                      Moi
                     </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id2"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/demarche/id2"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
+                    <div
+                      style="width: 120px;"
+                    >
+                      <div
+                        class="c14"
+                        color="#FF9800"
+                        textcolor="#ffffff"
+                      >
+                        En attente
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="last align-middle"
                   >
                     <div
-                      className="c9"
+                      style="display: flex; flex-direction: row;"
                     >
-                      <b>
-                        titre info2
-                      </b>
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id2"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
+                      >
+                        <div
+                          style="margin-bottom: 4px;"
+                        >
+                          <span
+                            class="icon"
+                          >
+                            <i
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
+                          </span>
+                        </div>
+                      </div>
                     </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id3"
                 >
-                  <div
-                    className="c7"
+                  <td
+                    class="first align-middle"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                          "marginRight": "8px",
-                        }
-                      }
+                      class="c13"
                     >
-                      <span
-                        className="icon"
+                      Démarche
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id3"
+                    >
+                      <div
+                        class="c9"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-outline" fill="#212121"><g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </div>
-                    Moi
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
-                  >
-                    <div
-                      className="c14"
-                      color="#FF9800"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#ffffff"
-                    >
-                      En attente
-                    </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <div
-                      className="c11"
-                      hoverColor="#212121"
-                    >
-                      <a
-                        href="/demarche/id2"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
-                        >
-                          <span
-                            className="icon"
-                          >
-                            <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
-                          </span>
-                        </div>
-                      </a>
-                    </div>
-                    <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
-                    >
-                      <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
-                      >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id3"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
-                  >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/demarche/id3"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
-                  >
-                    <div
-                      className="c9"
-                    >
-                      <b>
-                        titre info3
-                      </b>
-                    </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div />
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
-                  >
-                    <div
-                      className="c15"
-                      color="#8BC34A"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#ffffff"
-                    >
-                      Relecture en cours
-                    </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <div
-                      className="c11"
-                      hoverColor="#212121"
-                    >
-                      <a
-                        href="/demarche/id3"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
-                        >
-                          <span
-                            className="icon"
-                          >
-                            <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
-                          </span>
-                        </div>
-                      </a>
-                    </div>
-                    <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
-                    >
-                      <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
-                      >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
+                        <b>
+                          titre info3
+                        </b>
                       </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id4"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
-                  >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/demarche/id4"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
-                  >
-                    <div
-                      className="c9"
-                    >
-                      <b>
-                        titre info4
-                      </b>
-                    </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div />
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
-                  >
-                    <div
-                      className="c14"
-                      color="#FF9800"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#ffffff"
-                    >
-                      Accepté
-                    </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                    <div />
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
-                    >
-                      <a
-                        href="/demarche/id4"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
-                        >
-                          <span
-                            className="icon"
-                          >
-                            <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
-                          </span>
-                        </div>
-                      </a>
-                    </div>
-                    <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
+                      style="width: 120px;"
                     >
                       <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
+                        class="c15"
+                        color="#8BC34A"
+                        textcolor="#ffffff"
                       >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
+                        Relecture en cours
                       </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id5"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
-                  >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/demarche/id5"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
-                  >
-                    <div
-                      className="c9"
-                    >
-                      <b>
-                        titre info5
-                      </b>
-                    </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div
-                    className="c7"
-                  >
-                    <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                          "marginRight": "8px",
-                        }
-                      }
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-outline" fill="#212121"><g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </div>
-                    Moi
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    <div
-                      className="c16"
-                      color="#F44336"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#ffffff"
+                    <span
+                      aria-label="locked"
+                      role="img"
                     >
-                      Rejeté
-                    </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
-                  >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="last align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
+                      style="display: flex; flex-direction: row;"
                     >
-                      <a
-                        href="/demarche/id5"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id3"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
                       >
                         <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
+                          style="margin-bottom: 4px;"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
                             <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
                         </div>
-                      </a>
+                      </div>
                     </div>
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id4"
+                >
+                  <td
+                    class="first align-middle"
+                  >
                     <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
+                      class="c13"
+                    >
+                      Démarche
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id4"
                     >
                       <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
+                        class="c9"
                       >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
+                        <b>
+                          titre info4
+                        </b>
                       </div>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id6"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <a
-                    href="/demarche/id6"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
+                    <div />
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      className="c9"
+                      style="width: 120px;"
                     >
-                      <b>
-                        titre info6
-                      </b>
+                      <div
+                        class="c14"
+                        color="#FF9800"
+                        textcolor="#ffffff"
+                      >
+                        Accepté
+                      </div>
                     </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div />
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    <div
-                      className="c17"
-                      color="#4CAF50"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    >
-                      Publié
-                    </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div>
-                    0 
                     <span
-                      aria-label="thanks"
+                      aria-label="locked"
                       role="img"
                     >
-                      🙏
+                      🔒
                     </span>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div>
-                    10
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
                     <span
-                      aria-label="nbVues"
+                      aria-label="locked"
                       role="img"
                     >
-                      📈
+                      🔒
                     </span>
-                  </div>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="last align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
+                      style="display: flex; flex-direction: row;"
                     >
-                      <a
-                        href="/demarche/id6"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id4"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
                       >
                         <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
+                          style="margin-bottom: 4px;"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
                             <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
                         </div>
-                      </a>
-                    </div>
-                    <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
-                    >
-                      <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
-                      >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
                       </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                className="line"
-                data-test-id="test_id7"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c13"
-                    isDarkBackground={false}
-                  >
-                    Démarche
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id5"
                 >
-                  <a
-                    href="/demarche/id7"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
+                  <td
+                    class="first align-middle"
                   >
                     <div
-                      className="c9"
+                      class="c13"
                     >
-                      <b>
-                        titre info7
-                      </b>
+                      Démarche
                     </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div
-                    className="c7"
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id5"
+                    >
+                      <div
+                        class="c9"
+                      >
+                        <b>
+                          titre info5
+                        </b>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                          "marginRight": "8px",
-                        }
-                      }
+                      class="c7"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px; margin-right: 8px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-briefcase-outline" fill="#212121"><g data-name="Layer 2"><g data-name="briefcase"><rect width="24" height="24" opacity="0"/><path d="M19 7h-3V5.5A2.5 2.5 0 0 0 13.5 3h-3A2.5 2.5 0 0 0 8 5.5V7H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-4 2v10H9V9zm-5-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h-4zM4 18v-8a1 1 0 0 1 1-1h2v10H5a1 1 0 0 1-1-1zm16 0a1 1 0 0 1-1 1h-2V9h2a1 1 0 0 1 1 1z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-person-outline"
+                              fill="#212121"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="person"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                                  />
+                                  <path
+                                    d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                      Moi
                     </div>
-                    main
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      className="c17"
-                      color="#4CAF50"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
+                      style="width: 120px;"
                     >
-                      Publié
+                      <div
+                        class="c16"
+                        color="#F44336"
+                        textcolor="#ffffff"
+                      >
+                        Rejeté
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div>
-                    0 
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
                     <span
-                      aria-label="thanks"
+                      aria-label="locked"
                       role="img"
                     >
-                      🙏
+                      🔒
                     </span>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div>
-                    10
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
                     <span
-                      aria-label="nbVues"
+                      aria-label="locked"
                       role="img"
                     >
-                      📈
+                      🔒
                     </span>
-                  </div>
-                </td>
-                <td
-                  className="last align-middle"
+                  </td>
+                  <td
+                    class="last align-middle"
+                  >
+                    <div
+                      style="display: flex; flex-direction: row;"
+                    >
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id5"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
+                      >
+                        <div
+                          style="margin-bottom: 4px;"
+                        >
+                          <span
+                            class="icon"
+                          >
+                            <i
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id6"
                 >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                  <td
+                    class="first align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
+                      class="c13"
                     >
-                      <a
-                        href="/demarche/id7"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                      Démarche
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id6"
+                    >
+                      <div
+                        class="c9"
+                      >
+                        <b>
+                          titre info6
+                        </b>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div />
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div
+                      style="width: 120px;"
+                    >
+                      <div
+                        class="c17"
+                        color="#4CAF50"
+                      >
+                        Publié
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div>
+                      0 
+                      <span
+                        aria-label="thanks"
+                        role="img"
+                      >
+                        🙏
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div>
+                      10
+                      <span
+                        aria-label="nbVues"
+                        role="img"
+                      >
+                        📈
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="last align-middle"
+                  >
+                    <div
+                      style="display: flex; flex-direction: row;"
+                    >
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id6"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button"
+                        hovercolor="#f44336"
                       >
                         <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
+                          style="margin-bottom: 4px;"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
                             <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
                         </div>
-                      </a>
+                      </div>
                     </div>
+                  </td>
+                </tr>
+                <tr
+                  class="line"
+                  data-testid="test_id7"
+                >
+                  <td
+                    class="first align-middle"
+                  >
                     <div
-                      className="c18"
-                      data-test-id="delete-button"
-                      disabled={true}
-                      hoverColor="#f44336"
+                      class="c13"
+                    >
+                      Démarche
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/demarche/id7"
                     >
                       <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
+                        class="c9"
+                      >
+                        <b>
+                          titre info7
+                        </b>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div
+                      class="c7"
+                    >
+                      <div
+                        style="margin-bottom: 4px; margin-right: 8px;"
                       >
                         <span
-                          className="icon"
+                          class="icon"
                         >
                           <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-briefcase-outline"
+                              fill="#212121"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="briefcase"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19 7h-3V5.5A2.5 2.5 0 0 0 13.5 3h-3A2.5 2.5 0 0 0 8 5.5V7H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-4 2v10H9V9zm-5-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V7h-4zM4 18v-8a1 1 0 0 1 1-1h2v10H5a1 1 0 0 1-1-1zm16 0a1 1 0 0 1-1 1h-2V9h2a1 1 0 0 1 1 1z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
                       </div>
+                      main
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div
+                      style="width: 120px;"
+                    >
+                      <div
+                        class="c17"
+                        color="#4CAF50"
+                      >
+                        Publié
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div>
+                      0 
+                      <span
+                        aria-label="thanks"
+                        role="img"
+                      >
+                        🙏
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <div>
+                      10
+                      <span
+                        aria-label="nbVues"
+                        role="img"
+                      >
+                        📈
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="last align-middle"
+                  >
+                    <div
+                      style="display: flex; flex-direction: row;"
+                    >
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/demarche/id7"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c18"
+                        data-testid="delete-button"
+                        disabled=""
+                        hovercolor="#f44336"
+                      >
+                        <div
+                          style="margin-bottom: 4px;"
+                        >
+                          <span
+                            class="icon"
+                          >
+                            <i
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`userContributions should render correctly when loading 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   background: #edebeb;
   border-radius: 12px;
   padding: 40px;
@@ -2348,78 +2563,61 @@ exports[`userContributions should render correctly when loading 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
+        class="c1"
       >
         <div
-          className="c3"
-        >
-          Vous avez rédigé
-        </div>
-        <div
-          className="c4"
-        >
-          ...
-        </div>
-        <div
-          className="c3"
+          class="c2"
         >
-          fiche.
+          <div
+            class="c3"
+          >
+            Vous avez rédigé
+          </div>
+          <div
+            class="c4"
+          >
+            ...
+          </div>
+          <div
+            class="c3"
+          >
+            fiche.
+          </div>
         </div>
-      </div>
-      <span
-        aria-busy={true}
-        aria-live="polite"
-      >
-        <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "height": 50,
-            }
-          }
-        >
-          ‌
-        </span>
-        <br />
         <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "height": 50,
-            }
-          }
+          aria-busy="true"
+          aria-live="polite"
         >
-          ‌
-        </span>
-        <br />
-        <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "height": 50,
-            }
-          }
-        >
-          ‌
+          <span
+            class="react-loading-skeleton"
+            style="height: 50px;"
+          >
+            ‌
+          </span>
+          <br />
+          <span
+            class="react-loading-skeleton"
+            style="height: 50px;"
+          >
+            ‌
+          </span>
+          <br />
+          <span
+            class="react-loading-skeleton"
+            style="height: 50px;"
+          >
+            ‌
+          </span>
+          <br />
         </span>
-        <br />
-      </span>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
index 2e8ff4e2c0..d49bac8bba 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserFavorites should render correctly when 0 favorites 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
@@ -112,208 +113,217 @@ exports[`UserFavorites should render correctly when 0 favorites 1`] = `
 }
 
 <div
-  className="container"
->
-  <div
-    style={
-      {
-        "marginLeft": "40px",
-        "marginRight": "40px",
-      }
-    }
+    class="container"
   >
     <div
-      className="c0"
+      style="margin-right: 40px; margin-left: 40px;"
     >
       <div
-        className="c1"
+        class="c0"
       >
-        Vous avez
-      </div>
-      <div
-        className="c2"
-      >
-        0
-      </div>
-      <div
-        className="c1"
-      >
-        UserFavorites.content_saved
+        <div
+          class="c1"
+        >
+          Vous avez
+        </div>
+        <div
+          class="c2"
+        >
+          0
+        </div>
+        <div
+          class="c1"
+        >
+          UserFavorites.content_saved
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="cards"
-  >
     <div
-      className="c3"
+      class="cards"
     >
-      UserFavorites.Comment ajouter
-      <button
-        className="btn tuto me-2"
-        onClick={[Function]}
+      <div
+        class="c3"
       >
-        <span
-          className="me-2 icon"
+        UserFavorites.Comment ajouter
+        <button
+          class="btn tuto me-2"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-question-mark-circle-outline" fill="#fff"><g data-name="Layer 2"><g data-name="menu-arrow-circle"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"/><circle cx="12" cy="17" r="1"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        UserFavorites.tutoriel
-      </button>
-    </div>
-    <div
-      className="c4"
-    >
+          <span
+            class="me-2 icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-question-mark-circle-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="menu-arrow-circle"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      transform="rotate(180 12 12)"
+                      width="24"
+                    />
+                    <path
+                      d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                    />
+                    <path
+                      d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"
+                    />
+                    <circle
+                      cx="12"
+                      cy="17"
+                      r="1"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          UserFavorites.tutoriel
+        </button>
+      </div>
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c4"
       >
         <div
-          className="c5"
-          width="221px"
-        />
-        <div
-          className="c6"
-          width="130px"
-        />
-      </div>
-      <div>
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c8"
-          width="200px"
-        />
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c9"
-          width="180px"
-        />
-        <div
-          className="c10"
+          style="padding: 13px;"
         >
           <div
-            className="c11"
+            class="c5"
+            width="221px"
           />
+          <div
+            class="c6"
+            width="130px"
+          />
+        </div>
+        <div>
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c8"
+            width="200px"
+          />
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c9"
+            width="180px"
+          />
+          <div
+            class="c10"
+          >
+            <div
+              class="c11"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      className="c4"
-    >
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c4"
       >
         <div
-          className="c5"
-          width="221px"
-        />
-        <div
-          className="c6"
-          width="130px"
-        />
-      </div>
-      <div>
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c8"
-          width="200px"
-        />
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c9"
-          width="180px"
-        />
-        <div
-          className="c10"
+          style="padding: 13px;"
         >
           <div
-            className="c11"
+            class="c5"
+            width="221px"
+          />
+          <div
+            class="c6"
+            width="130px"
           />
         </div>
+        <div>
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c8"
+            width="200px"
+          />
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c9"
+            width="180px"
+          />
+          <div
+            class="c10"
+          >
+            <div
+              class="c11"
+            />
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      className="c4"
-    >
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c4"
       >
         <div
-          className="c5"
-          width="221px"
-        />
-        <div
-          className="c6"
-          width="130px"
-        />
-      </div>
-      <div>
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c8"
-          width="200px"
-        />
-        <div
-          className="c7"
-          width="221px"
-        />
-        <div
-          className="c9"
-          width="180px"
-        />
-        <div
-          className="c10"
+          style="padding: 13px;"
         >
           <div
-            className="c11"
+            class="c5"
+            width="221px"
+          />
+          <div
+            class="c6"
+            width="130px"
+          />
+        </div>
+        <div>
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c8"
+            width="200px"
+          />
+          <div
+            class="c7"
+            width="221px"
+          />
+          <div
+            class="c9"
+            width="180px"
           />
+          <div
+            class="c10"
+          >
+            <div
+              class="c11"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserFavorites should render correctly when 3 favorites 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
@@ -360,600 +370,563 @@ exports[`UserFavorites should render correctly when 3 favorites 1`] = `
 }
 
 <div
-  className="container"
->
-  <div
-    className="title"
+    class="container"
   >
     <div
-      className="c0"
+      class="title"
     >
       <div
-        className="c1"
-      >
-        Vous avez
-      </div>
-      <div
-        className="c2"
-      >
-        3
-      </div>
-      <div
-        className="c1"
-      >
-        UserFavorites.contents_saved
-      </div>
-    </div>
-    <div>
-      <button
-        className="btn outline-black"
-        data-test-id="test-delete-button"
-        onClick={[Function]}
+        class="c0"
       >
-        <span
-          className="me-2 icon"
+        <div
+          class="c1"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash-outline" fill="#fff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8h12z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        UserFavorites.Tout supprimer
-      </button>
-    </div>
-  </div>
-  <div
-    className="cards"
-  >
-    <div>
-      <div
-        className="wrapper wrapper"
-      >
+          Vous avez
+        </div>
+        <div
+          class="c2"
+        >
+          3
+        </div>
+        <div
+          class="c1"
+        >
+          UserFavorites.contents_saved
+        </div>
+      </div>
+      <div>
         <button
-          className="btn favorite btn btn-secondary"
-          onClick={[Function]}
-          title="Dispositif.addToFavorites"
-          type="button"
+          class="btn outline-black"
+          data-testid="test-delete-button"
         >
           <span
-            className="icon_outline icon"
+            class="me-2 icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          <span
-            className="icon_fill icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-trash-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="trash"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V8h12z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
+          UserFavorites.Tout supprimer
         </button>
-        <a
-          className="c3 card dispositif content card"
-          href="/program/id1"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-          title="tinfo1"
+      </div>
+    </div>
+    <div
+      class="cards"
+    >
+      <div>
+        <div
+          class="wrapper wrapper"
         >
-          <div
-            className="location"
+          <button
+            class="btn favorite btn btn-secondary"
+            title="Dispositif.addToFavorites"
+            type="button"
           >
-            <img
-              alt="Infocards.location"
-              data-nimg="1"
-              decoding="async"
-              height={16}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={16}
-            />
             <span
-              className="ms-1"
-              style={
-                {
-                  "color": "#3D2884",
-                }
-              }
-            />
-          </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "tinfo1",
-              }
-            }
-            style={
-              {
-                "color": "#3D2884",
-              }
-            }
-          />
-          <div
-            className="text max_lines abstract"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "abstract1",
-              }
-            }
-            style={
-              {
-                "color": "#3D2884",
-              }
-            }
-          />
-          <div
-            className="infos text my-3"
-            style={
-              {
-                "color": "#3D2884",
-              }
-            }
-          />
-          <div
-            className="themes"
+              class="icon_outline icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star-outline"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            <span
+              class="icon_fill icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
+          <a
+            class="c3 card dispositif content card"
+            href="/program/id1"
+            title="tinfo1"
           >
             <div
-              className="container badges theme-badge"
-              style={
-                {
-                  "backgroundColor": "#EFE8F4",
-                }
-              }
+              class="location"
             >
+              <img
+                alt="Infocards.location"
+                data-nimg="1"
+                decoding="async"
+                height="16"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                style="color: transparent;"
+                width="16"
+              />
               <span
-                className="icon"
+                class="ms-1"
+                style="color: rgb(61, 40, 132);"
+              />
+            </div>
+            <h3
+              class="title"
+              style="color: rgb(61, 40, 132);"
+            >
+              tinfo1
+            </h3>
+            <div
+              class="text max_lines abstract"
+              style="color: rgb(61, 40, 132);"
+            >
+              abstract1
+            </div>
+            <div
+              class="infos text my-3"
+              style="color: rgb(61, 40, 132);"
+            />
+            <div
+              class="themes"
+            >
+              <div
+                class="container badges theme-badge"
+                style="background-color: rgb(239, 232, 244);"
               >
                 <span
-                  className="icon theme-icon"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg width="12" height="12"></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 12,
-                      "width": 12,
-                    }
-                  }
+                  class="icon"
+                >
+                  <span
+                    class="icon theme-icon"
+                    style="width: 12px; height: 12px;"
+                  >
+                    <svg
+                      height="12"
+                      width="12"
+                    />
+                  </span>
+                </span>
+                <span
+                  style="color: rgb(61, 40, 132);"
+                >
+                  Français
+                </span>
+              </div>
+            </div>
+            <div
+              class="sponsor"
+              style="border-color: #3d2884;"
+            >
+              <span
+                class="picture"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="40"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                  style="color: transparent; object-fit: contain;"
+                  width="40"
                 />
               </span>
               <span
-                style={
-                  {
-                    "color": "#3D2884",
-                  }
-                }
+                class="text max_lines ms-2"
+                style="color: rgb(61, 40, 132);"
               >
-                Français
+                titreMarque1
               </span>
             </div>
-          </div>
-          <div
-            className="sponsor"
-            style={
-              {
-                "borderColor": "#3D2884",
-              }
-            }
+          </a>
+        </div>
+      </div>
+      <div>
+        <div
+          class="wrapper wrapper"
+        >
+          <button
+            class="btn favorite btn btn-secondary"
+            title="Dispositif.addToFavorites"
+            type="button"
           >
             <span
-              className="picture"
+              class="icon_outline icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star-outline"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            <span
+              class="icon_fill icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
+          <a
+            class="c4 card dispositif content card"
+            href="/program/id2"
+            title="tinfo2"
+          >
+            <div
+              class="location"
             >
               <img
-                alt=""
+                alt="Infocards.location"
                 data-nimg="1"
                 decoding="async"
-                height={40}
+                height="16"
                 loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                    "objectFit": "contain",
-                  }
-                }
-                width={40}
+                src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                style="color: transparent;"
+                width="16"
               />
-            </span>
-            <span
-              className="text max_lines ms-2"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "titreMarque1",
-                }
-              }
-              style={
-                {
-                  "color": "#3D2884",
-                }
-              }
-            />
-          </div>
-        </a>
-      </div>
-    </div>
-    <div>
-      <div
-        className="wrapper wrapper"
-      >
-        <button
-          className="btn favorite btn btn-secondary"
-          onClick={[Function]}
-          title="Dispositif.addToFavorites"
-          type="button"
-        >
-          <span
-            className="icon_outline icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          <span
-            className="icon_fill icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </button>
-        <a
-          className="c4 card dispositif content card"
-          href="/program/id2"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-          title="tinfo2"
-        >
-          <div
-            className="location"
-          >
-            <img
-              alt="Infocards.location"
-              data-nimg="1"
-              decoding="async"
-              height={16}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={16}
-            />
-            <span
-              className="ms-1"
-              style={
-                {
-                  "color": "#443023",
-                }
-              }
+              <span
+                class="ms-1"
+                style="color: rgb(68, 48, 35);"
+              />
+            </div>
+            <h3
+              class="title"
+              style="color: rgb(68, 48, 35);"
+            >
+              tinfo2
+            </h3>
+            <div
+              class="text max_lines abstract"
+              style="color: rgb(68, 48, 35);"
+            >
+              abstract2
+            </div>
+            <div
+              class="infos text my-3"
+              style="color: rgb(68, 48, 35);"
             />
-          </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "tinfo2",
-              }
-            }
-            style={
-              {
-                "color": "#443023",
-              }
-            }
-          />
-          <div
-            className="text max_lines abstract"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "abstract2",
-              }
-            }
-            style={
-              {
-                "color": "#443023",
-              }
-            }
-          />
-          <div
-            className="infos text my-3"
-            style={
-              {
-                "color": "#443023",
-              }
-            }
-          />
-          <div
-            className="themes"
-          >
             <div
-              className="container badges theme-badge"
-              style={
-                {
-                  "backgroundColor": "#EEE7E5",
-                }
-              }
+              class="themes"
             >
-              <span
-                className="icon"
+              <div
+                class="container badges theme-badge"
+                style="background-color: rgb(238, 231, 229);"
               >
                 <span
-                  className="icon theme-icon"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg width="12" height="12"></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 12,
-                      "width": 12,
-                    }
-                  }
+                  class="icon"
+                >
+                  <span
+                    class="icon theme-icon"
+                    style="width: 12px; height: 12px;"
+                  >
+                    <svg
+                      height="12"
+                      width="12"
+                    />
+                  </span>
+                </span>
+                <span
+                  style="color: rgb(68, 48, 35);"
+                >
+                  Administratif
+                </span>
+              </div>
+            </div>
+            <div
+              class="sponsor"
+              style="border-color: #443023;"
+            >
+              <span
+                class="picture"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="40"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                  style="color: transparent; object-fit: contain;"
+                  width="40"
                 />
               </span>
               <span
-                style={
-                  {
-                    "color": "#443023",
-                  }
-                }
+                class="text max_lines ms-2"
+                style="color: rgb(68, 48, 35);"
               >
-                Administratif
+                titreMarque2
               </span>
             </div>
-          </div>
-          <div
-            className="sponsor"
-            style={
-              {
-                "borderColor": "#443023",
-              }
-            }
+          </a>
+        </div>
+      </div>
+      <div>
+        <div
+          class="wrapper"
+        >
+          <button
+            class="btn favorite btn btn-secondary"
+            title="Dispositif.addToFavorites"
+            type="button"
           >
             <span
-              className="picture"
+              class="icon_outline icon"
             >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star-outline"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            <span
+              class="icon_fill icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-star"
+                  fill="dark"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="star"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
+          <a
+            class="c5 card demarche content"
+            href="/procedure/id3"
+            title="tinfo3"
+          >
+            <div>
               <img
                 alt=""
                 data-nimg="1"
                 decoding="async"
-                height={40}
+                height="48"
                 loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
                 src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                    "objectFit": "contain",
-                  }
-                }
-                width={40}
+                srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                style="color: transparent;"
+                width="48"
               />
-            </span>
-            <span
-              className="text max_lines ms-2"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "titreMarque2",
-                }
-              }
-              style={
-                {
-                  "color": "#443023",
-                }
-              }
-            />
-          </div>
-        </a>
-      </div>
-    </div>
-    <div>
-      <div
-        className="wrapper"
-      >
-        <button
-          className="btn favorite btn btn-secondary"
-          onClick={[Function]}
-          title="Dispositif.addToFavorites"
-          type="button"
-        >
-          <span
-            className="icon_outline icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          <span
-            className="icon_fill icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </button>
-        <a
-          className="c5 card demarche content"
-          href="/procedure/id3"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-          title="tinfo3"
-        >
-          <div>
-            <img
-              alt=""
-              data-nimg="1"
-              decoding="async"
-              height={48}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={48}
-            />
-          </div>
-          <h3
-            className="title"
-            dangerouslySetInnerHTML={
-              {
-                "__html": "tinfo3",
-              }
-            }
-            style={
-              {
-                "color": "#06508C",
-              }
-            }
-          />
-          <div
-            className="themes"
-          >
+            </div>
+            <h3
+              class="title"
+              style="color: rgb(6, 80, 140);"
+            >
+              tinfo3
+            </h3>
             <div
-              className="container badges theme-badge"
-              style={
-                {
-                  "backgroundColor": "#DDF2F9",
-                }
-              }
+              class="themes"
             >
-              <span
-                className="icon"
+              <div
+                class="container badges theme-badge"
+                style="background-color: rgb(221, 242, 249);"
               >
                 <span
-                  className="icon theme-icon"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg width="12" height="12"></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": 12,
-                      "width": 12,
-                    }
-                  }
-                />
-              </span>
-              <span
-                style={
-                  {
-                    "color": "#06508C",
-                  }
-                }
-              >
-                Logement
-              </span>
+                  class="icon"
+                >
+                  <span
+                    class="icon theme-icon"
+                    style="width: 12px; height: 12px;"
+                  >
+                    <svg
+                      height="12"
+                      width="12"
+                    />
+                  </span>
+                </span>
+                <span
+                  style="color: rgb(6, 80, 140);"
+                >
+                  Logement
+                </span>
+              </div>
             </div>
-          </div>
-        </a>
+          </a>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserFavorites should render correctly when loading 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
@@ -998,307 +971,221 @@ exports[`UserFavorites should render correctly when loading 1`] = `
 }
 
 <div
-  className="container"
->
-  <div
-    className="title"
+    class="container"
   >
     <div
-      className="c0"
+      class="title"
     >
       <div
-        className="c1"
+        class="c0"
       >
-        Vous avez
-      </div>
-      <div
-        className="c2"
-      >
-        ...
-      </div>
-      <div
-        className="c1"
-      >
-        UserFavorites.content_saved
+        <div
+          class="c1"
+        >
+          Vous avez
+        </div>
+        <div
+          class="c2"
+        >
+          ...
+        </div>
+        <div
+          class="c1"
+        >
+          UserFavorites.content_saved
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="cards"
-  >
     <div
-      className="c3"
+      class="cards"
     >
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c3"
       >
-        <span
-          aria-busy={true}
-          aria-live="polite"
-        >
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-        </span>
-      </div>
-      <div>
         <div
-          style={
-            {
-              "marginLeft": "13px",
-              "marginRight": "13px",
-            }
-          }
+          style="padding: 13px;"
         >
           <span
-            aria-busy={true}
+            aria-busy="true"
             aria-live="polite"
           >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
+          </span>
+        </div>
+        <div>
+          <div
+            style="margin-left: 13px; margin-right: 13px;"
+          >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              aria-busy="true"
+              aria-live="polite"
             >
-              ‌
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
             </span>
-            <br />
-          </span>
+          </div>
+          <div
+            class="c4"
+          />
         </div>
-        <div
-          className="c4"
-        />
       </div>
-    </div>
-    <div
-      className="c3"
-    >
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c3"
       >
-        <span
-          aria-busy={true}
-          aria-live="polite"
-        >
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-        </span>
-      </div>
-      <div>
         <div
-          style={
-            {
-              "marginLeft": "13px",
-              "marginRight": "13px",
-            }
-          }
+          style="padding: 13px;"
         >
           <span
-            aria-busy={true}
+            aria-busy="true"
             aria-live="polite"
           >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
+          </span>
+        </div>
+        <div>
+          <div
+            style="margin-left: 13px; margin-right: 13px;"
+          >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              aria-busy="true"
+              aria-live="polite"
             >
-              ‌
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
             </span>
-            <br />
-          </span>
+          </div>
+          <div
+            class="c4"
+          />
         </div>
-        <div
-          className="c4"
-        />
       </div>
-    </div>
-    <div
-      className="c3"
-    >
       <div
-        style={
-          {
-            "padding": "13px",
-          }
-        }
+        class="c3"
       >
-        <span
-          aria-busy={true}
-          aria-live="polite"
-        >
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-          <span
-            className="react-loading-skeleton"
-            style={
-              {
-                "height": "28px",
-              }
-            }
-          >
-            ‌
-          </span>
-          <br />
-        </span>
-      </div>
-      <div>
         <div
-          style={
-            {
-              "marginLeft": "13px",
-              "marginRight": "13px",
-            }
-          }
+          style="padding: 13px;"
         >
           <span
-            aria-busy={true}
+            aria-busy="true"
             aria-live="polite"
           >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              class="react-loading-skeleton"
+              style="height: 28px;"
             >
               ‌
             </span>
             <br />
+          </span>
+        </div>
+        <div>
+          <div
+            style="margin-left: 13px; margin-right: 13px;"
+          >
             <span
-              className="react-loading-skeleton"
-              style={
-                {
-                  "height": "14px",
-                }
-              }
+              aria-busy="true"
+              aria-live="polite"
             >
-              ‌
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
+              <span
+                class="react-loading-skeleton"
+                style="height: 14px;"
+              >
+                ‌
+              </span>
+              <br />
             </span>
-            <br />
-          </span>
+          </div>
+          <div
+            class="c4"
+          />
         </div>
-        <div
-          className="c4"
-        />
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap b/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
index 330a8fbf13..5def04c1b5 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/__snapshots__/UserNotifications.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserNotifications should render correctly when 0 notif 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   background: #edebeb;
   border-radius: 12px;
   padding: 40px;
@@ -27,57 +28,42 @@ exports[`UserNotifications should render correctly when 0 notif 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
+        class="c1"
       >
-        Aucune notification ! 
-      </div>
-      <div
-        style={
-          {
-            "marginBottom": "20px",
-            "marginTop": "32px",
-          }
-        }
-      >
-        <img
-          alt="no-notification"
-          data-nimg="1"
-          decoding="async"
-          height={289}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="https://storage.googleapis.com/refugies-info-assets/middle-office/aucune_notification.svg"
-          style={
-            {
-              "color": "transparent",
-            }
-          }
-          width={400}
-        />
+        <div
+          class="c2"
+        >
+          Aucune notification ! 
+        </div>
+        <div
+          style="margin-top: 32px; margin-bottom: 20px;"
+        >
+          <img
+            alt="no-notification"
+            data-nimg="1"
+            decoding="async"
+            height="289"
+            loading="lazy"
+            src="https://storage.googleapis.com/refugies-info-assets/middle-office/aucune_notification.svg"
+            style="color: transparent;"
+            width="400"
+          />
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserNotifications should render correctly when loading 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   display: flex;
   flex-direction: row;
   margin-bottom: 32px;
@@ -113,80 +99,64 @@ exports[`UserNotifications should render correctly when loading 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
-      >
-        Vous avez
-      </div>
-      <div
-        className="c3"
+        class="c1"
       >
-        ...
-      </div>
-      <div
-        className="c2"
-      >
-        nouvelle notification.
+        <div
+          class="c2"
+        >
+          Vous avez
+        </div>
+        <div
+          class="c3"
+        >
+          ...
+        </div>
+        <div
+          class="c2"
+        >
+          nouvelle notification.
+        </div>
       </div>
-    </div>
-    <span
-      aria-busy={true}
-      aria-live="polite"
-    >
       <span
-        className="react-loading-skeleton"
-        style={
-          {
-            "height": 50,
-          }
-        }
+        aria-busy="true"
+        aria-live="polite"
       >
-        ‌
-      </span>
-      <br />
-      <span
-        className="react-loading-skeleton"
-        style={
-          {
-            "height": 50,
-          }
-        }
-      >
-        ‌
-      </span>
-      <br />
-      <span
-        className="react-loading-skeleton"
-        style={
-          {
-            "height": 50,
-          }
-        }
-      >
-        ‌
+        <span
+          class="react-loading-skeleton"
+          style="height: 50px;"
+        >
+          ‌
+        </span>
+        <br />
+        <span
+          class="react-loading-skeleton"
+          style="height: 50px;"
+        >
+          ‌
+        </span>
+        <br />
+        <span
+          class="react-loading-skeleton"
+          style="height: 50px;"
+        >
+          ‌
+        </span>
+        <br />
       </span>
-      <br />
-    </span>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserNotifications should render correctly when notif not read annuaire, not read reaction, not read new content, read reaction  1`] = `
-.c4 {
+<DocumentFragment>
+  .c4 {
   background: #2d9cdb;
   border-radius: 12px;
   padding: 8px 8px 8px 20px;
@@ -301,359 +271,534 @@ exports[`UserNotifications should render correctly when notif not read annuaire,
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
-    >
-      <div
-        className="c2"
-      >
-        Vous avez
-      </div>
-      <div
-        className="c3"
-      >
-        3
-      </div>
-      <div
-        className="c2"
-      >
-        nouvelles notifications.
-      </div>
-    </div>
-    <div
-      className="c4"
-      data-test-id="test-notif-annuaire"
-      onClick={[Function]}
-      read={false}
+      class="c0"
     >
       <div
-        className="c5"
+        class="c1"
       >
-        <span
-          className="icon"
+        <div
+          class="c2"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-bell" fill="#ffffff"><g data-name="Layer 2"><g data-name="bell"><rect width="24" height="24" opacity="0"/><path d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
+          Vous avez
+        </div>
+        <div
+          class="c3"
+        >
+          3
+        </div>
         <div
-          className="c6"
-          read={false}
+          class="c2"
         >
-          Recensez votre structure dans l'annuaire de l'intégration
+          nouvelles notifications.
         </div>
       </div>
       <div
-        className="c5"
+        class="c4"
+        data-testid="test-notif-annuaire"
       >
-        <button
-          className="btn dark me-2"
+        <div
+          class="c5"
         >
           <span
-            className="me-2 icon"
+            class="icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-folder-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="folder-add"><rect width="24" height="24" opacity="0"/><path d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"/><path d="M19.5 7.05h-7L9.87 3.87a1 1 0 0 0-.77-.37H4.5A2.47 2.47 0 0 0 2 5.93v12.14a2.47 2.47 0 0 0 2.5 2.43h15a2.47 2.47 0 0 0 2.5-2.43V9.48a2.47 2.47 0 0 0-2.5-2.43zm.5 11a.46.46 0 0 1-.5.43h-15a.46.46 0 0 1-.5-.43V5.93a.46.46 0 0 1 .5-.43h4.13l2.6 3.18a1 1 0 0 0 .77.37h7.5a.46.46 0 0 1 .5.43z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-bell"
+                fill="#ffffff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="bell"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
-          Compléter la fiche annuaire
-        </button>
-        <button
-          className="btn error ms-2"
-          data-test-id="test-delete-annuaire"
-          onClick={[Function]}
-        >
-          <span
-            className="icon"
+          <div
+            class="c6"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash-2" fill="#fff"><g data-name="Layer 2"><g data-name="trash-2"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      className="c4"
-      data-test-id="test-notif-new content"
-      onClick={[Function]}
-      read={false}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-bell" fill="#ffffff"><g data-name="Layer 2"><g data-name="bell"><rect width="24" height="24" opacity="0"/><path d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
+            Recensez votre structure dans l'annuaire de l'intégration
+          </div>
+        </div>
         <div
-          className="c6"
-          read={false}
+          class="c5"
         >
-          Une nouvelle fiche a été attribuée à votre structure
+          <button
+            class="btn dark me-2"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-folder-add-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="folder-add"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"
+                      />
+                      <path
+                        d="M19.5 7.05h-7L9.87 3.87a1 1 0 0 0-.77-.37H4.5A2.47 2.47 0 0 0 2 5.93v12.14a2.47 2.47 0 0 0 2.5 2.43h15a2.47 2.47 0 0 0 2.5-2.43V9.48a2.47 2.47 0 0 0-2.5-2.43zm.5 11a.46.46 0 0 1-.5.43h-15a.46.46 0 0 1-.5-.43V5.93a.46.46 0 0 1 .5-.43h4.13l2.6 3.18a1 1 0 0 0 .77.37h7.5a.46.46 0 0 1 .5.43z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Compléter la fiche annuaire
+          </button>
+          <button
+            class="btn error ms-2"
+            data-testid="test-delete-annuaire"
+          >
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-trash-2"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="trash-2"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
         </div>
       </div>
       <div
-        className="c5"
+        class="c4"
+        data-testid="test-notif-new content"
       >
         <div
-          className="c7"
-          read={false}
-        >
-          Depuis 5 jours
-        </div>
-        <button
-          className="btn dark"
+          class="c5"
         >
           <span
-            className="me-2 icon"
+            class="icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#fff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-bell"
+                fill="#ffffff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="bell"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
-          Voir la fiche
-        </button>
-      </div>
-    </div>
-    <div
-      className="c4"
-      data-test-id="test-notif-reaction"
-      onClick={[Function]}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-bell" fill="#ffffff"><g data-name="Layer 2"><g data-name="bell"><rect width="24" height="24" opacity="0"/><path d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        <div
-          className="c6"
-        >
-          Nouvelle réaction sur la fiche :
+          <div
+            class="c6"
+          >
+            Une nouvelle fiche a été attribuée à votre structure
+          </div>
         </div>
         <div
-          className="c8"
+          class="c5"
         >
-          titre info
+          <div
+            class="c7"
+          >
+            Depuis 5 jours
+          </div>
+          <button
+            class="btn dark"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-eye"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="eye"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="1.5"
+                      />
+                      <path
+                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Voir la fiche
+          </button>
         </div>
       </div>
       <div
-        className="c5"
+        class="c4"
+        data-testid="test-notif-reaction"
       >
-        <button
-          className="btn dark"
+        <div
+          class="c5"
         >
           <span
-            className="me-2 icon"
+            class="icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#fff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-bell"
+                fill="#ffffff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="bell"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
-          Voir la réaction
-        </button>
-        <button
-          className="btn error ms-2"
-          data-test-id="test-delete-reaction"
-          onClick={[Function]}
-        >
-          <span
-            className="icon"
+          <div
+            class="c6"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash-2" fill="#fff"><g data-name="Layer 2"><g data-name="trash-2"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      className="c9"
-      data-test-id="test-notif-reaction"
-      onClick={[Function]}
-      read={true}
-    >
-      <div
-        className="c5"
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-bell-outline" fill="#212121"><g data-name="Layer 2"><g data-name="bell"><rect width="24" height="24" opacity="0"/><path d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4zM5.51 16l1.18-1.18a2 2 0 0 0 .59-1.42V8.73A4.73 4.73 0 0 1 8.9 5.17 4.67 4.67 0 0 1 12.64 4a4.86 4.86 0 0 1 4.08 4.9v4.5a2 2 0 0 0 .58 1.42L18.49 16z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        <div
-          className="c10"
-          read={true}
-        >
-          Nouvelle réaction sur la fiche :
+            Nouvelle réaction sur la fiche :
+          </div>
+          <div
+            class="c8"
+          >
+            titre info
+          </div>
         </div>
         <div
-          className="c8"
+          class="c5"
         >
-          titre info2
+          <button
+            class="btn dark"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-eye"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="eye"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="1.5"
+                      />
+                      <path
+                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Voir la réaction
+          </button>
+          <button
+            class="btn error ms-2"
+            data-testid="test-delete-reaction"
+          >
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-trash-2"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="trash-2"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
         </div>
       </div>
       <div
-        className="c5"
+        class="c9"
+        data-testid="test-notif-reaction"
       >
-        <button
-          className="btn dark"
+        <div
+          class="c5"
         >
           <span
-            className="me-2 icon"
+            class="icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#fff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-bell-outline"
+                fill="#212121"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="bell"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4zM5.51 16l1.18-1.18a2 2 0 0 0 .59-1.42V8.73A4.73 4.73 0 0 1 8.9 5.17 4.67 4.67 0 0 1 12.64 4a4.86 4.86 0 0 1 4.08 4.9v4.5a2 2 0 0 0 .58 1.42L18.49 16z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
-          Voir la réaction
-        </button>
-        <button
-          className="btn error ms-2"
-          data-test-id="test-delete-reaction"
-          onClick={[Function]}
+          <div
+            class="c10"
+          >
+            Nouvelle réaction sur la fiche :
+          </div>
+          <div
+            class="c8"
+          >
+            titre info2
+          </div>
+        </div>
+        <div
+          class="c5"
         >
-          <span
-            className="icon"
+          <button
+            class="btn dark"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash-2" fill="#fff"><g data-name="Layer 2"><g data-name="trash-2"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </button>
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-eye"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="eye"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="1.5"
+                      />
+                      <path
+                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Voir la réaction
+          </button>
+          <button
+            class="btn error ms-2"
+            data-testid="test-delete-reaction"
+          >
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-trash-2"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="trash-2"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0zm0-11.67c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4zM16 16a1 1 0 0 1-2 0v-4a1 1 0 0 1 2 0z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserProfile/__test__/__snapshots__/UserProfile.component.test.tsx.snap b/client/src/components/Backend/screens/UserProfile/__test__/__snapshots__/UserProfile.component.test.tsx.snap
index e2e5a32029..41147a7440 100644
--- a/client/src/components/Backend/screens/UserProfile/__test__/__snapshots__/UserProfile.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserProfile/__test__/__snapshots__/UserProfile.component.test.tsx.snap
@@ -1,772 +1,731 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserProfile should render correctly 1`] = `
-<div
-  className="container"
->
+<DocumentFragment>
   <div
-    className="wrapper"
+    class="container"
   >
     <div
-      className="mb-10 align-items-center row"
+      class="wrapper"
     >
       <div
-        className="col"
+        class="mb-10 align-items-center row"
       >
-        <h1>
-          Mon profil
-        </h1>
-      </div>
-      <div
-        className="text-end text-nowrap col"
-      >
-        <button
-          className="fr-btn fr-btn--secondary fr-btn--sm fr-icon-error-warning-line fr-btn--icon-right danger ms-2"
-          disabled={false}
-          id="fr-button-:r0:"
-          onClick={[Function]}
-          style={{}}
+        <div
+          class="col"
         >
-          Supprimer mon profil
-        </button>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="flex-grow-0 col"
-      >
-        <h2>
-          Photo de profil
-        </h2>
+          <h1>
+            Mon profil
+          </h1>
+        </div>
         <div
-          className="block"
+          class="text-end text-nowrap col"
         >
-          <div
-            className="container"
+          <button
+            class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-error-warning-line fr-btn--icon-right danger ms-2"
+            id="fr-button-:r0:"
           >
-            <div
-              className="avatar"
-            >
-              <img
-                alt="user picture"
-                data-nimg="1"
-                decoding="async"
-                height={160}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={160}
-              />
-            </div>
-            <p
-              className="small my-4"
-            >
-              Votre photo apparaît sur les fiches auxquelles vous contribuez.
-            </p>
-            <button
-              className="fr-btn fr-btn--secondary fr-btn--sm fr-icon-image-edit-line fr-btn--icon-right position-relative"
-            >
-              Modifier ma photo
-              <input
-                id="avatar"
-                onChange={[Function]}
-                type="file"
-              />
-            </button>
-          </div>
+            Supprimer mon profil
+          </button>
         </div>
       </div>
       <div
-        className="col"
+        class="row"
       >
         <div
-          className="d-flex align-items-center justify-content-between"
+          class="flex-grow-0 col"
         >
           <h2>
-            Informations personnelles
+            Photo de profil
           </h2>
-          <button
-            className="fr-btn fr-btn--secondary fr-btn--sm fr-icon-edit-box-line fr-btn--icon-right fix_align"
-            id="fr-button-:r1:"
-            onClick={[Function]}
-            style={{}}
+          <div
+            class="block"
           >
-            Modifier mes informations personnelles
-          </button>
+            <div
+              class="container"
+            >
+              <div
+                class="avatar"
+              >
+                <img
+                  alt="user picture"
+                  data-nimg="1"
+                  decoding="async"
+                  height="160"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="160"
+                />
+              </div>
+              <p
+                class="small my-4"
+              >
+                Votre photo apparaît sur les fiches auxquelles vous contribuez.
+              </p>
+              <button
+                class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-image-edit-line fr-btn--icon-right position-relative"
+              >
+                Modifier ma photo
+                <input
+                  id="avatar"
+                  type="file"
+                />
+              </button>
+            </div>
+          </div>
         </div>
         <div
-          className="block form mb-10"
+          class="col"
         >
-          <form
-            onSubmit={[Function]}
+          <div
+            class="d-flex align-items-center justify-content-between"
           >
-            <div
-              className="fr-input-group"
+            <h2>
+              Informations personnelles
+            </h2>
+            <button
+              class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-edit-box-line fr-btn--icon-right fix_align"
+              id="fr-button-:r1:"
             >
-              <label
-                className="fr-label"
-                htmlFor="input-:r2:"
+              Modifier mes informations personnelles
+            </button>
+          </div>
+          <div
+            class="block form mb-10"
+          >
+            <form>
+              <div
+                class="fr-input-group"
               >
-                Pseudonyme public
-                <span
-                  className="fr-hint-text"
+                <label
+                  class="fr-label"
+                  for="input-:r2:"
                 >
-                  Votre pseudonyme apparaît sur les fiches auxquelles vous contribuez.
-                </span>
-              </label>
-              <input
-                aria-describedby="input-:r2:-desc-error"
-                className="fr-input"
-                id="input-:r2:"
-                name="pseudo"
-                onChange={[Function]}
-                readOnly={true}
-                title="pseudo-input"
-                type="text"
-                value="test"
-              />
-            </div>
-            <div
-              className="fr-input-group empty"
-            >
-              <label
-                className="fr-label"
-                htmlFor="input-:r3:"
+                  Pseudonyme public
+                  <span
+                    class="fr-hint-text"
+                  >
+                    Votre pseudonyme apparaît sur les fiches auxquelles vous contribuez.
+                  </span>
+                </label>
+                <input
+                  aria-describedby="input-:r2:-desc-error"
+                  class="fr-input"
+                  id="input-:r2:"
+                  name="pseudo"
+                  readonly=""
+                  title="pseudo-input"
+                  type="text"
+                  value="test"
+                />
+              </div>
+              <div
+                class="fr-input-group empty"
               >
-                Prénom
-                <span
-                  className="fr-hint-text"
+                <label
+                  class="fr-label"
+                  for="input-:r3:"
                 >
-                  Votre prénom n’est pas public, il est utilisé pour échanger avec vous directement.
-                </span>
-              </label>
-              <input
-                aria-describedby="input-:r3:-desc-error"
-                className="fr-input"
-                id="input-:r3:"
-                name="firstName"
-                onChange={[Function]}
-                readOnly={true}
-                title="firstname-input"
-                type="text"
-                value="Non défini"
-              />
-            </div>
-            <div
-              className="fr-input-group empty"
-            >
-              <label
-                className="fr-label"
-                htmlFor="input-:r4:"
+                  Prénom
+                  <span
+                    class="fr-hint-text"
+                  >
+                    Votre prénom n’est pas public, il est utilisé pour échanger avec vous directement.
+                  </span>
+                </label>
+                <input
+                  aria-describedby="input-:r3:-desc-error"
+                  class="fr-input"
+                  id="input-:r3:"
+                  name="firstName"
+                  readonly=""
+                  title="firstname-input"
+                  type="text"
+                  value="Non défini"
+                />
+              </div>
+              <div
+                class="fr-input-group empty"
               >
-                Email
-                <span
-                  className="fr-hint-text"
+                <label
+                  class="fr-label"
+                  for="input-:r4:"
+                >
+                  Email
+                  <span
+                    class="fr-hint-text"
+                  />
+                </label>
+                <input
+                  aria-describedby="input-:r4:-desc-error"
+                  class="fr-input"
+                  id="input-:r4:"
+                  name="email"
+                  readonly=""
+                  title="email-input"
+                  type="text"
+                  value="Non défini"
                 />
-              </label>
-              <input
-                aria-describedby="input-:r4:-desc-error"
-                className="fr-input"
-                id="input-:r4:"
-                name="email"
-                onChange={[Function]}
-                readOnly={true}
-                title="email-input"
-                type="text"
-                value="Non défini"
-              />
-            </div>
-            <div
-              className="fr-input-group empty"
-            >
-              <label
-                className="fr-label"
-                htmlFor="input-:r5:"
+              </div>
+              <div
+                class="fr-input-group empty"
               >
-                Téléphone
-              </label>
-              <input
-                aria-describedby="input-:r5:-desc-error"
-                className="fr-input"
-                id="input-:r5:"
-                name="phone"
-                onChange={[Function]}
-                readOnly={true}
-                title="phone-input"
-                type="text"
-                value="Non défini"
-              />
-            </div>
-            <div
-              className="fr-input-group"
-            >
-              <label
-                className="fr-label"
-                htmlFor="input-:r6:"
+                <label
+                  class="fr-label"
+                  for="input-:r5:"
+                >
+                  Téléphone
+                </label>
+                <input
+                  aria-describedby="input-:r5:-desc-error"
+                  class="fr-input"
+                  id="input-:r5:"
+                  name="phone"
+                  readonly=""
+                  title="phone-input"
+                  type="text"
+                  value="Non défini"
+                />
+              </div>
+              <div
+                class="fr-input-group"
               >
-                Mot de passe actuel
-              </label>
-              <input
-                aria-describedby="input-:r6:-desc-error"
-                className="fr-input"
-                id="input-:r6:"
-                name="fake-password-input"
-                readOnly={true}
-                title="fake-password-input"
-                type="text"
-                value="********"
-              />
-            </div>
+                <label
+                  class="fr-label"
+                  for="input-:r6:"
+                >
+                  Mot de passe actuel
+                </label>
+                <input
+                  aria-describedby="input-:r6:-desc-error"
+                  class="fr-input"
+                  id="input-:r6:"
+                  name="fake-password-input"
+                  readonly=""
+                  title="fake-password-input"
+                  type="text"
+                  value="********"
+                />
+              </div>
+              <button
+                class="fr-link link link"
+                type="button"
+              >
+                Mot de passe oublié ?
+              </button>
+            </form>
             <button
-              className="fr-link link link"
-              onClick={[Function]}
+              aria-controls="user-email-code-modal"
+              aria-hidden="true"
+              class="fr-btn fr-hidden"
+              data-fr-opened="false"
+              id="user-email-code-modal-hidden-control-button"
+              tabindex="-1"
               type="button"
             >
-              Mot de passe oublié ?
+               
             </button>
-          </form>
-          <button
-            aria-controls="user-email-code-modal"
-            aria-hidden={true}
-            className="fr-btn fr-hidden"
-            data-fr-opened={false}
-            id="user-email-code-modal-hidden-control-button"
-            style={{}}
-            tabIndex={-1}
-            type="button"
-          >
-             
-          </button>
-          <dialog
-            aria-labelledby="fr-modal-title-user-email-code-modal"
-            className="fr-modal"
-            data-fr-concealing-backdrop={true}
-            id="user-email-code-modal"
-            role="dialog"
-          >
-            <div
-              className="fr-container fr-container--fluid fr-container-md"
+            <dialog
+              aria-labelledby="fr-modal-title-user-email-code-modal"
+              class="fr-modal"
+              data-fr-concealing-backdrop="true"
+              id="user-email-code-modal"
+              role="dialog"
             >
               <div
-                className="fr-grid-row fr-grid-row--center"
+                class="fr-container fr-container--fluid fr-container-md"
               >
                 <div
-                  className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+                  class="fr-grid-row fr-grid-row--center"
                 >
                   <div
-                    className="fr-modal__body"
+                    class="fr-col-12 fr-col-md-8 fr-col-lg-6"
                   >
                     <div
-                      className="fr-modal__header"
+                      class="fr-modal__body"
                     >
-                      <button
-                        aria-controls="user-email-code-modal"
-                        className="fr-btn--close fr-btn"
-                        title="Fermer"
-                        type="button"
+                      <div
+                        class="fr-modal__header"
                       >
-                        Fermer
-                      </button>
-                    </div>
-                    <div
-                      className="fr-modal__content"
-                    >
-                      <h1
-                        className="fr-modal__title"
-                        id="fr-modal-title-user-email-code-modal"
+                        <button
+                          aria-controls="user-email-code-modal"
+                          class="fr-btn--close fr-btn"
+                          title="Fermer"
+                          type="button"
+                        >
+                          Fermer
+                        </button>
+                      </div>
+                      <div
+                        class="fr-modal__content"
                       >
-                        Entrez le code reçu
-                      </h1>
+                        <h1
+                          class="fr-modal__title"
+                          id="fr-modal-title-user-email-code-modal"
+                        >
+                          Entrez le code reçu
+                        </h1>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </dialog>
-          <button
-            aria-controls="user-password-modal"
-            aria-hidden={true}
-            className="fr-btn fr-hidden"
-            data-fr-opened={false}
-            id="user-password-modal-hidden-control-button"
-            style={{}}
-            tabIndex={-1}
-            type="button"
-          >
-             
-          </button>
-          <dialog
-            aria-labelledby="fr-modal-title-user-password-modal"
-            className="fr-modal"
-            data-fr-concealing-backdrop={true}
-            id="user-password-modal"
-            role="dialog"
-          >
-            <div
-              className="fr-container fr-container--fluid fr-container-md"
+            </dialog>
+            <button
+              aria-controls="user-password-modal"
+              aria-hidden="true"
+              class="fr-btn fr-hidden"
+              data-fr-opened="false"
+              id="user-password-modal-hidden-control-button"
+              tabindex="-1"
+              type="button"
+            >
+               
+            </button>
+            <dialog
+              aria-labelledby="fr-modal-title-user-password-modal"
+              class="fr-modal"
+              data-fr-concealing-backdrop="true"
+              id="user-password-modal"
+              role="dialog"
             >
               <div
-                className="fr-grid-row fr-grid-row--center"
+                class="fr-container fr-container--fluid fr-container-md"
               >
                 <div
-                  className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+                  class="fr-grid-row fr-grid-row--center"
                 >
                   <div
-                    className="fr-modal__body"
+                    class="fr-col-12 fr-col-md-8 fr-col-lg-6"
                   >
                     <div
-                      className="fr-modal__header"
+                      class="fr-modal__body"
                     >
-                      <button
-                        aria-controls="user-password-modal"
-                        className="fr-btn--close fr-btn"
-                        title="Fermer"
-                        type="button"
+                      <div
+                        class="fr-modal__header"
                       >
-                        Fermer
-                      </button>
-                    </div>
-                    <div
-                      className="fr-modal__content"
-                    >
-                      <h1
-                        className="fr-modal__title"
-                        id="fr-modal-title-user-password-modal"
-                      >
-                        Mot de passe oublié
-                      </h1>
-                      <p>
-                        Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
-                      </p>
-                      <form
-                        className="container"
-                        onSubmit={[Function]}
+                        <button
+                          aria-controls="user-password-modal"
+                          class="fr-btn--close fr-btn"
+                          title="Fermer"
+                          type="button"
+                        >
+                          Fermer
+                        </button>
+                      </div>
+                      <div
+                        class="fr-modal__content"
                       >
-                        <div
-                          className="fr-input-group mb-0"
+                        <h1
+                          class="fr-modal__title"
+                          id="fr-modal-title-user-password-modal"
                         >
-                          <label
-                            className="fr-label"
-                            htmlFor="input-:r9:"
-                          >
-                            Adresse mail
-                          </label>
-                          <input
-                            aria-describedby="input-:r9:-desc-error"
-                            autoFocus={true}
-                            className="fr-input"
-                            defaultValue=""
-                            id="input-:r9:"
-                            name="email"
-                            type="email"
-                          />
-                        </div>
-                        <div
-                          className="text-end"
+                          Mot de passe oublié
+                        </h1>
+                        <p>
+                          Nous allons vous envoyer un mail avec des instructions pour le réinitialiser.
+                        </p>
+                        <form
+                          class="container"
                         >
-                          <button
-                            className="fr-btn fr-icon-mail-line fr-btn--icon-right button mt"
-                            id="fr-button-:ra:"
-                            style={{}}
-                            type="submit"
+                          <div
+                            class="fr-input-group mb-0"
                           >
-                            Envoyer le lien de réinitialisation
-                          </button>
-                        </div>
-                      </form>
+                            <label
+                              class="fr-label"
+                              for="input-:r9:"
+                            >
+                              Adresse mail
+                            </label>
+                            <input
+                              aria-describedby="input-:r9:-desc-error"
+                              class="fr-input"
+                              id="input-:r9:"
+                              name="email"
+                              type="email"
+                              value=""
+                            />
+                          </div>
+                          <div
+                            class="text-end"
+                          >
+                            <button
+                              class="fr-btn fr-icon-mail-line fr-btn--icon-right button mt"
+                              id="fr-button-:ra:"
+                              type="submit"
+                            >
+                              Envoyer le lien de réinitialisation
+                            </button>
+                          </div>
+                        </form>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </dialog>
-        </div>
-        <h2>
-          Préférences
-        </h2>
-        <div
-          className="block mb-4"
-        >
+            </dialog>
+          </div>
+          <h2>
+            Préférences
+          </h2>
           <div
-            className="d-flex justify-content-between mb-3"
+            class="block mb-4"
           >
-            <label
-              className="label"
+            <div
+              class="d-flex justify-content-between mb-3"
             >
-              Départements pour la recherche
-            </label>
-            <button
-              className="button"
-              onClick={[Function]}
+              <label
+                class="label"
+              >
+                Départements pour la recherche
+              </label>
+              <button
+                class="button"
+              >
+                <i
+                  class="fr-icon-map-pin-2-line icon"
+                />
+                Modifier
+              </button>
+            </div>
+            <p
+              class="empty"
             >
-              <i
-                className="fr-icon-map-pin-2-line icon"
-              />
-              Modifier
-            </button>
+              Non défini
+            </p>
           </div>
-          <p
-            className="empty"
-          >
-            Non défini
-          </p>
-        </div>
-        <div
-          className="block"
-        >
-          <label
-            className="label mb-2"
-            htmlFor="newsletter"
-          >
-            Communication par email
-          </label>
           <div
-            className="fr-toggle"
-            id="fr-toggle-:rb:"
+            class="block"
           >
-            <input
-              aria-describedby="fr-toggle-:rb:-hint-text"
-              checked={false}
-              className="fr-toggle__input"
-              disabled={true}
-              id="fr-toggle-:rb:-input"
-              onChange={[Function]}
-              type="checkbox"
-            />
             <label
-              className="fr-toggle__label"
-              htmlFor="fr-toggle-:rb:-input"
+              class="label mb-2"
+              for="newsletter"
             >
-              <span>
-                <strong>
-                  La lettre d’information de Réfugiés.info
-                </strong>
-                 : actualités, nouveaux contenus, mises à jour, événements.
-              </span>
+              Communication par email
             </label>
-            <p
-              className="fr-hint-text"
-              id="fr-toggle-:rb:-hint-text"
+            <div
+              class="fr-toggle"
+              id="fr-toggle-:rb:"
             >
-              Maximum 1 fois par mois
-            </p>
+              <input
+                aria-describedby="fr-toggle-:rb:-hint-text"
+                class="fr-toggle__input"
+                disabled=""
+                id="fr-toggle-:rb:-input"
+                type="checkbox"
+              />
+              <label
+                class="fr-toggle__label"
+                for="fr-toggle-:rb:-input"
+              >
+                <span>
+                  <strong>
+                    La lettre d’information de Réfugiés.info
+                  </strong>
+                   : actualités, nouveaux contenus, mises à jour, événements.
+                </span>
+              </label>
+              <p
+                class="fr-hint-text"
+                id="fr-toggle-:rb:-hint-text"
+              >
+                Maximum 1 fois par mois
+              </p>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <button
-    aria-controls="user-departments-modal"
-    aria-hidden={true}
-    className="fr-btn fr-hidden"
-    data-fr-opened={false}
-    id="user-departments-modal-hidden-control-button"
-    style={{}}
-    tabIndex={-1}
-    type="button"
-  >
-     
-  </button>
-  <dialog
-    aria-labelledby="fr-modal-title-user-departments-modal"
-    className="fr-modal"
-    data-fr-concealing-backdrop={true}
-    id="user-departments-modal"
-    role="dialog"
-  >
-    <div
-      className="fr-container fr-container--fluid fr-container-md"
+    <button
+      aria-controls="user-departments-modal"
+      aria-hidden="true"
+      class="fr-btn fr-hidden"
+      data-fr-opened="false"
+      id="user-departments-modal-hidden-control-button"
+      tabindex="-1"
+      type="button"
+    >
+       
+    </button>
+    <dialog
+      aria-labelledby="fr-modal-title-user-departments-modal"
+      class="fr-modal"
+      data-fr-concealing-backdrop="true"
+      id="user-departments-modal"
+      role="dialog"
     >
       <div
-        className="fr-grid-row fr-grid-row--center"
+        class="fr-container fr-container--fluid fr-container-md"
       >
         <div
-          className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+          class="fr-grid-row fr-grid-row--center"
         >
           <div
-            className="fr-modal__body"
+            class="fr-col-12 fr-col-md-8 fr-col-lg-6"
           >
             <div
-              className="fr-modal__header"
+              class="fr-modal__body"
             >
-              <button
-                aria-controls="user-departments-modal"
-                className="fr-btn--close fr-btn"
-                title="Fermer"
-                type="button"
-              >
-                Fermer
-              </button>
-            </div>
-            <div
-              className="fr-modal__content"
-            >
-              <h1
-                className="fr-modal__title"
-                id="fr-modal-title-user-departments-modal"
-              >
-                Départements pour la recherche
-              </h1>
-              <p
-                className="mb-8"
-              >
-                Nous vous montrerons uniquement les contenus susceptibles de vous intéresser. Les démarches nationales resteront visibles.
-              </p>
-              <form
-                onSubmit={[Function]}
+              <div
+                class="fr-modal__header"
               >
-                <label
-                  className="fr-label mb-2"
-                  htmlFor="location"
+                <button
+                  aria-controls="user-departments-modal"
+                  class="fr-btn--close fr-btn"
+                  title="Fermer"
+                  type="button"
                 >
-                  Nom ou numéro du département
-                  <span
-                    className="fr-hint-text"
-                  >
-                    Plusieurs choix possibles
-                  </span>
-                </label>
-                <div
-                  className="position-relative"
+                  Fermer
+                </button>
+              </div>
+              <div
+                class="fr-modal__content"
+              >
+                <h1
+                  class="fr-modal__title"
+                  id="fr-modal-title-user-departments-modal"
                 >
-                  <div />
-                </div>
-                <div
-                  className="text-end"
+                  Départements pour la recherche
+                </h1>
+                <p
+                  class="mb-8"
                 >
-                  <button
-                    className="fr-btn fr-icon-check-line fr-btn--icon-right button mt-12"
-                    disabled={true}
-                    id="fr-button-:rd:"
-                    style={{}}
-                    type="submit"
+                  Nous vous montrerons uniquement les contenus susceptibles de vous intéresser. Les démarches nationales resteront visibles.
+                </p>
+                <form>
+                  <label
+                    class="fr-label mb-2"
+                    for="location"
                   >
-                    Valider
-                  </button>
-                </div>
-              </form>
+                    Nom ou numéro du département
+                    <span
+                      class="fr-hint-text"
+                    >
+                      Plusieurs choix possibles
+                    </span>
+                  </label>
+                  <div
+                    class="position-relative"
+                  >
+                    <div />
+                  </div>
+                  <div
+                    class="text-end"
+                  >
+                    <button
+                      class="fr-btn fr-icon-check-line fr-btn--icon-right button mt-12"
+                      disabled=""
+                      id="fr-button-:rd:"
+                      type="submit"
+                    >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </dialog>
-  <button
-    aria-controls="user-language-modal"
-    aria-hidden={true}
-    className="fr-btn fr-hidden"
-    data-fr-opened={false}
-    id="user-language-modal-hidden-control-button"
-    style={{}}
-    tabIndex={-1}
-    type="button"
-  >
-     
-  </button>
-  <dialog
-    aria-labelledby="fr-modal-title-user-language-modal"
-    className="fr-modal"
-    data-fr-concealing-backdrop={true}
-    id="user-language-modal"
-    role="dialog"
-  >
-    <div
-      className="fr-container fr-container--fluid fr-container-md"
+    </dialog>
+    <button
+      aria-controls="user-language-modal"
+      aria-hidden="true"
+      class="fr-btn fr-hidden"
+      data-fr-opened="false"
+      id="user-language-modal-hidden-control-button"
+      tabindex="-1"
+      type="button"
+    >
+       
+    </button>
+    <dialog
+      aria-labelledby="fr-modal-title-user-language-modal"
+      class="fr-modal"
+      data-fr-concealing-backdrop="true"
+      id="user-language-modal"
+      role="dialog"
     >
       <div
-        className="fr-grid-row fr-grid-row--center"
+        class="fr-container fr-container--fluid fr-container-md"
       >
         <div
-          className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+          class="fr-grid-row fr-grid-row--center"
         >
           <div
-            className="fr-modal__body"
+            class="fr-col-12 fr-col-md-8 fr-col-lg-6"
           >
             <div
-              className="fr-modal__header"
+              class="fr-modal__body"
             >
-              <button
-                aria-controls="user-language-modal"
-                className="fr-btn--close fr-btn"
-                title="Fermer"
-                type="button"
-              >
-                Fermer
-              </button>
-            </div>
-            <div
-              className="fr-modal__content"
-            >
-              <h1
-                className="fr-modal__title"
-                id="fr-modal-title-user-language-modal"
+              <div
+                class="fr-modal__header"
               >
-                <div
-                  className="mb-6"
+                <button
+                  aria-controls="user-language-modal"
+                  class="fr-btn--close fr-btn"
+                  title="Fermer"
+                  type="button"
                 >
-                  Langues de traduction
-                </div>
-              </h1>
-              <form
-                onSubmit={[Function]}
+                  Fermer
+                </button>
+              </div>
+              <div
+                class="fr-modal__content"
               >
-                <label
-                  className="choice mb-4 rounded-0"
-                  htmlFor="language"
-                  onClick={[Function]}
+                <h1
+                  class="fr-modal__title"
+                  id="fr-modal-title-user-language-modal"
                 >
-                  <input
-                    defaultChecked={false}
-                    name="language"
-                    type="checkbox"
-                    value="en"
-                  />
-                  <i
-                    className="ri-checkbox-blank-line me-2"
-                  />
-                  <span
-                    className="text"
+                  <div
+                    class="mb-6"
                   >
-                    <strong>
-                      Anglais
-                    </strong>
-                     - 
-                    English
-                  </span>
-                  <span
-                    className="flag fi fi-en"
-                    title="en"
-                  />
-                </label>
-                <div
-                  className="text-end"
-                >
-                  <button
-                    className="fr-btn fr-icon-check-line fr-btn--icon-right button mt-8"
-                    disabled={true}
-                    id="fr-button-:rf:"
-                    style={{}}
-                    type="submit"
+                    Langues de traduction
+                  </div>
+                </h1>
+                <form>
+                  <label
+                    class="choice mb-4 rounded-0"
+                    for="language"
                   >
-                    Valider
-                  </button>
-                </div>
-              </form>
+                    <input
+                      name="language"
+                      type="checkbox"
+                      value="en"
+                    />
+                    <i
+                      class="ri-checkbox-blank-line me-2"
+                    />
+                    <span
+                      class="text"
+                    >
+                      <strong>
+                        Anglais
+                      </strong>
+                       - English
+                    </span>
+                    <span
+                      class="flag fi fi-en"
+                      title="en"
+                    />
+                  </label>
+                  <div
+                    class="text-end"
+                  >
+                    <button
+                      class="fr-btn fr-icon-check-line fr-btn--icon-right button mt-8"
+                      disabled=""
+                      id="fr-button-:rf:"
+                      type="submit"
+                    >
+                      Valider
+                    </button>
+                  </div>
+                </form>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </dialog>
-  <button
-    aria-controls="delete-account-modal"
-    aria-hidden={true}
-    className="fr-btn fr-hidden"
-    data-fr-opened={false}
-    id="delete-account-modal-hidden-control-button"
-    style={{}}
-    tabIndex={-1}
-    type="button"
-  >
-     
-  </button>
-  <dialog
-    aria-labelledby="fr-modal-title-delete-account-modal"
-    className="fr-modal"
-    data-fr-concealing-backdrop={true}
-    id="delete-account-modal"
-    role="dialog"
-  >
-    <div
-      className="fr-container fr-container--fluid fr-container-md"
+    </dialog>
+    <button
+      aria-controls="delete-account-modal"
+      aria-hidden="true"
+      class="fr-btn fr-hidden"
+      data-fr-opened="false"
+      id="delete-account-modal-hidden-control-button"
+      tabindex="-1"
+      type="button"
+    >
+       
+    </button>
+    <dialog
+      aria-labelledby="fr-modal-title-delete-account-modal"
+      class="fr-modal"
+      data-fr-concealing-backdrop="true"
+      id="delete-account-modal"
+      role="dialog"
     >
       <div
-        className="fr-grid-row fr-grid-row--center"
+        class="fr-container fr-container--fluid fr-container-md"
       >
         <div
-          className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+          class="fr-grid-row fr-grid-row--center"
         >
           <div
-            className="fr-modal__body"
+            class="fr-col-12 fr-col-md-8 fr-col-lg-6"
           >
             <div
-              className="fr-modal__header"
+              class="fr-modal__body"
             >
-              <button
-                aria-controls="delete-account-modal"
-                className="fr-btn--close fr-btn"
-                title="Fermer"
-                type="button"
-              >
-                Fermer
-              </button>
-            </div>
-            <div
-              className="fr-modal__content"
-            >
-              <h1
-                className="fr-modal__title"
-                id="fr-modal-title-delete-account-modal"
+              <div
+                class="fr-modal__header"
               >
-                Êtes-vous sûrs de vouloir supprimer votre compte ?
-              </h1>
-              <p
-                className="mb-8"
+                <button
+                  aria-controls="delete-account-modal"
+                  class="fr-btn--close fr-btn"
+                  title="Fermer"
+                  type="button"
+                >
+                  Fermer
+                </button>
+              </div>
+              <div
+                class="fr-modal__content"
               >
-                Vous perdrez l'accès à vos favoris ainsi qu'à votre structure et aux fiches que vous avez rédigées.
-              </p>
-            </div>
-            <div
-              className="fr-modal__footer"
-            >
-              <ul
-                className="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
+                <h1
+                  class="fr-modal__title"
+                  id="fr-modal-title-delete-account-modal"
+                >
+                  Êtes-vous sûrs de vouloir supprimer votre compte ?
+                </h1>
+                <p
+                  class="mb-8"
+                >
+                  Vous perdrez l'accès à vos favoris ainsi qu'à votre structure et aux fiches que vous avez rédigées.
+                </p>
+              </div>
+              <div
+                class="fr-modal__footer"
               >
-                <li>
-                  <button
-                    aria-controls="delete-account-modal"
-                    className="fr-btn fr-icon-delete-bin-line fr-btn--icon-left danger"
-                    disabled={false}
-                    id="fr-button-:rh:"
-                    onClick={[Function]}
-                    style={{}}
-                  >
-                    Supprimer mon compte
-                  </button>
-                </li>
-                <li>
-                  <button
-                    aria-controls="delete-account-modal"
-                    className="fr-btn fr-btn--secondary"
-                    disabled={false}
-                    id="fr-button-:ri:"
-                    onClick={[Function]}
-                    style={{}}
-                  >
-                    Annuler
-                  </button>
-                </li>
-              </ul>
+                <ul
+                  class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
+                >
+                  <li>
+                    <button
+                      aria-controls="delete-account-modal"
+                      class="fr-btn fr-icon-delete-bin-line fr-btn--icon-left danger"
+                      id="fr-button-:rh:"
+                    >
+                      Supprimer mon compte
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      aria-controls="delete-account-modal"
+                      class="fr-btn fr-btn--secondary"
+                      id="fr-button-:ri:"
+                    >
+                      Annuler
+                    </button>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </dialog>
-</div>
+    </dialog>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`UserProfile should render correctly when loading 1`] = `
-<div>
-  Une erreur est survenue, veuillez recharger la page !
-</div>
+<DocumentFragment>
+  <div>
+    Une erreur est survenue, veuillez recharger la page !
+  </div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
index cbdaa0ab19..eedd49b5a2 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserStructure should render correctly when add member modal is open 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -143,31 +144,6 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   max-width: 190px;
 }
 
-.c17 {
-  font-weight: normal;
-  font-size: 32px;
-  line-height: 40px;
-}
-
-.c19 {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-.c18 {
-  background: #2d9cdb;
-  border-radius: 12px;
-  padding: 16px;
-  margin-top: 15px;
-  font-style: normal;
-  font-size: 16px;
-  line-height: 20px;
-  color: #ffffff;
-  margin-bottom: 15px;
-}
-
 .c2 {
   font-weight: bold;
   font-size: 22px;
@@ -183,538 +159,468 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0 container"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0 container"
     >
-      <img
-        alt="ACRO"
-        className="sponsor_img"
-        data-nimg="1"
-        decoding="async"
-        height={115}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-            "objectFit": "contain",
-          }
-        }
-        width={235}
-      />
       <div
-        className="c2"
-      >
-        structureTest
-      </div>
-      <a
-        className="btn dark"
-        href="/directory/structureId"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
+        class="c1"
       >
-        <span
-          className="me-2 icon"
+        <img
+          alt="ACRO"
+          class="sponsor_img"
+          data-nimg="1"
+          decoding="async"
+          height="115"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent; object-fit: contain;"
+          width="235"
+        />
+        <div
+          class="c2"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-book-outline" fill="#fff"><g data-name="Layer 2"><g data-name="book"><rect width="24" height="24" opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Voir dans l'annuaire
-      </a>
-    </div>
-    <div
-      className="c3"
-    >
+          structureTest
+        </div>
+        <a
+          class="btn dark"
+          href="/directory/structureId"
+        >
+          <span
+            class="me-2 icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-book-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="book"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Voir dans l'annuaire
+        </a>
+      </div>
       <div
-        className="c4"
+        class="c3"
       >
         <div
-          className="c5"
+          class="c4"
         >
           <div
-            className="c6"
-          >
-            Membres
-          </div>
-          <div
-            className="c7"
+            class="c5"
           >
-            2
+            <div
+              class="c6"
+            >
+              Membres
+            </div>
+            <div
+              class="c7"
+            >
+              2
+            </div>
+            <div
+              class="c6"
+            />
           </div>
-          <div
-            className="c6"
-          />
-        </div>
-        <div>
-          <button
-            className="btn dark"
-            data-test-id="test-add-member"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
+          <div>
+            <button
+              class="btn dark"
+              data-testid="test-add-member"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="person-add"><rect width="24" height="24" opacity="0"/><path d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"/><path d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Ajouter un membre
-          </button>
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-person-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="person-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"
+                        />
+                        <path
+                          d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                        />
+                        <path
+                          d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Ajouter un membre
+            </button>
+          </div>
         </div>
-      </div>
-      <div
-        className="table-responsive"
-      >
-        <table
-          className="table table-borderless"
+        <div
+          class="table-responsive"
         >
-          <thead>
-            <tr>
-              <th>
-                Nom
-              </th>
-              <th>
-                Role
-              </th>
-              <th>
-                Dernière connexion
-              </th>
-              <th>
-                Ajouté le
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
+          <table
+            class="table table-borderless"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Nom
+                </th>
+                <th>
+                  Role
+                </th>
+                <th>
+                  Dernière connexion
+                </th>
+                <th>
+                  Ajouté le
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="membres-table"
               >
-                <div
-                  className="c8"
+                <td
+                  class="align-middle"
                 >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
                   <div
-                    className="c9"
-                    isUser={true}
+                    class="c8"
                   >
-                    membre2
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c9"
+                    >
+                      membre2
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c10"
-                  isUser={true}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                  <div
+                    class="c10"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    class="c11"
                   >
-                    <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c11"
+                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    style="display: flex; flex-direction: row;"
+                  >
+                    <div
+                      class="c12"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="c13"
+                      data-testid="delete-button"
+                      hovercolor="#f44336"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
                   </div>
+                </td>
+              </tr>
+              <tr
+                class="membres-table"
+              >
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
+                    class="c8"
                   >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c14"
                     >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                      membre1
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
                   <div
-                    className="c14"
-                    isUser={false}
+                    class="c15"
                   >
-                    membre1
+                    Rédacteur
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c15"
-                  isUser={false}
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
+                  <div
+                    class="c16"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                  <div
+                    class="c16"
+                  />
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    style="display: flex; flex-direction: row;"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c12"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
-                  >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c13"
+                      data-testid="delete-button"
+                      hovercolor="#f44336"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div>
-      <div
-        className="c17"
-      >
-        Ajouter un membre
-      </div>
-      <div
-        className="c18"
-      >
-        <b>
-          Attention :
-        </b>
-         assurez-vous que la personne que vous souhaitez ajouter a déjà créé un compte sur réfugiés.info.
-      </div>
-      <div>
-        <div
-          className="input mb-2 input-group"
-        >
-          <input
-            autoFocus={true}
-            className="new_size form-control"
-            id="value"
-            onChange={[Function]}
-            readOnly={false}
-            style={{}}
-            type="text"
-            value=""
-          />
-          <span
-            className="append input-group-text"
-          >
-            <span
-              className="icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-search-outline" fill="#212121"><g data-name="Layer 2"><g data-name="search"><rect width="24" height="24" opacity="0"/><path d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-          </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
-      <div
-        className="c19"
-      >
-        <button
-          className="btn outline-black me-2"
-          onClick={[Function]}
-        >
-          <span
-            className="me-2 icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#fff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          Annuler
-        </button>
-        <button
-          className="btn validate"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <span
-            className="me-2 icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#fff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          Ajouter
-        </button>
-      </div>
+      <div />
+      <div />
     </div>
-    <div />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when edit member modal is open, select respo and validate 1`] = `
@@ -2384,7 +2290,8 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 `;
 
 exports[`UserStructure should render correctly when loading 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -2441,123 +2348,95 @@ exports[`UserStructure should render correctly when loading 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="img"
-      />
-      <span
-        aria-busy={true}
-        aria-live="polite"
+        class="c1"
       >
+        <div
+          class="img"
+        />
         <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "--base-color": "#ffffff",
-              "height": 20,
-              "width": 160,
-            }
-          }
+          aria-busy="true"
+          aria-live="polite"
         >
-          ‌
+          <span
+            class="react-loading-skeleton"
+            style="width: 160px; height: 20px; --base-color: #ffffff;"
+          >
+            ‌
+          </span>
+          <br />
         </span>
-        <br />
-      </span>
-    </div>
-    <div
-      className="c2"
-    >
+      </div>
       <div
-        className="c3"
+        class="c2"
       >
         <div
-          className="c4"
-        >
-          Membres
-        </div>
-        <div
-          className="c5"
+          class="c3"
         >
-          ...
+          <div
+            class="c4"
+          >
+            Membres
+          </div>
+          <div
+            class="c5"
+          >
+            ...
+          </div>
+          <div
+            class="c4"
+          />
         </div>
-        <div
-          className="c4"
-        />
-      </div>
-      <span
-        aria-busy={true}
-        aria-live="polite"
-      >
         <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "--base-color": "#ffffff",
-              "height": 50,
-              "width": 700,
-            }
-          }
+          aria-busy="true"
+          aria-live="polite"
         >
-          ‌
+          <span
+            class="react-loading-skeleton"
+            style="width: 700px; height: 50px; --base-color: #ffffff;"
+          >
+            ‌
+          </span>
+          <br />
         </span>
-        <br />
-      </span>
-      <span
-        aria-busy={true}
-        aria-live="polite"
-      >
         <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "--base-color": "#ffffff",
-              "height": 50,
-              "width": 700,
-            }
-          }
+          aria-busy="true"
+          aria-live="polite"
         >
-          ‌
+          <span
+            class="react-loading-skeleton"
+            style="width: 700px; height: 50px; --base-color: #ffffff;"
+          >
+            ‌
+          </span>
+          <br />
         </span>
-        <br />
-      </span>
-      <span
-        aria-busy={true}
-        aria-live="polite"
-      >
         <span
-          className="react-loading-skeleton"
-          style={
-            {
-              "--base-color": "#ffffff",
-              "height": 50,
-              "width": 700,
-            }
-          }
+          aria-busy="true"
+          aria-live="polite"
         >
-          ‌
+          <span
+            class="react-loading-skeleton"
+            style="width: 700px; height: 50px; --base-color: #ffffff;"
+          >
+            ‌
+          </span>
+          <br />
         </span>
-        <br />
-      </span>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when no structure 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   margin-top: 60px;
   display: flex;
   flex-direction: row;
@@ -2574,28 +2453,24 @@ exports[`UserStructure should render correctly when no structure 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
-      Une erreur est survenue. Veuillez recharger la page ou contacter l'équipe de réfugiés.info via le live chat en bas à droite de votre écran.
+      <div
+        class="c1"
+      >
+        Une erreur est survenue. Veuillez recharger la page ou contacter l'équipe de réfugiés.info via le live chat en bas à droite de votre écran.
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when structure with membres when user is redacteur 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -2718,258 +2593,238 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0 container"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0 container"
     >
-      <img
-        alt="ACRO"
-        className="sponsor_img"
-        data-nimg="1"
-        decoding="async"
-        height={115}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-            "objectFit": "contain",
-          }
-        }
-        width={235}
-      />
       <div
-        className="c2"
+        class="c1"
       >
-        structureTest
-      </div>
-      <a
-        className="btn dark"
-        href="/directory/structureId"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          className="me-2 icon"
+        <img
+          alt="ACRO"
+          class="sponsor_img"
+          data-nimg="1"
+          decoding="async"
+          height="115"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent; object-fit: contain;"
+          width="235"
+        />
+        <div
+          class="c2"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-book-outline" fill="#fff"><g data-name="Layer 2"><g data-name="book"><rect width="24" height="24" opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Voir dans l'annuaire
-      </a>
-    </div>
-    <div
-      className="c3"
-    >
+          structureTest
+        </div>
+        <a
+          class="btn dark"
+          href="/directory/structureId"
+        >
+          <span
+            class="me-2 icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-book-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="book"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Voir dans l'annuaire
+        </a>
+      </div>
       <div
-        className="c4"
+        class="c3"
       >
         <div
-          className="c5"
+          class="c4"
         >
           <div
-            className="c6"
-          >
-            Membres
-          </div>
-          <div
-            className="c7"
+            class="c5"
           >
-            2
+            <div
+              class="c6"
+            >
+              Membres
+            </div>
+            <div
+              class="c7"
+            >
+              2
+            </div>
+            <div
+              class="c6"
+            />
           </div>
-          <div
-            className="c6"
-          />
         </div>
-      </div>
-      <div
-        className="table-responsive"
-      >
-        <table
-          className="table table-borderless"
+        <div
+          class="table-responsive"
         >
-          <thead>
-            <tr>
-              <th>
-                Nom
-              </th>
-              <th>
-                Role
-              </th>
-              <th>
-                Dernière connexion
-              </th>
-              <th>
-                Ajouté le
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
-                >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
-                  <div
-                    className="c9"
-                    isUser={true}
-                  >
-                    membre1
-                  </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c10"
-                  isUser={true}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                />
-              </td>
-            </tr>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
+          <table
+            class="table table-borderless"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Nom
+                </th>
+                <th>
+                  Role
+                </th>
+                <th>
+                  Dernière connexion
+                </th>
+                <th>
+                  Ajouté le
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="membres-table"
               >
-                <div
-                  className="c8"
+                <td
+                  class="align-middle"
                 >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
                   <div
-                    className="c12"
-                    isUser={false}
+                    class="c8"
                   >
-                    membre2
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c9"
+                    >
+                      membre1
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c13"
-                  isUser={false}
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c14"
-                  isUser={false}
+                  <div
+                    class="c10"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
+                  <div
+                    class="c11"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c11"
+                  />
+                </td>
+              </tr>
+              <tr
+                class="membres-table"
               >
-                <div
-                  className="c14"
-                  isUser={false}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c8"
+                  >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c12"
+                    >
+                      membre2
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c13"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c14"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c14"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when structure with membres when user is respo 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -3126,434 +2981,466 @@ exports[`UserStructure should render correctly when structure with membres when
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0 container"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
-    >
-      <img
-        alt="ACRO"
-        className="sponsor_img"
-        data-nimg="1"
-        decoding="async"
-        height={115}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-            "objectFit": "contain",
-          }
-        }
-        width={235}
-      />
-      <div
-        className="c2"
-      >
-        structureTest
-      </div>
-      <a
-        className="btn dark"
-        href="/directory/structureId"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          className="me-2 icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-book-outline" fill="#fff"><g data-name="Layer 2"><g data-name="book"><rect width="24" height="24" opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Voir dans l'annuaire
-      </a>
-    </div>
-    <div
-      className="c3"
+      class="c0 container"
     >
       <div
-        className="c4"
+        class="c1"
       >
+        <img
+          alt="ACRO"
+          class="sponsor_img"
+          data-nimg="1"
+          decoding="async"
+          height="115"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent; object-fit: contain;"
+          width="235"
+        />
         <div
-          className="c5"
+          class="c2"
         >
-          <div
-            className="c6"
-          >
-            Membres
-          </div>
-          <div
-            className="c7"
-          >
-            2
-          </div>
-          <div
-            className="c6"
-          />
+          structureTest
         </div>
-        <div>
-          <button
-            className="btn dark"
-            data-test-id="test-add-member"
-            onClick={[Function]}
+        <a
+          class="btn dark"
+          href="/directory/structureId"
+        >
+          <span
+            class="me-2 icon"
           >
-            <span
-              className="me-2 icon"
+            <i
+              style="height: 20px; line-height: 20px;"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="person-add"><rect width="24" height="24" opacity="0"/><path d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"/><path d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Ajouter un membre
-          </button>
-        </div>
+              <svg
+                class="eva eva-book-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="book"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Voir dans l'annuaire
+        </a>
       </div>
       <div
-        className="table-responsive"
+        class="c3"
       >
-        <table
-          className="table table-borderless"
+        <div
+          class="c4"
         >
-          <thead>
-            <tr>
-              <th>
-                Nom
-              </th>
-              <th>
-                Role
-              </th>
-              <th>
-                Dernière connexion
-              </th>
-              <th>
-                Ajouté le
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              className="membres-table"
+          <div
+            class="c5"
+          >
+            <div
+              class="c6"
             >
-              <td
-                className="align-middle"
+              Membres
+            </div>
+            <div
+              class="c7"
+            >
+              2
+            </div>
+            <div
+              class="c6"
+            />
+          </div>
+          <div>
+            <button
+              class="btn dark"
+              data-testid="test-add-member"
+            >
+              <span
+                class="me-2 icon"
               >
-                <div
-                  className="c8"
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-person-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="person-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"
+                        />
+                        <path
+                          d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                        />
+                        <path
+                          d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Ajouter un membre
+            </button>
+          </div>
+        </div>
+        <div
+          class="table-responsive"
+        >
+          <table
+            class="table table-borderless"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Nom
+                </th>
+                <th>
+                  Role
+                </th>
+                <th>
+                  Dernière connexion
+                </th>
+                <th>
+                  Ajouté le
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="membres-table"
+              >
+                <td
+                  class="align-middle"
                 >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
                   <div
-                    className="c9"
-                    isUser={true}
+                    class="c8"
                   >
-                    membre2
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c9"
+                    >
+                      membre2
+                    </div>
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c10"
-                  isUser={true}
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
+                  <div
+                    class="c10"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                  <div
+                    class="c11"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    class="c11"
+                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    style="display: flex; flex-direction: row;"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c12"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="c13"
+                      data-testid="delete-button"
+                      hovercolor="#f44336"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
                   </div>
+                </td>
+              </tr>
+              <tr
+                class="membres-table"
+              >
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
+                    class="c8"
                   >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c14"
                     >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                      membre1
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
                   <div
-                    className="c14"
-                    isUser={false}
+                    class="c15"
                   >
-                    membre1
+                    Rédacteur
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c15"
-                  isUser={false}
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
+                  <div
+                    class="c16"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
                 >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                  <div
+                    class="c16"
+                  />
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    style="display: flex; flex-direction: row;"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c12"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
-                  >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c13"
+                      data-testid="delete-button"
+                      hovercolor="#f44336"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
+      <div />
+      <div />
     </div>
-    <div />
-    <div />
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap b/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
index 28d782ab63..b633005edf 100644
--- a/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserTranslation/__tests__/__snapshots__/UserTranslation.component.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`user translation should redirect if user has language but not langue in url + snap view without content 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   font-weight: bold;
   font-size: 27.7097px;
   line-height: 35px;
@@ -47,188 +48,191 @@ exports[`user translation should redirect if user has language but not langue in
 }
 
 <div
-  className="main"
->
-  <div
-    className="container"
+    class="main"
   >
     <div
-      className="c0"
+      class="container"
     >
       <div
-        className="c1"
-      >
-        Vous n'avez pas traduit de fiches pour le moment.
-      </div>
-      <div
-        className="c2"
+        class="c0"
       >
         <div
-          className="c3"
+          class="c1"
         >
-          Vous parlez une autre langue ?
+          Vous n'avez pas traduit de fiches pour le moment.
         </div>
         <div
-          className="c4"
+          class="c2"
         >
-          Aidez à traduire les contenus à votre rythme.
-        </div>
-        <div
-          className="c5"
-        >
-          <button
-            className="btn dark me-2"
-            onClick={[Function]}
+          <div
+            class="c3"
           >
-            <img
-              alt="a"
-              data-nimg="1"
-              decoding="async"
-              height={21}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={21}
-            />
-            Commencer à traduire
-          </button>
-          <button
-            className="btn tuto ms-2"
-            onClick={[Function]}
+            Vous parlez une autre langue ?
+          </div>
+          <div
+            class="c4"
           >
-            <span
-              className="me-2 icon"
+            Aidez à traduire les contenus à votre rythme.
+          </div>
+          <div
+            class="c5"
+          >
+            <button
+              class="btn dark me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
+              <img
+                alt="a"
+                data-nimg="1"
+                decoding="async"
+                height="21"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+                style="color: transparent;"
+                width="21"
               />
-            </span>
-            Explications
-          </button>
+              Commencer à traduire
+            </button>
+            <button
+              class="btn tuto ms-2"
+            >
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
-    >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
+                class="fr-modal__body"
               >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
+                <div
+                  class="fr-modal__header"
                 >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
-              >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
-                >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:r4:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:r4:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:r4:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:r4:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:r5:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:r4:-desc-error"
+                        class="fr-input"
+                        id="input-:r4:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:r5:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`user translation should redirect if user has no language but langue in url + snap no langue 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   font-weight: bold;
   font-size: 27.7097px;
   line-height: 35px;
@@ -274,515 +278,503 @@ exports[`user translation should redirect if user has no language but langue in
 }
 
 <div
-  className="main"
->
-  <div
-    className="container"
+    class="main"
   >
     <div
-      className="c0"
+      class="container"
     >
       <div
-        className="c1"
-      >
-        Vous n'avez pas traduit de fiches pour le moment.
-      </div>
-      <div
-        className="c2"
+        class="c0"
       >
         <div
-          className="c3"
+          class="c1"
         >
-          Vous parlez une autre langue ?
+          Vous n'avez pas traduit de fiches pour le moment.
         </div>
         <div
-          className="c4"
+          class="c2"
         >
-          Aidez à traduire les contenus à votre rythme.
-        </div>
-        <div
-          className="c5"
-        >
-          <button
-            className="btn dark me-2"
-            onClick={[Function]}
+          <div
+            class="c3"
           >
-            <img
-              alt="a"
-              data-nimg="1"
-              decoding="async"
-              height={21}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={21}
-            />
-            Commencer à traduire
-          </button>
-          <button
-            className="btn tuto ms-2"
-            onClick={[Function]}
+            Vous parlez une autre langue ?
+          </div>
+          <div
+            class="c4"
           >
-            <span
-              className="me-2 icon"
+            Aidez à traduire les contenus à votre rythme.
+          </div>
+          <div
+            class="c5"
+          >
+            <button
+              class="btn dark me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
+              <img
+                alt="a"
+                data-nimg="1"
+                decoding="async"
+                height="21"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+                style="color: transparent;"
+                width="21"
               />
-            </span>
-            Explications
-          </button>
+              Commencer à traduire
+            </button>
+            <button
+              class="btn tuto ms-2"
+            >
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
-    >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
+                class="fr-modal__body"
               >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
+                <div
+                  class="fr-modal__header"
                 >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
-              >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
-                >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:ra:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:ra:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:ra:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:ra:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:rb:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:ra:-desc-error"
+                        class="fr-input"
+                        id="input-:ra:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:rb:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`user translation should render correctly with expert, admin 1`] = `
-<div
-  className="main"
->
+<DocumentFragment>
   <div
-    className="container"
+    class="main"
   >
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
+    <div
+      class="container"
     >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
-              >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
-                >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
+                class="fr-modal__body"
               >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
+                <div
+                  class="fr-modal__header"
                 >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:rj:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:rj:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:rj:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:rj:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:rk:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:rj:-desc-error"
+                        class="fr-input"
+                        id="input-:rj:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:rk:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`user translation should render correctly with expert, non admin 1`] = `
-<div
-  className="main"
->
+<DocumentFragment>
   <div
-    className="container"
+    class="main"
   >
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
+    <div
+      class="container"
     >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
-              >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
-                >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
+                class="fr-modal__body"
               >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
+                <div
+                  class="fr-modal__header"
                 >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:rg:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:rg:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:rg:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:rg:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:rh:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:rg:-desc-error"
+                        class="fr-input"
+                        id="input-:rg:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:rh:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`user translation should render correctly with non expert, non admin 1`] = `
-<div
-  className="main"
->
+<DocumentFragment>
   <div
-    className="container"
+    class="main"
   >
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
+    <div
+      class="container"
     >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
-              >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
-                >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
+                class="fr-modal__body"
               >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
+                <div
+                  class="fr-modal__header"
                 >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:rd:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:rd:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:rd:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:rd:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:re:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:rd:-desc-error"
+                        class="fr-input"
+                        id="input-:rd:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:re:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`user translation should return loader langue in url = first selected langue 1`] = `
-.c1 {
+<DocumentFragment>
+  .c1 {
   font-weight: bold;
   font-size: 27.7097px;
   line-height: 35px;
@@ -828,182 +820,184 @@ exports[`user translation should return loader langue in url = first selected la
 }
 
 <div
-  className="main"
->
-  <div
-    className="container"
+    class="main"
   >
     <div
-      className="c0"
+      class="container"
     >
       <div
-        className="c1"
+        class="c0"
       >
-        Vous n'avez pas traduit de fiches pour le moment.
-      </div>
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-        >
-          Vous parlez une autre langue ?
-        </div>
         <div
-          className="c4"
+          class="c1"
         >
-          Aidez à traduire les contenus à votre rythme.
+          Vous n'avez pas traduit de fiches pour le moment.
         </div>
         <div
-          className="c5"
+          class="c2"
         >
-          <button
-            className="btn dark me-2"
-            onClick={[Function]}
+          <div
+            class="c3"
           >
-            <img
-              alt="a"
-              data-nimg="1"
-              decoding="async"
-              height={21}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={21}
-            />
-            Commencer à traduire
-          </button>
-          <button
-            className="btn tuto ms-2"
-            onClick={[Function]}
+            Vous parlez une autre langue ?
+          </div>
+          <div
+            class="c4"
+          >
+            Aidez à traduire les contenus à votre rythme.
+          </div>
+          <div
+            class="c5"
           >
-            <span
-              className="me-2 icon"
+            <button
+              class="btn dark me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
+              <img
+                alt="a"
+                data-nimg="1"
+                decoding="async"
+                height="21"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+                style="color: transparent;"
+                width="21"
               />
-            </span>
-            Explications
-          </button>
+              Commencer à traduire
+            </button>
+            <button
+              class="btn tuto ms-2"
+            >
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <button
-      aria-controls="user-pseudo-modal"
-      aria-hidden={true}
-      className="fr-btn fr-hidden"
-      data-fr-opened={false}
-      id="user-pseudo-modal-hidden-control-button"
-      style={{}}
-      tabIndex={-1}
-      type="button"
-    >
-       
-    </button>
-    <dialog
-      aria-labelledby="fr-modal-title-user-pseudo-modal"
-      className="fr-modal"
-      data-fr-concealing-backdrop={true}
-      id="user-pseudo-modal"
-      role="dialog"
-    >
-      <div
-        className="fr-container fr-container--fluid fr-container-md"
+      <button
+        aria-controls="user-pseudo-modal"
+        aria-hidden="true"
+        class="fr-btn fr-hidden"
+        data-fr-opened="false"
+        id="user-pseudo-modal-hidden-control-button"
+        tabindex="-1"
+        type="button"
+      >
+         
+      </button>
+      <dialog
+        aria-labelledby="fr-modal-title-user-pseudo-modal"
+        class="fr-modal"
+        data-fr-concealing-backdrop="true"
+        id="user-pseudo-modal"
+        role="dialog"
       >
         <div
-          className="fr-grid-row fr-grid-row--center"
+          class="fr-container fr-container--fluid fr-container-md"
         >
           <div
-            className="fr-col-12 fr-col-md-8 fr-col-lg-6"
+            class="fr-grid-row fr-grid-row--center"
           >
             <div
-              className="fr-modal__body"
+              class="fr-col-12 fr-col-md-8 fr-col-lg-6"
             >
               <div
-                className="fr-modal__header"
+                class="fr-modal__body"
               >
-                <button
-                  aria-controls="user-pseudo-modal"
-                  className="fr-btn--close fr-btn"
-                  title="Fermer"
-                  type="button"
+                <div
+                  class="fr-modal__header"
                 >
-                  Fermer
-                </button>
-              </div>
-              <div
-                className="fr-modal__content"
-              >
-                <h1
-                  className="fr-modal__title"
-                  id="fr-modal-title-user-pseudo-modal"
-                >
-                  Choisissez un pseudonyme
-                </h1>
-                <p>
-                  Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
-                </p>
-                <form
-                  onSubmit={[Function]}
+                  <button
+                    aria-controls="user-pseudo-modal"
+                    class="fr-btn--close fr-btn"
+                    title="Fermer"
+                    type="button"
+                  >
+                    Fermer
+                  </button>
+                </div>
+                <div
+                  class="fr-modal__content"
                 >
-                  <div
-                    className="fr-input-group mt-12 mb-0"
+                  <h1
+                    class="fr-modal__title"
+                    id="fr-modal-title-user-pseudo-modal"
                   >
-                    <label
-                      className="fr-label"
-                      htmlFor="input-:r1:"
+                    Choisissez un pseudonyme
+                  </h1>
+                  <p>
+                    Au pied de chaque fiche, nous affichons les contributeurs ayant participé à sa rédaction et sa traduction.
+                  </p>
+                  <form>
+                    <div
+                      class="fr-input-group mt-12 mb-0"
                     >
-                      Votre pseudonyme
-                      <span
-                        className="fr-hint-text"
+                      <label
+                        class="fr-label"
+                        for="input-:r1:"
                       >
-                        N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
-                      </span>
-                    </label>
-                    <input
-                      aria-describedby="input-:r1:-desc-error"
-                      autoFocus={true}
-                      className="fr-input"
-                      id="input-:r1:"
-                      onChange={[Function]}
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <button
-                    className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
-                    disabled={false}
-                    id="fr-button-:r2:"
-                    style={{}}
-                    type="submit"
-                  >
-                    Suivant
-                  </button>
-                </form>
+                        Votre pseudonyme
+                        <span
+                          class="fr-hint-text"
+                        >
+                          N'indiquez pas de coordonnées personnelles comme votre adresse email. Exemples : Guillaume-afpa, cidff13, sarah-trad, Nora78.
+                        </span>
+                      </label>
+                      <input
+                        aria-describedby="input-:r1:-desc-error"
+                        class="fr-input"
+                        id="input-:r1:"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                    <button
+                      class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right button mt-12"
+                      id="fr-button-:r2:"
+                      type="submit"
+                    >
+                      Suivant
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/components/Pages/auth/CheckCode/__snapshots__/CheckCode.test.tsx.snap b/client/src/components/Pages/auth/CheckCode/__snapshots__/CheckCode.test.tsx.snap
index f1fb0d3f93..a104efb81d 100644
--- a/client/src/components/Pages/auth/CheckCode/__snapshots__/CheckCode.test.tsx.snap
+++ b/client/src/components/Pages/auth/CheckCode/__snapshots__/CheckCode.test.tsx.snap
@@ -1,5 +1,134 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CheckCode should not render the component if the email is not provided 1`] = `null`;
+exports[`CheckCode should not render the component if the email is not provided 1`] = `<DocumentFragment />`;
 
-exports[`CheckCode should render the component with the correct title and subtitle 1`] = `null`;
+exports[`CheckCode should render the component with the correct title and subtitle 1`] = `
+<DocumentFragment>
+  <div
+    class="container half"
+  >
+    <button
+      class="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left"
+      id="fr-button-:r0:"
+    >
+      Retour
+    </button>
+    <div
+      class="title"
+    >
+      <h1>
+        Vérifions votre identité !
+      </h1>
+      <p
+        class="subtitle"
+      >
+        Un code temporaire à 6 chiffres vous a été envoyé à test@example.com. 
+        <a
+          class="text-decoration-underline"
+          href="/auth"
+        >
+          Ce n'est pas vous ?
+        </a>
+      </p>
+    </div>
+    <form>
+      <div
+        class="fr-input-group mb-0"
+      >
+        <label
+          class="fr-label"
+          for="input-:r1:"
+        >
+          Code d'authentification
+        </label>
+        <input
+          aria-describedby="input-:r1:-desc-error"
+          class="fr-input"
+          id="input-:r1:"
+          name="code"
+          type="text"
+          value=""
+        />
+      </div>
+      <button
+        class="fr-btn fr-icon-check-line fr-btn--icon-right button mt mb-4"
+        id="fr-button-:r2:"
+        type="submit"
+      >
+        Valider
+      </button>
+      <button
+        class="fr-btn fr-btn--tertiary fr-icon-mail-line fr-btn--icon-right button"
+        id="fr-button-:r3:"
+      >
+        Renvoyer le code
+      </button>
+    </form>
+    <div
+      class="small mx text-center"
+    >
+      L'adresse mail n'est plus valable ? 
+      <button
+        class="link"
+      >
+        Contactez-nous
+      </button>
+    </div>
+    <div
+      class="mb-4 row"
+    >
+      <div
+        class="col"
+      >
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://mail.google.com/mail/u/0/"
+          id="fr-button-:r4:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Gmail
+        </a>
+      </div>
+      <div
+        class="col"
+      >
+        <a
+          class="fr-btn fr-btn--tertiary button"
+          href="https://outlook.live.com/mail/0/"
+          id="fr-button-:r5:"
+        >
+          <img
+            alt=""
+            class="me-2"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          Ouvrir Outlook
+        </a>
+      </div>
+    </div>
+    <p
+      class="small mt-6 text-center"
+    >
+      Pensez à vérifiez votre courrier indésirable !
+    </p>
+  </div>
+</DocumentFragment>
+`;

From 737f2540a57e5805b58d19d7c98448c283c988b4 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 18 Jul 2024 14:16:05 +0200
Subject: [PATCH 27/37] test(client): :white_check_mark: Fix publier.test

---
 .../__snapshots__/publier.test.tsx.snap       | 3499 +++++++++--------
 client/src/__tests__/publier.test.tsx         |    1 -
 .../TestimonySlider/TestimonySlider.tsx       |   18 +-
 3 files changed, 1876 insertions(+), 1642 deletions(-)

diff --git a/client/src/__tests__/__snapshots__/publier.test.tsx.snap b/client/src/__tests__/__snapshots__/publier.test.tsx.snap
index e3231680df..62010c2431 100644
--- a/client/src/__tests__/__snapshots__/publier.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/publier.test.tsx.snap
@@ -1,537 +1,584 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`publier renders publier 1`] = `
-<div
-  className="main"
->
+<DocumentFragment>
   <div
-    className="section bg_blue mb-4"
+    class="main"
   >
     <div
-      className="container container"
+      class="section bg_blue mb-4"
     >
       <div
-        className="hero row"
+        class="container container"
       >
         <div
-          className="hero_title col-sm-12 col-lg-6"
+          class="hero row"
         >
-          <h1
-            className="text-white"
-          >
-            Publish.title
-          </h1>
-          <p
-            className="subtitle"
-          >
-            Publish.subtitle
-          </p>
           <div
-            className="container"
+            class="hero_title col-sm-12 col-lg-6"
           >
-            <a
-              className="btn"
-              href="/undefined#why"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Suivant"
+            <h1
+              class="text-white"
             >
-              <span
-                className="icon"
+              Publish.title
+            </h1>
+            <p
+              class="subtitle"
+            >
+              Publish.subtitle
+            </p>
+            <div
+              class="container"
+            >
+              <a
+                class="btn"
+                href="/undefined#why"
+                title="Suivant"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-downward-outline" fill="#0421b1"><g data-name="Layer 2"><g data-name="arrow-downward"><rect width="24" height="24" opacity="0"/><path d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "24px",
-                      "lineHeight": "24px",
-                    }
-                  }
-                />
-              </span>
-            </a>
+                <span
+                  class="icon"
+                >
+                  <i
+                    style="height: 24px; line-height: 24px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-downward-outline"
+                      fill="#0421b1"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </a>
+            </div>
+          </div>
+          <div
+            class="col-sm-12 col-lg-6"
+          >
+            <img
+              alt=""
+              data-nimg="1"
+              decoding="async"
+              height="40"
+              loading="lazy"
+              src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+              srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+              style="color: transparent; max-width: 100%; height: auto;"
+              width="40"
+            />
           </div>
-        </div>
-        <div
-          className="col-sm-12 col-lg-6"
-        >
-          <img
-            alt=""
-            data-nimg="1"
-            decoding="async"
-            height={40}
-            loading="lazy"
-            onError={[Function]}
-            onLoad={[Function]}
-            src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-            srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-            style={
-              {
-                "color": "transparent",
-                "height": "auto",
-                "maxWidth": "100%",
-              }
-            }
-            width={40}
-          />
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="container shadow"
-  >
     <div
-      className="inner container"
+      class="container shadow"
     >
-      <div>
-        <a
-          className="btn green"
-          href="/undefined#why"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Publish.navbarItem1
-        </a>
-        <a
-          className="btn purple"
-          href="/undefined#required"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Publish.navbarItem2
-        </a>
-        <a
-          className="btn orange"
-          href="/undefined#steps"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          Publish.navbarItem3
-        </a>
+      <div
+        class="inner container"
+      >
+        <div>
+          <a
+            class="btn green"
+            href="/undefined#why"
+          >
+            Publish.navbarItem1
+          </a>
+          <a
+            class="btn purple"
+            href="/undefined#required"
+          >
+            Publish.navbarItem2
+          </a>
+          <a
+            class="btn orange"
+            href="/undefined#steps"
+          >
+            Publish.navbarItem3
+          </a>
+          <a
+            class="btn red"
+            href="/undefined#faq"
+          >
+            Publish.navbarItem4
+          </a>
+        </div>
         <a
-          className="btn red"
-          href="/undefined#faq"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
+          class="btn blue"
+          href="/undefined#register"
         >
-          Publish.navbarItem4
+          <span
+            class="icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
+            >
+              <svg
+                class="eva eva-plus-circle-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="plus-circle"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                    />
+                    <path
+                      d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Publish.navbarItem5
         </a>
       </div>
-      <a
-        className="btn blue"
-        href="/undefined#register"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-plus-circle-outline" fill="#fff"><g data-name="Layer 2"><g data-name="plus-circle"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Publish.navbarItem5
-      </a>
     </div>
-  </div>
-  <div
-    className="scrollspy_section"
-  >
-    <span
-      className="anchor"
-      id="why"
-    />
     <div
-      className="section"
+      class="scrollspy_section"
     >
+      <span
+        class="anchor"
+        id="why"
+      />
       <div
-        className="container container"
+        class="section"
       >
-        <h2
-          className="title2"
-        >
-          Publish.whyTitle
-        </h2>
         <div
-          className="row"
+          class="container container"
         >
+          <h2
+            class="title2"
+          >
+            Publish.whyTitle
+          </h2>
           <div
-            className="infos with_images col"
+            class="row"
           >
             <div
-              className="container"
+              class="infos with_images col"
             >
-              <button
-                className="btn open btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                Publish.whyAccordionTitle1
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
               <div
-                className="collapse show"
-                style={{}}
-              >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.whyAccordionText1",
-                    }
-                  }
-                />
-              </div>
-            </div>
-            <div
-              className="container video2"
-            >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
+                class="container"
               >
-                Publish.whyAccordionTitle2
-                <span
-                  className="icon icon"
+                <button
+                  class="btn open btn btn-secondary"
+                  type="button"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
+                  Publish.whyAccordionTitle1
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse show"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.whyAccordionText1
+                  </p>
+                </div>
+              </div>
               <div
-                className="collapse"
-                style={{}}
+                class="container video2"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.whyAccordionText2",
-                    }
-                  }
-                />
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
+                >
+                  Publish.whyAccordionTitle2
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.whyAccordionText2
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              className="container"
-            >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
+              <div
+                class="container"
               >
-                Publish.whyAccordionTitle3
-                <span
-                  className="icon icon"
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
+                  Publish.whyAccordionTitle3
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.whyAccordionText3
+                  </p>
+                </div>
+              </div>
               <div
-                className="collapse"
-                style={{}}
+                class="container"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.whyAccordionText3",
-                    }
-                  }
-                />
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
+                >
+                  Publish.whyAccordionTitle4
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.whyAccordionText4
+                  </p>
+                </div>
               </div>
             </div>
             <div
-              className="container"
+              class="media center col"
             >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                Publish.whyAccordionTitle4
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
-              <div
-                className="collapse"
-                style={{}}
-              >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.whyAccordionText4",
-                    }
-                  }
-                />
-              </div>
+              <img
+                alt=""
+                class="image"
+                data-nimg="1"
+                decoding="async"
+                height="40"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                style="color: transparent;"
+                width="40"
+              />
             </div>
           </div>
-          <div
-            className="media center col"
-          >
-            <img
-              alt=""
-              className="image"
-              data-nimg="1"
-              decoding="async"
-              height={40}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={40}
-            />
-          </div>
         </div>
       </div>
-    </div>
-    <div
-      className="section bg_green"
-    >
       <div
-        className="container container"
+        class="section bg_green"
       >
         <div
-          className="container"
+          class="container container"
         >
-          <button
-            className="btn next btn btn-secondary"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="#055e5a"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "24px",
-                    "lineHeight": "24px",
-                  }
-                }
-              />
-            </span>
-          </button>
           <div
-            className="slider"
+            class="container"
           >
+            <button
+              class="btn next btn btn-secondary"
+              type="button"
+            >
+              <span
+                class="icon"
+              >
+                <i
+                  style="height: 24px; line-height: 24px;"
+                >
+                  <svg
+                    class="eva eva-arrow-forward-outline"
+                    fill="#055e5a"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="arrow-forward"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          transform="rotate(-90 12 12)"
+                          width="24"
+                        />
+                        <path
+                          d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+            </button>
             <div
-              className="testimony col"
+              class="slider"
             >
-              <p>
-                Publish.testimony1
-              </p>
               <div
-                className="container"
+                class="testimony col"
               >
+                <p>
+                  Publish.testimony1
+                </p>
                 <div
-                  className="image"
-                >
-                  <img
-                    alt="Vincent Le Lann"
-                    data-nimg="1"
-                    decoding="async"
-                    height={64}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                      }
-                    }
-                    width={64}
-                  />
-                </div>
-                <div
-                  className="infos"
+                  class="container"
                 >
                   <div
-                    className="name"
+                    class="image"
                   >
-                    Vincent Le Lann
+                    <img
+                      alt="Vincent Le Lann"
+                      data-nimg="1"
+                      decoding="async"
+                      height="64"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent;"
+                      width="64"
+                    />
                   </div>
-                  <div>
-                    Compagnons du Tour de France à Nantes
+                  <div
+                    class="infos"
+                  >
+                    <div
+                      class="name"
+                    >
+                      Vincent Le Lann
+                    </div>
+                    <div>
+                      Compagnons du Tour de France à Nantes
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              className="testimony col"
-            >
-              <p>
-                Publish.testimony2
-              </p>
               <div
-                className="container"
+                class="testimony col"
               >
+                <p>
+                  Publish.testimony2
+                </p>
                 <div
-                  className="image"
-                >
-                  <img
-                    alt="Rémi Crouzel"
-                    data-nimg="1"
-                    decoding="async"
-                    height={64}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                      }
-                    }
-                    width={64}
-                  />
-                </div>
-                <div
-                  className="infos"
+                  class="container"
                 >
                   <div
-                    className="name"
+                    class="image"
                   >
-                    Rémi Crouzel
+                    <img
+                      alt="Rémi Crouzel"
+                      data-nimg="1"
+                      decoding="async"
+                      height="64"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent;"
+                      width="64"
+                    />
                   </div>
-                  <div>
-                    Mission Locale de Dijon & Conseiller IPeRACTIFS21
+                  <div
+                    class="infos"
+                  >
+                    <div
+                      class="name"
+                    >
+                      Rémi Crouzel
+                    </div>
+                    <div>
+                      Mission Locale de Dijon & Conseiller IPeRACTIFS21
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              className="testimony col"
-            >
-              <p>
-                Publish.testimony3
-              </p>
               <div
-                className="container"
+                class="testimony col"
               >
+                <p>
+                  Publish.testimony3
+                </p>
                 <div
-                  className="image"
-                >
-                  <img
-                    alt="Paola Salazar"
-                    data-nimg="1"
-                    decoding="async"
-                    height={64}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                      }
-                    }
-                    width={64}
-                  />
-                </div>
-                <div
-                  className="infos"
+                  class="container"
                 >
                   <div
-                    className="name"
+                    class="image"
                   >
-                    Paola Salazar
+                    <img
+                      alt="Paola Salazar"
+                      data-nimg="1"
+                      decoding="async"
+                      height="64"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent;"
+                      width="64"
+                    />
                   </div>
-                  <div>
-                    Directrice adjointe UniR
+                  <div
+                    class="infos"
+                  >
+                    <div
+                      class="name"
+                    >
+                      Paola Salazar
+                    </div>
+                    <div>
+                      Directrice adjointe UniR
+                    </div>
                   </div>
                 </div>
               </div>
@@ -540,1366 +587,1552 @@ exports[`publier renders publier 1`] = `
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_grey scrollspy_section"
-  >
-    <span
-      className="anchor"
-      id="required"
-    />
     <div
-      className="container container"
+      class="section bg_grey scrollspy_section"
     >
-      <h2
-        className="title2 center"
-      >
-        Publish.requiredTitle
-      </h2>
+      <span
+        class="anchor"
+        id="required"
+      />
       <div
-        className="row"
+        class="container container"
       >
+        <h2
+          class="title2 center"
+        >
+          Publish.requiredTitle
+        </h2>
         <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+          class="row"
         >
           <div
-            className="container"
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div>
-              <div
-                className="header"
-              >
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={56}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                      "objectFit": "contain",
-                    }
-                  }
-                  width={56}
-                />
-              </div>
-              <h3
-                className="title"
-              >
-                Publish.requiredSubtitle1
-              </h3>
-              <div
-                className="text"
-              >
-                <p
-                  className="mb-0"
+            <div
+              class="container"
+            >
+              <div>
+                <div
+                  class="header"
                 >
-                  Publish.requiredText1
-                </p>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="56"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                    style="color: transparent; object-fit: contain;"
+                    width="56"
+                  />
+                </div>
+                <h3
+                  class="title"
+                >
+                  Publish.requiredSubtitle1
+                </h3>
+                <div
+                  class="text"
+                >
+                  <p
+                    class="mb-0"
+                  >
+                    Publish.requiredText1
+                  </p>
+                </div>
               </div>
-            </div>
-            <div>
               <div>
-                <p
-                  className="example example_ko"
-                >
-                  <span
-                    className="icon icon"
+                <div>
+                  <p
+                    class="example example_ko"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="colorKo"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample1Ko
-                </p>
-                <p
-                  className="example example_ok"
-                >
-                  <span
-                    className="icon icon"
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-close-outline"
+                          fill="colorKo"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="close"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(180 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample1Ko
+                  </p>
+                  <p
+                    class="example example_ok"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="colorOk"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample1Ok
-                </p>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-checkmark-outline"
+                          fill="colorOk"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="checkmark"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample1Ok
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-        >
           <div
-            className="container"
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div>
-              <div
-                className="header"
-              >
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={56}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                      "objectFit": "contain",
-                    }
-                  }
-                  width={56}
-                />
-              </div>
-              <h3
-                className="title"
-              >
-                Publish.requiredSubtitle2
-              </h3>
-              <div
-                className="text"
-              >
-                <p
-                  className="mb-0"
+            <div
+              class="container"
+            >
+              <div>
+                <div
+                  class="header"
                 >
-                  Publish.requiredText2
-                </p>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="56"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                    style="color: transparent; object-fit: contain;"
+                    width="56"
+                  />
+                </div>
+                <h3
+                  class="title"
+                >
+                  Publish.requiredSubtitle2
+                </h3>
+                <div
+                  class="text"
+                >
+                  <p
+                    class="mb-0"
+                  >
+                    Publish.requiredText2
+                  </p>
+                </div>
               </div>
-            </div>
-            <div>
               <div>
-                <p
-                  className="example example_ko"
-                >
-                  <span
-                    className="icon icon"
+                <div>
+                  <p
+                    class="example example_ko"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="colorKo"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample2Ko
-                </p>
-                <p
-                  className="example example_ok"
-                >
-                  <span
-                    className="icon icon"
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-close-outline"
+                          fill="colorKo"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="close"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(180 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample2Ko
+                  </p>
+                  <p
+                    class="example example_ok"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="colorOk"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample2Ok
-                </p>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-checkmark-outline"
+                          fill="colorOk"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="checkmark"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample2Ok
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-        >
           <div
-            className="container"
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div>
-              <div
-                className="header"
-              >
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={56}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                      "objectFit": "contain",
-                    }
-                  }
-                  width={56}
-                />
-              </div>
-              <h3
-                className="title"
-              >
-                Publish.requiredSubtitle3
-              </h3>
-              <div
-                className="text"
-              >
-                <p
-                  className="mb-0"
+            <div
+              class="container"
+            >
+              <div>
+                <div
+                  class="header"
                 >
-                  Publish.requiredText3
-                </p>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="56"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                    style="color: transparent; object-fit: contain;"
+                    width="56"
+                  />
+                </div>
+                <h3
+                  class="title"
+                >
+                  Publish.requiredSubtitle3
+                </h3>
+                <div
+                  class="text"
+                >
+                  <p
+                    class="mb-0"
+                  >
+                    Publish.requiredText3
+                  </p>
+                </div>
               </div>
-            </div>
-            <div>
               <div>
-                <p
-                  className="example example_ko"
-                >
-                  <span
-                    className="icon icon"
+                <div>
+                  <p
+                    class="example example_ko"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="colorKo"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample3Ko
-                </p>
-                <p
-                  className="example example_ok"
-                >
-                  <span
-                    className="icon icon"
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-close-outline"
+                          fill="colorKo"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="close"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(180 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample3Ko
+                  </p>
+                  <p
+                    class="example example_ok"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="colorOk"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Publish.requiredTextExample3Ok
-                </p>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-checkmark-outline"
+                          fill="colorOk"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="checkmark"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Publish.requiredTextExample3Ok
+                  </p>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        className="link"
-      >
-        <a
-          className="link color_purple"
-          href="https://help.refugies.info/fr/article/charte-editoriale-comment-bien-rediger-une-fiche-1twbzhu/"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-          rel="noopener noreferrer"
-          target="_blank"
+        <div
+          class="link"
         >
-          <span>
-            Publish.requiredCTA
-          </span>
-          <span
-            className="icon icon"
+          <a
+            class="link color_purple"
+            href="https://help.refugies.info/fr/article/charte-editoriale-comment-bien-rediger-une-fiche-1twbzhu/"
+            rel="noopener noreferrer"
+            target="_blank"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="purple"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "24px",
-                  "lineHeight": "24px",
-                }
-              }
-            />
-          </span>
-        </a>
+            <span>
+              Publish.requiredCTA
+            </span>
+            <span
+              class="icon icon"
+            >
+              <i
+                style="height: 24px; line-height: 24px;"
+              >
+                <svg
+                  class="eva eva-arrow-forward-outline"
+                  fill="purple"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="arrow-forward"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(-90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="scrollspy_section"
-  >
-    <span
-      className="anchor"
-      id="steps"
-    />
     <div
-      className="section"
+      class="scrollspy_section"
     >
+      <span
+        class="anchor"
+        id="steps"
+      />
       <div
-        className="container container"
+        class="section"
       >
-        <h2
-          className="title2"
-        >
-          Publish.stepsTitle
-        </h2>
         <div
-          className="warning_mobile"
+          class="container container"
         >
-          <span
-            className="icon"
+          <h2
+            class="title2"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-alert-circle-outline" fill="black"><g data-name="Layer 2"><g data-name="alert-circle"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><circle cx="12" cy="16" r="1"/><path d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "24px",
-                  "lineHeight": "24px",
-                }
-              }
-            />
-          </span>
-          <p>
-            Publish.stepsWarningMobile
-          </p>
-        </div>
-        <div
-          className="row orange"
-        >
+            Publish.stepsTitle
+          </h2>
           <div
-            className="content"
+            class="warning_mobile"
           >
-            <div
-              className="step"
-            >
-              <span>
-                1
-              </span>
-            </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle1",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText1
-            </p>
-            <a
-              className="link color_orange"
-              href="/undefined#register"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              rel="noopener noreferrer"
+            <span
+              class="icon"
             >
-              <span>
-                Publish.stepsCTA1
-              </span>
-              <span
-                className="icon icon"
+              <i
+                style="height: 24px; line-height: 24px;"
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="orange"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "24px",
-                      "lineHeight": "24px",
-                    }
-                  }
-                />
-              </span>
-            </a>
-          </div>
-          <div
-            className="media"
-          >
-            <video
-              className="video autoplay-video"
-              height={320}
-              loop={true}
-              muted={true}
-              playsInline=""
-              style={{}}
-            >
-              <source
-                src="/video/publier-video-step1.mp4"
-                type="video/mp4"
-              />
-            </video>
+                <svg
+                  class="eva eva-alert-circle-outline"
+                  fill="black"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="alert-circle"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                      />
+                      <circle
+                        cx="12"
+                        cy="16"
+                        r="1"
+                      />
+                      <path
+                        d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            <p>
+              Publish.stepsWarningMobile
+            </p>
           </div>
-        </div>
-        <div
-          className="row orange"
-        >
           <div
-            className="content"
+            class="row orange"
           >
             <div
-              className="step"
+              class="content"
             >
-              <span>
-                2
-              </span>
+              <div
+                class="step"
+              >
+                <span>
+                  1
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle1
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText1
+              </p>
+              <a
+                class="link color_orange"
+                href="/undefined#register"
+                rel="noopener noreferrer"
+              >
+                <span>
+                  Publish.stepsCTA1
+                </span>
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 24px; line-height: 24px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-forward-outline"
+                      fill="orange"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-forward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(-90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </a>
             </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle2",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText2a
-            </p>
-            <p
-              className="text"
-            >
-              Publish.stepsText2b
-            </p>
-            <a
-              className="link color_orange"
-              href="https://help.refugies.info/fr/category/charte-editoriale-2fq3x7/"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              rel="noopener noreferrer"
-              target="_blank"
+            <div
+              class="media"
             >
-              <span>
-                Publish.stepsCTA2
-              </span>
-              <span
-                className="icon icon"
+              <video
+                class="video autoplay-video"
+                height="320"
+                loop=""
               >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="orange"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "24px",
-                      "lineHeight": "24px",
-                    }
-                  }
+                <source
+                  src="/video/publier-video-step1.mp4"
+                  type="video/mp4"
                 />
-              </span>
-            </a>
-          </div>
-          <div
-            className="media"
-          >
-            <video
-              className="video autoplay-video"
-              height={320}
-              loop={true}
-              muted={true}
-              playsInline=""
-              style={{}}
-            >
-              <source
-                src="/video/publier-video-step2.mp4"
-                type="video/mp4"
-              />
-            </video>
-          </div>
-        </div>
-        <div
-          className="row orange"
-        >
-          <div
-            className="content"
-          >
-            <div
-              className="step"
-            >
-              <span>
-                3
-              </span>
+              </video>
             </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle3",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText3
-            </p>
-          </div>
-          <div
-            className="media"
-          >
-            <video
-              className="video autoplay-video"
-              height={320}
-              loop={true}
-              muted={true}
-              playsInline=""
-              style={{}}
-              width={340}
-            >
-              <source
-                src="/video/publier-video-step3.mp4"
-                type="video/mp4"
-              />
-            </video>
           </div>
-        </div>
-        <div
-          className="row orange has_btn_step"
-        >
           <div
-            className="content"
+            class="row orange"
           >
             <div
-              className="step"
+              class="content"
             >
-              <span>
-                4
-              </span>
+              <div
+                class="step"
+              >
+                <span>
+                  2
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle2
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText2a
+              </p>
+              <p
+                class="text"
+              >
+                Publish.stepsText2b
+              </p>
+              <a
+                class="link color_orange"
+                href="https://help.refugies.info/fr/category/charte-editoriale-2fq3x7/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span>
+                  Publish.stepsCTA2
+                </span>
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 24px; line-height: 24px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-forward-outline"
+                      fill="orange"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-forward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(-90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </a>
             </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle4",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText4a
-            </p>
-            <p
-              className="text"
-            >
-              Publish.stepsText4b
-            </p>
             <div
-              className="btn_step"
+              class="media"
             >
-              Publish.stepsButton
+              <video
+                class="video autoplay-video"
+                height="320"
+                loop=""
+              >
+                <source
+                  src="/video/publier-video-step2.mp4"
+                  type="video/mp4"
+                />
+              </video>
             </div>
           </div>
           <div
-            className="media"
-          >
-            <img
-              alt=""
-              data-nimg="1"
-              decoding="async"
-              height={550}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                  "objectFit": "contain",
-                }
-              }
-              width={550}
-            />
-          </div>
-        </div>
-        <div
-          className="row orange"
-        >
-          <div
-            className="content"
+            class="row orange"
           >
             <div
-              className="step"
+              class="content"
             >
-              <span>
-                5
-              </span>
+              <div
+                class="step"
+              >
+                <span>
+                  3
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle3
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText3
+              </p>
             </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle5",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText5a
-            </p>
-            <p
-              className="text"
-            >
-              Publish.stepsText5b
-            </p>
-          </div>
-          <div
-            className="media"
-          >
-            <img
-              alt=""
-              data-nimg="1"
-              decoding="async"
-              height={415}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                  "objectFit": "contain",
-                }
-              }
-              width={550}
-            />
-          </div>
-        </div>
-        <div
-          className="row orange dotted"
-        >
-          <div
-            className="content"
-          >
             <div
-              className="step"
+              class="media"
             >
-              <span>
-                6
-              </span>
+              <video
+                class="video autoplay-video"
+                height="320"
+                loop=""
+                width="340"
+              >
+                <source
+                  src="/video/publier-video-step3.mp4"
+                  type="video/mp4"
+                />
+              </video>
             </div>
-            <h3
-              className="title"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "Publish.stepsSubtitle6",
-                }
-              }
-            />
-            <p
-              className="text"
-            >
-              Publish.stepsText6a
-            </p>
-            <p
-              className="text"
-            >
-              Publish.stepsText6b
-            </p>
           </div>
           <div
-            className="media"
-          >
-            <img
-              alt=""
-              data-nimg="1"
-              decoding="async"
-              height={550}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                  "objectFit": "contain",
-                }
-              }
-              width={550}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="scrollspy_section"
-  >
-    <div
-      className="section bg_grey"
-    >
-      <div
-        className="container container"
-      >
-        <h2
-          className="title2 center mb-0"
-        >
-          StaticPages.helpTitle
-        </h2>
-        <p
-          className="subtitle center"
-        >
-          Publish.helpSubtitle
-        </p>
-        <div
-          className="top_space row"
-        >
-          <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="row orange has_btn_step"
           >
             <div
-              className="container"
+              class="content"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  Publish.helpTileTitle1
-                </h3>
-                <div
-                  className="text"
-                >
-                  <p>
-                    Publish.helpTileText1
-                  </p>
-                </div>
+              <div
+                class="step"
+              >
+                <span>
+                  4
+                </span>
               </div>
-              <div>
-                <a
-                  className="link color_red"
-                  href="https://airtable.com/shrrkFuyeG0BpKKT7"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onTouchStart={[Function]}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <span>
-                    Publish.helpTileCTA1
-                  </span>
-                  <span
-                    className="icon icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </a>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle4
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText4a
+              </p>
+              <p
+                class="text"
+              >
+                Publish.stepsText4b
+              </p>
+              <div
+                class="btn_step"
+              >
+                Publish.stepsButton
               </div>
             </div>
-          </div>
-          <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-          >
             <div
-              className="container"
+              class="media"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  Publish.helpTileTitle2
-                </h3>
-                <div
-                  className="text"
-                >
-                  <p>
-                    Publish.helpTileText2
-                  </p>
-                </div>
-              </div>
-              <div>
-                <a
-                  className="link color_red"
-                  href="https://help.refugies.info/fr/"
-                  onClick={[Function]}
-                  onMouseEnter={[Function]}
-                  onTouchStart={[Function]}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <span>
-                    Publish.helpTileCTA2
-                  </span>
-                  <span
-                    className="icon icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </a>
-              </div>
+              <img
+                alt=""
+                data-nimg="1"
+                decoding="async"
+                height="550"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
+                style="color: transparent; object-fit: contain;"
+                width="550"
+              />
             </div>
           </div>
           <div
-            className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+            class="row orange"
           >
             <div
-              className="container"
+              class="content"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  StaticPages.helpTileTitle3
-                </h3>
-                <div
-                  className="text"
-                >
-                  <p>
-                    StaticPages.helpTileText3
-                  </p>
-                </div>
+              <div
+                class="step"
+              >
+                <span>
+                  5
+                </span>
               </div>
-              <div>
-                <button
-                  className="link color_red"
-                  onClick={[Function]}
-                >
-                  <span>
-                    StaticPages.helpTileCTA3
-                  </span>
-                  <span
-                    className="icon icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
-                  </span>
-                </button>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle5
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText5a
+              </p>
+              <p
+                class="text"
+              >
+                Publish.stepsText5b
+              </p>
+            </div>
+            <div
+              class="media"
+            >
+              <img
+                alt=""
+                data-nimg="1"
+                decoding="async"
+                height="415"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
+                style="color: transparent; object-fit: contain;"
+                width="550"
+              />
+            </div>
+          </div>
+          <div
+            class="row orange dotted"
+          >
+            <div
+              class="content"
+            >
+              <div
+                class="step"
+              >
+                <span>
+                  6
+                </span>
               </div>
+              <h3
+                class="title"
+              >
+                Publish.stepsSubtitle6
+              </h3>
+              <p
+                class="text"
+              >
+                Publish.stepsText6a
+              </p>
+              <p
+                class="text"
+              >
+                Publish.stepsText6b
+              </p>
+            </div>
+            <div
+              class="media"
+            >
+              <img
+                alt=""
+                data-nimg="1"
+                decoding="async"
+                height="550"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=1200&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1200&q=75 2x"
+                style="color: transparent; object-fit: contain;"
+                width="550"
+              />
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      className="section bg_red"
+      class="scrollspy_section"
     >
       <div
-        className="container text-center container"
+        class="section bg_grey"
       >
-        <h2
-          className="title2 text-center text-white"
-        >
-          Publish.figuresTitle
-        </h2>
         <div
-          className="row"
+          class="container container"
         >
+          <h2
+            class="title2 center mb-0"
+          >
+            StaticPages.helpTitle
+          </h2>
+          <p
+            class="subtitle center"
+          >
+            Publish.helpSubtitle
+          </p>
           <div
-            className="col-sm-12 col-lg-4"
+            class="top_space row"
           >
             <div
-              className="figure"
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
             >
-              <div>
-                0
+              <div
+                class="container"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    Publish.helpTileTitle1
+                  </h3>
+                  <div
+                    class="text"
+                  >
+                    <p>
+                      Publish.helpTileText1
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <a
+                    class="link color_red"
+                    href="https://airtable.com/shrrkFuyeG0BpKKT7"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <span>
+                      Publish.helpTileCTA1
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </a>
+                </div>
               </div>
             </div>
-            <p
-              className="label"
-            >
-              Publish.figuresSubtitle1
-            </p>
-          </div>
-          <div
-            className="col-sm-12 col-lg-4"
-          >
             <div
-              className="figure"
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
             >
-              <div>
-                0
+              <div
+                class="container"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    Publish.helpTileTitle2
+                  </h3>
+                  <div
+                    class="text"
+                  >
+                    <p>
+                      Publish.helpTileText2
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <a
+                    class="link color_red"
+                    href="https://help.refugies.info/fr/"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <span>
+                      Publish.helpTileCTA2
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </a>
+                </div>
               </div>
             </div>
-            <p
-              className="label"
-            >
-              Publish.figuresSubtitle2
-            </p>
-          </div>
-          <div
-            className="col-sm-12 col-lg-4"
-          >
             <div
-              className="figure"
+              class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
             >
-              <div>
-                0
+              <div
+                class="container"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    StaticPages.helpTileTitle3
+                  </h3>
+                  <div
+                    class="text"
+                  >
+                    <p>
+                      StaticPages.helpTileText3
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <button
+                    class="link color_red"
+                  >
+                    <span>
+                      StaticPages.helpTileCTA3
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
-            <p
-              className="label"
-            >
-              Publish.figuresSubtitle3
-            </p>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      className="section"
-    >
-      <span
-        className="anchor"
-        id="faq"
-      />
       <div
-        className="container faq container"
+        class="section bg_red"
       >
-        <h2
-          className="title2 text-center"
-        >
-          StaticPages.faqTitle
-        </h2>
         <div
-          className="row"
+          class="container text-center container"
         >
+          <h2
+            class="title2 text-center text-white"
+          >
+            Publish.figuresTitle
+          </h2>
           <div
-            className="infos col"
+            class="row"
           >
             <div
-              className="container"
+              class="col-sm-12 col-lg-4"
             >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                Publish.faqAccordionTitle1
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
               <div
-                className="collapse"
-                style={{}}
+                class="figure"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.faqAccordionText1",
-                    }
-                  }
-                />
+                <div>
+                  0
+                </div>
               </div>
+              <p
+                class="label"
+              >
+                Publish.figuresSubtitle1
+              </p>
             </div>
             <div
-              className="container"
+              class="col-sm-12 col-lg-4"
             >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                Publish.faqAccordionTitle2
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
               <div
-                className="collapse"
-                style={{}}
+                class="figure"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.faqAccordionText2",
-                    }
-                  }
-                />
+                <div>
+                  0
+                </div>
               </div>
+              <p
+                class="label"
+              >
+                Publish.figuresSubtitle2
+              </p>
             </div>
             <div
-              className="container"
+              class="col-sm-12 col-lg-4"
             >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
-              >
-                Publish.faqAccordionTitle3
-                <span
-                  className="icon icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
               <div
-                className="collapse"
-                style={{}}
+                class="figure"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.faqAccordionText3",
-                    }
-                  }
-                />
+                <div>
+                  0
+                </div>
               </div>
+              <p
+                class="label"
+              >
+                Publish.figuresSubtitle3
+              </p>
             </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="section"
+      >
+        <span
+          class="anchor"
+          id="faq"
+        />
+        <div
+          class="container faq container"
+        >
+          <h2
+            class="title2 text-center"
+          >
+            StaticPages.faqTitle
+          </h2>
+          <div
+            class="row"
+          >
             <div
-              className="container"
+              class="infos col"
             >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
+              <div
+                class="container"
               >
-                Publish.faqAccordionTitle4
-                <span
-                  className="icon icon"
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
+                  Publish.faqAccordionTitle1
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.faqAccordionText1
+                  </p>
+                </div>
+              </div>
               <div
-                className="collapse"
-                style={{}}
+                class="container"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.faqAccordionText4",
-                    }
-                  }
-                />
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
+                >
+                  Publish.faqAccordionTitle2
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.faqAccordionText2
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              className="container"
-            >
-              <button
-                className="btn btn btn-secondary"
-                onClick={[Function]}
-                type="button"
+              <div
+                class="container"
               >
-                Publish.faqAccordionTitle5
-                <span
-                  className="icon icon"
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "32px",
-                        "lineHeight": "32px",
-                      }
-                    }
-                  />
-                </span>
-              </button>
+                  Publish.faqAccordionTitle3
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.faqAccordionText3
+                  </p>
+                </div>
+              </div>
               <div
-                className="collapse"
-                style={{}}
+                class="container"
               >
-                <p
-                  className="text"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Publish.faqAccordionText5",
-                    }
-                  }
-                />
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
+                >
+                  Publish.faqAccordionTitle4
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.faqAccordionText4
+                  </p>
+                </div>
+              </div>
+              <div
+                class="container"
+              >
+                <button
+                  class="btn btn btn-secondary"
+                  type="button"
+                >
+                  Publish.faqAccordionTitle5
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 32px; line-height: 32px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-ios-downward-outline"
+                        fill="black"
+                        height="32px"
+                        viewBox="0 0 24 24"
+                        width="32px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-ios-downward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              width="24"
+                            />
+                            <path
+                              d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </button>
+                <div
+                  class="collapse"
+                >
+                  <p
+                    class="text"
+                  >
+                    Publish.faqAccordionText5
+                  </p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="link"
-        >
-          <a
-            className="link color_red"
-            href="https://help.refugies.info/fr/"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
+          <div
+            class="link"
           >
-            <span>
-              Publish.faqCTA
-            </span>
-            <span
-              className="icon icon"
+            <a
+              class="link color_red"
+              href="https://help.refugies.info/fr/"
+              rel="noopener noreferrer"
+              target="_blank"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "24px",
-                    "lineHeight": "24px",
-                  }
-                }
-              />
-            </span>
-          </a>
+              <span>
+                Publish.faqCTA
+              </span>
+              <span
+                class="icon icon"
+              >
+                <i
+                  style="height: 24px; line-height: 24px;"
+                >
+                  <svg
+                    class="eva eva-arrow-forward-outline"
+                    fill="red"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="arrow-forward"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          transform="rotate(-90 12 12)"
+                          width="24"
+                        />
+                        <path
+                          d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_grey"
-  >
-    <span
-      className="anchor"
-      id="register"
-    />
     <div
-      className="register container"
+      class="section bg_grey"
     >
-      <h2
-        className="title2 mb-0"
-      >
-        StaticPages.registerTitle
-      </h2>
-      <p
-        className="subtitle mb-14"
-      >
-        Publish.registerSubtitle
-      </p>
-      <button
-        className="fr-btn fr-icon-arrow-right-line fr-btn--icon-right submit_btn"
-        id="fr-button-:r0:"
-        onClick={[Function]}
-        style={{}}
+      <span
+        class="anchor"
+        id="register"
+      />
+      <div
+        class="register container"
       >
-        login_or_signup
-      </button>
+        <h2
+          class="title2 mb-0"
+        >
+          StaticPages.registerTitle
+        </h2>
+        <p
+          class="subtitle mb-14"
+        >
+          Publish.registerSubtitle
+        </p>
+        <button
+          class="fr-btn fr-icon-arrow-right-line fr-btn--icon-right submit_btn"
+          id="fr-button-:r0:"
+        >
+          login_or_signup
+        </button>
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/publier.test.tsx b/client/src/__tests__/publier.test.tsx
index 45c9c4b380..a013b5867e 100644
--- a/client/src/__tests__/publier.test.tsx
+++ b/client/src/__tests__/publier.test.tsx
@@ -12,7 +12,6 @@ describe("publier", () => {
   });
 
   it("renders publier", () => {
-    window.scrollTo = jest.fn();
     const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: publier,
       reduxState: {
diff --git a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.tsx b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.tsx
index db2db45166..aa03d9d47b 100644
--- a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.tsx
+++ b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Col } from "reactstrap";
-import useRTL from "hooks/useRTL";
 import EVAIcon from "components/UI/EVAIcon/EVAIcon";
+import useRTL from "hooks/useRTL";
 import { cls } from "lib/classname";
+import { useEffect, useRef, useState } from "react";
+import { Button, Col } from "reactstrap";
 import TestimonyAuthor from "./TestimonyAuthor";
 import styles from "./TestimonySlider.module.scss";
 
@@ -36,11 +36,13 @@ const TestimonySlider = (props: Props) => {
   useEffect(() => {
     if (!slider.current) return;
     const pageWidth = slider.current.clientWidth;
-    slider.current.scroll({
-      left: page * pageWidth * (isRTL ? -1 : 1),
-      top: 0,
-      behavior: "smooth"
-    });
+    // Be permissive with the scroll behavior during testing
+    slider.current.scroll &&
+      slider.current.scroll({
+        left: page * pageWidth * (isRTL ? -1 : 1),
+        top: 0,
+        behavior: "smooth",
+      });
   }, [page, isRTL]);
 
   return (

From 7c36a5fc11acb493fb17193c4a1e769c3bcbc47d Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 18 Jul 2024 14:18:40 +0200
Subject: [PATCH 28/37] test(client): :white_check_mark: Fix home page test

---
 .../__snapshots__/index.test.tsx.snap         | 16748 ++++++++--------
 client/src/__tests__/index.test.tsx           |     1 -
 .../UI/ContentSlider/ContentSlider.tsx        |     3 +-
 3 files changed, 8142 insertions(+), 8610 deletions(-)

diff --git a/client/src/__tests__/__snapshots__/index.test.tsx.snap b/client/src/__tests__/__snapshots__/index.test.tsx.snap
index 8178b7d930..5af6c5f9c8 100644
--- a/client/src/__tests__/__snapshots__/index.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`homepage renders homepage 1`] = `
-.c13 {
+<DocumentFragment>
+  .c13 {
   background-color: transparent;
   color: #443023;
 }
@@ -429,9598 +430,9129 @@ exports[`homepage renders homepage 1`] = `
 }
 
 <div
-  className="main"
->
-  <div
-    className="hero"
+    class="main"
   >
     <div
-      className="container container"
+      class="hero"
     >
-      <h1>
-        Homepage.title
-      </h1>
       <div
-        className="container"
+        class="container container"
       >
+        <h1>
+          Homepage.title
+        </h1>
         <div
-          className="inputs"
+          class="container"
         >
           <div
-            className="dropdown dropdown"
-            onKeyDown={[Function]}
+            class="inputs"
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="dropdown dropdown"
             >
-              <div
-                className="filter homepage"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-secondary"
+                type="button"
               >
-                <span
-                  className="icon"
+                <div
+                  class="filter homepage"
                 >
                   <span
-                    className="icon"
+                    class="icon"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-pin-outline" fill="black"><g data-name="Layer 2"><g data-name="pin"><rect width="24" height="24" opacity="0"/><path d="M12 2a8 8 0 0 0-8 7.92c0 5.48 7.05 11.58 7.35 11.84a1 1 0 0 0 1.3 0C13 21.5 20 15.4 20 9.92A8 8 0 0 0 12 2zm0 17.65c-1.67-1.59-6-6-6-9.73a6 6 0 0 1 12 0c0 3.7-4.33 8.14-6 9.73z"/><path d="M12 6a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 12 6zm0 5a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 12 11z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-pin-outline"
+                          fill="black"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="pin"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M12 2a8 8 0 0 0-8 7.92c0 5.48 7.05 11.58 7.35 11.84a1 1 0 0 0 1.3 0C13 21.5 20 15.4 20 9.92A8 8 0 0 0 12 2zm0 17.65c-1.67-1.59-6-6-6-9.73a6 6 0 0 1 12 0c0 3.7-4.33 8.14-6 9.73z"
+                              />
+                              <path
+                                d="M12 6a3.5 3.5 0 1 0 3.5 3.5A3.5 3.5 0 0 0 12 6zm0 5a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 12 11z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
-                <span
-                  className="search"
-                >
-                  <label
-                    className="label"
-                    htmlFor="Dispositif.Département"
-                  >
-                    Dispositif.Département
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Dispositif.Département"
-                    onChange={[Function]}
-                    placeholder="Recherche.department"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value empty"
+                  <span
+                    class="search"
                   >
-                    Recherche.all
-                  </div>
-                </span>
-              </div>
-            </button>
-            <div
-              aria-hidden={true}
-              className="menu dropdown-menu"
-              data-bs-popper="static"
-              role="menu"
-              tabIndex="-1"
-            >
+                    <label
+                      class="label"
+                      for="Dispositif.Département"
+                    >
+                      Dispositif.Département
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Dispositif.Département"
+                      placeholder="Recherche.department"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value empty"
+                    >
+                      Recherche.all
+                    </div>
+                  </span>
+                </div>
+              </button>
               <div
-                className="container"
+                aria-hidden="true"
+                class="menu dropdown-menu"
+                data-bs-popper="static"
+                role="menu"
+                tabindex="-1"
               >
                 <div
-                  className="header no_results"
+                  class="container"
                 >
-                  <button
-                    className="btn btn btn-secondary"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
+                  <div
+                    class="header no_results"
                   >
-                    <span
-                      className="icon"
+                    <button
+                      class="btn btn btn-secondary"
+                      type="button"
                     >
                       <span
-                        className="icon"
+                        class="icon"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24" class="eva eva-navigation-2-outline" fill="black"><g data-name="Layer 2"><g data-name="navigation-2"><rect width="24" height="24" opacity="0"/><path d="M13.67 22h-.06a1 1 0 0 1-.92-.8L11 13l-8.2-1.69a1 1 0 0 1-.12-1.93l16-5.33A1 1 0 0 1 20 5.32l-5.33 16a1 1 0 0 1-1 .68zm-6.8-11.9l5.19 1.06a1 1 0 0 1 .79.78l1.05 5.19 3.52-10.55z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "16px",
-                              "lineHeight": "16px",
-                            }
-                          }
-                        />
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 16px; line-height: 16px;"
+                          >
+                            <svg
+                              class="eva eva-navigation-2-outline"
+                              fill="black"
+                              height="16px"
+                              viewBox="0 0 24 24"
+                              width="16px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="navigation-2"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M13.67 22h-.06a1 1 0 0 1-.92-.8L11 13l-8.2-1.69a1 1 0 0 1-.12-1.93l16-5.33A1 1 0 0 1 20 5.32l-5.33 16a1 1 0 0 1-1 .68zm-6.8-11.9l5.19 1.06a1 1 0 0 1 .79.78l1.05 5.19 3.52-10.55z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
                       </span>
-                    </span>
-                    Recherche.positionButton
-                  </button>
+                      Recherche.positionButton
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            className="dropdown dropdown"
-            onKeyDown={[Function]}
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="dropdown dropdown"
             >
-              <div
-                className="filter homepage"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-secondary"
+                type="button"
               >
-                <span
-                  className="icon"
+                <div
+                  class="filter homepage"
                 >
                   <span
-                    className="icon"
+                    class="icon"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-list-outline" fill="black"><g data-name="Layer 2"><g data-name="list"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><circle cx="4" cy="7" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="17" r="1"/><rect x="7" y="11" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="16" width="14" height="2" rx=".94" ry=".94"/><rect x="7" y="6" width="14" height="2" rx=".94" ry=".94"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
+                    <span
+                      class="icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-list-outline"
+                          fill="black"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="list"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(180 12 12)"
+                                width="24"
+                              />
+                              <circle
+                                cx="4"
+                                cy="7"
+                                r="1"
+                              />
+                              <circle
+                                cx="4"
+                                cy="12"
+                                r="1"
+                              />
+                              <circle
+                                cx="4"
+                                cy="17"
+                                r="1"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="11"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="16"
+                              />
+                              <rect
+                                height="2"
+                                rx=".94"
+                                ry=".94"
+                                width="14"
+                                x="7"
+                                y="6"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
-                <span
-                  className="search"
-                >
-                  <label
-                    className="label"
-                    htmlFor="Recherche.themes"
-                  >
-                    Recherche.themes
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Recherche.themes"
-                    onChange={[Function]}
-                    placeholder="Rechercher2"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value empty"
+                  <span
+                    class="search"
                   >
-                    Recherche.all
-                  </div>
-                </span>
-              </div>
-            </button>
-            <div
-              aria-hidden={true}
-              className="menu dropdown-menu"
-              data-bs-popper="static"
-              role="menu"
-              tabIndex="-1"
-            >
+                    <label
+                      class="label"
+                      for="Recherche.themes"
+                    >
+                      Recherche.themes
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Recherche.themes"
+                      placeholder="Rechercher2"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value empty"
+                    >
+                      Recherche.all
+                    </div>
+                  </span>
+                </div>
+              </button>
               <div
-                className="container"
+                aria-hidden="true"
+                class="menu dropdown-menu"
+                data-bs-popper="static"
+                role="menu"
+                tabindex="-1"
               >
                 <div
-                  className="themes"
+                  class="container"
                 >
-                  <div>
-                    <button
-                      className="c0 btn"
-                      color100="#443023"
-                      color30="#EEE7E5"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                  <div
+                    class="themes"
+                  >
+                    <div>
+                      <button
+                        class="c0 btn"
+                        color100="#443023"
+                        color30="#EEE7E5"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={{}}
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
                           >
-                            <img
-                              alt=""
-                              data-nimg="1"
-                              decoding="async"
-                              height={20}
-                              loading="lazy"
-                              onError={[Function]}
-                              onLoad={[Function]}
-                              src="/images/icon_office.svg"
-                              style={
-                                {
-                                  "color": "transparent",
-                                }
-                              }
-                              width={20}
-                            />
+                            <span
+                              class="icon"
+                            >
+                              <img
+                                alt=""
+                                data-nimg="1"
+                                decoding="async"
+                                height="20"
+                                loading="lazy"
+                                src="/images/icon_office.svg"
+                                style="color: transparent;"
+                                width="20"
+                              />
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Administratif
+                            </span>
                           </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                        </span>
+                        <span
+                          class="ms-2 icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
                           >
-                            Administratif
-                          </span>
+                            <svg
+                              class="eva eva-chevron-right-outline"
+                              fill="white"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="chevron-right"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    transform="rotate(-90 12 12)"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M10.5 17a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L13.1 12 9.92 8.69a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l3.86 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-.7.32z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
                         </span>
-                      </span>
-                      <span
-                        className="ms-2 icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-chevron-right-outline" fill="white"><g data-name="Layer 2"><g data-name="chevron-right"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M10.5 17a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L13.1 12 9.92 8.69a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l3.86 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-.7.32z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c1 btn"
-                      color100="#3D2884"
-                      color30="#EFE8F4"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c1 btn"
+                        color100="#3D2884"
+                        color30="#EFE8F4"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#3D2884",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(61, 40, 132);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Français
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Français
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c2 btn"
-                      color100="#095411"
-                      color30="#E8F4E8"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c2 btn"
+                        color100="#095411"
+                        color30="#E8F4E8"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#095411",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(9, 84, 17);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Formation pro
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Formation pro
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c3 btn"
-                      color100="#055E5A"
-                      color30="#EDFDF9"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c3 btn"
+                        color100="#055E5A"
+                        color30="#EDFDF9"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#055E5A",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(5, 94, 90);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Insertion pro
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Insertion pro
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c4 btn"
-                      color100="#06508C"
-                      color30="#DDF2F9"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c4 btn"
+                        color100="#06508C"
+                        color30="#DDF2F9"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#06508C",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(6, 80, 140);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Logement
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Logement
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c5 btn"
-                      color100="#910940"
-                      color30="#FFEDED"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c5 btn"
+                        color100="#910940"
+                        color30="#FFEDED"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#910940",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(145, 9, 64);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Santé
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Santé
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c6 btn"
-                      color100="#CD5605"
-                      color30="#FEEBDE"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c6 btn"
+                        color100="#CD5605"
+                        color30="#FEEBDE"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#CD5605",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(205, 86, 5);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Mobilité
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Mobilité
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c7 btn"
-                      color100="#770649"
-                      color30="#FFEAF4"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c7 btn"
+                        color100="#770649"
+                        color30="#FFEAF4"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#770649",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(119, 6, 73);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Rencontre
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Rencontre
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c8 btn"
-                      color100="#204F01"
-                      color30="#F2F9E5"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c8 btn"
+                        color100="#204F01"
+                        color30="#F2F9E5"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#204F01",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(32, 79, 1);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Études
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Études
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c9 btn"
-                      color100="#073099"
-                      color30="#EEF8FF"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c9 btn"
+                        color100="#073099"
+                        color30="#EEF8FF"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#073099",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(7, 48, 153);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Bénévolat
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c10 btn"
+                        color100="#600566"
+                        color30="#F9F1FD"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(96, 5, 102);"
                           >
-                            Bénévolat
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Loisir
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c10 btn"
-                      color100="#600566"
-                      color30="#F9F1FD"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c11 btn"
+                        color100="#9E180A"
+                        color30="#F9E8E8"
+                        disabled=""
+                        tabindex="0"
                       >
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#600566",
-                            }
-                          }
+                          class="btn_content"
                         >
                           <span
-                            className="icon"
+                            class="container"
+                            style="color: rgb(158, 24, 10);"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Culture
+                            </span>
                           </span>
+                        </span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="c12 btn"
+                        color100="#77057A"
+                        color30="#FDC4FC"
+                        disabled=""
+                        tabindex="0"
+                      >
+                        <span
+                          class="btn_content"
+                        >
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
+                            class="container"
+                            style="color: rgb(119, 5, 122);"
                           >
-                            Loisir
+                            <span
+                              class="icon"
+                            >
+                              <span
+                                class="icon theme-icon"
+                                style="width: 20px; height: 20px;"
+                              >
+                                <svg
+                                  height="20"
+                                  width="20"
+                                />
+                              </span>
+                            </span>
+                            <span
+                              class="name"
+                              style="min-height: 20px;"
+                            >
+                              Famille
+                            </span>
                           </span>
                         </span>
-                      </span>
-                    </button>
+                      </button>
+                    </div>
                   </div>
-                  <div>
+                  <div
+                    class="needs"
+                  >
                     <button
-                      className="c11 btn"
-                      color100="#9E180A"
-                      color30="#F9E8E8"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
+                      class="c13 btn need"
+                      color100="#443023"
+                      color30="#EEE7E5"
+                      tabindex="0"
                     >
-                      <span
-                        className="btn_content"
+                      <div
+                        class="checkbox"
                       >
+                        <input
+                          tabindex="-1"
+                          type="checkbox"
+                        />
                         <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#9E180A",
-                            }
-                          }
+                          class="check"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
-                            <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
+                            <i
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-square-outline"
+                                fill="#443023"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="square"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
+                        </span>
+                        <label>
                           <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Culture
-                          </span>
-                        </span>
-                      </span>
-                    </button>
-                  </div>
-                  <div>
-                    <button
-                      className="c12 btn"
-                      color100="#77057A"
-                      color30="#FDC4FC"
-                      disabled={true}
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      tabIndex={0}
-                    >
-                      <span
-                        className="btn_content"
-                      >
-                        <span
-                          className="container"
-                          style={
-                            {
-                              "color": "#77057A",
-                            }
-                          }
-                        >
-                          <span
-                            className="icon"
+                            class="all"
                           >
                             <span
-                              className="icon theme-icon"
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg width="20" height="20"></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": 20,
-                                  "width": 20,
-                                }
-                              }
-                            />
-                          </span>
-                          <span
-                            className="name"
-                            style={
-                              {
-                                "minHeight": 20,
-                              }
-                            }
-                          >
-                            Famille
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-grid"
+                                  fill="#443023"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="grid"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <path
+                                        d="M9 3H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M19 3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M9 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"
+                                      />
+                                      <path
+                                        d="M19 13h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                            Recherche.all
+                            <span
+                              class="badge"
+                              style="background-color: rgb(238, 231, 229); color: rgb(68, 48, 35);"
+                            >
+                              0
+                            </span>
                           </span>
-                        </span>
-                      </span>
+                        </label>
+                      </div>
                     </button>
                   </div>
                 </div>
+              </div>
+            </div>
+            <div
+              class="dropdown"
+            >
+              <button
+                class="btn btn-secondary"
+                type="button"
+              >
                 <div
-                  className="needs"
+                  class="filter homepage"
                 >
-                  <button
-                    className="c13 btn need"
-                    color100="#443023"
-                    color30="#EEE7E5"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    selected={false}
-                    tabIndex={0}
+                  <span
+                    class="icon"
                   >
-                    <div
-                      className="checkbox"
+                    <span
+                      class="icon"
                     >
-                      <input
-                        defaultChecked={false}
-                        tabIndex={-1}
-                        type="checkbox"
-                      />
-                      <span
-                        className="check"
+                      <i
+                        style="height: 20px; line-height: 20px;"
                       >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-square-outline" fill="#443023"><g data-name="Layer 2"><g data-name="square"><rect width="24" height="24" opacity="0"/><path d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3zM6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
-                      </span>
-                      <label>
-                        <span
-                          className="all"
+                        <svg
+                          class="eva eva-search-outline"
+                          fill="black"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <span
-                            className="icon"
-                          >
-                            <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-grid" fill="#443023"><g data-name="Layer 2"><g data-name="grid"><rect width="24" height="24" opacity="0"/><path d="M9 3H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path d="M19 3h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/><path d="M9 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/><path d="M19 13h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
-                          </span>
-                          Recherche.all
-                          <span
-                            className="badge"
-                            style={
-                              {
-                                "backgroundColor": "#EEE7E5",
-                                "color": "#443023",
-                              }
-                            }
+                          <g
+                            data-name="Layer 2"
                           >
-                            0
-                          </span>
-                        </span>
-                      </label>
+                            <g
+                              data-name="search"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                  </span>
+                  <span
+                    class="search"
+                  >
+                    <label
+                      class="label"
+                      for="Recherche.keyword"
+                    >
+                      Recherche.keyword
+                    </label>
+                    <input
+                      class="input hidden"
+                      id="Recherche.keyword"
+                      placeholder="Rechercher2"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="value empty"
+                    >
+                      Recherche.keywordPlaceholder
                     </div>
-                  </button>
+                  </span>
                 </div>
-              </div>
+              </button>
             </div>
           </div>
-          <div
-            className="dropdown"
+          <button
+            class="submit btn btn-secondary disabled"
+            disabled=""
+            type="button"
           >
-            <button
-              className="btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="filter homepage"
-              >
-                <span
-                  className="icon"
+            <span
+              class="icon icon"
+            >
+              <i
+                style="height: 24px; line-height: 24px;"
+              >
+                <svg
+                  class="eva eva-search-outline"
+                  fill="white"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-search-outline" fill="black"><g data-name="Layer 2"><g data-name="search"><rect width="24" height="24" opacity="0"/><path d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                </span>
-                <span
-                  className="search"
-                >
-                  <label
-                    className="label"
-                    htmlFor="Recherche.keyword"
-                  >
-                    Recherche.keyword
-                  </label>
-                  <input
-                    className="input hidden"
-                    id="Recherche.keyword"
-                    onChange={[Function]}
-                    placeholder="Rechercher2"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    className="value empty"
+                  <g
+                    data-name="Layer 2"
                   >
-                    Recherche.keywordPlaceholder
-                  </div>
-                </span>
-              </div>
-            </button>
-          </div>
+                    <g
+                      data-name="search"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            <span
+              class="label"
+            >
+              Rechercher
+            </span>
+          </button>
         </div>
-        <button
-          className="submit btn btn-secondary disabled"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
+      </div>
+      <div
+        class="container center"
+      >
+        <a
+          class="btn"
+          href="/undefined#themes"
+          title="Suivant"
         >
           <span
-            className="icon icon"
+            class="icon"
           >
             <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-search-outline" fill="white"><g data-name="Layer 2"><g data-name="search"><rect width="24" height="24" opacity="0"/><path d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "24px",
-                  "lineHeight": "24px",
-                }
-              }
-            />
-          </span>
-          <span
-            className="label"
-          >
-            Rechercher
+              style="height: 24px; line-height: 24px;"
+            >
+              <svg
+                class="eva eva-arrow-downward-outline"
+                fill="#0421b1"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="arrow-downward"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
           </span>
-        </button>
+        </a>
       </div>
-    </div>
-    <div
-      className="container center"
-    >
-      <a
-        className="btn"
-        href="/undefined#themes"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-        title="Suivant"
+      <div
+        class="bottom_img"
       >
-        <span
-          className="icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-downward-outline" fill="#0421b1"><g data-name="Layer 2"><g data-name="arrow-downward"><rect width="24" height="24" opacity="0"/><path d="M18.77 13.36a1 1 0 0 0-1.41-.13L13 16.86V5a1 1 0 0 0-2 0v11.86l-4.36-3.63a1 1 0 1 0-1.28 1.54l6 5 .15.09.13.07a1 1 0 0 0 .72 0l.13-.07.15-.09 6-5a1 1 0 0 0 .13-1.41z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "24px",
-                "lineHeight": "24px",
-              }
-            }
-          />
-        </span>
-      </a>
-    </div>
-    <div
-      className="bottom_img"
-    >
-      <img
-        alt=""
-        data-nimg="1"
-        decoding="async"
-        height={274}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-          }
-        }
-        width={207}
-      />
+        <img
+          alt=""
+          data-nimg="1"
+          decoding="async"
+          height="274"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent;"
+          width="207"
+        />
+      </div>
     </div>
-  </div>
-  <div
-    className="section themes"
-    id="themes"
-  >
     <div
-      className="container container"
+      class="section themes"
+      id="themes"
     >
-      <h2
-        className="h3"
-      >
-        Recherche.titleThemes
-      </h2>
       <div
-        className="themes"
+        class="container container"
       >
-        <button
-          className="c14 btn"
-          onClick={[Function]}
+        <h2
+          class="h3"
         >
-          <span
-            className="me-4"
-          >
-            Administratif
-          </span>
-          <span
-            className="image"
+          Recherche.titleThemes
+        </h2>
+        <div
+          class="themes"
+        >
+          <button
+            class="c14 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/admin.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Administratif
             </span>
-          </span>
-        </button>
-        <button
-          className="c15 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Français
-          </span>
-          <span
-            className="image"
-          >
             <span
-              className="image_inner"
+              class="image"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/francais.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/admin.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          className="c16 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Formation pro
-          </span>
-          <span
-            className="image"
+          </button>
+          <button
+            class="c15 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/metier.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Français
             </span>
-          </span>
-        </button>
-        <button
-          className="c17 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Insertion pro
-          </span>
-          <span
-            className="image"
-          >
             <span
-              className="image_inner"
+              class="image"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/travail.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/francais.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          className="c18 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Logement
-          </span>
-          <span
-            className="image"
+          </button>
+          <button
+            class="c16 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/logement.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Formation pro
             </span>
-          </span>
-        </button>
-        <button
-          className="c19 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Santé
-          </span>
-          <span
-            className="image"
-          >
             <span
-              className="image_inner"
+              class="image"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/sante.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/metier.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          className="c20 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Mobilité
-          </span>
-          <span
-            className="image"
+          </button>
+          <button
+            class="c17 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/transport.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Insertion pro
             </span>
-          </span>
-        </button>
-        <button
-          className="c21 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Rencontre
-          </span>
-          <span
-            className="image"
-          >
             <span
-              className="image_inner"
+              class="image"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/rencontres.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/travail.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          className="c22 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
-          >
-            Études
-          </span>
-          <span
-            className="image"
+          </button>
+          <button
+            class="c18 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/etudes.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Logement
             </span>
-          </span>
-        </button>
-        <button
-          className="c23 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/logement.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c19 btn"
           >
-            Bénévolat
-          </span>
-          <span
-            className="image"
+            <span
+              class="me-4"
+            >
+              Santé
+            </span>
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/sante.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c20 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/benevolat.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Mobilité
             </span>
-          </span>
-        </button>
-        <button
-          className="c24 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/transport.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c21 btn"
           >
-            Loisir
-          </span>
-          <span
-            className="image"
+            <span
+              class="me-4"
+            >
+              Rencontre
+            </span>
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/rencontres.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c22 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/loisirs.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Études
             </span>
-          </span>
-        </button>
-        <button
-          className="c25 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/etudes.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c23 btn"
           >
-            Culture
-          </span>
-          <span
-            className="image"
+            <span
+              class="me-4"
+            >
+              Bénévolat
+            </span>
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/benevolat.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c24 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/images/app/culture.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Loisir
             </span>
-          </span>
-        </button>
-        <button
-          className="c26 btn"
-          onClick={[Function]}
-        >
-          <span
-            className="me-4"
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/loisirs.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c25 btn"
           >
-            Famille
-          </span>
-          <span
-            className="image"
+            <span
+              class="me-4"
+            >
+              Culture
+            </span>
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="/images/app/culture.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+          <button
+            class="c26 btn"
           >
             <span
-              className="image_inner"
+              class="me-4"
             >
-              <img
-                alt=""
-                data-nimg="1"
-                decoding="async"
-                height={90}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="https://res.cloudinary.com/dlmqnnhp6/image/upload/v1662999880/pictures/ot6qwuszncts5ppxusds.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={65}
-              />
+              Famille
             </span>
-          </span>
-        </button>
+            <span
+              class="image"
+            >
+              <span
+                class="image_inner"
+              >
+                <img
+                  alt=""
+                  data-nimg="1"
+                  decoding="async"
+                  height="90"
+                  loading="lazy"
+                  src="https://res.cloudinary.com/dlmqnnhp6/image/upload/v1662999880/pictures/ot6qwuszncts5ppxusds.svg"
+                  style="color: transparent;"
+                  width="65"
+                />
+              </span>
+            </span>
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_blue"
-    id="application"
-  >
     <div
-      className="container container"
+      class="section bg_blue"
+      id="application"
     >
       <div
-        className="align-items-center row"
+        class="container container"
       >
         <div
-          className="col-sm-12 col-lg-6 order-lg-2"
+          class="align-items-center row"
         >
           <div
-            className="container"
+            class="col-sm-12 col-lg-6 order-lg-2"
           >
             <div
-              className="front"
-            >
-              <video
-                className="video autoplay-video"
-                height={442}
-                loop={true}
-                muted={true}
-                playsInline=""
-                style={
-                  {
-                    "borderRadius": 26,
-                  }
-                }
-              >
-                <source
-                  src="/video/home-app-video.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-            <img
-              alt="Mobile app mockup"
-              className="back"
-              data-nimg="1"
-              decoding="async"
-              height={510}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={510}
-            />
-          </div>
-          <div
-            className="store"
-          >
-            <a
-              className="links"
-              href="https://apps.apple.com/app/id1595597429"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <img
-                alt="Get it on App Store"
-                data-nimg="1"
-                decoding="async"
-                height={50}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="https://storage.googleapis.com/refugies-info-assets/store-badges/app-store-fr.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={160}
-              />
-            </a>
-            <a
-              className="links"
-              href="https://play.google.com/store/apps/details?id=com.refugiesinfo.app"
-              rel="noopener noreferrer"
-              target="_blank"
+              class="container"
             >
+              <div
+                class="front"
+              >
+                <video
+                  class="video autoplay-video"
+                  height="442"
+                  loop=""
+                  style="border-radius: 26px;"
+                >
+                  <source
+                    src="/video/home-app-video.mp4"
+                    type="video/mp4"
+                  />
+                </video>
+              </div>
               <img
-                alt="Get it on Play Store"
+                alt="Mobile app mockup"
+                class="back"
                 data-nimg="1"
                 decoding="async"
-                height={50}
+                height="510"
                 loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="https://storage.googleapis.com/refugies-info-assets/store-badges/google-play-fr.svg"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={160}
+                src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
+                style="color: transparent;"
+                width="510"
               />
-            </a>
-            <div
-              className="reviews"
-            >
-              <div>
-                <span
-                  className="icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="#FCBF35"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-                <span
-                  className="icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="#FCBF35"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-                <span
-                  className="icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="#FCBF35"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-                <span
-                  className="icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="#FCBF35"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-                <span
-                  className="icon"
-                >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="#FCBF35"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "20px",
-                        "lineHeight": "20px",
-                      }
-                    }
-                  />
-                </span>
-              </div>
-              <p
-                className="mb-0"
-              >
-                Homepage.mobileAppReviews
-              </p>
             </div>
-          </div>
-        </div>
-        <div
-          className="col-sm-12 col-lg-6 order-lg-1"
-        >
-          <h2
-            className="title2 text-white mb-0"
-          >
-            Homepage.mobileAppTitle
-          </h2>
-          <p
-            className="subtitle"
-          >
-            Homepage.mobileAppSubtitle
-          </p>
-          <div
-            className="container"
-          >
-            <label>
-              Homepage.mobileAppFormLabelDetails
-            </label>
             <div
-              className="sms_form"
+              class="store"
             >
-              <div>
-                <div
-                  className="container input"
-                >
-                  <input
-                    className="input"
-                    onChange={[Function]}
-                    placeholder="Homepage.mobileAppFormLabel"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-              <div
-                className="options"
+              <a
+                class="links"
+                href="https://apps.apple.com/app/id1595597429"
+                rel="noopener noreferrer"
+                target="_blank"
               >
-                <div
-                  className="dropdown dropdown"
-                  onKeyDown={[Function]}
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="btn btn-secondary"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <span
-                      className="value"
+                <img
+                  alt="Get it on App Store"
+                  data-nimg="1"
+                  decoding="async"
+                  height="50"
+                  loading="lazy"
+                  src="https://storage.googleapis.com/refugies-info-assets/store-badges/app-store-fr.svg"
+                  style="color: transparent;"
+                  width="160"
+                />
+              </a>
+              <a
+                class="links"
+                href="https://play.google.com/store/apps/details?id=com.refugiesinfo.app"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt="Get it on Play Store"
+                  data-nimg="1"
+                  decoding="async"
+                  height="50"
+                  loading="lazy"
+                  src="https://storage.googleapis.com/refugies-info-assets/store-badges/google-play-fr.svg"
+                  style="color: transparent;"
+                  width="160"
+                />
+              </a>
+              <div
+                class="reviews"
+              >
+                <div>
+                  <span
+                    class="icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
                     >
-                      LanguageDropdown.en_français
-                      <span
-                        className="flag fi fi-fr mx-2"
-                        title="fr"
-                      />
-                    </span>
-                    <span
-                      className="icon icon"
+                      <svg
+                        class="eva eva-star"
+                        fill="#FCBF35"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="star"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                  <span
+                    class="icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
                     >
-                      <i
-                        dangerouslySetInnerHTML={
-                          {
-                            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-chevron-down-outline" fill="dark"><g data-name="Layer 2"><g data-name="chevron-down"><rect width="24" height="24" opacity="0"/><path d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"/></g></g></svg>",
-                          }
-                        }
-                        style={
-                          {
-                            "height": "24px",
-                            "lineHeight": "24px",
-                          }
-                        }
-                      />
-                    </span>
-                  </button>
+                      <svg
+                        class="eva eva-star"
+                        fill="#FCBF35"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="star"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                  <span
+                    class="icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-star"
+                        fill="#FCBF35"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="star"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                  <span
+                    class="icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-star"
+                        fill="#FCBF35"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="star"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                  <span
+                    class="icon"
+                  >
+                    <i
+                      style="height: 20px; line-height: 20px;"
+                    >
+                      <svg
+                        class="eva eva-star"
+                        fill="#FCBF35"
+                        height="20px"
+                        viewBox="0 0 24 24"
+                        width="20px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="star"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </div>
+                <p
+                  class="mb-0"
+                >
+                  Homepage.mobileAppReviews
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            class="col-sm-12 col-lg-6 order-lg-1"
+          >
+            <h2
+              class="title2 text-white mb-0"
+            >
+              Homepage.mobileAppTitle
+            </h2>
+            <p
+              class="subtitle"
+            >
+              Homepage.mobileAppSubtitle
+            </p>
+            <div
+              class="container"
+            >
+              <label>
+                Homepage.mobileAppFormLabelDetails
+              </label>
+              <div
+                class="sms_form"
+              >
+                <div>
+                  <div
+                    class="container input"
+                  >
+                    <input
+                      class="input"
+                      placeholder="Homepage.mobileAppFormLabel"
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="options"
+                >
                   <div
-                    aria-hidden={true}
-                    className="menu dropdown-menu"
-                    data-bs-popper="static"
-                    role="menu"
-                    tabIndex="-1"
+                    class="dropdown dropdown"
                   >
                     <button
-                      className="item selected dropdown-item"
-                      onClick={[Function]}
-                      role="menuitem"
-                      tabIndex="0"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      class="btn btn-secondary"
                       type="button"
                     >
                       <span
-                        className="flag fi fi-fr mx-2"
-                        title="fr"
-                      />
-                      <span
-                        className="item_locale"
+                        class="value"
                       >
-                        Français
-                         -
-                      </span>
-                      <span>
-                        Français
+                        LanguageDropdown.en_français
+                        <span
+                          class="flag fi fi-fr mx-2"
+                          title="fr"
+                        />
                       </span>
-                    </button>
-                    <button
-                      className="item dropdown-item"
-                      onClick={[Function]}
-                      role="menuitem"
-                      tabIndex="0"
-                      type="button"
-                    >
                       <span
-                        className="flag fi fi-en mx-2"
-                        title="en"
-                      />
-                      <span
-                        className="item_locale"
+                        class="icon icon"
                       >
-                        Anglais
-                         -
-                      </span>
-                      <span>
-                        English
+                        <i
+                          style="height: 24px; line-height: 24px;"
+                        >
+                          <svg
+                            class="eva eva-chevron-down-outline"
+                            fill="dark"
+                            height="24px"
+                            viewBox="0 0 24 24"
+                            width="24px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              data-name="Layer 2"
+                            >
+                              <g
+                                data-name="chevron-down"
+                              >
+                                <rect
+                                  height="24"
+                                  opacity="0"
+                                  width="24"
+                                />
+                                <path
+                                  d="M12 15.5a1 1 0 0 1-.71-.29l-4-4a1 1 0 1 1 1.42-1.42L12 13.1l3.3-3.18a1 1 0 1 1 1.38 1.44l-4 3.86a1 1 0 0 1-.68.28z"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </i>
                       </span>
                     </button>
+                    <div
+                      aria-hidden="true"
+                      class="menu dropdown-menu"
+                      data-bs-popper="static"
+                      role="menu"
+                      tabindex="-1"
+                    >
+                      <button
+                        class="item selected dropdown-item"
+                        role="menuitem"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="flag fi fi-fr mx-2"
+                          title="fr"
+                        />
+                        <span
+                          class="item_locale"
+                        >
+                          Français -
+                        </span>
+                        <span>
+                          Français
+                        </span>
+                      </button>
+                      <button
+                        class="item dropdown-item"
+                        role="menuitem"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="flag fi fi-en mx-2"
+                          title="en"
+                        />
+                        <span
+                          class="item_locale"
+                        >
+                          Anglais -
+                        </span>
+                        <span>
+                          English
+                        </span>
+                      </button>
+                    </div>
                   </div>
-                </div>
-                <button
-                  className="btn validate submit"
-                  disabled={true}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="me-2 icon"
+                  <button
+                    class="btn validate submit"
+                    disabled=""
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#fff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Ok
-                </button>
+                    <span
+                      class="me-2 icon"
+                    >
+                      <i
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-checkmark-outline"
+                          fill="#fff"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="checkmark"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
+                    Ok
+                  </button>
+                </div>
               </div>
+              <p
+                class="instructions"
+              >
+                Homepage.mobileAppFormInstructions
+              </p>
             </div>
-            <p
-              className="instructions"
-            >
-              Homepage.mobileAppFormInstructions
-            </p>
+            <div
+              class="store"
+            />
           </div>
-          <div
-            className="store"
-          />
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_grey sliders"
-  >
     <div
-      className="container container"
+      class="section bg_grey sliders"
     >
-      <h2
-        className="title2"
-      >
-        Homepage.infoTypeTitle
-      </h2>
       <div
-        className="title"
+        class="container container"
       >
         <h2
-          className="h4"
+          class="title2"
         >
-          Homepage.infoTypeDemarche
+          Homepage.infoTypeTitle
         </h2>
-        <button
-          className="btn btn-secondary"
-          onClick={[Function]}
-          type="button"
-        >
-          Recherche.seeAllButton
-        </button>
-      </div>
-      <div
-        className="container content-card-slider"
-      >
-        <button
-          className="btn next btn btn-secondary"
-          onClick={[Function]}
-          title="Retour"
-          type="button"
+        <div
+          class="title"
         >
-          <span
-            className="icon"
+          <h2
+            class="h4"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="white"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "40px",
-                  "lineHeight": "40px",
-                }
-              }
-            />
-          </span>
-        </button>
+            Homepage.infoTypeDemarche
+          </h2>
+          <button
+            class="btn btn-secondary"
+            type="button"
+          >
+            Recherche.seeAllButton
+          </button>
+        </div>
         <div
-          className="slider demarches"
-          style={
-            {
-              "gap": 24,
-            }
-          }
+          class="container content-card-slider"
         >
+          <button
+            class="btn next btn btn-secondary"
+            title="Retour"
+            type="button"
+          >
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 40px; line-height: 40px;"
+              >
+                <svg
+                  class="eva eva-arrow-forward-outline"
+                  fill="white"
+                  height="40px"
+                  viewBox="0 0 24 24"
+                  width="40px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="arrow-forward"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(-90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
           <div
-            className="wrapper"
+            class="slider demarches"
+            style="gap: 24px;"
           >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/6392ff59bcd2075a379203a9"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Déclarer un changement de situation sur Étrangers en France"
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Déclarer un changement de situation sur Étrangers en France",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                <span
+                  class="icon_outline icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
-                </div>
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/6392ff59bcd2075a379203a9"
+                title="Déclarer un changement de situation sur Étrangers en France"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Déclarer un changement de situation sur Étrangers en France
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/63972dcb98b670cc4bae76e6"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire une demande de DCEM"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/63972dcb98b670cc4bae76e6"
+                title="Faire une demande de DCEM"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire une demande de DCEM
+                </h3>
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/5e1c8c0e0742580052a33972"
+                title="Demander le RSA"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Demander le RSA
+                </h3>
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/637781c6896812af208f3495"
+                title="Avoir le Diplôme d’accès aux études universitaires (DAEU)"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Avoir le Diplôme d’accès aux études universitaires (DAEU)
+                </h3>
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/6123a82c6bf6bc00148a5176"
+                title="Faire une demande DAHO ou DALO"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire une demande DAHO ou DALO
+                </h3>
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/5dd7c4b06f0ac0004c87c88d"
+                title="Payer les impôts sur le revenu"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Payer les impôts sur le revenu
+                </h3>
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire une demande de DCEM",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                <span
+                  class="icon_outline icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/63528e00976acb4f7bcd37ad"
+                title="Faire et utiliser une e-photo"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire et utiliser une e-photo
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/63401d8783f485a025e88388"
+                title="Créer un compte personnel sur le site Étrangers en France"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Créer un compte personnel sur le site Étrangers en France
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/5e1c8c0e0742580052a33972"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Demander le RSA"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Demander le RSA",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/630337ddf2087e2b25ac7609"
+                title="Avoir un Passe Navigo pour prendre les transports en Île-de-France"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Avoir un Passe Navigo pour prendre les transports en Île-de-France
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+              </a>
+            </div>
+            <div
+              class="wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62f265d81119eede87fb1ae2"
+                title="Demander des aides au logement"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Demander des aides au logement
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/637781c6896812af208f3495"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Avoir le Diplôme d’accès aux études universitaires (DAEU)"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Avoir le Diplôme d’accès aux études universitaires (DAEU)",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62b9809b796009107a932cbc"
+                title="Demander la fabrication du permis de conduire"
               >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Demander la fabrication du permis de conduire
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/6123a82c6bf6bc00148a5176"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire une demande DAHO ou DALO"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire une demande DAHO ou DALO",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                <span
+                  class="icon_outline icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62bab2e7b47f6b02fa9783f2"
+                title="Ouvrir un contrat de gaz ou d'électricité"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Ouvrir un contrat de gaz ou d'électricité
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/5dd7c4b06f0ac0004c87c88d"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Payer les impôts sur le revenu"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Payer les impôts sur le revenu",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62b5cc16092a73346b4a9a11"
+                title="Immatriculer une voiture"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Immatriculer une voiture
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/63528e00976acb4f7bcd37ad"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire et utiliser une e-photo"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire et utiliser une e-photo",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                <span
+                  class="icon_outline icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62a897aceece9a373f34ee49"
+                title="Acheter une voiture"
+              >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Acheter une voiture
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/63401d8783f485a025e88388"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Créer un compte personnel sur le site Étrangers en France"
+              </a>
+            </div>
+            <div
+              class="wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Créer un compte personnel sur le site Étrangers en France",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c27 card demarche content"
+                href="/procedure/62a8ae34eece9a373f350351"
+                title="Assurer une voiture"
               >
+                <div>
+                  <img
+                    alt=""
+                    data-nimg="1"
+                    decoding="async"
+                    height="48"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+                    style="color: transparent;"
+                    width="48"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Assurer une voiture
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
+              </a>
+            </div>
           </div>
-          <div
-            className="wrapper"
+        </div>
+        <div
+          class="title"
+        >
+          <h2
+            class="h4"
           >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/630337ddf2087e2b25ac7609"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Avoir un Passe Navigo pour prendre les transports en Île-de-France"
-            >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Avoir un Passe Navigo pour prendre les transports en Île-de-France",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+            Homepage.infoTypeDispositif
+          </h2>
+          <button
+            class="btn btn-secondary"
+            type="button"
+          >
+            Recherche.seeAllButton
+          </button>
+        </div>
+        <div
+          class="container content-card-slider"
+        >
+          <button
+            class="btn next btn btn-secondary"
+            title="Retour"
+            type="button"
+          >
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 40px; line-height: 40px;"
+              >
+                <svg
+                  class="eva eva-arrow-forward-outline"
+                  fill="white"
+                  height="40px"
+                  viewBox="0 0 24 24"
+                  width="40px"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                  <g
+                    data-name="Layer 2"
                   >
-                    Thème
-                  </span>
-                </div>
-              </div>
-            </a>
-          </div>
+                    <g
+                      data-name="arrow-forward"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(-90 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </button>
           <div
-            className="wrapper"
+            class="slider dispositifs"
+            style="gap: 32px;"
           >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62f265d81119eede87fb1ae2"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Demander des aides au logement"
+            <div
+              class="wrapper wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Demander des aides au logement",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/6317279072a7091286cfaf24"
+                title="Être accompagné pour entrer dans la vie professionnelle"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
                 >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Être accompagné pour entrer dans la vie professionnelle
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Un programme pour progresser en français, découvrir des métiers et rencontrer des entreprises
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62b9809b796009107a932cbc"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Demander la fabrication du permis de conduire"
-            >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Demander la fabrication du permis de conduire",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="FACE GRAND LYON"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    BIENVENU.E
                   </span>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62bab2e7b47f6b02fa9783f2"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Ouvrir un contrat de gaz ou d'électricité"
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Ouvrir un contrat de gaz ou d'électricité",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/638dcbbaf0b1a31177cf9602"
+                title="Faire une formation pour travailler dans le tourisme, l'hôtellerie, la restauration"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
                 >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
                 </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire une formation pour travailler dans le tourisme, l'hôtellerie, la restauration
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Apprendre le vocabulaire professionnel et les compétences techniques dans des secteurs qui recrutent
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62b5cc16092a73346b4a9a11"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Immatriculer une voiture"
-            >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Immatriculer une voiture",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62a897aceece9a373f34ee49"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Acheter une voiture"
-            >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Acheter une voiture",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="ABC FORMATION"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    TREMPLIN
                   </span>
                 </div>
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c27 card demarche content"
-              href="/procedure/62a8ae34eece9a373f350351"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Assurer une voiture"
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
             >
-              <div>
-                <img
-                  alt=""
-                  data-nimg="1"
-                  decoding="async"
-                  height={48}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={48}
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Assurer une voiture",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
+              >
+                <span
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/638613c54730d143903ca9ca"
+                title="Trouver une formation de français en Ile-de-France"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
                 >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
                   <span
-                    className="icon"
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Trouver une formation de français en Ile-de-France
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Réseau Alpha propose une cartographie des cours et formations de français en Ile-de-France.
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
+                >
+                  <span
+                    class="picture"
+                  >
+                    <img
+                      alt="Réseau Alpha"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Réseau Alpha
                   </span>
                 </div>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div
-        className="title"
-      >
-        <h2
-          className="h4"
-        >
-          Homepage.infoTypeDispositif
-        </h2>
-        <button
-          className="btn btn-secondary"
-          onClick={[Function]}
-          type="button"
-        >
-          Recherche.seeAllButton
-        </button>
-      </div>
-      <div
-        className="container content-card-slider"
-      >
-        <button
-          className="btn next btn btn-secondary"
-          onClick={[Function]}
-          title="Retour"
-          type="button"
-        >
-          <span
-            className="icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="white"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "40px",
-                  "lineHeight": "40px",
-                }
-              }
-            />
-          </span>
-        </button>
-        <div
-          className="slider dispositifs"
-          style={
-            {
-              "gap": 32,
-            }
-          }
-        >
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/6317279072a7091286cfaf24"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Être accompagné pour entrer dans la vie professionnelle"
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
             >
-              <div
-                className="location"
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
                 <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Être accompagné pour entrer dans la vie professionnelle",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Un programme pour progresser en français, découvrir des métiers et rencontrer des entreprises",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/63873a586fd089c3dad298f2"
+                title="Faire une mission de service civique pour jeunes réfugiés"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
                 >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
                   <span
-                    className="icon"
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire une mission de service civique pour jeunes réfugiés
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Missions rémunérées ouvertes spécialement aux jeunes réfugiés en Ile-de-France (de 18 à 25 ans).
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
+                >
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="AIME ONG"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    l'association AIME
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
                 >
-                  <img
-                    alt="FACE GRAND LYON"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662462003%2Fpictures%2Fao6iemtrsywhm6g1l1iu.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
                 </span>
                 <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "BIENVENU.E",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/638dcbbaf0b1a31177cf9602"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire une formation pour travailler dans le tourisme, l'hôtellerie, la restauration"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire une formation pour travailler dans le tourisme, l'hôtellerie, la restauration",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Apprendre le vocabulaire professionnel et les compétences techniques dans des secteurs qui recrutent",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/635a71c8d43c4d1a3f25227f"
+                title="Apprendre le français à l'université"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
+                >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Apprendre le français à l'université
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Avoir un diplôme reconnu de l'université de Toulouse pour continuer ses études en France ou travailler.
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Université fédérale de Toulouse"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    DIU Passerelle - DILAMI
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
                 >
-                  <img
-                    alt="ABC FORMATION"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1670237766%2Fpictures%2Fjdivlio5x1iasjnawmun.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
                 </span>
                 <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "TREMPLIN",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/638613c54730d143903ca9ca"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Trouver une formation de français en Ile-de-France"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Trouver une formation de français en Ile-de-France",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Réseau Alpha propose une cartographie des cours et formations de français en Ile-de-France.",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="icon_fill icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
-                </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/6376470705f74970c5342371"
+                title="Avoir de l'aide pour faire ses démarches"
               >
-                <span
-                  className="picture"
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Réseau Alpha"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669735095%2Fpictures%2Fubtkqdpxwd5nvfi3ubvy.jpg&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Réseau Alpha",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/63873a586fd089c3dad298f2"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire une mission de service civique pour jeunes réfugiés"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Avoir de l'aide pour faire ses démarches
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Avoir un accompagnement pour faire ses démarches administratives et utiliser un ordinateur.
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire une mission de service civique pour jeunes réfugiés",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Missions rémunérées ouvertes spécialement aux jeunes réfugiés en Ile-de-France (de 18 à 25 ans).",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="FACE Vendée"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Espace France Services FACE Vendée
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
                 >
-                  <img
-                    alt="AIME ONG"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1669902286%2Fpictures%2Frdx992fstuftcndifsb3.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
                 </span>
                 <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "l'association AIME",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/635a71c8d43c4d1a3f25227f"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Apprendre le français à l'université"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Apprendre le français à l'université",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Avoir un diplôme reconnu de l'université de Toulouse pour continuer ses études en France ou travailler.",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/634d28bd9d3bda3be5cfd979"
+                title="Apprendre le français pour le code de la route"
               >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="location"
                 >
+                  <img
+                    alt="Infocards.location"
+                    data-nimg="1"
+                    decoding="async"
+                    height="16"
+                    loading="lazy"
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
+                  />
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Apprendre le français pour le code de la route
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Une formation intensive de 100h de français pour préparer l'examen du code de la route
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Habitat et Humanisme"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Habitat et Humanisme Urgence
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
                 >
-                  <img
-                    alt="Université fédérale de Toulouse"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666944740%2Fpictures%2Fxxghuad89ajpbnszvrwg.jpg&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
                 </span>
                 <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "DIU Passerelle - DILAMI",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/6376470705f74970c5342371"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Avoir de l'aide pour faire ses démarches"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Avoir de l'aide pour faire ses démarches",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Avoir un accompagnement pour faire ses démarches administratives et utiliser un ordinateur.",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="icon_fill icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
-                </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/6332c0e6a36f411314ba4ca3"
+                title="Apprendre du vocabulaire avec des images"
               >
-                <span
-                  className="picture"
+                <div
+                  class="location"
                 >
                   <img
-                    alt="FACE Vendée"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668696619%2Fpictures%2Fcmaptk8tl4s0qc0ksgfb.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Espace France Services FACE Vendée",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/634d28bd9d3bda3be5cfd979"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Apprendre le français pour le code de la route"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Apprendre du vocabulaire avec des images
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Des livres de vocabulaire avec des images pour apprendre et mémoriser facilement les mots en français
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Apprendre le français pour le code de la route",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Une formation intensive de 100h de français pour préparer l'examen du code de la route",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="fable-Lab"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    fable-Lab
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/636cd4572c725bfbf72d6302"
+                title="Prendre des cours de français à Pantin"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Habitat et Humanisme"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1568654761%2Fpictures%2Fap1cbvvlzt96nphtnntx.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Habitat et Humanisme Urgence",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/6332c0e6a36f411314ba4ca3"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Apprendre du vocabulaire avec des images"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Prendre des cours de français à Pantin
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  La formation d'Habitat-Cité vous permettra d'améliorer votre niveau de français et de rechercher un emploi.
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Apprendre du vocabulaire avec des images",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Des livres de vocabulaire avec des images pour apprendre et mémoriser facilement les mots en français",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
+                >
+                  <span
+                    class="picture"
+                  >
+                    <img
+                      alt="Habitat-Cité"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Formation linguistique à visée professionnelle
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/63231e68d585c0849a9bb2b1"
+                title="Faire un service civique à Valence"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="fable-Lab"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1665386364%2Fpictures%2Flqntfdymui845jb5jc2y.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "fable-Lab",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/636cd4572c725bfbf72d6302"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Prendre des cours de français à Pantin"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Prendre des cours de français à Pantin",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "La formation d'Habitat-Cité vous permettra d'améliorer votre niveau de français et de rechercher un emploi.",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire un service civique à Valence
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Engagement de 8 mois pour des missions de solidarité accessible aux 18-25 ans.
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Unis-Cité"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Unis-Cité Drôme Ardèche
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/634e7269313f6183f3510709"
+                title="Etre accompagné pour construire un projet professionnel"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Habitat-Cité"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1668078132%2Fpictures%2Fetoivbrifagwdyzycckz.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Formation linguistique à visée professionnelle",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/63231e68d585c0849a9bb2b1"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire un service civique à Valence"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Etre accompagné pour construire un projet professionnel
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Des cours d'anglais et de français, et des conseils de professionnels pour se préparer à trouver un travail
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire un service civique à Valence",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Engagement de 8 mois pour des missions de solidarité accessible aux 18-25 ans.",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="BSB(Re)Connect"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    BSB(Re)Connect
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/634fba2814dbd7acb5c4f759"
+                title="Faire un service civique dans le Val d'Oise"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Unis-Cité"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Unis-Cité Drôme Ardèche",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/634e7269313f6183f3510709"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Etre accompagné pour construire un projet professionnel"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Etre accompagné pour construire un projet professionnel",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Des cours d'anglais et de français, et des conseils de professionnels pour se préparer à trouver un travail",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire un service civique dans le Val d'Oise
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Un service civique de 8 mois pour les 16-25 ans (30 ans pour les personnes en situation de handicap)
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Unis-Cité"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Unis-Cité Val d'Oise
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
                 >
-                  <img
-                    alt="BSB(Re)Connect"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1666086444%2Fpictures%2Fpipug1eqzjxsgjcanxmn.jpg&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
                 </span>
                 <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "BSB(Re)Connect",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/634fba2814dbd7acb5c4f759"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire un service civique dans le Val d'Oise"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire un service civique dans le Val d'Oise",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Un service civique de 8 mois pour les 16-25 ans (30 ans pour les personnes en situation de handicap)",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="icon_fill icon"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
-                </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/6317495572a7091286cfbd68"
+                title="Être accompagné pour travailler dans la restauration"
               >
-                <span
-                  className="picture"
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Unis-Cité"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1612364200%2Fpictures%2Fubiccrsqtmoieqlq3kqm.jpg&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Unis-Cité Val d'Oise",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/6317495572a7091286cfbd68"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Être accompagné pour travailler dans la restauration"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Être accompagné pour travailler dans la restauration
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Stamtish est une association qui aide les personnes réfugiées à réaliser leur projet dans la restauration
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Être accompagné pour travailler dans la restauration",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Stamtish est une association qui aide les personnes réfugiées à réaliser leur projet dans la restauration",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
-                </div>
-                <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
-                >
-                  <span
-                    className="icon"
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Stamtish"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    Stamtish
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/6336f551bf68aaed7fe0f8b4"
+                title="Apprendre le français avec un professeur"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="Stamtish"
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1662471553%2Fpictures%2Fs5hx7wi8snvkqeut50rw.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "Stamtish",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/6336f551bf68aaed7fe0f8b4"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Apprendre le français avec un professeur"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Apprendre le français avec un professeur
+                </h3>
+                <div
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Cours de français tous niveaux de infra A1 à B2, avec un professeur à Blois
+                </div>
+                <div
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
                 />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Apprendre le français avec un professeur",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Cours de français tous niveaux de infra A1 à B2, avec un professeur à Blois",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
+                >
+                  <span
+                    class="picture"
+                  >
+                    <img
+                      alt="CRIA 41 Centre de ressources illettrisme et analphabétisme du Loir et Cher "
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    le CRIA41
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
+              </a>
+            </div>
+            <div
+              class="wrapper wrapper"
+            >
+              <button
+                class="btn favorite btn btn-secondary"
+                title="Dispositif.addToFavorites"
+                type="button"
               >
                 <span
-                  className="picture"
+                  class="icon_outline icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star-outline"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                <span
+                  class="icon_fill icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-star"
+                      fill="dark"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="star"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <a
+                class="c28 card dispositif content card"
+                href="/program/63623b16a2a5bf7006723347"
+                title="Faire une formation en développement web"
+              >
+                <div
+                  class="location"
                 >
                   <img
-                    alt="CRIA 41 Centre de ressources illettrisme et analphabétisme du Loir et Cher "
+                    alt="Infocards.location"
                     data-nimg="1"
                     decoding="async"
-                    height={40}
+                    height="16"
                     loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1657536045%2Fpictures%2Fzmxm1zthcuqd4mchdrs2.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
+                    src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
+                    srcset="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
+                    style="color: transparent;"
+                    width="16"
                   />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "le CRIA41",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
-          </div>
-          <div
-            className="wrapper wrapper"
-          >
-            <button
-              className="btn favorite btn btn-secondary"
-              onClick={[Function]}
-              title="Dispositif.addToFavorites"
-              type="button"
-            >
-              <span
-                className="icon_outline icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star-outline" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              <span
-                className="icon_fill icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-star" fill="dark"><g data-name="Layer 2"><g data-name="star"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <a
-              className="c28 card dispositif content card"
-              href="/program/63623b16a2a5bf7006723347"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
-              title="Faire une formation en développement web"
-            >
-              <div
-                className="location"
-              >
-                <img
-                  alt="Infocards.location"
-                  data-nimg="1"
-                  decoding="async"
-                  height={16}
-                  loading="lazy"
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  src="/_next/image?url=%2Fimg.jpg&w=32&q=75"
-                  srcSet="/_next/image?url=%2Fimg.jpg&w=16&q=75 1x, /_next/image?url=%2Fimg.jpg&w=32&q=75 2x"
-                  style={
-                    {
-                      "color": "transparent",
-                    }
-                  }
-                  width={16}
-                />
-                <span
-                  className="ms-1"
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-              <h3
-                className="title"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Faire une formation en développement web",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="text max_lines abstract"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Une formation de 7 semaines (technique + français) pour découvrir le métier de développeur web",
-                  }
-                }
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="infos text my-3"
-                style={
-                  {
-                    "color": "#3A3A3A",
-                  }
-                }
-              />
-              <div
-                className="themes"
-              >
+                  <span
+                    class="ms-1"
+                    style="color: rgb(58, 58, 58);"
+                  />
+                </div>
+                <h3
+                  class="title"
+                  style="color: rgb(58, 58, 58);"
+                >
+                  Faire une formation en développement web
+                </h3>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="text max_lines abstract"
+                  style="color: rgb(58, 58, 58);"
                 >
-                  <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
-                  >
-                    Thème
-                  </span>
+                  Une formation de 7 semaines (technique + français) pour découvrir le métier de développeur web
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="infos text my-3"
+                  style="color: rgb(58, 58, 58);"
+                />
+                <div
+                  class="themes"
                 >
-                  <span
-                    className="icon"
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
                     <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
-                    />
-                  </span>
-                  <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
                   >
-                    Thème
-                  </span>
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
+                  <div
+                    class="container badges theme-badge"
+                    style="background-color: rgb(238, 238, 238);"
+                  >
+                    <span
+                      class="icon"
+                    >
+                      <span
+                        class="icon theme-icon"
+                        style="width: 12px; height: 12px;"
+                      >
+                        <svg
+                          height="12"
+                          width="12"
+                        />
+                      </span>
+                    </span>
+                    <span
+                      style="color: rgb(58, 58, 58);"
+                    >
+                      Thème
+                    </span>
+                  </div>
                 </div>
                 <div
-                  className="container badges theme-badge"
-                  style={
-                    {
-                      "backgroundColor": "#EEEEEE",
-                    }
-                  }
+                  class="sponsor"
+                  style="border-color: #3a3a3a;"
                 >
                   <span
-                    className="icon"
-                  >
-                    <span
-                      className="icon theme-icon"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg width="12" height="12"></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": 12,
-                          "width": 12,
-                        }
-                      }
+                    class="picture"
+                  >
+                    <img
+                      alt="Simplon.co"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=96&q=75"
+                      srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=96&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="40"
                     />
                   </span>
                   <span
-                    style={
-                      {
-                        "color": "#3A3A3A",
-                      }
-                    }
+                    class="text max_lines ms-2"
+                    style="color: rgb(58, 58, 58);"
                   >
-                    Thème
+                    la Prépa web Refugeeks²
                   </span>
                 </div>
-              </div>
-              <div
-                className="sponsor"
-                style={
-                  {
-                    "borderColor": "#3A3A3A",
-                  }
-                }
-              >
-                <span
-                  className="picture"
-                >
-                  <img
-                    alt="Simplon.co"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=96&q=75"
-                    srcSet="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdlmqnnhp6%2Fimage%2Fupload%2Fv1570439852%2Fpictures%2Fxblmdsm8aly06enczcrx.png&w=96&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={40}
-                  />
-                </span>
-                <span
-                  className="text max_lines ms-2"
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "la Prépa web Refugeeks²",
-                    }
-                  }
-                  style={
-                    {
-                      "color": "#3A3A3A",
-                    }
-                  }
-                />
-              </div>
-            </a>
+              </a>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section"
-  >
     <div
-      className="container container"
+      class="section"
     >
-      <h2
-        className="title2"
-      >
-        Homepage.whyTitle
-      </h2>
       <div
-        className="row"
+        class="container container"
       >
+        <h2
+          class="title2"
+        >
+          Homepage.whyTitle
+        </h2>
         <div
-          className="infos with_images col"
+          class="row"
         >
           <div
-            className="container"
+            class="infos with_images col"
           >
-            <button
-              className="btn open btn btn-secondary"
-              onClick={[Function]}
-              type="button"
+            <div
+              class="container"
             >
-              Homepage.whyAccordionTitle1
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
+              <button
+                class="btn open btn btn-secondary"
+                type="button"
+              >
+                Homepage.whyAccordionTitle1
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse show"
+              >
+                <p
+                  class="text"
+                >
+                  Homepage.whyAccordionText1
+                </p>
+              </div>
+            </div>
             <div
-              className="collapse show"
-              style={{}}
+              class="container"
             >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Homepage.whyAccordionText1",
-                  }
-                }
-              />
+              <button
+                class="btn btn btn-secondary"
+                type="button"
+              >
+                Homepage.whyAccordionTitle2
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Homepage.whyAccordionText2
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              Homepage.whyAccordionTitle2
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
             <div
-              className="collapse"
-              style={{}}
+              class="container"
             >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Homepage.whyAccordionText2",
-                  }
-                }
-              />
+              <button
+                class="btn btn btn-secondary"
+                type="button"
+              >
+                Homepage.whyAccordionTitle3
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Homepage.whyAccordionText3
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            className="container"
-          >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              Homepage.whyAccordionTitle3
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
             <div
-              className="collapse"
-              style={{}}
+              class="container"
             >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Homepage.whyAccordionText3",
-                  }
-                }
-              />
+              <button
+                class="btn btn btn-secondary"
+                type="button"
+              >
+                Homepage.whyAccordionTitle4
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 32px; line-height: 32px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-ios-downward-outline"
+                      fill="black"
+                      height="32px"
+                      viewBox="0 0 24 24"
+                      width="32px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-ios-downward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </button>
+              <div
+                class="collapse"
+              >
+                <p
+                  class="text"
+                >
+                  Homepage.whyAccordionText4
+                </p>
+              </div>
             </div>
           </div>
           <div
-            className="container"
+            class="media right col"
           >
-            <button
-              className="btn btn btn-secondary"
-              onClick={[Function]}
-              type="button"
-            >
-              Homepage.whyAccordionTitle4
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" class="eva eva-arrow-ios-downward-outline" fill="black"><g data-name="Layer 2"><g data-name="arrow-ios-downward"><rect width="24" height="24" opacity="0"/><path d="M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "32px",
-                      "lineHeight": "32px",
-                    }
-                  }
-                />
-              </span>
-            </button>
-            <div
-              className="collapse"
-              style={{}}
-            >
-              <p
-                className="text"
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "Homepage.whyAccordionText4",
-                  }
-                }
+            <video
+              class="video autoplay-video"
+              height="320"
+              loop=""
+              width="442"
+            >
+              <source
+                src="/video/home-video-1.mp4"
+                type="video/mp4"
               />
-            </div>
+            </video>
           </div>
         </div>
-        <div
-          className="media right col"
-        >
-          <video
-            className="video autoplay-video"
-            height={320}
-            loop={true}
-            muted={true}
-            playsInline=""
-            style={{}}
-            width={442}
-          >
-            <source
-              src="/video/home-video-1.mp4"
-              type="video/mp4"
-            />
-          </video>
-        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_red"
-  >
     <div
-      className="container container"
+      class="section bg_red"
     >
       <div
-        className="row"
+        class="container container"
       >
         <div
-          className="col-sm-12 col-lg-6 order-lg-1"
+          class="row"
         >
-          <h2
-            className="title2 text-white mb-0"
-          >
-            Homepage.resourcesTitle
-          </h2>
-          <p
-            className="subtitle bottom_space"
+          <div
+            class="col-sm-12 col-lg-6 order-lg-1"
           >
-            Homepage.resourcesText
-          </p>
+            <h2
+              class="title2 text-white mb-0"
+            >
+              Homepage.resourcesTitle
+            </h2>
+            <p
+              class="subtitle bottom_space"
+            >
+              Homepage.resourcesText
+            </p>
+            <div
+              class="bottom_space"
+            >
+              <a
+                class="link color_white"
+                href="https://kit.refugies.info/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span>
+                  Homepage.resourcesCTA
+                </span>
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 24px; line-height: 24px;"
+                  >
+                    <svg
+                      class="eva eva-arrow-forward-outline"
+                      fill="white"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="arrow-forward"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(-90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+              </a>
+            </div>
+          </div>
           <div
-            className="bottom_space"
+            class="col-sm-12 col-lg-6 order-lg-0"
           >
             <a
-              className="link color_white"
               href="https://kit.refugies.info/"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onTouchStart={[Function]}
               rel="noopener noreferrer"
               target="_blank"
             >
-              <span>
-                Homepage.resourcesCTA
-              </span>
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="white"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "24px",
-                      "lineHeight": "24px",
-                    }
-                  }
-                />
-              </span>
+              <img
+                alt="Homepage.resourcesTitle"
+                class="resources_image bottom_space"
+                data-nimg="1"
+                decoding="async"
+                height="272"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
+                style="color: transparent;"
+                width="500"
+              />
             </a>
           </div>
         </div>
-        <div
-          className="col-sm-12 col-lg-6 order-lg-0"
-        >
-          <a
-            href="https://kit.refugies.info/"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <img
-              alt="Homepage.resourcesTitle"
-              className="resources_image bottom_space"
-              data-nimg="1"
-              decoding="async"
-              height={272}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=1080&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=640&q=75 1x, /_next/image?url=%2Fimg.jpg&w=1080&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={500}
-            />
-          </a>
-        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_grey"
-  >
     <div
-      className="container container"
+      class="section bg_grey"
     >
-      <h2
-        className="title2 center mb-0"
-      >
-        Homepage.helpUsTitle
-      </h2>
-      <p
-        className="subtitle center"
-      >
-        Homepage.helpUsSubtitle
-      </p>
       <div
-        className="top_space row"
+        class="container container"
       >
+        <h2
+          class="title2 center mb-0"
+        >
+          Homepage.helpUsTitle
+        </h2>
+        <p
+          class="subtitle center"
+        >
+          Homepage.helpUsSubtitle
+        </p>
         <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
+          class="top_space row"
         >
-          <a
-            className="link"
-            href="/publish"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            title="Homepage.helpUsCardTitle1"
+          <div
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div
-              className="container shadow"
+            <a
+              class="link"
+              href="/publish"
+              title="Homepage.helpUsCardTitle1"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  Homepage.helpUsCardTitle1
-                </h3>
-                <div
-                  className="text"
-                >
+              <div
+                class="container shadow"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    Homepage.helpUsCardTitle1
+                  </h3>
                   <div
-                    className="container purple"
+                    class="text"
                   >
+                    <div
+                      class="container purple"
+                    >
+                      <p
+                        class="text"
+                      >
+                        Homepage.helpUsCardHelp1
+                      </p>
+                    </div>
                     <p
-                      className="text"
+                      class="help_text"
                     >
-                      Homepage.helpUsCardHelp1
+                      Homepage.helpUsCardText1
                     </p>
                   </div>
-                  <p
-                    className="help_text"
-                  >
-                    Homepage.helpUsCardText1
-                  </p>
                 </div>
-              </div>
-              <div>
-                <span
-                  className="link color_purple"
-                >
-                  <span>
-                    Homepage.helpUsCardCTA1
-                  </span>
+                <div>
                   <span
-                    className="icon icon"
+                    class="link color_purple"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="purple"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
+                    <span>
+                      Homepage.helpUsCardCTA1
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="purple"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-        >
-          <a
-            className="link"
-            href="/translate"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            title="Homepage.helpUsCardTitle2"
+            </a>
+          </div>
+          <div
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div
-              className="container shadow"
+            <a
+              class="link"
+              href="/translate"
+              title="Homepage.helpUsCardTitle2"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-ua"
-                      title="ua"
-                    />
-                  </div>
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-ir"
-                      title="ir"
-                    />
-                  </div>
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-sa"
-                      title="sa"
-                    />
-                  </div>
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-gb"
-                      title="gb"
-                    />
-                  </div>
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
-                  >
-                    <span
-                      className="flag fi fi-af"
-                      title="af"
-                    />
-                  </div>
+              <div
+                class="container shadow"
+              >
+                <div>
                   <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                    class="header"
                   >
-                    <span
-                      className="flag fi fi-ru"
-                      title="ru"
-                    />
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ua"
+                        title="ua"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ir"
+                        title="ir"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-sa"
+                        title="sa"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-gb"
+                        title="gb"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-af"
+                        title="af"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-ru"
+                        title="ru"
+                      />
+                    </div>
+                    <div
+                      class="container red"
+                      style="width: 40px; height: 40px;"
+                    >
+                      <span
+                        class="flag fi fi-er"
+                        title="er"
+                      />
+                    </div>
                   </div>
-                  <div
-                    className="container red"
-                    style={
-                      {
-                        "height": 40,
-                        "width": 40,
-                      }
-                    }
+                  <h3
+                    class="title"
                   >
-                    <span
-                      className="flag fi fi-er"
-                      title="er"
-                    />
-                  </div>
-                </div>
-                <h3
-                  className="title"
-                >
-                  Homepage.helpUsCardTitle2
-                </h3>
-                <div
-                  className="text"
-                >
+                    Homepage.helpUsCardTitle2
+                  </h3>
                   <div
-                    className="container red"
+                    class="text"
                   >
+                    <div
+                      class="container red"
+                    >
+                      <p
+                        class="text"
+                      >
+                        Homepage.helpUsCardHelp2
+                      </p>
+                    </div>
                     <p
-                      className="text"
+                      class="help_text"
                     >
-                      Homepage.helpUsCardHelp2
+                      Homepage.helpUsCardText2
                     </p>
                   </div>
-                  <p
-                    className="help_text"
-                  >
-                    Homepage.helpUsCardText2
-                  </p>
                 </div>
-              </div>
-              <div>
-                <span
-                  className="link color_red"
-                >
-                  <span>
-                    Homepage.helpUsCardCTA2
-                  </span>
+                <div>
                   <span
-                    className="icon icon"
+                    class="link color_red"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
+                    <span>
+                      Homepage.helpUsCardCTA2
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="red"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
-            </div>
-          </a>
-        </div>
-        <div
-          className="mb-lg-0 mb-5 col-sm-12 col-lg-4"
-        >
-          <a
-            className="link"
-            href="https://help.refugies.info/fr/article/commenter-une-fiche-rkuwpn/?bust=1670576881639"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            onTouchStart={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Homepage.helpUsCardTitle3"
+            </a>
+          </div>
+          <div
+            class="mb-lg-0 mb-5 col-sm-12 col-lg-4"
           >
-            <div
-              className="container shadow"
+            <a
+              class="link"
+              href="https://help.refugies.info/fr/article/commenter-une-fiche-rkuwpn/?bust=1670576881639"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Homepage.helpUsCardTitle3"
             >
-              <div>
-                <div
-                  className="header"
-                >
-                  <img
-                    alt=""
-                    data-nimg="1"
-                    decoding="async"
-                    height={56}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={56}
-                  />
-                </div>
-                <h3
-                  className="title"
-                >
-                  Homepage.helpUsCardTitle3
-                </h3>
-                <div
-                  className="text"
-                >
+              <div
+                class="container shadow"
+              >
+                <div>
+                  <div
+                    class="header"
+                  >
+                    <img
+                      alt=""
+                      data-nimg="1"
+                      decoding="async"
+                      height="56"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=128&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=64&q=75 1x, /_next/image?url=%2Fimg.jpg&w=128&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="56"
+                    />
+                  </div>
+                  <h3
+                    class="title"
+                  >
+                    Homepage.helpUsCardTitle3
+                  </h3>
                   <div
-                    className="container orange"
+                    class="text"
                   >
+                    <div
+                      class="container orange"
+                    >
+                      <p
+                        class="text"
+                      >
+                        Homepage.helpUsCardHelp3
+                      </p>
+                    </div>
                     <p
-                      className="text"
+                      class="help_text"
                     >
-                      Homepage.helpUsCardHelp3
+                      Homepage.helpUsCardText3
                     </p>
                   </div>
-                  <p
-                    className="help_text"
-                  >
-                    Homepage.helpUsCardText3
-                  </p>
                 </div>
-              </div>
-              <div>
-                <span
-                  className="link color_orange"
-                >
-                  <span>
-                    Homepage.helpUsCardCTA3
-                  </span>
+                <div>
                   <span
-                    className="icon icon"
+                    class="link color_orange"
                   >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="orange"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "24px",
-                          "lineHeight": "24px",
-                        }
-                      }
-                    />
+                    <span>
+                      Homepage.helpUsCardCTA3
+                    </span>
+                    <span
+                      class="icon icon"
+                    >
+                      <i
+                        style="height: 24px; line-height: 24px;"
+                      >
+                        <svg
+                          class="eva eva-arrow-forward-outline"
+                          fill="orange"
+                          height="24px"
+                          viewBox="0 0 24 24"
+                          width="24px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="arrow-forward"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                transform="rotate(-90 12 12)"
+                                width="24"
+                              />
+                              <path
+                                d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
-            </div>
-          </a>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section bg_green"
-  >
     <div
-      className="container text-center container"
+      class="section bg_green"
     >
-      <h2
-        className="title2 text-center text-white"
-      >
-        Homepage.figuresTitle
-      </h2>
       <div
-        className="row"
+        class="container text-center container"
       >
+        <h2
+          class="title2 text-center text-white"
+        >
+          Homepage.figuresTitle
+        </h2>
         <div
-          className="col-sm-12 col-lg-4"
+          class="row"
         >
           <div
-            className="figure"
+            class="col-sm-12 col-lg-4"
           >
-            <div>
-              0
+            <div
+              class="figure"
+            >
+              <div>
+                0
+              </div>
             </div>
+            <p
+              class="label"
+            >
+              Homepage.figuresSubtitle1
+            </p>
           </div>
-          <p
-            className="label"
-          >
-            Homepage.figuresSubtitle1
-          </p>
-        </div>
-        <div
-          className="col-sm-12 col-lg-4"
-        >
           <div
-            className="figure"
+            class="col-sm-12 col-lg-4"
           >
-            <div>
-              0
+            <div
+              class="figure"
+            >
+              <div>
+                0
+              </div>
             </div>
+            <p
+              class="label"
+            >
+              Homepage.figuresSubtitle2
+            </p>
           </div>
-          <p
-            className="label"
-          >
-            Homepage.figuresSubtitle2
-          </p>
-        </div>
-        <div
-          className="col-sm-12 col-lg-4"
-        >
           <div
-            className="figure"
+            class="col-sm-12 col-lg-4"
           >
-            <div>
-              0
+            <div
+              class="figure"
+            >
+              <div>
+                0
+              </div>
             </div>
+            <p
+              class="label"
+            >
+              Homepage.figuresSubtitle3
+            </p>
           </div>
-          <p
-            className="label"
-          >
-            Homepage.figuresSubtitle3
-          </p>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section"
-  >
     <div
-      className="container text-center container"
+      class="section"
     >
-      <h2
-        className="title2 title center"
-      >
-        Homepage.communityTitle
-      </h2>
       <div
-        className="row"
+        class="container text-center container"
       >
-        <a
-          className="container link color_red"
-          href="/publish"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
+        <h2
+          class="title2 title center"
         >
-          <div>
-            <div
-              className="image_container"
-            >
-              <img
-                alt="Homepage.communityCardTitle1"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
-              <span
-                className="count"
+          Homepage.communityTitle
+        </h2>
+        <div
+          class="row"
+        >
+          <a
+            class="container link color_red"
+            href="/publish"
+          >
+            <div>
+              <div
+                class="image_container"
               >
-                +
-                -3
-              </span>
+                <img
+                  alt="Homepage.communityCardTitle1"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
+                />
+                <span
+                  class="count"
+                >
+                  +-3
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle1
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle1
+              </p>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle1
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle1
-            </p>
-          </div>
-          <div
-            className="footer"
-          >
-            <span
-              className="cta"
+            <div
+              class="footer"
             >
               <span
-                className="link color_red"
+                class="cta"
               >
-                <span>
-                  Homepage.communityCardCTA2
-                </span>
                 <span
-                  className="icon icon"
+                  class="link color_red"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "24px",
-                        "lineHeight": "24px",
-                      }
-                    }
-                  />
+                  <span>
+                    Homepage.communityCardCTA2
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 24px; line-height: 24px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-forward-outline"
+                        fill="red"
+                        height="24px"
+                        viewBox="0 0 24 24"
+                        width="24px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-forward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(-90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
                 </span>
               </span>
-            </span>
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit-outline" fill="red"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              Homepage.communityCardBadge1
-            </span>
-          </div>
-        </a>
-        <a
-          className="container link color_red"
-          href="/publish"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          <div>
-            <div
-              className="image_container"
-            >
-              <img
-                alt="Homepage.communityCardTitle2"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                297
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-edit-outline"
+                      fill="red"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="edit"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge1
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle2
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle2
-            </p>
-          </div>
-          <div
-            className="footer"
+          </a>
+          <a
+            class="container link color_red"
+            href="/publish"
           >
-            <span
-              className="cta"
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle2"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
+                />
+                <span
+                  class="count"
+                >
+                  +297
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle2
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle2
+              </p>
+            </div>
+            <div
+              class="footer"
             >
               <span
-                className="link color_red"
+                class="cta"
               >
-                <span>
-                  Homepage.communityCardCTA2
-                </span>
                 <span
-                  className="icon icon"
+                  class="link color_red"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="red"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "24px",
-                        "lineHeight": "24px",
-                      }
-                    }
-                  />
+                  <span>
+                    Homepage.communityCardCTA2
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 24px; line-height: 24px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-forward-outline"
+                        fill="red"
+                        height="24px"
+                        viewBox="0 0 24 24"
+                        width="24px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-forward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(-90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
                 </span>
               </span>
-            </span>
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit-outline" fill="red"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
-              </span>
-              Homepage.communityCardBadge1
-            </span>
-          </div>
-        </a>
-        <div
-          className="container color_red"
-        >
-          <div>
-            <div
-              className="image_container"
-            >
-              <img
-                alt="Homepage.communityCardTitle3"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                21
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-edit-outline"
+                      fill="red"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="edit"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge1
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle3
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle3
-            </p>
-          </div>
+          </a>
           <div
-            className="footer"
+            class="container color_red"
           >
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit-outline" fill="red"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle3"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
                 />
-              </span>
-              Homepage.communityCardBadge3
-            </span>
-          </div>
-        </div>
-        <a
-          className="container link color_green"
-          href="/translate"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          <div>
+                <span
+                  class="count"
+                >
+                  +21
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle3
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle3
+              </p>
+            </div>
             <div
-              className="image_container"
+              class="footer"
             >
-              <img
-                alt="Homepage.communityCardTitle4"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                9
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-edit-outline"
+                      fill="red"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="edit"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge3
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle4
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle4
-            </p>
           </div>
-          <div
-            className="footer"
+          <a
+            class="container link color_green"
+            href="/translate"
           >
-            <span
-              className="cta"
-            >
-              <span
-                className="link color_green"
+            <div>
+              <div
+                class="image_container"
               >
-                <span>
-                  Toolbar.Traduire
-                </span>
+                <img
+                  alt="Homepage.communityCardTitle4"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
+                />
                 <span
-                  className="icon icon"
+                  class="count"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="green"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "24px",
-                        "lineHeight": "24px",
-                      }
-                    }
-                  />
+                  +9
                 </span>
-              </span>
-            </span>
-            <span
-              className="badge"
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle4
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle4
+              </p>
+            </div>
+            <div
+              class="footer"
             >
               <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-message-circle-outline" fill="green"><g data-name="Layer 2"><g data-name="message-circle"><circle cx="12" cy="12" r="1"/><circle cx="16" cy="12" r="1"/><circle cx="8" cy="12" r="1"/><path d="M19.07 4.93a10 10 0 0 0-16.28 11 1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09 10 10 0 0 0 11-16.28zm.83 8.36a8 8 0 0 1-11 6.08 3.26 3.26 0 0 0-1.25-.26 3.43 3.43 0 0 0-.56.05l-2.82.57.57-2.82a3.09 3.09 0 0 0-.21-1.81 8 8 0 0 1 6.08-11 8 8 0 0 1 9.19 9.19z"/><rect width="24" height="24" opacity="0"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
+                class="cta"
+              >
+                <span
+                  class="link color_green"
+                >
+                  <span>
+                    Toolbar.Traduire
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 24px; line-height: 24px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-forward-outline"
+                        fill="green"
+                        height="24px"
+                        viewBox="0 0 24 24"
+                        width="24px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-forward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(-90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </span>
               </span>
-              Homepage.communityCardBadge4
-            </span>
-          </div>
-        </a>
-        <div
-          className="container color_green"
-        >
-          <div>
-            <div
-              className="image_container"
-            >
-              <img
-                alt="Homepage.communityCardTitle5"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                4
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-message-circle-outline"
+                      fill="green"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="message-circle"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="1"
+                          />
+                          <circle
+                            cx="16"
+                            cy="12"
+                            r="1"
+                          />
+                          <circle
+                            cx="8"
+                            cy="12"
+                            r="1"
+                          />
+                          <path
+                            d="M19.07 4.93a10 10 0 0 0-16.28 11 1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09 10 10 0 0 0 11-16.28zm.83 8.36a8 8 0 0 1-11 6.08 3.26 3.26 0 0 0-1.25-.26 3.43 3.43 0 0 0-.56.05l-2.82.57.57-2.82a3.09 3.09 0 0 0-.21-1.81 8 8 0 0 1 6.08-11 8 8 0 0 1 9.19 9.19z"
+                          />
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge4
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle5
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle5
-            </p>
-          </div>
+          </a>
           <div
-            className="footer"
+            class="container color_green"
           >
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-message-circle-outline" fill="green"><g data-name="Layer 2"><g data-name="message-circle"><circle cx="12" cy="12" r="1"/><circle cx="16" cy="12" r="1"/><circle cx="8" cy="12" r="1"/><path d="M19.07 4.93a10 10 0 0 0-16.28 11 1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09 10 10 0 0 0 11-16.28zm.83 8.36a8 8 0 0 1-11 6.08 3.26 3.26 0 0 0-1.25-.26 3.43 3.43 0 0 0-.56.05l-2.82.57.57-2.82a3.09 3.09 0 0 0-.21-1.81 8 8 0 0 1 6.08-11 8 8 0 0 1 9.19 9.19z"/><rect width="24" height="24" opacity="0"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle5"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
                 />
-              </span>
-              Homepage.communityCardBadge5
-            </span>
-          </div>
-        </div>
-        <div
-          className="container color_purple"
-        >
-          <div>
+                <span
+                  class="count"
+                >
+                  +4
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle5
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle5
+              </p>
+            </div>
             <div
-              className="image_container"
+              class="footer"
             >
-              <img
-                alt="Homepage.communityCardTitle6"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                20
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-message-circle-outline"
+                      fill="green"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="message-circle"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="1"
+                          />
+                          <circle
+                            cx="16"
+                            cy="12"
+                            r="1"
+                          />
+                          <circle
+                            cx="8"
+                            cy="12"
+                            r="1"
+                          />
+                          <path
+                            d="M19.07 4.93a10 10 0 0 0-16.28 11 1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09 10 10 0 0 0 11-16.28zm.83 8.36a8 8 0 0 1-11 6.08 3.26 3.26 0 0 0-1.25-.26 3.43 3.43 0 0 0-.56.05l-2.82.57.57-2.82a3.09 3.09 0 0 0-.21-1.81 8 8 0 0 1 6.08-11 8 8 0 0 1 9.19 9.19z"
+                          />
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge5
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle6
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle6
-            </p>
           </div>
           <div
-            className="footer"
+            class="container color_purple"
           >
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-globe-2-outline" fill="purple"><g data-name="Layer 2"><g data-name="globe-2"><rect width="24" height="24" opacity="0"/><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 2a8.19 8.19 0 0 1 1.79.21 2.61 2.61 0 0 1-.78 1c-.22.17-.46.31-.7.46a4.56 4.56 0 0 0-1.85 1.67 6.49 6.49 0 0 0-.62 3.3c0 1.36 0 2.16-.95 2.87-1.37 1.07-3.46.47-4.76-.07A8.33 8.33 0 0 1 4 12a8 8 0 0 1 8-8zM5 15.8a8.42 8.42 0 0 0 2 .27 5 5 0 0 0 3.14-1c1.71-1.34 1.71-3.06 1.71-4.44a4.76 4.76 0 0 1 .37-2.34 2.86 2.86 0 0 1 1.12-.91 9.75 9.75 0 0 0 .92-.61 4.55 4.55 0 0 0 1.4-1.87A8 8 0 0 1 19 8.12c-1.43.2-3.46.67-3.86 2.53A7 7 0 0 0 15 12a2.93 2.93 0 0 1-.29 1.47l-.1.17c-.65 1.08-1.38 2.31-.39 4 .12.21.25.41.38.61a2.29 2.29 0 0 1 .52 1.08A7.89 7.89 0 0 1 12 20a8 8 0 0 1-7-4.2zm11.93 2.52a6.79 6.79 0 0 0-.63-1.14c-.11-.16-.22-.32-.32-.49-.39-.68-.25-1 .38-2l.1-.17a4.77 4.77 0 0 0 .54-2.43 5.42 5.42 0 0 1 .09-1c.16-.73 1.71-.93 2.67-1a7.94 7.94 0 0 1-2.86 8.28z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle6"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
                 />
-              </span>
-              Homepage.communityCardBadge6
-            </span>
-          </div>
-        </div>
-        <div
-          className="container color_purple"
-        >
-          <div>
+                <span
+                  class="count"
+                >
+                  +20
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle6
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle6
+              </p>
+            </div>
             <div
-              className="image_container"
+              class="footer"
             >
-              <img
-                alt="Homepage.communityCardTitle7"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                1
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-globe-2-outline"
+                      fill="purple"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="globe-2"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 2a8.19 8.19 0 0 1 1.79.21 2.61 2.61 0 0 1-.78 1c-.22.17-.46.31-.7.46a4.56 4.56 0 0 0-1.85 1.67 6.49 6.49 0 0 0-.62 3.3c0 1.36 0 2.16-.95 2.87-1.37 1.07-3.46.47-4.76-.07A8.33 8.33 0 0 1 4 12a8 8 0 0 1 8-8zM5 15.8a8.42 8.42 0 0 0 2 .27 5 5 0 0 0 3.14-1c1.71-1.34 1.71-3.06 1.71-4.44a4.76 4.76 0 0 1 .37-2.34 2.86 2.86 0 0 1 1.12-.91 9.75 9.75 0 0 0 .92-.61 4.55 4.55 0 0 0 1.4-1.87A8 8 0 0 1 19 8.12c-1.43.2-3.46.67-3.86 2.53A7 7 0 0 0 15 12a2.93 2.93 0 0 1-.29 1.47l-.1.17c-.65 1.08-1.38 2.31-.39 4 .12.21.25.41.38.61a2.29 2.29 0 0 1 .52 1.08A7.89 7.89 0 0 1 12 20a8 8 0 0 1-7-4.2zm11.93 2.52a6.79 6.79 0 0 0-.63-1.14c-.11-.16-.22-.32-.32-.49-.39-.68-.25-1 .38-2l.1-.17a4.77 4.77 0 0 0 .54-2.43 5.42 5.42 0 0 1 .09-1c.16-.73 1.71-.93 2.67-1a7.94 7.94 0 0 1-2.86 8.28z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge6
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle7
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle7
-            </p>
           </div>
           <div
-            className="footer"
+            class="container color_purple"
           >
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-globe-2-outline" fill="purple"><g data-name="Layer 2"><g data-name="globe-2"><rect width="24" height="24" opacity="0"/><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 2a8.19 8.19 0 0 1 1.79.21 2.61 2.61 0 0 1-.78 1c-.22.17-.46.31-.7.46a4.56 4.56 0 0 0-1.85 1.67 6.49 6.49 0 0 0-.62 3.3c0 1.36 0 2.16-.95 2.87-1.37 1.07-3.46.47-4.76-.07A8.33 8.33 0 0 1 4 12a8 8 0 0 1 8-8zM5 15.8a8.42 8.42 0 0 0 2 .27 5 5 0 0 0 3.14-1c1.71-1.34 1.71-3.06 1.71-4.44a4.76 4.76 0 0 1 .37-2.34 2.86 2.86 0 0 1 1.12-.91 9.75 9.75 0 0 0 .92-.61 4.55 4.55 0 0 0 1.4-1.87A8 8 0 0 1 19 8.12c-1.43.2-3.46.67-3.86 2.53A7 7 0 0 0 15 12a2.93 2.93 0 0 1-.29 1.47l-.1.17c-.65 1.08-1.38 2.31-.39 4 .12.21.25.41.38.61a2.29 2.29 0 0 1 .52 1.08A7.89 7.89 0 0 1 12 20a8 8 0 0 1-7-4.2zm11.93 2.52a6.79 6.79 0 0 0-.63-1.14c-.11-.16-.22-.32-.32-.49-.39-.68-.25-1 .38-2l.1-.17a4.77 4.77 0 0 0 .54-2.43 5.42 5.42 0 0 1 .09-1c.16-.73 1.71-.93 2.67-1a7.94 7.94 0 0 1-2.86 8.28z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle7"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
                 />
-              </span>
-              Homepage.communityCardBadge7
-            </span>
-          </div>
-        </div>
-        <div
-          className="container color_brown"
-        >
-          <div>
+                <span
+                  class="count"
+                >
+                  +1
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle7
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle7
+              </p>
+            </div>
             <div
-              className="image_container"
+              class="footer"
             >
-              <img
-                alt="Homepage.communityCardTitle8"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                80
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-globe-2-outline"
+                      fill="purple"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="globe-2"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 2a8.19 8.19 0 0 1 1.79.21 2.61 2.61 0 0 1-.78 1c-.22.17-.46.31-.7.46a4.56 4.56 0 0 0-1.85 1.67 6.49 6.49 0 0 0-.62 3.3c0 1.36 0 2.16-.95 2.87-1.37 1.07-3.46.47-4.76-.07A8.33 8.33 0 0 1 4 12a8 8 0 0 1 8-8zM5 15.8a8.42 8.42 0 0 0 2 .27 5 5 0 0 0 3.14-1c1.71-1.34 1.71-3.06 1.71-4.44a4.76 4.76 0 0 1 .37-2.34 2.86 2.86 0 0 1 1.12-.91 9.75 9.75 0 0 0 .92-.61 4.55 4.55 0 0 0 1.4-1.87A8 8 0 0 1 19 8.12c-1.43.2-3.46.67-3.86 2.53A7 7 0 0 0 15 12a2.93 2.93 0 0 1-.29 1.47l-.1.17c-.65 1.08-1.38 2.31-.39 4 .12.21.25.41.38.61a2.29 2.29 0 0 1 .52 1.08A7.89 7.89 0 0 1 12 20a8 8 0 0 1-7-4.2zm11.93 2.52a6.79 6.79 0 0 0-.63-1.14c-.11-.16-.22-.32-.32-.49-.39-.68-.25-1 .38-2l.1-.17a4.77 4.77 0 0 0 .54-2.43 5.42 5.42 0 0 1 .09-1c.16-.73 1.71-.93 2.67-1a7.94 7.94 0 0 1-2.86 8.28z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge7
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle8
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle8
-            </p>
           </div>
           <div
-            className="footer"
+            class="container color_brown"
           >
-            <span
-              className="badge"
-            >
-              <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-code-outline" fill="brown"><g data-name="Layer 2"><g data-name="code"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M8.64 5.23a1 1 0 0 0-1.41.13l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63L4.29 12l4.48-5.36a1 1 0 0 0-.13-1.41z"/><path d="M21.78 11.37l-4.78-6a1 1 0 0 0-1.41-.15 1 1 0 0 0-.15 1.41L19.71 12l-4.48 5.37a1 1 0 0 0 .13 1.41A1 1 0 0 0 16 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 .01-1.27z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle8"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
                 />
-              </span>
-              Homepage.communityCardBadge8
-            </span>
-          </div>
-        </div>
-        <a
-          className="container link color_blue"
-          href="/who-are-we"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onTouchStart={[Function]}
-        >
-          <div>
+                <span
+                  class="count"
+                >
+                  +80
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle8
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle8
+              </p>
+            </div>
             <div
-              className="image_container"
+              class="footer"
             >
-              <img
-                alt="Homepage.communityCardTitle9"
-                data-nimg="1"
-                decoding="async"
-                height={80}
-                loading="lazy"
-                onError={[Function]}
-                onLoad={[Function]}
-                src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
-                srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
-                style={
-                  {
-                    "color": "transparent",
-                  }
-                }
-                width={176}
-              />
               <span
-                className="count"
+                class="badge"
               >
-                +
-                9
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-code-outline"
+                      fill="brown"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="code"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            transform="rotate(90 12 12)"
+                            width="24"
+                          />
+                          <path
+                            d="M8.64 5.23a1 1 0 0 0-1.41.13l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63L4.29 12l4.48-5.36a1 1 0 0 0-.13-1.41z"
+                          />
+                          <path
+                            d="M21.78 11.37l-4.78-6a1 1 0 0 0-1.41-.15 1 1 0 0 0-.15 1.41L19.71 12l-4.48 5.37a1 1 0 0 0 .13 1.41A1 1 0 0 0 16 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 .01-1.27z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge8
               </span>
             </div>
-            <h3
-              className="title"
-            >
-              Homepage.communityCardTitle9
-            </h3>
-            <p
-              className="subtitle"
-            >
-              Homepage.communityCardSubtitle9
-            </p>
           </div>
-          <div
-            className="footer"
+          <a
+            class="container link color_blue"
+            href="/who-are-we"
           >
-            <span
-              className="cta"
+            <div>
+              <div
+                class="image_container"
+              >
+                <img
+                  alt="Homepage.communityCardTitle9"
+                  data-nimg="1"
+                  decoding="async"
+                  height="80"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=384&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=384&q=75 2x"
+                  style="color: transparent;"
+                  width="176"
+                />
+                <span
+                  class="count"
+                >
+                  +9
+                </span>
+              </div>
+              <h3
+                class="title"
+              >
+                Homepage.communityCardTitle9
+              </h3>
+              <p
+                class="subtitle"
+              >
+                Homepage.communityCardSubtitle9
+              </p>
+            </div>
+            <div
+              class="footer"
             >
               <span
-                className="link color_blue"
+                class="cta"
               >
-                <span>
-                  who_are_we
-                </span>
                 <span
-                  className="icon icon"
+                  class="link color_blue"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="blue"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "24px",
-                        "lineHeight": "24px",
-                      }
-                    }
-                  />
+                  <span>
+                    who_are_we
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 24px; line-height: 24px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-forward-outline"
+                        fill="blue"
+                        height="24px"
+                        viewBox="0 0 24 24"
+                        width="24px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-forward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(-90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
                 </span>
               </span>
-            </span>
-            <span
-              className="badge"
-            >
               <span
-                className="icon icon"
-              >
-                <i
-                  dangerouslySetInnerHTML={
-                    {
-                      "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-outline" fill="blue"><g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                    }
-                  }
-                  style={
-                    {
-                      "height": "20px",
-                      "lineHeight": "20px",
-                    }
-                  }
-                />
+                class="badge"
+              >
+                <span
+                  class="icon icon"
+                >
+                  <i
+                    style="height: 20px; line-height: 20px;"
+                  >
+                    <svg
+                      class="eva eva-person-outline"
+                      fill="blue"
+                      height="20px"
+                      viewBox="0 0 24 24"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <g
+                        data-name="Layer 2"
+                      >
+                        <g
+                          data-name="person"
+                        >
+                          <rect
+                            height="24"
+                            opacity="0"
+                            width="24"
+                          />
+                          <path
+                            d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                          />
+                          <path
+                            d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                          />
+                        </g>
+                      </g>
+                    </svg>
+                  </i>
+                </span>
+                Homepage.communityCardBadge9
               </span>
-              Homepage.communityCardBadge9
-            </span>
-          </div>
-        </a>
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="section infos py-0"
-  >
     <div
-      className="container text-center container-fluid"
+      class="section infos py-0"
     >
       <div
-        className="row"
+        class="container text-center container-fluid"
       >
         <div
-          className="bg_blue col-sm-12 col-lg-6"
+          class="row"
         >
           <div
-            className="infos_col"
+            class="bg_blue col-sm-12 col-lg-6"
           >
-            <img
-              alt=""
-              className="img"
-              data-nimg="1"
-              decoding="async"
-              height={160}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={246}
-            />
-            <h2
-              className="title2 text-white"
-            >
-              Homepage.newsletterTitle
-            </h2>
-            <p
-              className="subtitle"
-            >
-              Homepage.newsletterSubtitle
-            </p>
             <div
-              className="action"
+              class="infos_col"
             >
+              <img
+                alt=""
+                class="img"
+                data-nimg="1"
+                decoding="async"
+                height="160"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+                style="color: transparent;"
+                width="246"
+              />
+              <h2
+                class="title2 text-white"
+              >
+                Homepage.newsletterTitle
+              </h2>
+              <p
+                class="subtitle"
+              >
+                Homepage.newsletterSubtitle
+              </p>
               <div
-                className="newsletter"
+                class="action"
               >
-                <div>
-                  <div
-                    className="container with_icon newsletter_input"
+                <div
+                  class="newsletter"
+                >
+                  <div>
+                    <div
+                      class="container with_icon newsletter_input"
+                    >
+                      <span
+                        class="icon prepend icon"
+                      >
+                        <i
+                          style="height: 24px; line-height: 24px;"
+                        >
+                          <svg
+                            class="eva eva-email-outline"
+                            fill="#5E5E5E"
+                            height="24px"
+                            viewBox="0 0 24 24"
+                            width="24px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              data-name="Layer 2"
+                            >
+                              <g
+                                data-name="email"
+                              >
+                                <rect
+                                  height="24"
+                                  opacity="0"
+                                  width="24"
+                                />
+                                <path
+                                  d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.67 2L12 10.75 5.67 6zM19 18H5a1 1 0 0 1-1-1V7.25l7.4 5.55a1 1 0 0 0 .6.2 1 1 0 0 0 .6-.2L20 7.25V17a1 1 0 0 1-1 1z"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </i>
+                      </span>
+                      <input
+                        class="input"
+                        placeholder="Register.Votre email"
+                        type="email"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                  <button
+                    class="btn validate newsletter_submit"
+                    disabled=""
                   >
                     <span
-                      className="icon prepend icon"
+                      class="me-2 icon"
                     >
                       <i
-                        dangerouslySetInnerHTML={
-                          {
-                            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-email-outline" fill="#5E5E5E"><g data-name="Layer 2"><g data-name="email"><rect width="24" height="24" opacity="0"/><path d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.67 2L12 10.75 5.67 6zM19 18H5a1 1 0 0 1-1-1V7.25l7.4 5.55a1 1 0 0 0 .6.2 1 1 0 0 0 .6-.2L20 7.25V17a1 1 0 0 1-1 1z"/></g></g></svg>",
-                          }
-                        }
-                        style={
-                          {
-                            "height": "24px",
-                            "lineHeight": "24px",
-                          }
-                        }
-                      />
+                        style="height: 20px; line-height: 20px;"
+                      >
+                        <svg
+                          class="eva eva-checkmark-outline"
+                          fill="#fff"
+                          height="20px"
+                          viewBox="0 0 24 24"
+                          width="20px"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            data-name="Layer 2"
+                          >
+                            <g
+                              data-name="checkmark"
+                            >
+                              <rect
+                                height="24"
+                                opacity="0"
+                                width="24"
+                              />
+                              <path
+                                d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                              />
+                            </g>
+                          </g>
+                        </svg>
+                      </i>
                     </span>
-                    <input
-                      className="input"
-                      onChange={[Function]}
-                      placeholder="Register.Votre email"
-                      type="email"
-                      value=""
-                    />
-                  </div>
+                    Envoyer
+                  </button>
                 </div>
-                <button
-                  className="btn validate newsletter_submit"
-                  disabled={true}
-                  onClick={[Function]}
-                >
-                  <span
-                    className="me-2 icon"
-                  >
-                    <i
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#fff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                        }
-                      }
-                      style={
-                        {
-                          "height": "20px",
-                          "lineHeight": "20px",
-                        }
-                      }
-                    />
-                  </span>
-                  Envoyer
-                </button>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="bg_grey col-sm-12 col-lg-6"
-        >
           <div
-            className="infos_col"
+            class="bg_grey col-sm-12 col-lg-6"
           >
-            <img
-              alt=""
-              className="img"
-              data-nimg="1"
-              decoding="async"
-              height={160}
-              loading="lazy"
-              onError={[Function]}
-              onLoad={[Function]}
-              src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-              srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-              style={
-                {
-                  "color": "transparent",
-                }
-              }
-              width={246}
-            />
-            <h2
-              className="title2"
-            >
-              Homepage.trainingTitle
-            </h2>
-            <p
-              className="subtitle"
-            >
-              Homepage.trainingSubtitle
-            </p>
             <div
-              className="action"
+              class="infos_col"
             >
-              <a
-                className="link color_blue"
-                href="https://kit.refugies.info/formation/"
-                onClick={[Function]}
-                onMouseEnter={[Function]}
-                onTouchStart={[Function]}
-                rel="noopener noreferrer"
-                target="_blank"
+              <img
+                alt=""
+                class="img"
+                data-nimg="1"
+                decoding="async"
+                height="160"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+                style="color: transparent;"
+                width="246"
+              />
+              <h2
+                class="title2"
               >
-                <span>
-                  Homepage.trainingCTA
-                </span>
-                <span
-                  className="icon icon"
+                Homepage.trainingTitle
+              </h2>
+              <p
+                class="subtitle"
+              >
+                Homepage.trainingSubtitle
+              </p>
+              <div
+                class="action"
+              >
+                <a
+                  class="link color_blue"
+                  href="https://kit.refugies.info/formation/"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  <i
-                    dangerouslySetInnerHTML={
-                      {
-                        "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="eva eva-arrow-forward-outline" fill="blue"><g data-name="Layer 2"><g data-name="arrow-forward"><rect width="24" height="24" transform="rotate(-90 12 12)" opacity="0"/><path d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"/></g></g></svg>",
-                      }
-                    }
-                    style={
-                      {
-                        "height": "24px",
-                        "lineHeight": "24px",
-                      }
-                    }
-                  />
-                </span>
-              </a>
+                  <span>
+                    Homepage.trainingCTA
+                  </span>
+                  <span
+                    class="icon icon"
+                  >
+                    <i
+                      style="height: 24px; line-height: 24px;"
+                    >
+                      <svg
+                        class="eva eva-arrow-forward-outline"
+                        fill="blue"
+                        height="24px"
+                        viewBox="0 0 24 24"
+                        width="24px"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g
+                          data-name="Layer 2"
+                        >
+                          <g
+                            data-name="arrow-forward"
+                          >
+                            <rect
+                              height="24"
+                              opacity="0"
+                              transform="rotate(-90 12 12)"
+                              width="24"
+                            />
+                            <path
+                              d="M5 13h11.86l-3.63 4.36a1 1 0 0 0 1.54 1.28l5-6a1.19 1.19 0 0 0 .09-.15c0-.05.05-.08.07-.13A1 1 0 0 0 20 12a1 1 0 0 0-.07-.36c0-.05-.05-.08-.07-.13a1.19 1.19 0 0 0-.09-.15l-5-6A1 1 0 0 0 14 5a1 1 0 0 0-.64.23 1 1 0 0 0-.13 1.41L16.86 11H5a1 1 0 0 0 0 2z"
+                            />
+                          </g>
+                        </g>
+                      </svg>
+                    </i>
+                  </span>
+                </a>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/client/src/__tests__/index.test.tsx b/client/src/__tests__/index.test.tsx
index bb3d6cb509..8e8f3e9c2a 100644
--- a/client/src/__tests__/index.test.tsx
+++ b/client/src/__tests__/index.test.tsx
@@ -14,7 +14,6 @@ describe("homepage", () => {
   });
 
   it("renders homepage", () => {
-    window.scrollTo = jest.fn();
     const { asFragment } = wrapWithProvidersAndRenderForTesting<Props>({
       Component: index,
       reduxState: {
diff --git a/client/src/components/UI/ContentSlider/ContentSlider.tsx b/client/src/components/UI/ContentSlider/ContentSlider.tsx
index 53edb7ed63..a646507078 100644
--- a/client/src/components/UI/ContentSlider/ContentSlider.tsx
+++ b/client/src/components/UI/ContentSlider/ContentSlider.tsx
@@ -50,7 +50,8 @@ const ContentSlider = (props: Props) => {
   useEffect(() => {
     if (!slider.current) return;
     const pageWidth = slider.current.clientWidth - margins + gap;
-    slider.current.scroll({
+    // Be permissive with the scroll behavior during testing
+    slider.current.scroll && slider.current.scroll({
       left: page * pageWidth * (isRTL ? -1 : 1),
       top: 0,
       behavior: "smooth",

From c48b5f77d5db6eefec5f3decf44ade4e462a489e Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Thu, 18 Jul 2024 14:27:09 +0200
Subject: [PATCH 29/37] test(client): :white_check_mark: Fix more tests

---
 .../sharedComponents/__tests__/SubComponents.test.tsx |  6 +++---
 .../__tests__/UserNotifications.test.tsx              | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index 417e9934d7..fe94e5abc4 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { render, screen } from "@testing-library/react";
-import "jest-styled-components";
 import { initialMockStore } from "__fixtures__/reduxStore";
+import "jest-styled-components";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
 import {
   DeleteButton,
@@ -192,7 +192,7 @@ test("should render ValidateButton not disabled", () => {
 test("should call onClick ValidateButton", () => {
   const onClick = jest.fn();
   render(<ValidateButton onClick={onClick} disabled={false} />);
-  screen.findByProps({ "data-testid": "validate-button" }).click();
+  screen.getByTestId("validate-button").click();
   expect(onClick).toHaveBeenCalled();
 });
 
@@ -214,7 +214,7 @@ test("should render DeleteButton not disabled", () => {
 test("should call onClick DeleteButton", () => {
   const onClick = jest.fn();
   render(<DeleteButton onClick={onClick} disabled={false} />);
-  screen.findByProps({ "data-testid": "delete-button" }).click();
+  screen.getByTestId("delete-button").click();
   expect(onClick).toHaveBeenCalled();
 });
 
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 8ed06f8e0d..318d5f3551 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -1,10 +1,11 @@
 // @ts-nocheck
+import { screen } from "@testing-library/dom";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import "jest-styled-components";
 import Router from "next/router";
 import { updateDispositifReactionActionCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
 import { fetchSelectedStructureActionCreator } from "services/SelectedStructure/selectedStructure.actions";
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import UserNotifications from "../UserNotifications";
 jest.mock("next/router", () => require("next-router-mock"));
@@ -164,9 +165,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.root
-      .findByProps({ "data-testid": "test-notif-new content" })
-      .props.onClick({ stopPropagation: jest.fn() });
+    component.getByTestId("test-notif-new content").click();
     expect(Router).toMatchObject({ asPath: "/dispositif/id" });
   });
 
@@ -193,7 +192,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.root.findByProps({ "data-testid": "test-notif-annuaire" }).props.onClick({ stopPropagation: jest.fn() });
+    component.getByTestId("test-notif-annuaire").click();
     expect(Router).toMatchObject({ asPath: "/directory-create" });
   });
 
@@ -220,7 +219,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.root.findByProps({ "data-testid": "test-delete-reaction" }).props.onClick({ stopPropagation: jest.fn() });
+    screen.getByTestId("test-delete-reaction").click({ stopPropagation: jest.fn() });
     expect(updateDispositifReactionActionCreator).toHaveBeenLastCalledWith({
       suggestion: {
         dispositifId: "id2",

From 2958442d70b8cb008bbd69721fc8fd6ed3a3899d Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 08:56:29 +0200
Subject: [PATCH 30/37] test(client): :white_check_mark: Update remaining tests

---
 .../Admin/AdminContenu/AdminContenu.tsx       |   73 +-
 .../Admin/sharedComponents/SubComponents.tsx  |    8 +-
 .../__tests__/SubComponents.test.tsx          |   13 +-
 .../__snapshots__/SubComponents.test.tsx.snap |    2 -
 .../UserContributions.component.test.tsx      |    8 +-
 .../UserContributions.component.test.tsx.snap |  676 ++--
 .../components/UserContribTable.tsx           |    2 +-
 .../screens/UserFavorites/UserFavorites.tsx   |    2 +-
 .../UserFavorites.component.test.tsx          |   14 +-
 .../UserFavorites.component.test.tsx.snap     |    2 +-
 .../__tests__/UserNotifications.test.tsx      |   12 +-
 .../__test__/UserProfile.component.test.tsx   |    9 +-
 .../__tests__/UserStructure.test.tsx          |   21 +-
 .../__snapshots__/UserStructure.test.tsx.snap | 2815 ++++++++++-------
 .../UserStructure/components/MembresTable.tsx |    4 +-
 15 files changed, 2055 insertions(+), 1606 deletions(-)

diff --git a/client/src/components/Backend/screens/Admin/AdminContenu/AdminContenu.tsx b/client/src/components/Backend/screens/Admin/AdminContenu/AdminContenu.tsx
index 27106afc46..8ac57dfe4c 100644
--- a/client/src/components/Backend/screens/Admin/AdminContenu/AdminContenu.tsx
+++ b/client/src/components/Backend/screens/Admin/AdminContenu/AdminContenu.tsx
@@ -1,62 +1,62 @@
-import React, { useEffect, useState } from "react";
-import { Table, Spinner } from "reactstrap";
-import { useSelector, useDispatch } from "react-redux";
+import { colors } from "colors";
+import WriteContentModal from "components/Modals/WriteContentModal/WriteContentModal";
+import CustomSearchBar from "components/UI/CustomSeachBar";
+import FButton from "components/UI/FButton/FButton";
+import useRouterLocale from "hooks/useRouterLocale";
 import moment from "moment";
 import "moment/locale/fr";
-import Swal from "sweetalert2";
 import { useRouter } from "next/router";
-import useRouterLocale from "hooks/useRouterLocale";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Spinner, Table } from "reactstrap";
+import { fetchActiveDispositifsActionsCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
 import {
   fetchAllDispositifsActionsCreator,
   setAllDispositifsActionsCreator,
 } from "services/AllDispositifs/allDispositifs.actions";
-import { fetchActiveDispositifsActionsCreator } from "services/ActiveDispositifs/activeDispositifs.actions";
-import { prepareDeleteContrib } from "../Needs/lib";
-import { table_contenu, correspondingStatus } from "./data";
+import { allDispositifsSelector } from "services/AllDispositifs/allDispositifs.selector";
+import { LoadingStatusKey } from "services/LoadingStatus/loadingStatus.actions";
+import { isLoadingSelector } from "services/LoadingStatus/loadingStatus.selectors";
+import Swal from "sweetalert2";
 import API from "utils/API";
+import { SelectFirstResponsableModal } from "../AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal";
+import { StructureDetailsModal } from "../AdminStructures/StructureDetailsModal/StructureDetailsModal";
+import { UserDetailsModal } from "../AdminUsers/UserDetailsModal/UserDetailsModal";
+import { prepareDeleteContrib } from "../Needs/lib";
 import {
-  StyledSort,
-  StyledTitle,
-  StyledHeader,
   Content,
   FigureContainer,
+  StyledHeader,
   StyledHeaderInner,
+  StyledSort,
+  StyledTitle,
 } from "../sharedComponents/StyledAdmin";
-import { colors } from "colors";
-import { allDispositifsSelector } from "services/AllDispositifs/allDispositifs.selector";
-import { isLoadingSelector } from "services/LoadingStatus/loadingStatus.selectors";
-import { LoadingStatusKey } from "services/LoadingStatus/loadingStatus.actions";
-import { LoadingAdminContenu } from "./components/LoadingAdminContenu";
 import {
-  TypeContenu,
-  Title,
-  Structure,
-  StyledStatus,
-  ValidateButton,
-  SeeButton,
+  ColoredRound,
   DeleteButton,
   FilterButton,
+  SeeButton,
+  Structure,
+  StyledStatus,
   TabHeader,
-  ColoredRound,
+  Title,
+  TypeContenu,
+  ValidateButton,
 } from "../sharedComponents/SubComponents";
-import CustomSearchBar from "components/UI/CustomSeachBar";
-import FButton from "components/UI/FButton/FButton";
-import WriteContentModal from "components/Modals/WriteContentModal/WriteContentModal";
-import { ContentDetailsModal } from "./ContentDetailsModal/ContentDetailsModal";
 import { ChangeStructureModal } from "./ChangeStructureModale/ChangeStructureModale";
-import { StructureDetailsModal } from "../AdminStructures/StructureDetailsModal/StructureDetailsModal";
-import { SelectFirstResponsableModal } from "../AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal";
+import { LoadingAdminContenu } from "./components/LoadingAdminContenu";
+import { ContentDetailsModal } from "./ContentDetailsModal/ContentDetailsModal";
+import { correspondingStatus, table_contenu } from "./data";
 import { ImprovementsMailModal } from "./ImprovementsMailModal/ImprovementsMailModal";
-import { UserDetailsModal } from "../AdminUsers/UserDetailsModal/UserDetailsModal";
 
-import { NeedsChoiceModal } from "./NeedsChoiceModal/NeedsChoiceModal";
-import { needsSelector } from "services/Needs/needs.selectors";
-import styles from "./AdminContenu.module.scss";
-import { statusCompare } from "lib/statusCompare";
-import { getAdminUrlParams, getInitialFilters } from "lib/getAdminUrlParams";
-import { removeAccents } from "lib";
 import { DispositifStatus, GetAllDispositifsResponse, Id } from "@refugies-info/api-types";
+import { removeAccents } from "lib";
+import { getAdminUrlParams, getInitialFilters } from "lib/getAdminUrlParams";
 import { handleApiError } from "lib/handleApiErrors";
+import { statusCompare } from "lib/statusCompare";
+import { needsSelector } from "services/Needs/needs.selectors";
+import styles from "./AdminContenu.module.scss";
+import { NeedsChoiceModal } from "./NeedsChoiceModal/NeedsChoiceModal";
 
 moment.locale("fr");
 
@@ -464,6 +464,7 @@ export const AdminContenu = () => {
                           prepareDeleteContrib(dispositifs, setAllDispositifsActionsCreator, dispatch, element._id)
                         }
                         disabled={element.status === "Supprimé"}
+                        testId={`delete-button-${element._id}`}
                       />
                     </div>
                   </td>
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
index 2b309732aa..067bf7127c 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/SubComponents.tsx
@@ -212,20 +212,20 @@ export const SeeButton = (props: { burl: string }) => (
   </ButtonContainer>
 );
 
-export const EditButtonWithoutNavigation = (props: { onClick: () => void }) => (
-  <ButtonContainer hoverColor={colors.gray90} onClick={props.onClick}>
+export const EditButtonWithoutNavigation = (props: { onClick: () => void; testId?: string }) => (
+  <ButtonContainer hoverColor={colors.gray90} onClick={props.onClick} data-testid={props.testId}>
     <div style={{ marginBottom: "4px" }}>
       <EVAIcon name="edit" fill={colors.white} size={20} />
     </div>
   </ButtonContainer>
 );
 
-export const DeleteButton = (props: { onClick: (event: any) => void; disabled: boolean }) => (
+export const DeleteButton = (props: { onClick: (event: any) => void; disabled: boolean; testId?: string }) => (
   <ButtonContainer
     onClick={props.disabled ? undefined : props.onClick}
     hoverColor={colors.error}
     disabled={props.disabled}
-    data-testid="delete-button"
+    data-testid={props.testId}
   >
     <div style={{ marginBottom: "4px" }}>
       <EVAIcon name="trash" fill={colors.white} size={20} />
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
index fe94e5abc4..9acc7796d3 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/SubComponents.test.tsx
@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import "jest-styled-components";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../../jest/lib/wrapWithProvidersAndRender";
@@ -189,10 +190,11 @@ test("should render ValidateButton not disabled", () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test("should call onClick ValidateButton", () => {
+test("should call onClick ValidateButton", async () => {
+  const user = userEvent.setup();
   const onClick = jest.fn();
   render(<ValidateButton onClick={onClick} disabled={false} />);
-  screen.getByTestId("validate-button").click();
+  await user.click(screen.getByTestId("validate-button"));
   expect(onClick).toHaveBeenCalled();
 });
 
@@ -211,10 +213,11 @@ test("should render DeleteButton not disabled", () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test("should call onClick DeleteButton", () => {
+test("should call onClick DeleteButton", async () => {
+  const user = userEvent.setup();
   const onClick = jest.fn();
-  render(<DeleteButton onClick={onClick} disabled={false} />);
-  screen.getByTestId("delete-button").click();
+  render(<DeleteButton onClick={onClick} disabled={false} testId="delete_button" />);
+  await user.click(screen.getByTestId("delete_button"));
   expect(onClick).toHaveBeenCalled();
 });
 
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
index f90827b951..7cfd7ac795 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/__tests__/__snapshots__/SubComponents.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`should render DeleteButton disabled 1`] = `
 
 <div
     class="c0"
-    data-testid="delete-button"
     disabled=""
     hovercolor="#f44336"
   >
@@ -87,7 +86,6 @@ exports[`should render DeleteButton not disabled 1`] = `
 
 <div
     class="c0"
-    data-testid="delete-button"
     hovercolor="#f44336"
   >
     <div
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
index 1b3e95e731..5df345e580 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/UserContributions.component.test.tsx
@@ -1,11 +1,12 @@
 // @ts-nocheck
 import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { colors } from "colors";
 import "jest-styled-components";
 import { fetchUserContributionsActionCreator } from "services/UserContributions/userContributions.actions";
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
 import Swal from "sweetalert2";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import UserContributions from "../UserContributions";
 
@@ -163,7 +164,8 @@ describe("userContributions", () => {
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
   });
 
-  it("should render correctly when click on delete", () => {
+  it("should render correctly when click on delete", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserContributions,
@@ -178,7 +180,7 @@ describe("userContributions", () => {
       shouldRedirect: false,
     });
     expect(fetchUserContributionsActionCreator).toHaveBeenCalledWith();
-    screen.getByTestId("test_delete_id1").click();
+    await user.click(screen.getByTestId("delete-button-id1"));
     expect(asFragment()).toMatchSnapshot();
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
diff --git a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
index 0e93168acc..5f51915f78 100644
--- a/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserContributions/__tests__/__snapshots__/UserContributions.component.test.tsx.snap
@@ -188,7 +188,8 @@ exports[`userContributions should render correctly when 0 contributions 1`] = `
 `;
 
 exports[`userContributions should render correctly when click on delete 1`] = `
-.c9 {
+<DocumentFragment>
+  .c9 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -334,347 +335,424 @@ exports[`userContributions should render correctly when click on delete 1`] = `
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0"
     >
       <div
-        className="c2"
+        class="c1"
       >
         <div
-          className="c3"
+          class="c2"
         >
           <div
-            className="c4"
-          >
-            Vous avez rédigé
-          </div>
-          <div
-            className="c5"
-          >
-            1
-          </div>
-          <div
-            className="c4"
+            class="c3"
           >
-            fiche.
+            <div
+              class="c4"
+            >
+              Vous avez rédigé
+            </div>
+            <div
+              class="c5"
+            >
+              1
+            </div>
+            <div
+              class="c4"
+            >
+              fiche.
+            </div>
           </div>
-        </div>
-        <div>
-          <button
-            className="btn tuto me-2"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
+          <div>
+            <button
+              class="btn tuto me-2"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-video-outline" fill="#fff"><g data-name="Layer 2"><g data-name="video"><rect width="24" height="24" opacity="0"/><path d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Explications
-          </button>
-          <button
-            className="btn dark"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-video-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="video"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 7.15a1.7 1.7 0 0 0-1.85.3l-2.15 2V8a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h9a3 3 0 0 0 3-3v-1.45l2.16 2a1.74 1.74 0 0 0 1.16.45 1.68 1.68 0 0 0 .69-.15 1.6 1.6 0 0 0 1-1.48V8.63A1.6 1.6 0 0 0 21 7.15zM15 16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1zm5-1.4L17.19 12 20 9.4z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Explications
+            </button>
+            <button
+              class="btn dark"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-file-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="file-add"><rect width="24" height="24" opacity="0"/><path d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"/><path d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Créer une nouvelle fiche
-          </button>
+              <span
+                class="me-2 icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-file-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="file-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M19.74 8.33l-5.44-6a1 1 0 0 0-.74-.33h-7A2.53 2.53 0 0 0 4 4.5v15A2.53 2.53 0 0 0 6.56 22h10.88A2.53 2.53 0 0 0 20 19.5V9a1 1 0 0 0-.26-.67zM14 5l2.74 3h-2a.79.79 0 0 1-.74-.85zm3.44 15H6.56a.53.53 0 0 1-.56-.5v-15a.53.53 0 0 1 .56-.5H12v3.15A2.79 2.79 0 0 0 14.71 10H18v9.5a.53.53 0 0 1-.56.5z"
+                        />
+                        <path
+                          d="M14 13h-1v-1a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0v-1h1a1 1 0 0 0 0-2z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Créer une nouvelle fiche
+            </button>
+          </div>
         </div>
-      </div>
-      <div
-        className="c6"
-      >
         <div
-          className="table-responsive"
+          class="c6"
         >
-          <table
-            className="table table-borderless"
+          <div
+            class="table-responsive"
           >
-            <thead>
-              <tr>
-                <th>
-                  Type
-                </th>
-                <th>
-                  Titre
-                </th>
-                <th>
-                  Responsabilité
-                </th>
-                <th>
-                  <div
-                    className="c7"
-                    onClick={[Function]}
-                  >
-                    Statut
-                    <span
-                      className="ms-2 icon"
+            <table
+              class="table table-borderless"
+            >
+              <thead>
+                <tr>
+                  <th>
+                    Type
+                  </th>
+                  <th>
+                    Titre
+                  </th>
+                  <th>
+                    Responsabilité
+                  </th>
+                  <th>
+                    <div
+                      class="c7"
                     >
-                      <i
-                        dangerouslySetInnerHTML={
-                          {
-                            "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-question-mark-circle-outline" fill="#212121"><g data-name="Layer 2"><g data-name="menu-arrow-circle"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"/><circle cx="12" cy="17" r="1"/></g></g></svg>",
-                          }
-                        }
-                        style={
-                          {
-                            "height": "20px",
-                            "lineHeight": "20px",
-                          }
-                        }
-                      />
-                    </span>
-                  </div>
-                </th>
-                <th>
-                  Merci
-                </th>
-                <th>
-                  Vues
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                className="line"
-                data-test-id="test_id1"
-              >
-                <td
-                  className="first align-middle"
-                >
-                  <div
-                    className="c8"
-                    isDarkBackground={true}
-                  >
-                    Dispositif
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
+                      Statut
+                      <span
+                        class="ms-2 icon"
+                      >
+                        <i
+                          style="height: 20px; line-height: 20px;"
+                        >
+                          <svg
+                            class="eva eva-question-mark-circle-outline"
+                            fill="#212121"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <g
+                              data-name="Layer 2"
+                            >
+                              <g
+                                data-name="menu-arrow-circle"
+                              >
+                                <rect
+                                  height="24"
+                                  opacity="0"
+                                  transform="rotate(180 12 12)"
+                                  width="24"
+                                />
+                                <path
+                                  d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                                />
+                                <path
+                                  d="M12 6a3.5 3.5 0 0 0-3.5 3.5 1 1 0 0 0 2 0A1.5 1.5 0 1 1 12 11a1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.16A3.49 3.49 0 0 0 12 6z"
+                                />
+                                <circle
+                                  cx="12"
+                                  cy="17"
+                                  r="1"
+                                />
+                              </g>
+                            </g>
+                          </svg>
+                        </i>
+                      </span>
+                    </div>
+                  </th>
+                  <th>
+                    Merci
+                  </th>
+                  <th>
+                    Vues
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  class="line"
+                  data-testid="test_id1"
                 >
-                  <a
-                    href="/dispositif/id1"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onTouchStart={[Function]}
+                  <td
+                    class="first align-middle"
                   >
                     <div
-                      className="c9"
+                      class="c8"
                     >
-                      <b>
-                        titre info1
-                      </b>
-                      <span>
-                        avec titreMarque1
-                      </span>
+                      Dispositif
                     </div>
-                  </a>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <div
-                    className="c7"
+                  </td>
+                  <td
+                    class="align-middle"
+                  >
+                    <a
+                      href="/dispositif/id1"
+                    >
+                      <div
+                        class="c9"
+                      >
+                        <b>
+                          titre info1
+                        </b>
+                        <span>
+                          avec titreMarque1
+                        </span>
+                      </div>
+                    </a>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                          "marginRight": "8px",
-                        }
-                      }
+                      class="c7"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px; margin-right: 8px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-outline" fill="#212121"><g data-name="Layer 2"><g data-name="person"><rect width="24" height="24" opacity="0"/><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-person-outline"
+                              fill="#212121"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="person"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                                  />
+                                  <path
+                                    d="M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                      Moi
                     </div>
-                    Moi
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                  onClick={[Function]}
-                >
-                  <div
-                    style={
-                      {
-                        "width": "120px",
-                      }
-                    }
+                  </td>
+                  <td
+                    class="align-middle"
                   >
                     <div
-                      className="c10"
-                      color="#FFEB3B"
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                      textColor="#212121"
+                      style="width: 120px;"
                     >
-                      Brouillon
+                      <div
+                        class="c10"
+                        color="#FFEB3B"
+                        textcolor="#212121"
+                      >
+                        Brouillon
+                      </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="align-middle"
-                >
-                  <span
-                    aria-label="locked"
-                    role="img"
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="align-middle"
                   >
-                    🔒
-                  </span>
-                </td>
-                <td
-                  className="last align-middle"
-                >
-                  <div
-                    style={
-                      {
-                        "display": "flex",
-                        "flexDirection": "row",
-                      }
-                    }
+                    <span
+                      aria-label="locked"
+                      role="img"
+                    >
+                      🔒
+                    </span>
+                  </td>
+                  <td
+                    class="last align-middle"
                   >
                     <div
-                      className="c11"
-                      hoverColor="#212121"
+                      style="display: flex; flex-direction: row;"
                     >
-                      <a
-                        href="/dispositif/id1"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                      <div
+                        class="c11"
+                        hovercolor="#212121"
+                      >
+                        <a
+                          href="/dispositif/id1"
+                          rel="noopener noreferrer"
+                          target="_blank"
+                        >
+                          <div
+                            style="margin-bottom: 4px;"
+                          >
+                            <span
+                              class="icon"
+                            >
+                              <i
+                                style="height: 20px; line-height: 20px;"
+                              >
+                                <svg
+                                  class="eva eva-eye"
+                                  fill="#ffffff"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <g
+                                    data-name="Layer 2"
+                                  >
+                                    <g
+                                      data-name="eye"
+                                    >
+                                      <rect
+                                        height="24"
+                                        opacity="0"
+                                        width="24"
+                                      />
+                                      <circle
+                                        cx="12"
+                                        cy="12"
+                                        r="1.5"
+                                      />
+                                      <path
+                                        d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"
+                                      />
+                                    </g>
+                                  </g>
+                                </svg>
+                              </i>
+                            </span>
+                          </div>
+                        </a>
+                      </div>
+                      <div
+                        class="c12"
+                        data-testid="delete-button-id1"
+                        hovercolor="#f44336"
                       >
                         <div
-                          style={
-                            {
-                              "marginBottom": "4px",
-                            }
-                          }
+                          style="margin-bottom: 4px;"
                         >
                           <span
-                            className="icon"
+                            class="icon"
                           >
                             <i
-                              dangerouslySetInnerHTML={
-                                {
-                                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-eye" fill="#ffffff"><g data-name="Layer 2"><g data-name="eye"><rect width="24" height="24" opacity="0"/><circle cx="12" cy="12" r="1.5"/><path d="M21.87 11.5c-.64-1.11-4.16-6.68-10.14-6.5-5.53.14-8.73 5-9.6 6.5a1 1 0 0 0 0 1c.63 1.09 4 6.5 9.89 6.5h.25c5.53-.14 8.74-5 9.6-6.5a1 1 0 0 0 0-1zm-9.87 4a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5z"/></g></g></svg>",
-                                }
-                              }
-                              style={
-                                {
-                                  "height": "20px",
-                                  "lineHeight": "20px",
-                                }
-                              }
-                            />
+                              style="height: 20px; line-height: 20px;"
+                            >
+                              <svg
+                                class="eva eva-trash"
+                                fill="#ffffff"
+                                height="20px"
+                                viewBox="0 0 24 24"
+                                width="20px"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <g
+                                  data-name="Layer 2"
+                                >
+                                  <g
+                                    data-name="trash"
+                                  >
+                                    <rect
+                                      height="24"
+                                      opacity="0"
+                                      width="24"
+                                    />
+                                    <path
+                                      d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                    />
+                                  </g>
+                                </g>
+                              </svg>
+                            </i>
                           </span>
                         </div>
-                      </a>
-                    </div>
-                    <div
-                      className="c12"
-                      data-test-id="delete-button"
-                      disabled={false}
-                      hoverColor="#f44336"
-                      onClick={[Function]}
-                    >
-                      <div
-                        style={
-                          {
-                            "marginBottom": "4px",
-                          }
-                        }
-                      >
-                        <span
-                          className="icon"
-                        >
-                          <i
-                            dangerouslySetInnerHTML={
-                              {
-                                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                              }
-                            }
-                            style={
-                              {
-                                "height": "20px",
-                                "lineHeight": "20px",
-                              }
-                            }
-                          />
-                        </span>
                       </div>
                     </div>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`userContributions should render correctly when contributions 1`] = `
@@ -1281,7 +1359,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id1"
                         hovercolor="#f44336"
                       >
                         <div
@@ -1498,7 +1576,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id2"
                         hovercolor="#f44336"
                       >
                         <div
@@ -1671,7 +1749,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id3"
                         hovercolor="#f44336"
                       >
                         <div
@@ -1844,7 +1922,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id4"
                         hovercolor="#f44336"
                       >
                         <div
@@ -2061,7 +2139,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id5"
                         hovercolor="#f44336"
                       >
                         <div
@@ -2239,7 +2317,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c12"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id6"
                         hovercolor="#f44336"
                       >
                         <div
@@ -2458,7 +2536,7 @@ exports[`userContributions should render correctly when contributions 1`] = `
                       </div>
                       <div
                         class="c18"
-                        data-testid="delete-button"
+                        data-testid="delete-button-id7"
                         disabled=""
                         hovercolor="#f44336"
                       >
diff --git a/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx b/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
index b3af27f324..38fa897b50 100644
--- a/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
+++ b/client/src/components/Backend/screens/UserContributions/components/UserContribTable.tsx
@@ -104,7 +104,7 @@ export const UserContribTable = (props: Props) => (
               <div style={{ display: "flex", flexDirection: "row" }}>
                 <SeeButton burl={burl} />
                 <DeleteButton
-                  data-testid={"test_delete_" + element._id}
+                  testId={`delete-button-${element._id}`}
                   onClick={(event: any) => props.deleteDispositif(event, element._id, element.isAuthorizedToDelete)}
                   disabled={!element.isAuthorizedToDelete}
                 />
diff --git a/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx b/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
index 27555bdf7a..57bb50a3d5 100644
--- a/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/UserFavorites.tsx
@@ -82,7 +82,7 @@ const UserFavorites = (props: Props) => {
                   type="outline-black"
                   name="trash-outline"
                   onClick={removeAllFavorites}
-                  data-testid="test-delete-button"
+                  data-testid="remove-all-favorites-button"
                 >
                   {t("UserFavorites.Tout supprimer", "Tout supprimer")}
                 </FButton>
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
index 159df07487..0ff2575805 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/UserFavorites.component.test.tsx
@@ -1,16 +1,18 @@
 //@ts-nocheck
+import userEvent from "@testing-library/user-event";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import mockAxios from "jest-mock-axios";
 import routerMock from "next/router";
 import {
   fetchUserFavoritesActionCreator,
   updateUserFavoritesActionCreator,
 } from "services/UserFavoritesInLocale/UserFavoritesInLocale.actions";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import UserFavorites from "../UserFavorites";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
+import { screen } from "@testing-library/dom";
 import "jest-styled-components";
 
 jest.mock("services/UserFavoritesInLocale/UserFavoritesInLocale.actions", () => {
@@ -130,7 +132,8 @@ describe("UserFavorites", () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer", () => {
+  it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const component = wrapWithProvidersAndRenderForTesting({
       Component: UserFavorites,
@@ -138,7 +141,7 @@ describe("UserFavorites", () => {
       reduxState: { ...initialMockStore, userFavorites: { favorites: [fav1, fav2, fav3] } },
     });
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("fr");
-    component.root.findByProps({ "data-testid": "test-delete-button" }).props.onClick();
+    await user.click(component.getByTestId("remove-all-favorites-button"));
 
     expect(updateUserFavoritesActionCreator).toHaveBeenCalledWith({
       type: "remove-all",
@@ -146,7 +149,8 @@ describe("UserFavorites", () => {
     });
   });
 
-  it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer and language is en", () => {
+  it("should dispatch updateUserFavoritesActionCreator when click on Tout supprimer and language is en", async () => {
+    const user = userEvent.setup();
     routerMock.locale = "en";
     window.scrollTo = jest.fn();
 
@@ -157,7 +161,7 @@ describe("UserFavorites", () => {
     });
 
     expect(fetchUserFavoritesActionCreator).toHaveBeenCalledWith("en");
-    component.root.findByProps({ "data-testid": "test-delete-button" }).props.onClick();
+    await user.click(screen.getByTestId("remove-all-favorites-button"));
 
     expect(updateUserFavoritesActionCreator).toHaveBeenCalledWith({
       type: "remove-all",
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
index d49bac8bba..63951f7102 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
@@ -397,7 +397,7 @@ exports[`UserFavorites should render correctly when 3 favorites 1`] = `
       <div>
         <button
           class="btn outline-black"
-          data-testid="test-delete-button"
+          data-testid="remove-all-favorites-button"
         >
           <span
             class="me-2 icon"
diff --git a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
index 318d5f3551..7641676ec1 100644
--- a/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
+++ b/client/src/components/Backend/screens/UserNotifications/__tests__/UserNotifications.test.tsx
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import "jest-styled-components";
 import Router from "next/router";
@@ -8,6 +9,7 @@ import { fetchSelectedStructureActionCreator } from "services/SelectedStructure/
 import { fetchUserStructureActionCreator } from "services/UserStructure/userStructure.actions";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import UserNotifications from "../UserNotifications";
+
 jest.mock("next/router", () => require("next-router-mock"));
 
 jest.mock("services/UserStructure/userStructure.actions", () => {
@@ -142,7 +144,8 @@ describe("UserNotifications", () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it("should link to dispositif when click on new content notif", () => {
+  it("should link to dispositif when click on new content notif", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const component = wrapWithProvidersAndRenderForTesting({
       Component: UserNotifications,
@@ -165,11 +168,12 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.getByTestId("test-notif-new content").click();
+    await user.click(component.getByTestId("test-notif-new content"));
     expect(Router).toMatchObject({ asPath: "/dispositif/id" });
   });
 
-  it("should link to dispositif when click on annuaire notif", () => {
+  it("should link to dispositif when click on annuaire notif", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const component = wrapWithProvidersAndRenderForTesting({
       Component: UserNotifications,
@@ -192,7 +196,7 @@ describe("UserNotifications", () => {
       id: "1",
       locale: "fr",
     });
-    component.getByTestId("test-notif-annuaire").click();
+    await user.click(component.getByTestId("test-notif-annuaire"));
     expect(Router).toMatchObject({ asPath: "/directory-create" });
   });
 
diff --git a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
index d789d2e0d2..a6a2225f1d 100644
--- a/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
+++ b/client/src/components/Backend/screens/UserProfile/__test__/UserProfile.component.test.tsx
@@ -1,9 +1,10 @@
 import "@testing-library/jest-dom";
 import { waitFor } from "@testing-library/react";
-import "jest-styled-components";
+import userEvent from "@testing-library/user-event";
 import { initialMockStore } from "__fixtures__/reduxStore";
 import { testUser } from "__fixtures__/user";
 import { setupGoogleMock } from "__mocks__/react-google-autocomplete";
+import "jest-styled-components";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import { UserProfile } from "../UserProfile";
 
@@ -59,6 +60,7 @@ describe("UserProfile", () => {
   });
 
   it("should render correctly when editing profile", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
@@ -67,7 +69,7 @@ describe("UserProfile", () => {
         user: { ...initialMockStore.user, user: { ...testUser } },
       },
     });
-    component.getByText("Modifier mes informations personnelles").click();
+    await user.click(component.getByText("Modifier mes informations personnelles"));
     await waitFor(() => expect(component.getByTitle("pseudo-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("firstname-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("email-input")).not.toBeDisabled());
@@ -77,6 +79,7 @@ describe("UserProfile", () => {
   });
 
   it("should render correctly when editing profile without password", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const component = wrapWithProvidersAndRenderForTesting({
       Component: UserProfile,
@@ -85,7 +88,7 @@ describe("UserProfile", () => {
         user: { ...initialMockStore.user, user: { ...testUser, sso: true } },
       },
     });
-    component.getByText("Modifier mes informations personnelles").click();
+    await user.click(component.getByText("Modifier mes informations personnelles"));
     await waitFor(() => expect(component.getByTitle("pseudo-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("firstname-input")).not.toBeDisabled());
     await waitFor(() => expect(component.getByTitle("email-input")).not.toBeDisabled());
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
index ed45ebfe75..2c4a9dd517 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/UserStructure.test.tsx
@@ -1,5 +1,7 @@
 import { GetStructureResponse, StructureMemberRole, StructureStatus, UserStatus } from "@refugies-info/api-types";
 import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { initialMockStore } from "__fixtures__/reduxStore";
 import { colors } from "colors";
 import "jest-styled-components";
 import {
@@ -7,7 +9,6 @@ import {
   updateUserStructureActionCreator,
 } from "services/UserStructure/userStructure.actions";
 import Swal from "sweetalert2";
-import { initialMockStore } from "__fixtures__/reduxStore";
 import { wrapWithProvidersAndRenderForTesting } from "../../../../../../jest/lib/wrapWithProvidersAndRender";
 import { UserStructureComponent } from "../UserStructure.component";
 
@@ -171,6 +172,7 @@ describe("UserStructure", () => {
   });
 
   it("should render correctly when add member modal is open", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
@@ -202,12 +204,12 @@ describe("UserStructure", () => {
         },
       },
     });
-    const element = await screen.findByTestId("test-add-member");
-    element.click();
+    await user.click(screen.getByTestId("test-add-member"));
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("should render correctly when edit member modal is open, select respo and validate", async () => {
+    const user = userEvent.setup();
     window.scrollTo = jest.fn();
     const { asFragment } = wrapWithProvidersAndRenderForTesting({
       Component: UserStructureComponent,
@@ -239,16 +241,13 @@ describe("UserStructure", () => {
         },
       },
     });
-    const element1 = await screen.findByTestId("test-edit-id1");
-    element1.click();
+    await user.click(screen.getByTestId("edit-member-id1"));
     expect(asFragment()).toMatchSnapshot();
 
-    const element2 = await screen.findByTestId("test-role-Responsable");
-    element2.click();
+    await user.click(screen.getByTestId("test-role-Responsable"));
     expect(asFragment()).toMatchSnapshot();
 
-    const element3 = await screen.findByTestId("test-validate-edit");
-    element3.click();
+    await user.click(screen.getByTestId("test-validate-edit"));
 
     expect(updateUserStructureActionCreator).toHaveBeenCalledWith({
       membres: {
@@ -261,6 +260,7 @@ describe("UserStructure", () => {
   });
 
   it("should delete user ", async () => {
+    const user = userEvent.setup();
     Swal.fire = jest.fn().mockResolvedValueOnce({ value: true });
 
     window.scrollTo = jest.fn();
@@ -295,8 +295,7 @@ describe("UserStructure", () => {
       },
     });
 
-    const element = await component.findByTestId("test_delete_id1");
-    element.click();
+    await user.click(screen.getByTestId("delete-button-id1"));
     expect(Swal.fire).toHaveBeenCalledWith({
       title: "Êtes-vous sûr ?",
       text: "Vous êtes sur le point d'enlever un membre de votre structure.",
diff --git a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
index eedd49b5a2..0b5a2ee2ec 100644
--- a/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserStructure/__tests__/__snapshots__/UserStructure.test.tsx.snap
@@ -58,6 +58,31 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
   margin-bottom: 8px;
 }
 
+.c17 {
+  font-weight: normal;
+  font-size: 32px;
+  line-height: 40px;
+}
+
+.c19 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.c18 {
+  background: #2d9cdb;
+  border-radius: 12px;
+  padding: 16px;
+  margin-top: 15px;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 20px;
+  color: #ffffff;
+  margin-bottom: 15px;
+}
+
 .c12 {
   width: 40px;
   height: 40px;
@@ -379,6 +404,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                   >
                     <div
                       class="c12"
+                      data-testid="edit-member-id2"
                       hovercolor="#212121"
                     >
                       <div
@@ -421,7 +447,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                     </div>
                     <div
                       class="c13"
-                      data-testid="delete-button"
+                      data-testid="delete-button-id2"
                       hovercolor="#f44336"
                     >
                       <div
@@ -526,6 +552,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                   >
                     <div
                       class="c12"
+                      data-testid="edit-member-id1"
                       hovercolor="#212121"
                     >
                       <div
@@ -568,7 +595,7 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
                     </div>
                     <div
                       class="c13"
-                      data-testid="delete-button"
+                      data-testid="delete-button-id1"
                       hovercolor="#f44336"
                     >
                       <div
@@ -616,7 +643,152 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
           </table>
         </div>
       </div>
-      <div />
+      <div>
+        <div
+          class="c17"
+        >
+          Ajouter un membre
+        </div>
+        <div
+          class="c18"
+        >
+          <b>
+            Attention :
+          </b>
+           assurez-vous que la personne que vous souhaitez ajouter a déjà créé un compte sur réfugiés.info.
+        </div>
+        <div>
+          <div
+            class="input mb-2 input-group"
+          >
+            <input
+              class="new_size form-control"
+              id="value"
+              type="text"
+              value=""
+            />
+            <span
+              class="append input-group-text"
+            >
+              <span
+                class="icon"
+              >
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-search-outline"
+                    fill="#212121"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="search"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+            </span>
+          </div>
+        </div>
+        <div
+          class="c19"
+        >
+          <button
+            class="btn outline-black me-2"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-close-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="close"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(180 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Annuler
+          </button>
+          <button
+            class="btn validate"
+            disabled=""
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-checkmark-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="checkmark"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Ajouter
+          </button>
+        </div>
+      </div>
       <div />
     </div>
   </div>
@@ -624,7 +796,8 @@ exports[`UserStructure should render correctly when add member modal is open 1`]
 `;
 
 exports[`UserStructure should render correctly when edit member modal is open, select respo and validate 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -680,6 +853,73 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   margin-bottom: 8px;
 }
 
+.c20 {
+  background: #E0E0E0;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #212121;
+  box-sizing: border-box;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 4px 0px 4px 0px;
+  cursor: pointer;
+  color: #212121;
+}
+
+.c23 {
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #212121;
+  box-sizing: border-box;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 4px 0px 4px 0px;
+  cursor: pointer;
+  color: #212121;
+}
+
+.c22 {
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 28px;
+  margin-bottom: 10px;
+}
+
+.c21 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.c18 {
+  font-weight: normal;
+  font-size: 32px;
+  line-height: 40px;
+  margin-right: 15px;
+}
+
+.c24 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.c17 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.c19 {
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 23px;
+}
+
 .c12 {
   width: 40px;
   height: 40px;
@@ -766,73 +1006,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   max-width: 190px;
 }
 
-.c20 {
-  background: #E0E0E0;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #212121;
-  box-sizing: border-box;
-  border-radius: 12px;
-  padding: 16px;
-  margin: 4px 0px 4px 0px;
-  cursor: pointer;
-  color: #212121;
-}
-
-.c23 {
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #212121;
-  box-sizing: border-box;
-  border-radius: 12px;
-  padding: 16px;
-  margin: 4px 0px 4px 0px;
-  cursor: pointer;
-  color: #212121;
-}
-
-.c22 {
-  font-weight: bold;
-  font-size: 22px;
-  line-height: 28px;
-  margin-bottom: 10px;
-}
-
-.c21 {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.c18 {
-  font-weight: normal;
-  font-size: 32px;
-  line-height: 40px;
-  margin-right: 15px;
-}
-
-.c24 {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
-
-.c17 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.c19 {
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 23px;
-}
-
 .c2 {
   font-weight: bold;
   font-size: 22px;
@@ -848,616 +1021,708 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0 container"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
+      class="c0 container"
     >
-      <img
-        alt="ACRO"
-        className="sponsor_img"
-        data-nimg="1"
-        decoding="async"
-        height={115}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-            "objectFit": "contain",
-          }
-        }
-        width={235}
-      />
       <div
-        className="c2"
-      >
-        structureTest
-      </div>
-      <a
-        className="btn dark"
-        href="/directory/structureId"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
+        class="c1"
       >
-        <span
-          className="me-2 icon"
+        <img
+          alt="ACRO"
+          class="sponsor_img"
+          data-nimg="1"
+          decoding="async"
+          height="115"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent; object-fit: contain;"
+          width="235"
+        />
+        <div
+          class="c2"
         >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-book-outline" fill="#fff"><g data-name="Layer 2"><g data-name="book"><rect width="24" height="24" opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Voir dans l'annuaire
-      </a>
-    </div>
-    <div
-      className="c3"
-    >
-      <div
-        className="c4"
-      >
-        <div
-          className="c5"
-        >
-          <div
-            className="c6"
-          >
-            Membres
-          </div>
-          <div
-            className="c7"
-          >
-            2
-          </div>
-          <div
-            className="c6"
-          />
+          structureTest
         </div>
-        <div>
-          <button
-            className="btn dark"
-            data-test-id="test-add-member"
-            onClick={[Function]}
+        <a
+          class="btn dark"
+          href="/directory/structureId"
+        >
+          <span
+            class="me-2 icon"
           >
-            <span
-              className="me-2 icon"
+            <i
+              style="height: 20px; line-height: 20px;"
             >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="person-add"><rect width="24" height="24" opacity="0"/><path d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"/><path d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Ajouter un membre
-          </button>
-        </div>
+              <svg
+                class="eva eva-book-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="book"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Voir dans l'annuaire
+        </a>
       </div>
       <div
-        className="table-responsive"
+        class="c3"
       >
-        <table
-          className="table table-borderless"
+        <div
+          class="c4"
         >
-          <thead>
-            <tr>
-              <th>
-                Nom
-              </th>
-              <th>
-                Role
-              </th>
-              <th>
-                Dernière connexion
-              </th>
-              <th>
-                Ajouté le
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              className="membres-table"
+          <div
+            class="c5"
+          >
+            <div
+              class="c6"
             >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
-                >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
-                  <div
-                    className="c9"
-                    isUser={true}
-                  >
-                    membre2
-                  </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c10"
-                  isUser={true}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c11"
-                  isUser={true}
-                />
-              </td>
-              <td
-                className="align-middle"
+              Membres
+            </div>
+            <div
+              class="c7"
+            >
+              2
+            </div>
+            <div
+              class="c6"
+            />
+          </div>
+          <div>
+            <button
+              class="btn dark"
+              data-testid="test-add-member"
+            >
+              <span
+                class="me-2 icon"
               >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                <i
+                  style="height: 20px; line-height: 20px;"
                 >
-                  <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                  <svg
+                    class="eva eva-person-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                    <g
+                      data-name="Layer 2"
                     >
-                      <span
-                        className="icon"
+                      <g
+                        data-name="person-add"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
                         />
-                      </span>
-                    </div>
-                  </div>
+                        <path
+                          d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"
+                        />
+                        <path
+                          d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                        />
+                        <path
+                          d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Ajouter un membre
+            </button>
+          </div>
+        </div>
+        <div
+          class="table-responsive"
+        >
+          <table
+            class="table table-borderless"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Nom
+                </th>
+                <th>
+                  Role
+                </th>
+                <th>
+                  Dernière connexion
+                </th>
+                <th>
+                  Ajouté le
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="membres-table"
+              >
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
+                    class="c8"
                   >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c9"
                     >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                      membre2
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
-                >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c14"
-                    isUser={false}
+                    class="c10"
                   >
-                    membre1
+                    Rédacteur
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c15"
-                  isUser={false}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    class="c11"
                   >
-                    <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </div>
+                    undefined undefined
                   </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
+                    class="c11"
+                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    style="display: flex; flex-direction: row;"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c12"
+                      data-testid="edit-member-id2"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div />
-    <div>
-      <div
-        className="c17"
-      >
-        <div
-          className="c18"
-        >
-          Modifier le rôle de
-        </div>
-        <img
-          alt=""
-          className="user_img me-2"
-          data-nimg="1"
-          decoding="async"
-          height={40}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-              "objectFit": "contain",
-            }
-          }
-          width={70}
-        />
-        <div
-          className="c19"
-        >
-          membre1
+                    <div
+                      class="c13"
+                      data-testid="delete-button-id2"
+                      hovercolor="#f44336"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="membres-table"
+              >
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c8"
+                  >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c14"
+                    >
+                      membre1
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c15"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c16"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c16"
+                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    style="display: flex; flex-direction: row;"
+                  >
+                    <div
+                      class="c12"
+                      data-testid="edit-member-id1"
+                      hovercolor="#212121"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="c13"
+                      data-testid="delete-button-id1"
+                      hovercolor="#f44336"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
-      <div
-        className="c20"
-        data-test-id="test-role-Rédacteur"
-        onClick={[Function]}
-        state="current"
-      >
+      <div />
+      <div>
         <div
-          className="c21"
+          class="c17"
         >
           <div
-            className="c22"
+            class="c18"
           >
-            Nommer « rédacteur » 
+            Modifier le rôle de
           </div>
-          <span
-            className="icon"
+          <img
+            alt=""
+            class="user_img me-2"
+            data-nimg="1"
+            decoding="async"
+            height="40"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+            style="color: transparent; object-fit: contain;"
+            width="70"
+          />
+          <div
+            class="c19"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-radio-button-on" fill="#212121"><g data-name="Layer 2"><g data-name="radio-button-on"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
+            membre1
+          </div>
         </div>
-        Éditer et valider les fiches 
-        <br />
-        Accepter les fiches proposées à ma structure 
-        <br />
-        Voir les réactions aux fiches de ma structure 
-        <br />
-        Compléter la fiche annuaire de ma structure 
-        <br />
-      </div>
-      <div
-        className="c23"
-        data-test-id="test-role-Responsable"
-        onClick={[Function]}
-        state="none"
-      >
         <div
-          className="c21"
+          class="c20"
+          data-testid="test-role-Rédacteur"
+          state="current"
         >
           <div
-            className="c22"
+            class="c21"
           >
-            Nommer « responsable »
+            <div
+              class="c22"
+            >
+              Nommer « rédacteur » 
+            </div>
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-radio-button-on"
+                  fill="#212121"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="radio-button-on"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                      />
+                      <path
+                        d="M12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
           </div>
-          <span
-            className="icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-radio-button-off" fill="#212121"><g data-name="Layer 2"><g data-name="radio-button-off"><rect width="24" height="24" opacity="0"/><path d="M12 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10zm0-18a8 8 0 1 0 8 8 8 8 0 0 0-8-8z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </div>
-        Éditer et valider les fiches 
-        <br />
-        Accepter les fiches proposées à ma structure 
-        <br />
-        Voir les réactions aux fiches de ma structure 
-        <br />
-        Compléter la fiche annuaire de ma structure 
-        <br />
-        <span>
-          + Ajouter ou supprimer d'autres membres
+          Éditer et valider les fiches 
           <br />
-        </span>
-        <span>
-          + Nommer d'autres responsables
+          Accepter les fiches proposées à ma structure 
           <br />
-        </span>
-      </div>
-      <div
-        className="c24"
-      >
-        <button
-          className="btn outline-black me-2"
-          onClick={[Function]}
+          Voir les réactions aux fiches de ma structure 
+          <br />
+          Compléter la fiche annuaire de ma structure 
+          <br />
+        </div>
+        <div
+          class="c23"
+          data-testid="test-role-Responsable"
+          state="none"
         >
-          <span
-            className="me-2 icon"
+          <div
+            class="c21"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#fff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          Annuler
-        </button>
-        <button
-          className="btn validate"
-          data-test-id="test-validate-edit"
-          disabled={true}
-          onClick={[Function]}
-        >
-          <span
-            className="me-2 icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#fff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+            <div
+              class="c22"
+            >
+              Nommer « responsable »
+            </div>
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-radio-button-off"
+                  fill="#212121"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="radio-button-off"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M12 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10zm0-18a8 8 0 1 0 8 8 8 8 0 0 0-8-8z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </div>
+          Éditer et valider les fiches 
+          <br />
+          Accepter les fiches proposées à ma structure 
+          <br />
+          Voir les réactions aux fiches de ma structure 
+          <br />
+          Compléter la fiche annuaire de ma structure 
+          <br />
+          <span>
+            + Ajouter ou supprimer d'autres membres
+            <br />
           </span>
-          Valider
-        </button>
+          <span>
+            + Nommer d'autres responsables
+            <br />
+          </span>
+        </div>
+        <div
+          class="c24"
+        >
+          <button
+            class="btn outline-black me-2"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-close-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="close"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(180 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Annuler
+          </button>
+          <button
+            class="btn validate"
+            data-testid="test-validate-edit"
+            disabled=""
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-checkmark-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="checkmark"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Valider
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when edit member modal is open, select respo and validate 2`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -1513,6 +1778,73 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   margin-bottom: 8px;
 }
 
+.c20 {
+  background: #ffffff;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #212121;
+  box-sizing: border-box;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 4px 0px 4px 0px;
+  cursor: pointer;
+  color: #212121;
+}
+
+.c23 {
+  background: #2d9cdb;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #2d9cdb;
+  box-sizing: border-box;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 4px 0px 4px 0px;
+  cursor: pointer;
+  color: #ffffff;
+}
+
+.c22 {
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 28px;
+  margin-bottom: 10px;
+}
+
+.c21 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.c18 {
+  font-weight: normal;
+  font-size: 32px;
+  line-height: 40px;
+  margin-right: 15px;
+}
+
+.c24 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+.c17 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.c19 {
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 23px;
+}
+
 .c12 {
   width: 40px;
   height: 40px;
@@ -1599,73 +1931,6 @@ exports[`UserStructure should render correctly when edit member modal is open, s
   max-width: 190px;
 }
 
-.c20 {
-  background: #ffffff;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #212121;
-  box-sizing: border-box;
-  border-radius: 12px;
-  padding: 16px;
-  margin: 4px 0px 4px 0px;
-  cursor: pointer;
-  color: #212121;
-}
-
-.c23 {
-  background: #2d9cdb;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #2d9cdb;
-  box-sizing: border-box;
-  border-radius: 12px;
-  padding: 16px;
-  margin: 4px 0px 4px 0px;
-  cursor: pointer;
-  color: #ffffff;
-}
-
-.c22 {
-  font-weight: bold;
-  font-size: 22px;
-  line-height: 28px;
-  margin-bottom: 10px;
-}
-
-.c21 {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.c18 {
-  font-weight: normal;
-  font-size: 32px;
-  line-height: 40px;
-  margin-right: 15px;
-}
-
-.c24 {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
-
-.c17 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.c19 {
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 23px;
-}
-
 .c2 {
   font-weight: bold;
   font-size: 22px;
@@ -1681,612 +1946,702 @@ exports[`UserStructure should render correctly when edit member modal is open, s
 }
 
 <div
-  style={
-    {
-      "display": "flex",
-      "flex": 1,
-      "flexDirection": "column",
-    }
-  }
->
-  <div
-    className="c0 container"
+    style="display: flex; flex-direction: column; flex: 1;"
   >
     <div
-      className="c1"
-    >
-      <img
-        alt="ACRO"
-        className="sponsor_img"
-        data-nimg="1"
-        decoding="async"
-        height={115}
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
-        srcSet="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
-        style={
-          {
-            "color": "transparent",
-            "objectFit": "contain",
-          }
-        }
-        width={235}
-      />
-      <div
-        className="c2"
-      >
-        structureTest
-      </div>
-      <a
-        className="btn dark"
-        href="/directory/structureId"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          className="me-2 icon"
-        >
-          <i
-            dangerouslySetInnerHTML={
-              {
-                "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-book-outline" fill="#fff"><g data-name="Layer 2"><g data-name="book"><rect width="24" height="24" opacity="0"/><path d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"/></g></g></svg>",
-              }
-            }
-            style={
-              {
-                "height": "20px",
-                "lineHeight": "20px",
-              }
-            }
-          />
-        </span>
-        Voir dans l'annuaire
-      </a>
-    </div>
-    <div
-      className="c3"
+      class="c0 container"
     >
       <div
-        className="c4"
+        class="c1"
       >
+        <img
+          alt="ACRO"
+          class="sponsor_img"
+          data-nimg="1"
+          decoding="async"
+          height="115"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=640&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=256&q=75 1x, /_next/image?url=%2Fimg.jpg&w=640&q=75 2x"
+          style="color: transparent; object-fit: contain;"
+          width="235"
+        />
         <div
-          className="c5"
+          class="c2"
         >
-          <div
-            className="c6"
-          >
-            Membres
-          </div>
-          <div
-            className="c7"
-          >
-            2
-          </div>
-          <div
-            className="c6"
-          />
-        </div>
-        <div>
-          <button
-            className="btn dark"
-            data-test-id="test-add-member"
-            onClick={[Function]}
-          >
-            <span
-              className="me-2 icon"
-            >
-              <i
-                dangerouslySetInnerHTML={
-                  {
-                    "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-person-add-outline" fill="#fff"><g data-name="Layer 2"><g data-name="person-add"><rect width="24" height="24" opacity="0"/><path d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"/><path d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"/><path d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"/></g></g></svg>",
-                  }
-                }
-                style={
-                  {
-                    "height": "20px",
-                    "lineHeight": "20px",
-                  }
-                }
-              />
-            </span>
-            Ajouter un membre
-          </button>
+          structureTest
         </div>
-      </div>
-      <div
-        className="table-responsive"
-      >
-        <table
-          className="table table-borderless"
+        <a
+          class="btn dark"
+          href="/directory/structureId"
         >
-          <thead>
-            <tr>
-              <th>
-                Nom
-              </th>
-              <th>
-                Role
-              </th>
-              <th>
-                Dernière connexion
-              </th>
-              <th>
-                Ajouté le
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              className="membres-table"
+          <span
+            class="me-2 icon"
+          >
+            <i
+              style="height: 20px; line-height: 20px;"
             >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
-                >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
-                  <div
-                    className="c9"
-                    isUser={true}
-                  >
-                    membre2
-                  </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
+              <svg
+                class="eva eva-book-outline"
+                fill="#fff"
+                height="20px"
+                viewBox="0 0 24 24"
+                width="20px"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  className="c10"
-                  isUser={true}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
+                <g
+                  data-name="Layer 2"
+                >
+                  <g
+                    data-name="book"
+                  >
+                    <rect
+                      height="24"
+                      opacity="0"
+                      width="24"
+                    />
+                    <path
+                      d="M19 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM7 5h11v10H7a3 3 0 0 0-1 .18V6a1 1 0 0 1 1-1zm0 14a1 1 0 0 1 0-2h11v2z"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </i>
+          </span>
+          Voir dans l'annuaire
+        </a>
+      </div>
+      <div
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <div
+            class="c5"
+          >
+            <div
+              class="c6"
+            >
+              Membres
+            </div>
+            <div
+              class="c7"
+            >
+              2
+            </div>
+            <div
+              class="c6"
+            />
+          </div>
+          <div>
+            <button
+              class="btn dark"
+              data-testid="test-add-member"
+            >
+              <span
+                class="me-2 icon"
               >
-                <div
-                  className="c11"
-                  isUser={true}
-                >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
+                <i
+                  style="height: 20px; line-height: 20px;"
+                >
+                  <svg
+                    class="eva eva-person-add-outline"
+                    fill="#fff"
+                    height="20px"
+                    viewBox="0 0 24 24"
+                    width="20px"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <g
+                      data-name="Layer 2"
+                    >
+                      <g
+                        data-name="person-add"
+                      >
+                        <rect
+                          height="24"
+                          opacity="0"
+                          width="24"
+                        />
+                        <path
+                          d="M21 6h-1V5a1 1 0 0 0-2 0v1h-1a1 1 0 0 0 0 2h1v1a1 1 0 0 0 2 0V8h1a1 1 0 0 0 0-2z"
+                        />
+                        <path
+                          d="M10 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z"
+                        />
+                        <path
+                          d="M10 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </i>
+              </span>
+              Ajouter un membre
+            </button>
+          </div>
+        </div>
+        <div
+          class="table-responsive"
+        >
+          <table
+            class="table table-borderless"
+          >
+            <thead>
+              <tr>
+                <th>
+                  Nom
+                </th>
+                <th>
+                  Role
+                </th>
+                <th>
+                  Dernière connexion
+                </th>
+                <th>
+                  Ajouté le
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                class="membres-table"
               >
-                <div
-                  className="c11"
-                  isUser={true}
-                />
-              </td>
-              <td
-                className="align-middle"
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c8"
+                  >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
+                    <div
+                      class="c9"
+                    >
+                      membre2
+                    </div>
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c10"
+                  >
+                    Rédacteur
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c11"
+                  >
+                    undefined undefined
+                  </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c11"
+                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    style="display: flex; flex-direction: row;"
+                  >
+                    <div
+                      class="c12"
+                      data-testid="edit-member-id2"
+                      hovercolor="#212121"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                    <div
+                      class="c13"
+                      data-testid="delete-button-id2"
+                      hovercolor="#f44336"
+                    >
+                      <div
+                        style="margin-bottom: 4px;"
+                      >
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="membres-table"
               >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    class="c8"
                   >
+                    <img
+                      alt=""
+                      class="user-img me-2"
+                      data-nimg="1"
+                      decoding="async"
+                      height="40"
+                      loading="lazy"
+                      src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+                      srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+                      style="color: transparent; object-fit: contain;"
+                      width="70"
+                    />
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c14"
                     >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                      membre1
                     </div>
                   </div>
+                </td>
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
+                    class="c15"
                   >
-                    <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
-                    >
-                      <span
-                        className="icon"
-                      >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
-                    </div>
+                    Rédacteur
                   </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              className="membres-table"
-            >
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c8"
-                >
-                  <img
-                    alt=""
-                    className="user-img me-2"
-                    data-nimg="1"
-                    decoding="async"
-                    height={40}
-                    loading="lazy"
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-                    srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-                    style={
-                      {
-                        "color": "transparent",
-                        "objectFit": "contain",
-                      }
-                    }
-                    width={70}
-                  />
+                </td>
+                <td
+                  class="align-middle"
+                >
                   <div
-                    className="c14"
-                    isUser={false}
+                    class="c16"
                   >
-                    membre1
+                    undefined undefined
                   </div>
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c15"
-                  isUser={false}
-                >
-                  Rédacteur
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                >
-                  undefined undefined
-                </div>
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  className="c16"
-                  isUser={false}
-                />
-              </td>
-              <td
-                className="align-middle"
-              >
-                <div
-                  style={
-                    {
-                      "display": "flex",
-                      "flexDirection": "row",
-                    }
-                  }
+                </td>
+                <td
+                  class="align-middle"
+                >
+                  <div
+                    class="c16"
+                  />
+                </td>
+                <td
+                  class="align-middle"
                 >
                   <div
-                    className="c12"
-                    hoverColor="#212121"
-                    onClick={[Function]}
+                    style="display: flex; flex-direction: row;"
                   >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c12"
+                      data-testid="edit-member-id1"
+                      hovercolor="#212121"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-edit" fill="#ffffff"><g data-name="Layer 2"><g data-name="edit"><rect width="24" height="24" opacity="0"/><path d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-edit"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="edit"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM16 10.68L13.32 8l1.95-2L18 8.73z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="c13"
-                    data-test-id="delete-button"
-                    disabled={false}
-                    hoverColor="#f44336"
-                    onClick={[Function]}
-                  >
                     <div
-                      style={
-                        {
-                          "marginBottom": "4px",
-                        }
-                      }
+                      class="c13"
+                      data-testid="delete-button-id1"
+                      hovercolor="#f44336"
                     >
-                      <span
-                        className="icon"
+                      <div
+                        style="margin-bottom: 4px;"
                       >
-                        <i
-                          dangerouslySetInnerHTML={
-                            {
-                              "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-trash" fill="#ffffff"><g data-name="Layer 2"><g data-name="trash"><rect width="24" height="24" opacity="0"/><path d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"/></g></g></svg>",
-                            }
-                          }
-                          style={
-                            {
-                              "height": "20px",
-                              "lineHeight": "20px",
-                            }
-                          }
-                        />
-                      </span>
+                        <span
+                          class="icon"
+                        >
+                          <i
+                            style="height: 20px; line-height: 20px;"
+                          >
+                            <svg
+                              class="eva eva-trash"
+                              fill="#ffffff"
+                              height="20px"
+                              viewBox="0 0 24 24"
+                              width="20px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <g
+                                data-name="Layer 2"
+                              >
+                                <g
+                                  data-name="trash"
+                                >
+                                  <rect
+                                    height="24"
+                                    opacity="0"
+                                    width="24"
+                                  />
+                                  <path
+                                    d="M21 6h-5V4.33A2.42 2.42 0 0 0 13.5 2h-3A2.42 2.42 0 0 0 8 4.33V6H3a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2zM10 4.33c0-.16.21-.33.5-.33h3c.29 0 .5.17.5.33V6h-4z"
+                                  />
+                                </g>
+                              </g>
+                            </svg>
+                          </i>
+                        </span>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div />
-    <div>
-      <div
-        className="c17"
-      >
-        <div
-          className="c18"
-        >
-          Modifier le rôle de
-        </div>
-        <img
-          alt=""
-          className="user_img me-2"
-          data-nimg="1"
-          decoding="async"
-          height={40}
-          loading="lazy"
-          onError={[Function]}
-          onLoad={[Function]}
-          src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
-          srcSet="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
-          style={
-            {
-              "color": "transparent",
-              "objectFit": "contain",
-            }
-          }
-          width={70}
-        />
-        <div
-          className="c19"
-        >
-          membre1
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
-      <div
-        className="c20"
-        data-test-id="test-role-Rédacteur"
-        onClick={[Function]}
-        state="none"
-      >
+      <div />
+      <div>
         <div
-          className="c21"
+          class="c17"
         >
           <div
-            className="c22"
+            class="c18"
           >
-            Nommer « rédacteur » 
+            Modifier le rôle de
           </div>
-          <span
-            className="icon"
+          <img
+            alt=""
+            class="user_img me-2"
+            data-nimg="1"
+            decoding="async"
+            height="40"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=256&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=96&q=75 1x, /_next/image?url=%2Fimg.jpg&w=256&q=75 2x"
+            style="color: transparent; object-fit: contain;"
+            width="70"
+          />
+          <div
+            class="c19"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-radio-button-off" fill="#212121"><g data-name="Layer 2"><g data-name="radio-button-off"><rect width="24" height="24" opacity="0"/><path d="M12 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10zm0-18a8 8 0 1 0 8 8 8 8 0 0 0-8-8z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
+            membre1
+          </div>
         </div>
-        Éditer et valider les fiches 
-        <br />
-        Accepter les fiches proposées à ma structure 
-        <br />
-        Voir les réactions aux fiches de ma structure 
-        <br />
-        Compléter la fiche annuaire de ma structure 
-        <br />
-      </div>
-      <div
-        className="c23"
-        data-test-id="test-role-Responsable"
-        onClick={[Function]}
-        state="selected"
-      >
         <div
-          className="c21"
+          class="c20"
+          data-testid="test-role-Rédacteur"
+          state="none"
         >
           <div
-            className="c22"
+            class="c21"
           >
-            Nommer « responsable »
+            <div
+              class="c22"
+            >
+              Nommer « rédacteur » 
+            </div>
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-radio-button-off"
+                  fill="#212121"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="radio-button-off"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M12 22a10 10 0 1 1 10-10 10 10 0 0 1-10 10zm0-18a8 8 0 1 0 8 8 8 8 0 0 0-8-8z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
           </div>
-          <span
-            className="icon"
-          >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-radio-button-on" fill="#ffffff"><g data-name="Layer 2"><g data-name="radio-button-on"><rect width="24" height="24" opacity="0"/><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-        </div>
-        Éditer et valider les fiches 
-        <br />
-        Accepter les fiches proposées à ma structure 
-        <br />
-        Voir les réactions aux fiches de ma structure 
-        <br />
-        Compléter la fiche annuaire de ma structure 
-        <br />
-        <span>
-          + Ajouter ou supprimer d'autres membres
+          Éditer et valider les fiches 
           <br />
-        </span>
-        <span>
-          + Nommer d'autres responsables
+          Accepter les fiches proposées à ma structure 
           <br />
-        </span>
-      </div>
-      <div
-        className="c24"
-      >
-        <button
-          className="btn outline-black me-2"
-          onClick={[Function]}
+          Voir les réactions aux fiches de ma structure 
+          <br />
+          Compléter la fiche annuaire de ma structure 
+          <br />
+        </div>
+        <div
+          class="c23"
+          data-testid="test-role-Responsable"
+          state="selected"
         >
-          <span
-            className="me-2 icon"
+          <div
+            class="c21"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#fff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
+            <div
+              class="c22"
+            >
+              Nommer « responsable »
+            </div>
+            <span
+              class="icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-radio-button-on"
+                  fill="#ffffff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="radio-button-on"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"
+                      />
+                      <path
+                        d="M12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+          </div>
+          Éditer et valider les fiches 
+          <br />
+          Accepter les fiches proposées à ma structure 
+          <br />
+          Voir les réactions aux fiches de ma structure 
+          <br />
+          Compléter la fiche annuaire de ma structure 
+          <br />
+          <span>
+            + Ajouter ou supprimer d'autres membres
+            <br />
           </span>
-          Annuler
-        </button>
-        <button
-          className="btn validate"
-          data-test-id="test-validate-edit"
-          disabled={false}
-          onClick={[Function]}
+          <span>
+            + Nommer d'autres responsables
+            <br />
+          </span>
+        </div>
+        <div
+          class="c24"
         >
-          <span
-            className="me-2 icon"
+          <button
+            class="btn outline-black me-2"
           >
-            <i
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" class="eva eva-checkmark-outline" fill="#fff"><g data-name="Layer 2"><g data-name="checkmark"><rect width="24" height="24" opacity="0"/><path d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"/></g></g></svg>",
-                }
-              }
-              style={
-                {
-                  "height": "20px",
-                  "lineHeight": "20px",
-                }
-              }
-            />
-          </span>
-          Valider
-        </button>
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-close-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="close"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        transform="rotate(180 12 12)"
+                        width="24"
+                      />
+                      <path
+                        d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Annuler
+          </button>
+          <button
+            class="btn validate"
+            data-testid="test-validate-edit"
+          >
+            <span
+              class="me-2 icon"
+            >
+              <i
+                style="height: 20px; line-height: 20px;"
+              >
+                <svg
+                  class="eva eva-checkmark-outline"
+                  fill="#fff"
+                  height="20px"
+                  viewBox="0 0 24 24"
+                  width="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g
+                    data-name="Layer 2"
+                  >
+                    <g
+                      data-name="checkmark"
+                    >
+                      <rect
+                        height="24"
+                        opacity="0"
+                        width="24"
+                      />
+                      <path
+                        d="M9.86 18a1 1 0 0 1-.73-.32l-4.86-5.17a1 1 0 1 1 1.46-1.37l4.12 4.39 8.41-9.2a1 1 0 1 1 1.48 1.34l-9.14 10a1 1 0 0 1-.73.33z"
+                      />
+                    </g>
+                  </g>
+                </svg>
+              </i>
+            </span>
+            Valider
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`UserStructure should render correctly when loading 1`] = `
@@ -3201,6 +3556,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   >
                     <div
                       class="c12"
+                      data-testid="edit-member-id2"
                       hovercolor="#212121"
                     >
                       <div
@@ -3243,7 +3599,7 @@ exports[`UserStructure should render correctly when structure with membres when
                     </div>
                     <div
                       class="c13"
-                      data-testid="delete-button"
+                      data-testid="delete-button-id2"
                       hovercolor="#f44336"
                     >
                       <div
@@ -3348,6 +3704,7 @@ exports[`UserStructure should render correctly when structure with membres when
                   >
                     <div
                       class="c12"
+                      data-testid="edit-member-id1"
                       hovercolor="#212121"
                     >
                       <div
@@ -3390,7 +3747,7 @@ exports[`UserStructure should render correctly when structure with membres when
                     </div>
                     <div
                       class="c13"
-                      data-testid="delete-button"
+                      data-testid="delete-button-id1"
                       hovercolor="#f44336"
                     >
                       <div
diff --git a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
index 22a65c5e33..797b4d8672 100644
--- a/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
+++ b/client/src/components/Backend/screens/UserStructure/components/MembresTable.tsx
@@ -100,14 +100,14 @@ export const MembresTable = (props: Props) => (
               <td className="align-middle">
                 <div style={{ display: "flex", flexDirection: "row" }}>
                   <EditButtonWithoutNavigation
-                    data-testid={"test_see_" + element.userId}
+                    testId={"edit-member-" + element.userId}
                     onClick={() => {
                       props.setSelectedUser(element);
                       props.toggleEditMemberModal();
                     }}
                   />
                   <DeleteButton
-                    data-testid={"test_delete_" + element.userId}
+                    testId={`delete-button-${element.userId}`}
                     disabled={false}
                     onClick={() => props.deleteUserFromStructure(element.userId)}
                   />

From eb8a9ae9fedf08bc89eb466b6eff4073c494a3f3 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 09:58:25 +0200
Subject: [PATCH 31/37] style(client): :lipstick: Fix :hover issue on some
 components

---
 .../src/components/Pages/dispositif/Accordions/Accordions.tsx | 2 +-
 .../components/Pages/recherche/ThemeDropdown/NeedsList.tsx    | 2 +-
 .../components/Pages/recherche/ThemeDropdown/ThemeButton.tsx  | 2 +-
 client/src/components/UI/DemarcheCard/DemarcheCard.tsx        | 2 +-
 .../src/components/UI/SearchThemeButton/SearchThemeButton.tsx | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Pages/dispositif/Accordions/Accordions.tsx b/client/src/components/Pages/dispositif/Accordions/Accordions.tsx
index 589d1217a9..71696dcacd 100644
--- a/client/src/components/Pages/dispositif/Accordions/Accordions.tsx
+++ b/client/src/components/Pages/dispositif/Accordions/Accordions.tsx
@@ -18,7 +18,7 @@ interface ColoredButtonProps {
 }
 
 const ColoredButton = styled(RSButton)<ColoredButtonProps>`
-  :hover,
+  &:hover,
   &.${styles.open} {
     background: ${(props) => props.$background} !important;
     border-color: ${(props) => props.$border};
diff --git a/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx b/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
index 21a52e183a..1912e36546 100644
--- a/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
+++ b/client/src/components/Pages/recherche/ThemeDropdown/NeedsList.tsx
@@ -25,7 +25,7 @@ type ButtonNeedProps = {
 const ButtonNeed = styled.button<ButtonNeedProps>`
   background-color: ${(props: ButtonNeedProps) => (props.selected ? props.color30 : "transparent")};
   color: ${(props: ButtonNeedProps) => props.color100};
-  :hover {
+  &:hover {
     background-color: ${(props: ButtonNeedProps) => props.color30};
   }
 `;
diff --git a/client/src/components/Pages/recherche/ThemeDropdown/ThemeButton.tsx b/client/src/components/Pages/recherche/ThemeDropdown/ThemeButton.tsx
index 97a19707c6..5e3cdc0ef6 100644
--- a/client/src/components/Pages/recherche/ThemeDropdown/ThemeButton.tsx
+++ b/client/src/components/Pages/recherche/ThemeDropdown/ThemeButton.tsx
@@ -24,7 +24,7 @@ const ButtonTheme = styled.button<ButtonThemeProps>`
     color: white !important;
     ${(props) => (props.$selected ? "border-color: white !important;" : "")}
 
-    :hover {
+    &:hover {
       background-color: transparent;
     }
   }
diff --git a/client/src/components/UI/DemarcheCard/DemarcheCard.tsx b/client/src/components/UI/DemarcheCard/DemarcheCard.tsx
index f7c0d483fa..d382202a01 100644
--- a/client/src/components/UI/DemarcheCard/DemarcheCard.tsx
+++ b/client/src/components/UI/DemarcheCard/DemarcheCard.tsx
@@ -25,7 +25,7 @@ type DemarcheLinkProps = {
   $border: string;
 };
 const DemarcheLink = styled(Link)<DemarcheLinkProps>`
-  :hover,
+  &:hover,
   .${commonStyles.favorite}:hover + & {
     background-color: ${(props) => props.$background} !important;
     border-color: ${(props) => props.$border} !important;
diff --git a/client/src/components/UI/SearchThemeButton/SearchThemeButton.tsx b/client/src/components/UI/SearchThemeButton/SearchThemeButton.tsx
index 9cbdf436e6..55b1882e99 100644
--- a/client/src/components/UI/SearchThemeButton/SearchThemeButton.tsx
+++ b/client/src/components/UI/SearchThemeButton/SearchThemeButton.tsx
@@ -16,7 +16,7 @@ type ThemeButtonProps = {
 const ThemeButton = styled.button<ThemeButtonProps>`
   background: ${(props) => `linear-gradient(90deg, ${props.$color100} 22%, ${props.$color80} 100%)`};
 
-  :hover {
+  &:hover {
     background: ${(props) => props.$color30};
     box-shadow: 0 0 0 1px ${(props) => props.$color100}, 0 0 40px 0 #00000040;
     color: ${(props) => props.$color100} !important;
@@ -26,7 +26,7 @@ const ThemeButton = styled.button<ThemeButtonProps>`
 const ThemeLink = styled(Link)<ThemeButtonProps>`
   background: ${(props) => `linear-gradient(90deg, ${props.$color100} 22%, ${props.$color80} 100%)`} !important;
 
-  :hover {
+  &:hover {
     background: ${(props) => props.$color30} !important;
     box-shadow: 0 0 0 1px ${(props) => props.$color100}, 0 0 40px 0 #00000040;
     color: ${(props) => props.$color100} !important;

From 673cb5b601ba182a14af7d80e6a3cd196afc8217 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 09:58:49 +0200
Subject: [PATCH 32/37] test(client): :white_check_mark: Update snapshots

---
 .../__snapshots__/index.test.tsx.snap         | 56 +++++++++----------
 .../__snapshots__/recherche.test.tsx.snap     | 28 +++++-----
 .../UserFavorites.component.test.tsx.snap     |  2 +-
 3 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/client/src/__tests__/__snapshots__/index.test.tsx.snap b/client/src/__tests__/__snapshots__/index.test.tsx.snap
index 5af6c5f9c8..b168e002b2 100644
--- a/client/src/__tests__/__snapshots__/index.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`homepage renders homepage 1`] = `
   color: #443023;
 }
 
-.c13 :hover {
+.c13:hover {
   background-color: #EEE7E5;
 }
 
@@ -145,7 +145,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #443023 22%, #715F56 100%);
 }
 
-.c14 :hover {
+.c14:hover {
   background: #EEE7E5;
   box-shadow: 0 0 0 1px #443023,0 0 40px 0 #00000040;
   color: #443023!important;
@@ -155,7 +155,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #3D2884 22%, #705FA4 100%);
 }
 
-.c15 :hover {
+.c15:hover {
   background: #EFE8F4;
   box-shadow: 0 0 0 1px #3D2884,0 0 40px 0 #00000040;
   color: #3D2884!important;
@@ -165,7 +165,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #095411 22%, #26B759 100%);
 }
 
-.c16 :hover {
+.c16:hover {
   background: #E8F4E8;
   box-shadow: 0 0 0 1px #095411,0 0 40px 0 #00000040;
   color: #095411!important;
@@ -175,7 +175,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #055E5A 22%, #27A8A5 100%);
 }
 
-.c17 :hover {
+.c17:hover {
   background: #EDFDF9;
   box-shadow: 0 0 0 1px #055E5A,0 0 40px 0 #00000040;
   color: #055E5A!important;
@@ -185,7 +185,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #06508C 22%, #1E9ED1 100%);
 }
 
-.c18 :hover {
+.c18:hover {
   background: #DDF2F9;
   box-shadow: 0 0 0 1px #06508C,0 0 40px 0 #00000040;
   color: #06508C!important;
@@ -195,7 +195,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #910940 22%, #D64B71 100%);
 }
 
-.c19 :hover {
+.c19:hover {
   background: #FFEDED;
   box-shadow: 0 0 0 1px #910940,0 0 40px 0 #00000040;
   color: #910940!important;
@@ -205,7 +205,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #CD5605 22%, #F97319 100%);
 }
 
-.c20 :hover {
+.c20:hover {
   background: #FEEBDE;
   box-shadow: 0 0 0 1px #CD5605,0 0 40px 0 #00000040;
   color: #CD5605!important;
@@ -215,7 +215,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #770649 22%, #D01F67 100%);
 }
 
-.c21 :hover {
+.c21:hover {
   background: #FFEAF4;
   box-shadow: 0 0 0 1px #770649,0 0 40px 0 #00000040;
   color: #770649!important;
@@ -225,7 +225,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #204F01 22%, #47AA0A 100%);
 }
 
-.c22 :hover {
+.c22:hover {
   background: #F2F9E5;
   box-shadow: 0 0 0 1px #204F01,0 0 40px 0 #00000040;
   color: #204F01!important;
@@ -235,7 +235,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #073099 22%, #1C66DD 100%);
 }
 
-.c23 :hover {
+.c23:hover {
   background: #EEF8FF;
   box-shadow: 0 0 0 1px #073099,0 0 40px 0 #00000040;
   color: #073099!important;
@@ -245,7 +245,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #600566 22%, #9E2DAD 100%);
 }
 
-.c24 :hover {
+.c24:hover {
   background: #F9F1FD;
   box-shadow: 0 0 0 1px #600566,0 0 40px 0 #00000040;
   color: #600566!important;
@@ -255,7 +255,7 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #9E180A 22%, #E05A3E 100%);
 }
 
-.c25 :hover {
+.c25:hover {
   background: #F9E8E8;
   box-shadow: 0 0 0 1px #9E180A,0 0 40px 0 #00000040;
   color: #9E180A!important;
@@ -265,13 +265,13 @@ exports[`homepage renders homepage 1`] = `
   background: linear-gradient(90deg, #77057A 22%, #9E2DAD 100%);
 }
 
-.c26 :hover {
+.c26:hover {
   background: #FDC4FC;
   box-shadow: 0 0 0 1px #77057A,0 0 40px 0 #00000040;
   color: #77057A!important;
 }
 
-.c27 :hover,
+.c27:hover,
 .favorite:hover+.c27 {
   background-color: #EEEEEE!important;
   border-color: #3A3A3A!important;
@@ -292,7 +292,7 @@ exports[`homepage renders homepage 1`] = `
     border-color: white!important;
   }
 
-  .c0 :hover {
+  .c0:hover {
     background-color: transparent;
   }
 }
@@ -303,7 +303,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c1 :hover {
+  .c1:hover {
     background-color: transparent;
   }
 }
@@ -314,7 +314,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c2 :hover {
+  .c2:hover {
     background-color: transparent;
   }
 }
@@ -325,7 +325,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c3 :hover {
+  .c3:hover {
     background-color: transparent;
   }
 }
@@ -336,7 +336,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c4 :hover {
+  .c4:hover {
     background-color: transparent;
   }
 }
@@ -347,7 +347,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c5 :hover {
+  .c5:hover {
     background-color: transparent;
   }
 }
@@ -358,7 +358,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c6 :hover {
+  .c6:hover {
     background-color: transparent;
   }
 }
@@ -369,7 +369,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c7 :hover {
+  .c7:hover {
     background-color: transparent;
   }
 }
@@ -380,7 +380,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c8 :hover {
+  .c8:hover {
     background-color: transparent;
   }
 }
@@ -391,7 +391,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c9 :hover {
+  .c9:hover {
     background-color: transparent;
   }
 }
@@ -402,7 +402,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c10 :hover {
+  .c10:hover {
     background-color: transparent;
   }
 }
@@ -413,7 +413,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c11 :hover {
+  .c11:hover {
     background-color: transparent;
   }
 }
@@ -424,7 +424,7 @@ exports[`homepage renders homepage 1`] = `
     color: white!important;
   }
 
-  .c12 :hover {
+  .c12:hover {
     background-color: transparent;
   }
 }
diff --git a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
index 2684c3a8e1..420ea7f575 100644
--- a/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
+++ b/client/src/__tests__/__snapshots__/recherche.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`recherche renders search results 1`] = `
   color: #3D2884;
 }
 
-.c13 :hover {
+.c13:hover {
   background-color: #EFE8F4;
 }
 
@@ -147,7 +147,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c0 :hover {
+  .c0:hover {
     background-color: transparent;
   }
 }
@@ -159,7 +159,7 @@ exports[`recherche renders search results 1`] = `
     border-color: white!important;
   }
 
-  .c1 :hover {
+  .c1:hover {
     background-color: transparent;
   }
 }
@@ -170,7 +170,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c2 :hover {
+  .c2:hover {
     background-color: transparent;
   }
 }
@@ -181,7 +181,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c3 :hover {
+  .c3:hover {
     background-color: transparent;
   }
 }
@@ -192,7 +192,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c4 :hover {
+  .c4:hover {
     background-color: transparent;
   }
 }
@@ -203,7 +203,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c5 :hover {
+  .c5:hover {
     background-color: transparent;
   }
 }
@@ -214,7 +214,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c6 :hover {
+  .c6:hover {
     background-color: transparent;
   }
 }
@@ -225,7 +225,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c7 :hover {
+  .c7:hover {
     background-color: transparent;
   }
 }
@@ -236,7 +236,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c8 :hover {
+  .c8:hover {
     background-color: transparent;
   }
 }
@@ -247,7 +247,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c9 :hover {
+  .c9:hover {
     background-color: transparent;
   }
 }
@@ -258,7 +258,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c10 :hover {
+  .c10:hover {
     background-color: transparent;
   }
 }
@@ -269,7 +269,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c11 :hover {
+  .c11:hover {
     background-color: transparent;
   }
 }
@@ -280,7 +280,7 @@ exports[`recherche renders search results 1`] = `
     color: white!important;
   }
 
-  .c12 :hover {
+  .c12:hover {
     background-color: transparent;
   }
 }
diff --git a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
index 63951f7102..f6ea0c4928 100644
--- a/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
+++ b/client/src/components/Backend/screens/UserFavorites/__tests__/__snapshots__/UserFavorites.component.test.tsx.snap
@@ -348,7 +348,7 @@ exports[`UserFavorites should render correctly when 3 favorites 1`] = `
   margin-bottom: 8px;
 }
 
-.c5 :hover,
+.c5:hover,
 .favorite:hover+.c5 {
   background-color: #DDF2F9!important;
   border-color: #06508C!important;

From 3932b356ed0d54f16afd451630575850467f0d36 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 11:25:38 +0200
Subject: [PATCH 33/37] chore(client): :lipstick: Reintroduce and configure
 typescript-plugin-css-modules.  Update .scss imports

---
 client/package.json                           |   3 +-
 .../BackendNavItem/BackendNavItem.module.scss |  10 +-
 .../Backend/screens/Admin/Admin.module.scss   |   4 +-
 .../ChangeStructureModale.module.scss         |   4 +-
 .../ContentDetailsModal.module.scss           |   7 +-
 .../ImprovementsMailModal.module.scss         |   6 +-
 .../NeedsChoiceModal.module.scss              |   4 +-
 .../NewStructureModal.module.scss             |   8 +-
 .../SelectFirstResponsableModal.module.scss   |   4 +-
 .../StructureDetailsModal.module.scss         |   4 +-
 .../UserDetailsModal.module.scss              |   4 +-
 .../AdminUsersComponent.module.scss           |   4 +-
 .../screens/Admin/Logs/LogLine.module.scss    |   6 +-
 .../screens/Admin/Logs/LogList.module.scss    |   4 +-
 .../Admin/Needs/NeedFormModal.module.scss     |   4 +-
 .../screens/Admin/Needs/Needs.module.scss     |   6 +-
 .../Admin/Needs/ThemeFormModal.module.scss    |   6 +-
 .../EditWidgetModal.module.scss               |   5 +-
 .../screens/Admin/Widgets/Widgets.module.scss |   4 +-
 .../Widgets/components/WidgetLine.module.scss |   4 +-
 .../sharedComponents/DetailsModal.module.scss |   9 +-
 .../sharedComponents/NotesInput.module.scss   |   6 +-
 .../SmallDispositif.module.scss               |   4 +-
 .../UserFavorites/UserFavorites.module.scss   |   4 +-
 .../UserProfile/UserProfile.module.scss       |   4 +-
 .../EditAvatar/EditAvatar.module.scss         |  12 +-
 .../EditButton/EditButton.module.scss         |  12 +-
 .../LanguageBadge/LanguageBadge.module.scss   |  12 +-
 .../components/Tag/Tag.module.scss            |  12 +-
 .../components/MemberModal.module.scss        |  30 +--
 .../UserStructureLoading.module.scss          |   2 +-
 .../UserTranslation.module.scss               |   2 +-
 .../OneNeedTranslationModal.module.scss       |  10 +-
 .../components/SubComponents.module.scss      |   4 +-
 ...ranslationLanguagesChoiceModal.module.scss |   2 +-
 .../NeedButton/NeedButton.module.scss         |   8 +-
 .../TranslationNeedsList.module.scss          |   6 +-
 .../Content/Dispositif/Dispositif.module.scss |   8 +-
 .../RightSidebar/RightSidebar.module.scss     |   6 +-
 .../DispositifTranslate.module.scss           |   8 +-
 .../Content/ThemesGrid/ThemesGrid.module.scss |  12 +-
 .../Layout/AppLoader/AppLoader.module.scss    |   4 +-
 .../DownloadAppBanner.module.scss             |   4 +-
 .../src/components/Layout/Layout.module.scss  |   2 +-
 .../BookmarkedModal.module.scss               |   6 +-
 .../DownloadAppModal/DownloadApp.module.scss  |   4 +-
 .../Modals/FrameModal/FrameModal.module.scss  |   4 +-
 .../LanguageModal/LanguageModal.module.scss   |   6 +-
 .../MobileModal/MobileModal.module.scss       |   6 +-
 client/src/components/Modals/Modal.scss       |   6 +-
 .../ReactionLectureModal.module.scss          |   4 +-
 .../RejectionModal/RejectionModal.module.scss |   4 +-
 .../ResponsableModal.module.scss              |   4 +-
 .../WriteContentCard.module.scss              |   8 +-
 .../WriteContentModal.module.scss             |  10 +-
 .../SpeekToolItem/SpeekToolItem.module.scss   |   2 +-
 .../UnauthorizedAccess.module.scss            |   2 +-
 .../CustomCheckBox.module.scss                |   7 +-
 .../id/LeftAnnuaireDetail.module.scss         |   4 +-
 .../id/MiddleAnnuaireDetails.module.scss      |   4 +-
 .../id/RightAnnuaireDetails.module.scss       |   6 +-
 .../annuaire/id/StructureType.module.scss     |   4 +-
 .../Pages/annuaire/index/Header.module.scss   |   2 +-
 .../annuaire/index/LetterSection.module.scss  |   4 +-
 .../index/SearchBarAnnuaire.module.scss       |   7 +-
 .../Pages/auth/Layout/Layout.module.scss      |   6 +-
 .../Pages/auth/Loader/Loader.module.scss      |   2 +-
 .../PartnerRadio/PartnerRadio.module.scss     |   4 +-
 .../AccordionBadge/AccordionBadge.module.scss |  12 +-
 .../Accordions/Accordions.module.scss         |  12 +-
 .../ActionButtons/ActionButtons.module.scss   |   6 +-
 .../ReadLanguageModal.module.scss             |   2 +-
 .../SendSMSModal/SendSMSModal.module.scss     |  12 +-
 .../dispositif/Banner/Banner.module.scss      |  12 +-
 .../Banner/EditModal/EditModal.module.scss    |  10 +-
 .../Breadcrumb/Breadcrumb.module.scss         |  10 +-
 .../ContributorCard.module.scss               |   8 +-
 .../Contributors/Contributors.module.scss     |  10 +-
 .../AccordionItem/AccordionItem.module.scss   |  16 +-
 .../AccordionsEdit/AccordionsEdit.module.scss |  14 +-
 .../AddContentButton.module.scss              |  12 +-
 .../DeleteContentModal.module.scss            |  10 +-
 .../ChoiceButton/ChoiceButton.module.scss     |  14 +-
 .../CustomNavbar/CustomNavbar.module.scss     |  16 +-
 .../BubbleFlags/BubbleFlags.module.scss       |   8 +-
 .../CompleteContent.module.scss               |   8 +-
 .../PublicationSteps.module.scss              |   8 +-
 .../MissingContent/MissingContent.module.scss |   8 +-
 .../PublishModal/PublishModal.module.scss     |   8 +-
 .../QuitModal/QuitModal.module.scss           |  10 +-
 .../CompleteContent.module.scss               |   8 +-
 .../NotationForm/NotationForm.module.scss     |   8 +-
 .../NotationInput/NotationInput.module.scss   |   8 +-
 .../PublishModal/PublishModal.module.scss     |   8 +-
 .../QuitModal/QuitModal.module.scss           |  10 +-
 .../MissingSteps/MissingSteps.module.scss     |  10 +-
 .../SaveErrorModal/SaveErrorModal.module.scss |   8 +-
 .../CustomNavbar/StepBar/StepBar.module.scss  |  10 +-
 .../DropdownModals/DropdownModals.module.scss |   8 +-
 .../Edition/HelpCard/HelpCard.module.scss     |  10 +-
 .../LeftSidebarEdition.module.scss            |   8 +-
 .../Edition/LogoInput/LogoInput.module.scss   |  10 +-
 .../DeleteModal/DeleteModal.module.scss       |  10 +-
 .../Edition/MapEdit/Header/Header.module.scss |  10 +-
 .../Edition/MapEdit/MapEdit.module.scss       |  14 +-
 .../MapEdit/PoiForm/PoiForm.module.scss       |  12 +-
 .../MapEdit/Sidebar/Sidebar.module.scss       |  12 +-
 .../ModalAbstract/ModalAbstract.module.scss   |  10 +-
 .../ModalAccordionsCount.module.scss          |   8 +-
 .../ModalAvailability.module.scss             |   8 +-
 .../ModalConditions.module.scss               |   8 +-
 .../DepartmentInput.module.scss               |  10 +-
 .../ModalLocation/ModalLocation.module.scss   |   8 +-
 .../AuthorContact/AuthorContact.module.scss   |  10 +-
 .../ChooseStructure.module.scss               |  10 +-
 .../CreateStructure.module.scss               |  10 +-
 .../MemberOfStructure.module.scss             |  10 +-
 .../ModalMainSponsor.module.scss              |   8 +-
 .../SearchStructure.module.scss               |  10 +-
 .../StructureContact.module.scss              |  10 +-
 .../ThanksMessage/ThanksMessage.module.scss   |  10 +-
 .../Modals/ModalPrice/ModalPrice.module.scss  |  10 +-
 .../ModalPublic/ModalPublic.module.scss       |   8 +-
 .../ModalSponsors/ModalSponsors.module.scss   |   8 +-
 .../ModalThemes/ModalThemes.module.scss       |  10 +-
 .../ThemeSelectButton.module.scss             |  10 +-
 .../ModalWelcome/ModalWelcome.module.scss     |   8 +-
 .../TextExample/TextExample.module.scss       |  10 +-
 .../TextExampleLine.module.scss               |   6 +-
 .../InlineForm/InlineForm.module.scss         |  10 +-
 .../RemovableItem/RemovableItem.module.scss   |   8 +-
 .../SponsorForm/SponsorForm.module.scss       |   8 +-
 .../StepsFooter/Steps/Steps.module.scss       |  10 +-
 .../RichTextEdit/RichTextEdit.module.scss     |  12 +-
 .../RightSidebarEdition.module.scss           |   6 +-
 .../DeleteContentModal.module.scss            |  10 +-
 .../SponsorsEdit/SponsorsEdit.module.scss     |  10 +-
 .../Edition/TitleEdit/TitleEdit.module.scss   |  14 +-
 .../dispositif/Feedback/Feedback.module.scss  |  12 +-
 .../dispositif/Header/Header.module.scss      |  10 +-
 .../Pages/dispositif/Input/Input.module.scss  |  12 +-
 .../LangueMenu/LangueMenu.module.scss         |  10 +-
 .../LangueSelectList.module.scss              |   6 +-
 .../LinkedThemes/LinkedThemes.module.scss     |  10 +-
 .../Pages/dispositif/Map/Map.module.scss      |  14 +-
 .../Map/PopupContent/PopupContent.module.scss |   8 +-
 .../Map/Sidebar/Sidebar.module.scss           |  12 +-
 .../Metadatas/BaseCard/BaseCard.module.scss   |  12 +-
 .../CardAvailability.module.scss              |  12 +-
 .../CardConditions/CardConditions.module.scss |  12 +-
 .../CardLocation/CardLocation.module.scss     |  12 +-
 .../CardMainSponsor.module.scss               |  14 +-
 .../DeleteContentModal.module.scss            |  10 +-
 .../Metadatas/CardPrice/CardPrice.module.scss |  12 +-
 .../CardPublic/CardPublic.module.scss         |  12 +-
 .../Metadatas/CardTheme/CardTheme.module.scss |  12 +-
 .../Metadatas/Metadatas.module.scss           |  10 +-
 .../dispositif/RichText/RichText.module.scss  |  12 +-
 .../dispositif/SMSForm/SMSForm.module.scss    |  10 +-
 .../dispositif/Section/Section.module.scss    |  10 +-
 .../ReactionModal/ReactionModal.module.scss   |   8 +-
 .../SectionButtons/SectionButtons.module.scss |  14 +-
 .../SectionTitle/SectionTitle.module.scss     |   8 +-
 .../ShareButtons/ShareButtons.module.scss     |  10 +-
 .../dispositif/Sponsors/Sponsors.module.scss  |  12 +-
 .../dispositif/Status/Status.module.scss      |   6 +-
 .../StructureReceiveDispositif.module.scss    |  10 +-
 .../dispositif/Summary/Summary.module.scss    |  12 +-
 .../Pages/dispositif/Text/Text.module.scss    |  10 +-
 .../Pages/dispositif/Title/Title.module.scss  |  10 +-
 .../ModalWelcome/ModalWelcome.module.scss     |   8 +-
 .../SectionTitleAbstract.module.scss          |   8 +-
 .../BottomButtons/BottomButtons.module.scss   |   6 +-
 .../SuggestionsNavButtons.module.scss         |  10 +-
 .../TranslationEditAuthor.module.scss         |   8 +-
 .../TranslationEditField.module.scss          |   6 +-
 .../TranslationInput.module.scss              |  14 +-
 .../TranslationStatus.module.scss             |  12 +-
 .../UserSuggest/UserSuggest.module.scss       |  12 +-
 .../embed/EmbedHeader/EmbedHeader.module.scss |  10 +-
 .../CommunityCard/CommunityCard.module.scss   |  12 +-
 .../HomeSearchHeader.desktop.module.scss      |  14 +-
 .../HomeSearchHeader.mobile.module.scss       |  12 +-
 .../Sections/AllThemes/AllThemes.module.scss  |   6 +-
 .../Sections/Community/Community.module.scss  |   4 +-
 .../Sections/HelpUs/HelpUs.module.scss        |   8 +-
 .../homepage/Sections/Hero/Hero.module.scss   |   6 +-
 .../homepage/Sections/Infos/Infos.module.scss |   8 +-
 .../LanguageDropdown.module.scss              |  12 +-
 .../Sections/MobileApp/MobileApp.module.scss  |  12 +-
 .../MobileAppIllu/MobileAppIllu.module.scss   |  12 +-
 .../MobileAppSmsForm.module.scss              |  12 +-
 .../NewContent/NewContent.module.scss         |   6 +-
 .../Pages/qui-sommes-nous/Team.module.scss    |   4 +-
 .../CardSlider/CardSlider.module.scss         |  12 +-
 .../DispositifCardTitle.module.scss           |   2 +-
 .../DropdownMenuMobile.module.scss            |  14 +-
 .../LocationDropdown.module.scss              |  14 +-
 .../NotDeployedBanner.module.scss             |  10 +-
 .../ResultsFilter/ResultsFilter.module.scss   |  12 +-
 .../SearchHeader.desktop.module.scss          |  14 +-
 .../SearchHeader.mobile.module.scss           |  12 +-
 .../SearchHeader/SearchHeader.module.scss     |  12 +-
 .../SearchInput/SearchInput.module.scss       |  14 +-
 .../SearchResults/SearchResults.module.scss   |  12 +-
 .../SecondaryFilter.desktop.module.scss       |  12 +-
 .../SecondaryFilter.mobile.module.scss        |  12 +-
 .../SeeMoreButton/SeeMoreButton.module.scss   |   8 +-
 .../ThemeDropdown/ThemeDropdown.module.scss   |  14 +-
 .../common/Accordion/Accordion.module.scss    |  12 +-
 .../AutoplayVideo/AutoplayVideo.module.scss   |  12 +-
 .../staticPages/common/Card/Card.module.scss  |  12 +-
 .../CountUpFigure/CountUpFigure.module.scss   |  12 +-
 .../common/HeroArrow/HeroArrow.module.scss    |  12 +-
 .../common/InlineLink/InlineLink.module.scss  |  14 +-
 .../LanguageIcon/LanguageIcon.module.scss     |  12 +-
 .../common/Register/Register.module.scss      |  12 +-
 .../SecondaryNavbar.module.scss               |  12 +-
 .../StepContent/StepContent.module.scss       |  12 +-
 .../CardExample/CardExample.module.scss       |  12 +-
 .../TestimonyAuthor.module.scss               |  12 +-
 .../TestimonySlider.module.scss               |  12 +-
 .../LanguageCard/LanguageCard.module.scss     |  12 +-
 .../AdminNeedButton.module.scss               |  10 +-
 .../AdminThemeButton.module.scss              |   6 +-
 .../src/components/UI/Badge/Badge.module.scss |   8 +-
 .../UI/BaseModal/BaseModal.module.scss        |   8 +-
 .../UI/BubbleFlag/BubbleFlag.module.scss      |   8 +-
 .../components/UI/Button/Button.module.scss   |   8 +-
 .../UI/Camembert/Camembert.module.scss        |   8 +-
 .../UI/Checkbox/Checkbox.module.scss          |  10 +-
 .../ContentSlider/ContentSlider.module.scss   |  12 +-
 .../CustomSearchBar.module.scss               |   8 +-
 .../UI/DemarcheCard/DemarcheCard.module.scss  |  13 +-
 .../DispositifCard/DispositifCard.module.scss |  12 +-
 .../components/UI/FButton/FButton.module.scss |   8 +-
 .../FButtonMobile/FButtonMobile.module.scss   |   8 +-
 .../components/UI/FInput/FInput.module.scss   |   2 +-
 .../components/UI/FRLink/FRLink.module.scss   |   4 +-
 .../UI/FSearchBtn/FSearchBtn.module.scss      |   6 +-
 .../FavoriteButton/FavoriteButton.module.scss |  10 +-
 .../UI/FilterButton/FilterButton.module.scss  |   6 +-
 .../src/components/UI/Flag/Flag.module.scss   |   2 +-
 .../UI/ImageInput/ImageInput.module.scss      |   9 +-
 .../src/components/UI/Input/Input.module.scss |  12 +-
 .../UI/RichCheckbox/RichCheckbox.module.scss  |   4 +-
 .../RichTextInput/RichTextInput.module.scss   |  12 +-
 .../ToolbarButton/ToolbarButton.module.scss   |   6 +-
 .../ToolbarDropdown.module.scss               |   4 +-
 .../ToolbarPlugin/ToolbarPlugin.module.scss   |   4 +-
 .../FloatinLinkEditorPlugin.module.scss       |   8 +-
 .../components/UI/SearchBar/SearchBar.scss    |   6 +-
 .../SearchStructureResult.module.scss         |  10 +-
 .../SearchThemeButton.module.scss             |  12 +-
 .../components/UI/TagName/TagName.module.scss |  10 +-
 .../UI/ThemeBadge/ThemeBadge.module.scss      |  12 +-
 .../UI/ThemeIcon/ThemeIcon.module.scss        |   6 +-
 .../src/components/UI/Toast/Toast.module.scss |   8 +-
 .../components/UI/Tooltip/Tooltip.module.scss |   8 +-
 .../components/UI/Warning/Warning.module.scss |  12 +-
 .../EditDepartments.module.scss               |  12 +-
 .../ForgotPassword/ForgotPassword.module.scss |  14 +-
 .../ForgotPasswordMailSent.module.scss        |  14 +-
 client/tsconfig.json                          |   4 +
 yarn.lock                                     | 230 +++++++++++++++++-
 265 files changed, 1385 insertions(+), 1177 deletions(-)

diff --git a/client/package.json b/client/package.json
index d42475a2c1..bff33ed2f3 100644
--- a/client/package.json
+++ b/client/package.json
@@ -134,7 +134,8 @@
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
     "ts-jest": "29.2.2",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.3",
+    "typescript-plugin-css-modules": "^5.1.0"
   },
   "volta": {
     "node": "20.13.1",
diff --git a/client/src/components/Backend/Navigation/BackendNavItem/BackendNavItem.module.scss b/client/src/components/Backend/Navigation/BackendNavItem/BackendNavItem.module.scss
index 86f93b7235..358c24d9d6 100644
--- a/client/src/components/Backend/Navigation/BackendNavItem/BackendNavItem.module.scss
+++ b/client/src/components/Backend/Navigation/BackendNavItem/BackendNavItem.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
 
 .item {
   @include ml-ltr(u(2));
diff --git a/client/src/components/Backend/screens/Admin/Admin.module.scss b/client/src/components/Backend/screens/Admin/Admin.module.scss
index df234f2c2b..4e9af5490f 100644
--- a/client/src/components/Backend/screens/Admin/Admin.module.scss
+++ b/client/src/components/Backend/screens/Admin/Admin.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .admin {
   display: flex;
diff --git a/client/src/components/Backend/screens/Admin/AdminContenu/ChangeStructureModale/ChangeStructureModale.module.scss b/client/src/components/Backend/screens/Admin/AdminContenu/ChangeStructureModale/ChangeStructureModale.module.scss
index e1e7b7e4be..83d7e023a3 100644
--- a/client/src/components/Backend/screens/Admin/AdminContenu/ChangeStructureModale/ChangeStructureModale.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminContenu/ChangeStructureModale/ChangeStructureModale.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   .modal_content {
diff --git a/client/src/components/Backend/screens/Admin/AdminContenu/ContentDetailsModal/ContentDetailsModal.module.scss b/client/src/components/Backend/screens/Admin/AdminContenu/ContentDetailsModal/ContentDetailsModal.module.scss
index c889df33a9..e473960bdd 100644
--- a/client/src/components/Backend/screens/Admin/AdminContenu/ContentDetailsModal/ContentDetailsModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminContenu/ContentDetailsModal/ContentDetailsModal.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/responsive";
 
 .creator_img {
   max-width: 70px;
@@ -53,7 +53,6 @@
   height: 435px;
 }
 
-
 .white_container {
   display: flex;
   align-items: center;
diff --git a/client/src/components/Backend/screens/Admin/AdminContenu/ImprovementsMailModal/ImprovementsMailModal.module.scss b/client/src/components/Backend/screens/Admin/AdminContenu/ImprovementsMailModal/ImprovementsMailModal.module.scss
index 52488b6921..b5dbb19ef0 100644
--- a/client/src/components/Backend/screens/Admin/AdminContenu/ImprovementsMailModal/ImprovementsMailModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminContenu/ImprovementsMailModal/ImprovementsMailModal.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/responsive";
 
 .text {
   margin-bottom: 0;
diff --git a/client/src/components/Backend/screens/Admin/AdminContenu/NeedsChoiceModal/NeedsChoiceModal.module.scss b/client/src/components/Backend/screens/Admin/AdminContenu/NeedsChoiceModal/NeedsChoiceModal.module.scss
index 4802eb04ab..ff80239d04 100644
--- a/client/src/components/Backend/screens/Admin/AdminContenu/NeedsChoiceModal/NeedsChoiceModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminContenu/NeedsChoiceModal/NeedsChoiceModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .column {
   background: $white;
diff --git a/client/src/components/Backend/screens/Admin/AdminStructures/NewStructureModal/NewStructureModal.module.scss b/client/src/components/Backend/screens/Admin/AdminStructures/NewStructureModal/NewStructureModal.module.scss
index 7601ea3f74..d02bc6d025 100644
--- a/client/src/components/Backend/screens/Admin/AdminStructures/NewStructureModal/NewStructureModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminStructures/NewStructureModal/NewStructureModal.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .modal {
   .modal_content {
diff --git a/client/src/components/Backend/screens/Admin/AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal.module.scss b/client/src/components/Backend/screens/Admin/AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal.module.scss
index 681daec09c..e4efa9c6f2 100644
--- a/client/src/components/Backend/screens/Admin/AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminStructures/SelectFirstResponsableModal/SelectFirstResponsableModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   .modal_content {
diff --git a/client/src/components/Backend/screens/Admin/AdminStructures/StructureDetailsModal/StructureDetailsModal.module.scss b/client/src/components/Backend/screens/Admin/AdminStructures/StructureDetailsModal/StructureDetailsModal.module.scss
index 0d534ae0bf..fafbae48cb 100644
--- a/client/src/components/Backend/screens/Admin/AdminStructures/StructureDetailsModal/StructureDetailsModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminStructures/StructureDetailsModal/StructureDetailsModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 $containerHeight: 435px;
 
diff --git a/client/src/components/Backend/screens/Admin/AdminUsers/UserDetailsModal/UserDetailsModal.module.scss b/client/src/components/Backend/screens/Admin/AdminUsers/UserDetailsModal/UserDetailsModal.module.scss
index 903b3fd24d..190ec1bbe1 100644
--- a/client/src/components/Backend/screens/Admin/AdminUsers/UserDetailsModal/UserDetailsModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminUsers/UserDetailsModal/UserDetailsModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 $containerHeight: 450px;
 
diff --git a/client/src/components/Backend/screens/Admin/AdminUsers/components/AdminUsersComponent.module.scss b/client/src/components/Backend/screens/Admin/AdminUsers/components/AdminUsersComponent.module.scss
index b2d3940a2e..bb59584f26 100644
--- a/client/src/components/Backend/screens/Admin/AdminUsers/components/AdminUsersComponent.module.scss
+++ b/client/src/components/Backend/screens/Admin/AdminUsers/components/AdminUsersComponent.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .langue {
   padding: 8px;
@@ -44,7 +44,7 @@
   display: inline-block;
 
   &.selected {
-    background:#4CAF50;
+    background: #4caf50;
   }
 }
 .role_name {
diff --git a/client/src/components/Backend/screens/Admin/Logs/LogLine.module.scss b/client/src/components/Backend/screens/Admin/Logs/LogLine.module.scss
index 920d495759..8862724463 100644
--- a/client/src/components/Backend/screens/Admin/Logs/LogLine.module.scss
+++ b/client/src/components/Backend/screens/Admin/Logs/LogLine.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   font-size: 12px;
@@ -28,7 +28,7 @@
     }
   }
 
-  &> *:nth-child(2) {
+  & > *:nth-child(2) {
     overflow-wrap: anywhere;
   }
 }
diff --git a/client/src/components/Backend/screens/Admin/Logs/LogList.module.scss b/client/src/components/Backend/screens/Admin/Logs/LogList.module.scss
index 25e3a16b53..682c44c60d 100644
--- a/client/src/components/Backend/screens/Admin/Logs/LogList.module.scss
+++ b/client/src/components/Backend/screens/Admin/Logs/LogList.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/Backend/screens/Admin/Needs/NeedFormModal.module.scss b/client/src/components/Backend/screens/Admin/Needs/NeedFormModal.module.scss
index 2d0d2e9b0b..4e2ff8932b 100644
--- a/client/src/components/Backend/screens/Admin/Needs/NeedFormModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/Needs/NeedFormModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .label_details {
   font-weight: normal;
diff --git a/client/src/components/Backend/screens/Admin/Needs/Needs.module.scss b/client/src/components/Backend/screens/Admin/Needs/Needs.module.scss
index f2061c8495..fdcc0c139e 100644
--- a/client/src/components/Backend/screens/Admin/Needs/Needs.module.scss
+++ b/client/src/components/Backend/screens/Admin/Needs/Needs.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .column {
   background: $white;
@@ -16,7 +16,7 @@
   }
 
   :global(.sortable-ghost) {
-    opacity: .4;
+    opacity: 0.4;
   }
 }
 
diff --git a/client/src/components/Backend/screens/Admin/Needs/ThemeFormModal.module.scss b/client/src/components/Backend/screens/Admin/Needs/ThemeFormModal.module.scss
index cc781e62e8..7d24196997 100644
--- a/client/src/components/Backend/screens/Admin/Needs/ThemeFormModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/Needs/ThemeFormModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .label_details {
   font-weight: normal;
@@ -23,7 +23,7 @@
   border-radius: $radius;
   color: white;
   background: $dark;
-  border:none;
+  border: none;
   font-weight: bold;
   height: 50px;
   text-align: center;
diff --git a/client/src/components/Backend/screens/Admin/Widgets/EditWidgetModal/EditWidgetModal.module.scss b/client/src/components/Backend/screens/Admin/Widgets/EditWidgetModal/EditWidgetModal.module.scss
index d7147952a0..9b23c7f88d 100644
--- a/client/src/components/Backend/screens/Admin/Widgets/EditWidgetModal/EditWidgetModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/Widgets/EditWidgetModal/EditWidgetModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal_content {
   background: $gray40 !important;
@@ -10,7 +10,6 @@
   padding: 40px;
   border-radius: $radius;
   margin-top: 40px;
-
 }
 .code_title {
   font-size: 18px;
diff --git a/client/src/components/Backend/screens/Admin/Widgets/Widgets.module.scss b/client/src/components/Backend/screens/Admin/Widgets/Widgets.module.scss
index 209c2a19c5..4474d7b458 100644
--- a/client/src/components/Backend/screens/Admin/Widgets/Widgets.module.scss
+++ b/client/src/components/Backend/screens/Admin/Widgets/Widgets.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .form {
   padding: 40px;
diff --git a/client/src/components/Backend/screens/Admin/Widgets/components/WidgetLine.module.scss b/client/src/components/Backend/screens/Admin/Widgets/components/WidgetLine.module.scss
index 6563f0c837..01b38ee951 100644
--- a/client/src/components/Backend/screens/Admin/Widgets/components/WidgetLine.module.scss
+++ b/client/src/components/Backend/screens/Admin/Widgets/components/WidgetLine.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/DetailsModal.module.scss b/client/src/components/Backend/screens/Admin/sharedComponents/DetailsModal.module.scss
index fa79296f6b..501f6e5006 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/DetailsModal.module.scss
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/DetailsModal.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/variables";
-@import "src/scss/mixins/responsive";
+@import "~scss/variables";
+@import "~scss/mixins/responsive";
 
 .modal {
   &.xl {
-    @include media-min("xl-limit"){
+    @include media-min("xl-limit") {
       max-width: 1200px !important;
     }
   }
@@ -12,7 +12,7 @@
     box-shadow: 0 10px 15px 0 #00000040;
     border-radius: $radius;
     border: none;
-    background: #E0E0E0;
+    background: #e0e0e0;
     padding: 24px;
     min-height: 600px;
     display: flex;
@@ -20,7 +20,6 @@
   }
 }
 
-
 .title {
   display: flex;
   align-items: center;
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/NotesInput.module.scss b/client/src/components/Backend/screens/Admin/sharedComponents/NotesInput.module.scss
index 2612c71e59..1a776f4832 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/NotesInput.module.scss
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/NotesInput.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/variables";
-@import "src/scss/colors";
+@import "~scss/variables";
+@import "~scss/colors";
 
-.input{
+.input {
   border-radius: $radius;
   font-size: 12px;
   padding: 16px;
diff --git a/client/src/components/Backend/screens/Admin/sharedComponents/SmallDispositif.module.scss b/client/src/components/Backend/screens/Admin/sharedComponents/SmallDispositif.module.scss
index 11ed3d16d9..7550a10119 100644
--- a/client/src/components/Backend/screens/Admin/sharedComponents/SmallDispositif.module.scss
+++ b/client/src/components/Backend/screens/Admin/sharedComponents/SmallDispositif.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .container {
   font-size: 12px;
-  line-height: 15px;;
+  line-height: 15px;
   background: $gray30;
   padding: 8px;
   border-radius: 8px;
diff --git a/client/src/components/Backend/screens/UserFavorites/UserFavorites.module.scss b/client/src/components/Backend/screens/UserFavorites/UserFavorites.module.scss
index 30ea40fa26..8ab10ccb7e 100644
--- a/client/src/components/Backend/screens/UserFavorites/UserFavorites.module.scss
+++ b/client/src/components/Backend/screens/UserFavorites/UserFavorites.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/colors";
 
 .container {
   background: $gray40b;
diff --git a/client/src/components/Backend/screens/UserProfile/UserProfile.module.scss b/client/src/components/Backend/screens/UserProfile/UserProfile.module.scss
index 3290c2f388..9c5e03d6c2 100644
--- a/client/src/components/Backend/screens/UserProfile/UserProfile.module.scss
+++ b/client/src/components/Backend/screens/UserProfile/UserProfile.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   background: var(--background-default-grey-hover);
diff --git a/client/src/components/Backend/screens/UserProfile/components/EditAvatar/EditAvatar.module.scss b/client/src/components/Backend/screens/UserProfile/components/EditAvatar/EditAvatar.module.scss
index 1cbb59e2e7..e012169a75 100644
--- a/client/src/components/Backend/screens/UserProfile/components/EditAvatar/EditAvatar.module.scss
+++ b/client/src/components/Backend/screens/UserProfile/components/EditAvatar/EditAvatar.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   [type="file"] {
diff --git a/client/src/components/Backend/screens/UserProfile/components/EditButton/EditButton.module.scss b/client/src/components/Backend/screens/UserProfile/components/EditButton/EditButton.module.scss
index b1f1b10ee7..4a1c9b9603 100644
--- a/client/src/components/Backend/screens/UserProfile/components/EditButton/EditButton.module.scss
+++ b/client/src/components/Backend/screens/UserProfile/components/EditButton/EditButton.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .button {
   display: inline-block;
diff --git a/client/src/components/Backend/screens/UserProfile/components/LanguageBadge/LanguageBadge.module.scss b/client/src/components/Backend/screens/UserProfile/components/LanguageBadge/LanguageBadge.module.scss
index 419a037f40..e39870744e 100644
--- a/client/src/components/Backend/screens/UserProfile/components/LanguageBadge/LanguageBadge.module.scss
+++ b/client/src/components/Backend/screens/UserProfile/components/LanguageBadge/LanguageBadge.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .tag {
   cursor: default;
diff --git a/client/src/components/Backend/screens/UserProfile/components/Tag/Tag.module.scss b/client/src/components/Backend/screens/UserProfile/components/Tag/Tag.module.scss
index 2dda84beff..8c10293f4b 100644
--- a/client/src/components/Backend/screens/UserProfile/components/Tag/Tag.module.scss
+++ b/client/src/components/Backend/screens/UserProfile/components/Tag/Tag.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .tag {
   display: inline-block;
diff --git a/client/src/components/Backend/screens/UserStructure/components/MemberModal.module.scss b/client/src/components/Backend/screens/UserStructure/components/MemberModal.module.scss
index a48d3bef2a..7f2d6dc8eb 100644
--- a/client/src/components/Backend/screens/UserStructure/components/MemberModal.module.scss
+++ b/client/src/components/Backend/screens/UserStructure/components/MemberModal.module.scss
@@ -1,20 +1,20 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   .modal_content {
-   mix-blend-mode: normal; /* Shadow autour */
-   box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-   border-radius: $radius;
-   border: none;
-   background: #fbfbfb;
-   padding: 40px;
-   width: 600px;
+    mix-blend-mode: normal; /* Shadow autour */
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
+    border-radius: $radius;
+    border: none;
+    background: #fbfbfb;
+    padding: 40px;
+    width: 600px;
 
-   .user_img {
-     max-width: 70px;
-     max-height: 40px;
-     border-radius: 50%;
-   }
- }
+    .user_img {
+      max-width: 70px;
+      max-height: 40px;
+      border-radius: 50%;
+    }
+  }
 }
diff --git a/client/src/components/Backend/screens/UserStructure/components/UserStructureLoading.module.scss b/client/src/components/Backend/screens/UserStructure/components/UserStructureLoading.module.scss
index c812bfed70..f1a39526c3 100644
--- a/client/src/components/Backend/screens/UserStructure/components/UserStructureLoading.module.scss
+++ b/client/src/components/Backend/screens/UserStructure/components/UserStructureLoading.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .img {
   width: 160px;
diff --git a/client/src/components/Backend/screens/UserTranslation/UserTranslation.module.scss b/client/src/components/Backend/screens/UserTranslation/UserTranslation.module.scss
index d5ec14a487..847e390637 100644
--- a/client/src/components/Backend/screens/UserTranslation/UserTranslation.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/UserTranslation.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .main {
   display: flex;
diff --git a/client/src/components/Backend/screens/UserTranslation/components/OneNeedTranslationModal/OneNeedTranslationModal.module.scss b/client/src/components/Backend/screens/UserTranslation/components/OneNeedTranslationModal/OneNeedTranslationModal.module.scss
index cac00b24b3..a52251bda5 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/OneNeedTranslationModal/OneNeedTranslationModal.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/components/OneNeedTranslationModal/OneNeedTranslationModal.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
+@import "~scss/mixins/rtl";
 
 .theme {
   color: white;
diff --git a/client/src/components/Backend/screens/UserTranslation/components/SubComponents.module.scss b/client/src/components/Backend/screens/UserTranslation/components/SubComponents.module.scss
index 6698159f77..f01fe4a66e 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/SubComponents.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/components/SubComponents.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/colors";
 
 .language_title {
   :global(.fi) {
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.module.scss b/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.module.scss
index 79e7f4e55d..6ce29f6af2 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationLanguagesChoiceModal/TranslationLanguagesChoiceModal.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .modal {
   max-width: 600px;
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/NeedButton/NeedButton.module.scss b/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/NeedButton/NeedButton.module.scss
index 614ff44446..60f428d5d7 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/NeedButton/NeedButton.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/NeedButton/NeedButton.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/btn";
+@import "~scss/colors";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/btn";
 
 .need {
   padding: u(2);
diff --git a/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/TranslationNeedsList.module.scss b/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/TranslationNeedsList.module.scss
index 78a5976f7a..8314d9650a 100644
--- a/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/TranslationNeedsList.module.scss
+++ b/client/src/components/Backend/screens/UserTranslation/components/TranslationNeedsList/TranslationNeedsList.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .container {
   width: 940px;
diff --git a/client/src/components/Content/Dispositif/Dispositif.module.scss b/client/src/components/Content/Dispositif/Dispositif.module.scss
index ae9059c7d7..9bfbf4e470 100644
--- a/client/src/components/Content/Dispositif/Dispositif.module.scss
+++ b/client/src/components/Content/Dispositif/Dispositif.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 .container {
   width: 100%;
diff --git a/client/src/components/Content/Dispositif/RightSidebar/RightSidebar.module.scss b/client/src/components/Content/Dispositif/RightSidebar/RightSidebar.module.scss
index be1ace1197..57645aeb83 100644
--- a/client/src/components/Content/Dispositif/RightSidebar/RightSidebar.module.scss
+++ b/client/src/components/Content/Dispositif/RightSidebar/RightSidebar.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   .btn {
diff --git a/client/src/components/Content/DispositifTranslate/DispositifTranslate.module.scss b/client/src/components/Content/DispositifTranslate/DispositifTranslate.module.scss
index c64941b5b3..aa817894d1 100644
--- a/client/src/components/Content/DispositifTranslate/DispositifTranslate.module.scss
+++ b/client/src/components/Content/DispositifTranslate/DispositifTranslate.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 .container {
   width: 100%;
diff --git a/client/src/components/Content/ThemesGrid/ThemesGrid.module.scss b/client/src/components/Content/ThemesGrid/ThemesGrid.module.scss
index 23c6e79477..51a0e137e9 100644
--- a/client/src/components/Content/ThemesGrid/ThemesGrid.module.scss
+++ b/client/src/components/Content/ThemesGrid/ThemesGrid.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .themes {
   display: flex;
diff --git a/client/src/components/Layout/AppLoader/AppLoader.module.scss b/client/src/components/Layout/AppLoader/AppLoader.module.scss
index 101aaa9ea2..253b5406c2 100644
--- a/client/src/components/Layout/AppLoader/AppLoader.module.scss
+++ b/client/src/components/Layout/AppLoader/AppLoader.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/mixins/text";
 
 @keyframes pulse {
   0% {
diff --git a/client/src/components/Layout/DownloadAppBanner/DownloadAppBanner.module.scss b/client/src/components/Layout/DownloadAppBanner/DownloadAppBanner.module.scss
index d95566787b..7616725700 100644
--- a/client/src/components/Layout/DownloadAppBanner/DownloadAppBanner.module.scss
+++ b/client/src/components/Layout/DownloadAppBanner/DownloadAppBanner.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   background: var(--background-alt-blue-france);
diff --git a/client/src/components/Layout/Layout.module.scss b/client/src/components/Layout/Layout.module.scss
index 8c5ace9c1c..7e38c8c8aa 100644
--- a/client/src/components/Layout/Layout.module.scss
+++ b/client/src/components/Layout/Layout.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/mixins/responsive";
+@import "~scss/mixins/responsive";
 
 .main {
   overflow-x: hidden;
diff --git a/client/src/components/Modals/BookmarkedModal/BookmarkedModal.module.scss b/client/src/components/Modals/BookmarkedModal/BookmarkedModal.module.scss
index 3f9229be56..252159ffac 100644
--- a/client/src/components/Modals/BookmarkedModal/BookmarkedModal.module.scss
+++ b/client/src/components/Modals/BookmarkedModal/BookmarkedModal.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .modal {
   max-width: 400px !important;
diff --git a/client/src/components/Modals/DownloadAppModal/DownloadApp.module.scss b/client/src/components/Modals/DownloadAppModal/DownloadApp.module.scss
index 7b26ce79d7..13d99523b5 100644
--- a/client/src/components/Modals/DownloadAppModal/DownloadApp.module.scss
+++ b/client/src/components/Modals/DownloadAppModal/DownloadApp.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .modal {
   margin: 0 !important;
diff --git a/client/src/components/Modals/FrameModal/FrameModal.module.scss b/client/src/components/Modals/FrameModal/FrameModal.module.scss
index 099d9d6fa6..79e7ecb32f 100644
--- a/client/src/components/Modals/FrameModal/FrameModal.module.scss
+++ b/client/src/components/Modals/FrameModal/FrameModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   min-width: 650px;
diff --git a/client/src/components/Modals/LanguageModal/LanguageModal.module.scss b/client/src/components/Modals/LanguageModal/LanguageModal.module.scss
index b8fb79362b..171f52798d 100644
--- a/client/src/components/Modals/LanguageModal/LanguageModal.module.scss
+++ b/client/src/components/Modals/LanguageModal/LanguageModal.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .modal {
   @include media-min("tablet-up") {
diff --git a/client/src/components/Modals/MobileModal/MobileModal.module.scss b/client/src/components/Modals/MobileModal/MobileModal.module.scss
index 8d118207d2..a105b828b3 100644
--- a/client/src/components/Modals/MobileModal/MobileModal.module.scss
+++ b/client/src/components/Modals/MobileModal/MobileModal.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
 
 .modal {
   &:global(.modal-dialog) {
diff --git a/client/src/components/Modals/Modal.scss b/client/src/components/Modals/Modal.scss
index d4c41a3cc3..c3c81c6b86 100644
--- a/client/src/components/Modals/Modal.scss
+++ b/client/src/components/Modals/Modal.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .modal.show .modal-dialog.custom-modal {
   overflow: scroll;
diff --git a/client/src/components/Modals/ReactionLectureModal/ReactionLectureModal.module.scss b/client/src/components/Modals/ReactionLectureModal/ReactionLectureModal.module.scss
index a7d6688fa1..d9bd283db2 100644
--- a/client/src/components/Modals/ReactionLectureModal/ReactionLectureModal.module.scss
+++ b/client/src/components/Modals/ReactionLectureModal/ReactionLectureModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   min-width: 650px;
diff --git a/client/src/components/Modals/RejectionModal/RejectionModal.module.scss b/client/src/components/Modals/RejectionModal/RejectionModal.module.scss
index bc05da8214..fb3fc3a1dc 100644
--- a/client/src/components/Modals/RejectionModal/RejectionModal.module.scss
+++ b/client/src/components/Modals/RejectionModal/RejectionModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors.scss";
-@import "src/scss/variables";
+@import "~scss/colors.scss";
+@import "~scss/variables";
 
 .modal {
   max-width: 650px;
diff --git a/client/src/components/Modals/ResponsableModal/ResponsableModal.module.scss b/client/src/components/Modals/ResponsableModal/ResponsableModal.module.scss
index 6ab5d8cfb3..1241e340fa 100644
--- a/client/src/components/Modals/ResponsableModal/ResponsableModal.module.scss
+++ b/client/src/components/Modals/ResponsableModal/ResponsableModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .modal {
   max-width: 650px;
diff --git a/client/src/components/Modals/WriteContentModal/WriteContentCard/WriteContentCard.module.scss b/client/src/components/Modals/WriteContentModal/WriteContentCard/WriteContentCard.module.scss
index 8970b61bf8..06d9bd7bf5 100644
--- a/client/src/components/Modals/WriteContentModal/WriteContentCard/WriteContentCard.module.scss
+++ b/client/src/components/Modals/WriteContentModal/WriteContentCard/WriteContentCard.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .container {
   max-width: 280px;
diff --git a/client/src/components/Modals/WriteContentModal/WriteContentModal.module.scss b/client/src/components/Modals/WriteContentModal/WriteContentModal.module.scss
index 6c316e2e78..8f600edd4c 100644
--- a/client/src/components/Modals/WriteContentModal/WriteContentModal.module.scss
+++ b/client/src/components/Modals/WriteContentModal/WriteContentModal.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .modal {
   height: auto !important;
diff --git a/client/src/components/Navigation/Navbar/NavbarItems/SpeekToolItem/SpeekToolItem.module.scss b/client/src/components/Navigation/Navbar/NavbarItems/SpeekToolItem/SpeekToolItem.module.scss
index c2dfa1885e..46ef2617bd 100644
--- a/client/src/components/Navigation/Navbar/NavbarItems/SpeekToolItem/SpeekToolItem.module.scss
+++ b/client/src/components/Navigation/Navbar/NavbarItems/SpeekToolItem/SpeekToolItem.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .speek_tool_item_active {
   background-color: $vert !important;
diff --git a/client/src/components/Navigation/UnauthorizedAccess/UnauthorizedAccess.module.scss b/client/src/components/Navigation/UnauthorizedAccess/UnauthorizedAccess.module.scss
index e52408d5bd..15b403941e 100644
--- a/client/src/components/Navigation/UnauthorizedAccess/UnauthorizedAccess.module.scss
+++ b/client/src/components/Navigation/UnauthorizedAccess/UnauthorizedAccess.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .container {
   height: 90vh;
diff --git a/client/src/components/Pages/annuaire-create/CustomCheckBox.module.scss b/client/src/components/Pages/annuaire-create/CustomCheckBox.module.scss
index 2c742473e9..927d4a0c1f 100644
--- a/client/src/components/Pages/annuaire-create/CustomCheckBox.module.scss
+++ b/client/src/components/Pages/annuaire-create/CustomCheckBox.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .container {
   width: 20px;
@@ -15,8 +15,7 @@
   cursor: pointer;
 
   &.checked {
-    background:#4CAF50;
-    border-color: #4CAF50;
-
+    background: #4caf50;
+    border-color: #4caf50;
   }
 }
diff --git a/client/src/components/Pages/annuaire/id/LeftAnnuaireDetail.module.scss b/client/src/components/Pages/annuaire/id/LeftAnnuaireDetail.module.scss
index 3a7d448caa..51c7154026 100644
--- a/client/src/components/Pages/annuaire/id/LeftAnnuaireDetail.module.scss
+++ b/client/src/components/Pages/annuaire/id/LeftAnnuaireDetail.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   width: 390px;
diff --git a/client/src/components/Pages/annuaire/id/MiddleAnnuaireDetails.module.scss b/client/src/components/Pages/annuaire/id/MiddleAnnuaireDetails.module.scss
index 2ec710bd4f..43f4b5e78c 100644
--- a/client/src/components/Pages/annuaire/id/MiddleAnnuaireDetails.module.scss
+++ b/client/src/components/Pages/annuaire/id/MiddleAnnuaireDetails.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .middle_container {
   padding: 32px;
diff --git a/client/src/components/Pages/annuaire/id/RightAnnuaireDetails.module.scss b/client/src/components/Pages/annuaire/id/RightAnnuaireDetails.module.scss
index 90e1c2f1d7..4550f325b5 100644
--- a/client/src/components/Pages/annuaire/id/RightAnnuaireDetails.module.scss
+++ b/client/src/components/Pages/annuaire/id/RightAnnuaireDetails.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   width: 300px;
@@ -49,7 +49,7 @@
     color: $gray90;
 
     &.red {
-      color: #F44336;
+      color: #f44336;
     }
   }
 
diff --git a/client/src/components/Pages/annuaire/id/StructureType.module.scss b/client/src/components/Pages/annuaire/id/StructureType.module.scss
index c450af9985..363a1da774 100644
--- a/client/src/components/Pages/annuaire/id/StructureType.module.scss
+++ b/client/src/components/Pages/annuaire/id/StructureType.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   font-size: $text-normal;
diff --git a/client/src/components/Pages/annuaire/index/Header.module.scss b/client/src/components/Pages/annuaire/index/Header.module.scss
index 1974c2de3d..6d496b5f86 100644
--- a/client/src/components/Pages/annuaire/index/Header.module.scss
+++ b/client/src/components/Pages/annuaire/index/Header.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .back_image {
   background-image: url(../../../../assets/annuaire/annuaire_cover.svg);
diff --git a/client/src/components/Pages/annuaire/index/LetterSection.module.scss b/client/src/components/Pages/annuaire/index/LetterSection.module.scss
index be603a64d8..431c579652 100644
--- a/client/src/components/Pages/annuaire/index/LetterSection.module.scss
+++ b/client/src/components/Pages/annuaire/index/LetterSection.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .letter_container {
   display: flex;
diff --git a/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss b/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
index cd80e00913..11fb07918c 100644
--- a/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
+++ b/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
@@ -1,5 +1,5 @@
-@import 'src/scss/colors.scss';
-@import "src/scss/variables";
+@import "src/scss/colors.scss";
+@import "~scss/variables";
 
 .container {
   display: flex;
@@ -81,6 +81,3 @@
     display: none;
   }
 }
-
-
-
diff --git a/client/src/components/Pages/auth/Layout/Layout.module.scss b/client/src/components/Pages/auth/Layout/Layout.module.scss
index 6b9fda4ccf..fa71707a16 100644
--- a/client/src/components/Pages/auth/Layout/Layout.module.scss
+++ b/client/src/components/Pages/auth/Layout/Layout.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
 
 $headerHeight: 120px;
 
diff --git a/client/src/components/Pages/auth/Loader/Loader.module.scss b/client/src/components/Pages/auth/Loader/Loader.module.scss
index 37358999f6..4b57cb022f 100644
--- a/client/src/components/Pages/auth/Loader/Loader.module.scss
+++ b/client/src/components/Pages/auth/Loader/Loader.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/mixins/text";
+@import "~scss/mixins/text";
 
 .loader {
   position: absolute;
diff --git a/client/src/components/Pages/auth/PartnerRadio/PartnerRadio.module.scss b/client/src/components/Pages/auth/PartnerRadio/PartnerRadio.module.scss
index 85a8b46391..c6c5bd4fe4 100644
--- a/client/src/components/Pages/auth/PartnerRadio/PartnerRadio.module.scss
+++ b/client/src/components/Pages/auth/PartnerRadio/PartnerRadio.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/btn";
-@import "src/scss/mixins/unit";
+@import "~scss/mixins/btn";
+@import "~scss/mixins/unit";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/AccordionBadge/AccordionBadge.module.scss b/client/src/components/Pages/dispositif/AccordionBadge/AccordionBadge.module.scss
index 52f01810bf..809cc1f35e 100644
--- a/client/src/components/Pages/dispositif/AccordionBadge/AccordionBadge.module.scss
+++ b/client/src/components/Pages/dispositif/AccordionBadge/AccordionBadge.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .badge {
   width: u(8);
diff --git a/client/src/components/Pages/dispositif/Accordions/Accordions.module.scss b/client/src/components/Pages/dispositif/Accordions/Accordions.module.scss
index cb34444620..daab99b697 100644
--- a/client/src/components/Pages/dispositif/Accordions/Accordions.module.scss
+++ b/client/src/components/Pages/dispositif/Accordions/Accordions.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .title {
   @include dsfr-text("chapo");
diff --git a/client/src/components/Pages/dispositif/ActionButtons/ActionButtons.module.scss b/client/src/components/Pages/dispositif/ActionButtons/ActionButtons.module.scss
index a171ca011b..3ad488e61f 100644
--- a/client/src/components/Pages/dispositif/ActionButtons/ActionButtons.module.scss
+++ b/client/src/components/Pages/dispositif/ActionButtons/ActionButtons.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .container {
   position: fixed;
diff --git a/client/src/components/Pages/dispositif/ActionButtons/ReadLanguageModal/ReadLanguageModal.module.scss b/client/src/components/Pages/dispositif/ActionButtons/ReadLanguageModal/ReadLanguageModal.module.scss
index d27aa3f035..938bcb1c6e 100644
--- a/client/src/components/Pages/dispositif/ActionButtons/ReadLanguageModal/ReadLanguageModal.module.scss
+++ b/client/src/components/Pages/dispositif/ActionButtons/ReadLanguageModal/ReadLanguageModal.module.scss
@@ -1 +1 @@
-@import "src/scss/colors";
+@import "~scss/colors";
diff --git a/client/src/components/Pages/dispositif/ActionButtons/SendSMSModal/SendSMSModal.module.scss b/client/src/components/Pages/dispositif/ActionButtons/SendSMSModal/SendSMSModal.module.scss
index c7318304bb..f10d45c14f 100644
--- a/client/src/components/Pages/dispositif/ActionButtons/SendSMSModal/SendSMSModal.module.scss
+++ b/client/src/components/Pages/dispositif/ActionButtons/SendSMSModal/SendSMSModal.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .form {
   .text {
diff --git a/client/src/components/Pages/dispositif/Banner/Banner.module.scss b/client/src/components/Pages/dispositif/Banner/Banner.module.scss
index ccec70b0fb..826e2dc7b6 100644
--- a/client/src/components/Pages/dispositif/Banner/Banner.module.scss
+++ b/client/src/components/Pages/dispositif/Banner/Banner.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .banner {
   height: 400px;
diff --git a/client/src/components/Pages/dispositif/Banner/EditModal/EditModal.module.scss b/client/src/components/Pages/dispositif/Banner/EditModal/EditModal.module.scss
index a57a0799a8..da475eed64 100644
--- a/client/src/components/Pages/dispositif/Banner/EditModal/EditModal.module.scss
+++ b/client/src/components/Pages/dispositif/Banner/EditModal/EditModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Breadcrumb/Breadcrumb.module.scss b/client/src/components/Pages/dispositif/Breadcrumb/Breadcrumb.module.scss
index 27b828e3b9..0efbb80f5e 100644
--- a/client/src/components/Pages/dispositif/Breadcrumb/Breadcrumb.module.scss
+++ b/client/src/components/Pages/dispositif/Breadcrumb/Breadcrumb.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Contributors/ContributorCard/ContributorCard.module.scss b/client/src/components/Pages/dispositif/Contributors/ContributorCard/ContributorCard.module.scss
index a7c1b7aa91..f5b0bfe313 100644
--- a/client/src/components/Pages/dispositif/Contributors/ContributorCard/ContributorCard.module.scss
+++ b/client/src/components/Pages/dispositif/Contributors/ContributorCard/ContributorCard.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .container {
   background: $darkBackgroundElevationContrast;
diff --git a/client/src/components/Pages/dispositif/Contributors/Contributors.module.scss b/client/src/components/Pages/dispositif/Contributors/Contributors.module.scss
index f18ea29661..822104bf1c 100644
--- a/client/src/components/Pages/dispositif/Contributors/Contributors.module.scss
+++ b/client/src/components/Pages/dispositif/Contributors/Contributors.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .section {
   background-color: $darkBackgroundAltGrey;
diff --git a/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionItem/AccordionItem.module.scss b/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionItem/AccordionItem.module.scss
index 8ebde9a4d8..ebbe8f9dcf 100644
--- a/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionItem/AccordionItem.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionItem/AccordionItem.module.scss
@@ -1,11 +1,11 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/input";
+@import "~scss/mixins/icons";
 .item,
 .content {
   margin-bottom: u(4);
diff --git a/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionsEdit.module.scss b/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionsEdit.module.scss
index 1ef895f25e..ed3eaf3ed0 100644
--- a/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionsEdit.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/AccordionsEdit/AccordionsEdit.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/input";
 
 .subtitle {
   color: $lightTextMentionGrey;
diff --git a/client/src/components/Pages/dispositif/Edition/AddContentButton/AddContentButton.module.scss b/client/src/components/Pages/dispositif/Edition/AddContentButton/AddContentButton.module.scss
index 166253616c..358be22c1d 100644
--- a/client/src/components/Pages/dispositif/Edition/AddContentButton/AddContentButton.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/AddContentButton/AddContentButton.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/mixins/icons";
 
 .btn {
   &:global(.fr-btn) {
diff --git a/client/src/components/Pages/dispositif/Edition/AddContentButton/DeleteContentModal/DeleteContentModal.module.scss b/client/src/components/Pages/dispositif/Edition/AddContentButton/DeleteContentModal/DeleteContentModal.module.scss
index a57a0799a8..da475eed64 100644
--- a/client/src/components/Pages/dispositif/Edition/AddContentButton/DeleteContentModal/DeleteContentModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/AddContentButton/DeleteContentModal/DeleteContentModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Edition/ChoiceButton/ChoiceButton.module.scss b/client/src/components/Pages/dispositif/Edition/ChoiceButton/ChoiceButton.module.scss
index 64735cc5ee..630c6fbf4b 100644
--- a/client/src/components/Pages/dispositif/Edition/ChoiceButton/ChoiceButton.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/ChoiceButton/ChoiceButton.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/input";
 
 .choice {
   padding: u(2);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbar.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbar.module.scss
index fbeb13262b..6a6f6824c2 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbar.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbar.module.scss
@@ -1,11 +1,11 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/input";
+@import "~scss/mixins/icons";
 
 .container {
   background-color: white;
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/BubbleFlags/BubbleFlags.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/BubbleFlags/BubbleFlags.module.scss
index bbe77926b2..1d81720bcc 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/BubbleFlags/BubbleFlags.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/BubbleFlags/BubbleFlags.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/CompleteContent.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/CompleteContent.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/CompleteContent.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/CompleteContent.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/PublicationSteps/PublicationSteps.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/PublicationSteps/PublicationSteps.module.scss
index 2a9cfbaad2..2a78c391a6 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/PublicationSteps/PublicationSteps.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/CompleteContent/PublicationSteps/PublicationSteps.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   background: $lightBackgroundContrastInfo;
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/MissingContent/MissingContent.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/MissingContent/MissingContent.module.scss
index 5a464d6bb3..da104cd2ee 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/MissingContent/MissingContent.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/MissingContent/MissingContent.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .missing {
   padding: u(8);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/PublishModal.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/PublishModal.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/PublishModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/PublishModal/PublishModal.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/QuitModal/QuitModal.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/QuitModal/QuitModal.module.scss
index 0ee9db7cdd..d1ad9b6c6d 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/QuitModal/QuitModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarEdit/QuitModal/QuitModal.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
 
 .content {
   margin-bottom: u(8);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/CompleteContent/CompleteContent.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/CompleteContent/CompleteContent.module.scss
index 2e8544843b..25e753d72d 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/CompleteContent/CompleteContent.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/CompleteContent/CompleteContent.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .done {
   background: $lightBackgroundContrastInfo;
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationForm.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationForm.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationForm.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationForm.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationInput/NotationInput.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationInput/NotationInput.module.scss
index 5e3ea00a35..159b01da80 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationInput/NotationInput.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/NotationForm/NotationInput/NotationInput.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .item {
   padding: u(4);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/PublishModal.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/PublishModal.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/PublishModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/PublishModal/PublishModal.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/QuitModal/QuitModal.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/QuitModal/QuitModal.module.scss
index 0ee9db7cdd..d1ad9b6c6d 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/QuitModal/QuitModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/CustomNavbarTranslate/QuitModal/QuitModal.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
 
 .content {
   margin-bottom: u(8);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/MissingSteps/MissingSteps.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/MissingSteps/MissingSteps.module.scss
index 77ed47c848..e427a92423 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/MissingSteps/MissingSteps.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/MissingSteps/MissingSteps.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/btn";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/btn";
 
 .missing {
   border-radius: u(2);
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/SaveErrorModal/SaveErrorModal.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/SaveErrorModal/SaveErrorModal.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/SaveErrorModal/SaveErrorModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/SaveErrorModal/SaveErrorModal.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/CustomNavbar/StepBar/StepBar.module.scss b/client/src/components/Pages/dispositif/Edition/CustomNavbar/StepBar/StepBar.module.scss
index 80d092ce99..4e17c12793 100644
--- a/client/src/components/Pages/dispositif/Edition/CustomNavbar/StepBar/StepBar.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/CustomNavbar/StepBar/StepBar.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.module.scss b/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.module.scss
index bd081072fe..799951b027 100644
--- a/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/DropdownModals/DropdownModals.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .dropdown {
   .toggle {
diff --git a/client/src/components/Pages/dispositif/Edition/HelpCard/HelpCard.module.scss b/client/src/components/Pages/dispositif/Edition/HelpCard/HelpCard.module.scss
index 643b41c48d..222016a6ec 100644
--- a/client/src/components/Pages/dispositif/Edition/HelpCard/HelpCard.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/HelpCard/HelpCard.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .container {
   width: 240px;
diff --git a/client/src/components/Pages/dispositif/Edition/LeftSidebarEdition/LeftSidebarEdition.module.scss b/client/src/components/Pages/dispositif/Edition/LeftSidebarEdition/LeftSidebarEdition.module.scss
index 533f190957..79dac95181 100644
--- a/client/src/components/Pages/dispositif/Edition/LeftSidebarEdition/LeftSidebarEdition.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/LeftSidebarEdition/LeftSidebarEdition.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/icons";
 
 .title {
   @include dsfr-text("h3");
diff --git a/client/src/components/Pages/dispositif/Edition/LogoInput/LogoInput.module.scss b/client/src/components/Pages/dispositif/Edition/LogoInput/LogoInput.module.scss
index 52559b8369..7ff341d963 100644
--- a/client/src/components/Pages/dispositif/Edition/LogoInput/LogoInput.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/LogoInput/LogoInput.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/variables";
 
 .container {
   height: 120px;
diff --git a/client/src/components/Pages/dispositif/Edition/MapEdit/DeleteModal/DeleteModal.module.scss b/client/src/components/Pages/dispositif/Edition/MapEdit/DeleteModal/DeleteModal.module.scss
index a57a0799a8..da475eed64 100644
--- a/client/src/components/Pages/dispositif/Edition/MapEdit/DeleteModal/DeleteModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/MapEdit/DeleteModal/DeleteModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Edition/MapEdit/Header/Header.module.scss b/client/src/components/Pages/dispositif/Edition/MapEdit/Header/Header.module.scss
index 3edfa0004d..3a0428a234 100644
--- a/client/src/components/Pages/dispositif/Edition/MapEdit/Header/Header.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/MapEdit/Header/Header.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
 
 .container {
   position: absolute;
diff --git a/client/src/components/Pages/dispositif/Edition/MapEdit/MapEdit.module.scss b/client/src/components/Pages/dispositif/Edition/MapEdit/MapEdit.module.scss
index 9b9050ce47..2fdc0bf245 100644
--- a/client/src/components/Pages/dispositif/Edition/MapEdit/MapEdit.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/MapEdit/MapEdit.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/map";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/map";
 
 .add {
   @include dsfr-text("chapo");
diff --git a/client/src/components/Pages/dispositif/Edition/MapEdit/PoiForm/PoiForm.module.scss b/client/src/components/Pages/dispositif/Edition/MapEdit/PoiForm/PoiForm.module.scss
index 8378994a87..025ac973fb 100644
--- a/client/src/components/Pages/dispositif/Edition/MapEdit/PoiForm/PoiForm.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/MapEdit/PoiForm/PoiForm.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .container {
   position: absolute;
diff --git a/client/src/components/Pages/dispositif/Edition/MapEdit/Sidebar/Sidebar.module.scss b/client/src/components/Pages/dispositif/Edition/MapEdit/Sidebar/Sidebar.module.scss
index 8746acf148..02e586a111 100644
--- a/client/src/components/Pages/dispositif/Edition/MapEdit/Sidebar/Sidebar.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/MapEdit/Sidebar/Sidebar.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .sidebar {
   position: absolute;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalAbstract/ModalAbstract.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalAbstract/ModalAbstract.module.scss
index 52f3b497b9..e7d85fad2e 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalAbstract/ModalAbstract.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalAbstract/ModalAbstract.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
 
 .text {
   position: relative;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalAccordionsCount/ModalAccordionsCount.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalAccordionsCount/ModalAccordionsCount.module.scss
index 9abfc5c761..8123130a1a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalAccordionsCount/ModalAccordionsCount.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalAccordionsCount/ModalAccordionsCount.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .content {
   flex-grow: 1;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalAvailability/ModalAvailability.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalAvailability/ModalAvailability.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalAvailability/ModalAvailability.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalAvailability/ModalAvailability.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalConditions/ModalConditions.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalConditions/ModalConditions.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalConditions/ModalConditions.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalConditions/ModalConditions.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/DepartmentInput/DepartmentInput.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/DepartmentInput/DepartmentInput.module.scss
index 05b16915d4..908b49b6b7 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/DepartmentInput/DepartmentInput.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/DepartmentInput/DepartmentInput.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .input {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/ModalLocation.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/ModalLocation.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/ModalLocation.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalLocation/ModalLocation.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/AuthorContact/AuthorContact.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/AuthorContact/AuthorContact.module.scss
index 3b2d6089ea..559e1dd456 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/AuthorContact/AuthorContact.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/AuthorContact/AuthorContact.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .textarea textarea {
   min-height: 100px;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ChooseStructure/ChooseStructure.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ChooseStructure/ChooseStructure.module.scss
index 07a1734c12..0b55f99985 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ChooseStructure/ChooseStructure.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ChooseStructure/ChooseStructure.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .structure {
   margin-bottom: u(2);
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/CreateStructure/CreateStructure.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/CreateStructure/CreateStructure.module.scss
index 27a312d308..2be2dd2879 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/CreateStructure/CreateStructure.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/CreateStructure/CreateStructure.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/MemberOfStructure/MemberOfStructure.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/MemberOfStructure/MemberOfStructure.module.scss
index 27a312d308..2be2dd2879 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/MemberOfStructure/MemberOfStructure.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/MemberOfStructure/MemberOfStructure.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ModalMainSponsor.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ModalMainSponsor.module.scss
index 085f26f1e6..d02f5cbb3e 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ModalMainSponsor.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ModalMainSponsor.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .container {
   p {
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/SearchStructure/SearchStructure.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/SearchStructure/SearchStructure.module.scss
index 0da46832c2..e33c80d2fc 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/SearchStructure/SearchStructure.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/SearchStructure/SearchStructure.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .collapse {
   position: absolute;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/StructureContact/StructureContact.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/StructureContact/StructureContact.module.scss
index 27a312d308..2be2dd2879 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/StructureContact/StructureContact.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/StructureContact/StructureContact.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ThanksMessage/ThanksMessage.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ThanksMessage/ThanksMessage.module.scss
index b52b804cf4..22332613e1 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ThanksMessage/ThanksMessage.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalMainSponsor/ThanksMessage/ThanksMessage.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .list {
   list-style-type: none;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalPrice/ModalPrice.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalPrice/ModalPrice.module.scss
index 9427ea4950..913e82c3d8 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalPrice/ModalPrice.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalPrice/ModalPrice.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .form {
   border: 1px solid $lightBorderDefaultGrey;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalPublic/ModalPublic.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalPublic/ModalPublic.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalPublic/ModalPublic.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalPublic/ModalPublic.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalSponsors/ModalSponsors.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalSponsors/ModalSponsors.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalSponsors/ModalSponsors.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalSponsors/ModalSponsors.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ModalThemes.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ModalThemes.module.scss
index 4abb9a8765..a99b2cbe70 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ModalThemes.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ModalThemes.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .help {
   @include dsfr-text("very-small");
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ThemeSelectButton/ThemeSelectButton.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ThemeSelectButton/ThemeSelectButton.module.scss
index 287a5ae655..38ec2a41e8 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ThemeSelectButton/ThemeSelectButton.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalThemes/ThemeSelectButton/ThemeSelectButton.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .btn {
   background: $gray40;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/ModalWelcome.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/ModalWelcome.module.scss
index 09dee79d61..29ce6e6b8b 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/ModalWelcome.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/ModalWelcome.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .modal {
   height: 584px;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExample/TextExample.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExample/TextExample.module.scss
index bc00981302..faaabf4c94 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExample/TextExample.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExample/TextExample.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .container {
   margin-bottom: 0 !important;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExampleLine.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExampleLine.module.scss
index d607286290..3ebd244922 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExampleLine.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/ModalWelcome/TextExampleLine/TextExampleLine.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/components/InlineForm/InlineForm.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/components/InlineForm/InlineForm.module.scss
index ab9c47812d..73302f222c 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/components/InlineForm/InlineForm.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/components/InlineForm/InlineForm.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .form {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/components/RemovableItem/RemovableItem.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/components/RemovableItem/RemovableItem.module.scss
index 160fcc517d..b71daef8b3 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/components/RemovableItem/RemovableItem.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/components/RemovableItem/RemovableItem.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .btn {
   padding: u(2) u(3);
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/components/SponsorForm/SponsorForm.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/components/SponsorForm/SponsorForm.module.scss
index 7720afc42b..cede25860a 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/components/SponsorForm/SponsorForm.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/components/SponsorForm/SponsorForm.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
diff --git a/client/src/components/Pages/dispositif/Edition/Modals/components/StepsFooter/Steps/Steps.module.scss b/client/src/components/Pages/dispositif/Edition/Modals/components/StepsFooter/Steps/Steps.module.scss
index 95088fecae..53a1a59efe 100644
--- a/client/src/components/Pages/dispositif/Edition/Modals/components/StepsFooter/Steps/Steps.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/Modals/components/StepsFooter/Steps/Steps.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/RichTextEdit/RichTextEdit.module.scss b/client/src/components/Pages/dispositif/Edition/RichTextEdit/RichTextEdit.module.scss
index 62d8593c55..e6f203afb5 100644
--- a/client/src/components/Pages/dispositif/Edition/RichTextEdit/RichTextEdit.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/RichTextEdit/RichTextEdit.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Edition/RightSidebarEdition/RightSidebarEdition.module.scss b/client/src/components/Pages/dispositif/Edition/RightSidebarEdition/RightSidebarEdition.module.scss
index c6bb332c68..31f6b9e217 100644
--- a/client/src/components/Pages/dispositif/Edition/RightSidebarEdition/RightSidebarEdition.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/RightSidebarEdition/RightSidebarEdition.module.scss
@@ -1,3 +1,3 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Edition/SponsorsEdit/DeleteContentModal/DeleteContentModal.module.scss b/client/src/components/Pages/dispositif/Edition/SponsorsEdit/DeleteContentModal/DeleteContentModal.module.scss
index a57a0799a8..da475eed64 100644
--- a/client/src/components/Pages/dispositif/Edition/SponsorsEdit/DeleteContentModal/DeleteContentModal.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/SponsorsEdit/DeleteContentModal/DeleteContentModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Edition/SponsorsEdit/SponsorsEdit.module.scss b/client/src/components/Pages/dispositif/Edition/SponsorsEdit/SponsorsEdit.module.scss
index 67961c1a10..0e6158f717 100644
--- a/client/src/components/Pages/dispositif/Edition/SponsorsEdit/SponsorsEdit.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/SponsorsEdit/SponsorsEdit.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Edition/TitleEdit/TitleEdit.module.scss b/client/src/components/Pages/dispositif/Edition/TitleEdit/TitleEdit.module.scss
index 74e57f8525..91a9828385 100644
--- a/client/src/components/Pages/dispositif/Edition/TitleEdit/TitleEdit.module.scss
+++ b/client/src/components/Pages/dispositif/Edition/TitleEdit/TitleEdit.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/input";
 
 .input {
   @include baseInput();
diff --git a/client/src/components/Pages/dispositif/Feedback/Feedback.module.scss b/client/src/components/Pages/dispositif/Feedback/Feedback.module.scss
index 9a7cf356ce..22bf7c9c5a 100644
--- a/client/src/components/Pages/dispositif/Feedback/Feedback.module.scss
+++ b/client/src/components/Pages/dispositif/Feedback/Feedback.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .container {
   background: $lightBackgroundActionLowBlueFrance;
diff --git a/client/src/components/Pages/dispositif/Header/Header.module.scss b/client/src/components/Pages/dispositif/Header/Header.module.scss
index a52697775d..33bc2a4866 100644
--- a/client/src/components/Pages/dispositif/Header/Header.module.scss
+++ b/client/src/components/Pages/dispositif/Header/Header.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors.scss";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors.scss";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   margin-bottom: u(20);
diff --git a/client/src/components/Pages/dispositif/Input/Input.module.scss b/client/src/components/Pages/dispositif/Input/Input.module.scss
index 20c67dcd58..c387850069 100644
--- a/client/src/components/Pages/dispositif/Input/Input.module.scss
+++ b/client/src/components/Pages/dispositif/Input/Input.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   label {
diff --git a/client/src/components/Pages/dispositif/LangueMenu/LangueMenu.module.scss b/client/src/components/Pages/dispositif/LangueMenu/LangueMenu.module.scss
index 622d02834c..ec21d5bd35 100644
--- a/client/src/components/Pages/dispositif/LangueMenu/LangueMenu.module.scss
+++ b/client/src/components/Pages/dispositif/LangueMenu/LangueMenu.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
 
 .dropdown {
   & > button {
diff --git a/client/src/components/Pages/dispositif/LangueSelectList/LangueSelectList.module.scss b/client/src/components/Pages/dispositif/LangueSelectList/LangueSelectList.module.scss
index a2e65332b1..6bf718dd85 100644
--- a/client/src/components/Pages/dispositif/LangueSelectList/LangueSelectList.module.scss
+++ b/client/src/components/Pages/dispositif/LangueSelectList/LangueSelectList.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .btn {
   margin-bottom: u(6);
diff --git a/client/src/components/Pages/dispositif/LinkedThemes/LinkedThemes.module.scss b/client/src/components/Pages/dispositif/LinkedThemes/LinkedThemes.module.scss
index 7a588b02d5..94c7b980d9 100644
--- a/client/src/components/Pages/dispositif/LinkedThemes/LinkedThemes.module.scss
+++ b/client/src/components/Pages/dispositif/LinkedThemes/LinkedThemes.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   margin-bottom: u(16);
diff --git a/client/src/components/Pages/dispositif/Map/Map.module.scss b/client/src/components/Pages/dispositif/Map/Map.module.scss
index fae83abd80..486c4c0989 100644
--- a/client/src/components/Pages/dispositif/Map/Map.module.scss
+++ b/client/src/components/Pages/dispositif/Map/Map.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/map";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/map";
 
 .container {
   height: 320px;
diff --git a/client/src/components/Pages/dispositif/Map/PopupContent/PopupContent.module.scss b/client/src/components/Pages/dispositif/Map/PopupContent/PopupContent.module.scss
index 30305027a0..b8614dbc23 100644
--- a/client/src/components/Pages/dispositif/Map/PopupContent/PopupContent.module.scss
+++ b/client/src/components/Pages/dispositif/Map/PopupContent/PopupContent.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
 
 .popup {
   position: relative;
diff --git a/client/src/components/Pages/dispositif/Map/Sidebar/Sidebar.module.scss b/client/src/components/Pages/dispositif/Map/Sidebar/Sidebar.module.scss
index 44073fb06f..ea7d32d779 100644
--- a/client/src/components/Pages/dispositif/Map/Sidebar/Sidebar.module.scss
+++ b/client/src/components/Pages/dispositif/Map/Sidebar/Sidebar.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .sidebar {
   position: absolute;
diff --git a/client/src/components/Pages/dispositif/Metadatas/BaseCard/BaseCard.module.scss b/client/src/components/Pages/dispositif/Metadatas/BaseCard/BaseCard.module.scss
index 718c0313f3..1221bf88cf 100644
--- a/client/src/components/Pages/dispositif/Metadatas/BaseCard/BaseCard.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/BaseCard/BaseCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .card {
   background: $lightBackgroundElevationAlt;
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardAvailability/CardAvailability.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardAvailability/CardAvailability.module.scss
index 6a42e65971..8d28b87a53 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardAvailability/CardAvailability.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardAvailability/CardAvailability.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardConditions/CardConditions.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardConditions/CardConditions.module.scss
index 6a42e65971..8d28b87a53 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardConditions/CardConditions.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardConditions/CardConditions.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardLocation/CardLocation.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardLocation/CardLocation.module.scss
index 6a42e65971..8d28b87a53 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardLocation/CardLocation.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardLocation/CardLocation.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/CardMainSponsor.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/CardMainSponsor.module.scss
index 95f9add92b..c12e990d9c 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/CardMainSponsor.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/CardMainSponsor.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .name {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/DeleteContentModal/DeleteContentModal.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/DeleteContentModal/DeleteContentModal.module.scss
index a57a0799a8..da475eed64 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/DeleteContentModal/DeleteContentModal.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardMainSponsor/DeleteContentModal/DeleteContentModal.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
+@import "~scss/mixins/text";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardPrice/CardPrice.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardPrice/CardPrice.module.scss
index 6a42e65971..8d28b87a53 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardPrice/CardPrice.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardPrice/CardPrice.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardPublic/CardPublic.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardPublic/CardPublic.module.scss
index 6a42e65971..8d28b87a53 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardPublic/CardPublic.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardPublic/CardPublic.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
diff --git a/client/src/components/Pages/dispositif/Metadatas/CardTheme/CardTheme.module.scss b/client/src/components/Pages/dispositif/Metadatas/CardTheme/CardTheme.module.scss
index 63019212d6..850d595206 100644
--- a/client/src/components/Pages/dispositif/Metadatas/CardTheme/CardTheme.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/CardTheme/CardTheme.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .badge {
   padding: u(1) u(3);
diff --git a/client/src/components/Pages/dispositif/Metadatas/Metadatas.module.scss b/client/src/components/Pages/dispositif/Metadatas/Metadatas.module.scss
index 5483fa268a..e9f043733b 100644
--- a/client/src/components/Pages/dispositif/Metadatas/Metadatas.module.scss
+++ b/client/src/components/Pages/dispositif/Metadatas/Metadatas.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 .marque {
   @include dsfr-text("small");
diff --git a/client/src/components/Pages/dispositif/RichText/RichText.module.scss b/client/src/components/Pages/dispositif/RichText/RichText.module.scss
index 13de0a2e8f..8012f3fbf0 100644
--- a/client/src/components/Pages/dispositif/RichText/RichText.module.scss
+++ b/client/src/components/Pages/dispositif/RichText/RichText.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .content {
   @include dsfr-text("normal");
diff --git a/client/src/components/Pages/dispositif/SMSForm/SMSForm.module.scss b/client/src/components/Pages/dispositif/SMSForm/SMSForm.module.scss
index 4c6614a99c..afaaa2eb0b 100644
--- a/client/src/components/Pages/dispositif/SMSForm/SMSForm.module.scss
+++ b/client/src/components/Pages/dispositif/SMSForm/SMSForm.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
 
 .container {
   margin-top: u(10);
diff --git a/client/src/components/Pages/dispositif/Section/Section.module.scss b/client/src/components/Pages/dispositif/Section/Section.module.scss
index 56b6e3d292..8195d2559c 100644
--- a/client/src/components/Pages/dispositif/Section/Section.module.scss
+++ b/client/src/components/Pages/dispositif/Section/Section.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   margin-bottom: u(20);
diff --git a/client/src/components/Pages/dispositif/SectionButtons/ReactionModal/ReactionModal.module.scss b/client/src/components/Pages/dispositif/SectionButtons/ReactionModal/ReactionModal.module.scss
index abcac2419a..c78f835fdd 100644
--- a/client/src/components/Pages/dispositif/SectionButtons/ReactionModal/ReactionModal.module.scss
+++ b/client/src/components/Pages/dispositif/SectionButtons/ReactionModal/ReactionModal.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/input";
 
 .footer {
   margin-top: u(8);
diff --git a/client/src/components/Pages/dispositif/SectionButtons/SectionButtons.module.scss b/client/src/components/Pages/dispositif/SectionButtons/SectionButtons.module.scss
index ed9d9c76e9..2b41358bb4 100644
--- a/client/src/components/Pages/dispositif/SectionButtons/SectionButtons.module.scss
+++ b/client/src/components/Pages/dispositif/SectionButtons/SectionButtons.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/icons";
 
 $iconSize: u(4);
 $btnSize: u(8);
diff --git a/client/src/components/Pages/dispositif/SectionTitle/SectionTitle.module.scss b/client/src/components/Pages/dispositif/SectionTitle/SectionTitle.module.scss
index 9b2652d3b5..5833aec2bc 100644
--- a/client/src/components/Pages/dispositif/SectionTitle/SectionTitle.module.scss
+++ b/client/src/components/Pages/dispositif/SectionTitle/SectionTitle.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 .title {
   @include dsfr-text("h2");
diff --git a/client/src/components/Pages/dispositif/ShareButtons/ShareButtons.module.scss b/client/src/components/Pages/dispositif/ShareButtons/ShareButtons.module.scss
index 7e0a9eada2..ea4e4639fc 100644
--- a/client/src/components/Pages/dispositif/ShareButtons/ShareButtons.module.scss
+++ b/client/src/components/Pages/dispositif/ShareButtons/ShareButtons.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .container {
   margin-top: u(10);
diff --git a/client/src/components/Pages/dispositif/Sponsors/Sponsors.module.scss b/client/src/components/Pages/dispositif/Sponsors/Sponsors.module.scss
index ecb3df664a..9ec2cf1eb2 100644
--- a/client/src/components/Pages/dispositif/Sponsors/Sponsors.module.scss
+++ b/client/src/components/Pages/dispositif/Sponsors/Sponsors.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Status/Status.module.scss b/client/src/components/Pages/dispositif/Status/Status.module.scss
index de52a17f2b..b5fe84b9c7 100644
--- a/client/src/components/Pages/dispositif/Status/Status.module.scss
+++ b/client/src/components/Pages/dispositif/Status/Status.module.scss
@@ -1,3 +1,3 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
diff --git a/client/src/components/Pages/dispositif/StructureReceiveDispositif/StructureReceiveDispositif.module.scss b/client/src/components/Pages/dispositif/StructureReceiveDispositif/StructureReceiveDispositif.module.scss
index a8d0834411..106b74ea94 100644
--- a/client/src/components/Pages/dispositif/StructureReceiveDispositif/StructureReceiveDispositif.module.scss
+++ b/client/src/components/Pages/dispositif/StructureReceiveDispositif/StructureReceiveDispositif.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .container {
   padding: u(4);
diff --git a/client/src/components/Pages/dispositif/Summary/Summary.module.scss b/client/src/components/Pages/dispositif/Summary/Summary.module.scss
index 5344784165..392e5f6949 100644
--- a/client/src/components/Pages/dispositif/Summary/Summary.module.scss
+++ b/client/src/components/Pages/dispositif/Summary/Summary.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/responsive";
 
 .card {
   display: none;
diff --git a/client/src/components/Pages/dispositif/Text/Text.module.scss b/client/src/components/Pages/dispositif/Text/Text.module.scss
index a5088a05c8..b8ff655f42 100644
--- a/client/src/components/Pages/dispositif/Text/Text.module.scss
+++ b/client/src/components/Pages/dispositif/Text/Text.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/links";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/links";
 
 .highlighted {
   background: $lightBackgroundActionLowBlueFrance;
diff --git a/client/src/components/Pages/dispositif/Title/Title.module.scss b/client/src/components/Pages/dispositif/Title/Title.module.scss
index 21f3ff5fb6..433793d630 100644
--- a/client/src/components/Pages/dispositif/Title/Title.module.scss
+++ b/client/src/components/Pages/dispositif/Title/Title.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
 
 .title {
   @include dsfr-text("h1");
diff --git a/client/src/components/Pages/dispositif/Translation/ModalWelcome/ModalWelcome.module.scss b/client/src/components/Pages/dispositif/Translation/ModalWelcome/ModalWelcome.module.scss
index 3e4f37949e..4d35a4962a 100644
--- a/client/src/components/Pages/dispositif/Translation/ModalWelcome/ModalWelcome.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/ModalWelcome/ModalWelcome.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .modal {
   height: 584px;
diff --git a/client/src/components/Pages/dispositif/Translation/SectionTitleAbstract/SectionTitleAbstract.module.scss b/client/src/components/Pages/dispositif/Translation/SectionTitleAbstract/SectionTitleAbstract.module.scss
index c61c619140..358f59bf37 100644
--- a/client/src/components/Pages/dispositif/Translation/SectionTitleAbstract/SectionTitleAbstract.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/SectionTitleAbstract/SectionTitleAbstract.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
 
 .abstract {
   display: flex;
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/BottomButtons/BottomButtons.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/BottomButtons/BottomButtons.module.scss
index 7c1d1dd693..f98fc3402d 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/BottomButtons/BottomButtons.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/BottomButtons/BottomButtons.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .buttons {
   margin-top: u(4);
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/SuggestionsNavButtons/SuggestionsNavButtons.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/SuggestionsNavButtons/SuggestionsNavButtons.module.scss
index 35b7a6dcb8..ea7a54a1f5 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/SuggestionsNavButtons/SuggestionsNavButtons.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/SuggestionsNavButtons/SuggestionsNavButtons.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/text";
 
 .nav {
   @include iconSize(u(4));
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditAuthor/TranslationEditAuthor.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditAuthor/TranslationEditAuthor.module.scss
index 57ae85ee17..52d59d9eb5 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditAuthor/TranslationEditAuthor.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditAuthor/TranslationEditAuthor.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
 
 .delete {
   @include iconSize(u(4));
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditField/TranslationEditField.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditField/TranslationEditField.module.scss
index 6f3e269c0a..d9dc984717 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditField/TranslationEditField.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationEditField/TranslationEditField.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
 
 .richtext {
   border: none !important;
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationInput.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationInput.module.scss
index a22d3704fc..f208555bf9 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationInput.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationInput.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/btn";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/btn";
+@import "~scss/mixins/responsive";
 
 .xl .value {
   @include dsfr-text("h1");
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationStatus/TranslationStatus.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationStatus/TranslationStatus.module.scss
index 9e7c10595c..2e40e94b3a 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationStatus/TranslationStatus.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/TranslationStatus/TranslationStatus.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .badge {
   @include dsfr-text("small");
diff --git a/client/src/components/Pages/dispositif/Translation/TranslationInput/UserSuggest/UserSuggest.module.scss b/client/src/components/Pages/dispositif/Translation/TranslationInput/UserSuggest/UserSuggest.module.scss
index 04ea9daa2d..42c202f819 100644
--- a/client/src/components/Pages/dispositif/Translation/TranslationInput/UserSuggest/UserSuggest.module.scss
+++ b/client/src/components/Pages/dispositif/Translation/TranslationInput/UserSuggest/UserSuggest.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/icons";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/icons";
+@import "~scss/mixins/responsive";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/embed/EmbedHeader/EmbedHeader.module.scss b/client/src/components/Pages/embed/EmbedHeader/EmbedHeader.module.scss
index 46e42ade9f..3e2d588bac 100644
--- a/client/src/components/Pages/embed/EmbedHeader/EmbedHeader.module.scss
+++ b/client/src/components/Pages/embed/EmbedHeader/EmbedHeader.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/variables";
 
 .text {
   @include text("h4");
diff --git a/client/src/components/Pages/homepage/CommunityCard/CommunityCard.module.scss b/client/src/components/Pages/homepage/CommunityCard/CommunityCard.module.scss
index 4a716d7762..ea142aa7fe 100644
--- a/client/src/components/Pages/homepage/CommunityCard/CommunityCard.module.scss
+++ b/client/src/components/Pages/homepage/CommunityCard/CommunityCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $red: #9e180a;
 $light_red: #f9e8e8;
diff --git a/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.desktop.module.scss b/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.desktop.module.scss
index 102a944b25..ab4732b155 100644
--- a/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.desktop.module.scss
+++ b/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.desktop.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 .container {
   width: 100%;
diff --git a/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.mobile.module.scss b/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.mobile.module.scss
index d90efc04b7..07e4bd7a85 100644
--- a/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.mobile.module.scss
+++ b/client/src/components/Pages/homepage/HomeSearchHeader/HomeSearchHeader.mobile.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/Pages/homepage/Sections/AllThemes/AllThemes.module.scss b/client/src/components/Pages/homepage/Sections/AllThemes/AllThemes.module.scss
index 36cab5276d..ea170cebfc 100644
--- a/client/src/components/Pages/homepage/Sections/AllThemes/AllThemes.module.scss
+++ b/client/src/components/Pages/homepage/Sections/AllThemes/AllThemes.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .themes {
   h2 {
diff --git a/client/src/components/Pages/homepage/Sections/Community/Community.module.scss b/client/src/components/Pages/homepage/Sections/Community/Community.module.scss
index c18779d89f..480558ff39 100644
--- a/client/src/components/Pages/homepage/Sections/Community/Community.module.scss
+++ b/client/src/components/Pages/homepage/Sections/Community/Community.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
 
 .row {
   display: flex;
diff --git a/client/src/components/Pages/homepage/Sections/HelpUs/HelpUs.module.scss b/client/src/components/Pages/homepage/Sections/HelpUs/HelpUs.module.scss
index a6d8eba73b..25281294fa 100644
--- a/client/src/components/Pages/homepage/Sections/HelpUs/HelpUs.module.scss
+++ b/client/src/components/Pages/homepage/Sections/HelpUs/HelpUs.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
 
 .help_text {
   margin-top: u(6);
diff --git a/client/src/components/Pages/homepage/Sections/Hero/Hero.module.scss b/client/src/components/Pages/homepage/Sections/Hero/Hero.module.scss
index 28fb7288cc..4617d3ea7a 100644
--- a/client/src/components/Pages/homepage/Sections/Hero/Hero.module.scss
+++ b/client/src/components/Pages/homepage/Sections/Hero/Hero.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 $navbarHeight: 160px;
 $paddingTop: u(18);
diff --git a/client/src/components/Pages/homepage/Sections/Infos/Infos.module.scss b/client/src/components/Pages/homepage/Sections/Infos/Infos.module.scss
index 2829f7cd72..62a010ab26 100644
--- a/client/src/components/Pages/homepage/Sections/Infos/Infos.module.scss
+++ b/client/src/components/Pages/homepage/Sections/Infos/Infos.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
 
 .infos {
   overflow-x: hidden;
diff --git a/client/src/components/Pages/homepage/Sections/MobileApp/LanguageDropdown/LanguageDropdown.module.scss b/client/src/components/Pages/homepage/Sections/MobileApp/LanguageDropdown/LanguageDropdown.module.scss
index a6ac31294b..5d1345b7ac 100644
--- a/client/src/components/Pages/homepage/Sections/MobileApp/LanguageDropdown/LanguageDropdown.module.scss
+++ b/client/src/components/Pages/homepage/Sections/MobileApp/LanguageDropdown/LanguageDropdown.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .dropdown {
   & > button {
diff --git a/client/src/components/Pages/homepage/Sections/MobileApp/MobileApp.module.scss b/client/src/components/Pages/homepage/Sections/MobileApp/MobileApp.module.scss
index 557262e50b..01054669f4 100644
--- a/client/src/components/Pages/homepage/Sections/MobileApp/MobileApp.module.scss
+++ b/client/src/components/Pages/homepage/Sections/MobileApp/MobileApp.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   background: radial-gradient(150.13% 150.13% at 50% 50%, #0421b1 0%, #1b62d8 100%);
diff --git a/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppIllu/MobileAppIllu.module.scss b/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppIllu/MobileAppIllu.module.scss
index 8f9e6b29b4..988fee0d80 100644
--- a/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppIllu/MobileAppIllu.module.scss
+++ b/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppIllu/MobileAppIllu.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   position: relative;
diff --git a/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppSmsForm/MobileAppSmsForm.module.scss b/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppSmsForm/MobileAppSmsForm.module.scss
index 426f39b663..b335d688e4 100644
--- a/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppSmsForm/MobileAppSmsForm.module.scss
+++ b/client/src/components/Pages/homepage/Sections/MobileApp/MobileAppSmsForm/MobileAppSmsForm.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   margin-top: u(8);
diff --git a/client/src/components/Pages/homepage/Sections/NewContent/NewContent.module.scss b/client/src/components/Pages/homepage/Sections/NewContent/NewContent.module.scss
index 9cd6a42d64..99022b06d0 100644
--- a/client/src/components/Pages/homepage/Sections/NewContent/NewContent.module.scss
+++ b/client/src/components/Pages/homepage/Sections/NewContent/NewContent.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .sliders {
   overflow: hidden;
diff --git a/client/src/components/Pages/qui-sommes-nous/Team.module.scss b/client/src/components/Pages/qui-sommes-nous/Team.module.scss
index c2f2aacea0..ce75f86752 100644
--- a/client/src/components/Pages/qui-sommes-nous/Team.module.scss
+++ b/client/src/components/Pages/qui-sommes-nous/Team.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   display: flex;
diff --git a/client/src/components/Pages/recherche/CardSlider/CardSlider.module.scss b/client/src/components/Pages/recherche/CardSlider/CardSlider.module.scss
index c205e71580..bcfeb0fd2d 100644
--- a/client/src/components/Pages/recherche/CardSlider/CardSlider.module.scss
+++ b/client/src/components/Pages/recherche/CardSlider/CardSlider.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .dispositifs {
   padding-bottom: u(4);
diff --git a/client/src/components/Pages/recherche/DispositifCardTitle/DispositifCardTitle.module.scss b/client/src/components/Pages/recherche/DispositifCardTitle/DispositifCardTitle.module.scss
index 6ba12b3ccc..5657b05c7f 100644
--- a/client/src/components/Pages/recherche/DispositifCardTitle/DispositifCardTitle.module.scss
+++ b/client/src/components/Pages/recherche/DispositifCardTitle/DispositifCardTitle.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/mixins/unit";
+@import "~scss/mixins/unit";
 
 .title_theme {
   margin-top: 72px;
diff --git a/client/src/components/Pages/recherche/DropdownMenuMobile/DropdownMenuMobile.module.scss b/client/src/components/Pages/recherche/DropdownMenuMobile/DropdownMenuMobile.module.scss
index 5d85090f44..72e3c395ae 100644
--- a/client/src/components/Pages/recherche/DropdownMenuMobile/DropdownMenuMobile.module.scss
+++ b/client/src/components/Pages/recherche/DropdownMenuMobile/DropdownMenuMobile.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   background: $white;
@@ -51,7 +51,7 @@
   position: fixed;
   bottom: 0;
   width: 100%;
-  box-shadow: 0 -16px 16px 0 #0000000D;
+  box-shadow: 0 -16px 16px 0 #0000000d;
   background: $white;
   z-index: 3;
 
diff --git a/client/src/components/Pages/recherche/LocationDropdown/LocationDropdown.module.scss b/client/src/components/Pages/recherche/LocationDropdown/LocationDropdown.module.scss
index d346156c9c..b8fb92b2ed 100644
--- a/client/src/components/Pages/recherche/LocationDropdown/LocationDropdown.module.scss
+++ b/client/src/components/Pages/recherche/LocationDropdown/LocationDropdown.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/Pages/recherche/NotDeployedBanner/NotDeployedBanner.module.scss b/client/src/components/Pages/recherche/NotDeployedBanner/NotDeployedBanner.module.scss
index eb70fa4427..b2e662077c 100644
--- a/client/src/components/Pages/recherche/NotDeployedBanner/NotDeployedBanner.module.scss
+++ b/client/src/components/Pages/recherche/NotDeployedBanner/NotDeployedBanner.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   background-color: $attention;
diff --git a/client/src/components/Pages/recherche/ResultsFilter/ResultsFilter.module.scss b/client/src/components/Pages/recherche/ResultsFilter/ResultsFilter.module.scss
index 437cb8ef19..19eae2860b 100644
--- a/client/src/components/Pages/recherche/ResultsFilter/ResultsFilter.module.scss
+++ b/client/src/components/Pages/recherche/ResultsFilter/ResultsFilter.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   margin-top: 30px;
diff --git a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.desktop.module.scss b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.desktop.module.scss
index 66b0856d11..c8bbd31822 100644
--- a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.desktop.module.scss
+++ b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.desktop.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 .container {
   background: radial-gradient(150% 150% at 50% 50%, $bleuCharte 0%, #1b62d8 100%);
diff --git a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.mobile.module.scss b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.mobile.module.scss
index 4bfc7bcea1..910e17787a 100644
--- a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.mobile.module.scss
+++ b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.mobile.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   background: radial-gradient(150% 150% at 50% 50%, $bleuCharte 0%, #1b62d8 100%);
diff --git a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.module.scss b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.module.scss
index a426295d46..1176bd7d5f 100644
--- a/client/src/components/Pages/recherche/SearchHeader/SearchHeader.module.scss
+++ b/client/src/components/Pages/recherche/SearchHeader/SearchHeader.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $scrollLimit: 565px;
 
diff --git a/client/src/components/Pages/recherche/SearchInput/SearchInput.module.scss b/client/src/components/Pages/recherche/SearchInput/SearchInput.module.scss
index 52a1939189..c613a1fefb 100644
--- a/client/src/components/Pages/recherche/SearchInput/SearchInput.module.scss
+++ b/client/src/components/Pages/recherche/SearchInput/SearchInput.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/btn";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/btn";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .filter {
   padding: u(4);
diff --git a/client/src/components/Pages/recherche/SearchResults/SearchResults.module.scss b/client/src/components/Pages/recherche/SearchResults/SearchResults.module.scss
index 2b7b9ebf64..69ad2107d5 100644
--- a/client/src/components/Pages/recherche/SearchResults/SearchResults.module.scss
+++ b/client/src/components/Pages/recherche/SearchResults/SearchResults.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .section {
   order: 3;
diff --git a/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.desktop.module.scss b/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.desktop.module.scss
index 79c43a9e9c..d9fabf5380 100644
--- a/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.desktop.module.scss
+++ b/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.desktop.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .dropdown {
   margin: u(1);
diff --git a/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.mobile.module.scss b/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.mobile.module.scss
index d18bca1b3a..f26b71664b 100644
--- a/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.mobile.module.scss
+++ b/client/src/components/Pages/recherche/SecondaryFilter/SecondaryFilter.mobile.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .container {
   margin-bottom: u(8);
diff --git a/client/src/components/Pages/recherche/SeeMoreButton/SeeMoreButton.module.scss b/client/src/components/Pages/recherche/SeeMoreButton/SeeMoreButton.module.scss
index f61a3989bf..de9b13164d 100644
--- a/client/src/components/Pages/recherche/SeeMoreButton/SeeMoreButton.module.scss
+++ b/client/src/components/Pages/recherche/SeeMoreButton/SeeMoreButton.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .container {
   position: absolute;
diff --git a/client/src/components/Pages/recherche/ThemeDropdown/ThemeDropdown.module.scss b/client/src/components/Pages/recherche/ThemeDropdown/ThemeDropdown.module.scss
index 61d8979156..33dceab9a5 100644
--- a/client/src/components/Pages/recherche/ThemeDropdown/ThemeDropdown.module.scss
+++ b/client/src/components/Pages/recherche/ThemeDropdown/ThemeDropdown.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/Pages/staticPages/common/Accordion/Accordion.module.scss b/client/src/components/Pages/staticPages/common/Accordion/Accordion.module.scss
index 22d16f8ea7..8e2a019ae7 100644
--- a/client/src/components/Pages/staticPages/common/Accordion/Accordion.module.scss
+++ b/client/src/components/Pages/staticPages/common/Accordion/Accordion.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   position: relative;
diff --git a/client/src/components/Pages/staticPages/common/AutoplayVideo/AutoplayVideo.module.scss b/client/src/components/Pages/staticPages/common/AutoplayVideo/AutoplayVideo.module.scss
index 45c4fa8624..2e23b3c062 100644
--- a/client/src/components/Pages/staticPages/common/AutoplayVideo/AutoplayVideo.module.scss
+++ b/client/src/components/Pages/staticPages/common/AutoplayVideo/AutoplayVideo.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .video {
   border: 8px solid $white;
diff --git a/client/src/components/Pages/staticPages/common/Card/Card.module.scss b/client/src/components/Pages/staticPages/common/Card/Card.module.scss
index e384383380..157a0e90a1 100644
--- a/client/src/components/Pages/staticPages/common/Card/Card.module.scss
+++ b/client/src/components/Pages/staticPages/common/Card/Card.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $breakpoint: "lg-limit";
 
diff --git a/client/src/components/Pages/staticPages/common/CountUpFigure/CountUpFigure.module.scss b/client/src/components/Pages/staticPages/common/CountUpFigure/CountUpFigure.module.scss
index d04bb798dd..13191e700c 100644
--- a/client/src/components/Pages/staticPages/common/CountUpFigure/CountUpFigure.module.scss
+++ b/client/src/components/Pages/staticPages/common/CountUpFigure/CountUpFigure.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .figure {
   @include text("h1");
diff --git a/client/src/components/Pages/staticPages/common/HeroArrow/HeroArrow.module.scss b/client/src/components/Pages/staticPages/common/HeroArrow/HeroArrow.module.scss
index 48d5340c08..67795463d4 100644
--- a/client/src/components/Pages/staticPages/common/HeroArrow/HeroArrow.module.scss
+++ b/client/src/components/Pages/staticPages/common/HeroArrow/HeroArrow.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   margin-top: u(6);
diff --git a/client/src/components/Pages/staticPages/common/InlineLink/InlineLink.module.scss b/client/src/components/Pages/staticPages/common/InlineLink/InlineLink.module.scss
index f25a058814..749c2d1258 100644
--- a/client/src/components/Pages/staticPages/common/InlineLink/InlineLink.module.scss
+++ b/client/src/components/Pages/staticPages/common/InlineLink/InlineLink.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 $breakpoint: "lg-limit";
 $purple: #3d2884;
diff --git a/client/src/components/Pages/staticPages/common/LanguageIcon/LanguageIcon.module.scss b/client/src/components/Pages/staticPages/common/LanguageIcon/LanguageIcon.module.scss
index bb5e5b0bdb..fadadd784a 100644
--- a/client/src/components/Pages/staticPages/common/LanguageIcon/LanguageIcon.module.scss
+++ b/client/src/components/Pages/staticPages/common/LanguageIcon/LanguageIcon.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $breakpoint: "lg-limit";
 
diff --git a/client/src/components/Pages/staticPages/common/Register/Register.module.scss b/client/src/components/Pages/staticPages/common/Register/Register.module.scss
index e055ecc7dd..0c223ebeae 100644
--- a/client/src/components/Pages/staticPages/common/Register/Register.module.scss
+++ b/client/src/components/Pages/staticPages/common/Register/Register.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .register {
   max-width: 435px;
diff --git a/client/src/components/Pages/staticPages/common/SecondaryNavbar/SecondaryNavbar.module.scss b/client/src/components/Pages/staticPages/common/SecondaryNavbar/SecondaryNavbar.module.scss
index 7866b52106..1c28476267 100644
--- a/client/src/components/Pages/staticPages/common/SecondaryNavbar/SecondaryNavbar.module.scss
+++ b/client/src/components/Pages/staticPages/common/SecondaryNavbar/SecondaryNavbar.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   position: sticky;
diff --git a/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss b/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss
index 9d3b47209c..d89336b41b 100644
--- a/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss
+++ b/client/src/components/Pages/staticPages/common/StepContent/StepContent.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $orange: #cd5605;
 $purple: #3d2884;
diff --git a/client/src/components/Pages/staticPages/publier/CardExample/CardExample.module.scss b/client/src/components/Pages/staticPages/publier/CardExample/CardExample.module.scss
index 62723d4704..0c901b87b5 100644
--- a/client/src/components/Pages/staticPages/publier/CardExample/CardExample.module.scss
+++ b/client/src/components/Pages/staticPages/publier/CardExample/CardExample.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $colorOk: $vert2;
 $colorKo: $error;
diff --git a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonyAuthor/TestimonyAuthor.module.scss b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonyAuthor/TestimonyAuthor.module.scss
index eaade90e94..431e3768a8 100644
--- a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonyAuthor/TestimonyAuthor.module.scss
+++ b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonyAuthor/TestimonyAuthor.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   position: relative;
diff --git a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.module.scss b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.module.scss
index 21fb07b2fc..95d44475ef 100644
--- a/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.module.scss
+++ b/client/src/components/Pages/staticPages/publier/TestimonySlider/TestimonySlider.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   position: relative;
diff --git a/client/src/components/Pages/staticPages/traduire/LanguageCard/LanguageCard.module.scss b/client/src/components/Pages/staticPages/traduire/LanguageCard/LanguageCard.module.scss
index dbeef76333..15116f5bd2 100644
--- a/client/src/components/Pages/staticPages/traduire/LanguageCard/LanguageCard.module.scss
+++ b/client/src/components/Pages/staticPages/traduire/LanguageCard/LanguageCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .container {
   background: $white;
diff --git a/client/src/components/UI/AdminNeedButton/AdminNeedButton.module.scss b/client/src/components/UI/AdminNeedButton/AdminNeedButton.module.scss
index feebee27a1..706ef6fa7e 100644
--- a/client/src/components/UI/AdminNeedButton/AdminNeedButton.module.scss
+++ b/client/src/components/UI/AdminNeedButton/AdminNeedButton.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .btn {
   font-weight: bold;
@@ -50,8 +50,8 @@
   }
 }
 
-
-.text, .subtitle {
+.text,
+.subtitle {
   line-height: 16px;
 }
 .subtitle {
diff --git a/client/src/components/UI/AdminThemeButton/AdminThemeButton.module.scss b/client/src/components/UI/AdminThemeButton/AdminThemeButton.module.scss
index 7e89badaed..97137d476b 100644
--- a/client/src/components/UI/AdminThemeButton/AdminThemeButton.module.scss
+++ b/client/src/components/UI/AdminThemeButton/AdminThemeButton.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .btn {
   font-weight: bold;
diff --git a/client/src/components/UI/Badge/Badge.module.scss b/client/src/components/UI/Badge/Badge.module.scss
index 91566a0f18..e636dbe84b 100644
--- a/client/src/components/UI/Badge/Badge.module.scss
+++ b/client/src/components/UI/Badge/Badge.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/icons";
 
 .icon {
   display: inline-flex;
diff --git a/client/src/components/UI/BaseModal/BaseModal.module.scss b/client/src/components/UI/BaseModal/BaseModal.module.scss
index 2a0e9f35fa..aa554e4552 100644
--- a/client/src/components/UI/BaseModal/BaseModal.module.scss
+++ b/client/src/components/UI/BaseModal/BaseModal.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .modal {
   max-width: 800px !important;
diff --git a/client/src/components/UI/BubbleFlag/BubbleFlag.module.scss b/client/src/components/UI/BubbleFlag/BubbleFlag.module.scss
index 8ef8517d5d..1dd4ce9228 100644
--- a/client/src/components/UI/BubbleFlag/BubbleFlag.module.scss
+++ b/client/src/components/UI/BubbleFlag/BubbleFlag.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .item {
   position: relative;
diff --git a/client/src/components/UI/Button/Button.module.scss b/client/src/components/UI/Button/Button.module.scss
index dca9bb7520..0224139883 100644
--- a/client/src/components/UI/Button/Button.module.scss
+++ b/client/src/components/UI/Button/Button.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/icons";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/icons";
 
 @keyframes rotate {
   0% {
diff --git a/client/src/components/UI/Camembert/Camembert.module.scss b/client/src/components/UI/Camembert/Camembert.module.scss
index 36e29fd666..63e48be525 100644
--- a/client/src/components/UI/Camembert/Camembert.module.scss
+++ b/client/src/components/UI/Camembert/Camembert.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .container {
   width: 28px;
diff --git a/client/src/components/UI/Checkbox/Checkbox.module.scss b/client/src/components/UI/Checkbox/Checkbox.module.scss
index d3d8eed0e5..c5f192b31d 100644
--- a/client/src/components/UI/Checkbox/Checkbox.module.scss
+++ b/client/src/components/UI/Checkbox/Checkbox.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/variables";
 
 .checkbox {
   position: relative;
diff --git a/client/src/components/UI/ContentSlider/ContentSlider.module.scss b/client/src/components/UI/ContentSlider/ContentSlider.module.scss
index dba56b581c..a469a1a61f 100644
--- a/client/src/components/UI/ContentSlider/ContentSlider.module.scss
+++ b/client/src/components/UI/ContentSlider/ContentSlider.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $fadeWidth_lg: 160px;
 $fadeWidth_md: 50px;
diff --git a/client/src/components/UI/CustomSeachBar/CustomSearchBar.module.scss b/client/src/components/UI/CustomSeachBar/CustomSearchBar.module.scss
index 4814abeef0..f8a5e6c92a 100644
--- a/client/src/components/UI/CustomSeachBar/CustomSearchBar.module.scss
+++ b/client/src/components/UI/CustomSeachBar/CustomSearchBar.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .container {
   background: $white;
@@ -26,7 +26,7 @@
     outline: none !important;
   }
   @include media-min("widescreen-up") {
-    width: 240px
+    width: 240px;
   }
   &.no_margin {
     margin-right: 0;
diff --git a/client/src/components/UI/DemarcheCard/DemarcheCard.module.scss b/client/src/components/UI/DemarcheCard/DemarcheCard.module.scss
index 19eb7f25f1..5402d60ff8 100644
--- a/client/src/components/UI/DemarcheCard/DemarcheCard.module.scss
+++ b/client/src/components/UI/DemarcheCard/DemarcheCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/text";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .title {
   @include text("large");
@@ -14,6 +14,7 @@
 
   overflow: hidden;
   text-overflow: ellipsis;
+  line-clamp: 3;
   -webkit-line-clamp: 3;
   display: -webkit-inline-box;
   -webkit-box-orient: vertical;
diff --git a/client/src/components/UI/DispositifCard/DispositifCard.module.scss b/client/src/components/UI/DispositifCard/DispositifCard.module.scss
index b6a1631394..8fc34b229c 100644
--- a/client/src/components/UI/DispositifCard/DispositifCard.module.scss
+++ b/client/src/components/UI/DispositifCard/DispositifCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .location {
   display: flex;
diff --git a/client/src/components/UI/FButton/FButton.module.scss b/client/src/components/UI/FButton/FButton.module.scss
index 68f29f9a02..e87a74e537 100644
--- a/client/src/components/UI/FButton/FButton.module.scss
+++ b/client/src/components/UI/FButton/FButton.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 body .btn {
   font-weight: bold;
diff --git a/client/src/components/UI/FButtonMobile/FButtonMobile.module.scss b/client/src/components/UI/FButtonMobile/FButtonMobile.module.scss
index 03ec6e86d5..cc13c469b7 100644
--- a/client/src/components/UI/FButtonMobile/FButtonMobile.module.scss
+++ b/client/src/components/UI/FButtonMobile/FButtonMobile.module.scss
@@ -1,15 +1,15 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .btn {
-  display:flex;
+  display: flex;
   width: 100%;
   justify-content: center;
   text-align: center;
   margin: auto;
   padding: 20px;
   border-radius: $radius;
-  align-items:center;
+  align-items: center;
   background-color: $gray60;
   font-size: $text-normal;
   color: white;
diff --git a/client/src/components/UI/FInput/FInput.module.scss b/client/src/components/UI/FInput/FInput.module.scss
index 4386c8b2d1..3f585588a4 100644
--- a/client/src/components/UI/FInput/FInput.module.scss
+++ b/client/src/components/UI/FInput/FInput.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 $placeholderColor: $gray90;
 $borderRadius: 12px;
diff --git a/client/src/components/UI/FRLink/FRLink.module.scss b/client/src/components/UI/FRLink/FRLink.module.scss
index c93b89722c..1be9ac2832 100644
--- a/client/src/components/UI/FRLink/FRLink.module.scss
+++ b/client/src/components/UI/FRLink/FRLink.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
 
 .link {
   color: $lightTextActionHighBlueFrance !important;
diff --git a/client/src/components/UI/FSearchBtn/FSearchBtn.module.scss b/client/src/components/UI/FSearchBtn/FSearchBtn.module.scss
index fe3794efe2..3d600a6795 100644
--- a/client/src/components/UI/FSearchBtn/FSearchBtn.module.scss
+++ b/client/src/components/UI/FSearchBtn/FSearchBtn.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/colors.scss";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/colors.scss";
+@import "~scss/variables";
 
 .search_btn {
   display: flex;
diff --git a/client/src/components/UI/FavoriteButton/FavoriteButton.module.scss b/client/src/components/UI/FavoriteButton/FavoriteButton.module.scss
index 96cdc77702..765e78dc9a 100644
--- a/client/src/components/UI/FavoriteButton/FavoriteButton.module.scss
+++ b/client/src/components/UI/FavoriteButton/FavoriteButton.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 .btn {
   width: u(8);
diff --git a/client/src/components/UI/FilterButton/FilterButton.module.scss b/client/src/components/UI/FilterButton/FilterButton.module.scss
index b40dbed215..4c657c6479 100644
--- a/client/src/components/UI/FilterButton/FilterButton.module.scss
+++ b/client/src/components/UI/FilterButton/FilterButton.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .btn {
   font-weight: bold;
diff --git a/client/src/components/UI/Flag/Flag.module.scss b/client/src/components/UI/Flag/Flag.module.scss
index 1ac69f7d46..b50d493f65 100644
--- a/client/src/components/UI/Flag/Flag.module.scss
+++ b/client/src/components/UI/Flag/Flag.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .flag {
   width: 20px;
diff --git a/client/src/components/UI/ImageInput/ImageInput.module.scss b/client/src/components/UI/ImageInput/ImageInput.module.scss
index 107b116319..714949d3e0 100644
--- a/client/src/components/UI/ImageInput/ImageInput.module.scss
+++ b/client/src/components/UI/ImageInput/ImageInput.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .col {
   display: flex;
@@ -55,7 +55,6 @@
   justify-content: center;
   align-items: center;
   z-index: 2;
-  background: rgba(0,0,0,0.4);
+  background: rgba(0, 0, 0, 0.4);
   border-radius: $radius;
-
 }
diff --git a/client/src/components/UI/Input/Input.module.scss b/client/src/components/UI/Input/Input.module.scss
index 5e284bbe58..46b836206a 100644
--- a/client/src/components/UI/Input/Input.module.scss
+++ b/client/src/components/UI/Input/Input.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $error: #b01917;
 
diff --git a/client/src/components/UI/RichCheckbox/RichCheckbox.module.scss b/client/src/components/UI/RichCheckbox/RichCheckbox.module.scss
index 003358fc0a..4d25d90eb5 100644
--- a/client/src/components/UI/RichCheckbox/RichCheckbox.module.scss
+++ b/client/src/components/UI/RichCheckbox/RichCheckbox.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/btn";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/btn";
 
 .choice {
   padding: u(4) u(6);
diff --git a/client/src/components/UI/RichTextInput/RichTextInput.module.scss b/client/src/components/UI/RichTextInput/RichTextInput.module.scss
index 12b2ff5e7f..62bfb6799a 100644
--- a/client/src/components/UI/RichTextInput/RichTextInput.module.scss
+++ b/client/src/components/UI/RichTextInput/RichTextInput.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .container {
   border: 1px solid $lightBorderDefaultGrey;
diff --git a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarButton/ToolbarButton.module.scss b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarButton/ToolbarButton.module.scss
index 2ae5cf884c..5da8d96f9e 100644
--- a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarButton/ToolbarButton.module.scss
+++ b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarButton/ToolbarButton.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .btn {
   height: u(8);
diff --git a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarDropdown/ToolbarDropdown.module.scss b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarDropdown/ToolbarDropdown.module.scss
index ec6c0360d9..71c837a2b5 100644
--- a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarDropdown/ToolbarDropdown.module.scss
+++ b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarDropdown/ToolbarDropdown.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
 
 .toggle {
   padding: 0;
diff --git a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.module.scss b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.module.scss
index fa978fc693..49fea5e2c5 100644
--- a/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.module.scss
+++ b/client/src/components/UI/RichTextInput/ToolbarPlugin/ToolbarPlugin.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
 
 .container {
   background-color: white;
diff --git a/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/FloatinLinkEditorPlugin.module.scss b/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/FloatinLinkEditorPlugin.module.scss
index 6ec6ff1beb..4abaac93bd 100644
--- a/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/FloatinLinkEditorPlugin.module.scss
+++ b/client/src/components/UI/RichTextInput/plugins/FloatingLinkEditorPlugin/FloatinLinkEditorPlugin.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
 
 .floating_container {
   background: white;
diff --git a/client/src/components/UI/SearchBar/SearchBar.scss b/client/src/components/UI/SearchBar/SearchBar.scss
index c0440afd7f..959351b6d2 100644
--- a/client/src/components/UI/SearchBar/SearchBar.scss
+++ b/client/src/components/UI/SearchBar/SearchBar.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .react-autosuggest__container {
   position: relative;
diff --git a/client/src/components/UI/SearchStructures/SearchStructureResult/SearchStructureResult.module.scss b/client/src/components/UI/SearchStructures/SearchStructureResult/SearchStructureResult.module.scss
index 7c1492d47f..e7d8d9c3cf 100644
--- a/client/src/components/UI/SearchStructures/SearchStructureResult/SearchStructureResult.module.scss
+++ b/client/src/components/UI/SearchStructures/SearchStructureResult/SearchStructureResult.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/input";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/input";
 
 .container {
   border-radius: u(2);
diff --git a/client/src/components/UI/SearchThemeButton/SearchThemeButton.module.scss b/client/src/components/UI/SearchThemeButton/SearchThemeButton.module.scss
index a800cc9bcc..a174562736 100644
--- a/client/src/components/UI/SearchThemeButton/SearchThemeButton.module.scss
+++ b/client/src/components/UI/SearchThemeButton/SearchThemeButton.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .btn {
   font-weight: bold;
diff --git a/client/src/components/UI/TagName/TagName.module.scss b/client/src/components/UI/TagName/TagName.module.scss
index 40f9f42b12..b688ebe8d0 100644
--- a/client/src/components/UI/TagName/TagName.module.scss
+++ b/client/src/components/UI/TagName/TagName.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/variables";
 
 .container {
   display: flex;
diff --git a/client/src/components/UI/ThemeBadge/ThemeBadge.module.scss b/client/src/components/UI/ThemeBadge/ThemeBadge.module.scss
index 5f21535351..c9d554097f 100644
--- a/client/src/components/UI/ThemeBadge/ThemeBadge.module.scss
+++ b/client/src/components/UI/ThemeBadge/ThemeBadge.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .container {
   display: inline-flex;
diff --git a/client/src/components/UI/ThemeIcon/ThemeIcon.module.scss b/client/src/components/UI/ThemeIcon/ThemeIcon.module.scss
index c9cfeaca8d..ab5776a018 100644
--- a/client/src/components/UI/ThemeIcon/ThemeIcon.module.scss
+++ b/client/src/components/UI/ThemeIcon/ThemeIcon.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
 
 .icon {
   display: inline-flex;
diff --git a/client/src/components/UI/Toast/Toast.module.scss b/client/src/components/UI/Toast/Toast.module.scss
index 08400b19d1..28982237af 100644
--- a/client/src/components/UI/Toast/Toast.module.scss
+++ b/client/src/components/UI/Toast/Toast.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
 
 .container {
   box-shadow: 0 6px 18px 0 #00001229;
diff --git a/client/src/components/UI/Tooltip/Tooltip.module.scss b/client/src/components/UI/Tooltip/Tooltip.module.scss
index 47cbea7331..4664cc2f9f 100644
--- a/client/src/components/UI/Tooltip/Tooltip.module.scss
+++ b/client/src/components/UI/Tooltip/Tooltip.module.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
+@import "~scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
 
 .container {
   :global(.tooltip) {
diff --git a/client/src/components/UI/Warning/Warning.module.scss b/client/src/components/UI/Warning/Warning.module.scss
index 5976f8ae0a..907e06f256 100644
--- a/client/src/components/UI/Warning/Warning.module.scss
+++ b/client/src/components/UI/Warning/Warning.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 $breakpoint: "lg-limit";
 
diff --git a/client/src/components/User/EditDepartments/EditDepartments.module.scss b/client/src/components/User/EditDepartments/EditDepartments.module.scss
index a68bc54efc..c03c11fc47 100644
--- a/client/src/components/User/EditDepartments/EditDepartments.module.scss
+++ b/client/src/components/User/EditDepartments/EditDepartments.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
 
 .suggestions {
   background: white;
diff --git a/client/src/components/User/ForgotPassword/ForgotPassword.module.scss b/client/src/components/User/ForgotPassword/ForgotPassword.module.scss
index 13c6308f5a..b4829b3feb 100644
--- a/client/src/components/User/ForgotPassword/ForgotPassword.module.scss
+++ b/client/src/components/User/ForgotPassword/ForgotPassword.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
-@import "src/scss/mixins/margins";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
+@import "~scss/mixins/margins";
 
 .container {
   @include responsiveMargins();
diff --git a/client/src/components/User/ForgotPasswordMailSent/ForgotPasswordMailSent.module.scss b/client/src/components/User/ForgotPasswordMailSent/ForgotPasswordMailSent.module.scss
index e17dda8684..8a157845ab 100644
--- a/client/src/components/User/ForgotPasswordMailSent/ForgotPasswordMailSent.module.scss
+++ b/client/src/components/User/ForgotPasswordMailSent/ForgotPasswordMailSent.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/rtl";
-@import "src/scss/variables";
-@import "src/scss/mixins/margins";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/rtl";
+@import "~scss/variables";
+@import "~scss/mixins/margins";
 
 .button {
   width: 100%;
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 560ed91bd5..f4f7032a51 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -21,6 +21,10 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": "src",
     "incremental": true,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "paths": {
+      "~scss/*": ["scss/*"],
+    },
   },
   "exclude": ["node_modules"],
   "include": ["src"]
diff --git a/yarn.lock b/yarn.lock
index d4a705c3ef..fa77838b89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz"
   integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==
 
+"@adobe/css-tools@~4.3.1":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
+  integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
+
 "@algolia/cache-browser-local-storage@4.24.0":
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz#97bc6d067a9fd932b9c922faa6b7fd6e546e1348"
@@ -1919,6 +1924,20 @@
   resolved "https://registry.npmjs.org/@types/password-hash/-/password-hash-1.2.24.tgz"
   integrity sha512-rdIR0oa8Pd2JP/KZ22UeLD6vrJWfZ2vgSKtWNCFpWtmUu5LR61+0yx051BN7IKpfxDI595jjhLcVBC3rZ2qfeQ==
 
+"@types/postcss-modules-local-by-default@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.2.tgz#8fee7513dd1558d74713d817c183a33a6dc583f9"
+  integrity sha512-CtYCcD+L+trB3reJPny+bKWKMzPfxEyQpKIwit7kErnOexf5/faaGpkFy4I5AwbV4hp1sk7/aTg0tt0B67VkLQ==
+  dependencies:
+    postcss "^8.0.0"
+
+"@types/postcss-modules-scope@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/postcss-modules-scope/-/postcss-modules-scope-3.0.4.tgz#f82d15ec9023c924b531a49e8087b32646233f41"
+  integrity sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==
+  dependencies:
+    postcss "^8.0.0"
+
 "@types/prop-types@*":
   version "15.7.12"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
@@ -3230,6 +3249,13 @@ cookie@0.6.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 copy-to-clipboard@^3.3.1:
   version "3.3.3"
   resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
@@ -3367,6 +3393,11 @@ css.escape@^1.5.1:
   resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz"
@@ -3678,7 +3709,7 @@ domutils@^3.1.0:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
-dotenv@^16.4.5:
+dotenv@^16.4.2, dotenv@^16.4.5:
   version "16.4.5"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
@@ -3785,6 +3816,13 @@ err-code@^2.0.2:
   resolved "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
+errno@^0.1.1:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -4692,7 +4730,7 @@ glob@10.3.10:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-glob@^7.0.5, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.5, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -5069,13 +5107,18 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3:
+iconv-lite@0.6.3, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
@@ -5091,6 +5134,11 @@ ignore@^5.2.0, ignore@^5.3.1:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
 immutable@^4.0.0, immutable@^4.3.4:
   version "4.3.6"
   resolved "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz"
@@ -5426,6 +5474,11 @@ is-weakset@^2.0.3:
     call-bind "^1.0.7"
     get-intrinsic "^1.2.4"
 
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 is-windows@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
@@ -6196,6 +6249,23 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
+less@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
@@ -6214,6 +6284,11 @@ lexical@0.16.1, lexical@^0.16.1:
   resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.16.1.tgz#1d2cd3f364224889caa2939df179434af936283b"
   integrity sha512-+R05d3+N945OY8pTUjTqQrWoApjC+ctzvjnmNETtx9WmVAaiW0tQVG+AYLt5pDGY8dQXtd4RPorvnxBTECt9SA==
 
+lilconfig@^2.0.5:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
@@ -6380,6 +6455,14 @@ lz-string@^1.5.0:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
 make-dir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz"
@@ -6471,7 +6554,7 @@ mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0:
+mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -6662,6 +6745,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
 negotiator@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
@@ -7012,6 +7103,11 @@ parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse5-htmlparser2-tree-adapter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz"
@@ -7122,6 +7218,11 @@ pify@^2.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
@@ -7156,7 +7257,44 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss-value-parser@^4.0.2:
+postcss-load-config@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
+
+postcss-modules-extract-imports@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
+
+postcss-modules-local-by-default@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz#f1b9bd757a8edf4d8556e8d0f4f894260e3df78f"
+  integrity sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz#a43d28289a169ce2c15c00c4e64c0858e43457d5"
+  integrity sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
+  integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -7179,7 +7317,7 @@ postcss@8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
-postcss@^8.4.5:
+postcss@^8.0.0, postcss@^8.4.35, postcss@^8.4.5:
   version "8.4.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
   integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
@@ -7302,6 +7440,11 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz"
@@ -7876,6 +8019,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reserved-words@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+  integrity sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
@@ -8033,6 +8181,25 @@ sass@^1.57.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.70.0:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+sax@^1.2.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
+sax@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
+  integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
+
 saxes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz"
@@ -8062,7 +8229,7 @@ section-iterator@^2.0.0:
   resolved "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz"
   integrity sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ==
 
-"semver@2 || 3 || 4 || 5":
+"semver@2 || 3 || 4 || 5", semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
@@ -8301,11 +8468,16 @@ source-map@0.5.6:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
   integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
 sparse-bitfield@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11"
@@ -8645,6 +8817,17 @@ stylis@4.3.2, stylis@^4.3.0:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
+stylus@^0.62.0:
+  version "0.62.0"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz#648a020e2bf90ed87587ab9c2f012757e977bb5d"
+  integrity sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==
+  dependencies:
+    "@adobe/css-tools" "~4.3.1"
+    debug "^4.3.2"
+    glob "^7.1.6"
+    sax "~1.3.0"
+    source-map "^0.7.3"
+
 supercluster@^8.0.1:
   version "8.0.1"
   resolved "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz"
@@ -8912,7 +9095,7 @@ tslib@2.6.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tslib@^2.1.0, tslib@^2.2.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.3:
+tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.3:
   version "2.6.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
@@ -9041,6 +9224,28 @@ typescript-logic@^0.0.0:
   resolved "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz"
   integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
 
+typescript-plugin-css-modules@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.1.0.tgz#faa0ceffe8a8ffcbbc2f77ed637a64464195044a"
+  integrity sha512-6h+sLBa4l+XYSTn/31vZHd/1c3SvAbLpobY6FxDiUOHJQG1eD9Gh3eCs12+Eqc+TCOAdxcO+zAPvUq0jBfdciw==
+  dependencies:
+    "@types/postcss-modules-local-by-default" "^4.0.2"
+    "@types/postcss-modules-scope" "^3.0.4"
+    dotenv "^16.4.2"
+    icss-utils "^5.1.0"
+    less "^4.2.0"
+    lodash.camelcase "^4.3.0"
+    postcss "^8.4.35"
+    postcss-load-config "^3.1.4"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.4"
+    postcss-modules-scope "^3.1.1"
+    reserved-words "^0.1.2"
+    sass "^1.70.0"
+    source-map-js "^1.0.2"
+    stylus "^0.62.0"
+    tsconfig-paths "^4.2.0"
+
 typescript-tuple@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz"
@@ -9143,7 +9348,7 @@ use-sync-external-store@^1.0.0:
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
 
-util-deprecate@^1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -9497,6 +9702,11 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yaml@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yamljs@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/yamljs/-/yamljs-0.3.0.tgz#dc060bf267447b39f7304e9b2bfbe8b5a7ddb03b"

From 01e3dd4bbebb3754035e6b25f3e09404234a394f Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 17:48:24 +0200
Subject: [PATCH 34/37] chore(client): :wrench: Add settings for alias-tool
 extension which allows opening aliased scss paths in vscode

---
 .vscode/extensions.json | 6 +++---
 .vscode/settings.json   | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index f26861cee7..46695554c7 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,14 +1,14 @@
 {
   // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
     "vivaxy.vscode-conventional-commits",
     "github.vscode-pull-request-github",
     "lokalise.i18n-ally",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "dgeibi.alias-tool"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f8ec8eed02..08f40abbcb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,7 @@
 {
+  "alias-tool.mappings": {
+    "~scss": "${workspace}/client/src/scss",
+  },
   "scss.lint.unknownAtRules": "ignore",
   "eslint.workingDirectories": [
     "./client",
@@ -54,4 +57,4 @@
   "githubIssues.issueBranchTitle": "feat/#${issueNumber}-${sanitizedIssueTitle}",
   "javascript.preferences.importModuleSpecifier": "relative",
   "typescript.preferences.importModuleSpecifier": "relative"
-}
+}
\ No newline at end of file

From 96b440aebf44b65ec3a4504e7274a101e9cf8f09 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 17:52:30 +0200
Subject: [PATCH 35/37] style(client): :lipstick: Update remaning scss files to
 use ~scss alias in imports

---
 .../annuaire/index/SearchBarAnnuaire.module.scss   |  2 +-
 client/src/scss/_common.scss                       |  2 +-
 client/src/scss/_rich-text.scss                    |  8 ++++----
 client/src/scss/_rtl.scss                          |  6 +++---
 client/src/scss/_variables.scss                    |  2 +-
 client/src/scss/components/auth.module.scss        | 12 ++++++------
 client/src/scss/components/checkbox.module.scss    |  6 +++---
 client/src/scss/components/contentCard.module.scss | 12 ++++++------
 client/src/scss/components/mobile.module.scss      |  2 +-
 client/src/scss/components/modals.module.scss      |  2 +-
 .../src/scss/components/searchHeader.module.scss   | 14 +++++++-------
 client/src/scss/components/staticPages.module.scss | 10 +++++-----
 client/src/scss/mixins/_input.scss                 |  4 ++--
 client/src/scss/mixins/_text.scss                  |  2 +-
 client/src/scss/pages/agir.module.scss             |  6 +++---
 client/src/scss/pages/annuaire-create.module.scss  |  5 ++---
 client/src/scss/pages/annuaire-id.module.scss      |  2 +-
 client/src/scss/pages/annuaire.module.scss         |  2 +-
 .../pages/declaration-accessibilite.module.scss    |  6 +++---
 client/src/scss/pages/dispositif.module.scss       |  6 +++---
 client/src/scss/pages/legal-pages.module.scss      |  6 +++---
 client/src/scss/pages/recherche.module.scss        |  6 +++---
 22 files changed, 61 insertions(+), 62 deletions(-)

diff --git a/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss b/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
index 11fb07918c..6ca35d5022 100644
--- a/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
+++ b/client/src/components/Pages/annuaire/index/SearchBarAnnuaire.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors.scss";
+@import "~scss/colors.scss";
 @import "~scss/variables";
 
 .container {
diff --git a/client/src/scss/_common.scss b/client/src/scss/_common.scss
index a0a637d172..9148873adb 100644
--- a/client/src/scss/_common.scss
+++ b/client/src/scss/_common.scss
@@ -3,7 +3,7 @@
 @import "mixins/text";
 @import "mixins/btn";
 @import "colors";
-@import "src/scss/variables";
+@import "~scss/variables";
 
 html {
   scroll-behavior: smooth;
diff --git a/client/src/scss/_rich-text.scss b/client/src/scss/_rich-text.scss
index 68faeac86f..09bd7392f5 100644
--- a/client/src/scss/_rich-text.scss
+++ b/client/src/scss/_rich-text.scss
@@ -1,7 +1,7 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/variables";
 
 .rtri-link {
   background-image: var(--underline-img), var(--underline-img) !important;
diff --git a/client/src/scss/_rtl.scss b/client/src/scss/_rtl.scss
index 9608256595..d3e772a6d0 100644
--- a/client/src/scss/_rtl.scss
+++ b/client/src/scss/_rtl.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/variables";
-@import "src/scss/mixins/rtl";
+@import "~scss/mixins/responsive";
+@import "~scss/variables";
+@import "~scss/mixins/rtl";
 
 html body div[dir="rtl"] {
   text-align: right;
diff --git a/client/src/scss/_variables.scss b/client/src/scss/_variables.scss
index 4a0dac0026..65bf0ad25f 100644
--- a/client/src/scss/_variables.scss
+++ b/client/src/scss/_variables.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
diff --git a/client/src/scss/components/auth.module.scss b/client/src/scss/components/auth.module.scss
index 1879266014..7d5084d1cc 100644
--- a/client/src/scss/components/auth.module.scss
+++ b/client/src/scss/components/auth.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/mixins/text";
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/margins";
+@import "~scss/mixins/text";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/margins";
 
 .container {
   &.half {
diff --git a/client/src/scss/components/checkbox.module.scss b/client/src/scss/components/checkbox.module.scss
index 7be3493072..6c33a7bc2d 100644
--- a/client/src/scss/components/checkbox.module.scss
+++ b/client/src/scss/components/checkbox.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .checkbox {
   display: block;
@@ -63,7 +63,7 @@
     background-color: #ccc;
   }
 
-  &.v2{
+  &.v2 {
     .checkmark {
       width: 16px;
       height: 16px;
diff --git a/client/src/scss/components/contentCard.module.scss b/client/src/scss/components/contentCard.module.scss
index 64f35439e6..c61f0f2b84 100644
--- a/client/src/scss/components/contentCard.module.scss
+++ b/client/src/scss/components/contentCard.module.scss
@@ -1,9 +1,9 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/text";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/text";
+@import "~scss/variables";
 
 .wrapper {
   position: relative;
diff --git a/client/src/scss/components/mobile.module.scss b/client/src/scss/components/mobile.module.scss
index ded2f00375..7a3375bb1a 100644
--- a/client/src/scss/components/mobile.module.scss
+++ b/client/src/scss/components/mobile.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/mixins/responsive";
+@import "~scss/mixins/responsive";
 
 // Visible
 .visible {
diff --git a/client/src/scss/components/modals.module.scss b/client/src/scss/components/modals.module.scss
index d3f161db2e..e183e50d7f 100644
--- a/client/src/scss/components/modals.module.scss
+++ b/client/src/scss/components/modals.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "~scss/variables";
 
 .modal {
   min-width: 100px;
diff --git a/client/src/scss/components/searchHeader.module.scss b/client/src/scss/components/searchHeader.module.scss
index d400f56faf..09c851ff83 100644
--- a/client/src/scss/components/searchHeader.module.scss
+++ b/client/src/scss/components/searchHeader.module.scss
@@ -1,10 +1,10 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/rtl";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/btn";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/rtl";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/btn";
+@import "~scss/variables";
 
 // DESKTOP
 .dropdown {
diff --git a/client/src/scss/components/staticPages.module.scss b/client/src/scss/components/staticPages.module.scss
index 4a9f6480ee..ea3d449577 100644
--- a/client/src/scss/components/staticPages.module.scss
+++ b/client/src/scss/components/staticPages.module.scss
@@ -1,8 +1,8 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 $breakpoint: "lg-limit";
 
diff --git a/client/src/scss/mixins/_input.scss b/client/src/scss/mixins/_input.scss
index 0734b3a7b9..62d1564f83 100644
--- a/client/src/scss/mixins/_input.scss
+++ b/client/src/scss/mixins/_input.scss
@@ -1,5 +1,5 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/colors";
+@import "~scss/mixins/unit";
+@import "~scss/colors";
 
 /* Base input design */
 @mixin baseInput() {
diff --git a/client/src/scss/mixins/_text.scss b/client/src/scss/mixins/_text.scss
index 13589135ce..a698d58596 100644
--- a/client/src/scss/mixins/_text.scss
+++ b/client/src/scss/mixins/_text.scss
@@ -1,4 +1,4 @@
-@import "src/scss/variables";
+@import "~scss/variables";
 
 $texts: (
   "very-small": (
diff --git a/client/src/scss/pages/agir.module.scss b/client/src/scss/pages/agir.module.scss
index 4b62606ecb..255e6420da 100644
--- a/client/src/scss/pages/agir.module.scss
+++ b/client/src/scss/pages/agir.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/unit";
-@import "src/scss/mixins/text";
-@import "src/scss/mixins/responsive";
+@import "~scss/mixins/unit";
+@import "~scss/mixins/text";
+@import "~scss/mixins/responsive";
 
 .anchor {
   position: relative;
diff --git a/client/src/scss/pages/annuaire-create.module.scss b/client/src/scss/pages/annuaire-create.module.scss
index 22143cde3e..70d764e532 100644
--- a/client/src/scss/pages/annuaire-create.module.scss
+++ b/client/src/scss/pages/annuaire-create.module.scss
@@ -1,5 +1,5 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .container {
   background: #fbfbfb;
@@ -67,5 +67,4 @@
     flex-direction: row;
     justify-content: space-between;
   }
-
 }
diff --git a/client/src/scss/pages/annuaire-id.module.scss b/client/src/scss/pages/annuaire-id.module.scss
index 2ae5ac7376..18b46502a4 100644
--- a/client/src/scss/pages/annuaire-id.module.scss
+++ b/client/src/scss/pages/annuaire-id.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .content {
   display: flex;
diff --git a/client/src/scss/pages/annuaire.module.scss b/client/src/scss/pages/annuaire.module.scss
index 1db370ea90..3bf291884e 100644
--- a/client/src/scss/pages/annuaire.module.scss
+++ b/client/src/scss/pages/annuaire.module.scss
@@ -1,4 +1,4 @@
-@import "src/scss/colors";
+@import "~scss/colors";
 
 .container {
   display: flex;
diff --git a/client/src/scss/pages/declaration-accessibilite.module.scss b/client/src/scss/pages/declaration-accessibilite.module.scss
index 8f27d47de2..384259ced5 100644
--- a/client/src/scss/pages/declaration-accessibilite.module.scss
+++ b/client/src/scss/pages/declaration-accessibilite.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/links";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/links";
 
 .container {
   background: $white;
diff --git a/client/src/scss/pages/dispositif.module.scss b/client/src/scss/pages/dispositif.module.scss
index 72f448468d..261e47dd4f 100644
--- a/client/src/scss/pages/dispositif.module.scss
+++ b/client/src/scss/pages/dispositif.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/mixins/responsive";
-@import "src/scss/colors";
-@import "src/scss/variables";
+@import "~scss/mixins/responsive";
+@import "~scss/colors";
+@import "~scss/variables";
 
 .banniere {
   background-size: cover;
diff --git a/client/src/scss/pages/legal-pages.module.scss b/client/src/scss/pages/legal-pages.module.scss
index d59582eec8..e326e7cfe7 100644
--- a/client/src/scss/pages/legal-pages.module.scss
+++ b/client/src/scss/pages/legal-pages.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/variables";
-@import "src/scss/mixins/links";
+@import "~scss/colors";
+@import "~scss/variables";
+@import "~scss/mixins/links";
 
 .legal_pages {
   flex: 1 1;
diff --git a/client/src/scss/pages/recherche.module.scss b/client/src/scss/pages/recherche.module.scss
index 2c2deb2156..460e865645 100644
--- a/client/src/scss/pages/recherche.module.scss
+++ b/client/src/scss/pages/recherche.module.scss
@@ -1,6 +1,6 @@
-@import "src/scss/colors";
-@import "src/scss/mixins/responsive";
-@import "src/scss/mixins/unit";
+@import "~scss/colors";
+@import "~scss/mixins/responsive";
+@import "~scss/mixins/unit";
 
 .container {
   background: $gray20;

From 5d1ab3141bfc8bc08fe8ad163f6ec8a95a2fd962 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 18:30:49 +0200
Subject: [PATCH 36/37] chore(client): :heavy_plus_sign: Move sharp to dev
 dependency

---
 client/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/package.json b/client/package.json
index bff33ed2f3..3c2e05b550 100644
--- a/client/package.json
+++ b/client/package.json
@@ -62,7 +62,6 @@
     "redux": "^5.0.1",
     "redux-saga": "^1.1.3",
     "remixicon": "^4.3.0",
-    "sharp": "^0.33.4",
     "sortablejs": "^1.15.0",
     "styled-components": "^6.1.11",
     "sweetalert2": "^11.6.16",
@@ -74,7 +73,7 @@
     "prebuild": "only-include-used-icons",
     "dev": "next dev",
     "start": "next start",
-    "build": "next build",
+    "build": "NEXT_SHARP_PATH=../node_modules/.bin/sharp next build",
     "test": "npm run test:lint && npm run test:types && npm run test:unit",
     "test-with-coverage": "jest --coverage && cat ./coverage/lcov.info | codacy-coverage",
     "test:types": "tsc --noEmit",
@@ -133,6 +132,7 @@
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "sass": "^1.57.1",
+    "sharp": "^0.33.4",
     "ts-jest": "29.2.2",
     "typescript": "^5.5.3",
     "typescript-plugin-css-modules": "^5.1.0"

From 2dc541c3ff1e0c1f58a998dac59b5295c6c5b521 Mon Sep 17 00:00:00 2001
From: Luis Arias <luis@refugies.info>
Date: Fri, 19 Jul 2024 18:31:53 +0200
Subject: [PATCH 37/37] style(client): :lipstick: Cannot use tilde paths to
 import vendor scss with typescript-plugin-css-modules

---
 client/src/scss/_variables.scss |  4 ++--
 client/src/scss/index.scss      | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/scss/_variables.scss b/client/src/scss/_variables.scss
index 65bf0ad25f..bfbedf5ce3 100644
--- a/client/src/scss/_variables.scss
+++ b/client/src/scss/_variables.scss
@@ -1,6 +1,6 @@
 @import "~scss/colors";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
 
 // Bootstrap
 // All variables here: https://github.com/twbs/bootstrap/blob/v4.6.1/scss/_variables.scss
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index 0a76aeb89d..1a496357b4 100644
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -3,12 +3,12 @@
 @import "./variables";
 
 // Vendors
-@import "~bootstrap/scss/bootstrap";
-@import "~flag-icons/css/flag-icons.min.css";
-@import "~rc-time-picker/assets/index.css";
-@import "~react-notifications/src/notifications.scss";
-@import "~react-loading-skeleton/dist/skeleton.css";
-@import "~remixicon/fonts/remixicon.css"; // TODO : remove but deal with callout first
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "../../../node_modules/flag-icons/css/flag-icons.min.css";
+@import "../../../node_modules/rc-time-picker/assets/index.css";
+@import "../../../node_modules/react-notifications/src/notifications.scss";
+@import "../../../node_modules/react-loading-skeleton/dist/skeleton.css";
+@import "../../../node_modules/remixicon/fonts/remixicon.css"; // TODO : remove but deal with callout first
 
 // Main styles
 @import "./rtl";