fix effet bord menu formsemestre

app/templates/formsemestre/menu.j2

@@ -10,19 +10,15 @@
  */
 
     /* CSS défaut */
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-
+    :root{
         --sco-formsemestre-color-primary: rgb(214, 233, 248);
         --sco-formsemestre-color-accent: rgb(103, 167, 227);
     }
 
-    body {
-        font-family: Arial, sans-serif;
-        color: #333;
-        background-color: #f4f4f4;
+    .menu-wrapper *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
     }
 
     html{
@@ -117,15 +113,20 @@
         display: flex;
         justify-content: center;
         border: none;
-
-        text-transform: uppercase;
-        font-weight: bold;
+        text-transform: none;
+        font-weight: normal;
         font-size: 12px;
 
         padding: 4px 8px;
         border-radius: 4px;
     }
 
+    .sco-formsemestre-menu-menu>.dropdown>summary {
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 14px !important;
+    }
+
     .sco-formsemestre-menu-link {
         color: #333;
         text-decoration: none;
@@ -322,6 +323,7 @@
         list-style: none;
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
+        font-size: small;
     }
 
     .sco-formsemestre-menu .dropdown>summary::marker {
@@ -432,7 +434,7 @@
 {# Macro génération dropdown #}
 {% macro dropdown(category, items) %}
 <details class="dropdown">
-    <summary class="sco-formsemestre-menu-item">{{category}}</summary>
+    <summary class="">{{category}}</summary>
     <div class="dropdown-content">
         {% for item in items %}
             {% if item.submenu is defined %}
@@ -452,18 +454,20 @@
 {% endmacro %}
 
 {# Menu HTML #}
-<nav class="sco-formsemestre-menu">
-    <div class="sco-formsemestre-menu-container">
-        {# Icône menu hamburger #}
-        <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
-            <span class="sco-formsemestre-menu-toggle-icon"></span>
-        </button>
+<div class="menu-wrapper">
+    <nav class="sco-formsemestre-menu">
+        <div class="sco-formsemestre-menu-container">
+            {# Icône menu hamburger #}
+            <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
+                <span class="sco-formsemestre-menu-toggle-icon"></span>
+            </button>
     
-        {# Menu #}
-        <ul class="sco-formsemestre-menu-menu">
-            {% for category, items in menu.items() %}
-                {{dropdown(category, items)}}
-            {% endfor %}
-        </ul>
-    </div>
-</nav>
+            {# Menu #}
+            <ul class="sco-formsemestre-menu-menu">
+                {% for category, items in menu.items() %}
+                    {{dropdown(category, items)}}
+                {% endfor %}
+            </ul>
+        </div>
+    </nav>
+</div>