diff --git a/src/content/docs/fr/tutorial/2-pages/4.mdx b/src/content/docs/fr/tutorial/2-pages/4.mdx
index 86cb9fcb2b5fc..d2803882da7d8 100644
--- a/src/content/docs/fr/tutorial/2-pages/4.mdx
+++ b/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";
 ---
diff --git a/src/content/docs/fr/tutorial/2-pages/5.mdx b/src/content/docs/fr/tutorial/2-pages/5.mdx
index 7119347ebe9ba..7c684b6b036c2 100644
--- a/src/content/docs/fr/tutorial/2-pages/5.mdx
+++ b/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";
     ---
diff --git a/src/content/docs/fr/tutorial/3-components/3.mdx b/src/content/docs/fr/tutorial/3-components/3.mdx
index b50ec2fc47fdb..98b020acf7c79 100644
--- a/src/content/docs/fr/tutorial/3-components/3.mdx
+++ b/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,6 +153,7 @@ import Badge from "~/components/Badge.astro"
       font-size: 1.2rem;
       font-weight: bold;
       text-transform: uppercase;
+      color: #0d0950;
     }
 
     .nav-links a:hover,
@@ -166,10 +161,6 @@ import Badge from "~/components/Badge.astro"
       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
diff --git a/src/content/docs/fr/tutorial/3-components/4.mdx b/src/content/docs/fr/tutorial/3-components/4.mdx
index f15face5ad9e4..cd1e779cf39e6 100644
--- a/src/content/docs/fr/tutorial/3-components/4.mdx
+++ b/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,18 +155,24 @@ 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";
@@ -178,7 +180,7 @@ Au lieu d'écrire votre JavaScript directement sur chaque page, vous pouvez dép
     </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.
diff --git a/src/content/docs/fr/tutorial/3-components/index.mdx b/src/content/docs/fr/tutorial/3-components/index.mdx
index b755270749c7b..9092f0f6884a7 100644
--- a/src/content/docs/fr/tutorial/3-components/index.mdx
+++ b/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.
 
diff --git a/src/content/docs/fr/tutorial/6-islands/2.mdx b/src/content/docs/fr/tutorial/6-islands/2.mdx
index 976add8516cab..7fde2a9ac3b43 100644
--- a/src/content/docs/fr/tutorial/6-islands/2.mdx
+++ b/src/content/docs/fr/tutorial/6-islands/2.mdx
@@ -30,8 +30,8 @@ Construisons une icône cliquable pour permettre à vos utilisateurs de basculer
     ```astro title="src/components/ThemeIcon.astro"
     ---
     ---
-    <button id="themeToggle">
-      <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <button id="themeToggle" aria-label="Toggle theme">
+      <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
         <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
       </svg>
@@ -50,21 +50,30 @@ Construisons une icône cliquable pour permettre à vos utilisateurs de basculer
     </style>
     ```
 
-2. Ajoutez l'icône à `Header.astro` de manière à ce qu'elle soit affichée sur toutes les pages. N'oubliez pas d'importer le composant.
+2. Importez et ajoutez le composant `<ThemeIcon />` à `Header.astro` afin qu'il s'affiche sur toutes les pages. Regroupez `<ThemeIcon />` et `<Menu />` dans une balise `<div>` pour les mettre en forme, et ajoutez la balise `<style>` comme indiqué ci-dessous pour ajouter certains styles de base afin d'améliorer la mise en page.
 
-    ```astro title="src/components/Header.astro" ins={4,9}
+    ```astro title="src/components/Header.astro" ins={4,8-9,11,16-21}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     import ThemeIcon from './ThemeIcon.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
-        <ThemeIcon />
+        <div>
+          <ThemeIcon />
+          <Menu />
+        </div>
         <Navigation />
       </nav>
     </header>
+
+    <style>
+      div {
+        display: flex;
+        justify-content: space-between;
+      }
+    </style>
     ```
 
 3. Visitez l'aperçu dans votre navigateur à l'adresse `http://localhost:4321` pour vérifiez que l'icône est désormais sur toutes vos pages. Vous pouvez essayer de cliquer dessus, mais vous n'avez pas encore écrit de script pour la rendre interactive.
@@ -83,12 +92,34 @@ Choisissez quelques couleurs alternatives à utiliser en mode sombre.
       color: #fff;
     }
 
+    .dark .menu {
+      background-color: #fff;
+      color: #000;
+    }
+
+    .dark .nav-links a:hover,
+    .dark .nav-links a:focus {
+      color: #0d0950;
+    }
+
     .dark .nav-links a {
       color: #fff;
     }
+
+    .dark a {
+      color: #ff9776;
+    }
     ```
 </Steps>
 
+:::tip[Vérifiez les couleurs pour l'accessibilité]
+Lorsque vous mettez à jour votre site pour inclure le mode sombre, certaines couleurs utilisées peuvent nécessiter une mise à jour.
+
+Vérifiez toujours le rendu de votre site lorsque vous ajoutez de nouveaux styles et couleurs, et effectuez des ajustements si nécessaire ! Cela peut impliquer l'ajout de règles de style CSS `.dark` supplémentaires pour afficher différents styles en mode sombre, ou la mise à jour de certaines couleurs pour qu'elles fonctionnent aussi bien avec les deux thèmes.
+
+Pensez à utiliser des outils d'accessibilité comme un vérificateur de contraste lors de la création d'un jeu de couleurs pour votre site. Vous pouvez également effectuer une vérification de votre site web avec une extension de navigateur pour identifier d'éventuels problèmes.
+:::
+
 ## Ajouter de l'interactivité côté client
 
 Pour ajouter de l'interactivité à un composant Astro, vous pouvez utiliser une balise `<script>`. Ce script peut vérifier et définir le thème actuel à partir de `localStorage` et basculer le thème lorsque l'icône est cliquée. 
diff --git a/src/content/docs/fr/tutorial/6-islands/3.mdx b/src/content/docs/fr/tutorial/6-islands/3.mdx
index 023ade0143b36..3b7d1d4c61724 100644
--- a/src/content/docs/fr/tutorial/6-islands/3.mdx
+++ b/src/content/docs/fr/tutorial/6-islands/3.mdx
@@ -33,7 +33,7 @@ const identity = {
   hobbies: ["photographie", "observation des oiseaux", "baseball"],
 };
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---