diff --git a/example.env b/example.env
index dc2aa2d8b54513ed4646624c468d528db5865183..dc5b47329380cf3bed73a729e196b75e611f50da 100644
--- a/example.env
+++ b/example.env
@@ -59,7 +59,7 @@ PROXY=false
 
 # Optional name of default reform to use
 # Reform name must belong to a name of an OpenFisca reform in metadata.json
-# REFORM=universal_basic_income
+# REFORM=reforme_test_1
 
 # Show intro balloons.
 SHOW_TUTORIAL=true
diff --git a/gitlab-ci/src/gitlab-ci.ts b/gitlab-ci/src/gitlab-ci.ts
index e6935db11bb2e5ff6ebccbddd0b67432acc5bf71..66b1df7212cdf6e300e4e75dea0ea52bb782f663 100644
--- a/gitlab-ci/src/gitlab-ci.ts
+++ b/gitlab-ci/src/gitlab-ci.ts
@@ -64,14 +64,16 @@ async function commitAndPushWithUpdatedVersions(
     // Retrieve next version of project.
     nextVersionObject = await latestVersionObjectFromTags()
     assert.notStrictEqual(nextVersionObject, undefined)
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     nextVersionObject!.patch++
   }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const nextVersion = versionFromObject(nextVersionObject!)
 
   if ((await $`git diff --quiet --staged`.exitCode) !== 0) {
     let packageJson = await fs.readFile(packagePath, "utf-8")
     packageJson = packageJson.replace(
-      /^  "version": "(.*?)",$/m,
+      /^ {2}"version": "(.*?)",$/m,
       `  "version": "${nextVersion}",`,
     )
     await fs.writeFile(packagePath, packageJson, "utf-8")
@@ -156,11 +158,16 @@ async function latestVersionObjectFromTags(): Promise<
     .map(objectFromVersion)
     .filter((versionObject) => versionObject !== undefined)
     .sort((versionObject1, versionObject2) =>
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       versionObject1!.major !== versionObject2!.major
-        ? versionObject2!.major - versionObject1!.major
-        : versionObject1!.minor !== versionObject2!.minor
-        ? versionObject2!.minor - versionObject1!.minor
-        : versionObject2!.patch - versionObject1!.patch,
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          versionObject2!.major - versionObject1!.major
+        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        versionObject1!.minor !== versionObject2!.minor
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          versionObject2!.minor - versionObject1!.minor
+        : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          versionObject2!.patch - versionObject1!.patch,
     )[0]
 }
 
@@ -253,7 +260,7 @@ async function main() {
         }
       } else if (CI_COMMIT_TAG !== undefined) {
         console.log(`Pushing commit tag "${CI_COMMIT_TAG}"…`)
-      } else if (CI_COMMIT_TAG !== undefined) {
+      } else {
         console.log(`Unhandled push event.`)
       }
       break
@@ -308,6 +315,7 @@ async function nextVersionObjectFromPackageAndTags(
   const tagVersion = versionFromObject(tagVersionObject)
   let nextVersionObject = {
     ...tagVersionObject,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     patch: tagVersionObject!.patch + 1,
   }
 
@@ -366,6 +374,7 @@ async function triggerDevDeployPipeline() {
   const response = await fetch(urlString, {
     body: new URLSearchParams({
       ref: "master",
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       token: CI_JOB_TOKEN!,
     }).toString(),
     headers: {
@@ -392,6 +401,7 @@ async function triggerProdDeployPipeline() {
   const response = await fetch(urlString, {
     body: new URLSearchParams({
       ref: "master",
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       token: CI_JOB_TOKEN!,
     }).toString(),
     headers: {
diff --git a/package-lock.json b/package-lock.json
index 68facb0eaa50925ac9bb4d49843e096e542bb6bb..db19486d0b88a1b402f2adf1bf4fcce47bcadc83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,34 +1,32 @@
 {
   "name": "leximpact-socio-fiscal-ui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "leximpact-socio-fiscal-ui",
-      "version": "0.0.28",
+      "version": "0.0.30",
       "dependencies": {
-        "sk-auth": "^0.3.7",
+        "sk-auth": "^0.4.0",
         "xxhash-addon": "^1.4.0"
       },
       "devDependencies": {
         "@auditors/core": "^0.2.0",
         "@fontsource/lato": "^4.3.0",
         "@fontsource/lora": "^4.3.0",
-        "@openfisca/france-json": "^0.1.45",
-        "@openfisca/json-model": "^1.0.0",
-        "@sveltejs/adapter-node": "^1.0.0-next.60",
-        "@sveltejs/kit": "^1.0.0-next.215",
-        "@tailwindcss/forms": "^0.4.0",
+        "@openfisca/france-json": "^0.1.51",
+        "@openfisca/json-model": "^1.1.7",
+        "@sveltejs/adapter-node": "^1.0.0-next.62",
+        "@sveltejs/kit": "^1.0.0-next.232",
         "@types/cookie": "^0.4.0",
         "@types/fs-extra": "^9.0.11",
         "@typescript-eslint/eslint-plugin": "^5.0.0",
         "@typescript-eslint/parser": "^5.0.0",
         "autoprefixer": "^10.2.5",
-        "cssnano": "^5.0.5",
         "d3-scale": "^4.0.0",
         "dedent-js": "^1.0.1",
-        "dotenv": "^10.0.0",
+        "dotenv": "^14.2.0",
         "eslint": "^8.0.0",
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-svelte3": "^3.2.1",
@@ -37,8 +35,6 @@
         "fuse.js": "^6.4.6",
         "intro.js": "^4.2.2",
         "js-yaml": "^4.1.0",
-        "postcss": "^8.2.7",
-        "postcss-load-config": "^3.0.1",
         "prettier": "^2.2.1",
         "prettier-plugin-svelte": "^2.2.0",
         "sanitize-filename": "^1.6.3",
@@ -46,14 +42,13 @@
         "svelte": "^3.39.0",
         "svelte-check": "^2.0.0",
         "svelte-dnd-action": "^0.9.8",
-        "svelte-json-tree": "github:eraviart/svelte-json-tree",
         "svelte-modals": "^1.0.4",
         "svelte-preprocess": "^4.6.9",
-        "tailwindcss": "^3.0.9",
+        "tailwindcss": "^3.0.15",
         "tslib": "^2.0.0",
         "typescript": "^4.0.0",
         "uuid": "^8.3.2",
-        "zx": "^4.2.0"
+        "zx": "^4.3.0"
       }
     },
     "node_modules/@auditors/core": {
@@ -77,9 +72,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.16.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz",
-      "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
+      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
       "peer": true,
       "engines": {
         "node": ">=6.9.0"
@@ -125,12 +120,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz",
-      "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
+      "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
       "peer": true,
       "dependencies": {
-        "@babel/types": "^7.16.7",
+        "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       },
@@ -228,9 +223,9 @@
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.0.tgz",
-      "integrity": "sha512-7hfT8lUljl/tM3h+izTX/pO3W3frz2ok6Pk+gzys8iJqDfZrZy2pXjRTZAvG2YmfHun1X4q8/UZRLatMfqc5Tg==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
+      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
       "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.13.0",
@@ -382,14 +377,14 @@
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.7.tgz",
-      "integrity": "sha512-C3o117GnP/j/N2OWo+oepeWbFEKRfNaay+F1Eo5Mj3A1SRjyx+qaFhm23nlipub7Cjv2azdUUiDH+VlpdwUFRg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
       "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-wrap-function": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-wrap-function": "^7.16.8",
+        "@babel/types": "^7.16.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -465,15 +460,15 @@
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.7.tgz",
-      "integrity": "sha512-7a9sABeVwcunnztZZ7WTgSw6jVYLzM1wua0Z4HIXm9S3/HC96WKQTkFgGEaj5W06SHHihPJ6Le6HzS5cGOQMNw==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
+      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
       "peer": true,
       "dependencies": {
         "@babel/helper-function-name": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.16.8",
+        "@babel/types": "^7.16.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -507,9 +502,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz",
-      "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz",
+      "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==",
       "peer": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -551,13 +546,13 @@
       }
     },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.7.tgz",
-      "integrity": "sha512-TTXBT3A5c11eqRzaC6beO6rlFT3Mo9C2e8eB44tTr52ESXSK2CIc2fOp1ynpAwQA8HhBMho+WXhMHWlAe3xkpw==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
+      "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
       "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.7",
+        "@babel/helper-remap-async-to-generator": "^7.16.8",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       },
       "engines": {
@@ -1021,14 +1016,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.7.tgz",
-      "integrity": "sha512-pFEfjnK4DfXCfAlA5I98BYdDJD8NltMzx19gt6DAmfE+2lXRfPUoa0/5SUjT4+TDE1W/rcxU/1lgN55vpAjjdg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
       "peer": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.7"
+        "@babel/helper-remap-async-to-generator": "^7.16.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1262,9 +1257,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.7.tgz",
-      "integrity": "sha512-h2RP2kE7He1ZWKyAlanMZrAbdv+Acw1pA8dQZhE025WJZE2z0xzFADAinXA9fxd5bn7JnM+SdOGcndGx1ARs9w==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz",
+      "integrity": "sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==",
       "peer": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.16.7",
@@ -1315,9 +1310,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.7.tgz",
-      "integrity": "sha512-kFy35VwmwIQwCjwrAQhl3+c/kr292i4KdLPKp5lPH03Ltc51qnFlIADoyPxc/6Naz3ok3WdYKg+KK6AH+D4utg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
+      "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
       "peer": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7"
@@ -1593,18 +1588,18 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.7.tgz",
-      "integrity": "sha512-urX3Cee4aOZbRWOSa3mKPk0aqDikfILuo+C7qq7HY0InylGNZ1fekq9jmlr3pLWwZHF4yD7heQooc2Pow2KMyQ==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.8.tgz",
+      "integrity": "sha512-9rNKgVCdwHb3z1IlbMyft6yIXIeP3xz6vWvGaLHrJThuEIqWfHb0DNBH9VuTgnDfdbUDhkmkvMZS/YMCtP7Elg==",
       "peer": true,
       "dependencies": {
-        "@babel/compat-data": "^7.16.4",
+        "@babel/compat-data": "^7.16.8",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-validator-option": "^7.16.7",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-async-generator-functions": "^7.16.7",
+        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-class-static-block": "^7.16.7",
         "@babel/plugin-proposal-dynamic-import": "^7.16.7",
@@ -1634,7 +1629,7 @@
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-transform-arrow-functions": "^7.16.7",
-        "@babel/plugin-transform-async-to-generator": "^7.16.7",
+        "@babel/plugin-transform-async-to-generator": "^7.16.8",
         "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
         "@babel/plugin-transform-block-scoping": "^7.16.7",
         "@babel/plugin-transform-classes": "^7.16.7",
@@ -1648,10 +1643,10 @@
         "@babel/plugin-transform-literals": "^7.16.7",
         "@babel/plugin-transform-member-expression-literals": "^7.16.7",
         "@babel/plugin-transform-modules-amd": "^7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.16.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
         "@babel/plugin-transform-modules-systemjs": "^7.16.7",
         "@babel/plugin-transform-modules-umd": "^7.16.7",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.8",
         "@babel/plugin-transform-new-target": "^7.16.7",
         "@babel/plugin-transform-object-super": "^7.16.7",
         "@babel/plugin-transform-parameters": "^7.16.7",
@@ -1666,11 +1661,11 @@
         "@babel/plugin-transform-unicode-escapes": "^7.16.7",
         "@babel/plugin-transform-unicode-regex": "^7.16.7",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.16.7",
+        "@babel/types": "^7.16.8",
         "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.4.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
         "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.19.1",
+        "core-js-compat": "^3.20.2",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -1743,9 +1738,9 @@
       }
     },
     "node_modules/@babel/register": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.7.tgz",
-      "integrity": "sha512-Ft+cuxorVxFj4RrPDs9TbJNE7ZbuJTyazUC6jLWRvBQT/qIDZPMe7MHgjlrA+11+XDLh+I0Pnx7sxPp4LRhzcA==",
+      "version": "7.16.9",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.9.tgz",
+      "integrity": "sha512-jJ72wcghdRIlENfvALcyODhNoGE5j75cYHdC+aQMh6cU/P86tiiXTp9XYZct1UxUMo/4+BgQRyNZEGx0KWGS+g==",
       "peer": true,
       "dependencies": {
         "clone-deep": "^4.0.1",
@@ -1788,19 +1783,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz",
-      "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.8.tgz",
+      "integrity": "sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==",
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.7",
+        "@babel/generator": "^7.16.8",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7",
+        "@babel/parser": "^7.16.8",
+        "@babel/types": "^7.16.8",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -1809,9 +1804,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz",
-      "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
+      "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
       "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -1933,12 +1928,12 @@
       }
     },
     "node_modules/@openfisca/france-json": {
-      "version": "0.1.45",
-      "resolved": "https://registry.npmjs.org/@openfisca/france-json/-/france-json-0.1.45.tgz",
-      "integrity": "sha512-diJh4CBOZQlYKMoladVJh7xQuGXGW2670xoOU+Dh3fBkqsGCiF8QoAM/aLHWabs8W6mtdLAAfCrXvNsQq5eeAw==",
+      "version": "0.1.51",
+      "resolved": "https://registry.npmjs.org/@openfisca/france-json/-/france-json-0.1.51.tgz",
+      "integrity": "sha512-L8qoFdqiacHh8w/xYSwUTYG5T4Hstn/13nXdw/jnFWE4QIl3vbyrYhGl1m3C2VQ8v8QKRwXnfN2dNPrTYgIi2Q==",
       "dev": true,
       "peerDependencies": {
-        "@openfisca/json-model": "^1.1.0"
+        "@openfisca/json-model": "^1.1.7"
       },
       "peerDependenciesMeta": {
         "@openfisca/json-model": {
@@ -1947,9 +1942,9 @@
       }
     },
     "node_modules/@openfisca/json-model": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@openfisca/json-model/-/json-model-1.1.0.tgz",
-      "integrity": "sha512-A0jbboktu1VK7v84XEunrq0s8jGpxJTxFKtTbeQKVY9bRjzEZixZvg3Qo84B+tvFfcPv5z8cNGG5gHUC5ifnMA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@openfisca/json-model/-/json-model-1.1.7.tgz",
+      "integrity": "sha512-DpkwkhMIRJvU9aYNZ35b0z33AX2hI+R9oF4+WO478w4x0ji36DFv/ZCKnKesxYM05lK2HJfghCAXv5N+Oi6cdw==",
       "dev": true,
       "dependencies": {
         "@auditors/core": "^0.2.0",
@@ -1974,18 +1969,18 @@
       }
     },
     "node_modules/@sveltejs/adapter-node": {
-      "version": "1.0.0-next.60",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.0.0-next.60.tgz",
-      "integrity": "sha512-aOX0WEoSoy9ANHDbyul83c0F9qxI+vl//kYEhTZURY4NNnRQ4B1+QECDIv70v3SjU/aAT+56ofpvcZA++sfQxw==",
+      "version": "1.0.0-next.62",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.0.0-next.62.tgz",
+      "integrity": "sha512-mq/IOgQos0ps3efi4JTuEXdhQaoUwdWZ4RTgP2DeVL5VsWqm0T+GZJod/RDSwzwDdq4QqUHjfnpk+mKuO5QnWQ==",
       "dev": true,
       "dependencies": {
         "tiny-glob": "^0.2.9"
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.0.0-next.215",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.215.tgz",
-      "integrity": "sha512-3y6NFKacahEjgAuGNgs49t2Jf708syKEf6A7uf0dXoQXq3giF+/O1XDF4f+I2g/39iiOtkJMW10tyvIiRG22Hw==",
+      "version": "1.0.0-next.232",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.232.tgz",
+      "integrity": "sha512-STQ0hnJozIop8k9I313nwVasBIQ45Z2K1pUOkDVjCSOGijgsj+De5q0prQBtL1ZlqqisfkYlOf8W9gvDSyTLEA==",
       "dependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
         "sade": "^1.7.4",
@@ -2002,9 +1997,9 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "1.0.0-next.33",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.33.tgz",
-      "integrity": "sha512-aj0h2+ZixgT+yoJFIs8dRRw/Cj9tgNu3+hY4CJikpa04mfhR61wXqJFfi2ZEFMUvFda5nCxKYIChFkc6wq5fJA==",
+      "version": "1.0.0-next.34",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.34.tgz",
+      "integrity": "sha512-qZH2jndijrdkvevgbO7OH3iQsviM5Kz7h5APiNP4yEMZTrwq9bifzYvco6BprwtPvLb5wYlRVFZUOdusY6AovQ==",
       "dependencies": {
         "@rollup/pluginutils": "^4.1.2",
         "debug": "^4.3.3",
@@ -2027,27 +2022,6 @@
         }
       }
     },
-    "node_modules/@tailwindcss/forms": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
-      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
-      "dev": true,
-      "dependencies": {
-        "mini-svg-data-uri": "^1.2.3"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
-      }
-    },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -2076,9 +2050,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "17.0.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.7.tgz",
-      "integrity": "sha512-1QUk+WAUD4t8iR+Oj+UgI8oJa6yyxaB8a8pHaC8uqM6RrS1qbL7bf3Pwl5rHv0psm2CuDErgho6v5N+G+5fwtQ==",
+      "version": "17.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.10.tgz",
+      "integrity": "sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==",
       "dev": true
     },
     "node_modules/@types/node-fetch": {
@@ -2113,14 +2087,14 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.9.0.tgz",
-      "integrity": "sha512-qT4lr2jysDQBQOPsCCvpPUZHjbABoTJW8V9ZzIYKHMfppJtpdtzszDYsldwhFxlhvrp7aCHeXD1Lb9M1zhwWwQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.0.tgz",
+      "integrity": "sha512-XXVKnMsq2fuu9K2KsIxPUGqb6xAImz8MEChClbXmE3VbveFtBUU5bzM6IPVWqzyADIgdkS2Ws/6Xo7W2TeZWjQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "5.9.0",
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/type-utils": "5.9.0",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/type-utils": "5.10.0",
+        "@typescript-eslint/utils": "5.10.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -2145,39 +2119,15 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.9.0.tgz",
-      "integrity": "sha512-ZnLVjBrf26dn7ElyaSKa6uDhqwvAi4jBBmHK1VxuFGPRAxhdi18ubQYSGA7SRiFiES3q9JiBOBHEBStOFkwD2g==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/typescript-estree": "5.9.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.9.0.tgz",
-      "integrity": "sha512-/6pOPz8yAxEt4PLzgbFRDpZmHnXCeZgPDrh/1DaVKOjvn/UPMlWhbx/gA96xRi2JxY1kBl2AmwVbyROUqys5xQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz",
+      "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/typescript-estree": "5.9.0",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/typescript-estree": "5.10.0",
         "debug": "^4.3.2"
       },
       "engines": {
@@ -2197,13 +2147,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.9.0.tgz",
-      "integrity": "sha512-DKtdIL49Qxk2a8icF6whRk7uThuVz4A6TCXfjdJSwOsf+9ree7vgQWcx0KOyCdk0i9ETX666p4aMhrRhxhUkyg==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz",
+      "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/visitor-keys": "5.9.0"
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/visitor-keys": "5.10.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2214,12 +2164,12 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.9.0.tgz",
-      "integrity": "sha512-uVCb9dJXpBrK1071ri5aEW7ZHdDHAiqEjYznF3HSSvAJXyrkxGOw2Ejibz/q6BXdT8lea8CMI0CzKNFTNI6TEQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.0.tgz",
+      "integrity": "sha512-TzlyTmufJO5V886N+hTJBGIfnjQDQ32rJYxPaeiyWKdjsv2Ld5l8cbS7pxim4DeNs62fKzRSt8Q14Evs4JnZyQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "5.9.0",
+        "@typescript-eslint/utils": "5.10.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       },
@@ -2240,9 +2190,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.9.0.tgz",
-      "integrity": "sha512-mWp6/b56Umo1rwyGCk8fPIzb9Migo8YOniBGPAQDNC6C52SeyNGN4gsVwQTAR+RS2L5xyajON4hOLwAGwPtUwg==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz",
+      "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2253,13 +2203,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.9.0.tgz",
-      "integrity": "sha512-kxo3xL2mB7XmiVZcECbaDwYCt3qFXz99tBSuVJR4L/sR7CJ+UNAPrYILILktGj1ppfZ/jNt/cWYbziJUlHl1Pw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz",
+      "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/visitor-keys": "5.9.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/visitor-keys": "5.10.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -2279,13 +2229,37 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.0.tgz",
+      "integrity": "sha512-IGYwlt1CVcFoE2ueW4/ioEwybR60RAdGeiJX/iDAw0t5w0wK3S7QncDwpmsM70nKgGTuVchEWB8lwZwHqPAWRg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/typescript-estree": "5.10.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.9.0.tgz",
-      "integrity": "sha512-6zq0mb7LV0ThExKlecvpfepiB+XEtFv/bzx7/jKSgyXTFD7qjmSu1FoiS0x3OZaiS+UIXpH2vd9O89f02RCtgw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz",
+      "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.9.0",
+        "@typescript-eslint/types": "5.10.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "engines": {
@@ -2365,21 +2339,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-      "dev": true
-    },
-    "node_modules/ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2441,13 +2400,13 @@
       "dev": true
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz",
-      "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==",
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30001294",
+        "caniuse-lite": "^1.0.30001297",
         "fraction.js": "^4.1.2",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -2487,13 +2446,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.0.tgz",
-      "integrity": "sha512-wMDoBJ6uG4u4PNFh72Ty6t3EgfA91puCuAwKIazbQlci+ENb/UU9A3xG5lutjUIiXCIn1CY5L15r9LimiJyrSA==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
+      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
       "peer": true,
       "dependencies": {
         "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.3.0",
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
         "semver": "^6.1.1"
       },
       "peerDependencies": {
@@ -2510,25 +2469,25 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.4.0.tgz",
-      "integrity": "sha512-YxFreYwUfglYKdLUGvIF2nJEsGwj+RhWSX/ije3D2vQPOXuyMLMtg/cCGMDpOA7Nd+MwlNdnGODbd2EwUZPlsw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.1.tgz",
+      "integrity": "sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==",
       "peer": true,
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.0",
-        "core-js-compat": "^3.18.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "core-js-compat": "^3.20.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.0.tgz",
-      "integrity": "sha512-dhAPTDLGoMW5/84wkgwiLRwMnio2i1fUe53EuvtKMv0pn2p3S8OCoV1xAzfJPl0KOX7IB89s2ib85vbYiea3jg==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
       "peer": true,
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.3.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
@@ -2588,12 +2547,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2704,22 +2657,10 @@
         "node": ">= 6"
       }
     },
-    "node_modules/caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001296",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001296.tgz",
-      "integrity": "sha512-WfrtPEoNSoeATDlf4y3QvkwiELl9GyPLISV5GejTbbQRtQx4LhsXmc9IQ6XCL2d7UxCyEzToEZNMeqR79OUw8Q==",
+      "version": "1.0.30001300",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz",
+      "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -2739,10 +2680,16 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2798,12 +2745,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
-    "node_modules/colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
-      "dev": true
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2816,15 +2757,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -2854,9 +2786,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.20.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.2.tgz",
-      "integrity": "sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw==",
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -2865,9 +2797,9 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.20.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
-      "integrity": "sha512-qZEzVQ+5Qh6cROaTPFLNS4lkvQ6mBzE3R6A6EEpssj7Zr2egMHgsy4XapdifqJDGC9CBiNv7s+ejI96rLNQFdg==",
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.3.tgz",
+      "integrity": "sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==",
       "peer": true,
       "dependencies": {
         "browserslist": "^4.19.1",
@@ -2917,71 +2849,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-declaration-sorter": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
-      "integrity": "sha512-SvjQjNRZgh4ULK1LDJ2AduPKUKxIqmtU7ZAyi47BTV+M90Qvxr9AB6lKlLbDUfXqI9IQeYA8LbAsCZPpJEV3aA==",
-      "dev": true,
-      "dependencies": {
-        "timsort": "^0.3.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.9"
-      }
-    },
-    "node_modules/css-select": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
-      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^5.1.0",
-        "domhandler": "^4.3.0",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/css-tree/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
-      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2994,94 +2861,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/cssnano": {
-      "version": "5.0.14",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.14.tgz",
-      "integrity": "sha512-qzhRkFvBhv08tbyKCIfWbxBXmkIpLl1uNblt8SpTHkgLfON5OCPX/CCnkdNmEosvo8bANQYmTTMEgcVBlisHaw==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-preset-default": "^5.1.9",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/cssnano"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/cssnano-preset-default": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.9.tgz",
-      "integrity": "sha512-RhkEucqlQ+OxEi14K1p8gdXcMQy1mSpo7P1oC44oRls7BYIj8p+cht4IFBFV3W4iOjTP8EUB33XV1fX9KhDzyA==",
-      "dev": true,
-      "dependencies": {
-        "css-declaration-sorter": "^6.0.3",
-        "cssnano-utils": "^2.0.1",
-        "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.2",
-        "postcss-convert-values": "^5.0.2",
-        "postcss-discard-comments": "^5.0.1",
-        "postcss-discard-duplicates": "^5.0.1",
-        "postcss-discard-empty": "^5.0.1",
-        "postcss-discard-overridden": "^5.0.1",
-        "postcss-merge-longhand": "^5.0.4",
-        "postcss-merge-rules": "^5.0.3",
-        "postcss-minify-font-values": "^5.0.1",
-        "postcss-minify-gradients": "^5.0.3",
-        "postcss-minify-params": "^5.0.2",
-        "postcss-minify-selectors": "^5.1.0",
-        "postcss-normalize-charset": "^5.0.1",
-        "postcss-normalize-display-values": "^5.0.1",
-        "postcss-normalize-positions": "^5.0.1",
-        "postcss-normalize-repeat-style": "^5.0.1",
-        "postcss-normalize-string": "^5.0.1",
-        "postcss-normalize-timing-functions": "^5.0.1",
-        "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.4",
-        "postcss-normalize-whitespace": "^5.0.1",
-        "postcss-ordered-values": "^5.0.2",
-        "postcss-reduce-initial": "^5.0.2",
-        "postcss-reduce-transforms": "^5.0.1",
-        "postcss-svgo": "^5.0.3",
-        "postcss-unique-selectors": "^5.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/cssnano-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dev": true,
-      "dependencies": {
-        "css-tree": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/d3-array": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
@@ -3281,68 +3060,13 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
-      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-14.2.0.tgz",
+      "integrity": "sha512-05POuPJyPpO6jqzTNweQFfAyMSD4qa4lvsMOWyTRTdpHKy6nnnN+IYWaXF+lHivhBH/ufDKlR4IWCAN3oPnHuw==",
       "dev": true,
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       }
     },
     "node_modules/duplexer": {
@@ -3360,30 +3084,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.33",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
-      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw=="
-    },
-    "node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
+      "version": "1.4.48",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz",
+      "integrity": "sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA=="
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
@@ -3649,9 +3352,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz",
-      "integrity": "sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.7.0.tgz",
+      "integrity": "sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.0.5",
@@ -3661,11 +3364,10 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
-        "enquirer": "^2.3.5",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.1.0",
         "eslint-utils": "^3.0.0",
-        "eslint-visitor-keys": "^3.1.0",
+        "eslint-visitor-keys": "^3.2.0",
         "espree": "^9.3.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
@@ -3674,7 +3376,7 @@
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^6.0.1",
         "globals": "^13.6.0",
-        "ignore": "^4.0.6",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
@@ -3685,9 +3387,7 @@
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
-        "progress": "^2.0.0",
         "regexpp": "^3.2.0",
-        "semver": "^7.2.1",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0",
@@ -3716,9 +3416,9 @@
       }
     },
     "node_modules/eslint-plugin-svelte3": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.1.tgz",
-      "integrity": "sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.4.0.tgz",
+      "integrity": "sha512-MIQUTuRv3o7LyQ+360qOc9mLT35j1I5YzHr04g/UDcvJTpg0X/kHWELY99ve869Rp/9wjqD7I26Aq5H8OH5RIg==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -3769,9 +3469,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
-      "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz",
+      "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3884,15 +3584,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4011,9 +3702,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
-      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -4023,7 +3714,7 @@
         "micromatch": "^4.0.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=8.6.0"
       }
     },
     "node_modules/fast-glob/node_modules/glob-parent": {
@@ -4289,16 +3980,16 @@
       "dev": true
     },
     "node_modules/globby": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
         "slash": "^3.0.0"
       },
       "engines": {
@@ -4315,9 +4006,9 @@
       "dev": true
     },
     "node_modules/graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
       "dev": true
     },
     "node_modules/has": {
@@ -4442,9 +4133,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
-      "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
+      "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -4725,12 +4416,6 @@
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
       "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
     },
-    "node_modules/lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
-      "dev": true
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4742,12 +4427,6 @@
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
     },
-    "node_modules/lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
-    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4796,12 +4475,6 @@
       "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
       "dev": true
     },
-    "node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4854,15 +4527,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-svg-data-uri": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
-      "integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==",
-      "dev": true,
-      "bin": {
-        "mini-svg-data-uri": "cli.js"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -4904,9 +4568,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -4921,15 +4585,23 @@
       "dev": true
     },
     "node_modules/node-fetch": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
-      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
       "engines": {
         "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
     "node_modules/node-releases": {
@@ -4955,18 +4627,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/npm-bundled": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
@@ -4993,18 +4653,6 @@
         "npm-normalize-package-bin": "^1.0.1"
       }
     },
-    "node_modules/nth-check": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
-    },
     "node_modules/object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -5255,115 +4903,23 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/postcss-calc": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.1.0.tgz",
-      "integrity": "sha512-XaJ+DArhRtRAzI+IqjRNTM0i4NFKkMK5StepwynfrF27UfO6/oMaELSVDE4f9ndLHyaO4aDKUwfQKVmje/BzCg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.2"
-      }
-    },
-    "node_modules/postcss-colormin": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.2.tgz",
-      "integrity": "sha512-tSEe3NpqWARUTidDlF0LntPkdlhXqfDFuA1yslqpvvGAfpZ7oBaw+/QXd935NKm2U9p4PED0HDZlzmMk7fVC6g==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-convert-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz",
-      "integrity": "sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-comments": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-duplicates": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-empty": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-overridden": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
       "dev": true,
       "dependencies": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "camelcase-css": "^2.0.1"
       },
       "engines": {
-        "node": ">=10.0"
+        "node": "^12 || ^14 || >= 16"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
       }
     },
     "node_modules/postcss-load-config": {
@@ -5391,106 +4947,6 @@
         }
       }
     },
-    "node_modules/postcss-merge-longhand": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.4.tgz",
-      "integrity": "sha512-2lZrOVD+d81aoYkZDpWu6+3dTAAGkCKbV5DoRhnIR7KOULVrI/R7bcMjhrH9KTRy6iiHKqmtG+n/MMj1WmqHFw==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0",
-        "stylehacks": "^5.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-merge-rules": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.3.tgz",
-      "integrity": "sha512-cEKTMEbWazVa5NXd8deLdCnXl+6cYG7m2am+1HzqH0EnTdy8fRysatkaXb2dEnR+fdaDxTvuZ5zoBdv6efF6hg==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-font-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
-      "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-gradients": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.3.tgz",
-      "integrity": "sha512-Z91Ol22nB6XJW+5oe31+YxRsYooxOdFKcbOqY/V8Fxse1Y3vqlNRpi1cxCqoACZTQEhl+xvt4hsbWiV5R+XI9Q==",
-      "dev": true,
-      "dependencies": {
-        "colord": "^2.9.1",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-params": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.2.tgz",
-      "integrity": "sha512-qJAPuBzxO1yhLad7h2Dzk/F7n1vPyfHfCCh5grjGfjhi1ttCnq4ZXGIW77GSrEbh9Hus9Lc/e/+tB4vh3/GpDg==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "browserslist": "^4.16.6",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-selectors": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
-      "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/postcss-nested": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
@@ -5510,191 +4966,6 @@
         "postcss": "^8.2.14"
       }
     },
-    "node_modules/postcss-normalize-charset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-display-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
-      "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-positions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
-      "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-repeat-style": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
-      "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-string": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
-      "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-timing-functions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
-      "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-unicode": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
-      "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-url": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.4.tgz",
-      "integrity": "sha512-cNj3RzK2pgQQyNp7dzq0dqpUpQ/wYtdDZM3DepPmFjCmYIfceuD9VIAcOdvrNetjIU65g1B4uwdP/Krf6AFdXg==",
-      "dev": true,
-      "dependencies": {
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-whitespace": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
-      "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-ordered-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz",
-      "integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-reduce-initial": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.2.tgz",
-      "integrity": "sha512-v/kbAAQ+S1V5v9TJvbGkV98V2ERPdU6XvMcKMjqAlYiJ2NtsHGlKYLPjWWcXlaTKNxooId7BGxeraK8qXvzKtw==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-reduce-transforms": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
-      "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
@@ -5708,38 +4979,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-svgo": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
-      "integrity": "sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0",
-        "svgo": "^2.7.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-unique-selectors": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.2.tgz",
-      "integrity": "sha512-w3zBVlrtZm7loQWRPVC0yjUwwpty7OM6DnEHkxcSQXO1bMS3RJ+JUS5LFMSDZHJcvGsRwhZinCWVqn8Kej4EDA==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5768,24 +5007,15 @@
       }
     },
     "node_modules/prettier-plugin-svelte": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz",
-      "integrity": "sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.6.0.tgz",
+      "integrity": "sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==",
       "dev": true,
       "peerDependencies": {
         "prettier": "^1.16.4 || ^2.0.0",
         "svelte": "^3.2.0"
       }
     },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/ps-tree": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.2.0.tgz",
@@ -5997,9 +5227,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.63.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.63.0.tgz",
-      "integrity": "sha512-nps0idjmD+NXl6OREfyYXMn/dar3WGcyKn+KBzPdaLecub3x/LrId0wUcthcr8oZUAcZAR8NKcfGGFlNgGL1kQ==",
+      "version": "2.64.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz",
+      "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -6034,9 +5264,9 @@
       }
     },
     "node_modules/sade": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.0.tgz",
-      "integrity": "sha512-NRfCA8AVYuAA7Hu8bs18od6J4BdcXXwOv6OJuNgwbw8LcLK8JKwaM3WckLZ+MGyPJUS/ivVgK3twltrOIJJnug==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
       "dependencies": {
         "mri": "^1.1.0"
       },
@@ -6131,9 +5361,9 @@
       }
     },
     "node_modules/sk-auth": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/sk-auth/-/sk-auth-0.3.7.tgz",
-      "integrity": "sha512-b2CVVL9TlW7sogD38wea42sl2Qs4crTFuyp8WZ0awv79fYhpSc9YIodPPLBq8tfkmImXZBvQgIDcYa1YZSYYhQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/sk-auth/-/sk-auth-0.4.0.tgz",
+      "integrity": "sha512-0Np5pvIFV+DfdzifF5b5RbpCB901b5ZI/XfZeb+vIBDaY1erxkZMStnPVpPbJU+jgJ9DHJ+YIKRt297LV07b/g==",
       "dependencies": {
         "cookie": "^0.4.1",
         "jsonwebtoken": "^8.5.1"
@@ -6183,9 +5413,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6226,12 +5456,6 @@
         "node": "*"
       }
     },
-    "node_modules/stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
-    },
     "node_modules/stream-combiner": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
@@ -6277,22 +5501,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/stylehacks": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
-      "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.0",
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -6316,24 +5524,24 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.44.3",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.3.tgz",
-      "integrity": "sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==",
+      "version": "3.46.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.2.tgz",
+      "integrity": "sha512-RXSAtYNefe01Sb1lXtZ2I+gzn3t/h/59hoaRNeRrm8IkMIu6BSiAkbpi41xb+C44x54YKnbk9+dtfs3pM4hECA==",
       "engines": {
         "node": ">= 8"
       }
     },
     "node_modules/svelte-check": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.2.11.tgz",
-      "integrity": "sha512-clotPGGZPj3LuS9qP1lk+Wwnsj+js42ehCPmHk+qtyaQh/dU95e0qkpPmtmOMYHN6My5Y75XqeN1QNLj5V5gwA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.3.0.tgz",
+      "integrity": "sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==",
       "dev": true,
       "dependencies": {
-        "chalk": "^4.0.0",
         "chokidar": "^3.4.1",
         "fast-glob": "^3.2.7",
         "import-fresh": "^3.2.1",
         "minimist": "^1.2.5",
+        "picocolors": "^1.0.0",
         "sade": "^1.7.4",
         "source-map": "^0.7.3",
         "svelte-preprocess": "^4.0.0",
@@ -6346,64 +5554,6 @@
         "svelte": "^3.24.0"
       }
     },
-    "node_modules/svelte-check/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/svelte-check/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/svelte-check/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/svelte-check/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/svelte-check/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/svelte-check/node_modules/source-map": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
@@ -6413,18 +5563,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/svelte-check/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/svelte-dnd-action": {
       "version": "0.9.14",
       "resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.14.tgz",
@@ -6439,12 +5577,6 @@
         "svelte": ">=3.19.0"
       }
     },
-    "node_modules/svelte-json-tree": {
-      "version": "0.1.0",
-      "resolved": "git+ssh://git@github.com/eraviart/svelte-json-tree.git#2eb2d6d905b1044277e3a4d6cdfdd0e4a7ae50a0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/svelte-modals": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/svelte-modals/-/svelte-modals-1.0.4.tgz",
@@ -6452,9 +5584,9 @@
       "dev": true
     },
     "node_modules/svelte-preprocess": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz",
-      "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.2.tgz",
+      "integrity": "sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -6471,12 +5603,12 @@
       "peerDependencies": {
         "@babel/core": "^7.10.2",
         "coffeescript": "^2.5.1",
-        "less": "^3.11.3",
+        "less": "^3.11.3 || ^4.0.0",
         "postcss": "^7 || ^8",
         "postcss-load-config": "^2.1.0 || ^3.0.0",
         "pug": "^3.0.0",
         "sass": "^1.26.8",
-        "stylus": "^0.54.7",
+        "stylus": "^0.55.0",
         "sugarss": "^2.0.0",
         "svelte": "^3.23.0",
         "typescript": "^4.5.2"
@@ -6517,31 +5649,10 @@
         }
       }
     },
-    "node_modules/svgo": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
-      "dev": true,
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^4.1.3",
-        "css-tree": "^1.1.3",
-        "csso": "^4.2.0",
-        "picocolors": "^1.0.0",
-        "stable": "^0.1.8"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/tailwindcss": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.9.tgz",
-      "integrity": "sha512-X8TVifxDWfiNXInOeBofTteXAtZ5f0HnLs/uV4jDQNShc33Jb7qjYbk4VwI365rWAzcqYTks+9kesf3xH7Y35A==",
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz",
+      "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.1",
@@ -6557,13 +5668,13 @@
         "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
+        "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.7",
+        "postcss-selector-parser": "^6.0.8",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "resolve": "^1.20.0"
+        "resolve": "^1.21.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -6659,12 +5770,6 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
-    "node_modules/timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
     "node_modules/tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -6861,9 +5966,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "2.7.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.10.tgz",
-      "integrity": "sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==",
+      "version": "2.7.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.13.tgz",
+      "integrity": "sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==",
       "dependencies": {
         "esbuild": "^0.13.12",
         "postcss": "^8.4.5",
@@ -6975,9 +6080,9 @@
       }
     },
     "node_modules/zx": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/zx/-/zx-4.2.0.tgz",
-      "integrity": "sha512-/4f7FaJecA9I655KXKXIHO3CFNYjAz2uSmTz6v2eNlKdrQKyz4VyF3RjqFuP6nQG+Hd3+NjOvrVNBkv8Ne9d4Q==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/zx/-/zx-4.3.0.tgz",
+      "integrity": "sha512-KuEjpu5QFIMx0wWfzknDRhY98s7a3tWNRmYt19XNmB7AfOmz5zISA4+3Q8vlJc2qguxMn89uSxhPDCldPa3YLA==",
       "dev": true,
       "dependencies": {
         "@types/fs-extra": "^9.0.12",
@@ -6996,13 +6101,13 @@
         "zx": "zx.mjs"
       },
       "engines": {
-        "node": ">= 14.13.0"
+        "node": ">= 14.13.1"
       }
     },
     "node_modules/zx/node_modules/@types/node": {
-      "version": "16.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.18.tgz",
-      "integrity": "sha512-7N8AOYWWYuw0g+K+GKCmIwfU1VMHcexYNpLPYzFZ4Uq2W6C/ptfeC7XhXgy/4pcwhz/9KoS5yijMfnYQ0u0Udw==",
+      "version": "16.11.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.21.tgz",
+      "integrity": "sha512-Pf8M1XD9i1ksZEcCP8vuSNwooJ/bZapNmIzpmsMaL+jMI+8mEYU3PKvs+xDNuQcJWF/x24WzY4qxLtB0zNow9A==",
       "dev": true
     },
     "node_modules/zx/node_modules/ansi-styles": {
@@ -7067,15 +6172,15 @@
       "dev": true
     },
     "node_modules/zx/node_modules/globby": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-12.0.2.tgz",
-      "integrity": "sha512-lAsmb/5Lww4r7MM9nCCliDZVIKbZTavrsunAsHLr9oHthrZP1qi7/gAnHOsUs9bLvEt2vKVJhHmxuL7QbDuPdQ==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+      "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
       "dev": true,
       "dependencies": {
         "array-union": "^3.0.1",
         "dir-glob": "^3.0.1",
         "fast-glob": "^3.2.7",
-        "ignore": "^5.1.8",
+        "ignore": "^5.1.9",
         "merge2": "^1.4.1",
         "slash": "^4.0.0"
       },
@@ -7136,9 +6241,9 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.16.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz",
-      "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
+      "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
       "peer": true
     },
     "@babel/core": {
@@ -7173,12 +6278,12 @@
       }
     },
     "@babel/generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz",
-      "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
+      "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
       "peer": true,
       "requires": {
-        "@babel/types": "^7.16.7",
+        "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       }
@@ -7248,9 +6353,9 @@
       }
     },
     "@babel/helper-define-polyfill-provider": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.0.tgz",
-      "integrity": "sha512-7hfT8lUljl/tM3h+izTX/pO3W3frz2ok6Pk+gzys8iJqDfZrZy2pXjRTZAvG2YmfHun1X4q8/UZRLatMfqc5Tg==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz",
+      "integrity": "sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==",
       "peer": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
@@ -7368,14 +6473,14 @@
       "peer": true
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.7.tgz",
-      "integrity": "sha512-C3o117GnP/j/N2OWo+oepeWbFEKRfNaay+F1Eo5Mj3A1SRjyx+qaFhm23nlipub7Cjv2azdUUiDH+VlpdwUFRg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==",
       "peer": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-wrap-function": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-wrap-function": "^7.16.8",
+        "@babel/types": "^7.16.8"
       }
     },
     "@babel/helper-replace-supers": {
@@ -7430,15 +6535,15 @@
       "peer": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.7.tgz",
-      "integrity": "sha512-7a9sABeVwcunnztZZ7WTgSw6jVYLzM1wua0Z4HIXm9S3/HC96WKQTkFgGEaj5W06SHHihPJ6Le6HzS5cGOQMNw==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz",
+      "integrity": "sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==",
       "peer": true,
       "requires": {
         "@babel/helper-function-name": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.16.8",
+        "@babel/types": "^7.16.8"
       }
     },
     "@babel/helpers": {
@@ -7463,9 +6568,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz",
-      "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.8.tgz",
+      "integrity": "sha512-i7jDUfrVBWc+7OKcBzEe5n7fbv3i2fWtxKzzCvOjnzSxMfWMigAhtfJ7qzZNGFNMsCCd67+uz553dYKWXPvCKw==",
       "peer": true
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -7489,13 +6594,13 @@
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.7.tgz",
-      "integrity": "sha512-TTXBT3A5c11eqRzaC6beO6rlFT3Mo9C2e8eB44tTr52ESXSK2CIc2fOp1ynpAwQA8HhBMho+WXhMHWlAe3xkpw==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz",
+      "integrity": "sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==",
       "peer": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.7",
+        "@babel/helper-remap-async-to-generator": "^7.16.8",
         "@babel/plugin-syntax-async-generators": "^7.8.4"
       }
     },
@@ -7800,14 +6905,14 @@
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.7.tgz",
-      "integrity": "sha512-pFEfjnK4DfXCfAlA5I98BYdDJD8NltMzx19gt6DAmfE+2lXRfPUoa0/5SUjT4+TDE1W/rcxU/1lgN55vpAjjdg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz",
+      "integrity": "sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==",
       "peer": true,
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-remap-async-to-generator": "^7.16.7"
+        "@babel/helper-remap-async-to-generator": "^7.16.8"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
@@ -7951,9 +7056,9 @@
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.7.tgz",
-      "integrity": "sha512-h2RP2kE7He1ZWKyAlanMZrAbdv+Acw1pA8dQZhE025WJZE2z0xzFADAinXA9fxd5bn7JnM+SdOGcndGx1ARs9w==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz",
+      "integrity": "sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==",
       "peer": true,
       "requires": {
         "@babel/helper-module-transforms": "^7.16.7",
@@ -7986,9 +7091,9 @@
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.7.tgz",
-      "integrity": "sha512-kFy35VwmwIQwCjwrAQhl3+c/kr292i4KdLPKp5lPH03Ltc51qnFlIADoyPxc/6Naz3ok3WdYKg+KK6AH+D4utg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz",
+      "integrity": "sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==",
       "peer": true,
       "requires": {
         "@babel/helper-create-regexp-features-plugin": "^7.16.7"
@@ -8156,18 +7261,18 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.7.tgz",
-      "integrity": "sha512-urX3Cee4aOZbRWOSa3mKPk0aqDikfILuo+C7qq7HY0InylGNZ1fekq9jmlr3pLWwZHF4yD7heQooc2Pow2KMyQ==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.8.tgz",
+      "integrity": "sha512-9rNKgVCdwHb3z1IlbMyft6yIXIeP3xz6vWvGaLHrJThuEIqWfHb0DNBH9VuTgnDfdbUDhkmkvMZS/YMCtP7Elg==",
       "peer": true,
       "requires": {
-        "@babel/compat-data": "^7.16.4",
+        "@babel/compat-data": "^7.16.8",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/helper-validator-option": "^7.16.7",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.7",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.7",
-        "@babel/plugin-proposal-async-generator-functions": "^7.16.7",
+        "@babel/plugin-proposal-async-generator-functions": "^7.16.8",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-class-static-block": "^7.16.7",
         "@babel/plugin-proposal-dynamic-import": "^7.16.7",
@@ -8197,7 +7302,7 @@
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-transform-arrow-functions": "^7.16.7",
-        "@babel/plugin-transform-async-to-generator": "^7.16.7",
+        "@babel/plugin-transform-async-to-generator": "^7.16.8",
         "@babel/plugin-transform-block-scoped-functions": "^7.16.7",
         "@babel/plugin-transform-block-scoping": "^7.16.7",
         "@babel/plugin-transform-classes": "^7.16.7",
@@ -8211,10 +7316,10 @@
         "@babel/plugin-transform-literals": "^7.16.7",
         "@babel/plugin-transform-member-expression-literals": "^7.16.7",
         "@babel/plugin-transform-modules-amd": "^7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "^7.16.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
         "@babel/plugin-transform-modules-systemjs": "^7.16.7",
         "@babel/plugin-transform-modules-umd": "^7.16.7",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.16.8",
         "@babel/plugin-transform-new-target": "^7.16.7",
         "@babel/plugin-transform-object-super": "^7.16.7",
         "@babel/plugin-transform-parameters": "^7.16.7",
@@ -8229,11 +7334,11 @@
         "@babel/plugin-transform-unicode-escapes": "^7.16.7",
         "@babel/plugin-transform-unicode-regex": "^7.16.7",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.16.7",
+        "@babel/types": "^7.16.8",
         "babel-plugin-polyfill-corejs2": "^0.3.0",
-        "babel-plugin-polyfill-corejs3": "^0.4.0",
+        "babel-plugin-polyfill-corejs3": "^0.5.0",
         "babel-plugin-polyfill-regenerator": "^0.3.0",
-        "core-js-compat": "^3.19.1",
+        "core-js-compat": "^3.20.2",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -8284,9 +7389,9 @@
       }
     },
     "@babel/register": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.7.tgz",
-      "integrity": "sha512-Ft+cuxorVxFj4RrPDs9TbJNE7ZbuJTyazUC6jLWRvBQT/qIDZPMe7MHgjlrA+11+XDLh+I0Pnx7sxPp4LRhzcA==",
+      "version": "7.16.9",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.9.tgz",
+      "integrity": "sha512-jJ72wcghdRIlENfvALcyODhNoGE5j75cYHdC+aQMh6cU/P86tiiXTp9XYZct1UxUMo/4+BgQRyNZEGx0KWGS+g==",
       "peer": true,
       "requires": {
         "clone-deep": "^4.0.1",
@@ -8317,27 +7422,27 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz",
-      "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.8.tgz",
+      "integrity": "sha512-xe+H7JlvKsDQwXRsBhSnq1/+9c+LlQcCK3Tn/l5sbx02HYns/cn7ibp9+RV1sIUqu7hKg91NWsgHurO9dowITQ==",
       "peer": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.16.7",
+        "@babel/generator": "^7.16.8",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7",
+        "@babel/parser": "^7.16.8",
+        "@babel/types": "^7.16.8",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz",
-      "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==",
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
+      "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
       "peer": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -8434,16 +7539,16 @@
       }
     },
     "@openfisca/france-json": {
-      "version": "0.1.45",
-      "resolved": "https://registry.npmjs.org/@openfisca/france-json/-/france-json-0.1.45.tgz",
-      "integrity": "sha512-diJh4CBOZQlYKMoladVJh7xQuGXGW2670xoOU+Dh3fBkqsGCiF8QoAM/aLHWabs8W6mtdLAAfCrXvNsQq5eeAw==",
+      "version": "0.1.51",
+      "resolved": "https://registry.npmjs.org/@openfisca/france-json/-/france-json-0.1.51.tgz",
+      "integrity": "sha512-L8qoFdqiacHh8w/xYSwUTYG5T4Hstn/13nXdw/jnFWE4QIl3vbyrYhGl1m3C2VQ8v8QKRwXnfN2dNPrTYgIi2Q==",
       "dev": true,
       "requires": {}
     },
     "@openfisca/json-model": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@openfisca/json-model/-/json-model-1.1.0.tgz",
-      "integrity": "sha512-A0jbboktu1VK7v84XEunrq0s8jGpxJTxFKtTbeQKVY9bRjzEZixZvg3Qo84B+tvFfcPv5z8cNGG5gHUC5ifnMA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@openfisca/json-model/-/json-model-1.1.7.tgz",
+      "integrity": "sha512-DpkwkhMIRJvU9aYNZ35b0z33AX2hI+R9oF4+WO478w4x0ji36DFv/ZCKnKesxYM05lK2HJfghCAXv5N+Oi6cdw==",
       "dev": true,
       "requires": {
         "@auditors/core": "^0.2.0",
@@ -8462,18 +7567,18 @@
       }
     },
     "@sveltejs/adapter-node": {
-      "version": "1.0.0-next.60",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.0.0-next.60.tgz",
-      "integrity": "sha512-aOX0WEoSoy9ANHDbyul83c0F9qxI+vl//kYEhTZURY4NNnRQ4B1+QECDIv70v3SjU/aAT+56ofpvcZA++sfQxw==",
+      "version": "1.0.0-next.62",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.0.0-next.62.tgz",
+      "integrity": "sha512-mq/IOgQos0ps3efi4JTuEXdhQaoUwdWZ4RTgP2DeVL5VsWqm0T+GZJod/RDSwzwDdq4QqUHjfnpk+mKuO5QnWQ==",
       "dev": true,
       "requires": {
         "tiny-glob": "^0.2.9"
       }
     },
     "@sveltejs/kit": {
-      "version": "1.0.0-next.215",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.215.tgz",
-      "integrity": "sha512-3y6NFKacahEjgAuGNgs49t2Jf708syKEf6A7uf0dXoQXq3giF+/O1XDF4f+I2g/39iiOtkJMW10tyvIiRG22Hw==",
+      "version": "1.0.0-next.232",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.232.tgz",
+      "integrity": "sha512-STQ0hnJozIop8k9I313nwVasBIQ45Z2K1pUOkDVjCSOGijgsj+De5q0prQBtL1ZlqqisfkYlOf8W9gvDSyTLEA==",
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.32",
         "sade": "^1.7.4",
@@ -8481,9 +7586,9 @@
       }
     },
     "@sveltejs/vite-plugin-svelte": {
-      "version": "1.0.0-next.33",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.33.tgz",
-      "integrity": "sha512-aj0h2+ZixgT+yoJFIs8dRRw/Cj9tgNu3+hY4CJikpa04mfhR61wXqJFfi2ZEFMUvFda5nCxKYIChFkc6wq5fJA==",
+      "version": "1.0.0-next.34",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.34.tgz",
+      "integrity": "sha512-qZH2jndijrdkvevgbO7OH3iQsviM5Kz7h5APiNP4yEMZTrwq9bifzYvco6BprwtPvLb5wYlRVFZUOdusY6AovQ==",
       "requires": {
         "@rollup/pluginutils": "^4.1.2",
         "debug": "^4.3.3",
@@ -8493,21 +7598,6 @@
         "svelte-hmr": "^0.14.9"
       }
     },
-    "@tailwindcss/forms": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
-      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
-      "dev": true,
-      "requires": {
-        "mini-svg-data-uri": "^1.2.3"
-      }
-    },
-    "@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "dev": true
-    },
     "@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -8536,9 +7626,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "17.0.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.7.tgz",
-      "integrity": "sha512-1QUk+WAUD4t8iR+Oj+UgI8oJa6yyxaB8a8pHaC8uqM6RrS1qbL7bf3Pwl5rHv0psm2CuDErgho6v5N+G+5fwtQ==",
+      "version": "17.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.10.tgz",
+      "integrity": "sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog==",
       "dev": true
     },
     "@types/node-fetch": {
@@ -8573,14 +7663,14 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.9.0.tgz",
-      "integrity": "sha512-qT4lr2jysDQBQOPsCCvpPUZHjbABoTJW8V9ZzIYKHMfppJtpdtzszDYsldwhFxlhvrp7aCHeXD1Lb9M1zhwWwQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.0.tgz",
+      "integrity": "sha512-XXVKnMsq2fuu9K2KsIxPUGqb6xAImz8MEChClbXmE3VbveFtBUU5bzM6IPVWqzyADIgdkS2Ws/6Xo7W2TeZWjQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "5.9.0",
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/type-utils": "5.9.0",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/type-utils": "5.10.0",
+        "@typescript-eslint/utils": "5.10.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -8589,67 +7679,53 @@
         "tsutils": "^3.21.0"
       }
     },
-    "@typescript-eslint/experimental-utils": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.9.0.tgz",
-      "integrity": "sha512-ZnLVjBrf26dn7ElyaSKa6uDhqwvAi4jBBmHK1VxuFGPRAxhdi18ubQYSGA7SRiFiES3q9JiBOBHEBStOFkwD2g==",
-      "dev": true,
-      "requires": {
-        "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/typescript-estree": "5.9.0",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      }
-    },
     "@typescript-eslint/parser": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.9.0.tgz",
-      "integrity": "sha512-/6pOPz8yAxEt4PLzgbFRDpZmHnXCeZgPDrh/1DaVKOjvn/UPMlWhbx/gA96xRi2JxY1kBl2AmwVbyROUqys5xQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.0.tgz",
+      "integrity": "sha512-pJB2CCeHWtwOAeIxv8CHVGJhI5FNyJAIpx5Pt72YkK3QfEzt6qAlXZuyaBmyfOdM62qU0rbxJzNToPTVeJGrQw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.9.0",
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/typescript-estree": "5.9.0",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/typescript-estree": "5.10.0",
         "debug": "^4.3.2"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.9.0.tgz",
-      "integrity": "sha512-DKtdIL49Qxk2a8icF6whRk7uThuVz4A6TCXfjdJSwOsf+9ree7vgQWcx0KOyCdk0i9ETX666p4aMhrRhxhUkyg==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.0.tgz",
+      "integrity": "sha512-tgNgUgb4MhqK6DoKn3RBhyZ9aJga7EQrw+2/OiDk5hKf3pTVZWyqBi7ukP+Z0iEEDMF5FDa64LqODzlfE4O/Dg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/visitor-keys": "5.9.0"
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/visitor-keys": "5.10.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.9.0.tgz",
-      "integrity": "sha512-uVCb9dJXpBrK1071ri5aEW7ZHdDHAiqEjYznF3HSSvAJXyrkxGOw2Ejibz/q6BXdT8lea8CMI0CzKNFTNI6TEQ==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.0.tgz",
+      "integrity": "sha512-TzlyTmufJO5V886N+hTJBGIfnjQDQ32rJYxPaeiyWKdjsv2Ld5l8cbS7pxim4DeNs62fKzRSt8Q14Evs4JnZyQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "5.9.0",
+        "@typescript-eslint/utils": "5.10.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.9.0.tgz",
-      "integrity": "sha512-mWp6/b56Umo1rwyGCk8fPIzb9Migo8YOniBGPAQDNC6C52SeyNGN4gsVwQTAR+RS2L5xyajON4hOLwAGwPtUwg==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz",
+      "integrity": "sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.9.0.tgz",
-      "integrity": "sha512-kxo3xL2mB7XmiVZcECbaDwYCt3qFXz99tBSuVJR4L/sR7CJ+UNAPrYILILktGj1ppfZ/jNt/cWYbziJUlHl1Pw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz",
+      "integrity": "sha512-x+7e5IqfwLwsxTdliHRtlIYkgdtYXzE0CkFeV6ytAqq431ZyxCFzNMNR5sr3WOlIG/ihVZr9K/y71VHTF/DUQA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.9.0",
-        "@typescript-eslint/visitor-keys": "5.9.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/visitor-keys": "5.10.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -8657,13 +7733,27 @@
         "tsutils": "^3.21.0"
       }
     },
+    "@typescript-eslint/utils": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.0.tgz",
+      "integrity": "sha512-IGYwlt1CVcFoE2ueW4/ioEwybR60RAdGeiJX/iDAw0t5w0wK3S7QncDwpmsM70nKgGTuVchEWB8lwZwHqPAWRg==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.10.0",
+        "@typescript-eslint/types": "5.10.0",
+        "@typescript-eslint/typescript-estree": "5.10.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      }
+    },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.9.0.tgz",
-      "integrity": "sha512-6zq0mb7LV0ThExKlecvpfepiB+XEtFv/bzx7/jKSgyXTFD7qjmSu1FoiS0x3OZaiS+UIXpH2vd9O89f02RCtgw==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz",
+      "integrity": "sha512-GMxj0K1uyrFLPKASLmZzCuSddmjZVbVj3Ouy5QVuIGKZopxvOr24JsS7gruz6C3GExE01mublZ3mIBOaon9zuQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.9.0",
+        "@typescript-eslint/types": "5.10.0",
         "eslint-visitor-keys": "^3.0.0"
       }
     },
@@ -8717,18 +7807,6 @@
         "uri-js": "^4.2.2"
       }
     },
-    "alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-      "dev": true
-    },
-    "ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true
-    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -8778,13 +7856,13 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz",
-      "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==",
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "requires": {
         "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30001294",
+        "caniuse-lite": "^1.0.30001297",
         "fraction.js": "^4.1.2",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -8811,13 +7889,13 @@
       }
     },
     "babel-plugin-polyfill-corejs2": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.0.tgz",
-      "integrity": "sha512-wMDoBJ6uG4u4PNFh72Ty6t3EgfA91puCuAwKIazbQlci+ENb/UU9A3xG5lutjUIiXCIn1CY5L15r9LimiJyrSA==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz",
+      "integrity": "sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==",
       "peer": true,
       "requires": {
         "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.3.0",
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
         "semver": "^6.1.1"
       },
       "dependencies": {
@@ -8830,22 +7908,22 @@
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.4.0.tgz",
-      "integrity": "sha512-YxFreYwUfglYKdLUGvIF2nJEsGwj+RhWSX/ije3D2vQPOXuyMLMtg/cCGMDpOA7Nd+MwlNdnGODbd2EwUZPlsw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.1.tgz",
+      "integrity": "sha512-TihqEe4sQcb/QcPJvxe94/9RZuLQuF1+To4WqQcRvc+3J3gLCPIPgDKzGLG6zmQLfH3nn25heRuDNkS2KR4I8A==",
       "peer": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.0",
-        "core-js-compat": "^3.18.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.1",
+        "core-js-compat": "^3.20.0"
       }
     },
     "babel-plugin-polyfill-regenerator": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.0.tgz",
-      "integrity": "sha512-dhAPTDLGoMW5/84wkgwiLRwMnio2i1fUe53EuvtKMv0pn2p3S8OCoV1xAzfJPl0KOX7IB89s2ib85vbYiea3jg==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz",
+      "integrity": "sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==",
       "peer": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.3.0"
+        "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
     },
     "babel-preset-diff": {
@@ -8899,12 +7977,6 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8987,22 +8059,10 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
-    "caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
     "caniuse-lite": {
-      "version": "1.0.30001296",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001296.tgz",
-      "integrity": "sha512-WfrtPEoNSoeATDlf4y3QvkwiELl9GyPLISV5GejTbbQRtQx4LhsXmc9IQ6XCL2d7UxCyEzToEZNMeqR79OUw8Q=="
+      "version": "1.0.30001300",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz",
+      "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -9015,9 +8075,9 @@
       }
     },
     "chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
@@ -9065,12 +8125,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
-    "colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
-      "dev": true
-    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -9080,12 +8134,6 @@
         "delayed-stream": "~1.0.0"
       }
     },
-    "commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true
-    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -9112,15 +8160,15 @@
       "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
     },
     "core-js": {
-      "version": "3.20.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.2.tgz",
-      "integrity": "sha512-nuqhq11DcOAbFBV4zCbKeGbKQsUDRqTX0oqx7AttUBuqe3h20ixsE039QHelbL6P4h+9kytVqyEtyZ6gsiwEYw==",
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.20.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.2.tgz",
-      "integrity": "sha512-qZEzVQ+5Qh6cROaTPFLNS4lkvQ6mBzE3R6A6EEpssj7Zr2egMHgsy4XapdifqJDGC9CBiNv7s+ejI96rLNQFdg==",
+      "version": "3.20.3",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.20.3.tgz",
+      "integrity": "sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==",
       "peer": true,
       "requires": {
         "browserslist": "^4.19.1",
@@ -9159,122 +8207,12 @@
         "which": "^2.0.1"
       }
     },
-    "css-declaration-sorter": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
-      "integrity": "sha512-SvjQjNRZgh4ULK1LDJ2AduPKUKxIqmtU7ZAyi47BTV+M90Qvxr9AB6lKlLbDUfXqI9IQeYA8LbAsCZPpJEV3aA==",
-      "dev": true,
-      "requires": {
-        "timsort": "^0.3.0"
-      }
-    },
-    "css-select": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
-      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^5.1.0",
-        "domhandler": "^4.3.0",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      }
-    },
-    "css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
-      "requires": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
-    "css-what": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
-      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
-      "dev": true
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "cssnano": {
-      "version": "5.0.14",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.14.tgz",
-      "integrity": "sha512-qzhRkFvBhv08tbyKCIfWbxBXmkIpLl1uNblt8SpTHkgLfON5OCPX/CCnkdNmEosvo8bANQYmTTMEgcVBlisHaw==",
-      "dev": true,
-      "requires": {
-        "cssnano-preset-default": "^5.1.9",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.9.tgz",
-      "integrity": "sha512-RhkEucqlQ+OxEi14K1p8gdXcMQy1mSpo7P1oC44oRls7BYIj8p+cht4IFBFV3W4iOjTP8EUB33XV1fX9KhDzyA==",
-      "dev": true,
-      "requires": {
-        "css-declaration-sorter": "^6.0.3",
-        "cssnano-utils": "^2.0.1",
-        "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.2",
-        "postcss-convert-values": "^5.0.2",
-        "postcss-discard-comments": "^5.0.1",
-        "postcss-discard-duplicates": "^5.0.1",
-        "postcss-discard-empty": "^5.0.1",
-        "postcss-discard-overridden": "^5.0.1",
-        "postcss-merge-longhand": "^5.0.4",
-        "postcss-merge-rules": "^5.0.3",
-        "postcss-minify-font-values": "^5.0.1",
-        "postcss-minify-gradients": "^5.0.3",
-        "postcss-minify-params": "^5.0.2",
-        "postcss-minify-selectors": "^5.1.0",
-        "postcss-normalize-charset": "^5.0.1",
-        "postcss-normalize-display-values": "^5.0.1",
-        "postcss-normalize-positions": "^5.0.1",
-        "postcss-normalize-repeat-style": "^5.0.1",
-        "postcss-normalize-string": "^5.0.1",
-        "postcss-normalize-timing-functions": "^5.0.1",
-        "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.4",
-        "postcss-normalize-whitespace": "^5.0.1",
-        "postcss-ordered-values": "^5.0.2",
-        "postcss-reduce-initial": "^5.0.2",
-        "postcss-reduce-transforms": "^5.0.1",
-        "postcss-svgo": "^5.0.3",
-        "postcss-unique-selectors": "^5.0.2"
-      }
-    },
-    "cssnano-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "dev": true,
-      "requires": {}
-    },
-    "csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dev": true,
-      "requires": {
-        "css-tree": "^1.1.2"
-      }
-    },
     "d3-array": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
@@ -9424,47 +8362,10 @@
         "esutils": "^2.0.2"
       }
     },
-    "dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      }
-    },
-    "domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
-    },
-    "domhandler": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
-      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.2.0"
-      }
-    },
-    "domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
-      "requires": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      }
-    },
     "dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-14.2.0.tgz",
+      "integrity": "sha512-05POuPJyPpO6jqzTNweQFfAyMSD4qa4lvsMOWyTRTdpHKy6nnnN+IYWaXF+lHivhBH/ufDKlR4IWCAN3oPnHuw==",
       "dev": true
     },
     "duplexer": {
@@ -9482,24 +8383,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.33",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.33.tgz",
-      "integrity": "sha512-OVK1Ad3pHnmuXPhEfq85X8vUKr1UPNHryBnbKnyLcAfh8dPwoFjoDhDlP5KpPJIiymvSucZs48UBrE1250IxOw=="
-    },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
-      }
-    },
-    "entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true
+      "version": "1.4.48",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.48.tgz",
+      "integrity": "sha512-RT3SEmpv7XUA+tKXrZGudAWLDpa7f8qmhjcLaM6OD/ERxjQ/zAojT8/Vvo0BSzbArkElFZ1WyZ9FuwAYbkdBNA=="
     },
     "error-ex": {
       "version": "1.3.2",
@@ -9653,9 +8539,9 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz",
-      "integrity": "sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==",
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.7.0.tgz",
+      "integrity": "sha512-ifHYzkBGrzS2iDU7KjhCAVMGCvF6M3Xfs8X8b37cgrUlDt6bWRTpRh6T/gtSXv1HJ/BUGgmjvNvOEGu85Iif7w==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.0.5",
@@ -9665,11 +8551,10 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
-        "enquirer": "^2.3.5",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.1.0",
         "eslint-utils": "^3.0.0",
-        "eslint-visitor-keys": "^3.1.0",
+        "eslint-visitor-keys": "^3.2.0",
         "espree": "^9.3.0",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
@@ -9678,7 +8563,7 @@
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^6.0.1",
         "globals": "^13.6.0",
-        "ignore": "^4.0.6",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
@@ -9689,9 +8574,7 @@
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
-        "progress": "^2.0.0",
         "regexpp": "^3.2.0",
-        "semver": "^7.2.1",
         "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0",
@@ -9769,12 +8652,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "ignore": {
-          "version": "4.0.6",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-          "dev": true
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -9794,9 +8671,9 @@
       "requires": {}
     },
     "eslint-plugin-svelte3": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.1.tgz",
-      "integrity": "sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.4.0.tgz",
+      "integrity": "sha512-MIQUTuRv3o7LyQ+360qOc9mLT35j1I5YzHr04g/UDcvJTpg0X/kHWELY99ve869Rp/9wjqD7I26Aq5H8OH5RIg==",
       "dev": true,
       "requires": {}
     },
@@ -9828,9 +8705,9 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
-      "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz",
+      "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==",
       "dev": true
     },
     "espree": {
@@ -9922,9 +8799,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
-      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -10140,16 +9017,16 @@
       "dev": true
     },
     "globby": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
       "requires": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
         "slash": "^3.0.0"
       }
     },
@@ -10160,9 +9037,9 @@
       "dev": true
     },
     "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
+      "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
       "dev": true
     },
     "has": {
@@ -10257,9 +9134,9 @@
       }
     },
     "is-core-module": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
-      "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
+      "integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -10485,12 +9362,6 @@
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
       "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
     },
-    "lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
-      "dev": true
-    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -10502,12 +9373,6 @@
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
     },
-    "lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
-    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -10549,12 +9414,6 @@
       "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
       "dev": true
     },
-    "mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -10592,12 +9451,6 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
-    "mini-svg-data-uri": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
-      "integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==",
-      "dev": true
-    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -10630,9 +9483,9 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nanoid": {
-      "version": "3.1.30",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
-      "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -10641,9 +9494,9 @@
       "dev": true
     },
     "node-fetch": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
-      "integrity": "sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
@@ -10666,12 +9519,6 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
-    "normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true
-    },
     "npm-bundled": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
@@ -10698,15 +9545,6 @@
         "npm-normalize-package-bin": "^1.0.1"
       }
     },
-    "nth-check": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0"
-      }
-    },
     "object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -10887,73 +9725,13 @@
         "source-map-js": "^1.0.1"
       }
     },
-    "postcss-calc": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.1.0.tgz",
-      "integrity": "sha512-XaJ+DArhRtRAzI+IqjRNTM0i4NFKkMK5StepwynfrF27UfO6/oMaELSVDE4f9ndLHyaO4aDKUwfQKVmje/BzCg==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
-    "postcss-colormin": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.2.tgz",
-      "integrity": "sha512-tSEe3NpqWARUTidDlF0LntPkdlhXqfDFuA1yslqpvvGAfpZ7oBaw+/QXd935NKm2U9p4PED0HDZlzmMk7fVC6g==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-convert-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz",
-      "integrity": "sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-discard-comments": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "dev": true,
-      "requires": {}
-    },
-    "postcss-discard-duplicates": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "dev": true,
-      "requires": {}
-    },
-    "postcss-discard-empty": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "dev": true,
-      "requires": {}
-    },
-    "postcss-discard-overridden": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "dev": true,
-      "requires": {}
-    },
     "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
       "dev": true,
       "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "camelcase-css": "^2.0.1"
       }
     },
     "postcss-load-config": {
@@ -10966,70 +9744,6 @@
         "yaml": "^1.10.2"
       }
     },
-    "postcss-merge-longhand": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.4.tgz",
-      "integrity": "sha512-2lZrOVD+d81aoYkZDpWu6+3dTAAGkCKbV5DoRhnIR7KOULVrI/R7bcMjhrH9KTRy6iiHKqmtG+n/MMj1WmqHFw==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0",
-        "stylehacks": "^5.0.1"
-      }
-    },
-    "postcss-merge-rules": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.3.tgz",
-      "integrity": "sha512-cEKTMEbWazVa5NXd8deLdCnXl+6cYG7m2am+1HzqH0EnTdy8fRysatkaXb2dEnR+fdaDxTvuZ5zoBdv6efF6hg==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "postcss-minify-font-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
-      "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-minify-gradients": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.3.tgz",
-      "integrity": "sha512-Z91Ol22nB6XJW+5oe31+YxRsYooxOdFKcbOqY/V8Fxse1Y3vqlNRpi1cxCqoACZTQEhl+xvt4hsbWiV5R+XI9Q==",
-      "dev": true,
-      "requires": {
-        "colord": "^2.9.1",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-minify-params": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.2.tgz",
-      "integrity": "sha512-qJAPuBzxO1yhLad7h2Dzk/F7n1vPyfHfCCh5grjGfjhi1ttCnq4ZXGIW77GSrEbh9Hus9Lc/e/+tB4vh3/GpDg==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "browserslist": "^4.16.6",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-minify-selectors": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
-      "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
     "postcss-nested": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
@@ -11039,120 +9753,6 @@
         "postcss-selector-parser": "^6.0.6"
       }
     },
-    "postcss-normalize-charset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "dev": true,
-      "requires": {}
-    },
-    "postcss-normalize-display-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
-      "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-positions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
-      "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-repeat-style": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
-      "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-string": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
-      "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-timing-functions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
-      "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-unicode": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
-      "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.0",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-url": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.4.tgz",
-      "integrity": "sha512-cNj3RzK2pgQQyNp7dzq0dqpUpQ/wYtdDZM3DepPmFjCmYIfceuD9VIAcOdvrNetjIU65g1B4uwdP/Krf6AFdXg==",
-      "dev": true,
-      "requires": {
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-whitespace": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
-      "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-ordered-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz",
-      "integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-reduce-initial": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.2.tgz",
-      "integrity": "sha512-v/kbAAQ+S1V5v9TJvbGkV98V2ERPdU6XvMcKMjqAlYiJ2NtsHGlKYLPjWWcXlaTKNxooId7BGxeraK8qXvzKtw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0"
-      }
-    },
-    "postcss-reduce-transforms": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
-      "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
     "postcss-selector-parser": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
@@ -11163,26 +9763,6 @@
         "util-deprecate": "^1.0.2"
       }
     },
-    "postcss-svgo": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
-      "integrity": "sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0",
-        "svgo": "^2.7.0"
-      }
-    },
-    "postcss-unique-selectors": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.2.tgz",
-      "integrity": "sha512-w3zBVlrtZm7loQWRPVC0yjUwwpty7OM6DnEHkxcSQXO1bMS3RJ+JUS5LFMSDZHJcvGsRwhZinCWVqn8Kej4EDA==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -11202,18 +9782,12 @@
       "dev": true
     },
     "prettier-plugin-svelte": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz",
-      "integrity": "sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.6.0.tgz",
+      "integrity": "sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==",
       "dev": true,
       "requires": {}
     },
-    "progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
-    },
     "ps-tree": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.2.0.tgz",
@@ -11358,9 +9932,9 @@
       }
     },
     "rollup": {
-      "version": "2.63.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.63.0.tgz",
-      "integrity": "sha512-nps0idjmD+NXl6OREfyYXMn/dar3WGcyKn+KBzPdaLecub3x/LrId0wUcthcr8oZUAcZAR8NKcfGGFlNgGL1kQ==",
+      "version": "2.64.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz",
+      "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==",
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -11375,9 +9949,9 @@
       }
     },
     "sade": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.0.tgz",
-      "integrity": "sha512-NRfCA8AVYuAA7Hu8bs18od6J4BdcXXwOv6OJuNgwbw8LcLK8JKwaM3WckLZ+MGyPJUS/ivVgK3twltrOIJJnug==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
       "requires": {
         "mri": "^1.1.0"
       }
@@ -11453,9 +10027,9 @@
       "dev": true
     },
     "sk-auth": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/sk-auth/-/sk-auth-0.3.7.tgz",
-      "integrity": "sha512-b2CVVL9TlW7sogD38wea42sl2Qs4crTFuyp8WZ0awv79fYhpSc9YIodPPLBq8tfkmImXZBvQgIDcYa1YZSYYhQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/sk-auth/-/sk-auth-0.4.0.tgz",
+      "integrity": "sha512-0Np5pvIFV+DfdzifF5b5RbpCB901b5ZI/XfZeb+vIBDaY1erxkZMStnPVpPbJU+jgJ9DHJ+YIKRt297LV07b/g==",
       "requires": {
         "cookie": "^0.4.1",
         "jsonwebtoken": "^8.5.1"
@@ -11492,9 +10066,9 @@
       "peer": true
     },
     "source-map-js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -11528,12 +10102,6 @@
         "through": "2"
       }
     },
-    "stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
-    },
     "stream-combiner": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
@@ -11567,16 +10135,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
-    "stylehacks": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
-      "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.0",
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -11591,81 +10149,32 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "svelte": {
-      "version": "3.44.3",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.3.tgz",
-      "integrity": "sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg=="
+      "version": "3.46.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.2.tgz",
+      "integrity": "sha512-RXSAtYNefe01Sb1lXtZ2I+gzn3t/h/59hoaRNeRrm8IkMIu6BSiAkbpi41xb+C44x54YKnbk9+dtfs3pM4hECA=="
     },
     "svelte-check": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.2.11.tgz",
-      "integrity": "sha512-clotPGGZPj3LuS9qP1lk+Wwnsj+js42ehCPmHk+qtyaQh/dU95e0qkpPmtmOMYHN6My5Y75XqeN1QNLj5V5gwA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-2.3.0.tgz",
+      "integrity": "sha512-SBKdJyUmxzPmJf/ZPqDSQOoa9JzOcgEpV7u3UaYcgVn7fA0veZ3FA5JgLU8KYtf84Gp6guBVcrC7XKLjJa5SXQ==",
       "dev": true,
       "requires": {
-        "chalk": "^4.0.0",
         "chokidar": "^3.4.1",
         "fast-glob": "^3.2.7",
         "import-fresh": "^3.2.1",
         "minimist": "^1.2.5",
+        "picocolors": "^1.0.0",
         "sade": "^1.7.4",
         "source-map": "^0.7.3",
         "svelte-preprocess": "^4.0.0",
         "typescript": "*"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.7.3",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
           "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
           "dev": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
         }
       }
     },
@@ -11681,11 +10190,6 @@
       "integrity": "sha512-bKE9+4qb4sAnA+TKHiYurUl970rjA0XmlP9TEP7K/ncyWz3m81kA4HOgmlZK/7irGK7gzZlaPDI3cmf8fp/+tg==",
       "requires": {}
     },
-    "svelte-json-tree": {
-      "version": "git+ssh://git@github.com/eraviart/svelte-json-tree.git#2eb2d6d905b1044277e3a4d6cdfdd0e4a7ae50a0",
-      "dev": true,
-      "from": "svelte-json-tree@github:eraviart/svelte-json-tree"
-    },
     "svelte-modals": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/svelte-modals/-/svelte-modals-1.0.4.tgz",
@@ -11693,9 +10197,9 @@
       "dev": true
     },
     "svelte-preprocess": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz",
-      "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.2.tgz",
+      "integrity": "sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==",
       "dev": true,
       "requires": {
         "@types/pug": "^2.0.4",
@@ -11706,25 +10210,10 @@
         "strip-indent": "^3.0.0"
       }
     },
-    "svgo": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
-      "dev": true,
-      "requires": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^4.1.3",
-        "css-tree": "^1.1.3",
-        "csso": "^4.2.0",
-        "picocolors": "^1.0.0",
-        "stable": "^0.1.8"
-      }
-    },
     "tailwindcss": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.9.tgz",
-      "integrity": "sha512-X8TVifxDWfiNXInOeBofTteXAtZ5f0HnLs/uV4jDQNShc33Jb7qjYbk4VwI365rWAzcqYTks+9kesf3xH7Y35A==",
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.15.tgz",
+      "integrity": "sha512-bT2iy7FtjwgsXik4ZoJnHXR+SRCiGR1W95fVqpLZebr64m4ahwUwRbIAc5w5+2fzr1YF4Ct2eI7dojMRRl8sVQ==",
       "dev": true,
       "requires": {
         "arg": "^5.0.1",
@@ -11740,13 +10229,13 @@
         "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
+        "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.7",
+        "postcss-selector-parser": "^6.0.8",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "resolve": "^1.20.0"
+        "resolve": "^1.21.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -11812,12 +10301,6 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
-    "timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
     "tiny-glob": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
@@ -11970,9 +10453,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.7.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.10.tgz",
-      "integrity": "sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==",
+      "version": "2.7.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.13.tgz",
+      "integrity": "sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==",
       "requires": {
         "esbuild": "^0.13.12",
         "fsevents": "~2.3.2",
@@ -12041,9 +10524,9 @@
       "dev": true
     },
     "zx": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/zx/-/zx-4.2.0.tgz",
-      "integrity": "sha512-/4f7FaJecA9I655KXKXIHO3CFNYjAz2uSmTz6v2eNlKdrQKyz4VyF3RjqFuP6nQG+Hd3+NjOvrVNBkv8Ne9d4Q==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/zx/-/zx-4.3.0.tgz",
+      "integrity": "sha512-KuEjpu5QFIMx0wWfzknDRhY98s7a3tWNRmYt19XNmB7AfOmz5zISA4+3Q8vlJc2qguxMn89uSxhPDCldPa3YLA==",
       "dev": true,
       "requires": {
         "@types/fs-extra": "^9.0.12",
@@ -12060,9 +10543,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "16.11.18",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.18.tgz",
-          "integrity": "sha512-7N8AOYWWYuw0g+K+GKCmIwfU1VMHcexYNpLPYzFZ4Uq2W6C/ptfeC7XhXgy/4pcwhz/9KoS5yijMfnYQ0u0Udw==",
+          "version": "16.11.21",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.21.tgz",
+          "integrity": "sha512-Pf8M1XD9i1ksZEcCP8vuSNwooJ/bZapNmIzpmsMaL+jMI+8mEYU3PKvs+xDNuQcJWF/x24WzY4qxLtB0zNow9A==",
           "dev": true
         },
         "ansi-styles": {
@@ -12106,15 +10589,15 @@
           "dev": true
         },
         "globby": {
-          "version": "12.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-12.0.2.tgz",
-          "integrity": "sha512-lAsmb/5Lww4r7MM9nCCliDZVIKbZTavrsunAsHLr9oHthrZP1qi7/gAnHOsUs9bLvEt2vKVJhHmxuL7QbDuPdQ==",
+          "version": "12.2.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+          "integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
           "dev": true,
           "requires": {
             "array-union": "^3.0.1",
             "dir-glob": "^3.0.1",
             "fast-glob": "^3.2.7",
-            "ignore": "^5.1.8",
+            "ignore": "^5.1.9",
             "merge2": "^1.4.1",
             "slash": "^4.0.0"
           }
diff --git a/package.json b/package.json
index 57283a15cab6ef78399a210967293e483a1455b1..bf3f5cc727afdda6fb5f1d6b7a8cc1d599aad5a4 100644
--- a/package.json
+++ b/package.json
@@ -11,27 +11,25 @@
     "preview": "svelte-kit preview"
   },
   "dependencies": {
-    "sk-auth": "^0.3.7",
+    "sk-auth": "^0.4.0",
     "xxhash-addon": "^1.4.0"
   },
   "devDependencies": {
     "@auditors/core": "^0.2.0",
     "@fontsource/lato": "^4.3.0",
     "@fontsource/lora": "^4.3.0",
-    "@openfisca/france-json": "^0.1.45",
-    "@openfisca/json-model": "^1.0.0",
-    "@sveltejs/adapter-node": "^1.0.0-next.60",
-    "@sveltejs/kit": "^1.0.0-next.215",
-    "@tailwindcss/forms": "^0.4.0",
+    "@openfisca/france-json": "^0.1.51",
+    "@openfisca/json-model": "^1.1.7",
+    "@sveltejs/adapter-node": "^1.0.0-next.62",
+    "@sveltejs/kit": "^1.0.0-next.232",
     "@types/cookie": "^0.4.0",
     "@types/fs-extra": "^9.0.11",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.2.5",
-    "cssnano": "^5.0.5",
     "d3-scale": "^4.0.0",
     "dedent-js": "^1.0.1",
-    "dotenv": "^10.0.0",
+    "dotenv": "^14.2.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^3.2.1",
@@ -40,8 +38,6 @@
     "fuse.js": "^6.4.6",
     "intro.js": "^4.2.2",
     "js-yaml": "^4.1.0",
-    "postcss": "^8.2.7",
-    "postcss-load-config": "^3.0.1",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "sanitize-filename": "^1.6.3",
@@ -49,14 +45,13 @@
     "svelte": "^3.39.0",
     "svelte-check": "^2.0.0",
     "svelte-dnd-action": "^0.9.8",
-    "svelte-json-tree": "github:eraviart/svelte-json-tree",
     "svelte-modals": "^1.0.4",
     "svelte-preprocess": "^4.6.9",
-    "tailwindcss": "^3.0.9",
+    "tailwindcss": "^3.0.15",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0",
     "uuid": "^8.3.2",
-    "zx": "^4.2.0"
+    "zx": "^4.3.0"
   },
   "type": "module"
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
index db2754b09159c228553a17c0abffed1722221453..b1ac3ae711793f83974539564527b9b1ef4842e9 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,20 +1,12 @@
 const tailwindcss = require("tailwindcss")
 const autoprefixer = require("autoprefixer")
-const cssnano = require("cssnano")
-
-const mode = process.env.NODE_ENV
-const dev = mode === "development"
 
 const config = {
   plugins: [
-    // Some plugins, like postcss-nested, need to run before Tailwind.
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
     tailwindcss(),
-    // But others, like autoprefixer, need to run after.
-    autoprefixer(),
-    !dev &&
-      cssnano({
-        preset: "default",
-      }),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
   ],
 }
 
diff --git a/src/global.d.ts b/src/global.d.ts
index 357a61643b91e989384c05d8751b418301c8709c..71d497c7ac8f2dfb169144d34195244a4eab4dbc 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -5,6 +5,7 @@
 // https://github.com/sveltejs/language-tools/issues/431.
 declare type DndEvent = import("svelte-dnd-action").DndEvent
 declare namespace svelte.JSX {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface HTMLAttributes<T> {
     onconsider?: (
       event: CustomEvent<DndEvent> & { target: EventTarget & T },
diff --git a/src/hooks.ts b/src/hooks.ts
index fa6ba69f85693f7189ded1391a0fcdc559371eb8..25aa8695efc2a347a3f3fbcd18c5d473790a4492 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -6,7 +6,7 @@ import type { Session } from "$lib/sessions"
 
 const { githubPersonalAccessToken, openfiscaRepository } = config
 
-export const getSession: GetSession<{}, Session> = async (request) => {
+export const getSession: GetSession = async (request): Promise<Session> => {
   const { user } =
     oauth2Authenticator === undefined
       ? { user: undefined }
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index ec6a4450b395728c4ba4b6f19deeee777d15c22f..93147533936e9823cbbb24b690a78798597df9b3 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -122,12 +122,16 @@
       <!-- Deuxième div pour le logo Contrib. & prestas sociales-->
       <div class="hidden md:flex">
         <a href="/">
-          <div
-            class="space-y-1 flex items-center h-14 gap-2 rounded text-white p-1"
-          >
-            <div class="row-span-3 text-4xl font-light uppercase">
+          <div class="flex items-center h-14 gap-2 rounded text-white p-1">
+            <div class="flex items-center text-4xl font-light uppercase">
               LexImpact
+              <div
+                class="-rotate-6 bg-le-gris-dispositif text-xs p-0.5 px-1 rounded"
+              >
+                Beta
+              </div>
             </div>
+
             <div class="space-y-0">
               <div class="text-xs font-bold uppercase">Cotisations</div>
               <div class="text-xs font-bold uppercase">
@@ -148,38 +152,46 @@
                 class="text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1 flex"
                 href="/authentication/signin/leximpact?redirect={pathname}"
               >
-                <!-- Material Icon Restart Alt -->
-                <svg
-                  class="fill-current lg:mr-2"
-                  xmlns="http://www.w3.org/2000/svg"
-                  height="18px"
-                  viewBox="0 0 22 22"
-                  width="18px"
-                  ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-                  /></svg
-                >
-                <span class="hidden lg:flex"> Se connecter</span>
+                <div class="flex items-center">
+                  <!-- Material icon: VPN key-->
+                  <svg
+                    class="fill-current text-white inline rounded m-3 md:m-0"
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="18px"
+                    viewBox="0 0 22 22"
+                    width="18px"
+                    ><path d="M0 0h24v24H0z" fill="none" /><path
+                      d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+                    /></svg
+                  >
+                  <p class="hidden lg:inline-block pl-1">Se connecter</p>
+                </div>
               </a>
 
-              <a
-                class="bg-le-jaune-dark text-white  flex justify-center shadow-md hover:bg-gray-400 px-5 mr-2 rounded p-2 uppercase text-sm"
-                href="/authentication/signin/leximpact?redirect={pathname}"
+              <div
+                class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white shadow-md"
               >
-                <span class="flex"> Budget CSG</span>
-                <!-- Material icon: arrow forward-->
-                <svg
-                  class="fill-current lg:ml-2"
-                  xmlns="http://www.w3.org/2000/svg"
-                  height="18px"
-                  viewBox="0 0 22 22"
-                  width="18px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-                  /></svg
+                <a
+                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
+                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
                 >
-              </a>
+                  <div class="flex items-center m-1">
+                    <div class="hidden md:inline-block p-1">Budget CSG</div>
+                    <!-- Material icon: arrow forward-->
+                    <svg
+                      class="fill-current text-white inline rounded mx-2 lg:ml-0"
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="18px"
+                      viewBox="0 0 22 22"
+                      width="18px"
+                      fill="#000000"
+                      ><path d="M0 0h24v24H0z" fill="none" /><path
+                        d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                      /></svg
+                    >
+                  </div>
+                </a>
+              </div>
             </div>
           {:else}
             <!-- User profile + se déconnecter -->
@@ -307,9 +319,14 @@
       <!-- Deuxième div pour le logo Contrib. & prestas sociales-->
       <div>
         <div
-          class="block object-center text-center rounded text-2xl text-white font-light uppercase h-7"
+          class="flex items-center object-center text-center rounded text-2xl text-white font-light uppercase h-7"
         >
           LexImpact
+          <div
+            class="rotate-6 bg-le-gris-dispositif text-xs p-0.5 px-1 rounded"
+          >
+            Beta
+          </div>
         </div>
         <div
           class="block rounded object-center  text-center text-xs text-white font-bold uppercase"
@@ -490,21 +507,4 @@
       {/if}
     </div>
   </nav>
-
-  <div
-    class="flex fond-bandeau-en-construction h-8 w-full items-center justify-center shadow-lg border-b border-t border-black"
-  >
-    <div>
-      <p class="text-center text-black tracking-wider font-base uppercase">
-        🚧 Simulateur en construction
-      </p>
-    </div>
-  </div>
 </div>
-
-<style>
-  .fond-bandeau-en-construction {
-    background-color: #ffffff;
-    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ece322' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
-  }
-</style>
diff --git a/src/lib/components/ReformsChanges.svelte b/src/lib/components/ReformsChanges.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7c420db403a0bf5f0e0790eeb96ff7b12c870c48
--- /dev/null
+++ b/src/lib/components/ReformsChanges.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { getContext } from "svelte"
+  import type { Writable } from "svelte/store"
+
+  import type { DisplayMode } from "$lib/displays"
+  import { getParameter, rootParameter } from "$lib/parameters"
+  import type { ParametricReform } from "$lib/reforms"
+  import {
+    ParameterReformChangeType,
+    reformChangesByName,
+    reformMetadataByName,
+  } from "$lib/reforms"
+  import { newSimulationUrl } from "$lib/urls"
+  import { formatValue } from "$lib/values"
+
+  export let displayMode: DisplayMode
+
+  const parametricReform = getContext(
+    "parametricReform",
+  ) as Writable<ParametricReform>
+
+  const billName = getContext("billName") as Writable<string | undefined>
+
+  $: billChanges = reformChangesByName[$billName]
+</script>
+
+{#if $billName !== undefined}
+  <div class="m-2 lg:m-4 mb-4">
+    <h4 class="text-xs lg:text-sm text-le-rouge-bill font-bold uppercase">
+      {reformMetadataByName[$billName].label}&nbsp;:
+    </h4>
+    <ul class="list-inside">
+      {#each Object.entries(billChanges?.editable_processed_parameters?.children ?? []) as [parameterName, parameterReform]}
+        {@const parameter = getParameter(rootParameter, parameterName)}
+        <li class="text-gray-600 text-xs lg:text-sm mt-1">
+          <svg
+            class="text-le-rouge-bill fill-current inline-flex h-4 w-4"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" /><path
+              d="M18 3v2h-1v6l2 3v2h-6v7h-2v-7H5v-2l2-3V5H6V3z"
+            /></svg
+          >
+          <a
+            class="underline hover:text-le-bleu"
+            href={newSimulationUrl({
+              ...displayMode,
+              parameterName,
+              parametersVariableName: undefined,
+            })}>{parameter.title}</a
+          >
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
+
+<div class="m-2 lg:m-4">
+  <h4 class="text-xs lg:text-sm font-bold ">
+    Votre <span class="bg-le-jaune">réforme&nbsp;:</span>
+  </h4>
+
+  {#if Object.keys($parametricReform).length === 0}
+    <p
+      class="bg-gray-200 italic leading-relaxed my-3 text-gray-600 text-center text-xs lg:text-sm"
+    >
+      vide
+    </p>
+  {:else}
+    <ul class="list-inside">
+      {#each Object.entries($parametricReform) as [parameterName, parameterReform]}
+        {@const parameter = getParameter(rootParameter, parameterName)}
+        <li class=" bg-gray-200 text-gray-600 text-xs my-3 leading-relaxed">
+          <svg
+            class="text-le-jaune-dark  fill-current inline-flex h-4 w-4"
+            viewBox="0 0 24 24"
+            ><path fill="none" d="M0 0h24v24H0z" /><path
+              d="M18 3v2h-1v6l2 3v2h-6v7h-2v-7H5v-2l2-3V5H6V3z"
+            /></svg
+          >
+          <a
+            class="underline hover:text-le-bleu"
+            href={newSimulationUrl({
+              ...displayMode,
+              parameterName,
+              parametersVariableName: undefined,
+            })}>{parameter.titles.filter(Boolean).join(" > ")}&nbsp;=</a
+          >
+          <br />
+          {#if parameterReform.type === ParameterReformChangeType.Scale}
+            <span class="bg-le-jaune font-bold text-right">barème modifié</span>
+          {:else}
+            <span class="bg-le-jaune font-bold text-right"
+              >{formatValue(parameterReform.value)}</span
+            >
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/src/lib/components/ShareLinkModal.svelte b/src/lib/components/ShareLinkModal.svelte
index 7b13f21f5219003b85eeabd91c72f4c63825a792..a0f669f91f9261184ac4ceb2638bad6ede440934 100644
--- a/src/lib/components/ShareLinkModal.svelte
+++ b/src/lib/components/ShareLinkModal.svelte
@@ -24,7 +24,7 @@
 {#if isOpen}
   <div
     role="dialog"
-    class="bottom-0 fixed flex items-center justify-center left-0 pointer-events-none right-0 top-0"
+    class="bottom-0 fixed flex items-center justify-center left-0 pointer-events-none right-0 top-0 z-50"
   >
     <div
       class="bg-white flex flex-col justify-between max-w-xl min-w-[240px] pointer-events-auto rounded"
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
index 3ecc05c85cf153f4308ba9ae066cddc207c9b842..b86674bba8aa4b96b6a64e77b64a022e25e2e26f 100644
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -3,14 +3,14 @@
   // MIT license.
 
   export let size: string | number = "60"
-  export let unit: string = "px"
-  export let colorOuter: string = "#DED500"
-  export let colorCenter: string = "#DED500"
-  export let colorInner: string = "#DED500"
-  export let durationMultiplier: number = 1
-  export let durationOuter: string = `${durationMultiplier * 2}s`
-  export let durationInner: string = `${durationMultiplier * 1.5}s`
-  export let durationCenter: string = `${durationMultiplier * 3}s`
+  export let unit = "px"
+  export let colorOuter = "#DED500"
+  export let colorCenter = "#DED500"
+  export let colorInner = "#DED500"
+  export let durationMultiplier = 1
+  export let durationOuter = `${durationMultiplier * 2}s`
+  export let durationInner = `${durationMultiplier * 1.5}s`
+  export let durationCenter = `${durationMultiplier * 3}s`
 </script>
 
 <div
diff --git a/src/lib/components/ValueChange.svelte b/src/lib/components/ValueChange.svelte
index 1e94c042ceff14aa6f025bb17269cb77aaee87c1..a3d216d72b9da91cc98aea618c518d6c24ce5137 100644
--- a/src/lib/components/ValueChange.svelte
+++ b/src/lib/components/ValueChange.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Unit } from "@openfisca/json-model"
 
+  import { valueFormatter } from "$lib/values"
   import type { VariableValueByCalculationName } from "$lib/variables"
 
   export let unit: Unit | undefined | null
@@ -19,22 +20,7 @@
         : billValue
       : lawValue
 
-  $: format = (
-    baseValue === undefined
-      ? () => ""
-      : typeof baseValue === "boolean"
-      ? (value: boolean) => (value ? "vrai" : "faux")
-      : typeof baseValue === "number"
-      ? unit != null && unit.startsWith("currency-")
-        ? new Intl.NumberFormat("fr-FR", {
-            currency: unit.replace(/^currency-/, ""),
-            maximumFractionDigits: 0,
-            minimumFractionDigits: 0,
-            style: "currency",
-          }).format
-        : new Intl.NumberFormat("fr-FR").format
-      : (value: unknown) => value.toString()
-  ) as (value: unknown) => string
+  $: format = valueFormatter(baseValue, unit)
 
   $: amendmentValueFormatted =
     amendmentValue === undefined ? undefined : format(amendmentValue)
diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte
index 39942666f9801e5cb1df2dbd26ae0322e154bc89..fb5ca7b54d433b37d0896a78723c488036f31095 100644
--- a/src/lib/components/WaterfallView.svelte
+++ b/src/lib/components/WaterfallView.svelte
@@ -12,13 +12,13 @@
     VisibleDecomposition,
   } from "$lib/decompositions"
   import { buildVisibleDecompositions } from "$lib/decompositions"
-  import type { EditionMode } from "$lib/editions"
+  import type { DisplayMode } from "$lib/displays"
   import { entityByKey } from "$lib/entities"
   import type { Situation } from "$lib/situations"
+  import { newSimulationUrl } from "$lib/urls"
 
-  export let date: string
   export let decompositionByName: DecompositionByName
-  export let editionMode: EditionMode
+  export let displayMode: DisplayMode
   export let evaluationByName: EvaluationByName
   export let situation: Situation
   export let situationIndex: number
@@ -119,6 +119,7 @@
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function signalFirstWaterfall(_element) {
     $firstWaterfallShown = true
   }
@@ -170,7 +171,7 @@
       </div>
     {/if}
     <!-- partie gauche dispositifs et ticket de caisse-->
-    <div class="bg-opacity-40 shadow-lg w-4/5">
+    <div class="bg-opacity-40 w-full">
       <div class="flex justify-between">
         <!-- Navigation dispositifs-->
         <div class="flex-auto pt-2 w-3/5">
@@ -183,13 +184,14 @@
                       class="hover:bg-white border-gray-400 text-ellipsis overflow-x-hidden hover:overflow-x-visible text-base text-gray-500 hover:z-20 ml-2"
                       class:border-t={index !== 0}
                     >
-                      {#if ["test_case", "test_case_with_variable_inputs"].includes(editionMode?.mode)}
+                      {#if displayMode.editMode}
                         <!-- Trunk decomposition node, in variable inputs mode => link -->
                         <a
                           class="cursor-pointer text-base hover:underline"
-                          href="/?action={encodeURIComponent(
-                            `situations/${situationIndex}/variables/${decomposition.name}/inputs`,
-                          )}"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            variableName: decomposition.name,
+                          })}
                           sveltekit:noscroll
                           >{decomposition.ux_name ?? decomposition.label}</a
                         >
@@ -197,9 +199,11 @@
                         <!-- Trunk decomposition node with parameters, in parameters mode => link -->
                         <a
                           class="cursor-pointer text-base hover:underline"
-                          href="/?action={encodeURIComponent(
-                            `variables/${decomposition.name}/parameters`,
-                          )}"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            parameterName: undefined,
+                            parametersVariableName: decomposition.name,
+                          })}
                           sveltekit:noscroll
                           >{decomposition.ux_name ?? decomposition.label}</a
                         >
@@ -272,13 +276,14 @@
                         {/if}
                       </div>
 
-                      {#if ["test_case", "test_case_with_variable_inputs"].includes(editionMode?.mode)}
+                      {#if displayMode.editMode}
                         <!-- Leaf decomposition node in variable inputs mode => link -->
                         <a
                           class="hover:bg-white cursor-pointer font-serif text-ellipsis overflow-x-hidden hover:overflow-x-visible hover:text-le-gris-dispositif text-base hover:underline hover:z-20"
-                          href="/?action={encodeURIComponent(
-                            `situations/${situationIndex}/variables/${decomposition.name}/inputs`,
-                          )}"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            variableName: decomposition.name,
+                          })}
                           sveltekit:noscroll
                           >{decomposition.ux_name ?? decomposition.label}</a
                         >
@@ -286,9 +291,11 @@
                         <!-- Leaf decomposition node with parameters in parameters mode => link -->
                         <a
                           class="hover:bg-white cursor-pointer font-serif text-ellipsis overflow-x-hidden hover:overflow-x-visible hover:text-le-gris-dispositif text-base hover:underline hover:z-20"
-                          href="/?action={encodeURIComponent(
-                            `variables/${decomposition.name}/parameters`,
-                          )}"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            parameterName: undefined,
+                            parametersVariableName: decomposition.name,
+                          })}
                           sveltekit:noscroll
                           >{decomposition.ux_name ?? decomposition.label}</a
                         >
@@ -332,7 +339,7 @@
                         </button>
                       {/if}
 
-                      {#if ["test_case", "test_case_with_variable_inputs"].includes(editionMode?.mode)}
+                      {#if displayMode.editMode}
                         <!-- Non-lead decomposition node in variable inputs mode => no-link -->
                         <span
                           class="hover:bg-white cursor-pointer font-serif text-ellipsis overflow-x-hidden hover:overflow-x-visible text-black hover:text-black text-base hover:underline hover:z-20"
@@ -350,9 +357,11 @@
                         <!-- Leaf decomposition node with parameters in parameters mode => link -->
                         <a
                           class="hover:bg-white cursor-pointer font-serif text-ellipsis overflow-x-hidden hover:overflow-x-visible hover:text-le-gris-dispositif text-base hover:underline hover:z-20"
-                          href="/?action={encodeURIComponent(
-                            `variables/${decomposition.name}/parameters`,
-                          )}"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            parameterName: undefined,
+                            parametersVariableName: decomposition.name,
+                          })}
                           on:click|preventDefault={() => {
                             if (decomposition.open) {
                               zoomOut(index)
@@ -360,9 +369,11 @@
                               zoomIn(index)
                             }
                             goto(
-                              `/?action=${encodeURIComponent(
-                                `variables/${decomposition.name}/parameters`,
-                              )}`,
+                              newSimulationUrl({
+                                ...displayMode,
+                                parameterName: undefined,
+                                parametersVariableName: decomposition.name,
+                              }),
                               { noscroll: true },
                             )
                           }}
@@ -504,40 +515,5 @@
         </label>
       </div>
     </div>
-
-    <!-- Waterfall-->
-    <div class="flex flex-col pt-2 w-1/5" bind:offsetWidth={waterfallWidth}>
-      {#each visibleDecompositions as { decomposition, trunk, rows }, index}
-        {#each rows as { calculationName, deltaSumsAtVectorIndex }}
-          {#if !decomposition.open || trunk || calculationName === "law"}
-            <div
-              class="{decomposition.open || index === 0
-                ? trunk || index === 0
-                  ? 'bg-gray-200'
-                  : 'bg-transparent'
-                : deltaSumsAtVectorIndex[0] <= deltaSumsAtVectorIndex[1]
-                ? 'bg-emerald-500'
-                : 'bg-red-500'} border-t border-transparent h-6 {calculationName ===
-              'law'
-                ? 'my-1'
-                : 'mb-1'}"
-              style="margin-left: {((Math.min(...deltaSumsAtVectorIndex) -
-                valueMin) /
-                (valueMax - valueMin)) *
-                widthMax}px; width: {Math.max(
-                (Math.abs(
-                  deltaSumsAtVectorIndex[1] - deltaSumsAtVectorIndex[0],
-                ) /
-                  (valueMax - valueMin)) *
-                  widthMax,
-                1,
-              )}px;"
-            >
-              &nbsp;
-            </div>
-          {/if}
-        {/each}
-      {/each}
-    </div>
   </div>
 {/if}
diff --git a/src/lib/components/latchkeys/Arrow.svelte b/src/lib/components/latchkeys/Arrow.svelte
deleted file mode 100644
index 618e93f8481e79fc57c8d55b992957e64cfb8cf5..0000000000000000000000000000000000000000
--- a/src/lib/components/latchkeys/Arrow.svelte
+++ /dev/null
@@ -1,354 +0,0 @@
-<script lang="ts">
-  import type { Waterfall } from "@openfisca/json-model"
-  import { getContext } from "svelte"
-  import type { Writable } from "svelte/store"
-
-  // import { goto } from "$app/navigation"
-  import { session } from "$app/stores"
-  import type {
-    Decomposition,
-    DecompositionByName,
-    LatchkeyDataItem,
-  } from "$lib/decompositions"
-  import { iterDecompositionAncestorsName } from "$lib/decompositions"
-  // import type { SelfTargetAProps } from "$lib/urls"
-
-  export let height: number
-  export let index: number
-  export let item: LatchkeyDataItem
-  export let x0: number
-  export let x1: number
-  export let xAggregate0: number
-  export let xAggregate1: number
-  export let y: number
-  export let yPadding: number
-
-  const aggregateValueFormatter = new Intl.NumberFormat("fr-FR", {
-    currency: "EUR",
-    maximumFractionDigits: 0,
-    minimumFractionDigits: 0,
-    style: "currency",
-  })
-  // const barStrokeWidth = 1
-  // const barStrokeHalfWidth = barStrokeWidth / 2
-  const chevronHeightWidthRatio = 2.8
-  const chevronStrokeWidth = 5
-  const chevronStrokeHalfWidth = chevronStrokeWidth / 2
-  // const date = new Date().toISOString().split("T")[0]
-  const decompositionByName = getContext(
-    "decompositionByName",
-  ) as Writable<DecompositionByName>
-  const deltaFormatter = new Intl.NumberFormat("fr-FR", {
-    currency: "EUR",
-    maximumFractionDigits: 0,
-    minimumFractionDigits: 0,
-    signDisplay: "exceptZero",
-    style: "currency",
-  })
-  // const newSelfTargetAProps = getContext("newSelfTargetAProps") as (
-  //   url: string,
-  // ) => SelfTargetAProps
-  // const showColoredRects = getContext("showColoredRects") as Writable<boolean>
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
-  const verticalLineStrokeWidth = 2
-  const waterfall = getContext("waterfall") as Writable<Waterfall>
-
-  $: aggregate = item.aggregate
-
-  $: leaf = item.leaf
-
-  $: delta = leaf.deltaAtVectorIndex
-
-  $: halfHeight = height / 2
-
-  $: chevronHeight = height - chevronStrokeWidth
-
-  $: chevronHalfHeight = chevronHeight / 2
-
-  $: chevronWidth = chevronHeight / chevronHeightWidthRatio
-
-  $: fill =
-    leaf.childrenName === undefined ? (x0 > x1 ? "red" : "emerald") : "blue"
-
-  $: width = x0 < x1 ? x1 - x0 : x0 - x1
-
-  // Width of the pointed bar minus the arrow part
-  $: barWidth = Math.max(width - chevronStrokeHalfWidth - chevronWidth, 0)
-
-  // Ensure that chevron is not wider than width
-  $: chevronCappedWidth = Math.min(
-    chevronWidth,
-    Math.max(width, chevronStrokeWidth),
-  )
-
-  $: chevronCappedHalfHeight =
-    (chevronCappedWidth * chevronHeightWidthRatio) / 2
-
-  $: openable =
-    aggregate !== undefined &&
-    (aggregate === leaf || aggregate.values.some(([x0]) => x0 !== 0))
-
-  $: rootDecompositionName = $waterfall.root
-
-  $: triangleHalfHeight = (width * chevronHeightWidthRatio) / 2
-
-  $: x = x0 < x1 ? x0 : x1
-
-  $: xAggregate =
-    xAggregate0 === undefined || xAggregate1 === undefined
-      ? undefined
-      : xAggregate0 < xAggregate1
-      ? xAggregate0
-      : xAggregate1
-
-  function toggle() {
-    if (aggregate === undefined || (aggregate !== leaf && aggregate.trunk)) {
-      return
-    }
-    const open = !aggregate.open
-    let smallestAggregate = aggregate
-    const index = $testCaseIndex ?? 0
-    if (open) {
-      // When aggregate has just one child, we need to also open
-      // its child... and so on.
-      while (smallestAggregate.childrenName?.length === 1) {
-        smallestAggregate =
-          $decompositionByName[smallestAggregate.childrenName[0]]
-      }
-    }
-
-    $decompositionByName = toggleToNode(
-      { ...$decompositionByName },
-      $decompositionByName[rootDecompositionName],
-      [
-        ...iterDecompositionAncestorsName(
-          $decompositionByName,
-          smallestAggregate.name,
-        ),
-      ].slice(1),
-      open,
-    )
-  }
-
-  function toggleToNode(
-    decompositionByName: DecompositionByName,
-    decomposition: Decomposition | undefined,
-    names: string[],
-    open: boolean,
-  ): DecompositionByName {
-    if (
-      decomposition === undefined ||
-      decomposition.childrenName === undefined
-    ) {
-      return
-    }
-    decompositionByName[decomposition.name] = decomposition = {
-      ...decomposition,
-    }
-    if (open) {
-      decomposition.open = true
-    }
-    if (names.length === 0) {
-      if (!open) {
-        delete decomposition.open
-      }
-      return decompositionByName
-    }
-
-    const childName = names[0]
-    if (!decomposition.childrenName.includes(childName)) {
-      return decompositionByName
-    }
-    return toggleToNode(
-      decompositionByName,
-      decompositionByName[childName],
-      names.slice(1),
-      open,
-    )
-  }
-</script>
-
-<!-- {#if $showColoredRects}
-  <rect
-    class="group-rect"
-    {fill}
-    {height}
-    stroke="black"
-    stroke-width="0.1"
-    {width}
-    {x}
-    {y}
-  />
-{/if} -->
-
-{#if index === 0 && aggregate === undefined}
-  <!-- Consider that the first node is an aggregate node -->
-  <g transform="translate(0 {y})">
-    <rect
-      class="cursor-pointer"
-      fill="#CFD8DB"
-      fill-opacity="0.5"
-      {height}
-      stroke-width="0"
-      width={x1}
-    />
-    <text
-      class="cursor-pointer fill-current text-gray-500 text-xs"
-      dominant-baseline="hanging"
-      ><tspan class="font-light p-8">{leaf.label}</tspan>
-      <tspan class="font-light p-8" x={0} dy="1.2em"
-        >{aggregateValueFormatter.format(leaf.deltaAtVectorIndex)}</tspan
-      ></text
-    >
-  </g>
-{:else if aggregate !== undefined && xAggregate !== undefined}
-  <!-- Horizontal bar of aggregate node -->
-  <g transform="translate(0 {y})">
-    <rect
-      fill="#CFD8DB"
-      fill-opacity="0.5"
-      {height}
-      stroke-width="0"
-      width={x1}
-    />
-    {#if xAggregate0 === 0}
-      <!-- Show text only when full aggregate-->
-      <text
-        class="fill-current text-gray-500 p-2 text-xs"
-        dominant-baseline="hanging"
-        ><tspan class="font-light">{aggregate.label}</tspan>
-        <tspan class="font-light" x={0} dy="1.2em"
-          >{aggregateValueFormatter.format(aggregate.deltaAtVectorIndex)}</tspan
-        ></text
-      >
-    {/if}
-  </g>
-{:else}
-  <!-- Horizontal bar -->
-  <g transform="translate(0 {y})">
-    <rect
-      fill="#CFD8DB"
-      fill-opacity="0.5"
-      {height}
-      stroke-width="0"
-      width={x1}
-    />
-  </g>
-{/if}
-
-{#if index > 0}
-  <g
-    class:cursor-pointer={openable}
-    on:click={() => {
-      toggle()
-      // const aProps = newSelfTargetAProps(
-      //   `/variables/${leaf.name}/parameters/${date}`,
-      // )
-      // goto(aProps.href, { noscroll: aProps["sveltekit:noscroll"] })
-    }}
-    transform={x0 < x1
-      ? `rotate(180, ${x + width / 2}, ${y + height / 2})`
-      : null}
-  >
-    {#if barWidth > 0}
-      <!-- Pointed Bar-->
-      <path
-        d="M{x + chevronStrokeHalfWidth + chevronWidth} {y +
-          chevronStrokeHalfWidth}
-        l{-chevronWidth} {chevronHalfHeight}
-        l{chevronWidth} {chevronHalfHeight}
-        l{barWidth} 0
-        l0 {-chevronHeight}
-        l{-barWidth} 0"
-        fill="#CCD3E7"
-        stroke-width="0"
-      />
-    {:else if width > 0}
-      <!-- Triangle (= pointed bar without the bar)-->
-      <path
-        d="M{x + width} {y + halfHeight - triangleHalfHeight}
-        l{-width} {triangleHalfHeight}
-        l{width} {triangleHalfHeight}"
-        fill="#CCD3E7"
-        stroke-width="0"
-      />
-    {/if}
-    {#if openable && width > 0}
-      <g
-        class="cursor-pointer stroke-current text-white"
-        fill="none"
-        on:click={toggle}
-        transform="translate({x + width / 2 - 12}, {y + height / 2 - 12})"
-      >
-        {#if aggregate.open}
-          <!-- Heroicon name: outline/minus-circle -->
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        {:else}
-          <!-- Heroicon name: outline/plus-circle -->
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        {/if}
-      </g>
-    {/if}
-  </g>
-
-  <!-- Vertical Line -->
-  <line
-    stroke="#95A1C0"
-    stroke-width={verticalLineStrokeWidth}
-    x1={x0}
-    y1={y - yPadding - height / 2}
-    x2={x0}
-    y2={y + halfHeight + Math.min(triangleHalfHeight, chevronCappedHalfHeight)}
-  />
-{/if}
-
-{#if index > 0}
-  <g
-    class:cursor-pointer={openable}
-    on:click={() => {
-      toggle()
-      // const aProps = newSelfTargetAProps(
-      //   `/variables/${leaf.name}/parameters/${date}`,
-      // )
-      // goto(aProps.href, { noscroll: aProps["sveltekit:noscroll"] })
-    }}
-    transform={x0 < x1
-      ? `rotate(180, ${x + width / 2}, ${y + height / 2})`
-      : null}
-  >
-    {#if width > 0}
-      <!-- Chevron -->
-      <path
-        d="M{x + chevronStrokeHalfWidth + chevronCappedWidth} {y +
-          halfHeight -
-          chevronCappedHalfHeight}
-      l{-chevronCappedWidth} {chevronCappedHalfHeight}
-      l{chevronCappedWidth} {chevronCappedHalfHeight}"
-        fill="transparent"
-        stroke="#5E709E"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width={chevronStrokeWidth}
-      />
-    {/if}
-  </g>
-
-  {#if delta !== 0}
-    <text
-      class="text-black font-semibold"
-      dominant-baseline="middle"
-      x={x + width + 16}
-      y={y + halfHeight}>{deltaFormatter.format(delta)}</text
-    >
-  {/if}
-{/if}
diff --git a/src/lib/components/latchkeys/AxisX.svelte b/src/lib/components/latchkeys/AxisX.svelte
deleted file mode 100644
index ec64e2dabcf0b076a4338eca043d3bc1e86b5426..0000000000000000000000000000000000000000
--- a/src/lib/components/latchkeys/AxisX.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-  import { getContext } from "svelte"
-
-  const { width, height, xScale, yRange } = getContext("LayerCake")
-
-  export let gridlines = true
-  export let tickMarks = false
-  export let formatTick = (d: [number, number]): [number, number] => d
-  export let baseline = false
-  export let snapTicks = false
-  export let ticks = undefined
-  export let xTick = undefined
-  export let yTick = 0
-  export let dxTick = 0
-  export let dyTick = 0
-
-  $: isBandwidth = typeof $xScale.bandwidth === "function"
-
-  $: tickVals = (
-    Array.isArray(ticks)
-      ? ticks
-      : isBandwidth
-      ? $xScale.domain()
-      : typeof ticks === "function"
-      ? ticks($xScale.ticks())
-      : $xScale.ticks(ticks)
-  ) as [number, number][]
-
-  $: yRange0 = $yRange[0]
-</script>
-
-<g class="axis x-axis" class:snapTicks>
-  {#each tickVals as tick, i}
-    <g class="tick tick-{i}" transform="translate({$xScale(tick)},{yRange0})">
-      {#if gridlines !== false}
-        <line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
-      {/if}
-      {#if tickMarks === true}
-        <line
-          class="tick-mark"
-          y1={0}
-          y2={6}
-          x1={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
-          x2={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
-        />
-      {/if}
-      <text
-        class="rotate-45"
-        x={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
-        y={yTick}
-        dx={dxTick}
-        dy={dyTick}
-        text-anchor="start">{formatTick(tick)}</text
-      >
-    </g>
-  {/each}
-  {#if baseline === true}
-    <line
-      class="baseline"
-      y1={$height + 0.5}
-      y2={$height + 0.5}
-      x1="0"
-      x2={$width}
-    />
-  {/if}
-</g>
-
-<style>
-  .tick {
-    font-size: 0.725em;
-    font-weight: 200;
-  }
-
-  line,
-  .tick line {
-    stroke: rgb(179, 179, 179);
-    stroke-dasharray: 2;
-  }
-  .tick .tick-mark,
-  .baseline {
-    stroke-dasharray: 0;
-  }
-  /* This looks slightly better */
-  .axis.snapTicks .tick:last-child text {
-    transform: translateX(3px);
-  }
-  .axis.snapTicks .tick.tick-0 text {
-    transform: translateX(-3px);
-  }
-</style>
diff --git a/src/lib/components/latchkeys/AxisY.svelte b/src/lib/components/latchkeys/AxisY.svelte
deleted file mode 100644
index 90a2dbfdcad52f57c6e847b0bc3b6719e4210e51..0000000000000000000000000000000000000000
--- a/src/lib/components/latchkeys/AxisY.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-<script lang="ts">
-  import type { Waterfall } from "@openfisca/json-model"
-  import { createEventDispatcher, getContext } from "svelte"
-  import type { Writable } from "svelte/store"
-
-  import { session } from "$app/stores"
-  import type { Decomposition, DecompositionByName } from "$lib/decompositions"
-  import { iterDecompositionAncestorsName } from "$lib/decompositions"
-
-  export let tickMarks = false
-  export let gridlines = true
-  export let formatTick = (d: string): string => d
-  export let xTick = 0
-  export let yTick = 0
-
-  const { data, height, padding, xRange, yRange, yScale } =
-    getContext("LayerCake")
-  const decompositionByNameArray = getContext(
-    "decompositionByNameArray",
-  ) as Writable<DecompositionByName[]>
-  const dispatch = createEventDispatcher()
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
-  const waterfall = getContext("waterfall") as Writable<Waterfall>
-
-  $: rootDecompositionName = $waterfall.root
-
-  $: yHalfBandwidth = $yScale.bandwidth() / 2
-
-  $: [yRange0, yRange1] = $yRange
-
-  function* iterRows(data) {
-    for (const item of data) {
-      yield {
-        aggregate: item.aggregate,
-        label: item.leaf.label,
-        leaf: item.leaf,
-      }
-    }
-  }
-
-  function openable(
-    aggregate: Decomposition | undefined,
-    leaf: Decomposition,
-  ): boolean {
-    return (
-      aggregate !== undefined &&
-      (aggregate === leaf || aggregate.values.some(([x0]) => x0 !== 0))
-    )
-  }
-
-  function toggle(aggregate: Decomposition | undefined, leaf: Decomposition) {
-    if (!openable(aggregate, leaf)) {
-      return
-    }
-    const open = !aggregate.open
-    let smallestAggregate = aggregate
-    const index = $testCaseIndex ?? 0
-    const decompositionByName = $decompositionByNameArray[index]
-    if (open) {
-      // When aggregate has just one child, we need to also open
-      // its child... and so on.
-      while (smallestAggregate.childrenName?.length === 1) {
-        smallestAggregate =
-          decompositionByName[smallestAggregate.childrenName[0]]
-      }
-    }
-
-    const newDecompositionByNameArray = [...$decompositionByNameArray]
-    newDecompositionByNameArray[index] = toggleToNode(
-      { ...decompositionByName },
-      decompositionByName[rootDecompositionName],
-      [
-        ...iterDecompositionAncestorsName(
-          decompositionByName,
-          smallestAggregate.name,
-        ),
-      ].slice(1),
-      open,
-    )
-    $decompositionByNameArray = newDecompositionByNameArray
-  }
-
-  function toggleToNode(
-    decompositionByName: DecompositionByName,
-    decomposition: Decomposition | undefined,
-    names: string[],
-    open: boolean,
-  ): DecompositionByName {
-    if (
-      decomposition === undefined ||
-      decomposition.childrenName === undefined
-    ) {
-      return
-    }
-    decompositionByName[decomposition.name] = decomposition = {
-      ...decomposition,
-    }
-    if (open) {
-      decomposition.open = true
-    }
-    if (names.length === 0) {
-      if (!open) {
-        delete decomposition.open
-      }
-      return decompositionByName
-    }
-
-    const childName = names[0]
-    if (!decomposition.childrenName.includes(childName)) {
-      return decompositionByName
-    }
-    return toggleToNode(
-      decompositionByName,
-      decompositionByName[childName],
-      names.slice(1),
-      open,
-    )
-  }
-</script>
-
-<g class="axis y-axis" transform="translate({-$padding.left}, 0)">
-  <rect
-    class="fill-current text-le-bleu-light"
-    height={$height}
-    width={44 * 4}
-    x={-44 * 4}
-  />
-  {#each [...iterRows($data)] as { aggregate, label, leaf }, index}
-    <g
-      class="tick tick-{index}-{label} text-lg"
-      transform="translate({$xRange[0] + $padding.left}, {yRange0 +
-        yRange1 -
-        $yScale(label)})"
-    >
-      {#if gridlines !== false}
-        <line
-          class="gridline"
-          x2="100%"
-          y1={yTick - yHalfBandwidth}
-          y2={yTick - yHalfBandwidth}
-        />
-      {/if}
-      {#if tickMarks === true}
-        <line
-          class="tick-mark"
-          x1="0"
-          x2={-6}
-          y1={yTick - yHalfBandwidth}
-          y2={yTick - yHalfBandwidth}
-        />
-      {/if}
-      {#if index > 0}
-        <text
-          class="cursor-pointer fill-current font-extralight font-serif text-le-bleu text-base hover:underline"
-          dx={-9}
-          dy={4}
-          style="text-anchor: end;"
-          x={xTick}
-          y={yTick - yHalfBandwidth}
-          ><tspan
-            class="hover:font-bold hover:underline"
-            on:click={() => dispatch("selectVariable", leaf.name)}
-            >{formatTick(label)}</tspan
-          >{#if openable(aggregate, leaf)}<tspan
-              class="hover:font-bold hover:underline"
-              on:click={() => toggle(aggregate, leaf)}
-              >{#if aggregate.open} [-]{:else} [+]{/if}</tspan
-            >{/if}</text
-        >
-      {/if}
-    </g>
-  {/each}
-</g>
-
-<style>
-  .tick line {
-    stroke: #aaa;
-  }
-  .tick .gridline {
-    stroke-dasharray: 2;
-  }
-
-  .tick.tick-0 line {
-    stroke-dasharray: 0;
-  }
-</style>
diff --git a/src/lib/components/latchkeys/Latchkey.svelte b/src/lib/components/latchkeys/Latchkey.svelte
deleted file mode 100644
index 331eed7024623aaea4ba4725f61441958ca32cee..0000000000000000000000000000000000000000
--- a/src/lib/components/latchkeys/Latchkey.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script lang="ts">
-  import type { Waterfall } from "@openfisca/json-model"
-  import { scaleBand } from "d3-scale"
-  import { getContext } from "svelte"
-  import type { Writable } from "svelte/store"
-  // import { writable } from "svelte/store"
-
-  import { session } from "$app/stores"
-  import { LayerCake, Svg } from "$lib/components/layercake"
-  import type {
-    DecompositionByName,
-    LatchkeyDataItem,
-  } from "$lib/decompositions"
-
-  import AxisX from "./AxisX.svelte"
-  import AxisY from "./AxisY.svelte"
-  import Rows from "./Rows.svelte"
-
-  const adaptAmountsScale = getContext("adaptAmountsScale") as Writable<boolean>
-  const decompositionByNameArray = getContext(
-    "decompositionByNameArray",
-  ) as Writable<DecompositionByName[]>
-  const showNulls = getContext("showNulls") as Writable<boolean>
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
-  const waterfall = getContext("waterfall") as Writable<Waterfall>
-
-  // const showColoredRects = writable(false)
-  // setContext("showColoredRects", showColoredRects)
-
-  $: rootDecompositionName = $waterfall.root
-
-  $: data = aggregateDecomposition(
-    $decompositionByNameArray[$testCaseIndex ?? 0],
-    rootDecompositionName,
-  )
-
-  $: xDomain = computeXDomain(data, $adaptAmountsScale)
-
-  $: yDomain = data.map((item) => item.leaf.label)
-
-  function aggregateDecomposition(
-    decompositionByName: DecompositionByName,
-    name: string,
-  ): LatchkeyDataItem[] {
-    const dataItemsGenerator = iterAggregateDecomposition(
-      decompositionByName,
-      name,
-    )
-    const data = []
-    let next
-    while (!(next = dataItemsGenerator.next()).done) {
-      data.push(next.value)
-    }
-    if (next.value !== undefined) {
-      data.push(next.value)
-    }
-    return data
-  }
-
-  function computeXDomain(
-    data: LatchkeyDataItem[],
-    adaptAmountsScale: boolean,
-  ): [number, number] {
-    let valueMin = undefined
-    let valueMax = undefined
-    for (const { aggregate, leaf } of data) {
-      if (adaptAmountsScale) {
-        for (const value of [
-          ...(aggregate?.deltaSumsAtVectorIndex ?? []),
-          ...leaf.deltaSumsAtVectorIndex,
-        ]) {
-          if (valueMin === undefined || value < valueMin) {
-            valueMin = value
-          }
-          if (valueMax === undefined || value > valueMax) {
-            valueMax = value
-          }
-        }
-      } else {
-        for (const itemValues of [
-          ...(aggregate?.values ?? []),
-          ...leaf.values,
-        ]) {
-          for (const value of itemValues) {
-            if (valueMin === undefined || value < valueMin) {
-              valueMin = value
-            }
-            if (valueMax === undefined || value > valueMax) {
-              valueMax = value
-            }
-          }
-        }
-      }
-    }
-    return [valueMin, valueMax]
-  }
-
-  function* iterAggregateDecomposition(
-    decompositionByName: DecompositionByName,
-    name: string,
-  ): Generator<LatchkeyDataItem, LatchkeyDataItem | undefined, unknown> {
-    const decomposition = decompositionByName[name]
-    if (decomposition.childrenName === undefined) {
-      return decomposition.delta.some((deltaItem) => deltaItem !== 0) ||
-        $showNulls
-        ? { leaf: decomposition }
-        : undefined
-    }
-
-    let latestChildDataItem: LatchkeyDataItem | undefined = undefined
-    for (const childName of decomposition.childrenName) {
-      const childDataItemsGenerator = iterAggregateDecomposition(
-        decompositionByName,
-        childName,
-      )
-      let next
-      while (!(next = childDataItemsGenerator.next()).done) {
-        if (latestChildDataItem !== undefined) {
-          if (decomposition.open) {
-            yield latestChildDataItem
-          }
-          latestChildDataItem = undefined
-        }
-        if (decomposition.open) {
-          yield next.value
-        }
-      }
-      if (next.value !== undefined) {
-        if (latestChildDataItem !== undefined && decomposition.open) {
-          yield latestChildDataItem
-        }
-        latestChildDataItem = next.value
-      }
-    }
-
-    if (latestChildDataItem === undefined) {
-      // console.assert(decomposition.delta.every(deltaItem => deltaItem === 0) && !$showNulls)
-      return undefined
-    }
-    if (
-      latestChildDataItem.aggregate === undefined ||
-      latestChildDataItem.aggregate.deltaAtVectorIndex ===
-        decomposition.deltaAtVectorIndex
-    ) {
-      if (decomposition.open || decomposition.trunk) {
-        return {
-          aggregate: decomposition,
-          leaf: latestChildDataItem.leaf,
-        }
-      } else {
-        return { aggregate: decomposition, leaf: decomposition }
-      }
-    }
-    if (decomposition.open) {
-      yield latestChildDataItem
-    }
-    return {
-      aggregate: decomposition,
-      leaf: {
-        // A dummy leaf
-        delta: Array(decomposition.delta.length).fill(0),
-        index: 0,
-        name: "",
-        label: "",
-        values: decomposition.values.map(([, x1]) => [x1, x1]),
-      },
-    }
-  }
-</script>
-
-{#if xDomain.length > 0 && yDomain.length > 0}
-  <div
-    class="bg-white mx-auto pb-0 mb-5 pl-44 pr-20 pt-0 w-full border-b border-gray-200"
-    style="height: {1 + 4 * data.length + 3}rem;"
-  >
-    <LayerCake
-      {data}
-      x={({ aggregate, leaf }) => [
-        aggregate?.deltaSumsAtVectorIndex?.[0] ?? 0, // x0 aggregate
-        aggregate?.deltaSumsAtVectorIndex?.[1] ?? 0, // x1 aggregate
-        leaf.deltaSumsAtVectorIndex?.[0] ?? 0, // x0 leaf
-        leaf.deltaSumsAtVectorIndex?.[1] ?? 0, // x1 leaf
-      ]}
-      {xDomain}
-      y={(item) => item.leaf.label}
-      yScale={scaleBand().paddingInner([0.1]).round(true)}
-      {yDomain}
-    >
-      <Svg>
-        <Rows />
-        <AxisX />
-        <AxisY gridlines={false} on:selectVariable />
-      </Svg>
-    </LayerCake>
-  </div>
-
-  <!-- <label
-    ><input bind:checked={$showColoredRects} type="checkbox" /> Montrer les rectangles
-    colorés en fond</label
-  > -->
-{/if}
diff --git a/src/lib/components/latchkeys/Rows.svelte b/src/lib/components/latchkeys/Rows.svelte
deleted file mode 100644
index b40d83ec11a7d0f9f516a72ab5188a952b4fd4de..0000000000000000000000000000000000000000
--- a/src/lib/components/latchkeys/Rows.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { getContext } from "svelte"
-
-  import Arrow from "./Arrow.svelte"
-
-  const { data, xGet, xScale, yGet, yRange, yScale } = getContext("LayerCake")
-
-  $: [yRange0, yRange1] = $yRange
-
-  $: height = $yScale.bandwidth()
-
-  $: yPadding = $yScale.paddingInner() * $yScale.step()
-
-  function* iterRows(data, xGet, xScale, yGet, height) {
-    for (const [index, item] of data.entries()) {
-      const [xAggregate0, xAggregate1, x0, x1] = xGet(item)
-      const y = yRange0 + yRange1 - yGet(item) - height
-      if (Number.isNaN(y)) {
-        continue
-      }
-      yield {
-        height,
-        index,
-        item,
-        x0,
-        x1,
-        xAggregate0,
-        xAggregate1,
-        y,
-      }
-    }
-  }
-</script>
-
-<g class="row-group">
-  {#each [...iterRows($data, $xGet, $xScale, $yGet, height)] as { height, index, item, x0, x1, xAggregate0, xAggregate1, y } (`${item.leaf.name}_${index}`)}
-    <Arrow
-      {height}
-      {index}
-      {item}
-      {x0}
-      {x1}
-      {xAggregate0}
-      {xAggregate1}
-      {y}
-      {yPadding}
-    />
-  {/each}
-</g>
diff --git a/src/lib/components/layercake/LayerCake.svelte b/src/lib/components/layercake/LayerCake.svelte
deleted file mode 100644
index 780200ce83f2d48819994195bc8a611bf7882aef..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/LayerCake.svelte
+++ /dev/null
@@ -1,405 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import { writable, derived } from "svelte/store"
-
-  import makeAccessor from "./utils/makeAccessor"
-  import filterObject from "./utils/filterObject"
-  import calcExtents from "./lib/calcExtents"
-  import calcDomain from "./helpers/calcDomain"
-  import createScale from "./helpers/createScale"
-  import createGetter from "./helpers/createGetter"
-  import getRange from "./helpers/getRange"
-  import defaultScales from "./settings/defaultScales"
-  import defaultReverses from "./settings/defaultReverses"
-
-  export let ssr = false
-  export let pointerEvents = true
-  export let position = "relative"
-  export let percentRange = false
-
-  export let width = undefined
-  export let height = undefined
-
-  export let containerWidth = width || 100
-  export let containerHeight = height || 100
-
-  export let element = undefined
-
-  /* --------------------------------------------
-   * Parameters
-   * Values that computed properties are based on and that
-   * can be easily extended from config values
-   *
-   */
-  export let x = undefined
-  export let y = undefined
-  export let z = undefined
-  export let r = undefined
-  export let custom = {}
-  export let data = []
-  export let xDomain = undefined
-  export let yDomain = undefined
-  export let zDomain = undefined
-  export let rDomain = undefined
-  export let xNice = false
-  export let yNice = false
-  export let zNice = false
-  export let rNice = false
-  export let xReverse = defaultReverses.x
-  export let yReverse = defaultReverses.y
-  export let zReverse = defaultReverses.z
-  export let rReverse = defaultReverses.r
-  export let xPadding = undefined
-  export let yPadding = undefined
-  export let zPadding = undefined
-  export let rPadding = undefined
-  export let xScale = defaultScales.x
-  export let yScale = defaultScales.y
-  export let zScale = defaultScales.y
-  export let rScale = defaultScales.r
-  export let xRange = undefined
-  export let yRange = undefined
-  export let zRange = undefined
-  export let rRange = undefined
-  export let padding = {}
-  export let extents = {}
-  export let flatData = undefined
-
-  /* --------------------------------------------
-   * Preserve a copy of our passed in settings before we modify them
-   * Return this to the user's context so they can reference things if need be
-   * Add the active keys since those aren't on our settings object.
-   * This is mostly an escape-hatch
-   */
-  const config = {}
-  $: if (x) config.x = x
-  $: if (y) config.y = y
-  $: if (z) config.z = z
-  $: if (r) config.r = r
-  $: if (xDomain) config.xDomain = xDomain
-  $: if (yDomain) config.yDomain = yDomain
-  $: if (zDomain) config.zDomain = zDomain
-  $: if (rDomain) config.rDomain = rDomain
-  $: if (xRange) config.xRange = xRange
-  $: if (yRange) config.yRange = yRange
-  $: if (zRange) config.zRange = zRange
-  $: if (rRange) config.rRange = rRange
-
-  /* --------------------------------------------
-   * Make store versions of each parameter
-   * Prefix these with `_` to keep things organized
-   */
-  const _percentRange = writable()
-  const _containerWidth = writable()
-  const _containerHeight = writable()
-  const _x = writable()
-  const _y = writable()
-  const _z = writable()
-  const _r = writable()
-  const _custom = writable()
-  const _data = writable()
-  const _xDomain = writable()
-  const _yDomain = writable()
-  const _zDomain = writable()
-  const _rDomain = writable()
-  const _xNice = writable()
-  const _yNice = writable()
-  const _zNice = writable()
-  const _rNice = writable()
-  const _xReverse = writable()
-  const _yReverse = writable()
-  const _zReverse = writable()
-  const _rReverse = writable()
-  const _xPadding = writable()
-  const _yPadding = writable()
-  const _zPadding = writable()
-  const _rPadding = writable()
-  const _xScale = writable()
-  const _yScale = writable()
-  const _zScale = writable()
-  const _rScale = writable()
-  const _xRange = writable()
-  const _yRange = writable()
-  const _zRange = writable()
-  const _rRange = writable()
-  const _padding = writable()
-  const _flatData = writable()
-  const _extents = writable()
-  const _config = writable(config)
-
-  $: _percentRange.set(percentRange)
-  $: _containerWidth.set(containerWidth)
-  $: _containerHeight.set(containerHeight)
-  $: _x.set(makeAccessor(x))
-  $: _y.set(makeAccessor(y))
-  $: _z.set(makeAccessor(z))
-  $: _r.set(makeAccessor(r))
-  $: _xDomain.set(xDomain)
-  $: _yDomain.set(yDomain)
-  $: _zDomain.set(zDomain)
-  $: _rDomain.set(rDomain)
-  $: _custom.set(custom)
-  $: _data.set(data)
-  $: _xNice.set(xNice)
-  $: _yNice.set(yNice)
-  $: _zNice.set(zNice)
-  $: _rNice.set(rNice)
-  $: _xReverse.set(xReverse)
-  $: _yReverse.set(yReverse)
-  $: _zReverse.set(zReverse)
-  $: _rReverse.set(rReverse)
-  $: _xPadding.set(xPadding)
-  $: _yPadding.set(yPadding)
-  $: _zPadding.set(zPadding)
-  $: _rPadding.set(rPadding)
-  $: _xScale.set(xScale)
-  $: _yScale.set(yScale)
-  $: _zScale.set(zScale)
-  $: _rScale.set(rScale)
-  $: _xRange.set(xRange)
-  $: _yRange.set(yRange)
-  $: _zRange.set(zRange)
-  $: _rRange.set(rRange)
-  $: _padding.set(padding)
-  $: _extents.set(filterObject(extents))
-  $: _flatData.set(flatData || data)
-
-  /* --------------------------------------------
-   * Create derived values
-   * Suffix these with `_d`
-   */
-  const activeGetters_d = derived([_x, _y, _z, _r], ([$x, $y, $z, $r]) => {
-    return [
-      { field: "x", accessor: $x },
-      { field: "y", accessor: $y },
-      { field: "z", accessor: $z },
-      { field: "r", accessor: $r },
-    ].filter((d) => d.accessor)
-  })
-
-  const padding_d = derived(
-    [_padding, _containerWidth, _containerHeight],
-    ([$padding]) => {
-      const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 }
-      return Object.assign(defaultPadding, $padding)
-    },
-  )
-
-  const box_d = derived(
-    [_containerWidth, _containerHeight, padding_d],
-    ([$containerWidth, $containerHeight, $padding]) => {
-      const b = {}
-      b.top = $padding.top
-      b.right = $containerWidth - $padding.right
-      b.bottom = $containerHeight - $padding.bottom
-      b.left = $padding.left
-      b.width = b.right - b.left
-      b.height = b.bottom - b.top
-      if (b.width <= 0) {
-        console.error(
-          "[LayerCake] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?",
-        )
-      }
-      if (b.height <= 0) {
-        console.error(
-          "[LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?",
-        )
-      }
-      return b
-    },
-  )
-
-  const width_d = derived([box_d], ([$box]) => {
-    return $box.width
-  })
-
-  const height_d = derived([box_d], ([$box]) => {
-    return $box.height
-  })
-
-  /* --------------------------------------------
-   * Calculate extents by taking the extent of the data
-   * and filling that in with anything set by the user
-   */
-  const extents_d = derived(
-    [_flatData, activeGetters_d, _extents],
-    ([$flatData, $activeGetters, $extents]) => {
-      return {
-        ...calcExtents(
-          $flatData,
-          $activeGetters.filter((d) => !$extents[d.field]),
-        ),
-        ...$extents,
-      }
-    },
-  )
-
-  const xDomain_d = derived([extents_d, _xDomain], calcDomain("x"))
-  const yDomain_d = derived([extents_d, _yDomain], calcDomain("y"))
-  const zDomain_d = derived([extents_d, _zDomain], calcDomain("z"))
-  const rDomain_d = derived([extents_d, _rDomain], calcDomain("r"))
-
-  const xScale_d = derived(
-    [
-      _xScale,
-      extents_d,
-      xDomain_d,
-      _xPadding,
-      _xNice,
-      _xReverse,
-      width_d,
-      height_d,
-      _xRange,
-      _percentRange,
-    ],
-    createScale("x"),
-  )
-  const xGet_d = derived([_x, xScale_d], createGetter)
-
-  const yScale_d = derived(
-    [
-      _yScale,
-      extents_d,
-      yDomain_d,
-      _yPadding,
-      _yNice,
-      _yReverse,
-      width_d,
-      height_d,
-      _yRange,
-      _percentRange,
-    ],
-    createScale("y"),
-  )
-  const yGet_d = derived([_y, yScale_d], createGetter)
-
-  const zScale_d = derived(
-    [
-      _zScale,
-      extents_d,
-      zDomain_d,
-      _zPadding,
-      _zNice,
-      _zReverse,
-      width_d,
-      height_d,
-      _zRange,
-      _percentRange,
-    ],
-    createScale("z"),
-  )
-  const zGet_d = derived([_z, zScale_d], createGetter)
-
-  const rScale_d = derived(
-    [
-      _rScale,
-      extents_d,
-      rDomain_d,
-      _rPadding,
-      _rNice,
-      _rReverse,
-      width_d,
-      height_d,
-      _rRange,
-      _percentRange,
-    ],
-    createScale("r"),
-  )
-  const rGet_d = derived([_r, rScale_d], createGetter)
-
-  const xRange_d = derived([xScale_d], getRange)
-  const yRange_d = derived([yScale_d], getRange)
-  const zRange_d = derived([zScale_d], getRange)
-  const rRange_d = derived([rScale_d], getRange)
-
-  const aspectRatio_d = derived(
-    [width_d, height_d],
-    ([$aspectRatio, $width, $height]) => {
-      return $width / $height
-    },
-  )
-
-  $: context = {
-    activeGetters: activeGetters_d,
-    width: width_d,
-    height: height_d,
-    percentRange: _percentRange,
-    aspectRatio: aspectRatio_d,
-    containerWidth: _containerWidth,
-    containerHeight: _containerHeight,
-    x: _x,
-    y: _y,
-    z: _z,
-    r: _r,
-    custom: _custom,
-    data: _data,
-    xNice: _xNice,
-    yNice: _yNice,
-    zNice: _zNice,
-    rNice: _rNice,
-    xReverse: _xReverse,
-    yReverse: _yReverse,
-    zReverse: _zReverse,
-    rReverse: _rReverse,
-    xPadding: _xPadding,
-    yPadding: _yPadding,
-    zPadding: _zPadding,
-    rPadding: _rPadding,
-    padding: padding_d,
-    flatData: _flatData,
-    extents: extents_d,
-    xDomain: xDomain_d,
-    yDomain: yDomain_d,
-    zDomain: zDomain_d,
-    rDomain: rDomain_d,
-    xRange: xRange_d,
-    yRange: yRange_d,
-    zRange: zRange_d,
-    rRange: rRange_d,
-    config: _config,
-    xScale: xScale_d,
-    xGet: xGet_d,
-    yScale: yScale_d,
-    yGet: yGet_d,
-    zScale: zScale_d,
-    zGet: zGet_d,
-    rScale: rScale_d,
-    rGet: rGet_d,
-  }
-
-  $: setContext("LayerCake", context)
-</script>
-
-{#if ssr === true || typeof window !== "undefined"}
-  <div
-    bind:this={element}
-    class="layercake-container"
-    style="
-			position:{position};
-			{position === 'absolute' ? 'top:0;right:0;bottom:0;left:0;' : ''}
-			{pointerEvents === false ? 'pointer-events:none;' : ''}
-		"
-    bind:clientWidth={containerWidth}
-    bind:clientHeight={containerHeight}
-  >
-    <slot
-      {element}
-      width={$width_d}
-      height={$height_d}
-      aspectRatio={$aspectRatio_d}
-      containerWidth={$_containerWidth}
-      containerHeight={$_containerHeight}
-    />
-  </div>
-{/if}
-
-<style>
-  .layercake-container,
-  .layercake-container :global(*) {
-    box-sizing: border-box;
-  }
-  .layercake-container {
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/src/lib/components/layercake/helpers/calcDomain.ts b/src/lib/components/layercake/helpers/calcDomain.ts
deleted file mode 100644
index 231a296af02b9b5018b5997ccb04ac09a1eb1cb7..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/calcDomain.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import partialDomain from "../utils/partialDomain"
-
-export default function calcDomain(s) {
-  return function domainCalc([$extents, $domain]) {
-    return $extents ? partialDomain($extents[s], $domain) : $domain
-  }
-}
diff --git a/src/lib/components/layercake/helpers/createGetter.ts b/src/lib/components/layercake/helpers/createGetter.ts
deleted file mode 100644
index e306266edf53a931de9651aadfca93a48739ed9b..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/createGetter.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function createGetter([$acc, $scale]) {
-  return (d) => {
-    const val = $acc(d)
-    if (Array.isArray(val)) {
-      return val.map((v) => $scale(v))
-    }
-    return $scale(val)
-  }
-}
diff --git a/src/lib/components/layercake/helpers/createScale.ts b/src/lib/components/layercake/helpers/createScale.ts
deleted file mode 100644
index 42cdc00fe790c8ce6d0bf55b37a29a4d49976e9a..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/createScale.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import defaultScales from "../settings/defaultScales"
-import partialDomain from "../utils/partialDomain"
-import padScale from "../utils/padScale"
-import getDefaultRange from "../settings/getDefaultRange"
-
-export default function createScale(s) {
-  return function scaleCreator([
-    $scale,
-    $extents,
-    $domain,
-    $padding,
-    $nice,
-    $reverse,
-    $width,
-    $height,
-    $range,
-    $percentScale,
-  ]) {
-    if ($extents === null) {
-      return null
-    }
-
-    const defaultRange = getDefaultRange(
-      s,
-      $width,
-      $height,
-      $reverse,
-      $range,
-      $percentScale,
-    )
-
-    const scale = $scale === defaultScales[s] ? $scale() : $scale.copy()
-
-    /* --------------------------------------------
-     * On creation, `$domain` will already have any nulls filled in
-     * But if we set it via the context it might not, so rerun it through partialDomain
-     */
-    scale.domain(partialDomain($extents[s], $domain)).range(defaultRange)
-
-    if ($padding) {
-      scale.domain(padScale(scale, $padding))
-    }
-
-    if ($nice === true) {
-      if (typeof scale.nice === "function") {
-        scale.nice()
-      } else {
-        console.error(
-          `[Layer Cake] You set \`${s}Nice: true\` but the ${s}Scale does not have a \`.nice\` method. Ignoring...`,
-        )
-      }
-    }
-
-    return scale
-  }
-}
diff --git a/src/lib/components/layercake/helpers/findScaleType.ts b/src/lib/components/layercake/helpers/findScaleType.ts
deleted file mode 100644
index e8f8dbda18aab803a5e623df5a2ff9c5640a1d1d..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/findScaleType.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/* --------------------------------------------
- *
- * Determine whether a scale is a log, symlog, power or other
- * This is not meant to be exhaustive of all the different types of
- * scales in d3-scale and focuses on continuous scales
- *
- * --------------------------------------------
- */
-export default function findScaleType(scale) {
-  if (scale.constant) {
-    return "symlog"
-  }
-  if (scale.base) {
-    return "log"
-  }
-  if (scale.exponent) {
-    if (scale.exponent() === 0.5) {
-      return "sqrt"
-    }
-    return "pow"
-  }
-  return "other"
-}
diff --git a/src/lib/components/layercake/helpers/getPadFunctions.ts b/src/lib/components/layercake/helpers/getPadFunctions.ts
deleted file mode 100644
index 4caec687484fca07d8d9917dc29897180594da20..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/getPadFunctions.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import findScaleType from "./findScaleType"
-import identity from "./identity"
-
-function log(sign) {
-  return (x) => Math.log(sign * x)
-}
-
-function exp(sign) {
-  return (x) => sign * Math.exp(x)
-}
-
-function symlog(c) {
-  return (x) => Math.sign(x) * Math.log1p(Math.abs(x / c))
-}
-
-function symexp(c) {
-  return (x) => Math.sign(x) * Math.expm1(Math.abs(x)) * c
-}
-
-function pow(exponent) {
-  return function powFn(x) {
-    return x < 0 ? -Math.pow(-x, exponent) : Math.pow(x, exponent)
-  }
-}
-
-export default function getPadFunctions(scale) {
-  const scaleType = findScaleType(scale)
-
-  if (scaleType === "log") {
-    const sign = Math.sign(scale.domain()[0])
-    return { lift: log(sign), ground: exp(sign), scaleType }
-  }
-  if (scaleType === "pow") {
-    const exponent = 1
-    return { lift: pow(exponent), ground: pow(1 / exponent), scaleType }
-  }
-  if (scaleType === "sqrt") {
-    const exponent = 0.5
-    return { lift: pow(exponent), ground: pow(1 / exponent), scaleType }
-  }
-  if (scaleType === "symlog") {
-    const constant = 1
-    return { lift: symlog(constant), ground: symexp(constant), scaleType }
-  }
-
-  return { lift: identity, ground: identity, scaleType }
-}
diff --git a/src/lib/components/layercake/helpers/getRange.ts b/src/lib/components/layercake/helpers/getRange.ts
deleted file mode 100644
index d160738f5845ce274a984266e787f0a5e8eb9b0c..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/getRange.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function getRange([$scale]) {
-  if (typeof $scale === "function") {
-    if (typeof $scale.range === "function") {
-      return $scale.range()
-    }
-    console.error("[LayerCake] Your scale doesn't have a `.range` method?")
-  }
-  return null
-}
diff --git a/src/lib/components/layercake/helpers/identity.ts b/src/lib/components/layercake/helpers/identity.ts
deleted file mode 100644
index 8a36148a62205d673a668ce9bc1e1c19e27ad7a8..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/helpers/identity.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function identity(d) {
-  return d
-}
diff --git a/src/lib/components/layercake/index.ts b/src/lib/components/layercake/index.ts
deleted file mode 100644
index cae8bec5757305b84ca4e860dee246860f3adc39..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { default as LayerCake } from "./LayerCake.svelte"
-export { default as Html } from "./layouts/Html.svelte"
-export { default as Svg } from "./layouts/Svg.svelte"
-export { default as ScaledSvg } from "./layouts/ScaledSvg.svelte"
-export { default as Canvas } from "./layouts/Canvas.svelte"
-export { default as WebGL } from "./layouts/Webgl.svelte"
-
-export { default as scaleCanvas } from "./lib/scaleCanvas"
-export { default as flatten } from "./lib/flatten"
-export { default as uniques } from "./lib/uniques"
-export { default as calcExtents } from "./lib/calcExtents"
-export { default as raise } from "./lib/raise"
diff --git a/src/lib/components/layercake/layouts/Canvas.svelte b/src/lib/components/layercake/layouts/Canvas.svelte
deleted file mode 100644
index 60d454641ca2263ba126ece77f1d7e35483fbf13..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/layouts/Canvas.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import { getContext, onMount, setContext } from "svelte"
-  import { writable } from "svelte/store"
-  import scaleCanvas from "../lib/scaleCanvas"
-
-  export let zIndex = undefined
-  export let pointerEvents = undefined
-
-  export let element = undefined
-  export let context = undefined
-
-  let zIndexStyle = ""
-  $: zIndexStyle = typeof zIndex !== "undefined" ? `z-index:${zIndex};` : ""
-
-  let pointerEventsStyle = ""
-  $: pointerEventsStyle = pointerEvents === false ? "pointer-events:none;" : ""
-
-  const { width, height, padding } = getContext("LayerCake")
-
-  const cntxt = {
-    ctx: writable({}),
-  }
-
-  onMount(() => {
-    context = element.getContext("2d")
-    scaleCanvas(context, $width, $height)
-  })
-
-  $: cntxt.ctx.set(context)
-  setContext("canvas", cntxt)
-</script>
-
-<canvas
-  bind:this={element}
-  class="layercake-layout-canvas"
-  style="width:100%;height:100%;top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;position:absolute;{zIndexStyle}{pointerEventsStyle}"
-/>
-<slot {element} {context} />
diff --git a/src/lib/components/layercake/layouts/Html.svelte b/src/lib/components/layercake/layouts/Html.svelte
deleted file mode 100644
index fc4fc21d9e28afcf6a0abb9544fb60f4ed1664be..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/layouts/Html.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let element = undefined
-  export let zIndex = undefined
-  export let pointerEvents = undefined
-
-  let zIndexStyle = ""
-  $: zIndexStyle = typeof zIndex !== "undefined" ? `z-index:${zIndex};` : ""
-
-  let pointerEventsStyle = ""
-  $: pointerEventsStyle = pointerEvents === false ? "pointer-events:none;" : ""
-
-  const { padding } = getContext("LayerCake")
-</script>
-
-<div
-  bind:this={element}
-  class="layercake-layout-html"
-  style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}{pointerEventsStyle}"
->
-  <slot {element} />
-</div>
-
-<style>
-  div,
-  slot {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-</style>
diff --git a/src/lib/components/layercake/layouts/ScaledSvg.svelte b/src/lib/components/layercake/layouts/ScaledSvg.svelte
deleted file mode 100644
index 1f715098b195c052c079541d7cd1a5c0750286a6..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/layouts/ScaledSvg.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let element = undefined
-  export let fixedAspectRatio = 1
-  export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`
-  export let zIndex = undefined
-  export let pointerEvents = undefined
-
-  let zIndexStyle = ""
-  $: zIndexStyle = typeof zIndex !== "undefined" ? `z-index:${zIndex};` : ""
-
-  let pointerEventsStyle = ""
-  $: pointerEventsStyle = pointerEvents === false ? "pointer-events:none;" : ""
-
-  const { padding } = getContext("LayerCake")
-</script>
-
-<svg
-  bind:this={element}
-  {viewBox}
-  preserveAspectRatio="none"
-  style="top: {$padding.top}px; right:0px; bottom:0px; left:{$padding.left}px;width:calc(100% - {$padding.left +
-    $padding.right}px);height:calc(100% - {$padding.top +
-    $padding.bottom}px);{zIndexStyle}{pointerEventsStyle}"
->
-  <defs>
-    <slot name="defs" />
-  </defs>
-
-  <slot {element} />
-</svg>
-
-<style>
-  svg {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: visible;
-  }
-  svg :global(*) {
-    vector-effect: non-scaling-stroke;
-  }
-</style>
diff --git a/src/lib/components/layercake/layouts/Svg.svelte b/src/lib/components/layercake/layouts/Svg.svelte
deleted file mode 100644
index 86d3026151c92bde021b3e24be7be455f0744a4f..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/layouts/Svg.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  export let element = undefined
-  export let viewBox = undefined
-  export let zIndex = undefined
-  export let pointerEvents = undefined
-
-  let zIndexStyle = ""
-  $: zIndexStyle = typeof zIndex !== "undefined" ? `z-index:${zIndex};` : ""
-
-  let pointerEventsStyle = ""
-  $: pointerEventsStyle = pointerEvents === false ? "pointer-events:none;" : ""
-
-  const { containerWidth, containerHeight, padding } = getContext("LayerCake")
-</script>
-
-<svg
-  bind:this={element}
-  class="layercake-layout-svg"
-  {viewBox}
-  width={$containerWidth}
-  height={$containerHeight}
-  style="{zIndexStyle}{pointerEventsStyle}"
->
-  <defs>
-    <slot name="defs" />
-  </defs>
-  <g
-    class="layercake-layout-svg_g"
-    transform="translate({$padding.left}, {$padding.top})"
-  >
-    <slot {element} />
-  </g>
-</svg>
-
-<style>
-  svg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow: visible;
-  }
-</style>
diff --git a/src/lib/components/layercake/layouts/Webgl.svelte b/src/lib/components/layercake/layouts/Webgl.svelte
deleted file mode 100644
index ff07e435dc45659b65896be3e978b343f1dc6dd6..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/layouts/Webgl.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { getContext, onMount, setContext } from "svelte"
-  import { writable } from "svelte/store"
-
-  export let contextAttributes = undefined
-  export let zIndex = undefined
-  export let pointerEvents = undefined
-
-  export let element = undefined
-  let testGl
-  export let context = undefined
-
-  let zIndexStyle = ""
-  $: zIndexStyle = typeof zIndex !== "undefined" ? `z-index:${zIndex};` : ""
-
-  let pointerEventsStyle = ""
-  $: pointerEventsStyle = pointerEvents === false ? "pointer-events:none;" : ""
-
-  const { padding } = getContext("LayerCake")
-
-  const cntxt = {
-    gl: writable({}),
-  }
-
-  onMount(() => {
-    /* --------------------------------------------
-     * Try to find a working webgl context
-     */
-    const contexts = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"]
-    for (let j = 0; j < contexts.length; j++) {
-      testGl = element.getContext(contexts[j], contextAttributes)
-      if (testGl) {
-        context = testGl
-        break
-      }
-    }
-  })
-
-  $: cntxt.gl.set(context)
-  setContext("gl", cntxt)
-</script>
-
-<canvas
-  bind:this={element}
-  class="layercake-layout-webgl"
-  style="width:100%;height:100%;top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;position:absolute;{zIndexStyle}{pointerEventsStyle}"
-/>
-<slot {element} {context} />
diff --git a/src/lib/components/layercake/lib/calcExtents.ts b/src/lib/components/layercake/lib/calcExtents.ts
deleted file mode 100644
index adf31f4c443626ab29e8b3273d6e4f6ed2195a14..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/lib/calcExtents.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/* --------------------------------------------
- *
- * Calculate the extents of desired fields
- * Returns an object like:
- * `{x: [0, 10], y: [-10, 10]}` if `fields` is
- * `[{field:'x', accessor: d => d.x}, {field:'y', accessor: d => d.y}]`
- *
- * --------------------------------------------
- */
-export default function calcExtents(data, fields) {
-  if (!Array.isArray(data) || data.length === 0) return null
-  const extents = {}
-  const fl = fields.length
-  let i
-  let j
-  let f
-  let val
-  let s
-
-  if (fl) {
-    for (i = 0; i < fl; i += 1) {
-      const firstRow = fields[i].accessor(data[0])
-      if (
-        firstRow === undefined ||
-        firstRow === null ||
-        Number.isNaN(firstRow) === true
-      ) {
-        extents[fields[i].field] = [Infinity, -Infinity]
-      } else {
-        extents[fields[i].field] = Array.isArray(firstRow)
-          ? firstRow
-          : [firstRow, firstRow]
-      }
-    }
-    const dl = data.length
-    for (i = 0; i < dl; i += 1) {
-      for (j = 0; j < fl; j += 1) {
-        f = fields[j]
-        val = f.accessor(data[i])
-        s = f.field
-        if (Array.isArray(val)) {
-          const vl = val.length
-          for (let k = 0; k < vl; k += 1) {
-            if (
-              val[k] !== undefined &&
-              val[k] !== null &&
-              Number.isNaN(val[k]) === false
-            ) {
-              if (val[k] < extents[s][0]) {
-                extents[s][0] = val[k]
-              }
-              if (val[k] > extents[s][1]) {
-                extents[s][1] = val[k]
-              }
-            }
-          }
-        } else if (
-          val !== undefined &&
-          val !== null &&
-          Number.isNaN(val) === false
-        ) {
-          if (val < extents[s][0]) {
-            extents[s][0] = val
-          }
-          if (val > extents[s][1]) {
-            extents[s][1] = val
-          }
-        }
-      }
-    }
-  } else {
-    return null
-  }
-  return extents
-}
diff --git a/src/lib/components/layercake/lib/flatten.ts b/src/lib/components/layercake/lib/flatten.ts
deleted file mode 100644
index 39ab144c5fa207e216fd617bfecaef85d6ca6372..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/lib/flatten.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* --------------------------------------------
- *
- * Flatten arrays of arrays one level deep
- *
- * --------------------------------------------
- */
-export default function flatten(arr) {
-  if (Array.isArray(arr) && Array.isArray(arr[0])) {
-    let flat = []
-    const l = arr.length
-    for (let i = 0; i < l; i += 1) {
-      flat = flat.concat(arr[i])
-    }
-    return flat
-  }
-  return arr
-}
diff --git a/src/lib/components/layercake/lib/raise.ts b/src/lib/components/layercake/lib/raise.ts
deleted file mode 100644
index 7f61f7780d0fa2e4e3a2ac48c63daa1ddf627eee..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/lib/raise.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* --------------------------------------------
- *
- * Move an element to the last child
- * Adapted from d3-selection `.raise`
- * https://github.com/d3/d3-selection#selection_raise
- *
- * --------------------------------------------
- */
-export default function raise(el) {
-  if (el.nextSibling) el.parentNode.appendChild(el)
-}
diff --git a/src/lib/components/layercake/lib/scaleCanvas.ts b/src/lib/components/layercake/lib/scaleCanvas.ts
deleted file mode 100644
index dbd3f2983ac08a18c17f725740544da7c5d4196a..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/lib/scaleCanvas.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * From Paul Lewis:
- * http://www.html5rocks.com/en/tutorials/canvas/hidpi/
- */
-export default function (ctx, width, height) {
-  const dpr = window.devicePixelRatio || 1
-
-  ctx.canvas.width = width * dpr
-  ctx.canvas.height = height * dpr
-
-  ctx.canvas.style.width = `${width}px`
-  ctx.canvas.style.height = `${height}px`
-
-  ctx.scale(dpr, dpr)
-  return { width: ctx.canvas.width, height: ctx.canvas.height }
-}
diff --git a/src/lib/components/layercake/lib/uniques.ts b/src/lib/components/layercake/lib/uniques.ts
deleted file mode 100644
index 1e91c4e32e428dd4a01310002acf37278873548d..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/lib/uniques.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/* --------------------------------------------
- *
- * Calculate uniqe values from a list with an optional iterator string or function
- * By default return the transformed value if iteratee exists
- *
- * --------------------------------------------
- */
-export default function uniques(list, iteratee, transform = true) {
-  if (!Array.isArray(list)) {
-    console.error("LayerCake error: Input value to `uniques` must be a list.")
-    return null
-  }
-  const ll = list.length
-  const iterater = typeof iteratee === "function"
-  const key = typeof iteratee !== "undefined"
-  const seen = []
-  const result = []
-  for (let i = 0; i < ll; i += 1) {
-    const d = list[i]
-    const computed = iterater ? iteratee(d) : key === true ? d[iteratee] : d
-    if (!seen.includes(computed)) {
-      seen.push(computed)
-      if (transform === false) {
-        result.push(d)
-      }
-    }
-  }
-  return transform === false ? result : seen
-}
diff --git a/src/lib/components/layercake/settings/defaultReverses.ts b/src/lib/components/layercake/settings/defaultReverses.ts
deleted file mode 100644
index c4cb798fb0a133aebd294f513f441181db7f64d2..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/settings/defaultReverses.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  x: false,
-  y: true,
-  z: false,
-  r: false,
-}
diff --git a/src/lib/components/layercake/settings/defaultScales.ts b/src/lib/components/layercake/settings/defaultScales.ts
deleted file mode 100644
index 58af7aea2f4cb0dc14e7df3c6786fe9bbf2287b9..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/settings/defaultScales.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { scaleLinear, scaleSqrt } from "d3-scale"
-
-export default {
-  x: scaleLinear,
-  y: scaleLinear,
-  z: scaleLinear,
-  r: scaleSqrt,
-}
diff --git a/src/lib/components/layercake/settings/getDefaultRange.ts b/src/lib/components/layercake/settings/getDefaultRange.ts
deleted file mode 100644
index 53a0cb4a7b10d08d8a706ebde567088f819aaa14..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/settings/getDefaultRange.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable no-nested-ternary */
-function calcBaseRange(s, width, height, reverse, percentRange) {
-  let min
-  let max
-  if (percentRange === true) {
-    min = 0
-    max = 100
-  } else {
-    min = s === "r" ? 1 : 0
-    max = s === "y" ? height : s === "r" ? 25 : width
-  }
-  return reverse === true ? [max, min] : [min, max]
-}
-
-export default function getDefaultRange(
-  s,
-  width,
-  height,
-  reverse,
-  range,
-  percentRange,
-) {
-  return !range
-    ? calcBaseRange(s, width, height, reverse, percentRange)
-    : typeof range === "function"
-    ? range({ width, height })
-    : range
-}
diff --git a/src/lib/components/layercake/utils/canBeZero.ts b/src/lib/components/layercake/utils/canBeZero.ts
deleted file mode 100644
index 2eb42f9f119bfed53feb00cacd0877a460709a36..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/utils/canBeZero.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* --------------------------------------------
- *
- * Return a truthy value if is zero
- *
- * --------------------------------------------
- */
-export default function canBeZero(val) {
-  if (val === 0) {
-    return true
-  }
-  return val
-}
diff --git a/src/lib/components/layercake/utils/filterObject.ts b/src/lib/components/layercake/utils/filterObject.ts
deleted file mode 100644
index 1c14efe78c63594bcab3639ea527ae4a75a4be4a..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/utils/filterObject.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/* --------------------------------------------
- *
- * Remove undefined fields from an object
- *
- * --------------------------------------------
- */
-
-// From Object.fromEntries polyfill https://github.com/tc39/proposal-object-from-entries/blob/master/polyfill.js#L1
-function fromEntries(iter) {
-  const obj = {}
-
-  for (const pair of iter) {
-    if (Object(pair) !== pair) {
-      throw new TypeError("iterable for fromEntries should yield objects")
-    }
-
-    // Consistency with Map: contract is that entry has "0" and "1" keys, not
-    // that it is an array or iterable.
-
-    const { "0": key, "1": val } = pair
-
-    Object.defineProperty(obj, key, {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: val,
-    })
-  }
-
-  return obj
-}
-
-export default function filterObject(obj) {
-  return fromEntries(
-    Object.entries(obj).filter(([key, value]) => {
-      return value !== undefined
-    }),
-  )
-}
diff --git a/src/lib/components/layercake/utils/makeAccessor.ts b/src/lib/components/layercake/utils/makeAccessor.ts
deleted file mode 100644
index a4d0450562d22f22849e72c053d0d0678cf98eb1..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/utils/makeAccessor.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import canBeZero from "./canBeZero"
-
-export default function makeAccessor(acc) {
-  if (!canBeZero(acc)) return null
-  if (Array.isArray(acc)) {
-    return (d) =>
-      acc.map((k) => {
-        return typeof k !== "function" ? d[k] : k(d)
-      })
-  } else if (typeof acc !== "function") {
-    // eslint-disable-line no-else-return
-    return (d) => d[acc]
-  }
-  return acc
-}
diff --git a/src/lib/components/layercake/utils/padScale.ts b/src/lib/components/layercake/utils/padScale.ts
deleted file mode 100644
index 64a20fa610fe13b29b42069508722593a432cb19..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/utils/padScale.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* --------------------------------------------
- *
- * Returns a modified scale domain by in/decreasing
- * the min/max by taking the desired difference
- * in pixels and converting it to units of data.
- * Returns an array that you can set as the new domain.
- * Padding contributed by @veltman.
- * See here for discussion of transforms: https://github.com/d3/d3-scale/issues/150
- *
- * --------------------------------------------
- */
-import getPadFunctions from "../helpers/getPadFunctions"
-
-export default function padScale(scale, padding) {
-  if (typeof scale.range !== "function") {
-    throw new Error("Scale method `range` must be a function")
-  }
-  if (typeof scale.domain !== "function") {
-    throw new Error("Scale method `domain` must be a function")
-  }
-  if (!Array.isArray(padding)) {
-    return scale.domain()
-  }
-
-  if (scale.domain().length !== 2) {
-    console.warn(
-      "[LayerCake] The scale is expected to have a domain of length 2 to use padding. Are you sure you want to use padding? Your scale's domain is:",
-      scale.domain(),
-    )
-  }
-  if (scale.range().length !== 2) {
-    console.warn(
-      "[LayerCake] The scale is expected to have a range of length 2 to use padding. Are you sure you want to use padding? Your scale's range is:",
-      scale.range(),
-    )
-  }
-
-  const { lift, ground } = getPadFunctions(scale)
-
-  const d0 = scale.domain()[0]
-
-  const isTime = Object.prototype.toString.call(d0) === "[object Date]"
-
-  const [d1, d2] = scale.domain().map((d) => {
-    return isTime ? lift(d.getTime()) : lift(d)
-  })
-  const [r1, r2] = scale.range()
-  const paddingLeft = padding[0] || 0
-  const paddingRight = padding[1] || 0
-
-  const step = (d2 - d1) / (Math.abs(r2 - r1) - paddingLeft - paddingRight) // Math.abs() to properly handle reversed scales
-
-  return [d1 - paddingLeft * step, paddingRight * step + d2].map((d) => {
-    return isTime ? ground(new Date(d)) : ground(d)
-  })
-}
diff --git a/src/lib/components/layercake/utils/partialDomain.ts b/src/lib/components/layercake/utils/partialDomain.ts
deleted file mode 100644
index 84f2a27296ef6d8ac78b2bd47ac0d34720e05cca..0000000000000000000000000000000000000000
--- a/src/lib/components/layercake/utils/partialDomain.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/* --------------------------------------------
- * If we have a domain from settings, fill in
- * any null values with ones from our measured extents
- * otherwise, return the measured extent
- */
-export default function partialDomain(domain = [], directive) {
-  if (Array.isArray(directive) === true) {
-    return directive.map((d, i) => {
-      if (d === null) {
-        return domain[i]
-      }
-      return d
-    })
-  }
-  return domain
-}
diff --git a/src/lib/components/parameters/NodeEdit.svelte b/src/lib/components/parameters/NodeEdit.svelte
index b1068d9a205ff2d244200dc2cfb5c5405819645a..d3a1af8b0712cffe2bdff41d876ba4e8df5ad215 100644
--- a/src/lib/components/parameters/NodeEdit.svelte
+++ b/src/lib/components/parameters/NodeEdit.svelte
@@ -131,35 +131,12 @@
     </ul>
   {/if}
 
-  <div class="grid grid-cols-2 gap-10 bg-gray-100 rounded p-2 mb-4 my-auto">
+  <div class="flex mb-4 my-auto">
     <!--Colonne 1 présentant les valeurs-->
-    <div>
-      <dl class="flex-col mb-10">
+    <div class="flex-col items-center mr-2 w-2/3">
+      <div class="flex-col mb-2 ">
         {#each [...iterArrayWithErrors(instantReferencesArray, errors)] as [{ instant, references }, error], index}
-          <div class="flex items-center">
-            <dt class="mt-4">
-              <input
-                class="rounded hover:text-le-gris-dispositif"
-                max="{new Date().getFullYear() + 20}-01-01"
-                min="1900-01-01"
-                on:change={(event) => changeInstant(index, event)}
-                type="date"
-                value={instant}
-              />
-              {#if showErrors && error?.[0] !== undefined}
-                <p>{error[0]}</p>
-              {/if}
-            </dt>
-            <dd
-              class="ml-2 text-xs text-gray-500 hover:text-le-gris-dispositif"
-            >
-              <ReferencesEdit
-                errors={errorAsKeyValueDictionary(error?.[1])}
-                on:change={(event) => changeReferences(index, event)}
-                {references}
-                {showErrors}
-              />
-            </dd>
+          <div class="flex items-start">
             <button
               class="p-1 rounded mt-4 "
               on:click={() => deleteValueAtInstant(index)}
@@ -178,12 +155,41 @@
                 /></svg
               >
             </button>
+            <div class="bg-gray-100 rounded w-full mb-4 border ">
+              <div class="flex-col">
+                <div class="p-2">
+                  <label class="text-base mt-1 text-gray-600">
+                    Valeur en vigueur depuis
+                    <input
+                      class="rounded hover:text-le-gris-dispositif"
+                      max="{new Date().getFullYear() + 20}-01-01"
+                      min="1900-01-01"
+                      on:change={(event) => changeInstant(index, event)}
+                      type="date"
+                      value={instant}
+                    />
+                    {#if showErrors && error?.[0] !== undefined}
+                      <p>{error[0]}</p>
+                    {/if}
+                  </label>
+                </div>
+
+                <div class="text-xs text-gray-500 ">
+                  <ReferencesEdit
+                    errors={errorAsKeyValueDictionary(error?.[1])}
+                    on:change={(event) => changeReferences(index, event)}
+                    {references}
+                    {showErrors}
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         {/each}
-      </dl>
+      </div>
     </div>
     <!--Colonne 2 pour ajouter un paramètre ou valider les dernières valeurs-->
-    <div>
+    <div class="ml-2 w-1/3">
       <div class="my-4 flex justify-start">
         <button
           class="px-5 inline-flex items-center bg-le-gris-dispositif text-white hover:bg-le-gris-dispositif-dark shadow-md rounded p-2 uppercase text-sm"
@@ -208,12 +214,14 @@
     </div>
   </div>
 
-  <p>Configurations avancées :</p>
-  <div class="inline-flex">
-    <label class="mb-2 text-xs">
-      Unité de valeur
+  <h2 class="font-bold text-xl pt-7 pb-3">
+    Modifications avancées du noeud&nbsp;:
+  </h2>
+  <div class="flex-col mt-4 mb-2">
+    <label class="flex text-base">
+      Unité de valeur&nbsp;:
       <select
-        class="flex rounded border-1 mx-auto text-xs "
+        class="p-1 ml-1 flex rounded border-1 mx-auto text-sm"
         required={showErrors}
         bind:value={parameter.unit}
       >
diff --git a/src/lib/components/parameters/ParameterView.svelte b/src/lib/components/parameters/ParameterView.svelte
index 62aaa3326e2aa9e346cc8e7e88efb67d8007d3f8..cdc0215509419d24afbddd0cb6a4cf9dc3295ab9 100644
--- a/src/lib/components/parameters/ParameterView.svelte
+++ b/src/lib/components/parameters/ParameterView.svelte
@@ -54,264 +54,315 @@
 </script>
 
 <main class="flex items-center justify-center fond">
-  <div class="bg-white max-w-screen-md p-10">
+  <div class="bg-white max-w-screen-md">
     <div class="flex-col items-start pb-4">
-      <div>
-        <h1 class="text-gray-700 pt-7 pb-3 mb-10">
-          <p class="uppercase">Paramètre</p>
-          {#each [...iterParameterAncestors(parameter.parent)] as ancestor}
-            <p class="inline font-serif text-sm">
-              <!-- svelte-ignore a11y-missing-attribute -->
-              <a
-                class="link text-gray-500"
-                {...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
-                >{ancestor.title}</a
-              >
-              &gt;
-            </p>
-          {/each}
-          <p class="text-3xl font-bold ">
+      <div class="p-10">
+        <p class="uppercase mb-2">Détail du paramètre :</p>
+
+        <div class="border-l-2 border-black pl-4 mb-4 ">
+          <p class="text-3xl font-serif font-bold">
             {parameter.title}
           </p>
-        </h1>
-
-        {#if parameter.class !== ParameterClass.Node}
-          <div class="rounded bg-gray-100 p-4 w-1/2 border-2 border-gray-900 ">
-            <div class="inline-flex">
-              <p class="text-black text-sm">
-                Dernière relecture : {#if parameter.last_review === undefined}<i
-                    >date indéterminée</i
-                  >{:else}{dateFormatter.format(
-                    new Date(parameter.last_review),
-                  )}{/if}
-              </p>
-              {#if parameter.last_review === undefined}
-                <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
-                <svg
-                  aria-hidden="true"
-                  class="h-6 w-6 ml-2 items-center fill-current"
-                  viewBox="0 0 24 22"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-                    fill="#FFAC33"
-                  />
-                  <path
-                    d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-                    fill="white"
-                  />
-                  <path
-                    d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-                    fill="white"
-                  />
-                </svg>
-              {/if}
-            </div>
-
-            {#if parameter.file_path !== undefined}
-              {#if parameter.last_review === undefined}
-                <p class="text-gray-700 text-xs pt-2">
-                  Vous connaissez la dernière valeur du paramètre ?
-                </p>
-                <a
-                  class="text-gray-700 underline text-xs hover:text-le-bleu"
-                  href="/parameters/{parameter.name}/edit"
-                >
-                  Cliquez pour contribuer.
-                </a>
-              {/if}
-            {/if}
-          </div>
-        {/if}
-      </div>
-
-      {#if parameter.class === ParameterClass.Node}
-        {#if parameter.children !== undefined}
-          <ul class="ml-4">
-            {#each Object.entries(parameter.children) as [childId, child]}
-              <li class="my-2">
+          <span class="text-sm font-serif italic">{parameter.description}</span>
+          <div class=" mt-7 p-2 rounded w-3/5 border ">
+            <h2 class="text-base ">Parents du paramètre&nbsp;:</h2>
+            {#each [...iterParameterAncestors(parameter.parent)] as ancestor}
+              <p class="inline font-serif text-sm">
                 <!-- svelte-ignore a11y-missing-attribute -->
                 <a
-                  class="link"
-                  {...newSelfTargetAProps(`/parameters/${child.name}`)}
+                  class="text-sm link text-gray-500 font-serif"
+                  {...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
+                  >{ancestor.title}</a
                 >
-                  {child.title}
-                </a>
-              </li>
+                &nbsp;&gt;&nbsp;
+              </p>
             {/each}
-          </ul>
-        {/if}
-      {:else if parameter.class === ParameterClass.Scale}
-        <ScaleView {parameter} />
-      {:else if parameter.class === ParameterClass.Value}
-        <!--Tableau des valeurs-->
-        <div class="pb-5 ">
-          <h2 class="mr-1 mb-2 font-serif font-bold text-xl pt-7 pb-3">
-            Historique des valeurs du paramètre :
-          </h2>
-          <table class="w-full border-collapse table-fixed bg-gray-100">
-            <thead>
-              <tr>
-                <th class="border p-1 text-center font-light bg-white">Date</th>
-                <!-- <th class="border p-1 text-center">Nom</th> -->
-                <th class="border p-1 text-center font-light bg-white"
-                  >Valeur</th
-                >
-                <th class="border p-1 text-center font-light bg-white">Unité</th
-                >
-                <th class="border p-1 text-center font-light bg-white"
-                  >Source</th
-                >
-              </tr>
-            </thead>
-            <tbody>
-              {#each buildInstantReferencesAndValueArray(parameter) as { instant, references, valueAtInstant }}
-                <tr>
-                  <td class="border p-1 font-serif text-center">{instant}</td>
-                  {#if valueAtInstant === undefined}
-                    <td class="border italic p-1 text-center" colspan="2" />
-                  {:else if valueAtInstant === "expected"}
-                    <td class="border italic p-1 text-center" colspan="3"
-                      >valeur attendue</td
-                    >
-                  {:else}
-                    <!-- TODO: Handle when valueAtInstant.value is a string array or a string by string dict. -->
-                    <td class="border p-1 font-serif text-center"
-                      >{valueAtInstant.value ?? ""}</td
-                    >
-                    <td class="border p-1 text-center"
-                      >{valueAtInstant.unit !== undefined
-                        ? labelFromUnit(valueAtInstant.unit)
-                        : parameter.unit !== undefined
-                        ? labelFromUnit(parameter.unit)
-                        : ""}</td
-                    >
-                  {/if}
-                  {#if valueAtInstant !== "expected"}
-                    <td class="border p-1 text-center"
-                      >{#if references.length > 0}
-                        <ul>
-                          {#each references as { href, note, title }}
-                            <li>
-                              {#if href === undefined}{title}{:else}<a
-                                  class="link"
-                                  {href}
-                                  target="_blank">{title ?? "source"}</a
-                                >{/if}
-                              {#if note}
-                                <p>{note}</p>
-                              {/if}
-                            </li>
-                          {/each}
-                        </ul>{/if}</td
-                    >
-                  {/if}
-                </tr>
-              {/each}
-            </tbody>
-          </table>
+            <span class="text-sm"> {parameter.title}</span>
+          </div>
         </div>
-        <!--Fin du tableau des valeurs-->
-      {/if}
 
-      <p class="pb-2">Caractéristiques avancées :</p>
-      <div class="text-xs">
-        {#if parameter.documentation !== undefined}
-          <div>{parameter.documentation}</div>
+        {#if parameter.class !== ParameterClass.Node}
+          <div class="inline-flex items-center">
+            {#if parameter.last_review === undefined}
+              <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+
+              <svg
+                aria-hidden="true"
+                class="mr-1 h-6 w-6 items-center fill-current text-[#FFAC33]"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+                />
+              </svg>
+            {:else}
+              <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+              <svg
+                aria-hidden="true"
+                class="mr-1 h-6 w-6 items-center fill-current"
+                viewBox="0 0 24 23"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
+                  fill="#13CC03"
+                />
+                <path
+                  d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
+                  fill="white"
+                />
+              </svg>
+            {/if}
+            <p class="text-black text-sm">
+              {#if parameter.last_review !== undefined}Ce paramètre a été
+                vérifié le <span class="font-bold"
+                  >{dateFormatter.format(new Date(parameter.last_review))}
+                </span>
+              {:else}
+                Ce paramètre n'a pas de date de relecture connue.
+              {/if}
+              ⎪
+              <a
+                class="text-gray-700 underline text-sm hover:text-le-bleu"
+                href="/parameters/{parameter.name}/edit"
+              >
+                Proposer une modification
+              </a>
+            </p>
+          </div>
         {/if}
 
         {#if parameter.class === ParameterClass.Node}
-          {#if parameter.unit !== undefined}
-            <div class="flex border-b my-1 py-1 font-base ">
-              <p class=" mr-1">
-                Unité du paramètre : {labelFromUnit(parameter.unit)}
-              </p>
-            </div>
+          {#if parameter.children !== undefined}
+            <ul class="ml-4">
+              {#each Object.entries(parameter.children) as [childId, child]}
+                <li class="my-2">
+                  <!-- svelte-ignore a11y-missing-attribute -->
+                  <a
+                    class="link"
+                    {...newSelfTargetAProps(`/parameters/${child.name}`)}
+                  >
+                    {child.title}
+                  </a>
+                </li>
+              {/each}
+            </ul>
           {/if}
         {:else if parameter.class === ParameterClass.Scale}
-          <div>
-            <div class="flex flex-col border-t border-b my-1 py-2 font-base ">
-              <p class=" mr-1">
-                Barème {labelFromScaleType(parameter.type)}
+          <ScaleView {parameter} />
+        {:else if parameter.class === ParameterClass.Value}
+          <!--Tableau des valeurs-->
+          <div class="pb-5 ">
+            <h2 class="font-bold text-xl pt-7 pb-3">
+              Historique des valeurs&nbsp;:
+            </h2>
+            <table
+              class="w-full border-collapse table-auto bg-gray-100 text-sm "
+            >
+              <thead>
+                <tr>
+                  <th class="border p-1 text-center font-bold bg-white">Date</th
+                  >
+                  <!-- <th class="border p-1 text-center">Nom</th> -->
+                  <th class="border p-1 text-center font-bold bg-white"
+                    >Valeur</th
+                  >
+                  <th class="border p-1 text-center font-bold bg-white"
+                    >Unité</th
+                  >
+                  <th
+                    class="border p-1 text-center font-bold bg-white items-center"
+                    ><!--Material UI Icon Assignment-->
+                    <svg
+                      class="fill-current w-4 h-4 inline-flex mr-1"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      fill="#000000"
+                      ><path d="M0 0h24v24H0V0z" fill="none" /><path
+                        d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
+                      /></svg
+                    >Références législatives</th
+                  >
+                </tr>
+              </thead>
+              <tbody>
+                {#each buildInstantReferencesAndValueArray(parameter) as { instant, references, valueAtInstant }}
+                  <tr>
+                    <td class="border p-1 font-serif text-center">{instant}</td>
+                    {#if valueAtInstant === undefined}
+                      <td class="border italic p-1 text-center" colspan="2" />
+                    {:else if valueAtInstant === "expected"}
+                      <td class="border italic p-1 text-center" colspan="3"
+                        >valeur attendue</td
+                      >
+                    {:else}
+                      <!-- TODO: Handle when valueAtInstant.value is a string array or a string by string dict. -->
+                      <td class="border p-1 font-serif text-center"
+                        >{valueAtInstant.value ?? ""}</td
+                      >
+                      <td class="border p-1 text-center"
+                        >{valueAtInstant.unit !== undefined
+                          ? labelFromUnit(valueAtInstant.unit)
+                          : parameter.unit !== undefined
+                          ? labelFromUnit(parameter.unit)
+                          : ""}</td
+                      >
+                    {/if}
+                    {#if valueAtInstant !== "expected"}
+                      <td
+                        class="bg-le-gris-dispositif-ultralight border p-1 text-center font-serif text-xs"
+                        >{#if references.length > 0}
+                          <ul>
+                            {#each references as { href, note, title }}
+                              <li>
+                                {#if href === undefined}{title}{:else}<a
+                                    class="link"
+                                    {href}
+                                    target="_blank">{title ?? "source"}</a
+                                  >{/if}
+                                {#if note}
+                                  <p>{note}</p>
+                                {/if}
+                              </li>
+                            {/each}
+                          </ul>{/if}</td
+                      >
+                    {/if}
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+          <!--Fin du tableau des valeurs-->
+        {/if}
+
+        <h2 class="font-bold text-xl mt-7 pb-3">Caractéristiques&nbsp;:</h2>
+        <div class="">
+          {#if parameter.class === ParameterClass.Node}
+            {#if parameter.unit !== undefined}
+              <div class="flex border-b my-1 py-1 font-base ">
+                <p class="mr-1">
+                  Unité du paramètre&nbsp;:: <span class="font-bold">
+                    {labelFromUnit(parameter.unit)}</span
+                  >
+                </p>
+              </div>
+            {/if}
+          {:else if parameter.class === ParameterClass.Scale}
+            <div>
+              <p class="flex my-1 py-1 font-base mr-1">
+                Barème&nbsp;:&nbsp;<span class="font-bold">
+                  {labelFromScaleType(parameter.type)}</span
+                >
               </p>
               {#if parameter.threshold_unit !== undefined}
-                <p class=" mr-1">
-                  Unité de seuil : {labelFromUnit(parameter.threshold_unit)}
+                <p class="flex my-1 py-1 font-base mr-1">
+                  Unité de seuil&nbsp;:&nbsp;<span class="font-bold">
+                    {labelFromUnit(parameter.threshold_unit)}</span
+                  >
                 </p>
               {/if}
               {#if isAmountScaleParameter(parameter)}
                 {#if asAmountScaleParameter(parameter).amount_unit !== undefined}
-                  <p class=" mr-1">
-                    Unité de montant : {labelFromUnit(
-                      asAmountScaleParameter(parameter).amount_unit,
-                    )}
+                  <p class="flex my-1 py-1 font-base mr-1">
+                    Unité de montant&nbsp;:&nbsp; <span class="font-bold">
+                      {labelFromUnit(
+                        asAmountScaleParameter(parameter).amount_unit,
+                      )}</span
+                    >
                   </p>
                 {/if}
               {:else if asRateScaleParameter(parameter).rate_unit !== undefined}
-                <p class=" mr-1">
-                  Unité de taux : {labelFromUnit(
-                    asRateScaleParameter(parameter).rate_unit,
-                  )}
+                <p class="flex my-1 py-1 font-base mr-1">
+                  Unité de taux&nbsp;:&nbsp;<span class="font-bold">
+                    {labelFromUnit(
+                      asRateScaleParameter(parameter).rate_unit,
+                    )}</span
+                  >
                 </p>
               {/if}
             </div>
-            <div class=" mr-1 mb-2">Dernières valeurs en date&nbsp;:</div>
-          </div>
-        {:else if parameter.class === ParameterClass.Value}
-          <p class=" mr-1">
-            Valeur de type {labelFromValueType(parameter.type)}
-          </p>
-          {#if parameter.unit !== undefined}
-            <div class="flex  my-1 py-1 font-base ">
-              <p class=" mr-1">
-                Unité de la valeur : {labelFromUnit(parameter.unit)}
+          {:else if parameter.class === ParameterClass.Value}
+            <p class="flex my-1 py-1 font-base mr-1">
+              Valeur de type&nbsp;:&nbsp;<span class="font-bold"
+                >{labelFromValueType(parameter.type)}</span
+              >
+            </p>
+            {#if parameter.unit !== undefined}
+              <div class="flex my-1 py-1 font-base">
+                <p class=" mr-1">
+                  Unité de la valeur&nbsp;:&nbsp;<span class="font-bold"
+                    >{labelFromUnit(parameter.unit)}</span
+                  >
+                </p>
+              </div>
+            {/if}
+          {/if}
+          {#if parameter.documentation !== undefined}
+            <p class="mr-1">
+              Commentaire&nbsp;:&nbsp;<span class="italic"
+                >{parameter.documentation}</span
+              >
+            </p>
+          {/if}
+          {#if parameterRepositoryUrl !== undefined}
+            <div class="flex my-1 py-1 font-base">
+              <p>
+                <a
+                  class="text-gray-900 hover:text-le-bleu text-sm underline"
+                  href={parameterRepositoryUrl}
+                  target="_blank"
+                >
+                  <svg
+                    class="inline h-5 w-5 fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    height="24"
+                    ><path fill="none" d="M0 0h24v24H0z" /><path
+                      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
+                    /></svg
+                  >
+                  Formule OpenFisca sur Github</a
+                >
               </p>
             </div>
           {/if}
+        </div>
+
+        {#if parameter.referring_variables !== undefined}
+          <!--Informations connexes-->
+          <section class="mt-7">
+            <h2 class="font-bold text-xl pt-7 pb-3">
+              Formules de calcul où le paramètre apparaît :
+            </h2>
+            <ul class="list-disc list-inside">
+              {#each parameter.referring_variables as variableName}
+                <li>
+                  <!-- svelte-ignore a11y-missing-attribute -->
+                  <a
+                    class="text-gray-900 hover:text-le-bleu underline"
+                    {...newSelfTargetAProps(`/variables/${variableName}`)}
+                    >{variableName}</a
+                  >
+                </li>
+              {/each}
+            </ul>
+          </section>
         {/if}
-        {#if parameterRepositoryUrl !== undefined}
-          <div class=" flex font-base ">
+        {#if parameter.file_path !== undefined}
+          <div class="my-4 flex justify-end">
             <a
-              class="text-gray-900 hover:text-le-bleu text-xs underline"
-              href={parameterRepositoryUrl}
-              target="_blank"
-              >Fichier source OpenFisca
+              class="shrink-0 bg-le-bleu inline-block shadow-md hover:bg-blue-900 rounded px-4 py-2 text-center text-white uppercase text-sm"
+              href="/parameters/{parameter.name}/edit"
+            >
+              Proposer une modification
             </a>
           </div>
         {/if}
       </div>
-
-      {#if parameter.file_path !== undefined}
-        <div class="my-4 flex justify-end">
-          <a
-            class="shrink-0 bg-le-bleu inline-block shadow-md hover:bg-blue-900 rounded px-4 py-2 text-center text-white uppercase text-sm"
-            href="/parameters/{parameter.name}/edit"
-          >
-            Proposer une modification
-          </a>
-        </div>
-      {/if}
-      {#if parameter.referring_variables !== undefined}
-        <!--Informations connexes-->
-        <section class="mt-10 border-t">
-          <h2 class="mr-1 mb-2 font-serif font-bold text-xl pt-7 pb-3">
-            Formules de calcul où le paramètre apparaît :
-          </h2>
-          <ul class="list-disc list-inside">
-            {#each parameter.referring_variables as variableName}
-              <li>
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a
-                  class="link"
-                  {...newSelfTargetAProps(`/variables/${variableName}`)}
-                  >{variableName}</a
-                >
-              </li>
-            {/each}
-          </ul>
-        </section>
-      {/if}
     </div>
   </div>
 </main>
diff --git a/src/lib/components/parameters/ParametersSearch.svelte b/src/lib/components/parameters/ParametersSearch.svelte
index 4179869d98792231c502f697b66ee3e1e02e2c69..290e92cea52806676aa09313c9bb8cdfc2f6bc78 100644
--- a/src/lib/components/parameters/ParametersSearch.svelte
+++ b/src/lib/components/parameters/ParametersSearch.svelte
@@ -32,11 +32,38 @@
   }
 </script>
 
-<input autocomplete="off" on:input={onInput} type="search" value={term} />
+<label class="uppercase mb-2" for="parameters_search"
+  >Choisir un paramètre :</label
+>
+<div
+  class="bg-gray-100 p-1 flex justify-between w-full text-gray-400 focus-within:text-gray-900 items-center rounded-t-md shadow-inner-md border-b border-black"
+>
+  <div class="pointer-events-none justify-start">
+    <svg
+      class="m-1 fill-current inline-flex text-black"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      ><path fill="none" d="M0 0h24v24H0z" /><path
+        d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"
+      /></svg
+    >
+  </div>
+  <input
+    autocomplete="off"
+    class="bg-gray-100 placeholder-gray-400 text-sm text-gray-900 w-full focus:outline-none font-light"
+    id="parameters_search"
+    on:input={onInput}
+    placeholder="impôt sur le revenu, CSG, ..."
+    type="search"
+    value={term}
+  />
+</div>
 
 {#if found.length > 0}
-  <ul class="list-disc list-inside">
-    {#each found as { item: parameter }}
+  <ul class="list-disc list-inside mt-4">
+    {#each found as { item: parameter }, index (`found_parameter_$${index}`)}
       <li>
         <a
           class="link"
diff --git a/src/lib/components/parameters/ReferenceEdit.svelte b/src/lib/components/parameters/ReferenceEdit.svelte
index 0892a2240b75fa676c0c001ac1ab28a796ee7455..dbcdfbd7f35562a9c15df6845d27da58c96f9ac1 100644
--- a/src/lib/components/parameters/ReferenceEdit.svelte
+++ b/src/lib/components/parameters/ReferenceEdit.svelte
@@ -65,7 +65,7 @@
     >
   {/if}
   <input
-    class=" text-black font-serif text-sm border-gray-200 border-b rounded py-1 w-60"
+    class=" text-black font-serif text-sm border-gray-400 border-b rounded-t py-1 w-72"
     type="text"
     on:change={changeTitle}
     value={reference.title ?? ""}
@@ -82,7 +82,7 @@
     >
   {/if}
   <input
-    class=" text-black font-serif text-sm border-gray-200 border-b rounded py-1 w-60"
+    class=" text-black font-serif text-sm border-gray-400 border-b rounded-t py-1 w-72"
     type="url"
     on:change={changeHref}
     value={reference.href ?? ""}
@@ -100,7 +100,7 @@
     >
   {/if}
   <input
-    class=" text-black font-serif text-sm border-gray-200 border-b rounded py-1 w-60"
+    class=" text-black font-serif text-sm border-gray-400 border-b rounded-t py-1 w-72"
     type="text"
     on:change={changeNote}
     value={reference.note ?? ""}
diff --git a/src/lib/components/parameters/ReferencesEdit.svelte b/src/lib/components/parameters/ReferencesEdit.svelte
index ce0bca83d1675ac50d03515112700696f1a3e7b1..02d88c0bec875ae19504117187200220c37d9796 100644
--- a/src/lib/components/parameters/ReferencesEdit.svelte
+++ b/src/lib/components/parameters/ReferencesEdit.svelte
@@ -32,36 +32,46 @@
   }
 </script>
 
-<section>
-  <div class="mt-4 text-base text-black">Références&nbsp;:</div>
-  <ul>
+<section class="bg-le-gris-dispositif-ultralight p-2 rounded-b-md">
+  <div class="text-sm text-black">Références législatives&nbsp;:</div>
+  <div class="flex-col">
     {#each [...iterArrayWithErrors(references, errors)] as [reference, errorsAtIndex], index}
-      <li class="mr-2 mt-2">
-        <ReferenceEdit
-          errors={errorAsKeyValueDictionary(errorsAtIndex)}
-          on:change={(event) => changeReference(index, event)}
-          {reference}
-          {showErrors}
-        />
+      <div class="flex mr-2 mt-2 items-start">
         <button
-          class="py-2 rounded text-gray-500 hover:text-le-gris-dispositif"
+          class="py-2 rounded text-gray-500 hover:text-le-gris-dispositif mr-4"
           on:click={() => deleteReference(index)}
           title="Supprimer la référence"
           type="button"
         >
-          <div class="text-sm underline flex items-center">
-            Supprimer la référence
-          </div>
+          <!-- Material ui icon : delete -->
+          <svg
+            class="fill-current h-5 w-5 text-gray-500 hover:text-le-gris-dispositif"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            ><path d="M0 0h24v24H0z" fill="none" /><path
+              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+            /></svg
+          >
         </button>
-      </li>
+        <div>
+          <ReferenceEdit
+            errors={errorAsKeyValueDictionary(errorsAtIndex)}
+            on:change={(event) => changeReference(index, event)}
+            {reference}
+            {showErrors}
+          />
+        </div>
+      </div>
     {/each}
-  </ul>
+  </div>
   <button
     class=" text-sm text-gray-500 hover:text-le-gris-dispositif w-64 "
     on:click={appendReference}
     type="button"
   >
-    <div class="mt-2 flex items-center">
+    <div class="text-sm mt-2 flex items-center">
       <svg
         class="fill-current inline mr-1"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/parameters/ScaleAtInstantEdit.svelte b/src/lib/components/parameters/ScaleAtInstantEdit.svelte
index f56ddf824640632e5c2c8c152160be5a5d1fbaa4..a2087037d185d3b0bf6b150c5b23ee785f54264f 100644
--- a/src/lib/components/parameters/ScaleAtInstantEdit.svelte
+++ b/src/lib/components/parameters/ScaleAtInstantEdit.svelte
@@ -117,20 +117,20 @@
   }
 </script>
 
-<div class="flex-col">
+<div class="flex-col shadow-inner bg-white rounded-sm p-2 mx-4">
   <div>
     <table class="table-auto border-collapse ">
       <thead>
         <tr>
           <th />
-          <th class="font-light text-center bg-gray-100">Seuil</th>
+          <th class="font-light text-sm text-center">Seuil</th>
           {#if isAmountScale}
-            <th class="font-light text-center bg-gray-100">Montant</th>
+            <th class="font-light text-sm text-center">Montant</th>
           {:else}
             {#if usesBase}
-              <th class="font-light text-center bg-gray-100">Base</th>
+              <th class="font-light text-sm text-center">Base</th>
             {/if}
-            <th class="font-light text-center bg-gray-100">Taux</th>
+            <th class="font-light text-sm text-center">Taux</th>
           {/if}
         </tr>
       </thead>
@@ -160,7 +160,7 @@
             <td class="p-1">
               <div class="flex items-center">
                 <input
-                  class="bg-white text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24"
+                  class="bg-gray-100 rounded-t p-1 text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 border-gray-400"
                   step="any"
                   type="number"
                   on:change={(event) => changeValue(index, "threshold", event)}
@@ -168,7 +168,7 @@
                     ? null
                     : bracketAtInstant.threshold?.value ?? null}
                 />
-                <span class="font-serif text-base">
+                <span class="font-serif text-black text-sm">
                   {labelFromUnit(parameter.threshold_unit) ?? ""}
                 </span>
                 {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).threshold).value !== undefined}
@@ -181,10 +181,10 @@
               </div>
             </td>
             {#if isAmountScale}
-              <td class="border-l-2 p-1">
+              <td class="border-l-2 ml-2 p-3">
                 <div class="flex items-center">
                   <input
-                    class="bg-white text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24"
+                    class="bg-gray-100 rounded-t p-1 text-black hover:bg-le-gris-dispositif-light font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 border-gray-400"
                     step="any"
                     type="number"
                     on:change={(event) => changeValue(index, "amount", event)}
@@ -209,10 +209,10 @@
               </td>
             {:else}
               {#if usesBase}
-                <td class="border-l-2 p-1">
+                <td class="border-l-2 ml-2 p-3 ">
                   <div class="flex items-center">
                     <input
-                      class="bg-white text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24"
+                      class="bg-gray-100 rounded-t p-1 text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 border-gray-400"
                       step="any"
                       type="number"
                       on:change={(event) => changeValue(index, "base", event)}
@@ -237,10 +237,10 @@
                   </div>
                 </td>
               {/if}
-              <td class="border-l-2 p-1">
+              <td class="border-l-2 ml-2 p-3">
                 <div class="flex items-center">
                   <input
-                    class="bg-white text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 hover:bg-le-gris-dispositif-light"
+                    class="bg-gray-100 rounded-t p-1 text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24 hover:bg-le-gris-dispositif-light border-gray-400"
                     step="any"
                     type="number"
                     on:change={(event) => changeValue(index, "rate", event)}
diff --git a/src/lib/components/parameters/ScaleEdit.svelte b/src/lib/components/parameters/ScaleEdit.svelte
index eb677f057f4b1c1a73c6bd64f9c3d04121c908ff..e7a8bf33b6e6e9de37202e554210229e27b243ea 100644
--- a/src/lib/components/parameters/ScaleEdit.svelte
+++ b/src/lib/components/parameters/ScaleEdit.svelte
@@ -172,14 +172,14 @@
   }
 </script>
 
-<div class="flex gap-2 bg-gray-100 rounded p-2 mb-4 px-4 my-auto">
+<div class="flex mb-4 my-auto">
   <!--Colonne 1 présentant les valeurs-->
-  <div>
-    <dl class="flex-col mb-2 w-2/3">
+  <div class="flex-col items-center mr-2 w-2/3">
+    <div class="flex-col mb-2 ">
       {#each [...iterToLimit(iterArrayWithErrors(instantReferencesAndScaleArray, errors), showAll ? null : 3)] as [{ instant, references, scaleAtInstant }, error], index}
         <div class="flex items-start">
           <button
-            class="p-1 rounded mt-4 mr-2"
+            class="p-1 rounded mt-2 mr-2"
             on:click={() => deleteScaleAtInstant(index)}
             title="Supprimer la date et sa valeur"
             type="button"
@@ -196,46 +196,52 @@
               /></svg
             >
           </button>
-          <div class="flex items-start mt-2 mb-4 bg-white rounded p-2 mr-2">
-            <dt class="">
-              <label class="text-sm mb-4 mt-1">
-                <input
-                  class="rounded p-1 font-serif"
-                  max="{new Date().getFullYear() + 20}-01-01"
-                  min="1900-01-01"
-                  on:change={(event) => changeInstant(index, event)}
-                  type="date"
-                  value={instant}
-                />
-                {#if showErrors && error?.[0] !== undefined}
-                  <p>{error[0]}</p>
+
+          <div class="bg-gray-100 rounded w-full mb-4 border ">
+            <div class="flex-col">
+              <div class="p-2">
+                <label class="text-base mt-1 text-gray-600">
+                  Barème en vigueur depuis
+                  <input
+                    class="bg-white text-sm font-bold rounded p-1 font-serif"
+                    max="{new Date().getFullYear() + 20}-01-01"
+                    min="1900-01-01"
+                    on:change={(event) => changeInstant(index, event)}
+                    type="date"
+                    value={instant}
+                  />
+                  {#if showErrors && error?.[0] !== undefined}
+                    <p>{error[0]}</p>
+                  {/if}
+                </label>
+              </div>
+              <div class="p-2 text-xs text-gray-500 mb-4">
+                {#if scaleAtInstant !== undefined}
+                  <ScaleAtInstantEdit
+                    errors={errorAsKeyValueDictionary(error?.[1])}
+                    on:change={(event) => changeScaleAtInstant(index, event)}
+                    {parameter}
+                    {scaleAtInstant}
+                    {showErrors}
+                  />
                 {/if}
-              </label>
-            </dt>
-            <dd class="ml-4 text-xs text-gray-500">
-              {#if scaleAtInstant !== undefined}
-                <ScaleAtInstantEdit
+              </div>
+              <div class="text-xs text-gray-500 ">
+                <ReferencesEdit
                   errors={errorAsKeyValueDictionary(error?.[1])}
-                  on:change={(event) => changeScaleAtInstant(index, event)}
-                  {parameter}
-                  {scaleAtInstant}
+                  on:change={(event) => changeReferences(index, event)}
+                  {references}
                   {showErrors}
                 />
-              {/if}
-              <ReferencesEdit
-                errors={errorAsKeyValueDictionary(error?.[1])}
-                on:change={(event) => changeReferences(index, event)}
-                {references}
-                {showErrors}
-              />
-            </dd>
+              </div>
+            </div>
           </div>
         </div>
       {/each}
-    </dl>
+    </div>
     {#if instantReferencesAndScaleArray.length > 3}
       <button
-        class="flex items-center text-black hover:underline px-0 rounded p-2 uppercase text-sm mb-4"
+        class="bg-gray-100 flex items-center text-black hover:bg-gray-300 px-5 py-2 shadow-md rounded ml-8 uppercase text-sm mb-4"
         on:click={() => (showAll = !showAll)}
         type="button"
       >
@@ -272,7 +278,7 @@
   </div>
 
   <!--Colonne 2 pour ajouter un paramètre ou valider les dernières valeurs-->
-  <div>
+  <div class="ml-2 w-1/3">
     <div class="my-2 flex justify-start">
       <button
         class=" inline-flex items-center bg-le-gris-dispositif text-white hover:bg-le-gris-dispositif-dark shadow-md rounded p-2 uppercase text-sm"
@@ -288,7 +294,7 @@
           ><path d="M0 0h24v24H0z" fill="none" /><path
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
           /></svg
-        >Nouvelle valeur
+        >Nouveau barème
       </button>
     </div>
 
@@ -300,57 +306,56 @@
   </div>
 </div>
 
-<p>Configurations avancées :</p>
-<div class="flex-col mt-4">
-  <div class="flex">
-    {#if isAmountScaleParameter(parameter)}
-      {#if asAmountScaleParameter(parameter).amount_unit !== undefined}
-        <label class="mb-2 text-xs">
-          Unité de montant
-          <select
-            class="flex rounded border-1 mx-auto text-xs"
-            required={showErrors}
-            bind:value={parameter.amount_unit}
-          >
-            {#if parameter.amount_unit === undefined}
-              <option selected value={undefined}>Non précisée</option>
-            {/if}
-            {#each Object.values(AmountUnit) as unit}
-              <option value={unit}>{labelFromUnit(unit)}</option>
-            {/each}
-          </select>
-          {#if showErrors && errors.amount_unit !== undefined}
-            <p>{errors.amount_unit}</p>
-          {/if}
-        </label>
-      {/if}
-    {:else if asRateScaleParameter(parameter).rate_unit !== undefined}
-      <label class="mb-2 text-xs">
-        Unité de taux
+<h2 class="font-bold text-xl pt-7 pb-3">Modifications avancées du barème :</h2>
+
+<div class="flex-col mt-4 mb-2">
+  {#if isAmountScaleParameter(parameter)}
+    {#if asAmountScaleParameter(parameter).amount_unit !== undefined}
+      <label class="flex text-base">
+        Unité de montant&nbps;:
         <select
-          class="flex rounded border-1 mx-auto text-xs "
+          class="p-1 ml-1 flex rounded border-1 mx-auto text-sm "
           required={showErrors}
-          bind:value={parameter.rate_unit}
+          bind:value={parameter.amount_unit}
         >
-          {#if parameter.rate_unit === undefined}
+          {#if parameter.amount_unit === undefined}
             <option selected value={undefined}>Non précisée</option>
           {/if}
-          {#each Object.values(RateUnit) as unit}
+          {#each Object.values(AmountUnit) as unit}
             <option value={unit}>{labelFromUnit(unit)}</option>
           {/each}
         </select>
-        {#if showErrors && errors.rate_unit !== undefined}
-          <p>{errors.rate_unit}</p>
+        {#if showErrors && errors.amount_unit !== undefined}
+          <p>{errors.amount_unit}</p>
         {/if}
       </label>
     {/if}
-  </div>
+  {:else if asRateScaleParameter(parameter).rate_unit !== undefined}
+    <label class="flex text-base">
+      Unité de taux&nbsp;:
+      <select
+        class="p-1 ml-1 flex rounded border-1 mx-auto text-sm "
+        required={showErrors}
+        bind:value={parameter.rate_unit}
+      >
+        {#if parameter.rate_unit === undefined}
+          <option selected value={undefined}>Non précisée</option>
+        {/if}
+        {#each Object.values(RateUnit) as unit}
+          <option value={unit}>{labelFromUnit(unit)}</option>
+        {/each}
+      </select>
+      {#if showErrors && errors.rate_unit !== undefined}
+        <p>{errors.rate_unit}</p>
+      {/if}
+    </label>
+  {/if}
 
-  <div class="flex">
-    <label class="mb-2 text-xs">
-      Type de barème
+  <div class="flex mb-2">
+    <label class="text-base flex">
+      Type de barème&nbsp;:
       <select
-        class="flex rounded border-1 mx-auto text-xs "
+        class="p-1 ml-1 flex rounded border-1 mx-auto text-sm "
         required={showErrors}
         bind:value={parameter.type}
       >
@@ -366,22 +371,27 @@
       {/if}
     </label>
   </div>
-  <div class="flex">
+  <div class="flex mb-2">
     {#if isRateScaleParameter(parameter)}
-      <label class="my-2 text-xs">
-        <input class="rounded" checked={useBase} type="checkbox" />
-        Barème avec base
+      <label class="flex text-base items-center">
+        Barème avec base&nbsp;:
+        <input
+          class="m-1 rounded text-sm p-1"
+          checked={useBase}
+          type="checkbox"
+        />
+        <span class="text-sm">oui</span>
         {#if showErrors && errors.useBase !== undefined}
           <p>{errors.useBase}</p>
         {/if}
       </label>
     {/if}
   </div>
-  <div class="flex">
-    <label class=" text-xs">
-      Unité de seuil
+  <div class="flex mb-2">
+    <label class="flex text-base">
+      Unité de seuil&nbsp;:
       <select
-        class="flex rounded border-1 mx-auto text-xs "
+        class="flex p-1 ml-1 rounded border-1 mx-auto text-sm "
         required={showErrors}
         bind:value={parameter.threshold_unit}
       >
diff --git a/src/lib/components/parameters/ScaleView.svelte b/src/lib/components/parameters/ScaleView.svelte
index af1527bd3539103545c7c6c1d4b26fe4caed6410..6395ff4aa9bcadf1a5473f8525b9337ec7c9ec2d 100644
--- a/src/lib/components/parameters/ScaleView.svelte
+++ b/src/lib/components/parameters/ScaleView.svelte
@@ -38,104 +38,124 @@
   }
 </script>
 
-<table class="border-collapse border-gray-100 table-auto text-sm w-full">
-  <thead>
-    <tr>
-      <th class="bg-gray-100 border font-light p-1 text-center">Date</th>
-      <th class="bg-gray-100 border font-light p-1 text-center">Seuil</th>
-      {#if isAmountScale}
-        <th class="bg-gray-100 border font-light p-1 text-center">Montant</th>
-      {:else}
-        {#if usesBase}
-          <th class="bg-gray-100 border font-light text-center">Base</th>
-        {/if}
-        <th class="bg-gray-100 border font-light text-center">Taux</th>
-        <th class="bg-gray-100 border font-light text-center">Source</th>
-      {/if}
-    </tr>
-  </thead>
-  <tbody>
-    {#each buildInstantReferencesAndScaleArray(parameter) as { instant, references, scaleAtInstant }}
-      {#if scaleAtInstant === undefined}
-        <tr>
-          <td class="border p-1 text-center">{instant}</td>
-          <td class="border p-1 text-center" colspan={usesBase ? 3 : 2} />
-          <td class="border p-1 text-center"
-            >{#if references.length > 0}
-              <ul>
-                {#each references as { href, note, title }}
-                  <li>
-                    {#if href === undefined}{title}{:else}<a
-                        class="link"
-                        {href}
-                        target="_blank">{title ?? "source"}</a
-                      >{/if}
-                    {#if note}
-                      <p>{note}</p>
-                    {/if}
-                  </li>
-                {/each}
-              </ul>{/if}</td
+<div class="pb-5 ">
+  <h2 class="font-bold text-xl pt-7 pb-3">Historique des barèmes&nbsp;:</h2>
+  <table class="w-full border-collapse table-auto bg-gray-100 text-sm">
+    <thead>
+      <tr>
+        <th class="bg-gray-100 border font-bold p-1 text-center">Date</th>
+        <th class="bg-gray-100 border font-bold p-1 text-center">Seuil</th>
+        {#if isAmountScale}
+          <th class="bg-gray-100 border font-bold p-1 text-center">Montant</th>
+        {:else}
+          {#if usesBase}
+            <th class="bg-gray-100 border font-bold text-center">Base</th>
+          {/if}
+          <th class="bg-gray-100 border font-bold text-center">Taux</th>
+          <th class="bg-gray-100 border font-bold text-center"
+            ><!--Material UI Icon Assignment-->
+            <svg
+              class="fill-current w-4 h-4 inline-flex mr-1"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+              ><path d="M0 0h24v24H0V0z" fill="none" /><path
+                d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
+              /></svg
+            >Références législatives</th
           >
-        </tr>
-      {:else}
-        {#each scaleAtInstant as bracket, index}
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#each buildInstantReferencesAndScaleArray(parameter) as { instant, references, scaleAtInstant }}
+        {#if scaleAtInstant === undefined}
           <tr>
-            {#if index === 0}
-              <td
-                class="border p-1 text-center"
-                rowspan={Object.keys(scaleAtInstant).length}>{instant}</td
-              >
-            {/if}
-            <td class="border p-1 text-center"
-              >{bracket.threshold === "expected"
-                ? "attendu"
-                : bracket.threshold?.value ?? null}</td
+            <td class="border p-1 text-center font-serif">{instant}</td>
+            <td
+              class="border p-1 text-center font-serif"
+              colspan={usesBase ? 3 : 2}
+            />
+            <td
+              class="bg-le-gris-dispositif-ultralight border p-1 text-center text-xs font-serif"
+              >{#if references.length > 0}
+                <ul>
+                  {#each references as { href, note, title }}
+                    <li>
+                      {#if href === undefined}{title}{:else}<a
+                          class="link"
+                          {href}
+                          target="_blank">{title ?? "source"}</a
+                        >{/if}
+                      {#if note}
+                        <p>{note}</p>
+                      {/if}
+                    </li>
+                  {/each}
+                </ul>{/if}</td
             >
-            {#if isAmountScale}
-              <td class="border p-1 text-center"
-                >{asAmountBracketAtInstant(bracket).amount === "expected"
+          </tr>
+        {:else}
+          {#each scaleAtInstant as bracket, index}
+            <tr>
+              {#if index === 0}
+                <td
+                  class="border p-1 text-center font-serif"
+                  rowspan={Object.keys(scaleAtInstant).length}>{instant}</td
+                >
+              {/if}
+              <td class="border p-1 text-center font-serif"
+                >{bracket.threshold === "expected"
                   ? "attendu"
-                  : asAmountBracketAtInstant(bracket).amount?.value ?? null}</td
+                  : bracket.threshold?.value ?? null}</td
               >
-            {:else}
-              {#if usesBase}
-                <td class="border p-1 text-center"
-                  >{asRateBracketAtInstant(bracket).base === "expected"
+              {#if isAmountScale}
+                <td class="border p-1 text-center font-serif"
+                  >{asAmountBracketAtInstant(bracket).amount === "expected"
+                    ? "attendu"
+                    : asAmountBracketAtInstant(bracket).amount?.value ??
+                      null}</td
+                >
+              {:else}
+                {#if usesBase}
+                  <td class="border p-1 text-center font-serif"
+                    >{asRateBracketAtInstant(bracket).base === "expected"
+                      ? "attendu"
+                      : asRateBracketAtInstant(bracket).base?.value ?? null}</td
+                  >
+                {/if}
+                <td class="border p-1 text-center font-serif"
+                  >{asRateBracketAtInstant(bracket).rate === "expected"
                     ? "attendu"
-                    : asRateBracketAtInstant(bracket).base?.value ?? null}</td
+                    : asRateBracketAtInstant(bracket).rate?.value ?? null}</td
                 >
               {/if}
-              <td class="border p-1 text-center"
-                >{asRateBracketAtInstant(bracket).rate === "expected"
-                  ? "attendu"
-                  : asRateBracketAtInstant(bracket).rate?.value ?? null}</td
-              >
-            {/if}
-            {#if index === 0}
-              <td
-                class="border p-1 text-center"
-                rowspan={Object.keys(scaleAtInstant).length}
-                >{#if references.length > 0}
-                  <ul>
-                    {#each references as { href, note, title }}
-                      <li>
-                        {#if href === undefined}{title}{:else}<a
-                            class="link"
-                            {href}
-                            target="_blank">{title ?? "source"}</a
-                          >{/if}
-                        {#if note}
-                          <p>{note}</p>
-                        {/if}
-                      </li>
-                    {/each}
-                  </ul>{/if}</td
-              >
-            {/if}
-          </tr>
-        {/each}
-      {/if}
-    {/each}
-  </tbody>
-</table>
+              {#if index === 0}
+                <td
+                  class="bg-le-gris-dispositif-ultralight border p-1 text-center text-xs font-serif"
+                  rowspan={Object.keys(scaleAtInstant).length}
+                  >{#if references.length > 0}
+                    <ul>
+                      {#each references as { href, note, title }}
+                        <li>
+                          {#if href === undefined}{title}{:else}<a
+                              class="link"
+                              {href}
+                              target="_blank">{title ?? "source"}</a
+                            >{/if}
+                          {#if note}
+                            <p>{note}</p>
+                          {/if}
+                        </li>
+                      {/each}
+                    </ul>{/if}</td
+                >
+              {/if}
+            </tr>
+          {/each}
+        {/if}
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/src/lib/components/parameters/ValueAtInstantEdit.svelte b/src/lib/components/parameters/ValueAtInstantEdit.svelte
index 38de6674e659a96b009bb143b02ab74a87402623..d66590751a8361b938dd82b56ace4866c392f766 100644
--- a/src/lib/components/parameters/ValueAtInstantEdit.svelte
+++ b/src/lib/components/parameters/ValueAtInstantEdit.svelte
@@ -105,7 +105,7 @@
       {/if}
     {/if}
     <input
-      class=" text-black font-serif text-lg border-b border-t-0 border-l-0 border-r-0 px-2 py-0 mt-1 w-24 {valueHasChanged(
+      class=" text-black font-serif text-lg border-b border-t-0 border-l-0 border-r-0 border-gray-400 rounded-t px-2 py-0 mt-1 w-24 {valueHasChanged(
         parameter,
         oldValueAtInstant,
         valueAtInstant,
@@ -124,7 +124,7 @@
     {/if}
     <label class=" mb-2">
       <select
-        class="text-black  font-serif text-lg border-b border-t-0 border-l-0 border-r-0 px-2 py-0 mt-1 w-24  "
+        class="text-black  font-serif text-base rounded px-2 py-0 mt-1 w-24  "
         on:blur={changeUnit}
         on:change={changeUnit}
         value={asMaybeNumberValue(valueAtInstant).unit}
diff --git a/src/lib/components/parameters/ValueEdit.svelte b/src/lib/components/parameters/ValueEdit.svelte
index af786ceaecc6367c69e796171abb2e671909845d..f2510790e22a7cf30e683c8eb598b996563bc236 100644
--- a/src/lib/components/parameters/ValueEdit.svelte
+++ b/src/lib/components/parameters/ValueEdit.svelte
@@ -127,12 +127,12 @@
 </script>
 
 <div>
-  <div class="flex gap-2 bg-gray-100 rounded p-2 mb-4 px-4 my-auto">
+  <div class="flex mb-4 my-auto">
     <!--Colonne 1 présentant les valeurs-->
-    <div>
-      <dl class="flex-col mb-2 w-2/3">
+    <div class="flex-col items-center mr-2 w-2/3">
+      <div class="flex-col mb-2 ">
         {#each [...iterToLimit(iterArrayWithErrors(instantReferencesAndValueArray, errors), showAll ? null : 3)] as [{ instant, references, valueAtInstant }, error], index}
-          <div class="flex items-start">
+          <div class="flex items-start mb-4">
             <button
               class="p-1 rounded mt-4 mr-2 "
               on:click={() => deleteValueAtInstant(index)}
@@ -151,11 +151,12 @@
                 /></svg
               >
             </button>
-            <div class="flex items-start mt-2 mb-4 bg-white rounded p-2">
-              <dt class="">
-                <label class="text-sm mb-4 mt-1">
+            <div class="bg-gray-100 rounded w-full border ">
+              <div class="p-2">
+                <label class="text-base mt-1 text-gray-600">
+                  Valeur en vigueur depuis
                   <input
-                    class="rounded p-1 font-serif"
+                    class="bg-white text-sm font-bold rounded p-1 font-serif"
                     max="{new Date().getFullYear() + 20}-01-01"
                     min="1900-01-01"
                     on:change={(event) => changeInstant(index, event)}
@@ -166,8 +167,9 @@
                     <p>{error[0]}</p>
                   {/if}
                 </label>
-              </dt>
-              <dd class="ml-4 text-xs text-gray-500">
+              </div>
+
+              <div class="p-2 text-xs text-gray-500 mb-4">
                 {#if valueAtInstant !== undefined}
                   <ValueAtInstantEdit
                     errors={errorAsKeyValueDictionary(error?.[1])}
@@ -177,20 +179,22 @@
                     {valueAtInstant}
                   />
                 {/if}
+              </div>
+              <div class="text-xs text-gray-500 ">
                 <ReferencesEdit
                   errors={errorAsKeyValueDictionary(error?.[1])}
                   on:change={(event) => changeReferences(index, event)}
                   {references}
                   {showErrors}
                 />
-              </dd>
+              </div>
             </div>
           </div>
         {/each}
-      </dl>
+      </div>
       {#if instantReferencesAndValueArray.length > 3}
         <button
-          class="flex items-center text-black hover:underline px-0 rounded p-2 uppercase text-sm mb-4"
+          class="bg-gray-100 flex items-center text-black hover:bg-gray-300 px-5 py-2 shadow-md rounded ml-8 uppercase text-sm mb-4"
           on:click={() => (showAll = !showAll)}
           type="button"
         >
@@ -226,7 +230,7 @@
       {/if}
     </div>
     <!--Colonne 2 pour ajouter un paramètre ou valider les dernières valeurs-->
-    <div>
+    <div class="ml-2 w-1/3">
       <div class="my-2 flex justify-start">
         <button
           class="inline-flex items-center bg-le-gris-dispositif text-white hover:bg-le-gris-dispositif-dark shadow-md rounded p-2 uppercase text-sm"
@@ -255,12 +259,14 @@
     </div>
   </div>
 
-  <p>Configurations avancées :</p>
-  <div class="inline-flex">
-    <label class="mb-2 text-xs">
-      Type de valeur
+  <h2 class="font-bold text-xl pt-7 pb-3">
+    Modifications avancées du paramètre :
+  </h2>
+  <div class="flex-col mt-4 mb-2">
+    <label class="flex text-base">
+      Type de valeur&nbsp;:
       <select
-        class="flex rounded border-1 mx-auto text-xs "
+        class="p-1 ml-1 flex rounded border-1 mx-auto text-sm"
         required={showErrors}
         bind:value={parameter.type}
       >
@@ -277,10 +283,10 @@
     </label>
   </div>
   <div class="inline-flex">
-    <label class="mb-2 text-xs">
-      Unité de valeur par défaut
+    <label class="flex text-base">
+      Unité de valeur par défaut&nbsp;:
       <select
-        class="flex rounded border-1 mx-auto text-xs "
+        class="p-1 ml-1 flex rounded border-1 mx-auto text-sm"
         required={showErrors}
         bind:value={parameter.unit}
       >
diff --git a/src/lib/components/test_cases/RolePersonsEdit.svelte b/src/lib/components/test_cases/RolePersonsEdit.svelte
index d7cc3742d0c351fec1019bae0c8d97704b89f703..95470a5adfdcd49cec222b17b54802eed83aa719 100644
--- a/src/lib/components/test_cases/RolePersonsEdit.svelte
+++ b/src/lib/components/test_cases/RolePersonsEdit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
   import { flip } from "svelte/animate"
+  import type { DndEvent } from "svelte-dnd-action"
   import { dndzone } from "svelte-dnd-action"
 
   import type { Population } from "$lib/situations"
diff --git a/src/lib/components/test_cases/TestCaseEdit.svelte b/src/lib/components/test_cases/TestCaseEdit.svelte
index 097119e7645d931d2a6cd976d683ff0a692e6b6c..8be3a59e6e122b4b07376c320df923c9d2013920 100644
--- a/src/lib/components/test_cases/TestCaseEdit.svelte
+++ b/src/lib/components/test_cases/TestCaseEdit.svelte
@@ -38,9 +38,6 @@
   let currentInputInstantsByVariableName = inputInstantsByVariableName
   let currentSituation = situation
   const dispatch = createEventDispatcher()
-  const [, firstGroupEntity] = Object.entries(entityByKey).filter(
-    ([, entity]) => !entity.is_person,
-  )[0] as [string, GroupEntity]
   const hiddenEntitiesKeyPlural = ($session.hiddenEntitiesKeyPlural ??
     []) as string[]
   const personEntity = entityByKey[personEntityKey] as PersonEntity
@@ -247,39 +244,6 @@
     )
   }
 
-  function countAdults(situation: Situation, groupEntity: GroupEntity): number {
-    const groupById = situation[groupEntity.key_plural]
-    let adultsCount = 0
-    for (const group of Object.values(groupById)) {
-      for (const role of groupEntity.roles) {
-        if (isAdultRole(role) && !isChildRole(role)) {
-          adultsCount +=
-            (group[getRolePersonsIdKey(role)] as string[] | undefined)
-              ?.length ?? 0
-        }
-      }
-    }
-    return adultsCount
-  }
-
-  function countChildren(
-    situation: Situation,
-    groupEntity: GroupEntity,
-  ): number {
-    const groupById = situation[groupEntity.key_plural]
-    let childrenCount = 0
-    for (const group of Object.values(groupById)) {
-      for (const role of groupEntity.roles) {
-        if (isChildRole(role)) {
-          childrenCount +=
-            (group[getRolePersonsIdKey(role)] as string[] | undefined)
-              ?.length ?? 0
-        }
-      }
-    }
-    return childrenCount
-  }
-
   function countGroups(situation: Situation, groupEntity: GroupEntity): number {
     return Object.keys(situation[groupEntity.key_plural] ?? {}).length
   }
@@ -428,15 +392,16 @@
   }
 </script>
 
-<h3 class="font-bold text-xl mx-5">Composition du cas type&nbsp;:</h3>
-<section class="bg-gray-100 border-gray-200 rounded-sm mx-5 my-2 py-2">
+<h3 class="font-bold text-2xl mx-5 mt-2 mb-3">Composition du cas type</h3>
+
+<section class="bg-gray-200 border-gray-200 rounded-l ml-4 py-2">
   <div class="flex justify-center gap-2">
     <div class="flex items-center px-2">
       <PictoFemme />
       <label class="mx-2 text-sm">
-        Nombre d'adultes
+        Adultes
         <input
-          class="text-base w-10 p-1 rounded focus:border-le-bleu focus:text-le-bleu"
+          class="text-base w-10 p-1 rounded focus:border-le-gris-dispositif-dark focus:text-le-gris-dispositif-dark"
           min={1}
           on:change={changeAdultsCount}
           step="1"
@@ -448,9 +413,9 @@
     <div class="flex items-center">
       <PictoEnfant />
       <label class="mx-2 text-sm">
-        Nombre d'enfants
+        Enfants
         <input
-          class="text-base  w-10 p-1 rounded focus:border-le-bleu focus:text-le-bleu"
+          class="text-base w-10 p-1 rounded focus:border-le-gris-dispositif-dark focus:text-le-gris-dispositif-dark"
           min={0}
           on:change={changeChildrenCount}
           step="1"
@@ -465,11 +430,6 @@
     {#each [...iterGroupEntities(entityByKey)] as groupEntity}
       {#if !hiddenEntitiesKeyPlural.includes(groupEntity.key_plural)}
         <section class="m-2">
-          <h1 class="font-bold mt-4 mb-1 text-base">
-            {groupEntity.composition_label ??
-              groupEntity.label_plural ??
-              groupEntity.key_plural}&nbsp;:
-          </h1>
           <!-- {#if groupEntity.documentation !== undefined}
         <p>{groupEntity.documentation}</p>
       {/if} -->
@@ -581,12 +541,18 @@
   </div>
 </section>
 
-<section class="mt-4 mx-5">
-  <h1 class="font-bold mt-3 text-xl">Caractéristiques du cas type&nbsp;:</h1>
+<section class="mt-4 ml-4">
+  <h1 class="mt-3 text-xl">Caractéristiques&nbsp;:</h1>
+  <p class="text-sm my-2 text-gray-700 ">
+    📌 Par défaut, la situation du cas type est considérée comme stable depuis 3
+    ans.
+  </p>
   <ul>
     {#each [...variablesName] as variableName}
       {#if (inputInstantsByVariableName[variableName] ?? new Set()).has(yearString)}
-        <li>
+        <li
+          class="bg-gray-200 rounded-l flex-col items-baseline text-black text-base my-4 py-1 sm:p-1 md:p-2"
+        >
           <VariableInput
             bind:inputInstantsByVariableName
             bind:situation
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index f3d3bc0997e54d891bef8c086d8ffadfed5a18aa..9676c1aa901d2e63192eba08cee6bc04f85689e5 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -21,7 +21,7 @@
     EvaluationByName,
   } from "$lib/decompositions"
   import { waterfalls } from "$lib/decompositions"
-  import type { EditionMode } from "$lib/editions"
+  import type { DisplayMode } from "$lib/displays"
   import { entityByKey, personEntityKey } from "$lib/entities"
   import type { ParametricReform } from "$lib/reforms"
   import type { Situation, Slider } from "$lib/situations"
@@ -31,10 +31,8 @@
   } from "$lib/situations"
   import { variableSummaryByName } from "$lib/variables"
 
-  export let date: string
   export let decompositionByName: DecompositionByName
-  export let editionMode: EditionMode
-  export let open: boolean
+  export let displayMode: DisplayMode
   export let situation: Situation
   export let situationIndex: number
   export let year: number
@@ -46,6 +44,7 @@
   ) as Writable<CalculationByName>
   const childrenKey = $session.childrenKey
   const dispatch = createEventDispatcher()
+  const editTestCase = getContext("editTestCase") as Writable<boolean>
   const euroAmountFormatter = new Intl.NumberFormat("fr-FR", {
     currency: "EUR",
     maximumFractionDigits: 0,
@@ -61,7 +60,6 @@
     "parametricReform",
   ) as Writable<ParametricReform>
   let slider: Slider | undefined = situation.sliders?.[0]
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
   const waterfall = getContext("waterfall") as Writable<Waterfall>
 
   $: familySituation = situation[familyEntity.key_plural]
@@ -159,6 +157,7 @@
 
   function toggleSlider(variable: Variable) {
     if (situation.slider === undefined) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const slider = situation.sliders!.find(
         (slider) =>
           slider.entity === variable.entity && slider.name === variable.name,
@@ -201,10 +200,7 @@
 </script>
 
 <div
-  class="place-self-start shadow-md w-full rounded-t-sm bg-white mb-5 relative {$testCaseIndex ===
-  situationIndex
-    ? 'border-4 border-gray-600 rounded-md rounded-t-lg'
-    : ''}"
+  class="place-self-start shadow-md w-full rounded-t-sm bg-white mb-5 relative"
   id="situation_{situationIndex}"
 >
   <div
@@ -213,20 +209,22 @@
   >
     <div class="flex justify-between space-x-2 items-start">
       <h1 class="font-bold text-gray-600">{situation.title}</h1>
-      {#if $testCaseIndex === situationIndex}
+      {#if $editTestCase}
         <button
-          class=" bg-gray-800 p-2 rounded-md flex shrink-0 flex-nowrap text-white hover:bg-gray-500"
+          class="flex items-center hover:text-gray-900 text-gray-500"
           on:click={() => dispatch("toggleEdit")}
           title="Fermer l'édition du cas type"
         >
-          <span>Quitter l'édition</span>
+          <span class="text-xs ml-1 hover:underline uppercase"
+            >Quitter l'édition</span
+          >
           <!-- Material-icon : Close -->
           <svg
-            class="fill-current"
+            class="fill-current inline-flex"
             xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
+            height="14px"
+            viewBox="0 0 22 22"
+            width="14px"
             fill="#000000"
           >
             <path d="M0 0h24v24H0z" fill="none" />
@@ -237,22 +235,24 @@
         </button>
       {:else}
         <button
+          class="flex items-center hover:text-gray-900 text-gray-500 "
           on:click={() => dispatch("toggleEdit")}
           title="Éditer ce cas type"
           id="situation_{situationIndex}_edit"
         >
           <!-- Material-icon : Edit mode -->
           <svg
-            class="fill-current text-gray-500 hover:text-gray-900"
+            class="fill-current inline-flex "
             xmlns="http://www.w3.org/2000/svg"
-            height="18px"
+            height="14px"
             viewBox="0 0 22 22"
-            width="18px"
+            width="14px"
           >
             <path d="M0 0h24v24H0z" fill="none" /><path
               d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
             />
           </svg>
+          <span class="text-xs ml-1 hover:underline uppercase">éditer</span>
         </button>
       {/if}
     </div>
@@ -352,147 +352,172 @@
     </div>
   </div>
   <div id="situation_{situationIndex}_waterfall">
-    {#if open && variableSummaryByName !== undefined}
-      <div class="flex justify-between bg-gray-100 text-gray-500 ">
-        {#each waterfalls as { advanced: advancedOnly, icon, label, name }}
-          {#if !advancedOnly || advanced}
+    {#if variableSummaryByName !== undefined}
+      <div class="flex justify-between">
+        <!--Onglets-->
+        <div class="flex flex-col w-1/12 bg-gray-100 justify-between">
+          {#each waterfalls as { icon, label, name }}
             <button
-              class="grow py-2 uppercase text-xs tracking-wide"
+              class="flex items-center grow shadow-inner justify-around"
               class:bg-white={name === $waterfall.name}
-              class:text-le-bleu={name === $waterfall.name}
-              class:font-bold={name === $waterfall.name}
               class:border-le-bleu={name === $waterfall.name}
-              class:border-t-2={name === $waterfall.name}
+              class:border-l-4={name === $waterfall.name}
+              class:shadow-none={name === $waterfall.name}
               on:click={() => changeWaterfall(name)}
-              type="button"
-              id="situation_{situationIndex}_{label}"
             >
-              <div class="flex mx-1 justify-center">
-                {#if icon !== undefined}
-                  <img class="block mr-1" alt="Icone pour {label}" src={icon} />
-                {/if}
-                <div class="self-center">
-                  {label}
+              <div class="origin-center -rotate-90">
+                <div class="flex">
+                  <span
+                    class="uppercase text-sm tracking-wide text-gray-500 mr-2 "
+                    class:text-le-bleu={name === $waterfall.name}
+                    class:font-bold={name === $waterfall.name}
+                  >
+                    {label}
+                  </span>
+                  {#if icon !== undefined}
+                    <img
+                      class="origin-center rotate-90"
+                      alt="Icone pour {label}"
+                      src={icon}
+                    />
+                  {/if}
                 </div>
               </div>
             </button>
-          {/if}
-        {/each}
-      </div>
+          {/each}
+        </div>
+        <!--Impacts et waterfall-->
+        <div class="h-[calc(100vh-18rem)] overflow-y-auto w-11/12 px-3">
+          <div class="p-3 border-b flex-col">
+            <div class="flex justify-between gap-4">
+              <div class="flex-col w-1/2 mb-4 text-gray-700">
+                <p class="text-sm font-medium mb-1 ">
+                  {$waterfall.totalLabel}&nbsp;:
+                </p>
+                <div
+                  class="flex items-center"
+                  title="⚠️ Les dispositifs n'étant pas tous à jour, cette somme est à considérer avec prudence."
+                >
+                  <p class="text-2xl">
+                    <ValueChange
+                      unit={Unit.CurrencyEUR}
+                      valueByCalculationName={{
+                        amendment:
+                          Object.keys($parametricReform).length === 0
+                            ? undefined
+                            : calculateTotal(
+                                $evaluationByNameArray[situationIndex],
+                                "amendment",
+                                $waterfall.root,
+                                $waterfall.total,
+                              ),
+                        bill:
+                          $billName === undefined
+                            ? undefined
+                            : calculateTotal(
+                                $evaluationByNameArray[situationIndex],
+                                "bill",
+                                $waterfall.root,
+                                $waterfall.total,
+                              ),
+                        law: calculateTotal(
+                          $evaluationByNameArray[situationIndex],
+                          "law",
+                          $waterfall.root,
+                          $waterfall.total,
+                        ),
+                      }}
+                    />
+                  </p>
 
-      <WaterfallView
-        {date}
-        {decompositionByName}
-        {editionMode}
-        {evaluationByName}
-        on:changeDecompositionByName
-        {situation}
-        {situationIndex}
-        {variableSummaryByName}
-        {year}
-      />
+                  <svg
+                    aria-hidden="true"
+                    class="fill-current h-5 w-5 text-white mx-1 "
+                    viewBox="0 0 24 22"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      class="text-[#FFAC33]"
+                      d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+                    />
+                    <path
+                      d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
+                    />
+                    <path
+                      d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <!-- <div class="flex-col w-1/2 text-gray-500 text-sm mt-8">
+                <p>
+                  dont <span class="font-bold text-black">100 €</span> de compléments
+                  de ressources.
+                </p>
+                <p>
+                  dont <span class="font-bold text-black">200 €</span> de prélèvements
+                  obligatoires.
+                </p>
+              </div> -->
+            </div>
+            {#if displayMode.parametersVariableName !== undefined && decompositionByName[displayMode.parametersVariableName] !== undefined}
+              <div class="flex justify-between gap-4">
+                <div class="flex-col w-1/2">
+                  <p class="text-lg font-black mb-2">
+                    {decompositionByName[displayMode.parametersVariableName]
+                      .ux_name ??
+                      decompositionByName[displayMode.parametersVariableName]
+                        .label ??
+                      displayMode.parametersVariableName}
+                  </p>
+                  <p class="text-2xl font-semibold">
+                    <ValueChange
+                      unit={Unit.CurrencyEUR}
+                      valueByCalculationName={{
+                        amendment:
+                          Object.keys($parametricReform).length === 0
+                            ? undefined
+                            : evaluationByName[
+                                displayMode.parametersVariableName
+                              ]?.calculationEvaluationByName["amendment"]
+                                ?.deltaAtVectorIndex ?? 0,
+                        bill:
+                          $billName === undefined
+                            ? undefined
+                            : evaluationByName[
+                                displayMode.parametersVariableName
+                              ]?.calculationEvaluationByName["bill"]
+                                ?.deltaAtVectorIndex ?? 0,
+                        law:
+                          evaluationByName[displayMode.parametersVariableName]
+                            ?.calculationEvaluationByName["law"]
+                            ?.deltaAtVectorIndex ?? 0,
+                      }}
+                    />
+                  </p>
+                </div>
+                <!-- <div class="flex-col w-1/2">
+              <p class="text-gray-500 font-bold ">Détail dispositif</p>
+              <p class="text-base">1000 €</p>
+              <p class="text-gray-500 font-bold ">Détail dispositif</p>
+              <p class="text-base">1000 €</p>
+            </div> -->
+              </div>
+            {/if}
+          </div>
 
-      <button
-        class="bg-white shadow w-full font-bold hover:bg-white px-10 rounded-b p-1 uppercase text-xs"
-        on:click={() => (open = !open)}
-      >
-        <svg
-          class="w-full fill-current text-center"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          ><path d="M0 0h24v24H0z" fill="none" /><path
-            d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
-          /></svg
-        >
-      </button>
-    {:else}
-      <button
-        class="bg-white shadow-inner  w-full p-2 font-bold hover:bg-white px-10 rounded-b  uppercase text-xs "
-        id="situation_{situationIndex}_toggle"
-        on:click={() => (open = !open)}>Voir la décomposition</button
-      >
-    {/if}
-  </div>
-  <div
-    class="px-4 py-2 bg-gray-100 grid grid-flow-col grid-cols-{waterfalls.length} grid-rows-3 gap-x-4 relative"
-    id="situation_{situationIndex}_totalimpact"
-  >
-    {#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || calculation.situationIndex === situationIndex)).length > 0}
-      <div class="absolute inset-0 bg-le-jaune bg-opacity-20 z-50">
-        <Spinner />
-      </div>
-    {/if}
-    {#each waterfalls as { icon, label, root, total, totalLabel }}
-      <div class="place-self-center">
-        {#if icon !== undefined}
-          <img class="block" alt="Icone pour {label}" src={icon} />
-        {/if}
-      </div>
-      <p class="text-sm leading-none text-center">
-        {totalLabel}
-      </p>
-      <div
-        class="place-self-center flex"
-        title="⚠️ Les dispositifs n'étant pas tous à jour, cette somme est à considérer avec prudence."
-      >
-        <div class="place-self-center">
-          <svg
-            aria-hidden="true"
-            class="fill-current h-5 w-5 text-white mx-1 "
-            viewBox="0 0 24 22"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              class="text-[#FFAC33]"
-              d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-            />
-            <path
-              d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-            />
-            <path
-              d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-            />
-          </svg>
-        </div>
-        <div>
-          <p
-            class="font-bold text-2xl"
-            title="⚠️ Les dispositifs n'étant pas tous à jour, ce montant est à considérer avec prudence."
-          >
-            <ValueChange
-              unit={Unit.CurrencyEUR}
-              valueByCalculationName={{
-                amendment:
-                  Object.keys($parametricReform).length === 0
-                    ? undefined
-                    : calculateTotal(
-                        $evaluationByNameArray[situationIndex],
-                        "amendment",
-                        root,
-                        total,
-                      ),
-                bill:
-                  $billName === undefined
-                    ? undefined
-                    : calculateTotal(
-                        $evaluationByNameArray[situationIndex],
-                        "bill",
-                        root,
-                        total,
-                      ),
-                law: calculateTotal(
-                  $evaluationByNameArray[situationIndex],
-                  "law",
-                  root,
-                  total,
-                ),
-              }}
-            />
-          </p>
+          <WaterfallView
+            {decompositionByName}
+            {displayMode}
+            {evaluationByName}
+            on:changeDecompositionByName
+            {situation}
+            {situationIndex}
+            {variableSummaryByName}
+            {year}
+          />
         </div>
       </div>
-    {/each}
+    {/if}
   </div>
 </div>
diff --git a/src/lib/components/test_cases/TestCasesPane.svelte b/src/lib/components/test_cases/TestCasesPane.svelte
deleted file mode 100644
index a48c96e19e39264e7bb6a86919af393b78fb99cb..0000000000000000000000000000000000000000
--- a/src/lib/components/test_cases/TestCasesPane.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, getContext } from "svelte"
-  import type { Writable } from "svelte/store"
-
-  import type { DecompositionByName } from "$lib/decompositions"
-  import type { EditionMode } from "$lib/editions"
-  import type { Situation } from "$lib/situations"
-
-  import TestCaseView from "./TestCaseView.svelte"
-
-  export let date: string
-  export let editionMode: EditionMode
-  export let year: number
-
-  const decompositionByName = getContext(
-    "decompositionByName",
-  ) as Writable<DecompositionByName>
-  const dispatch = createEventDispatcher()
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
-  const testCases = getContext("testCases") as Writable<Situation[]>
-
-  function changeDecompositionByName(
-    situationIndex: number,
-    newDecompositionByName: DecompositionByName,
-  ): void {
-    $decompositionByName = newDecompositionByName
-  }
-
-  function changeSituation(situationIndex: number, situation: Situation): void {
-    const situations = [...$testCases]
-    situations[situationIndex] = situation
-    $testCases = situations
-  }
-</script>
-
-<section class="grid grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3 gap-10">
-  {#each $testCases as situation, situationIndex}
-    <TestCaseView
-      {date}
-      decompositionByName={$decompositionByName}
-      {editionMode}
-      on:changeDecompositionByName={({ detail }) =>
-        changeDecompositionByName(situationIndex, detail)}
-      on:changeSituation={({ detail }) =>
-        changeSituation(situationIndex, detail)}
-      on:toggleEdit={() =>
-        dispatch(
-          "editSituation",
-          $testCaseIndex === situationIndex ? null : situationIndex,
-        )}
-      open={situationIndex === 0}
-      {situation}
-      {situationIndex}
-      {year}
-    />
-  {/each}
-</section>
diff --git a/src/lib/components/tutorial/StartTutorial.svelte b/src/lib/components/tutorial/StartTutorial.svelte
index c37857583b687c63608e83d2d66bf599edb8db16..b19c9398f1ba6c8bf11d24ae0b1c8a129bfcb375 100644
--- a/src/lib/components/tutorial/StartTutorial.svelte
+++ b/src/lib/components/tutorial/StartTutorial.svelte
@@ -1,4 +1,29 @@
-<div class="bg-white border-le-bleu-light border-4 shadow-lg rounded-md  mx-5">
+<script lang="ts">
+  import type { VariableByName } from "@openfisca/json-model"
+  import { iterParameterAncestors, walkParameters } from "@openfisca/json-model"
+  import Fuse from "fuse.js"
+
+  import type { DisplayMode } from "$lib/displays"
+  import { newSimulationUrl } from "$lib/urls"
+  import { variableSummaryByName } from "$lib/variables"
+
+  export let displayMode: DisplayMode
+
+  let term = ""
+  const variables = Object.values(variableSummaryByName)
+  const fuse = new Fuse(variables, {
+    keys: ["ux_name", "label", "name"],
+  })
+
+  $: found = fuse.search(term, { limit: 50 })
+
+  function onInput(event: Event) {
+    const target = event.target as HTMLInputElement
+    term = target.value
+  }
+</script>
+
+<!--<div class=" bg-white border-le-bleu-light border-4 shadow-lg rounded-md mx-5">
   <h1 class="bg-le-bleu-light text-2xl font-light text-gray-600 py-3 px-4 ">
     Modifier la loi en vigueur
   </h1>
@@ -7,3 +32,92 @@
     droite et cliquez sur le nom d'un dispositif.
   </p>
 </div>
+
+-->
+
+<!--Searchbar -->
+<div class="mx-5">
+  <label class="uppercase" for="variables_search">Choisir un dispositif :</label
+  >
+  <div
+    class="mt-2 bg-gray-100 p-1 flex justify-between w-full text-gray-400 focus-within:text-gray-900 items-center rounded-t-md shadow-inner-md border-b hover:border-black "
+  >
+    <div class="pointer-events-none justify-start">
+      <svg
+        class="m-1 fill-current inline-flex text-black"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="18"
+        height="18"
+        ><path fill="none" d="M0 0h24v24H0z" /><path
+          d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"
+        /></svg
+      >
+    </div>
+    <input
+      class="text-sm bg-gray-100 text-gray-900 w-full focus:outline-none placeholder:font-light"
+      id="variables_search"
+      on:input={onInput}
+      placeholder="impôt sur le revenu, CSG, ..."
+      type="search"
+    />
+  </div>
+
+  {#if found.length > 0}
+    <ul
+      class="text-le-gris-dispositif list-disc list-inside mt-4 h-[calc(100vh-17rem)] overflow-y-auto"
+    >
+      {#each found as { item: variable }, index (`found_variable_$${index}`)}
+        <li>
+          <a
+            class="link text-le-gris-dispositif-dark"
+            href={newSimulationUrl({
+              ...displayMode,
+              parameterName: undefined,
+              parametersVariableName: variable.name,
+            })}
+            >{variable.label ?? variable.name}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {:else}
+    <!-- <h3 class="mb-2 mt-6 text-sm text-gray-600">
+    Dispositifs modifiés par le PLF 2022 :
+  </h3> -->
+    <div class="flex flex-wrap text-black mt-6 ">
+      <a
+        class="bg-le-gris-dispositif-light px-3 py-1 rounded-full border-4 border-white hover:bg-le-gris-dispositif hover:bg-opacity-60"
+        href="/?parameters=csg_deductible_salaire"
+      >
+        <span>CSG déductible</span>
+      </a>
+      <a
+        class="bg-le-gris-dispositif-light px-3 py-1 rounded-full border-4 border-white hover:bg-le-gris-dispositif hover:bg-opacity-60"
+        href="/?parameters=csg_imposable_salaire"
+      >
+        <span>CSG imposable</span>
+      </a>
+
+      <a
+        class="bg-le-gris-dispositif-light px-3 py-1 rounded-full border-4 border-white hover:bg-le-gris-dispositif hover:bg-opacity-60"
+        href="/?parameters=irpp_economique"
+      >
+        <span>Impôt sur le revenu</span>
+      </a>
+
+      <a
+        class="bg-le-gris-dispositif-light px-3 py-1 rounded-full border-4 border-white hover:bg-le-gris-dispositif hover:bg-opacity-60"
+        href="/?parameters=cotisations_employeur"
+      >
+        <span>Cotisations&nbsp;employeur</span>
+      </a>
+      <a
+        class="bg-le-gris-dispositif-light px-3 py-1 rounded-full border-4 border-white hover:bg-le-gris-dispositif hover:bg-opacity-60"
+        href="/?parameters=aah"
+      >
+        <span>AAH</span>
+      </a>
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/variables/FormulaView.svelte b/src/lib/components/variables/FormulaView.svelte
index d64937736a738317d7286790e88e4ccb4331c579..0e2fa052321b75eceb7ce721ce829ab20bd830e5 100644
--- a/src/lib/components/variables/FormulaView.svelte
+++ b/src/lib/components/variables/FormulaView.svelte
@@ -81,25 +81,38 @@
 </script>
 
 {#if formula.documentation !== undefined}
-  <div class="whitespace-pre-line">
+  <div class="">
     {formula.documentation.replace(/^\n+/, "").replace(/\n+$/, "")}
   </div>
 {/if}
 
-<div class="rounded bg-gray-100 p-4">
-  <pre
-    class="bg-gray-100 p-5 overflow-x-auto text-sm">{formula.source_code}</pre>
-</div>
-<p class="my-4">
+<div class="text-sm rounded bg-gray-100 p-5">
+  <p class="tracking-wider break-all whitespace-pre-wrap overflow-x-auto mb-4">
+    {formula.source_code}
+  </p>
   <a
-    class="text-gray-900 hover:text-le-bleu text-xs underline"
+    class="break-all text-gray-900 hover:text-le-bleu underline "
     href={newFormulaRepositoryUrl(metadata, formula)}
-    target="_blank">Lien vers la page de la formule OpenFisca sur Github</a
+    target="_blank"
+  >
+    <svg
+      class="inline h-5 w-5 fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      ><path fill="none" d="M0 0h24v24H0z" /><path
+        d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
+      /></svg
+    >
+    Formule OpenFisca sur Github</a
   >
-</p>
+</div>
 
-<h2 class="pb-2">Variables et paramètres présents dans la formule&nbsp;:</h2>
-<div class="text-sm border-t-0 border-b-0 border-r-0 border-l-4 px-8">
+<h2 class="font-bold text-xl mt-7">
+  Variables et paramètres inscrits dans la formule&nbsp;:
+</h2>
+<div class="flex-col text-sm px-5">
   <!-- {#if formula.parameters !== undefined}
     <section>
       <h1>Paramètres référencés</h1>
@@ -114,14 +127,14 @@
       </ul>
     </section>
   {/if} -->
+  <h3 class="mb-2 font-bold text-lg mt-7 text-gray-600">Paramètres&nbsp;:</h3>
   {#if extraction.openFiscaParametersName.size > 0}
-    <section class="mb-2">
-      <h3 class="mb-1 ">Paramètres&nbsp;:</h3>
+    <div class="overflow-x-auto">
       <ul class="list-disc list-inside">
         {#each [...extraction.openFiscaParametersName].sort() as parameterName}
-          <li>
+          <li class="">
             <a
-              class="text-gray-900 hover:text-le-bleu  underline"
+              class="break-all text-gray-900 hover:text-le-bleu underline"
               href="/parameters/{parameterName}"
               >{#if parameterName === ""}<i>Paramètre racine</i
                 >{:else}{parameterName}{/if}</a
@@ -129,26 +142,30 @@
           </li>
         {/each}
       </ul>
-    </section>
+    </div>
+  {:else}
+    <p class="text-base">
+      Aucun paramètre inscrit directement dans la formule.
+    </p>
   {/if}
   {#if extraction.decomposition !== undefined}
-    <section class="mb-2">
-      <h3 class="mb-1  ">Décomposition&nbsp;:</h3>
-      <ul class="list-disc list-inside">
-        {#each extraction.decomposition as variableReference}
-          <li>
-            <a
-              class="text-gray-900 hover:text-le-bleu  underline"
-              href="/variables/{variableReference.name}"
-              >{variableReference.name}</a
-            >
-          </li>
-        {/each}
-      </ul>
-    </section>
+    <h3 class="mb-2 font-bold text-lg mt-7 text-gray-600">
+      Décomposition&nbsp;:
+    </h3>
+    <ul class="list-disc list-inside">
+      {#each extraction.decomposition as variableReference}
+        <li class="">
+          <a
+            class="break-all text-gray-900 hover:text-le-bleu  underline"
+            href="/variables/{variableReference.name}"
+            >{variableReference.name}</a
+          >
+        </li>
+      {/each}
+    </ul>
   {/if}
   <!-- {#if formula.variables !== undefined}
-    <section>
+
       <h1>Variables référencées</h1>
       <ul class="list-disc list-inside">
         {#each formula.variables as variableName}
@@ -159,25 +176,27 @@
           </li>
         {/each}
       </ul>
-    </section>
+
   {/if} -->
   {#if openFiscaVariables.length > 0}
-    <section class="mb-2">
-      <h3 class="mb-1  ">Variables&nbsp;:</h3>
-      <ul>
-        {#each openFiscaVariables as variable}
-          <li>
-            <VariableInput
-              bind:inputInstantsByVariableName
-              bind:situation
-              {situationIndex}
-              bind:valuesByCalculationNameByVariableName
-              {variable}
-              {year}
-            />
-          </li>
-        {/each}
-      </ul>
-    </section>
+    <h3 class="mb-2 font-bold text-lg mt-7 text-gray-600">
+      Variables utilisées par le cas type&nbsp;:
+    </h3>
+    <ul class="">
+      {#each openFiscaVariables as variable}
+        <li
+          class="overflow-x-auto break-all bg-gray-100 border-t-2 rounded-b mb-4 flex-col items-baseline text-black text-base my-2 py-1 px-2"
+        >
+          <VariableInput
+            bind:inputInstantsByVariableName
+            bind:situation
+            {situationIndex}
+            bind:valuesByCalculationNameByVariableName
+            {variable}
+            {year}
+          />
+        </li>
+      {/each}
+    </ul>
   {/if}
 </div>
diff --git a/src/lib/components/variables/NonVariableReferredParameter.svelte b/src/lib/components/variables/NonVariableReferredParameter.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..36b0c939a8ff390f86e0f20585584f1da914734a
--- /dev/null
+++ b/src/lib/components/variables/NonVariableReferredParameter.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type {
+    NodeParameter,
+    Parameter,
+    ScaleParameter,
+    ValueParameter,
+  } from "@openfisca/json-model"
+  import { ParameterClass } from "@openfisca/json-model"
+  import { getContext } from "svelte"
+  import type { Writable } from "svelte/store"
+
+  import {
+    getParameter,
+    rootParameter,
+    rootParameterByReformName,
+  } from "$lib/parameters"
+
+  import VariableReferredNodeParameter from "./VariableReferredNodeParameter.svelte"
+  import VariableReferredScaleParameter from "./VariableReferredScaleParameter.svelte"
+  import VariableReferredValueParameter from "./VariableReferredValueParameter.svelte"
+
+  export let date: string
+  /// Parameter name
+  export let name: string
+
+  const billName = getContext("billName") as Writable<string | undefined>
+
+  // Note: A reform parameters tree is always more complete than a parameters tree before reform.
+  // And the children of a reform node parameter always contain the children of the node parameter
+  // before reform (albeit with some different value parameters).
+  $: billRootParameter = rootParameterByReformName[$billName] ?? rootParameter
+
+  $: billParameter = getParameter(billRootParameter, name)
+
+  $: lawParameter = getParameter(rootParameter, name)
+
+  function asNodeParameter(
+    parameter: Parameter | undefined,
+  ): NodeParameter | undefined {
+    return parameter as NodeParameter | undefined
+  }
+
+  function asScaleParameter(
+    parameter: Parameter | undefined,
+  ): ScaleParameter | undefined {
+    return parameter as ScaleParameter | undefined
+  }
+
+  function asValueParameter(
+    parameter: Parameter | undefined,
+  ): ValueParameter | undefined {
+    return parameter as ValueParameter | undefined
+  }
+</script>
+
+<section class="pb-3 mb-3 ml-2">
+  {#if billParameter.class === ParameterClass.Node}
+    <VariableReferredNodeParameter
+      billParameter={asNodeParameter(billParameter)}
+      bothFilteredParameter={asNodeParameter(billParameter)}
+      {date}
+      depth={0}
+      lawParameter={asNodeParameter(lawParameter)}
+    />
+  {:else if billParameter.class === ParameterClass.Value}
+    <VariableReferredValueParameter
+      billParameter={asValueParameter(billParameter)}
+      {date}
+      depth={0}
+      lawParameter={asValueParameter(lawParameter)}
+    />
+  {:else if billParameter.class === ParameterClass.Scale}
+    <VariableReferredScaleParameter
+      billParameter={asScaleParameter(billParameter)}
+      {date}
+      depth={0}
+      lawParameter={asScaleParameter(lawParameter)}
+    />
+  {/if}
+</section>
diff --git a/src/lib/components/variables/VariableHeader.svelte b/src/lib/components/variables/VariableHeader.svelte
index 83578ac18c9c409feb1e4075db0053ac3c6a27d8..da278c8b0d373cdeb04c0f90a6241a4bfee7c36c 100644
--- a/src/lib/components/variables/VariableHeader.svelte
+++ b/src/lib/components/variables/VariableHeader.svelte
@@ -10,7 +10,7 @@
   export let variable: Variable | undefined
 
   const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
+  const testCaseIndex = getContext("testCaseIndex") as Writable<number>
 
   $: lastReview = decomposition?.last_review ?? variable?.last_review
 
@@ -23,69 +23,41 @@
 </script>
 
 <!-- For a variable, the header of the reform area. -->
-<div class="bg-le-gris-dispositif-light px-5 py-2 shadow-inner rounded-r">
+<div class="mr-5 pb-2 rounded-r">
   <h1 class="text-2xl font-serif font-light">
-    {decomposition?.label ?? variable?.label ?? variableName}
-  </h1>
-  {#if variable?.input || latestFormulaDate === null}
-    <a
-      class="underline text-gray-500 hover:text-le-bleu text-xs"
-      href="/variables/{variableName}">En savoir plus sur le dispositif</a
-    >
-    <div
-      class="bg-white bg-opacity-40 rounded-sm flex-col text-base my-2 p-2 sm:p-1 md:p-2"
-    >
-      <p>
-        Pour paramétrer la valeur de ce dispositif, il vous faut intervenir
-        directement sur le cas type :
-      </p>
-      <div
-        class="bg-white flex justify-center text-gray-900 shadow-md hover:bg-gray-400 px-5 mt-4 mx-2 mb-2 rounded p-2 uppercase text-sm"
-      >
+    <span>
+      {decomposition?.label ?? variable?.label ?? variableName}
+
+      {#if obsolete || lastReview === undefined || lastReview < "2020"}
         <a
-          class="text-center "
-          href="/?action={encodeURIComponent(
-            `situations/${
-              $testCaseIndex ?? 0
-            }/variables/${variableName}/inputs`,
-          )}"
-          sveltekit:noscroll>Configurer cette variable<br />dans le cas type</a
+          title="Ce dispositif n'est peut-être pas à jour. Voir la formule."
+          class="text-black font-bold hover:text-le-bleu italic"
+          href="/variables/{variableName}"
         >
-      </div>
-    </div>
-  {:else}
-    <div
-      class="bg-white bg-opacity-40 rounded-sm flex text-xs my-2 p-2 sm:p-1 md:p-2"
-    >
-      {#if obsolete || lastReview === undefined || lastReview < "2020"}
-        <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
-        <div>
+          <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
           <svg
             aria-hidden="true"
-            class="block h-10 w-10 text-white pl-2"
+            class={obsolete
+              ? "h-7 w-7 inline-flex fill-current text-[#FF4133]"
+              : "h-7 w-7 inline-flex fill-current text-[#FFAC33]"}
             viewBox="0 0 24 22"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-              fill={obsolete ? "#FF4133" : "#FFAC33"}
-            />
-            <path
-              d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-              fill="white"
-            />
-            <path
-              d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-              fill="white"
             />
           </svg>
-        </div>
+        </a>
       {:else}
-        <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
-        <div>
+        <a
+          title="Ce dispositif est à jour. Voir la formule."
+          class="text-black font-bold hover:text-le-bleu italic"
+          href="/variables/{variableName}"
+        >
+          <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
           <svg
             aria-hidden="true"
-            class="block h-10 w-10 text-white pl-2 "
+            class="h-7 w-7 text-white inline-flex"
             viewBox="0 0 24 23"
             xmlns="http://www.w3.org/2000/svg"
           >
@@ -98,36 +70,45 @@
               fill="white"
             />
           </svg>
-        </div>
+          f
+        </a>
       {/if}
-      <div class="ml-4">
-        {#if obsolete}
-          <p class="text-red-600 font-bold">Ce dispositif est obsolète.</p>
-        {:else if lastReview === undefined || lastReview < "2020"}
-          <p class="text-amber-600 font-bold">
-            Ce dispositif n'est peut-être pas à jour.
-          </p>
-        {:else}
-          <p class="text-le-vert-validation-dark font-bold">
-            Ce dispositif est à jour !
-          </p>
-        {/if}
-        <p class="text-black">
-          La dernière formule permettant de chiffrer ce dispositif sur Leximpact
-          {#if latestFormulaDate === "0001-01-01"}
-            <b>n'est pas datée</b>.
-          {:else}
-            date de
-            <b>{latestFormulaDate.split("-")[0]}</b>.
-          {/if}
-        </p>
-
-        <div class="text-xs">
-          <a
-            class="underline text-gray-500 hover:text-le-bleu"
-            href="/variables/{variableName}">En savoir plus sur la formule</a
-          >
-        </div>
+      <!-- <a
+        title="Ce dispositif est à jour. Voir la formule."
+        class="ml-2 text-le-gris-dispositif-dark text-base hover:text-le-bleu italic"
+        href="todo"
+      >
+        Mémo
+       Remix Icon - file-list-3-line 
+        <svg
+          aria-hidden="true"
+          class="h-5 w-5 fill-current inline-flex "
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" /><path
+            d="M19 22H5a3 3 0 0 1-3-3V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12h4v4a3 3 0 0 1-3 3zm-1-5v2a1 1 0 0 0 2 0v-2h-2zm-2 3V4H4v15a1 1 0 0 0 1 1h11zM6 7h8v2H6V7zm0 4h8v2H6v-2zm0 4h5v2H6v-2z"
+          /></svg
+        >
+      </a> -->
+    </span>
+  </h1>
+  {#if variable?.input || latestFormulaDate === null}
+    <div
+      class="bg-white bg-opacity-40 rounded-sm flex-col text-base my-2 p-2 sm:p-1 md:p-2"
+    >
+      <div
+        class="bg-gray-200 flex justify-center text-gray-900 shadow-md hover:bg-gray-400 mt-4 mb-2 rounded p-2 uppercase text-sm"
+      >
+        <a
+          class="text-center "
+          href="/?action={encodeURIComponent(
+            `situations/${
+              $testCaseIndex ?? 0
+            }/variables/${variableName}/inputs`,
+          )}"
+          sveltekit:noscroll>Configurer cette variable<br />dans le cas type</a
+        >
       </div>
     </div>
   {/if}
@@ -137,25 +118,23 @@
   <!--Add variable references as described in openfisca references + decomposition customization and order them by date. -->
   {#each Object.entries(variable.reference).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
     {#each references as { href, note, title }}
-      <article class="px-3 m-2 mr-4">
+      <article class=" mr-4">
         {#if note !== undefined}
-          <div
-            class="text-sm text-gray-600 text-justify border-l-2 border-le-gris-dispositif-light pl-2 mb-4 leading-normal"
-          >
+          <div class="text-sm text-black mb-4 leading-normal font-serif">
             <p class="break-words">
               {note}
             </p>
           </div>
         {/if}
         {#if instant !== "0001-01-01"}
-          <footer class="text-xs text-gray-500 text-right mb-6">
+          <footer class="text-xs text-black text-right mb-6">
             {#if href === undefined}
               {#if title !== undefined}
                 <span>{title}</span>
               {/if}
             {:else}
               <a
-                class="link text-gray-500 hover:text-le-bleu"
+                class="link text-black hover:text-le-bleu"
                 {href}
                 target="_blank"
                 ><span class="underline">{title ?? href}</span>
diff --git a/src/lib/components/variables/VariableInput.svelte b/src/lib/components/variables/VariableInput.svelte
index 657ca7a99ad7e3f00f1f73f464b39bafd3400be5..801f8d7e954dc016bc7d01bd6ed9aa4e81f893c8 100644
--- a/src/lib/components/variables/VariableInput.svelte
+++ b/src/lib/components/variables/VariableInput.svelte
@@ -142,6 +142,7 @@
 
   function toggleSlider(variable: Variable): void {
     if (situation.slider === undefined) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const slider = situation.sliders!.find(
         (slider) =>
           slider.entity === variable.entity && slider.name === variable.name,
@@ -183,32 +184,43 @@
 </script>
 
 <section>
-  <div
-    class="bg-gray-100 rounded flex-col items-baseline text-black text-base my-2 py-2 sm:p-1 md:p-2"
-  >
+  <div class="">
     <div class="flex items-start justify-between">
-      <h1 class="w-3/5 py-1 text-base">
+      <h1 class="w-4/5 text-base font-bold">
         {variable.label ?? variable.name}
       </h1>
       <a
-        class="mx-1 py-1 underline hover:text-le-bleu bg text-gray-600 text-sm pl-5"
-        href="/variables/{variable.name}">Source</a
+        class=" underline text-gray-400 hover:text-gray-600 mr-1"
+        href="/variables/{variable.name}"
       >
+        <!--RemixIcon Information-line -->
+
+        <svg
+          class="fill-current h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="24"
+          height="24"
+          ><path fill="none" d="M0 0h24v24H0z" /><path
+            d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"
+          /></svg
+        >
+      </a>
       {#if variable.documentation !== undefined}
         <div>{variable.documentation}</div>
       {/if}
     </div>
-    <div class="flex items-center">
-      <ul>
+    <div>
+      <div class="grid grid-cols-2 gap-x-4 gap-y-2 mt-2">
         {#each Object.entries(entitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
-          <li>
-            <p class="text-xs text-gray-500">
+          <div>
+            <p class="text-xs text-gray-600">
               {population.name ?? populationId}
             </p>
             {#if isInput}
               {#if variable.possible_values !== undefined}
                 <select
-                  class="w-44 p-1 pr-2 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
+                  class="bg-gray-100 w-44 p-1 pr-2 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
                   on:blur={(event) => changeValue(event, populationId)}
                   on:change={(event) => changeValue(event, populationId)}
                   value={getSituationVariableValue(
@@ -241,7 +253,7 @@
                 </label>
               {:else if variable.value_type === "date"}
                 <input
-                  class="w-44 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
+                  class="bg-gray-100 w-44 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
                   on:change={(event) => changeValue(event, populationId)}
                   type="date"
                   value={asString(
@@ -256,7 +268,7 @@
               {:else if ["float", "int"].includes(variable.value_type)}
                 {#if situation.slider !== undefined && situation.slider.entity === variable.entity && situation.slider.id === populationId && situation.slider.name === variable.name}
                   <input
-                    class="w-24 p-1 rounded my-1"
+                    class="bg-gray-100 w-24 p-1 rounded my-1"
                     disabled
                     type="number"
                     value={asNumber(
@@ -270,7 +282,7 @@
                   />
                 {:else}
                   <input
-                    class="w-24 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
+                    class="bg-gray-100 w-24 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
                     on:change={(event) => changeValue(event, populationId)}
                     type="number"
                     value={asNumber(
@@ -309,7 +321,7 @@
                 {/if}
               {:else}
                 <input
-                  class="w-24 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
+                  class="bg-gray-100 w-24 p-1 rounded my-1 focus:border-le-bleu focus:text-le-bleu"
                   on:change={(event) => changeValue(event, populationId)}
                   type="text"
                   value={asString(
@@ -336,9 +348,9 @@
                 )}
               />
             {/if}
-          </li>
+          </div>
         {/each}
-      </ul>
+      </div>
     </div>
   </div>
 </section>
diff --git a/src/lib/components/variables/VariableReferredInputs.svelte b/src/lib/components/variables/VariableReferredInputs.svelte
index 6086993f46ea54b6ba1e1ba41c0dc698d9f2a85f..0322c9dac652333ee2a63562be1c29c15e36e120 100644
--- a/src/lib/components/variables/VariableReferredInputs.svelte
+++ b/src/lib/components/variables/VariableReferredInputs.svelte
@@ -31,48 +31,38 @@
   $: openAllInputs = directInputs.length === 0
 </script>
 
-<h2 class="font-bold text-xl pt-3 pb-2 mx-5">
-  Définir d'autres caractéristiques <br />
-  influentes sur :
+<h2 class="text-xl pt-3 ml-4 mb-2">
+  Ajouter des caractéristiques <br />ayant une influence sur :
 </h2>
 
-<h1
-  class="bg-le-gris-dispositif-light font-serif text-center mb-3 p-2 rounded-r mr-5 text-lg"
+<div
+  class="flex justify-between items-center ml-4 border-l-2 pl-2 border-white"
 >
-  <p class="font-medium">{variable.label ?? variable.name}</p>
+  <span class=" font-serif font-bold text-lg"
+    >{variable.ux_name ?? variable.label ?? variable.name}</span
+  >
   <a
-    class="mx-1 py-1 underline hover:text-le-bleu bg text-gray-600 text-sm pl-5"
-    href="/variables/{variable.name}">Source</a
+    class=" underline text-gray-500 hover:text-gray-700 mr-3 "
+    href="/variables/{variable.name}"
   >
-</h1>
-
-<div class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-5">
-  <p class="px-2 pb-1">
-    <span class="font-bold"
-      >Vous avez besoin de configurer plus précisemment votre cas type ?</span
+    <!--RemixIcon More-2-fill -->
+    <svg
+      class="fill-current"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      ><path fill="none" d="M0 0h24v24H0z" /><path
+        d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+      /></svg
     >
-    Contactez-nous sur
-    <a class="underline hover:text-le-bleu" href="mailto:leximpact@an.fr"
-      >leximpact@an.fr</a
-    >.
-  </p>
-  <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded">
-    <p>
-      ⚠️ Le mode d'édition avancée est fonctionnel mais encore difficile
-      d'accès. Si vous avez besoin d'utiliser votre cas type dans un amendement,
-      nous vous proposons une relecture.
-    </p>
-    <p class="mt-2">
-      Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager dans la partie
-      supérieure droite de l'écran et transmettez-nous le lien de votre copie de
-      travail ainsi qu'un résumé du cas type que vous cherchez à concevoir.
-    </p>
-  </div>
+  </a>
 </div>
+
 {#if directInputs.length > 0}
   <section class="pb-3 mb-3 mr-5">
     <h2
-      class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
+      class="bg-gray-400 text-white flex justify-between py-1 ml-4 px-3 my-4 rounded-l shadow-inner"
     >
       <span>Caractéristiques écrites dans la formule du dispositif</span>
       <button on:click={() => (openDirectInputs = !openDirectInputs)}>
@@ -80,8 +70,7 @@
           <!-- Material Icons name: Expand Less -->
           <svg
             aria-hidden="true"
-            class="block h-6 stroke-current w-6"
-            fill="black"
+            class="block h-6 fill-current stroke-current text-white w-6"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
             ><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></svg
@@ -90,8 +79,7 @@
           <!-- Material Icons name: Expand More -->
           <svg
             aria-hidden="true"
-            class="block h-6 stroke-current w-6"
-            fill="black"
+            class="block h-6 fill-current stroke-current text-white w-6"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
             ><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></svg
@@ -101,7 +89,7 @@
     </h2>
 
     {#if openDirectInputs}
-      <div class="ml-5">
+      <div class="ml-4">
         <ul>
           {#each directInputs as input}
             <li>
@@ -122,9 +110,9 @@
 {/if}
 
 {#if inputs.length > 0}
-  <section class="pb-3 mb-3 mr-5">
+  <section class="pb-3 mb-3 ">
     <h2
-      class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
+      class="bg-gray-400 text-white flex justify-between py-1 ml-4 px-3 my-4 rounded-l shadow-inner"
     >
       <span>Caractéristiques directement influentes</span>
       <button on:click={() => (openAllInputs = !openAllInputs)}>
@@ -132,7 +120,7 @@
           <!-- Material Icons name: Expand Less -->
           <svg
             aria-hidden="true"
-            class="block h-6 fill-current stroke-current text-gray-500 w-6"
+            class="block h-6 fill-current stroke-current text-white w-6"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
             ><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></svg
@@ -141,7 +129,7 @@
           <!-- Material Icons name: Expand More -->
           <svg
             aria-hidden="true"
-            class="block h-6 fill-current stroke-current text-gray-500 w-6"
+            class="block h-6 fill-current stroke-current text-white w-6"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
             ><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></svg
@@ -151,7 +139,7 @@
     </h2>
 
     {#if openAllInputs}
-      <div class="ml-5">
+      <div class="ml-4">
         <ul>
           {#each inputs as input}
             <li>
diff --git a/src/lib/components/variables/VariableReferredParameterHeader.svelte b/src/lib/components/variables/VariableReferredParameterHeader.svelte
index 4f1d82b769186daf06222cb89eb004166140de9f..f6643c08a348f237f47ab1075a342eb60c7c5ffc 100644
--- a/src/lib/components/variables/VariableReferredParameterHeader.svelte
+++ b/src/lib/components/variables/VariableReferredParameterHeader.svelte
@@ -14,15 +14,16 @@
 </script>
 
 <h1
-  class="font-serif text-gray-700 py-1 {parameter.class !== ParameterClass.Node
+  class="font-serif text-le-gris-dispositif-dark mr-4 {parameter.class !==
+  ParameterClass.Node
     ? 'text-base italic text-le-gris-dispositif-dark'
     : depth === 0
-    ? 'text-xl'
+    ? 'inline-flex text-base font-bold my-1'
     : depth === 1
-    ? 'font-semibold text-lg px-4'
+    ? 'inline-flex text-base my-1'
     : depth === 2
-    ? 'text-base px-8'
-    : 'text-sm px-12'}"
+    ? 'font-bold text-sm ml-2 my-1'
+    : 'text-sm ml-4 my-1'}"
 >
   {#if depth === 0}
     {#each [...iterParameterAncestors(parameter.parent)] as ancestor}
@@ -36,10 +37,6 @@
   {#if parameter.class !== ParameterClass.Node}
     {parameter.title}&nbsp;:
   {:else}
-    {parameter.title}
+    {parameter.title}&nbsp;:
   {/if}
 </h1>
-
-{#if depth === 0}
-  <hr />
-{/if}
diff --git a/src/lib/components/variables/VariableReferredParameters.svelte b/src/lib/components/variables/VariableReferredParameters.svelte
index a11716a782556a6b5c3492f76e49b51cad82081b..2ffe0b88e3c4458de80b3d88953793cb088dc6d9 100644
--- a/src/lib/components/variables/VariableReferredParameters.svelte
+++ b/src/lib/components/variables/VariableReferredParameters.svelte
@@ -154,16 +154,16 @@
 
   {#if billDecomposition?.children === undefined}
     {#if Object.keys(bothRootDirectParameterById).length > 0}
-      <h2
-        class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
+      <button
+        class="w-full pr-4 text-black border-b border-black py-1 mb-3"
+        on:click={() => (openDirectParameters = !openDirectParameters)}
       >
-        <span>Principaux paramètres de la loi</span>
-        <button on:click={() => (openDirectParameters = !openDirectParameters)}>
+        <div class="flex justify-between">
           {#if openDirectParameters}
             <!-- Material Icons name: Expand Less -->
             <svg
               aria-hidden="true"
-              class="block h-6 stroke-current w-6"
+              class="h-5 stroke-current w-5"
               fill="black"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -173,18 +173,19 @@
             <!-- Material Icons name: Expand More -->
             <svg
               aria-hidden="true"
-              class="block h-6 stroke-current w-6"
+              class="h-5 stroke-current w-5"
               fill="black"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
               ><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></svg
             >
           {/if}
-        </button>
-      </h2>
+          <span class="tracking-wider">Principaux paramètres de la loi</span>
+        </div>
+      </button>
 
       {#if openDirectParameters}
-        <section class="pl-5 mb-3">
+        <section class="mb-3">
           <ul>
             {#each [...iterVariableRootParameters(bothRootDirectParameterById, rootParameter, billRootParameter)] as [bothFilteredParameter, lawParameter, billParameter]}
               <li>
@@ -221,16 +222,16 @@
     {/if}
 
     {#if Object.keys(bothRootParameterById).length > 0}
-      <h2
-        class="bg-le-gris-dispositif-ultralight text-black flex justify-between py-2 text-lg px-5 rounded-r shadow-inner"
+      <button
+        class="w-full pr-4 text-black border-b border-black py-1 mb-3"
+        on:click={() => (openAllParameters = !openAllParameters)}
       >
-        <span>Autres paramètres affectant le dispositif</span>
-        <button on:click={() => (openAllParameters = !openAllParameters)}>
+        <div class="flex justify-between">
           {#if openAllParameters}
             <!-- Material Icons name: Expand Less -->
             <svg
               aria-hidden="true"
-              class="block h-6 fill-current stroke-current text-gray-500 w-6"
+              class="h-5 fill-current stroke-current w-5"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
               ><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></svg
@@ -239,17 +240,20 @@
             <!-- Material Icons name: Expand More -->
             <svg
               aria-hidden="true"
-              class="block h-6 fill-current stroke-current text-gray-500 w-6"
+              class="h-5 fill-current stroke-current w-5"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
               ><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></svg
             >
           {/if}
-        </button>
-      </h2>
+          <span class="tracking-wider"
+            >Autres paramètres affectant le dispositif</span
+          >
+        </div>
+      </button>
 
       {#if openAllParameters}
-        <section class="pb-3 mb-3 px-5">
+        <section class="pb-3 mb-3 ml-2">
           <ul>
             {#each [...iterVariableRootParameters(bothRootParameterById, rootParameter, billRootParameter)] as [bothFilteredParameter, lawParameter, billParameter]}
               <li>
diff --git a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
index 5185e7bc92207577b7123355865c1bafdf03e167..15d4165e933a225cbe15aa2d8154fc0d9f21c3fc 100644
--- a/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
+++ b/src/lib/components/variables/VariableReferredScaleAtInstant.svelte
@@ -126,14 +126,14 @@
       <thead>
         <tr>
           <th />
-          <th class="font-light text-center bg-gray-100">Seuil</th>
+          <th class="font-normal text-center bg-gray-100">Seuil</th>
           {#if isAmountScale}
-            <th class="font-light text-center bg-gray-100">Montant</th>
+            <th class="font-normal text-center bg-gray-100">Montant</th>
           {:else}
             {#if usesBase}
-              <th class="font-light text-center bg-gray-100">Base</th>
+              <th class="font-normal text-center bg-gray-100">Base</th>
             {/if}
-            <th class="font-light text-center bg-gray-100">Taux</th>
+            <th class="font-normal text-center bg-gray-100">Taux</th>
           {/if}
         </tr>
       </thead>
@@ -184,7 +184,7 @@
               </div>
             </td>
             {#if isAmountScale}
-              <td class="border-l-2 p-1">
+              <td class="border-l border-black pl-3 p-1">
                 <div class="flex items-center">
                   <VariableReferredValueEdit
                     billValue={asAmountBracketAtInstant(
@@ -216,7 +216,7 @@
               </td>
             {:else}
               {#if usesBase}
-                <td class="border-l-2 p-1">
+                <td class="border-l border-black pl-3 p-1">
                   <div class="flex items-center">
                     <VariableReferredValueEdit
                       billValue={asRateBracketAtInstant(
@@ -248,7 +248,7 @@
                   </div>
                 </td>
               {/if}
-              <td class="border-l-2 p-1">
+              <td class="border-l border-black pl-3 p-1">
                 <div class="flex items-center">
                   <VariableReferredValueEdit
                     billValue={asRateBracketAtInstant(
@@ -291,7 +291,7 @@
       on:click={appendBracket}
       type="button"
     >
-      <div class="mt-4 text-sm pl-1 flex items-center">
+      <div class="mt-2 text-sm pl-1 pb-4 flex items-center">
         <svg
           class="fill-current inline mr-1"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/variables/VariableReferredScaleParameter.svelte b/src/lib/components/variables/VariableReferredScaleParameter.svelte
index 6b52de718c73cc830527697d32beb915e00e6dd3..a849577e57afa971746120f504a725b5ec080e73 100644
--- a/src/lib/components/variables/VariableReferredScaleParameter.svelte
+++ b/src/lib/components/variables/VariableReferredScaleParameter.svelte
@@ -17,6 +17,7 @@
   export let depth: number
   export let lawParameter: ScaleParameter | undefined
 
+  const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
   const parametricReform = getContext(
     "parametricReform",
   ) as Writable<ParametricReform>
@@ -55,6 +56,13 @@
 
   $: scaleAtInstant = change?.scale ?? billScaleAtInstant
 
+  $: lastReviewOrChange =
+    billParameter.last_review === undefined
+      ? billLatestInstant === "0001-01-01"
+        ? undefined
+        : billLatestInstant
+      : billParameter.last_review
+
   function changeScale({ detail: scale }: { detail: ScaleAtInstant }) {
     updateReform(`${date.split("-")[0]}-01-01`, scale)
   }
@@ -83,10 +91,10 @@
   }
 </script>
 
-<section class="ml-14 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light">
+<section class="ml-5 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light">
   <VariableReferredParameterHeader {depth} parameter={billParameter} />
 
-  <div class="flex bg-gray-100 rounded-t pl-1 py-2 mt-1">
+  <div class="flex bg-gray-100 rounded-t pl-1 pt-2 mt-1 ">
     <VariableReferredScaleAtInstant
       {billParameter}
       {billScaleAtInstant}
@@ -98,80 +106,73 @@
     />
   </div>
   <div class="bg-gray-100 rounded-b p-2">
-    <p class=" text-sm">
-      Barème depuis {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
-    </p>
-
-    <div class="flex mt-3 items-baseline text-gray-600 text-xs">
+    <div class="flex items-baseline text-gray-600 text-xs">
       <div class="flex items-center">
-        <div class="flex text-gray-600 text-sm">
-          <div class="bg-gray-400 rounded-sm flex px-1 text-white">
-            <div class="flex pr-1">
-              {#if billLatestInstant < "2020" || billLatestInstant === "0001-01-01"}
-                <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
-                <div class="flex pr-1">
-                  <svg
-                    aria-hidden="true"
-                    class="block fill-current h-5 w-5 text-white "
-                    viewBox="0 0 24 22"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class="text-[#FFAC33]"
-                      d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-                    />
-                    <path
-                      d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-                    />
-                    <path
-                      d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-                    />
-                  </svg>
-                </div>
-                <span
-                  title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}"
-                  >À vérifier</span
-                >
-              {:else}
-                <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
-                <div class="flex pr-1">
-                  <svg
-                    aria-hidden="true"
-                    class="block h-5 w-5 text-white "
-                    viewBox="0 0 24 23"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
-                      fill="#13CC03"
-                    />
-                    <path
-                      d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
-                      fill="white"
-                    />
-                  </svg>
-                </div>
-                <span
-                  title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}"
-                  >Vérifié</span
-                >
-              {/if}
-            </div>
-          </div>
+        <div class="flex">
+          <a
+            class="text-sm tracking-wide px-1 text-gray-600 underline border-r border-gray-700 flex pr-2"
+            href="/parameters/{billParameter.name}/edit"
+            target="_blank"
+          >
+            {#if lastReviewOrChange < "2020"}
+              <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+
+              <svg
+                aria-hidden="true"
+                class="block h-5 w-5 fill-current text-[#FFAC33]"
+                viewBox="0 0 24 22"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+                />
+              </svg>
+              <span
+                class="pl-2"
+                title="La dernière relecture date du {dateFormatter.format(
+                  new Date(lastReviewOrChange),
+                )}">À vérifier</span
+              >
+            {:else}
+              <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+              <svg
+                aria-hidden="true"
+                class="block h-5 w-5 text-white "
+                viewBox="0 0 24 23"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
+                  fill="#13CC03"
+                />
+                <path
+                  d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
+                  fill="white"
+                />
+              </svg>
+              <span
+                class="pl-2"
+                title="La dernière relecture date du {dateFormatter.format(
+                  new Date(lastReviewOrChange),
+                )}">Vérifié</span
+              >
+            {/if}
+          </a>
 
           <div>
             <a
-              class="text-sm ml-1 underline text-gray-600 hover:text-gray-700"
+              class="flex items-center text-sm ml-2 underline text-gray-600 hover:text-gray-700 tracking-wide"
               href="/parameters/{billParameter.name}"
               target="_blank"
             >
+              <!--Remixicon.com - history-fill -->
               <svg
                 aria-hidden="true"
-                class="inline h-4 fill-current stroke-transparent text-gray-600 w-4"
+                class="inline h-4 w-4 fill-current stroke-transparent text-gray-600 mr-1"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
                 ><path
-                  d="M12.804 16.6663L13.7085 18.2402C12.8402 18.6382 11.8905 18.9005 10.9045 19V17.1729C11.5739 17.0915 12.207 16.9196 12.804 16.6663ZM2.82714 10.9045H1C1.0995 11.8995 1.36181 12.8402 1.7598 13.7085L3.33367 12.804C3.0804 12.207 2.90854 11.5739 2.82714 10.9045ZM12.804 3.33367L13.7085 1.7598C12.8402 1.36181 11.8995 1.0995 10.9045 1V2.82714C11.5739 2.90854 12.207 3.0804 12.804 3.33367ZM17.1729 9.09548H19C18.9005 8.1005 18.6382 7.1598 18.2402 6.29146L16.6663 7.19598C16.9196 7.79296 17.0915 8.42613 17.1729 9.09548ZM7.19598 16.6663L6.29146 18.2402C7.1598 18.6382 8.10955 18.9005 9.09548 19V17.1729C8.42613 17.0915 7.79296 16.9196 7.19598 16.6663ZM9.09548 2.82714V1C8.1005 1.0995 7.1598 1.36181 6.29146 1.7598L7.19598 3.33367C7.79296 3.0804 8.42613 2.90854 9.09548 2.82714ZM15.7528 5.63116L17.3266 4.71759C16.7568 3.93065 16.0603 3.23417 15.2734 2.66432L14.3598 4.23819C14.8935 4.64523 15.3548 5.10653 15.7528 5.63116ZM3.33367 7.19598L1.7598 6.29146C1.36181 7.1598 1.0995 8.1005 1 9.09548H2.82714C2.90854 8.42613 3.0804 7.79296 3.33367 7.19598ZM17.1729 10.9045C17.0915 11.5739 16.9196 12.207 16.6663 12.804L18.2402 13.7085C18.6382 12.8402 18.9005 11.8905 19 10.9045H17.1729ZM14.3688 15.7528L15.2824 17.3266C16.0693 16.7568 16.7658 16.0603 17.3357 15.2734L15.7618 14.3598C15.3548 14.8935 14.8935 15.3548 14.3688 15.7528ZM5.63116 4.24724L4.72663 2.66432C3.93065 3.24322 3.24322 3.93065 2.67337 4.72663L4.24724 5.6402C4.64523 5.10653 5.10653 4.64523 5.63116 4.24724ZM4.24724 14.3688L2.67337 15.2734C3.24322 16.0603 3.9397 16.7568 4.72663 17.3266L5.6402 15.7528C5.10653 15.3548 4.64523 14.8935 4.24724 14.3688ZM10.9045 5.47739H9.09548V10.3709L12.9759 14.2513L14.2513 12.9759L10.9045 9.62914V5.47739Z"
+                  d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12h2c0 4.418 3.582 8 8 8s8-3.582 8-8-3.582-8-8-8C9.536 4 7.332 5.114 5.865 6.865L8 9H2V3l2.447 2.446C6.28 3.336 8.984 2 12 2zm1 5v4.585l3.243 3.243-1.415 1.415L11 12.413V7h2z"
                 /></svg
               >Historique</a
             >
@@ -182,8 +183,11 @@
   </div>
   {#if billReferences !== undefined && billReferences.length > 0}
     <!--Référence législative-->
-    <div class="bg-le-gris-dispositif-ultralight rounded-b py-2">
-      <ul class="mx-2 text-sm">
+    <div class="bg-le-gris-dispositif-ultralight rounded-b py-2 px-2">
+      <p class="text-sm pb-2">
+        Barème depuis le {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
+      </p>
+      <ul class="text-sm">
         {#each billReferences as { href, note, title }}
           <li class="text-xs">
             {#if href === undefined}{title}{:else}
diff --git a/src/lib/components/variables/VariableReferredValueEdit.svelte b/src/lib/components/variables/VariableReferredValueEdit.svelte
index aac363b59d9fbbf4dd92fe0296103363a3bf2e4b..6971c128b3a648cf6e0d547a32e08b3d11b4a2ad 100644
--- a/src/lib/components/variables/VariableReferredValueEdit.svelte
+++ b/src/lib/components/variables/VariableReferredValueEdit.svelte
@@ -68,7 +68,7 @@
     >
   {/if}
   <input
-    class="bg-white rounded-sm text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-16 {valueFormatted !==
+    class="px-1 bg-white rounded-sm text-black font-serif text-lg border-b-2 border-l-0 border-r-0 border-t-0 border-gray-200 py-0 w-20 {valueFormatted !==
     billValueFormatted
       ? 'bg-le-jaune hover:text-le-gris-dispositif-dark'
       : valueFormatted !== lawValueFormatted
diff --git a/src/lib/components/variables/VariableReferredValueParameter.svelte b/src/lib/components/variables/VariableReferredValueParameter.svelte
index eb2930427f3eba6142cebbe75255195d12907e54..8385516f4353786ff5275f68fb6593545b7d1139 100644
--- a/src/lib/components/variables/VariableReferredValueParameter.svelte
+++ b/src/lib/components/variables/VariableReferredValueParameter.svelte
@@ -18,6 +18,7 @@
   export let lawParameter: ValueParameter | undefined
 
   let billLatestInstantValueCouplesArray: [string, ValueAtInstant][]
+  const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
   let lawInstantValueCouplesArray: [string, ValueAtInstant][]
   const parametricReform = getContext(
     "parametricReform",
@@ -54,6 +55,13 @@
   $: value =
     change?.value ?? (billValue === "expected" ? "expected" : billValue.value)
 
+  $: lastReviewOrChange =
+    billParameter.last_review === undefined
+      ? billLatestInstant === "0001-01-01"
+        ? undefined
+        : billLatestInstant
+      : billParameter.last_review
+
   function changeValue({ detail: value }: CustomEvent) {
     validValue = parseFloat(value)
     if (validValue == null || Number.isNaN(validValue)) {
@@ -85,7 +93,7 @@
   }
 </script>
 
-<section class="ml-14 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light">
+<section class="ml-5 pl-4 pb-4 border-l-2 border-le-gris-dispositif-light">
   <VariableReferredParameterHeader {depth} parameter={billParameter} />
 
   <div
@@ -103,86 +111,76 @@
     <span class="ml-1 text-base">
       {labelFromUnit(billParameter.unit) ?? ""}
     </span>
-    <!--Date du paramètre-->
-    <div class="text-sm mx-2">
-      <p>
-        depuis {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
-      </p>
-    </div>
+
     {#if valueError !== null}<p class="text-red-500">{valueError}</p>{/if}
   </div>
 
   <div class="bg-gray-100 flex items-baseline text-gray-600 text-xs p-2">
     <div class="flex items-center">
-      <div class="flex text-gray-600 text-sm">
-        <div class="bg-gray-400 rounded-sm flex px-1 text-white ">
-          <div class="flex pr-1">
-            {#if billLatestInstant < "2020" || billLatestInstant === "0001-01-01"}
-              <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
-              <div class="flex pr-1">
-                <svg
-                  aria-hidden="true"
-                  class="block fill-current h-5 w-5 text-white "
-                  viewBox="0 0 24 22"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class="text-[#FFAC33]"
-                    d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-                  />
-                  <path
-                    d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-                  />
-                  <path
-                    d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-                  />
-                </svg>
-              </div>
-              <span
-                title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}"
-                >À vérifier</span
-              >
-            {:else}
-              <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
-              <div class="flex pr-1">
-                <svg
-                  aria-hidden="true"
-                  class="block h-5 w-5 text-white "
-                  viewBox="0 0 24 23"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
-                    fill="#13CC03"
-                  />
-                  <path
-                    d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
-                    fill="white"
-                  />
-                </svg>
-              </div>
-
-              <span
-                title="La dernière relecture date de {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}"
-                >Vérifié</span
-              >
-            {/if}
-          </div>
-        </div>
+      <div class="flex">
+        <a
+          class="text-sm tracking-wide px-1 text-gray-600 underline border-r border-gray-700 flex pr-2"
+          href="/parameters/{billParameter.name}/edit"
+          target="_blank"
+        >
+          {#if lastReviewOrChange < "2020"}
+            <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+            <svg
+              aria-hidden="true"
+              class="block h-5 w-5 fill-current text-[#FFAC33]"
+              viewBox="0 0 24 22"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+              />
+            </svg>
+            <span
+              class="pl-2"
+              title="La dernière relecture date du {dateFormatter.format(
+                new Date(lastReviewOrChange),
+              )}">À vérifier</span
+            >
+          {:else}
+            <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+            <svg
+              aria-hidden="true"
+              class="block h-5 w-5 text-white "
+              viewBox="0 0 24 23"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
+                fill="#13CC03"
+              />
+              <path
+                d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
+                fill="white"
+              />
+            </svg>
+            <span
+              class="pl-2"
+              title="La dernière relecture date du {dateFormatter.format(
+                new Date(lastReviewOrChange),
+              )}">Vérifié</span
+            >
+          {/if}
+        </a>
 
         <div>
           <a
-            class="text-sm ml-1 underline text-gray-600 hover:text-gray-700"
+            class="flex text-sm ml-2 underline text-gray-600 hover:text-gray-700 items-center tracking-wide"
             href="/parameters/{billParameter.name}"
             target="_blank"
           >
+            <!--Remixicon.com - history-fill -->
             <svg
               aria-hidden="true"
-              class="inline h-4 fill-current stroke-transparent text-gray-600 w-4"
+              class="inline h-4 w-4 fill-current stroke-transparent text-gray-600 mr-1"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
               ><path
-                d="M12.804 16.6663L13.7085 18.2402C12.8402 18.6382 11.8905 18.9005 10.9045 19V17.1729C11.5739 17.0915 12.207 16.9196 12.804 16.6663ZM2.82714 10.9045H1C1.0995 11.8995 1.36181 12.8402 1.7598 13.7085L3.33367 12.804C3.0804 12.207 2.90854 11.5739 2.82714 10.9045ZM12.804 3.33367L13.7085 1.7598C12.8402 1.36181 11.8995 1.0995 10.9045 1V2.82714C11.5739 2.90854 12.207 3.0804 12.804 3.33367ZM17.1729 9.09548H19C18.9005 8.1005 18.6382 7.1598 18.2402 6.29146L16.6663 7.19598C16.9196 7.79296 17.0915 8.42613 17.1729 9.09548ZM7.19598 16.6663L6.29146 18.2402C7.1598 18.6382 8.10955 18.9005 9.09548 19V17.1729C8.42613 17.0915 7.79296 16.9196 7.19598 16.6663ZM9.09548 2.82714V1C8.1005 1.0995 7.1598 1.36181 6.29146 1.7598L7.19598 3.33367C7.79296 3.0804 8.42613 2.90854 9.09548 2.82714ZM15.7528 5.63116L17.3266 4.71759C16.7568 3.93065 16.0603 3.23417 15.2734 2.66432L14.3598 4.23819C14.8935 4.64523 15.3548 5.10653 15.7528 5.63116ZM3.33367 7.19598L1.7598 6.29146C1.36181 7.1598 1.0995 8.1005 1 9.09548H2.82714C2.90854 8.42613 3.0804 7.79296 3.33367 7.19598ZM17.1729 10.9045C17.0915 11.5739 16.9196 12.207 16.6663 12.804L18.2402 13.7085C18.6382 12.8402 18.9005 11.8905 19 10.9045H17.1729ZM14.3688 15.7528L15.2824 17.3266C16.0693 16.7568 16.7658 16.0603 17.3357 15.2734L15.7618 14.3598C15.3548 14.8935 14.8935 15.3548 14.3688 15.7528ZM5.63116 4.24724L4.72663 2.66432C3.93065 3.24322 3.24322 3.93065 2.67337 4.72663L4.24724 5.6402C4.64523 5.10653 5.10653 4.64523 5.63116 4.24724ZM4.24724 14.3688L2.67337 15.2734C3.24322 16.0603 3.9397 16.7568 4.72663 17.3266L5.6402 15.7528C5.10653 15.3548 4.64523 14.8935 4.24724 14.3688ZM10.9045 5.47739H9.09548V10.3709L12.9759 14.2513L14.2513 12.9759L10.9045 9.62914V5.47739Z"
+                d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12h2c0 4.418 3.582 8 8 8s8-3.582 8-8-3.582-8-8-8C9.536 4 7.332 5.114 5.865 6.865L8 9H2V3l2.447 2.446C6.28 3.336 8.984 2 12 2zm1 5v4.585l3.243 3.243-1.415 1.415L11 12.413V7h2z"
               /></svg
             >Historique</a
           >
@@ -191,8 +189,12 @@
     </div>
   </div>
   {#if billReferences !== undefined && billReferences.length > 0}
-    <div class="bg-le-gris-dispositif-ultralight rounded-b py-2">
-      <ul class="mx-2 text-xs">
+    <div class="bg-le-gris-dispositif-ultralight rounded-b py-2 px-2">
+      <!--Date du paramètre-->
+      <p class="text-sm pb-2">
+        Valeur depuis le {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
+      </p>
+      <ul class="text-xs">
         {#each billReferences as { href, note, title }}
           <li>
             {#if href === undefined}{title}{:else}<a
diff --git a/src/lib/components/variables/VariableView.svelte b/src/lib/components/variables/VariableView.svelte
index da2624682380a222587ce69fec66c1cb90c00127..827a30a9f08baba95bf68fdb8bd3f42f74ffa515 100644
--- a/src/lib/components/variables/VariableView.svelte
+++ b/src/lib/components/variables/VariableView.svelte
@@ -1,27 +1,16 @@
 <script lang="ts">
-  import { auditDateIso8601String, laxAudit } from "@auditors/core"
   import type { Variable } from "@openfisca/json-model"
   import { newVariableRepositoryUrl } from "@openfisca/json-model"
   import { getContext } from "svelte"
-  import type { Writable } from "svelte/store"
 
-  import type { RequestedCalculationByName } from "$lib/calculations"
-  import { requestAllCalculations } from "$lib/calculations"
   import FormulaView from "$lib/components/variables/FormulaView.svelte"
   import VariableInput from "$lib/components/variables/VariableInput.svelte"
-  import { entityByKey } from "$lib/entities"
   import { metadata } from "$lib/metadata"
   import type { Situation } from "$lib/situations"
-  import {
-    getSituationVariableValue,
-    setSituationVariableValue,
-  } from "$lib/situations"
   import type { SelfTargetAProps } from "$lib/urls"
-  import type {
-    ValuesByCalculationNameByVariableName,
-    VariableValue,
-  } from "$lib/variables"
+  import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
   import { buildInstantFormulaAndReferencesArray } from "$lib/variables"
+  import VariableHeader from "./VariableHeader.svelte"
 
   export let editable: boolean
   export let inputInstantsByVariableName: {
@@ -38,280 +27,272 @@
   const newSelfTargetAProps = getContext("newSelfTargetAProps") as (
     url: string,
   ) => SelfTargetAProps
-  const requestedCalculationByName = getContext(
-    "requestedCalculationByName",
-  ) as Writable<RequestedCalculationByName>
-  let valueError = null
-
-  $: entity = entityByKey[variable.entity]
+</script>
 
-  $: entitySituation = situation[entity.key_plural]
+<div class="flex-col items-start pb-4">
+  <div class="flex-col items-start pb-4">
+    <div class="p-10">
+      <!--Titre de la formule-->
 
-  function asBoolean(value: VariableValue): boolean {
-    return value as boolean
-  }
+      <p class="uppercase mb-2">Formule de calcul</p>
 
-  function asNumber(value: VariableValue): number {
-    return value as number
-  }
+      <div class="border-l-2 border-black pl-4 mb-4 ">
+        <!-- <var>{variable.name}</var> -->
+        {#if variable.label !== undefined}
+          <p class="text-3xl font-serif font-bold">{variable.label}</p>
+        {/if}
+        {#each buildInstantFormulaAndReferencesArray(variable) as { formula, instant, references }}
+          {#if references.length > 0}
+            <div class="">
+              {#each references as { href, note, title }}
+                <div class="mt-4 w-2/3">
+                  {#if note}
+                    <p class="font-serif text-sm text-gray-700">{note}</p>
+                  {/if}
+                  <p class="text-gray-500 text-sm mt-2">
+                    {#if href === undefined}Source&nbsp;:&nbsp;{title}{:else}Source&nbsp;:&nbsp;<a
+                        class="link text-black hover:text-le-bleu"
+                        {href}
+                        target="_blank">{title ?? "source"}</a
+                      >
+                      <span class="text-xs"
+                        >(consulté le {dateFormatter.format(
+                          new Date(instant),
+                        )})</span
+                      >{/if}
+                  </p>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        {/each}
+        {#if editable}
+          <div class="border-2 border-gray-200 rounded mt-7 p-2">
+            <h2 class="mb-2 font-bold text-sm text-gray-500 pb-3 ">
+              Valeur du dispositif pour le cas type&nbsp;:
+            </h2>
 
-  function asString(value: VariableValue): string {
-    return value as string
-  }
+            <VariableInput
+              bind:inputInstantsByVariableName
+              bind:situation
+              {situationIndex}
+              bind:valuesByCalculationNameByVariableName
+              {variable}
+              {year}
+            />
+            <ul />
+          </div>
+        {/if}
+      </div>
 
-  function changeValue({ target }: Event, populationId: string) {
-    let { value }: { value: VariableValue } = target as
-      | HTMLInputElement
-      | HTMLSelectElement
-    switch (variable.value_type) {
-      case "bool":
-        value = (target as HTMLInputElement).checked
-        valueError = null
-        break
-      case "date":
-        ;[value, valueError] = auditDateIso8601String(laxAudit, value)
-        if (valueError !== null) {
-          value = null
-        }
-        break
-      case "float":
-        value = parseFloat(value)
-        if (value == null || Number.isNaN(value)) {
-          value = null
-          valueError = "Nombre incorrect"
-        }
-        valueError = null
-        break
-      case "int":
-        value = parseInt(value)
-        if (value == null || Number.isNaN(value)) {
-          value = null
-          valueError = "Nombre incorrect"
-        }
-        valueError = null
-        break
-      case "str":
-        valueError = null
-        break
-    }
-    const updatedSituation = setSituationVariableValue(
-      entityByKey,
-      situation,
-      variable,
-      populationId,
-      year,
-      value,
-    )
+      {#if variable.formulas !== undefined}
+        <div>
+          <!-- Date de la formule-->
+          <div>
+            {#if variable.last_review === undefined}
+              <div class="inline-flex items-start w-2/3">
+                <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+                <svg
+                  aria-hidden="true"
+                  class="h-8 w-8 mr-1 fill-current items-center text-[#FFAC33]"
+                  viewBox="0 0 24 36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+                  />
+                </svg>
 
-    const inputInstants =
-      inputInstantsByVariableName[variable.name] ?? new Set()
-    const yearString = year.toString()
-    if (!inputInstants.has(yearString)) {
-      inputInstants.add(yearString)
-      inputInstantsByVariableName = {
-        ...inputInstantsByVariableName,
-        [variable.name]: inputInstants,
-      }
-    }
+                <div>
+                  <p class="text-black text-sm">
+                    <span class="text-amber-600 font-bold"
+                      >Ce dispositif n'est peut-être pas à jour</span
+                    >. La dernière date de relecture du dispositif
+                    <b>est inconnue.</b>
 
-    if (updatedSituation !== situation) {
-      situation = updatedSituation
-      $requestedCalculationByName = requestAllCalculations(
-        $requestedCalculationByName,
-        situationIndex,
-      )
-    }
-  }
-</script>
-
-<div class="flex-col items-start pb-4">
-  <!--Titre de la formule-->
-  <h1 class="text-gray-700 pt-7 pb-3 mb-10">
-    <p class="uppercase">Formule de calcul</p>
+                    <a
+                      class="text-gray-700 underline text-sm hover:text-le-bleu"
+                      href={newVariableRepositoryUrl(metadata, variable)}
+                      target="_blank"
+                    >
+                      Proposer une modification
+                    </a>
+                  </p>
+                </div>
+              </div>
+            {:else}
+              <div class="inline-flex items-start w-2/3">
+                <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+                <svg
+                  aria-hidden="true"
+                  class="h-8 w-8 mr-1 fill-current"
+                  viewBox="0 0 24 36"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
+                    fill="#13CC03"
+                  />
+                  <path
+                    d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
+                    fill="white"
+                  />
+                </svg>
 
-    <!-- <var>{variable.name}</var> -->
-    {#if variable.label !== undefined}
-      <p class="text-3xl font-bold">{variable.label}</p>
-    {/if}
-  </h1>
+                <div>
+                  <p class="text-black text-sm">
+                    <span class="text-le-vert-validation-dark font-bold"
+                      >Ce dispositif est à jour !</span
+                    >
+                    La dernière date de reclture du dispositif est
+                    <b
+                      >{dateFormatter.format(
+                        new Date(variable.last_review),
+                      )}.</b
+                    >
+                    <br />
+                    <a
+                      class="text-gray-700 underline text-sm hover:text-le-bleu"
+                      href={newVariableRepositoryUrl(metadata, variable)}
+                      target="_blank"
+                    >
+                      Proposer une modification
+                    </a>
+                  </p>
+                </div>
+              </div>
+            {/if}
+          </div>
 
-  {#if variable.formulas !== undefined}
-    <section>
-      <!-- Date de la formule-->
-      <div class="rounded bg-gray-100 p-4 w-1/2 border-2 border-gray-900 ">
-        <div class="flex-col">
-          <div class="flex">
-            <p class="text-black text-sm">
-              Dernière relecture : {#if variable.last_review === undefined}<i
-                  >date indéterminée</i
-                >{:else}{dateFormatter.format(
-                  new Date(variable.last_review),
-                )}{/if}
+          {#each buildInstantFormulaAndReferencesArray(variable) as { formula, instant, references }}
+            <p class="font-bold text-xl mt-5 pb-3">
+              {#if formula === undefined}
+                <!-- {#if instant !== "0001-01-01"}
+                  Le <i>{instant}</i>&nbsp;:
+                {/if} -->
+              {:else if instant === "0001-01-01"}
+                {#if Object.keys(variable.formulas).length > 1}
+                  Formule <i>initiale</i> de calcul OpenFisca&nbsp;:
+                {:else}
+                  Formule de calcul OpenFisca&nbsp;:
+                {/if}
+              {:else}
+                Formule de calcul OpenFisca à compter du <i>{instant}</i>&nbsp;:
+              {/if}
             </p>
+            <div>
+              {#if formula !== undefined}
+                {#if formula === null}
+                  <i>Aucune formule à partir de cette date</i>
+                {:else}
+                  <FormulaView
+                    {formula}
+                    bind:inputInstantsByVariableName
+                    bind:situation
+                    {situationIndex}
+                    bind:valuesByCalculationNameByVariableName
+                    {year}
+                  />
+                {/if}
+              {/if}
+            </div>
+          {/each}
+        </div>
 
-            <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
-            <svg
-              aria-hidden="true"
-              class="h-6 w-6 ml-2 items-center fill-current"
-              viewBox="0 0 24 22"
-              xmlns="http://www.w3.org/2000/svg"
+        <div class="flex-col">
+          <div class="px-5">
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <a
+              class="text-gray-900 hover:text-le-bleu text-base underline"
+              {...newSelfTargetAProps(
+                `/variables/${variable.name}/inputs/${date}`,
+              )}
+              >Voir toutes les variables des cas types influant sur la formule,
+              à la date du {date}&nbsp;
+              <!-- RemixIcon :external-link-line -->
+              <svg
+                class="fill-current inline h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                ><path fill="none" d="M0 0h24v24H0z" /><path
+                  d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"
+                /></svg
+              ></a
             >
-              <path
-                d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
-                fill="#FFAC33"
-              />
-              <path
-                d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-                fill="white"
-              />
-              <path
-                d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-                fill="white"
-              />
-            </svg>
           </div>
-          <p class="text-gray-700 text-xs pt-2">
-            Vous connaissez la dernière formule du dispositif ?
-          </p>
-          <a
-            class="text-gray-700 underline text-xs hover:text-le-bleu"
-            href={newVariableRepositoryUrl(metadata, variable)}
-            target="_blank"
-          >
-            Cliquez pour contribuer.
-          </a>
+          <!--
+          <div>
+        
+            <a
+              class="link"
+              {...newSelfTargetAProps(
+                `/variables/${variable.name}/parameters/${date}`,
+              )}>Paramètres influant sur la formule, à la date du {date}</a
+            >
+          </div>
+          -->
         </div>
-      </div>
+      {/if}
 
-      {#each buildInstantFormulaAndReferencesArray(variable) as { formula, instant, references }}
-        <div class="mt-10">
-          <h2 class="mr-1 mb-1 font-serif font-bold text-xl pt-7 pb-1">
-            {#if formula === undefined}
-              {#if instant !== "0001-01-01"}
-                Le <i>{instant}</i>&nbsp;:
-              {/if}
-            {:else if instant === "0001-01-01"}
-              {#if Object.keys(variable.formulas).length > 1}
-                Formule <i>initiale</i> de calcul OpenFisca&nbsp;:
-              {:else}
-                Formule de calcul OpenFisca&nbsp;:
-              {/if}
-            {:else}
-              Formule de calcul OpenFisca à compter du <i>{instant}</i>&nbsp;:
-            {/if}
+      {#if variable.referring_variables !== undefined}
+        <div>
+          <h2 class="font-bold text-xl pt-7 pb-3">
+            Variables et dispositifs influencés par la formule&nbsp;:
           </h2>
+          <p>
+            La formule du dispositif "{variable.ux_name}" peut avoir une
+            influence sur d'autres dispositifs et variables&nbsp;:
+          </p>
+          <ul class="list-disc list-inside">
+            {#each variable.referring_variables as variableName}
+              <li>
+                <a class="link" href="/variables/{variableName}"
+                  >{variableName}</a
+                >
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
 
-          {#if formula !== undefined}
-            {#if formula === null}
-              <i>Aucune formule à partir de cette date</i>
-            {:else}
-              <FormulaView
-                {formula}
-                bind:inputInstantsByVariableName
-                bind:situation
-                {situationIndex}
-                bind:valuesByCalculationNameByVariableName
-                {year}
-              />
-            {/if}
+      <!-- Caractéristiques avancées-->
+      <div class="my-4">
+        <h2 class="font-bold text-xl pt-7 pb-3">
+          Caractéristiques avancées&nbsp;:
+        </h2>
+
+        <div>
+          {#if variable.definition_period !== undefined}
+            <div class="py-1">
+              Période de définition&nbsp;: <span class="font-bold"
+                >{variable.definition_period}</span
+              >
+            </div>
           {/if}
 
-          {#if references.length > 0}
-            <section>
-              <h3>Références</h3>
-              <ul class="list-disc list-inside">
-                {#each references as { href, note, title }}
-                  <li>
-                    {#if href === undefined}{title}{:else}<a
-                        class="link"
-                        {href}
-                        target="_blank">{title ?? "source"}</a
-                      >{/if}
-                    {#if note}
-                      <p>{note}</p>
-                    {/if}
-                  </li>
-                {/each}
-              </ul>
-            </section>
+          {#if variable.entity !== undefined}
+            <div class="py-1">
+              Entité&nbsp;: <span class="font-bold">{variable.entity}</span>
+            </div>
           {/if}
-        </div>
-      {/each}
-    </section>
 
-    <section>
-      <div>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a
-          class="link"
-          {...newSelfTargetAProps(`/variables/${variable.name}/inputs/${date}`)}
-          >Variables d'entrée influant sur la formule, à la date du {date}</a
-        >
-      </div>
-      <div>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a
-          class="link"
-          {...newSelfTargetAProps(
-            `/variables/${variable.name}/parameters/${date}`,
-          )}>Paramètres influant sur la formule, à la date du {date}</a
-        >
+          {#if variable.value_type !== undefined}
+            <div class="py-1">
+              Type de valeur&nbsp;: <span class="font-bold"
+                >{variable.value_type}</span
+              >
+            </div>
+          {/if}
+        </div>
       </div>
-    </section>
-  {/if}
-
-  {#if editable}
-    <section>
-      <h1>Valeur</h1>
-      <VariableInput
-        bind:inputInstantsByVariableName
-        bind:situation
-        {situationIndex}
-        bind:valuesByCalculationNameByVariableName
-        {variable}
-        {year}
-      />
-      <ul />
-    </section>
-  {/if}
 
-  <!-- Caractéristiques avancées-->
-  <section class="my-4">
-    <p class="pb-2">Caractéristiques avancées :</p>
-
-    <div class="text-sm border-t-0 border-b-0 border-r-0 border-l-4 px-8">
-      {#if variable.definition_period !== undefined}
-        <div class="py-1">
-          Période de définition&nbsp;: {variable.definition_period}
+      {#if variable.documentation !== undefined}
+        <div class="whitespace-pre">
+          {variable.documentation.replace(/^\n+/, "").replace(/\n+$/, "")}
         </div>
       {/if}
-
-      {#if variable.entity !== undefined}
-        <div class="py-1">Entité&nbsp;: {variable.entity}</div>
-      {/if}
-
-      {#if variable.value_type !== undefined}
-        <div class="py-1">Type de valeur&nbsp;: {variable.value_type}</div>
-      {/if}
-    </div>
-  </section>
-
-  {#if variable.referring_variables !== undefined}
-    <section>
-      <h1>Variables dépendantes</h1>
-      <ul class="list-disc list-inside">
-        {#each variable.referring_variables as variableName}
-          <li>
-            <a class="link" href="/variables/{variableName}">{variableName}</a>
-          </li>
-        {/each}
-      </ul>
-    </section>
-  {/if}
-
-  {#if variable.documentation !== undefined}
-    <div class="whitespace-pre-line">
-      {variable.documentation.replace(/^\n+/, "").replace(/\n+$/, "")}
     </div>
-  {/if}
+  </div>
 </div>
diff --git a/src/lib/components/waterfalls/AxisX.svelte b/src/lib/components/waterfalls/AxisX.svelte
deleted file mode 100644
index 731f21815b7380d65b44083be2f6ddf956637f7c..0000000000000000000000000000000000000000
--- a/src/lib/components/waterfalls/AxisX.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-  import { getContext, createEventDispatcher } from "svelte"
-
-  export let gridlines = true
-  export let tickMarks = false
-  export let formatTick = (d) => d
-  export let baseline = false
-  export let snapTicks = false
-  // export let ticks = undefined
-  // export let xTick = undefined
-  export let yTick = 0
-  // export let dxTick = 0
-  // export let dyTick = 0
-
-  const { data, height, width, xScale, yRange } = getContext("LayerCake")
-  const dispatch = createEventDispatcher()
-</script>
-
-<g class="axis x-axis" class:snapTicks>
-  {#each $data as node, index}
-    <g
-      class="tick tick-{index}"
-      transform="translate({$xScale(node.label)},{$yRange[0]})"
-    >
-      {#if gridlines !== false}
-        <line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
-      {/if}
-      {#if tickMarks === true}
-        <line
-          class="tick-mark"
-          y1={0}
-          y2={6}
-          x1={$xScale.bandwidth() / 2}
-          x2={$xScale.bandwidth() / 2}
-        />
-      {/if}
-      <g transform="translate({$xScale.bandwidth() / 4},{yTick + 12})">
-        <text
-          class="cursor-pointer rotate-45"
-          on:click={() => dispatch("toggleAggregate", node.name)}
-          text-anchor="start"
-          >{#if node.children !== undefined}{#if node.open}[-]{:else}[+]{/if}
-          {/if}{formatTick(node.label)}</text
-        >
-      </g>
-    </g>
-  {/each}
-  {#if baseline === true}
-    <line
-      class="baseline"
-      y1={$height + 0.5}
-      y2={$height + 0.5}
-      x1="0"
-      x2={$width}
-    />
-  {/if}
-</g>
-
-<style>
-  .tick {
-    font-size: 0.725em;
-    font-weight: 200;
-  }
-
-  line,
-  .tick line {
-    stroke: #aaa;
-    stroke-dasharray: 2;
-  }
-
-  .tick text {
-    fill: #666;
-  }
-
-  .tick .tick-mark,
-  .baseline {
-    stroke-dasharray: 0;
-  }
-  /* This looks slightly better */
-  .axis.snapTicks .tick:last-child text {
-    transform: translateX(3px);
-  }
-  .axis.snapTicks .tick.tick-0 text {
-    transform: translateX(-3px);
-  }
-</style>
diff --git a/src/lib/components/waterfalls/AxisY.svelte b/src/lib/components/waterfalls/AxisY.svelte
deleted file mode 100644
index 69198a84882c26e5c3eab46c5f7a8b91dd9c3614..0000000000000000000000000000000000000000
--- a/src/lib/components/waterfalls/AxisY.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { padding, xRange, yScale } = getContext("LayerCake")
-
-  export let ticks = 4
-  export let tickMarks = false
-  export let gridlines = true
-  export let formatTick = (d) => d
-  export let xTick = 0
-  export let yTick = 0
-  export let dxTick = 0
-  export let dyTick = -4
-  export let textAnchor = "start"
-
-  $: isBandwidth = typeof $yScale.bandwidth === "function"
-
-  $: tickVals = Array.isArray(ticks)
-    ? ticks
-    : isBandwidth
-    ? $yScale.domain()
-    : typeof ticks === "function"
-    ? ticks($yScale.ticks())
-    : $yScale.ticks(ticks)
-</script>
-
-<g class="axis y-axis" transform="translate({-$padding.left}, 0)">
-  {#each tickVals as tick, i}
-    <g
-      class="tick tick-{tick}"
-      transform="translate({$xRange[0] +
-        (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})"
-    >
-      {#if gridlines !== false}
-        <line
-          class="gridline"
-          x2="100%"
-          y1={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
-          y2={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
-        />
-      {/if}
-      {#if tickMarks === true}
-        <line
-          class="tick-mark"
-          x1="0"
-          x2={isBandwidth ? -6 : 6}
-          y1={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
-          y2={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
-        />
-      {/if}
-      <text
-        x={xTick}
-        y={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
-        dx={isBandwidth ? -9 : dxTick}
-        dy={isBandwidth ? 4 : dyTick}
-        style="text-anchor:{isBandwidth ? 'end' : textAnchor};"
-        >{formatTick(tick)}</text
-      >
-    </g>
-  {/each}
-</g>
-
-<style>
-  .tick {
-    font-size: 0.725em;
-    font-weight: 200;
-  }
-
-  .tick line {
-    stroke: #aaa;
-  }
-  .tick .gridline {
-    stroke-dasharray: 2;
-  }
-
-  .tick text {
-    fill: #666;
-  }
-
-  .tick.tick-0 line {
-    stroke-dasharray: 0;
-  }
-</style>
diff --git a/src/lib/components/waterfalls/Columns.svelte b/src/lib/components/waterfalls/Columns.svelte
deleted file mode 100644
index 32c6ad4b4cbf26f2ac7c5867adceada27e176e02..0000000000000000000000000000000000000000
--- a/src/lib/components/waterfalls/Columns.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts">
-  import { getContext, createEventDispatcher } from "svelte"
-
-  export let blue = "blue"
-  export let emerald = "emerald"
-  export let red = "red"
-  export let stroke = "black"
-  export let strokeWidth = 0.1
-
-  const { data, xGet, xScale, yGet } = getContext("LayerCake")
-  const dispatch = createEventDispatcher()
-
-  function* iterColumns(nodes, xGet, xScale, yGet) {
-    for (const node of nodes) {
-      const xVals = xGet(node)
-      const x = xScale.bandwidth ? xVals : xVals[0]
-      const width = xScale.bandwidth
-        ? xScale.bandwidth()
-        : Math.max(0, xVals[1] - xVals[0])
-      const [y0, y1] = yGet(node)
-      let height = y0 - y1
-      if (Number.isNaN(height)) {
-        continue
-      }
-      let y = y1
-      if (height < 0) {
-        height = -height
-        y = y0
-      }
-      yield {
-        fill:
-          node.children === undefined || !node.open
-            ? y0 < y1
-              ? red
-              : emerald
-            : blue,
-        fillOpacity: node.children === undefined || !node.open ? 1 : 0.25,
-        height,
-        node,
-        width,
-        x,
-        y,
-      }
-    }
-  }
-</script>
-
-<g>
-  {#each [...iterColumns($data, $xGet, $xScale, $yGet)] as { fill, fillOpacity, height, node, width, x, y }, i}
-    {#if height === 0}
-      <line
-        class="cursor-pointer"
-        data-id={i}
-        on:click={() => dispatch("toggleAggregate", node.name)}
-        {stroke}
-        stroke-width={strokeWidth}
-        x1={x}
-        x2={x + width}
-        y1={y}
-        y2={y}
-      />
-    {:else}
-      <rect
-        class="cursor-pointer"
-        data-id={i}
-        {fill}
-        fill-opacity={fillOpacity}
-        {height}
-        on:click={() => dispatch("toggleAggregate", node.name)}
-        {stroke}
-        stroke-width={strokeWidth}
-        {width}
-        {x}
-        {y}
-      />
-      {#if node.children !== undefined && height >= 24}
-        <g
-          class="cursor-pointer stroke-current text-white"
-          fill="none"
-          on:click={() => dispatch("toggleAggregate", node.name)}
-          transform="translate({x + width / 2 - 12}, {y + height / 2 - 12})"
-        >
-          {#if node.open}
-            <!-- Heroicon name: outline/minus-circle -->
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          {:else}
-            <!-- Heroicon name: outline/plus-circle -->
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          {/if}
-        </g>
-      {/if}
-    {/if}
-  {/each}
-</g>
diff --git a/src/lib/components/waterfalls/Waterfall.svelte b/src/lib/components/waterfalls/Waterfall.svelte
deleted file mode 100644
index c24356ef3e4791195d54cb5cd669813e38295e76..0000000000000000000000000000000000000000
--- a/src/lib/components/waterfalls/Waterfall.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-  import type { Waterfall } from "@openfisca/json-model"
-  import { scaleBand } from "d3-scale"
-  import { getContext } from "svelte"
-  import type { Writable } from "svelte/store"
-
-  import { session } from "$app/stores"
-  import { LayerCake, Svg } from "$lib/components/layercake"
-  import type { DecompositionByName } from "$lib/decompositions"
-  import { walkDecompositions } from "$lib/decompositions"
-
-  import AxisX from "./AxisX.svelte"
-  import AxisY from "./AxisY.svelte"
-  import Columns from "./Columns.svelte"
-
-  const adaptAmountsScale = getContext("adaptAmountsScale") as Writable<boolean>
-  const decompositionByNameArray = getContext(
-    "decompositionByNameArray",
-  ) as Writable<DecompositionByName[]>
-  const showNulls = getContext("showNulls") as Writable<boolean>
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
-  const waterfall = getContext("waterfall") as Writable<Waterfall>
-
-  $: rootDecompositionName = $waterfall.root
-
-  $: data = [
-    ...walkDecompositions(
-      $decompositionByNameArray[$testCaseIndex ?? 0],
-      rootDecompositionName,
-      true,
-      true,
-    ),
-  ].filter(
-    ({ delta }) => $showNulls || delta.some((deltaItem) => deltaItem !== 0),
-  )
-
-  $: xDomain = data.map((node) => node.label)
-
-  $: yDomain = computeYDomain(data, $adaptAmountsScale)
-
-  function computeYDomain(data, adaptAmountsScale: boolean): [number, number] {
-    let valueMin = undefined
-    let valueMax = undefined
-    for (const node of data) {
-      if (adaptAmountsScale) {
-        for (const value of node.deltaSumsAtVectorIndex) {
-          if (valueMin === undefined || value < valueMin) {
-            valueMin = value
-          }
-          if (valueMax === undefined || value > valueMax) {
-            valueMax = value
-          }
-        }
-      } else {
-        for (const itemValues of node.deltaSums) {
-          for (const value of itemValues) {
-            if (valueMin === undefined || value < valueMin) {
-              valueMin = value
-            }
-            if (valueMax === undefined || value > valueMax) {
-              valueMax = value
-            }
-          }
-        }
-      }
-    }
-    return [valueMin, valueMax]
-  }
-
-  function toggleAggregate({ detail: name }: { detail: string }) {
-    const index = $testCaseIndex ?? 0
-    let decompositionByName = $decompositionByNameArray[index]
-    let decomposition = decompositionByName[name]
-    if (
-      decomposition === undefined ||
-      decomposition.childrenName === undefined
-    ) {
-      return
-    }
-    decomposition = { ...decomposition }
-    if (decomposition.open) {
-      delete decomposition.open
-    } else {
-      decomposition.open = true
-    }
-
-    const newDecompositionByNameArray = [...$decompositionByNameArray]
-    newDecompositionByNameArray[index] = {
-      ...decompositionByName,
-      [decomposition.name]: decomposition,
-    }
-    $decompositionByNameArray = newDecompositionByNameArray
-  }
-</script>
-
-{#if xDomain.length > 0 && yDomain.length > 0}
-  <div class="h-96 mx-auto pb-36 pl-12 pr-16 pt-4 w-full">
-    <LayerCake
-      {data}
-      x="label"
-      xScale={scaleBand().paddingInner([0.02]).round(true)}
-      {xDomain}
-      y={(node) => [
-        node.deltaSumsAtVectorIndex?.[0] ?? 0,
-        node.deltaSumsAtVectorIndex?.[1] ?? 0,
-      ]}
-      {yDomain}
-    >
-      <Svg>
-        <Columns on:toggleAggregate={toggleAggregate} />
-        <AxisX on:toggleAggregate={toggleAggregate} gridlines={false} />
-        <AxisY textAnchor="end" />
-      </Svg>
-    </LayerCake>
-  </div>
-{/if}
diff --git a/src/lib/decompositions.ts b/src/lib/decompositions.ts
index cabbbc118affcae7f44b4d0a267d7ff7ab74dc10..4af61278ab48c41a6117efa2f55caea4f198fd0b 100644
--- a/src/lib/decompositions.ts
+++ b/src/lib/decompositions.ts
@@ -333,11 +333,11 @@ function buildVisibleDecompositions1(
       childrenDepth = depth + 1
     }
     if (decomposition.open && visibleChildren !== undefined) {
-      let beforeChildrenVisibleDecompositionLength =
+      const beforeChildrenVisibleDecompositionLength =
         visibleDecompositions.length
       let childDeltaSumsPreviousByCalculationName =
         deltaSumsPreviousByCalculationName
-      for (const [childIndex, childReference] of visibleChildren.entries()) {
+      for (const childReference of visibleChildren) {
         const childVisibleDecompositionIndex = buildVisibleDecompositions1(
           decompositionByName,
           entityByKey,
diff --git a/src/lib/displays.ts b/src/lib/displays.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a5d1629e92ba7a3d56efa4576e6c231e5202db9
--- /dev/null
+++ b/src/lib/displays.ts
@@ -0,0 +1,21 @@
+export type DisplayMode = MosaicDisplayMode | SingleTestCaseDisplayMode
+
+export interface DisplayModeBase {
+  action?: string // TODO: Remove attribute "action".
+  mode: "mosaic" | "single_test_case"
+  parameterName?: string
+  parametersVariableName?: string
+}
+
+/// Mode quand il y a plusieurs cas types visibles sur l'interface
+export interface MosaicDisplayMode extends DisplayModeBase {
+  mode: "mosaic"
+}
+
+/// Mode focalisé sur un seul cas type. Permet le mode édition du cas type.
+export interface SingleTestCaseDisplayMode extends DisplayModeBase {
+  mode: "single_test_case"
+  editMode?: boolean
+  testCaseIndex: number
+  variableName?: string
+}
diff --git a/src/lib/editions.ts b/src/lib/editions.ts
deleted file mode 100644
index 58ad7d1060c6752301fe8b88dd11a2d130c249cf..0000000000000000000000000000000000000000
--- a/src/lib/editions.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type EditionMode =
-  | {
-      mode: "variable_parameters"
-      variableName: string
-    }
-  | {
-      mode: "test_case"
-      testCaseIndex: number
-    }
-  | {
-      mode: "test_case_with_variable_inputs"
-      testCaseIndex: number
-      variableName: string
-    }
-  | {
-      mode: "tutorial"
-    }
-  | null
diff --git a/src/lib/parameters.ts b/src/lib/parameters.ts
index f961e4f304480845bec78c3829ba29ca74d829d8..88330045215b864831a2687ba14d10457e338b67 100644
--- a/src/lib/parameters.ts
+++ b/src/lib/parameters.ts
@@ -1,6 +1,5 @@
 import rootParameterUnknown from "@openfisca/france-json/editable_processed_parameters.json"
 import type {
-  Metadata,
   NodeParameter,
   Parameter,
   Reference,
@@ -53,6 +52,7 @@ export const rootParameterByReformName: { [name: string]: NodeParameter } =
 
 export const leafParametersName = new Set<string>()
 for (const parameter of walkParameters(rootParameter)) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   leafParametersName.add(parameter.name!)
 }
 
diff --git a/src/lib/reforms.ts b/src/lib/reforms.ts
index 0ef1f7dc0f16d651f583ae118aa8540b9ae3cc46..08353c14dbfa5b1a3a5fd1a0a86ca30feb490103 100644
--- a/src/lib/reforms.ts
+++ b/src/lib/reforms.ts
@@ -1,10 +1,13 @@
 import reformChangesByNameUnknown from "@openfisca/france-json/reforms_changes.json"
 import type {
   Decomposition as DecompositionCore,
+  ReformMetadata,
   ScaleAtInstant,
   Variable,
 } from "@openfisca/json-model"
 
+import { metadata } from "$lib/metadata"
+
 export type ParameterReform = ValueParameterReform | ScaleParameterReform
 
 export interface ParameterReformBase {
@@ -42,3 +45,10 @@ export interface ValueParameterReform extends ParameterReformBase {
 
 export const reformChangesByName =
   reformChangesByNameUnknown as ReformChangesByName
+
+export const reformMetadataByName = Object.fromEntries(
+  (metadata.reforms ?? []).map((reformMetadata) => [
+    reformMetadata.name,
+    reformMetadata,
+  ]),
+)
diff --git a/src/lib/situations.ts b/src/lib/situations.ts
index 0a6bf97b2c472524a4eb115464cf8bd89d7eb751..cd33f8d36dadb6f57bb0309371a824a7e81aa3ad 100644
--- a/src/lib/situations.ts
+++ b/src/lib/situations.ts
@@ -7,7 +7,6 @@ import type {
 } from "@openfisca/json-model"
 import { getRolePersonsIdKey } from "@openfisca/json-model"
 
-import type { CalculationName } from "$lib/calculations"
 import { entityByKey } from "$lib/entities"
 import type {
   ValuesByCalculationNameByVariableName,
diff --git a/src/lib/urls.ts b/src/lib/urls.ts
index a9e43a3c9e976182110fe7db5827cd845ed4c8ad..582193370d1fbbb25e21b375247036a1fe2ff9ae 100644
--- a/src/lib/urls.ts
+++ b/src/lib/urls.ts
@@ -1,9 +1,15 @@
+import type { DisplayMode } from "./displays"
+
 export interface SelfTargetAProps {
   href: string
   "sveltekit:prefetch"?: boolean
   "sveltekit:noscroll"?: boolean
 }
 
+function assertNeverDisplayMode(displayMode: never): never {
+  throw new Error("Unexpected mode for display mode: " + displayMode)
+}
+
 export function newSelfTargetAProps(url: string): SelfTargetAProps {
   return {
     href: url,
@@ -11,6 +17,48 @@ export function newSelfTargetAProps(url: string): SelfTargetAProps {
   }
 }
 
+export function newSimulationUrl(displayMode: DisplayMode): string {
+  let query: URLSearchParams
+  switch (displayMode.mode) {
+    case "mosaic": {
+      query = new URLSearchParams({ mode: "mosaic" })
+      if (displayMode.parameterName !== undefined) {
+        query.append("parameter", displayMode.parameterName)
+      }
+      if (displayMode.parametersVariableName !== undefined) {
+        query.append("parameters", displayMode.parametersVariableName)
+      }
+      break
+    }
+    case "single_test_case": {
+      query = new URLSearchParams()
+      if (displayMode.editMode) {
+        query.append("edit", "true")
+      }
+      if (displayMode.parameterName !== undefined) {
+        query.append("parameter", displayMode.parameterName)
+      }
+      if (displayMode.parametersVariableName !== undefined) {
+        query.append("parameters", displayMode.parametersVariableName)
+      }
+      if (displayMode.testCaseIndex !== 0) {
+        query.append("test_case", displayMode.testCaseIndex.toString())
+      }
+      if (displayMode.variableName !== undefined) {
+        query.append("variable", displayMode.variableName)
+      }
+      break
+    }
+    default:
+      assertNeverDisplayMode(displayMode)
+  }
+  if (displayMode.action !== undefined) {
+    query.append("action", displayMode.action)
+  }
+  const queryString = query.toString()
+  return `/${queryString ? "?" + queryString : ""}`
+}
+
 // export function parseQuery(
 //   queryString?: string,
 // ): { [key: string]: string | string[] } {
diff --git a/src/lib/values.ts b/src/lib/values.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a79f87ef4ba7365bd34c71b3b657e8ea291bb021
--- /dev/null
+++ b/src/lib/values.ts
@@ -0,0 +1,23 @@
+export function formatValue(value: unknown, unit?: string): string {
+  return valueFormatter(value, unit)(value)
+}
+
+export function valueFormatter(
+  baseValue: unknown,
+  unit?: string,
+): (value: unknown) => string {
+  return baseValue === undefined
+    ? () => ""
+    : typeof baseValue === "boolean"
+    ? (value: boolean) => (value ? "vrai" : "faux")
+    : typeof baseValue === "number"
+    ? unit != null && unit.startsWith("currency-")
+      ? new Intl.NumberFormat("fr-FR", {
+          currency: unit.replace(/^currency-/, ""),
+          maximumFractionDigits: 0,
+          minimumFractionDigits: 0,
+          style: "currency",
+        }).format
+      : new Intl.NumberFormat("fr-FR").format
+    : (value: unknown) => value.toString()
+}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 9a687a44b47f21b2aedeef43b0d194a573d152ac..0396a6ddff9b5f48382d0a55ea776aaf1f486aff 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -33,6 +33,7 @@
   import { entityByKey } from "$lib/entities"
   import { metadata } from "$lib/metadata"
   import type { ParametricReform } from "$lib/reforms"
+  import { reformMetadataByName } from "$lib/reforms"
   import type {
     Axis,
     PopulationWithoutId,
@@ -57,8 +58,7 @@
   let axisBySituationIndex: { [situationIndex: string]: Axis } = {}
 
   let currentBillName: string | undefined =
-    metadata.reforms.find(({ name }) => name === $session.reformName) ===
-    undefined
+    reformMetadataByName[$session.reformName] === undefined
       ? undefined
       : $session.reformName
   const billName: Writable<string | undefined> = writable(currentBillName)
@@ -70,7 +70,7 @@
   const firstWaterfallShown: Writable<boolean> = writable(false)
   setContext("firstWaterfallShown", firstWaterfallShown)
 
-  const date = writable("2022-01-01") // new Date().toISOString().split("T")[0]
+  const date = writable("2023-01-01") // new Date().toISOString().split("T")[0]
   setContext("date", date)
 
   const showNulls = writable(false)
@@ -94,10 +94,13 @@
   )
   setContext("decompositionByName", decompositionByName)
 
+  const editTestCase: Writable<boolean> = writable(false)
+  setContext("editTestCase", editTestCase)
+
   const evaluationByNameArray = writable(
     new Array(testCasesCore.length)
       .fill(null)
-      .map((_, situationIndex) => ({} as EvaluationByName)),
+      .map((/* _, situationIndex */) => ({} as EvaluationByName)),
   )
   setContext("evaluationByNameArray", evaluationByNameArray)
 
@@ -136,7 +139,7 @@
     writable({})
   setContext("requestedCalculationByName", requestedCalculationByName)
 
-  const testCaseIndex: Writable<number | null> = writable(null)
+  const testCaseIndex: Writable<number> = writable(0)
   setContext("testCaseIndex", testCaseIndex)
 
   const testCasesValue: Situation[] = testCasesCore
@@ -973,13 +976,13 @@
 
 <NavBar />
 
-<div class="mt-[5.5rem]">
+<div class="mt-[3.5rem]">
   <slot />
 </div>
 
 <Modals>
   <div
-    class="bg-black bg-opacity-50 bottom-0 fixed left-0 right-0 top-0"
+    class="bg-black bg-opacity-50 bottom-0 fixed left-0 right-0 top-0 z-50"
     on:click={closeModal}
     slot="backdrop"
   />
diff --git a/src/routes/contribuer.svelte b/src/routes/contribuer.svelte
index e239cf7daf3dac2d7749bd5d055ef54d079a878a..ee1cf087e2b3058ecfb9e5517002c9dd6f57a6fa 100644
--- a/src/routes/contribuer.svelte
+++ b/src/routes/contribuer.svelte
@@ -44,20 +44,13 @@
           <div class="flex items-center">
             <svg
               aria-hidden="true"
-              class="fill-current h-5 w-5 text-white  mx-1"
+              class="h-5 w-5 fill-current text-[#FFAC33] mx-1"
               viewBox="0 0 24 22"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                class="text-[#FFAC33]"
                 d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
               />
-              <path
-                d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
-              />
-              <path
-                d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
-              />
             </svg>
             À vérifier
           </div></span
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1a56fef58f559a70ba72130cac1792cb8ee04040..d22380b344c52438570fb4591d3887e31585893c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,17 @@
 <script lang="ts">
-  import type { Audit } from "@auditors/core"
-  import { auditSetNullish, auditTrimString, cleanAudit } from "@auditors/core"
+  import {
+    Audit,
+    auditInteger,
+    auditStringToBoolean,
+    auditStringToNumber,
+  } from "@auditors/core"
+  import {
+    auditOptions,
+    auditSetNullish,
+    auditTrimString,
+    cleanAudit,
+  } from "@auditors/core"
+  import Fuse from "fuse.js"
   import introJs from "intro.js"
   import { getContext, setContext } from "svelte"
   import { openModal } from "svelte-modals"
@@ -11,46 +22,38 @@
   import { goto } from "$app/navigation"
   import { page, session } from "$app/stores"
   import { auditQuerySingleton } from "$lib/auditors/queries"
-  import type {
-    CalculationByName,
-    RequestedCalculationByName,
-  } from "$lib/calculations"
-  import { requestAllCalculations, requestCalculation } from "$lib/calculations"
+  import type { RequestedCalculationByName } from "$lib/calculations"
+  import { requestAllCalculations } from "$lib/calculations"
+  import ReformsChanges from "$lib/components/ReformsChanges.svelte"
   import ShareLinkModal from "$lib/components/ShareLinkModal.svelte"
   import TestCaseEdit from "$lib/components/test_cases/TestCaseEdit.svelte"
-  import TestCasesPane from "$lib/components/test_cases/TestCasesPane.svelte"
-  import VariableReferredInputsPane from "$lib/components/variables/VariableReferredInputsPane.svelte"
+  import TestCaseView from "$lib/components/test_cases/TestCaseView.svelte"
   import StartTutorial from "$lib/components/tutorial/StartTutorial.svelte"
+  import NonVariableReferredParameter from "$lib/components/variables/NonVariableReferredParameter.svelte"
+  import VariableReferredInputsPane from "$lib/components/variables/VariableReferredInputsPane.svelte"
   import VariableReferredParameters from "$lib/components/variables/VariableReferredParameters.svelte"
   import type { DecompositionByName } from "$lib/decompositions"
-  import type { EditionMode } from "$lib/editions"
+  import type { DisplayMode, SingleTestCaseDisplayMode } from "$lib/displays"
   import { entityByKey } from "$lib/entities"
   import type { ParametricReform } from "$lib/reforms"
-  import type { Axis, PopulationWithoutId, Situation } from "$lib/situations"
+  import type { PopulationWithoutId, Situation } from "$lib/situations"
   import { getPopulationReservedKeys, testCasesCore } from "$lib/situations"
   import type { SelfTargetAProps } from "$lib/urls"
-  import { stringifyQuery } from "$lib/urls"
+  import { newSimulationUrl } from "$lib/urls"
   import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
-
-  interface SimulationQuery {
-    action?: string
-  }
-
-  interface ValidSimulationQuery {
-    action?: string
-  }
+  import { variableSummaryByName } from "$lib/variables"
 
   const action = writable(undefined)
   setContext("action", action)
   const adaptAmountsScale = writable(true)
   setContext("adaptAmountsScale", adaptAmountsScale)
-  const axes = getContext("axes") as Writable<Axis[][]>
-  const billName = getContext("billName") as Writable<string | undefined>
-  const calculationByName = getContext(
-    "calculationByName",
-  ) as Writable<CalculationByName>
+  // const billName = getContext("billName") as Writable<string | undefined>
   const date = getContext("date") as Writable<string>
-  let editionMode: EditionMode = null
+  const decompositionByName = getContext(
+    "decompositionByName",
+  ) as Writable<DecompositionByName>
+  let displayMode: DisplayMode = { mode: "single_test_case", testCaseIndex: 0 }
+  const editTestCase = getContext("editTestCase") as Writable<boolean>
   const firstWaterfallShown = getContext(
     "firstWaterfallShown",
   ) as Writable<boolean>
@@ -68,10 +71,9 @@
   const requestedCalculationByName = getContext(
     "requestedCalculationByName",
   ) as Writable<RequestedCalculationByName>
-  let showStaticTutorial = false
   let showTutorial = true
   let staticTutorialShown = false
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
+  const testCaseIndex = getContext("testCaseIndex") as Writable<number>
   const testCases = getContext("testCases") as Writable<Situation[]>
   const valuesByCalculationNameByVariableNameArray = getContext(
     "valuesByCalculationNameByVariableNameArray",
@@ -79,22 +81,15 @@
   let windowInnerWidth: number | undefined = undefined
   const year = getContext("year") as Writable<number>
 
-  $: query = ensureValidQuery($page.url.searchParams)
-
-  $: $action = query.action
+  let term = ""
+  const variables = Object.values(variableSummaryByName)
+  const fuse = new Fuse(variables, {
+    keys: ["ux_name", "label", "name"],
+  })
 
-  $: editionModeFromAction($action)
-
-  $: if (windowInnerWidth >= 768) {
-    showStaticTutorial = true
-  }
+  $: displayMode = ensureValidEditionMode($page.url.searchParams)
 
-  $: if (showStaticTutorial && editionMode === null) {
-    editionMode = {
-      mode: "tutorial",
-    }
-    $testCaseIndex = null
-  }
+  $: found = fuse.search(term, { limit: 50 })
 
   $: if (
     browser &&
@@ -197,7 +192,7 @@
           //   title: "Ouvrir la décomposition 👀",
           //   element: document.querySelector("#situation_1_toggle"),
           //   intro:
-          //     "Quand la décomposition des dispositifs est repliée, ouvrez-la en cliquant sur « Voir la décomposition ».",
+          //     "Quand la décomposition des dispositifs est repliée, ouvrez-la en cliquant sur «&nbsp;Voir la décomposition&nbsp;».",
           // },
           {
             title: "Synthèse des impacts",
@@ -214,15 +209,15 @@
         ],
       })
       // .onbeforeexit(function () {
-      //   return confirm("Voulez-vous vraiment quitter le tutoriel ?")
+      //   return confirm("Voulez-vous vraiment quitter le tutoriel&nbsp;?")
       // })
       .start()
   }
 
-  function asEditionModeWithTestCase(editionMode: EditionMode): {
+  function asEditionModeWithTestCase(displayMode: DisplayMode): {
     testCaseIndex: number
   } {
-    return editionMode as { testCaseIndex: number }
+    return displayMode as { testCaseIndex: number }
   }
 
   function auditSimulationQuery(
@@ -250,13 +245,100 @@
 
     audit.attribute(
       data,
-      "action",
+      "mode",
+      true,
+      errors,
+      remainingKeys,
+      auditQuerySingleton(
+        auditTrimString,
+        auditOptions(["mosaic", "single_test_case"]),
+        auditSetNullish("single_test_case"),
+      ),
+    )
+
+    audit.attribute(
+      data,
+      "parameter",
       true,
       errors,
       remainingKeys,
       auditQuerySingleton(auditTrimString),
     )
 
+    audit.attribute(
+      data,
+      "parameters",
+      true,
+      errors,
+      remainingKeys,
+      auditQuerySingleton(auditTrimString),
+    )
+
+    audit.attribute(
+      data,
+      "variable",
+      true,
+      errors,
+      remainingKeys,
+      auditQuerySingleton(auditTrimString),
+    )
+
+    audit.attribute(
+      data,
+      "edit",
+      true,
+      errors,
+      remainingKeys,
+      auditQuerySingleton(auditTrimString, auditStringToBoolean),
+    )
+
+    audit.attribute(
+      data,
+      "test_case",
+      true,
+      errors,
+      remainingKeys,
+      auditQuerySingleton(auditTrimString, auditStringToNumber, auditInteger),
+      auditSetNullish(0),
+    )
+
+    if (
+      data.parameter !== undefined &&
+      errors.parameter === undefined &&
+      data.parameters !== undefined &&
+      errors.parameters === undefined
+    ) {
+      errors.parameter = 'Value is exclusive to "parameters"'
+      errors.parameters = 'Value is exclusive to "parameter"'
+    }
+
+    if (Object.keys(errors).length === 0) {
+      if (data.edit !== undefined) {
+        data.editMode = data.edit
+        delete data.edit
+      }
+
+      if (data.parameter !== undefined) {
+        data.parameterName = data.parameter
+        delete data.parameter
+      }
+
+      if (data.parameters !== undefined) {
+        data.parametersVariableName = data.parameters
+        delete data.parameters
+      }
+
+      if (data.test_case !== undefined) {
+        data.testCaseIndex = data.test_case
+        delete data.test_case
+      }
+
+      if (data.variable !== undefined) {
+        data.variableName = data.variable
+        delete data.variable
+      }
+    }
+
     return audit.reduceRemaining(
       data,
       errors,
@@ -265,19 +347,26 @@
     )
   }
 
-  function changeBillName({ target }: Event) {
-    const { value } = target as HTMLSelectElement
-    $billName = value === "undefined" ? undefined : value
-    $requestedCalculationByName = requestCalculation(
-      $requestedCalculationByName,
-      "bill",
-      undefined,
-    )
-    $requestedCalculationByName = requestCalculation(
-      $requestedCalculationByName,
-      "amendment",
-      undefined,
-    )
+  // function changeBillName({ target }: Event) {
+  //   const { value } = target as HTMLSelectElement
+  //   $billName = value === "undefined" ? undefined : value
+  //   $requestedCalculationByName = requestCalculation(
+  //     $requestedCalculationByName,
+  //     "bill",
+  //     undefined,
+  //   )
+  //   $requestedCalculationByName = requestCalculation(
+  //     $requestedCalculationByName,
+  //     "amendment",
+  //     undefined,
+  //   )
+  // }
+
+  function changeDecompositionByName(
+    situationIndex: number,
+    newDecompositionByName: DecompositionByName,
+  ): void {
+    $decompositionByName = newDecompositionByName
   }
 
   function changeInputInstantsByVariableName(
@@ -300,94 +389,33 @@
     $testCases = situations
   }
 
-  function closeEditionPane() {
-    if (editionMode.mode === "tutorial") {
-      editionMode = null
-      showStaticTutorial = false
-    } else {
-      goto(
-        newSimulationUrl({
-          ...query,
-          action: null,
-        }),
-        { noscroll: true },
-      )
-    }
-  }
-
-  function editSituation({
-    detail: testCaseIndex,
-  }: {
-    detail: number | null
-  }): void {
+  function closeParametersEditionPane() {
     goto(
       newSimulationUrl({
-        ...query,
-        action: testCaseIndex === null ? "" : `situations/${testCaseIndex}`,
+        ...displayMode,
+        parameterName: undefined,
+        parametersVariableName: undefined,
       }),
       { noscroll: true },
     )
   }
 
-  function editionModeFromAction(action: string | undefined | null) {
-    if (action != null) {
-      {
-        const match = /^situations\/(\d+)$/.exec(action)
-        if (match !== null) {
-          editionMode = {
-            mode: "test_case",
-            testCaseIndex: parseInt(match[1]),
-          }
-          $testCaseIndex = editionMode.testCaseIndex
-          return
-        }
-      }
-
-      {
-        const match = /^situations\/(\d+)\/variables\/([^/]+)\/inputs$/.exec(
-          action,
-        )
-        if (match !== null) {
-          editionMode = {
-            mode: "test_case_with_variable_inputs",
-            testCaseIndex: parseInt(match[1]),
-            variableName: match[2],
-          }
-          $testCaseIndex = editionMode.testCaseIndex
-          return
-        }
-      }
-
-      {
-        const match = /^variables\/([^/]+)\/parameters$/.exec(action)
-        if (match !== null) {
-          editionMode = {
-            mode: "variable_parameters",
-            variableName: match[1],
-          }
-          $testCaseIndex = null
-          return
-        }
-      }
-    }
-
-    editionMode = null
-    $testCaseIndex = null
-  }
-
-  function ensureValidQuery(query: URLSearchParams): ValidSimulationQuery {
-    const [validQuery, queryError] = auditSimulationQuery(cleanAudit, query)
+  function ensureValidEditionMode(query: URLSearchParams): DisplayMode {
+    const [displayMode, queryError] = auditSimulationQuery(
+      cleanAudit,
+      query,
+    ) as [DisplayMode, unknown]
     if (queryError !== null) {
       console.warn(
         `Query error at ${$page.url.pathname}: ${JSON.stringify(
           queryError,
           null,
           2,
-        )}\n\n${JSON.stringify(validQuery, null, 2)}`,
+        )}\n\n${JSON.stringify(displayMode, null, 2)}`,
       )
-      return {}
+      return { mode: "single_test_case", testCaseIndex: 0 }
     }
-    return validQuery
+    return displayMode
   }
 
   export function* iterTestCasesVariablesName(
@@ -422,7 +450,7 @@
     ) {
       return {
         href: newSimulationUrl({
-          ...query,
+          ...displayMode,
           action: urlPath.replace(/^\/+/, ""),
         }),
         "sveltekit:noscroll": true,
@@ -434,17 +462,9 @@
     }
   }
 
-  function newSimulationUrl({
-    action,
-  }: SimulationQuery & { dev?: boolean } = {}): string {
-    const query: {
-      action?: string
-    } = {}
-    if (action) {
-      query.action = action
-    }
-    const queryString = stringifyQuery(query)
-    return `/${queryString ? "?" + queryString : ""}`
+  function onInput(event: Event) {
+    const target = event.target as HTMLInputElement
+    term = target.value
   }
 
   function reset(): void {
@@ -480,9 +500,21 @@
     })
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function signalStaticTutorial(_element) {
     staticTutorialShown = true
   }
+
+  function toggleEdit(): void {
+    $editTestCase = !$editTestCase
+    goto(
+      newSimulationUrl({
+        ...(displayMode as SingleTestCaseDisplayMode),
+        editMode: !(displayMode as SingleTestCaseDisplayMode).editMode,
+      }),
+      { noscroll: true },
+    )
+  }
 </script>
 
 <svelte:window bind:innerWidth={windowInnerWidth} />
@@ -490,189 +522,112 @@
   <title>Calculs | {$session.title}</title>
 </svelte:head>
 
-<main class="fond flex flex-col md:flex-row">
-  <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement et cas type)-->
-  {#if editionMode !== null}
+<main class="fond flex">
+  <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
+  {#if displayMode.mode !== "single_test_case" || !displayMode.editMode}
     <div
-      class="bg-white flex-none pb-4 lg:pb-0 shadow-xl w-full md:w-1/2 lg:w-1/3 2xl:w-1/4"
+      class="bg-white flex-none shadow-xl w-full md:w-1/2"
       id="situation_left_part_law"
     >
-      <div class="flex justify-between pr-4 pt-2 pb-4 w-full">
-        <div class="flex-col mx-5 rounded text-xs" id="situation_color_code">
-          <p class="mr-1 italic">Légende :</p>
-          <div class="flex">
-            <p class="mr-1 font-bold" id="situation_color_code_black">
-              Loi en vigueur
-            </p>
-            <p
-              class="mr-1 text-le-rouge-bill font-bold"
-              title="en construction…"
-              id="situation_color_code_red"
-            >
-              PLF 2022 (🚧)
-            </p>
-            <p class="mr-1 bg-le-jaune px-1" id="situation_color_code_yellow">
-              Votre réforme
-            </p>
-          </div>
-        </div>
-        <!-- Bouton de fermeture du panneau de gauche -->
-        <button on:click={closeEditionPane}>
-          <svg
-            class="fill-current text-gray-500 hover:text-gray-900"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-            ><path d="M0 0h24v24H0z" fill="none" /><path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            /></svg
-          ></button
-        >
-      </div>
-
-      {#if editionMode.mode === "test_case"}
-        <h1
-          class="font-bold mb-5 mt-1 mx-5 text-2xl lg:text-3xl xl:text-4xl text-gray-600"
-        >
-          Configurer le cas type
-        </h1>
-
-        <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto">
-          <p
-            class="text-sm my-4 text-gray-700 rounded bg-le-bleu-light p-2 mx-5 shadow-md"
-          >
-            📌 Par défaut, toutes les caractéristiques du cas type sont
-            considérées comme étant stables depuis 3 ans.
-          </p>
+      <div class="flex min-h-full ">
+        <!--Partie I Paramètres de la loi-->
+        <div class="z-40 w-2/3 bg-white shadow-xl">
+          <div class="bg-white h-12 flex pr-4 pt-2 justify-end items-start">
+            <!-- {#if displayMode.parametersVariableName !== undefined}
+             Searchbar 
+              <div
+                class="flex-col px-5 z-50 w-1/4 md:w-2/5 focus-within:w-full hover:w-full placeholdershown:w-full"
+              >
+                <div
+                  class="flex mt-1 bg-gray-100 p-0.5 text-gray-400 focus-within:text-gray-900 items-center rounded-t-md shadow-inner-md border-b "
+                >
+                  <div class="pointer-events-none">
+                    <svg
+                      class="m-1 fill-current inline-flex text-black"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      height="18"
+                      ><path fill="none" d="M0 0h24v24H0z" /><path
+                        d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"
+                      /></svg
+                    >
+                  </div>
+                  <input
+                    class="text-sm bg-gray-100 text-gray-900 w-full focus:outline-none placeholder:font-light"
+                    id="variables_search"
+                    on:input={onInput}
+                    placeholder="Rechercher un dispositif ..."
+                    type="search"
+                  />
+                </div>
+
+                <div class="flex bg-white shadow-lg w-full rounded  ">
+                  {#if found.length > 0}
+                    <ul
+                      class="text-le-gris-dispositif list-disc list-inside p-4 h-[calc(100vh-10rem)] overflow-y-auto w-full "
+                    >
+                      {#each found as { item: variable }, index (`found_variable_$${index}`)}
+                        <li>
+                          <a
+                            class="link text-le-gris-dispositif-dark"
+                            href={newSimulationUrl({
+                              ...displayMode,
+                              parameterName: undefined,
+                              parametersVariableName: variable.name,
+                            })}
+                            >{variable.label ?? variable.name}
+                          </a>
+                        </li>
+                      {/each}
+                    </ul>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+            -->
 
-          <TestCaseEdit
-            inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            on:changeInputInstantsByVariableName={({ detail }) =>
-              changeInputInstantsByVariableName(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            on:changeSituation={({ detail }) =>
-              changeSituation(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            situation={$testCases[editionMode.testCaseIndex]}
-            situationIndex={editionMode.testCaseIndex}
-            valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            year={$year}
-          />
+            <!-- Bouton de fermeture du panneau de gauche -->
+            {#if displayMode.parameterName !== undefined || displayMode.parametersVariableName !== undefined}
+              <button class="h-10" on:click={closeParametersEditionPane}>
+                <svg
+                  class="fill-current text-gray-500 hover:text-black"
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  width="24px"
+                  fill="#000000"
+                  ><path d="M0 0h24v24H0z" fill="none" /><path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                  /></svg
+                ></button
+              >
+            {/if}
+          </div>
 
-          <h2 class="font-bold text-xl pt-3">
-            Définir d'autres caractéristiques
-          </h2>
-          <div
-            class="bg-white border-le-bleu-light border-4 shadow-lg rounded-md my-5 mx-2"
-          >
+          {#if displayMode.parameterName !== undefined}
             <h1
-              class="bg-le-bleu-light text-2xl font-light text-gray-600 py-3 px-4 "
+              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
             >
-              Ajouter d'autres caractéristiques
+              Modifier la loi
             </h1>
 
-            <p class="py-2 px-4 font-light text-gray-600">
-              Depuis les cas type à droite de l'interface, <span
-                class="font-normal">cliquez sur le nom d'un dispositif</span
-              > de la colonne de droite pour éditer les variables entrant dans le
-              calcul de ce dispositif.
-            </p>
-
-            <div class="m-4">
-              <img
-                src="/tutoriel-edition-cas-type-variables-supp.png"
-                alt="Tutoriel indiquant de cliquer sur un dispositif du cas type pour pouvoir ajouter d'autres caractéristiques au cas type."
-              />
+            <div class="h-[calc(100vh-10.1rem)] overflow-y-auto">
+              <div class="bg-white ml-5">
+                <NonVariableReferredParameter
+                  date={$date}
+                  name={displayMode.parameterName}
+                />
+              </div>
             </div>
-          </div>
-        </div>
-      {:else if editionMode.mode === "test_case_with_variable_inputs"}
-        <h1
-          class="font-bold mb-5 mt-1 mx-5 text-2xl lg:text-3xl xl:text-4xl text-gray-600"
-        >
-          Configurer le cas type
-        </h1>
-
-        <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto">
-          <p
-            class="text-sm my-4 text-gray-700 rounded bg-le-bleu-light p-2 mx-5 shadow-md"
-          >
-            📌 Par défaut, toutes les caractéristiques du cas type sont
-            considérées comme étant stables depuis 3 ans.
-          </p>
-
-          <TestCaseEdit
-            inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            on:changeInputInstantsByVariableName={({ detail }) =>
-              changeInputInstantsByVariableName(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            on:changeSituation={({ detail }) =>
-              changeSituation(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            situation={$testCases[editionMode.testCaseIndex]}
-            situationIndex={editionMode.testCaseIndex}
-            valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            year={$year}
-          />
-
-          <VariableReferredInputsPane
-            date={$date}
-            inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            name={editionMode.variableName}
-            on:changeInputInstantsByVariableName={({ detail }) =>
-              changeInputInstantsByVariableName(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            on:changeSituation={({ detail }) =>
-              changeSituation(
-                asEditionModeWithTestCase(editionMode).testCaseIndex,
-                detail,
-              )}
-            situation={$testCases[editionMode.testCaseIndex]}
-            situationIndex={editionMode.testCaseIndex}
-            valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-              editionMode.testCaseIndex
-            ]}
-            year={$year}
-          />
-        </div>
-      {:else if editionMode.mode === "tutorial"}
-        <h1
-          class="font-bold mb-5 mt-1 mx-5 text-2xl lg:text-3xl xl:text-4xl  text-gray-600"
-          use:signalStaticTutorial
-        >
-          Amender la loi
-        </h1>
-        <StartTutorial />
-      {:else if editionMode.mode === "variable_parameters"}
-        <h1
-          class="font-bold mb-5 mt-1 mx-5 text-2xl lg:text-3xl xl:text-4xl  text-gray-600"
-        >
-          Amender la loi
-        </h1>
+          {:else if displayMode.parametersVariableName !== undefined}
+            <h1
+              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
+            >
+              Modifier la loi
+            </h1>
 
-        <!-- Menu quand on aura la version abrégée
+            <!-- Menu quand on aura la version abrégée
             <div class="flex space-x-8 mb-8">
               <div>
                 <a class="text-le-bleu text-base lg:text-lg " href="">
@@ -689,29 +644,94 @@
               </div>
             </div>
             -->
-        <div class="lg:h-[calc(100vh-13rem)] lg:overflow-y-auto">
-          <div class="bg-white mr-4">
-            <VariableReferredParameters
-              date={$date}
-              name={editionMode.variableName}
-            />
+            <div class="h-[calc(100vh-12.1rem)] overflow-y-auto">
+              <div class="bg-white ml-5">
+                <VariableReferredParameters
+                  date={$date}
+                  name={displayMode.parametersVariableName}
+                />
+              </div>
+            </div>
+          {:else}
+            <h1
+              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
+              use:signalStaticTutorial
+            >
+              Modifier la loi
+            </h1>
+
+            <div class="h-[calc(100vh-13rem)]">
+              <StartTutorial {displayMode} />
+            </div>
+          {/if}
+        </div>
+        <!--Partie II modification de la loi-->
+        <div class="flex-col z-30 w-1/3 bg-gray-200 shadow-lg">
+          <button
+            class="h-12 ml-2 lg:ml-4 justify-center pt-3 flex items-center text-gray-600 hover:text-black uppercase hover:underline"
+            on:click={reset}
+          >
+            <!-- Material Icon Restart Alt -->
+            <svg
+              class="fill-current mr-1 inline-flex"
+              xmlns="http://www.w3.org/2000/svg"
+              height="16px"
+              viewBox="0 0 24 24"
+              width="16px"
+              fill="#000000"
+            >
+              <path
+                d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"
+              />
+              <path
+                d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"
+              /></svg
+            >
+            <span class="text-xs md:text-sm"> Réinitialiser</span>
+          </button>
+
+          <h3
+            class="font-light mt-3 lg:mt-2 mr-2 text-xl lg:text-2xl text-black border-b border-black pb-3 "
+            use:signalStaticTutorial
+          >
+            <span class="ml-2 lg:ml-4"> Modifications </span>
+          </h3>
+
+          <div class="h-[calc(100vh-10rem)] overflow-y-auto">
+            <div
+              class="mt-5 flex-col mx-2 rounded text-xs "
+              id="situation_color_code"
+            >
+              <!--
+            <p class="mr-1 italic">Légende :</p>
+            <div class="flex-col">
+              <p class="mr-1 font-bold">Loi en vigueur</p>
+              <p
+                class="mr-1 text-le-rouge-bill font-bold"
+                title="en construction…"
+              >
+                PLF 2022
+              </p>
+              <p class="bg-le-jaune px-1">Votre réforme</p>
+            </div>
+            -->
+            </div>
+
+            <ReformsChanges {displayMode} />
           </div>
         </div>
-      {/if}
+      </div>
     </div>
   {/if}
 
-  <!-- Panneau de droite pour les impacts et notamment le waterfall-->
-  <div
-    class="w-full {editionMode !== null ? 'hidden md:block' : ''}"
-    id="situation_right_part_impacts"
-  >
-    <div class="my-2 px-6 lg:px-10">
+  <!-- Panneau central pour les impacts -->
+  <div class="w-full md:w-1/2" id="situation_right_part_impacts">
+    <div class="px-6 lg:px-10">
       <!--
         Note: When you change the height below (h-...), don't forget to adjust
-        the height of the div enclosing the TestCasesPane below.
+        the height of the div enclosing the test cases below.
       -->
-      <div class="flex lg:h-8 justify-end">
+      <div class="flex justify-start">
         <!-- <label
           ><input bind:checked={$adaptAmountsScale} type="checkbox" />
           <span class="hidden text-xs lg:inline text-gray-600">
@@ -733,74 +753,190 @@
           {/each}
         </select> -->
 
-        <div class="flex items-center">
-          <button
-            class="bg-gray-200 flex justify-center text-gray-900 shadow-md hover:bg-gray-400 px-5 mr-2 rounded p-2 uppercase text-sm"
-            on:click={reset}
+        <div class="h-10 flex pt-2">
+          <!-- <button
+            class="flex items-center text-gray-600 hover:text-black pr-3 mr-2 uppercase border-r border-gray-500 hover:underline"
           >
-            <!-- Material Icon Restart Alt -->
+            Remix icon - layout-5-line
             <svg
-              class="fill-current lg:mr-2"
+              class="fill-current mr-1 inline-flex"
               xmlns="http://www.w3.org/2000/svg"
-              height="18px"
+              height="14px"
               viewBox="0 0 24 24"
-              width="18px"
-              fill="#000000"
-            >
-              <path
-                d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"
-              />
-              <path
-                d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"
+              width="14px"
+              ><path fill="none" d="M0 0h24v24H0z" /><path
+                d="M3 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3zm4-11H4v9h3v-9zm13 0H9v9h11v-9zm0-5H4v3h16V5z"
               /></svg
             >
-            <span class="hidden lg:flex"> Réinitialiser</span>
-          </button>
+
+            <span class="text-xs">Focus</span>
+          </button> -->
 
           <button
-            class="bg-gray-200 flex justify-center text-gray-900 shadow-md hover:bg-gray-400 px-5 rounded p-2 uppercase text-sm"
+            class="flex items-center text-gray-600 hover:text-black uppercase hover:underline pr-2 mr-2 border-r border-gray-500"
             on:click={shareLink}
             id="situation_savebutton"
           >
             <!-- Material Icon Share -->
             <svg
-              class="fill-current lg:mr-2"
+              class="fill-current mr-1 inline-flex"
               xmlns="http://www.w3.org/2000/svg"
-              height="18px"
+              height="14px"
               viewBox="0 0 24 24"
-              width="18px"
+              width="14px"
               fill="#000000"
               ><path d="M0 0h24v24H0z" fill="none" /><path
                 d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
               />
             </svg>
-            <span class="hidden lg:flex"> Sauvegarder / partager</span>
+            <span class="text-xs md:text-sm"> Sauvegarder / partager</span>
           </button>
 
-          <!-- <div class="justify-self-end">
-            <button
-              class="bg-le-bleu text-white shadow-md hover:bg-blue-900 px-10 rounded p-2 uppercase text-sm"
-              on:click={() => submit(new Set(calculationNames))}>Estimer</button
-            >
-          </div> -->
+          <select
+            class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
+            bind:value={$testCaseIndex}
+          >
+            {#each $testCases as situation, situationIndex}
+              <option class="w-80 bg-white py-1 text-sm " value={situationIndex}
+                >{situation.title}</option
+              >
+            {/each}
+          </select>
         </div>
       </div>
-      <h1 class="font-bold my-5 text-2xl lg:text-3xl xl:text-4xl text-gray-600">
-        Cotis. & presta. sociales d'un cas type
+      <h1
+        class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+      >
+        Impacts sur cas types /an
       </h1>
     </div>
     <!-- Cas types avec leur waterfall -->
-    <div
-      class="md:h-[calc(100vh-15rem)] lg:h-[calc(100vh-13rem)] md:overflow-y-auto px-6 lg:px-10"
-    >
-      <TestCasesPane
-        date={$date}
-        {editionMode}
-        on:editSituation={editSituation}
+    <div class=" px-6 lg:px-10">
+      <TestCaseView
+        decompositionByName={$decompositionByName}
+        {displayMode}
+        on:changeDecompositionByName={({ detail }) =>
+          changeDecompositionByName($testCaseIndex, detail)}
+        on:changeSituation={({ detail }) =>
+          changeSituation($testCaseIndex, detail)}
+        on:toggleEdit={() => toggleEdit()}
+        situation={$testCases[$testCaseIndex]}
+        situationIndex={$testCaseIndex}
         year={$year}
       />
     </div>
   </div>
+
+  <!-- Panneau de droite pour l'édition de cas types -->
+  {#if displayMode.mode === "single_test_case" && displayMode.editMode}
+    <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40">
+      <div class="h-8 flex pt-3 justify-end mx-5">
+        <button
+          class="flex items-center text-gray-600 hover:text-black  uppercase hover:underline"
+          on:click={() => toggleEdit()}
+          title="Fermer l'édition du cas type"
+        >
+          <span class="text-xs">Quitter l'édition</span>
+          <!-- Material-icon : Close -->
+          <svg
+            class="fill-current inline-flex"
+            xmlns="http://www.w3.org/2000/svg"
+            height="18px"
+            viewBox="0 0 24 24"
+            width="18px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="h-[calc(100vh-7.8rem)] overflow-y-auto">
+        <TestCaseEdit
+          inputInstantsByVariableName={$inputInstantsByVariableNameArray[
+            displayMode.testCaseIndex
+          ]}
+          on:changeInputInstantsByVariableName={({ detail }) =>
+            changeInputInstantsByVariableName(
+              asEditionModeWithTestCase(displayMode).testCaseIndex,
+              detail,
+            )}
+          on:changeSituation={({ detail }) =>
+            changeSituation(
+              asEditionModeWithTestCase(displayMode).testCaseIndex,
+              detail,
+            )}
+          situation={$testCases[displayMode.testCaseIndex]}
+          situationIndex={displayMode.testCaseIndex}
+          valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+            displayMode.testCaseIndex
+          ]}
+          year={$year}
+        />
+        <div
+          class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-4"
+        >
+          <p class="px-2 pb-1">
+            <span class="font-bold"
+              >Vous avez besoin de configurer plus précisemment votre cas type ?</span
+            >
+            Contactez-nous sur
+            <a
+              class="underline hover:text-le-bleu"
+              href="mailto:leximpact@an.fr">leximpact@an.fr</a
+            >.
+          </p>
+          <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded">
+            <p>
+              ⚠️ Le mode d'édition avancée est fonctionnel mais encore difficile
+              d'accès. Si vous avez besoin d'utiliser votre cas type dans un
+              amendement, nous vous proposons une relecture.
+            </p>
+            <p class="mt-2">
+              Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et
+              transmettez-nous le lien de votre copie de travail ainsi qu'un
+              résumé du cas type que vous cherchez à concevoir.
+            </p>
+          </div>
+        </div>
+        {#if displayMode.variableName === undefined}
+          <h2 class="text-xl pt-3 ml-4 mb-2">Ajouter des caractéristiques :</h2>
+          <p class="text-sm mx-4 text-gray-700 mb-10">
+            <span class="font-sm">↖️ Cliquez sur le nom d'un dispositif</span> affiché
+            sur le cas type pour éditer les variables entrant dans le calcul de ce
+            dispositif.
+          </p>
+        {:else}
+          <VariableReferredInputsPane
+            date={$date}
+            inputInstantsByVariableName={$inputInstantsByVariableNameArray[
+              displayMode.testCaseIndex
+            ]}
+            name={displayMode.variableName}
+            on:changeInputInstantsByVariableName={({ detail }) =>
+              changeInputInstantsByVariableName(
+                asEditionModeWithTestCase(displayMode).testCaseIndex,
+                detail,
+              )}
+            on:changeSituation={({ detail }) =>
+              changeSituation(
+                asEditionModeWithTestCase(displayMode).testCaseIndex,
+                detail,
+              )}
+            situation={$testCases[displayMode.testCaseIndex]}
+            situationIndex={displayMode.testCaseIndex}
+            valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+              displayMode.testCaseIndex
+            ]}
+            year={$year}
+          />
+        {/if}
+      </div>
+    </div>
+  {/if}
 </main>
 
 <style>
diff --git a/src/routes/metadata.json.ts b/src/routes/metadata.json.ts
new file mode 100644
index 0000000000000000000000000000000000000000..20770060b0d22e6b7d0986202f003d10049d2822
--- /dev/null
+++ b/src/routes/metadata.json.ts
@@ -0,0 +1,8 @@
+import type { JsonValue } from "@openfisca/json-model"
+import type { RequestHandler } from "@sveltejs/kit"
+
+import { metadata } from "$lib/metadata"
+
+export const get: RequestHandler = async () => {
+  return { body: metadata as unknown as JsonValue }
+}
diff --git a/src/routes/parameters/[parameter]/edit.svelte b/src/routes/parameters/[parameter]/edit.svelte
index bc06736bd1f0652e0edac06529644f0c49eae2f8..1fc1821f5e6ac59b2bc2e69d93f68ba618f67b28 100644
--- a/src/routes/parameters/[parameter]/edit.svelte
+++ b/src/routes/parameters/[parameter]/edit.svelte
@@ -8,7 +8,6 @@
   import type { LoadInput, LoadOutput } from "@sveltejs/kit"
   import yaml from "js-yaml"
 
-  import { metadata } from "$lib/metadata"
   import {
     getParameter,
     labelFromParameterClass,
@@ -215,132 +214,147 @@
 
 <main class="flex items-center justify-center fond">
   <div class="bg-white max-w-screen-md ">
-    <form class="flex-col items-start pb-4" on:submit|preventDefault={save}>
+    <form class=" flex-col items-start pb-4" on:submit|preventDefault={save}>
       <div class="p-10">
         <!-- Partie modification de l'intitulé-->
-        <h1 class="font-serif text-gray-700 pt-7 pb-3">
-          {#each [...iterParameterAncestors(processedParameter.parent)] as ancestor}
-            <!-- svelte-ignore a11y-missing-attribute -->
-            <a
-              class="link text-gray-500"
-              {...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
-              >{ancestor.title}</a
+        <p class="uppercase mb-2">Modification du paramètre :</p>
+        <div>
+          <div class="border-l-2 border-black pl-4 mb-4 ">
+            <p class="text-3xl font-serif ">
+              <span class="font-bold">{processedParameter.title}</span> <br />
+            </p>
+            <span class="text-sm font-serif italic"
+              >{processedParameter.description}</span
             >
-            &gt;
-          {/each}
-          <p class="text-3xl font-bold mb-4 ">
-            {processedParameter.title}
-          </p>
-        </h1>
-        <h2 class="font-serif font-bold text-xl pt-7 pb-3">
-          Modifier les intitulés
-        </h2>
-        <div class="flex-col">
-          <div class="inline-flex">
-            <label class="my-2 text-xs">
-              Nom court
-              <input
-                class="flex font-serif rounded border-gray-400 focus:ring-2 "
-                type="text"
-                required={showErrors}
-                bind:value={parameter.ux_name}
-              />
-              {#if showErrors && errors.ux_name !== undefined}
-                <p>{errors.ux_name}</p>
-              {/if}
-            </label>
+
+            <div class=" mt-7 p-2 rounded w-3/5 border ">
+              <h2 class="text-base ">Parents du paramètre&nbsp;:</h2>
+              <div class="flex-col">
+                {#each [...iterParameterAncestors(processedParameter.parent)] as ancestor}
+                  <!-- svelte-ignore a11y-missing-attribute -->
+                  <a
+                    class="text-sm link text-gray-500 font-serif"
+                    {...newSelfTargetAProps(`/parameters/${ancestor.name}`)}
+                  >
+                    {ancestor.title}</a
+                  >
+                  &nbsp;&gt;&nbsp;
+                {/each}
+                <span class="text-sm"> {processedParameter.title}</span>
+              </div>
+            </div>
           </div>
-          <div class="flex">
-            <label class="text-xs my-2">
-              Nom complet
-              <textarea
-                class="flex font-serif rounded border-gray-400 focus:ring-2 "
-                cols="40"
-                required={showErrors}
-                rows="2"
-                type="text"
-                bind:value={parameter.description}
-              />
-              {#if showErrors && errors.description !== undefined}
-                <p class="text-lg">{errors.description}</p>
-              {/if}
-            </label>
+
+          <h2 class="font-bold text-xl pt-7 pb-3">
+            Modifier les intitulés&nbsp;:
+          </h2>
+          <div class="flex-col">
+            <div class="inline-flex">
+              <label class="my-2 text-xs">
+                Nom court
+                <input
+                  class="border-b bg-gray-100 text-base flex font-serif rounded-t border-gray-400 focus:ring-2 p-2 mt-1"
+                  type="text"
+                  required={showErrors}
+                  bind:value={parameter.ux_name}
+                />
+                {#if showErrors && errors.ux_name !== undefined}
+                  <p>{errors.ux_name}</p>
+                {/if}
+              </label>
+            </div>
+            <div class="flex">
+              <label class="text-xs my-2">
+                Nom complet
+                <textarea
+                  class="bg-gray-100 text-base flex font-serif border-b rounded-t border-gray-400 focus:ring-2 p-2 mt-1"
+                  cols="40"
+                  required={showErrors}
+                  rows="2"
+                  type="text"
+                  bind:value={parameter.description}
+                />
+                {#if showErrors && errors.description !== undefined}
+                  <p class="text-lg">{errors.description}</p>
+                {/if}
+              </label>
+            </div>
+            <div class="flex">
+              <label class="text-xs my-2 ">
+                Description
+                <textarea
+                  class="bg-gray-100 text-sm flex font-serif italic border-b rounded-t border-gray-400 focus:ring-2 p-2 mt-1"
+                  cols="60"
+                  rows="10"
+                  type="text"
+                  bind:value={parameter.documentation}
+                />
+                {#if showErrors && errors.documentation !== undefined}
+                  <p>{errors.documentation}</p>
+                {/if}
+              </label>
+            </div>
           </div>
-          <div class="flex">
-            <label class="text-xs my-2 ">
-              Description
-              <textarea
-                class="flex font-serif italic rounded border-gray-400 focus:ring-2 "
-                cols="40"
-                rows="5"
-                type="text"
-                bind:value={parameter.documentation}
-              />
-              {#if showErrors && errors.documentation !== undefined}
-                <p>{errors.documentation}</p>
+          <!-- Partie modification de la valeur-->
+
+          <h2 class="font-bold text-xl pt-7 pb-3">
+            Modifier les valeurs&nbsp;:
+            {#each [...iterParameterAncestors(parameter.parent)] as ancestor}
+              {ancestor.title}
+              &gt;
+            {/each}
+          </h2>
+          <div class="inline-flex mb-4">
+            <label class="flex items-center my-4 text-base">
+              Type de paramètre&nbsp;:
+              <select
+                class="text-sm flex rounded p-1 ml-1 "
+                required={showErrors}
+                bind:value={parameter.class}
+              >
+                {#if parameter.class === undefined}
+                  <option disabled selected value={undefined}
+                    >Sélectionnez…</option
+                  >
+                {/if}
+                {#each Object.values(ParameterClass) as parameterClass}
+                  <option value={parameterClass}
+                    >{labelFromParameterClass(parameterClass)}</option
+                  >
+                {/each}
+              </select>
+              {#if showErrors && errors.class !== undefined}
+                <p>{errors.class}</p>
               {/if}
             </label>
           </div>
-        </div>
-        <!-- Partie modification de la valeur-->
-
-        <h2 class="font-serif font-bold text-xl pt-7 pb-3">
-          Modifier les valeurs
-          {#each [...iterParameterAncestors(parameter.parent)] as ancestor}
-            {ancestor.title}
-            &gt;
-          {/each}
-        </h2>
 
-        {#if parameter.class === ParameterClass.Node}
-          <NodeEdit {errors} bind:parameter {showErrors} />
-        {:else if parameter.class === ParameterClass.Scale}
-          <ScaleEdit {errors} bind:parameter bind:reviewed {showErrors} />
-        {:else if parameter.class === ParameterClass.Value}
-          <ValueEdit {errors} bind:parameter bind:reviewed {showErrors} />
-        {/if}
+          {#if parameter.class === ParameterClass.Node}
+            <NodeEdit {errors} bind:parameter {showErrors} />
+          {:else if parameter.class === ParameterClass.Scale}
+            <ScaleEdit {errors} bind:parameter bind:reviewed {showErrors} />
+          {:else if parameter.class === ParameterClass.Value}
+            <ValueEdit {errors} bind:parameter bind:reviewed {showErrors} />
+          {/if}
 
-        {#if parameter.referring_variables !== undefined}
-          <section>
-            <h1>Variables dépendantes</h1>
-            <ul class="list-disc list-inside">
-              {#each parameter.referring_variables as variableName}
-                <li>
-                  <!-- svelte-ignore a11y-missing-attribute -->
-                  <a class="link" href="/variables/{variableName}"
-                    >{variableName}</a
-                  >
-                </li>
-              {/each}
-            </ul>
-          </section>
-        {/if}
-        <div class="inline-flex">
-          <label class="mb-4 text-xs">
-            Type de paramètre
-            <select
-              class="flex rounded border-1 mx-auto text-xs "
-              required={showErrors}
-              bind:value={parameter.class}
-            >
-              {#if parameter.class === undefined}
-                <option disabled selected value={undefined}
-                  >Sélectionnez…</option
-                >
-              {/if}
-              {#each Object.values(ParameterClass) as parameterClass}
-                <option value={parameterClass}
-                  >{labelFromParameterClass(parameterClass)}</option
-                >
-              {/each}
-            </select>
-            {#if showErrors && errors.class !== undefined}
-              <p>{errors.class}</p>
-            {/if}
-          </label>
+          {#if parameter.referring_variables !== undefined}
+            <section>
+              <h2>Variables dépendantes</h2>
+              <ul class="list-disc list-inside">
+                {#each parameter.referring_variables as variableName}
+                  <li>
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <a class="link" href="/variables/{variableName}"
+                      >{variableName}</a
+                    >
+                  </li>
+                {/each}
+              </ul>
+            </section>
+          {/if}
         </div>
       </div>
-      <div class="bg-gray-200 p-10 mt-10 rounded">
+      <div class="bg-gray-200 p-10 mt-10">
         <!-- Synthèse de la proposition-->
         <h1 class="font-serif text-3xl pb-3">Envoi de la proposition</h1>
 
diff --git a/src/routes/parameters/[parameter]/index.json.ts b/src/routes/parameters/[parameter]/index.json.ts
index 464ac539f600b00b353435dca5fbd30051ce0f54..2fe97a69ec6591ba5d1834f9fd5a40177653f2ed 100644
--- a/src/routes/parameters/[parameter]/index.json.ts
+++ b/src/routes/parameters/[parameter]/index.json.ts
@@ -9,7 +9,6 @@ import {
 import type { RequestHandler } from "@sveltejs/kit"
 import { randomBytes } from "crypto"
 
-import { metadata } from "$lib/metadata"
 import { getParameter, rootParameter } from "$lib/parameters"
 import config from "$lib/server/config"
 
diff --git a/src/routes/parameters/[parameter]/index.svelte b/src/routes/parameters/[parameter]/index.svelte
index e47a493ea004e2f79e4d0763378c5ae8cd835dcb..d8f491efcdf217fa79a04b5686468ffbb1aa6b84 100644
--- a/src/routes/parameters/[parameter]/index.svelte
+++ b/src/routes/parameters/[parameter]/index.svelte
@@ -37,22 +37,4 @@
   <title>{parameter.name} | Paramètres | {$session.title}</title>
 </svelte:head>
 
-<a
-  href="/"
-  class="inline-flex items-center bg-gray-200 my-5 p-1 pr-2 text-xs rounded text-black shadow-md hover:bg-gray-400"
->
-  <!-- material icons - Arrow Back -->
-  <svg
-    class="flex mr-2 items-center"
-    xmlns="http://www.w3.org/2000/svg"
-    height="24px"
-    viewBox="0 0 24 24"
-    width="24px"
-    fill="#000000"
-    ><path d="M0 0h24v24H0z" fill="none" /><path
-      d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-    /></svg
-  >
-  Retour au simulateur Cotisations & prestations sociales
-</a>
 <ParameterView {parameter} />
diff --git a/src/routes/parameters/index.svelte b/src/routes/parameters/index.svelte
index 7e65dbe7be730b3e36e7ffd1bb0bc492fd3a6f8f..04e5fe7d23883f6ef72609400ad3844aea509cf0 100644
--- a/src/routes/parameters/index.svelte
+++ b/src/routes/parameters/index.svelte
@@ -52,13 +52,15 @@
 </svelte:head>
 
 <main>
-  <h1>Paramètres</h1>
+  <h1 class="text-3xl font-serif font-bold">Paramètres</h1>
 
-  <ParametersSearch
-    dispatchItemClick={true}
-    on:change={searchTermChanged}
-    on:itemClick={parameterClicked}
-    {rootParameter}
-    {term}
-  />
+  <div class="m-auto mt-4 w-4/5">
+    <ParametersSearch
+      dispatchItemClick={true}
+      on:change={searchTermChanged}
+      on:itemClick={parameterClicked}
+      {rootParameter}
+      {term}
+    />
+  </div>
 </main>
diff --git a/src/routes/robots.txt.ts b/src/routes/robots.txt.ts
index b83b51bd209473a2216b2d4feaa11d7e4b565433..4035d8a97e19a45df908e22f353d40c31c96b91a 100644
--- a/src/routes/robots.txt.ts
+++ b/src/routes/robots.txt.ts
@@ -5,7 +5,7 @@ import config from "$lib/server/config"
 
 const { allowRobots } = config
 
-export const get: RequestHandler = async ({ params }) => {
+export const get: RequestHandler = async () => {
   return {
     body: dedent`
         # https://www.robotstxt.org/robotstxt.html
diff --git a/src/routes/simulations/[simulation].json.ts b/src/routes/simulations/[simulation].json.ts
index d62e576820e2c37a3f4556a1fa45a84961d40fa7..39efa0d2212714ea8213e950b6fcbdcd23723a36 100644
--- a/src/routes/simulations/[simulation].json.ts
+++ b/src/routes/simulations/[simulation].json.ts
@@ -43,14 +43,11 @@ function auditParams(audit: Audit, dataUnknown: unknown): [unknown, unknown] {
   return audit.reduceRemaining(data, errors, remainingKeys)
 }
 
-export const get: RequestHandler = async ({
-  params: requestParams,
-  path: requestPath,
-}) => {
+export const get: RequestHandler = async ({ params: requestParams, url }) => {
   const [params, paramsError] = auditParams(cleanAudit, requestParams)
   if (paramsError !== null) {
     console.error(
-      `Error in ${requestPath} params:\n${JSON.stringify(
+      `Error in ${url.pathname} params:\n${JSON.stringify(
         params,
         null,
         2,
@@ -63,7 +60,7 @@ export const get: RequestHandler = async ({
           code: 400,
           details: paramsError as JsonValue,
           message: "Invalid parameters",
-          path: requestPath,
+          pathname: url.pathname,
         },
         params: params as JsonValue,
       },
diff --git a/src/routes/simulations/index.json.ts b/src/routes/simulations/index.json.ts
index f76294b35a47c926ca7f9b93e603c18699c4ff91..ddbf007b9ab7b36d1c3ae891db057c7c6f9a34d6 100644
--- a/src/routes/simulations/index.json.ts
+++ b/src/routes/simulations/index.json.ts
@@ -45,14 +45,11 @@ function auditBody(audit: Audit, dataUnknown: unknown): [unknown, unknown] {
   return audit.reduceRemaining(data, errors, remainingKeys)
 }
 
-export const post: RequestHandler = async ({
-  body: requestBody,
-  path: requestPath,
-}) => {
+export const post: RequestHandler = async ({ body: requestBody, url }) => {
   const [body, bodyError] = auditBody(cleanAudit, requestBody)
   if (bodyError !== null) {
     console.error(
-      `Error in ${requestPath} body:\n${JSON.stringify(
+      `Error in ${url.pathname} body:\n${JSON.stringify(
         body,
         null,
         2,
@@ -65,7 +62,7 @@ export const post: RequestHandler = async ({
           code: 400,
           details: bodyError as JsonValue,
           message: "Invalid body",
-          path: requestPath,
+          pathname: url.pathname,
         },
         body: body as JsonValue,
       },
diff --git a/src/routes/variables/[variable]/index.svelte b/src/routes/variables/[variable]/index.svelte
index 3ffbc58608230d46c6f73e4e69b35400021e5cd2..081195b927f09a05c4a73ee98c15bc0b6271c790 100644
--- a/src/routes/variables/[variable]/index.svelte
+++ b/src/routes/variables/[variable]/index.svelte
@@ -43,7 +43,7 @@
       [name: string]: Set<string>
     }>
   >
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
+  const testCaseIndex = getContext("testCaseIndex") as Writable<number>
   const testCases = getContext("testCases") as Writable<Situation[]>
   const valuesByCalculationNameByVariableNameArray = getContext(
     "valuesByCalculationNameByVariableNameArray",
@@ -118,25 +118,7 @@
 </svelte:head>
 
 <main class="flex items-center justify-center fond">
-  <div class="bg-white max-w-screen-md p-10 ">
-    <a
-      href="/"
-      class="inline-flex items-center bg-gray-200 my-5 p-1 pr-2 text-xs rounded text-black shadow-md hover:bg-gray-400"
-    >
-      <!-- material icons - Arrow Back -->
-      <svg
-        class="flex mr-2 items-center"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-        ><path d="M0 0h24v24H0z" fill="none" /><path
-          d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-        /></svg
-      >
-      Retour au simulateur Cotisations & prestations sociales
-    </a>
+  <div class="bg-white max-w-screen-md">
     <VariableView
       date={$date}
       editable={true}
diff --git a/src/routes/variables/[variable]/inputs/[date].svelte b/src/routes/variables/[variable]/inputs/[date].svelte
index ab53cb3268a7df3b06a48b2c092f62ad3807c3d8..84aee505278e0260935c6f45db20ba34be119517 100644
--- a/src/routes/variables/[variable]/inputs/[date].svelte
+++ b/src/routes/variables/[variable]/inputs/[date].svelte
@@ -46,7 +46,7 @@
       [variableName: string]: Set<string>
     }>
   >
-  const testCaseIndex = getContext("testCaseIndex") as Writable<number | null>
+  const testCaseIndex = getContext("testCaseIndex") as Writable<number>
   const testCases = getContext("testCases") as Writable<Situation[]>
   const valuesByCalculationNameByVariableNameArray = getContext(
     "valuesByCalculationNameByVariableNameArray",
diff --git a/static/google30e702e970279341.html b/static/google30e702e970279341.html
new file mode 100644
index 0000000000000000000000000000000000000000..a02a6e069b72110f4ab34cfb9f56c70610ca4888
--- /dev/null
+++ b/static/google30e702e970279341.html
@@ -0,0 +1 @@
+google-site-verification: google30e702e970279341.html
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index acaa129f918c18fb6648e4e13f286a128032d720..f0be0c52d8af6ebfa41cd8277c6bf3688a160356 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -18,7 +18,7 @@ const config = {
       build: {
         // Increase size of chunks to 5 MB, to be able to import
         // JSON files extracted from OpenFisca country package.
-        chunkSizeWarningLimit: 5120,
+        chunkSizeWarningLimit: 7680,
       },
       optimizeDeps: {
         // See https://svelte-modals.mattjennings.io/
@@ -33,11 +33,7 @@ const config = {
 
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: [
-    preprocess({
-      postcss: true,
-    }),
-  ],
+  preprocess: [preprocess({})],
 }
 
 export default config
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 59a437b2ee11e60c28811236685c112c6a4a8023..c3aba41079a046abeaa53fa279b1850f33befc24 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,7 +2,23 @@ const colors = require("tailwindcss/colors")
 
 const config = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [
+    function ({ addUtilities }) {
+      const extendLineThrough = {
+        ".line-through-amendment": {
+          textDecoration: "line-through",
+          "text-decoration-color": "rgba(222, 213, 0, 0.7)",
+          "text-decoration-thickness": "2px",
+        },
+        ".line-through-bill": {
+          textDecoration: "line-through",
+          "text-decoration-color": "rgba(255, 107, 107, 0.7)",
+          "text-decoration-thickness": "2px",
+        },
+      }
+      addUtilities(extendLineThrough)
+    },
+  ],
   theme: {
     screens: {
       sm: "640px",
@@ -43,23 +59,6 @@ const config = {
       serif: ["Lora", "serif"],
     },
   },
-  plugins: [
-    function ({ addUtilities }) {
-      const extendLineThrough = {
-        ".line-through-amendment": {
-          textDecoration: "line-through",
-          "text-decoration-color": "rgba(222, 213, 0, 0.7)",
-          "text-decoration-thickness": "2px",
-        },
-        ".line-through-bill": {
-          textDecoration: "line-through",
-          "text-decoration-color": "rgba(255, 107, 107, 0.7)",
-          "text-decoration-thickness": "2px",
-        },
-      }
-      addUtilities(extendLineThrough)
-    },
-  ],
 }
 
 module.exports = config