fix effet bord menu formsemestre

app/templates/formsemestre/menu.j2

@@ -10,19 +10,15 @@
  */
 
     /* CSS défaut */
-    * {
+    :root{
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-
         --sco-formsemestre-color-primary: rgb(214, 233, 248);
         --sco-formsemestre-color-accent: rgb(103, 167, 227);
     }
 
-    body {
+    .menu-wrapper *{
-        font-family: Arial, sans-serif;
+        margin: 0;
-        color: #333;
+        padding: 0;
-        background-color: #f4f4f4;
+        box-sizing: border-box;
     }
 
     html{
@@ -128,7 +124,7 @@
     .sco-formsemestre-menu-menu>.dropdown>summary {
         text-transform: uppercase;
         font-weight: bold;
-        font-size: large !important;
+        font-size: 14px !important;
     }
 
     .sco-formsemestre-menu-link {
@@ -458,18 +454,20 @@
 {% endmacro %}
 
 {# Menu HTML #}
-<nav class="sco-formsemestre-menu">
+<div class="menu-wrapper">
-    <div class="sco-formsemestre-menu-container">
+    <nav class="sco-formsemestre-menu">
-        {# Icône menu hamburger #}
+        <div class="sco-formsemestre-menu-container">
-        <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
+            {# Icône menu hamburger #}
-            <span class="sco-formsemestre-menu-toggle-icon"></span>
+            <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
-        </button>
+                <span class="sco-formsemestre-menu-toggle-icon"></span>
-
+            </button>
-        {# Menu #}
+    
-        <ul class="sco-formsemestre-menu-menu">
+            {# Menu #}
-            {% for category, items in menu.items() %}
+            <ul class="sco-formsemestre-menu-menu">
-                {{dropdown(category, items)}}
+                {% for category, items in menu.items() %}
-            {% endfor %}
+                    {{dropdown(category, items)}}
-        </ul>
+                {% endfor %}
-    </div>
+            </ul>
-</nav>
+        </div>
+    </nav>
+</div>