From 3fb31866c721ef9cd07eea5151e00c1b154da9ad Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 13 Nov 2025 12:02:54 +0100
Subject: =?UTF-8?q?bouton=20et=20menu=20fix=C3=A9s=20sur=20petit=20=C3=A9c?=
 =?UTF-8?q?ran?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/nav.css | 98 +++++++++++++++++++++---------------------------------
 public/js/main.js  |  4 +--
 2 files changed, 39 insertions(+), 63 deletions(-)

diff --git a/public/css/nav.css b/public/css/nav.css
index 165af71..ff31813 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -18,6 +18,7 @@
 		background-color: #ffffffe1; /* b3 = 179 = 0.7 (x 256) */
 		text-align: center;
 		position: fixed;
+		top: -2px;
 	}
 	.nav_main > ul{
 		display: flex;
@@ -47,6 +48,14 @@
 		margin-top: 5px;
 		margin-left: -5px;
 	}
+
+	@media screen and (max-width: 1000px){ /* entre 601 et 1000 */
+		.nav_main p
+		{
+			/*font-size: smaller;*/
+			font-size: 90%;
+		}
+	}
 	
 	@media (pointer: fine){
 		.nav_main > ul > li:hover
@@ -58,30 +67,48 @@
 		}
 	}
 }
+@media screen and (max-width: 450px){
+	.sub-menu p{
+		font-size: 90%;
+	}
+}
 
 @media screen and (min-width: 1000px){
-		nav > ul > li > ul{
-			margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
-			margin-top: 7px;
-		}
-		.nav_main li{
-			padding: 7px;
-		}
+	nav > ul > li > ul{
+		margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
+		margin-top: 7px;
+	}
+	.nav_main li{
+		padding: 7px;
+	}
 }
 
 /* version petits écrans */
 @media screen and (max-width: 600px){
 	#nav_zone{
-		padding-top: 5px;
+		/*position: fixed;*/
+		display: flex;
+		flex-direction: column;
+		/*margin: 10px;*/
+	}
+	.nav_button, .nav_main
+	{
+		position: fixed;
+		left: 50%; /* technique pour centrer un élément positionné */
+		transform: translateX(-50%);
 	}
 	.nav_button{
 		display: block;
+		margin-top: 5px;
+		position: fixed;
 	}
 	.nav_main{
 		display: none;
-		margin: 10px;
 		background-color: white;
 		text-align: left;
+		margin: 5px 0;
+		top: 31px; /* = taille bouton et de sa marge */
+		
 	}
 	.nav_main.show{
 		display: block;
@@ -119,10 +146,9 @@
 {
 	/*position: fixed;*/
 	border: 2px solid #13aff0;
-	top: -2px;
+	/*top: -2px;*/
 	/*font-size: 90%;*/
 	text-wrap: nowrap;
-	/*max-width: 90%;*/
 }
 .sub-menu{
 	box-shadow: 1px 1px 3px black;
@@ -159,7 +185,6 @@ li:not(.current){
 }
 
 
-
 /* sous-menus avec PC + souris
 mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :hover, cassant le JS utilisé ici */
 @media (pointer: fine) /* fine => précision de la souris */
@@ -215,52 +240,3 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
 	background-color: white;
 	font-size: 95%;
 }
-
-@media screen and (max-width: 1000px){
-	#nav_zone
-	{
-		/*height: 29px;*/
-	}
-	
-	.nav_main p
-	{
-		/*font-size: smaller;*/
-		font-size: 90%;
-	}
-	nav > ul > li > ul
-	{
-		/*margin-top: 5px;*/
-	}
-}
-@media screen and (max-width: 450px){
-	.nav_button
-	{
-		/*display: block;*/
-	}
-	#nav_zone
-	{
-		/*position: fixed;
-		justify-content: left;*/
-	}
-	.nav_main
-	{
-		/*top: 0px;*/
-	}
-	.nav_main > ul
-	{
-		/*flex-direction: column;*/
-	}
-	.nav_main li
-	{
-		/**/
-	}
-	.sub-menu p
-	{
-		font-size: smaller;
-	}
-	.drop-down > .sub-menu
-	{
-		/*flex-direction: row;*/
-		/*position: static;*/
-	}
-}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index fa02ddb..28a62ae 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -83,8 +83,8 @@ function navHeight(){
 	const nav = document.querySelector('nav'); // détection
 	const nav_zone = document.getElementById('nav_zone');
 	const resize_observer = new ResizeObserver(entries => { // param de type tableau
-	let nav_button_height = window.innerWidth <= 600 ? 26 : 0; // 26 = taille du bouton
-	nav_button_height += nav.classList.contains('show') ? 15 : 0;
+		let nav_button_height = window.innerWidth <= 600 ? 26 : 0; // 26 = taille du bouton
+		nav_button_height += nav.classList.contains('show') ? 15 : 0;
 		for(const entry of entries){
 			nav_zone.style.height = (entry.contentRect.height + nav_button_height) + 'px';
 		}
-- 
cgit v1.2.3