TEC : Menu Autre

navigation.css

@@ -29,7 +29,6 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    overflow: hidden;
 }
 
 .header li {
@@ -85,6 +84,121 @@
     margin-left: auto;
 }
 
+/* menu caché par défaut*/
+nav .menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: none;
+  gap: 1rem;
+}
+
+nav .menu li {
+  position: relative;
+  white-space: nowrap;
+}
+
+/* Sous-menu caché par défaut */
+
+/* Cacher le sous-menu par défaut */
+.dropdown {
+  position: relative;
+}
+
+.dropdown .submenu {
+  position: absolute;
+  top: 100%; /* place le sous-menu juste sous le bouton "Autre" */
+  left: 0;   /* aligne à gauche du bouton "Autre" */
+  transform: translateX(-100%); /* décale le menu vers la gauche du bouton */
+  background-color: white;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+  z-index: 10;
+  display: none;
+  padding: 0;
+  list-style: none;
+}
+
+/* Afficher le sous-menu si l’input est coché */
+.toggle-submenu:checked + label + .submenu {
+  display: block;
+}
+
+/* Style du label 'Autre' */
+.dropdown label {
+  cursor: pointer;
+  padding: 0.5rem;
+  display: inline-block;
+  color: #333;
+  background-color: transparent;
+}
+
+/* Style des items du sous-menu */
+.submenu li a {
+  display: block;
+  padding: 0.5rem;
+  text-decoration: none;
+  color: #333;
+}
+
+.submenu li a:hover {
+  background-color: #f2f2f2;
+}
+
+/* Grand écran : menu complet */
+@media (min-width: 1500px) {
+  #menuXL {
+    display: flex;
+  }
+}
+
+/* Moyen écran */
+@media (max-width: 1499px) and (min-width: 1300px) {
+  #menuL {
+    display: flex;
+  }
+}
+
+/* Petit écran */
+@media (max-width: 1299px) and (min-width: 1099px) {
+  #menuM {
+    display: flex;
+  }
+}
+
+/* Mobile (burger menu géré ailleurs) */
+@media (max-width: 1100px) and (min-width: 700px){
+  #menuS {
+    display: flex;
+  }
+}
+
+/* Cacher la case à cocher */
+.toggle-submenu {
+  display: none;
+}
+
+
+/* Afficher le sous-menu si activé */
+.toggle-submenu:checked + label + .submenu {
+  display: block;
+}
+
+/* Styles généraux */
+.dropdown {
+  position: relative;
+}
+
+.dropdown label {
+  cursor: pointer;
+  display: block;
+  padding: 0.5rem;
+}
+
+/* Pour que le sous-menu ne s'affiche que sous 'Autre' */
+.dropdown .submenu li {
+  padding: 0.5rem;
+}
+
 /* menu */
 .header .menu {
     clear: both;