diff --git a/cours/index.html b/cours/index.html
index 8b89c78..b019ff6 100644
--- a/cours/index.html
+++ b/cours/index.html
@@ -15,7 +15,7 @@
 					<a href="../index.html">Accueil</a>
 					<a href="../syllabus.html">Syllabus</a>
 					<a href="index.html" aria-current="page">Cours</a>
-					<a href="../riichi/index.html">Riichi</a>
+					<a href="../riichi.html">Riichi</a>
 					<a href="../croco.html">Crocoloop</a>
 				</nav>
 		</div>
diff --git a/croco.html b/croco.html
index 268ed5c..68bf9d2 100644
--- a/croco.html
+++ b/croco.html
@@ -20,13 +20,16 @@
 		html{height:100%;margin:0;font-family:Inter,system-ui,Arial}
 		.croco-root{
 			display:flex;align-items:center;justify-content:center;background:var(--bg-day);transition:background 1s linear;
-			min-height:100vh;overflow:hidden;color:#042a16;
+			min-height:100vh;overflow:hidden;color:#042a16;padding:24px 0;
 		}
 
 		.frame{
-			width:min(1000px,95vw);height:min(700px,88vh);position:relative;border-radius:16px;overflow:hidden;
-			box-shadow:0 20px 60px rgba(2,10,8,0.5);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
-			border:4px solid rgba(0,0,0,0.08);
+			width:100%;
+			max-width:1100px;
+			height:min(700px,88vh);
+			position:relative;border-radius:12px;overflow:hidden;
+			box-shadow:0 20px 60px rgba(2,10,8,0.4);background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
+			border:0;
 		}
 
 		canvas{display:block;width:100%;height:100%;background:transparent}
@@ -54,7 +57,7 @@
           <a href="index.html">Accueil</a>
           <a href="syllabus.html">Syllabus</a>
           <a href="cours/index.html">Cours</a>
-          <a href="riichi">Riichi</a>
+          <a href="riichi.html">Riichi</a>
           <a href="croco.html">Crocoloop</a>
         </nav>
       </div>
diff --git a/index.html b/index.html
index fde7d34..89b5162 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
           <a href="index.html">Accueil</a>
           <a href="syllabus.html">Syllabus</a>
           <a href="cours/index.html">Cours</a>
-          <a href="riichi">Riichi</a>
+          <a href="riichi.html">Riichi</a>
           <a href="croco.html">Crocoloop</a>
         </nav>
       </div>
diff --git a/riichi.html b/riichi.html
new file mode 100644
index 0000000..0fedfb2
--- /dev/null
+++ b/riichi.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Riichi — Decosse Adrien</title>
+    <style>
+      main.container{
+        padding:0;
+        max-width:none;
+        width:100vw;
+      }
+
+      .iframe-wrapper{
+        width:100vw;
+        height:calc(100vh - 80px);
+        margin:0;
+      }
+
+      .embed-frame{
+        width:100vw;
+        height:100%;
+        border:0;
+        display:block;
+      }
+      html,body{height:100%;}
+      body{margin:0;}
+
+      .site-header{position:relative;z-index:20}
+      .iframe-wrapper{position:relative;z-index:10}
+    </style>
+  </head>
+
+  <body>
+    <header class="site-header">
+      <div class="container">
+        <a class="brand" href="index.html">Decosse Adrien</a>
+        <nav class="nav" aria-label="Main navigation">
+          <a href="index.html">Accueil</a>
+          <a href="syllabus.html">Syllabus</a>
+          <a href="cours/index.html">Cours</a>
+          <a href="riichi.html">Riichi</a>
+          <a href="croco.html">Crocoloop</a>
+        </nav>
+      </div>
+    </header>
+
+    <main class="container">
+      <div class="iframe-wrapper">
+        <iframe id="riichiFrame" class="embed-frame" src="riichi/index.html" title="Riichi submodule content" frameborder="0" loading="lazy"></iframe>
+      </div>
+    </main>
+
+    <script>
+      (function(){
+        const iframe = document.getElementById('riichiFrame');
+        const header = document.querySelector('.site-header');
+        const wrapper = document.querySelector('.iframe-wrapper');
+        function resize(){
+          const headerH = header ? header.getBoundingClientRect().height : 0;
+          const avail = window.innerHeight - headerH;
+          const h = Math.max(300, avail - 20);
+          wrapper.style.height = h + 'px';
+          iframe.style.height = h + 'px';
+        }
+        window.addEventListener('resize', resize);
+        window.addEventListener('load', resize);
+        setTimeout(resize, 250);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/syllabus.html b/syllabus.html
index 46eaee5..5df28ad 100644
--- a/syllabus.html
+++ b/syllabus.html
@@ -15,7 +15,7 @@
 				<a href="index.html">Accueil</a>
 				<a href="syllabus.html">Syllabus</a>
 				<a href="cours/index.html">Cours</a>
-				<a href="riichi/index.html">Riichi</a>
+				<a href="riichi.html">Riichi</a>
 				<a href="croco.html">Crocoloop</a>
 			</nav>
 		</div>
