From 2b995a6980152b6f5a9598b28ac9171b94d5d0e4 Mon Sep 17 00:00:00 2001
From: Thomas Bernard <thomashbernard@gmail.com>
Date: Tue, 16 Apr 2024 13:10:22 +0200
Subject: [PATCH] Remove useless html tags and css classes from static pages

---
 frontend/src/components/HeaderMain.vue   |   2 +-
 frontend/src/views/AboutPage.vue         | 117 +++++---------
 frontend/src/views/AccessibilityPage.vue | 184 ++++++++++++-----------
 frontend/src/views/ContactPage.vue       |  57 +++----
 frontend/src/views/LegalPage.vue         | 151 ++++++++++---------
 frontend/src/views/StartPage.vue         |  68 ++++-----
 6 files changed, 264 insertions(+), 315 deletions(-)

diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index 0966d49bd..d0be8b9c4 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -34,7 +34,7 @@ const quickLinks: InstanceType<typeof DsfrHeader>['$props']['quickLinks'] = [
     to: '/contact',
   },
   {
-    label: 'Accessibilité : non conforme',
+    label: 'Accessibilité : partiellement conforme',
     to: '/accessibilite',
   },
 ]
diff --git a/frontend/src/views/AboutPage.vue b/frontend/src/views/AboutPage.vue
index 09c1950ad..32b950cd2 100644
--- a/frontend/src/views/AboutPage.vue
+++ b/frontend/src/views/AboutPage.vue
@@ -31,85 +31,53 @@ const imgs = ref([
 </script>
 
 <template>
-  <div>
-    <div class="fr-container mt-4">
-      <h1>À propos</h1>
-      <div>
-        <p class="title-space">
-          Basegun est un projet d'application par apprentissage automatique capable
-          d'identifier et de classer de manière fiable et rapide une arme à feu.
-        </p>
-        <p>
-          Le projet a été initié en 2021 dans le contexte du programme
-          <a
-            target="_blank"
-            href="https://eig.etalab.gouv.fr/defis/basegun/"
-          >Entrepreneurs d’Intérêt Général</a>.
-        </p>
-        <p>
-          Il est actuellement piloté par <span class="font-bold">la Fabrique Numérique de la Direction de la Transformation Numérique</span> du Ministère de l'Intérieur et des Outre-Mer,
-          en partenariat avec le <span class="font-bold">Service Central des Armes et Explosifs.</span>
-        </p>
-        <p>
-          <span class="font-bold">La Direction Générale de la Police Nationale</span>
-          et <span class="font-bold">la Direction Générale de la Gendarmerie Nationale</span> sont associées pour les tests et le suivi de l'application.
-        </p>
-        <div />
-        <p>
-          A ce jour, Basegun permet de prendre en photo une arme à feu et d'obtenir un
-          résultat parmi 12 typologies possibles. Ce résultat donne une indication sur la ou les catégories légales
-          à laquelle l'arme appartient.
-        </p>
-        <p class="fr-callout">
-          <VIcon
-            class="fr-icon-alert-fill"
-            name="ri-alert-fill"
-          />Basegun prend en compte uniquement l'identification d'armes à feu létales et d'armes factices type airsoft.
-          <br>Elle ne permet donc pas encore de distinguer les armes à air comprimé > 2 joules, les armes à blanc ou neutralisées.
-        </p>
+  <div class="fr-container mt-4">
+    <h1>À propos</h1>
+    <p>
+      Basegun est un projet d'application par apprentissage automatique capable
+      d'identifier et de classer de manière fiable et rapide une arme à feu.
+    </p>
+    <p>
+      Le projet a été initié en 2021 dans le contexte du programme
+      <a
+        target="_blank"
+        href="https://eig.etalab.gouv.fr/defis/basegun/"
+      >Entrepreneurs d’Intérêt Général</a>.
+    </p>
+    <p>
+      Il est actuellement piloté par <span class="font-bold">la Fabrique Numérique de la Direction de la Transformation Numérique</span> du Ministère de l'Intérieur et des Outre-Mer,
+      en partenariat avec le <span class="font-bold">Service Central des Armes et Explosifs.</span>
+    </p>
+    <p>
+      <span class="font-bold">La Direction Générale de la Police Nationale</span>
+      et <span class="font-bold">la Direction Générale de la Gendarmerie Nationale</span> sont associées pour les tests et le suivi de l'application.
+    </p>
+    <p>
+      A ce jour, Basegun permet de prendre en photo une arme à feu et d'obtenir un
+      résultat parmi 12 typologies possibles. Ce résultat donne une indication sur la ou les catégories légales
+      à laquelle l'arme appartient.
+    </p>
+    <div class="fr-callout fr-icon-alert-fill">
+      Basegun prend en compte uniquement l'identification d'armes à feu létales et d'armes factices type airsoft.<br/>
+      Elle ne permet donc pas encore de distinguer les armes à air comprimé > 2 joules, les armes à blanc ou neutralisées.
+    </div>
 
-        <div class="container-img">
-          <div
-            v-for="img in imgs"
-            :key="img.id"
-          >
-            <img
-              class="img"
-              :src="img.src"
-              :alt="img.alt"
-            >
-          </div>
-        </div>
+    <div class="container-img">
+      <div
+        v-for="img in imgs"
+        :key="img.id"
+      >
+        <img
+          class="img"
+          :src="img.src"
+          :alt="img.alt"
+        >
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.content {
-  margin: min(5vw, 10rem);
-}
-
-.contact-list {
-  margin-left: 2rem;
-}
-
-.small-text {
-  font-size: 10pt;
-  margin-bottom: 0;
-}
-
-.small-link {
-  color: var(--blue-france-sun-113-625);
-}
-
-.small-link:hover {
-  color: #1212ff
-}
-
-  .title-space {
-margin-top: 20px;
-}
 
 .container-img {
   display: flex;
@@ -125,11 +93,6 @@ margin-top: 20px;
   height: auto;
 }
 
-.list {
-  margin-left: 2em;
-  list-style: square;
-}
-
 :deep(.fr-icon-alert-fill) {
   padding-right: .1em;
 }
diff --git a/frontend/src/views/AccessibilityPage.vue b/frontend/src/views/AccessibilityPage.vue
index 8192723e0..1b39bd8fe 100644
--- a/frontend/src/views/AccessibilityPage.vue
+++ b/frontend/src/views/AccessibilityPage.vue
@@ -1,120 +1,128 @@
 <template>
   <div class="fr-container mt-4">
     <h1>Déclaration d’accessibilité</h1>
-    <p>Établie le <span>11 avril 2024</span>.</p>
+    <p>Établie le <span>16 avril 2024</span>.</p>
     <p>
-      <span>Ministère de l'Intérieur et des Outre-Mer</span> s’engage à rendre
-      son service accessible, conformément à l’article 47 de la loi n° 2005-102
-      du 11 février 2005.
-    </p>
-    <p>
-      À cette fin, nous mettons en œuvre la stratégie et les actions
-      suivantes&nbsp;:
-      <a
-        href="https://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdfhttps://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdfhttps://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdfhttps://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdfhttps://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdf"
-      >https://www.interieur.gouv.fr/sites/minint/files/medias/documents/2023-10/Schema%20pluriannuel%20Accessibilit%C3%A9-ministere-interieur-et-outre-mer-2022%202024-accessible.pdf</a>.
+      <strong>Ministère de l'Intérieur et des Outre-Mer</strong> s’engage à
+      rendre ses sites internet, intranet, extranet et ses progiciels
+      accessibles (et ses applications mobiles et mobilier urbain numérique)
+      conformément à l’article 47 de la loi n°2005-102 du 11 février 2005.
     </p>
+
     <p>
-      Cette déclaration d’accessibilité s’applique à <strong>Basegun</strong><span> (<span>https://basegun.interieur.gouv.fr</span>)</span>.
+      Cette déclaration d’accessibilité s’applique à
+      <strong>https://basegun.interieur.gouv.fr/</strong>.
     </p>
+
     <h2>État de conformité</h2>
+
     <p>
-      <strong>Basegun</strong> est
-      <strong><span data-printfilter="lowercase">non conforme</span></strong>
-      avec le
-      <abbr title="Référentiel général d’amélioration de l’accessibilité">RGAA</abbr>. <span>Le site n’a encore pas été audité.</span>
+      <strong
+        >Basegun
+        <a target="_blank" href="https://basegun.interieur.gouv.fr/"
+          >https://basegun.interieur.gouv.fr/</a
+        ></strong
+      >
+      est <strong>partiellement</strong> conforme avec le référentiel général
+      d’amélioration de l’accessibilité (RGAA), version 4 en raison des
+      non-conformités et des dérogations énumérées ci-dessous.
     </p>
+
     <h2>Résultats des tests</h2>
+
     <p>
-      L’audit de conformité réalisé <span>en auto-évaluation</span> révèle que
-      <span>0</span>% des critères sont respectés.
-    </p>
-    <h2>Contenus non accessibles</h2>
-    <p>
-      Les contenus listés ci-dessous ne sont pas accessibles pour les raisons
-      suivantes.
-    </p>
-    <h3>Non conformité</h3>
-    <p>
-      Malgré nos efforts, certains contenus sont inaccessibles. Vous trouverez
-      ci-dessous une liste des limitations connues et des solutions
-      potentielles&nbsp;:
+      L’audit de conformité réalisé par <strong>Basegun</strong> révèle que
+      <strong>71%</strong> des critères du RGAA version 4 sont respectés.<br/>
+      Lien vers le rapport d'audit : <a href="https://ara.numerique.gouv.fr/rapports/LiVL4Hwa_64Cgdaq6Fgpt" class="underline">https://ara.numerique.gouv.fr/rapports/LiVL4Hwa_64Cgdaq6Fgpt</a>
     </p>
-    <ol class="technical-information accessibility-limitations">
-      <li>
-        <strong>Présentation des modèles possibles lors de la mise en sécurité d'une
-          arme </strong>: Dans le cadre de la mise en sécurité d'une arme, les images des
-        modèles proposés par l'application ne sont pas toujours accompagnés de
-        textes auto porteur pour trouver le mécanisme. parce que l'affichage
-        mobile nous contraint à rester très concis en termes de nombre de mots..
-        . Merci d’utiliser le lien "je n'arrive pas à réaliser cette étape".
-        Vous pourrez nous décrire le problème rencontré, pour que nous puissions
-        améliorer la foncitonnalité.
-      </li>
-    </ol>
+
     <h2>Établissement de cette déclaration d’accessibilité</h2>
-    <p>Cette déclaration a été établie le <span>11 avril 2024</span>.</p>
-    <h3>Technologies utilisées</h3>
-    <p>
-      L’accessibilité de <span>Basegun</span> s’appuie sur les technologies
-      suivantes&nbsp;:
-    </p>
-    <ul class="technical-information technologies-used">
+
+    <h3>Technologies utilisées pour la réalisation de l’audit</h3>
+
+    <ul>
+      <li>HTML</li>
       <li>CSS</li>
-      <li>JavaScript</li>
+      <li>Javascript</li>
     </ul>
-    <h2>Amélioration et contact</h2>
+
+    <h3>Environnement de test</h3>
+
     <p>
-      Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez
-      contacter le responsable de <span>Basegun</span> pour être orienté vers
-      une alternative accessible ou obtenir le contenu sous une autre forme.
+      Les vérifications de restitution de contenus ont été réalisées sur la base
+      de la combinaison fournie par la base de référence du RGAA, avec les
+      versions suivantes :
     </p>
-    <ul class="basic-information feedback h-card">
-      <li>
-        E-mail&nbsp;:
-        <a
-          href="mailto:basegun@interieur.gouv.frbasegun@interieur.gouv.frbasegun@interieur.gouv.frbasegun@interieur.gouv.frbasegun@interieur.gouv.fr"
-        >basegun@interieur.gouv.fr</a>
-      </li>
 
-      <li>Adresse&nbsp;: <span>Paris</span></li>
+    <ul></ul>
+
+    <h3>Outils pour évaluer l’accessibilité</h3>
+
+    <ul>
+      <li>Validateur HTML du W3C</li>
+      <li>Web Developer Toolbar</li>
     </ul>
-    <p>Nous essayons de répondre dans les <span>5 jours ouvrés</span>.</p>
-    <h2>Voie de recours</h2>
-    <p>
-      Cette procédure est à utiliser dans le cas suivant&nbsp;: vous avez
-      signalé au responsable du site internet un défaut d’accessibilité qui vous
-      empêche d’accéder à un contenu ou à un des services du portail et vous
-      n’avez pas obtenu de réponse satisfaisante.
-    </p>
-    <p>Vous pouvez&nbsp;:</p>
+
+    <h3>Pages du site ayant fait l’objet de la vérification de conformité</h3>
+
     <ul>
       <li>
-        Écrire un message au
-        <a href="https://formulaire.defenseurdesdroits.fr/">Défenseur des droits</a>
+        Accueil <strong>https://basegun.interieur.gouv.fr/accueil</strong>
       </li>
       <li>
-        Contacter
-        <a href="https://www.defenseurdesdroits.fr/saisir/delegues">le délégué du Défenseur des droits dans votre région</a>
+        Contact <strong>https://basegun.interieur.gouv.fr/contact</strong>
+      </li>
+      <li>
+        Mentions légales
+        <strong>https://basegun.interieur.gouv.fr/contact</strong>
+      </li>
+      <li>
+        Accessibilité
+        <strong>https://basegun.interieur.gouv.fr/accessibilite</strong>
+      </li>
+      <li>
+        A Propos <strong>https://basegun.interieur.gouv.fr/a-propos</strong>
       </li>
+    </ul>
+
+    <h2>Retour d’information et contact</h2>
+
+    <p>
+      Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez
+      contacter le responsable de Basegun pour être orienté vers une alternative
+      accessible ou obtenir le contenu sous une autre forme.
+    </p>
+
+    <ul>
       <li>
-        Envoyer un courrier par la poste (gratuit, ne pas mettre de
-        timbre)&nbsp;:<br>
-        Défenseur des droits<br>
-        Libre réponse 71120 75342 Paris CEDEX 07
+        Contacter
+        <strong
+          >Ministère de l'Intérieur et des Outre-Mer :
+          basegun@interieur.gouv.fr</strong
+        >
       </li>
     </ul>
-    <hr>
+
+    <h2>Voies de recours</h2>
+
+    <p>
+      Si vous constatez un défaut d’accessibilité vous empêchant d’accéder à un
+      contenu ou une fonctionnalité du site, que vous nous le signalez et que
+      vous ne parvenez pas à obtenir une réponse de notre part, vous êtes en
+      droit de faire parvenir vos doléances ou une demande de saisine au
+      Défenseur des droits.
+    </p>
+
+    <p>Plusieurs moyens sont à votre disposition :</p>
+
+    <ul>
+      <li>Écrire un message au Défenseur des droits</li>
+      <li>Contacter le délégué du Défenseur des droits dans votre région</li>
+    </ul>
+
     <p>
-      Cette déclaration d’accessibilité a été créé le
-      <span>11 avril 2024</span> grâce au
-      <a href="https://betagouv.github.io/a11y-generateur-declaration/#create">Générateur de Déclaration d’Accessibilité de BetaGouv</a>.
+      Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre)
+      Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07
     </p>
-    <h1>Plan d'action de l'année en cours</h1>
-    <ol>
-      <li>Analyse de la conformité du site</li>
-      <li>Evaluation de l'écart à la cible d'accessibilité</li>
-      <li>Mise en place des mesures correctives pour atteindre la cible d'accessibilité</li>
-    </ol>
   </div>
 </template>
diff --git a/frontend/src/views/ContactPage.vue b/frontend/src/views/ContactPage.vue
index 4038ead98..05e0c8a3a 100644
--- a/frontend/src/views/ContactPage.vue
+++ b/frontend/src/views/ContactPage.vue
@@ -1,42 +1,21 @@
 <template>
-  <div>
-    <div class="fr-container mt-4">
-      <h1>Contact</h1>
-      <div>
-        <p class="title-space">
-          Pour toute question ou problème lié au fonctionnement de l'application, veuillez contacter le support utilisateurs : <a
-            class="underline"
-            href="mailto:support.basegun@interieur.gouv.fr"
-          >support.basegun@interieur.gouv.fr</a>.
-        </p>
-
-        <p class="title-space">
-          Pour toute question ou remarque liée au projet Basegun ou proposition d'amélioration, veuillez contacter : <a
-            class="underline"
-            href="mailto:basegun@interieur.gouv.fr"
-          >basegun@interieur.gouv.fr</a>.
-        </p>
-      </div>
-    </div>
+  <div class="fr-container mt-4">
+    <h1>Contact</h1>
+    <p>
+      Pour toute question ou problème lié au fonctionnement de l'application,
+      veuillez contacter le support utilisateurs :
+      <a
+        class="underline"
+        href="mailto:support.basegun@interieur.gouv.fr"
+      >support.basegun@interieur.gouv.fr</a>.
+    </p>
+    <p>
+      Pour toute question ou remarque liée au projet Basegun ou proposition
+      d'amélioration, veuillez contacter :
+      <a
+        class="underline"
+        href="mailto:basegun@interieur.gouv.fr"
+      >basegun@interieur.gouv.fr</a>.
+    </p>
   </div>
 </template>
-
-<style scoped>
-  .title-space {
-    margin-top: 20px;
-  }
-
-  .small-text {
-    font-size: 10pt;
-    margin-bottom: 0;
-  }
-
-  .small-link {
-    color: var(--blue-france-sun-113-625);
-  }
-
-  .small-link:hover {
-    color: #1212ff
-  }
-
-</style>
diff --git a/frontend/src/views/LegalPage.vue b/frontend/src/views/LegalPage.vue
index 4361fd9d8..0e2f58226 100644
--- a/frontend/src/views/LegalPage.vue
+++ b/frontend/src/views/LegalPage.vue
@@ -1,81 +1,82 @@
 <template>
-  <div>
-    <div class="fr-container mt-4">
-      <h1>Mentions légales</h1>
-      <div>
-        <h2 class="title-space">
-          Editeur
-        </h2>
-        <p>Le site Basegun est édité et géré par l’équipe de la Fabrique Numérique, à la Sous-Direction de l'Innovation et de la Donnée au sein de la Direction de la Transformatique Numérique du Ministère de l’Intérieur et des Outre-Mer.</p>
-        <p>Adresse : 40 avenue des Terroirs de France, 75012 PARIS.</p>
+  <div class="fr-container mt-4">
+    <h1>Mentions légales</h1>
+    <h2>Editeur</h2>
+    <p>
+      Le site Basegun est édité et géré par l’équipe de la Fabrique Numérique, à
+      la Sous-Direction de l'Innovation et de la Donnée au sein de la Direction
+      de la Transformatique Numérique du Ministère de l’Intérieur et des
+      Outre-Mer.
+    </p>
+    <p>Adresse : 40 avenue des Terroirs de France, 75012 PARIS.</p>
 
-        <h2 class="title-space">
-          Données collectées
-        </h2>
-        <h3>Objectif</h3>
-        <p>Basegun est un projet récent, actuellement en phase de test auprès de potentiels utilisateurs. En collectant les données citées ci-dessous, nous pourrons mieux comprendre comment et dans quels contextes le service est utilisé, et avoir les informations nécessaires pour résoudre d’éventuels problèmes.</p>
-        <h3>Cadre</h3>
-        <p>Nous collectons uniquement les informations relatives à des requêtes pertinentes et correspondant à l’objectif de Basegun : identifier des armes à feu. C’est pourquoi nous demandons à nos utilisateurs de ne soumettre que des requêtes en lien avec cet objectif et de respecter les conditions de l’application.</p>
-        <p>Nous ne souhaitons en aucun cas traiter des informations personnelles (par exemple aucune photo où le visage d'une personne est visible ne doit être déposée sur l'application).</p>
-        <h3>Liste des données</h3>
-        <p>Pour chaque requête effectuée sur Basegun, nous collectons les données suivantes :</p>
-        <ul class="list-margin">
-          <li>Date et heure</li>
-          <li>Photo soumise</li>
-          <li>Résultat obtenu (label et taux de fiabilité)</li>
-          <li>Temps de traitement de la requête</li>
-          <li>Identification unique et chiffrée (cookie uuid) de l’utilisateur</li>
-          <li>Type d’appareil (mobile, tablette, ordinateur), système d’exploitation (iOS, Android, Windows...) et navigateur (Chrome, Firefox, Safari...) utilisés</li>
-          <li>Evaluation (positive ou négative) par l’utilisateur du résultat obtenu</li>
-        </ul>
-        <h3>Confidentialité</h3>
-        <p>Nous nous réservons le droit de supprimer les données collectées suite à des requêtes non pertinentes. Nous pouvons également, sur simple demande d’un utilisateur, supprimer les données relatives à une requête spécifique. Pour cela, il suffit de nous envoyer une demande à <a href="mailto:support.basegun@interieur.gouv.fr">support.basegun@interieur.gouv.fr</a>, en nous précisant la date et l’heure de la requête.</p>
-        <p>Les informations collectées ne sont en aucun cas confiées à des tiers.</p>
+    <h2>Données collectées</h2>
+    <h3>Objectif</h3>
+    <p>
+      Basegun est un projet récent, actuellement en phase de test auprès de
+      potentiels utilisateurs. En collectant les données citées ci-dessous, nous
+      pourrons mieux comprendre comment et dans quels contextes le service est
+      utilisé, et avoir les informations nécessaires pour résoudre d’éventuels
+      problèmes.
+    </p>
+    <h3>Cadre</h3>
+    <p>
+      Nous collectons uniquement les informations relatives à des requêtes
+      pertinentes et correspondant à l’objectif de Basegun : identifier des
+      armes à feu. C’est pourquoi nous demandons à nos utilisateurs de ne
+      soumettre que des requêtes en lien avec cet objectif et de respecter les
+      conditions de l’application.
+    </p>
+    <p>
+      Nous ne souhaitons en aucun cas traiter des informations personnelles (par
+      exemple aucune photo où le visage d'une personne est visible ne doit être
+      déposée sur l'application).
+    </p>
+    <h3>Liste des données</h3>
+    <p>
+      Pour chaque requête effectuée sur Basegun, nous collectons les données
+      suivantes :
+    </p>
+    <ul class="fr-mb-4w fr-ml-4w">
+      <li>Date et heure</li>
+      <li>Photo soumise</li>
+      <li>Résultat obtenu (label et taux de fiabilité)</li>
+      <li>Temps de traitement de la requête</li>
+      <li>Identification unique et chiffrée (cookie uuid) de l’utilisateur</li>
+      <li>
+        Type d’appareil (mobile, tablette, ordinateur), système d’exploitation
+        (iOS, Android, Windows...) et navigateur (Chrome, Firefox, Safari...)
+        utilisés
+      </li>
+      <li>
+        Evaluation (positive ou négative) par l’utilisateur du résultat obtenu
+      </li>
+    </ul>
+    <h3>Confidentialité</h3>
+    <p>
+      Nous nous réservons le droit de supprimer les données collectées suite à
+      des requêtes non pertinentes. Nous pouvons également, sur simple demande
+      d’un utilisateur, supprimer les données relatives à une requête
+      spécifique. Pour cela, il suffit de nous envoyer une demande à
+      <a href="mailto:support.basegun@interieur.gouv.fr">support.basegun@interieur.gouv.fr</a>, en nous précisant la date et l’heure de la requête.
+    </p>
+    <p>
+      Les informations collectées ne sont en aucun cas confiées à des tiers.
+    </p>
 
-        <h2 class="title-space">
-          Code source
-        </h2>
-        <p>
-          Le code source du projet est disponible publiquement à l'adresse <a
-            href="https://github.com/datalab-mi/Basegun"
-            target="blank"
-          >https://github.com/datalab-mi/Basegun</a>
-        </p>
+    <h2>Code source</h2>
+    <p>
+      Le code source du projet est disponible publiquement à l'adresse
+      <a
+        href="https://github.com/datalab-mi/Basegun"
+        target="blank"
+      >https://github.com/datalab-mi/Basegun</a>
+    </p>
 
-        <h2 class="title-space">
-          Hébergement
-        </h2>
-        <p>Le site Basegun est hébergé en interne, au sein du Ministère de l'Intérieur et des Outre-Mer via Cloud π.</p>
-      </div>
-    </div>
+    <h2>Hébergement</h2>
+    <p>
+      Le site Basegun est hébergé en interne, au sein du Ministère de
+      l'Intérieur et des Outre-Mer via Cloud π.
+    </p>
   </div>
 </template>
-
-<style scoped>
-  .content {
-    margin: min(5vw, 10rem);
-  }
-
-  .small-text {
-    font-size: 10pt;
-    margin-bottom: 0;
-  }
-
-  .small-link {
-    color: var(--blue-france-sun-113-625);
-  }
-
-  .small-link:hover {
-    color: #1212ff
-  }
-
-  .title-space {
-    margin-top: 20px;
-  }
-
-  .list-margin {
-    margin-left: 2rem;
-    margin-bottom: 2rem;
-  }
-
-</style>
diff --git a/frontend/src/views/StartPage.vue b/frontend/src/views/StartPage.vue
index 17833fd76..7cbf87043 100644
--- a/frontend/src/views/StartPage.vue
+++ b/frontend/src/views/StartPage.vue
@@ -14,46 +14,44 @@ const resultStore = useResultStore()
       Basegun
     </h1>
     <p class="accueil-subtitle">
-      Outil d'identification rapide et <br> de mise en sécurité des armes à feu
+      Outil d'identification rapide et <br>
+      de mise en sécurité des armes à feu
     </p>
-    <div class="inline-grid">
-      <router-link
-        v-slot="{navigate}"
-        :to="{name:'SecuringRecommendations'}"
-      >
-        <DsfrButton
-          class=" w-14rem mb-4 p-2 whitespace-pre-line"
-          data-testid="secure-firearm"
-          label="Je veux mettre en sécurité mon arme"
-          size="small"
-          @click="navigate(); resultStore.$patch({ securingTutorial: true})"
-        />
-      </router-link>
-      <router-link
-        v-slot="{navigate}"
-        :to="{name:'InstructionsPage'}"
-      >
-        <DsfrButton
-          class=" w-14rem mb-4 p-2 whitespace-pre-line"
-          data-testid="identification"
-          label="J’ai déjà mis mon arme en sécurité, je veux l’identifier"
-          size="small"
-          @click="navigate(); resultStore.$patch({ securingTutorial: false})"
-        />
-      </router-link>
+    <div>
+      <DsfrButton
+        class="w-14rem mb-4 p-2 whitespace-pre-line"
+        data-testid="secure-firearm"
+        label="Je veux mettre en sécurité mon arme"
+        size="small"
+        @click="
+          $router.push({ name: 'SecuringRecommendations'});
+          resultStore.$patch({ securingTutorial: true });
+        "
+      />
+    </div>
+    <div>
+      <DsfrButton
+        class="w-14rem mb-4 p-2 whitespace-pre-line"
+        data-testid="identification"
+        label="J’ai déjà mis mon arme en sécurité, je veux l’identifier"
+        size="small"
+        @click="
+          $router.push({ name: 'InstructionsPage'});
+          resultStore.$patch({ securingTutorial: false });
+        "
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
-  .accueil-title {
-    font-size: 28px;
-    margin-top: -20px;
-    margin-bottom: 0;
-  }
+.accueil-title {
+  margin-top: -20px;
+  margin-bottom: 0;
+}
 
-  .accueil-subtitle {
-    font-size: 14px;
-    line-height: normal;
-  }
+.accueil-subtitle {
+  font-size: 14px;
+  line-height: normal;
+}
 </style>