Rend le menu compte mobile plus compact

ChessCubing.App/Components/SiteMenu.razor

@@ -28,11 +28,25 @@
                 <a class="@BuildNavLinkClass(UserPaths)" href="utilisateur.html" aria-current="@BuildAriaCurrent(UserPaths)">Utilisateur</a>
             </nav>
 
-            <div class="site-menu-account">
+            <div class="site-menu-account @(IsMobileAccountMenuOpen ? "is-open" : string.Empty)">
-                <span class="micro-label">Compte joueur</span>
+                <div class="site-menu-account-top">
+                    <span class="micro-label">Compte joueur</span>
+                    <button class="site-menu-account-toggle"
+                            type="button"
+                            aria-label="@BuildAccountMenuToggleLabel()"
+                            aria-controls="site-menu-account-panel"
+                            aria-expanded="@BoolString(IsMobileAccountMenuOpen)"
+                            @onclick="ToggleMobileAccountMenu">
+                        <span class="site-menu-account-toggle-icon" aria-hidden="true">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </span>
+                    </button>
+                </div>
                 @if (IsAuthenticated)
                 {
-                    <div class="site-menu-account-panel">
+                    <div class="site-menu-account-panel" id="site-menu-account-panel">
                         <div class="site-menu-user">
                             <strong>@DisplayName</strong>
                             <span>@DisplayMeta</span>
@@ -42,7 +56,7 @@
                 }
                 else
                 {
-                    <div class="site-menu-account-actions">
+                    <div class="site-menu-account-actions" id="site-menu-account-panel">
                         <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
                         <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
                     </div>
@@ -164,6 +178,7 @@
     private bool IsAuthenticated;
     private bool ShowAuthModal;
     private bool IsSubmitting;
+    private bool IsMobileAccountMenuOpen;
     private string? FormError;
     private string AuthModalTitle = "Se connecter";
     private AuthMode Mode = AuthMode.Login;
@@ -208,6 +223,7 @@
 
     private void OpenLoginModal()
     {
+        CloseMobileAccountMenu();
         ShowAuthModal = true;
         SwitchToLogin();
         RequestMenuSync();
@@ -215,6 +231,7 @@
 
     private void OpenRegisterModal()
     {
+        CloseMobileAccountMenu();
         ShowAuthModal = true;
         SwitchToRegister();
         RequestMenuSync();
@@ -345,6 +362,7 @@
 
         IsSubmitting = true;
         FormError = null;
+        CloseMobileAccountMenu();
 
         try
         {
@@ -361,6 +379,26 @@
     private void HandleAuthenticationStateChanged(Task<AuthenticationState> authenticationStateTask)
         => _ = InvokeAsync(RefreshAuthenticationStateAsync);
 
+    private void ToggleMobileAccountMenu()
+    {
+        IsMobileAccountMenuOpen = !IsMobileAccountMenuOpen;
+        RequestMenuSync();
+    }
+
+    private void CloseMobileAccountMenu()
+    {
+        if (!IsMobileAccountMenuOpen)
+        {
+            return;
+        }
+
+        IsMobileAccountMenuOpen = false;
+        RequestMenuSync();
+    }
+
+    private string BuildAccountMenuToggleLabel()
+        => IsMobileAccountMenuOpen ? "Fermer le menu du compte" : "Ouvrir le menu du compte";
+
     private void RequestMenuSync()
         => _syncMenuAfterRender = true;
 

styles.css

@@ -1142,10 +1142,61 @@ body.site-menu-hidden .site-menu-shell {
   justify-items: end;
 }
 
+.site-menu-account-top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  width: 100%;
+}
+
 .site-menu-account .micro-label {
   margin-bottom: 0;
 }
 
+.site-menu-account-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 1px solid var(--panel-border);
+  border-radius: 18px;
+  background: rgba(19, 22, 29, 0.92);
+  color: var(--text);
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    background 160ms ease,
+    border-color 160ms ease;
+}
+
+.site-menu-account-toggle:hover {
+  transform: translateY(-1px);
+  border-color: var(--panel-border-strong);
+  background: rgba(24, 29, 39, 0.96);
+}
+
+.site-menu-account-toggle-icon {
+  display: grid;
+  gap: 0.3rem;
+  width: 1.35rem;
+}
+
+.site-menu-account-toggle-icon span {
+  display: block;
+  width: 100%;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.site-menu-account.is-open .site-menu-account-toggle {
+  border-color: rgba(52, 141, 255, 0.32);
+  background: rgba(17, 103, 255, 0.18);
+}
+
 .site-menu-account-actions,
 .site-menu-account-panel {
   display: flex;
@@ -1584,7 +1635,7 @@ body.site-menu-hidden .site-menu-shell {
 
 @media (max-width: 900px) {
   :root {
-    --site-menu-offset: calc(12.5rem + var(--safe-top));
+    --site-menu-offset: calc(10.8rem + var(--safe-top));
   }
 
   .phase-body {
@@ -1608,25 +1659,69 @@ body.site-menu-hidden .site-menu-shell {
   }
 
   .site-menu-main {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr) auto;
-    justify-items: stretch;
+    align-items: start;
+    gap: 0.8rem 1rem;
   }
 
   .site-menu-brand {
-    justify-content: center;
+    justify-content: flex-start;
   }
 
   .site-menu-links {
+    grid-column: 1 / -1;
     justify-content: center;
   }
 
   .site-menu-account {
-    justify-items: stretch;
+    position: relative;
+    justify-items: end;
+    justify-self: end;
+    align-self: start;
+  }
+
+  .site-menu-account .micro-label {
+    display: none;
+  }
+
+  .site-menu-account-top {
+    justify-content: flex-end;
+  }
+
+  .site-menu-account-toggle {
+    display: inline-flex;
   }
 
   .site-menu-account-actions,
   .site-menu-account-panel {
-    justify-content: flex-start;
+    display: none;
+    position: absolute;
+    top: calc(100% + 0.65rem);
+    right: 0;
+    z-index: 3;
+    min-width: min(17rem, calc(100vw - 1rem));
+    padding: 0.9rem;
+    border: 1px solid var(--panel-border);
+    border-radius: 22px;
+    background: rgba(14, 16, 21, 0.96);
+    box-shadow: var(--shadow);
+  }
+
+  .site-menu-account.is-open .site-menu-account-actions,
+  .site-menu-account.is-open .site-menu-account-panel {
+    display: grid;
+    justify-content: stretch;
+    gap: 0.75rem;
+  }
+
+  .site-menu-account.is-open .site-menu-account-actions .button,
+  .site-menu-account.is-open .site-menu-account-panel .button {
+    width: 100%;
+  }
+
+  .site-menu-account-actions,
+  .site-menu-account-panel {
+    justify-content: stretch;
   }
 
   .site-menu-user {