diff --git a/sass/css/header.scss b/sass/css/header.scss
index 3dfc6d7..652675e 100644
--- a/sass/css/header.scss
+++ b/sass/css/header.scss
@@ -37,10 +37,20 @@ header {
 	text-decoration: none;
 }
 
+@media (prefers-color-scheme: light) {
+	.header-menu-phone {
+		background-color: white;
+	}
+}
+
 @media (prefers-color-scheme: dark) {
 	#header-menu a {
 		color: white;
 	}
+	
+	.header-menu-phone {
+		background-color: black;
+	}
 }
 
 @media (min-width: 768px) { 
@@ -50,7 +60,7 @@ header {
 }
 
 @media (max-width: 767px) { 
-	.menu-phone {
+	.header-menu-phone {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -58,10 +68,9 @@ header {
 		flex-direction: column;
 		gap: 1em;
 		padding: 2em;
-		background-color: white;
 	}
 	
-	.hidden-phone {
+	.phone-hidden {
 		display: none;
 	}
 }
@@ -76,14 +85,10 @@ header {
 	opacity: 65%;
 }
 
-.hamburger-menu:hover {
+.hamburger-menu:hover, .hamburger-menu:focus {
 	opacity: 100%;
-	
 }
 
-summary {
+.hamburger-menu > summary {
 	list-style: none;
-	
 }
-
-
diff --git a/templates/base.html b/templates/base.html
index 4e5d7d5..7ffebeb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -28,7 +28,7 @@
 				<h1 class="sr-only">Librezo</h1>
 			</a>
 			<nav id="header-menu">
-				<ul class="hidden-phone">
+				<ul class="phone-hidden">
 					<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>
@@ -36,23 +36,23 @@
 					<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)"/>
-							<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light)"/>
-							<img decoding="async"  src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
-						</picture>
-					</li>
-					<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>
-					</details></li>
+				<details class="phone-only hamburger-menu">
+					<summary aria-label="Menu" title="Menu">&#9776;</summary>
+					<ul class="header-menu-phone">
+						<li aria-hidden>
+							<picture>
+								<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
+								<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light)"/>
+								<img decoding="async" src="/img/librezo-little-black.png" alt="Librezo"/>
+							</picture>
+						</li>
+						<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>
+				</details>
 			</nav>
 		</header>
 		{% block body %}{% endblock body %}