Fix: Better mobile menu + rules padding

frontend/src/lib/components/Accordion.svelte

@@ -6,13 +6,13 @@
 
 
 <details class="group">
-    <summary class="flex items-center justify-center marker:content-none hover:cursor-pointer">
+    <summary class="flex items-center justify-center text-center marker:content-none hover:cursor-pointer">
       <div class="flex flex-row items-center justify-between">
         <span>{title}</span>
-        <ChevronRight class="size-4 transition group-open:rotate-90"/>
+        <ChevronRight class="size-4"/>
       </div> 
     </summary>
-    <article class="mt-2 mb-2">
+    <article class="border-l-1 border-orange-500 pl-4 mt-2 mb-2">
       {@render children()}
     </article>
 </details>

frontend/src/lib/components/Navbar.svelte

@@ -144,8 +144,11 @@
     <label class="relative z-40 cursor-pointer block md:hidden" for="mobile-menu">
       <input class="peer hidden" bind:checked={openMobileMenu} type="checkbox" id="mobile-menu" />
       <MenuIcon />
+      <div class="fixed inset-0 z-40 hidden h-full w-full peer-checked:block">
+        &nbsp;
+      </div>
       <div onclick={(e) => {if(e.target.nodeName == "A") {openMobileMenu = false}}} class="fixed top-16 left-0 z-40 h-fit w-screen hidden peer-checked:block bg-white p-4 shadow-md">
-        <ul class="w-full flex flex-col items-center">
+        <ul class="w-full flex flex-col items-center gap-4">
           <li>
             <Accordion title="Commandants">
               <ul class="w-full">
@@ -230,7 +233,7 @@
           </li>
           <li><a href="/regles">Règles</a></li>
           <li><a href="/faq">F.A.Q</a></li>
-          <li><div class="mt-4 mb-4 max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
+          <li><div class="max-w-screen w-64 block h-[1px] bg-stone-500 content-[' ']"></div></li>
           {#if isLoggedIn}
             <li><a href="/profil">{username}</a></li>
           {:else}

frontend/src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="w-screen min-h-screen flex flex-col gap-0">
-<span class="fixed z-40 bg-orange-500 text-white p-2 -translate-x-1/3 -rotate-45 origin-top-right after:content-[' '] after:w-full after:h-full after:bg-orange-500 after:fixed after:top-0 after:left-full after:ml-[-1px] before:content-[' '] before:w-full before:h-full before:bg-orange-500 before:fixed before:top-0 before:right-full before:mr-[-1px]">Version test</span>
+<span class="text-xs fixed z-40 bg-orange-500 text-white p-2 -translate-x-1/3 -rotate-45 origin-top-right after:content-[' '] after:w-full after:h-full after:bg-orange-500 after:fixed after:top-0 after:left-full after:ml-[-1px] before:content-[' '] before:w-full before:h-full before:bg-orange-500 before:fixed before:top-0 before:right-full before:mr-[-1px]">Version test</span>
 <Navbar />
 <div class="mt-16 font-inter-tight grow">
   {@render children()}

frontend/src/routes/regles/+page.svelte

@@ -1,10 +1,10 @@
-<div class="flex flex-col items-center">
+<div class="flex flex-col items-center p-4">
-  <div class="flex flex-col items-center w-full">
+  <div class="flex flex-col items-center w-full text-center">
     <h1 class="text-3xl">BrawlSet Canon Règles Officielles</h1>
     <h2>BrawlSet Committee</h2>
     <h2>17 Octobre 2022</h2>
   </div>
-  <div class="flex flex-col max-w-5xl gap-4 mt-8 mb-32">
+  <div class="flex flex-col max-w-5xl gap-4 mt-8">
     <h2 class="font-bold">903.BS. Le mode de jeu BrawlSet</h2>
     <ul class="flex flex-col gap-4">
       <li><strong>903.BS.1</strong> Le BrawlSet est une variante du Commander. Cette variante utilise les règles classiques du Commander avec les modifications suivantes.</li>