diff --git a/docker-compose.yml b/docker-compose.yml
index 01e163b..8e5619a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,7 +13,7 @@ services:
   nginx:
     image: nginx:latest
     ports:
-      - "127.0.0.1:8019:80"
+      - "127.0.0.1:3002:80"
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf:ro
       - ./frontend:/usr/share/nginx/html/frontend
diff --git a/frontend/pages/chap1.html b/frontend/pages/chap1.html
index 44caa7a..d67d431 100644
--- a/frontend/pages/chap1.html
+++ b/frontend/pages/chap1.html
@@ -3,8 +3,8 @@
 <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/style.css">
+  <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
   <style>
     #menu {
       position: relative;
@@ -158,16 +158,16 @@
   </div>
   <div id="mascotte"></div>
   
-  <script src="../../frontend/js/fr/texts.js"></script>
+  <script src="/frontend/js/fr/texts.js"></script>
   <script>
     // Charger le menu
-    fetch('../../components/menu.html')
+    fetch('/components/menu.html')
       .then(r => r.text())
       .then(html => document.getElementById('menu').innerHTML = html);
 
     // Afficher la mascotte
     const mascolteEl = document.getElementById('mascotte');
-    mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+    mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
 
     // Afficher le texte de bienvenue
     document.getElementById('speech-text').innerHTML = texts.riichi.chap1;
@@ -177,9 +177,9 @@
     mascolteEl.addEventListener('click', () => {
       speechBubble.classList.toggle('visible');
       if (speechBubble.classList.contains('visible')) {
-        mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">';
+        mascolteEl.innerHTML = '<img class="explaining" src="/img/tilineau/explaining.png" alt="Tilineau">';
       } else {
-        mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+        mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
       }
     });
 
diff --git a/frontend/pages/chap2.html b/frontend/pages/chap2.html
index 72b9905..e157756 100644
--- a/frontend/pages/chap2.html
+++ b/frontend/pages/chap2.html
@@ -3,9 +3,9 @@
 <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">
+  <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;
@@ -131,17 +131,17 @@
   </div>
   <div id="mascotte"></div>
   
-  <script src="../../frontend/js/fr/texts.js"></script>
-  <script src="../../frontend/js/hand.js"></script>
+  <script src="/frontend/js/fr/texts.js"></script>
+  <script src="/frontend/js/hand.js"></script>
   <script>
     // Charger le menu
-    fetch('../../components/menu.html')
+    fetch('/components/menu.html')
       .then(r => r.text())
       .then(html => document.getElementById('menu').innerHTML = html);
 
     // Afficher la mascotte
     const mascolteEl = document.getElementById('mascotte');
-    mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+    mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
 
     // Afficher le texte de bienvenue
     document.getElementById('speech-text').innerHTML = texts.riichi.chap2;
@@ -151,9 +151,9 @@
     mascolteEl.addEventListener('click', () => {
       speechBubble.classList.toggle('visible');
       if (speechBubble.classList.contains('visible')) {
-        mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">';
+        mascolteEl.innerHTML = '<img class="explaining" src="/img/tilineau/speaking.png" alt="Tilineau">';
       } else {
-        mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+        mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
       }
     });
 
diff --git a/frontend/pages/chap3.html b/frontend/pages/chap3.html
index 2be7082..8772300 100644
--- a/frontend/pages/chap3.html
+++ b/frontend/pages/chap3.html
@@ -3,9 +3,9 @@
 <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">
+  <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;
@@ -89,17 +89,17 @@
   </div>
   <div id="mascotte"></div>
   
-  <script src="../../frontend/js/fr/texts.js"></script>
-  <script src="../../frontend/js/hand.js"></script>
+  <script src="/frontend/js/fr/texts.js"></script>
+  <script src="/frontend/js/hand.js"></script>
   <script>
     // Charger le menu
-    fetch('../../components/menu.html')
+    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/speaking.png" alt="Tilineau">';
+    mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
     document.getElementById('speech-text').innerHTML = texts.riichi.chap3;
 
     // Toggle bulle de dialogue au clic sur la mascotte
@@ -107,8 +107,8 @@
     mascolteEl.addEventListener('click', () => {
       speechBubble.classList.toggle('visible');
       mascolteEl.innerHTML = speechBubble.classList.contains('visible')
-        ? '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">'
-        : '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+        ? '<img class="explaining" src="/img/tilineau/explaining.png" alt="Tilineau">'
+        : '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
     });
 
     // Fonction utilitaire pour afficher les tuiles
diff --git a/index.html b/index.html
index d73e364..9eef9ef 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
 <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/style.css">
+  <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
   <style>
     #menu {
       position: relative;
@@ -70,16 +70,16 @@
   </div>
   <div id="mascotte"></div>
   
-  <script src="frontend/js/fr/texts.js"></script>
+  <script src="/frontend/js/fr/texts.js"></script>
   <script>
     // Charger le menu
-    fetch('components/menu.html')
+    fetch('/components/menu.html')
       .then(r => r.text())
       .then(html => document.getElementById('menu').innerHTML = html);
 
     // Afficher la mascotte
     const mascolteEl = document.getElementById('mascotte');
-    mascolteEl.innerHTML = '<img src="img/tilineau/speaking.png" alt="Tilineau">';
+    mascolteEl.innerHTML = '<img src="/img/tilineau/speaking.png" alt="Tilineau">';
 
     // Afficher le texte de bienvenue
     document.getElementById('speech-text').innerHTML = texts.homePage.welcome;
