feat(ui): panneau repliable, carnets plus lisibles et accueil plus clair

Harmonise la liste des notes et l’éditeur (titres, dates, retour),
rend la saisie rapide et les raccourcis de l’accueil utilisables
sur téléphone, et conserve le panneau latéral repliable.

memento-note/app/(main)/insights/page.tsx

@@ -19,7 +19,6 @@ import {
   ChevronRight,
   ChevronDown,
   Database,
-  Menu,
   Network,
   List,
   Search,
@@ -442,13 +441,6 @@ export default function InsightsPage() {
       {/* ── Header ── */}
       <div className="p-6 sm:p-8 border-b border-border/20 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sticky top-0 bg-[#F9F8F6]/80 dark:bg-[#0D0D0D]/80 backdrop-blur-md z-30 shrink-0">
         <div className="flex items-center gap-4">
-          <button
-            className="p-2 -ms-1 text-foreground hover:bg-foreground/5 rounded-lg transition-colors shrink-0 cursor-pointer focus-visible:ring-2 focus-visible:ring-ochre/50 focus-visible:outline-none"
-            onClick={() => window.dispatchEvent(new CustomEvent('toggle-insights-sidebar'))}
-            aria-label={t('insightsView.toggleMenu')}
-          >
-            <Menu size={22} />
-          </button>
           <div>
           <div className="flex items-center gap-3 mb-1">
             <div className="w-8 h-8 rounded-lg bg-ochre/10 flex items-center justify-center text-ochre">

memento-note/app/(main)/layout.tsx

@@ -7,6 +7,7 @@ import { detectUserLanguage, parseAcceptLanguage } from "@/lib/i18n/detect-user-
 import { loadTranslations } from "@/lib/i18n/load-translations";
 import { getAISettings } from "@/app/actions/ai-settings";
 import { AIChatLayoutBridge } from "@/components/ai-chat-layout-bridge";
+import { MobileNavigationBar } from "@/components/mobile-navigation-bar";
 
 
 export default async function MainLayout({
@@ -42,6 +43,7 @@ export default async function MainLayout({
         </Suspense>
 
         <main className="flex min-h-0 flex-1 flex-col overflow-y-auto scroll-smooth bg-background" id="main-content">
+          <MobileNavigationBar />
           <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-[9999] focus:top-2 focus:left-2 focus:bg-brand-accent focus:text-white focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-bold">
             Skip to content
           </a>
@@ -53,4 +55,3 @@ export default async function MainLayout({
     </ProvidersWrapper>
   );
 }
-

memento-note/app/globals.css

@@ -164,6 +164,23 @@ html:not(.dark) .memento-active-nav {
   background: rgba(28, 28, 28, 0.2);
 }
 
+.dashboard-action-strip {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-brand-accent) 45%, transparent) transparent;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x;
+}
+.dashboard-action-strip::-webkit-scrollbar {
+  height: 4px;
+}
+.dashboard-action-strip::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dashboard-action-strip::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
+  border-radius: 999px;
+}
+
 .sidebar-shadow {
   box-shadow: 1px 0 10px rgba(0, 0, 0, 0.05);
 }
@@ -2816,7 +2833,7 @@ html.font-system * {
 
   /* Rendre l'éditeur plus confortable sur mobile */
   .notion-editor.tiptap {
-    padding-bottom: 80px !important; /* laisser de la place pour la toolbar */
+    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; /* laisser de la place pour la toolbar */
   }
 }
 
@@ -2827,7 +2844,8 @@ html.font-system * {
   left: 0;
   right: 0;
   z-index: 150;
-  height: 52px;
+  height: calc(52px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: env(safe-area-inset-bottom, 0px);
   background: color-mix(in srgb, var(--popover) 90%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -3078,4 +3096,35 @@ html.font-system * {
 
 .tiptap-column > *:first-child { margin-top: 0; }
 .tiptap-column > *:last-child { margin-bottom: 0; }
-.tiptap-column p { margin: 4px 0; }
+.tiptap-column p { margin: 4px 0; }
+
+@media (min-width: 768px) {
+  .dashboard-sidebar {
+    --sidebar-expanded-width: 26rem;
+    width: var(--sidebar-expanded-width);
+    transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms ease;
+  }
+
+  .dashboard-sidebar #sidebar-context-panel {
+    flex: none;
+    width: calc(var(--sidebar-expanded-width) - 72px);
+    transition: opacity 180ms ease, visibility 300ms;
+  }
+
+  .dashboard-sidebar #sidebar-context-panel[data-collapsed="true"] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+
+@media (min-width: 1536px) {
+  .dashboard-sidebar { --sidebar-expanded-width: 30rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-sidebar,
+  .dashboard-sidebar #sidebar-context-panel {
+    transition: none;
+  }
+}