From 8573fe05490e68bc17c5c125ab84e7515acc38d5 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 28 Apr 2023 17:27:16 +0200
Subject: [PATCH 1/8] Added API .env and removed "Menu" from navbar

---
 .env.development                 |   1 +
 .env.production                  |   1 +
 src/App.vue                      |   2 +-
 src/components/GeolocRequest.vue |  21 +++++
 src/components/RepInfo.vue       |  45 ++++++++++
 src/components/navbar/Navbar.vue |   2 +-
 src/models/rep.ts                | 146 +++++++++++++++++++++++++++++++
 src/stores/repStore.ts           |  22 +++--
 src/views/HomeView.vue           |  55 +++++++-----
 9 files changed, 264 insertions(+), 31 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 src/components/GeolocRequest.vue
 create mode 100644 src/components/RepInfo.vue
 create mode 100644 src/models/rep.ts

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..d0026be
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL = "http://localhost:3000"
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..9fa3de8
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_API_URL = "https://api-deputes.alexcreates.fr"
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index e23bcaa..e335f64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import Navbar from "./components/navbar/Navbar.vue";
 <template>
   <div id="wrapper">
     <Navbar />
-    <div id="content">
+    <div class="flex justify-center items-center">
       <RouterView />
     </div>
   </div>
diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
new file mode 100644
index 0000000..253ccb5
--- /dev/null
+++ b/src/components/GeolocRequest.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useRepStore } from "@/stores/repStore";
+import { useGeolocation } from "@vueuse/core";
+
+const { coords } = useGeolocation();
+const { getRep, setRep } = useRepStore();
+
+async function handleGeolocClick() {
+  const rep = await getRep(coords.value.longitude, coords.value.latitude);
+  setRep(rep);
+}
+</script>
+
+<template>
+  <button
+    class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950"
+    @click="handleGeolocClick"
+  >
+    Trouver mon député
+  </button>
+</template>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
new file mode 100644
index 0000000..ee59c93
--- /dev/null
+++ b/src/components/RepInfo.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { Depute } from "@/models/rep";
+import { computed } from "vue";
+
+const props = defineProps<{
+  rep: Depute;
+}>();
+
+const repImage = computed(() => {
+  const imageRef = props.rep.acteur.uid["#text"].replace("PA", "");
+  return `https://www2.assemblee-nationale.fr/static/tribun/16/photos/carre/${imageRef}.jpg`;
+});
+
+const repFullName = computed(
+  () =>
+    `${props.rep.acteur.etatCivil.ident.prenom} ${props.rep.acteur.etatCivil.ident.nom}`
+);
+
+const repMandate = computed(() => {
+  const parliamentMandate = props.rep.acteur.mandats.mandat.find(
+    (mandate) => mandate["@xsi:type"] === "MandatParlementaire_type"
+  );
+  return parliamentMandate;
+});
+</script>
+
+<template>
+  <article>
+    <figure class="mb-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+      <img
+        :src="repImage"
+        :alt="repFullName"
+        class="w-full h-full object-contain"
+      />
+    </figure>
+
+    <h1 class="mb-4 text-center font-bold text-3xl">
+      {{ repFullName }}
+    </h1>
+    <h2 class="text-center font-bold text-xl">
+      {{ repMandate?.election?.lieu.departement }} -
+      {{ repMandate?.election?.lieu.numCirco }}e circonscription
+    </h2>
+  </article>
+</template>
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index e70d581..d07706a 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
   <nav class="bg-slate-900">
-    <div class="container py-4">Menu</div>
+    <div class="container py-4">Mon Député</div>
   </nav>
 </template>
diff --git a/src/models/rep.ts b/src/models/rep.ts
new file mode 100644
index 0000000..1984c48
--- /dev/null
+++ b/src/models/rep.ts
@@ -0,0 +1,146 @@
+export interface Depute {
+  acteur: Acteur;
+}
+
+export interface Acteur {
+  "@xmlns:xsi": string;
+  uid: Uid;
+  etatCivil: EtatCivil;
+  profession: Profession;
+  uri_hatvp: string;
+  adresses: Adresses;
+  mandats: Mandats;
+}
+
+export interface Adresses {
+  adresse: { [key: string]: null | string }[];
+}
+
+export interface EtatCivil {
+  ident: Ident;
+  infoNaissance: InfoNaissance;
+  dateDeces: null;
+}
+
+export interface Ident {
+  civ: string;
+  prenom: string;
+  nom: string;
+  alpha: string;
+  trigramme: string;
+}
+
+export interface InfoNaissance {
+  dateNais: Date;
+  villeNais: string;
+  depNais: string;
+  paysNais: string;
+}
+
+export interface Mandats {
+  mandat: Mandat[];
+}
+
+export interface Mandat {
+  "@xsi:type": XsiType;
+  uid: string;
+  acteurRef: Text;
+  legislature: null | string;
+  typeOrgane: string;
+  dateDebut: Date;
+  datePublication: Date | null;
+  dateFin: Date | null;
+  preseance: string;
+  nominPrincipale: string;
+  infosQualite: InfosQualite;
+  organes: Organes;
+  suppleants?: Suppleants | null;
+  libelle?: null;
+  missionSuivanteRef?: null;
+  missionPrecedenteRef?: null;
+  chambre?: null;
+  election?: Election;
+  mandature?: Mandature;
+  collaborateurs?: Collaborateurs;
+}
+
+export enum XsiType {
+  MandatAvecSuppleantType = "MandatAvecSuppleant_Type",
+  MandatMissionType = "MandatMission_Type",
+  MandatParlementaireType = "MandatParlementaire_type",
+  MandatSimpleType = "MandatSimple_Type",
+}
+
+export enum Text {
+  Pa794094 = "PA794094",
+}
+
+export interface Collaborateurs {
+  collaborateur: Collaborateur[];
+}
+
+export interface Collaborateur {
+  qualite: string;
+  prenom: string;
+  nom: string;
+  dateDebut: null;
+  dateFin: null;
+}
+
+export interface Election {
+  lieu: Lieu;
+  causeMandat: string;
+  refCirconscription: string;
+}
+
+export interface Lieu {
+  region: string;
+  regionType: string;
+  departement: string;
+  numDepartement: string;
+  numCirco: string;
+}
+
+export interface InfosQualite {
+  codeQualite: string;
+  libQualite: string;
+  libQualiteSex: string;
+}
+
+export interface Mandature {
+  datePriseFonction: Date;
+  causeFin: null;
+  premiereElection: string;
+  placeHemicycle: string;
+  matriculeVote: string;
+  mandatRemplaceRef: null;
+}
+
+export interface Organes {
+  organeRef: string;
+}
+
+export interface Suppleants {
+  suppleant: Suppleant;
+}
+
+export interface Suppleant {
+  dateDebut: Date;
+  dateFin: null;
+  suppleantRef: string;
+}
+
+export interface Profession {
+  libelleCourant: string;
+  socProcINSEE: SocProcINSEE;
+}
+
+export interface SocProcINSEE {
+  catSocPro: string;
+  famSocPro: string;
+}
+
+export interface Uid {
+  "@xsi:type": string;
+  "#text": Text;
+}
diff --git a/src/stores/repStore.ts b/src/stores/repStore.ts
index f24c12d..e4200ba 100644
--- a/src/stores/repStore.ts
+++ b/src/stores/repStore.ts
@@ -1,11 +1,21 @@
+import type { Depute } from "@/models/rep";
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-export const useCirStore = defineStore("repStore", () => {
-  async function getRep(lon: number, lat: number): Promise<any> {
-    return fetch(`http://localhost:3000/rep?lat=${lat}&lon=${lon}`).then((t) =>
-      t.json()
-    );
+const apiUrl = import.meta.env.VITE_API_URL;
+
+export const useRepStore = defineStore("repStore", () => {
+  const currentRep = ref<Depute | null>(null);
+
+  async function getRep(lon: number, lat: number): Promise<Depute> {
+    return fetch(`${apiUrl}/rep?lat=${lat}&lon=${lon}`)
+      .then((t) => t.json())
+      .catch((err) => console.log(err));
   }
 
-  return { getRep };
+  function setRep(rep: Depute) {
+    currentRep.value = rep;
+  }
+
+  return { getRep, setRep, currentRep };
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ceb268c..c3deb7c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,33 +1,42 @@
 <script lang="ts" setup>
-import { useCirStore } from "@/stores/repStore";
-import { useGeolocation } from "@vueuse/core";
-import { ref } from "vue";
+import GeolocRequest from "@/components/GeolocRequest.vue";
+import RepInfo from "@/components/RepInfo.vue";
+import { useRepStore } from "@/stores/repStore";
+import { storeToRefs } from "pinia";
 
-const { coords } = useGeolocation();
-const { getRep } = useCirStore();
-
-const currentRepValue = ref<any>();
-
-async function handleGeolocClick() {
-  currentRepValue.value = await getRep(
-    coords.value.longitude,
-    coords.value.latitude
-  );
-}
+const { currentRep } = storeToRefs(useRepStore());
 </script>
 
 <template>
   <div>
     <main class="container py-4">
-      <button
-        class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950"
-        @click="handleGeolocClick"
-      >
-        Trouver mon député
-      </button>
-      <pre>
-        {{ currentRepValue }}
-      </pre>
+      <Transition name="fade" mode="out-in">
+        <GeolocRequest v-if="!currentRep" />
+        <Suspense v-else>
+          <RepInfo :rep="currentRep" />
+        </Suspense>
+      </Transition>
     </main>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-from {
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-enter-active {
+  transition: all 0.3s ease;
+}
+.fade-leave-from {
+  opacity: 1;
+}
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+</style>

From 1ab7e26146fa7cc6b006a9a942904f82690c5dcb Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 13:43:38 +0200
Subject: [PATCH 2/8] Added social links to rep

---
 package-lock.json            |  71 ++++++++++++++++++++
 package.json                 |   5 ++
 src/App.vue                  |   3 +-
 src/assets/main.css          |  18 +++++
 src/components/RepButton.vue |  28 ++++++++
 src/components/RepInfo.vue   | 126 ++++++++++++++++++++++++++++++-----
 src/main.ts                  |  15 +++++
 tailwind.config.js           |  60 +++++++++++++++++
 8 files changed, 308 insertions(+), 18 deletions(-)
 create mode 100644 src/components/RepButton.vue

diff --git a/package-lock.json b/package-lock.json
index edaf08c..f3c6a6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,11 @@
       "name": "rep-lookup-fr",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/vue-fontawesome": "^3.0.3",
         "@tailwindcss/typography": "^0.5.4",
         "@vueuse/core": "^10.1.0",
         "pinia": "^2.0.35",
@@ -453,6 +458,72 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index ba33e30..cae48c7 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,11 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
     "@tailwindcss/typography": "^0.5.4",
     "@vueuse/core": "^10.1.0",
     "pinia": "^2.0.35",
diff --git a/src/App.vue b/src/App.vue
index e335f64..13ea6b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,6 @@ import Navbar from "./components/navbar/Navbar.vue";
 
 <template>
   <div id="wrapper">
-    <Navbar />
     <div class="flex justify-center items-center">
       <RouterView />
     </div>
@@ -17,6 +16,6 @@ import Navbar from "./components/navbar/Navbar.vue";
   min-height: 100vh;
 
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 1fr;
 }
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index b1efe19..fead8e7 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,3 +7,21 @@
 body {
   @apply text-slate-300 bg-slate-950
 }
+
+@layer components {
+  .btn-red {
+    @apply bg-red-600 outline-red-700 hover:bg-red-700
+  }
+  .btn-twitter {
+    @apply bg-twitter-500 outline-twitter-600 hover:bg-twitter-600
+  }
+  .btn-facebook {
+    @apply bg-facebook-500 outline-facebook-600 hover:bg-facebook-600
+  }
+  .btn-instagram {
+    @apply bg-instagram-500 outline-instagram-600 hover:bg-instagram-600
+  }
+  .btn-linkedin {
+    @apply bg-linkedin-500 outline-linkedin-600 hover:bg-linkedin-600
+  }
+}
\ No newline at end of file
diff --git a/src/components/RepButton.vue b/src/components/RepButton.vue
new file mode 100644
index 0000000..42fdf48
--- /dev/null
+++ b/src/components/RepButton.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{
+  href?: string;
+  target?: string;
+  rel?: string;
+  style?:
+    | "btn-red"
+    | "btn-twitter"
+    | "btn-facebook"
+    | "btn-instagram"
+    | "btn-linkedin";
+}>();
+
+const elementTag = computed(() => (props.href ? "a" : "button"));
+</script>
+
+<template>
+  <component
+    :is="elementTag"
+    v-bind="props"
+    class="py-[10px] px-4 my-1 inline-flex text-white items-center gap-2 rounded-md font-semibold tracking-wide outline-2 outline-offset-4 focus-visible:outline transition-colors"
+    :class="props.style"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index ee59c93..d306075 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import RepButton from "./RepButton.vue";
+
 import type { Depute } from "@/models/rep";
 import { computed } from "vue";
 
@@ -22,24 +24,116 @@ const repMandate = computed(() => {
   );
   return parliamentMandate;
 });
+
+const repSocials = {
+  twitter: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Twitter"
+    )
+  ),
+  facebook: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Facebook"
+    )
+  ),
+  instagram: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Instagram"
+    )
+  ),
+  linkedin: computed(() =>
+    props.rep.acteur.adresses.adresse.find(
+      (adr) => adr["typeLibelle"] === "Linkedin"
+    )
+  ),
+};
 </script>
 
 <template>
-  <article>
-    <figure class="mb-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
-      <img
-        :src="repImage"
-        :alt="repFullName"
-        class="w-full h-full object-contain"
-      />
-    </figure>
+  <section>
+    <header>
+      <figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+        <img
+          :src="repImage"
+          :alt="repFullName"
+          class="w-full h-full object-contain"
+        />
+      </figure>
 
-    <h1 class="mb-4 text-center font-bold text-3xl">
-      {{ repFullName }}
-    </h1>
-    <h2 class="text-center font-bold text-xl">
-      {{ repMandate?.election?.lieu.departement }} -
-      {{ repMandate?.election?.lieu.numCirco }}e circonscription
-    </h2>
-  </article>
+      <h1 class="mt-4 text-center font-bold text-3xl">
+        {{ repFullName }}
+      </h1>
+      <h2 class="text-center font-bold text-xl">
+        {{ repMandate?.election?.lieu.departement }} -
+        {{ repMandate?.election?.lieu.numCirco }}e circonscription
+      </h2>
+      <h3 class="mt-2 text-center font-medium text-lg">
+        {{ rep.acteur.profession.libelleCourant }}
+      </h3>
+    </header>
+
+    <footer class="mt-8">
+      <div class="mt-4 text-center">
+        <RepButton
+          :href="`https://www.assemblee-nationale.fr/dyn/deputes/${rep.acteur.uid['#text']}`"
+          target="_blank"
+          rel="noopener"
+          :style="'btn-red'"
+        >
+          <font-awesome-icon :icon="['fass', 'landmark']" size="lg" />
+          <span>Fiche Assemblée</span>
+        </RepButton>
+      </div>
+
+      <menu class="mt-2 flex justify-center items-center gap-4">
+        <li v-if="repSocials.twitter">
+          <RepButton
+            :href="`https://twitter.com/${repSocials.twitter.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-twitter'"
+          >
+            <font-awesome-icon :icon="['fab', 'twitter']" size="lg" />
+            <span>Twitter</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.facebook">
+          <RepButton
+            :href="`https://www.facebook.com/${repSocials.facebook.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-facebook'"
+          >
+            <font-awesome-icon :icon="['fab', 'facebook']" size="lg" />
+            <span>Facebook</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.linkedin">
+          <RepButton
+            :href="`https://www.linkedin.com/${repSocials.linkedin.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-linkedin'"
+          >
+            <font-awesome-icon :icon="['fab', 'linkedin']" size="lg" />
+            <span>Linkedin</span>
+          </RepButton>
+        </li>
+
+        <li v-if="repSocials.instagram">
+          <RepButton
+            :href="`https://www.instagram.com/${repSocials.instagram.value?.valElec}`"
+            target="_blank"
+            rel="noopener"
+            :style="'btn-instagram'"
+          >
+            <font-awesome-icon :icon="['fab', 'instagram']" size="lg" />
+            <span>Instagram</span>
+          </RepButton>
+        </li>
+      </menu>
+    </footer>
+  </section>
 </template>
diff --git a/src/main.ts b/src/main.ts
index bc8a836..81a1d50 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,24 @@ import router from "./router";
 
 import "./assets/main.css";
 
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faTwitter,
+  faFacebook,
+  faLinkedin,
+  faInstagram,
+} from "@fortawesome/free-brands-svg-icons";
+import { faLandmark } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faTwitter, faFacebook, faLinkedin, faInstagram, faLandmark);
+
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
 
+app.component("font-awesome-icon", FontAwesomeIcon);
+
 app.mount("#app");
diff --git a/tailwind.config.js b/tailwind.config.js
index fa9f9d4..6e97112 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,66 @@ module.exports = {
       padding: "2rem",
       center: true,
     },
+    extend: {
+      colors: {
+        twitter: {
+          DEFAULT: "#1DA1F2",
+          50: "#CBE9FC",
+          100: "#B7E1FB",
+          200: "#91D1F9",
+          300: "#6AC1F6",
+          400: "#44B1F4",
+          500: "#1DA1F2",
+          600: "#0C82CB",
+          700: "#096096",
+          800: "#063E61",
+          900: "#031C2C",
+          950: "#010B12",
+        },
+        facebook: {
+          DEFAULT: "#4267B2",
+          50: "#C3CFE9",
+          100: "#B4C4E3",
+          200: "#96ACD8",
+          300: "#7894CD",
+          400: "#5B7DC2",
+          500: "#4267B2",
+          600: "#334F89",
+          700: "#243860",
+          800: "#142037",
+          900: "#05080E",
+          950: "#000000",
+        },
+        instagram: {
+          DEFAULT: "#C13584",
+          50: "#EEC0DA",
+          100: "#E9B0D0",
+          200: "#E090BD",
+          300: "#D870AA",
+          400: "#CF5098",
+          500: "#C13584",
+          600: "#952966",
+          700: "#691D48",
+          800: "#3D112A",
+          900: "#11050C",
+          950: "#000000",
+        },
+        linkedin: {
+          DEFAULT: "#0072B1",
+          50: "#6ACAFF",
+          100: "#55C3FF",
+          200: "#2CB4FF",
+          300: "#04A6FF",
+          400: "#008CDA",
+          500: "#0072B1",
+          600: "#004E79",
+          700: "#002A41",
+          800: "#000609",
+          900: "#000000",
+          950: "#000000",
+        },
+      },
+    },
   },
   plugins: [],
 };

From 72b8004847f47870df8256e1aeb87a657b5e3482 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 13:46:00 +0200
Subject: [PATCH 3/8] Changed home page layout for next options

---
 src/App.vue                      |  4 ----
 src/components/GeolocRequest.vue | 16 ++++++++++------
 src/components/RepInfo.vue       |  5 ++++-
 src/main.ts                      | 11 +++++++++--
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 13ea6b3..6664008 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-import Navbar from "./components/navbar/Navbar.vue";
-</script>
-
 <template>
   <div id="wrapper">
     <div class="flex justify-center items-center">
diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
index 253ccb5..50ca250 100644
--- a/src/components/GeolocRequest.vue
+++ b/src/components/GeolocRequest.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useRepStore } from "@/stores/repStore";
 import { useGeolocation } from "@vueuse/core";
+import RepButton from "./RepButton.vue";
 
 const { coords } = useGeolocation();
 const { getRep, setRep } = useRepStore();
@@ -12,10 +13,13 @@ async function handleGeolocClick() {
 </script>
 
 <template>
-  <button
-    class="py-2 px-4 rounded-sm bg-white text-sm text-slate-950"
-    @click="handleGeolocClick"
-  >
-    Trouver mon député
-  </button>
+  <section class="text-center">
+    <header class="mb-4">
+      <h1 class="mt-4 text-center font-bold text-3xl">Trouver mon député</h1>
+    </header>
+    <RepButton @click="handleGeolocClick" :style="'btn-red'">
+      <font-awesome-icon :icon="['fass', 'location-dot']" size="lg" />
+      <span>Géolocalisation</span>
+    </RepButton>
+  </section>
 </template>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index d306075..29101d2 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -52,7 +52,10 @@ const repSocials = {
 <template>
   <section>
     <header>
-      <figure class="mt-8 mx-auto w-60 h-60 rounded-full overflow-hidden">
+      <div class="text-center">
+        <small class="text-base font-bold"> Votre député est... </small>
+      </div>
+      <figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
         <img
           :src="repImage"
           :alt="repFullName"
diff --git a/src/main.ts b/src/main.ts
index 81a1d50..1e84cc8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,9 +15,16 @@ import {
   faLinkedin,
   faInstagram,
 } from "@fortawesome/free-brands-svg-icons";
-import { faLandmark } from "@fortawesome/free-solid-svg-icons";
+import { faLandmark, faLocationDot } from "@fortawesome/free-solid-svg-icons";
 
-library.add(faTwitter, faFacebook, faLinkedin, faInstagram, faLandmark);
+library.add(
+  faTwitter,
+  faFacebook,
+  faLinkedin,
+  faInstagram,
+  faLandmark,
+  faLocationDot
+);
 
 const app = createApp(App);
 

From 807004a67b43a17012395cf84c9140b90ae24e04 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 13:50:50 +0200
Subject: [PATCH 4/8] Changed question hook

---
 src/components/GeolocRequest.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
index 50ca250..d36de2e 100644
--- a/src/components/GeolocRequest.vue
+++ b/src/components/GeolocRequest.vue
@@ -15,7 +15,9 @@ async function handleGeolocClick() {
 <template>
   <section class="text-center">
     <header class="mb-4">
-      <h1 class="mt-4 text-center font-bold text-3xl">Trouver mon député</h1>
+      <h1 class="mt-4 text-center font-bold text-3xl">
+        Qui me représente à l'Assemblée Nationale ?
+      </h1>
     </header>
     <RepButton @click="handleGeolocClick" :style="'btn-red'">
       <font-awesome-icon :icon="['fass', 'location-dot']" size="lg" />

From 218a50307aeb6961a51283e3e48ba46f7dce62c2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 16:27:23 +0200
Subject: [PATCH 5/8] Added error handling to geoloc

---
 src/components/GeolocRequest.vue | 31 ++++++++++++++++++++++++++++---
 src/main.ts                      |  9 +++++++--
 src/stores/repStore.ts           | 10 +++++++---
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/GeolocRequest.vue b/src/components/GeolocRequest.vue
index d36de2e..5afb95c 100644
--- a/src/components/GeolocRequest.vue
+++ b/src/components/GeolocRequest.vue
@@ -2,13 +2,31 @@
 import { useRepStore } from "@/stores/repStore";
 import { useGeolocation } from "@vueuse/core";
 import RepButton from "./RepButton.vue";
+import { computed, ref } from "vue";
 
 const { coords } = useGeolocation();
 const { getRep, setRep } = useRepStore();
 
+const isFetching = ref<boolean>(false);
+const lastError = ref<string>("");
+
+const buttonIcon = computed(() =>
+  isFetching.value ? "spinner" : "location-dot"
+);
+
 async function handleGeolocClick() {
-  const rep = await getRep(coords.value.longitude, coords.value.latitude);
-  setRep(rep);
+  isFetching.value = true;
+
+  try {
+    const rep = await getRep(coords.value.longitude, coords.value.latitude);
+
+    setRep(rep);
+  } catch (err) {
+    const error = (await err) as Error;
+    lastError.value = error.message;
+  } finally {
+    isFetching.value = false;
+  }
 }
 </script>
 
@@ -20,8 +38,15 @@ async function handleGeolocClick() {
       </h1>
     </header>
     <RepButton @click="handleGeolocClick" :style="'btn-red'">
-      <font-awesome-icon :icon="['fass', 'location-dot']" size="lg" />
+      <font-awesome-icon
+        :icon="['fass', buttonIcon]"
+        size="lg"
+        :class="{ 'fa-spin': isFetching }"
+      />
       <span>Géolocalisation</span>
     </RepButton>
+    <div v-if="lastError" class="mt-4 max-w-lg mx-auto text-sm text-red-400">
+      {{ lastError }}
+    </div>
   </section>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 1e84cc8..4d9779f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,7 +15,11 @@ import {
   faLinkedin,
   faInstagram,
 } from "@fortawesome/free-brands-svg-icons";
-import { faLandmark, faLocationDot } from "@fortawesome/free-solid-svg-icons";
+import {
+  faLandmark,
+  faLocationDot,
+  faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
 
 library.add(
   faTwitter,
@@ -23,7 +27,8 @@ library.add(
   faLinkedin,
   faInstagram,
   faLandmark,
-  faLocationDot
+  faLocationDot,
+  faSpinner
 );
 
 const app = createApp(App);
diff --git a/src/stores/repStore.ts b/src/stores/repStore.ts
index e4200ba..d56dda8 100644
--- a/src/stores/repStore.ts
+++ b/src/stores/repStore.ts
@@ -8,9 +8,13 @@ export const useRepStore = defineStore("repStore", () => {
   const currentRep = ref<Depute | null>(null);
 
   async function getRep(lon: number, lat: number): Promise<Depute> {
-    return fetch(`${apiUrl}/rep?lat=${lat}&lon=${lon}`)
-      .then((t) => t.json())
-      .catch((err) => console.log(err));
+    return fetch(`${apiUrl}/rep?lat=${lat}&lon=${lon}`).then(async (res) => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw res.json().then((res) => new Error(res.message));
+      }
+    });
   }
 
   function setRep(rep: Depute) {

From 723f9770bb3cf800c05c928ce233f26807a13bcb Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 22:03:56 +0200
Subject: [PATCH 6/8] Added background image for regions

---
 public/regions/auverge-rhône-alpes.svg        | 56 +++++++++++
 public/regions/bourgogne-franche-comte.svg    | 39 ++++++++
 public/regions/bretagne.svg                   | 38 ++++++++
 public/regions/centre-val-de-loire.svg        | 34 +++++++
 public/regions/corse.svg                      | 23 +++++
 public/regions/grand-est.svg                  | 42 +++++++++
 public/regions/guadeloupe.svg                 | 15 +++
 public/regions/guyane.svg                     | 18 ++++
 public/regions/hauts-de-france.svg            | 29 ++++++
 public/regions/martinique.svg                 | 18 ++++
 public/regions/mayotte.svg                    | 17 ++++
 public/regions/normandie.svg                  | 31 ++++++
 public/regions/nouvelle-aquitaine.svg         | 55 +++++++++++
 public/regions/occitanie.svg                  | 45 +++++++++
 public/regions/pays-de-la-loire.svg           | 32 +++++++
 public/regions/provence-alpes-côte-d'azur.svg | 36 +++++++
 public/regions/réunion.svg                    | 14 +++
 src/assets/main.css                           |  2 +-
 src/components/RepButton.vue                  |  2 +-
 src/components/RepInfo.vue                    | 94 +++++++++++--------
 20 files changed, 601 insertions(+), 39 deletions(-)
 create mode 100644 public/regions/auverge-rhône-alpes.svg
 create mode 100644 public/regions/bourgogne-franche-comte.svg
 create mode 100644 public/regions/bretagne.svg
 create mode 100644 public/regions/centre-val-de-loire.svg
 create mode 100644 public/regions/corse.svg
 create mode 100644 public/regions/grand-est.svg
 create mode 100644 public/regions/guadeloupe.svg
 create mode 100644 public/regions/guyane.svg
 create mode 100644 public/regions/hauts-de-france.svg
 create mode 100644 public/regions/martinique.svg
 create mode 100644 public/regions/mayotte.svg
 create mode 100644 public/regions/normandie.svg
 create mode 100644 public/regions/nouvelle-aquitaine.svg
 create mode 100644 public/regions/occitanie.svg
 create mode 100644 public/regions/pays-de-la-loire.svg
 create mode 100644 public/regions/provence-alpes-côte-d'azur.svg
 create mode 100644 public/regions/réunion.svg

diff --git a/public/regions/auverge-rhône-alpes.svg b/public/regions/auverge-rhône-alpes.svg
new file mode 100644
index 0000000..1050758
--- /dev/null
+++ b/public/regions/auverge-rhône-alpes.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 91.4 68.9" style="enable-background:new 0 0 91.4 68.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M73.7,14.2c-0.1-0.2-0.2-0.3-0.3-0.4c-0.3-0.3-0.8-0.5-0.7-1.1c0.1-0.6,0.4-1.2,0.7-1.7
+	c0.2-0.3,0.7-0.3,0.9,0.1c0.3,0.5,0.6,0.4,1,0c0.1-0.1,0.1-0.1,0.2-0.2C77,9.5,79,9.8,80.8,9.8c0.2,0,0.4,0.1,0.4,0.3
+	c0,0.8,0.6,1.2,1.1,1.7c0.7,0.8,0.7,1.2,0,2.1c-0.6,0.8-0.6,1.3,0.2,1.6c1,0.3,1.2,1,1.1,1.9c0,0.2,0,0.4,0,0.7
+	c1.3-0.3,1.7,0.7,2.2,1.4c0.5,0.6,0.4,1.4,0.3,2.1c-0.1,0.4-0.3,0.6-0.7,0.8c-0.6,0.2-1.3,0.5-1.9,0.8c-0.4,0.1-0.5,0.4-0.5,0.7
+	c0,0.4,0,0.9-0.1,1.3c-0.1,0.8,0.1,1.5,0.7,2.1c0.5,0.5,0.9,0.9,1.7,0.7c0.6-0.2,0.7,0.1,0.7,0.6c0,0.4,0.1,0.8,0,1.2
+	c-0.1,0.9,0.2,1.3,1,1.7c0.7,0.3,1.5,0.7,1.6,1.7c0,0.1,0.2,0.3,0.3,0.4c1,0.3,0.5,0.8,0.2,1.3s-0.6,0.9-0.2,1.6
+	c0.3,0.6-0.1,1.4-0.8,1.6c-1,0.3-1.7,1-2.6,1.5c-0.2,0.1-0.3,0.3-0.4,0.6c-0.3,0.7-0.4,0.8-1,0.4c-0.6-0.4-1.1-0.3-1.7,0
+	c-1,0.4-1.9,0.8-3,0.7c-0.6-0.1-1.1,0.2-1.2,1c0,0.5-0.3,0.7-0.8,0.7c-0.5,0.1-0.5-0.3-0.6-0.6c-0.1-0.5-0.4-1-0.9-1
+	c-0.7,0-1.5-0.1-2,0.6c-0.5,0.6-0.5,1.4-0.5,2.1c0,0.4,0.3,0.6,0.7,0.6c0.8,0,1.3,0.3,1.7,1.1c0.2,0.4,0.6,0.8,0.5,1.4
+	c0,0.4-0.2,0.6-0.6,0.6c-0.5,0-1-0.1-1.4,0.5c-0.3,0.4-0.7,0.1-1,0.1c-0.6-0.1-1.3-0.2-1.8,0.4c-0.2,0.3-0.5,0.3-0.9,0.1
+	c-0.4-0.1-1.3,0.5-1.5,0.9c-0.1,0.2,0,0.3,0.1,0.4c0.2,0.6-0.1,0.8-0.6,0.8c-0.4,0.1-0.7,0-1.1,0c-0.8,0-1.1,0.4-0.9,1.1
+	c0.1,0.3,0.4,0.4,0.5,0.7c-0.7,0.5-1.4,0.7-2.1,0.8c-1.2,0.1-1.2,0.1-1.5,1.3c-0.1,0.3-0.2,0.5-0.2,0.8c-0.1,0.5-0.1,1,0.4,1.3
+	c0.2,0.1,0.4,0.3,0.1,0.6c-0.2,0.2-0.4,0.6-0.8,0.4c-0.4-0.2-0.9-0.4-1.4-0.4c-0.3,0-0.7-0.2-0.9,0.1s-0.3,0.8,0.1,1.1
+	c0.3,0.2,0.1,0.4,0,0.6c-0.7,0.8-0.3,1.9,0.7,2.2c0.4,0.1,0.9,0.2,1.3,0.3c0.5,0.1,1,0.3,1.2,0.9c0,0,0,0.1,0.1,0.1
+	c0.9,1.2,0.9,1.2,0.6,2.7c-0.5,0.1-0.6-0.5-1-0.5c-0.4,0.2-0.3,0.7-0.5,1c-0.4,0.8-1.1,1.1-1.9,0.6c-0.5-0.3-1.1-0.6-1.2-1.3
+	c-0.1-0.5-0.4-0.6-0.9-0.6c-0.8,0-1.7-0.1-2.5-0.2c-1-0.1-1-0.1-0.9-1.1c0.1-0.7,0-0.7-0.7-0.5c-0.2,0.1-0.5,0.1-0.7,0.1
+	c-0.4-0.1-0.9,0.1-1.1-0.3c-0.2-0.4,0.3-0.6,0.4-0.9c0.2-0.3,0.4-0.5,0.6-0.8c-0.6-0.7-1.2-1.6-2.4-1.3c-0.5,0.1-1.2,1.3-1.2,1.9
+	c0,1.1,0.1,1.2,1.6,1.8c-1.1,0-1.7,0.6-2.3,1.3c-0.3-0.5,0-0.9,0-1.3c0.1-0.8-0.3-1.3-1.1-1.2s-1.7-0.1-2.3,0.8
+	c-0.2,0.3-0.4,0.1-0.6-0.1c-0.7-0.4-1.4-0.8-2.1-1.2c-0.3,0.3-0.3,0.7-0.4,1C43.4,63,43.2,63,43,63s-0.4-0.1-0.4-0.3
+	c-0.1-0.5-0.2-1-1-0.9c-0.7,0.1-0.9,0.5-0.9,1.2c0,0.2-0.1,0.3-0.1,0.5c-1.3-0.1-2-1.7-3.5-1.3c0-0.2-0.1-0.4,0-0.5
+	c0.1-1-0.1-1.8-1.2-2.2c-0.5-0.2-0.7-0.6-0.5-1.1c0.2-0.8,0-1.4-0.7-1.9c-0.8-0.6-0.9-1.5-0.9-2.3c-0.1-1.8-1.4-2.8-2.3-4.1
+	c-0.2-0.4-0.6-0.2-0.9-0.1c-0.5,0.1-1,0.3-1.1-0.5c0-0.4-0.4-0.5-0.7-0.5c-0.4,0-0.6,0.1-0.6,0.5c0,0.3-0.1,0.6-0.4,0.7
+	c-0.5,0.1-0.9,0.3-1.4,0.4c-0.2,0-0.3-0.2-0.4-0.4c-0.3-0.8-0.6-1.7-1-2.5c-0.4-0.9-0.4-0.9-1.3-0.6c-1,0.3-2,0.6-2.2,1.9
+	c-0.6-0.1-0.9-0.6-1.6-0.7c-0.8,2-1.2,4.2-2.3,6.1c-0.5-0.1-0.5-0.4-0.6-0.8c-0.1-0.5-0.1-1-0.2-1.6c0-0.2,0-0.5-0.3-0.5
+	c-0.8-0.1-0.7-0.7-0.8-1.3c-0.2-1.1-0.2-1.2-1.3-1c-0.4,0-0.6,0-0.6-0.5c0-0.4-0.1-0.7-0.3-1c-0.1-0.1-0.1-0.2-0.3-0.4
+	c-0.8,0.7-1.6,1.4-2.4,2c-0.3,0.2-0.3,0.6-0.3,0.9c0,0.5,0.2,1.1-0.5,1.5c-0.1,0-0.2,0.3-0.1,0.4c0.2,1-0.7,1.5-1.1,2.3
+	c-0.1,0.2-0.2,0.3-0.4,0.3c-0.7,0-1.5,0.2-2.2-0.1C5.4,54.1,4.6,54,4.1,55c-0.1,0.2-0.3,0.4-0.5,0.3c-0.3-0.1-0.2-0.4-0.1-0.6
+	c0.3-0.5,0.1-0.8-0.4-1c-0.4-0.1-0.4-0.4-0.2-0.7C3,52.8,3,52.6,3.1,52.5c0.2-0.5,0.5-1,0.5-1.5s-0.7-0.7-1-1C2,49.6,2.2,49,2,48.4
+	c-0.2-0.7,0-1.2,0.7-1.5c0.5-0.2,0.6-0.6,0.3-1.1c-0.2-0.3-0.3-0.6-0.4-0.9c0.2-0.5,1-0.1,1.1-0.7c0.2-0.9,1-1.7,0.7-2.6
+	c-0.3-1,0.4-1.6,0.9-2.2c0.1-0.1,0.3-0.3,0.5-0.3c0.9-0.3,1.2-1,1.1-1.9c0-0.1,0-0.2,0.1-0.4c0.6,0.3,0.9,1,1.7,0.8
+	c0.9-0.1,1.4-0.7,1.1-1.6c-0.2-0.5-0.1-0.8,0-1.3c0.3-0.9,0.2-1.8-0.4-2.7c-0.4-0.6-0.3-1,0-1.6c0.8-1.4,0.6-2.1-0.5-3.2
+	c-0.2-0.2-0.4-0.4-0.6-0.6c-0.7-0.8-0.7-0.8,0.2-1.3c0.3-0.2,0.7-0.4,1.1-0.6c0.2-0.1,0.4-0.2,0.5-0.4c0.2-0.8,0.6-1.5,1.3-1.9
+	c0.2-0.1,0.1-0.4,0-0.6c-0.1-0.7-0.2-1.4-0.7-2c-0.4-0.4-0.3-0.9-0.3-1.4c0.1-1.3-0.5-2.4-1-3.5v-0.1c-0.7-0.6-1.5-1.2-2-2
+	C7.2,12.5,7,13.1,6.7,13c-0.1-0.6-0.2-1.2-0.7-1.7c-0.4-0.4-0.4-0.8,0-1.3c0.7-1,1.8-1.3,3-1c1,0.3,1.5-0.3,2.1-0.9
+	c0.4-0.5,0.2-1-0.2-1.5c-0.3-0.4-0.2-0.9,0.2-1.3c0.2-0.2,0.3-0.3,0.5-0.5c0.9-0.9,0.9-0.9,1.9-0.2c0.5-0.3,0.8-0.9,1.5-1
+	c0.4-0.1,0.6-0.5,0.8-0.9c0.3-0.5,0.7-0.6,1.2-0.5c0.2,0,0.5,0.1,0.5,0.4c0,0.6,0.4,0.8,0.9,1s1,0.5,1.3,1c0.4,0.6,0.8,0.7,1.4,0.3
+	c0.4-0.3,0.6-0.3,1.1-0.1c0.6,0.2,1.4,0.4,2-0.3c0.1,0.1,0.1,0.2,0.2,0.2c0.1,0.3,0,0.8,0.5,0.9c0.4,0.1,0.9-0.1,1.2-0.4
+	c0.4-0.5,0.8-1.1,1.2-1.7c0.6,0.2,0.7,0.7,0.9,1c0.5,1,1.3,2,1.2,3.2c0,0.6,0.5,1,1.2,1c0.5,0,0.9,0,1.2,0.5c0.2,0.4,0.7,0.2,1,0.2
+	c0.6,0,0.8,0.3,0.8,0.8c0,0.7,0,1.5,0,2.2c0,0.4-0.3,0.6-0.6,0.9c-0.4,0.3-0.7,0.5-1,0.8s-0.7,0.7,0,1c0.1,0,0.2,0.3,0.1,0.4
+	c-0.1,0.7,0.3,0.9,0.9,1c0.2,0,0.4,0.1,0.5,0.3c0.4,0.8,1,0.6,1.5,0.3c1.2-0.6,2.3-0.3,3.4,0.3c0.4,0.2,0.6,0.3,0.9,0
+	c0.2-0.3,0.5-0.5,0.8-0.4c0.6,0.1,0.8-0.3,0.9-0.8c0.1-0.5,0.2-1,0.3-1.6c0.1-0.7,0.4-0.8,1-0.5c0.5,0.2,0.9,0.8,1.5,0.2
+	c0.1-0.1,0.1-0.1,0.2,0c0.5,0.6,0.8,0.1,1.1-0.2c0.5-0.4,0.7-0.4,0.9,0.3c0.2,0.6,0.3,1.2,0.4,1.8c0.1,0.5,0.3,0.6,0.7,0.6
+	s0.7,0,0.9-0.4c0.2-0.5,0.4-1.1,0.6-1.6c0.4-1.6,0.8-3.2,1.2-4.8c0.1-0.3,0.1-0.6,0.2-0.8c0.4-1,0.6-1.1,1.5-0.5
+	c0.6,0.5,1.1,0.2,1.7-0.1C54,8.2,54,8.2,54.4,8.9c0.2,0.4,0.5,0.6,0.9,0.7c0.7,0.2,1.2,0.7,1.6,1.2c0.5,0.7,0.8,1.5,1.7,1.8
+	c0.4,0.2,0.2,0.6,0.3,1c0,0.4,0.2,0.5,0.5,0.5c0.8-0.1,1.6-0.2,2.1-1c0.1-0.2,0.3-0.3,0.4-0.5c0.5-0.5,1.1-0.4,1.1,0.3
+	c0,1,0.6,0.8,1.2,0.9c1.4,0.2,2.5-0.2,3.3-1.4c0.5-0.8,1.2-1.4,1.9-2.1c0.4-0.4,0.8-0.4,1.2,0c0.4,0.4,0.1,0.6-0.1,0.9
+	c-0.2,0.3-0.4,0.5-0.6,0.8c-0.1,0.2-0.2,0.3-0.1,0.6c0.2,0.8,0.2,0.8-0.5,0.9c-0.2,0-0.5,0.1-0.7,0.1c-0.9,0.3-1.3,1.4-1,2.3
+	c0.1,0.2,0.2,0.3,0.4,0.3c0.8,0,1.7,0,2.5-0.1c0.1,0,0.3-0.1,0.4-0.2C71.9,15.4,72.8,14.9,73.7,14.2z"/>
+</svg>
diff --git a/public/regions/bourgogne-franche-comte.svg b/public/regions/bourgogne-franche-comte.svg
new file mode 100644
index 0000000..693bfba
--- /dev/null
+++ b/public/regions/bourgogne-franche-comte.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 74.3 60.9" style="enable-background:new 0 0 74.3 60.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M52.7,12.5c0.7,0.2,1.1-0.2,1.3-0.7c0.2-0.6,0.7-0.6,1.1-0.7c0.5-0.1,0.7,0.1,0.8,0.6c0.2,1.2,1.2,1.7,2.3,1.1
+	c1-0.6,1.9-0.5,2.7,0.4c0.9,1,1.3,1,2.1-0.1c0.3-0.5,0.7-0.5,1-0.1c0.9,1,2.1,1.6,3.3,2.2c0.2,0.1,0.4,0.3,0.5,0.5
+	c0.2,0.4,0.4,0.4,0.8,0.4c1-0.1,1.5,0.6,2.2,1.2c0.4,0.4,0.3,1,0.2,1.5c-0.1,0.3-0.3,0.6-0.3,0.9c0,0.7,0.2,1,0.9,1
+	c0.4,0,0.6,0.2,0.6,0.5c0.1,0.5,0.2,1,0.4,1.6c-1.5,0.4-2,1.7-3,2.7c-0.2,0.2-0.3,0.4-0.1,0.7c0.2,0.3,0.4,0.2,0.7,0.1
+	c0.4-0.1,0.8-0.2,1.2-0.2c0.2,0,0.4,0,0.5,0.2s0,0.3-0.1,0.4c-0.4,0.6-0.9,1-1.7,1.3c0.6,0.9,0.1,1.6-0.5,2.2
+	c-0.9,0.8-1.4,2-2.6,2.4c-0.3,0.1-0.3,0.5-0.3,0.7c0.1,1.2-0.7,1.7-1.5,2.2c-0.7,0.4-1.4,0.8-2.2,1.1c-0.5,0.2-0.7,0.6-0.7,1.1
+	c0.1,0.8,0,1.6,0.1,2.4c0.1,0.6-0.1,1.1-0.6,1.5c-1.4,1.2-2.7,2.5-4.1,3.8C57,46,57,46.1,57.5,46.9c0.1,0.2,0,0.4-0.1,0.5
+	c-0.7,0.6-0.9,1.4-0.9,2.3c0,0.5-0.2,0.8-0.5,1.2c-0.8,0.9-1.6,1.7-2.4,2.6C53,54,51.4,54.2,51,54c-0.2-0.1-0.2-0.2-0.2-0.4
+	c0-0.3-0.1-0.5-0.4-0.7c-1-0.7-1.2-0.6-2,0.3c-0.2,0.2-0.4,0.5-0.7,0.7c-0.2,0.3-0.6,0.3-0.9,0.3c-0.4-0.1-0.2-0.4-0.3-0.7
+	c0-0.2-0.1-0.4-0.3-0.5c-1-0.3-1.4-1.1-1.9-1.8c-0.4-0.6-0.9-1.2-1.6-1.3c-0.4-0.1-0.6-0.4-0.8-0.8c-0.4-0.7-1-0.9-1.7-0.4
+	c-0.6,0.4-1,0.5-1.6,0c-0.7-0.6-1.3-0.3-1.8,0.4c-0.3,0.5-0.5,1.1-0.6,1.7c-0.4,1.6-0.8,3.1-1.2,4.7c-0.1,0.5-0.2,1-0.6,1.4
+	c-0.4-0.1-0.3-0.4-0.4-0.7c-0.1-0.4-0.2-0.9-0.3-1.3c-0.3-1.1-0.7-1.2-1.7-0.6c-0.3,0.2-0.5,0.3-0.7,0c-0.1-0.1-0.3-0.2-0.4-0.1
+	c-0.5,0.6-1,0.2-1.5,0c-0.8-0.4-1.4,0-1.6,0.9c-0.1,0.3-0.1,0.6-0.1,0.8c-0.2,0.9-0.7,1.5-1.6,1.6c-0.2,0-0.3-0.1-0.4-0.1
+	C24.9,57,24,57,23.2,56.9c-0.1,0-0.3,0-0.4,0c-0.4,0.2-0.8,0.4-1.2,0.5c-0.5,0.1-0.5-0.7-1-0.7c-0.4,0-0.7-0.2-0.7-0.6
+	c0-0.5-0.3-1,0.3-1.3c0.9-0.5,1.2-1.2,1.1-2.2c0-0.5,0.1-1.1,0.1-1.6c0-0.9-0.5-1.4-1.4-1.5c-0.4,0-0.7,0-1-0.4s-0.7-0.3-1.1-0.3
+	s-0.8-0.1-0.8-0.6c0.1-1.5-0.9-2.5-1.5-3.8c-0.1-0.3-0.3-0.6-0.6-0.8c-0.7-0.6-0.8-0.6-1.3,0.1c-0.4,0.6-0.7,1.2-1.3,1.6
+	c-0.4-0.2-0.3-0.5-0.5-0.7c-0.3-0.5-0.8-0.6-1.2-0.4C9.9,45,9.8,45,9.2,44.1c-0.2,0.1-0.4,0.2-0.6,0.3c-1,0.5-1,0.6-1.9-0.2
+	c-0.3-0.3-0.7-0.4-1.1-0.6c-0.5-0.2-0.6-0.5-0.5-1c0.1-0.4,0.3-0.8,0.4-1.2c0.1-0.3,0.3-0.6,0.1-0.8c-0.5-0.9-0.2-1.8-0.1-2.7
+	c0.1-0.7,0.2-1.4-0.5-2c-0.3-0.2-0.2-0.7-0.2-1c0.1-0.8,0-1.6-0.4-2.3c0-0.1-0.1-0.1-0.1-0.2c-0.2-1.2-0.6-2.2-1.7-2.9
+	c-0.4-0.2-0.4-0.8-0.1-1.3c0.8-1.1,0.7-2.2-0.2-3.3c-0.6-0.6-0.4-0.9,0.4-1.2c1-0.3,0.9-0.3,0.7-1.3s-0.5-1.9-1.2-2.7
+	c-0.2-0.2-0.3-0.5-0.3-0.9c0.7-0.2,1.5,0.1,2.1-0.5c0.7-0.7,1-1.4,0.5-2.2c-0.3-0.4-0.2-0.6,0.1-0.9c0.3-0.2,0.6-0.5,0.8-0.7
+	c1-0.9,1.1-2,0.2-3c-0.2-0.2-0.5-0.4-0.5-0.7C4.9,9.7,4.1,9,3.2,8.2c0.5-0.6,0.9-1.1,1.4-1.7C4.8,6.2,4.9,6,4.7,5.7
+	C4.3,5.3,4.4,4.6,4.9,4.3c0.6-0.4,1.2-0.8,2-0.7c0.6,0.1,1.2,0.1,1.8,0.1c0.2,0,0.5,0.1,0.7,0c1.5-0.7,2.4,0.1,3.4,1
+	c0.7,0.7,1.2,1.4,0.9,2.4c-0.1,0.3-0.2,0.8,0.1,1.1c0.4,0.4,1,0.7,1.4,1.1c0.1,0,0.2,0,0.2,0c0.3-0.1,0.6-0.5,1-0.1
+	c0.4,0.4,1,0.8,0.9,1.4c0,1.3,1,2.2,1.5,3.3c0.1,0.3,0.4,0.3,0.7,0.3c0.8,0,1.7,0.1,2.5,0.1c0.5,0,0.9-0.2,1.4-0.5
+	c0.4-0.2,0.6-0.2,0.9,0.2c0.5,0.6,0.8,0.6,1.3-0.1c0.2-0.3,0.4-0.4,0.8-0.4c0.5,0,1,0,1.5,0c0.9-0.1,1.8-0.2,2-1.3
+	c0-0.2,0.2-0.3,0.4-0.4c1.2-0.1,2.3,0,3.3,0.9c1.1,1.1,2,2.3,2.9,3.5c0.3,0.4,0.1,0.6-0.2,0.8c-0.5,0.4-0.8,0.8,0,1.3
+	c0.4,0.2,0.2,0.7,0.2,1c0,0.4,0.1,0.7,0.6,0.6s0.9,0,1.2,0.5c0.3,0.3,0.9,0.3,1.3,0.1c0.6-0.3,0.8,0,1.1,0.4
+	c0.1,0.1,0.2,0.3,0.3,0.4c0.8,1.1,0.8,1,2,0.8c0.8-0.2,1-0.7,1.2-1.3c0.3-0.8,0.7-1.2,1.4-0.8c1.1,0.6,1.9-0.2,2.9-0.2
+	c0.3,0,0.3-0.4,0.4-0.7c0.1-0.6,0-1.2,0.7-1.7c-0.2-0.1-0.3-0.2-0.4-0.2c-0.3,0-0.4-0.2-0.4-0.5s0.2-0.4,0.4-0.4
+	c0.7-0.1,1-1.1,1.8-0.9c0.2-0.7,0.4-1.3,1.1-1.6C51.7,13.1,52.7,13,52.7,12.5C52.6,12.4,52.7,12.4,52.7,12.5z"/>
+</svg>
diff --git a/public/regions/bretagne.svg b/public/regions/bretagne.svg
new file mode 100644
index 0000000..f0f0f1d
--- /dev/null
+++ b/public/regions/bretagne.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 63 37" style="enable-background:new 0 0 63 37;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M37.4,35c-1.6-0.4-3.1,0-4.7,0.1c-0.6,0.1-1.2,0.1-1.5-0.6c-0.1-0.3-0.4-0.5-0.7-0.6c-0.1,0-0.3-0.2-0.1-0.4
+	c0.1-0.2,0.3-0.2,0.4-0.1c0.5,0.2,1,0.4,1.6,0.6c0.3,0.1,0.6,0.1,0.8-0.2c0.2-0.4,0.2-0.6,0-1c-0.4-0.5-0.9-0.8-1.5-0.9
+	c-0.1,0-0.2,0-0.4,0c-0.1,1.2-1.5,0.2-1.8,1.1c-0.1,0.2-0.3,0.1-0.5,0c-0.4-0.3-0.6-0.7-0.9-1.2c-0.2,0.4-0.3,0.7-0.5,0.9
+	c-0.3,0.3-0.7-0.2-1.1,0.1c0,0.7-0.2,1.4,0.3,2.1c0.1,0.1,0.1,0.2,0,0.3c-0.1,0.2-0.3,0.1-0.4,0C26,35,25.9,34.6,26,34.3
+	c0.6-1.7-0.4-2.7-1.5-3.8c-0.7-0.6-1.5-1-2.3-1.2c-0.7-0.2-1.1-0.5-1.4-1.1s-0.7-0.8-1.3-0.8c-0.8,0-1.7,0-2.2-0.9
+	c-0.1-0.2-0.2-0.1-0.4,0c-1.2,0.6-2.1,0.4-2.7-0.7c-0.1-0.2-0.3-0.4-0.4-0.6c-0.2-0.4-0.4-0.6-0.8-0.3c-0.2,0.1-0.5,0.3-0.7,0.1
+	c-0.8-0.7-1.9-0.5-2.8-0.9c-0.2,0.1-0.1,0.2-0.1,0.4c0.1,0.4,0.6,0.6,0.4,1.1C9.6,26.1,9,25.9,8.6,26c-0.7,0-1.4,0.1-2.1-0.3
+	c0.6-2-0.1-3.9-1.8-5.2c-0.1,0-0.1-0.1-0.2-0.1c-1,0.3-1.7-0.9-2.7-0.7c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.2-0.2-0.2-0.3
+	c-0.1-0.2,0.1-0.3,0.2-0.4s0.2-0.1,0.3-0.1c1.9,0,3.7-0.5,5.6-0.4c0.8,0,1.2-0.2,1.3-0.9c0.3-0.9-0.1-1.8-0.7-2
+	c-0.6-0.1-1-0.5-1.5-0.7c-0.7-0.4-0.7-0.4-1.2,0.3c-0.1,0.2-0.3,0.4-0.6,0.7c0.1-1.2,0.1-2.1-1.2-2.3c0.7-1.1,0.7-1.1,1.7-0.6
+	c1.3,0.6,2.6,0.9,4,0.9c0.2,0,0.4,0,0.6,0c0.2-0.1,0.3-0.3,0.3-0.5S10,13,9.8,13c-0.4-0.1-0.9,0-1.3-0.2c-0.2-0.4,0.2-0.7,0-1.1
+	c-0.5,0.2-1,0.4-1.5,0.6c-0.3-0.2-0.2-0.4-0.1-0.5c0.1-0.2,0.2-0.3,0-0.5s-0.4-0.1-0.6,0c-1.1,0.3-2.2,0.6-3.4,0.3
+	c-0.4-0.1-0.5,0.2-0.7,0.3c-0.7,0.2-1-0.1-0.9-0.8c0-0.2,0.1-0.3,0.1-0.5c-0.3-1,0-1.8,1-2.1c-0.2-0.6-0.7-0.7-0.8-1
+	s0.6-1.2,1.1-1.2c0.3,0,0.6,0,0.8,0c0.7,0,1.3,0,1.4-0.9C5,4.9,5.3,4.9,5.7,5c0.7,0.3,1.4,0.4,2-0.4c0.2-0.3,0.7-0.2,1-0.3
+	c0.5,0,0.5,0.4,0.6,0.7s1.2,0.3,1.4-0.1c0.7-1.2,1.7-0.9,2.6-0.6c0.5,0.1,0.8-0.1,1.1-0.3c0.3,0.3,0.2,0.6,0.2,0.8
+	c0,0.4,0.1,0.7,0.6,0.6c0.4-0.1,0.6,0.1,0.7,0.5c0.1,0.1,0.4,0,0.7,0c0.3-0.1,0.3-0.3,0.3-0.6c0-0.2,0-0.4,0-0.6
+	c0-0.4,0.2-0.5,0.5-0.5c0.8-0.1,1.7-0.2,2.4,0.4c0.5,0.5,0.9,0.3,1.2-0.3c0-0.1,0.1-0.1,0.1-0.2c0.4-0.6,1.1-1.1,0.1-1.8
+	c0.4-0.3,0.7-0.5,1-0.7c0.3-0.3,0.6-0.3,1,0c0.5,0.4,0.9,0.8,1.5,0.1c0.1-0.2,0.5-0.1,0.8-0.2C26,1.4,26.6,1.4,27,1
+	c0.4,0.2,0.3,0.7,0.7,0.9c0.3,0,0.2-0.4,0.3-0.6c0.2-0.4,0.6-0.2,1-0.3c0.3,0,0.4,0.2,0.4,0.5c0,0.2,0,0.4,0.3,0.5
+	c0.6,0,0.7,0.3,0.6,0.8c-0.1,0.4,0.1,0.7,0.6,0.7c0.4,0,0.6,0.3,0.5,0.7c-0.1,0.7,0.3,1.1,0.9,1.4c0.6,0.3,0.9,0.8,0.7,1.5
+	c-0.2,0.5,0.1,0.8,0.5,0.9c0.1,0,0.2,0.1,0.3,0.1c0.7,0.2,1,0.6,0.9,1.3c0,0.3,0,0.7,0.4,0.7s0.6-0.1,0.6-0.6c0-0.4,0.3-0.6,0.6-0.7
+	c0.4-0.2,0.9-0.4,1.3-0.7c0.6-0.3,1.2-0.6,1.6-1.3c0.4-0.8,1.3,0.3,1.9-0.3c0.1-0.1,0.3-0.1,0.5-0.2c0,0.4,0.1,0.8,0.1,1.2
+	c0.3,0.2,0.4-0.1,0.5-0.2c0.5-0.1,0.7,0,0.8,0.7c0.1,0.3-0.1,0.7,0.5,0.7c0.4,0,0.9,0.1,1-0.4s0.4-0.6,0.8-0.5
+	C46,8,46.4,7.6,46.8,7.1c0.7-0.9,0.7-0.8,2-0.6c-0.1,0.5-0.5,0.7-0.6,1.1c0.9,1,2.1,1.2,3.4,1.1c0.6,0,1.4-0.3,1.9,0.1
+	c0.4,0.3,0.5,1.1,0.6,1.7c0.2,1.2,1.1,1.7,2,2.3c0.6,0.4,1,0.3,1.4-0.3c0.5-0.6,1.3-0.5,1.7-1.2c0.1-0.2,0.4,0.1,0.6,0.2
+	c0.4,0.3,1.2-0.2,1.4,0.4c0.1,0.4,0,1,0,1.4c0,0.3,0.1,0.6,0.2,0.9c0.3,0.5,0.4,1.2-0.1,1.7c-0.7,0.7-0.7,1.4-0.5,2.2
+	c0.1,0.7,0.2,1.4,0.2,2.2c0,0.6-0.1,1.2,0.4,1.7c0.3,0.3,0.1,0.8,0.2,1.2c0,0.4-0.1,0.5-0.5,0.5c-1.1-0.1-1.5,0.5-1.8,1.4
+	s-0.7,1.8-1,2.7c-0.1,0.4,0,0.9-0.6,0.9c-0.5,0-1-0.1-1.3-0.6c-0.4-0.7-1.1-0.8-1.8-0.8c-0.4,0-0.7,0-0.7,0.4c0,0.5-0.3,0.6-0.7,0.6
+	c-1,0-1.7,0.6-2.1,1.4c-0.2,0.4-0.5,0.5-0.9,0.5c-1.1,0.1-2.2,0.2-3.3,0.2c-1.3,0-2.3,0.8-3.3,1.3c-0.4,0.2-0.4,0.6-0.3,1
+	c0.2,1.2-0.3,1.8-1.4,2.1c-0.5,0.1-1,0.4-1.5,0.7c-0.9,0.5-1.7,0.6-2.4-0.3c0-0.1-0.1,0-0.2-0.1C37.7,35.3,37.6,35.1,37.4,35z"/>
+</svg>
diff --git a/public/regions/centre-val-de-loire.svg b/public/regions/centre-val-de-loire.svg
new file mode 100644
index 0000000..8f5b085
--- /dev/null
+++ b/public/regions/centre-val-de-loire.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 55.4 67.9" style="enable-background:new 0 0 55.4 67.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M41.7,22c0.6,0.8,1.1,1.1,1.8,0.4c0.4-0.3,0.9-0.1,1.4-0.1c0.8,0,1.6,0.2,2.2-0.7c0.2-0.2,0.5-0.2,0.6,0.1
+	c0.3,0.7,0.6,0.4,1,0.2c0.4-0.2,0.8-0.8,1.3-0.5c0.6,0.4,1.2,0.8,1.4,1.5s0.6,1.2,1,1.7c0.6,0.7,0.5,1.3-0.1,1.9
+	c-0.6,0.5-1.2,1-1.8,1.5c0,0.3,0.2,0.4,0.3,0.6c0.4,0.4,0.6,0.8,0.3,1.3s-0.7,0.8-1.3,0.8c-0.5,0-1,0-1.6,0c0,0.9,0.3,1.6,0.7,2.2
+	c0.3,0.4,0.6,0.7,0.7,1.3c0.1,0.4,0.3,0.9,0.2,1.3c-0.2,0.4-0.7,0.4-1,0.5s-0.4,0.3-0.4,0.5c0,0.6,0.2,1.1,0.6,1.5
+	c0.7,0.8,0.7,1.5,0.2,2.4c-0.6,0.9-0.4,1.7,0.4,2.4c0.6,0.5,1.1,0.9,1.1,1.8c0,0.2,0.1,0.5,0.3,0.7c0.5,0.7,0.6,1.5,0.4,2.3
+	c-0.1,0.6-0.1,1.1,0.5,1.5c0.3,0.2,0.3,0.5,0.3,0.9c-0.1,0.6-0.1,1.1-0.2,1.7c-0.1,0.5-0.1,0.9,0.1,1.4c0.4,1-0.1,1.6-1.2,1.6
+	c-0.6-0.1-1.1,0.1-1.4,0.7c-0.4,0.8-1.4,0.8-1.9,1.4c-0.5,0-0.5-0.6-1.1-0.6c-0.6,0.6-1.3,1.3-2,2c-0.5,0.6-0.4,1.3-0.2,1.9
+	c0.1,0.3,0.5,0.6,0.1,0.9c-0.3,0.3-0.6,0.6-1.2,0.5c-0.3-0.1-0.7-0.2-1.1-0.1c-1.3,0.1-2.3,0.6-3,1.8c-0.1,0.2-0.2,0.5-0.5,0.5
+	c-0.9,0-1.8,0.5-2.8,0.2c-1.7-0.5-3.4-0.5-5.1-0.8c-0.5-0.1-0.7,0-0.9,0.5c-0.4,0.9-0.4,0.9-1.3,0.7c-0.7-0.2-1.5,0.1-2.1-0.5
+	c-0.2-0.2-0.4,0-0.6,0.2c-0.4,0.4-0.8,0.9-1.3,1.4c-0.5-0.2-0.8-0.8-1.4-1.1c-0.5,0.3-0.9,1.2-1.9,0.6c0.1-0.6,0.1-1.3-0.8-1.7
+	C20,63,20,62.4,19.9,62c-0.1-0.5-0.3-0.8-0.9-0.8c-1.3,0-1.8-1.2-2.8-1.8c-0.2-0.1-0.1-0.4-0.1-0.6c0.2-0.4,0.1-0.9,0.1-1.3
+	c0.1-0.6-0.1-1.1-0.6-1.5c-0.6-0.5-1.2-1-1.1-1.9c0-0.4-0.4-0.6-0.6-0.9c-0.6-0.6-1-1.2-1.2-2.1c-0.1-0.6-0.2-1.1-0.9-1.3
+	c-0.2-0.1-0.3-0.3-0.4-0.4c-0.2-0.2-0.3-0.7-0.7-0.5s-1.1,0.3-1,1c0,0.4-0.1,0.5-0.5,0.6S8.4,50.7,8,50.7c-1.9,0.2-1.9,0.2-1.9-1.7
+	c0-0.5-0.1-0.8-0.7-1c-0.7-0.2-1.5-0.2-1.4-1.3c0-0.3-0.5-0.2-0.7-0.3c-0.3-0.2-0.8,0-0.9-0.4c-0.2-0.5-0.5-1-0.3-1.6
+	c0.4-1.3,0.5-2.6,1.6-3.6c0.5-0.4,0.5-0.9,0.4-1.4c-0.1-0.6,0-1.2,0.5-1.7c0.3-0.3,0.3-0.6,0.3-1c-0.2-0.9-0.2-0.9,0.4-1.8
+	c0.9,0.3,1.5,1.4,2.6,0.9C8,35.5,7.8,35.3,7.8,35c0-0.1,0-0.3,0.1-0.3c0.9,0.4,0.8-0.7,1.4-0.8c0.6-0.1,1.1-0.3,1.6-0.4
+	c0.5-0.1,0.6-0.2,0.4-0.7c-0.2-0.8-0.1-1.1,0.6-1.3c0.9-0.3,1.3-1,1.9-1.7c0.1-0.2,0.3-0.4,0.3-0.7c0-0.6-0.1-1.2,0.8-1.4
+	c0.2,0,0.2-0.3,0.2-0.5c0.2-1.1,0.7-2.2-0.3-3.2c-0.2-0.2,0-0.5,0.1-0.7c0.3-0.5,0.7-1,1.1-1.5c0.3-0.3,0.3-0.6-0.1-0.8
+	c-0.9-0.4-1.1-1.1-1-2c0.1-0.4-0.1-0.8-0.4-1.1c-0.5-0.7-0.4-0.8,0.3-1.2c0.3-0.2,0.7-0.3,1-0.4c1.2-0.3,1.7-1,1.6-2.2
+	c0-0.2,0-0.5,0-0.7c0.1-1.2-0.3-2.1-1.3-2.8C15.2,10,15.2,8.5,16,7.9c0.1-0.1,0.3-0.2,0.4-0.2c1.3,0.1,2.2-0.7,3.2-1.2
+	c0.5-0.2,0.9-0.3,1.5-0.1c0.7,0.3,1.4,0.1,2.2,0.1c0.6,0,0.9-0.4,0.9-1.2c0-0.5,0.1-0.9,0.6-1c0.9-0.2,1.2-0.8,1.1-1.7
+	c0-0.1,0-0.2,0.1-0.2c0,0,0.1,0,0.1-0.1c0.4,0.2,0.7,0.5,0.8,0.9C27,3.4,27,3.7,27.2,3.9c0.4,0.4,0.5,0.8,0.3,1.4
+	c-0.1,0.2-0.1,0.6,0,0.8C28.3,6.9,28.2,7.4,28,8s0.2,1.3,0.8,1.8c0.5,0.4,1,0.7,1,1.4c0,0.2,0.2,0.3,0.3,0.3c0.8,0,0.8,0.6,0.8,1.2
+	c0.1,1.1,0.6,1.7,1.7,1.9c0.7,0.1,1,0.4,1.1,1.1c0.1,0.7,0.2,1.4,0.3,2.2c0,0.4,0.2,0.6,0.6,0.5c1.1-0.1,2.3,0.1,3.2-0.9
+	c0.1-0.1,0.3-0.2,0.4-0.1c0.7,0.7,1.7,0.5,2.5,0.7c0.2,0,0.4,0.1,0.5,0.3c0.4,0.6,0.8,1.1,1.4,1.4c0.4,0.3,0.4,1.1-0.1,1.5
+	C42.5,21.5,42.1,21.7,41.7,22z"/>
+</svg>
diff --git a/public/regions/corse.svg b/public/regions/corse.svg
new file mode 100644
index 0000000..622ac04
--- /dev/null
+++ b/public/regions/corse.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 23.4 45.9" style="enable-background:new 0 0 23.4 45.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M17.1,38.1c0.4,0,0.6-0.3,0.8-0.4c0.3-0.1,0.6-0.2,0.7,0.1c0.1,0.2,0,0.5-0.2,0.6c-0.1,0.1-0.2,0.1-0.3,0.2
+	c-0.7,0.3-1.2,0.8-0.9,1.7c0.2,0.5-0.4,0.7-0.6,1S16,41.8,16.7,42c0.6,0.2,0.3,0.7,0.1,1c-0.2,0.4-0.7,0.4-0.9,0.2
+	c-0.4-0.2-0.6-0.6-1.1-0.5c-0.1,0-0.3-0.1-0.2-0.2c0.4-0.8-0.4-0.8-0.7-0.9c-1-0.5-2.1-0.7-3.1-1c-0.9-0.3-1.7-0.7-2.4-1.4
+	c-0.4-0.4-0.2-1.7,0.4-1.8c1-0.1,1.1-0.9,1.8-1.6C9,35.5,7.5,35.6,6.2,35c0.1-0.7,0.4-1.3,1.1-1.7c0.4-0.2,0.5-0.5,0.1-0.8
+	c-0.3-0.3,0-0.7,0.1-1s0.2-0.5-0.1-0.8c-0.3-0.3-0.5-0.2-0.8,0c-0.4,0.3-0.9,0.2-1.4,0.2c-0.8,0-1.2-0.6-0.8-1.3
+	C4.7,29,4.9,28.3,5.6,28c0.4-0.2,0.7-0.5,0.6-0.9S5.9,26.2,5.3,26c-0.5-0.1-1-0.3-1.5-0.5c-0.5-0.1-0.7-0.4-0.7-0.9
+	c0-0.6-0.2-1.2-0.5-1.6c0.4-0.4,0.9-0.3,1.3-0.5c0.3-0.1,0.8,0,0.9-0.5s-0.2-0.8-0.6-1c-0.5-0.3-0.9-0.5-1.3-0.8s-0.6-0.6,0-0.9
+	c0.5-0.3,0.7-1,1.2-1.3c0.2-0.1,0.2-0.3,0.1-0.5C4,16.9,4,16.2,4.7,15.7c0.1-0.1,0.2-0.4,0.2-0.6c0.1-0.3,0.2-0.4,0.5-0.3
+	C6,15,6.2,14.6,6.6,14.1c0.6-0.9,1.3-1.7,2.5-1.8c0.2,0,0.4-0.1,0.6-0.1c0.7,0,1-0.4,1.1-1c0-0.2,0.1-0.3,0.1-0.5
+	c0.3-0.7,0.9-1,1.7-0.9c0.3,0.1,0.5,0.2,0.8,0.1c0.4-0.1,0.7,0.1,1,0.4c0.4,0.5,0.8,0.4,1.2-0.1c0.7-0.9,0.7-1.9-0.1-2.8
+	c-0.2-0.2-0.4-0.5-0.3-0.6c0.6-0.5,0-1.4,0.7-1.9c0.3-0.2,0.2-0.4,0-0.6c-0.1-0.2-0.3-0.4-0.4-0.6c-0.2-0.4-0.1-0.8,0.3-1
+	s0.7-0.4,1.1,0c0.3,0.3,0.4,0.6,0.5,0.9c0.1,0.7,0.3,1.3,0.5,2c0.3,0.9,0.5,1.8,0.1,2.8s-0.1,2.2,0.1,3.2c0,0.4,0.4,0.5,0.6,0.7
+	c0.8,0.6,1.2,1.3,1.1,2.3c0,0.9,0.1,1.9,0.1,2.8c0,0.8,0.2,1.6,0.6,2.3c0.3,0.4,0.3,0.8,0.3,1.3c0,0.3,0,0.7,0,1
+	c0.3,2-0.2,3.7-1.6,5.2c-0.3,0.3-0.4,0.8-0.4,1.2c0.1,1.4,0,2.7,0.2,4.1c0.2,1.2-0.1,2.3-0.4,3.5c-0.1,0.4-0.3,0.6-0.7,0.7
+	C17.1,37,17.1,37,17.1,38.1z"/>
+</svg>
diff --git a/public/regions/grand-est.svg b/public/regions/grand-est.svg
new file mode 100644
index 0000000..9cfb9f7
--- /dev/null
+++ b/public/regions/grand-est.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 83 68" style="enable-background:new 0 0 83 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M80.1,27.7c-1.2,0.7-1.4,1.9-1.4,3.1c0,1,0,1.2-0.9,1.4c-0.8,0.2-1.2,0.8-1.3,1.5c0,0.8-0.5,1.2-1.1,1.5
+	c-0.9,0.5-1.4,1.3-1.3,2.4c0.1,1.3-0.4,2.5-0.8,3.7c-0.2,0.7-0.4,1.5-0.2,2.3c0.2,0.9,0.1,1.7-0.4,2.4c-0.3,0.5-0.5,1.1-0.9,1.6
+	C71,48.7,71,50,71,51.3c0,0.8,0.8,1.2,0.7,1.9c-0.1,0.6-0.7,1.1-0.6,1.8c0.1,0.5,0,1.1-0.2,1.5c-0.2,0.5-0.2,0.9-0.2,1.4
+	c0,0.6,0,1.2-0.4,1.7c-0.2,0.2-0.2,0.5-0.1,0.8c0.2,0.4,0.3,0.8,0.5,1.1c0.6,0.7,1.2,1.3,0.2,2.1c0.1,0,0.1,0.4,0.1,0.7
+	c-0.1,1.3-1,2.2-2.3,2.3c-0.6,0-1.2,0-1.8,0c-0.2,0-0.5,0-0.7-0.2c-0.4-0.3,0.3-1-0.3-1.1c-0.5-0.1-0.7-0.2-0.8-0.7
+	c0-0.3-0.1-0.6-0.2-0.9c-0.3-1.2-0.3-1.2-1.5-1.3c0-0.6,0.4-1.1,0.4-1.7c0-0.6-0.1-1.1-0.5-1.4C62.6,58.8,62,58,61,58
+	c-0.2,0-0.4,0-0.4-0.1c-0.6-0.8-1.6-1.1-2.4-1.6c-0.4-0.2-0.7-0.5-1.1-0.8c-1.3-1.3-1.7-1.3-2.8,0.2c-0.3,0.1-0.4-0.2-0.6-0.3
+	c-1.2-1.2-2.1-1.4-3.6-0.6c-0.6,0.3-1.1,0-1.3-0.6c-0.3-1.3-0.4-1.3-1.7-1.2c-0.7,0.1-1.3,0.2-1.4,1c-0.1,0.4-0.4,0.3-0.7,0.1
+	c-0.5-0.3-1.2-0.1-1.2,0.4c-0.1,1-1.1,1.5-1.2,2.5c0,0.2-0.2,0.3-0.4,0.3c-0.4,0-0.8,0.1-0.9,0.6c0,0.1-0.2,0.2-0.3,0.2
+	c-0.3,0.1-0.8,0-0.9,0.5c-0.1,0.5-0.1,1,0.1,1.4c0.1,0.2,0.2,0.4,0.2,0.7c-0.1,0.8-1.2,1.4-2.2,1.2c-0.4-0.1-0.8-0.4-1.3-0.2
+	c-0.6,0.3-1.4,0.4-1.3,1.4c0,0.5-0.3,0.8-0.8,0.9c-0.5,0.1-0.8-0.1-1.1-0.5c-0.2-0.3-0.4-0.5-0.6-0.8c-0.4-0.5-0.7-0.9-1.4-0.4
+	c-0.4,0.3-0.8,0.2-1-0.2c-0.1-0.1-0.2-0.3-0.4-0.3c-1.4,0.3-0.9-1-1.4-1.5c-0.2-0.2,0.2-0.5,0.4-0.7c0.3-0.3,0.3-0.6,0-0.9
+	c-0.9-1.2-1.8-2.4-2.8-3.5c-1.3-1.4-2.9-1.6-4.6-1.5c-0.4,0-0.5,0.3-0.5,0.7c0,0.7-0.5,0.9-1,1s-1.1,0-1.6,0.1s-0.6-0.4-0.9-0.6
+	c-0.3,0.4-0.7,0.7-0.7,1.3c-0.3,0-0.4-0.2-0.5-0.4c-0.2-0.4-0.5-0.5-0.9-0.2c-1.2,0.9-2.5,0.7-3.8,0.6c-0.2,0-0.5,0-0.6-0.2
+	c-0.4-0.9-1.3-1.5-1.3-2.6c0-1.2-1-1.8-1.6-2.6c-0.2-0.2-0.4,0-0.5,0.1c-0.8,0.4-1.7-0.1-1.5-0.9c0.5-2.1-1.1-2.9-2.1-4.1
+	c-0.2-0.2-0.4-0.2-0.7-0.2c-1-0.2-1-0.2-0.9-1.2c0.1-0.8,0.3-1.6,0.7-2.4c0.4-0.6,0.4-1.4,1.2-1.6C5,40.4,4.9,40,4.9,39.7
+	c-0.1-0.3-0.3-0.3-0.6-0.3c-0.2,0-0.5,0.1-0.7-0.1c-0.2-0.2-0.1-0.4,0-0.5c0.3-0.8,0.1-1.5-0.4-2C3,36.1,3,35.6,3.3,35.4
+	c0.6-0.4,0.6-1.1,0.9-1.6c0.3-0.5,0.6-1,1.2-1.1c0.5-0.2,0.7-0.6,0.8-1c0.2-0.7,0.5-1.3,1.2-1.5c-0.2-1-0.9-0.9-1.5-1
+	c0-0.4,0.4-0.4,0.6-0.6c0.2-0.3,0.4-0.5,0-0.9c-0.5-0.7-0.4-0.9,0.3-1c0.4-0.1,0.9,0,1.3-0.2c0.1-0.7-0.3-1-0.8-1.4
+	c-0.9-0.6-0.9-2.2,0-2.9c0.6-0.5,1.3-0.8,2.1-0.7c0.4,0,0.7,0,0.7-0.6c0-0.5,0.4-0.7,0.9-0.5c0.3,0.2,0.6,0.4,0.9,0.6
+	c0.6,0.3,1,0,1-0.7c0-1.5-0.1-2.9,0.4-4.3c0.2-0.5-0.2-0.6-0.5-0.8c-0.2-0.1-0.4-0.2-0.3-0.5c0.1-0.1,0.2-0.2,0.4-0.3
+	s0.5-0.1,0.7-0.2c0.4-0.1,0.6-0.2,0.6-0.6c-0.1-0.6,0.3-0.8,0.7-1c0.8-0.5,1-1,0.7-1.9c-0.2-0.6-0.3-1.2,0.2-1.7
+	c0.5-0.4,0.4-0.7,0.1-1.1c-0.3-0.4-0.5-0.9-0.3-1.5c0.1-0.5,0.3-0.6,0.8-0.6c0.6,0,1,0.3,1.4,0.6C18.1,7,18.5,7,18.9,6.8
+	c0.9-0.4,1.9-0.6,2.8-1.1c0.5-0.3,0.8-0.6,0.7-1.3c-0.3-1.3,0.9-1.9,1.5-2.8c0.2-0.4,0.7-0.3,1.1-0.1c0.3,0.1,0.3,1.1,0.1,1.5
+	c-0.1,0.2-0.3,0.3-0.4,0.4c-0.3,0.2-0.5,0.4-0.1,0.8c0.4,0.3,0.1,0.7,0,1c-0.3,0.9-0.3,1.2,0.5,1.6c0.5,0.2,0.7,0.5,0.4,1.1
+	c-0.2,0.3-0.1,0.5-0.1,0.8c0.1,1.7-0.1,1.7,1.6,1.8c0.3,0,0.6,0.1,1,0.2c0.6,0.1,1.1,0.3,1.3,0.9c0.2,0.7,0.6,0.8,1.2,0.8
+	c0.1,0,0.2,0,0.4,0c1.5,0.1,1.6,0.2,1.9,1.6c0.1,0.4,0.2,0.8,0.7,0.8c0.8,0.1,1.2,0.6,1.3,1.3c0,0.2,0.1,0.4,0.1,0.6
+	c0.1,0.5,0.5,0.6,0.8,0.4c0.5-0.4,1-0.5,1.6-0.5c0.3,0,0.5-0.2,0.8-0.3c1.2-0.9,2.2-0.9,3.2,0.3c0.4,0.5,0.9,0.9,1.6,0.8
+	c0.3-0.1,0.6,0.2,0.9,0.3c0.7,0.4,1.5,0.2,2.1-0.4c0.1-0.1,0.3-0.3,0.5-0.4c0.7-0.6,1.4-0.6,2,0c0.5,0.5,1,0.7,1.6,0.5
+	c1.2-0.3,2,0.4,2.9,0.9c0.6,0.3,0.6,0.9,0.6,1.5c0,0.7,0,1.3,0.9,1.5c0.2,0,0.3,0.2,0.3,0.3c-0.2,1,0.9,1.4,1.1,2.1
+	c0.2,0.5,0.5,0.8,1.1,0.7c0.5-0.1,1.1-0.1,1.1-0.8c0-0.6,0.6-0.8,1-0.7c0.7,0.2,1.5,0.2,1.9,1c0.5,0.9,1.3,1.2,2.3,1.1
+	c0.3,0,0.6,0,1,0c0.6,0,1.2-0.1,1.6-0.6s0.9-0.6,1.5-0.6s1,0,1.3,0.6c0.2,0.4,0.7,0.5,1,0.8c0.3,0.2,0.7,0.4,1,0.7
+	c0.3,0.6,0.7,0.7,1.3,0.4c0.3-0.1,0.7-0.2,1.1-0.3c0.3-0.1,0.7-0.1,0.8,0.1c0.6,0.7,1.1,0.7,1.7,0.1c0.3-0.2,0.6-0.1,0.8,0
+	c0.9,0.6,1.9,0.8,3,0.9C79.5,27.2,79.8,27.3,80.1,27.7z"/>
+</svg>
diff --git a/public/regions/guadeloupe.svg b/public/regions/guadeloupe.svg
new file mode 100644
index 0000000..e4627d6
--- /dev/null
+++ b/public/regions/guadeloupe.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 25.4 23.9" style="enable-background:new 0 0 25.4 23.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M22.1,10.4c-0.9,0.5-1.6,0.5-2.4,0.5c-0.7,0-1.2,0.2-1.8,0.6c-1.3,0.8-2.8,1.2-4.3,0.5
+	c-0.6-0.3-1.2-0.3-1.8-0.7s-1.5,0.1-1.7,0.9c-0.1,0.6-0.1,1.1,0.1,1.7c0.5,1.2,0.3,2.4,0.4,3.6c0,0.3-0.1,0.5-0.3,0.8
+	C9.9,19,9.2,19.5,8.6,20c-0.3,0.2-0.6,0.3-0.9,0.2c-0.2,0-0.4-0.1-0.6,0c-0.9,0.5-0.9,0.4-1.4-0.3c-0.7-0.9-1.1-2-1.4-3.2
+	c-0.5-2.2-0.8-4.4-1-6.6c0-0.4,0-0.8,0.2-1.2C4,8,5.2,7.6,6.3,8.1C7.2,8.5,7.9,9,8.7,9.4C8.8,9.5,9,9.6,9.1,9.7
+	c0.3,1.2,1.3,0.8,2,0.8c0.6,0,1-0.7,1.2-1.4c0.1-0.5,0.2-0.9,0.6-1.2c0.5-0.4,0.4-1.6-0.1-1.9c-0.5-0.4-0.7-1.3-0.4-1.8
+	c0.3-0.6,1.2-1,1.9-0.9c1.1,0.2,1.7,1,1.7,2.2c0,0.9,0.3,1.6,0.7,2.4c0.2,0.4,0.5,0.6,1,0.6c0.4,0,0.8,0,1.2,0
+	c1.3-0.1,2.3,0.3,2.8,1.6C21.7,10.2,21.9,10.2,22.1,10.4z"/>
+</svg>
diff --git a/public/regions/guyane.svg b/public/regions/guyane.svg
new file mode 100644
index 0000000..bc804eb
--- /dev/null
+++ b/public/regions/guyane.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 67.4 85.9" style="enable-background:new 0 0 67.4 85.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M2,78.3c1.1-1,2.2-2,3.3-3c0.2-0.2,0.5-0.4,0.7-0.7c0.9-1.7,1.8-3.4,2.6-5.1c0.2-0.4,0.1-0.8,0.1-1.2
+	c-0.1-2.3-0.1-4.7-0.2-7c0-0.7,0.1-1.4,0.3-2c0.3-0.9,0.7-1.8,0.9-2.8c0.4-1.7,1.1-3.2,2.3-4.5c0.4-0.5,0.4-0.9,0.1-1.4
+	c-1.6-3.1-3-6.2-4.6-9.2c-0.8-1.5-1.9-2.9-2.8-4.4c-0.4-0.5-0.5-1.1-0.5-1.7c0.1-3.6,0.4-7.3,0.2-10.9c-0.1-2.6-0.3-5.3-0.4-7.9
+	c0-0.7,0.1-1.2,0.6-1.7C8,11.3,11,7.4,13.7,3.4C14.3,2.5,15,2.3,16,2.5c2,0.4,4.1,0.8,5.9,1.8c2.1,1,4.2,1.6,6.5,1.8
+	c1.2,0.1,2.3,0.6,3.5,0.9c2.6,0.9,4.9,2.2,7,4c1.3,1.1,2.7,2.1,4,3.1c0.8,0.7,1.7,1.2,2.7,1.5s1.8,0.8,2.7,1.4
+	c1.9,1.3,3.7,2.8,5.3,4.4c2.1,2.1,4.4,4,7.3,4.9c0.8,0.2,1.1,0.7,1.2,1.4c0.3,1.4,0.7,2.7,1,4.1c0.4,1.7,1.3,3.2,2,4.8
+	c0.3,0.7,0.2,1.1,0,1.8c-1.5,3.4-3.8,6.4-5.9,9.5c-2.9,4.2-5.6,8.4-7.5,13.1c-2.4,5.8-5.5,11.3-8.4,16.8c-0.2,0.4-0.5,0.8-0.9,1.1
+	c-1.3,1.1-2.6,2.3-3.9,3.4c-0.4,0.4-0.8,0.5-1.4,0.4c-1.9-0.5-3.8-0.8-5.7-0.9c-0.5,0-0.9-0.2-1.2-0.5c-0.8-0.6-1.6-1.2-2.3-1.8
+	C27.5,79.1,27,79,26.5,79c-2.5,0.1-5.1,0.1-7.6,0.2c-0.8,0-1.5,0.2-2.1,0.7c-0.4,0.3-0.9,0.6-1.3,0.9c-1.7,1.4-3.7,2-5.7,2.6
+	c-0.5,0.2-0.9,0.1-1.4-0.2c-1.7-1.1-3.3-2.2-5-3.2C2.8,79.6,2.4,79,2,78.3z"/>
+</svg>
diff --git a/public/regions/hauts-de-france.svg b/public/regions/hauts-de-france.svg
new file mode 100644
index 0000000..74b8981
--- /dev/null
+++ b/public/regions/hauts-de-france.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 49 58" style="enable-background:new 0 0 49 58;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M8,46.6c0.4,0,0.6,0.1,0.9,0c0.4,0,0.5-0.2,0.3-0.6c-0.4-0.5-0.3-1.2-0.5-1.7c0-0.2,0-0.6-0.2-0.7
+	c-0.9-0.7-0.4-1.3,0-2C8.8,41.3,9,41,9.1,40.4c-0.4-0.1-1-0.1-0.8-0.8c0-0.2,0-0.5-0.1-0.6c-0.6-0.8-0.2-1.6-0.1-2.4
+	c0.1-0.4,0.6-0.8-0.1-1.3c-0.2-0.1,0.1-0.5,0.2-0.6c0.7-0.6,0.6-1.2,0.1-1.9c-0.2-0.3-0.4-0.6-0.4-0.9c0-1-0.7-1.7-1.3-2.3
+	c-1-1-2.2-1.9-3-3.2c-0.3-0.5-0.9-0.1-1.4-0.4c0-0.6,0.6-1,0.9-1.4c0.4-0.5,0.7-1.3,1.4-1.5c0.6-0.1,1.1,0.6,1.7,0.8
+	c0.2,0.1,0.3,0.2,0.6,0.2C7,23.5,7,22.9,6.3,22.5c-1.2-0.7-1.3-1.7-1.2-3C5.7,15.9,5.5,12,5.5,8.2c0-0.9,0.2-1.4,0.9-1.9
+	c2.7-2.1,2.7-2.1,6.2-2.7c1.5-0.3,3-0.5,4.5-0.8c1.1-0.2,2-0.6,2.9-1.1c0.5-0.3,0.8-0.2,1,0.4c0.2,0.5,0.5,1,0.7,1.5s0.3,1-0.1,1.6
+	c-0.4,0.7-0.3,1.5,0,2.3c0.2,0.4,0.4,0.7,0.9,0.6c0.8-0.1,1.1,0.5,1.4,1.1c0.2,0.4,0.3,0.8,0.6,1.2c0.6,0.6,1.4,0.7,1.8,0
+	c0.6-0.9,1.4-1.1,2.3-1.4c0.6,0,1-0.1,1.3,0c0.4,0.1,0.3,0.5,0.5,0.8c0.1,0.2,0.3,0.3,0.5,0.4c0.8,0.5,0.9,1.2,0.9,2
+	s-0.1,1.7,0.2,2.5c0.1,0.3,0.2,0.6,0.5,0.6c0.5,0,1,0.2,1.4,0.6c0.2,0.2,0.5,0,0.7-0.1c0.6-0.2,1.1-0.7,1.7,0c0.1,0.1,0.2,0,0.3,0.1
+	c1.1,0.1,1.9,1,1.9,2.1c0,0.6-0.1,1.1-0.1,1.7c0,0.2,0,0.5,0.3,0.6s0.6,0.1,0.8-0.2c0.3-0.8,0.9-0.6,1.5-0.7c0.4,0,0.8,0,1.2-0.1
+	c2.1-0.7,3.3,0.7,4.7,1.8c0.3,0.2,0.4,0.6,0,0.8c-0.7,0.4-0.9,0.9-0.9,1.7c0,0.2-0.2,0.5-0.4,0.8c0.3,0.1,0.6,0.3,0.9,0.3
+	c0.5,0.1,0.8,0.3,0.8,0.9c0.1,0.5-0.1,0.8-0.5,1.1c-1,0.6-1,0.6-1,1.7c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.8-0.1,1.1,0.1
+	c0.3,0.3,0.1,0.7,0,1c0,0.6,0.6,1,0.5,1.5s-0.6,0.9-0.6,1.4c0,0.4-0.1,0.7,0.1,1.1c0.4,0.6,0.1,1-0.5,1.3c-0.5,0.2-1,0.4-0.9,1.1
+	c0,0.4-0.4,0.5-0.7,0.5c-0.4,0.1-0.8,0.2-0.9,0.6c-0.2,0.5-0.3,0.9,0.3,1.2c0.2,0.1,0.6,0.2,0.4,0.6c-0.5,1.3-0.3,2.6-0.4,3.9
+	c-0.4,0.1-0.6-0.1-0.8-0.3C42.9,42,42,42.2,41.5,43c-0.2,0.3-0.3,0.3-0.5,0.3c-1.1-0.1-1.7,0.8-2.5,1.3c-0.2,0.1-0.2,0.3-0.2,0.5
+	s0,0.5,0,0.7c0,0.9-0.1,1.9,1,2.3c-0.2,0.3-0.4,0.2-0.6,0.3c-1,0.2-1.2,0.7-0.8,1.7c0.1,0.2,0.1,0.2,0,0.4c-0.8,0.8-0.7,1.4,0.5,1.7
+	c-0.2,0.5-0.4,0.9-0.5,1.4c-0.1,0.4-0.3,0.6-0.7,0.8c-0.5,0.2-0.9,0.5-1.1,1c-0.2,0.5-1,0.6-1.1,0.2c-0.3-0.9-1.3-1.1-1.8-1.7
+	c-0.2-0.3-0.5-0.5-0.8-0.8c-0.6-0.5-1-1.1-1.1-1.9c0-0.3,0-0.6-0.3-0.9c-0.6-0.6-1-0.7-1.8-0.2c-0.3,0.2-0.6,0.5-1.1,0.3
+	c-0.3-0.1-0.6,0-0.8,0.1c-0.6,0.3-1.1,0.4-1.7-0.1c-0.3-0.2-0.6-0.2-0.8,0.1c-0.4,0.5-0.8,0.4-1.3,0.1c-0.5-0.4-1.1-0.8-1.7-0.2
+	c-0.2,0.2-0.4,0-0.6-0.2c-1-0.7-2.1-1.3-3.1-1.9c-0.5-0.3-0.9-0.4-1.5-0.1c-0.7,0.4-1.4,0.4-2-0.2c-0.2-0.2-0.5-0.3-0.7-0.5
+	c-0.4-0.3-0.7-0.3-1.1,0c-1.2,1-2.7,0.6-4.1,0.5C8.5,48.4,8.2,47.7,8,46.6z"/>
+</svg>
diff --git a/public/regions/martinique.svg b/public/regions/martinique.svg
new file mode 100644
index 0000000..3a5f377
--- /dev/null
+++ b/public/regions/martinique.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 25.4 23.9" style="enable-background:new 0 0 25.4 23.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M13.4,13.3c-1.3,0-2.5,0-3.6,0c-0.3,0-0.7,0.1-0.9-0.2c-1.1-1.1-2.5-2-3.4-3.3C5,9.3,4.8,8.7,5.2,8
+	c0.2-0.4,0.2-0.6-0.1-0.9C4.5,6.6,4,6.1,3.5,5.5c-0.9-0.9-0.8-2,0.2-2.8c1.8-1.4,3.6-1.6,5.7-0.6C10.7,2.8,12,3.4,13,4.6
+	c0.4,0.5,0.8,1,1.2,1.5c0.5,0.8,1,1,1.9,0.5c0.3-0.1,0.6-0.2,0.9-0.2c0.4,0,0.7-0.1,1.1-0.2c0.3-0.1,0.5-0.4,0.8-0.1
+	s-0.1,0.5-0.1,0.8c0,0.7-0.4,0.6-0.8,0.4c-0.3-0.1-0.5-0.5-0.8-0.4c-0.4,0.1-0.9,0.1-1,0.6s0,0.9,0.5,1.1c0.3,0.2,0.7,0.2,0.9,0.6
+	c0,0.1,0,0.2-0.1,0.2c-0.8,0.1-1,0.3-0.9,0.9c0.1,0.6,0.7,1.1,1.3,1.1c0.3,0,0.6-0.3,1.1-0.1c-0.5,0.4-0.4,0.8-0.4,1.3
+	c0,0.6,0.5,0.7,0.8,1c0.9,0.9,1.8,1.9,2.1,3.2c0.3,0.9,0.5,1.9,1,2.7c0.1,0.2,0.3,0.4,0.1,0.6c-0.6,0.6-0.7,1.3-1.2,1.9
+	c-0.3,0.4-0.8,0.6-1.3,0.5c-0.6-0.1-0.9-0.7-0.6-1.3c0.1-0.2,0.3-0.4,0.4-0.6c0.1-0.3,0.4-0.7-0.1-1c-0.4-0.2-0.8-0.4-1.1,0
+	c-0.5,0.7-0.9,0.6-1.5,0.2c-0.3-0.2-0.8-0.1-1.2-0.2c-0.5-0.1-0.9-0.2-1.4-0.4c-0.7-0.5-2-0.2-2.7,0.3c-0.6,0.5-1.2,0.6-1.8,0.3
+	c-0.7-0.5-1.1-1.4-0.9-2.1c0.3-1,1.3-1.6,2.4-1.4c0.6,0.1,1.1,0.3,1.6,0.4c0.4,0.1,0.9,0.2,1.1-0.4c0.2-0.8,0.1-1.4-0.4-1.5
+	C13.2,14.4,13,14.1,13.4,13.3z"/>
+</svg>
diff --git a/public/regions/mayotte.svg b/public/regions/mayotte.svg
new file mode 100644
index 0000000..1895157
--- /dev/null
+++ b/public/regions/mayotte.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15.4 23.9" style="enable-background:new 0 0 15.4 23.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M5.2,19.2c0.3-0.3,0.2-0.9,0.5-1.2c0.5-0.1,0.9,0.2,1.3,0.4c0.5,0.2,1,0.1,1.3-0.3s0.5-0.8,0.2-1.3
+	C8,15.9,7.6,15,6.7,14.5c-0.6-0.3-0.6-1.2-1.4-1.3c0-0.3,0.1-0.4,0.3-0.4c0.3-0.1,0.7-0.1,0.8-0.5c0-0.3-0.4-0.4-0.5-0.6
+	c-0.2-0.6-0.4-1.2-0.2-1.9c0-0.1,0.3-0.4,0.2-0.4C5.1,9,5.6,8.3,5.5,7.8c0-0.1-0.2-0.3-0.3-0.3c-1.1,0.1-1.9-0.6-2.8-1
+	c-0.1,0-0.2-0.1-0.3-0.1C2.3,6,2.4,5.8,2.6,5.6c0.2-0.3,0.3-0.5,0-0.8C2,4.3,2.3,4.1,2.8,3.8c0.6-0.3,0.8-1,1.3-1.4
+	C4.4,2.1,4.6,2,4.9,2.3c0.6,0.6,1.2,1.1,1.6,1.9c0.2,0.5,0.3,1.2,1.1,1.3c0.6,0.1,1.1,0.2,1.7,0.1C10,5.4,11,5.5,11.7,6
+	c0.4,0.2,0.8,0.6,1.2,0.8c0.3,0.2,0.4,0.5,0.4,1c-0.1,1-0.9,1.4-1.3,2c-0.3,0.4-0.6,0.7-0.9,1.1c-0.6,0.9-0.7,1.7,0,2.6
+	c0.2,0.2,0.3,0.3,0.5,0.5c0.5,0.7,0.5,0.8-0.2,1.4c0,0-0.1,0-0.1,0.1c-0.5,1.3-1.6,2.2-2.1,3.4c-0.2,0.6,0.4,0.9,0.4,1.3
+	c0.1,0.2,0,0.3-0.2,0.3c-1-0.2-1.1,0.6-1.2,1.3c-0.8-0.2-1.2-0.9-1.9-1.1C5.9,20.6,6,20.4,6,20.1c0-0.5-0.3-0.7-0.8-0.7
+	C5.1,19.4,5.1,19.4,5.2,19.2C5.2,19.3,5.2,19.2,5.2,19.2z"/>
+</svg>
diff --git a/public/regions/normandie.svg b/public/regions/normandie.svg
new file mode 100644
index 0000000..966787d
--- /dev/null
+++ b/public/regions/normandie.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 63 48" style="enable-background:new 0 0 63 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M44.7,46.8c-0.5-0.3-0.7-0.8-0.9-1.2c-0.3-0.4-0.5-0.6-1.1-0.4c-0.8,0.3-1.7,0.3-2.1-0.7
+	c-0.2-0.5-0.7-0.6-1.1-0.7c-0.4-0.1-0.6-0.4-0.7-0.9c-0.1-0.6-0.1-1.2-0.2-1.8c-0.1-0.9-0.7-1.7-1.9-1.6c-1,0.1-1.8,0.3-2.5,1.1
+	c-0.3,0.3-0.6,0.6-1,0.9c-0.7,0.5-1.4,0.3-1.7-0.5c-0.1-0.5-0.3-0.9-0.9-1C30,39.8,30,39.2,30,38.8c-0.1-0.6-0.3-1.1-0.8-1.4
+	c-0.4-0.3-1.1-0.2-1.4,0.3c-0.4,0.8-1.1,0.9-1.8,0.9c-0.2,0-0.5,0-0.7-0.1c-0.8-0.3-1.4-0.1-2.1,0.4c-0.6,0.4-1.2,1.1-2,0.3
+	c-0.2-0.2-0.4,0.1-0.5,0.2c-1.1,0.6-1.2,0.6-1.9-0.5c-0.2-0.3-0.3-0.6-0.6-0.7c-0.6-0.2-1.1-0.6-1.8,0c-0.4,0.4-1,0.3-1.5,0
+	c-0.8-0.6-1.9-0.2-2.6-1c-0.2-0.2-0.4,0.1-0.6,0.3c-0.4,0.8-1.5,0.7-2,1.5c-0.1,0.2-0.4,0.1-0.6,0c-0.7-0.5-1.4-1-1.6-1.9
+	c-0.1-0.5-0.4-1-0.3-1.6c0.6-0.1,1.3,0,1.9-0.3c0.3-0.2,0.5-0.3,0.4-0.7c-0.1-0.3,0-0.7-0.4-0.8H9c-2-0.1-1.9-1.8-2.4-3
+	c-0.2-0.4,0.1-0.8,0.3-1.1c0.9-1.7,0.9-3.3,0-4.9c-0.3-0.6-0.5-1.2-0.4-1.9c0.3-1.6-0.6-3-0.9-4.5C5.5,18,5.3,17.8,5,17.5
+	c-0.4-0.4-0.8-0.8-1.1-1.3c-0.5-0.7-0.9-1.4-0.8-2.3c0.1-0.4,0.2-0.9-0.3-1.2c-0.2-0.2-0.1-0.4,0-0.5c0.6-0.6,0.3-1.4,0.3-2.1
+	c0-0.6-0.6-0.7-0.9-1.1c-0.3-0.3-1-0.4-0.7-1c0.3-0.5,0.8,0,1.2,0.1C4,8.3,5.1,8.9,6.1,9.7c0.5,0.4,0.9,0.4,1.4,0
+	C7.7,9.5,8,9.3,8.3,9.1C9,8.8,9.4,8.7,9.8,8.7c0.4,0,0.7,0.1,1.1,0.1c1.7,0.1,1.7,0.1,2.2,1.9c-1.1,0.2-1,1.2-1.3,1.9
+	c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.3,0.4c0.5,0.6,1,1.2,1.5,1.8c0.5,0.7,0.1,1.5,0.4,2.3c0.9,0.1,1.8-0.4,2.7-0.6
+	c0.4-0.1,0.7-0.2,1,0c1,0.7,2.2,0.8,3.3,1c1.3,0.2,2.6,0.4,4,0.6c0.8,0.1,1.4,0.4,2,0.8c1.1,0.9,2.2,0.9,3.6,0.3
+	c1.3-0.6,2.6-1.1,3.8-1.9c0.8-0.5,1.5-0.9,2.4-1c0.2,0,0.5-0.1,0.5-0.4c0-0.4-0.3-0.5-0.6-0.5c-0.9-0.1-1.6-0.5-2.3-1.1
+	c-0.3-0.3-0.4-0.5-0.3-0.9c0.1-1.9,1.2-3.3,2.4-4.5c1-1,2.4-1.5,3.8-2.1c2.9-1.2,5.8-1.9,8.8-2.6C50.2,4.3,51,4,51.8,3.3
+	s1.6-1.2,2.4-1.9C54.7,1,55.9,1,56.3,1.5c0.9,1.2,2.1,2.1,3.1,3.2c0.4,0.4,0.8,0.8,0.8,1.4c0,0.1,0.1,0.2,0.1,0.4
+	c0.4,1.6,0.4,1.6-0.2,3.2c-0.1,0.3-0.4,0.6,0.1,0.9c0.3,0.1,0,0.5,0,0.8c-0.1,0.7-0.3,1.4,0.2,2.1c0.2,0.3,0.2,0.8,0.1,1.2
+	c-0.1,0.5,0.6,0.7,0.3,1.2c-0.2,0.4-0.3,0.7-0.5,1.1s-0.1,0.7,0.2,1c0.4,0.3,0.6,0.7,0.5,1.2c0,0.3,0.6,1.1-0.5,0.8
+	c-0.2,0-0.3,0.4-0.3,0.6c0,1.2-0.7,2.2-1,3.4c-0.2,0.8-0.7,1.2-1.5,1.4c-0.4,0.1-0.9,0.2-1.3,0.4c-0.4,0.2-0.7,0.5-0.4,1
+	c0.2,0.2,0.1,0.6,0.2,0.8c0.2,0.4,0.5,0.8-0.1,1.1C56,28.7,56,29,56,29.2c0.1,0.7-0.3,1.1-0.9,1.3c-0.7,0.2-1,0.6-0.9,1.4
+	c0.1,0.6-0.3,0.8-0.8,0.8c-0.6,0-1.2,0.1-1.8-0.2c-0.5-0.3-0.8-0.1-1.3,0.1c-0.6,0.3-1.2,0.6-1.8,1c-0.3,0.2-0.6,0.4-1,0.3
+	c-1.2-0.1-1.6,0.9-2.4,1.5c-0.1,0-0.1,0.2-0.1,0.2c0.7,0.6,0.1,1.9,1.1,2.4c1.5,0.7,1.3,2.2,1.2,3.5c0,0.6-0.4,1-1,1.1
+	c-0.5,0.1-1,0.3-1.5,0.6c-1,0.6-1.1,0.8-0.5,1.8C44.7,45.6,44.7,46.2,44.7,46.8C44.9,46.6,44.8,46.7,44.7,46.8z"/>
+</svg>
diff --git a/public/regions/nouvelle-aquitaine.svg b/public/regions/nouvelle-aquitaine.svg
new file mode 100644
index 0000000..d18c669
--- /dev/null
+++ b/public/regions/nouvelle-aquitaine.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 83.4 111.9" style="enable-background:new 0 0 83.4 111.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M12,25.1c0.8,0.1,1.7,0,2.3,0.7c0.4,0.5,1.5,0.1,1.7-0.6c0.1-0.4,0.4-0.6,0.7-0.8c0.3-0.3,1.1-0.5,0.5-1.2
+	c-0.1-0.1,0.1-0.3,0.3-0.3c0.5-0.3,1-0.7,1.6-0.9c0.9-0.5,1.2-0.4,1.6,0.6c0.1,0.1,0.2,0.3,0.2,0.4c0.2,0,0.3,0,0.4-0.1
+	c0.8-0.4,1.6-0.6,2.3,0.2c0.1,0.1,0.3,0.3,0.5,0.2c0.7-0.3,1.5-0.5,2.1-0.9c0.5-0.4,1.1-0.7,1.6-1.2c-0.4-0.4-0.7-1.1-1.6-0.9
+	c0.4-0.7,0.8-1.3,0.2-2c-0.1-0.1-0.1-0.2,0-0.3c0.5-1.4,0.2-2.7-0.5-3.9c-0.1-0.2-0.2-0.4,0-0.5c0.6-0.5,0.1-0.8-0.2-1.2
+	c-0.4-0.5-1-0.9-0.5-1.7c0.2-0.2,0-0.5-0.2-0.6c-0.3-0.3-0.7-0.6-1-0.9c-0.4-0.3-0.8-0.6-0.7-1.3c0.1-0.5-0.5-0.8-0.5-1.3
+	c0.8-0.6,1.6-0.7,2.5-0.4C26,6.4,26.8,6.7,27.6,6c0.3-0.3,0.6-0.5,0.6-1c0-0.4,0.1-0.5,0.5-0.5C30,4.2,31.5,4,33,3.8
+	c0.7-0.1,1.3-0.1,1.7,0.7c0.1,0.2,0.3,0.2,0.5,0.4C35.7,4,36.3,3.3,37,2.6C37.8,2,38,2,38.2,2.8c0.2,0.6,0.6,0.7,1,0.8
+	c0.3,0.1,0.7,0,0.7,0.5c-0.1,0.7,0.5,0.8,0.9,0.9C42.2,5.4,42,5.3,42,6.7c0,0.4,0,0.8-0.1,1.3c1.5,0.2,2.9,0.1,4.3-0.3
+	c0.6-0.2,0.9-0.3,0.7-1c0-0.1,0.1-0.2,0.1-0.4c0.7,0.6,1.5,1,1.6,2.1c0,0.4,0.1,0.8,0.4,1.1c0.7,0.7,1.4,1.4,1.5,2.4
+	c0,0.3,0.4,0.5,0.6,0.7c0.9,0.6,1.1,1.6,0.8,2.5s0,1.3,0.7,1.8c0.4,0.3,0.8,0.7,1.2,1c0.2,0.2,0.5,0.5,0.8,0.5
+	c0.9-0.1,1.1,0.5,1.2,1.2c0.1,0.2,0.1,0.6,0.3,0.7c0.8,0.4,0.8,1,0.7,1.7c0,0.2,0.1,0.4,0.2,0.4c0.6,0,1.3,0.3,1.9-0.1
+	c0.5-0.4,0.8-0.3,1.1,0.1c0.2,0.3,0.4,0.5,0.6,0.8c0.7-0.5,1-1.1,1.5-1.6c0.2-0.2,0.3-0.4,0.6-0.2c0.9,0.4,1.9,0.2,2.8,0.4
+	c0.5,0.1,0.8-0.1,0.9-0.6c0.1-0.7,0.6-0.7,1.2-0.6c1.5,0.3,3.1,0.3,4.5,0.8c0.6,0.2,1.1-0.1,1.7-0.1c1.5-0.1,2,0.3,2.2,1.8
+	c0,0.4,0.3,0.8,0.5,1.1c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0,0.5-0.6,0.7-0.2c0.3,0.8,1.4,0.8,1.7,1.6c0.4,1,0.6,2.1,0.7,3.2
+	c0,0.6,0.1,1.1,0.5,1.6c0.3,0.3,0.3,0.8,0.4,1.3c0.1,0.3,0,0.5-0.2,0.6c-0.6,0.3-0.8,0.8-0.9,1.4c0,0.3-0.3,0.4-0.6,0.6
+	c-0.5,0.3-0.9,0.5-1.4,0.8c-0.8,0.5-0.9,0.9-0.2,1.6c0.3,0.4,0.7,0.7,1,1c0.9,0.9,1,1.3,0.4,2.4c-0.4,0.8-0.4,1.5,0,2.3
+	c0.4,0.6,0.5,1.3,0.3,2.1c-0.1,0.5-0.4,1-0.1,1.5c0.2,0.3,0.1,0.6-0.2,0.7c-0.3,0.2-0.6,0.1-0.9-0.1c-0.5-0.5-0.9-1-1.6-1.1
+	c-0.2,0.6-0.2,1.2-0.2,1.8c0,0.5-0.2,0.8-0.6,1c-0.5,0.3-1,0.7-1.4,1.2c-0.4,0.6-0.7,1.2-0.6,2c0.1,1-0.1,2-1.2,2.6
+	c-0.6,0.3-0.7,0.8-0.3,1.4c0.2,0.3,0.5,0.5,0.2,0.9c-0.2,0.3-0.5,0.3-0.9,0.2c-0.6-0.2-1.3-0.4-1.8,0.3c-0.1,0.1-0.2,0.1-0.3,0
+	c-0.5-0.8-0.8-0.2-1.1,0.1c-0.2,0.2-0.3,0.4-0.5,0.5c-0.7,0.6-1,0.6-1.5-0.2c-0.2-0.3-0.5-0.6-0.6-0.9c-0.6-1.1-1.7-1.3-2.7-1.7
+	c-0.2-0.1-0.3,0-0.5,0.1c-0.6,0.3-1.2,0.5-1.8,0.8c-0.7,0.4-0.9,1.3-0.5,2c0.1,0.2,0.5,0.4,0.4,0.7c-0.1,0.4-0.3,0.8-0.7,1.1
+	c-0.3,0.3-0.6,0.5-0.7,0.9c0,0.4-0.4,0.3-0.7,0.4c-0.8,0.2-1,0.3-0.7,1c0.3,0.6,0.1,0.9-0.2,1.3c-0.3,0.5-0.8,0.6-1.3,0.7
+	c-0.9,0-0.9,0.1-1.1,1c-0.1,0.5-0.5,0.7-0.7,1.1c-0.3,0.9-0.9,1.3-1.8,1.2c-0.5,0-0.5,0.3-0.4,0.7c0.3,1.1,0.5,2.2,1.1,3.2
+	c0.1,0.1,0.1,0.3,0.1,0.4c-1,0.7-1.9,0.2-2.7-0.4c-0.5,0.5-0.5,1.2-0.7,1.8c-0.1,0.2-0.1,0.5,0.1,0.7c0.9,0.7,0.6,1.5,0.2,2.3
+	c-0.3,0.5-0.4,0.9-0.2,1.5c-0.9,0.2-1.8,0.5-2.6,0.7c-0.3,0.3-0.1,0.5,0,0.7c0.1,0.4-0.1,0.6-0.4,0.7c-0.3,0.1-0.6,0.3-0.8,0
+	c-0.9-1.2-2.1-0.6-3.2-0.6c-0.3,0-0.5,0.3-0.6,0.5c-0.2,0.6-0.7,0.8-1.4,0.8c-0.2,0-0.4,0-0.6,0.1c-0.8,0.3-1.4,0.2-1.8-0.6
+	c-0.6,0.3-0.9,0.8-1.4,1.2c-0.3-0.2-0.6-0.4-1-0.7c-0.4,0.6-0.8,1.2-0.7,2c0,0.3,0,0.5-0.3,0.6c-0.3,0-0.5-0.1-0.6-0.3
+	c-0.2-0.4-0.3-0.9-0.5-1.3c-0.4,0-0.5,0.2-0.7,0.4c-0.3,0.3-0.6,0.5-1.2,0.3c-0.9-0.2-1.5,0.2-2,1c-0.3,0.4,0,0.7,0.2,1
+	c0.3,0.5,0.7,1,0.1,1.6c-0.1,0.1-0.1,0.3,0,0.5c0.4,0.8-0.1,1.4-0.5,2c-0.3,0.5-0.5,1-0.6,1.6c-0.2,0.6,0.5,1.7,1.2,1.6
+	c1.5-0.2,2.3,0.7,2.8,1.9c0.1,0.1,0.1,0.2,0.2,0.3c-0.8,1-0.8,1-0.1,2.1c0.1,0.1,0.2,0.3,0.3,0.4c0.5,0.6,0.7,1.2,0,1.9
+	c-0.4,0.4-0.6,1.1-0.8,1.6c-0.4,1.1-1,2-2,2.7c-1.1,0.8-1,0.8-0.6,2.1c-0.5,0.4-1-0.1-1.5,0c-0.1,0.6-0.2,1.2-0.3,1.8
+	c-0.1,0.6-0.1,1.1-0.6,1.5c-0.3,0.2-0.2,0.7-0.2,1c-0.1,0.8-1.4,1.9-2.2,1.7c-0.6-0.2-1.1,0-1.6,0.2c-0.3,0.2-0.5,0.1-0.7-0.1
+	c-0.5-0.7-1.2-1.1-1.8-1.6c-0.6-0.4-0.8-0.9-0.9-1.6c0-0.8-0.1-0.8-0.9-0.9c-0.4,0-0.7,0-1.1,0c-0.9,0.1-1.8-0.1-2.5-0.7
+	c-0.5-0.4-1-0.6-1.6-0.6c-0.7-0.1-1.4-0.1-1.8-0.9c-0.2-0.3-0.5-0.2-0.8-0.3c-1.3-0.1-1.4-0.2-1.3-1.6c0-0.1,0-0.2,0-0.5
+	c-0.6,0.4-1,0.8-1.2,1.4c-0.2,0.7-0.4,0.7-1,0.4c-0.3-0.1-0.5-0.3-0.6-0.6c-0.3-0.4-0.3-0.8,0.2-1c0.7-0.3,1-0.8,0.9-1.5
+	c-0.1-0.3,0.1-0.6,0.3-0.9c0.5-0.7,0.2-1.4-0.6-1.7c-0.4-0.1-0.8-0.3-1.1-0.4c-0.5-0.2-1-0.7-1.5,0.2C5.7,97.4,5,97.2,5,96.7
+	c0-0.8-0.5-0.8-1-0.7c-0.6,0-1.1-0.3-1.4-0.8c-0.3-0.4-0.2-0.8,0.3-0.9C5,94.1,6,92.5,7,91.1c1.1-1.5,1.9-3.2,2.2-5.1
+	c0.4-2.7,1.2-5.3,1.9-7.9c0.9-3.3,1.3-6.7,2-10.1c0.1-0.3,0.1-0.6,0-1c-0.1-0.7,0.1-1.4,0.6-1.9c0.3-0.3,0.4-0.8,0.4-1.2
+	c0-0.5,0.3-0.7,0.7-0.5c0.9,0.5,1.7,0.1,2.6,0.2c-0.5-1.4-1.5-2.3-2.5-3.1c-0.4,0.5-0.8,0.9-1.4,1.6c0.2-1.8,0.4-3.4,0.7-4.9
+	c0.7-4.2,1.4-8.5,1.4-12.8c0-1.1,0.4-2,1.1-2.9c0.2-0.2,0.3-0.4,0.6-0.4c0.3,0.1,0.3,0.4,0.2,0.6c-0.2,0.9,0.3,1.4,0.9,1.9
+	c1,0.8,1.9,1.7,2.8,2.5c0.4,0.4,0.7,0.8,0.8,1.3c0.5,2,1,4,1.5,6c0.4-0.3,0.7-0.6,0.6-1.1c0-0.8,0-1.7-0.2-2.5
+	c-0.4-1.7-0.8-3.4-1.2-5.1c-0.1-0.2-0.1-0.5-0.2-0.7c-1-1-1.8-2.2-3.1-2.9C19.3,41,19,41,19,40.9c-0.5-1.4-2.1-1.6-3-2.7l-0.1-0.1
+	c-1.3,0.1-1.1-0.8-1.2-1.6c-0.1-1.1-0.4-2.1-0.5-3.2c0-0.6-0.4-0.7-0.8-1c-1.4-1-1.4-1-1-3c0.5,0.6,1,1.1,1.8,1
+	c0.4,0,0.4,0.4,0.4,0.6c0,0.6,0,1.3,0.6,1.8c0.2,0.1,0.2,0.4,0,0.5c-0.1,0.2-0.2,0.3-0.3,0.5c-0.4,0.7-0.1,1.1,0.7,1.2
+	c0.2,0,0.5,0.1,0.7-0.1c0.2-0.3-0.1-0.5-0.1-0.8s-0.1-0.7,0.5-0.6c0.5,0,0.5-0.3,0.6-0.6c0.3-0.9,0.4-1.8-0.3-2.5
+	c0.4-0.5,0.8,0,1.2-0.3c0.2-0.6,0.3-1.2-0.5-1.5c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.6-0.6-0.6-1-0.9c-0.8-0.6-1.6-0.8-2.6-0.9
+	C13.2,26.3,12.5,25.6,12,25.1L12,25.1z"/>
+</svg>
diff --git a/public/regions/occitanie.svg b/public/regions/occitanie.svg
new file mode 100644
index 0000000..27e2445
--- /dev/null
+++ b/public/regions/occitanie.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 97.4 73.9" style="enable-background:new 0 0 97.4 73.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M57,6.5c0.2,0.1,0.2,0.3,0.2,0.5c0.2,0.9,0.2,0.9,1.1,0.8c0.5-0.1,0.7,0.1,0.8,0.6c0,0.4,0.1,0.7,0.2,1.1
+	c0,0.2,0,0.5,0.3,0.5c0.8,0.1,0.7,0.6,0.7,1.2c0,1.1,0.6,1.8,1.4,2.5c1.2-2.1,1.8-4.2,2.5-6.4c0.6,0.1,0.9,0.5,1.5,0.7
+	c0.3-0.2,0.4-0.7,0.5-1c0.1-0.2,0.2-0.6,0.4-0.7c0.5-0.2,1-0.5,1.5-0.5s0.5,0.7,0.6,1.1c0.3,0.6,0.5,1.3,0.8,1.9
+	c0.2,0.5,0.4,0.9,1,0.5C71,9.1,71.5,9,72,8.9s0.8-0.3,1-0.9c0.2,0.9,0.7,1.1,1.4,0.8c0.5-0.2,0.9,0,1.2,0.4c1,1.1,1.7,2.3,1.8,3.9
+	c0,0.7,0.3,1.4,0.9,1.9c0.5,0.4,0.7,0.9,0.5,1.6c-0.2,0.6-0.1,1.2,0.7,1.5c0.8,0.3,1.2,0.9,1,1.8c-0.1,0.5,0,1,0,1.4
+	c0.1,0.1,0.2,0.1,0.2,0.1c0.9-0.6,1.6-0.4,2.4,0.3c0.6,0.5,1.3,0.8,2.1,0.9c0.3-0.6,0.1-1.3,0.6-1.8c0.6,0.3,0.3,1.5,1.4,1.2
+	c0.6-0.2,1.4-0.1,1.3-1.1c0.9,0.5,1.8,0.8,2.5,1.4c0.8,0.7,1.5,1.6,1.4,2.7c-0.1,0.9,0.2,1.6,0.9,2.1c0.4,0.3,0.8,0.7,1.1,1.1
+	c0.8,0.8,0.7,1.3-0.2,1.8c-0.6,0.4-1.3,0.7-1.9,1.1c-0.6,0.3-0.8,0.7-0.8,1.3c-0.1,0.9-0.2,1.8-0.3,2.8c-0.1,0.6-0.4,0.8-1,0.7
+	c-1.7-0.3-1.9-0.1-2.3,1.5c0,0.2-0.1,0.4,0,0.6c0.5,0.5,0.1,0.8-0.3,1c-0.3,0.2-0.6,0.4-0.9,0.6c-0.7,0.3-1.2,0.8-1.4,1.6
+	c-0.2,0.6-0.5,0.8-1.1,0.7c-0.2,0-0.5,0-0.7,0c-1.1,0-1.1,0-1.2-1c0-0.4-0.2-0.6-0.6-0.6c-1.2-0.1-2.3-0.1-3.4,0.7
+	c-2,1.5-4,3-5.9,4.7c-0.9,0.8-1.7,1.3-2.8,1.1c-0.2,0-0.5,0-0.6,0.2c-0.3,0.8-1,0.8-1.7,1c-0.4,0.1-0.8,0.3-1.2,0.4
+	c-0.4,0.1-0.6,0.3-0.6,0.7c0,1.2-1,1.6-1.8,2.3c-0.2,0.2-0.4,0.1-0.6-0.1c-0.4-0.3-0.7-0.7-1.1-0.9c-0.2,0.1-0.3,0.4-0.5,0.6
+	c-0.5,0.8-0.1,1.9,0.9,2.1c0.5,0.1,0.6,0.2,0.6,0.7c-0.2,3.6,0.2,7.2,0.1,10.8c0,0.7,0.1,1.2,0.9,1.5c0.6,0.2,1,0.7,1,1.4
+	c0,0.6-0.2,0.8-0.8,0.6c-0.3-0.1-0.6-0.3-0.8-0.6c-0.4-0.5-0.9-0.6-1.5-0.6c-1.2,0-2.3,0.1-3,1.2c-0.3,0.5-0.8,0.5-1.3,0.6
+	c-0.9,0.2-1.9,0.3-1.7,1.7c-0.8-0.3-1.5-0.6-2,0.2c-0.1,0.1-0.3,0-0.4-0.1c-0.2-0.2-0.4-0.3-0.6-0.5c-1-1.2-2.4-1.6-3.8-2
+	c-1.1-0.3-2.2-0.1-2.9,0.9c-0.1,0.1-0.2,0.2-0.3,0.4c-0.3,0.5-0.8,1-1.4,0.7c-0.6-0.3-1.3-0.7-1.2-1.5c0.1-0.9-0.4-1.2-1.2-1.4
+	c-0.5-0.1-1-0.2-1.4-0.4c-0.8-0.4-1.5-1-1.5-2c0-0.3-0.1-0.6-0.2-1c-0.1-0.5-0.3-0.7-0.8-0.7c-0.9-0.1-1.8-0.2-2.8-0.4
+	c-0.4-0.1-0.8,0.1-1.2,0.2c-0.4,0.2-0.6,0.1-0.8-0.3c0,0,0-0.1-0.1-0.1c-0.5-1.6-1.8-1.9-3.3-1.6c-1.1,0.3-1.8-0.2-2.4-1.1
+	c-0.3-0.5-0.6-0.6-1.2-0.7c-1.6-0.1-3.1-0.3-4.5-1.3c-0.2-0.1-0.3-0.2-0.5-0.3c-1.3-0.6-1.7-0.4-1.7,1c0,0.6-0.1,1.3-0.1,1.9
+	c-0.1,0.9-0.1,1-1,0.8c-1.5-0.2-3,0.1-4.4-0.5c-0.2-0.1-0.4,0.1-0.5,0.2c-0.2,0.2-0.2,0.7-0.7,0.6c-0.4-0.1-0.9-0.1-1.2-0.4
+	l-0.1-0.1c-0.7-1.4-1.7-1.1-2.8-0.5c-0.3,0.2-0.7,0.3-1,0.4c-0.9,0.3-2.2-0.3-2.4-1.3c-0.1-0.6-0.4-0.9-0.9-1.2
+	c-0.6-0.4-1.1-0.8-1.7-1.2S2,55.9,2.5,55.4c0.6-0.6,0.6-1.3,0.7-2c0.1-0.6,0-1,0.9-0.9c0.8,0.1,1.2-0.5,0.8-1.3
+	c-0.2-0.4-0.1-0.7,0.2-0.9c1.4-0.9,2.1-2.3,2.7-3.8C8,46,8.2,45.6,8.5,45.2c0.7-0.9,0.6-0.8,0-1.7C8.3,43.3,8.2,43,8,42.8
+	c-0.4-0.5-0.8-1,0-1.5c0.2-0.1,0.2-0.4,0.1-0.6c-0.2-0.4-0.5-0.7-0.7-1.1c-0.4-1-1.1-1.5-2.3-1.5c-1.1,0-1.4-0.5-1-1.5
+	c0.1-0.3,0.2-0.6,0.4-0.9c0.5-0.6,1-1.2,0.6-2.1c-0.1-0.2,0-0.4,0.1-0.6c0.7-0.5,0.3-0.9,0.1-1.4C5.5,31.3,5,31,5.4,30.5
+	s0.8-0.5,1.3-0.3c0.6,0.3,0.9-0.1,1.2-0.3c0.4,0.1,0.4,0.4,0.6,0.6c0.5,0.7,1.1,0.8,1.8,0.4c0.3-0.2,0.2-0.4,0.2-0.6
+	c0-0.3,0-0.6,0-1c0-0.1,0.1-0.2,0.2-0.3c0.9,0.5,0.9,0.5,1.7-0.3c0.3-0.2,0.4-0.2,0.8-0.1c1.2,0.3,2.4-0.1,3.6-0.4
+	c0.1,0,0.1-0.1,0.1-0.2c0.4-1.2,1.5-0.9,2.4-1c0.5-0.1,0.7,0.5,1,0.8c0.4,0.4,0.7,0.7,1.1,0.1c0.2-0.2,0.4-0.3,0.6-0.3
+	c0.5-0.1,0.6-0.4,0.5-0.9c-0.2-0.4,0.1-0.6,0.5-0.7c0.6-0.1,1.2-0.3,1.8-0.4c0.3-0.1,0.5-0.2,0.4-0.5c-0.3-0.6-0.1-1.1,0.2-1.7
+	c0.1-0.3,0.2-0.6,0.3-0.9c0.2-0.5,0.1-0.9-0.3-1.2c-0.6-0.5-0.4-1-0.1-1.5c1.2,0.7,2.2,0.2,3.4-0.1c-0.3-0.7-0.6-1.4-0.9-2.1
+	s-0.4-1.4-0.6-2.1c0.3-0.2,0.6-0.2,0.8-0.1c0.4,0,0.6-0.2,0.7-0.5c0.2-0.5,0.4-1,0.8-1.3c0.2-0.2,0.3-0.4,0.3-0.6
+	c0-0.6,0.3-0.8,0.8-0.8c1.5,0,1.7-1.4,2.4-2.3c0.2-0.3-0.5-0.2-0.4-0.7c0.7,0.1,1-0.3,1.3-1.1c0.2-0.5,0.7-1,1.1-1.6
+	c0.2-0.4,0.3-0.7-0.1-1.1c-0.7-0.9-0.6-1.1,0.4-1.6c1.4-0.7,2.6-0.4,3.5,0.8c0.3,0.4,0.5,0.7,0.8,1.1c0.7,0.9,1.4,1,2.3,0.3
+	c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.3-0.3,0.4-0.1c0.5,0.8,0.8,0.1,1.2-0.2c0.6-0.6,1.1-0.4,1.3,0.4c0.1,0.4,0.2,0.7,0.2,1.1
+	c0,0.9,0.2,1.6,1.1,2c0.3,0.2,0.4,0.4,0.2,0.8c-0.3,0.5-0.4,1-0.7,1.6c-0.1,0.3-0.2,0.6,0.2,0.7c0.7,0.2,0.6,0.6,0.5,1.2
+	c-0.2,0.7-0.2,0.7,0.5,0.8c0.6,0.1,1.2,0.1,1.5-0.7c0.2-0.4,0.5-0.6,1-0.3c1,0.6,2.1,0.1,3.1,0.2c0.1,0,0.2,0,0.2-0.1
+	c0.3-0.7,1.1-1.2,1.3-1.9c0.2-0.5,0-1.1,0.7-1.4c0.2-0.1,0.2-0.4,0.1-0.6C55.1,7.9,55.9,7.1,57,6.5z"/>
+</svg>
diff --git a/public/regions/pays-de-la-loire.svg b/public/regions/pays-de-la-loire.svg
new file mode 100644
index 0000000..b0a3fd1
--- /dev/null
+++ b/public/regions/pays-de-la-loire.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 61.4 58.9" style="enable-background:new 0 0 61.4 58.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M50.5,25.3c-0.5-0.3-1-0.7-1.5-1c-0.5,0.6-0.7,1.3-1,1.9c-0.1,0.1-0.1,0.3-0.1,0.3c0.6,0.8,0,1.3-0.4,1.9
+	c-0.2,0.3-0.1,0.8-0.1,1.2c0,0.4,0.1,0.7-0.2,1c-1.1,1-1.4,2.3-1.7,3.7c-0.1,0.5-0.4,0.7-0.8,1c-0.8,0.6-1.4,1.3-2.1,2.2
+	c-0.3-0.7-0.9-0.7-1.6-0.7c-2,0-3.8,0.7-5.8,0.6c-0.4,0-0.5,0.3-0.6,0.6c-0.1,1.2-0.5,1.5-1.7,1.1c-1.5-0.5-2.7,0-4,0.7
+	c0.4,0.8,1.1,1.5,1.1,2.5c0,0.5,0.7,0.7,1.1,1.1c0.4,0.4,0.8,0.7,0.4,1.3c-0.3,0.4,0.1,0.7,0.3,0.9c0.4,0.4,1,0.8,0.4,1.5
+	c-0.2,0.2,0.1,0.5,0.2,0.6c0.8,1.1,1.1,2.3,0.4,3.6l-0.1,0.1c0.8,1-0.2,2.1,0.1,3.1c0.1,0.3,0.1,0.5,0.5,0.5l0,0
+	c-0.4,0.8-1.3,0.7-2,1.1c-0.3,0.2-0.6-0.2-0.8-0.4c-0.5-0.4-0.9-0.5-1.4-0.2c-0.4,0.3-0.8,0.2-0.9-0.3c-0.1-0.6-0.5-0.7-1-0.6
+	c-0.4,0.1-0.7,0.1-1.1,0.2c-0.9,0.4-1.6,1.3-2.8,1.3c-0.3,0-0.1,0.6-0.4,0.8c-0.8-0.3-1.5-0.6-1.9-1.4c-0.2-0.5-0.7-0.6-1.2-0.6
+	C19,55,18.6,54.7,18.4,54c-0.2-0.7-0.6-0.9-1.3-0.8c-0.8,0.1-1.4-0.2-1.9-0.8s-1.1-1.1-1.8-1.3c-0.5-0.2-0.8-0.5-0.9-1.1
+	c-0.1-0.4-0.3-0.8-0.4-1.1c-0.5-2.2-1.7-3.9-3.3-5.3c-0.7-0.6-0.9-1.3-0.9-2.2c0-0.4,0.2-0.8,0.5-1.1c0.8-1,1.5-1.9,2.3-2.9
+	c-0.7-0.6-1.4-1.2-2-1.8c-0.4-0.4-0.9-0.2-1.4-0.2c-0.3,0-0.7,0.3-0.8-0.2c-0.1-0.5,0.3-0.4,0.6-0.5C8,34.4,8.3,33.8,8,32.9
+	c-0.1-0.5,0-0.9,0.5-1.1C9,31.7,9,31.5,9,31.3c-0.1-0.2-0.3-0.2-0.5-0.3c-0.5-0.1-0.7,0.3-1,0.6c-0.9,1-1.6,0.9-2.5-0.1
+	c-0.3-0.4-0.5-0.5-0.9,0c-0.3,0.3-1.1,0-1.9-0.5c0.3-0.6,1-1.2,0.3-1.9c-0.2-0.2,0.1-0.4,0.3-0.6c0.5-0.4,1-0.8,1.2-1.5
+	c0-0.2,0.3-0.3,0.6-0.1c0.7,0.4,1.4,0.4,2.1,0c1-0.5,2-1,3-1.3c0.5-0.2,0.8-0.5,0.8-1.1v-0.1c0.1-0.5-0.2-1.2,0.3-1.6
+	c0.7-0.5,1.4-1,2.3-1c1.3-0.1,2.5-0.2,3.8-0.2c0.6,0,1.1-0.1,1.4-0.8c0.2-0.7,0.8-1.1,1.6-1.1c0.5,0,1.1,0,1.3-0.8
+	c0.1-0.4,0.8-0.3,1.2,0.2c0.4,0.6,1,0.8,1.6,0.9c0.9,0.2,0.9,0.2,1.2-0.7c0.3-1.1,0.7-2.2,1.2-3.3c0.4-1,0.4-1,1.5-1
+	c0.9,0,0.9,0,0.9-0.9c0-0.8,0.2-1.6-0.5-2.1c-0.1-1.4-0.2-2.9-0.3-4.3c0-0.2,0.1-0.4,0.3-0.5c0.8-0.8,0.7-1.7,0.3-2.5
+	c-0.1-0.3-0.2-0.6-0.2-0.9c0-0.8,0-0.8,0.8-0.8c0.4,0,0.7,0,1-0.3c0.5-0.4,1-0.2,1.4,0.3c0.3,0.3,0.5,0.7,0.9,1
+	C33,4.5,33,4.5,33.9,4c0.2-0.1,0.5-0.4,0.8-0.1c0.5,0.5,1,0.2,1.4-0.1c1-0.7,1.9-1,3.2-0.7c0.9,0.2,1.8-0.1,2.4-1
+	c0.2-0.4,0.6-0.3,0.8,0s0.3,0.8,0.3,1.2c0,0.5,0.2,1,0.8,1.1c0.5,0.1,0.6,0.5,0.7,0.9c0.1,0.4,0.1,0.9,0.6,1c0.7,0.1,1.4,0.3,2-0.2
+	c0.5-0.5,1-0.9,1.5-1.4c0.7-0.7,1.5-0.5,2.3-0.4c0.4,0.1,0.5,0.6,0.6,1c0.1,0.7,0.2,1.4,0.3,2c0,0.5,0.2,0.8,0.7,0.9
+	c0.7,0.1,1.1,0.6,1.5,1.2c0.2,0.4,0.5,0.6,1,0.5c0.8-0.2,1.3,0.5,2,0.5c0.4,0,0.5,0.9,1.1,1c0.5,0.1,1,0.2,1.5,0.6
+	c-0.4,0.6-0.8,1.3-1.2,1.9c-0.2,0.4-0.2,0.6,0.1,0.9c0.5,0.5,0.6,1.9,0.3,2.5c-0.1,0.1-0.2,0.2-0.2,0.2c-0.9,0-0.9,0.6-0.8,1.3
+	c0,1.1-0.6,1.8-1.5,2.2c-0.6,0.3-1.4,0.7-1.4,1.2c0.1,1.2-0.7,1.1-1.4,1.3h-0.1c-0.8,0.7-1.6,0.6-2.4-0.2c-0.3,0.5,0.1,0.9,0.1,1.2
+	C50.9,25.1,50.9,25.3,50.5,25.3z"/>
+</svg>
diff --git a/public/regions/provence-alpes-côte-d'azur.svg b/public/regions/provence-alpes-côte-d'azur.svg
new file mode 100644
index 0000000..5f17bf8
--- /dev/null
+++ b/public/regions/provence-alpes-côte-d'azur.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 65.4 57.9" style="enable-background:new 0 0 65.4 57.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M28.9,12.9c0.6,0,1.1,0,1.5,0c0.7-0.1,1.2-0.7,1.1-1.5c0-0.6,0.2-0.8,0.7-0.6c0.3,0.1,0.6,0.1,0.9-0.2
+	c0.5-0.6,1.2-0.6,1.9-0.4c0.5,0.1,0.9,0.1,1.3-0.3c0.4-0.5,0.9-0.3,1.4-0.2c0.6,0,0.8-0.1,0.8-0.7c0-0.4,0-0.7,0-1.1s0-0.8-0.5-1
+	c-0.1-0.1-0.3-0.2-0.3-0.3c-0.1-1.1-0.9-1.2-1.8-1.2c-0.1,0-0.2-0.1-0.3-0.1c-0.2-0.3,0-0.7,0.1-0.9c0.1-0.7,0.9-1.1,1.6-0.9
+	c0.4,0.1,0.3,0.5,0.4,0.8c0.2,0.9,0.2,0.9,1.2,0.7c0.2,0,0.4-0.1,0.6-0.1c0.6,0,0.8-0.3,0.8-0.8s0.2-0.9,0.7-0.8
+	c0.6,0.1,1.3-0.2,1.6,0.6c0.3,0.7,0.6,1.4,1.5,1.6c0.4,0.1,0.4,0.5,0.4,0.8c0.3,2,0.3,2,2.1,2.8c0.4,0.2,0.8,0.2,1.3,0.1
+	c0.9-0.1,1.1,0.1,1.2,1c0.2,1.5,0.2,1.5,1.4,2.4c-0.5,0.2-1.1,0.3-1.4,0.8c-0.3,0.4-0.6,0.7-0.4,1.3c0.1,0.4-0.1,0.8-0.4,1.1
+	c-0.2,0.2-0.3,0.4-0.5,0.5c-1.2,1.3-1.1,2.2,0.5,3c-0.1,0.4-0.7,0.1-0.6,0.7c0.1,0.4,0,0.8,0,1.2c0,0.5,0.4,0.6,0.7,0.8
+	c0.8,0.4,1.2,0.9,1.1,1.8c-0.1,0.4,0.2,0.6,0.6,0.6c0.5,0,1,0,1.4,0.1c1.1,0.2,2.1,0.7,2.8,1.5c0.8,0.8,1.8,0.9,2.8,0.5
+	c1-0.3,1.9-0.7,2.9-1c0.4-0.1,0.8-0.2,1.2-0.3c0.2,0,0.4,0,0.5,0.2c0.4,1.1,1.2,2.1,0.8,3.5c-0.2,0.7-0.5,1.1-1.2,1.3
+	c-0.9,0.2-0.9,0.3-0.8,1.2c0.1,0.5-0.2,0.7-0.5,0.9c-0.8,0.7-0.8,0.7-0.4,1.6c0.4,1,0.4,1-0.4,1.5c-0.5,0.3-0.5,0.9-0.9,1.2
+	s-1-0.1-1.4,0.2c-0.2,0.1-0.4,0.3-0.5,0.5c-0.6,0.7-1.3,1-2.2,1c-0.6,0-0.9,0.2-0.9,0.9c0,0.1,0,0.2,0,0.2c0.4,1.2-0.7,1.5-1.3,2
+	c-0.2,0.2-0.5,0-0.8,0C50,41,50,41,50,42.1c0,0.7-0.2,1.2-0.7,1.7c-0.5,0.7-1.2,0.9-2,0.9c-1.1,0.1-1.1,0.1-1.4,1.2
+	c-0.2,0.7-0.5,1.2-1.1,1.5c-0.4,0.2-0.7,0.5-1.1,0.7c0.2,0.2,0.5,0.1,0.6,0.2c0.4,0,0.9-0.2,1.1,0.2c0.2,0.4,0.1,1,0.1,1.4
+	s-0.9,0.8-1.4,0.6c-0.6-0.2-1.1-0.2-1.5,0.4c-0.2,0.3-0.6,0.2-0.9,0.2c-1.2,0-1.4,0.2-1.8,1.4c-0.1,0.4-0.2,0.7-0.7,0.3
+	c-0.2-0.2-0.5-0.2-0.8-0.3C37.5,52,36.7,52.2,36,53c-0.3,0.3-0.5,0.4-0.8,0.3c-0.2,0-0.3,0-0.5-0.1c-1.2-0.2-2.2,0-3.2,0.7
+	c-0.2,0.2-0.5,0.3-0.7,0.5c-0.5,0.3-0.9,0.1-1-0.4c-0.1-1-0.7-1.5-1.5-1.8c-0.6-0.2-1-0.8-1.6-1c-1.3-0.5-2.5-0.4-3.8-0.4
+	c-0.3,0-0.6,0.1-1-0.1c0.1-0.4,0.2-0.7,0.4-1.1c-0.4-0.4-0.9-0.1-1.2-0.3c0-0.4,0.3-0.5,0.5-0.7c0.3-0.4,0.1-0.7,0-1
+	c-0.2-0.4-0.5-0.1-0.7,0c-0.6,0.3-1.2,0.3-1.8,0.3c-0.7,0-1.5-0.1-2.2,0c-1,0.1-1.7-0.1-2-1.2c-0.3-0.8-1.1-0.9-1.8-1.1
+	c-0.6-0.1-0.9,0.6-1.4,0.9c0.4,0.5,0.8,0.8,1.2,1.2c-1.5,0.7-2.8,0.7-5.4-0.2c0.1-1.1,0.9-1.1,1.8-1.1c-0.3-0.7-0.8-1-1.5-1.1
+	c-0.8,0-1.6-0.1-2.4-0.2c-0.8,0-1.6-0.1-2.5-0.1C3,44.3,3.3,43.7,4,43.4c0.6-0.3,1.2-0.7,1.8-1.1c0.4-0.2,0.6-0.5,0.2-0.9
+	c-0.3-0.3-0.3-0.6-0.2-1c0.3-0.8,0.3-0.8,1.1-0.7c0.6,0.1,1.2,0.4,1.6,0.1c0.5-0.3,0.2-1.1,0.4-1.6c0.2-1,0-2.1,0.5-2.9
+	c0.5-0.8,1.7-1.1,2.5-1.6c0.9-0.6,1.1-1.5,0.4-2.3c-0.2-0.3-0.5-0.5-0.8-0.8c-0.9-0.8-1.6-1.6-1.4-2.9c0.1-0.7-0.5-1.3-0.9-1.8
+	c-1-1.6-0.5-1.4,0.9-1.6c0.4-0.1,0.6,0.1,0.6,0.5c0,0.2,0,0.3-0.1,0.5c-0.3,0.7,0,1.2,0.6,1.7c0.4-0.1,0.7-0.5,1-0.8
+	s0.6-0.6,1.1-0.6c0.2,0,0.5,0,0.6-0.1c0.3-0.8,0.9-0.4,1.4-0.4c0.6,0,1.2,0,1.2,0.9c0,0.5,0.4,0.5,0.8,0.5c0.9,0.1,1.8,0.2,2.7,0.2
+	c0.5,0,0.8,0.1,1,0.6c0.3,0.8,1,1.1,1.7,1.4c0.8,0.3,1.5,0.1,2.1-0.6c0.2-0.2,0.3-0.5,0.5-0.7c0.6,0.2,0.7,0.8,1.3,1.1
+	c0.1-1.3,0.3-2.6,0.4-3.9c0-0.2,0-0.4-0.1-0.4c-1.2-0.4-1.7-1.9-3.2-1.8c-0.4,0-0.9-0.1-1-0.7c-0.2-0.6,0.4-0.7,0.7-1
+	c0.1-0.1,0.2-0.2,0.4-0.4c-0.3-0.3-0.6-0.5-0.9-0.8c0.6-0.2,1,0,1.4,0.3c0.6,0.4,1,0.2,1.3-0.3c0.1-0.1,0.2-0.3,0.3-0.4
+	c0.5-0.4,0.6-0.8,0-1.2c-0.7-0.5-0.3-1.1-0.2-1.8c0.1-0.7,0.6-0.7,1.1-0.7c0.6,0,1.2-0.3,1.7-0.5C29.7,14.5,29.8,13.9,28.9,12.9z"/>
+</svg>
diff --git a/public/regions/réunion.svg b/public/regions/réunion.svg
new file mode 100644
index 0000000..2cef1f7
--- /dev/null
+++ b/public/regions/réunion.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 27.4 23.9" style="enable-background:new 0 0 27.4 23.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M16.4,21.2c-0.7-0.3-1.4-0.6-2.2-0.7c-1.5-0.2-3-0.7-4.3-1.6c-0.9-0.6-1.8-1.1-2.7-1.7c-0.7-0.4-1.2-1-1.7-1.5
+	c-0.6-0.6-1-1.4-0.8-2.3c0.1-0.7-0.1-1.3-0.7-1.8c-0.5-0.5-1-1-1.3-1.7C2.2,8.8,2.5,8.1,3.5,7.6c0.7-0.4,1.1-0.9,1.2-1.7
+	C4.8,5.2,5.2,4.8,6,4.5c1-0.4,2.2-0.7,3.2-1.4C10,2.5,11,2.6,11.9,2.9c0.7,0.3,1.4,0.4,2.1,0.3c2.1-0.1,3.8,0.8,5.4,2.1
+	C19.8,5.7,20,6.2,20,6.7c0,1.4,0.6,2.7,1.6,3.7c0.1,0.1,0.3,0.3,0.4,0.5c0.4,0.7,1.1,1.1,1.8,1.4c1.2,0.4,1.3,1,0.9,2.2
+	c-0.2,0.5-0.4,0.9-0.8,1.2c-0.7,0.8-0.8,1.7-0.8,2.7c0.1,1-0.2,1.5-1.2,1.9C21,20.7,20,20.9,19.1,21c-0.3,0-0.7,0-0.9,0.2
+	C17.6,21.2,17,21.2,16.4,21.2z"/>
+</svg>
diff --git a/src/assets/main.css b/src/assets/main.css
index fead8e7..3b5aefa 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,7 +5,7 @@
 @tailwind utilities;
 
 body {
-  @apply text-slate-300 bg-slate-950
+  @apply text-slate-100 bg-slate-950
 }
 
 @layer components {
diff --git a/src/components/RepButton.vue b/src/components/RepButton.vue
index 42fdf48..ddd7e52 100644
--- a/src/components/RepButton.vue
+++ b/src/components/RepButton.vue
@@ -20,7 +20,7 @@ const elementTag = computed(() => (props.href ? "a" : "button"));
   <component
     :is="elementTag"
     v-bind="props"
-    class="py-[10px] px-4 my-1 inline-flex text-white items-center gap-2 rounded-md font-semibold tracking-wide outline-2 outline-offset-4 focus-visible:outline transition-colors"
+    class="w-full md:w-max py-[10px] px-4 flex md:inline-flex text-white justify-center items-center gap-2 rounded-md font-semibold tracking-wide outline-2 outline-offset-4 focus-visible:outline transition-colors"
     :class="props.style"
   >
     <slot />
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index 29101d2..5ce2f1c 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -25,35 +25,52 @@ const repMandate = computed(() => {
   return parliamentMandate;
 });
 
-const repSocials = {
-  twitter: computed(() =>
-    props.rep.acteur.adresses.adresse.find(
-      (adr) => adr["typeLibelle"] === "Twitter"
-    )
-  ),
-  facebook: computed(() =>
-    props.rep.acteur.adresses.adresse.find(
-      (adr) => adr["typeLibelle"] === "Facebook"
-    )
-  ),
-  instagram: computed(() =>
-    props.rep.acteur.adresses.adresse.find(
-      (adr) => adr["typeLibelle"] === "Instagram"
-    )
-  ),
-  linkedin: computed(() =>
-    props.rep.acteur.adresses.adresse.find(
-      (adr) => adr["typeLibelle"] === "Linkedin"
-    )
-  ),
-};
+const repTwitter = computed(() =>
+  props.rep.acteur.adresses.adresse.find(
+    (adr) => adr["typeLibelle"] === "Twitter"
+  )
+);
+const repFacebook = computed(() => {
+  const data = props.rep.acteur.adresses.adresse.find(
+    (adr) => adr["typeLibelle"] === "Facebook"
+  );
+  if (data) {
+    data.valElec = String(data.valElec).replace(/^(.*[\\/])/, "");
+  }
+  return data;
+});
+const repInstagram = computed(() => {
+  const data = props.rep.acteur.adresses.adresse.find(
+    (adr) => adr["typeLibelle"] === "Instagram"
+  );
+  return data;
+});
+const repLinkedin = computed(() => {
+  const data = props.rep.acteur.adresses.adresse.find(
+    (adr) => adr["typeLibelle"] === "Linkedin"
+  );
+  if (data) {
+    data.valElec = String(data.valElec).replace(/^(.*[\\/])/, "");
+  }
+  return data;
+});
+
+const regionBgFile = computed(
+  () =>
+    `regions/${String(repMandate.value?.election?.lieu.region)
+      .toLocaleLowerCase()
+      .replace(" ", "-")}.svg`
+);
 </script>
 
 <template>
-  <section>
-    <header>
+  <section class="py-8 md:py-0">
+    <header
+      :style="`background-image: url(/${regionBgFile}); background-position: center;`"
+      class="bg-contain bg-no-repeat"
+    >
       <div class="text-center">
-        <small class="text-base font-bold"> Votre député est... </small>
+        <small class="text-base font-bold"> Votre député·e est... </small>
       </div>
       <figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
         <img
@@ -70,11 +87,12 @@ const repSocials = {
         {{ repMandate?.election?.lieu.departement }} -
         {{ repMandate?.election?.lieu.numCirco }}e circonscription
       </h2>
-      <h3 class="mt-2 text-center font-medium text-lg">
-        {{ rep.acteur.profession.libelleCourant }}
-      </h3>
     </header>
 
+    <h3 class="mt-2 text-center font-medium text-lg">
+      {{ rep.acteur.profession.libelleCourant }}
+    </h3>
+
     <footer class="mt-8">
       <div class="mt-4 text-center">
         <RepButton
@@ -88,10 +106,12 @@ const repSocials = {
         </RepButton>
       </div>
 
-      <menu class="mt-2 flex justify-center items-center gap-4">
-        <li v-if="repSocials.twitter">
+      <menu
+        class="mt-4 flex flex-col gap-y-4 md:flex-row md:gap-x-3 md:gap-y-0"
+      >
+        <li v-if="repTwitter">
           <RepButton
-            :href="`https://twitter.com/${repSocials.twitter.value?.valElec}`"
+            :href="`https://twitter.com/${repTwitter.valElec}`"
             target="_blank"
             rel="noopener"
             :style="'btn-twitter'"
@@ -101,9 +121,9 @@ const repSocials = {
           </RepButton>
         </li>
 
-        <li v-if="repSocials.facebook">
+        <li v-if="repFacebook">
           <RepButton
-            :href="`https://www.facebook.com/${repSocials.facebook.value?.valElec}`"
+            :href="`https://www.facebook.com/${repFacebook.valElec}`"
             target="_blank"
             rel="noopener"
             :style="'btn-facebook'"
@@ -113,9 +133,9 @@ const repSocials = {
           </RepButton>
         </li>
 
-        <li v-if="repSocials.linkedin">
+        <li v-if="repLinkedin">
           <RepButton
-            :href="`https://www.linkedin.com/${repSocials.linkedin.value?.valElec}`"
+            :href="`https://www.linkedin.com/${repLinkedin.valElec}`"
             target="_blank"
             rel="noopener"
             :style="'btn-linkedin'"
@@ -125,9 +145,9 @@ const repSocials = {
           </RepButton>
         </li>
 
-        <li v-if="repSocials.instagram">
+        <li v-if="repInstagram">
           <RepButton
-            :href="`https://www.instagram.com/${repSocials.instagram.value?.valElec}`"
+            :href="`https://www.instagram.com/${repInstagram.valElec}`"
             target="_blank"
             rel="noopener"
             :style="'btn-instagram'"

From e97eb670fa8ffd3fff44e63bd323df74cb717d0c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 23:08:29 +0200
Subject: [PATCH 7/8] Fixed some issues with the background image

---
 ...ône-alpes.svg => auvergne-rhône-alpes.svg} |  0
 public/regions/ile-de-france.svg              | 24 +++++++++++++++++++
 src/components/RepInfo.vue                    | 18 +++++++-------
 3 files changed, 34 insertions(+), 8 deletions(-)
 rename public/regions/{auverge-rhône-alpes.svg => auvergne-rhône-alpes.svg} (100%)
 create mode 100644 public/regions/ile-de-france.svg

diff --git a/public/regions/auverge-rhône-alpes.svg b/public/regions/auvergne-rhône-alpes.svg
similarity index 100%
rename from public/regions/auverge-rhône-alpes.svg
rename to public/regions/auvergne-rhône-alpes.svg
diff --git a/public/regions/ile-de-france.svg b/public/regions/ile-de-france.svg
new file mode 100644
index 0000000..30bbfde
--- /dev/null
+++ b/public/regions/ile-de-france.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 51.4 39.4" style="enable-background:new 0 0 51.4 39.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#FFF;}
+</style>
+<path class="st0" d="M26.9,38.3c0.3-0.2,0.4-0.4,0.4-0.7c0-0.6-0.1-1.2-0.1-1.8c0-0.5-0.2-0.8-0.6-0.9c-0.9-0.3-1.4-0.9-1.8-1.7
+	c-0.4-0.7-0.9-1-1.7-0.9c-0.2,0-0.5,0-0.7,0c-1,0-2-0.2-2.7-1c-0.3-0.4-0.7-0.5-1,0c-1,1.4-2.5,1.5-4,1.5c-0.4,0-0.5-0.1-0.5-0.4
+	c0-1.3-0.4-2.6-0.6-3.9c-0.1-0.6-0.3-0.9-0.9-0.9c-0.5,0-0.9-0.2-1.4-0.3c-0.9-0.2-1.4-0.8-1.5-1.7c-0.1-0.4-0.1-0.8-0.2-1.2
+	c0-0.8-0.2-1.5-1.3-1.4c-0.3,0-0.5-0.2-0.5-0.5c0-0.6-0.4-0.9-0.8-1.2c-0.4-0.3-0.9-0.5-1.2-1c-0.4-0.8-0.7-1.6,0.1-2.4
+	c0.3-0.3,0.3-0.7,0-1C5,16.1,5,15.3,5.4,14.4c0.3-0.7,0.3-1.2-0.4-1.7c-0.4-0.3-0.6-0.7-0.6-1.1c-0.1-0.6-0.3-1.1-0.8-1.4
+	C3,9.8,3.1,9.4,3.6,9C3.8,8.9,4,8.7,4,8.4C3.9,8.4,3.7,8.3,3.5,8.3c-1.1,0.1-1-0.9-1.4-1.5C1.9,6.5,2.3,6.5,2.4,6.5
+	C3,6.3,3.5,6.1,4,6c1.7-0.2,2.3-1.4,2.7-2.8C7,2.5,7,1.7,7.4,1c0.1,0.1,0.2,0.1,0.2,0.2c0.5,1.4,1.6,1.6,2.9,1.6c1,0,2,0.1,3,0
+	c0.8-0.1,1.6-0.2,2.2-0.9c0.3-0.3,0.6-0.4,1-0.1c0.3,0.2,0.7,0.4,1,0.6c1.1,1.2,2.4,0.9,3.6,0.3c0.5-0.2,0.8-0.2,1.3,0
+	c1.8,1,3.7,1.8,5.2,3.3c0.4,0.4,0.7,0.1,0.9-0.1C29.3,5.2,30,5.4,30.7,6c0.8,0.7,1.9,0.6,2.6-0.1c0.3-0.3,0.6-0.2,0.8,0
+	c0.7,0.6,1.3,0.5,2,0.1c0.7-0.4,1.3-0.5,2.1-0.2c0.5,0.3,0.8-0.3,1.2-0.6c0.4-0.2,0.6-0.8,1.1-0.5c0.5,0.2,0.7,0.7,0.7,1.3
+	c0,1.3,0.5,2.3,1.5,3.1c1.1,0.8,1.7,2.1,3.1,2.5c0.1,0,0.2,0.1,0.2,0.2c0.3,1,0.8,1.6,1.9,1.7c0.4,0,0.3,0.4,0,0.6
+	c-1.1,0.6-0.6,1.8-0.9,2.7c-0.1,0.2,0.3,0.3,0.5,0.5c0.9,0.6,1.1,1.4,0.6,2.4c-0.4,0.9,0.2,2,1.2,2.1c-0.9,0.2-1,0.8-1,1.6
+	c0,0.2,0,0.5-0.1,0.6c-1.2,1.4-1.1,3.1-1.4,4.7c-0.1,0.8-0.6,1.2-1.4,1.2c-0.9,0-1.8-0.1-2.7-0.1c-0.9-0.1-1.6,0-2.5,0.4
+	c-1.4,0.5-2,1.6-2.6,2.9c-0.2,0.5,0,0.7,0.3,1c0.4,0.3,0.3,0.6,0,0.9c-1,1.2-1.9,2.4-3.4,3c-0.3,0.1-0.4,0.3-0.7-0.1
+	c-0.3-0.4-1-0.2-1.5-0.3c-0.6-0.1-0.9,0.1-1.1,0.7c-0.2,0.5-0.7,0.5-1.1,0.5c-1.1,0-2.2-0.1-3.3-0.1C26.8,38.4,26.8,38.4,26.9,38.3
+	C26.8,38.3,26.9,38.3,26.9,38.3z"/>
+</svg>
diff --git a/src/components/RepInfo.vue b/src/components/RepInfo.vue
index 5ce2f1c..12d743f 100644
--- a/src/components/RepInfo.vue
+++ b/src/components/RepInfo.vue
@@ -59,20 +59,17 @@ const regionBgFile = computed(
   () =>
     `regions/${String(repMandate.value?.election?.lieu.region)
       .toLocaleLowerCase()
-      .replace(" ", "-")}.svg`
+      .replace(/\s/g, "-")}.svg`
 );
 </script>
 
 <template>
-  <section class="py-8 md:py-0">
-    <header
-      :style="`background-image: url(/${regionBgFile}); background-position: center;`"
-      class="bg-contain bg-no-repeat"
-    >
+  <section class="py-8 md:py-0 w-96 max-w-full">
+    <header class="relative">
       <div class="text-center">
         <small class="text-base font-bold"> Votre député·e est... </small>
       </div>
-      <figure class="mt-4 mx-auto w-60 h-60 rounded-full overflow-hidden">
+      <figure class="mt-4 mx-auto w-44 h-44 rounded-full overflow-hidden">
         <img
           :src="repImage"
           :alt="repFullName"
@@ -87,6 +84,11 @@ const regionBgFile = computed(
         {{ repMandate?.election?.lieu.departement }} -
         {{ repMandate?.election?.lieu.numCirco }}e circonscription
       </h2>
+
+      <img
+        :src="regionBgFile"
+        class="absolute top-0 left-0 w-full h-full object-contain select-none -z-20 pointer-events-none"
+      />
     </header>
 
     <h3 class="mt-2 text-center font-medium text-lg">
@@ -107,7 +109,7 @@ const regionBgFile = computed(
       </div>
 
       <menu
-        class="mt-4 flex flex-col gap-y-4 md:flex-row md:gap-x-3 md:gap-y-0"
+        class="mt-4 flex flex-col gap-y-4 md:justify-center md:flex-row md:gap-x-3 md:gap-y-0"
       >
         <li v-if="repTwitter">
           <RepButton

From 6700f00da782fa696bb0ccd666e6de18c4993f4e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 30 Apr 2023 23:56:04 +0200
Subject: [PATCH 8/8] Added favicon and meta tags

---
 index.html                      |  51 +++++++++++++++++++++++++-------
 public/android-chrome-96x96.png | Bin 0 -> 1828 bytes
 public/apple-touch-icon.png     | Bin 0 -> 828 bytes
 public/browserconfig.xml        |   9 ++++++
 public/favicon-16x16.png        | Bin 0 -> 729 bytes
 public/favicon-32x32.png        | Bin 0 -> 785 bytes
 public/favicon.ico              | Bin 4286 -> 15086 bytes
 public/mstile-150x150.png       | Bin 0 -> 910 bytes
 public/safari-pinned-tab.svg    |  17 +++++++++++
 public/site.webmanifest         |  13 ++++++++
 10 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 public/android-chrome-96x96.png
 create mode 100644 public/apple-touch-icon.png
 create mode 100644 public/browserconfig.xml
 create mode 100644 public/favicon-16x16.png
 create mode 100644 public/favicon-32x32.png
 create mode 100644 public/mstile-150x150.png
 create mode 100644 public/safari-pinned-tab.svg
 create mode 100644 public/site.webmanifest

diff --git a/index.html b/index.html
index 11603f8..b42a7f9 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Trouver mon député</title>
+
+        <!--theme colors -->
+        <meta name="theme-color" content="#020617" />
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    
+        <!--Basic meta info -->
+        <meta name="keywords" content="député, géolocalisation, assemblée nationale, france, représentant, démocratie, voter, élections, parlementaires, parlementarisme">
+        <meta name="author" content="Alexis Pelé" />
+        <meta name="description" content="Trouvez facilement votre député parlementaires ; Localisez facilement votre circonscription et découvrez qui vous représente sans vous arrachez les cheveux !">
+    
+        <!--OpenGraph meta -->
+        <meta property="og:description" content="Application de géolocalisation des députés par circonscription" />
+        <meta property="og:title" content="Trouver mon député" />
+    
+        <!--meta for twitter -->
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:creator" content="@bhupeshimself">
+        <meta name="twitter:title" content="">
+        <meta name="twitter:image" content="logo.png">
+        <meta name="twitter:site" content="@bhupeshimself">
+        <meta name="twitter:description" content="">
+    
+        <!--Favicon-->
+        <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/site.webmanifest">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="shortcut icon" href="/favicon.ico">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="msapplication-config" content="/browserconfig.xml">
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>
diff --git a/public/android-chrome-96x96.png b/public/android-chrome-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5edc43953242f21a361d10ad7241beb5b209072
GIT binary patch
literal 1828
zcmbVLSyYop6rK>)uqlM15iqhtOiWmU`NI}SSPe@^zzvNAkf0!7s6Yh+N<jnx0gtpE
z4dztE^=PeIrJx2xSp<XzttbWrL?D2Q)d+NyKGcWyq2Iaxow;}J^36T-?+**{*T>*6
z008~K044{n{Lh~@8tNXug3kx)TN!Ky0GCR2KW))~HeL|GVFQq53xIeZ03V@CJOV&E
z8Gunf0LT#lOjC~D40i`WZBy79E(-?4|6i=(rI}L;^@*iAj^)}8<xuN5l<C@*hQ*&7
z9vU1R98f?E4l0I+6p1?(1Vlk}SCBlQydZfzrFh*#{0bvCEHr0@rJGR;VFfjt%GZua
z|0<7Wgms7$<sO`cr4*~%RRHU%F$dc4O8O&LpJVI@nB~VwH=!Ir+g83JAYHCLWf5zk
zGb%dC!mR+t!^lRuUuHBPI?29!bO~k8S9zZI3xTEyENELXLZHJeXhJ~pD4WVLN7?|%
z9h#5>Y&Y&egG|1hf2GuHD@VWhF@!Q00Lwz=8eclX8^KU7cE%#oLCCh(*}FQF2R-~4
zA(0`5U10r7Om=dNV4-5<hGa`5U(^23OQL(dXTa`_n-~1yYg4T0`3uv4qp0%=%v~Q1
zkJd$Rr!e;zkxS5D_;<T7&iRGHJ4W*pss6k1wC|U=6qz~~ErH?!^?n?=kQ*=Q>g?#~
zc-Rin(b3-3*(OYFb78c(`L?+++ueMjz|9?Ze`ydWbxX_wf&bQUIKZk>4POxwfBDVy
z<m9As0%CG<;?4AUqG;TPI&QxjPH%pGUZ{}y!xwf-#0iN2C^fXYhNhN|p1y%0#sp`+
z9KXUYPTJ6P@1JODkjB|*FLlXmo|$RRbn&Vlo}C@8_FCdrtyEUKVI6Z`y~=U4h-ztx
zvOA_!9@AYVSE=N#@8{;;Ba1BEJ*?inqxGnIBub@(6x%x28f(ia8W|~Kn32P!6XPes
zjosEuhg2`6>rHtF+h=ClN_gy?Gxf5@uOX{HvwICCAT)v(8AWuauD0QIsStP%R7|ix
z^L}F8){W565(TnZTEprVCeE7q)RPJDk2(^_WN;InjX&n?!ZEN7Q|H>A@PqsMBojXA
zXSt`#f`WcfPY@>7hTHH?N4)RuTUJw^+&3dgFE_*Nvx{Gz)&9w=VV3x&sgA{3ZDvs5
zyR?R7>EKygGG)zj*7II;w*y<vN*E9x9?)298Gy|=_>;4Co<xkovEvWK5?9}kp)RdK
zg$Y;8eaO2MtuipDr?+1SmM8ap_qH|S;<N0JGp~>LiF5aA8d5M*%R4b0)P&{8_CK|4
zu7w`2-#t6y5$csQ_i@(0Eoty{r(mqZ?-a<3sS%D{pEAaB#Yk$`po48QhdG@q?mvPg
z-8>;dbJLqz*BPL!E%r<Fr^jeJO|FQM9dl}r%QCEuyoc|wFp1vLw`4k~S`^mq*TW=V
z!<Cy~9HIrG6Ry=|ymWlqFzVX)t=oB2F`u;VHN&v-0)e7itO@L^957klycTP1g?DDY
zT&fi|dfq-1<(UmO6Z+-4lLCNV(f~BcVw4{L@9pF~>gN1n`7&{&GRxyCaoMfkWlsBY
zIee*s>cj&!O2?@-yK{&*l6(FSj>_^$(#0pg-QA1py|HZ<FKvL8nwIkLS@!ANSuF$2
z3Oe1Wux8Y^pj4u9(1O0n+{k!?f8NlYx#s;9r$VG?$A?EfOs5KN$evZ=mwJw3j@GA4
z89DY(SDlrs-L`*dEgw*CEHa21{8;kiwPbns)B9r+bt*#(&j*hN>_U%w>?!YQiMsgw
zR<>y>P1ZeuI520G*}tT})4$YPkXO`*8-1Oa-7}YvmGjB-_Vi_1Z*TWgBm3)zhfX$?
zuBhHRUl+Cr+s}NwIBosPZ)zo1Q0-+_E7SC<Qkzx;;8Kz|F^!a0bKicjdV|S7`ILa|
zqT@P;%=HWIzUtjf+9~ikQM^q7pRJ9EwN@0nMHGh!(&FF(oXAejM6wIfnap*fAg&aI
zOeK)X2$>vmHtptD2}wI*h4GpHp5Qg}KocfJWpUSvI9qn%Q_^<C3%AGNMVTpacwvf2
z06@mkfoVPM)JS{#2ca#kfiF1#ZKX>R=o(uY2UlRx#(1XK<!&t6>Sr##rMJ6T)+#fT
eX|;$0BtaxFYPwi7?c-VnTYx}T2=jsuKkqL(js-LT

literal 0
HcmV?d00001

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea67f470586b4e6f5316b7f3716f68d67f90764c
GIT binary patch
literal 828
zcmeAS@N?(olHy`uVBq!ia0vp^J|N7&3?x5zE|dgPEa{HEjtmSN`?>!lvI6-E$sR$z
z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$Ysfq{`Dz$e7@|NsC0{{4IZ
z@yC<rpC3Q_{Q2w8zd-Qy>)+=u|Gs$j_v5EOfBx=2@x&)}i=6F38Jh(%)(hlq7A#qJ
z`P<h|?}6a!m-idCy>sw;XYc#oDd1B^$*+@V{{i*<{kL-KZB^$bj4D$ZfJk{Ni^|lQ
zOV54%^6?!IeEIx#`P#RdmTxsI-g|`p*tX~2-@k`WJ=Jty_TD?<*Xi>iIop}lroGj+
z{*+(EZ!r6vsf(7!viClb-Luc}>d$&>?EG!+l2>oOC6@1HQJ?l!$L4cY%ip)}9zFY%
z*K|nOWX?Ma_b+YzE4JKfntZx`;>m`Iry3`oI&<mSub)4@0m09o-!5PKHf7GY$+N#s
zp8ajw+`peb-;UKY0tOailDE4HLkFv@2av;F;_2(k{+vZl)R?W+Y*_|S=$xmEV@Sl|
zw`bggm>eb8E~vfq5Mb?GbU|U^M2)}$4U-&=D*n&jkT@gpvvc^)jjyWND|#3i7~V+s
zsBJ!0RQM+7VoW5jy58)&g>OUd-r04hyh?8U`S-!BP2UwiRaNk~|8O+<CgT4>HCRd4
z<oryXsZT%6nLoeNY2v9kub{}CPN|`KQ#+-m7M}D`aBky~G)g(~Pfgo1Emdo^ciQ@p
zYZ+dtYt6N)|NoeB;#U0qkYiSN@7;{7Utln+&_c>T#QyTlnEZ_~Ys0H&=RTXx$Z)`Z
z8*}hV_S+?|T(1Isrdr|}QIe8al4_M)lnSI6j0}v7bq!2(jSWJK46RHJtqjbx4GgRd
z4E$CX?LyIzo1c=IR*74K{kKzWKn>wlArU1(iRB6fMfqu&IjIUIl?AB^nFS@u3=9=>
z9)IHDC=AokIOTu(jOWuJ24-b$y<~1-Wnu5hBFw@HE)6D!Q<#-EhbWxBaplC3Ge=~O
gu%B-5Sm33{@Jd{;<dc)>RG<|Mp00i_>zopr003fkl>h($

literal 0
HcmV?d00001

diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..50f376d
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/public/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..c44f7986c268c8f21c5a535f520f0fac9474c5a6
GIT binary patch
literal 729
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJOS+@4BLl<6e(pbstU$g(vPY0F
z14ES>14Ba#1H&(%P{RubhEf9thF1v;3|2E37{m+a><Y92N*oUG32_C|3@TIKYFYwG
zAYxRVI(yl<PoF-#1A<Q<->q2pR?8A73s-<&4MZ6-Nzhoh$@s0tCHw#Xe^<uZ=|EqY
zmjwBNf`o|~2ADjSu7`o89uFVBeVcsr91I*y<`sYeUfb^~#z3u%N#5=*4*zb(+yHXe
zOFVsD*`Kq>i5j!Dnk~x!3gvpbIEF}EPEK%O?>VERvnJ<_jLe*vJ2p0Ze0Xa9Fflbb
z9a2(Sl=MhQXi^Z*rDxBciA@W;cFk;C*|%@sjCh`{VEV?as?e>aa9m;if)y*4tXZ^b
z)v|R9SFT)o_Q0COt5+}2Psqqf$w|t}I@bNLnxWy2wubnJef&U+RZCnWN>UO_QmvAU
zQh^kMk%5u1u7QcJu|bHDp_Qqjm4TVIfq|8Qf#2$)T__rI^HVa@DsgMD|8|NEs3E*6
zB%&lJv0R~`C_gPTCsm=OvLIC<v!EoIfuUl~<4-&sg<%>Rr~FT!@q8M@z^u%zm&`4!
zEbKj5gjra@rNQKI3bXR&5QWn>uADe>=7`J@_R|d>3%v9gUWp5qd~!0K3bca3)78&q
Iol`;+0B@rkl>h($

literal 0
HcmV?d00001

diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..2219ec9ca0b84019a2eff0646a05c82967190b89
GIT binary patch
literal 785
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10;%b0Th%1n0P?`Ex(-KG`
zkiz7!>@Dx!zXO7|d6jQfO@RvF2(AoG1j2=z2IRuo5C%j9uAKp|EeORpl!45_CiVaS
z|Lr?tC4m02D+%%o2GSzY1^G}=5G^9V?B~yA@^k<EnfvL}@85?HJ6*l%#Av=?2Ndj_
zZ^p>X3I)uH)-7v+CNL&>ySuoF@A~-`$YC$>^mS!_&LSsj%+_kQECVRi<LTlUVsZNI
zWp}<q1|qH((}SJg%R1#Rynca)anFBU#prpT+BrDS{qWQOz&hi+Jcri84Wfo?GIZ9d
zOw#NtQPbY?`s{A$dyh4@#_VfI^4!Cpva@N`0;b631<XJB>$F!~c4Rh_HMy7-?6|x;
zuHN8^TXK4m#pRnZkvieo2HS3C?cQ5$aOd&MHL(`|56sf{&fBMPU+c6N&|Rt}t`Q|E
zi6yC4$wjF^iowXh$XM6FMAz6L#K_Rf)X>VnOxwV~%D}*Hb<r*q4Y~O#nQ4`{HQ0YU
z#Rk+6UKJ8i5|mi3P*9YgmYI{PP*Pcts*qVwlFYzRG3W6o9*)8=4UJR&r_Xpk4Pszc
z=GIH*7FHJao-D#Ftl-jMayW%qd2@)u=^Iy09657D<_P=g29E_^dJM0`1xr3TnN9^-
O!QkoY=d#Wzp$PyS6(UUl

literal 0
HcmV?d00001

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..732cca546a198c3c7a7583297a4d68f5f582ff74 100644
GIT binary patch
literal 15086
zcmeI2J!lj`6vyY>9ELz}i<D|En!}IAki~>xp;)D{)Fu!F8$s~WM6gR`XQfsW)+Qm9
zr(kjE0+RLuLQoq~lytZGS`;xj{@x~=yPTK1-GucPGYh|)y}fz&{_}QbXLe?k$|y?>
z3@Fl^n#(ISq?F3#cD~z6ed3x;D!<?DQ0fsG&XWfdbsOY*aP)5{=F>#LM8HHKO%Zt3
zuTH@Om<G2MPtPdVy>i<9_Wqr_y1wpuo)?R?b<h3y!E<k1t+>PID(=XINKBJ&5>D2}
z4y^<58h(I|0{S)jHTpIBHTq+LevN*OevN*Orl@=;?<=?@WkBm$n2(~lHcuP%hvh6$
z2GRZ)e%5M>a-IVHKhZDRzedqppC<+S<vxh^-}Ty}d{2q~18JA?r9^+EXHBE~Ve}vP
z`58Wcg0xX=qg*rbH}U8BY1;3<AOD#4Yx*yJi1D+jKc@be`m^)C8D*@~D32NcnDLJp
z|FmWP$Mj#O|1$kowf~AdXItBkrKJB7?F$fl9xDa<fAjno?KfcsV!aEeK>rH*MSCYq
zLM2Wa+N{5Vc3H>h+*t$YLi;!@!6x{vK)=uWh0pqh&-#VW`b8{w|MFSC@L9j`S-<en
z5`|6jEx|Z+)vdvFpt%nQ!D$8h9rQcschK*kKNjeB(C?t%LBE5ZC=8OX4_Ku)hlzlR
zfQdkRBcOvrsi^6i$UULdf~1yGQ<7%n<7gaHQcTLbASvblEa~y+@vD!s?9<A@HQ3#!
z#a=FRq%#7HD=f%1;z>?r-`u;E^;W$s<B8^w=i&WI_Hw?GWjwGS)UfRXe;F8t7f@;h
z{!92T;lG6c=8y;fCH%`iibl+H-Gw0#-`8Oo_8q6=U*linzx7@g^59?Nf6sgbzUsd(
zb4`4|ZRT5kOUS?I5#PVs=)a}!gv-D0J+F;Pg7G*0o3y*|9+>zi^85*&M`4Vcr6&F+
z{t5Jdrv63TC-a}Tzl~<k9{DZ7@{4cTm%Y_YLqh(y7=MZHUYLb__xdK_U-szELa&U%
z@!bPsFad>n@L!<)7a0E*7=Jg1JdA$}jDHLKe<LQiJ_bEIuK*@F!V%b>H>iFtF#9l-
zz|4#MXVpvfOy((MS|SI#^AripV$-IMK{wa|`HWqjeQvL9Y}mA^fb|W}emUpaBNr<+
z?IWa{bFsYxi%<^8XUf=@u`gpEfPESJGWKO`LKZm}+r8^J`HaS1W54@Oi@nBPV_*NS
zy4P05?D6dXe$O%XapIqb_<f-cRdvL>e_}fdGf)i3XNuInBK5CG{SBc06{&wk>R*vM
z8#2TBD9uy)DQO2*Kt5w(Z((m?AAr4uy@kDnO~^5^J?x>i%!M*99Ai#c@`iSQ0I58(
A>i_@%

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
new file mode 100644
index 0000000000000000000000000000000000000000..85e62e97d0e6696f427bf2d7f71540ae2187cfa8
GIT binary patch
literal 910
zcmeAS@N?(olHy`uVBq!ia0vp^mq3_<8Ax)t=M?}cmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45bDP46hOx7_4S6Fo+k-*%fF5l-L{K6XFV_8C0gi(OXSR
zIKmW!h(Hvev4MhE)x*W%x*#GDE>;p`j?xqc*-0+(>;M1x^6}&QcR=vr!@Iw~-zMk1
zRWg37ZVuG=|Ns9)b;r#>_ZyZ3`2{mb)L;1i{X)Hja_jHkt;%*=w%8dTKW;23$x`$4
zXAO&$Ro}aJedo^o`*(D+b+gL(YEh$@j6Xolj7i?^E_R+N43B{v_7YEDSN7*Da-zm;
zt!B$IfYN%NE{-7;x8B|k4RbaWX}jpenmO@N+?E|I+t1WT88pPjc?s>velJ<`de6N5
z7lB5=z`rG(C)2chivEB2@#W8_=Ih(P_n)`$+HGtayDlSb+fCm6b49A>?)(|#%H6&2
zl!fR0U*4%*)54urE!nXvY*EJEUv7`pkN$J}x9IHJw^KZ=cURw>%yxEyk!IPq&FZo;
z%Y3b@&dn>i<U9L{beexw>lV+Ab8R)3_;uZ!>=&#)*K?8z(db`dkjLC9|Fbu>?O$v9
z$6?*W`4znTe`fF4x#FRb+S|I9drs78K0Wp3(I%h3O}Y<0yxJ8KxajD!vu|T}D#5%8
zr&oMoT`0EQUCO2UE>KLh#5JNMC9x#cD!C{XNHG{07#ZstnCKcCgcuoGnHpLdm}wgr
zSQ!}jtuESyq9HdwB{QuOw+8!fr`UiR!mC0eN`ey06$*;-(=u~X6-p`#QWY`_N|G5E
zD&{=?#KTb-rlE1l|MVHpr$G$N%G`R%+``Jj-jhX`g%w;HOb(|oD{l@_IDO;Fi6du@
i$Q)rm-QcmnOON4|xM0aAC)24Qk9oTKxvX<aXaWFD{#;7{

literal 0
HcmV?d00001

diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
new file mode 100644
index 0000000..c929123
--- /dev/null
+++ b/public/safari-pinned-tab.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="98.000000pt" height="98.000000pt" viewBox="0 0 98.000000 98.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M34 804 l-34 -35 0 -284 0 -284 34 -35 33 -36 132 0 131 0 0 355 0
+355 -131 0 -132 0 -33 -36z"/>
+<path d="M650 485 l0 -355 125 0 c207 0 205 -4 205 355 0 359 2 355 -205 355
+l-125 0 0 -355z"/>
+</g>
+</svg>
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..4d786a1
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,13 @@
+{
+    "name": "Mon d\u00e9put\u00e9",
+    "short_name": "Mon d\u00e9put\u00e9",
+    "icons": [
+        {
+            "src": "/public/android-chrome-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#020617",
+    "background_color": "#020617"
+}