i18n(fr): update tutorial/* (withastro#12438)

Co-authored-by: paul valladares <[email protected]>

Author: 2 people

src/content/docs/fr/tutorial/2-pages/4.mdx

@@ -109,7 +109,7 @@ La balise `<style>` d'Astro peut également référencer toutes les variables de
     const finished = false;
     const goal = 3;
   
-    const skillColor = "navy";
+    const skillColor = "crimson";
     ---
     ```
 
@@ -129,7 +129,7 @@ La balise `<style>` d'Astro peut également référencer toutes les variables de
     </style>
     ```
 
-3. Vérifiez votre page À propos dans votre aperçu de navigateur. Vous devriez voir que les compétences sont maintenant d'un bleu marine (« navy »), tel que défini par la variable `skillColor` transmise à la directive `define:vars`.
+3. Vérifiez votre page À propos dans votre aperçu de navigateur. Vous devriez voir que les compétences sont maintenant d'un rouge cramoisi (« crimson red »), tel que défini par la variable `skillColor` transmise à la directive `define:vars`.
 </Steps>
 
 <Box icon="puzzle-piece">
@@ -154,7 +154,7 @@ La balise `<style>` d'Astro peut également référencer toutes les variables de
       ```
 
   2. Ajoutez les définitions de variables manquantes dans votre script du frontmatter pour que votre nouvelle balise `<style>` applique avec succès ces styles à votre liste de compétences :
-      - La couleur du texte est le bleu marine
+      - La couleur du texte est rouge cramoisi
       - Le texte est en gras
       - Les éléments de la liste sont en majuscules (lettres capitales)
  </Steps>
@@ -178,7 +178,7 @@ const happy = true;
 const finished = false;
 const goal = 3;
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---

src/content/docs/fr/tutorial/2-pages/5.mdx

@@ -74,7 +74,7 @@ Il existe plusieurs façons de définir des styles de manière **globale** dans
     const finished = false;
     const goal = 3;
 
-    const skillColor = "navy";
+    const skillColor = "crimson";
     const fontWeight = "bold";
     const textCase = "uppercase";
     ---

src/content/docs/fr/tutorial/3-components/3.mdx

@@ -49,9 +49,6 @@ import Badge from "~/components/Badge.astro"
 
 </Box>
 
-
-
-
 <Box icon="puzzle-piece">
 
 ## Essayer par vous-même - Mettre à jour vos pages
@@ -95,12 +92,12 @@ import Badge from "~/components/Badge.astro"
 ## Ajouter des styles réactifs
 
 <Steps>
-1. Mettez à jour `Navigation.astro` avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise `<div>` avec la classe `nav-links`.
+1. Mettez à jour `Navigation.astro` avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise `<div>` avec la classe `nav-links` et l'attribut id défini sur `main-menu`.
 
     ```astro title="src/components/Navigation.astro" ins={3,7}
     ---
     ---
-    <div class="nav-links">
+    <div id="main-menu" class="nav-links">
       <a href="/">Accueil</a>
       <a href="/about">À propos</a>
       <a href="/blog">Blog</a>
@@ -117,7 +114,7 @@ import Badge from "~/components/Badge.astro"
     Commencez par définir ce qui doit se passer sur les petits écrans en premier ! Les écrans plus petits nécessitent des mises en page plus simples. Ensuite, ajustez vos styles pour les appareils plus grands. Si vous concevez d'abord le cas compliqué, vous devrez ensuite essayer de le rendre à nouveau simple.
     :::
 
-    ```css title="src/styles/global.css" ins={23-100}
+    ```css title="src/styles/global.css" ins={23-60}
     html {
       background-color: #f1f5f9;
       font-family: sans-serif;
@@ -144,9 +141,6 @@ import Badge from "~/components/Badge.astro"
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -159,17 +153,14 @@ import Badge from "~/components/Badge.astro"
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
     .nav-links a:focus {
       background-color: #ff9776;
     }
 
-    .expanded {
-      display: unset;
-    }
-
     @media screen and (min-width: 636px) {
       .nav-links {
         margin-left: 5em;
@@ -183,15 +174,12 @@ import Badge from "~/components/Badge.astro"
         display: inline-block;
         padding: 15px 20px;
       }
-
     }
     ```
 </Steps>
 
 Redimensionnez votre fenêtre et recherchez les styles différents appliqués à différentes largeurs d'écran. Votre en-tête est maintenant **réactif** à la taille de l'écran grâce à l'utilisation des requêtes `@media`.
 
-
-
 <Box icon="check-list">
 
 ## Liste de contrôle

src/content/docs/fr/tutorial/3-components/4.mdx

@@ -16,75 +16,66 @@ import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Ajoutons un menu hamburger pour ouvrir et fermer vos liens sur les écrans de taille mobile, nécessitant ainsi de l'interactivité côté client !
+Ajoutons un bouton pour ouvrir et fermer votre menu de navigation sur les tailles d'écran ciblant les mobiles, nécessitant une certaine interactivité côté client !
 
 <PreCheck>
-  - Créer un composant de menu hamburger
+  - Créer un composant de menu
   - Rédiger un `<script>` pour permettre aux visiteurs de votre site d'ouvrir et de fermer le menu de navigation
   - Déplacer votre JavaScript dans son fichier `.js`
 </PreCheck>
 
-## Construire un composant Hamburger
+## Créer un composant Menu
 
-Créez un composant `<Hamburger />` pour ouvrir et fermer votre menu mobile.
+Créez un composant `<Menu />` pour ouvrir et fermer votre menu mobile.
 
 <Steps>
-1. Créez un fichier nommé `Hamburger.astro` dans `src/components/`
+1. Créez un fichier nommé `Menu.astro` dans `src/components/`
 
 
-2. Copiez le code suivant dans votre composant. Cela représentera votre menu « hamburger » à 3 lignes pour ouvrir et fermer vos liens de navigation sur mobile. (Vous ajouterez les nouveaux styles CSS dans `global.css` ultérieurement.)
+2. Copiez le code suivant dans votre composant. Il crée un bouton qui sera utilisé pour basculer la visibilité des liens de navigation sur les appareils mobiles. (Vous ajouterez les nouveaux styles CSS au fichier « global.css » ultérieurement.)
 
-    ```astro title="src/components/Hamburger.astro"
+    ```astro title="src/components/Menu.astro"
     --- 
     ---
-    <div class="hamburger">
-      <span class="line"></span>
-      <span class="line"></span>
-      <span class="line"></span>
-    </div>
+    <button aria-expanded="false" aria-controls="main-menu" class="menu">
+      Menu
+    </button>
     ```
 
-3. Placez ce nouveau composant `<Hamburger />` juste avant votre composant `<Navigation />` dans `Header.astro`. 
+3. Placez ce nouveau composant `<Menu />` juste avant votre composant `<Navigation />` dans `Header.astro`. 
 
     <details>
     <summary>Montrez-moi le code !</summary>
 
     ```astro title="src/components/Header.astro" ins={2,7}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
+        <Menu />
         <Navigation />
       </nav>
     </header>
     ```
     </details>
 
-4. Ajoutez les styles suivants pour votre composant Hamburger :
+4. Ajoutez les styles suivants pour votre composant Menu, y compris certains styles adaptatifs :
 
-    ```css title="src/styles/global.css" ins={2-13, 56-58}
+    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
     /* Styles de la navigation */
-    .hamburger {
-      padding-right: 20px;
-      cursor: pointer;
-    }
-  
-    .hamburger .line {
-      display: block;
-      width: 40px;
-      height: 5px;
-      margin-bottom: 10px;
-      background-color: #ff9776;
+    .menu {
+      background-color: #0d0950;
+      border: none;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      padding: 5px 10px;
     }
 
     .nav-links {
       width: 100%;
-      top: 5rem;
-      left: 48px;
-      background-color: #ff9776;
       display: none;
       margin: 0;
     }
@@ -97,13 +88,15 @@ Créez un composant `<Hamburger />` pour ouvrir et fermer votre menu mobile.
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
-    .nav-links a:hover, a:focus {
+    .nav-links a:hover,
+    .nav-links a:focus{
       background-color: #ff9776;
     }
 
-    .expanded {
+    :has(.menu[aria-expanded="true"]) .nav-links {
       display: unset;
     }
 
@@ -121,7 +114,7 @@ Créez un composant `<Hamburger />` pour ouvrir et fermer votre menu mobile.
         padding: 15px 20px;
       }
 
-      .hamburger {
+      .menu {
         display: none;
       }
     }
@@ -131,18 +124,21 @@ Créez un composant `<Hamburger />` pour ouvrir et fermer votre menu mobile.
 
 ## Rédiger votre première balise de script
 
-Votre en-tête n'est pas encore **interactif** car il ne peut pas réagir aux interactions de l'utilisateur, comme cliquer sur le menu hamburger pour afficher ou masquer les liens de navigation. 
+Votre en-tête n'est pas encore **interactif** car il ne peut pas réagir aux interactions de l'utilisateur, comme cliquer sur le menu pour afficher ou masquer les liens de navigation. 
 
 L'ajout d'une balise `<script>` fournit du JavaScript côté client pour « écouter » un événement utilisateur, puis réagir en conséquence.
 
 <Steps>
 1. Ajoutez la balise `<script>` suivante à `index.astro`, juste avant la balise de fermeture `</body>`.
 
-    ```astro title="src/pages/index.astro" ins={2-6}
+    ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
       </script>
     </body>
@@ -159,26 +155,32 @@ Au lieu d'écrire votre JavaScript directement sur chaque page, vous pouvez dép
 1. Créez `src/scripts/menu.js` (vous devrez créer un nouveau dossier `/scripts/`) et déplacez-y votre JavaScript.
 
     ```js title="src/scripts/menu.js"
-    document.querySelector('.hamburger').addEventListener('click', () => {
-      document.querySelector('.nav-links').classList.toggle('expanded');
+    const menu = document.querySelector('.menu');
+
+    menu.addEventListener('click', () => {
+      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+      menu.setAttribute('aria-expanded', !isExpanded);
     });
     ```
 
 2. Remplacez le contenu de la balise `<script>` dans `index.astro` par l'importation de fichier suivante :
 
-    ```astro title="src/pages/index.astro" ins={7} del={3-5}
+    ```astro title="src/pages/index.astro" ins={10} del={3-8}
       <Footer />
       <script>
-        document.querySelector('.hamburger')?.addEventListener('click', () => {
-          document.querySelector('.nav-links')?.classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
 
         import "../scripts/menu.js";
       </script>
     </body>
     ```
 
-3. Contrôlez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu hamburger est toujours capable d'ouvrir et de fermer vos liens de navigation. 
+3. Contrôlez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu est toujours capable d'ouvrir et de fermer vos liens de navigation. 
 
 
 4. Ajoutez la même balise `<script>` avec l'importation sur vos deux autres pages, `about.astro` et `blog.astro`, et vérifiez que vous avez un en-tête réactif et interactif sur chaque page.

src/content/docs/fr/tutorial/3-components/index.mdx

@@ -26,7 +26,7 @@ Vous créerez :
 - Un composant de navigation qui présente un menu de liens vers vos pages
 - Un composant de pied de page à inclure en bas de chaque page
 - Un composant de médias sociaux, utilisé dans le pied de page, qui renvoie vers des pages de profil
-- Un composant interactif Hamburger pour afficher ou masquer la navigation sur mobile
+- Un composant interactif Menu pour afficher ou masquer la navigation sur mobile
 
 En chemin, vous utiliserez CSS et JavaScript pour créer un design réactif qui réagit aux tailles d'écran et aux interactions de l'utilisateur.