diff --git a/components/menu.html b/components/menu.html
index c3adda5..94193c5 100644
--- a/components/menu.html
+++ b/components/menu.html
@@ -16,8 +16,8 @@
         <li><a href="/frontend/pages/chap4.html">Chapitre 4 : Les main bien formées</a></li>
         <li><a href="/frontend/pages/chap5.html">Chapitre 5 : Voler une tuile</a></li>
         <li><a href="/frontend/pages/chap6.html">Chapitre 6 : Annoncer la victoire</a></li>
-        <li><a href="">Chapitre 7 : Le vent du joueur</a></li>
-        <li><a href="">Chapitre 8 : Les Yakus</a></li>
+        <li><a href="/frontend/pages/chap7.html">Chapitre 7 : Le vent du joueur</a></li>
+        <li><a href="/frontend/pages/chap8.html">Chapitre 8 : Les Yakus</a></li>
         <li><a href="">Chapitre 9 : Le riichi</a></li>
         <li><a href="">Chapitre 10 : Le furiten</a></li>
         <li><a href="">Chapitre 11 : Une partie complète (complète ?)</a></li>
diff --git a/frontend/pages/chap7.html b/frontend/pages/chap7.html
new file mode 100644
index 0000000..bf80b86
--- /dev/null
+++ b/frontend/pages/chap7.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tuto Riichi</title>
+  <link rel="stylesheet" href="/frontend/css/style.css">
+  <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
+  <link rel="stylesheet" href="/frontend/css/hand.css">
+  <style>
+    #menu {
+      position: relative;
+      z-index: 10;
+    }
+
+    #mascotte {
+      position: absolute;
+      top: 670px;
+      right: 100px;
+      z-index: 999;
+      transform: scaleX(-1);
+      cursor: pointer;
+    }
+
+    #mascotte img {
+      width: 250px;
+      height: auto;
+      display: block;
+    }
+
+    .speech-bubble {
+      position: absolute;
+      top: 100px;
+      right: 170px;
+      z-index: 1;
+      display: none;
+    }
+
+    .speech-bubble.visible {
+      display: flex;
+    }
+
+    h2 {
+      position: absolute;
+      text-align: center;
+      margin-top: 40px;
+      margin-bottom: 20px;
+      color: white;
+      pointer-events: none;
+    }
+
+    #winds-box {
+      position: absolute;
+      pointer-events: none;
+      top: 200px;
+      left: 50px;
+      width: 200px;
+      height: 200px;
+      background: rgba(30, 30, 50, 0.9);
+      border: 3px solid rgba(150, 180, 220, 0.8);
+      border-radius: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    }
+
+    .wind {
+      position: absolute;
+      width: 55px;
+      height: 55px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: bold;
+      font-size: 16px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+      transition: transform 0.2s;
+    }
+
+    .wind:hover {
+      transform: scale(1.1);
+    }
+
+    .wind.north { top: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #ff6b6b, #ff8787); }
+    .wind.east { left: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #4ecdc4, #44a08d); }
+    .wind.south { bottom: 5px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f9ca24, #f0932b); }
+    .wind.west { right: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
+
+    .arrow {
+      position: absolute;
+      width: 10px;
+      height: 250px;
+      background: rgb(231, 142, 224);
+      left: 50%;
+      top: 20px;
+      transform: translateX(-50%);
+    }
+
+    .arrow::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 20px solid transparent;
+      border-right: 20px solid transparent;
+      border-top: 25px solid rgb(231, 142, 224);
+    }
+  </style>
+</head>
+<body>
+  <div id="menu"></div>
+  <div class="speech-bubble">
+    <div class="speech-text" id="speech-text"></div>
+  </div>
+  <div id="mascotte"></div>
+  
+  <!-- schema -->
+  <div id="winds-box" style="position: absolute; top:200px; left: 850px">
+    <div class="wind east">E</div>
+    <div class="wind south">S</div>
+    <div class="wind west">O</div>
+    <div class="wind north">N</div>
+  </div>
+
+  <div id="winds-box" style="position: absolute; top:700px; left: 400px">
+    <div class="wind east">E</div>
+    <div class="wind south">S</div>
+    <div class="wind west">O</div>
+    <div class="wind north">N</div>
+  </div>
+
+  <div id="winds-box" style="position: absolute; top:700px; left: 1300px">
+    <div class="wind east">N</div>
+    <div class="wind south">E</div>
+    <div class="wind west">S</div>
+    <div class="wind north">O</div>
+  </div>
+
+  <!-- flèches -->
+  <div class="arrow" style="top: 420px; left: 700px; transform: rotate(45deg)"></div>
+  <div class="arrow" style="top: 420px; left: 1200px; transform: rotate(-45deg)"></div>
+
+  <!-- textes -->
+  <h2 style="position: absolute; top: 100px; left: 860px">Position initiale</h2>
+  <h2 style="position: absolute; top: 900px; left: 370px">L'Est gagne la manche</h2>
+  <h2 style="position: absolute; top: 900px; left: 1230px">L'Est ne gagne pas la manche</h2>
+  
+  <script src="/frontend/js/fr/texts.js"></script>
+  <script>
+    // Charger le menu
+    fetch('/components/menu.html')
+      .then(r => r.text())
+      .then(html => document.getElementById('menu').innerHTML = html);
+
+    // Afficher la mascotte et le texte
+    const mascolteEl = document.getElementById('mascotte');
+    mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    document.getElementById('speech-text').innerHTML = texts.riichi.chap7;
+
+    // Toggle bulle de dialogue au clic sur la mascotte
+    const speechBubble = document.querySelector('.speech-bubble');
+    mascolteEl.addEventListener('click', () => {
+      speechBubble.classList.toggle('visible');
+      mascolteEl.innerHTML = speechBubble.classList.contains('visible')
+        ? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
+        : '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/pages/chap8.html b/frontend/pages/chap8.html
new file mode 100644
index 0000000..1403a30
--- /dev/null
+++ b/frontend/pages/chap8.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tuto Riichi</title>
+  <link rel="stylesheet" href="/frontend/css/style.css">
+  <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
+  <link rel="stylesheet" href="/frontend/css/hand.css">
+  <style>
+    #menu {
+      position: relative;
+      z-index: 10;
+    }
+
+    #mascotte {
+      position: absolute;
+      top: 670px;
+      right: 100px;
+      z-index: 999;
+      transform: scaleX(-1);
+      cursor: pointer;
+    }
+
+    #mascotte img {
+      width: 250px;
+      height: auto;
+      display: block;
+    }
+
+    .speech-bubble {
+      position: absolute;
+      top: 150px;
+      right: 170px;
+      z-index: 1;
+      display: none;
+    }
+
+    .speech-bubble.visible {
+      display: flex;
+    }
+
+    h2 {
+      text-align: center;
+      margin-top: 40px;
+      margin-bottom: 20px;
+      color: white;
+    }
+  </style>
+</head>
+<body>
+  <div id="menu"></div>
+  <div class="speech-bubble">
+    <div class="speech-text" id="speech-text"></div>
+  </div>
+  <div id="mascotte"></div>
+  
+  <script src="/frontend/js/fr/texts.js"></script>
+  <script>
+    // Charger le menu
+    fetch('/components/menu.html')
+      .then(r => r.text())
+      .then(html => document.getElementById('menu').innerHTML = html);
+
+    // Afficher la mascotte et le texte
+    const mascolteEl = document.getElementById('mascotte');
+    mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    document.getElementById('speech-text').innerHTML = texts.riichi.chap8;
+
+    // Toggle bulle de dialogue au clic sur la mascotte
+    const speechBubble = document.querySelector('.speech-bubble');
+    mascolteEl.addEventListener('click', () => {
+      speechBubble.classList.toggle('visible');
+      mascolteEl.innerHTML = speechBubble.classList.contains('visible')
+        ? '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">'
+        : '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
