diff --git a/sass/css/header.scss b/sass/css/header.scss
index b75d06e..3dfc6d7 100644
--- a/sass/css/header.scss
+++ b/sass/css/header.scss
@@ -43,13 +43,13 @@ header {
 	}
 }
 
-@media (min-width: 1024px) { 
+@media (min-width: 768px) { 
 	.phone-only {
 		display: none;
 	}
 }
 
-@media (max-width: 1023px) { 
+@media (max-width: 767px) { 
 	.menu-phone {
 		position: absolute;
 		top: 0;
@@ -81,4 +81,9 @@ header {
 	
 }
 
+summary {
+	list-style: none;
+	
+}
+
 
diff --git a/templates/base.html b/templates/base.html
index fef2061..4e5d7d5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -28,7 +28,17 @@
 				<h1 class="sr-only">Librezo</h1>
 			</a>
 			<nav id="header-menu">
-				<ul id="menu" class="hidden-phone menu-phone ">
+				<ul class="hidden-phone">
+					<li><a href="/fonctionnement">Fonctionnement</a></li>
+					<li><a href="/tarifs">Services et tarifs</a></li>
+					<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
+					<li><a href="/charte">Charte</a></li>
+					<li><a href="/contact">Contact</a></li>
+				</ul>
+				
+					<li><details class="phone-only hamburger-menu" >
+					<summary>&#9776;</summary>
+					<ul id="menu" class=" menu-phone ">
 					<li>
 						<picture class="phone-only">
 							<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
@@ -42,14 +52,8 @@
 					<li><a href="/charte">Charte</a></li>
 					<li><a href="/contact">Contact</a></li>
 				</ul>
-					<li><button class="phone-only hamburger-menu"  onclick="toggleMenu()">&#9776;</button></li>
+					</details></li>
 			</nav>
-		<script>
-        var menu = document.getElementById('menu');
-        function toggleMenu() {
-             menu.classList.toggle('hidden-phone');
-        }
-        </script>
 		</header>
 		{% block body %}{% endblock body %}
 		<footer>