From ea3eb4a57e6f8d9281a7e82a78c852a57de90be9 Mon Sep 17 00:00:00 2001
From: Dorine Lambinet <dorine.lambinet@gmail.com>
Date: Mon, 15 Nov 2021 18:06:32 +0100
Subject: [PATCH] Couleur du titre "Amender la loi" devient black + Ajout d'une
 border bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Couleur titre cotis et presta devient black

Reformule le panneau dans la vue des dispositifs présentant l'état de mise à jour de la formule

Harmonise le panneau de la vue du dispositif quand le dispositif est à jour

Transforme le panneau de l'état de relecture du dispositif en un seul picto accompagné d'un "f" pour formule

Simplifie l'UI du dispositif où il faut configurer la variable dans le cas type

Ajoute un title aux pictos de la formule et de l'état de mise à jour

Change la typo de la description des dispositifs

Ajuste les margins et paddings de la partie loi

Redessine les boutons à vérifier et historique + Change de place la date des barèmes et valeurs

Ajoute lien vers la partie édition du paramètre, nettoie le code en retirant les div du <a>

Change titres

Modifie la grille des cas types, pour n'afficher qu'un seul cas type dans la majorité des cas.

Onglets employeur / particulier à la verticale

Met en forme la partie montants totaux dans le cas type

Design bouton éditer le cas type + Bg gris pour l'espace de modification du cas type

Modifie les réglages de la grid principale en vue d'ajouter la partie "modification de la loi"

Ajoute espace "modifications de la loi"

Changement design de la barre d'outils

Ajuste la hauteur des barres d'outils pour tomber juste au niveau des lignes

Ajustement margin des titres

Règle les problèmes de scroll en hauteur, sauf, quand "modifier le cas type" passe à la ligne

Ajoute une modification de la taille des titres pour les écrans de md à lg

Règle les hauteurs des blocks, y compris quand il s'agit du tutoriel (contenu pas assez haut)

Déplace l'édition du cas type à droite

Remet le contour gris autour du cas type édité

Essaie d'ajouter le bouton quitter l'édition dans la partie édition du cas type (non fonctionnel)

Déplace la légende vers le bas

Modifie le start tutorial en vue de la barre de recherche

Revue du tutoriel, et changement de l'emplacement d'un id pour couvrir la zone entière visée

Barre de recherche devient composant input

Rectifie espace

Ajout d'un menu déroulant pour sélectionner cas type

Modification de l'architecture, nouveaux modes : single_test_case et mosaic

Nouvelle construction d'URL

Change fonction vers "toString"

Modifie le background du bouton selection cas types

Improve DisplayMode, rewrite newSimulationUrl & move it to urls module.

Le mode édition s'affiche à droite et le volet "loi" se referme. On ne peut pas encore quitter ce mode

Le bouton quitter l'édition marche !

Affiche le dispositif et ses paramètres à droite + montant du dispositif sélectionné dans le cas type

Design montants totaux

Supprime bordure initialement mise sur le cas type selectionné

Mise en page édition du cas type (début)

Simplifie la partie composition du foyer

modifie la largeur du volet de la composition du cas type

Modifications formulations

Modifie le graphisme des "caractéristiques" dans le bloc édition cas type

Change la structure du else if pour faire apparaitre les nouvelles variables à éditer pour le cas type

Design bouton quitter l'édition

Mise en page partie édition des caractéristiques du cas type influentes sur un dispositif

Layout index par rapport à l'édition cas type

Mise en forme partie édition paramètres

Mise en page de la partie édition des barèmes

Mise en page de la partie édition des valeurs

Mise en page de la partie édition d'un noeud

Upgrade SvelteKit & TailwindCSS. Lint.

Mise en page de la vue d'un paramètre

Remove unused @tailwindcss/forms

Remove unused @tailwindcss/forms.

Use amber instead of yellow for TailwindCSS 3.

Use text-ellipsis instead of overflow-ellipsis.

Mise en page vue d'un barème

Mise en forme du titre de la page formule de calcul

[Vue formule] Mise en page de la description du dispositif et de la date de relecture

[Vue formule] Lien vers github

[Espace affichage des modifications] V0

Résoud le problème d'affichage en écran mobile de la formule de calcul. Il fallait notamment ajouter un break-all aux liens trop longs. et changer whitespace-pre par whitespace-pre-wrap

Retire la liste des paramètres du dispositif ... Elle est déjà présente dans le simulateur

Change le pictogramme des variables de cas type permettant d'accéder au détail

Termine la mise en page formule de calcul

Corrige bug affichage pictogramme warning sur Safari

Met en commentaire le bouton "Focus" actuellement inutile

Modifications des règles du responsive en 50% 50%

Responsive de la forme des onglets verticaux du cas type

Réduit les marges à gauche de la partie modifier la loi

Corrige résidu concernant le responsive

Supression de la barre "en construction" et ajout du bandeau Beta.

Ajuste emplacement bandeau Beta

Ajoute les liens en dur dans les boutons de navigation des dispositifs

Graphisme partie modifier la loi

Contraint le scroll du cas type à l'intérieur du cas type

Répartit la surface du bouton sur la totalité (modifier la loi)

Gère le scroll cas type

Ajout et mise en commentaire du futur bouton pour accéder aux mémos

Upgrade packages.

Upgrade packages.

Add API to view OpenFisca metadata (versions, etc).

Use url instead of path in endpoints.

Cleanup dependencies.

Remove console.log.

Add reform changes when there is no reform.

Always show 'Administrations publiques' tab.

Remove obsolete and wrong imports.

Move waterfall result to top of test case.

Fix last review date of parameters in left panel.

Show values of reform changes.

Add mode to display a single parameter.

Display "vide" when there is no amendment.

Active button to close parameters pane.

Convert relative URLs to absolute.

Style parameters search.

Add variables search.

Design la searchbar

Ajoute et design la barre de recherche quand on est hors mode starttutorial

Résoud bug modal sauvegarder/partager

Mise en commentaire de la barre de recherche secondaire

Improve handling of reforms.

Alignement des onglets du cas type

Centre le texte sur l'onglet

Change date to 2023-01-01.

Bump @openfisca/france-json.

Remove unused svelte-json-tree.

Résoud problème scroll principal
---
 example.env                                   |    2 +-
 gitlab-ci/src/gitlab-ci.ts                    |   22 +-
 package-lock.json                             | 2565 ++++-------------
 package.json                                  |   21 +-
 postcss.config.cjs                            |   14 +-
 src/global.d.ts                               |    1 +
 src/hooks.ts                                  |    2 +-
 src/lib/components/NavBar.svelte              |  100 +-
 src/lib/components/ReformsChanges.svelte      |  100 +
 src/lib/components/ShareLinkModal.svelte      |    2 +-
 src/lib/components/Spinner.svelte             |   16 +-
 src/lib/components/ValueChange.svelte         |   18 +-
 src/lib/components/WaterfallView.svelte       |   96 +-
 src/lib/components/latchkeys/Arrow.svelte     |  354 ---
 src/lib/components/latchkeys/AxisX.svelte     |   90 -
 src/lib/components/latchkeys/AxisY.svelte     |  186 --
 src/lib/components/latchkeys/Latchkey.svelte  |  201 --
 src/lib/components/latchkeys/Rows.svelte      |   49 -
 src/lib/components/layercake/LayerCake.svelte |  405 ---
 .../layercake/helpers/calcDomain.ts           |    7 -
 .../layercake/helpers/createGetter.ts         |    9 -
 .../layercake/helpers/createScale.ts          |   56 -
 .../layercake/helpers/findScaleType.ts        |   23 -
 .../layercake/helpers/getPadFunctions.ts      |   47 -
 .../components/layercake/helpers/getRange.ts  |    9 -
 .../components/layercake/helpers/identity.ts  |    3 -
 src/lib/components/layercake/index.ts         |   12 -
 .../layercake/layouts/Canvas.svelte           |   38 -
 .../components/layercake/layouts/Html.svelte  |   32 -
 .../layercake/layouts/ScaledSvg.svelte        |   44 -
 .../components/layercake/layouts/Svg.svelte   |   44 -
 .../components/layercake/layouts/Webgl.svelte |   48 -
 .../components/layercake/lib/calcExtents.ts   |   75 -
 src/lib/components/layercake/lib/flatten.ts   |   17 -
 src/lib/components/layercake/lib/raise.ts     |   11 -
 .../components/layercake/lib/scaleCanvas.ts   |   16 -
 src/lib/components/layercake/lib/uniques.ts   |   29 -
 .../layercake/settings/defaultReverses.ts     |    6 -
 .../layercake/settings/defaultScales.ts       |    8 -
 .../layercake/settings/getDefaultRange.ts     |   28 -
 .../components/layercake/utils/canBeZero.ts   |   12 -
 .../layercake/utils/filterObject.ts           |   39 -
 .../layercake/utils/makeAccessor.ts           |   15 -
 .../components/layercake/utils/padScale.ts    |   56 -
 .../layercake/utils/partialDomain.ts          |   16 -
 src/lib/components/parameters/NodeEdit.svelte |   76 +-
 .../parameters/ParameterView.svelte           |  497 ++--
 .../parameters/ParametersSearch.svelte        |   33 +-
 .../parameters/ReferenceEdit.svelte           |    6 +-
 .../parameters/ReferencesEdit.svelte          |   44 +-
 .../parameters/ScaleAtInstantEdit.svelte      |   26 +-
 .../components/parameters/ScaleEdit.svelte    |  176 +-
 .../components/parameters/ScaleView.svelte    |  206 +-
 .../parameters/ValueAtInstantEdit.svelte      |    4 +-
 .../components/parameters/ValueEdit.svelte    |   50 +-
 .../test_cases/RolePersonsEdit.svelte         |    1 +
 .../components/test_cases/TestCaseEdit.svelte |   66 +-
 .../components/test_cases/TestCaseView.svelte |  323 ++-
 .../test_cases/TestCasesPane.svelte           |   57 -
 .../components/tutorial/StartTutorial.svelte  |  116 +-
 .../components/variables/FormulaView.svelte   |  117 +-
 .../NonVariableReferredParameter.svelte       |   80 +
 .../variables/VariableHeader.svelte           |  147 +-
 .../components/variables/VariableInput.svelte |   46 +-
 .../variables/VariableReferredInputs.svelte   |   72 +-
 .../VariableReferredParameterHeader.svelte    |   17 +-
 .../VariableReferredParameters.svelte         |   40 +-
 .../VariableReferredScaleAtInstant.svelte     |   16 +-
 .../VariableReferredScaleParameter.svelte     |  136 +-
 .../VariableReferredValueEdit.svelte          |    2 +-
 .../VariableReferredValueParameter.svelte     |  136 +-
 .../components/variables/VariableView.svelte  |  507 ++--
 src/lib/components/waterfalls/AxisX.svelte    |   86 -
 src/lib/components/waterfalls/AxisY.svelte    |   83 -
 src/lib/components/waterfalls/Columns.svelte  |  104 -
 .../components/waterfalls/Waterfall.svelte    |  116 -
 src/lib/decompositions.ts                     |    4 +-
 src/lib/displays.ts                           |   21 +
 src/lib/editions.ts                           |   18 -
 src/lib/parameters.ts                         |    2 +-
 src/lib/reforms.ts                            |   10 +
 src/lib/situations.ts                         |    1 -
 src/lib/urls.ts                               |   48 +
 src/lib/values.ts                             |   23 +
 src/routes/__layout.svelte                    |   17 +-
 src/routes/contribuer.svelte                  |    9 +-
 src/routes/index.svelte                       |  874 +++---
 src/routes/metadata.json.ts                   |    8 +
 src/routes/parameters/[parameter]/edit.svelte |  244 +-
 .../parameters/[parameter]/index.json.ts      |    1 -
 .../parameters/[parameter]/index.svelte       |   18 -
 src/routes/parameters/index.svelte            |   18 +-
 src/routes/robots.txt.ts                      |    2 +-
 src/routes/simulations/[simulation].json.ts   |    9 +-
 src/routes/simulations/index.json.ts          |    9 +-
 src/routes/variables/[variable]/index.svelte  |   22 +-
 .../variables/[variable]/inputs/[date].svelte |    2 +-
 static/google30e702e970279341.html            |    1 +
 svelte.config.js                              |    8 +-
 tailwind.config.cjs                           |   35 +-
 100 files changed, 3171 insertions(+), 6563 deletions(-)
 create mode 100644 src/lib/components/ReformsChanges.svelte
 delete mode 100644 src/lib/components/latchkeys/Arrow.svelte
 delete mode 100644 src/lib/components/latchkeys/AxisX.svelte
 delete mode 100644 src/lib/components/latchkeys/AxisY.svelte
 delete mode 100644 src/lib/components/latchkeys/Latchkey.svelte
 delete mode 100644 src/lib/components/latchkeys/Rows.svelte
 delete mode 100644 src/lib/components/layercake/LayerCake.svelte
 delete mode 100644 src/lib/components/layercake/helpers/calcDomain.ts
 delete mode 100644 src/lib/components/layercake/helpers/createGetter.ts
 delete mode 100644 src/lib/components/layercake/helpers/createScale.ts
 delete mode 100644 src/lib/components/layercake/helpers/findScaleType.ts
 delete mode 100644 src/lib/components/layercake/helpers/getPadFunctions.ts
 delete mode 100644 src/lib/components/layercake/helpers/getRange.ts
 delete mode 100644 src/lib/components/layercake/helpers/identity.ts
 delete mode 100644 src/lib/components/layercake/index.ts
 delete mode 100644 src/lib/components/layercake/layouts/Canvas.svelte
 delete mode 100644 src/lib/components/layercake/layouts/Html.svelte
 delete mode 100644 src/lib/components/layercake/layouts/ScaledSvg.svelte
 delete mode 100644 src/lib/components/layercake/layouts/Svg.svelte
 delete mode 100644 src/lib/components/layercake/layouts/Webgl.svelte
 delete mode 100644 src/lib/components/layercake/lib/calcExtents.ts
 delete mode 100644 src/lib/components/layercake/lib/flatten.ts
 delete mode 100644 src/lib/components/layercake/lib/raise.ts
 delete mode 100644 src/lib/components/layercake/lib/scaleCanvas.ts
 delete mode 100644 src/lib/components/layercake/lib/uniques.ts
 delete mode 100644 src/lib/components/layercake/settings/defaultReverses.ts
 delete mode 100644 src/lib/components/layercake/settings/defaultScales.ts
 delete mode 100644 src/lib/components/layercake/settings/getDefaultRange.ts
 delete mode 100644 src/lib/components/layercake/utils/canBeZero.ts
 delete mode 100644 src/lib/components/layercake/utils/filterObject.ts
 delete mode 100644 src/lib/components/layercake/utils/makeAccessor.ts
 delete mode 100644 src/lib/components/layercake/utils/padScale.ts
 delete mode 100644 src/lib/components/layercake/utils/partialDomain.ts
 delete mode 100644 src/lib/components/test_cases/TestCasesPane.svelte
 create mode 100644 src/lib/components/variables/NonVariableReferredParameter.svelte
 delete mode 100644 src/lib/components/waterfalls/AxisX.svelte
 delete mode 100644 src/lib/components/waterfalls/AxisY.svelte
 delete mode 100644 src/lib/components/waterfalls/Columns.svelte
 delete mode 100644 src/lib/components/waterfalls/Waterfall.svelte
 create mode 100644 src/lib/displays.ts
 delete mode 100644 src/lib/editions.ts
 create mode 100644 src/lib/values.ts
 create mode 100644 src/routes/metadata.json.ts
 create mode 100644 static/google30e702e970279341.html

diff --git a/example.env b/example.env
index dc2aa2d8b..dc5b47329 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 e6935db11..66b1df721 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 68facb0ea..db19486d0 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 57283a15c..bf3f5cc72 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 db2754b09..b1ac3ae71 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 357a61643..71d497c7a 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 fa6ba69f8..25aa8695e 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 ec6a4450b..931475339 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 000000000..7c420db40
--- /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 7b13f21f5..a0f669f91 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 3ecc05c85..b86674bba 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 1e94c042c..a3d216d72 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 39942666f..fb5ca7b54 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 618e93f84..000000000
--- 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 ec64e2dab..000000000
--- 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 90a2dbfdc..000000000
--- 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 331eed702..000000000
--- 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 b40d83ec1..000000000
--- 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 780200ce8..000000000
--- 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 231a296af..000000000
--- 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 e306266ed..000000000
--- 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 42cdc00fe..000000000
--- 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 e8f8dbda1..000000000
--- 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 4caec6874..000000000
--- 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 d160738f5..000000000
--- 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 8a36148a6..000000000
--- 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 cae8bec57..000000000
--- 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 60d454641..000000000
--- 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 fc4fc21d9..000000000
--- 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 1f715098b..000000000
--- 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 86d302615..000000000
--- 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 ff07e435d..000000000
--- 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 adf31f4c4..000000000
--- 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 39ab144c5..000000000
--- 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 7f61f7780..000000000
--- 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 dbd3f2983..000000000
--- 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 1e91c4e32..000000000
--- 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 c4cb798fb..000000000
--- 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 58af7aea2..000000000
--- 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 53a0cb4a7..000000000
--- 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 2eb42f9f1..000000000
--- 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 1c14efe78..000000000
--- 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 a4d045056..000000000
--- 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 64a20fa61..000000000
--- 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 84f2a2729..000000000
--- 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 b1068d9a2..d3a1af8b0 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 62aaa3326..cdc021550 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 4179869d9..290e92cea 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 0892a2240..dbcdfbd7f 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 ce0bca83d..02d88c0be 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 f56ddf824..a2087037d 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 eb677f057..e7a8bf33b 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 af1527bd3..6395ff4aa 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 38de6674e..d66590751 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 af786ceae..f2510790e 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 d7cc3742d..95470a5ad 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 097119e76..8be3a59e6 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 f3d3bc099..9676c1aa9 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 a48c96e19..000000000
--- 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 c37857583..b19c9398f 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 d64937736..0e2fa0523 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 000000000..36b0c939a
--- /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 83578ac18..da278c8b0 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 657ca7a99..801f8d7e9 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 6086993f4..0322c9dac 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 4f1d82b76..f6643c08a 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 a11716a78..2ffe0b88e 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 5185e7bc9..15d4165e9 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 6b52de718..a849577e5 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 aac363b59..6971c128b 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 eb2930427..8385516f4 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 da2624682..827a30a9f 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 731f21815..000000000
--- 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 69198a848..000000000
--- 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 32c6ad4b4..000000000
--- 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 c24356ef3..000000000
--- 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 cabbbc118..4af61278a 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 000000000..8a5d1629e
--- /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 58ad7d106..000000000
--- 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 f961e4f30..883300452 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 0ef1f7dc0..08353c14d 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 0a6bf97b2..cd33f8d36 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 a9e43a3c9..582193370 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 000000000..a79f87ef4
--- /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 9a687a44b..0396a6ddf 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 e239cf7da..ee1cf087e 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 1a56fef58..d22380b34 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 000000000..20770060b
--- /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 bc06736bd..1fc1821f5 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 464ac539f..2fe97a69e 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 e47a493ea..d8f491efc 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 7e65dbe7b..04e5fe7d2 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 b83b51bd2..4035d8a97 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 d62e57682..39efa0d22 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 f76294b35..ddbf007b9 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 3ffbc5860..081195b92 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 ab53cb326..84aee5052 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 000000000..a02a6e069
--- /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 acaa129f9..f0be0c52d 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 59a437b2e..c3aba4107 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
-- 
GitLab