From 2cbb764128e0b3a25897a8ff334ce2f589db969b Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:44:57 +0200
Subject: [PATCH 1/8] Update .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 8c59907..7f2f805 100755
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ node_modules
 /package
 .env
 .env.*
+.idea
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

From d5ebf0b7d4f99eba2c90c2a1512c5f4b09411640 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:45:50 +0200
Subject: [PATCH 2/8] Add vite-svg-loader

---
 package-lock.json | 218 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 vite.config.ts    |   5 +-
 3 files changed, 221 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c67821..0e7abfe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "npm-run-all": "^4.1.5",
         "typescript": "~5.1.6",
         "vite": "^4.4.9",
+        "vite-svg-loader": "^4.0.0",
         "vue-tsc": "^1.8.8"
       }
     },
@@ -405,6 +406,15 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tsconfig/node18": {
       "version": "18.2.2",
       "resolved": "https://registry.npmjs.org/@tsconfig/node18/-/node18-18.2.2.tgz",
@@ -727,6 +737,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -827,6 +843,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -849,6 +874,80 @@
         "node": ">=4.8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -899,6 +998,73 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1624,6 +1790,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -1738,6 +1910,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -2258,6 +2442,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2427,6 +2635,16 @@
         }
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
+      "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.20",
+        "svgo": "^3.0.2"
+      }
+    },
     "node_modules/vue": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
diff --git a/package.json b/package.json
index 0c6b315..1c8e861 100755
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "npm-run-all": "^4.1.5",
     "typescript": "~5.1.6",
     "vite": "^4.4.9",
+    "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.8"
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5c45e1d..03b98dd 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,13 +1,12 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-  ],
+  plugins: [vue(), svgLoader()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))

From 17b48d89d16c92be0f0773e08943abc439023de6 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:51:25 +0200
Subject: [PATCH 3/8] Rework form layout

---
 src/assets/icons/chevron_left.svg  |   1 +
 src/assets/icons/chevron_right.svg |   1 +
 src/components/Shared/Form.vue     | 388 ++++++++---------------------
 3 files changed, 100 insertions(+), 290 deletions(-)
 create mode 100644 src/assets/icons/chevron_left.svg
 create mode 100644 src/assets/icons/chevron_right.svg

diff --git a/src/assets/icons/chevron_left.svg b/src/assets/icons/chevron_left.svg
new file mode 100644
index 0000000..00b9954
--- /dev/null
+++ b/src/assets/icons/chevron_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
diff --git a/src/assets/icons/chevron_right.svg b/src/assets/icons/chevron_right.svg
new file mode 100644
index 0000000..4256364
--- /dev/null
+++ b/src/assets/icons/chevron_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
diff --git a/src/components/Shared/Form.vue b/src/components/Shared/Form.vue
index ae2a869..28075f0 100644
--- a/src/components/Shared/Form.vue
+++ b/src/components/Shared/Form.vue
@@ -1,53 +1,66 @@
 <template>
   <div class="container">
     <h2 class="title">On discute d’ecoCode ?</h2>
+
     <form @submit.prevent="submitForm" aria-label="Formulaire de contact">
-      <div class="container-form">
-        <div class="box">
-          <span class="title-box">Je suis :</span>
-          <div><input type="radio" v-model="type" value="individu" aria-label="Sélectionner 'Un individu'" /> Un individu
-          </div>
-          <div><input type="radio" v-model="type" value="organisation" aria-label="Sélectionner 'Une organisation'" /> Une
-            organisation</div>
+      <div class="form-field">
+        <span class="text-label">Je suis :</span>
+        <div class="radio-field">
+          <input type="radio" id="individual" v-model="type" value="individu"
+                 aria-label="Sélectionner 'Un individu'"/>
+          <label for="individual">Un individu</label>
+        </div>
+        <div class="radio-field">
+          <input type="radio" id="organization" v-model="type" value="organisation"
+                 aria-label="Sélectionner 'Une organisation'"/>
+          <label for="organization">Une organisation</label>
         </div>
-        <div class="box">
-          <span class="title-box">Je souhaite :</span>
-          <select v-model="subject" aria-label="Sélectionnez votre sujet">
-            <option v-for="option in options" :key="option">{{ option }}</option>
-          </select>
+      </div>
+
+      <div class="form-field">
+        <label for="subject" class="text-label">Je souhaite :</label>
+        <select v-model="subject" id="subject" aria-label="Sélectionnez votre sujet">
+          <option v-for="option in options" :key="option">{{ option }}</option>
+        </select>
+      </div>
+
+      <div class="form-field">
+        <label class="text-label" for="name">Nom de l’entreprise / Personne :</label>
+        <input class="input" v-model="name" type="text" id="name"
+               aria-label="Entrez le nom de l’entreprise ou de la personne"/>
+      </div>
+
+      <div class="form-fieldset">
+        <div class="form-field">
+          <label class="text-label" for="email">E-mail * :</label>
+          <input class="input" required v-model="email" type="email" id="email"
+                 aria-label="Entrez votre adresse e-mail"/>
         </div>
-        <div class="box-column">
-          <label class="text-input" for="name">Nom de l’entreprise / Personne :</label>
-          <input class="input" v-model="name" type="text" id="name"
-            aria-label="Entrez le nom de l’entreprise ou de la personne" />
-          <div class="merge-input">
-            <div>
-              <label class="text-input" for="email">E-mail * :</label>
-              <input class="input" required v-model="email" type="email" id="email"
-                aria-label="Entrez votre adresse e-mail" />
-            </div>
-            <div>
-              <label class="text-input" for="phone">Téléphone :</label>
-              <input class="input" v-model="phone" type="tel" id="phone" aria-label="Entrez votre numéro de téléphone" />
-            </div>
-          </div>
-          <label class="text-input" for="message">Des éléments supplémentaires ?</label>
-          <input class="input" v-model="message" type="text" id="message"
-            aria-label="Entrez des éléments supplémentaires" />
-
-          <div class="hcaptcha">
-            <vue-hcaptcha @verify="getCaptcha" sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
-              aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"></vue-hcaptcha>
-          </div>
+        <div class="form-field">
+          <label class="text-label" for="phone">Téléphone :</label>
+          <input class="input" v-model="phone" type="tel" id="phone" aria-label="Entrez votre numéro de téléphone"/>
         </div>
       </div>
-      <div class="error-message" v-if="error" aria-live="assertive">{{ error }}</div>
-      <div style="margin-top: 15px;" class="success-message" v-if="success" aria-live="assertive">{{ success }}</div>
-      <div class="container-button">
-        <button type="submit" class="button" aria-label="Envoyer le formulaire de contact">
-          <img src="@/assets/img/icon/arrow-left-white.webp" />
+
+      <div class="form-field">
+        <label class="text-label" for="message">Des éléments supplémentaires ?</label>
+        <input class="input" v-model="message" type="text" id="message"
+               aria-label="Entrez des éléments supplémentaires"/>
+      </div>
+
+      <div class="hcaptcha">
+        <vue-hcaptcha @verify="getCaptcha" sitekey="359a430d-a0bf-4548-a583-959e93110b6d"
+                      aria-label="Rendez vous sur https://www.hcaptcha.com/accessibility pour obtenir un passe-droit accessible"></vue-hcaptcha>
+      </div>
+
+      <div class="form-submit">
+        <div class="error-message" v-if="error" aria-live="assertive">{{ error }}</div>
+        <div style="margin-top: 15px;" class="success-message" v-if="success" aria-live="assertive">{{ success }}</div>
+
+        <button type="submit" aria-label="Envoyer le formulaire de contact">
+          <ChevronLeft />
           Envoyer
-          <img src="@/assets/img/icon/arrow-right-white.webp" />
+          <ChevronRight />
         </button>
       </div>
     </form>
@@ -58,6 +71,8 @@
 import axios from 'axios';
 import { ref, watch } from "vue";
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import ChevronLeft from '@/assets/icons/chevron_left.svg';
+import ChevronRight from '@/assets/icons/chevron_right.svg';
 
 let captcha = ref("");
 const error = ref("");
@@ -148,7 +163,6 @@ const validateForm = () => {
 };
 
 
-
 const submitForm = async () => {
   if (validateForm()) {
     const formData = {
@@ -180,7 +194,7 @@ const submitForm = async () => {
 
 function getCaptcha(response: any) {
   captcha.value = response;
-};
+}
 
 const type = ref("individu");
 const subject = ref("Je souhaite contribuer à la création de règles sur ecoCode");
@@ -213,113 +227,68 @@ watch(type, (newValue) => {
 
 <style scoped lang="scss">
 .container {
-  width: 100%;
-  padding-top: 50px;
-  min-height: 396px;
-  height: max-content;
-  z-index: 2;
+  padding: 3rem 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  gap: 2rem;
   background-color: #f3f3f3;
 }
 
-.container-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0px 0px 40px 120px;
-}
-
 .title {
-  max-width: 1089px;
-  font-size: 40px;
+  font-size: 1.5rem;
   font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.25;
   letter-spacing: normal;
   text-align: center;
   color: #355086;
-  padding: 0px 0 0 0;
-  margin-bottom: 20px;
 }
 
-.container-form {
+form {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  flex-wrap: wrap;
+  gap: 1rem;
 }
 
-.text-input {
-  height: max-content;
-  margin: 0px 0px 20px 120px;
+.text-label {
   color: #355086;
   font-size: 18px;
   font-weight: 900;
   outline: none;
 }
 
-.title-box {
-  font-size: 18px;
-  font-weight: 800;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: 0.21px;
-  color: #355086;
-  padding: 0 10px 0 0;
-  margin: 0px 0px 20px 120px;
-}
-
-.box>div {
-  margin: 0px 0px 20px 120px;
+.form-field {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.box {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 20px 0 0 0;
-  flex-wrap: wrap;
+.form-fieldset {
+  display: grid;
+  gap: 1rem;
 }
 
-.box-column {
+.radio-field {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 40px 0 0 0;
-  flex-wrap: wrap;
-  width: 100%;
+  gap: 1rem;
+  margin-block-end: 0.5rem;
 }
 
 select {
-  padding: 15px 50px 15px 25px;
+  width: 100%;
+  padding: 1rem 3.5rem 1rem 1rem;
   border-radius: 8px;
   border: solid 1px rgba(0, 0, 0, 0.2);
   font-size: 18px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.56;
-  letter-spacing: 0.21px;
   color: #022826;
   appearance: none;
   background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
   background-repeat: no-repeat;
   background-position: right 30px top 50%;
   background-size: 0.65rem auto;
-  margin-left: 120px;
+}
+
+label {
+  cursor: pointer;
 }
 
 input[type="radio"] {
@@ -341,22 +310,19 @@ input[type="radio"] {
   line-height: 1.56;
   letter-spacing: 0.21px;
   color: #022826;
-  margin: 0 10px 0 0px;
-}
 
-input[type="radio"]:checked {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #57c18b;
-  background-color: #57c18b;
+  &:checked {
+    width: 20px;
+    height: 20px;
+    border: 2px solid #57c18b;
+    background-color: #57c18b;
+  }
 }
 
 .input {
-  width: calc(100% - 120px);
   height: 60px;
-  margin: 0px 0px 40px 120px;
   background-color: #ffffff;
-  padding: 15px 42.5px 17px 20px;
+  padding: 1rem;
   border-radius: 8px;
   border: solid 1px rgba(0, 0, 0, 0.2);
   color: #022826;
@@ -365,65 +331,17 @@ input[type="radio"]:checked {
   outline: none;
 }
 
-.error-message {
-  margin: 15px 0px 0 120px;
-}
-
-.success-message {
-  margin: 15px 0px 0 120px;
-}
-
-.input:last-child {
-  margin-bottom: 20px;
-}
-
-.merge-input {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.merge-input>div {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.merge-input>div:last-child {
+.form-submit {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  margin-left: 40px;
-}
-
-.merge-input>div:last-child>.input {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  margin-left: 0px;
-}
-
-.merge-input>div:last-child>.text-input {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
-  margin-left: 0px;
+  align-items: center;
+  gap: 1rem;
 }
 
-.button {
+button[type="submit"] {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 8.4px 13px 10px;
+  justify-items: center;
+  padding: 0.5rem 1rem;
   border-radius: 12px;
   text-align: center;
   font-size: 20px;
@@ -431,137 +349,27 @@ input[type="radio"]:checked {
   font-stretch: normal;
   font-style: normal;
   line-height: normal;
-  letter-spacing: 0.24px;
-  text-align: center;
-  margin: 0 auto 0 auto;
   background-color: #355086;
   border: 2px solid white;
   color: white;
 
   &:hover {
+    background-color: #283d66;
     cursor: pointer;
   }
-
-  >img {
-    width: 24px;
-    height: auto;
-  }
-}
-
-.hcaptcha {
-  margin: 0px 0px 20px 120px;
 }
 
-@media screen and (max-width: 768px) {
+@media (min-width: 768px) {
   .title {
-    padding: 0 50px 0 50px;
-    font-size: 32px;
-    margin: 0 36px 0 36px;
-  }
-
-  .text-input {
-    margin-left: 25px;
-  }
-
-  .merge-input>div>.text-input {
-    margin-left: 0px;
-  }
-
-  .merge-input>div {
-    width: 100%;
-  }
-
-  .merge-input>div:last-child {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    margin-left: 0px;
+    font-size: 2.5rem;
   }
 
-  .merge-input>div>.input {
-    margin-left: 0px;
-    width: 100%;
-  }
-
-  .box {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0 25px 20px 10px;
-
-    >div {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      margin: 10px 25px 0 25px;
-    }
-  }
-
-  .box-column {
-    padding: 0 25px 0 10px;
-  }
-
-  .merge-input {
-    width: 80%;
-    margin: 0px 25px 0px 25px;
-    flex-direction: column;
-  }
-
-  .merge-input>.input:last-child {
-    margin-left: inherit;
-  }
-
-  input[type=radio] {
-    margin: 0 10px 0 0;
-  }
-
-  .input {
-    width: 80%;
-    margin: 0px 25px 20px 25px;
-  }
-
-  .error-message {
-    margin: 0px 0px 20px 53px;
-  }
-
-  .container-button {
-    width: 80%;
-    margin-left: 0px;
-  }
-
-  .title {
-    padding: 0 50px 0 50px;
-    font-size: 25px;
-    margin: 0 36px 0 36px;
-  }
-
-  select {
-    width: 80%;
-    margin: 0 25px 0 25px;
-  }
-
-  .title-box {
-    margin: 0 25px 0 25px;
-  }
-
-  .hcaptcha {
-    margin: 0 25px 10px 25px;
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .hcaptcha {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0px 10px 0px;
+  form {
+    width: 768px;
   }
 
-  .box-column {
-    padding: 0 0px 0 0px;
+  .form-fieldset {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 </style>

From c0e76ebe06eeaf348c600151d077414e29e7c125 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:51:34 +0200
Subject: [PATCH 4/8] Rework dist folder

---
 dist/.gitkeep | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 dist/.gitkeep

diff --git a/dist/.gitkeep b/dist/.gitkeep
deleted file mode 100644
index e69de29..0000000

From 10fe52ebdeea898169eb1cf6f05a815a7897926e Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:51:47 +0200
Subject: [PATCH 5/8] Add build workflow on pull requests

---
 .github/workflows/build.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/build.yml

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..1477ce5
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,26 @@
+name: Build and deploy
+
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build

From 08572b0aba71fa6a0a2b9431461a12ef13739ba0 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 19:52:19 +0200
Subject: [PATCH 6/8] Remove unused font-awesome

---
 index.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/index.html b/index.html
index 1a3c563..db07476 100755
--- a/index.html
+++ b/index.html
@@ -9,9 +9,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Mulish:wght@500;700;900&display=swap"
     rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
-    crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>Ecocode</title>
 </head>
 

From d9a546115c50fb7da8b4d1f469ac8594be4e7079 Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 20:14:27 +0200
Subject: [PATCH 7/8] Update Button with svg icons

---
 src/assets/img/icon/arrow-left.webp  | Bin 412 -> 0 bytes
 src/assets/img/icon/arrow-right.webp | Bin 426 -> 0 bytes
 src/components/global/Button.vue     | 159 +++++++++++----------------
 3 files changed, 65 insertions(+), 94 deletions(-)
 delete mode 100755 src/assets/img/icon/arrow-left.webp
 delete mode 100755 src/assets/img/icon/arrow-right.webp

diff --git a/src/assets/img/icon/arrow-left.webp b/src/assets/img/icon/arrow-left.webp
deleted file mode 100755
index 88d0b3afc2a64a875436d7a5610e301f43534535..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 412
zcmV;N0b~ABNk&GL0RRA3MM6+kP&il$0000G0000-002h-06|PpNO}MO00Ced*|w5j
zA>N6lt}W{qAo^#}Bq9{HZQG>c30*IUUvZ5YWCkfS3Mo?xDP!x?A5HGP=x99K+I!NR
z_!pt32_R<cs*6#cg!iI2i7tZ3F(Zl#E3{vU470JXDa?6(AvL_b3#mnhdB5FJ{V4}i
zjQNj%{zr_o|85CZP&gp;0001x2>_h|Do6lG06uLnl}02ZA|Wi;3Lt<Di9i};L<KGU
zKrujX3GWSGfPDZ2cY6fSNXJX)DFi1hv(0<5oN!rxYN8ilxijS{28}rDxmrx~JX9Wl
z0RH^=LCXhTA_MP$@i6cS<JpT6@(c>DaBE5#zMen(%`s-3s{Hv{W@h(;l@zE-#?#GT
zc9Az?1_Frsww_x!=|BAs%`e)@R;!i6-EBY7$De*<2Q~53{f1{8*q|Zca1@vs$bj>k
zm<#b=S_cbS`VyhssnI0OULTjJzq!w<1dN%vH7ED7Dh^)#za@f4c@8Te60!`+#Qs14
G0001VD6Xsk

diff --git a/src/assets/img/icon/arrow-right.webp b/src/assets/img/icon/arrow-right.webp
deleted file mode 100755
index 840635b9cb4fddda5609a0f932f2d62f45cfdc74..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 426
zcmV;b0agA|Nk&GZ0RRA3MM6+kP&il$0000G0000-002h-06|PpNQM9a00CgzNRpzv
zO!1jN7RZ*ty4Ir;5sKWlZ4#-w*YySQ<E88qh{HT3jP^XwQw)f1o*`s2j_5+jPlR_w
zaU!@Q$`kI+u>Prdm<yrip)rgA8Vv0z6sE>V*@@9ygcVKe{n(@FF2aIla1rJ-L+=m4
zi!$<Uih133m`Ad}{6~ZwHaY*bA29`1P&gp=0000m3ILq}Do6lG06uLnl18K>A)zi9
zxgdZIiDLlOs-)me_y_0)I1m5#!2j>C06u^Ll|tZ9E-Q^vMXO%{z~}RL23NI6F0XK=
zyjPW;xc<y91M)wl$r#(_fB^pdT;_L%2}3~E=G)Zi8$Sp4XZ@gd_Hb6K1|PrOneW@l
z2LPhQ%1KK-kO-)SERh#3^h=&@7T`cdUK9OhkC}7}$x#asza*7Tbm=I~YuE#PZ_PQ<
z%z0;dp?s`(3U~Yludq*%Q!6+@Vx(?RfuPs=(9cNExk1#w{9omI>vnGUi6mmO71Mv`
UI|lpOhu7HSsS?=J_%Hwf0Lym7U;qFB

diff --git a/src/components/global/Button.vue b/src/components/global/Button.vue
index 6e0a6e5..38627de 100644
--- a/src/components/global/Button.vue
+++ b/src/components/global/Button.vue
@@ -1,138 +1,109 @@
 <template>
-    <div class="container-button">
-        <span v-if="title">{{ title }}</span>
-        <span v-else class="empty"></span>
-        <button @click="navigateToRoute()" :class="buttonClass" >
-            <img :src="arrowLeftImageSource" />
+  <div class="container-button">
+    <span v-if="title">{{ title }}</span>
+    <span v-else class="empty"></span>
+    <button @click="navigateToRoute()" :class="buttonClass">
+      <ChevronLeft/>
       {{ text }}
-      <img :src="arrowRightImageSource" />
-        </button>
-    </div>
+      <ChevronRight/>
+    </button>
+  </div>
 </template>
-  
+
 <script setup lang="ts">
 import { computed } from 'vue';
-import whiteArrowLeft from '@/assets/img/icon/arrow-left-white.webp';
-import whiteArrowRight from '@/assets/img/icon/arrow-right-white.webp';
-import ArrowLeft from '@/assets/img/icon/arrow-left.webp';
-import ArrowRight from '@/assets/img/icon/arrow-right.webp';
+import ChevronLeft from '@/assets/icons/chevron_left.svg';
+import ChevronRight from '@/assets/icons/chevron_right.svg';
 import router from '@/router';
 
 // Déclarez les props
 const props = defineProps({
-    text: String,
-    title: String,
-    typebutton: String,
-    link: String,
+  text: String,
+  title: String,
+  typebutton: String,
+  link: String,
 });
 
 const navigateToRoute = () => {
-    if (props.link) {
-        router.push(props.link);
-    }
+  if (props.link) {
+    router.push(props.link);
+  }
 };
 
 const buttonClass = computed(() => {
-    if (props.typebutton === "blue") {
-        return "button blue";
-    } else {
-        return "button white";
-    }
-});
-
-const arrowLeftImageSource = computed(() => {
   if (props.typebutton === "blue") {
-    return whiteArrowLeft;
-  } else if (props.typebutton === "white") {
-    return ArrowLeft;
+    return "button blue";
   } else {
-    return "";
-  }
-});
-
-const arrowRightImageSource = computed(() => {
-  if (props.typebutton === "blue") {
-    return whiteArrowRight;
-  } else if (props.typebutton === "white") {
-    return ArrowRight;
-  } else {
-    return "";
+    return "button white";
   }
 });
 </script>
-  
+
 <style lang="scss" scoped>
 .container-button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .empty {
-        padding: 30px 0 8px 0;
-    }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
-    span {
-        font-size: 15px;
-        font-weight: bold;
-        font-stretch: normal;
-        font-style: normal;
-        line-height: 2;
-        letter-spacing: normal;
-        text-align: center;
-        text-transform: uppercase;
-        color: #355086;
-        padding: 0 0 8px 0;
-    }
+  .empty {
+    padding: 30px 0 8px 0;
+  }
 
-    .button {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        padding: 8.4px 13px 10px;
-        border-radius: 12px;
-        text-align: center;
-        font-size: 20px;
-        font-weight: bold;
-        font-stretch: normal;
-        font-style: normal;
-        line-height: normal;
-        letter-spacing: 0.24px;
-        text-align: center;
-        margin: 0 82.5px 0 82.5px;
-    }
+  span {
+    font-size: 15px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 2;
+    letter-spacing: normal;
+    text-align: center;
+    text-transform: uppercase;
+    color: #355086;
+    padding: 0 0 8px 0;
+  }
 
-    button>img {
-        width: 24px;
-        height: auto;
-    }
+  .button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 8.4px 13px 10px;
+    border-radius: 12px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: 0.24px;
+    margin: 0 82.5px 0 82.5px;
+  }
 }
 
-button:hover{
+button:hover {
   cursor: pointer;
 }
 
 .blue {
-    background-color: #355086;
-    border: 2px solid white;
-    color: white;
+  background-color: #355086;
+  border: 2px solid white;
+  color: white;
 }
 
 .white {
-    background-color: white;
-    border: 2px solid #57c18b;
-    color: #355086;
+  background-color: white;
+  border: 2px solid #57c18b;
+  color: #355086;
 }
 
 @media screen and (max-width: 768px) {
-  .button{
+  .button {
     margin: 0 19px 0 19px !important;
   }
 
-  .container-button > .button{
+  .container-button > .button {
     font-size: 18px;
   }
 }
 </style>
-  
\ No newline at end of file

From 4037e2ad7e3412c2ea27eda77842323c691ef7bd Mon Sep 17 00:00:00 2001
From: utarwyn <maxime.malgorn@laposte.net>
Date: Thu, 12 Oct 2023 20:21:21 +0200
Subject: [PATCH 8/8] Rename build workflow

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 1477ce5..6dade7e 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: Build and deploy
+name: Build
 
 on:
   pull_request: