reparation dropdown

assets/css/site-header.css

@@ -88,7 +88,12 @@
 /*       nav      */
 /*----------------*/
 
-#site-nav a {
+
+/*----------------*/
+/*       nav      */
+/*----------------*/
+
+/* #site-nav a {
     text-decoration: none;
     color: var(--color-txt);
 }
@@ -115,12 +120,8 @@
 
 #site-nav .nav-level-1_li{
     font-weight: 500;
-    /* padding-right: 30px; */
 }
 
-/* .nav-level-1_li.li-dropdown:hover{
-    border-bottom: solid 1px black;
-} */
 
 #site-nav li:hover {
     cursor: pointer;
@@ -158,4 +159,4 @@ ul li:hover > ul,
     font-size: 1.2em;
     line-height: 0;
 
-}
+} */

assets/css/site-nav.css

@@ -0,0 +1,92 @@
+
+#site-nav a {
+    text-decoration: none;
+    color: currentColor;
+}
+
+#site-nav li{
+    font-weight: 500;
+    color: var(--color-txt);
+}
+
+.arrow{
+
+    --size: 12px;
+    height: var(--size);
+    width: var(--size);
+    position: relative; 
+    top: 2px;
+    display: inline-block;
+ 
+    svg{
+        height: var(--size);
+        width: var(--size);
+        transform: rotate(0deg);
+        transform-origin: center;
+        transition: transform .2s ease-in-out;
+        fill: var(--color-txt);
+    }
+    
+    
+}
+
+#site-nav .nav-level-1_ul{
+    display: flex;
+    gap: calc(var(--padding-inner)*2);
+
+}
+#site-nav .nav-level-1_li {
+    display: block;
+    /* float: left; */
+    padding: var(--padding-inner);
+    position: relative;
+    text-decoration: none;
+
+    &:hover{
+        color: var(--color);
+        .arrow svg{
+            transform: rotate(90deg);
+            fill: var(--color);
+        }
+
+    }
+}
+
+
+
+#site-nav li:hover {
+    cursor: pointer;
+}
+
+.nav-level-2_ul {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    display: none;
+    border-top: 1px solid var(--color);
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    margin-top: var(--padding-inner); 
+    min-width: 24ch;
+
+}
+
+.nav-level-1_ul li:hover > .nav-level-2_ul,
+.nav-level-2_ul:hover {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+}
+.nav-level-2_li{
+    width: 100%;
+    padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
+    
+}
+.nav-level-2_li:hover{
+    background-color: var(--color-light);
+}
+
+
+
+
+

assets/icons/arrow-right.svg

@@ -1 +0,0 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"/></svg>

assets/icons/search.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
-</svg>

assets/style.css

@@ -1,8 +1,10 @@
 @import "css/var.css"; 
 @import "css/base.css";
 @import "css/site-header.css";
+@import "css/site-nav.css";
 @import "css/site-footer.css";
 
+
 @import "css/buttons.css";
 
 @import "css/home.css";

components/icons/arrow-dropdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>

components/site-nav.html

@@ -4,21 +4,21 @@
                 <a class="nav-level-1_link" href="#">À propos</a>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Base de connaissance</a>
+                <a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                 <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Explorer les espèces</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Livrets</a>
+                <a class="nav-level-1_link" href="#">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Créer un livret</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Consulter les livrets</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Ateliers</a>
+                <a class="nav-level-1_link" href="#">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Organiser un atelier</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>