refactor: regrouper le menu desktop dans Ressources

src/assets/css/styles.css

@@ -298,6 +298,72 @@ html.light-theme .theme-icon-light {
     transition: 0.3s;
 }
 
+/* Nav dropdown ("Ressources") */
+.has-dropdown {
+    position: relative;
+}
+
+.nav-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: var(--blanc-creme);
+    cursor: pointer;
+}
+
+.nav-dropdown-trigger:hover {
+    color: var(--or-oki);
+}
+
+.dropdown-caret {
+    font-size: 0.7em;
+    transition: transform 0.2s ease;
+}
+
+.nav-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 1rem;
+    min-width: 200px;
+    list-style: none;
+    background: var(--noir-oki);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 0.4rem 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px);
+    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+}
+
+.has-dropdown:hover .nav-dropdown,
+.has-dropdown.open .nav-dropdown,
+.nav-dropdown-trigger:focus-visible + .nav-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.has-dropdown:hover .dropdown-caret,
+.has-dropdown.open .dropdown-caret {
+    transform: rotate(180deg);
+}
+
+.nav-dropdown a {
+    display: block;
+    padding: 0.55rem 1.1rem;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    color: var(--blanc-creme);
+}
+
 /* Hero Section */
 .hero {
     padding: 9rem 2rem 5rem;
@@ -1360,6 +1426,31 @@ input[type="number"]:focus {
         display: flex;
     }
 
+    .nav-dropdown-trigger {
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    .dropdown-caret {
+        display: none;
+    }
+
+    .nav-dropdown {
+        position: static;
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        margin: 0.25rem 0 0.5rem 1rem;
+        border: none;
+        background: none;
+        padding: 0;
+    }
+
+    .nav-dropdown a {
+        padding: 0.4rem 0;
+        font-size: 0.9rem;
+    }
+
     .hero h1 {
         font-size: 2rem;
     }