🌐(frontend) legal pages translatable

Makes the legal pages translatable.

src/frontend/apps/impress/src/pages/accessibility/index.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Box, Text, TextStyled } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -22,48 +22,40 @@ const Page: NextPageWithLayout = () => {
       </Box>
       <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
         <Text as="p" $display="inline">
-          <Text $weight="bold" $display="inline">
-            La Suite numérique
-          </Text>{' '}
-          s&apos;engage à rendre ses services numériques accessibles,
-          conformément à l&apos;article 47 de la loi n° 2005-102 du 11 février
-          2005.
+          <Trans t={t} i18nKey="accessibility-dinum-services">
+            <strong>La DINUM</strong> s&apos;engage à rendre ses services
+            numériques accessibles, conformément à l&apos;article 47 de la loi
+            n° 2005-102 du 11 février 2005.
+          </Trans>
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Déclaration d&apos;accessibilité
+          {t("Déclaration d'accessibilité")}
         </Text>
-        <Text as="p">Établie le 20 décembre 2023.</Text>
+        <Text as="p">{t('Établie le 20 décembre 2023.')}</Text>
         <Text as="p" $display="inline">
-          Cette déclaration d&apos;accessibilité s&apos;applique au site{' '}
-          <Text $weight="bold" $display="inline">
-            lasuite.numerique.gouv.fr
-          </Text>
-          .
+          {t("Cette déclaration d'accessibilité s'applique au site")}{' '}
+          <strong>docs.numerique.gouv.fr</strong>.
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          État de conformité
+          {t('État de conformité')}
         </Text>
         <Text as="p" $display="inline">
-          <Text $weight="bold" $display="inline">
-            lasuite.numerique.gouv.fr
-          </Text>{' '}
-          est non conforme avec le RGAA 4.1. Le site n&apos;a{' '}
-          <Text $weight="bold" $display="inline">
-            pas encore été audité.
-          </Text>
+          <Trans t={t} i18nKey="accessibility-not-audit">
+            <strong>docs.numerique.gouv.fr</strong> est non conforme avec le
+            RGAA 4.1. Le site n&apos;a <strong>pas encore été audité.</strong>
+          </Trans>
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Amélioration et contact
+          {t('Amélioration et contact')}
         </Text>
         <Text as="p" $display="inline">
-          Si vous n&apos;arrivez pas à accéder à un contenu ou à un service,
-          vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour
-          être orienté vers une alternative accessible ou obtenir le contenu
-          sous une autre forme.
+          {t(
+            `Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le responsable de lasuite.numerique.gouv.fr pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.`,
+          )}
         </Text>
         <Text as="p" $display="inline">
           <li>
-            E-mail :{' '}
+            {t('E-mail:')}{' '}
             <TextStyled
               as="a"
               href="mailto:lasuite@modernisation.gouv.fr"
@@ -73,56 +65,58 @@ const Page: NextPageWithLayout = () => {
             </TextStyled>
           </li>
           <li>
-            Adresse :{' '}
-            <Text $weight="bold" $display="inline">
-              DINUM
-            </Text>
-            , 20 avenue de Ségur 75007 Paris
+            {t('Adresse:')} <strong>DINUM</strong>, 20 avenue de Ségur 75007
+            Paris
           </li>
         </Text>
         <Text as="p" $display="inline">
-          Nous essayons de répondre dans les 2 jours ouvrés.
+          {t('Nous essayons de répondre dans les 2 jours ouvrés.')}
         </Text>
 
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Voie de recours
+          {t('Voie de recours')}
         </Text>
         <Text as="p" $display="inline">
-          Cette procédure est à utiliser dans le cas suivant : vous avez signalé
-          au responsable du site internet un défaut d&apos;accessibilité qui
-          vous empêche d&apos;accéder à un contenu ou à un des services du
-          portail et vous n&apos;avez pas obtenu de réponse satisfaisante.
+          {t(`Cette procédure est à utiliser dans le cas suivant:`)}{' '}
+          {t(
+            `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.`,
+          )}
         </Text>
         <Text as="p" $display="inline" $margin={{ bottom: 'tiny' }}>
-          Vous pouvez :
+          {t('Vous pouvez:')}
         </Text>
         <Text as="p" $display="inline" $margin={{ top: 'tiny' }}>
           <li>
-            Écrire un message au{' '}
-            <TextStyled
-              as="a"
-              href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine/"
-              $display="inline"
-            >
-              Défenseur des droits
-            </TextStyled>
+            <Trans t={t} i18nKey="accessibility-form-defenseurdesdroits">
+              Écrire un message au{' '}
+              <TextStyled
+                as="a"
+                href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine/"
+                $display="inline"
+              >
+                Défenseur des droits
+              </TextStyled>
+            </Trans>
           </li>
           <li>
-            Contacter le délégué du{' '}
-            <TextStyled
-              as="a"
-              href="https://www.defenseurdesdroits.fr/carte-des-delegues"
-              $display="inline"
-            >
-              Défenseur des droits dans votre région
-            </TextStyled>
+            <Trans t={t} i18nKey="accessibility-contact-defenseurdesdroits">
+              Contacter le délégué du
+              <TextStyled
+                as="a"
+                href="https://www.defenseurdesdroits.fr/carte-des-delegues"
+                $display="inline"
+              >
+                {t('Défenseur des droits dans votre région')}
+              </TextStyled>
+            </Trans>
           </li>
           <li>
-            Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre)
-            :{' '}
-            <Text $weight="bold" $display="inline">
+            {t(
+              `Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre):`,
+            )}{' '}
+            <strong>
               Défenseur des droits Libre réponse 71120 75342 Paris CEDEX 07
-            </Text>
+            </strong>
           </li>
         </Text>
       </Box>

src/frontend/apps/impress/src/pages/legal-notice/index.tsx

@@ -22,30 +22,33 @@ const Page: NextPageWithLayout = () => {
       </Box>
       <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Éditeur
+          {t('Éditeur')}
         </Text>
         <Text as="p">
-          Équipe La Suite Numérique de la Direction interministérielle du
-          numérique DINUM, 20 avenue de Ségur 75007 Paris.
+          {t(
+            'Équipe La Suite Numérique de la Direction interministérielle du numérique DINUM, 20 avenue de Ségur 75007 Paris.',
+          )}
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Directeur de la publication
+          {t('Directeur de la publication')}
         </Text>
-        <Text as="p">Directeur interministériel du numérique.</Text>
+        <Text as="p">{t('Directeur interministériel du numérique.')}</Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Copyright
+          {t('Copyright')}
         </Text>
         <Text as="p" $display="inline">
-          Illustration :{' '}
+          {t('Illustration:')}{' '}
           <Text $weight="bold" $display="inline">
             DINUM
           </Text>
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Plus d&apos;infos ?
+          {t("Plus d'infos ?")}
         </Text>
         <Text as="p" $display="inline">
-          L&apos;équipe de La Suite Numérique peut être contactée directement à{' '}
+          {t(
+            "L'équipe de La Suite Numérique peut être contactée directement à",
+          )}{' '}
           <TextStyled
             as="a"
             href="lasuite@modernisation.gouv.fr"

src/frontend/apps/impress/src/pages/personal-data-cookies/index.tsx

@@ -22,77 +22,47 @@ const Page: NextPageWithLayout = () => {
       </Box>
       <Box $padding={{ horizontal: 'large', vertical: 'big' }}>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Cookies déposés
+          {t('Cookies déposés')}
         </Text>
         <Text as="p">
-          Ce site dépose un petit fichier texte (un « cookie ») sur votre
-          ordinateur lorsque vous le consultez. Cela nous permet de mesurer le
-          nombre de visites et de comprendre quelles sont les pages les plus
-          consultées.
+          {t(
+            'Ce site dépose un petit fichier texte (un « cookie ») sur votre ordinateur lorsque vous le consultez.',
+          )}
+          {t(
+            'Cela nous permet de mesurer le nombre de visites et de comprendre quelles sont les pages les plus consultées.',
+          )}
         </Text>
         <Text as="p">
-          Vous pouvez vous opposer au suivi de votre navigation sur ce site web.
-          Cela protégera votre vie privée, mais empêchera également le
-          propriétaire d&apos;apprendre de vos actions et de créer une meilleure
-          expérience pour vous et les autres utilisateurs.
+          {t(
+            'Vous pouvez vous opposer au suivi de votre navigation sur ce site web.',
+          )}
+          {t(
+            "Cela protégera votre vie privée, mais empêchera également le propriétaire d'apprendre de vos actions et de créer une meilleure expérience pour vous et les autres utilisateurs.",
+          )}
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Ce site n&apos;affiche pas de bannière de consentement aux cookies,
-          pourquoi ?
+          {t(
+            "Ce site n'affiche pas de bannière de consentement aux cookies, pourquoi ?",
+          )}
         </Text>
         <Text as="p">
-          C&apos;est vrai, vous n&apos;avez pas eu à cliquer sur un bloc qui
-          recouvre la moitié de la page pour dire que vous êtes d&apos;accord
-          avec le dépôt de cookies — même si vous ne savez pas ce que ça veut
-          dire !
+          {t(
+            "C'est vrai, vous n'avez pas eu à cliquer sur un bloc qui recouvre la moitié de la page pour dire que vous êtes d'accord avec le dépôt de cookies — même si vous ne savez pas ce que ça veut dire !",
+          )}
         </Text>
         <Text as="p">
-          Rien d&apos;exceptionnel, pas de passe-droit lié à un .gouv.fr . Nous
-          respectons simplement la loi, qui dit que certains outils de suivi
-          d&apos;audience, correctement configurés pour respecter la vie privée,
-          sont exemptés d&apos;autorisation préalable.
-        </Text>
-        <Text as="p" $display="inline">
-          Nous utilisons pour cela{' '}
-          <TextStyled as="a" href="https://matomo.org/" $display="inline">
-            Matomo
-          </TextStyled>
-          , un outil{' '}
-          <TextStyled
-            as="a"
-            href="https://matomo.org/free-software/"
-            $display="inline"
-          >
-            libre
-          </TextStyled>
-          , paramétré pour être en conformité avec la{' '}
-          <TextStyled
-            as="a"
-            href="https://www.cnil.fr/fr/cookies-et-autres-traceurs/regles/cookies-solutions-pour-les-outils-de-mesure-daudience"
-            $display="inline"
-          >
-            recommandation « Cookies »
-          </TextStyled>{' '}
-          de la{' '}
-          <span
-            style={{
-              textDecorationStyle: 'dotted',
-              textDecorationLine: 'underline',
-            }}
-          >
-            CNIL
-          </span>
-          . Cela signifie que votre adresse IP, par exemple, est anonymisée
-          avant d&apos;être enregistrée. Il est donc impossible d&apos;associer
-          vos visites sur ce site à votre personne.
+          {t("Rien d'exceptionnel, pas de passe-droit lié à un .gouv.fr .")}
+          {t(
+            "Nous respectons simplement la loi, qui dit que certains outils de suivi d'audience, correctement configurés pour respecter la vie privée, sont exemptés d'autorisation préalable.",
+          )}
         </Text>
         <Text as="h2" $margin={{ bottom: 'xtiny' }}>
-          Je contribue à enrichir vos données, puis-je y accéder ?
+          {t('Je contribue à enrichir vos données, puis-je y accéder ?')}
         </Text>
         <p>
-          Bien sûr ! Les statistiques d&apos;usage de la majorité de nos
-          produits, dont lasuite.numerique.gouv.fr, sont disponibles en accès
-          libre sur{' '}
+          {t(
+            "Bien sûr ! Les statistiques d'usage de la majorité de nos produits, dont docs.numerique.gouv.fr, sont disponibles en accès libre sur",
+          )}{' '}
           <TextStyled as="a" href="stats.data.gouv.fr" $display="inline">
             stats.data.gouv.fr
           </TextStyled>