1 files changed, 49 insertions, 36 deletions

diff --git a/public/css/nav.css b/public/css/nav.css
index a9bddf2..4c276be 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -1,7 +1,7 @@
 /*-- menu principal --*/
 
 /* version horizontale */
-@media screen and (min-width: 601px){
+@media screen and (min-width: 769px){
         .nav_button{
                 display: none;
         }
@@ -32,21 +32,28 @@
                 border-top: 3px solid #13aff0;
         }
         /* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
-        .drop-right .sub-menu
+        .drop-right .sub-menu, .drop-left .sub-menu
         {
                 position: absolute; /* positionnement par rapport au précédent "position" en CSS */
-                left: 100%;
                 top: -3px; /* la bordure bleue fait 3px */
         }
+        .drop-right .sub-menu{
+                left: 100%;
+        }
+        .drop-left .sub-menu{
+                right: 100%;
+        }
         /* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
-        nav > ul > li > ul
-        {
+        nav > ul > li > ul{
                 position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
                 margin-top: 5px;
                 margin-left: -5px;
         }
+        nav > ul > li > ul:has(.drop-left){
+                right: 0;
+        }
 
-        @media screen and (max-width: 1000px){ /* entre 601 et 1000 */
+        @media screen and (max-width: 1024px){ /* entre 769 et 1024 */
                 .nav_main p
                 {
                         font-size: 90%;
@@ -54,33 +61,31 @@
         }
         
         @media (pointer: fine){
-                .nav_main > ul > li:hover
-                {
+                .nav_main > ul > li:hover{
                         background-color: white;
                 }
                 .drop-right > a > p:after{
                         content: " ▶";
                 }
+                .drop-left > a > p:before{
+                        content: "◀ ";
+                }
         }
 }
-@media screen and (max-width: 450px){
+@media screen and (max-width: 480px){
         .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;
-        }
+@media screen and (min-width: 1025px){
         .nav_main li{
                 padding: 7px;
         }
 }
 
 /* version petits écrans */
-@media screen and (max-width: 600px){
+@media screen and (max-width: 768px){
         #nav_zone{
                 display: flex;
                 flex-direction: column;
@@ -119,31 +124,40 @@
                 padding-left: 25px;
                 padding-right: 5px;
         }
-
         /*nav > ul > li > ul{
                 margin-left: 0;
         }*/
+
         @media (pointer: fine){
                 .nav_main > ul > li:hover{
                         background-color: yellow;
                 }
-                .drop-right > a > p:after{
+                .drop-right > a > p:after, .drop-left > a > p:after{
                         content: ' ▼';
                 }
         }
+
+        @media (pointer: coarse){
+                .drop-down.open, .drop-right.open, .drop-left.open{
+                        border-radius: 5px;
+                }
+        }
 }
 
 
-.nav_main
-{
+.nav_main{
         border: 2px solid #13aff0;
         text-wrap: nowrap;
 }
 .sub-menu{
         box-shadow: 1px 1px 3px black;
 }
+.sub-menu:has(.drop-left), .sub-menu:has(.drop-left) .sub-menu{
+        box-shadow: -1px 1px 3px black;
+}
 ul{
-        margin: 0;
+        margin-top: 0;
+        margin-bottom: 0;
 }
 
 .nav_main p
@@ -166,15 +180,15 @@ li:not(.current){
         background-color: initial;
         font-weight: initial;
 }
+.drop-down.open, .drop-down:hover{
+        position: relative; /* permet d'aligner son enfant en position absolue à droite avec un right: 0; */
+}
 
 
 /* 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 */
-{
-        .drop-down:hover > .sub-menu,
-        .drop-right:hover > .sub-menu
-        {
+@media (pointer: fine){ /* fine => précision de la souris */
+        .drop-down:hover > .sub-menu, .drop-right:hover > .sub-menu, .drop-left:hover > .sub-menu{
                 display: block;
         }
         .sub-menu li:hover /* écrase le fond blanc placé en même temps */
@@ -187,7 +201,7 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
                 content: ' ▼';
                 font-size: x-small;
         }
-        .drop-right > a > p:after
+        .drop-right > a > p:after, .drop-left > a > p:before
         {
                 font-size: x-small;
         }
@@ -203,22 +217,21 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
         font-size: x-small;
         vertical-align: text-bottom;
 }
+.sub-menu{
+        display: none;
+        background-color: white;
+        font-size: 95%;
+}
 
 /* écran tactile */
-@media (pointer: coarse) /* coarse = grossier = précision écran tactile */
-{
+@media (pointer: coarse){ /* coarse = grossier = précision écran tactile */
         .sub-menu-toggle{
                 display: inline-block; /* visible sur écran tactile */
         }
-        .drop-down.open > .sub-menu, .drop-right.open > .sub-menu{
+        .drop-down.open > .sub-menu, .drop-right.open > .sub-menu, .drop-left.open > .sub-menu{
                 display: block;
         }
-        .drop-down.open, .drop-right.open{
+        .drop-down.open, .drop-right.open, .drop-left.open{
                 background-color: yellow;
         }
-}
-.sub-menu{
-        display: none;
-        background-color: white;
-        font-size: 95%;
-}
+}
\ No newline at end of file