diff --git a/croco.html b/croco.html
index b9b6cc5..268ed5c 100644
--- a/croco.html
+++ b/croco.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<title>Terrarium Crocos</title>
+  <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>Crocoloop - Decosse Adrien</title>
+
 	<style>
 		:root{
 			--bg-day:#a6e3b0;
@@ -13,10 +17,10 @@
 			--plant:#1f7a3a;
 			--accent:#ffe66d;
 		}
-		html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial}
-		body{
+		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;
-			height:100vh;overflow:hidden;color:#042a16
+			min-height:100vh;overflow:hidden;color:#042a16;
 		}
 
 		.frame{
@@ -27,22 +31,37 @@
 
 		canvas{display:block;width:100%;height:100%;background:transparent}
 
-		/* UI: left/right links preserved */
-		.nav {
+		/* UI: left/right links preserved (scoped to frame to avoid overriding site header) */
+		.frame .nav {
 			position:absolute;left:12px;top:12px;right:12px;display:flex;justify-content:space-between;pointer-events:auto;
 		}
-		.nav a{color:var(--soil);background:rgba(255,255,255,0.12);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
+		.frame .nav a{color:var(--soil);background:rgba(255,255,255,0.12);padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600}
 
-		/* simple legend */
-		.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;font-size:13px}
+		/* simple legend (scoped to frame) */
+		.frame .legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;font-size:13px}
 
 		/* sleeping Zs */
 		.zzz{font-weight:900;color:#dfefff;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4))}
 	</style>
+
 </head>
 <body>
 
-	<div class="frame" id="frame">
+	<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">Riichi</a>
+          <a href="croco.html">Crocoloop</a>
+        </nav>
+      </div>
+	</header>
+
+	<div class="croco-root">
+		<div class="frame" id="frame">
 			<div class="nav">
 			<a id="leftLink" href="https://perso.eleves.ens-rennes.fr/people/jules.timmerman/croco.html">&lt;= Croco</a>
 				<div style="display:flex;gap:10px;align-items:center;">
@@ -66,6 +85,7 @@
 		<div id="lottieLayer" style="position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:visible;"></div>
 
 				<div class="legend" id="legend">Terrarium — Heures: <span id="timeText"></span></div>
+		</div>
 	</div>
 
 		<script>
