diff --git a/README.md b/README.md
index f7eda9c..7b5cecd 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,6 @@ The mission is to democratize knowledge in first aid. The objective is to create
 ### For Whom? ⛑️
 
 - **Beginners:** If you're new to first aid, our site offers a clear and practical introduction to essential techniques.
-  
 - **Young Learners:** Explore crucial information interactively and educationally.
 
 - **Experienced Individuals:** For those who have already undergone first aid training, our platform serves as a continuous resource, providing regular updates to maintain and enhance their skills.
@@ -30,7 +29,6 @@ The mission is to democratize knowledge in first aid. The objective is to create
 ## Features 🚀
 
 - **Interactive Documentation:** Explore detailed guides with visual demonstrations of first aid techniques.
-  
 - **Annual Updates:** Stay informed about the latest advancements and recommendations in first aid.
 
 - **Knowledge Memo:** A space for quick revision of essential techniques.
@@ -41,15 +39,17 @@ The mission is to democratize knowledge in first aid. The objective is to create
 - ⏳ Detailed display of courses
 - ⏳ Gesture memo
 - ⏳ Case simulation
-- ⏳ Legal content
-  - ⏳ RNMSC-DPS
-  - ⏳ RIS Calculator
+- ✅ Legal content
+  - ✅ RNMSC-DPS
+  - ✅ RIS Calculator
 - ⏳ Training content
-  - ⏳ PSE1
-  - ⏳ PSE2
-  - ✅ GQSe
-  - ⏳ PSC1
-  - ⏳ SSA
+  - ⏳France
+    - ⏳ PSE1
+    - ⏳ PSE2
+    - ✅ GQS
+    - ⏳ PSC1
+    - ⏳ SSA
+
 
 ## How to Contribute 🤝
 
@@ -64,4 +64,3 @@ If you find this project useful or interesting, we encourage you to give it a 
 If you're particularly excited about our mission to make first aid accessible to everyone, consider contributing further by [**becoming a contributor**](#how-to-contribute) or by sharing the project with your colleagues and friends.
 
 Thank you very much for your support! 🌟
-
diff --git a/assets/svg/ico.svg b/assets/svg/ico.svg
index 45e86b7..8fa5143 100644
--- a/assets/svg/ico.svg
+++ b/assets/svg/ico.svg
@@ -1,4 +1,10 @@
 <svg width="6000" height="6000" viewBox="0 0 6000 6000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="6000" height="6000" rx="1183" fill="#F2282A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2750 1250C2694.77 1250 2650 1294.77 2650 1350V2650H1350C1294.77 2650 1250 2694.77 1250 2750V3250C1250 3305.23 1294.77 3350 1350 3350H2650V4650C2650 4705.23 2694.77 4750 2750 4750H3250C3305.23 4750 3350 4705.23 3350 4650V3350H4650C4705.23 3350 4750 3305.23 4750 3250V2750C4750 2694.77 4705.23 2650 4650 2650H3350V1350C3350 1294.77 3305.23 1250 3250 1250H2750Z" fill="white"/>
+<rect width="6000" height="6000" rx="1183" fill="url(#paint0_linear_196_10)"/>
+<path d="M922 3151.5H1958.5L2595.5 1275L2998 4725.5L3667.5 2578.5L4144.5 3151.5H5077.5" stroke="white" stroke-width="350" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_196_10" x1="14.5001" y1="3140.5" x2="5945.5" y2="3124.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF4B2B"/>
+<stop offset="1" stop-color="#F2282A"/>
+</linearGradient>
+</defs>
 </svg>
diff --git a/components/link-section.vue b/components/link-section.vue
new file mode 100644
index 0000000..ea00d21
--- /dev/null
+++ b/components/link-section.vue
@@ -0,0 +1,24 @@
+<template>
+  <a
+    :href="url"
+    class="border-solid border-light-gray-main-200 bg-white rounded-lg border-2 flex flex-row gap-3 items-center pl-2 w-full"
+  >
+    <Icon name="akar-icons:receipt" color="#979797" class="h-full" />
+    <p class="text-light-gray-main-800">{{ title }}</p>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/components/navbar.vue b/components/navbar.vue
index 06d9cea..2b005aa 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -10,6 +10,7 @@
     <a class="text-red-main-600 font-semibold" href="/formations/"
       >Formations</a
     >
+    <a class="text-red-main-600 font-semibold" href="/legal">Legal</a>
     <!-- <a class="text-red-main-600 font-semibold" href="/contact">Memo</a> -->
     <!-- <a class="text-red-main-600 font-semibold" href="/about">À propos</a> -->
   </div>
diff --git a/pages/formations/[formation]/[id].vue b/pages/formations/[formation]/[id].vue
index 2888ad8..2ae965c 100644
--- a/pages/formations/[formation]/[id].vue
+++ b/pages/formations/[formation]/[id].vue
@@ -8,47 +8,106 @@ const { data: formation } = await useFetch(`/api/${route.params.formation}`, {
   transform: (_formation) => _formation.data,
 });
 
-console.log(formation);
-
 const section = formation._value?.chapters[
   parseInt(route.params.id.substring(0, 2).valueOf(), 10) - 1
 ]?.sections.find((section) => section.id === route.params.id);
-
-console.log(section);
-console.log(route.params.id);
-console.log(parseInt(route.params.id.substring(0, 2).valueOf(), 10) - 1);
 </script>
 
 <template>
   <section>
     <div class="flex flex-col items-center justify-center">
+      <p
+        class="m-6 mb-4 lg:text-4xl text-xl font-semibold"
+        v-if="section.id.substring(2, 4) == 'FT'"
+      >
+        Fiche Technique
+      </p>
+      <p
+        class="m-6 mb-4 lg:text-4xl text-xl font-semibold"
+        v-if="section.id.substring(2, 4) == 'AC'"
+      >
+        Apport de Connaissances
+      </p>
+      <p
+        class="m-6 mb-4 lg:text-4xl text-xl font-semibold"
+        v-if="section.id.substring(2, 4) == 'PR'"
+      >
+        Procédure
+      </p>
+
       <h1
         v-if="section.title"
-        class="lg:text-7xl text-4xl text-white font-semibold m-10 mt-16 mb-20"
+        class="lg:text-7xl text-4xl text-white font-semibold m-10 mt-5 mb-20 text-center"
       >
         {{ section.title }}
       </h1>
-      <div class="w-3/4 flex flex-col gap-4">
-        <div class="w-full lg:hidden flex-col flex gap-4">
-          <div
-            v-for="data in section.content"
-            class="bg-white rounded-lg shadow-lg text-black p-6"
-          >
-            <h2 class="text-4xl font-semibold mb-2">
-              <span class="text-6xl"
-                >{{ data.id < 10 ? "0" + data.id : data.id }}.</span
-              >
-              {{ data.title }}
-            </h2>
-            <p v-html="data.content" class="text-justify"></p>
+      <div
+        class="w-full flex flex-col items-center"
+        v-for="row in section.content"
+      >
+        <div class="w-3/4 flex flex-col gap-4">
+          <div class="w-full lg:hidden flex-col flex gap-4">
+            <div
+              v-for="data in row"
+              class="bg-white rounded-lg shadow-lg text-black p-6"
+            >
+              <h2 class="text-4xl font-semibold mb-2">
+                <span class="text-6xl"
+                  >{{ data.id < 10 ? "0" + data.id : data.id }}.</span
+                >
+                {{ data.title }}
+              </h2>
+              <p v-html="data.content" class="text-justify"></p>
+            </div>
           </div>
-        </div>
-        <div class="w-full flex-row flex gap-4">
-          <div class="w-1/2 lg:flex flex-col hidden justify-center">
-            <div v-for="data in section.content">
+
+          <div class="w-full flex-row flex gap-4">
+            <div class="w-1/2 lg:flex flex-col hidden justify-center">
+              <div v-for="data in row">
+                <div
+                  v-if="
+                    data.id % 2 !== 0 &&
+                    data.type != 'array' &&
+                    data.type != 'fulltext'
+                  "
+                  class="bg-white rounded-lg shadow-lg text-black p-6 mb-2 mt-2"
+                >
+                  <h2 class="text-4xl font-semibold mb-2">
+                    <span class="text-6xl"
+                      >{{ data.id < 10 ? "0" + data.id : data.id }}.</span
+                    >
+                    {{ data.title }}
+                  </h2>
+                  <p v-html="data.content" class="text-justify"></p>
+                </div>
+              </div>
+            </div>
+            <div class="w-1/2 lg:flex flex-col hidden justify-center">
+              <div v-for="data in row">
+                <div
+                  v-if="
+                    data.id % 2 === 0 &&
+                    data.type != 'array' &&
+                    data.type != 'fulltext'
+                  "
+                  class="bg-white rounded-lg shadow-lg text-black p-6 mb-2 mt-2"
+                >
+                  <h2 class="text-4xl font-semibold mb-2">
+                    <span class="text-6xl"
+                      >{{ data.id < 10 ? "0" + data.id : data.id }}.</span
+                    >
+                    {{ data.title }}
+                  </h2>
+                  <p v-html="data.content" class="text-justify"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="w-full flex-col lg:flex hidden">
+            <div v-for="data in row">
               <div
-                v-if="data.id % 2 !== 0 && data.type != 'array'"
-                class="bg-white rounded-lg shadow-lg text-black p-6 mb-2 mt-2"
+                v-if="data.type == 'fulltext'"
+                class="bg-white rounded-lg shadow-lg text-black p-6 w-full"
               >
                 <h2 class="text-4xl font-semibold mb-2">
                   <span class="text-6xl"
@@ -60,10 +119,10 @@ console.log(parseInt(route.params.id.substring(0, 2).valueOf(), 10) - 1);
               </div>
             </div>
           </div>
-          <div class="w-1/2 lg:flex flex-col hidden justify-center">
+          <div class="w-full flex-col lg:flex hidden">
             <div v-for="data in section.content">
               <div
-                v-if="data.id % 2 === 0 && data.type != 'array'"
+                v-if="data.type == 'array'"
                 class="bg-white rounded-lg shadow-lg text-black p-6 mb-2 mt-2"
               >
                 <h2 class="text-4xl font-semibold mb-2">
@@ -72,49 +131,33 @@ console.log(parseInt(route.params.id.substring(0, 2).valueOf(), 10) - 1);
                   >
                   {{ data.title }}
                 </h2>
-                <p v-html="data.content" class="text-justify"></p>
+                <table class="w-full">
+                  <tr v-for="ligne in data.content">
+                    <template v-if="ligne.length === 3">
+                      <td
+                        v-for="cellule in ligne"
+                        :key="cellule"
+                        class="border border-black p-2"
+                        v-html="cellule"
+                      ></td>
+                    </template>
+                    <template v-else>
+                      <td
+                        v-html="ligne[0]"
+                        class="w-1/4 border border-black p-2"
+                      ></td>
+                      <td
+                        v-html="ligne[1]"
+                        class="border border-black p-2"
+                        colspan="2"
+                      ></td>
+                    </template>
+                  </tr>
+                </table>
               </div>
             </div>
           </div>
         </div>
-        <div class="w-full flex-col lg:flex hidden">
-          <div v-for="data in section.content">
-            <div
-              v-if="data.type == 'array'"
-              class="bg-white rounded-lg shadow-lg text-black p-6 mb-2 mt-2"
-            >
-              <h2 class="text-4xl font-semibold mb-2">
-                <span class="text-6xl"
-                  >{{ data.id < 10 ? "0" + data.id : data.id }}.</span
-                >
-                {{ data.title }}
-              </h2>
-              <table class="w-full">
-                <tr v-for="ligne in data.content">
-                  <template v-if="ligne.length === 3">
-                    <td
-                      v-for="cellule in ligne"
-                      :key="cellule"
-                      class="border border-black p-2"
-                      v-html="cellule"
-                    ></td>
-                  </template>
-                  <template v-else>
-                    <td
-                      v-html="ligne[0]"
-                      class="w-1/4 border border-black p-2"
-                    ></td>
-                    <td
-                      v-html="ligne[1]"
-                      class="border border-black p-2"
-                      colspan="2"
-                    ></td>
-                  </template>
-                </tr>
-              </table>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </section>
diff --git a/pages/index.vue b/pages/index.vue
index 95175b8..680f7e3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,7 +2,7 @@
   <section
     class="w-full h-4/5 absolute bottom-0 left-0 p-12 flex items-start lg:justify-between justify-center"
   >
-    <h1 class="lg:text-9xl text-7xl opacity-75 font-semibold">
+    <h1 class="lg:text-9xl text-7xl text-white opacity-75 font-semibold">
       Sauver des vies
     </h1>
     <svg
diff --git a/pages/legal.vue b/pages/legal.vue
new file mode 100644
index 0000000..1d24773
--- /dev/null
+++ b/pages/legal.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="flex flex-col items-center justify-center">
+    <h1 class="lg:text-7xl text-4xl text-white font-semibold m-10 mt-16 mb-20">
+      Legal
+    </h1>
+    <div class="bg-white rounded-lg shadow-lg text-black p-6 w-3/4 m-10">
+      <h2 class="text-4xl font-semibold mb-4">Textes réglementaires</h2>
+      <div class="w-full flex flex-col gap-2">
+        <LinkSection
+          url="https://www.interieur.gouv.fr/content/download/94241/736020/file/RNMSC%202006_10%20-%20DPS.pdf"
+          title="Référenciel National des Missions de Sécurite Civile relatif aux Dispositifs Prévisionnels de Secours"
+        />
+        <LinkSection
+          url="https://www.legifrance.gouv.fr/download/pdf/legiOrKali?id=LEGITEXT000025503132.pdf&size=2,3%20Mo&pathToFile=/LEGI/TEXT/00/00/25/50/31/32/LEGITEXT000025503132/LEGITEXT000025503132.pdf&title=Code%20de%20la%20s%C3%A9curit%C3%A9%20int%C3%A9rieure"
+          title="Code de la Sécurité Intérieure"
+        />
+      </div>
+    </div>
+    <div class="bg-white rounded-lg shadow-lg text-black p-6 w-3/4 m-10">
+      <h2 class="text-4xl font-semibold mb-4">
+        Le Ratio d'Intervenant Secouriste (RIS)
+      </h2>
+      <div class="flex lg:flex-row flex-col lg:gap-0 gap-4">
+        <div class="lg:w-2/3 w-full">
+          <section class="flex flex-col gap-4 w-full">
+            <section>
+              <p class="text-xl font-semibold mb-1 underline">
+                Comportement Prévisible du Public
+              </p>
+              <div
+                v-for="(optionActivity, index) in optionsActivity"
+                :key="index"
+              >
+                <input
+                  type="radio"
+                  :id="'optionActivity' + index"
+                  :value="optionActivity.value"
+                  v-model="selectedActivity"
+                  name="optionsActivity"
+                  class="accent-red-main-600 mr-5 bg-transparent"
+                  @change="valueChange()"
+                />
+                <label :for="'optionActivity' + index">
+                  <span class="font-semibold">{{ optionActivity.title }}</span>
+                  : {{ optionActivity.label }}</label
+                >
+              </div>
+            </section>
+
+            <section>
+              <p class="text-xl font-semibold mb-1 underline">
+                Accessibilité du site
+              </p>
+              <div v-for="(option, index) in optionsAccess" :key="index">
+                <div v-for="(label, index2) in option.labels" :key="index2">
+                  <input
+                    type="checkbox"
+                    :id="`optionCheckbox${index}${index2}`"
+                    :value="label"
+                    v-model="option.checkedLabels"
+                    @change="accessChange()"
+                    class="accent-red-main-600 mr-5"
+                  />
+                  <label :for="`optionCheckbox${index}${index2}`">
+                    <span>{{ label }}</span>
+                  </label>
+                </div>
+              </div>
+            </section>
+
+            <section>
+              <p class="text-xl font-semibold mb-1 underline">
+                Délai d'intervention des secours
+              </p>
+              <div
+                v-for="(optionSecours, index) in optionsSecours"
+                :key="index"
+              >
+                <input
+                  type="radio"
+                  :id="'optionSecours' + index"
+                  :value="optionSecours.value"
+                  v-model="selectedSecours"
+                  name="optionsSecours"
+                  class="accent-red-main-600 mr-5"
+                  @change="valueChange()"
+                />
+                <label :for="'optionSecours' + index">
+                  <span>{{ optionSecours.label }}</span>
+                </label>
+              </div>
+            </section>
+          </section>
+        </div>
+
+        <div
+          class="flex flex-col items-center justify-center lg:w-1/3 w-full h-full mx-auto my-auto gap-6"
+        >
+          <!-- <label for="chiffreInput">Entrez un chiffre :</label> -->
+          <section class="w-full flex flex-col items-center justify-center">
+            <p class="text-xl font-semibold mb-4 lg:ml-7 w-full underline">
+              Public présent sur le site
+            </p>
+            <div
+              class="bg-white rounded-lg shadow-lg text-black p-4 mb-4 border-solid border-2 border-light-gray-main-100 flex w-3/4"
+            >
+              <input
+                type="number"
+                id="public"
+                name="public"
+                v-model="public"
+                @change="valueChange()"
+                class="bg-transparent w-fit-content"
+              />
+
+              <span id="suffix"> personnes</span>
+            </div>
+          </section>
+          <section class="w-full flex flex-col items-center justify-center">
+            <p class="text-xl font-semibold mb-4 lg:ml-7 w-full underline">
+              Dimensionement
+            </p>
+            <p class="text-xl text-black w-full pl-7">
+              RIS : <span class="font-semibold">{{ this.ris }}</span>
+            </p>
+            <p class="text-xl text-black pl-7 w-full">
+              Secouristes :
+              <span class="font-semibold">{{ this.secouristes }}</span>
+            </p>
+            <p class="text-2xl font-semibold pb-4 pt-4 w-full text-center">
+              {{ this.poste }}
+            </p>
+            <div
+              v-for="(dimensionement, index) in dimensionement"
+              :key="index"
+              class="w-full pl-7"
+            >
+              <p class="text-xl text-black w-full">
+                <span class="font-semibold">{{ dimensionement.value }}</span>
+                {{ dimensionement.label }}
+              </p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pdfPath: "/pdf/legitext.pdf",
+      optionsActivity: [
+        {
+          title: "Public assis",
+          label: "spectacle, cérémonie, réunion, restauration, sport...",
+          value: 0.25,
+        },
+        {
+          title: "Public debout",
+          label: "cérémonie, réunion, restauration, foire, salon...",
+          value: 0.3,
+        },
+        {
+          title: "Public debout",
+          label:
+            "spectacle, fête foraine, événement sportif avec séparation du public et des sportifs...",
+          value: 0.35,
+        },
+        {
+          title: "Public debout",
+          label:
+            "spectacle avec public dynamique, danse, féria, carnaval, spectacle de rue, parade, événement sportif sans protection du public... ou événement se déroulant sur plusieurs jours avec présence permanente du public et hébergement sur le site ou à proximité",
+          value: 0.4,
+        },
+      ],
+      selectedActivity: 0.25,
+      optionsSecours: [
+        {
+          label: "Inférieur à 10 minutes",
+          value: 0.25,
+        },
+        {
+          label: "De 10 à 20 minutes",
+          value: 0.3,
+        },
+        {
+          label: "De 20 à 30 minutes",
+          value: 0.35,
+        },
+        {
+          label: "Supérieur à 30 minutes",
+          value: 0.4,
+        },
+      ],
+      selectedSecours: 0.25,
+      optionsAccess: [
+        {
+          section: "Faible",
+          value: 0.25,
+          labels: [
+            "Structures permanentes : bâtiment, salle en dur, ...",
+            "Voies publiques, rues, ... avec accès dégagés",
+            "Conditions d'accès aisés",
+          ],
+          checkedLabels: [],
+        },
+        {
+          section: "Modéré",
+          value: 0.3,
+          labels: [
+            "Structures non permanentes : gradins, chapiteaux, ...",
+            "Espaces naturels : surface 2 hectares",
+            "Brancardage : 150 m < longueur 300 m",
+            "Terrain en pente sur plus de 100 mètres",
+          ],
+          checkedLabels: [],
+        },
+        {
+          section: "Moyen",
+          value: 0.35,
+          labels: [
+            "Espaces naturels : 2 ha < surface 5 ha",
+            "Brancardage : 300 m < longueur 600 m",
+            "Terrain en pente sur plus de 150 mètres",
+            "Autres conditions d'accès difficiles",
+          ],
+          checkedLabels: [],
+        },
+        {
+          section: "Difficile",
+          value: 0.4,
+          labels: [
+            "Espaces naturels : surface > 5 hectares",
+            "Brancardage : longueur > 600 mètres",
+            "Terrain en pente sur plus de 300 mètres",
+            "Autres conditions d'accès difficiles : Talus, escaliers, voies d'accès non carrossables, ...",
+            "Progression des secours rendue difficile par la présence du public",
+          ],
+          checkedLabels: [],
+        },
+      ],
+      dimensionement: {
+        paps: {
+          label: "PAPS",
+          value: 0,
+        },
+        poste: {
+          label: "Equipe.s de Poste",
+          value: 0,
+        },
+        binome: {
+          label: "Binôme.s",
+          value: 0,
+        },
+        intervention: {
+          label: "Equipe.s d'Intervention",
+          value: 0,
+        },
+      },
+      postes: [
+        "A la diligence de l'autorité compétente",
+        "Point Alerte et de Premiers Secours",
+        "Dispositif de Petite Envergure",
+        "Dispositif de Moyenne Envergure",
+        "Dispositif de Grande Envergure",
+      ],
+      poste: "",
+      selectedAccess: 0.25,
+
+      ris: 0,
+      public: 0,
+      secouristes: 0,
+      i: null,
+    };
+  },
+
+  methods: {
+    accessChange() {
+      const checkedOptions = this.optionsAccess.filter(
+        (option) => option.checkedLabels.length > 0
+      );
+
+      if (checkedOptions.length > 0) {
+        // Sort by difficulty in descending order and get the first one
+        const selectedOption = checkedOptions.sort(
+          (a, b) => b.value - a.value
+        )[0];
+        this.selectedAccess = selectedOption.value;
+      } else {
+        this.selectedAccess = null;
+      }
+      this.valueChange();
+    },
+    valueChange() {
+      this.i =
+        this.selectedActivity + this.selectedSecours + this.selectedAccess;
+      if (this.public > 100000) {
+        this.public = 100000 + (this.public - 100000) / 2;
+      }
+
+      this.ris = (this.i * (this.public / 1000)).toFixed(2);
+
+      this.secouristes = Math.ceil(this.ris);
+      console.log(this.secouristes % 2);
+      if (this.secouristes % 2 !== 0) {
+        this.secouristes += 1;
+      }
+      this.calculateDPS();
+    },
+
+    calculateDPS() {
+      this.dimensionement.paps.value = 0;
+      this.dimensionement.poste.value = 0;
+      this.dimensionement.binome.value = 0;
+      this.dimensionement.intervention.value = 0;
+      this.poste = "";
+
+      if (this.ris <= 0.25) {
+        this.poste = this.postes[0];
+      } else {
+        if (this.ris > 0.25 && this.ris <= 1.125) {
+          this.poste = this.postes[1];
+        } else if (this.ris > 1.125 && this.ris <= 12) {
+          this.poste = this.postes[2];
+        } else if (this.ris > 12 && this.ris <= 36) {
+          this.poste = this.postes[3];
+        } else {
+          this.poste = this.postes[4];
+        }
+
+        if (this.secouristes == 2) {
+          this.dimensionement.paps.value = 1;
+        } else {
+          var i = this.secouristes;
+
+          while (i > 0) {
+            if (i >= 4) {
+              this.dimensionement.poste.value++;
+              i -= 4;
+            }
+            if (
+              i >= 2 &&
+              this.dimensionement.poste.value <
+                this.dimensionement.intervention.value
+            ) {
+              this.dimensionement.binome.value++;
+              i -= 2;
+            }
+            if (
+              i >= 4 &&
+              this.dimensionement.poste.value >=
+                this.dimensionement.intervention.value
+            ) {
+              this.dimensionement.intervention.value++;
+              i -= 4;
+            }
+            if (i >= 2) {
+              this.dimensionement.binome.value++;
+              i -= 2;
+            }
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="radio"]#Yellow {
+  accent-color: red;
+}
+</style>
diff --git a/public/favicon.ico b/public/favicon.ico
index 6f1e478..061ae8b 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ