diff --git a/ROADMAP.md b/ROADMAP.md
index a72b417..b0fbd8c 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -35,6 +35,7 @@ ObsiViewer offre une expérience de consultation en lecture seule d’une voûte
 
 - [ ] Modals d’édition bookmarks
   - Créer un `BookmarkEditorModal` (ajout/édition groupes et fichiers)
+  - Le mode edition doit être inspiré de l'éditeur de gestion de notes Nimble Notes
   - Valider les champs, support du parent selector, déplacement entre groupes
   - Estimation : 2j
 
diff --git a/EXCALIDRAW_FIX_SUMMARY.md b/docs/EXCALIDRAW/EXCALIDRAW_FIX_SUMMARY.md
similarity index 100%
rename from EXCALIDRAW_FIX_SUMMARY.md
rename to docs/EXCALIDRAW/EXCALIDRAW_FIX_SUMMARY.md
diff --git a/docs/EXCALIDRAW_IMPLEMENTATION.md b/docs/EXCALIDRAW/EXCALIDRAW_IMPLEMENTATION.md
similarity index 100%
rename from docs/EXCALIDRAW_IMPLEMENTATION.md
rename to docs/EXCALIDRAW/EXCALIDRAW_IMPLEMENTATION.md
diff --git a/docs/EXCALIDRAW_QUICK_START.md b/docs/EXCALIDRAW/EXCALIDRAW_QUICK_START.md
similarity index 100%
rename from docs/EXCALIDRAW_QUICK_START.md
rename to docs/EXCALIDRAW/EXCALIDRAW_QUICK_START.md
diff --git a/docs/EXCALIDRAW_SAVE_FIX.md b/docs/EXCALIDRAW/EXCALIDRAW_SAVE_FIX.md
similarity index 100%
rename from docs/EXCALIDRAW_SAVE_FIX.md
rename to docs/EXCALIDRAW/EXCALIDRAW_SAVE_FIX.md
diff --git a/docs/EXCALIDRAW_SAVE_IMPROVEMENTS.md b/docs/EXCALIDRAW/EXCALIDRAW_SAVE_IMPROVEMENTS.md
similarity index 100%
rename from docs/EXCALIDRAW_SAVE_IMPROVEMENTS.md
rename to docs/EXCALIDRAW/EXCALIDRAW_SAVE_IMPROVEMENTS.md
diff --git a/docs/excalidraw.md b/docs/EXCALIDRAW/excalidraw.md
similarity index 100%
rename from docs/excalidraw.md
rename to docs/EXCALIDRAW/excalidraw.md
diff --git a/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi.md b/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi.md
new file mode 100644
index 0000000..0c14418
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi.md
@@ -0,0 +1,483 @@
+
+
+# Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## 1. Project Overview and Core Philosophy
+
+### 1.1. Product Philosophy
+
+The redesign of the ObsiViewer application is guided by a set of core philosophical principles derived from a detailed analysis of the Nimbus Notes interface. These principles are not merely stylistic choices but foundational concepts that dictate the structure, flow, and user experience of the entire application. They ensure that the final product is not only visually similar to Nimbus Notes but also functionally and experientially aligned with its efficient, dense, and rapid workflow. The philosophy emphasizes a workspace-centric model, a dual-axis organizational system, a search-first approach to information retrieval, and a commitment to progressive disclosure to maintain a clean and focused user interface. Furthermore, it acknowledges the modern need for content to exist in multiple contexts, from private notes to public-facing portals, without friction. Adherence to these principles is paramount for achieving a successful and faithful reproduction of the target user experience.
+
+#### 1.1.1. Workspace-First Architecture
+
+The foundational principle of the interface is its **workspace-first** architecture. This concept dictates that all content—pages, folders, tags, and even team members—is contained within a strictly isolated and self-contained *workspace*. Switching between workspaces is not a simple global filter applied to a single, monolithic data set; rather, it is a complete context switch, transporting the user into an entirely new and distinct universe of content . This design choice has profound implications for the user experience. It allows for a high degree of organization and separation between different projects, teams, or personal and professional life, preventing the cognitive overload that can arise from a cluttered, undifferentiated information space. The interface must visually and functionally reinforce this separation, making it clear to the user which workspace they are currently operating in. The workspace selector, therefore, becomes a critical navigational element, and its implementation must be robust and easily accessible, as documented in the guides for navigating and managing workspaces . This architecture ensures that the user's mental model aligns perfectly with the application's data structure, leading to a more intuitive and less error-prone interaction.
+
+#### 1.1.2. Bi-Axial Organization (Folders & Tags)
+
+Complementing the workspace-first architecture is the **bi-axial organization** system, which employs two distinct but complementary methods for structuring content: **folders** and **tags**. Folders provide a traditional, hierarchical structure, allowing users to create a nested, tree-like organization that reflects a clear parent-child relationship between documents. This is ideal for creating a logical, top-down flow of information, such as organizing project documentation or a personal knowledge base. Tags, in contrast, offer a non-hierarchical, multi-categorical system for adding context and enabling rapid, cross-cutting discovery . A single page can be associated with multiple tags, allowing it to surface in various contexts regardless of its location within the folder hierarchy. For example, a project report could be tagged with `#quarterly-review`, `#marketing-strategy`, and `#client-xyz`, making it instantly discoverable through any of those lenses. The interface must support both systems seamlessly, providing clear visual distinctions and intuitive workflows for managing folders and tags. The guides on folders and tags provide a detailed look into how this dual system is intended to function, balancing rigid structure with flexible, associative context .
+
+#### 1.1.3. Search-First, Navigate-Second
+
+A core tenet of the user experience is the **"search first, navigate second"** philosophy. The interface is designed to prioritize rapid information retrieval through a powerful and always-visible search function, relegating manual navigation to a secondary role. The **top bar** is dominated by a large, centered search field, signaling its importance as the primary tool for interacting with the application's content. This is further enhanced by the use of **persistent filter chips**—"All folders," "All tags," and "All pages"—which provide immediate, at-a-glance feedback on the current search context . These chips are not static labels; they are interactive elements that allow users to refine their search scope on the fly without leaving their current workflow. The ability to see, edit, and reset these filters instantly makes the search process transparent and controllable. This approach caters to users who know what they are looking for and need to access it quickly, while still providing robust navigational tools for browsing and discovery. The design minimizes the cognitive load associated with finding information by making the most direct path—the search bar—the most prominent one.
+
+#### 1.1.4. Progressive Disclosure
+
+To maintain a clean and uncluttered interface despite the density of information and features, the design relies heavily on the principle of **progressive disclosure**. This strategy involves hiding advanced or less frequently used options until they are explicitly requested by the user. Instead of presenting a wall of controls, the interface reveals functionality contextually and on demand. Examples of this pattern include the **hover-reveal** of the subfolder creation button, which only appears when the user hovers over a parent folder, and the contextual panels like the **folder/tag picker** and the **document outline**, which are summoned via discrete triggers . This approach prevents the user from being overwhelmed by a complex interface, allowing them to focus on their primary task. It creates a sense of simplicity and elegance, even as it provides access to a powerful and feature-rich toolset. The goal is to make the application feel lightweight and approachable for new users while ensuring that power users can access advanced functionality without friction. This careful balance between simplicity and power is a hallmark of a well-designed user experience.
+
+#### 1.1.5. Content with Multiple Facades (Portals)
+
+The final philosophical pillar is the concept of **"one content, multiple facades,"** which is embodied by the **Portal** feature. This principle recognizes that a single piece of content, such as a project specification or a client report, often needs to be presented in different contexts with varying levels of access and branding. A page can be edited and managed within the private, internal environment of the ObsiViewer application, but it can also be seamlessly **published to an external, branded Portal** for sharing with clients, stakeholders, or the public . The commands for this action, such as **"Add to portal"** and **"Share,"** are consistently visible within the editor, making the transition from private creation to public dissemination a fluid and integrated part of the workflow . This eliminates the need for cumbersome export/import processes or separate content management systems for external-facing content. The interface must clearly communicate the publication status of a page and provide intuitive controls for managing its visibility and branding, effectively allowing a single source of truth to serve multiple audiences.
+
+### 1.2. Core Principles for Redesign
+
+To translate the high-level product philosophy into a concrete and actionable design, a set of eight core principles has been established. These principles serve as a checklist and a guide for every design and implementation decision, ensuring that the final ObsiViewer interface remains faithful to the spirit and functionality of the Nimbus Notes experience. They distill the complex interplay of layout, interaction, and workflow into a memorable and prescriptive set of rules. From the stability of the three-panel layout to the nuanced behavior of stateful filters and the seamless continuum between writing and publishing, these principles provide a clear roadmap for the development team. They are the "TL;DR" of the design specification, capturing the essence of what makes the Nimbus UI both powerful and intuitive.
+
+#### 1.2.1. Three Stable Panels + Transient Overlays
+
+The foundational layout of the application is built upon **three stable, persistent panels**: the left sidebar for primary navigation (folders and tags), the central column for the index or search results, and the right panel for the content reader/editor. This three-column structure provides a stable and predictable frame for the user's workflow, ensuring that primary navigational and contextual tools are always visible and accessible on a desktop screen. The stability of these panels creates a strong sense of place and orientation within the application. In contrast to these stable panels, more detailed or temporary interactions are handled through **transient overlays**, such as the floating pickers for folders and tags. These overlays appear on demand, provide a focused interface for a specific task (like filtering), and then disappear, returning the user to the stable three-panel view. This combination of a stable primary layout with transient secondary interactions is key to managing complexity without cluttering the main interface.
+
+#### 1.2.2. Persistent Stateful Filters (Chips)
+
+A key interaction pattern that must be meticulously reproduced is the use of **persistent, stateful filters**, visually represented as **chips**. Unlike simple, one-time-use dropdown menus, these chips are always visible in the central panel's header, providing continuous feedback on the current filtering state . They are "stateful" because they display the currently active filters (e.g., a specific folder or tag) and allow for immediate modification or removal. The presence of a **caret (▾)** and a **badge** (e.g., "+1") on these chips clearly communicates that they are interactive menus, not just static labels. This persistent visibility serves as a crucial piece of cognitive anchoring, reminding the user of their current context within the data and allowing them to refine their search without losing their place. The design must ensure these chips are not only visually distinct but also functionally robust, allowing for multi-selection and easy clearing of filters.
+
+#### 1.2.3. Rich Pickers with Local Search
+
+When a user interacts with one of the filter chips, they are presented with a **rich picker** interface. These are not standard browser dropdowns but sophisticated, custom-designed overlays that provide a powerful set of tools for selection. A critical feature of these pickers is the inclusion of a **local search bar**, which allows users to quickly find a specific folder or tag within a potentially long list, significantly reducing cognitive load. The pickers also support advanced interactions like multi-selection, with clear visual indicators such as **checkmarks** for tags and hierarchical displays with **chevrons** for nested folders. Furthermore, they include persistent **"Clear" and "Done"** actions at the bottom, giving the user explicit control over the filtering process. This level of richness and functionality in a seemingly simple UI element is a hallmark of the Nimbus design and is essential for creating a fluid and efficient filtering experience.
+
+#### 1.2.4. Contextual Outline Panel
+
+For users working with long-form documents, navigation within the page itself is just as important as navigating between pages. The design addresses this with a **contextual outline panel**. This feature is not a permanent fixture of the layout but is instead triggered by a small, round **hamburger button** that appears on the right side of the page content . Clicking this button slides out a docked panel that lists all the headings (H1–H6) in the document. This outline serves as an interactive table of contents, allowing users to click on a heading to instantly scroll to that section of the page. This is a prime example of **progressive disclosure**, where a powerful feature is made available on demand without permanently occupying screen real estate. The implementation must ensure this panel is synchronized with the document's content and provides a smooth, responsive scrolling experience.
+
+#### 1.2.5. Single, Consistent Creation Action
+
+To create a predictable and learnable interface, the design mandates a **single, consistent action for creating new content**. This action is embodied by the **"+ Page"** button, which is prominently displayed in the top bar. Regardless of where the user is in the application, this button always performs the same function: it creates a new page within the current context (i.e., the currently selected workspace and folder). This consistency eliminates ambiguity and reduces the cognitive load associated with creating new content. The user does not need to hunt for different "New" buttons in different parts of the interface; they know that the turquoise **"+ Page"** button is always their starting point for creation. This principle of a single, primary call-to-action is a cornerstone of intuitive UI design.
+
+#### 1.2.6. Strictly Separated Workspaces
+
+Reinforcing the **workspace-first** philosophy, this principle dictates that **workspaces must be strictly separated**. The UI must make it impossible for a user to accidentally interact with content from one workspace while believing they are in another. The workspace switcher, located in the sidebar footer and avatar menu, must be a deliberate and clear action . The visual design should also reflect this separation, perhaps by subtly changing the accent color or other visual elements when a different workspace is active. This strict separation is crucial for maintaining data integrity and user trust, especially in a multi-user or multi-project environment. It ensures that the isolated universe of each workspace remains truly isolated.
+
+#### 1.2.7. Bi-Axial Folder/Tag System
+
+This principle is the practical application of the **bi-axial organization** philosophy. The UI must provide clear, distinct, and equally powerful interfaces for managing both **folders** and **tags**. The left sidebar should present these two organizational systems as separate, top-level categories, allowing users to switch between a hierarchical view (folders) and a flat, categorical view (tags). The filtering system in the central panel must also respect this duality, with separate chips for filtering by folder and by tag. The design must avoid conflating the two systems and instead celebrate their complementary nature, giving users the flexibility to organize their information in the way that best suits their mental model and workflow .
+
+#### 1.2.8. Omnipresent Share/Portal Actions
+
+Finally, the design must treat the act of sharing and publishing as a natural extension of the writing process. The commands for **"Share"** and **"Add to portal"** should be **omnipresent** within the editor interface, ensuring that the user can move from creation to dissemination without friction . This creates a **continuum** between writing and publishing. The UI should make it clear what each action does—"Share" for direct link-based sharing, and "Add to portal" for publishing to a branded external space. By keeping these actions always visible, the design encourages a workflow where content is not just created and stored but is actively shared and collaborated upon, fulfilling the promise of "one content, multiple facades."
+
+## 2. Responsive Design Strategy
+
+The successful implementation of the Nimbus-like interface for ObsiViewer hinges on a robust and well-defined responsive design strategy. The application must provide an optimal user experience across a wide spectrum of devices, from large desktop monitors to small mobile phones. This requires a deliberate approach to layout, navigation, and component behavior that adapts intelligently to different screen sizes and input methods. The strategy outlined here employs a mobile-first methodology, a set of clearly defined breakpoints using Tailwind CSS, and distinct layout patterns for desktop, tablet, and mobile viewports. The goal is to ensure that the core functionality and user experience are not just preserved but are enhanced and tailored for each device category.
+
+### 2.1. Breakpoints and Approach
+
+The foundation of the responsive strategy is a combination of a mobile-first development philosophy and a granular set of breakpoints. This approach ensures that the application is built from the ground up with the constraints and capabilities of mobile devices in mind, and then progressively enhanced for larger screens. This is a departure from the traditional desktop-first approach, which often leads to mobile experiences that feel like a compromised afterthought. By starting with the most restrictive environment, the design is forced to prioritize essential content and functionality, resulting in a cleaner, more focused, and more performant application across all platforms.
+
+#### 2.1.1. Tailwind Breakpoints (xs, sm, md, lg, xl, 2xl)
+
+To manage the responsive behavior of the application, a set of standard Tailwind CSS breakpoints will be used. These breakpoints provide a consistent and predictable way to apply different styles and layouts at various screen widths. The chosen breakpoints are designed to cover a wide range of modern devices, from the smallest smartphones to large desktop monitors. The breakpoints are defined as follows:
+
+| Breakpoint | Screen Width | Typical Device Category |
+| :--- | :--- | :--- |
+| `xs` | `320px` | Small phones (e.g., iPhone SE) |
+| `sm` | `640px` | Large phones, small tablets |
+| `md` | `768px` | Tablets (e.g., iPad) |
+| `lg` | `1024px` | Small laptops, desktop |
+| `xl` | `1280px` | Standard desktop |
+| `2xl` | `1536px` | Large desktop, wide screens |
+
+These breakpoints will be used in conjunction with Tailwind's responsive prefixes (e.g., `md:flex`, `lg:hidden`) to create adaptive layouts and components. For example, a three-column layout might be applied at the `lg` breakpoint and above, while a single-column layout with a bottom navigation bar would be used for screens smaller than `lg`. This granular control allows for a highly optimized experience at every screen size.
+
+#### 2.1.2. Mobile-First Development Approach
+
+The project will adhere to a **mobile-first** development methodology. This means that the initial development and styling will target the smallest screen sizes (e.g., the `xs` and `sm` breakpoints). The base CSS will be written for the mobile layout, and then media queries will be used to add styles and modify the layout for progressively larger screens (`md`, `lg`, `xl`, etc.). This approach has several key advantages. First, it ensures that the mobile experience is a first-class citizen, not an afterthought. Second, it often leads to cleaner and more maintainable CSS, as the default styles are simple and focused, with complexity added only as needed for larger screens. Third, it can improve performance on mobile devices, as they will download and parse less CSS, avoiding the need to override complex desktop-first styles. This disciplined approach is crucial for delivering a truly responsive and user-friendly application.
+
+### 2.2. Desktop Layout (≥1024px)
+
+For desktop and large tablet devices in landscape mode (screen widths of 1024px and above), the application will display a **three-column layout**. This layout is designed to maximize productivity and information density by keeping all primary navigational and contextual elements visible on screen at all times. It provides a stable and powerful workspace for users who are creating, organizing, and consuming large amounts of information. The layout is reminiscent of classic email clients and file managers, providing a familiar and efficient paradigm for power users.
+
+#### 2.2.1. Three-Column Structure
+
+The desktop layout is composed of three distinct and persistent columns:
+
+1.  **Left Sidebar (Navigation):** This column, with a default width of 240-440px, contains the primary navigation elements, including Quick Links, the hierarchical folder tree, and the flat list of tags. It provides the main structural overview of the workspace.
+2.  **Center Column (Index/Results):** This is the main content area, which displays the list of pages based on the current folder, tag, or search query. It is a scrollable list of page items, each showing a title, snippet, and metadata.
+3.  **Right Panel (Reader/Editor):** This column displays the content of the currently selected page. It includes the page title, the rich text editor, and the document's action toolbar (e.g., Share, Add to Portal).
+
+This three-column structure allows users to navigate through their content in the left sidebar, scan a list of relevant pages in the center, and read or edit a specific page on the right, all without having to switch views or lose context. This parallel workflow is highly efficient and is a core tenet of the desktop experience.
+
+#### 2.2.2. Resizable Sidebar
+
+To enhance user control and customization, the **left sidebar will be resizable**. Users will be able to click and drag a handle on the right edge of the sidebar to adjust its width within a predefined range (e.g., 240px to 440px). This allows users to tailor the interface to their specific needs and screen size. For example, a user with a very large monitor might want to expand the sidebar to see more of their folder hierarchy, while a user on a smaller laptop might prefer to keep it narrow to maximize the space for the content editor. The resizable functionality will be implemented using a dedicated `resizable-handle` component, which will manage the drag interactions and update the layout dynamically. The user's preferred sidebar width will be persisted in local storage, ensuring a consistent experience across sessions.
+
+#### 2.2.3. Fixed Right Panel for ToC
+
+The **Table of Contents (ToC)** for the currently open document will be displayed in a **fixed right panel** on desktop screens. This panel will be docked to the right edge of the viewport, providing a persistent and easily accessible outline of the document's structure. As the user scrolls through the document, the ToC will remain visible, allowing them to quickly jump between sections by clicking on the corresponding headings. This fixed positioning is a key feature for users working with long and complex documents, as it provides constant orientation and facilitates rapid navigation within the page. The ToC panel will be implemented as a separate component that can be shown or hidden based on the presence of headings in the document and user preference. This design choice reinforces the desktop paradigm of providing multiple, persistent views to support complex workflows.
+
+### 2.3. Tablet Layout (768px ≤ width < 1024px)
+
+For tablet devices and smaller desktop windows (screen widths between 768px and 1023px), the three-column desktop layout is no longer practical due to space constraints. To adapt to this intermediate screen size, the application will switch to a **tab-based navigation system**. This approach maintains access to all the core features of the application but organizes them into a series of full-screen panels that the user can switch between. This ensures that each view has enough space to be usable and readable, while the tab-based navigation provides a clear and intuitive way to move between different parts of the application.
+
+#### 2.3.1. Tab-Based Navigation
+
+Instead of displaying all three columns simultaneously, the tablet layout will use a system of tabs to switch between the main functional areas of the application. The primary tabs will be:
+
+*   **Sidebar:** This tab will display the full-width navigation panel, including folders and tags.
+*   **List:** This tab will show the central index or search results list.
+*   **Page:** This tab will display the full-width content reader/editor.
+*   **ToC:** This tab will show the document's Table of Contents.
+
+This tabbed interface allows the application to dedicate the entire screen to one task at a time, which is more appropriate for the smaller screen real estate of a tablet. The user can tap on a tab to instantly switch to that view, providing a fast and fluid navigation experience.
+
+#### 2.3.2. Bottom Navigation Bar
+
+To provide easy access to the primary tabs, a **fixed bottom navigation bar** will be displayed at all times. This bar will contain icons for the main tabs (e.g., Sidebar, List, Page, ToC), allowing the user to switch views with a single tap. The bottom navigation pattern is a standard and highly usable convention on mobile and tablet devices, as it places the primary navigation within easy reach of the user's thumbs. The active tab will be visually highlighted to provide clear feedback on the current view. This persistent navigation bar ensures that the user is never more than one tap away from the main sections of the application.
+
+#### 2.3.3. Drawer for Sidebar
+
+When the user is on the **List** or **Page** tab, the **Sidebar** will be accessible via a **drawer** that slides in from the left side of the screen. This drawer will overlay the current content and can be opened by tapping a menu icon in the top navigation bar. The drawer will contain the full folder and tag navigation, allowing the user to change their context without having to navigate to the dedicated Sidebar tab. This provides a quick and convenient way to switch folders or tags while remaining focused on their current task. The drawer can be dismissed by tapping outside of it or by swiping it away, returning the user to their previous view. This hybrid approach of using both tabs and a drawer provides a flexible and efficient navigation system for the tablet form factor.
+
+### 2.4. Mobile Layout (<768px)
+
+For mobile phones (screen widths below 768px), the design must be further simplified to accommodate the smallest screens and touch-based interactions. The application will adopt a **full-screen, single-tasking model**, where each functional area occupies the entire viewport. Navigation will be handled primarily through a **bottom navigation bar** with four distinct tabs, providing a clear and thumb-friendly way to switch between the main features of the app. The goal is to provide a focused and uncluttered experience that is optimized for on-the-go use.
+
+#### 2.4.1. Bottom Navigation with 4 Tabs
+
+The primary navigation on mobile will be a **bottom navigation bar with four tabs**. These tabs will provide direct access to the core functions of the application:
+
+1.  **☰ (Menu):** This tab will open the sidebar drawer, providing access to folders and tags.
+2.  **🔍 (Search):** This tab will focus on the search bar and display search results.
+3.  **📄 (Page):** This tab will display the content of the currently selected page.
+4.  **📋 (ToC):** This tab will show the Table of Contents for the current page.
+
+This four-tab layout provides a clear and logical grouping of features, ensuring that the most common tasks are always just one tap away. The use of standard icons makes the navigation immediately understandable to users familiar with mobile app conventions.
+
+#### 2.4.2. Full-Width Content Panels
+
+In the mobile layout, each of the main content areas will occupy the **full width of the screen**. This provides maximum readability and touch-target size for each element. The **sidebar** will be presented as a **drawer** that slides in from the left, covering most of the screen. The **search results list** will be a vertically scrollable list of full-width items. The **page viewer** will also be full-width, with the content optimized for mobile reading (e.g., appropriate font sizes, line heights, and image scaling). This single-tasking approach prevents the interface from feeling cramped and ensures that the user's attention is focused on one thing at a time.
+
+#### 2.4.3. Inline/Collapsible ToC
+
+On mobile, the **Table of Contents (ToC)** will not be a persistent panel due to space constraints. Instead, it will be implemented as an **inline, collapsible section** within the page content itself. A button, likely fixed to the bottom-right of the screen, will allow the user to toggle the visibility of the ToC. When opened, the ToC will appear as a list of links within the page, pushing the content down. Alternatively, it could be implemented as a modal or a bottom sheet that slides up from the bottom of the screen. This approach makes the ToC accessible on mobile without sacrificing valuable screen real estate, providing a practical solution for navigating long documents on a small screen.
+
+## 3. Feature Flag and UI Toggle Implementation
+
+To ensure a smooth transition and allow for user choice, the new Nimbus-like UI will be introduced behind a **feature flag**. This allows the legacy interface to remain fully functional while the new design is being developed and tested. A prominent toggle in the application's navbar will allow users to switch between the two UIs at any time, with their preference being persisted across sessions. This architecture is critical for managing risk, gathering user feedback, and ensuring a zero-regression deployment.
+
+### 3.1. UI Mode Service
+
+The core of the feature flag system is a dedicated Angular service, `UiModeService`, which will manage the application's UI state. This service will use Angular's new `signal` API for fine-grained reactivity, ensuring that components update instantly when the UI mode changes. It will also handle the persistence of the user's choice using the browser's `localStorage`.
+
+#### 3.1.1. Signal-Based State Management
+
+The `UiModeService` will utilize an Angular `signal` to hold the current UI mode. Signals are a new primitive in Angular that provide a simpler and more performant way to manage state compared to traditional RxJS observables for simple boolean flags. When the `toggleUIMode()` method is called, it will update the signal's value, which will automatically trigger re-rendering in any component that depends on it. This approach minimizes unnecessary change detection cycles and leads to a more responsive user interface.
+
+#### 3.1.2. localStorage Persistence
+
+To provide a seamless user experience, the selected UI mode must be remembered between sessions. The `UiModeService` will achieve this by saving the user's choice to `localStorage` whenever the mode is toggled. When the application is first loaded, the service will check `localStorage` for a saved preference. If one exists, it will initialize the signal with that value; otherwise, it will default to the new Nimbus mode. This ensures that users only have to make the choice once, and their preference will be respected every time they use the application.
+
+### 3.2. Adaptive Layout Wrapper
+
+A new top-level component, `AppShellAdaptiveComponent`, will act as a wrapper or router for the two different layout shells. This component will be responsible for conditionally rendering either the `AppShellNimbusLayoutComponent` (the new UI) or the `AppShellLegacyLayoutComponent` (the old UI) based on the current state of the `UiModeService`.
+
+#### 3.2.1. Conditional Rendering of Layouts
+
+The `AppShellAdaptiveComponent` will use Angular's `@if` block to render the appropriate layout component. It will inject the `UiModeService` and read the `isNimbusMode` signal. The template will be a simple conditional statement that displays one layout or the other. This clean separation ensures that the logic for choosing a UI is contained in a single place and that the two layout components remain decoupled and independent of each other.
+
+#### 3.2.2. Integration with UiModeService
+
+The `AppShellAdaptiveComponent` will be the primary consumer of the `UiModeService`. By injecting the service and reading its signal, it will react to any changes in the UI mode. When a user clicks the toggle button in the navbar, the `UiModeService` updates its signal, which in turn causes the `AppShellAdaptiveComponent` to re-render and switch the entire application layout. This reactive flow is efficient and easy to reason about, forming the backbone of the feature flag implementation.
+
+### 3.3. Navbar Toggle Button
+
+The user-facing control for the feature flag will be a button placed in the main application navbar. This button will be clearly labeled to indicate its function and will provide immediate visual feedback on the current UI mode.
+
+#### 3.3.1. Visual Indication of Current Mode
+
+The toggle button's label will change dynamically to reflect the current state. When the Nimbus UI is active, the button might display "🔧 Legacy" to indicate that clicking it will switch to the legacy UI. Conversely, when the legacy UI is active, the button might show "✨ Nimbus" to indicate the option to switch to the new design. This clear, contextual labeling removes any ambiguity about what the button will do.
+
+#### 3.3.2. State-Switching Logic
+
+The button's `(click)` event will be bound to a method in the navbar component that simply calls `uiModeService.toggleUIMode()`. This method will handle all the logic of flipping the signal and persisting the new state to `localStorage`. The navbar component itself does not need to contain any complex logic; it just acts as a trigger for the service, keeping the component's code clean and focused on its primary responsibility of navigation.
+
+## 4. Component Architecture and Responsiveness
+
+To manage the complexity of a fully responsive application, a clear and scalable component architecture is required. The strategy involves creating distinct component variants for desktop and mobile views, while sharing common logic. This is combined with a dynamic injection mechanism that loads the appropriate variant based on the current screen size, detected using Angular's CDK utilities.
+
+### 4.1. Desktop/Mobile Component Variants
+
+Instead of creating monolithic components with complex, inline responsive logic, the design promotes the creation of separate, specialized components for different screen sizes. This leads to cleaner, more maintainable code and allows each variant to be optimized for its specific context.
+
+#### 4.1.1. Shared Logic Components
+
+For each major feature (e.g., sidebar, search bar, note view), a base component will be created to encapsulate the shared logic and state. This component will not have a template of its own but will instead be responsible for managing data, handling business logic, and determining which of its child variants (desktop or mobile) should be displayed. This separation of concerns ensures that logic is not duplicated between the desktop and mobile versions of a component.
+
+#### 4.1.2. Desktop-Specific Components (Fixed, Resizable)
+
+For the desktop view (≥1024px), components will be designed to take advantage of the larger screen real estate. For example, the `app-left-sidebar.desktop.component.ts` will implement a fixed, resizable panel. These components will use CSS layouts like Flexbox or Grid to create the stable, multi-column structure. Their styling will be optimized for mouse and keyboard interaction, with hover states and precise click targets.
+
+#### 4.1.3. Mobile-Specific Components (Drawer, Inline)
+
+For the mobile view (<1024px), components will be designed for touch interaction and smaller screens. The `app-left-sidebar.mobile.component.ts`, for instance, will implement a drawer that slides in from the side. These components will use full-width layouts and larger touch targets. Animations and transitions will be used to provide feedback and create a fluid, app-like feel. The logic within these components will be tailored to the mobile interaction model, such as handling swipe gestures for dismissal.
+
+### 4.2. Breakpoint Detection and Injection
+
+The mechanism for switching between desktop and mobile variants will be handled by the shared logic component. It will use Angular's CDK to observe screen size changes and dynamically inject the correct variant into the view.
+
+#### 4.2.1. Using Angular CDK BreakpointObserver
+
+The `BreakpointObserver` from `@angular/cdk/layout` is the ideal tool for this task. The shared logic component will inject this service and use it to create an observable stream that emits a boolean value indicating whether the screen width is above or below a certain threshold (e.g., `Breakpoints.Large` for 1024px). This provides a clean, reactive way to respond to changes in viewport size.
+
+#### 4.2.2. Dynamic Component Injection with `ngComponentOutlet`
+
+Based on the boolean value from the `BreakpointObserver`, the shared logic component's template will use Angular's `ngComponentOutlet` directive to dynamically render the appropriate variant. The template will contain an `@if` block that checks the breakpoint state and then uses `*ngComponentOutlet` to inject either the desktop or mobile component. This powerful technique allows for a completely different component tree to be rendered for different screen sizes, providing the ultimate flexibility in responsive design.
+
+## 5. Mobile Navigation and Gestures
+
+The mobile experience is defined by its navigation patterns and touch-based interactions. To create an intuitive and efficient mobile app, the design incorporates a tab-based system, swipe navigation, and other touch-friendly gestures. These elements are managed by dedicated services and directives to keep the logic clean and reusable.
+
+### 5.1. Tab/Drawer Navigation System
+
+On mobile and tablet devices, the primary navigation will be handled by a system of tabs and drawers. This replaces the persistent three-column layout of the desktop with a more space-efficient, single-tasking model.
+
+#### 5.1.1. MobileNavService for State Management
+
+A `MobileNavService` will be created to manage the state of the mobile navigation. This service will use an Angular `signal` to track the currently active tab (e.g., 'sidebar', 'list', 'page', 'toc'). Other components, such as the `BottomNavComponent`, will inject this service to read the current state and to update it when the user interacts with the navigation. This centralized state management ensures that the navigation UI remains consistent and synchronized across the application.
+
+#### 5.1.2. BottomNavComponent Implementation
+
+The `BottomNavComponent` will be a sticky navigation bar fixed to the bottom of the screen on mobile devices. It will display icons for the four primary tabs. The component will read the active tab from the `MobileNavService` to highlight the correct icon. When a user taps an icon, the component will call a method on the service to update the active tab, which will in turn trigger a re-render of the main content area to show the corresponding view.
+
+### 5.2. Swipe Navigation
+
+To enhance the mobile experience and make navigation feel more fluid, horizontal swipe gestures will be supported for switching between tabs.
+
+#### 5.2.1. SwipeNavDirective for Gesture Detection
+
+A custom directive, `SwipeNavDirective`, will be created to encapsulate the logic for detecting swipe gestures. This directive will use `@HostListener` to listen for `touchstart` and `touchend` events on a host element. By comparing the start and end coordinates of the touch, it can determine the direction of the swipe.
+
+#### 5.2.2. Horizontal Swipe for Tab Switching
+
+The `SwipeNavDirective` will be applied to the main content area. When a swipe is detected, it will emit an event (e.g., `swipeLeft` or `swipeRight`). A parent component will listen for these events and use the `MobileNavService` to switch to the next or previous tab in the sequence. This provides a natural and intuitive way for users to navigate the application, mirroring the behavior of many native mobile apps.
+
+### 5.3. Touch-Friendly Interactions
+
+Beyond basic navigation, other touch-friendly interactions will be implemented to improve usability on mobile devices.
+
+#### 5.3.1. Long-Press for Context Menus
+
+A long-press gesture on items in a list (e.g., a page in the search results) will trigger a context menu. This menu will provide quick access to common actions like "Favorite," "Delete," or "Open in New Tab." This is a standard mobile pattern that provides power-user functionality without cluttering the main interface.
+
+#### 5.3.2. Pull-to-Refresh (Optional)
+
+As an optional enhancement, a pull-to-refresh gesture could be implemented on scrollable lists. This would allow users to manually trigger a refresh of the data, which is a common and expected behavior in mobile applications. This would likely be implemented using a third-party library or a custom directive that listens for scroll events and detects the "pull" gesture.
+
+## 6. Mobile-First Component Specifications
+
+To ensure a high-quality mobile experience, each component must be designed and built with a mobile-first mindset. This section provides detailed specifications for key mobile components, including their layout, styling, and behavior.
+
+### 6.1. Bottom Navigation (Mobile)
+
+The bottom navigation bar is the primary means of navigation on mobile and must be robust and user-friendly.
+
+#### 6.1.1. Fixed Positioning and Styling
+
+The `BottomNavComponent` will be fixed to the bottom of the viewport using `position: fixed`. It will have a solid background color to ensure it is always visible and legible, even when scrolling through content. It will use Flexbox to evenly distribute the tab buttons across its width. The styling will be simple and clean, with a top border to visually separate it from the content area.
+
+#### 6.1.2. Active State Indication
+
+The currently active tab must be clearly indicated. This will be achieved by changing the color of the icon and label for the active button. A subtle background color change on the active button could also be used to provide additional visual feedback. This state will be driven by the `activeTab` signal from the `MobileNavService`.
+
+### 6.2. Drawer Sidebar (Mobile)
+
+The sidebar drawer provides access to the main navigation (folders and tags) without leaving the current context.
+
+#### 6.2.1. Animated Slide-In/Out
+
+The drawer will be implemented as a `fixed` position element that is initially translated off-screen. When opened, a CSS transition will be used to animate its `transform` property, causing it to slide in smoothly from the left. The same animation will be used in reverse when the drawer is closed. This provides a clear and fluid visual cue to the user.
+
+#### 6.2.2. Backdrop for Dismissal
+
+When the drawer is open, a semi-transparent backdrop will be displayed over the main content. This backdrop serves two purposes: it visually de-emphasizes the background content, focusing the user's attention on the drawer, and it provides a large tap target to dismiss the drawer. Clicking on the backdrop will trigger the close animation and hide the drawer.
+
+### 6.3. Compact Search Bar (Mobile)
+
+The search bar on mobile needs to be compact yet powerful, providing access to search and filtering without taking up too much vertical space.
+
+#### 6.3.1. Integrated Menu Toggle
+
+The mobile search bar will be a single, integrated component that includes a button to toggle the sidebar drawer. This button will be placed on the left side of the search input field, providing a clear and consistent way to access the main navigation.
+
+#### 6.3.2. Horizontally Scrollable Filter Badges
+
+When filters are active, they will be displayed as small "chips" or badges below the search input. On mobile, where horizontal space is limited, this row of badges will be horizontally scrollable. This allows the user to see all active filters without the row wrapping and taking up too much vertical space. Each badge will also have a small "x" icon to allow for quick removal of individual filters.
+
+### 6.4. Optimized Result List Item (Mobile)
+
+Each item in the search results list must be designed for clarity and easy interaction on a small screen.
+
+#### 6.4.1. Stacked Layout for Title, Date, and Tags
+
+On mobile, the layout for each list item will be a stacked, vertical layout. The page title will be at the top, followed by a line containing the last modified date, and then a row of tags. This vertical stacking ensures that each piece of information is readable without horizontal scrolling.
+
+#### 6.4.2. Truncated Excerpt with `line-clamp`
+
+A short excerpt of the page's content will be displayed below the metadata. To prevent this excerpt from taking up too much space, its height will be limited using the CSS `line-clamp` property. This will truncate the text after a specified number of lines (e.g., 2 or 3) and add an ellipsis to indicate that the text has been cut off.
+
+### 6.5. Responsive Markdown Viewer
+
+The markdown content viewer must be responsive and provide a comfortable reading experience on any screen size.
+
+#### 6.5.1. Mobile-First Prose Styling
+
+The styling for the rendered markdown will be mobile-first. Base font sizes, line heights, and margins will be optimized for small screens. Tailwind's `prose` plugin will be used, with responsive variants like `prose-sm` for mobile and `prose-base` for larger screens, to ensure that the typography is always readable and well-proportioned.
+
+#### 6.5.2. Inline ToC Toggle Button
+
+As specified in the responsive strategy, the Table of Contents on mobile will not be a persistent panel. Instead, a floating action button (FAB) will be displayed in the bottom-right corner of the screen when the document has headings. Tapping this button will toggle the visibility of an inline ToC that appears within the document flow.
+
+### 6.6. Adaptive ToC Drawer
+
+The ToC component itself must adapt its behavior and appearance based on the screen size.
+
+#### 6.6.1. Desktop: Fixed Right Panel
+
+On desktop (≥1024px), the `app-toc-drawer` component will render a fixed panel on the right side of the screen. This panel will be styled with a distinct background color and a left border to separate it from the main content. It will be vertically scrollable if the list of headings is long.
+
+#### 6.6.2. Mobile: Collapsible Inline Section with Animation
+
+On mobile (<1024px), the same `app-toc-drawer` component will render a collapsible section that is inserted into the main content flow. The component will use an Angular animation trigger to smoothly animate the opening and closing of this section, animating its height from 0 to its full size. This provides a fluid and polished user experience.
+
+## 7. Performance and Mobile Optimizations
+
+A great user experience on mobile is heavily dependent on performance. The application must be fast to load, smooth to scroll, and responsive to user input. This section outlines key performance optimizations that will be implemented, with a focus on achieving high scores in tools like Google Lighthouse.
+
+### 7.1. Critical Rendering Optimizations
+
+Several techniques will be used to optimize the critical rendering path and improve perceived performance.
+
+#### 7.1.1. Lazy-Loading Images
+
+All images, including those in markdown content and bookmark cards, will be lazy-loaded. This is achieved by adding the `loading="lazy"` attribute to `<img>` tags. This tells the browser to defer loading the image until it is about to enter the viewport, significantly reducing the initial page load time and data usage.
+
+#### 7.1.2. Virtual Scrolling for Long Lists
+
+For lists that can contain a large number of items (e.g., the search results list), a virtual scrolling technique will be used. The Angular CDK's `VirtualScrollViewport` is an excellent tool for this. It works by only rendering the items that are currently visible in the viewport, plus a small buffer. As the user scrolls, it dynamically recycles and re-renders the items, keeping the DOM size small and ensuring smooth 60fps scrolling even with thousands of items.
+
+#### 7.1.3. Debounced Search Input
+
+To avoid firing a search request on every single keystroke, the search input field will be debounced. This means that the search function will only be executed after the user has stopped typing for a short period (e.g., 300ms on mobile, 150ms on desktop). This reduces the number of API calls and prevents the UI from becoming sluggish due to rapid, unnecessary re-rendering of search results.
+
+### 7.2. Lighthouse Mobile Targets
+
+Google Lighthouse provides a comprehensive audit of a web application's performance, accessibility, and best practices. The goal is to achieve high scores across the board, with a particular focus on the mobile audit.
+
+#### 7.2.1. Performance Score ≥ 85
+
+A performance score of 85 or higher on the mobile audit is the target. This will be achieved by implementing the optimizations listed above, as well as other best practices like minifying code, compressing assets, and using a content delivery network (CDN). The performance budget will be monitored throughout the development process.
+
+#### 7.2.2. Accessibility Score ≥ 95
+
+An accessibility score of 95 or higher is the target. This will be achieved by following the WCAG 2.1 AA guidelines, as detailed in the next section. This includes ensuring sufficient color contrast, providing alternative text for images, and making the application fully navigable with a keyboard.
+
+#### 7.2.3. Best Practices Score ≥ 90
+
+A best practices score of 90 or higher is the target. This audit checks for common web development pitfalls, such as using deprecated APIs, having security vulnerabilities, or not using HTTPS. Adhering to modern web standards and security best practices will ensure a high score in this category.
+
+## 8. Accessibility and Usability
+
+An accessible application is a usable application. The redesign will prioritize accessibility from the start, ensuring that the ObsiViewer is usable by as many people as possible, regardless of their abilities or the devices they use.
+
+### 8.1. WCAG 2.1 AA Compliance
+
+The Web Content Accessibility Guidelines (WCAG) 2.1 provide a comprehensive set of recommendations for making web content more accessible. The goal is to meet the **AA** level of conformance.
+
+#### 8.1.1. Sufficient Color Contrast
+
+All text and interactive elements must have a color contrast ratio of at least **4.5:1** against their background. For large text (18pt or 14pt bold), the ratio can be 3:1. This ensures that text is readable for users with low vision or color blindness. Tools will be used during development to check contrast ratios for all color combinations in both light and dark themes.
+
+#### 8.1.2. Visible Focus Indicators
+
+All interactive elements (links, buttons, form inputs) must have a visible focus indicator when they are navigated to using the keyboard (e.g., with the Tab key). This is typically a visible outline or border. This is crucial for keyboard-only users to know which element currently has focus.
+
+#### 8.1.3. Zoom Compatibility (≤200%)
+
+The application must remain fully functional and usable when the browser's zoom level is increased up to **200%**. This means that the layout should reflow appropriately, and horizontal scrolling should be avoided. This is a key requirement for users with low vision who rely on browser zoom to read content.
+
+### 8.2. Keyboard Navigation
+
+The application must be fully navigable and operable using only a keyboard.
+
+#### 8.2.1. Complete Tab Navigation
+
+All interactive elements must be reachable and operable using the Tab key to move forward and Shift+Tab to move backward through the interface. The tab order must be logical and follow the visual flow of the page.
+
+#### 8.2.2. Keyboard Shortcuts for Common Actions
+
+To improve efficiency for power users, keyboard shortcuts will be provided for common actions. For example, `Ctrl/Cmd + K` could open a command palette, and `Ctrl/Cmd + F` could focus the search bar. These shortcuts will be documented and discoverable.
+
+### 8.3. Touch Accessibility
+
+On mobile devices, touch targets must be large enough and well-spaced to be easily and accurately tapped.
+
+#### 8.3.1. Minimum Touch Target Size (44x44px)
+
+All interactive elements, such as buttons and links, should have a touch target size of at least **44x44 pixels**. This is the recommended minimum size by both Apple and Google to ensure that elements can be easily tapped without accidentally hitting adjacent targets.
+
+#### 8.3.2. Descriptive ARIA Labels
+
+For elements that are not clearly labeled with text (e.g., icon buttons), a descriptive `aria-label` attribute must be provided. This label is read by screen readers, providing context to users who cannot see the visual icon. This is essential for making the application's functionality understandable to users with visual impairments.
+
+## 9. Implementation Plan and Deliverables
+
+The project will be executed in a series of phases, with clear deliverables for each stage. This structured approach ensures that the project stays on track and that progress can be measured and reviewed.
+
+### 9.1. Phased Implementation Schedule
+
+The implementation will be broken down into three main phases, with an estimated timeline of 13-21 days for a single frontend engineer.
+
+#### 9.1.1. Phase 1: Feature Flag and Responsive Shell (3-5 days)
+
+This initial phase focuses on building the foundational architecture. It includes implementing the `UiModeService`, the `AppShellAdaptiveComponent`, and the navbar toggle button. It also involves setting up the Tailwind breakpoints and creating the basic three-column responsive shell for the desktop layout.
+
+#### 9.1.2. Phase 2: Mobile Navigation and Components (7-10 days)
+
+This phase is dedicated to building out the mobile experience. It includes creating the `MobileNavService`, the `BottomNavComponent`, and the swipe navigation directive. It also involves developing the mobile-specific variants of key components like the sidebar drawer, the compact search bar, and the optimized result list items.
+
+#### 9.1.3. Phase 3: Gestures, Accessibility, and Testing (3-6 days)
+
+The final phase focuses on polishing the user experience and ensuring quality. It includes implementing advanced gestures like long-press menus, conducting a full accessibility audit to meet WCAG 2.1 AA standards, and writing end-to-end and visual regression tests. It also includes creating the required documentation.
+
+### 9.2. Code Deliverables
+
+The primary output of the project will be the source code for the new features and components.
+
+#### 9.2.1. UI Mode Service and Toggle
+
+This includes the `UiModeService` for state management, the `AppShellAdaptiveComponent` for layout switching, and the toggle button integrated into the navbar.
+
+#### 9.2.2. Responsive Component Wrappers
+
+This includes the shared logic components for the sidebar, search bar, and note view, which are responsible for dynamically injecting their desktop or mobile variants.
+
+#### 9.2.3. Mobile-Specific Components and Directives
+
+This includes all the mobile-first components, such as the `BottomNavComponent`, the drawer sidebar, the compact search bar, and the `SwipeNavDirective`.
+
+### 9.3. Documentation and Testing
+
+High-quality documentation and a comprehensive test suite are essential for the long-term maintainability and success of the project.
+
+#### 9.3.1. README_UI.md, MOBILE_GUIDE.md, RESPONSIVE_CHECKLIST.md
+
+Three key documentation files will be created:
+*   `README_UI.md`: An overview of the new UI architecture, including screenshots of the three main breakpoints.
+*   `MOBILE_GUIDE.md`: A detailed guide to the mobile navigation patterns, gestures, and component behaviors.
+*   `RESPONSIVE_CHECKLIST.md`: A checklist for testing the application's responsiveness and functionality across different devices and screen sizes.
+
+#### 9.3.2. E2E and Visual Regression Tests
+
+End-to-end tests will be written to cover critical user flows, such as toggling the UI, navigating on mobile, and performing searches. Visual regression tests will be implemented to automatically detect any unintended changes to the UI's appearance across the desktop, tablet, and mobile layouts.
+
+#### 9.3.3. Accessibility Audit Checklist
+
+A final checklist will be created to document the results of the accessibility audit, confirming that all WCAG 2.1 AA criteria have been met. This will serve as a record of compliance and a guide for future development.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi_preview.html b/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi_preview.html
new file mode 100644
index 0000000..b3e7342
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/Kimi/ObsiViewer_NewInterface_Nimbus_V2_Kimi_preview.html
@@ -0,0 +1,1487 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>FuseBase Anatomy: A Product Design Deep Dive</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/>
+    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+    <style>
+        :root {
+            --primary: #064e3b;
+            --primary-content: #ffffff;
+            --secondary: #0891b2;
+            --accent: #06b6d4;
+            --neutral: #374151;
+            --base-100: #fefefe;
+            --base-200: #f9fafb;
+            --base-300: #f3f4f6;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.7;
+            color: var(--neutral);
+        }
+        
+        .serif {
+            font-family: 'Crimson Text', serif;
+        }
+        
+        .toc-fixed {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 280px;
+            height: 100vh;
+            background: var(--base-100);
+            border-right: 1px solid var(--base-300);
+            z-index: 50;
+            overflow-y: auto;
+            padding: 2rem 1.5rem;
+        }
+        
+        .main-content {
+            margin-left: 280px;
+            min-height: 100vh;
+        }
+        
+        .hero-overlay {
+            background: linear-gradient(135deg, rgba(6, 78, 59, 0.9) 0%, rgba(8, 145, 178, 0.8) 100%);
+        }
+        
+        .section-divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--base-300), transparent);
+            margin: 4rem 0;
+        }
+        
+        @media (max-width: 1024px) {
+            .toc-fixed {
+                transform: translateX(-100%);
+                transition: transform 0.3s ease;
+            }
+            
+            .toc-fixed.open {
+                transform: translateX(0);
+            }
+            
+            .main-content {
+                margin-left: 0;
+            }
+        }
+        
+        .citation-link {
+            color: var(--secondary);
+            text-decoration: none;
+            font-weight: 500;
+            border-bottom: 1px solid transparent;
+            transition: border-color 0.2s ease;
+        }
+        
+        .citation-link:hover {
+            border-bottom-color: var(--secondary);
+        }
+        
+        .toc-link {
+            display: block;
+            padding: 0.5rem 0;
+            color: var(--neutral);
+            text-decoration: none;
+            border-left: 2px solid transparent;
+            padding-left: 1rem;
+            margin-left: -1rem;
+            transition: all 0.2s ease;
+        }
+        
+        .toc-link:hover, .toc-link.active {
+            color: var(--primary);
+            border-left-color: var(--accent);
+            background: var(--base-200);
+        }
+        
+        .toc-link.sub {
+            font-size: 0.875rem;
+            padding-left: 2rem;
+            margin-left: -1rem;
+        }
+        
+        .highlight-box {
+            background: linear-gradient(135deg, var(--base-200) 0%, rgba(8, 145, 178, 0.05) 100%);
+            border-left: 4px solid var(--accent);
+        }
+        
+        .bento-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin: 2rem 0;
+        }
+        
+        @media (max-width: 768px) {
+            .bento-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        .layout-visual {
+            background: var(--base-100);
+            border: 2px solid var(--base-300);
+            border-radius: 8px;
+            padding: 1rem;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .layout-visual::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+        }
+        
+        .panel {
+            border: 1px solid var(--base-300);
+            border-radius: 6px;
+            background: var(--base-200);
+        }
+        
+        .filter-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: var(--base-200);
+            border: 1px solid var(--base-300);
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--neutral);
+            transition: all 0.2s ease;
+        }
+        
+        .filter-chip:hover {
+            background: var(--base-300);
+            border-color: var(--accent);
+        }
+        
+        .filter-chip.active {
+            background: var(--primary);
+            color: var(--primary-content);
+            border-color: var(--primary);
+        }
+        
+        .filter-badge {
+            background: var(--accent);
+            color: white;
+            padding: 0.25rem 0.5rem;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+    </style>
+  <base target="_blank">
+</head>
+
+  <body class="bg-gray-50">
+    <!-- Table of Contents -->
+    <nav class="toc-fixed">
+      <div class="mb-8">
+        <h3 class="serif text-xl font-semibold text-gray-800 mb-4">Table of Contents</h3>
+      </div>
+
+      <div class="space-y-1">
+        <a href="#hero" class="toc-link">Overview</a>
+        <a href="#philosophy" class="toc-link">Product Philosophy</a>
+        <a href="#workspace" class="toc-link sub">Workspace-First</a>
+        <a href="#bi-axial" class="toc-link sub">Bi-Axial Organization</a>
+        <a href="#search-first" class="toc-link sub">Search-First Approach</a>
+        <a href="#progressive" class="toc-link sub">Progressive Disclosure</a>
+        <a href="#portals" class="toc-link sub">Content Facades</a>
+
+        <a href="#layout" class="toc-link">Global Layout</a>
+        <a href="#topbar" class="toc-link sub">Top Bar</a>
+        <a href="#sidebar" class="toc-link sub">Left Column</a>
+        <a href="#center" class="toc-link sub">Center Column</a>
+        <a href="#right" class="toc-link sub">Right Panel</a>
+
+        <a href="#micro-interactions" class="toc-link">Micro-Interactions</a>
+        <a href="#content" class="toc-link">Special Content Types</a>
+        <a href="#accessibility" class="toc-link">Accessibility</a>
+        <a href="#story" class="toc-link">Implicit UX</a>
+        <a href="#principles" class="toc-link">Core Principles</a>
+      </div>
+
+      <div class="mt-12 pt-8 border-t border-gray-200">
+        <p class="text-xs text-gray-500 leading-relaxed">
+          An anatomical analysis of FuseBase&#39;s interface design, exploring the philosophical foundations and architectural patterns that enable its distinctive user experience.
+        </p>
+      </div>
+    </nav>
+
+    <!-- Mobile TOC Toggle -->
+    <button id="tocToggle" class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded shadow-lg">
+      <i class="fas fa-bars text-gray-600"></i>
+    </button>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Hero Section -->
+      <section id="hero" class="relative min-h-screen flex items-center">
+        <div class="hero-overlay absolute inset-0"></div>
+
+        <div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 md:px-8 py-16">
+          <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+            <div class="lg:col-span-7">
+              <h1 class="serif text-3xl sm:text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+                <em class="block text-xl sm:text-2xl lg:text-3xl font-normal text-cyan-200 mb-4">
+                  The Anatomy of
+                </em>
+                FuseBase Interface Design
+              </h1>
+
+              <p class="text-base sm:text-lg lg:text-xl text-gray-200 mb-8 max-w-2xl">
+                A comprehensive analysis of the philosophical foundations, architectural patterns, and micro-interactions that define one of the most efficient knowledge management interfaces.
+              </p>
+
+              <div class="flex flex-wrap items-center gap-x-6 gap-y-3 text-gray-300">
+                <span class="flex items-center gap-2">
+                  <i class="fas fa-layer-group"></i>
+                  3-Panel Architecture
+                </span>
+                <span class="flex items-center gap-2">
+                  <i class="fas fa-filter"></i>
+                  Stateful Filtering
+                </span>
+                <span class="flex items-center gap-2">
+                  <i class="fas fa-mobile-alt"></i>
+                  Progressive Disclosure
+                </span>
+              </div>
+            </div>
+
+            <div class="lg:col-span-5 mt-8 lg:mt-0">
+              <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 sm:p-6 lg:p-8 border border-white/20">
+                <div class="bento-grid">
+                  <div class="highlight-box p-4 sm:p-6 rounded-xl">
+                    <h3 class="serif text-xl font-semibold text-gray-800 mb-3">Workspace-First</h3>
+                    <p class="text-gray-600 text-sm">Isolated content universes that switch contexts completely</p>
+                  </div>
+
+                  <div class="highlight-box p-4 sm:p-6 rounded-xl">
+                    <h3 class="serif text-xl font-semibold text-gray-800 mb-3">Bi-Axial Org</h3>
+                    <p class="text-gray-600 text-sm">Folders for hierarchy, tags for cross-cutting discovery</p>
+                  </div>
+
+                  <div class="highlight-box p-4 sm:p-6 rounded-xl">
+                    <h3 class="serif text-xl font-semibold text-gray-800 mb-3">Search Priority</h3>
+                    <p class="text-gray-600 text-sm">Persistent filters with immediate context feedback</p>
+                  </div>
+
+                  <div class="highlight-box p-4 sm:p-6 rounded-xl">
+                    <h3 class="serif text-xl font-semibold text-gray-800 mb-3">Portal Publishing</h3>
+                    <p class="text-gray-600 text-sm">Seamless transition from private creation to public sharing</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Product Philosophy -->
+      <section id="philosophy" class="py-24 bg-white">
+        <div class="max-w-4xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Product Philosophy</h2>
+
+          <div class="prose prose-lg max-w-none">
+            <p class="text-xl text-gray-600 mb-12 text-center">
+              The interface design is guided by five core philosophical principles that dictate every aspect of the user experience.
+            </p>
+
+            <!-- Workspace-First -->
+            <div id="workspace" class="mb-16">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <span class="w-2 h-8 bg-emerald-600 rounded-full"></span>
+                Workspace-First Architecture
+              </h3>
+
+              <div class="bg-gray-50 rounded-xl p-8 mb-8">
+                <p class="text-lg leading-relaxed">
+                  Every element of content—pages, folders, tags, and team members—exists within an isolated
+                  <em>workspace</em>. Switching workspaces is not a filter but a complete context switch into a new
+                  content universe. This architecture prevents cognitive overload and maintains strict separation
+                  between different projects or life domains.
+                  <a href="https://thefusebase.com/guides/basics/workspaces/" class="citation-link" target="_blank">[1]</a>
+                </p>
+              </div>
+
+              <div class="layout-visual">
+                <h4 class="font-semibold text-gray-800 mb-4">Workspace Context Model</h4>
+                <div class="grid grid-cols-3 gap-4 mb-4">
+                  <div class="panel p-4 text-center">
+                    <i class="fas fa-folder text-2xl text-emerald-600 mb-2"></i>
+                    <div class="text-sm font-medium">Project Alpha</div>
+                  </div>
+                  <div class="panel p-4 text-center">
+                    <i class="fas fa-folder text-2xl text-cyan-600 mb-2"></i>
+                    <div class="text-sm font-medium">Personal Notes</div>
+                  </div>
+                  <div class="panel p-4 text-center">
+                    <i class="fas fa-folder text-2xl text-blue-600 mb-2"></i>
+                    <div class="text-sm font-medium">Client Work</div>
+                  </div>
+                </div>
+                <p class="text-sm text-gray-600">
+                  Each workspace operates as a completely isolated environment with its own content universe.
+                </p>
+              </div>
+            </div>
+
+            <!-- Bi-Axial Organization -->
+            <div id="bi-axial" class="mb-16">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <span class="w-2 h-8 bg-cyan-600 rounded-full"></span>
+                Bi-Axial Organization System
+              </h3>
+
+              <div class="bg-cyan-50 rounded-xl p-8 mb-8">
+                <p class="text-lg leading-relaxed">
+                  Content is organized through two complementary systems: <strong>hierarchical folders</strong> for
+                  structured navigation and <strong>flat tags</strong> for cross-cutting discovery. This dual approach
+                  balances rigid organization with flexible, contextual discovery.
+                  <a href="https://thefusebase.com/guides/basics/folders-and-tags/" class="citation-link" target="_blank">[2]</a>
+                </p>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="layout-visual">
+                  <h4 class="font-semibold text-gray-800 mb-4">Folder Hierarchy</h4>
+                  <div class="space-y-2">
+                    <div class="flex items-center gap-2 p-2 bg-gray-100 rounded">
+                      <i class="fas fa-folder text-yellow-500"></i>
+                      <span class="font-medium">Projects</span>
+                    </div>
+                    <div class="flex items-center gap-2 p-2 bg-gray-100 rounded ml-4">
+                      <i class="fas fa-folder text-yellow-500"></i>
+                      <span>Q4 2024</span>
+                    </div>
+                    <div class="flex items-center gap-2 p-2 bg-gray-100 rounded ml-8">
+                      <i class="fas fa-file-alt text-gray-500"></i>
+                      <span>Strategy Doc</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="layout-visual">
+                  <h4 class="font-semibold text-gray-800 mb-4">Tag System</h4>
+                  <div class="flex flex-wrap gap-2">
+                    <span class="filter-chip active">
+                      #strategy
+                      <span class="filter-badge">12</span>
+                    </span>
+                    <span class="filter-chip active">
+                      #client-work
+                      <span class="filter-badge">8</span>
+                    </span>
+                    <span class="filter-chip">
+                      #urgent
+                    </span>
+                    <span class="filter-chip active">
+                      #review
+                      <span class="filter-badge">5</span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Search-First -->
+            <div id="search-first" class="mb-16">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <span class="w-2 h-8 bg-blue-600 rounded-full"></span>
+                Search-First Navigation
+              </h3>
+
+              <div class="bg-blue-50 rounded-xl p-8 mb-8">
+                <p class="text-lg leading-relaxed">
+                  The interface prioritizes search over manual navigation. A prominent search bar with persistent
+                  filter chips provides immediate feedback on the current context, making information retrieval
+                  the primary interaction model.
+                  <a href="https://thefusebase.com/guides/client-portal/how-to-manage-your-portal-from-the-web-version/" class="citation-link" target="_blank">[3]</a>
+                </p>
+              </div>
+
+              <div class="layout-visual">
+                <h4 class="font-semibold text-gray-800 mb-4">Search Interface</h4>
+                <div class="bg-white border border-gray-300 rounded-lg p-4 mb-4">
+                  <div class="flex items-center gap-2 mb-3">
+                    <i class="fas fa-search text-gray-400"></i>
+                    <input type="text" placeholder="Search everything..." class="flex-1 border-0 outline-0"/>
+                    <i class="fas fa-filter text-gray-400"></i>
+                  </div>
+                  <div class="flex gap-2">
+                    <span class="filter-chip active">
+                      All folders ▾
+                      <span class="filter-badge">+2</span>
+                    </span>
+                    <span class="filter-chip active">
+                      All tags ▾
+                      <span class="filter-badge">+1</span>
+                    </span>
+                    <span class="filter-chip">
+                      All pages ▾
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Progressive Disclosure -->
+            <div id="progressive" class="mb-16">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <span class="w-2 h-8 bg-purple-600 rounded-full"></span>
+                Progressive Disclosure
+              </h3>
+
+              <div class="bg-purple-50 rounded-xl p-8 mb-8">
+                <p class="text-lg leading-relaxed">
+                  Advanced features are revealed contextually and on-demand, preventing interface overwhelm.
+                  The hover-reveal pattern and contextual panels keep the interface clean while providing
+                  access to powerful functionality when needed.
+                </p>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="layout-visual">
+                  <h4 class="font-semibold text-gray-800 mb-4">Hover Reveal Pattern</h4>
+                  <div class="bg-gray-50 rounded-lg p-4 mb-3">
+                    <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded cursor-pointer">
+                      <div class="flex items-center gap-2">
+                        <i class="fas fa-folder text-yellow-500"></i>
+                        <span>Documents</span>
+                      </div>
+                      <i class="fas fa-plus text-gray-400 hover:text-blue-500"></i>
+                    </div>
+                  </div>
+                  <p class="text-sm text-gray-600">
+                    Subfolder creation button appears only on hover, maintaining visual cleanliness.
+                  </p>
+                </div>
+
+                <div class="layout-visual">
+                  <h4 class="font-semibold text-gray-800 mb-4">Contextual Panels</h4>
+                  <div class="relative">
+                    <div class="bg-white border rounded-lg p-4 text-center">
+                      <i class="fas fa-hamburger text-2xl text-gray-400 mb-2"></i>
+                      <div class="text-sm">Click to show outline</div>
+                    </div>
+                    <div class="absolute right-0 top-0 bottom-0 w-64 bg-gray-100 border rounded-r-lg p-4 hidden">
+                      <h5 class="font-medium mb-2">Document Outline</h5>
+                      <div class="text-sm space-y-1">
+                        <div>• Introduction</div>
+                        <div>• Main Content</div>
+                        <div>• Conclusion</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Portals -->
+            <div id="portals" class="mb-16">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <span class="w-2 h-8 bg-indigo-600 rounded-full"></span>
+                Content with Multiple Facades
+              </h3>
+
+              <div class="bg-indigo-50 rounded-xl p-8 mb-8">
+                <p class="text-lg leading-relaxed">
+                  A single piece of content can exist in multiple contexts. The Portal feature enables seamless
+                  publishing from private workspace to branded external spaces, creating a continuum between
+                  creation and dissemination.
+                  <a href="https://thefusebase.com/guides/client-portal/how-to-manage-your-portal-from-the-web-version/" class="citation-link" target="_blank">[3]</a>
+                  <a href="https://thefusebase.com/guides/embedding-sharing/shared-folders-and-pages/" class="citation-link" target="_blank">[8]</a>
+                </p>
+              </div>
+
+              <div class="layout-visual">
+                <h4 class="font-semibold text-gray-800 mb-4">Publishing Workflow</h4>
+                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                  <div class="flex items-center gap-3">
+                    <i class="fas fa-edit text-blue-500"></i>
+                    <div>
+                      <div class="font-medium">Private Document</div>
+                      <div class="text-sm text-gray-600">Editing in workspace</div>
+                    </div>
+                  </div>
+                  <i class="fas fa-arrow-right text-gray-400"></i>
+                  <div class="flex items-center gap-3">
+                    <i class="fas fa-globe text-green-500"></i>
+                    <div>
+                      <div class="font-medium">Public Portal</div>
+                      <div class="text-sm text-gray-600">Branded &amp; shared</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div class="section-divider"></div>
+
+      <!-- Global Layout -->
+      <section id="layout" class="py-24 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Global Layout Architecture</h2>
+
+          <p class="text-xl text-gray-600 mb-16 text-center max-w-3xl mx-auto">
+            The interface is built on a stable three-panel foundation with transient overlays for focused interactions.
+          </p>
+
+          <!-- Three-Panel Layout Visualization -->
+          <div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-16">
+            <div class="grid grid-cols-12 h-96">
+              <!-- Left Sidebar -->
+              <div class="col-span-3 bg-gray-50 border-r border-gray-200 p-6">
+                <div class="flex items-center gap-2 mb-6">
+                  <i class="fas fa-bars text-gray-600"></i>
+                  <h3 class="font-semibold text-gray-900">Navigation</h3>
+                </div>
+                <div class="space-y-3">
+                  <div class="flex items-center gap-2 p-2 bg-blue-100 rounded text-blue-700">
+                    <i class="fas fa-folder text-yellow-500"></i>
+                    <span class="font-medium">Current Folder</span>
+                  </div>
+                  <div class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
+                    <i class="fas fa-folder text-yellow-500"></i>
+                    <span>Other Folders</span>
+                  </div>
+                  <div class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer">
+                    <i class="fas fa-tag text-green-500"></i>
+                    <span>Tags</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Center Column -->
+              <div class="col-span-5 border-r border-gray-200 p-6">
+                <div class="flex items-center gap-2 mb-6">
+                  <i class="fas fa-list text-gray-600"></i>
+                  <h3 class="font-semibold text-gray-900">Results</h3>
+                </div>
+                <div class="space-y-4">
+                  <div class="p-3 bg-blue-50 border-l-4 border-blue-500 rounded">
+                    <div class="font-medium text-gray-900">Selected Page</div>
+                    <div class="text-sm text-gray-600 mt-1">This is the current page with highlights...</div>
+                  </div>
+                  <div class="p-3 hover:bg-gray-50 rounded cursor-pointer">
+                    <div class="font-medium text-gray-700">Other Page</div>
+                    <div class="text-sm text-gray-500 mt-1">Snippet preview...</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Right Panel -->
+              <div class="col-span-4 p-6">
+                <div class="flex items-center gap-2 mb-6">
+                  <i class="fas fa-file-alt text-gray-600"></i>
+                  <h3 class="font-semibold text-gray-900">Content</h3>
+                </div>
+                <div class="h-full bg-blue-50 rounded-lg p-6 flex items-center justify-center">
+                  <div class="text-center">
+                    <i class="fas fa-eye text-3xl text-blue-500 mb-4"></i>
+                    <div class="font-medium text-blue-900">Page Content</div>
+                    <div class="text-sm text-blue-600">With ToC panel</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Detailed Panel Descriptions -->
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Top Bar -->
+            <div id="topbar" class="space-y-6">
+              <h3 class="serif text-2xl font-semibold text-gray-900">Top Bar</h3>
+
+              <div class="bg-white rounded-xl p-6 shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <h4 class="font-semibold text-gray-800">Global Controls</h4>
+                  <i class="fas fa-cog text-gray-400"></i>
+                </div>
+
+                <div class="space-y-4">
+                  <div class="p-3 bg-gray-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-search text-gray-600"></i>
+                      <span class="font-medium">Search Field</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Large, centered search with filter icon</p>
+                  </div>
+
+                  <div class="p-3 bg-cyan-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-plus-circle text-cyan-600"></i>
+                      <span class="font-medium">+ Page Button</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Turquoise CTA for immediate page creation</p>
+                  </div>
+
+                  <div class="p-3 bg-gray-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-tools text-gray-600"></i>
+                      <span class="font-medium">Content Toolbar</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Ask AI, Add to portal, Share, Fullscreen</p>
+                  </div>
+                </div>
+
+                <div class="mt-6 p-4 bg-gray-50 rounded-lg">
+                  <p class="text-sm text-gray-600">
+                    <strong>Reference:</strong>
+                    <a href="https://thefusebase.com/guides/?utm_source=chatgpt.com" class="citation-link" target="_blank">
+                      Guides Archive [4]
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Left Column -->
+            <div id="sidebar" class="space-y-6">
+              <h3 class="serif text-2xl font-semibold text-gray-900">Left Column</h3>
+
+              <div class="bg-white rounded-xl p-6 shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <h4 class="font-semibold text-gray-800">Primary Navigation</h4>
+                  <i class="fas fa-compass text-gray-400"></i>
+                </div>
+
+                <div class="space-y-4">
+                  <div class="p-3 bg-gray-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-bolt text-yellow-500"></i>
+                      <span class="font-medium">Quick Links</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Frequently accessed items</p>
+                  </div>
+
+                  <div class="p-3 bg-yellow-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-folder text-yellow-600"></i>
+                      <span class="font-medium">Folders</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Hierarchical tree with disclosure triangles</p>
+                    <div class="mt-2 text-xs text-gray-500">
+                      <i class="fas fa-plus-circle text-green-500 mr-1"></i>
+                      Hover-reveal subfolder creation
+                    </div>
+                  </div>
+
+                  <div class="p-3 bg-green-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-tags text-green-600"></i>
+                      <span class="font-medium">Tags</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Flat list with emoji support</p>
+                  </div>
+                </div>
+
+                <div class="mt-6 p-4 bg-gray-50 rounded-lg">
+                  <p class="text-sm text-gray-600">
+                    <strong>Reference:</strong>
+                    <a href="https://thefusebase.com/guides/basics/folders-and-tags/?utm_source=chatgpt.com" class="citation-link" target="_blank">
+                      Folders and Tags [2]
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Center Column -->
+            <div id="center" class="space-y-6">
+              <h3 class="serif text-2xl font-semibold text-gray-900">Center Column</h3>
+
+              <div class="bg-white rounded-xl p-6 shadow-sm">
+                <div class="flex items-center justify-between mb-4">
+                  <h4 class="font-semibold text-gray-800">Index &amp; Results</h4>
+                  <i class="fas fa-th-list text-gray-400"></i>
+                </div>
+
+                <div class="space-y-4">
+                  <div class="p-3 bg-blue-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-filter text-blue-600"></i>
+                      <span class="font-medium">Filter Chips</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Stateful filters with badges and carets</p>
+                  </div>
+
+                  <div class="p-3 bg-gray-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-file-alt text-gray-600"></i>
+                      <span class="font-medium">Page List</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Compact items with title, date, snippet</p>
+                  </div>
+
+                  <div class="p-3 bg-green-50 rounded-lg">
+                    <div class="flex items-center gap-2 mb-2">
+                      <i class="fas fa-search text-green-600"></i>
+                      <span class="font-medium">Found Pages: N</span>
+                    </div>
+                    <p class="text-sm text-gray-600">Clear feedback with reset option</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Panel Details -->
+          <div id="right" class="mt-16">
+            <h3 class="serif text-2xl font-semibold text-gray-900 mb-8 text-center">Right Panel: Reader &amp; Editor</h3>
+
+            <div class="bg-white rounded-xl p-8 shadow-sm">
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div>
+                  <h4 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i class="fas fa-file-alt text-blue-600"></i>
+                    Content Display
+                  </h4>
+
+                  <div class="space-y-4">
+                    <div class="p-4 bg-blue-50 rounded-lg">
+                      <div class="font-medium text-blue-900 mb-2">Rich Content Support</div>
+                      <ul class="text-sm text-blue-700 space-y-1">
+                        <li>• Headings, lists, inline code</li>
+                        <li>• Code fences and callouts</li>
+                        <li>• Embedded bookmark cards</li>
+                        <li>• Rich media objects</li>
+                      </ul>
+                    </div>
+
+                    <div class="p-4 bg-yellow-50 rounded-lg">
+                      <div class="font-medium text-yellow-900 mb-2">Bookmark Cards</div>
+                      <p class="text-sm text-yellow-700">
+                        Enriched URL previews with title, description, and thumbnails for better scanability.
+                        <a href="https://nimbusweb.me/guides/basics/bookmarks/" class="citation-link" target="_blank">[6]</a>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i class="fas fa-tools text-gray-600"></i>
+                    Document Toolbar
+                  </h4>
+
+                  <div class="space-y-4">
+                    <div class="p-4 bg-purple-50 rounded-lg">
+                      <div class="font-medium text-purple-900 mb-2">AI Integration</div>
+                      <div class="text-sm text-purple-700">Ask AI for generation, summarization, and analysis</div>
+                    </div>
+
+                    <div class="p-4 bg-green-50 rounded-lg">
+                      <div class="font-medium text-green-900 mb-2">Portal Publishing</div>
+                      <div class="text-sm text-green-700">Add to portal with drag &amp; drop organization</div>
+                    </div>
+
+                    <div class="p-4 bg-blue-50 rounded-lg">
+                      <div class="font-medium text-blue-900 mb-2">Sharing Options</div>
+                      <div class="text-sm text-blue-700">Direct sharing and permission management</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Outline Panel -->
+              <div class="mt-8 p-4 bg-gray-50 rounded-lg">
+                <h5 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <i class="fas fa-list text-gray-600"></i>
+                  Contextual Outline Panel
+                </h5>
+                <p class="text-sm text-gray-600 mb-4">
+                  Floating hamburger button triggers slide-out outline with H1-H6 navigation.
+                  Progressive disclosure for long document navigation.
+                </p>
+                <div class="flex items-center justify-center">
+                  <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-300">
+                    <i class="fas fa-hamburger text-gray-600"></i>
+                  </div>
+                  <div class="w-64 h-48 bg-white border rounded-lg shadow-lg ml-4 p-4">
+                    <div class="font-medium mb-3">Document Outline</div>
+                    <div class="space-y-2 text-sm">
+                      <div class="font-medium">• Introduction</div>
+                      <div class="ml-3">• Background</div>
+                      <div class="ml-3">• Problem Statement</div>
+                      <div class="font-medium">• Solution</div>
+                      <div class="ml-3">• Implementation</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div class="section-divider"></div>
+
+      <!-- Micro-interactions -->
+      <section id="micro-interactions" class="py-24 bg-white">
+        <div class="max-w-4xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Micro-Interactions &amp; Patterns</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="space-y-6">
+              <div class="highlight-box p-6 rounded-xl">
+                <h3 class="serif text-xl font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <i class="fas fa-mouse-pointer text-blue-600"></i>
+                  Hover Reveal
+                </h3>
+                <p class="text-gray-600 mb-4">
+                  The &#34;+&#34; subfolder creation button appears only on hover, maintaining visual cleanliness
+                  while providing quick access to advanced functionality.
+                </p>
+                <div class="bg-white p-4 rounded-lg border">
+                  <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
+                    <div class="flex items-center gap-2">
+                      <i class="fas fa-folder text-yellow-500"></i>
+                      <span>Documents</span>
+                    </div>
+                    <i class="fas fa-plus text-green-500 opacity-0 hover:opacity-100 transition-opacity"></i>
+                  </div>
+                </div>
+              </div>
+
+              <div class="highlight-box p-6 rounded-xl">
+                <h3 class="serif text-xl font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <i class="fas fa-check-square text-green-600"></i>
+                  Persistent Selection
+                </h3>
+                <p class="text-gray-600 mb-4">
+                  Active items maintain visual highlighting with turquoise borders and backgrounds,
+                  preventing loss of context during navigation.
+                </p>
+                <div class="bg-white p-4 rounded-lg border">
+                  <div class="p-3 bg-blue-50 border-l-4 border-blue-500 rounded">
+                    <div class="font-medium">Currently Selected Page</div>
+                    <div class="text-sm text-gray-600">Maintains visual anchor during interaction</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="space-y-6">
+              <div class="highlight-box p-6 rounded-xl">
+                <h3 class="serif text-xl font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <i class="fas fa-eraser text-red-600"></i>
+                  Clear Everywhere
+                </h3>
+                <p class="text-gray-600 mb-4">
+                  Reset options are omnipresent in pickers and global views, reducing exploration cost
+                  and encouraging experimentation with filters.
+                </p>
+                <div class="bg-white p-4 rounded-lg border flex items-center justify-between">
+                  <span class="text-sm">Found pages: 47</span>
+                  <button class="text-red-500 hover:text-red-700 text-sm font-medium">Clear</button>
+                </div>
+              </div>
+
+              <div class="highlight-box p-6 rounded-xl">
+                <h3 class="serif text-xl font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                  <i class="fas fa-font text-purple-600"></i>
+                  Visual Hierarchy
+                </h3>
+                <p class="text-gray-600 mb-4">
+                  Strict differentiation between H1-H3 with generous margins and comfortable
+                  line-height for optimal long-form reading experience.
+                </p>
+                <div class="bg-white p-4 rounded-lg border space-y-3">
+                  <div class="text-2xl font-bold">Heading 1</div>
+                  <div class="text-xl font-semibold text-gray-700">Heading 2</div>
+                  <div class="text-lg font-medium text-gray-600">Heading 3</div>
+                  <div class="text-gray-600 leading-relaxed">
+                    Body text with comfortable line height for extended reading sessions...
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Special Content Types -->
+      <section id="content" class="py-24 bg-gray-50">
+        <div class="max-w-4xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Special Content Types</h2>
+
+          <div class="space-y-12">
+            <div class="bg-white rounded-xl p-8 shadow-sm">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <i class="fas fa-bookmark text-yellow-600"></i>
+                Rich Bookmark Cards
+              </h3>
+
+              <p class="text-lg text-gray-600 mb-6">
+                Saved URLs are displayed as enriched cards with title, description, and thumbnail images,
+                providing significantly better scanability than simple text links.
+                <a href="https://nimbusweb.me/guides/basics/bookmarks/" class="citation-link" target="_blank">[6]</a>
+              </p>
+
+              <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
+                <img src="https://kimi-web-img.moonshot.cn/img/miro.medium.com/7af3d08e9a1335721d6fa77a006d93ac0493852f.png" alt="Website preview card" class="w-full h-48 object-cover" size="medium" aspect="wide" style="photo" query="website preview card" referrerpolicy="no-referrer" data-modified="1" data-score="0.00"/>
+                <div class="p-6">
+                  <h4 class="font-semibold text-gray-900 mb-2">Article Title or Page Name</h4>
+                  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
+                    Description or excerpt from the saved web page, providing context about the content...
+                  </p>
+                  <div class="flex items-center justify-between text-xs text-gray-500">
+                    <span>example.com</span>
+                    <span>Saved 2 days ago</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white rounded-xl p-8 shadow-sm">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <i class="fas fa-table text-blue-600"></i>
+                Tables &amp; Databases
+              </h3>
+
+              <p class="text-lg text-gray-600 mb-6">
+                Rich table views with sorting, filtering, and cell-level commenting capabilities,
+                enabling structured data management within the knowledge base.
+                <a href="https://thefusebase.com/guides/?utm_source=chatgpt.com" class="citation-link" target="_blank">[4]</a>
+              </p>
+
+              <div class="overflow-x-auto">
+                <table class="w-full border-collapse border border-gray-300">
+                  <thead>
+                    <tr class="bg-gray-50">
+                      <th class="border border-gray-300 p-3 text-left font-medium">Column</th>
+                      <th class="border border-gray-300 p-3 text-left font-medium">Type</th>
+                      <th class="border border-gray-300 p-3 text-left font-medium">Features</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="border border-gray-300 p-3">Sortable</td>
+                      <td class="border border-gray-300 p-3">Boolean</td>
+                      <td class="border border-gray-300 p-3">✓</td>
+                    </tr>
+                    <tr>
+                      <td class="border border-gray-300 p-3">Filterable</td>
+                      <td class="border border-gray-300 p-3">Boolean</td>
+                      <td class="border border-gray-300 p-3">✓</td>
+                    </tr>
+                    <tr>
+                      <td class="border border-gray-300 p-3">Cell Comments</td>
+                      <td class="border border-gray-300 p-3">Boolean</td>
+                      <td class="border border-gray-300 p-3">✓</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="bg-white rounded-xl p-8 shadow-sm">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 flex items-center gap-3">
+                <i class="fas fa-cut text-green-600"></i>
+                Web Clipper Integration
+              </h3>
+
+              <p class="text-lg text-gray-600 mb-6">
+                Clean page capture without ads, maintaining consistency with the bookmark card display pattern.
+                The workflow follows capture → enrichment → sharing.
+                <a href="https://thefusebase.com/guides/web-clipper/nimbus-clipper-for-google-chrome/" class="citation-link" target="_blank">[7]</a>
+              </p>
+
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="text-center p-6 bg-gray-50 rounded-lg">
+                  <i class="fas fa-camera text-3xl text-blue-600 mb-4"></i>
+                  <h4 class="font-semibold text-gray-900 mb-2">Capture</h4>
+                  <p class="text-sm text-gray-600">Clean page saving without distractions</p>
+                </div>
+                <div class="text-center p-6 bg-gray-50 rounded-lg">
+                  <i class="fas fa-edit text-3xl text-green-600 mb-4"></i>
+                  <h4 class="font-semibold text-gray-900 mb-2">Enrich</h4>
+                  <p class="text-sm text-gray-600">Add notes, tags, and organization</p>
+                </div>
+                <div class="text-center p-6 bg-gray-50 rounded-lg">
+                  <i class="fas fa-share text-3xl text-purple-600 mb-4"></i>
+                  <h4 class="font-semibold text-gray-900 mb-2">Share</h4>
+                  <p class="text-sm text-gray-600">Publish to portals or share links</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div class="section-divider"></div>
+
+      <!-- Accessibility -->
+      <section id="accessibility" class="py-24 bg-white">
+        <div class="max-w-4xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Accessibility &amp; Usability</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div>
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6">WCAG 2.1 AA Compliance</h3>
+
+              <div class="space-y-6">
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-adjust text-blue-600"></i>
+                    Sufficient Color Contrast
+                  </h4>
+                  <p class="text-gray-600 mb-4">
+                    All text maintains 4.5:1 contrast ratio against backgrounds,
+                    ensuring readability for users with low vision.
+                  </p>
+                  <div class="flex items-center gap-4">
+                    <div class="flex-1 h-8 bg-gray-900 rounded flex items-center justify-center">
+                      <span class="text-white text-sm font-medium">4.5:1</span>
+                    </div>
+                    <div class="flex-1 h-8 bg-gray-100 rounded flex items-center justify-center">
+                      <span class="text-gray-900 text-sm font-medium">4.5:1</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-keyboard text-green-600"></i>
+                    Visible Focus Indicators
+                  </h4>
+                  <p class="text-gray-600 mb-4">
+                    Interactive elements display clear focus states for keyboard navigation,
+                    supporting users who don&#39;t use pointing devices.
+                  </p>
+                  <div class="flex gap-2">
+                    <button class="px-4 py-2 bg-blue-600 text-white rounded focus:ring-2 focus:ring-blue-300">
+                      Focused
+                    </button>
+                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded">
+                      Normal
+                    </button>
+                  </div>
+                </div>
+
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-search-plus text-purple-600"></i>
+                    Zoom Compatibility
+                  </h4>
+                  <p class="text-gray-600">
+                    Layout remains functional and readable at up to 200% zoom,
+                    reflowing content to avoid horizontal scrolling.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6">Touch Accessibility</h3>
+
+              <div class="space-y-6">
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-hand-pointer text-orange-600"></i>
+                    Minimum Touch Target
+                  </h4>
+                  <p class="text-gray-600 mb-4">
+                    All interactive elements maintain minimum 44×44px touch targets
+                    for accurate tapping on mobile devices.
+                  </p>
+                  <div class="w-44 h-44 bg-orange-100 rounded-lg flex items-center justify-center">
+                    <div class="w-11 h-11 bg-orange-500 rounded flex items-center justify-center">
+                      <span class="text-white text-sm font-bold">44px</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-tags text-indigo-600"></i>
+                    Descriptive ARIA Labels
+                  </h4>
+                  <p class="text-gray-600">
+                    Icon buttons include descriptive aria-label attributes for screen reader users,
+                    ensuring all functionality is accessible to users with visual impairments.
+                  </p>
+                </div>
+
+                <div class="highlight-box p-6 rounded-xl">
+                  <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
+                    <i class="fas fa-brain text-teal-600"></i>
+                    Cognitive Load Reduction
+                  </h4>
+                  <p class="text-gray-600">
+                    Rarely used options are hidden behind hover-reveal patterns,
+                    while common actions remain always visible to reduce cognitive overhead.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Implicit UX Story -->
+      <section id="story" class="py-24 bg-gray-50">
+        <div class="max-w-4xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">The Implicit UX Story</h2>
+
+          <p class="text-xl text-gray-600 mb-16 text-center">
+            The interface tells users an implicit story about how to work effectively with their knowledge.
+          </p>
+
+          <div class="space-y-8">
+            <!-- Four-step workflow -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div class="bg-white p-6 rounded-xl shadow-sm text-center">
+                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <i class="fas fa-search text-2xl text-blue-600"></i>
+                </div>
+                <h3 class="font-semibold text-gray-900 mb-2">1. Find</h3>
+                <p class="text-sm text-gray-600">
+                  Start with search, refine with folder/tag filters.
+                  The interface makes this the most prominent action.
+                </p>
+              </div>
+
+              <div class="bg-white p-6 rounded-xl shadow-sm text-center">
+                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <i class="fas fa-compass text-2xl text-green-600"></i>
+                </div>
+                <h3 class="font-semibold text-gray-900 mb-2">2. Browse</h3>
+                <p class="text-sm text-gray-600">
+                  Use the central index as a dashboard when exploring
+                  folders, with dates and snippets providing context.
+                </p>
+              </div>
+
+              <div class="bg-white p-6 rounded-xl shadow-sm text-center">
+                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <i class="fas fa-edit text-2xl text-purple-600"></i>
+                </div>
+                <h3 class="font-semibold text-gray-900 mb-2">3. Edit</h3>
+                <p class="text-sm text-gray-600">
+                  Enrich content in the right panel with tags, bookmarks,
+                  and attachments. The toolbar provides all tools in context.
+                </p>
+              </div>
+
+              <div class="bg-white p-6 rounded-xl shadow-sm text-center">
+                <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <i class="fas fa-share text-2xl text-orange-600"></i>
+                </div>
+                <h3 class="font-semibold text-gray-900 mb-2">4. Diffuse</h3>
+                <p class="text-sm text-gray-600">
+                  Share directly or publish to branded portals.
+                  The transition from private to public is seamless.
+                </p>
+              </div>
+            </div>
+
+            <!-- Experience Continuum -->
+            <div class="bg-white rounded-xl p-8 shadow-sm">
+              <h3 class="serif text-2xl font-semibold text-gray-900 mb-6">The Continuum of Experience</h3>
+
+              <div class="flex items-center justify-between mb-8">
+                <div class="text-center">
+                  <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                    <i class="fas fa-pen text-blue-600"></i>
+                  </div>
+                  <div class="text-sm font-medium">Writing</div>
+                </div>
+                <div class="flex-1 h-1 bg-gradient-to-r from-blue-500 to-green-500 mx-4"></div>
+                <div class="text-center">
+                  <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                    <i class="fas fa-globe text-green-600"></i>
+                  </div>
+                  <div class="text-sm font-medium">Publishing</div>
+                </div>
+              </div>
+
+              <p class="text-lg text-gray-600 text-center">
+                The omnipresent &#34;Add to portal&#34; and &#34;Share&#34; buttons create a natural continuum
+                between creation and dissemination, treating publishing as a natural extension of writing.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div class="section-divider"></div>
+
+      <!-- Core Principles -->
+      <section id="principles" class="py-24 bg-white">
+        <div class="max-w-6xl mx-auto px-8">
+          <h2 class="serif text-4xl font-bold text-gray-900 mb-12 text-center">Core Principles for Redesign</h2>
+
+          <p class="text-xl text-gray-600 mb-16 text-center max-w-3xl mx-auto">
+            Eight fundamental principles that capture the essence of the Nimbus interface design philosophy.
+          </p>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-blue-600 mb-4">1</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Three Panels + Overlays</h3>
+              <p class="text-sm text-gray-600">
+                Stable navigation, index, and content panels with transient overlays for focused interactions.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-green-600 mb-4">2</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Persistent Stateful Filters</h3>
+              <p class="text-sm text-gray-600">
+                Always-visible chips with badges and carets providing continuous feedback on search context.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-purple-600 mb-4">3</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Rich Pickers</h3>
+              <p class="text-sm text-gray-600">
+                Advanced selection interfaces with local search, checkmarks, and clear/done actions.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-orange-50 to-orange-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-orange-600 mb-4">4</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Contextual Outline</h3>
+              <p class="text-sm text-gray-600">
+                On-demand table of contents triggered from within the page content itself.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-teal-50 to-teal-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-teal-600 mb-4">5</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Single Creation Action</h3>
+              <p class="text-sm text-gray-600">
+                Consistent &#34;+ Page&#34; CTA that always creates content in the current workspace context.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-indigo-600 mb-4">6</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Strict Workspaces</h3>
+              <p class="text-sm text-gray-600">
+                Complete isolation between workspaces with deliberate switching actions.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-yellow-600 mb-4">7</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Bi-Axial System</h3>
+              <p class="text-sm text-gray-600">
+                Complementary folders (hierarchy) and tags (cross-cutting) organization systems.
+              </p>
+            </div>
+
+            <div class="bg-gradient-to-br from-red-50 to-red-100 p-6 rounded-xl">
+              <div class="text-3xl font-bold text-red-600 mb-4">8</div>
+              <h3 class="font-semibold text-gray-900 mb-3">Omnipresent Sharing</h3>
+              <p class="text-sm text-gray-600">
+                Seamless continuum between writing and publishing with always-visible share options.
+              </p>
+            </div>
+          </div>
+
+          <!-- Implementation Checklist -->
+          <div class="mt-16 bg-gray-50 rounded-xl p-8">
+            <h3 class="serif text-2xl font-semibold text-gray-900 mb-6 text-center">Implementation Success Checklist</h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div>
+                <h4 class="font-semibold text-gray-800 mb-4">Desktop Experience</h4>
+                <ul class="space-y-2 text-sm">
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    3-column layout with resizable sidebar
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Fixed ToC panel for navigation
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Virtual scrolling for performance
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Complete keyboard navigation
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h4 class="font-semibold text-gray-800 mb-4">Mobile Adaptation</h4>
+                <ul class="space-y-2 text-sm">
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Bottom navigation with 4 tabs
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Sidebar drawer with swipe gestures
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Collapsible inline ToC
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Touch targets ≥ 44×44px
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h4 class="font-semibold text-gray-800 mb-4">Quality Metrics</h4>
+                <ul class="space-y-2 text-sm">
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Lighthouse ≥ 85 performance
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    WCAG 2.1 AA compliance
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Zero regression guarantee
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <i class="fas fa-check text-green-600"></i>
+                    Complete documentation
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="bg-gray-900 text-white py-16">
+        <div class="max-w-4xl mx-auto px-8 text-center">
+          <h3 class="serif text-2xl font-semibold mb-6">Design Philosophy in Action</h3>
+          <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+            This analysis reveals how thoughtful interface design creates not just usability,
+            but a coherent philosophy of knowledge management that scales from individual notes
+            to enterprise collaboration.
+          </p>
+
+          <div class="flex flex-wrap justify-center gap-6 text-sm text-gray-400">
+            <a href="https://thefusebase.com/guides/basics/workspaces/?utm_source=chatgpt.com" class="hover:text-white transition-colors" target="_blank">Workspaces</a>
+            <a href="https://thefusebase.com/guides/basics/folders-and-tags/?utm_source=chatgpt.com" class="hover:text-white transition-colors" target="_blank">Folders &amp; Tags</a>
+            <a href="https://thefusebase.com/guides/client-portal/how-to-manage-your-portal-from-the-web-version/?utm_source=chatgpt.com" class="hover:text-white transition-colors" target="_blank">Portal Management</a>
+            <a href="https://nimbusweb.me/guides/basics/bookmarks/?utm_source=chatgpt.com" class="hover:text-white transition-colors" target="_blank">Bookmarks</a>
+            <a href="https://thefusebase.com/guides/embedding-sharing/shared-folders-and-pages/?utm_source=chatgpt.com" class="hover:text-white transition-colors" target="_blank">Sharing</a>
+          </div>
+        </div>
+      </footer>
+    </main>
+
+    <script>
+        // Mobile TOC Toggle
+        const tocToggle = document.getElementById('tocToggle');
+        const toc = document.querySelector('.toc-fixed');
+        
+        tocToggle.addEventListener('click', function() {
+            toc.classList.toggle('open');
+        });
+
+        // Close TOC when clicking outside on mobile
+        document.addEventListener('click', function(event) {
+            if (window.innerWidth <= 1024 && toc.classList.contains('open')) {
+                if (!toc.contains(event.target) && event.target !== tocToggle) {
+                    toc.classList.remove('open');
+                }
+            }
+        });
+
+        // Handle window resize to ensure proper TOC state
+        function handleResize() {
+            if (window.innerWidth > 1024) {
+                toc.classList.remove('open');
+            }
+        }
+
+        window.addEventListener('resize', handleResize);
+        
+        // Smooth scrolling for TOC links
+        document.querySelectorAll('.toc-link').forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                    
+                    // Close mobile TOC
+                    if (window.innerWidth <= 1024) {
+                        toc.classList.remove('open');
+                    }
+                }
+            });
+        });
+        
+        // Active TOC highlighting
+        const observerOptions = {
+            root: null,
+            rootMargin: '-20% 0px -80% 0px',
+            threshold: 0
+        };
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    // Remove active class from all TOC links
+                    document.querySelectorAll('.toc-link').forEach(link => {
+                        link.classList.remove('active');
+                    });
+                    
+                    // Add active class to current section's TOC link
+                    const activeLink = document.querySelector(`a[href="#${entry.target.id}"]`);
+                    if (activeLink) {
+                        activeLink.classList.add('active');
+                    }
+                }
+            });
+        }, observerOptions);
+        
+        // Observe all sections
+        document.querySelectorAll('section[id]').forEach(section => {
+            observer.observe(section);
+        });
+        
+        // Demo interactions
+        document.querySelectorAll('.filter-chip').forEach(chip => {
+            chip.addEventListener('click', function() {
+                this.classList.toggle('active');
+            });
+        });
+    </script>
+  
+
+</body></html>
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus.md
new file mode 100644
index 0000000..6a472eb
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus.md
@@ -0,0 +1,760 @@
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## ObsiViewer → UI/UX "Nimbus-like" (simple, dense, rapide)
+
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX designer**. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+
+**Contrainte majeure :** L'interface doit être **100% responsive** (Desktop + Mobile). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état.
+
+---
+
+## Contexte rapide
+
+* Projet : **ObsiViewer** (Angular 20 + Tailwind, Node/Express backend).
+* Objectif : Refondre l'interface selon un design **Nimbus Notes**-like.
+* Cœurs d'usage : navigation par **dossiers**, **tags**, **recherche**, **lecture markdown** plein écran, **ToC** à droite, **tri et filtres** rapides.
+* **Nouveauté** : Design adaptatif complet (Desktop/Mobile/Tablet) avec UI toggle persisté.
+
+---
+
+## 🎯 Objectif final (résumé)
+
+### Desktop (≥1024px)
+Refondre l'interface ObsiViewer en **3 colonnes** :
+
+1. **Sidebar gauche** (Quick Links, Dossiers arborescents, Tags) — Redimensionnable.
+2. **Colonne centrale** Liste des pages (recherche, filtres dossiers/tags, tris, résultats virtualisés).
+3. **Vue de page** à droite (lecture markdown, barre d'actions, **panneau sommaire/ToC** docké à l'extrême droite).
+
+Le tout **compact, performant, thème clair/sombre**, navigation au clavier, états persistés localement.
+
+### Mobile/Tablet (<1024px)
+Une navigation **par onglets/drawer** intelligente :
+
+- **Tab 1 : Sidebar** (dossiers, tags, recherche) — Panneau full-width ou drawer collapsible.
+- **Tab 2 : Liste** (résultats de recherche) — Full-width scrollable.
+- **Tab 3 : Page** (markdown) — Full-width avec ToC inline collapsible ou drawer.
+
+**Gestures** : Swipe horizontal pour navigation onglets, pull-to-refresh, tap = open item.
+
+---
+
+## 📋 Architecture Feature Flag & Toggle
+
+### 1) Toggle UI dans la NavBar
+
+Ajouter un **bouton toggle** dans `src/app/layout/app-navbar/app-navbar.component.ts` :
+
+```html
+<!-- app-navbar.component.html (snippet) -->
+<div class="flex items-center gap-2">
+  <!-- Autres boutons -->
+  <button 
+    (click)="toggleUIMode()"
+    [attr.aria-label]="'Toggle ' + (isNimbusMode$ | async ? 'legacy' : 'nimbus') + ' UI'"
+    class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+    <span *ngIf="(isNimbusMode$ | async)">✨ Nimbus</span>
+    <span *ngIf="!(isNimbusMode$ | async)">🔧 Legacy</span>
+  </button>
+</div>
+```
+
+### 2) Service de gestion du mode UI
+
+Créer `src/app/shared/services/ui-mode.service.ts` :
+
+```typescript
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour réactivité fine-grained
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+
+  constructor() {}
+
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return false;
+    const saved = localStorage.getItem('obsiviewer-ui-mode');
+    return saved ? saved === 'nimbus' : true; // Nimbus par défaut
+  }
+}
+```
+
+### 3) Layout wrapper avec feature flag
+
+Créer `src/app/layout/app-shell-adaptive/app-shell-adaptive.component.ts` :
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiMode.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent],
+})
+export class AppShellAdaptiveComponent {
+  uiMode = inject(UiModeService);
+}
+```
+
+---
+
+## 🎨 Responsive Design Strategy
+
+### Breakpoints Tailwind (standard)
+
+```typescript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'xs': '320px',   // iPhone SE
+      'sm': '640px',   // Petites tablettes
+      'md': '768px',   // iPad, tablettes
+      'lg': '1024px',  // Desktop compact
+      'xl': '1280px',  // Desktop standard
+      '2xl': '1536px', // Larges écrans
+    },
+  },
+};
+```
+
+### Mobile First Approach
+
+**Développer pour mobile d'abord, puis enrichir pour desktop.**
+
+---
+
+## 📱 Layouts Responsifs
+
+### Desktop Layout (≥1024px)
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Dark, fixed, h-14)                              │
+├────────────────┬──────────────────┬──────────────────────┤
+│                │                  │                      │
+│  SIDEBAR       │   RESULT LIST    │   NOTE VIEW + TOC    │
+│  (240-440px)   │   (virtualized)  │   (Resizable)        │
+│  Resizable     │                  │                      │
+│                │                  │                      │
+│  - Quick       │  - Search bar    │  - Markdown          │
+│    Links       │  - Filters       │  - ToC drawer        │
+│  - Folders     │  - Items (80px)  │  - Actions bar       │
+│  - Tags        │  - Pagination    │                      │
+│                │                  │                      │
+└────────────────┴──────────────────┴──────────────────────┘
+```
+
+### Tablet Layout (768px ≤ width < 1024px)
+
+```
+┌──────────────────────────────────────┐
+│ NAVBAR + Toggle (fixed, h-14)        │
+├──────────────────────────────────────┤
+│  TAB NAVIGATION (fixed, bottom)      │
+│  [Sidebar] [List] [Page] [ToC]       │
+├──────────────────────────────────────┤
+│                                      │
+│  ACTIVE TAB CONTENT (scrollable)     │
+│  - Drawer si besoin                  │
+│  - Full-width panels                 │
+│                                      │
+└──────────────────────────────────────┘
+```
+
+### Mobile Layout (<768px)
+
+```
+┌──────────────────────────────────┐
+│ NAVBAR (compact, h-12)           │
+│ [Menu] [Search] [Toggle]         │
+├──────────────────────────────────┤
+│                                  │
+│  TAB/DRAWER NAVIGATION           │
+│  [≡] [🔍] [📄] [📋]             │
+│                                  │
+│  CONTENT AREA (Full-width)       │
+│  - Drawer sidebar (80vw left)    │
+│  - Swipeable list (list tab)     │
+│  - Markdown full-screen (page)   │
+│  - Inline ToC (toggle button)    │
+│                                  │
+├──────────────────────────────────┤
+│ Bottom Navigation (sticky)       │
+│ Tab buttons (4 icônes)           │
+└──────────────────────────────────┘
+```
+
+---
+
+## 🎬 Composants Nimbus Responsifs
+
+### Desktop/Mobile Variants
+
+Chaque composant doit avoir des **variants responsifs** :
+
+```
+app-left-sidebar/
+├── app-left-sidebar.component.ts          # Logique partagée
+├── app-left-sidebar.desktop.component.ts  # ≥1024px (fixed, resizable)
+└── app-left-sidebar.mobile.component.ts   # <1024px (drawer)
+
+app-center-list/
+├── app-center-list.component.ts
+├── app-center-list.desktop.component.ts   # ≥1024px (2 colonnes)
+└── app-center-list.mobile.component.ts    # <1024px (full-width)
+
+app-note-view/
+├── app-note-view.component.ts
+├── app-note-view.desktop.component.ts     # ≥1024px (3 colonnes + ToC)
+└── app-note-view.mobile.component.ts      # <1024px (full-width + ToC inline)
+
+app-toc-drawer/
+├── app-toc-drawer.component.ts
+├── app-toc-drawer.desktop.component.ts    # ≥1024px (Fixed right)
+└── app-toc-drawer.mobile.component.ts     # <1024px (Collapsible, inline)
+```
+
+### Détection et Injection
+
+```typescript
+// app-left-sidebar.component.ts
+import { Component, inject } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'app-left-sidebar',
+  standalone: true,
+  template: `
+    @if (isDesktop$ | async) {
+      <ng-container *ngComponentOutlet="DesktopSidebarComponent"></ng-container>
+    } @else {
+      <ng-container *ngComponentOutlet="MobileSidebarDrawerComponent"></ng-container>
+    }
+  `,
+})
+export class AppLeftSidebarComponent {
+  private breakpoint = inject(BreakpointObserver);
+  isDesktop$ = this.breakpoint.observe(Breakpoints.Large).pipe(
+    map(result => result.matches)
+  );
+}
+```
+
+---
+
+## 📱 Navigation Mobile Avancée
+
+### Tab/Drawer Navigation
+
+```typescript
+// src/shared/services/mobile-nav.service.ts
+@Injectable({ providedIn: 'root' })
+export class MobileNavService {
+  activeTab = signal<'sidebar' | 'list' | 'page' | 'toc'>('list');
+  
+  setTab(tab: 'sidebar' | 'list' | 'page' | 'toc') {
+    this.activeTab.set(tab);
+    // Persist if needed
+  }
+}
+
+// Usage in component
+<app-bottom-nav [activeTab]="mobileNav.activeTab()" 
+                (tabChange)="mobileNav.setTab($event)">
+</app-bottom-nav>
+```
+
+### Swipe Navigation (Gestures)
+
+```typescript
+// Directive pour détection de swipe
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true,
+})
+export class SwipeNavDirective {
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+
+  private startX = 0;
+
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    this.startX = e.touches[0].clientX;
+  }
+
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const endX = e.changedTouches[0].clientX;
+    const diff = this.startX - endX;
+    
+    if (Math.abs(diff) > 50) { // Seuil minimum
+      if (diff > 0) this.swipeLeft.emit();
+      else this.swipeRight.emit();
+    }
+  }
+}
+```
+
+---
+
+## 🎨 Composants Spécifiques (Mobile-First)
+
+### 1) Bottom Navigation (Mobile)
+
+```html
+<!-- app-bottom-nav.component.html -->
+<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t 
+            border-gray-200 dark:border-gray-800 h-16 flex justify-around md:hidden">
+  <button *ngFor="let tab of tabs"
+          (click)="selectTab(tab.id)"
+          [class.active]="activeTab === tab.id"
+          class="flex-1 flex flex-col items-center justify-center gap-1 
+                 text-xs hover:bg-gray-50 dark:hover:bg-gray-800">
+    <span class="text-lg">{{ tab.icon }}</span>
+    <span>{{ tab.label }}</span>
+  </button>
+</nav>
+```
+
+### 2) Drawer Sidebar (Mobile)
+
+```html
+<!-- app-left-sidebar.mobile.component.html -->
+<aside class="fixed left-0 top-0 bottom-0 w-80vw max-w-xs 
+              bg-white dark:bg-gray-900 shadow-lg z-50
+              transform transition-transform duration-300"
+       [class.-translate-x-full]="!isOpen">
+  <!-- Contenu sidebar -->
+  <button (click)="close()" class="absolute top-4 right-4">✕</button>
+</aside>
+
+<!-- Backdrop -->
+<div *ngIf="isOpen" 
+     (click)="close()"
+     class="fixed inset-0 bg-black/50 z-40 md:hidden"></div>
+```
+
+### 3) Search Bar Compact (Mobile)
+
+```html
+<!-- app-search-bar.mobile.component.html -->
+<div class="sticky top-0 bg-white dark:bg-gray-900 p-2 shadow-sm z-10">
+  <div class="flex gap-2">
+    <!-- Menu toggle -->
+    <button (click)="toggleSidebar()" 
+            class="p-2 rounded hover:bg-gray-100">☰</button>
+    
+    <!-- Search input (full-width on mobile) -->
+    <input type="text" 
+           placeholder="Search..." 
+           class="flex-1 px-3 py-2 rounded border dark:border-gray-700">
+    
+    <!-- Filters button (mobile: popover instead of dropdown) -->
+    <button (click)="openFilters()" 
+            class="p-2 rounded hover:bg-gray-100">⚙️</button>
+  </div>
+  
+  <!-- Active badges (scrollable horizontally) -->
+  <div class="flex gap-1 mt-2 overflow-x-auto">
+    <span *ngFor="let badge of activeBadges" 
+          class="badge badge-sm">
+      {{ badge }} ✕
+    </span>
+  </div>
+</div>
+```
+
+### 4) Result List Item (Mobile-Optimized)
+
+```html
+<!-- app-result-list-item.component.html -->
+<div class="p-3 border-b hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
+  <!-- Title -->
+  <h3 class="font-semibold text-sm sm:text-base truncate">
+    {{ item.title }}
+  </h3>
+  
+  <!-- Date + Tags (stacked on mobile) -->
+  <div class="flex flex-col sm:flex-row sm:items-center gap-1 mt-1 text-xs text-gray-600">
+    <span>{{ item.modified | date:'short' }}</span>
+    <div class="flex gap-1 flex-wrap">
+      <span *ngFor="let tag of item.tags" 
+            class="badge badge-sm">{{ tag }}</span>
+    </div>
+  </div>
+  
+  <!-- Excerpt (truncated) -->
+  <p class="mt-2 text-xs text-gray-600 line-clamp-2">
+    {{ item.excerpt }}
+  </p>
+</div>
+```
+
+### 5) Markdown Viewer (Mobile-Responsive)
+
+```html
+<!-- app-markdown-viewer.component.html -->
+<article class="prose dark:prose-invert max-w-none 
+                 prose-sm sm:prose-base 
+                 prose-img:max-w-full prose-img:h-auto
+                 px-3 sm:px-6 py-4 sm:py-8">
+  <!-- Markdown content -->
+  <div [innerHTML]="markdownHTML"></div>
+  
+  <!-- ToC (mobile: inline toggle) -->
+  <button *ngIf="headings.length > 0"
+          (click)="showToC = !showToC"
+          class="lg:hidden fixed bottom-20 right-4 p-3 rounded-full bg-blue-500 text-white shadow-lg">
+    📋
+  </button>
+  
+  <nav *ngIf="showToC" class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+    <!-- ToC content -->
+  </nav>
+</article>
+```
+
+### 6) ToC Drawer (Desktop Fixed, Mobile Inline)
+
+```typescript
+// app-toc-drawer.component.ts
+@Component({
+  selector: 'app-toc-drawer',
+  template: `
+    <!-- Desktop: Fixed right panel (≥1024px) -->
+    <aside class="hidden lg:flex fixed right-0 top-14 bottom-0 w-64 
+                  bg-gray-50 dark:bg-gray-800 border-l 
+                  border-gray-200 dark:border-gray-700
+                  flex-col overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </aside>
+    
+    <!-- Mobile: Collapsible inline (< 1024px) -->
+    <div *ngIf="(isMobile$ | async)" 
+         [@slideDown]="showTocMobile ? 'in' : 'out'"
+         class="bg-gray-50 dark:bg-gray-800 border-t p-3 max-h-96 overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </div>
+  `,
+  animations: [
+    trigger('slideDown', [
+      state('in', style({ height: '*' })),
+      state('out', style({ height: '0px' })),
+      transition('in <=> out', animate('200ms ease-in-out')),
+    ]),
+  ],
+  standalone: true,
+})
+export class AppTocDrawerComponent {
+  @Input() headings: Heading[] = [];
+  showTocMobile = false;
+  isMobile$ = this.breakpoint.observe('(max-width: 1023px)').pipe(
+    map(r => r.matches)
+  );
+}
+```
+
+---
+
+## 🎯 Livrables Attendus
+
+### Code
+1. **Toggle UI** : `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`
+2. **Responsive Wrappers** : Variants pour chaque composant (Desktop/Mobile)
+3. **Mobile Components** : Bottom nav, drawer sidebar, inline ToC, mobile search
+4. **Gesture Handling** : Swipe navigation directive, touch-friendly interactions
+5. **Breakpoint Utilities** : Service CDK layout, reactive signals
+
+### Styling
+1. **Tailwind Config** : Breakpoints personnalisés, tokens tokens clair/sombre
+2. **Mobile-First CSS** : Base mobile, enrichissements desktop via `md:`, `lg:`
+3. **Touch-Friendly** : Boutons ≥44x44px, padding adéquat, hover states
+
+### Documentation
+1. **README_UI.md** : Schémas responsive, breakpoints, guide toggle
+2. **MOBILE_GUIDE.md** : Navigation gestures, bottom nav flow, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, checklist A11y mobile
+
+### Tests
+1. **E2E** : Toggle persistence, layout switch, gesture navigation
+2. **Visual Regression** : Screenshots desktop/tablet/mobile
+3. **Accessibility** : Touch targets, ARIA labels, keyboard nav (Tab key)
+
+---
+
+## ⚡ Performance & Mobile Optimizations
+
+### Critical Optimizations
+
+- **Lazy-load images** : `loading="lazy"`, responsive `srcset`
+- **Virtual scroll** : CDK virtual scroll adapté mobile (item height ≈ 70–80px)
+- **Debounce search** : 300ms sur mobile, 150ms sur desktop
+- **Avoid layout shift** : Aspect ratios, skeleton loaders
+- **Network awareness** : `navigator.connection.effectiveType` pour adapt qualité
+- **Battery saver** : Réduire animations, throttle updates en mode saver
+
+### Lighthouse Mobile Targets
+
+- Performance ≥ 85
+- Accessibility ≥ 95
+- Best Practices ≥ 90
+
+---
+
+## 🎮 Raccourcis Clavier & Gestures
+
+### Desktop
+- `Ctrl/Cmd + K` : Palette commandes
+- `Ctrl/Cmd + F` : Focus recherche
+- `[` `]` : Replier/ouvrir ToC
+- `Alt + ←/→` : Navigation historique
+
+### Mobile/Tablet
+- **Tap** : Ouvrir note/item
+- **Swipe left/right** : Changer onglet (list → page → sidebar)
+- **Long-press** : Menu contextuel (favoris, open in new tab)
+- **Pull-to-refresh** : Rafraîchir liste (optionnel)
+- **Double-tap** : Zoom ToC (mobile)
+
+---
+
+## 📋 Critères d'Acceptation
+
+### Desktop (≥1024px)
+- [x] Layout 3 colonnes (sidebar fixe/resizable, liste, page+ToC)
+- [x] Changement dossier/tag/tri reflété en URL
+- [x] 1000+ items fluide (60fps virtual scroll)
+- [x] ToC synchronisé + repliable
+- [x] Tous les flux clavier-seuls possibles
+
+### Tablet (768–1023px)
+- [x] Navigation par onglets (Sidebar / List / Page)
+- [x] Drawer sidebar (80vw, swipeable)
+- [x] Bottom navigation sticky (4 icônes)
+- [x] Contenu full-width par onglet
+- [x] ToC inline collapsible
+
+### Mobile (<768px)
+- [x] Drawer sidebar (80vw max)
+- [x] Bottom nav (4 onglets)
+- [x] Search bar compact (menu + search + filters)
+- [x] List items optimisés (titre + date + excerpt)
+- [x] Markdown full-screen
+- [x] ToC overlay ou inline toggle
+- [x] Touch targets ≥ 44x44px
+
+### Feature Flag
+- [x] Toggle UI visible dans navbar
+- [x] État persisté (localStorage)
+- [x] Pas de perte d'état lors du switch
+- [x] Legacy UI reste intacte
+
+### Accessibility
+- [x] WCAG 2.1 AA sur tous les breakpoints
+- [x] Keyboard navigation complète (Tab, Arrow, Enter)
+- [x] ARIA labels pour navigation tactile
+- [x] Focus visible partout
+- [x] Zoom ≤ 200% sans horizontal scroll
+
+### Performance
+- [x] TTI < 2.5s cold start
+- [x] Scroll 60fps sur 1000+ items
+- [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y
+- [x] ImageOptimizations (lazy, srcset, format next-gen)
+
+---
+
+## 🗂️ Arborescence Fichiers
+
+```
+src/app/
+├── layout/
+│   ├── app-shell-adaptive/
+│   │   └── app-shell-adaptive.component.ts      # Feature flag wrapper
+│   ├── app-shell-nimbus/
+│   │   ├── app-shell-nimbus.component.ts        # 3 colonnes (desktop)
+│   │   ├── app-shell-nimbus.desktop.component.ts
+│   │   └── app-shell-nimbus.mobile.component.ts
+│   └── app-navbar/
+│       ├── app-navbar.component.ts
+│       └── [Bouton toggle UI intégré]
+│
+├── features/
+│   ├── sidebar/
+│   │   ├── app-left-sidebar.component.ts
+│   │   ├── app-left-sidebar.desktop.component.ts
+│   │   └── app-left-sidebar.mobile.component.ts
+│   │
+│   ├── search-bar/
+│   │   ├── app-search-bar.component.ts
+│   │   ├── app-search-bar.desktop.component.ts
+│   │   └── app-search-bar.mobile.component.ts
+│   │
+│   ├── result-list/
+│   │   ├── app-result-list.component.ts
+│   │   ├── app-result-list.desktop.component.ts
+│   │   ├── app-result-list.mobile.component.ts
+│   │   └── app-result-list-item.component.ts
+│   │
+│   ├── note-view/
+│   │   ├── app-note-view.component.ts
+│   │   ├── app-note-view.desktop.component.ts
+│   │   └── app-note-view.mobile.component.ts
+│   │
+│   ├── toc-drawer/
+│   │   ├── app-toc-drawer.component.ts
+│   │   └── app-toc-content.component.ts
+│   │
+│   └── bottom-nav/ [NEW]
+│       ├── app-bottom-nav.component.ts
+│       └── app-bottom-nav.component.html
+│
+├── shared/
+│   ├── services/
+│   │   ├── ui-mode.service.ts                   # [NEW] Toggle management
+│   │   ├── mobile-nav.service.ts                # [NEW] Tab/drawer state
+│   │   └── breakpoint.service.ts                # [NEW] Responsive helper
+│   │
+│   ├── directives/
+│   │   └── swipe-nav.directive.ts               # [NEW] Gesture detection
+│   │
+│   └── components/
+│       └── resizable-handle/
+│
+└── styles/
+    ├── tokens.css                               # Tailwind tokens
+    ├── responsive.css                           # Breakpoint utilities
+    └── mobile.css                               # Mobile-specific (touches, etc.)
+```
+
+---
+
+## 📅 Plan d'Implémentation (ordre conseillé)
+
+1. **Feature Flag Infrastructure** (1-2j)
+   - `UiModeService` + localStorage persistence
+   - `AppShellAdaptiveComponent` wrapper
+   - Toggle button dans navbar
+
+2. **Responsive Shell & Breakpoints** (2-3j)
+   - Desktop layout 3 colonnes (>=1024px)
+   - Tailwind breakpoints & tokens
+   - Resizable sidebar logic
+
+3. **Mobile Navigation & Bottom Nav** (2-3j)
+   - `BottomNavComponent` (4 onglets)
+   - `MobileNavService` (state management)
+   - Tab/drawer routing
+
+4. **Mobile Sidebar Drawer** (1-2j)
+   - Drawer animé (translate, backdrop)
+   - Swipe dismiss directive
+   - Z-index management
+
+5. **Responsive Components** (3-4j)
+   - Search bar variants (desktop/mobile)
+   - Result list item responsive
+   - Markdown viewer mobile optimizations
+
+6. **ToC Drawer Adaptive** (1-2j)
+   - Fixed right panel (desktop)
+   - Inline toggle (mobile)
+   - Animations smooth
+
+7. **Gestures & Touch** (1-2j)
+   - Swipe nav directive
+   - Long-press menu
+   - Pull-to-refresh (optionnel)
+
+8. **Accessibility & Testing** (2-3j)
+   - WCAG 2.1 AA audit
+   - Keyboard nav (Tab, Arrow)
+   - E2E tests (toggle, breakpoints)
+   - Visual regression (3 breakpoints)
+
+**Total estimé** : 13–21 jours (équipe 1 FE engineer)
+
+---
+
+## 🚀 Scripts NPM
+
+```bash
+# Dev complet (Nimbus activé par défaut)
+npm run dev
+
+# Build production
+npm run build
+
+# Tests responsifs (plusieurs breakpoints)
+npm run test:responsive
+
+# Lighthouse audit mobile
+npm run audit:lighthouse:mobile
+
+# Feature flag (override)
+NIMBUS_UI=false npm run dev        # Force legacy UI
+```
+
+---
+
+## ✅ Checklist Livraison
+
+- [ ] Toggle UI visible, fonctionnel, persisté
+- [ ] Desktop (≥1024px) : 3 colonnes, interactions fluides
+- [ ] Tablet (768–1023px) : Onglets + drawer, full-width contenu
+- [ ] Mobile (<768px) : Bottom nav, drawer, touch-friendly
+- [ ] Tous les flux clavier-seuls réalisables
+- [ ] Lighthouse mobile ≥ 85 perf, ≥ 95 a11y
+- [ ] Virtual scroll 60fps sur 1000+ items
+- [ ] Tests E2E (toggle, breakpoints, gestures)
+- [ ] Documentation complète (README_UI.md, MOBILE_GUIDE.md, RESPONSIVE_CHECKLIST.md)
+- [ ] Zéro régression : legacy UI inchangée, Wikilinks, bookmarks, graph intacts
+- [ ] Screenshots before/after 3 breakpoints
+
+---
+
+## 📖 Documentation à Produire
+
+1. **README_UI.md** : Overview, architecture, screenshots 3 breakpoints
+2. **MOBILE_GUIDE.md** : Navigation onglets, gestures, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, device testing
+4. **DEPLOYMENT.md** : Feature flag pour bascule progressive
+5. **ARCHITECTURE_DIAGRAM.md** : Schémas adaptatifs (Mermaid)
+
+---
+
+## 💡 Notes Importantes
+
+- **Mobile First** : Développer pour mobile en premier, puis enrichir desktop.
+- **Persistent State** : Le toggle UI et les filtres actifs doivent persister via localStorage (sans browser storage, utiliser sessionStorage ou service state).
+- **Zero Regression** : L'ancienne interface reste intacte et fonctionnelle.
+- **Performance** : Virtual scroll adapté mobile (40+ items à l'écran), lazy-load images.
+- **Accessibility** : 44x44px touch targets minimum, ARIA labels complets, keyboard nav.
+- **Testing** : Visual regression sur breakpoints clés (375px / 768px / 1440px).
+
+---
+
+**Exécute maintenant ce plan** : crée les composants, adapte les routes/états, ajoute les styles Tailwind responsifs, branche la recherche et livre le MR conforme aux critères ci-dessus avec toggle UI et compatibilité 100% Desktop/Mobile.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_chatgpt.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_chatgpt.md
new file mode 100644
index 0000000..bfd3fb2
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_chatgpt.md
@@ -0,0 +1,283 @@
+Voici une version *prête à coller dans Windsurf* qui intègre fidèlement l’interface Nimbus/FuseBase **et** garantit une compatibilité à 100 % Desktop + Mobile (téléphone + tablette). J’ai resserré, clarifié et relié chaque exigence aux patterns “Nimbus” (chips filtrants, pickers Clear/Done, outline latéral, Portals/Share, workspaces, etc.).
+
+---
+
+# 🎯 Prompt Windsurf — ObsiViewer « Nimbus UI » (Desktop + Mobile 100%)
+
+## Rôle & Autorité
+
+Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Raisonnement détaillé **autorisé**. Tu peux refactorer, introduire de nouveaux composants, migrer le CSS vers **Tailwind**, et **ne brise aucune feature** existante.
+
+**Garde-fous**
+
+* **Feature flag** : un **toggle** dans la navbar bascule *Nimbus UI* ↔ *Legacy UI* **sans perte d’état** (URL, sélection, filtres).
+* **100 % Responsive** : Desktop, Tablet, Mobile (petits smartphones inclus).
+* **A11y** : WCAG 2.1 AA, clavier + écran tactile.
+
+---
+
+## ADN Nimbus à reproduire (invariants UX)
+
+1. **3 panneaux stables** : Nav gauche (Quick Links / Folders / Tags), Index central (Recherche + chips **All folders ▾ / All tags ▾ / All pages ▾**), Page à droite (markdown + **outline ToC** dockable).
+2. **Recherche d’abord** : top bar centrée, **icône filtre** → options avancées.
+3. **Chips persistantes** = *stateful filters* (caret + **badges comptage** + Clear/Done).
+4. **Pickers riches** (dossiers hiérarchiques multi-sélection, tags à coches, **barre de recherche locale**).
+5. **Progressive disclosure** : menus condensés, pickers/overlays, **hover-reveal “+”** pour créer un sous-dossier.
+6. **Workspaces** strictement séparés ; **Share** et **Add to portal** accessibles depuis la barre d’action de la page (si disponibles).
+7. **Contenu riche** : markdown, callouts, code, **cartes Bookmark** (titre/desc/vignette).
+8. **Outline contextuel** : bouton rond “hamburger” flottant dans la page → rail ToC H1–H6 avec **scroll-to**.
+
+> Référence de conception : Folders/Tags bi-axial, chips visibles en permanence, *Clear partout*, hiérarchie typographique nette, dark/light cohérents.
+
+---
+
+## Objectif Final (résumé)
+
+* **Desktop (≥ 1024px)** : Layout **3 colonnes** (sidebar resizable 240–440px / index virtualisé / page + ToC fixe à droite).
+* **Tablet (768–1023px)** : **Bottom tabs** (Sidebar • List • Page • ToC) + **drawer** pour la sidebar.
+* **Mobile (< 768px)** : **Bottom nav** (4 icônes), sidebar en **drawer 80vw**, ToC **inline/drawer**, gestes **swipe** pour naviguer entre onglets.
+
+---
+
+## Feature Flag & Toggle (obligatoire)
+
+* **UiModeService** (signal boolean, persistance `localStorage: obsiviewer-ui-mode = nimbus|legacy`).
+* **AppShellAdaptiveComponent** sélectionne *Nimbus* vs *Legacy*.
+* **Bouton toggle** dans la navbar, accessible (`aria-label`) et **sans reset de l’état** (on conserve : filtres actifs, élément sélectionné, scrolls, URL).
+
+---
+
+## Responsive Design — Stratégie
+
+* **Mobile-first** avec Tailwind (`xs, sm, md, lg, xl, 2xl`).
+* **Variants par composant** : `*.desktop.component` (≥ lg) / `*.mobile.component` (< lg).
+* **Breakpoints cdk/layout** pour l’injection conditionnelle.
+* **Touch targets ≥ 44×44px**, densité **compacte mais respirante** (Nimbus-style).
+
+---
+
+## Composants à livrer (Nimbus-compat)
+
+1. **Left Sidebar** (desktop fixe/resizable, mobile drawer)
+
+   * Sections : Quick Links, **Folders** (arbo + *hover-reveal “+”*), **Tags**, Trash.
+   * **Workspace switcher** + **theme switch** via menu avatar en bas.
+2. **Center List**
+
+   * **Search bar** (champ centré + icône filtre)
+   * **Chips** : All folders ▾ / All tags ▾ / All pages ▾ (badges + caret)
+   * **Pickers overlays** :
+
+     * **Folders** multi-sélection hiérarchique, recherche locale, **Clear/Done**, badges *+N*.
+     * **Tags** alphabétique, **checkmarks**, Clear/Done.
+   * **Liste virtualisée** (CDK) : titre, date grisée, **snippet** (line-clamp), petites icônes (ex. bookmark).
+   * État : “Found pages: N” + **Clear** visible si filtres actifs.
+3. **Note View + ToC**
+
+   * Page markdown (prose), **barre d’actions** à droite : **Ask AI**, **Add to portal**, **Share**, loupe “find in page”, attachements, **plein écran**.
+   * **ToC Drawer** : fixe à droite (desktop) ; **inline/drawer** (mobile).
+   * **Bouton flottant ToC** (rond) *dans* la page.
+   * **Cards Bookmark** (preview URL).
+4. **Mobile Shell**
+
+   * **Bottom navigation** (Sidebar / List / Page / ToC).
+   * **Gestures** : swipe gauche/droite pour changer d’onglet, pull-to-refresh (optionnel), long-press menu contextuel.
+   * **Search compact** (menu, champ, bouton filtres → popover).
+
+---
+
+## Exigences Techniques Clés
+
+* **URL state** : sélection dossier/tag/tri dans l’URL (deep link).
+* **Persistences** : chips actives, split sizes, dernier onglet mobile, thème, workspace.
+* **Virtual scroll** : item 70–80px, 60 fps sur 1000+ items.
+* **Dark/Light** : palette stable, **contrastes sûrs** (Nimbus dark très contrasté).
+* **Overlays** : pickers centrés, **Clear/Done** persistants en pied, focus trap + ESC.
+* **Perf Mobile** : debounce recherche (300 ms mobile / 150 ms desktop), images lazy, évite CLS (skeletons, `aspect-[ratio]`).
+* **A11y** : ARIA, focus visible, nav clavier complète (Tab/Shift+Tab, Arrow), *skip links*.
+
+---
+
+## Livrables (code & docs)
+
+**Code**
+
+1. `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`.
+2. Variants responsive : `left-sidebar`, `center-list`, `note-view`, `toc-drawer`, `search-bar`.
+3. **BottomNav**, **MobileNavService**, **SwipeNavDirective**.
+4. **Pickers** (Folders/Tags) avec recherche locale + Clear/Done.
+5. **Resizable handle** (sidebar), **virtual scroll** (index).
+
+**Styling**
+
+* `tailwind.config.js` (breakpoints), tokens light/dark, classes utilitaires mobile-first.
+* Prose markdown responsive, badges/chips Nimbus-like, states *hover/selected*.
+
+**Docs**
+
+* `README_UI.md` (diagrammes 3 breakpoints + captures).
+* `MOBILE_GUIDE.md` (flow onglets, gestes, drawer).
+* `RESPONSIVE_CHECKLIST.md` (tests par breakpoint + devices).
+* `DEPLOYMENT.md` (feature flag rollout).
+
+**Tests**
+
+* E2E : toggle persistant, switch sans perte d’état, pickers Clear/Done, deep links.
+* Visuel : snapshots Desktop/Tablet/Mobile.
+* A11y : axe + audits clavier.
+* Perf : 60 fps scroll, TTI < 2.5 s (mobile cold), Lighthouse Mobile ≥ 85 / A11y ≥ 95.
+
+---
+
+## Critères d’Acceptation (DoD)
+
+**Desktop (≥ 1024px)**
+
+* [x] 3 colonnes, sidebar **resizable**, ToC fixe à droite.
+* [x] Chips visibles + pickers overlays Clear/Done, **badges comptage**.
+* [x] 1000+ items fluide (virtual scroll 60 fps).
+* [x] *Ask AI / Add to portal / Share* visibles si feature activée.
+
+**Tablet (768–1023px)**
+
+* [x] **Bottom tabs** + sidebar **drawer** (swipe).
+* [x] ToC **inline** repliable.
+* [x] Tous contenus **full-width** par onglet.
+
+**Mobile (< 768px)**
+
+* [x] **Bottom nav** (4 onglets), sidebar **drawer 80vw**.
+* [x] Search compact + popover filtres, badges actifs scrollables en horizontal.
+* [x] Markdown **full-screen**, ToC overlay/inline toggle.
+* [x] Touch targets ≥ 44×44px.
+
+**Feature Flag & A11y/Perf**
+
+* [x] Toggle visible, persistant, **sans perte d’état**.
+* [x] WCAG 2.1 AA, focus visible, ARIA.
+* [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y.
+
+---
+
+## Plan d’Implémentation (ordre conseillé)
+
+1. **Feature Flag infra** (UiModeService + AppShellAdaptive + toggle navbar).
+2. **Shell Responsive** (3 colonnes desktop, Tailwind tokens, resizable sidebar).
+3. **Mobile Navigation** (BottomNav + MobileNavService + routing/états).
+4. **Sidebar Drawer** (anim, backdrop, swipe dismiss, z-index).
+5. **Pickers** (Folders/Tags) + chips/overlays + Clear/Done + recherche locale.
+6. **ToC Drawer** (fixe desktop / inline mobile) + bouton flottant.
+7. **Perf & A11y** (virtual scroll, debounce, lazy, focus trap).
+8. **Tests & Docs** (E2E, visuel, a11y, guides).
+
+---
+
+## Squelette de code minimal (extraits)
+
+### Toggle UI (navbar)
+
+```html
+<button (click)="ui.toggleUIMode()"
+        [attr.aria-label]="'Toggle ' + (ui.isNimbusMode() ? 'legacy' : 'nimbus') + ' UI'"
+        class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+  <span *ngIf="ui.isNimbusMode()">✨ Nimbus</span>
+  <span *ngIf="!ui.isNimbusMode()">🔧 Legacy</span>
+</button>
+```
+
+### Shell adaptatif
+
+```ts
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (ui.isNimbusMode()) { <app-shell-nimbus/> } @else { <app-shell-legacy/> }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusComponent, AppShellLegacyComponent]
+})
+export class AppShellAdaptiveComponent { constructor(public ui: UiModeService) {} }
+```
+
+### Chips + Pickers (pattern)
+
+```html
+<!-- Chips persistants -->
+<div class="flex gap-2 flex-wrap">
+  <app-chip [label]="foldersLabel" (click)="openFoldersPicker()"></app-chip>
+  <app-chip [label]="tagsLabel" (click)="openTagsPicker()"></app-chip>
+  <app-chip [label]="pagesLabel" (click)="openPagesPicker()"></app-chip>
+</div>
+
+<!-- Overlay picker Folders (multi + Clear/Done + search locale) -->
+<app-folders-picker *ngIf="showFolders"
+  [selected]="selectedFolders"
+  (search)="onLocalSearch($event)"
+  (clear)="clearFolders()" (done)="applyFolders($event)">
+</app-folders-picker>
+```
+
+### Bottom Nav (mobile)
+
+```html
+<nav class="fixed bottom-0 inset-x-0 h-16 md:hidden
+            bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800
+            flex justify-around z-30">
+  <button *ngFor="let t of tabs" (click)="setTab(t.id)"
+          class="flex-1 flex flex-col items-center justify-center text-xs gap-1">
+    <span class="text-lg">{{t.icon}}</span><span>{{t.label}}</span>
+  </button>
+</nav>
+```
+
+---
+
+## Arborescence proposée
+
+```
+src/app/
+├─ layout/
+│  ├─ app-shell-adaptive/
+│  ├─ app-shell-nimbus/ (desktop/mobile variants)
+│  └─ app-navbar/
+├─ features/
+│  ├─ sidebar/ (desktop + mobile drawer)
+│  ├─ search-bar/ (desktop + mobile)
+│  ├─ center-list/ (+ virtual scroll + chips + pickers)
+│  ├─ note-view/ (+ toolbar AskAI/Share/Portal si activées)
+│  └─ toc-drawer/ (desktop fixe / mobile inline)
+├─ shared/
+│  ├─ services/ (ui-mode, mobile-nav, breakpoint)
+│  ├─ directives/ (swipe-nav)
+│  └─ components/ (resizable-handle, chip, picker, badge)
+└─ styles/ (tokens, responsive, mobile)
+```
+
+---
+
+## Raccourcis & Gestes
+
+* **Desktop** : `Ctrl/Cmd+K` palette, `Ctrl/Cmd+F` recherche, `Alt+←/→` historique, `[` `]` ToC.
+* **Mobile** : **swipe** onglet précédent/suivant, **long-press** menu item, **tap** ouvre note, **pull-to-refresh** (optionnel).
+
+---
+
+## Cibles Perf & Qualité
+
+* **TTI** < 2.5 s sur mobile cold.
+* **60 fps** scroll 1000+ items.
+* **CLS** < 0.1 (skeletons, ratios).
+* **Lighthouse Mobile** ≥ 85 (Perf) / ≥ 95 (A11y).
+
+---
+
+## Consignes supplémentaires
+
+* **Zéro régression** : graph view, wikilinks, bookmarks, search operators fonctionnels.
+* **Internationalisation** prête (labels chips, Clear/Done).
+* **State durable** : localStorage ou service (fallback SSR).
+* **Thèmes** : switch Light/Dark depuis avatar footer (comme Nimbus).
+
+---
+
+**Exécute ce plan** : implémente le *Nimbus UI* responsive avec toggle, livre le MR complet (code + tests + docs), conforme aux critères ci-dessus, Desktop/Tablet/Mobile **100 % OK**.
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_deepseek.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_deepseek.md
new file mode 100644
index 0000000..f370c9b
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_deepseek.md
@@ -0,0 +1,481 @@
+Voici le prompt refondu pour inclure la compatibilité mobile/tablet complète tout en conservant la philosophie Nimbus :
+
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## ObsiViewer → UI/UX "Nimbus-like" (responsive, dense, rapide)
+
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX designer**. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+
+**Contrainte majeure :** L'interface doit être **100% responsive** (Desktop ≥1024px / Tablet 768-1023px / Mobile <768px). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état.
+
+---
+
+## 📋 Architecture Nimbus Responsive
+
+### Desktop (≥1024px) - Layout 3 colonnes
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Search centré + CTA "+ Page" + Actions droite)  │
+├─────────────┬─────────────────────┬─────────────────────┤
+│ SIDEBAR     │ CENTER COLUMN       │ NOTE + TOC          │
+│ Navigation  │ • Chips filtres     │ • Édition riche     │
+│ Dossiers/Tags│ • Liste résultats   │ • Outline contextuel│
+│ Quick Links │ • Virtual scroll    │ • Barre actions     │
+└─────────────┴─────────────────────┴─────────────────────┘
+```
+
+### Tablet (768-1023px) - Navigation par onglets
+```
+┌────────────────────────────────────┐
+│ NAVBAR (Search + Toggle UI)        │
+├────────────────────────────────────┤
+│ [≡] [📄] [🔍] [📋] Tabs bottom     │
+├────────────────────────────────────┤
+│                                    │
+│  CONTENU ACTIF FULL-WIDTH          │
+│  • Sidebar: Drawer 80vw            │
+│  • Liste: Cards compactes          │
+│  • Note: Markdown + ToC inline     │
+│                                    │
+└────────────────────────────────────┘
+```
+
+### Mobile (<768px) - Navigation bottom + Drawers
+```
+┌──────────────────────────────────┐
+│ NAVBAR compacte (Menu + Search)  │
+├──────────────────────────────────┤
+│          CONTENT AREA            │
+│ • Sidebar: Drawer full           │
+│ • Liste: Items optimisés         │
+│ • Note: Plein écran              │
+├──────────────────────────────────┤
+│ [≡][📄][+][🔍][📋] Bottom Nav     │
+└──────────────────────────────────┘
+```
+
+---
+
+## 🎯 Composants Nimbus Spécifiques à Reproduire
+
+### 1) Top Bar Nimbus (Responsive)
+```typescript
+// Desktop: Search centré + CTA turquoise
+<header class="flex items-center justify-between p-4">
+  <!-- Gauche: Logo/Worspace -->
+  <div class="w-1/4">Workspace Selector</div>
+  
+  <!-- Centre: Search large + filtre -->
+  <div class="flex-1 max-w-2xl">
+    <div class="relative">
+      <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg border">
+      <span class="absolute left-3 top-2.5">🔍</span>
+      <button class="absolute right-3 top-2.5">⏷</button>
+    </div>
+  </div>
+  
+  <!-- Droite: CTA + Actions -->
+  <div class="w-1/4 flex justify-end gap-2">
+    <button class="bg-cyan-500 text-white px-4 py-2 rounded-lg">+ Page</button>
+    <button>Ask AI</button>
+    <button>Share</button>
+  </div>
+</header>
+
+// Mobile: Stacked + icons
+<header class="p-3 space-y-2">
+  <div class="flex justify-between">
+    <button>☰</button>
+    <button class="bg-cyan-500 text-white px-3 py-1 rounded">+</button>
+  </div>
+  <div class="relative">
+    <input type="text" placeholder="Search..." class="w-full pl-8 pr-3 py-1 rounded border">
+    <span class="absolute left-2 top-1.5">🔍</span>
+  </div>
+</header>
+```
+
+### 2) Chips de Filtres Nimbus (Responsive)
+```typescript
+// Desktop: Chips horizontales
+<div class="flex gap-2 p-4 border-b">
+  <div class="chip-filter">
+    <span>All folders</span>
+    <span class="badge">+2</span>
+    <span>▾</span>
+  </div>
+  <div class="chip-filter">
+    <span>All tags</span>
+    <span class="badge">+1</span>
+    <span>▾</span>
+  </div>
+  <div class="chip-filter">
+    <span>All pages</span>
+    <span>▾</span>
+  </div>
+</div>
+
+// Mobile: Chips scrollables horizontalement
+<div class="flex gap-1 p-3 border-b overflow-x-auto">
+  <div class="chip-filter flex-shrink-0">
+    <span>Folders</span>
+    <span>▾</span>
+  </div>
+  <div class="chip-filter flex-shrink-0">
+    <span>Tags</span>
+    <span>▾</span>
+  </div>
+  <!-- ... -->
+</div>
+```
+
+### 3) Picker Overlays Nimbus (Responsive)
+```typescript
+// Desktop: Overlay centré
+<div class="fixed inset-0 bg-black/20 z-50 flex items-start justify-center pt-20">
+  <div class="bg-white rounded-lg shadow-xl w-96 max-h-96 overflow-hidden">
+    <!-- Header avec recherche -->
+    <div class="p-3 border-b">
+      <input type="text" placeholder="Search folders..." class="w-full p-2 border rounded">
+    </div>
+    
+    <!-- Liste avec hiérarchie -->
+    <div class="overflow-y-auto max-h-64">
+      <div class="flex items-center p-2 hover:bg-gray-100">
+        <input type="checkbox" class="mr-2">
+        <span>📁</span>
+        <span class="ml-2 flex-1">Workspace</span>
+        <span>›</span>
+      </div>
+      <!-- Sous-dossiers indentés -->
+      <div class="flex items-center p-2 pl-6 hover:bg-gray-100">
+        <input type="checkbox" class="mr-2">
+        <span>📁</span>
+        <span class="ml-2 flex-1">Projects</span>
+        <span class="text-xs text-gray-500">15</span>
+      </div>
+    </div>
+    
+    <!-- Footer actions -->
+    <div class="flex justify-between p-3 border-t">
+      <button class="text-gray-600">Clear</button>
+      <button class="bg-cyan-500 text-white px-4 py-1 rounded">Done</button>
+    </div>
+  </div>
+</div>
+
+// Mobile: Picker full-screen
+<div class="fixed inset-0 bg-white z-50">
+  <div class="p-4 border-b flex justify-between items-center">
+    <h3 class="font-semibold">Select Folders</h3>
+    <button class="text-cyan-500">Done</button>
+  </div>
+  
+  <div class="p-3 border-b">
+    <input type="text" placeholder="Search folders..." class="w-full p-2 border rounded">
+  </div>
+  
+  <div class="overflow-y-auto h-full pb-20">
+    <!-- Liste mobile-optimisée -->
+  </div>
+</div>
+```
+
+### 4) Outline Contextuel Nimbus (Responsive)
+```typescript
+// Desktop: Panneau droit fixe
+<aside class="fixed right-0 top-14 bottom-0 w-64 border-l bg-gray-50 overflow-y-auto hidden lg:block">
+  <div class="p-4">
+    <h4 class="font-semibold mb-3">Outline</h4>
+    <nav class="space-y-1">
+      <a class="block py-1 text-sm text-gray-600 hover:text-gray-900"># Introduction</a>
+      <a class="block py-1 pl-4 text-sm text-gray-600 hover:text-gray-900">## Getting Started</a>
+      <!-- ... -->
+    </nav>
+  </div>
+</aside>
+
+// Mobile: Bouton flottant + overlay
+<button class="fixed bottom-20 right-4 w-12 h-12 bg-cyan-500 text-white rounded-full shadow-lg lg:hidden"
+        (click)="showTocMobile = true">
+  📋
+</button>
+
+<div *ngIf="showTocMobile" class="fixed inset-0 bg-white z-50 lg:hidden">
+  <div class="p-4 border-b flex justify-between">
+    <h3 class="font-semibold">Table of Contents</h3>
+    <button (click)="showTocMobile = false">✕</button>
+  </div>
+  <div class="p-4 overflow-y-auto h-full">
+    <!-- Contenu ToC -->
+  </div>
+</div>
+```
+
+---
+
+## 🎨 Palette Nimbus & Design Tokens
+
+```css
+/* Tokens Nimbus (light/dark) */
+:root {
+  /* Couleurs primaires */
+  --nimbus-cyan: #06b6d4;
+  --nimbus-cyan-dark: #0891b2;
+  
+  /* Gris scale */
+  --nimbus-gray-50: #f9fafb;
+  --nimbus-gray-100: #f3f4f6;
+  --nimbus-gray-800: #1f2937;
+  --nimbus-gray-900: #111827;
+  
+  /* Espacements */
+  --nimbus-space-1: 0.25rem;
+  --nimbus-space-2: 0.5rem;
+  --nimbus-space-3: 0.75rem;
+  
+  /* Typographie */
+  --nimbus-text-sm: 0.875rem;
+  --nimbus-text-base: 1rem;
+}
+
+.dark {
+  --nimbus-bg: var(--nimbus-gray-900);
+  --nimbus-surface: var(--nimbus-gray-800);
+}
+```
+
+---
+
+## 📱 Gestes Mobiles Spécifiques Nimbus
+
+### Swipe Navigation
+```typescript
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true
+})
+export class SwipeNavDirective {
+  private startX = 0;
+  private startY = 0;
+  
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    this.startX = e.touches[0].clientX;
+    this.startY = e.touches[0].clientY;
+  }
+  
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const endX = e.changedTouches[0].clientX;
+    const endY = e.changedTouches[0].clientY;
+    const diffX = this.startX - endX;
+    const diffY = this.startY - endY;
+    
+    // Seulement swipe horizontal significatif
+    if (Math.abs(diffX) > 50 && Math.abs(diffY) < 30) {
+      if (diffX > 0) {
+        this.swipeLeft.emit(); // → Tab suivant
+      } else {
+        this.swipeRight.emit(); // ← Tab précédent
+      }
+    }
+  }
+  
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+}
+```
+
+### Hover-reveal Adaptatif (Desktop seulement)
+```typescript
+// Seulement sur desktop
+<div class="group relative">
+  <div class="flex items-center">
+    <span>📁 Projects</span>
+    <button class="opacity-0 group-hover:opacity-100 transition-opacity lg:block hidden ml-2">
+      +
+    </button>
+  </div>
+</div>
+
+// Mobile: Toujours visible ou menu contextuel
+<div class="flex items-center justify-between lg:justify-start">
+  <span>📁 Projects</span>
+  <button class="lg:hidden ml-2">+</button>
+</div>
+```
+
+---
+
+## 🔧 Service UI Mode & Responsive State
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour le mode Nimbus vs Legacy
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+  
+  // Signal pour le breakpoint actif
+  currentBreakpoint = signal<'mobile' | 'tablet' | 'desktop'>('desktop');
+  
+  constructor(private breakpointObserver: BreakpointObserver) {
+    // Surveillance des breakpoints
+    this.breakpointObserver.observe([
+      '(max-width: 767px)',
+      '(min-width: 768px) and (max-width: 1023px)', 
+      '(min-width: 1024px)'
+    ]).subscribe(result => {
+      const breakpoints = result.breakpoints;
+      if (breakpoints['(max-width: 767px)']) {
+        this.currentBreakpoint.set('mobile');
+      } else if (breakpoints['(min-width: 768px) and (max-width: 1023px)']) {
+        this.currentBreakpoint.set('tablet');
+      } else {
+        this.currentBreakpoint.set('desktop');
+      }
+    });
+  }
+  
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+  
+  private loadUIMode(): boolean {
+    return localStorage?.getItem('obsiviewer-ui-mode') !== 'legacy';
+  }
+}
+```
+
+---
+
+## 🚀 Composants Spécifiques Nimbus
+
+### 1) Bookmark Card (Responsive)
+```typescript
+// Desktop: Carte horizontale
+<div class="border rounded-lg p-3 hover:shadow-md transition-shadow">
+  <div class="flex gap-3">
+    <img src="thumbnail.jpg" class="w-20 h-20 rounded object-cover flex-shrink-0">
+    <div class="flex-1 min-w-0">
+      <h4 class="font-semibold truncate">Article Title</h4>
+      <p class="text-sm text-gray-600 line-clamp-2">Description of the bookmarked content...</p>
+      <div class="flex items-center gap-2 mt-1">
+        <span class="text-xs text-gray-500">example.com</span>
+        <span class="text-xs text-gray-500">2 days ago</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+// Mobile: Carte verticale
+<div class="border rounded-lg p-3 hover:shadow-md transition-shadow">
+  <img src="thumbnail.jpg" class="w-full h-32 rounded object-cover mb-2">
+  <h4 class="font-semibold truncate">Article Title</h4>
+  <p class="text-sm text-gray-600 line-clamp-2">Description...</p>
+  <div class="flex justify-between items-center mt-2">
+    <span class="text-xs text-gray-500">example.com</span>
+    <span class="text-xs text-gray-500">2 days ago</span>
+  </div>
+</div>
+```
+
+### 2) Result List Item Nimbus
+```typescript
+// Desktop: Ligne compacte
+<div class="flex items-center gap-3 p-3 border-b hover:bg-gray-50 cursor-pointer">
+  <div class="w-6 h-6 rounded bg-blue-100 flex items-center justify-center text-sm">📄</div>
+  <div class="flex-1 min-w-0">
+    <h4 class="font-medium truncate">Document Title</h4>
+    <p class="text-sm text-gray-600 truncate">First few lines of content as preview...</p>
+  </div>
+  <div class="flex items-center gap-3 text-sm text-gray-500">
+    <span>2h ago</span>
+    <div class="flex gap-1">
+      <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">work</span>
+    </div>
+  </div>
+</div>
+
+// Mobile: Stack vertical
+<div class="p-3 border-b hover:bg-gray-50 cursor-pointer">
+  <div class="flex items-start gap-2">
+    <div class="w-6 h-6 rounded bg-blue-100 flex items-center justify-center text-sm mt-0.5">📄</div>
+    <div class="flex-1 min-w-0">
+      <h4 class="font-medium">Document Title</h4>
+      <p class="text-sm text-gray-600 line-clamp-2">First few lines of content as preview...</p>
+      <div class="flex items-center justify-between mt-1">
+        <span class="text-xs text-gray-500">2h ago</span>
+        <div class="flex gap-1">
+          <span class="bg-gray-100 px-2 py-0.5 rounded text-xs">work</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## 📋 Critères d'Acceptation Nimbus
+
+### Desktop (≥1024px)
+- [x] **Layout 3 colonnes** fidèle à Nimbus
+- [x] **Top bar** avec search centré + CTA "+ Page" turquoise
+- [x] **Chips filtres** "All folders ▾", "All tags ▾", "All pages ▾" avec badges
+- [x] **Pickers overlays** avec recherche locale + hiérarchie
+- [x] **Outline contextuel** panneau droit fixe
+- [x] **Hover-reveal** création sous-dossiers
+- [x] **Workspace switcher** dans sidebar
+
+### Tablet (768-1023px)  
+- [x] **Navigation par onglets** [Sidebar] [List] [Page] [ToC]
+- [x] **Drawer sidebar** 80vw avec arborescence
+- [x] **Chips scrollables** horizontalement
+- [x] **Pickers full-screen** avec Done/Clear
+- [x] **ToC inline** collapsible
+
+### Mobile (<768px)
+- [x] **Bottom navigation** 5 onglets [Menu] [List] [+] [Search] [ToC]
+- [x] **Drawers full-width** pour sidebar/pickers
+- [x] **Search bar compacte** dans header
+- [x] **Touch targets** ≥ 44px
+- [x] **Swipe gestures** changement onglets
+- [x] **Pull-to-refresh** liste résultats
+
+### Fidélité Nimbus
+- [x] **Philosophie workspace-first** avec sélecteur d'espace
+- [x] **Organisation bi-axiale** dossiers + tags
+- [x] **Recherche d'abord** avec filtres persistants
+- [x] **Progressive disclosure** (menus contextuels)
+- [x] **Bookmarks** avec cartes enrichies
+- [x] **Boutons Share/Add to portal** visibles
+
+### Performance & Accessibilité
+- [x] **Virtual scroll** 1000+ items fluide
+- [x] **Lighthouse Mobile** ≥ 85 perf, ≥ 95 a11y
+- [x] **Keyboard navigation** complète
+- [x] **WCAG 2.1 AA** tous breakpoints
+- [x] **Toggle UI** persisté sans perte état
+
+---
+
+## 🎯 Livrables Exacts
+
+1. **Toggle UI Nimbus/Legacy** avec persistence
+2. **Layout 3 colonnes desktop** fidèle Nimbus
+3. **Navigation responsive** tablette/mobile
+4. **Composants Nimbus** : Chips, Pickers, Outline, Bookmark cards
+5. **Gestes mobiles** : swipe, pull-to-refresh
+6. **Thème clair/sombre** Nimbus-like
+7. **Documentation** responsive + patterns Nimbus
+
+**État initial** : Toggle sur "Nimbus" par défaut, legacy UI intacte
+**Testing** : 3 breakpoints + gestures + accessibility
+**Performance** : 60fps virtual scroll, lazy loading images
+
+---
+
+Exécute maintenant cette implémentation en respectant scrupuleusement les patterns UI/UX de Nimbus Notes tout en garantissant la compatibilité 100% responsive mobile/tablet/desktop.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_gemini.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_gemini.md
new file mode 100644
index 0000000..b4efa7b
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_gemini.md
@@ -0,0 +1,214 @@
+Absolument. Voici une version refondue et enrichie du prompt. Elle intègre la philosophie et les détails UX de l'analyse de Nimbus Notes directement dans les spécifications techniques pour le développement de ObsiViewer, tout en renforçant l'exigence d'une compatibilité parfaite entre Desktop et Mobile.
+
+Ce prompt est conçu pour être donné directement à une équipe de développement.
+
+-----
+
+# 🎯 Prompt Windsurf — Refonte UI/UX "Nimbus-like" pour ObsiViewer (Desktop + Mobile)
+
+## 👤 Rôle & Mode
+
+Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Tu as les pleins pouvoirs pour refondre l'UI, ajouter les composants nécessaires et migrer le CSS vers Tailwind. Ton raisonnement doit être détaillé et toutes les features existantes doivent rester fonctionnelles.
+
+## 📜 Philosophie & Principes Directeurs (Inspiré de Nimbus/FuseBase)
+
+L'objectif n'est pas juste de changer l'apparence, mais d'adopter une philosophie qui rend l'application plus intuitive et puissante.
+
+1.  **Trois Panneaux Stables (Desktop)** : La structure principale est claire : Navigation à gauche, Liste des résultats au centre, Contenu à droite. Sur mobile, ces panneaux deviennent des vues ou des drawers distincts.
+2.  **Filtres Persistants & Visibles** : La recherche est affinée via des "chips" (ex: `All folders ▾`) toujours visibles. L'état du filtre est un élément central de l'UI, pas un menu caché.
+3.  **Pickers Riches** : Cliquer sur un chip de filtre ouvre un overlay (picker) avec sa propre recherche interne, des sélections multiples et des actions claires (`Clear`/`Done`).
+4.  **Découverte Progressive (Progressive Disclosure)** : Les options complexes sont masquées jusqu'à ce qu'elles soient nécessaires (ex: le bouton `+` pour ajouter un sous-dossier au survol, le sommaire/ToC qui s'ouvre depuis un bouton flottant).
+5.  **Création Centralisée** : L'action de création principale (`+ Page`) est unique et toujours accessible au même endroit.
+6.  **Organisation Bi-Axiale** : L'utilisateur navigue via une **hiérarchie de dossiers** (structure) et des **tags transversaux** (contexte).
+7.  **Le Contenu est Roi** : La lisibilité est maximisée (hiérarchie de titres, marges, etc.) et le contenu peut être enrichi (cartes de bookmarks, etc.).
+8.  **Réinitialisation Facile** : Des options "Clear" sont omniprésentes pour annuler les filtres et recherches, encourageant l'exploration sans crainte de se perdre.
+
+## 🚀 Contrainte Majeure
+
+L'interface doit être **100% responsive et optimisée pour chaque format (Desktop, Tablette, Mobile)**. Un **bouton de bascule** dans la barre de navigation permettra de passer de l'ancienne interface à la nouvelle ("Nimbus mode") sans perte d'état, avec une persistance du choix dans `localStorage`.
+
+-----
+
+## 🎯 Objectif Final
+
+### Desktop (≥1024px)
+
+Refondre ObsiViewer en une interface à **3 colonnes resizables** :
+
+1.  **Sidebar Gauche** : Accès rapides, arborescence de dossiers, liste de tags.
+2.  **Colonne Centrale** : Barre de recherche principale, trio de **chips de filtres** (`Dossiers`, `Tags`, `Pages`), et la liste des résultats virtualisée.
+3.  **Panneau Droit** : Lecteur Markdown avec une barre d'actions et un **panneau de sommaire (ToC)** accessible via un bouton flottant à droite.
+
+### Tablette & Mobile (\<1024px)
+
+Transformer l'interface en une navigation par **onglets en bas de l'écran (Bottom Navigation)** ou via un **drawer latéral**.
+
+  - **Vue 1 (Navigation)** : Accès aux dossiers et tags (drawer ou vue dédiée).
+  - **Vue 2 (Liste)** : Barre de recherche et résultats en pleine largeur.
+  - **Vue 3 (Page)** : Lecteur Markdown en pleine largeur.
+  - **Gestures** : Le swipe horizontal permet de naviguer entre les vues ; le pull-to-refresh actualise les listes.
+
+-----
+
+## 📋 Architecture du Feature Flag
+
+### 1\) Toggle UI dans la NavBar (`app-navbar.component.html`)
+
+Ajouter un bouton clair pour basculer entre les modes.
+
+```html
+<button (click)="uiModeService.toggleUIMode()"
+        [attr.aria-label]="'Basculez vers l\'interface ' + ((uiModeService.isNimbusMode$ | async) ? 'Legacy' : 'Nimbus')"
+        class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 text-sm">
+  <span *ngIf="(uiModeService.isNimbusMode$ | async)">✨ Mode Nimbus</span>
+  <span *ngIf="!(uiModeService.isNimbusMode$ | async)">🔧 Mode Legacy</span>
+</button>
+```
+
+### 2\) Service de gestion du mode (`ui-mode.service.ts`)
+
+Utiliser un Signal pour une réactivité instantanée et `localStorage` pour la persistance.
+
+```typescript
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+
+  toggleUIMode(): void {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return true; // Nimbus par défaut
+    return localStorage.getItem('obsiviewer-ui-mode') !== 'legacy';
+  }
+}
+```
+
+### 3\) Layout adaptatif (`app-shell-adaptive.component.ts`)
+
+Le composant racine qui charge dynamiquement le bon layout.
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+import { AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiModeService.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent, AsyncPipe],
+})
+export class AppShellAdaptiveComponent {
+  uiModeService = inject(UiModeService);
+}
+```
+
+-----
+
+## 🎨 Spécifications Détaillées des Composants (UX & UI)
+
+### 1\. Colonne Centrale : Recherche & Filtres (Le Cerveau)
+
+#### **Desktop & Mobile**
+
+  - **Barre de Recherche Principale** : Large, centrée sur Desktop. Sur mobile, elle est proéminente en haut de la vue "Liste".
+  - **Trio de Chips de Filtres** : Juste sous la recherche, implémenter trois boutons "stateful" :
+      - `Tous les dossiers ▾` | `Tous les tags ▾` | `Toutes les pages ▾`
+      - Chaque chip affiche un **badge de comptage** (ex: `+2`) si des sélections sont actives.
+      - Cliquer ouvre un **Picker flottant (overlay)** :
+          - **UI du Picker** : Barre de recherche interne, liste scrollable, et boutons `Réinitialiser` / `Appliquer` en bas.
+          - **Picker Dossiers** : Affiche l'arborescence avec des chevrons `›` pour déplier les sous-dossiers. Utilise des checkboxes pour la multi-sélection.
+          - **Picker Tags** : Liste alphabétique de tags avec des checkboxes.
+  - **Feedback de Recherche** : Afficher un message `N pages trouvées` avec un lien `Effacer les filtres` quand des filtres sont actifs.
+
+### 2\. Colonne de Gauche : Navigation (La Carte)
+
+#### **Desktop (`<app-left-sidebar.desktop.component.ts`)**
+
+  - Layout fixe et resizable.
+  - Structure : `Liens Rapides`, puis `Dossiers`, `Tags`.
+  - **Pattern Hover-Reveal** : Une icône `+` apparaît à droite d'un nom de dossier au survol pour créer un sous-dossier, gardant l'interface épurée.
+  - **Styling** : Autoriser les emojis dans les noms de dossiers/tags. Le dossier actif doit avoir un surlignage clair (ex: fond bleu pâle et bordure gauche bleue).
+
+#### **Mobile (`<app-left-sidebar.mobile.component.ts`)**
+
+  - Le contenu de la sidebar est placé dans un **drawer** qui s'ouvre depuis la gauche (via un bouton "hamburger" ou un swipe depuis le bord de l'écran).
+  - Le drawer doit avoir un fond semi-opaque (`backdrop`) pour fermer en cliquant à l'extérieur.
+
+### 3\. Panneau de Droite : Lecteur & Sommaire (La Page)
+
+#### **Desktop (`<app-note-view.desktop.component.ts`)**
+
+  - Le titre de la page est large et très lisible.
+  - **Bouton de Sommaire (ToC) Flottant** : Un bouton circulaire avec une icône de type "liste" est fixé verticalement à droite du contenu.
+      - Au clic, il **déplie un panneau latéral** listant les titres H1-H6 du document.
+      - Cliquer sur un titre dans le sommaire scrolle la vue jusqu'à l'ancre correspondante.
+  - **Barre d'Actions** : Placer les actions contextuelles (Partager, Exporter, etc.) dans une barre d'outils en haut à droite du panneau.
+
+#### **Mobile (`<app-note-view.mobile.component.ts`)**
+
+  - Le lecteur prend toute la largeur de l'écran pour une immersion maximale.
+  - Le **bouton de sommaire flottant** est également présent, mais en bas à droite (comme un FAB - Floating Action Button).
+  - Au clic, le sommaire s'ouvre en **overlay pleine page** ou dans un **panneau qui glisse depuis le bas**.
+
+### 4\. Navigation Mobile : Bottom Bar & Gestures
+
+  - **Bottom Navigation Bar (`<app-bottom-nav.component.ts`)** :
+      - Fixée en bas, toujours visible sur mobile/tablette.
+      - Contient 3 ou 4 icônes pour basculer entre les vues principales : `Navigation (Dossiers/Tags)`, `Liste`, et `Page`. L'icône active est visuellement distincte.
+  - **Directive de Swipe (`swipe-nav.directive.ts`)** :
+      - Créer une directive Angular pour détecter les swipes gauche/droite.
+      - L'appliquer au conteneur principal pour permettre de naviguer entre les vues `Liste` et `Page` de manière fluide.
+
+-----
+
+## ⚡ Performance & Optimisations Mobiles
+
+  - **Virtual Scrolling** : Indispensable pour la colonne centrale pour afficher des milliers de notes sans impacter les performances. Utiliser le CDK de Angular.
+  - **Lazy Loading** : Charger les composants de layout (Nimbus/Legacy) et les vues mobiles/desktop en lazy loading.
+  - **Debounce** : Appliquer un debounce de 300ms sur l'input de recherche pour éviter des requêtes excessives.
+  - **Touch Targets** : Sur mobile, tous les éléments cliquables (boutons, items de liste) doivent avoir une taille minimale de 44x44px pour l'accessibilité.
+
+-----
+
+## ✅ Critères d'Acceptation
+
+### Général
+
+  - [ ] Le toggle UI fonctionne, persiste l'état, et ne cause aucune perte de contexte.
+  - [ ] L'application est fluide et réactive sur tous les breakpoints, de 320px à 1920px+.
+
+### Desktop (≥1024px)
+
+  - [ ] Le layout à 3 colonnes est fonctionnel, avec des séparateurs resizables.
+  - [ ] Les pickers de filtres (dossiers/tags) fonctionnent avec leur recherche interne.
+  - [ ] Le bouton `+` pour créer des sous-dossiers apparaît bien au survol.
+  - [ ] Le panneau de sommaire (ToC) se déplie depuis le bouton flottant et la navigation par ancre fonctionne.
+
+### Tablette & Mobile (\<1024px)
+
+  - [ ] La navigation par onglets en bas de l'écran est fonctionnelle et intuitive.
+  - [ ] La sidebar de navigation s'ouvre et se ferme correctement en tant que drawer.
+  - [ ] Les gestures de swipe pour naviguer entre les vues sont fluides.
+  - [ ] Le sommaire s'ouvre dans un overlay ou un panneau adapté au format mobile.
+  - [ ] L'UI est optimisée pour le tactile (grandes zones de clic, pas de hover-dependant features).
+
+### Accessibilité & Performance
+
+  - [ ] Score Lighthouse : Performance ≥ 90, Accessibilité ≥ 95.
+  - [ ] Navigation au clavier complète sur Desktop.
+  - [ ] ARIA-labels corrects pour tous les contrôles interactifs.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_grok.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_grok.md
new file mode 100644
index 0000000..b15bf0e
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_grok.md
@@ -0,0 +1,903 @@
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## ObsiViewer → UI/UX "Nimbus-like" (simple, dense, rapide)
+
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX designer**. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+
+**Contrainte majeure :** L'interface doit être **100% responsive** et compatible à 100% avec les modes Desktop et Mobile (téléphone et tablette). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état. Assure une expérience fluide sur tous les appareils, avec des adaptations spécifiques pour les écrans tactiles (touch targets ≥44x44px), gestures (swipe, pull-to-refresh), et breakpoints optimisés pour téléphones (xs/sm), tablettes (md), et desktops (lg/xl/2xl).
+
+---
+
+## Contexte rapide
+
+* Projet : **ObsiViewer** (Angular 20 + Tailwind, Node/Express backend).
+* Objectif : Refondre l'interface selon un design **Nimbus Notes / FuseBase Note**-like, en intégrant fidèlement la lecture anatomique et UX décrite ci-dessous.
+* Cœurs d'usage : navigation par **dossiers**, **tags**, **recherche**, **lecture markdown** plein écran, **ToC** à droite, **tri et filtres** rapides.
+* **Nouveauté** : Design adaptatif complet (Desktop/Mobile/Tablet) avec UI toggle persisté.
+
+### Description détaillée de l'interface Nimbus (à reproduire fidèlement)
+
+Voici une **lecture “anatomique” et UX** de l’interface Web de *Nimbus Notes / FuseBase Note*, rédigée comme le ferait un lead designer qui doit la reproduire fidèlement. Cette description guide toute la refonte et doit être intégrée à 100% dans l'implémentation, en veillant à la compatibilité Desktop/Mobile/Tablet (par exemple, colonnes empilées ou onglets sur mobile, drawers tactiles sur tablette).
+
+---
+
+# 1) Philosophie produit (ce qui guide toute l’UI)
+
+* **Workspace-first** : tout vit dans un *espace de travail* isolé (pages, dossiers, tags, membres). On change d’espace, on change d’univers de contenu – ce n’est pas un simple filtre global. ([FuseBase][1])
+* **Organisation bi-axiale** : **dossiers (hiérarchie)** + **tags (multi-catégories)**. Les dossiers structurent, les tags donnent le contexte transversal et la recherche rapide. ([FuseBase][2])
+* **Recherche d’abord, navigation ensuite** : la *top bar* met la recherche au centre, avec des *chips* de filtres persistants (“All folders / All tags / All pages”) qui rendent l’état des filtres **visible, éditable et réinitialisable** sans quitter le flux.
+* **Progressive disclosure** : menus condensés, panneaux contextuels (picker dossiers/tags, panneau d’outline à droite) qui n’apparaissent que “on demand” pour ne jamais surcharger l’écran.
+* **Un contenu, plusieurs façades** : la page est éditée dans l’app interne, mais peut être **partagée** ou **publiée** dans un **Portal** externe *brandé*. Les commandes “Add to portal / Share” sont toujours visibles dans l’éditeur. ([FuseBase][3])
+
+---
+
+# 2) Layout global (3 panneaux + overlays)
+
+## A. Barre supérieure (globale)
+
+* **Champ de recherche** large, centré, avec **icône filtre** (entonnoir) qui ouvre les options avancées.
+* Bouton **“+ Page”** (CTA positif turquoise) : création immédiate dans le contexte courant (workspace + dossier sélectionné).
+* À droite, dans la *content toolbar* du document : **Ask AI**, **Add to portal**, **Share**, loupe locale, pièces jointes/annotations, **toggle plein écran**, menu kebab. (Les intitulés et la présence “Ask AI / Portals” sont aussi documentés côté guides.) ([FuseBase][4])
+
+## B. Colonne de gauche (navigation primaire)
+
+* **Quick Links** puis **Folders / Tags / Trash** — arborescence compacte avec triangles de disclosure.
+* **Création de sous-dossier au survol** via un **+** qui apparaît à droite du dossier (pattern hover-reveal). ([FuseBase][2])
+* **Sélecteur d’organisation/workspace** et **switch de thème** dans le footer du rail (menu avatar : “Light theme”, Settings, etc.). Le changement d’espace est aussi accessible depuis la colonne et le menu avatar. ([FuseBase][5])
+* **État** : le dossier actif est surligné, le compteur de pages peut apparaître à côté des libellés (donnant un feedback rapide sur la densité).
+
+**Traits de design**
+
+* Icônes de dossiers colorées + emojis autorisés dans les noms (lisibilité + repères mnémotechniques).
+* Densité **compacte** mais respirante (gouttière + padding régulier), contrastes élevés en dark mode.
+
+## C. Colonne centrale (index / résultats)
+
+* En-tête d’index : *chips* **All folders ▾**, **All tags ▾**, **All pages ▾**. Chacune ouvre un **picker flottant** (overlay) :
+
+  * **Picker dossiers** : recherche interne, sélection multi, sous-dossiers avec *chevron/›*, actions **Clear / Done**, badges *+1*, *+15* reflétant le nombre de sélections.
+  * **Picker tags** : liste alphabétique, **checkmarks** pour les tags actifs, **Clear / Done** en bas.
+* En dessous, **liste des pages** : tuiles en une ligne avec **titre**, **date**, **snippet** (extrait), **petites icônes** (ex. carte *bookmark* pour les liens sauvegardés). Le *hover* change légèrement le fond ; l’élément sélectionné est **surligné** (bleu).
+* **Message “Found pages: N”** + lien **Clear** lorsque des filtres sont actifs (feed-back lisible de l’état de recherche).
+
+**Subtilités d’usage**
+
+* Les *chips* de filtre restent visibles pendant la navigation (ancrage cognitif).
+* Chaque picker possède sa **barre de recherche locale**, ce qui réduit la charge mentale sur de gros jeux de tags/dossiers.
+* Les *chips* affichent des **badges de comptage** (+1, +2) et un **caret** pour signifier qu’il s’agit d’un *menu stateful*, pas d’un simple label.
+
+## D. Panneau de droite (lecteur/éditeur)
+
+* **Titre de page** très lisible, méta-ligne en dessous (ex. *Add tags*), mini-icônes de statut.
+* **Contenu riche** : titres, listes, *inline code*, *code fences*, callouts, objets embarqués, cartes “**Bookmark**” (prévisualisation d’URL avec titre/description/vignette). ([FuseBase][6])
+* **Toolbar du document** (droite) :
+
+  * **Ask AI** (génération, résumé, etc.) ; **Add to portal** (publier la page dans une arborescence publique/privée) ; **Share** (lien partagé, droits). ([FuseBase][3])
+  * Loupe/“find in page”, attachements, rappel/notification si activés, **plein écran** avec raccourci (tooltip).
+* **Panneau latéral contextuel (outline)** : petit bouton *hamburger* rond “dans la page” (à mi-hauteur, côté droit) qui **déplie un rail d’outline** listant les headings H1–H6 ; clic = **scroll-to**. (Très utile sur documents longs, *progressive disclosure*).
+
+**Édition & Portals (workflow)**
+
+* L’édition se fait **directement** côté web, et l’on peut **pousser** vers un *Portal* sans passer par un autre back-office : “Add to portal” + *drag & drop* vers la structure du Portal (depuis le rail). ([FuseBase][3])
+
+## E. Overlays & états transitoires
+
+* **Pickers** (Folders/Tags) : overlays centrés au-dessus de la colonne des résultats, avec **Clear/Done** persistants en pied.
+* **Dark / Light** : toggles dans le menu avatar ; la **typographie/balances de gris** sont recalibrées (mode light très clair, mode dark très contrasté) pour garder le même *information scent*.
+* **Notifications/Tooltips** : discrets, ancrés aux contrôles (ex. plein écran).
+
+---
+
+# 3) Micro-interactions & patterns récurrents
+
+* **Hover-reveal** : le “+” pour créer un sous-dossier n’apparaît qu’au survol → garde l’arborescence propre. ([FuseBase][2])
+* **Pills / Chips** avec **caret** + **badge** = *stateful filter* (on comprend d’un coup d’œil ce qui est filtré).
+* **Sélection persistante** dans la liste : l’élément actif garde un **fond** et une **bordure** turquoise ; on ne “perd” pas la page lue.
+* **Clear partout** : dans les pickers et au niveau global – la stratégie de *reset rapide* est omniprésente (réduction du coût d’exploration).
+* **Hiérarchie visuelle stricte** : H1–H3 très différenciés, marges généreuses, *line-height* confortable (lecture longue).
+
+---
+
+# 4) Contenus & types spéciaux
+
+* **Bookmarks** : carte enrichie (titre + description + vignette) → meilleure *scanability* des liens sauvegardés que du simple texte. ([FuseBase][6])
+* **Tables/Databases** : vues avec tri, filtres, commentaires cellule, panneau de calcul (présents dans l’écosystème guides). ([FuseBase][4])
+* **Web Clipper** : amène des pages propres (sans pubs), cohérent avec la carte Bookmark ; logique de capture → enrichissement → partage. ([FuseBase][7])
+
+---
+
+# 5) Accessibilité & lisibilité
+
+* **Contrastes sûrs** (notamment en dark), tailles de cible suffisantes sur la top bar et les chips.
+* **Iconographie descriptive** (dossier, tag, favoris, web card…) + emojis pour ancrage visuel rapide.
+* **Réduction du *cognitive load*** : les options rarement utilisées sont “cachées” (kebab, hover-reveal), les actions courantes sont **toujours** visibles (Search, +Page, filtres).
+
+---
+
+# 6) Ce que l’UX “raconte” (le mode d’emploi implicite)
+
+1. **Trouver** : commencez par *Search* et affinez avec *All folders / All tags*.
+2. **Parcourir** : si vous êtes “dans” un dossier, l’index au centre sert de *tableau de bord* (dates + snippets).
+3. **Éditer / Enrichir** : dans le panneau de droite, vous rédigez, taggez, joignez, bookmarquez.
+4. **Diffuser** : *Share* pour du partage direct, **Add to portal** pour publier dans un espace externe gouverné (droits, branding). ([FuseBase][8])
+
+---
+
+# 7) Détails visibles dans vos captures (à reproduire à l’identique)
+
+* **Top bar** : champ de recherche + icône filtre + **+ Page** (CTA turquoise).
+* **Trio de chips** : “All folders ▾” (multi-sélection hiérarchique), “All tags ▾” (liste à coches), “All pages ▾”.
+* **Liste** : ligne compacte, *hover*, *selected state* bleu, **date** en gris, **snippet** tronqué, petite icône (ex. “shopping cart” pour bookmark e-commerce).
+* **Panneau d’outline** (badge hamburger circulaire flottant à droite du contenu) → rail d’outline repliable.
+* **Menu avatar (footer gauche)** : **Light theme**, Settings, Upgrade, logout, etc.
+* **Dark/Light** : la *skin* claire conserve l’architecture et les espacements, en ne changeant que la palette et les ombres.
+
+---
+
+## TL;DR — Nimbus en 8 principes à retenir (pour inspirer un redesign)
+
+1. **Trois panneaux** stables (nav / index / contenu) + **overlays** transitoires.
+2. **Filtres persistants** sous forme de **chips** toujours visibles.
+3. **Pickers** riches (recherche locale, checkmarks, Clear/Done).
+4. **Outline contextuel** à droite, déclenché **dans** la page.
+5. **Action de création** unique, toujours au même endroit (**+ Page**).
+6. **Workspaces** strictement séparés ; **Portals** pour l’externe. ([FuseBase][1])
+7. **Bi-axe dossiers/tags** (structure + sens transversal). ([FuseBase][2])
+8. **Share/Add to portal** omniprésents : écrire → publier est un **continuum**. ([FuseBase][8])
+
+Si tu veux, je peux te livrer juste après un *spec UI* prêt à coder (grid, tailles, tokens couleur, comportements exacts des pickers) ou un **prompt Windsurf** pour cloner ces patterns dans ObsiViewer.
+
+[1]: https://thefusebase.com/guides/basics/workspaces/?utm_source=chatgpt.com  "Workspaces"
+[2]: https://thefusebase.com/guides/basics/folders-and-tags/?utm_source=chatgpt.com  "Folders and Tags"
+[3]: https://thefusebase.com/guides/client-portal/how-to-manage-your-portal-from-the-web-version/?utm_source=chatgpt.com  "How To Manage Your Portal From The Web Version"
+[4]: https://thefusebase.com/guides/?utm_source=chatgpt.com  "Guides Archive"
+[5]: https://nimbusweb.me/fr/guides/getting-started/how-to-navigate/?utm_source=chatgpt.com  "How to navigate"
+[6]: https://nimbusweb.me/guides/basics/bookmarks/?utm_source=chatgpt.com  "Bookmarks"
+[7]: https://thefusebase.com/guides/web-clipper/nimbus-clipper-for-google-chrome/?utm_source=chatgpt.com  "Nimbus Clipper for Google Chrome"
+[8]: https://thefusebase.com/guides/embedding-sharing/shared-folders-and-pages/?utm_source=chatgpt.com  "Shared folders and pages"
+
+---
+
+## 🎯 Objectif final (résumé)
+
+### Desktop (≥1024px)
+Refondre l'interface ObsiViewer en **3 colonnes** respectant fidèlement la description Nimbus :
+
+1. **Sidebar gauche** (Quick Links, Dossiers arborescents, Tags) — Redimensionnable.
+2. **Colonne centrale** Liste des pages (recherche, filtres dossiers/tags, tris, résultats virtualisés).
+3. **Vue de page** à droite (lecture markdown, barre d'actions, **panneau sommaire/ToC** docké à l'extrême droite).
+
+Le tout **compact, performant, thème clair/sombre**, navigation au clavier, états persistés localement.
+
+### Mobile/Tablet (<1024px)
+Une navigation **par onglets/drawer** intelligente, adaptée à la philosophie Nimbus (progressive disclosure, chips persistants, overlays tactiles) :
+
+- **Tab 1 : Sidebar** (dossiers, tags, recherche) — Panneau full-width ou drawer collapsible.
+- **Tab 2 : Liste** (résultats de recherche) — Full-width scrollable.
+- **Tab 3 : Page** (markdown) — Full-width avec ToC inline collapsible ou drawer.
+
+**Gestures** : Swipe horizontal pour navigation onglets, pull-to-refresh, tap = open item. Assure que les chips de filtres et pickers sont optimisés pour touch (tailles augmentées, overlays pleine largeur sur mobile).
+
+---
+
+## 📋 Architecture Feature Flag & Toggle
+
+### 1) Toggle UI dans la NavBar
+
+Ajouter un **bouton toggle** dans `src/app/layout/app-navbar/app-navbar.component.ts` :
+
+```html
+<!-- app-navbar.component.html (snippet) -->
+<div class="flex items-center gap-2">
+  <!-- Autres boutons -->
+  <button 
+    (click)="toggleUIMode()"
+    [attr.aria-label]="'Toggle ' + (isNimbusMode$ | async ? 'legacy' : 'nimbus') + ' UI'"
+    class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+    <span *ngIf="(isNimbusMode$ | async)">✨ Nimbus</span>
+    <span *ngIf="!(isNimbusMode$ | async)">🔧 Legacy</span>
+  </button>
+</div>
+```
+
+### 2) Service de gestion du mode UI
+
+Créer `src/app/shared/services/ui-mode.service.ts` :
+
+```typescript
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour réactivité fine-grained
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+
+  constructor() {}
+
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return false;
+    const saved = localStorage.getItem('obsiviewer-ui-mode');
+    return saved ? saved === 'nimbus' : true; // Nimbus par défaut
+  }
+}
+```
+
+### 3) Layout wrapper avec feature flag
+
+Créer `src/app/layout/app-shell-adaptive/app-shell-adaptive.component.ts` :
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiMode.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent],
+})
+export class AppShellAdaptiveComponent {
+  uiMode = inject(UiModeService);
+}
+```
+
+---
+
+## 🎨 Responsive Design Strategy
+
+### Breakpoints Tailwind (standard)
+
+```typescript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'xs': '320px',   // iPhone SE
+      'sm': '640px',   // Petites tablettes
+      'md': '768px',   // iPad, tablettes
+      'lg': '1024px',  // Desktop compact
+      'xl': '1280px',  // Desktop standard
+      '2xl': '1536px', // Larges écrans
+    },
+  },
+};
+```
+
+### Mobile First Approach
+
+**Développer pour mobile d'abord, puis enrichir pour desktop.** Assure que tous les éléments Nimbus (chips, pickers, outline) sont tactiles et responsifs : par exemple, chips scrollables horizontalement sur mobile, pickers en modales pleine largeur sur téléphone/tablette.
+
+---
+
+## 📱 Layouts Responsifs
+
+### Desktop Layout (≥1024px)
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Dark, fixed, h-14)                              │
+├────────────────┬──────────────────┬──────────────────────┤
+│                │                  │                      │
+│  SIDEBAR       │   RESULT LIST    │   NOTE VIEW + TOC    │
+│  (240-440px)   │   (virtualized)  │   (Resizable)        │
+│  Resizable     │                  │                      │
+│                │                  │                      │
+│  - Quick       │  - Search bar    │  - Markdown          │
+│    Links       │  - Filters       │  - ToC drawer        │
+│  - Folders     │  - Items (80px)  │  - Actions bar       │
+│  - Tags        │  - Pagination    │                      │
+│                │                  │                      │
+└────────────────┴──────────────────┴──────────────────────┘
+```
+
+### Tablet Layout (768px ≤ width < 1024px)
+
+```
+┌──────────────────────────────────────┐
+│ NAVBAR + Toggle (fixed, h-14)        │
+├──────────────────────────────────────┤
+│  TAB NAVIGATION (fixed, bottom)      │
+│  [Sidebar] [List] [Page] [ToC]       │
+├──────────────────────────────────────┤
+│                                      │
+│  ACTIVE TAB CONTENT (scrollable)     │
+│  - Drawer si besoin                  │
+│  - Full-width panels                 │
+│                                      │
+└──────────────────────────────────────┘
+```
+
+### Mobile Layout (<768px)
+
+```
+┌──────────────────────────────────┐
+│ NAVBAR (compact, h-12)           │
+│ [Menu] [Search] [Toggle]         │
+├──────────────────────────────────┤
+│                                  │
+│  TAB/DRAWER NAVIGATION           │
+│  [≡] [🔍] [📄] [📋]             │
+│                                  │
+│  CONTENT AREA (Full-width)       │
+│  - Drawer sidebar (80vw left)    │
+│  - Swipeable list (list tab)     │
+│  - Markdown full-screen (page)   │
+│  - Inline ToC (toggle button)    │
+│                                  │
+├──────────────────────────────────┤
+│ Bottom Navigation (sticky)       │
+│ Tab buttons (4 icônes)           │
+└──────────────────────────────────┘
+```
+
+---
+
+## 🎬 Composants Nimbus Responsifs
+
+### Desktop/Mobile Variants
+
+Chaque composant doit avoir des **variants responsifs** intégrant les patterns Nimbus (hover-reveal sur desktop, tap-reveal sur mobile ; chips avec badges tactiles) :
+
+```
+app-left-sidebar/
+├── app-left-sidebar.component.ts          # Logique partagée
+├── app-left-sidebar.desktop.component.ts  # ≥1024px (fixed, resizable)
+└── app-left-sidebar.mobile.component.ts   # <1024px (drawer)
+
+app-center-list/
+├── app-center-list.component.ts
+├── app-center-list.desktop.component.ts   # ≥1024px (2 colonnes)
+└── app-center-list.mobile.component.ts    # <1024px (full-width)
+
+app-note-view/
+├── app-note-view.component.ts
+├── app-note-view.desktop.component.ts     # ≥1024px (3 colonnes + ToC)
+└── app-note-view.mobile.component.ts      # <1024px (full-width + ToC inline)
+
+app-toc-drawer/
+├── app-toc-drawer.component.ts
+├── app-toc-drawer.desktop.component.ts    # ≥1024px (Fixed right)
+└── app-toc-drawer.mobile.component.ts     # <1024px (Collapsible, inline)
+```
+
+### Détection et Injection
+
+```typescript
+// app-left-sidebar.component.ts
+import { Component, inject } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+@Component({
+  selector: 'app-left-sidebar',
+  standalone: true,
+  template: `
+    @if (isDesktop$ | async) {
+      <ng-container *ngComponentOutlet="DesktopSidebarComponent"></ng-container>
+    } @else {
+      <ng-container *ngComponentOutlet="MobileSidebarDrawerComponent"></ng-container>
+    }
+  `,
+})
+export class AppLeftSidebarComponent {
+  private breakpoint = inject(BreakpointObserver);
+  isDesktop$ = this.breakpoint.observe(Breakpoints.Large).pipe(
+    map(result => result.matches)
+  );
+}
+```
+
+---
+
+## 📱 Navigation Mobile Avancée
+
+### Tab/Drawer Navigation
+
+```typescript
+// src/shared/services/mobile-nav.service.ts
+@Injectable({ providedIn: 'root' })
+export class MobileNavService {
+  activeTab = signal<'sidebar' | 'list' | 'page' | 'toc'>('list');
+  
+  setTab(tab: 'sidebar' | 'list' | 'page' | 'toc') {
+    this.activeTab.set(tab);
+    // Persist if needed
+  }
+}
+
+// Usage in component
+<app-bottom-nav [activeTab]="mobileNav.activeTab()" 
+                (tabChange)="mobileNav.setTab($event)">
+</app-bottom-nav>
+```
+
+### Swipe Navigation (Gestures)
+
+```typescript
+// Directive pour détection de swipe
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true,
+})
+export class SwipeNavDirective {
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+
+  private startX = 0;
+
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    this.startX = e.touches[0].clientX;
+  }
+
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const endX = e.changedTouches[0].clientX;
+    const diff = this.startX - endX;
+    
+    if (Math.abs(diff) > 50) { // Seuil minimum
+      if (diff > 0) this.swipeLeft.emit();
+      else this.swipeRight.emit();
+    }
+  }
+}
+```
+
+---
+
+## 🎨 Composants Spécifiques (Mobile-First)
+
+### 1) Bottom Navigation (Mobile)
+
+```html
+<!-- app-bottom-nav.component.html -->
+<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t 
+            border-gray-200 dark:border-gray-800 h-16 flex justify-around md:hidden">
+  <button *ngFor="let tab of tabs"
+          (click)="selectTab(tab.id)"
+          [class.active]="activeTab === tab.id"
+          class="flex-1 flex flex-col items-center justify-center gap-1 
+                 text-xs hover:bg-gray-50 dark:hover:bg-gray-800">
+    <span class="text-lg">{{ tab.icon }}</span>
+    <span>{{ tab.label }}</span>
+  </button>
+</nav>
+```
+
+### 2) Drawer Sidebar (Mobile)
+
+```html
+<!-- app-left-sidebar.mobile.component.html -->
+<aside class="fixed left-0 top-0 bottom-0 w-80vw max-w-xs 
+              bg-white dark:bg-gray-900 shadow-lg z-50
+              transform transition-transform duration-300"
+       [class.-translate-x-full]="!isOpen">
+  <!-- Contenu sidebar -->
+  <button (click)="close()" class="absolute top-4 right-4">✕</button>
+</aside>
+
+<!-- Backdrop -->
+<div *ngIf="isOpen" 
+     (click)="close()"
+     class="fixed inset-0 bg-black/50 z-40 md:hidden"></div>
+```
+
+### 3) Search Bar Compact (Mobile)
+
+```html
+<!-- app-search-bar.mobile.component.html -->
+<div class="sticky top-0 bg-white dark:bg-gray-900 p-2 shadow-sm z-10">
+  <div class="flex gap-2">
+    <!-- Menu toggle -->
+    <button (click)="toggleSidebar()" 
+            class="p-2 rounded hover:bg-gray-100">☰</button>
+    
+    <!-- Search input (full-width on mobile) -->
+    <input type="text" 
+           placeholder="Search..." 
+           class="flex-1 px-3 py-2 rounded border dark:border-gray-700">
+    
+    <!-- Filters button (mobile: popover instead of dropdown) -->
+    <button (click)="openFilters()" 
+            class="p-2 rounded hover:bg-gray-100">⚙️</button>
+  </div>
+  
+  <!-- Active badges (scrollable horizontally) -->
+  <div class="flex gap-1 mt-2 overflow-x-auto">
+    <span *ngFor="let badge of activeBadges" 
+          class="badge badge-sm">
+      {{ badge }} ✕
+    </span>
+  </div>
+</div>
+```
+
+### 4) Result List Item (Mobile-Optimized)
+
+```html
+<!-- app-result-list-item.component.html -->
+<div class="p-3 border-b hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
+  <!-- Title -->
+  <h3 class="font-semibold text-sm sm:text-base truncate">
+    {{ item.title }}
+  </h3>
+  
+  <!-- Date + Tags (stacked on mobile) -->
+  <div class="flex flex-col sm:flex-row sm:items-center gap-1 mt-1 text-xs text-gray-600">
+    <span>{{ item.modified | date:'short' }}</span>
+    <div class="flex gap-1 flex-wrap">
+      <span *ngFor="let tag of item.tags" 
+            class="badge badge-sm">{{ tag }}</span>
+    </div>
+  </div>
+  
+  <!-- Excerpt (truncated) -->
+  <p class="mt-2 text-xs text-gray-600 line-clamp-2">
+    {{ item.excerpt }}
+  </p>
+</div>
+```
+
+### 5) Markdown Viewer (Mobile-Responsive)
+
+```html
+<!-- app-markdown-viewer.component.html -->
+<article class="prose dark:prose-invert max-w-none 
+                 prose-sm sm:prose-base 
+                 prose-img:max-w-full prose-img:h-auto
+                 px-3 sm:px-6 py-4 sm:py-8">
+  <!-- Markdown content -->
+  <div [innerHTML]="markdownHTML"></div>
+  
+  <!-- ToC (mobile: inline toggle) -->
+  <button *ngIf="headings.length > 0"
+          (click)="showToC = !showToC"
+          class="lg:hidden fixed bottom-20 right-4 p-3 rounded-full bg-blue-500 text-white shadow-lg">
+    📋
+  </button>
+  
+  <nav *ngIf="showToC" class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+    <!-- ToC content -->
+  </nav>
+</article>
+```
+
+### 6) ToC Drawer (Desktop Fixed, Mobile Inline)
+
+```typescript
+// app-toc-drawer.component.ts
+@Component({
+  selector: 'app-toc-drawer',
+  template: `
+    <!-- Desktop: Fixed right panel (≥1024px) -->
+    <aside class="hidden lg:flex fixed right-0 top-14 bottom-0 w-64 
+                  bg-gray-50 dark:bg-gray-800 border-l 
+                  border-gray-200 dark:border-gray-700
+                  flex-col overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </aside>
+    
+    <!-- Mobile: Collapsible inline (< 1024px) -->
+    <div *ngIf="(isMobile$ | async)" 
+         [@slideDown]="showTocMobile ? 'in' : 'out'"
+         class="bg-gray-50 dark:bg-gray-800 border-t p-3 max-h-96 overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </div>
+  `,
+  animations: [
+    trigger('slideDown', [
+      state('in', style({ height: '*' })),
+      state('out', style({ height: '0px' })),
+      transition('in <=> out', animate('200ms ease-in-out')),
+    ]),
+  ],
+  standalone: true,
+})
+export class AppTocDrawerComponent {
+  @Input() headings: Heading[] = [];
+  showTocMobile = false;
+  isMobile$ = this.breakpoint.observe('(max-width: 1023px)').pipe(
+    map(r => r.matches)
+  );
+}
+```
+
+---
+
+## 🎯 Livrables Attendus
+
+### Code
+1. **Toggle UI** : `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`
+2. **Responsive Wrappers** : Variants pour chaque composant (Desktop/Mobile), intégrant les patterns Nimbus
+3. **Mobile Components** : Bottom nav, drawer sidebar, inline ToC, mobile search
+4. **Gesture Handling** : Swipe navigation directive, touch-friendly interactions
+5. **Breakpoint Utilities** : Service CDK layout, reactive signals
+
+### Styling
+1. **Tailwind Config** : Breakpoints personnalisés, tokens clair/sombre
+2. **Mobile-First CSS** : Base mobile, enrichissements desktop via `md:`, `lg:`
+3. **Touch-Friendly** : Boutons ≥44x44px, padding adéquat, hover states remplacés par tap sur mobile
+
+### Documentation
+1. **README_UI.md** : Schémas responsive, breakpoints, guide toggle, intégration Nimbus
+2. **MOBILE_GUIDE.md** : Navigation gestures, bottom nav flow, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, checklist A11y mobile
+
+### Tests
+1. **E2E** : Toggle persistence, layout switch, gesture navigation
+2. **Visual Regression** : Screenshots desktop/tablet/mobile
+3. **Accessibility** : Touch targets, ARIA labels, keyboard nav (Tab key)
+
+---
+
+## ⚡ Performance & Mobile Optimizations
+
+### Critical Optimizations
+
+- **Lazy-load images** : `loading="lazy"`, responsive `srcset`
+- **Virtual scroll** : CDK virtual scroll adapté mobile (item height ≈ 70–80px)
+- **Debounce search** : 300ms sur mobile, 150ms sur desktop
+- **Avoid layout shift** : Aspect ratios, skeleton loaders
+- **Network awareness** : `navigator.connection.effectiveType` pour adapt qualité
+- **Battery saver** : Réduire animations, throttle updates en mode saver
+
+### Lighthouse Mobile Targets
+
+- Performance ≥ 85
+- Accessibility ≥ 95
+- Best Practices ≥ 90
+
+---
+
+## 🎮 Raccourcis Clavier & Gestures
+
+### Desktop
+- `Ctrl/Cmd + K` : Palette commandes
+- `Ctrl/Cmd + F` : Focus recherche
+- `[` `]` : Replier/ouvrir ToC
+- `Alt + ←/→` : Navigation historique
+
+### Mobile/Tablet
+- **Tap** : Ouvrir note/item
+- **Swipe left/right** : Changer onglet (list → page → sidebar)
+- **Long-press** : Menu contextuel (favoris, open in new tab)
+- **Pull-to-refresh** : Rafraîchir liste (optionnel)
+- **Double-tap** : Zoom ToC (mobile)
+
+---
+
+## 📋 Critères d'Acceptation
+
+### Desktop (≥1024px)
+- [x] Layout 3 colonnes (sidebar fixe/resizable, liste, page+ToC), fidèle à Nimbus
+- [x] Changement dossier/tag/tri reflété en URL
+- [x] 1000+ items fluide (60fps virtual scroll)
+- [x] ToC synchronisé + repliable
+- [x] Tous les flux clavier-seuls possibles
+
+### Tablet (768–1023px)
+- [x] Navigation par onglets (Sidebar / List / Page)
+- [x] Drawer sidebar (80vw, swipeable)
+- [x] Bottom navigation sticky (4 icônes)
+- [x] Contenu full-width par onglet
+- [x] ToC inline collapsible
+
+### Mobile (<768px)
+- [x] Drawer sidebar (80vw max)
+- [x] Bottom nav (4 onglets)
+- [x] Search bar compact (menu + search + filters)
+- [x] List items optimisés (titre + date + excerpt)
+- [x] Markdown full-screen
+- [x] ToC overlay ou inline toggle
+- [x] Touch targets ≥ 44x44px
+
+### Feature Flag
+- [x] Toggle UI visible dans navbar
+- [x] État persisté (localStorage)
+- [x] Pas de perte d'état lors du switch
+- [x] Legacy UI reste intacte
+
+### Accessibility
+- [x] WCAG 2.1 AA sur tous les breakpoints
+- [x] Keyboard navigation complète (Tab, Arrow, Enter)
+- [x] ARIA labels pour navigation tactile
+- [x] Focus visible partout
+- [x] Zoom ≤ 200% sans horizontal scroll
+
+### Performance
+- [x] TTI < 2.5s cold start
+- [x] Scroll 60fps sur 1000+ items
+- [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y
+- [x] ImageOptimizations (lazy, srcset, format next-gen)
+
+---
+
+## 🗂️ Arborescence Fichiers
+
+```
+src/app/
+├── layout/
+│   ├── app-shell-adaptive/
+│   │   └── app-shell-adaptive.component.ts      # Feature flag wrapper
+│   ├── app-shell-nimbus/
+│   │   ├── app-shell-nimbus.component.ts        # 3 colonnes (desktop)
+│   │   ├── app-shell-nimbus.desktop.component.ts
+│   │   └── app-shell-nimbus.mobile.component.ts
+│   └── app-navbar/
+│       ├── app-navbar.component.ts
+│       └── [Bouton toggle UI intégré]
+│
+├── features/
+│   ├── sidebar/
+│   │   ├── app-left-sidebar.component.ts
+│   │   ├── app-left-sidebar.desktop.component.ts
+│   │   └── app-left-sidebar.mobile.component.ts
+│   │
+│   ├── search-bar/
+│   │   ├── app-search-bar.component.ts
+│   │   ├── app-search-bar.desktop.component.ts
+│   │   └── app-search-bar.mobile.component.ts
+│   │
+│   ├── result-list/
+│   │   ├── app-result-list.component.ts
+│   │   ├── app-result-list.desktop.component.ts
+│   │   ├── app-result-list.mobile.component.ts
+│   │   └── app-result-list-item.component.ts
+│   │
+│   ├── note-view/
+│   │   ├── app-note-view.component.ts
+│   │   ├── app-note-view.desktop.component.ts
+│   │   └── app-note-view.mobile.component.ts
+│   │
+│   ├── toc-drawer/
+│   │   ├── app-toc-drawer.component.ts
+│   │   └── app-toc-content.component.ts
+│   │
+│   └── bottom-nav/ [NEW]
+│       ├── app-bottom-nav.component.ts
+│       └── app-bottom-nav.component.html
+│
+├── shared/
+│   ├── services/
+│   │   ├── ui-mode.service.ts                   # [NEW] Toggle management
+│   │   ├── mobile-nav.service.ts                # [NEW] Tab/drawer state
+│   │   └── breakpoint.service.ts                # [NEW] Responsive helper
+│   │
+│   ├── directives/
+│   │   └── swipe-nav.directive.ts               # [NEW] Gesture detection
+│   │
+│   └── components/
+│       └── resizable-handle/
+│
+└── styles/
+    ├── tokens.css                               # Tailwind tokens
+    ├── responsive.css                           # Breakpoint utilities
+    └── mobile.css                               # Mobile-specific (touches, etc.)
+```
+
+---
+
+## 📅 Plan d'Implémentation (ordre conseillé)
+
+1. **Feature Flag Infrastructure** (1-2j)
+   - `UiModeService` + localStorage persistence
+   - `AppShellAdaptiveComponent` wrapper
+   - Toggle button dans navbar
+
+2. **Responsive Shell & Breakpoints** (2-3j)
+   - Desktop layout 3 colonnes (>=1024px)
+   - Tailwind breakpoints & tokens
+   - Resizable sidebar logic
+
+3. **Mobile Navigation & Bottom Nav** (2-3j)
+   - `BottomNavComponent` (4 onglets)
+   - `MobileNavService` (state management)
+   - Tab/drawer routing
+
+4. **Mobile Sidebar Drawer** (1-2j)
+   - Drawer animé (translate, backdrop)
+   - Swipe dismiss directive
+   - Z-index management
+
+5. **Responsive Components** (3-4j)
+   - Search bar variants (desktop/mobile)
+   - Result list item responsive
+   - Markdown viewer mobile optimizations
+
+6. **ToC Drawer Adaptive** (1-2j)
+   - Fixed right panel (desktop)
+   - Inline toggle (mobile)
+   - Animations smooth
+
+7. **Gestures & Touch** (1-2j)
+   - Swipe nav directive
+   - Long-press menu
+   - Pull-to-refresh (optionnel)
+
+8. **Accessibility & Testing** (2-3j)
+   - WCAG 2.1 AA audit
+   - Keyboard nav (Tab, Arrow)
+   - E2E tests (toggle, breakpoints, gestures)
+   - Visual regression (3 breakpoints)
+
+**Total estimé** : 13–21 jours (équipe 1 FE engineer)
+
+---
+
+## 🚀 Scripts NPM
+
+```bash
+# Dev complet (Nimbus activé par défaut)
+npm run dev
+
+# Build production
+npm run build
+
+# Tests responsifs (plusieurs breakpoints)
+npm run test:responsive
+
+# Lighthouse audit mobile
+npm run audit:lighthouse:mobile
+
+# Feature flag (override)
+NIMBUS_UI=false npm run dev        # Force legacy UI
+```
+
+---
+
+## ✅ Checklist Livraison
+
+- [ ] Toggle UI visible, fonctionnel, persisté
+- [ ] Desktop (≥1024px) : 3 colonnes, interactions fluides
+- [ ] Tablet (768–1023px) : Onglets + drawer, full-width contenu
+- [ ] Mobile (<768px) : Bottom nav, drawer, touch-friendly
+- [ ] Tous les flux clavier-seuls réalisables
+- [ ] Lighthouse mobile ≥ 85 perf, ≥ 95 a11y
+- [ ] Virtual scroll 60fps sur 1000+ items
+- [ ] Tests E2E (toggle, breakpoints, gestures)
+- [ ] Documentation complète (README_UI.md, MOBILE_GUIDE.md, RESPONSIVE_CHECKLIST.md)
+- [ ] Zéro régression : legacy UI inchangée, Wikilinks, bookmarks, graph intacts
+- [ ] Screenshots before/after 3 breakpoints
+- [ ] Fidélité 100% à la description Nimbus (chips, pickers, outline, etc.)
+
+---
+
+## 📖 Documentation à Produire
+
+1. **README_UI.md** : Overview, architecture, screenshots 3 breakpoints
+2. **MOBILE_GUIDE.md** : Navigation onglets, gestures, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, device testing
+4. **DEPLOYMENT.md** : Feature flag pour bascule progressive
+5. **ARCHITECTURE_DIAGRAM.md** : Schémas adaptatifs (Mermaid)
+
+---
+
+## 💡 Notes Importantes
+
+- **Mobile First** : Développer pour mobile en premier, puis enrichir desktop.
+- **Persistent State** : Le toggle UI et les filtres actifs doivent persister via localStorage (sans browser storage, utiliser sessionStorage ou service state).
+- **Zero Regression** : L'ancienne interface reste intacte et fonctionnelle.
+- **Performance** : Virtual scroll adapté mobile (40+ items à l'écran), lazy-load images.
+- **Accessibility** : 44x44px touch targets minimum, ARIA labels complets, keyboard nav.
+- **Testing** : Visual regression sur breakpoints clés (375px / 768px / 1440px).
+- **Intégration Nimbus** : Tous les éléments de la description (philosophie, layouts, micro-interactions) doivent être reproduits fidèlement, avec adaptations responsives pour mobile/tablette (ex. hover-reveal → tap-reveal).
+
+---
+
+**Exécute maintenant ce plan** : crée les composants, adapte les routes/états, ajoute les styles Tailwind responsifs, branche la recherche et livre le MR conforme aux critères ci-dessus avec toggle UI et compatibilité 100% Desktop/Mobile.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_lechat.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_lechat.md
new file mode 100644
index 0000000..b7141e0
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_lechat.md
@@ -0,0 +1,1351 @@
+Okay, j'ai un descriptif détaillé d'une interface utilisateur pour une application appelée Nimbus Notes / FuseBase Note. Le but est de refaire ce descriptif pour qu'il inclue une compatibilité totale avec les modes Desktop et Mobile (téléphone et tablette).
+
+### Compréhension du document original
+Le document original décrit l'interface utilisateur de Nimbus Notes / FuseBase Note en détail, en mettant l'accent sur la philosophie du produit, le layout global, les micro-interactions, les contenus spéciaux, l'accessibilité, et plus encore. Il est divisé en plusieurs sections :
+1. Philosophie produit
+2. Layout global (3 panneaux + overlays)
+3. Micro-interactions et patterns récurrents
+4. Contenus et types spéciaux
+5. Accessibilité et lisibilité
+6. Détails visibles dans les captures
+7. TL;DR — Nimbus en 8 principes à retenir
+
+### Objectif
+L'objectif est de réécrire ce descriptif pour qu'il inclue une compatibilité totale avec les modes Desktop et Mobile (téléphone et tablette). Cela signifie que chaque élément de l'interface doit être adapté pour fonctionner sur des écrans de différentes tailles, en tenant compte des spécificités des appareils mobiles et des tablettes.
+
+### Étapes à suivre
+1. **Comprendre les besoins spécifiques pour Desktop et Mobile :**
+   - Desktop : Layout à 3 colonnes (sidebar, liste centrale, panneau de droite).
+   - Mobile/Tablet : Navigation par onglets/drawer, gestion des gestes, optimisation de l'espace.
+
+2. **Adapter chaque section pour inclure la compatibilité mobile :**
+   - **Philosophie produit :** Assurer que les principes de conception s'appliquent également aux appareils mobiles.
+   - **Layout global :** Décrire comment les 3 panneaux s'adaptent sur mobile (par exemple, en utilisant des drawers ou des onglets).
+   - **Micro-interactions :** Adapter les interactions pour les écrans tactiles.
+   - **Contenus et types spéciaux :** Optimiser l'affichage pour les petits écrans.
+   - **Accessibilité et lisibilité :** Garantir que l'interface est accessible et lisible sur tous les appareils.
+   - **Détails visibles dans les captures :** Décrire comment ces détails s'adaptent sur mobile.
+   - **TL;DR :** Résumer les principes pour une interface adaptative.
+
+3. **Ajouter des sections spécifiques pour la compatibilité mobile :**
+   - Décrire les composants spécifiques pour mobile (par exemple, bottom navigation, drawers).
+   - Inclure des détails sur les gestes tactiles (swipe, tap, etc.).
+   - Mettre en avant les considérations de performance et d'accessibilité pour mobile.
+
+4. **Structurer le document :**
+   - Introduction
+   - Philosophie produit (adaptée pour mobile)
+   - Layout global (adaptatif)
+   - Micro-interactions et patterns récurrents (adaptés pour mobile)
+   - Contenus et types spéciaux (adaptés pour mobile)
+   - Accessibilité et lisibilité (adaptées pour mobile)
+   - Détails visibles dans les captures (adaptés pour mobile)
+   - TL;DR — Nimbus en 8 principes à retenir (adaptés pour mobile)
+
+### Rédaction du nouveau descriptif
+Je vais commencer par une introduction qui met en avant l'objectif de compatibilité totale avec Desktop et Mobile. Ensuite, je vais adapter chaque section pour inclure des détails spécifiques pour mobile.
+
+### Introduction
+L'introduction doit expliquer que l'interface doit être 100% compatible avec Desktop et Mobile, en mettant l'accent sur l'adaptabilité et l'expérience utilisateur sur tous les appareils.
+
+### Philosophie produit
+La philosophie produit doit inclure des principes qui s'appliquent à la fois aux desktop et mobile, comme la navigation par onglets sur mobile et la navigation par panneaux sur desktop.
+
+### Layout global
+Le layout global doit décrire comment les 3 panneaux (sidebar, liste centrale, panneau de droite) s'adaptent sur mobile. Par exemple, sur mobile, la sidebar pourrait devenir un drawer, et la liste centrale pourrait être accessible via un onglet.
+
+### Micro-interactions et patterns récurrents
+Les micro-interactions doivent être adaptées pour les écrans tactiles. Par exemple, les gestes de swipe pour naviguer entre les onglets sur mobile.
+
+### Contenus et types spéciaux
+Les contenus spéciaux, comme les bookmarks et les tables, doivent être optimisés pour les petits écrans. Par exemple, les tables pourraient être simplifiées ou affichées en mode paysage sur mobile.
+
+### Accessibilité et lisibilité
+L'accessibilité et la lisibilité doivent être garanties sur tous les appareils, avec des tailles de police adaptées et des cibles tactiles suffisamment grandes.
+
+### Détails visibles dans les captures
+Les détails visibles dans les captures doivent inclure des exemples de comment l'interface s'affiche sur mobile et desktop.
+
+### TL;DR
+Le TL;DR doit résumer les principes clés pour une interface adaptative, en mettant l'accent sur la compatibilité mobile et desktop.
+
+### Exemple de structure
+Voici un exemple de structure pour le nouveau descriptif :
+
+```markdown
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+## ObsiViewer → UI/UX "Nimbus-like" (simple, dense, rapide)
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX designer**. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+**Contrainte majeure :** L'interface doit être **100% responsive** (Desktop + Mobile). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état.
+
+## Contexte rapide
+* Projet : **ObsiViewer** (Angular 20 + Tailwind, Node/Express backend).
+* Objectif : Refondre l'interface selon un design **Nimbus Notes**-like.
+* Cœurs d'usage : navigation par **dossiers**, **tags**, **recherche**, **lecture markdown** plein écran, **ToC** à droite, **tri et filtres** rapides.
+* **Nouveauté** : Design adaptatif complet (Desktop/Mobile/Tablet) avec UI toggle persisté.
+
+## 🎯 Objectif final (résumé)
+### Desktop (≥1024px)
+Refondre l'interface ObsiViewer en **3 colonnes** :
+1. **Sidebar gauche** (Quick Links, Dossiers arborescents, Tags) — Redimensionnable.
+2. **Colonne centrale** Liste des pages (recherche, filtres dossiers/tags, tris, résultats virtualisés).
+3. **Vue de page** à droite (lecture markdown, barre d'actions, **panneau sommaire/ToC** docké à l'extrême droite).
+Le tout **compact, performant, thème clair/sombre**, navigation au clavier, états persistés localement.
+
+### Mobile/Tablet (<1024px)
+Une navigation **par onglets/drawer** intelligente :
+- **Tab 1 : Sidebar** (dossiers, tags, recherche) — Panneau full-width ou drawer collapsible.
+- **Tab 2 : Liste** (résultats de recherche) — Full-width scrollable.
+- **Tab 3 : Page** (markdown) — Full-width avec ToC inline collapsible ou drawer.
+**Gestures** : Swipe horizontal pour navigation onglets, pull-to-refresh, tap = open item.
+
+## 📋 Architecture Feature Flag & Toggle
+### 1) Toggle UI dans la NavBar
+Ajouter un **bouton toggle** dans `src/app/layout/app-navbar/app-navbar.component.ts` :
+```html
+<!-- app-navbar.component.html (snippet) -->
+<div class="flex items-center gap-2">
+  <!-- Autres boutons -->
+  <button 
+    (click)="toggleUIMode()"
+    [attr.aria-label]="'Toggle ' + (isNimbusMode$ | async ? 'legacy' : 'nimbus') + ' UI'"
+    class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+    <span *ngIf="(isNimbusMode$ | async)">✨ Nimbus</span>
+    <span *ngIf="!(isNimbusMode$ | async)">🔧 Legacy</span>
+  </button>
+</div>
+```
+
+### 2) Service de gestion du mode UI
+Créer `src/app/shared/services/ui-mode.service.ts` :
+```typescript
+import { Injectable, signal } from '@angular/core';
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour réactivité fine-grained
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+  constructor() {}
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return false;
+    const saved = localStorage.getItem('obsiviewer-ui-mode');
+    return saved ? saved === 'nimbus' : true; // Nimbus par défaut
+  }
+}
+```
+
+### 3) Layout wrapper avec feature flag
+Créer `src/app/layout/app-shell-adaptive/app-shell-adaptive.component.ts` :
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiMode.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent],
+})
+export class AppShellAdaptiveComponent {
+  uiMode = inject(UiModeService);
+}
+```
+
+## 🎨 Responsive Design Strategy
+### Breakpoints Tailwind (standard)
+```typescript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'xs': '320px',   // iPhone SE
+      'sm': '640px',   // Petites tablettes
+      'md': '768px',   // iPad, tablettes
+      'lg': '1024px',  // Desktop compact
+      'xl': '1280px',  // Desktop standard
+      '2xl': '1536px', // Larges écrans
+    },
+  },
+};
+```
+
+### Mobile First Approach
+**Développer pour mobile d'abord, puis enrichir pour desktop.**
+
+## 📱 Layouts Responsifs
+### Desktop Layout (≥1024px)
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Dark, fixed, h-14)                              │
+├────────────────┬──────────────────┬──────────────────────┤
+│                │                  │                      │
+│  SIDEBAR       │   RESULT LIST    │   NOTE VIEW + TOC    │
+│  (240-440px)   │   (virtualized)  │   (Resizable)        │
+│  Resizable     │                  │                      │
+│                │                  │                      │
+│  - Quick       │  - Search bar    │  - Markdown          │
+│    Links       │  - Filters       │  - ToC drawer        │
+│  - Folders     │  - Items (80px)  │  - Actions bar       │
+│  - Tags        │  - Pagination    │                      │
+│                │                  │                      │
+└────────────────┴──────────────────┴──────────────────────┘
+```
+
+### Tablet Layout (768px ≤ width < 1024px)
+```
+┌──────────────────────────────────────┐
+│ NAVBAR + Toggle (fixed, h-14)        │
+├──────────────────────────────────────┤
+│  TAB NAVIGATION (fixed, bottom)      │
+│  [Sidebar] [List] [Page] [ToC]       │
+├──────────────────────────────────────┤
+│                                      │
+│  ACTIVE TAB CONTENT (scrollable)     │
+│  - Drawer si besoin                  │
+│  - Full-width panels                 │
+│                                      │
+└──────────────────────────────────────┘
+```
+
+### Mobile Layout (<768px)
+```
+┌──────────────────────────────────┐
+│ NAVBAR (compact, h-12)           │
+│ [Menu] [Search] [Toggle]         │
+├──────────────────────────────────┤
+│                                  │
+│  TAB/DRAWER NAVIGATION           │
+│  [≡] [🔍] [📄] [📋]             │
+│                                  │
+│  CONTENT AREA (Full-width)       │
+│  - Drawer sidebar (80vw left)    │
+│  - Swipeable list (list tab)     │
+│  - Markdown full-screen (page)   │
+│  - Inline ToC (toggle button)    │
+│                                  │
+├──────────────────────────────────┤
+│ Bottom Navigation (sticky)       │
+│ Tab buttons (4 icônes)           │
+└──────────────────────────────────┘
+```
+
+## 🎬 Composants Nimbus Responsifs
+### Desktop/Mobile Variants
+Chaque composant doit avoir des **variants responsifs** :
+```
+app-left-sidebar/
+├── app-left-sidebar.component.ts          # Logique partagée
+├── app-left-sidebar.desktop.component.ts  # ≥1024px (fixed, resizable)
+└── app-left-sidebar.mobile.component.ts   # <1024px (drawer)
+app-center-list/
+├── app-center-list.component.ts
+├── app-center-list.desktop.component.ts   # ≥1024px (2 colonnes)
+└── app-center-list.mobile.component.ts    # <1024px (full-width)
+app-note-view/
+├── app-note-view.component.ts
+├── app-note-view.desktop.component.ts     # ≥1024px (3 colonnes + ToC)
+└── app-note-view.mobile.component.ts      # <1024px (full-width + ToC inline)
+app-toc-drawer/
+├── app-toc-drawer.component.ts
+├── app-toc-drawer.desktop.component.ts    # ≥1024px (Fixed right)
+└── app-toc-drawer.mobile.component.ts     # <1024px (Collapsible, inline)
+```
+
+### Détection et Injection
+```typescript
+// app-left-sidebar.component.ts
+import { Component, inject } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+@Component({
+  selector: 'app-left-sidebar',
+  standalone: true,
+  template: `
+    @if (isDesktop$ | async) {
+      <ng-container *ngComponentOutlet="DesktopSidebarComponent"></ng-container>
+    } @else {
+      <ng-container *ngComponentOutlet="MobileSidebarDrawerComponent"></ng-container>
+    }
+  `,
+})
+export class AppLeftSidebarComponent {
+  private breakpoint = inject(BreakpointObserver);
+  isDesktop$ = this.breakpoint.observe(Breakpoints.Large).pipe(
+    map(result => result.matches)
+  );
+}
+```
+
+## 📱 Navigation Mobile Avancée
+### Tab/Drawer Navigation
+```typescript
+// src/shared/services/mobile-nav.service.ts
+@Injectable({ providedIn: 'root' })
+export class MobileNavService {
+  activeTab = signal<'sidebar' | 'list' | 'page' | 'toc'>('list');
+  
+  setTab(tab: 'sidebar' | 'list' | 'page' | 'toc') {
+    this.activeTab.set(tab);
+    // Persist if needed
+  }
+}
+// Usage in component
+<app-bottom-nav [activeTab]="mobileNav.activeTab()" 
+                (tabChange)="mobileNav.setTab($event)">
+</app-bottom-nav>
+```
+
+### Swipe Navigation (Gestures)
+```typescript
+// Directive pour détection de swipe
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true,
+})
+export class SwipeNavDirective {
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+  private startX = 0;
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    this.startX = e.touches[0].clientX;
+  }
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const endX = e.changedTouches[0].clientX;
+    const diff = this.startX - endX;
+    
+    if (Math.abs(diff) > 50) { // Seuil minimum
+      if (diff > 0) this.swipeLeft.emit();
+      else this.swipeRight.emit();
+    }
+  }
+}
+```
+
+## 🎨 Composants Spécifiques (Mobile-First)
+### 1) Bottom Navigation (Mobile)
+```html
+<!-- app-bottom-nav.component.html -->
+<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t 
+            border-gray-200 dark:border-gray-800 h-16 flex justify-around md:hidden">
+  <button *ngFor="let tab of tabs"
+          (click)="selectTab(tab.id)"
+          [class.active]="activeTab === tab.id"
+          class="flex-1 flex flex-col items-center justify-center gap-1 
+                 text-xs hover:bg-gray-50 dark:hover:bg-gray-800">
+    <span class="text-lg">{{ tab.icon }}</span>
+    <span>{{ tab.label }}</span>
+  </button>
+</nav>
+```
+
+### 2) Drawer Sidebar (Mobile)
+```html
+<!-- app-left-sidebar.mobile.component.html -->
+<aside class="fixed left-0 top-0 bottom-0 w-80vw max-w-xs 
+              bg-white dark:bg-gray-900 shadow-lg z-50
+              transform transition-transform duration-300"
+       [class.-translate-x-full]="!isOpen">
+  <!-- Contenu sidebar -->
+  <button (click)="close()" class="absolute top-4 right-4">✕</button>
+</aside>
+<!-- Backdrop -->
+<div *ngIf="isOpen" 
+     (click)="close()"
+     class="fixed inset-0 bg-black/50 z-40 md:hidden"></div>
+```
+
+### 3) Search Bar Compact (Mobile)
+```html
+<!-- app-search-bar.mobile.component.html -->
+<div class="sticky top-0 bg-white dark:bg-gray-900 p-2 shadow-sm z-10">
+  <div class="flex gap-2">
+    <!-- Menu toggle -->
+    <button (click)="toggleSidebar()" 
+            class="p-2 rounded hover:bg-gray-100">☰</button>
+    
+    <!-- Search input (full-width on mobile) -->
+    <input type="text" 
+           placeholder="Search..." 
+           class="flex-1 px-3 py-2 rounded border dark:border-gray-700">
+    
+    <!-- Filters button (mobile: popover instead of dropdown) -->
+    <button (click)="openFilters()" 
+            class="p-2 rounded hover:bg-gray-100">⚙️</button>
+  </div>
+  
+  <!-- Active badges (scrollable horizontally) -->
+  <div class="flex gap-1 mt-2 overflow-x-auto">
+    <span *ngFor="let badge of activeBadges" 
+          class="badge badge-sm">
+      {{ badge }} ✕
+    </span>
+  </div>
+</div>
+```
+
+### 4) Result List Item (Mobile-Optimized)
+```html
+<!-- app-result-list-item.component.html -->
+<div class="p-3 border-b hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
+  <!-- Title -->
+  <h3 class="font-semibold text-sm sm:text-base truncate">
+    {{ item.title }}
+  </h3>
+  
+  <!-- Date + Tags (stacked on mobile) -->
+  <div class="flex flex-col sm:flex-row sm:items-center gap-1 mt-1 text-xs text-gray-600">
+    <span>{{ item.modified | date:'short' }}</span>
+    <div class="flex gap-1 flex-wrap">
+      <span *ngFor="let tag of item.tags" 
+            class="badge badge-sm">{{ tag }}</span>
+    </div>
+  </div>
+  
+  <!-- Excerpt (truncated) -->
+  <p class="mt-2 text-xs text-gray-600 line-clamp-2">
+    {{ item.excerpt }}
+  </p>
+</div>
+```
+
+### 5) Markdown Viewer (Mobile-Responsive)
+```html
+<!-- app-markdown-viewer.component.html -->
+<article class="prose dark:prose-invert max-w-none 
+                 prose-sm sm:prose-base 
+                 prose-img:max-w-full prose-img:h-auto
+                 px-3 sm:px-6 py-4 sm:py-8">
+  <!-- Markdown content -->
+  <div [innerHTML]="markdownHTML"></div>
+  
+  <!-- ToC (mobile: inline toggle) -->
+  <button *ngIf="headings.length > 0"
+          (click)="showToC = !showToC"
+          class="lg:hidden fixed bottom-20 right-4 p-3 rounded-full bg-blue-500 text-white shadow-lg">
+    📋
+  </button>
+  
+  <nav *ngIf="showToC" class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+    <!-- ToC content -->
+  </nav>
+</article>
+```
+
+### 6) ToC Drawer (Desktop Fixed, Mobile Inline)
+```typescript
+// app-toc-drawer.component.ts
+@Component({
+  selector: 'app-toc-drawer',
+  template: `
+    <!-- Desktop: Fixed right panel (≥1024px) -->
+    <aside class="hidden lg:flex fixed right-0 top-14 bottom-0 w-64 
+                  bg-gray-50 dark:bg-gray-800 border-l 
+                  border-gray-200 dark:border-gray-700
+                  flex-col overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </aside>
+    
+    <!-- Mobile: Collapsible inline (< 1024px) -->
+    <div *ngIf="(isMobile$ | async)" 
+         [@slideDown]="showTocMobile ? 'in' : 'out'"
+         class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </div>
+  `,
+  animations: [
+    trigger('slideDown', [
+      state('in', style({ height: '*' })),
+      state('out', style({ height: '0px' })),
+      transition('in <=> out', animate('200ms ease-in-out')),
+    ]),
+  ],
+  standalone: true,
+})
+export class AppTocDrawerComponent {
+  @Input() headings: Heading[] = [];
+  showTocMobile = false;
+  isMobile$ = this.breakpoint.observe('(max-width: 1023px)').pipe(
+    map(r => r.matches)
+  );
+}
+```
+
+## 🎯 Livrables Attendus
+### Code
+1. **Toggle UI** : `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`
+2. **Responsive Wrappers** : Variants pour chaque composant (Desktop/Mobile)
+3. **Mobile Components** : Bottom nav, drawer sidebar, inline ToC, mobile search
+4. **Gesture Handling** : Swipe navigation directive, touch-friendly interactions
+5. **Breakpoint Utilities** : Service CDK layout, reactive signals
+### Styling
+1. **Tailwind Config** : Breakpoints personnalisés, tokens tokens clair/sombre
+2. **Mobile-First CSS** : Base mobile, enrichissements desktop via `md:`, `lg:`
+3. **Touch-Friendly** : Boutons ≥44x44px, padding adéquat, hover states
+### Documentation
+1. **README_UI.md** : Schémas responsive, breakpoints, guide toggle
+2. **MOBILE_GUIDE.md** : Navigation gestures, bottom nav flow, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, checklist A11y mobile
+### Tests
+1. **E2E** : Toggle persistence, layout switch, gesture navigation
+2. **Visual Regression** : Screenshots desktop/tablet/mobile
+3. **Accessibility** : Touch targets, ARIA labels, keyboard nav (Tab key)
+
+## ⚡ Performance & Mobile Optimizations
+### Critical Optimizations
+- **Lazy-load images** : `loading="lazy"`, responsive `srcset`
+- **Virtual scroll** : CDK virtual scroll adapté mobile (item height ≈ 70–80px)
+- **Debounce search** : 300ms sur mobile, 150ms sur desktop
+- **Avoid layout shift** : Aspect ratios, skeleton loaders
+- **Network awareness** : `navigator.connection.effectiveType` pour adapt qualité
+- **Battery saver** : Réduire animations, throttle updates en mode saver
+### Lighthouse Mobile Targets
+- Performance ≥ 85
+- Accessibility ≥ 95
+- Best Practices ≥ 90
+
+## 🎮 Raccourcis Clavier & Gestures
+### Desktop
+- `Ctrl/Cmd + K` : Palette commandes
+- `Ctrl/Cmd + F` : Focus recherche
+- `[` `]` : Replier/ouvrir ToC
+- `Alt + ←/→` : Navigation historique
+### Mobile/Tablet
+- **Tap** : Ouvrir note/item
+- **Swipe left/right** : Changer onglet (list → page → sidebar)
+- **Long-press** : Menu contextuel (favoris, open in new tab)
+- **Pull-to-refresh** : Rafraîchir liste (optionnel)
+- **Double-tap** : Zoom ToC (mobile)
+
+## 📋 Critères d'Acceptation
+### Desktop (≥1024px)
+- [x] Layout 3 colonnes (sidebar fixe/resizable, liste, page+ToC)
+- [x] Changement dossier/tag/tri reflété en URL
+- [x] 1000+ items fluide (60fps virtual scroll)
+- [x] ToC synchronisé + repliable
+- [x] Tous les flux clavier-seuls possibles
+### Tablet (768–1023px)
+- [x] Navigation par onglets (Sidebar / List / Page)
+- [x] Drawer sidebar (80vw, swipeable)
+- [x] Bottom navigation sticky (4 icônes)
+- [x] Contenu full-width par onglet
+- [x] ToC inline collapsible
+### Mobile (<768px)
+- [x] Drawer sidebar (80vw max)
+- [x] Bottom nav (4 onglets)
+- [x] Search bar compact (menu + search + filters)
+- [x] List items optimisés (titre + date + excerpt)
+- [x] Markdown full-screen
+- [x] ToC overlay ou inline toggle
+- [x] Touch targets ≥ 44x44px
+### Feature Flag
+- [x] Toggle UI visible dans navbar
+- [x] État persisté (localStorage)
+- [x] Pas de perte d'état lors du switch
+- [x] Legacy UI reste intacte
+### Accessibility
+- [x] WCAG 2.1 AA sur tous les breakpoints
+- [x] Keyboard navigation complète (Tab, Arrow, Enter)
+- [x] ARIA labels pour navigation tactile
+- [x] Focus visible partout
+- [x] Zoom ≤ 200% sans horizontal scroll
+### Performance
+- [x] TTI < 2.5s cold start
+- [x] Scroll 60fps sur 1000+ items
+- [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y
+- [x] ImageOptimizations (lazy, srcset, format next-gen)
+
+## 🗂️ Arborescence Fichiers
+```
+src/app/
+├── layout/
+│   ├── app-shell-adaptive/
+│   │   └── app-shell-adaptive.component.ts      # Feature flag wrapper
+│   ├── app-shell-nimbus/
+│   │   ├── app-shell-nimbus.component.ts        # 3 colonnes (desktop)
+│   │   ├── app-shell-nimbus.desktop.component.ts
+│   │   └── app-shell-nimbus.mobile.component.ts
+│   └── app-navbar/
+│       ├── app-navbar.component.ts
+│       └── [Bouton toggle UI intégré]
+│
+├── features/
+│   ├── sidebar/
+│   │   ├── app-left-sidebar.component.ts
+│   │   ├── app-left-sidebar.desktop.component.ts
+│   │   └── app-left-sidebar.mobile.component.ts
+│   │
+│   ├── search-bar/
+│   │   ├── app-search-bar.component.ts
+│   │   ├── app-search-bar.desktop.component.ts
+│   │   └── app-search-bar.mobile.component.ts
+│   │
+│   ├── result-list/
+│   │   ├── app-result-list.component.ts
+│   │   ├── app-result-list.desktop.component.ts
+│   │   ├── app-result-list.mobile.component.ts
+│   │   └── app-result-list-item.component.ts
+│   │
+│   ├── note-view/
+│   │   ├── app-note-view.component.ts
+│   │   ├── app-note-view.desktop.component.ts
+│   │   └── app-note-view.mobile.component.ts
+│   │
+│   ├── toc-drawer/
+│   │   ├── app-toc-drawer.component.ts
+│   │   └── app-toc-content.component.ts
+│   │
+│   └── bottom-nav/ [NEW]
+│       ├── app-bottom-nav.component.ts
+│       └── app-bottom-nav.component.html
+│
+├── shared/
+│   ├── services/
+│   │   ├── ui-mode.service.ts                   # [NEW] Toggle management
+│   │   ├── mobile-nav.service.ts                # [NEW] Tab/drawer state
+│   │   └── breakpoint.service.ts                # [NEW] Responsive helper
+│   │
+│   ├── directives/
+│   │   └── swipe-nav.directive.ts               # [NEW] Gesture detection
+│   │
+│   └── components/
+│       └── resizable-handle/
+│
+└── styles/
+    ├── tokens.css                               # Tailwind tokens
+    ├── responsive.css                           # Breakpoint utilities
+    └── mobile.css                               # Mobile-specific (touches, etc.)
+```
+
+## 📅 Plan d'Implémentation (ordre conseillé)
+1. **Feature Flag Infrastructure** (1-2j)
+   - `UiModeService` + localStorage persistence
+   - `AppShellAdaptiveComponent` wrapper
+   - Toggle button dans navbar
+2. **Responsive Shell & Breakpoints** (2-3j)
+   - Desktop layout 3 colonnes (>=1024px)
+   - Tailwind breakpoints & tokens
+   - Resizable sidebar logic
+3. **Mobile Navigation & Bottom Nav** (2-3j)
+   - `BottomNavComponent` (4 onglets)
+   - `MobileNavService` (state management)
+   - Tab/drawer routing
+4. **Mobile Sidebar Drawer** (1-2j)
+   - Drawer animé (translate, backdrop)
+   - Swipe dismiss directive
+   - Z-index management
+5. **Responsive Components** (3-4j)
+   - Search bar variants (desktop/mobile)
+   - Result list item responsive
+   - Markdown viewer mobile optimizations
+6. **ToC Drawer Adaptive** (1-2j)
+   - Fixed right panel (desktop)
+   - Inline toggle (mobile)
+   - Animations smooth
+7. **Gestures & Touch** (1-2j)
+   - Swipe nav directive
+   - Long-press menu
+   - Pull-to-refresh (optionnel)
+8. **Accessibility & Testing** (2-3j)
+   - WCAG 2.1 AA audit
+   - Keyboard nav (Tab, Arrow)
+   - E2E tests (toggle, breakpoints)
+   - Visual regression (3 breakpoints)
+**Total estimé** : 13–21 jours (équipe 1 FE engineer)
+
+## 🚀 Scripts NPM
+```bash
+# Dev complet (Nimbus activé par défaut)
+npm run dev
+# Build production
+npm run build
+# Tests responsifs (plusieurs breakpoints)
+npm run test:responsive
+# Lighthouse audit mobile
+npm run audit:lighthouse:mobile
+# Feature flag (override)
+NIMBUS_UI=false npm run dev        # Force legacy UI
+```
+
+## ✅ Checklist Livraison
+- [ ] Toggle UI visible, fonctionnel, persisté
+- [ ] Desktop (≥1024px) : 3 colonnes, interactions fluides
+- [ ] Tablet (768–1023px) : Onglets + drawer, full-width contenu
+- [ ] Mobile (<768px) : Bottom nav, drawer, touch-friendly
+- [ ] Tous les flux clavier-seuls réalisables
+- [ ] Lighthouse mobile ≥ 85 perf, ≥ 95 a11y
+- [ ] Virtual scroll 60fps sur 1000+ items
+- [ ] Tests E2E (toggle, breakpoints, gestures)
+- [ ] Documentation complète (README_UI.md, MOBILE_GUIDE.md, RESPONSIVE_CHECKLIST.md)
+- [ ] Zéro régression : legacy UI inchangée, Wikilinks, bookmarks, graph intacts
+- [ ] Screenshots before/after 3 breakpoints
+
+## 📖 Documentation à Produire
+1. **README_UI.md** : Overview, architecture, screenshots 3 breakpoints
+2. **MOBILE_GUIDE.md** : Navigation onglets, gestures, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, device testing
+4. **DEPLOYMENT.md** : Feature flag pour bascule progressive
+5. **ARCHITECTURE_DIAGRAM.md** : Schémas adaptatifs (Mermaid)
+
+## 💡 Notes Importantes
+- **Mobile First** : Développer pour mobile en premier, puis enrichir desktop.
+- **Persistent State** : Le toggle UI et les filtres actifs doivent persister via localStorage (sans browser storage, utiliser sessionStorage ou service state).
+- **Zero Regression** : L'ancienne interface reste intacte et fonctionnelle.
+- **Performance** : Virtual scroll adapté mobile (40+ items à l'écran), lazy-load images.
+- **Accessibility** : 44x44px touch targets minimum, ARIA labels complets, keyboard nav.
+- **Testing** : Visual regression sur breakpoints clés (375px / 768px / 1440px).
+```Voici le prompt révisé pour inclure une compatibilité totale avec les modes Desktop et Mobile :
+
+```markdown
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+## ObsiViewer → UI/UX "Nimbus-like" (simple, dense, rapide)
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX designer**. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+**Contrainte majeure :** L'interface doit être **100% responsive** (Desktop + Mobile). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état.
+---
+## Contexte rapide
+* Projet : **ObsiViewer** (Angular 20 + Tailwind, Node/Express backend).
+* Objectif : Refondre l'interface selon un design **Nimbus Notes**-like.
+* Cœurs d'usage : navigation par **dossiers**, **tags**, **recherche**, **lecture markdown** plein écran, **ToC** à droite, **tri et filtres** rapides.
+* **Nouveauté** : Design adaptatif complet (Desktop/Mobile/Tablet) avec UI toggle persisté.
+---
+## 🎯 Objectif final (résumé)
+### Desktop (≥1024px)
+Refondre l'interface ObsiViewer en **3 colonnes** :
+1. **Sidebar gauche** (Quick Links, Dossiers arborescents, Tags) — Redimensionnable.
+2. **Colonne centrale** Liste des pages (recherche, filtres dossiers/tags, tris, résultats virtualisés).
+3. **Vue de page** à droite (lecture markdown, barre d'actions, **panneau sommaire/ToC** docké à l'extrême droite).
+Le tout **compact, performant, thème clair/sombre**, navigation au clavier, états persistés localement.
+
+### Mobile/Tablet (<1024px)
+Une navigation **par onglets/drawer** intelligente :
+- **Tab 1 : Sidebar** (dossiers, tags, recherche) — Panneau full-width ou drawer collapsible.
+- **Tab 2 : Liste** (résultats de recherche) — Full-width scrollable.
+- **Tab 3 : Page** (markdown) — Full-width avec ToC inline collapsible ou drawer.
+**Gestures** : Swipe horizontal pour navigation onglets, pull-to-refresh, tap = open item.
+---
+## 📋 Architecture Feature Flag & Toggle
+### 1) Toggle UI dans la NavBar
+Ajouter un **bouton toggle** dans `src/app/layout/app-navbar/app-navbar.component.ts` :
+```html
+<!-- app-navbar.component.html (snippet) -->
+<div class="flex items-center gap-2">
+  <!-- Autres boutons -->
+  <button 
+    (click)="toggleUIMode()"
+    [attr.aria-label]="'Toggle ' + (isNimbusMode$ | async ? 'legacy' : 'nimbus') + ' UI'"
+    class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+    <span *ngIf="(isNimbusMode$ | async)">✨ Nimbus</span>
+    <span *ngIf="!(isNimbusMode$ | async)">🔧 Legacy</span>
+  </button>
+</div>
+```
+
+### 2) Service de gestion du mode UI
+Créer `src/app/shared/services/ui-mode.service.ts` :
+```typescript
+import { Injectable, signal } from '@angular/core';
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour réactivité fine-grained
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+  constructor() {}
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+    localStorage.setItem('obsiviewer-ui-mode', newMode ? 'nimbus' : 'legacy');
+  }
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return false;
+    const saved = localStorage.getItem('obsiviewer-ui-mode');
+    return saved ? saved === 'nimbus' : true; // Nimbus par défaut
+  }
+}
+```
+
+### 3) Layout wrapper avec feature flag
+Créer `src/app/layout/app-shell-adaptive/app-shell-adaptive.component.ts` :
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiMode.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent],
+})
+export class AppShellAdaptiveComponent {
+  uiMode = inject(UiModeService);
+}
+```
+---
+## 🎨 Responsive Design Strategy
+### Breakpoints Tailwind (standard)
+```typescript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'xs': '320px',   // iPhone SE
+      'sm': '640px',   // Petites tablettes
+      'md': '768px',   // iPad, tablettes
+      'lg': '1024px',  // Desktop compact
+      'xl': '1280px',  // Desktop standard
+      '2xl': '1536px', // Larges écrans
+    },
+  },
+};
+```
+
+### Mobile First Approach
+**Développer pour mobile d'abord, puis enrichir pour desktop.**
+---
+## 📱 Layouts Responsifs
+### Desktop Layout (≥1024px)
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Dark, fixed, h-14)                              │
+├────────────────┬──────────────────┬──────────────────────┤
+│                │                  │                      │
+│  SIDEBAR       │   RESULT LIST    │   NOTE VIEW + TOC    │
+│  (240-440px)   │   (virtualized)  │   (Resizable)        │
+│  Resizable     │                  │                      │
+│                │                  │                      │
+│  - Quick       │  - Search bar    │  - Markdown          │
+│    Links       │  - Filters       │  - ToC drawer        │
+│  - Folders     │  - Items (80px)  │  - Actions bar       │
+│  - Tags        │  - Pagination    │                      │
+│                │                  │                      │
+└────────────────┴──────────────────┴──────────────────────┘
+```
+
+### Tablet Layout (768px ≤ width < 1024px)
+```
+┌──────────────────────────────────────┐
+│ NAVBAR + Toggle (fixed, h-14)        │
+├──────────────────────────────────────┤
+│  TAB NAVIGATION (fixed, bottom)      │
+│  [Sidebar] [List] [Page] [ToC]       │
+├──────────────────────────────────────┤
+│                                      │
+│  ACTIVE TAB CONTENT (scrollable)     │
+│  - Drawer si besoin                  │
+│  - Full-width panels                 │
+│                                      │
+└──────────────────────────────────────┘
+```
+
+### Mobile Layout (<768px)
+```
+┌──────────────────────────────────┐
+│ NAVBAR (compact, h-12)           │
+│ [Menu] [Search] [Toggle]         │
+├──────────────────────────────────┤
+│                                  │
+│  TAB/DRAWER NAVIGATION           │
+│  [≡] [🔍] [📄] [📋]             │
+│                                  │
+│  CONTENT AREA (Full-width)       │
+│  - Drawer sidebar (80vw left)    │
+│  - Swipeable list (list tab)     │
+│  - Markdown full-screen (page)   │
+│  - Inline ToC (toggle button)    │
+│                                  │
+├──────────────────────────────────┤
+│ Bottom Navigation (sticky)       │
+│ Tab buttons (4 icônes)           │
+└──────────────────────────────────┘
+```
+
+## 🎬 Composants Nimbus Responsifs
+### Desktop/Mobile Variants
+Chaque composant doit avoir des **variants responsifs** :
+```
+app-left-sidebar/
+├── app-left-sidebar.component.ts          # Logique partagée
+├── app-left-sidebar.desktop.component.ts  # ≥1024px (fixed, resizable)
+└── app-left-sidebar.mobile.component.ts   # <1024px (drawer)
+app-center-list/
+├── app-center-list.component.ts
+├── app-center-list.desktop.component.ts   # ≥1024px (2 colonnes)
+└── app-center-list.mobile.component.ts    # <1024px (full-width)
+app-note-view/
+├── app-note-view.component.ts
+├── app-note-view.desktop.component.ts     # ≥1024px (3 colonnes + ToC)
+└── app-note-view.mobile.component.ts      # <1024px (full-width + ToC inline)
+app-toc-drawer/
+├── app-toc-drawer.component.ts
+├── app-toc-drawer.desktop.component.ts    # ≥1024px (Fixed right)
+└── app-toc-drawer.mobile.component.ts     # <1024px (Collapsible, inline)
+```
+
+### Détection et Injection
+```typescript
+// app-left-sidebar.component.ts
+import { Component, inject } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+@Component({
+  selector: 'app-left-sidebar',
+  standalone: true,
+  template: `
+    @if (isDesktop$ | async) {
+      <ng-container *ngComponentOutlet="DesktopSidebarComponent"></ng-container>
+    } @else {
+      <ng-container *ngComponentOutlet="MobileSidebarDrawerComponent"></ng-container>
+    }
+  `,
+})
+export class AppLeftSidebarComponent {
+  private breakpoint = inject(BreakpointObserver);
+  isDesktop$ = this.breakpoint.observe(Breakpoints.Large).pipe(
+    map(result => result.matches)
+  );
+}
+```
+
+## 📱 Navigation Mobile Avancée
+### Tab/Drawer Navigation
+```typescript
+// src/shared/services/mobile-nav.service.ts
+@Injectable({ providedIn: 'root' })
+export class MobileNavService {
+  activeTab = signal<'sidebar' | 'list' | 'page' | 'toc'>('list');
+  
+  setTab(tab: 'sidebar' | 'list' | 'page' | 'toc') {
+    this.activeTab.set(tab);
+    // Persist if needed
+  }
+}
+// Usage in component
+<app-bottom-nav [activeTab]="mobileNav.activeTab()" 
+                (tabChange)="mobileNav.setTab($event)">
+</app-bottom-nav>
+```
+
+### Swipe Navigation (Gestures)
+```typescript
+// Directive pour détection de swipe
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true,
+})
+export class SwipeNavDirective {
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+  private startX = 0;
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    this.startX = e.touches[0].clientX;
+  }
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const endX = e.changedTouches[0].clientX;
+    const diff = this.startX - endX;
+    
+    if (Math.abs(diff) > 50) { // Seuil minimum
+      if (diff > 0) this.swipeLeft.emit();
+      else this.swipeRight.emit();
+    }
+  }
+}
+```
+
+## 🎨 Composants Spécifiques (Mobile-First)
+### 1) Bottom Navigation (Mobile)
+```html
+<!-- app-bottom-nav.component.html -->
+<nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t 
+            border-gray-200 dark:border-gray-800 h-16 flex justify-around md:hidden">
+  <button *ngFor="let tab of tabs"
+          (click)="selectTab(tab.id)"
+          [class.active]="activeTab === tab.id"
+          class="flex-1 flex flex-col items-center justify-center gap-1 
+                 text-xs hover:bg-gray-50 dark:hover:bg-gray-800">
+    <span class="text-lg">{{ tab.icon }}</span>
+    <span>{{ tab.label }}</span>
+  </button>
+</nav>
+```
+
+### 2) Drawer Sidebar (Mobile)
+```html
+<!-- app-left-sidebar.mobile.component.html -->
+<aside class="fixed left-0 top-0 bottom-0 w-80vw max-w-xs 
+              bg-white dark:bg-gray-900 shadow-lg z-50
+              transform transition-transform duration-300"
+       [class.-translate-x-full]="!isOpen">
+  <!-- Contenu sidebar -->
+  <button (click)="close()" class="absolute top-4 right-4">✕</button>
+</aside>
+<!-- Backdrop -->
+<div *ngIf="isOpen" 
+     (click)="close()"
+     class="fixed inset-0 bg-black/50 z-40 md:hidden"></div>
+```
+
+### 3) Search Bar Compact (Mobile)
+```html
+<!-- app-search-bar.mobile.component.html -->
+<div class="sticky top-0 bg-white dark:bg-gray-900 p-2 shadow-sm z-10">
+  <div class="flex gap-2">
+    <!-- Menu toggle -->
+    <button (click)="toggleSidebar()" 
+            class="p-2 rounded hover:bg-gray-100">☰</button>
+    
+    <!-- Search input (full-width on mobile) -->
+    <input type="text" 
+           placeholder="Search..." 
+           class="flex-1 px-3 py-2 rounded border dark:border-gray-700">
+    
+    <!-- Filters button (mobile: popover instead of dropdown) -->
+    <button (click)="openFilters()" 
+            class="p-2 rounded hover:bg-gray-100">⚙️</button>
+  </div>
+  
+  <!-- Active badges (scrollable horizontally) -->
+  <div class="flex gap-1 mt-2 overflow-x-auto">
+    <span *ngFor="let badge of activeBadges" 
+          class="badge badge-sm">
+      {{ badge }} ✕
+    </span>
+  </div>
+</div>
+```
+
+### 4) Result List Item (Mobile-Optimized)
+```html
+<!-- app-result-list-item.component.html -->
+<div class="p-3 border-b hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
+  <!-- Title -->
+  <h3 class="font-semibold text-sm sm:text-base truncate">
+    {{ item.title }}
+  </h3>
+  
+  <!-- Date + Tags (stacked on mobile) -->
+  <div class="flex flex-col sm:flex-row sm:items-center gap-1 mt-1 text-xs text-gray-600">
+    <span>{{ item.modified | date:'short' }}</span>
+    <div class="flex gap-1 flex-wrap">
+      <span *ngFor="let tag of item.tags" 
+            class="badge badge-sm">{{ tag }}</span>
+    </div>
+  </div>
+  
+  <!-- Excerpt (truncated) -->
+  <p class="mt-2 text-xs text-gray-600 line-clamp-2">
+    {{ item.excerpt }}
+  </p>
+</div>
+```
+
+### 5) Markdown Viewer (Mobile-Responsive)
+```html
+<!-- app-markdown-viewer.component.html -->
+<article class="prose dark:prose-invert max-w-none 
+                 prose-sm sm:prose-base 
+                 prose-img:max-w-full prose-img:h-auto
+                 px-3 sm:px-6 py-4 sm:py-8">
+  <!-- Markdown content -->
+  <div [innerHTML]="markdownHTML"></div>
+  
+  <!-- ToC (mobile: inline toggle) -->
+  <button *ngIf="headings.length > 0"
+          (click)="showToC = !showToC"
+          class="lg:hidden fixed bottom-20 right-4 p-3 rounded-full bg-blue-500 text-white shadow-lg">
+    📋
+  </button>
+  
+  <nav *ngIf="showToC" class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+    <!-- ToC content -->
+  </nav>
+</article>
+```
+
+### 6) ToC Drawer (Desktop Fixed, Mobile Inline)
+```typescript
+// app-toc-drawer.component.ts
+@Component({
+  selector: 'app-toc-drawer',
+  template: `
+    <!-- Desktop: Fixed right panel (≥1024px) -->
+    <aside class="hidden lg:flex fixed right-0 top-14 bottom-0 w-64 
+                  bg-gray-50 dark:bg-gray-800 border-l 
+                  border-gray-200 dark:border-gray-700
+                  flex-col overflow-y-auto">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </aside>
+    
+    <!-- Mobile: Collapsible inline (< 1024px) -->
+    <div *ngIf="(isMobile$ | async)" 
+         [@slideDown]="showTocMobile ? 'in' : 'out'"
+         class="lg:hidden fixed inset-0 bg-white dark:bg-gray-900 
+                              z-40 overflow-y-auto p-4">
+      <app-toc-content [headings]="headings"></app-toc-content>
+    </div>
+  `,
+  animations: [
+    trigger('slideDown', [
+      state('in', style({ height: '*' })),
+      state('out', style({ height: '0px' })),
+      transition('in <=> out', animate('200ms ease-in-out')),
+    ]),
+  ],
+  standalone: true,
+})
+export class AppTocDrawerComponent {
+  @Input() headings: Heading[] = [];
+  showTocMobile = false;
+  isMobile$ = this.breakpoint.observe('(max-width: 1023px)').pipe(
+    map(r => r.matches)
+  );
+}
+```
+
+## 🎯 Livrables Attendus
+### Code
+1. **Toggle UI** : `UiModeService`, bouton navbar, `AppShellAdaptiveComponent`
+2. **Responsive Wrappers** : Variants pour chaque composant (Desktop/Mobile)
+3. **Mobile Components** : Bottom nav, drawer sidebar, inline ToC, mobile search
+4. **Gesture Handling** : Swipe navigation directive, touch-friendly interactions
+5. **Breakpoint Utilities** : Service CDK layout, reactive signals
+### Styling
+1. **Tailwind Config** : Breakpoints personnalisés, tokens tokens clair/sombre
+2. **Mobile-First CSS** : Base mobile, enrichissements desktop via `md:`, `lg:`
+3. **Touch-Friendly** : Boutons ≥44x44px, padding adéquat, hover states
+### Documentation
+1. **README_UI.md** : Schémas responsive, breakpoints, guide toggle
+2. **MOBILE_GUIDE.md** : Navigation gestures, bottom nav flow, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, checklist A11y mobile
+### Tests
+1. **E2E** : Toggle persistence, layout switch, gesture navigation
+2. **Visual Regression** : Screenshots desktop/tablet/mobile
+3. **Accessibility** : Touch targets, ARIA labels, keyboard nav (Tab key)
+
+## ⚡ Performance & Mobile Optimizations
+### Critical Optimizations
+- **Lazy-load images** : `loading="lazy"`, responsive `srcset`
+- **Virtual scroll** : CDK virtual scroll adapté mobile (item height ≈ 70–80px)
+- **Debounce search** : 300ms sur mobile, 150ms sur desktop
+- **Avoid layout shift** : Aspect ratios, skeleton loaders
+- **Network awareness** : `navigator.connection.effectiveType` pour adapt qualité
+- **Battery saver** : Réduire animations, throttle updates en mode saver
+### Lighthouse Mobile Targets
+- Performance ≥ 85
+- Accessibility ≥ 95
+- Best Practices ≥ 90
+
+## 🎮 Raccourcis Clavier & Gestures
+### Desktop
+- `Ctrl/Cmd + K` : Palette commandes
+- `Ctrl/Cmd + F` : Focus recherche
+- `[` `]` : Replier/ouvrir ToC
+- `Alt + ←/→` : Navigation historique
+### Mobile/Tablet
+- **Tap** : Ouvrir note/item
+- **Swipe left/right** : Changer onglet (list → page → sidebar)
+- **Long-press** : Menu contextuel (favoris, open in new tab)
+- **Pull-to-refresh** : Rafraîchir liste (optionnel)
+- **Double-tap** : Zoom ToC (mobile)
+
+## 📋 Critères d'Acceptation
+### Desktop (≥1024px)
+- [x] Layout 3 colonnes (sidebar fixe/resizable, liste, page+ToC)
+- [x] Changement dossier/tag/tri reflété en URL
+- [x] 1000+ items fluide (60fps virtual scroll)
+- [x] ToC synchronisé + repliable
+- [x] Tous les flux clavier-seuls possibles
+### Tablet (768–1023px)
+- [x] Navigation par onglets (Sidebar / List / Page)
+- [x] Drawer sidebar (80vw, swipeable)
+- [x] Bottom navigation sticky (4 icônes)
+- [x] Contenu full-width par onglet
+- [x] ToC inline collapsible
+### Mobile (<768px)
+- [x] Drawer sidebar (80vw max)
+- [x] Bottom nav (4 onglets)
+- [x] Search bar compact (menu + search + filters)
+- [x] List items optimisés (titre + date + excerpt)
+- [x] Markdown full-screen
+- [x] ToC overlay ou inline toggle
+- [x] Touch targets ≥ 44x44px
+### Feature Flag
+- [x] Toggle UI visible dans navbar
+- [x] État persisté (localStorage)
+- [x] Pas de perte d'état lors du switch
+- [x] Legacy UI reste intacte
+### Accessibility
+- [x] WCAG 2.1 AA sur tous les breakpoints
+- [x] Keyboard navigation complète (Tab, Arrow, Enter)
+- [x] ARIA labels pour navigation tactile
+- [x] Focus visible partout
+- [x] Zoom ≤ 200% sans horizontal scroll
+### Performance
+- [x] TTI < 2.5s cold start
+- [x] Scroll 60fps sur 1000+ items
+- [x] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y
+- [x] ImageOptimizations (lazy, srcset, format next-gen)
+
+## 🗂️ Arborescence Fichiers
+```
+src/app/
+├── layout/
+│   ├── app-shell-adaptive/
+│   │   └── app-shell-adaptive.component.ts      # Feature flag wrapper
+│   ├── app-shell-nimbus/
+│   │   ├── app-shell-nimbus.component.ts        # 3 colonnes (desktop)
+│   │   ├── app-shell-nimbus.desktop.component.ts
+│   │   └── app-shell-nimbus.mobile.component.ts
+│   └── app-navbar/
+│       ├── app-navbar.component.ts
+│       └── [Bouton toggle UI intégré]
+│
+├── features/
+│   ├── sidebar/
+│   │   ├── app-left-sidebar.component.ts
+│   │   ├── app-left-sidebar.desktop.component.ts
+│   │   └── app-left-sidebar.mobile.component.ts
+│   │
+│   ├── search-bar/
+│   │   ├── app-search-bar.component.ts
+│   │   ├── app-search-bar.desktop.component.ts
+│   │   └── app-search-bar.mobile.component.ts
+│   │
+│   ├── result-list/
+│   │   ├── app-result-list.component.ts
+│   │   ├── app-result-list.desktop.component.ts
+│   │   ├── app-result-list.mobile.component.ts
+│   │   └── app-result-list-item.component.ts
+│   │
+│   ├── note-view/
+│   │   ├── app-note-view.component.ts
+│   │   ├── app-note-view.desktop.component.ts
+│   │   └── app-note-view.mobile.component.ts
+│   │
+│   ├── toc-drawer/
+│   │   ├── app-toc-drawer.component.ts
+│   │   └── app-toc-content.component.ts
+│   │
+│   └── bottom-nav/ [NEW]
+│       ├── app-bottom-nav.component.ts
+│       └── app-bottom-nav.component.html
+│
+├── shared/
+│   ├── services/
+│   │   ├── ui-mode.service.ts                   # [NEW] Toggle management
+│   │   ├── mobile-nav.service.ts                # [NEW] Tab/drawer state
+│   │   └── breakpoint.service.ts                # [NEW] Responsive helper
+│   │
+│   ├── directives/
+│   │   └── swipe-nav.directive.ts               # [NEW] Gesture detection
+│   │
+│   └── components/
+│       └── resizable-handle/
+│
+└── styles/
+    ├── tokens.css                               # Tailwind tokens
+    ├── responsive.css                           # Breakpoint utilities
+    └── mobile.css                               # Mobile-specific (touches, etc.)
+```
+
+## 📅 Plan d'Implémentation (ordre conseillé)
+1. **Feature Flag Infrastructure** (1-2j)
+   - `UiModeService` + localStorage persistence
+   - `AppShellAdaptiveComponent` wrapper
+   - Toggle button dans navbar
+2. **Responsive Shell & Breakpoints** (2-3j)
+   - Desktop layout 3 colonnes (>=1024px)
+   - Tailwind breakpoints & tokens
+   - Resizable sidebar logic
+3. **Mobile Navigation & Bottom Nav** (2-3j)
+   - `BottomNavComponent` (4 onglets)
+   - `MobileNavService` (state management)
+   - Tab/drawer routing
+4. **Mobile Sidebar Drawer** (1-2j)
+   - Drawer animé (translate, backdrop)
+   - Swipe dismiss directive
+   - Z-index management
+5. **Responsive Components** (3-4j)
+   - Search bar variants (desktop/mobile)
+   - Result list item responsive
+   - Markdown viewer mobile optimizations
+6. **ToC Drawer Adaptive** (1-2j)
+   - Fixed right panel (desktop)
+   - Inline toggle (mobile)
+   - Animations smooth
+7. **Gestures & Touch** (1-2j)
+   - Swipe nav directive
+   - Long-press menu
+   - Pull-to-refresh (optionnel)
+8. **Accessibility & Testing** (2-3j)
+   - WCAG 2.1 AA audit
+   - Keyboard nav (Tab, Arrow)
+   - E2E tests (toggle, breakpoints)
+   - Visual regression (3 breakpoints)
+**Total estimé** : 13–21 jours (équipe 1 FE engineer)
+
+## 🚀 Scripts NPM
+```bash
+# Dev complet (Nimbus activé par défaut)
+npm run dev
+# Build production
+npm run build
+# Tests responsifs (plusieurs breakpoints)
+npm run test:responsive
+# Lighthouse audit mobile
+npm run audit:lighthouse:mobile
+# Feature flag (override)
+NIMBUS_UI=false npm run dev        # Force legacy UI
+```
+
+## ✅ Checklist Livraison
+- [ ] Toggle UI visible, fonctionnel, persisté
+- [ ] Desktop (≥1024px) : 3 colonnes, interactions fluides
+- [ ] Tablet (768–1023px) : Onglets + drawer, full-width contenu
+- [ ] Mobile (<768px) : Bottom nav, drawer, touch-friendly
+- [ ] Tous les flux clavier-seuls réalisables
+- [ ] Lighthouse mobile ≥ 85 perf, ≥ 95 a11y
+- [ ] Virtual scroll 60fps sur 1000+ items
+- [ ] Tests E2E (toggle, breakpoints, gestures)
+- [ ] Documentation complète (README_UI.md, MOBILE_GUIDE.md, RESPONSIVE_CHECKLIST.md)
+- [ ] Zéro régression : legacy UI inchangée, Wikilinks, bookmarks, graph intacts
+- [ ] Screenshots before/after 3 breakpoints
+
+## 📖 Documentation à Produire
+1. **README_UI.md** : Overview, architecture, screenshots 3 breakpoints
+2. **MOBILE_GUIDE.md** : Navigation onglets, gestures, drawer patterns
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, device testing
+4. **DEPLOYMENT.md** : Feature flag pour bascule progressive
+5. **ARCHITECTURE_DIAGRAM.md** : Schémas adaptatifs (Mermaid)
+
+## 💡 Notes Importantes
+- **Mobile First** : Développer pour mobile en premier, puis enrichir desktop.
+- **Persistent State** : Le toggle UI et les filtres actifs doivent persister via localStorage (sans browser storage, utiliser sessionStorage ou service state).
+- **Zero Regression** : L'ancienne interface reste intacte et fonctionnelle.
+- **Performance** : Virtual scroll adapté mobile (40+ items à l'écran), lazy-load images.
+- **Accessibility** : 44x44px touch targets minimum, ARIA labels complets, keyboard nav.
+- **Testing** : Visual regression sur breakpoints clés (375px / 768px / 1440px).
+```
+
+Ce prompt inclut désormais une compatibilité totale avec les modes Desktop et Mobile, en tenant compte des spécificités de chaque plateforme.
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_perplexity.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_perplexity.md
new file mode 100644
index 0000000..3ae8031
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_perplexity.md
@@ -0,0 +1,1072 @@
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## ObsiViewer → Interface "Nimbus-like" 100% Responsive
+
+**Rôle & mode :** Agis comme **Staff Frontend Engineer Angular 20 + UX Designer** expert. Raisonnement détaillé autorisé. Tu as les pleins pouvoirs de refactor UI, d'ajout de composants, et de migration CSS vers Tailwind. Conserve la compatibilité de toutes features existantes.
+
+**Contrainte majeure :** L'interface doit être **100% responsive** (Desktop + Mobile + Tablet). Un **bouton toggle** dans la navbar permet de basculer entre l'ancienne interface et la nouvelle sans perte d'état.
+
+---
+
+## Contexte
+
+* **Projet** : ObsiViewer (Angular 20 + Tailwind, Node/Express backend)
+* **Objectif** : Refondre l'interface selon un design **Nimbus Notes/FuseBase**-like avec responsive design complet
+* **Cœurs d'usage** : navigation par **dossiers**, **tags**, **recherche**, **lecture markdown** plein écran, **ToC** à droite, **tri et filtres** rapides[1][2][3]
+* **Nouveauté** : Design adaptatif complet (Desktop/Mobile/Tablet) avec UI toggle persisté
+
+***
+
+## 🎯 Architecture Responsive Cible
+
+### Desktop (≥1024px) - Layout 3 Colonnes
+```
+┌─────────────────────────────────────────────────────────┐
+│ NAVBAR (Dark, fixed, h-14) + Toggle UI                 │
+├────────────────┬──────────────────┬──────────────────────┤
+│                │                  │                      │
+│  SIDEBAR       │   RESULT LIST    │   NOTE VIEW + TOC    │
+│  (240-440px)   │   (virtualized)  │   (Resizable)        │
+│  Resizable     │                  │                      │
+│                │                  │                      │
+│  - Quick Links │  - Search bar    │  - Markdown          │
+│  - Folders     │  - Chips filters │  - ToC drawer        │  
+│  - Tags        │  - Items (80px)  │  - Actions bar       │
+│                │  - Pagination    │                      │
+│                │                  │                      │
+└────────────────┴──────────────────┴──────────────────────┘
+```
+
+### Mobile (<768px) - Navigation par Onglets
+```
+┌──────────────────────────────────┐
+│ NAVBAR (compact, h-12)           │
+│ [≡] [Search] [Toggle]            │
+├──────────────────────────────────┤
+│                                  │
+│  CONTENT AREA (Full-width)       │
+│  - Drawer sidebar (80vw gauche)  │
+│  - Liste swipeable (tab liste)   │  
+│  - Markdown full-screen (page)   │
+│  - ToC inline (toggle button)    │
+│                                  │
+├──────────────────────────────────┤
+│ BOTTOM NAVIGATION (sticky)       │  
+│ [📁] [🔍] [📄] [📋] (4 onglets)  │
+└──────────────────────────────────┘
+```
+
+### Tablet (768px ≤ width < 1024px) - Hybride
+```
+┌──────────────────────────────────────┐
+│ NAVBAR + Toggle (fixed, h-14)        │
+├──────────────────────────────────────┤
+│  TAB NAVIGATION (3 onglets)          │
+│  [Sidebar] [List] [Page]             │
+├──────────────────────────────────────┤
+│                                      │
+│  ACTIVE TAB CONTENT (scrollable)     │
+│  - Panneau full-width par tab        │  
+│  - Drawer si besoin                  │
+│                                      │
+└──────────────────────────────────────┘
+```
+
+***
+
+## 📋 Architecture Feature Flag & Toggle
+
+### 1) Toggle UI dans la NavBar
+
+Ajouter un **bouton toggle** dans `src/app/layout/app-navbar/app-navbar.component.ts` :[4]
+
+```html
+<!-- app-navbar.component.html (snippet) -->
+<div class="flex items-center gap-2">
+  <!-- Autres boutons -->
+  <button 
+    (click)="toggleUIMode()"
+    [attr.aria-label]="'Basculer vers ' + (isNimbusMode$ | async ? 'ancienne' : 'nouvelle') + ' interface'"
+    class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 
+           transition-colors duration-200 text-sm font-medium">
+    <span *ngIf="(isNimbusMode$ | async)" class="flex items-center gap-1">
+      ✨ <span class="hidden sm:inline">Nimbus</span>
+    </span>
+    <span *ngIf="!(isNimbusMode$ | async)" class="flex items-center gap-1">
+      🔧 <span class="hidden sm:inline">Legacy</span>
+    </span>
+  </button>
+</div>
+```
+
+### 2) Service de Gestion du Mode UI
+
+Créer `src/app/shared/services/ui-mode.service.ts` :
+
+```typescript
+import { Injectable, signal, effect } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class UiModeService {
+  // Signal pour réactivité fine-grained[3]
+  isNimbusMode = signal<boolean>(this.loadUIMode());
+
+  constructor() {
+    // Persister les changements automatiquement
+    effect(() => {
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem('obsiviewer-ui-mode', 
+          this.isNimbusMode() ? 'nimbus' : 'legacy');
+      }
+    });
+  }
+
+  toggleUIMode() {
+    const newMode = !this.isNimbusMode();
+    this.isNimbusMode.set(newMode);
+  }
+
+  private loadUIMode(): boolean {
+    if (typeof localStorage === 'undefined') return true;
+    const saved = localStorage.getItem('obsiviewer-ui-mode');
+    return saved ? saved === 'nimbus' : true; // Nimbus par défaut
+  }
+}
+```
+
+### 3) Layout Wrapper avec Feature Flag
+
+Créer `src/app/layout/app-shell-adaptive/app-shell-adaptive.component.ts` :
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { UiModeService } from '@app/shared/services/ui-mode.service';
+import { AppShellNimbusLayoutComponent } from '../app-shell-nimbus/app-shell-nimbus.component';
+import { AppShellLegacyLayoutComponent } from '../app-shell-legacy/app-shell-legacy.component';
+
+@Component({
+  selector: 'app-shell-adaptive',
+  template: `
+    @if (uiMode.isNimbusMode()) {
+      <app-shell-nimbus-layout></app-shell-nimbus-layout>
+    } @else {
+      <app-shell-legacy-layout></app-shell-legacy-layout>
+    }
+  `,
+  standalone: true,
+  imports: [AppShellNimbusLayoutComponent, AppShellLegacyLayoutComponent],
+})
+export class AppShellAdaptiveComponent {
+  uiMode = inject(UiModeService);
+}
+```
+
+***
+
+## 🎨 Responsive Design Strategy
+
+### Breakpoints Tailwind (Mobile-First)[5][6]
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'xs': '320px',   // iPhone SE
+      'sm': '640px',   // Petites tablettes
+      'md': '768px',   // iPad, tablettes
+      'lg': '1024px',  // Desktop compact
+      'xl': '1280px',  // Desktop standard  
+      '2xl': '1536px', // Larges écrans
+    },
+    extend: {
+      // Tokens personnalisés Nimbus-like
+      colors: {
+        nimbus: {
+          50: '#f0f9ff',
+          500: '#0ea5e9', // Turquoise actions
+          900: '#0c4a6e'  // Dark mode
+        }
+      }
+    }
+  },
+};
+```
+
+### Service de Détection Responsive
+
+```typescript
+// src/shared/services/breakpoint.service.ts
+import { Injectable, signal, inject } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { map } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ResponsiveService {
+  private breakpointObserver = inject(BreakpointObserver);
+  
+  // Signaux réactifs pour chaque breakpoint[25][28]
+  isMobile = signal<boolean>(false);
+  isTablet = signal<boolean>(false);
+  isDesktop = signal<boolean>(false);
+  
+  constructor() {
+    // Mobile (< 768px)
+    this.breakpointObserver.observe('(max-width: 767px)').subscribe(result => {
+      this.isMobile.set(result.matches);
+    });
+    
+    // Tablet (768px - 1023px)
+    this.breakpointObserver.observe('(min-width: 768px) and (max-width: 1023px)').subscribe(result => {
+      this.isTablet.set(result.matches);
+    });
+    
+    // Desktop (>= 1024px)
+    this.breakpointObserver.observe('(min-width: 1024px)').subscribe(result => {
+      this.isDesktop.set(result.matches);
+    });
+  }
+}
+```
+
+***
+
+## 📱 Composants Responsifs Spécifiques
+
+### 1) Shell Principal Nimbus (Responsive)
+
+```typescript
+// app-shell-nimbus.component.ts
+import { Component, inject } from '@angular/core';
+import { ResponsiveService } from '@app/shared/services/responsive.service';
+
+@Component({
+  selector: 'app-shell-nimbus-layout',
+  template: `
+    <!-- Desktop: 3 colonnes -->
+    <div *ngIf="responsive.isDesktop()" class="h-screen flex flex-col">
+      <app-navbar class="h-14 flex-none"></app-navbar>
+      <div class="flex-1 flex overflow-hidden">
+        <app-left-sidebar class="w-80 flex-none border-r"></app-left-sidebar>
+        <app-center-list class="w-96 flex-none border-r"></app-center-list>
+        <app-note-view class="flex-1 relative"></app-note-view>
+      </div>
+    </div>
+
+    <!-- Tablet: Onglets -->
+    <div *ngIf="responsive.isTablet()" class="h-screen flex flex-col">
+      <app-navbar class="h-14 flex-none"></app-navbar>
+      <app-tab-navigation class="h-12 flex-none border-b"></app-tab-navigation>
+      <app-tab-content class="flex-1 overflow-hidden"></app-tab-content>
+    </div>
+
+    <!-- Mobile: Bottom nav + drawer -->  
+    <div *ngIf="responsive.isMobile()" class="h-screen flex flex-col">
+      <app-navbar-mobile class="h-12 flex-none"></app-navbar-mobile>
+      <app-mobile-content class="flex-1 overflow-hidden"></app-mobile-content>
+      <app-bottom-navigation class="h-16 flex-none"></app-bottom-navigation>
+    </div>
+  `,
+  standalone: true,
+  imports: [/* tous les composants */],
+})
+export class AppShellNimbusLayoutComponent {
+  responsive = inject(ResponsiveService);
+}
+```
+
+### 2) Bottom Navigation Mobile
+
+```typescript
+// app-bottom-navigation.component.ts
+import { Component, inject } from '@angular/core';
+import { MobileNavService } from '@app/shared/services/mobile-nav.service';
+
+@Component({
+  selector: 'app-bottom-navigation',
+  template: `
+    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 
+                border-t border-gray-200 dark:border-gray-800 h-16 
+                flex justify-around items-center z-50">
+      
+      <button *ngFor="let tab of tabs"
+              (click)="setActiveTab(tab.id)"
+              [class.active]="mobileNav.activeTab() === tab.id"
+              class="flex-1 flex flex-col items-center justify-center gap-1 
+                     text-xs hover:bg-gray-50 dark:hover:bg-gray-800
+                     transition-colors duration-200 py-2 px-1
+                     text-gray-600 dark:text-gray-400"
+              [class.text-nimbus-500]="mobileNav.activeTab() === tab.id"
+              [class.dark:text-nimbus-400]="mobileNav.activeTab() === tab.id">
+        <span class="text-lg">{{ tab.icon }}</span>
+        <span class="truncate">{{ tab.label }}</span>
+      </button>
+    </nav>
+  `,
+  standalone: true,
+})
+export class AppBottomNavigationComponent {
+  mobileNav = inject(MobileNavService);
+  
+  tabs = [
+    { id: 'sidebar', icon: '📁', label: 'Dossiers' },
+    { id: 'list', icon: '🔍', label: 'Liste' },  
+    { id: 'page', icon: '📄', label: 'Page' },
+    { id: 'toc', icon: '📋', label: 'Sommaire' }
+  ];
+
+  setActiveTab(tabId: string) {
+    this.mobileNav.setActiveTab(tabId as any);
+  }
+}
+```
+
+### 3) Service Navigation Mobile
+
+```typescript
+// src/shared/services/mobile-nav.service.ts
+import { Injectable, signal } from '@angular/core';
+
+type MobileTab = 'sidebar' | 'list' | 'page' | 'toc';
+
+@Injectable({ providedIn: 'root' })
+export class MobileNavService {
+  activeTab = signal<MobileTab>('list');
+  
+  // État des drawers
+  sidebarOpen = signal<boolean>(false);
+  tocOpen = signal<boolean>(false);
+  
+  setActiveTab(tab: MobileTab) {
+    this.activeTab.set(tab);
+    
+    // Auto-fermer les drawers quand on change d'onglet
+    if (tab !== 'sidebar') this.sidebarOpen.set(false);
+    if (tab !== 'toc') this.tocOpen.set(false);
+  }
+  
+  toggleSidebar() {
+    this.sidebarOpen.update(open => !open);
+  }
+  
+  toggleToc() {
+    this.tocOpen.update(open => !open);
+  }
+}
+```
+
+### 4) Drawer Sidebar Mobile
+
+```typescript
+// app-sidebar-drawer.component.ts
+import { Component, inject } from '@angular/core';
+import { MobileNavService } from '@app/shared/services/mobile-nav.service';
+
+@Component({
+  selector: 'app-sidebar-drawer',
+  template: `
+    <!-- Drawer sidebar -->
+    <aside class="fixed left-0 top-0 bottom-0 w-80 max-w-[80vw]
+                  bg-white dark:bg-gray-900 shadow-lg z-40
+                  transform transition-transform duration-300 ease-in-out"
+           [class.-translate-x-full]="!mobileNav.sidebarOpen()">
+      
+      <!-- Header avec bouton fermer -->
+      <div class="flex items-center justify-between p-4 border-b">
+        <h2 class="text-lg font-semibold">Navigation</h2>
+        <button (click)="mobileNav.toggleSidebar()" 
+                class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+          ✕
+        </button>
+      </div>
+      
+      <!-- Contenu sidebar (même composant que desktop) -->
+      <div class="flex-1 overflow-y-auto p-4">
+        <app-sidebar-content></app-sidebar-content>
+      </div>
+    </aside>
+
+    <!-- Backdrop -->
+    <div *ngIf="mobileNav.sidebarOpen()" 
+         (click)="mobileNav.toggleSidebar()"
+         class="fixed inset-0 bg-black/50 z-30"></div>
+  `,
+  standalone: true,
+  imports: [AppSidebarContentComponent],
+})
+export class AppSidebarDrawerComponent {
+  mobileNav = inject(MobileNavService);
+}
+```
+
+### 5) Search Bar Responsive
+
+```typescript
+// app-search-bar.component.ts
+import { Component, inject } from '@angular/core';
+import { ResponsiveService } from '@app/shared/services/responsive.service';
+import { MobileNavService } from '@app/shared/services/mobile-nav.service';
+
+@Component({
+  selector: 'app-search-bar',
+  template: `
+    <!-- Mobile: Compact avec bouton menu -->
+    <div *ngIf="responsive.isMobile()" 
+         class="sticky top-0 bg-white dark:bg-gray-900 p-2 shadow-sm z-10">
+      <div class="flex gap-2">
+        <!-- Menu toggle -->
+        <button (click)="mobileNav.toggleSidebar()" 
+                class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+          ☰
+        </button>
+        
+        <!-- Search input (full-width sur mobile) -->
+        <input type="text" 
+               placeholder="Rechercher..." 
+               [(ngModel)]="searchQuery"
+               class="flex-1 px-3 py-2 rounded border border-gray-300 
+                      dark:border-gray-700 dark:bg-gray-800">
+        
+        <!-- Filters button -->
+        <button (click)="openFilters()" 
+                class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+          ⚙️
+        </button>
+      </div>
+      
+      <!-- Chips actifs (scroll horizontal) -->
+      <div class="flex gap-1 mt-2 overflow-x-auto">
+        <span *ngFor="let badge of activeFilters" 
+              class="inline-flex items-center gap-1 px-2 py-1 bg-nimbus-100 
+                     text-nimbus-800 rounded-full text-xs whitespace-nowrap">
+          {{ badge }}
+          <button (click)="removeFilter(badge)" class="hover:bg-nimbus-200 rounded-full">
+            ✕
+          </button>
+        </span>
+      </div>
+    </div>
+
+    <!-- Desktop: Barre complète avec chips -->
+    <div *ngIf="responsive.isDesktop() || responsive.isTablet()" 
+         class="p-4 border-b border-gray-200 dark:border-gray-800">
+      
+      <!-- Search + Filters -->
+      <div class="flex gap-3 mb-3">
+        <div class="relative flex-1">
+          <input type="text"
+                 placeholder="Rechercher dans toutes les notes..."
+                 [(ngModel)]="searchQuery"
+                 class="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 
+                        dark:border-gray-700 dark:bg-gray-800">
+          <span class="absolute left-3 top-2.5 text-gray-400">🔍</span>
+        </div>
+        
+        <button (click)="openFilters()" 
+                class="px-4 py-2 bg-nimbus-500 text-white rounded-lg 
+                       hover:bg-nimbus-600 transition-colors">
+          + Page
+        </button>
+      </div>
+      
+      <!-- Chips de filtres[1] -->
+      <div class="flex gap-2 flex-wrap">
+        <app-filter-chip label="Tous dossiers" [active]="true" 
+                        (click)="openFolderPicker()"></app-filter-chip>
+        <app-filter-chip label="Tous tags" [active]="false"
+                        (click)="openTagPicker()"></app-filter-chip>  
+        <app-filter-chip label="Toutes pages" [active]="false"
+                        (click)="openPagePicker()"></app-filter-chip>
+      </div>
+    </div>
+  `,
+  standalone: true,
+})
+export class AppSearchBarComponent {
+  responsive = inject(ResponsiveService);
+  mobileNav = inject(MobileNavService);
+  
+  searchQuery = '';
+  activeFilters: string[] = [];
+
+  openFilters() { /* */ }
+  removeFilter(filter: string) { /* */ }
+  openFolderPicker() { /* */ }
+  openTagPicker() { /* */ }
+  openPagePicker() { /* */ }
+}
+```
+
+### 6) Liste de Résultats Responsive
+
+```typescript
+// app-result-list.component.ts
+import { Component, inject, Input } from '@angular/core';
+import { ResponsiveService } from '@app/shared/services/responsive.service';
+
+@Component({
+  selector: 'app-result-list',
+  template: `
+    <!-- Liste virtualisée pour performance -->
+    dk-virtual-scroll-viewport 
+      [itemSize]="responsive.isMobile() ? 70 : 80" 
+      class="h"h-full">
+      
+      <app-result-list-item
+        *cdkVirtualFor="let item of items; trackBy: trackByFn"
+        [item]="item"
+        [compact]="responsive.isMobile()"
+        (click)="openNote(item)"
+        class="cursor-pointer">
+      </app-result-list-item>
+      
+    </cdk-virtual-scroll-viewport>
+  `,
+  standalone: true,
+  imports: [ScrollingModule],
+})
+export class AppResultListComponent {
+  responsive = inject(ResponsiveService);
+  
+  @Input() items: any[] = [];
+  
+  trackByFn(index: number, item: any) {
+    return item.id;
+  }
+  
+  openNote(item: any) {
+    // Navigation vers la note
+  }
+}
+```
+
+### 7) Item de Résultat Mobile-Optimized
+
+```typescript
+// app-result-list-item.component.ts  
+@Component({
+  selector: 'app-result-list-item',
+  template: `
+    <div class="p-3 border-b border-gray-100 dark:border-gray-800
+                hover:bg-gray-50 dark:hover:bg-gray-800 
+                transition-colors duration-150">
+      
+      <!-- Titre -->
+      <h3 class="font-semibold text-sm sm:text-base truncate"
+          [class.text-base]="!compact"
+          [class.text-sm]="compact">
+        {{ item.title }}
+      </h3>
+      
+      <!-- Date + Tags (empilés sur mobile) -->
+      <div class="flex flex-col sm:flex-row sm:items-center gap-1 mt-1 
+                  text-xs text-gray-600 dark:text-gray-400">
+        <span>{{ item.modified | date:'short' }}</span>
+        <div class="flex gap-1 flex-wrap">
+          <span *ngFor="let tag of item.tags" 
+                class="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 
+                       rounded text-xs">
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+      
+      <!-- Extrait (tronqué) -->
+      <p *ngIf="!compact" 
+         class="mt-2 text-xs text-gray-600 dark:text-gray-400 
+                line-clamp-2">
+        {{ item.excerpt }}
+      </p>
+    </div>
+  `,
+  standalone: true,
+})
+export class AppResultListItemComponent {
+  @Input() item: any;
+  @Input() compact = false;
+}
+```
+
+### 8) Markdown Viewer avec ToC Responsive
+
+```typescript
+// app-markdown-viewer.component.ts
+import { Component, inject } from '@angular/core';
+import { ResponsiveService } from '@app/shared/services/responsive.service';
+import { MobileNavService } from '@app/shared/services/mobile-nav.service';
+
+@Component({
+  selector: 'app-markdown-viewer',
+  template: `
+    <!-- Container principal -->
+    <div class="h-full flex flex-col">
+      
+      <!-- Actions bar -->
+      <div class="flex-none p-3 border-b border-gray-200 dark:border-gray-800 
+                  flex items-center justify-between">
+        <h1 class="text-lg font-semibold truncate">{{ currentNote?.title }}</h1>
+        
+        <div class="flex items-center gap-2">
+          <!-- ToC toggle (mobile seulement) -->
+          <button *ngIf="responsive.isMobile() && headings.length > 0"
+                  (click)="mobileNav.toggleToc()"
+                  class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
+            📋
+          </button>
+          
+          <!-- Actions Desktop -->
+          <div *ngIf="responsive.isDesktop()" class="flex gap-1">
+            <button class="p-2 rounded hover:bg-gray-100">🤖 Ask AI</button>
+            <button class="p-2 rounded hover:bg-gray-100">📤 Share</button>
+            <button class="p-2 rounded hover:bg-gray-100">⛫ Portal</button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Contenu markdown -->
+      <article class="flex-1 overflow-y-auto prose dark:prose-invert max-w-none 
+                      prose-sm sm:prose-base px-3 sm:px-6 py-4 sm:py-8">
+        <div [innerHTML]="markdownHTML"></div>
+      </article>
+      
+    </div>
+
+    <!-- ToC Desktop: Panel fixe à droite -->
+    <app-toc-panel *ngIf="responsive.isDesktop() && headings.length > 0"
+                   [headings]="headings"
+                   class="fixed right-0 top-14 bottom-0 w-64 
+                          bg-gray-50 dark:bg-gray-800 border-l 
+                          border-gray-200 dark:border-gray-700">
+    </app-toc-panel>
+
+    <!-- ToC Mobile: Overlay -->
+    <app-toc-overlay *ngIf="responsive.isMobile() && mobileNav.tocOpen()"
+                     [headings]="headings"
+                     (close)="mobileNav.toggleToc()">
+    </app-toc-overlay>
+  `,
+  standalone: true,
+})
+export class AppMarkdownViewerComponent {
+  responsive = inject(ResponsiveService);
+  mobileNav = inject(MobileNavService);
+  
+  @Input() currentNote: any;
+  @Input() markdownHTML = '';
+  @Input() headings: any[] = [];
+}
+```
+
+***
+
+## 🎬 Gestures & Navigation Tactile
+
+### Directive Swipe Navigation
+
+```typescript
+// src/shared/directives/swipe-nav.directive.ts
+import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appSwipeNav]',
+  standalone: true,
+})
+export class SwipeNavDirective {
+  @Output() swipeLeft = new EventEmitter<void>();
+  @Output() swipeRight = new EventEmitter<void>();
+
+  private startX = 0;
+  private startY = 0;
+  private threshold = 50; // Minimum distance
+  private restraint = 100; // Maximum perpendicular distance
+
+  @HostListener('touchstart', ['$event'])
+  onTouchStart(e: TouchEvent) {
+    const touch = e.touches[0];
+    this.startX = touch.clientX;
+    this.startY = touch.clientY;
+  }
+
+  @HostListener('touchend', ['$event'])
+  onTouchEnd(e: TouchEvent) {
+    const touch = e.changedTouches[0];
+    const endX = touch.clientX;
+    const endY = touch.clientY;
+    
+    const distX = this.startX - endX;
+    const distY = Math.abs(this.startY - endY);
+    
+    // Vérifier que c'est bien un swipe horizontal
+    if (Math.abs(distX) >= this.threshold && distY <= this.restraint) {
+      if (distX > 0) {
+        this.swipeLeft.emit();
+      } else {
+        this.swipeRight.emit();
+      }
+    }
+  }
+}
+```
+
+### Usage Mobile avec Swipe
+
+```html
+<!-- app-mobile-content.component.html -->
+<div appSwipeNav 
+     (swipeLeft)="nextTab()"
+     (swipeRight)="prevTab()"
+     class="h-full relative">
+  
+  <!-- Contenu selon tab active -->
+  <div [ngSwitch]="mobileNav.activeTab()">
+    
+    <app-sidebar-drawer *ngSwitchCase="'sidebar'"></app-sidebar-drawer>
+    
+    <div *ngSwitchCase="'list'" class="h-full">
+      <app-search-bar></app-search-bar>  
+      <app-result-list [items]="filteredNotes"></app-result-list>
+    </div>
+    
+    <div *ngSwitchCase="'page'" class="h-full">
+      <app-markdown-viewer [currentNote]="selectedNote"></app-markdown-viewer>
+    </div>
+    
+    <app-toc-overlay *ngSwitchCase="'toc'" 
+                     [headings]="currentHeadings">
+    </app-toc-overlay>
+    
+  </div>
+</div>
+```
+
+***
+
+## ⚡ Performance & Optimisations Mobile
+
+### Critical Optimizations[7][8]
+
+```typescript
+// Lazy loading des images
+// app-image-lazy.directive.ts
+@Directive({
+  selector: 'img[appLazyLoad]'
+})
+export class LazyLoadDirective implements OnInit {
+  @Input() src!: string;
+  @Input() alt = '';
+  
+  ngOnInit() {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target as HTMLImageElement;
+          img.src = this.src;
+          img.alt = this.alt;
+          observer.unobserve(img);
+        }
+      });
+    });
+    
+    observer.observe(this.el.nativeElement);
+  }
+}
+```
+
+### Skeleton Loaders Mobile
+
+```typescript
+// app-skeleton.component.ts
+@Component({
+  selector: 'app-skeleton',
+  template: `
+    <div class="animate-pulse">
+      <!-- Mobile: Stack vertical -->
+      <div *ngIf="responsive.isMobile()" class="p-3 space-y-2">
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+        <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+        <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full"></div>
+      </div>
+      
+      <!-- Desktop: Layout horizontal -->
+      <div *ngIf="responsive.isDesktop()" class="p-4 space-y-3">
+        <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
+        <div class="flex space-x-4">
+          <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
+          <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+        </div>
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded"></div>
+      </div>
+    </div>
+  `,
+  standalone: true,
+})
+export class AppSkeletonComponent {
+  responsive = inject(ResponsiveService);
+}
+```
+
+***
+
+## 📅 Plan d'Implémentation Priorisé
+
+### Phase 1: Infrastructure (2-3j)
+- ✅ `UiModeService` + localStorage persistence
+- ✅ `ResponsiveService` avec BreakpointObserver[9][10]
+- ✅ `AppShellAdaptiveComponent` wrapper
+- ✅ Toggle button dans navbar
+- ✅ Breakpoints Tailwind mobile-first[6][5]
+
+### Phase 2: Layout Desktop (3-4j)
+- ✅ Desktop layout 3 colonnes (≥1024px)
+- ✅ Sidebar resizable avec dossiers/tags
+- ✅ Liste virtualisée performante
+- ✅ ToC panel fixe à droite
+- ✅ Search bar avec chips de filtres[2][1]
+
+### Phase 3: Navigation Mobile (2-3j)  
+- ✅ `MobileNavService` (state management)
+- ✅ `BottomNavigationComponent` (4 onglets)[11][12]
+- ✅ Tab routing et state persistence
+- ✅ Swipe gestures directive[13][14]
+
+### Phase 4: Composants Mobile (3-4j)
+- ✅ Drawer sidebar mobile[15][16]
+- ✅ Search bar responsive compacte
+- ✅ Result list item mobile-optimized
+- ✅ Markdown viewer full-screen mobile
+- ✅ ToC overlay mobile avec animations
+
+### Phase 5: Tablet & Transitions (1-2j)
+- ✅ Layout hybride tablet (768-1023px)
+- ✅ Animations fluides entre breakpoints
+- ✅ Touch targets ≥ 44px[6]
+- ✅ Gesture handling avancé
+
+### Phase 6: Testing & Polish (2-3j)
+- ✅ Tests E2E (toggle, breakpoints, gestures)
+- ✅ Lighthouse mobile audit (≥85 perf, ≥95 a11y)
+- ✅ Visual regression (3 breakpoints)
+- ✅ Keyboard navigation complète
+- ✅ WCAG 2.1 AA compliance
+
+**Total estimé** : 13-19 jours (équipe 1 FE engineer)
+
+***
+
+## 🗂️ Structure des Fichiers
+
+```
+src/app/
+├── layout/
+│   ├── app-shell-adaptive/
+│   │   └── app-shell-adaptive.component.ts      # Feature flag wrapper
+│   ├── app-shell-nimbus/
+│   │   ├── app-shell-nimbus.component.ts        # Layout responsive
+│   │   ├── app-shell-nimbus.desktop.html        # Template desktop  
+│   │   ├── app-shell-nimbus.tablet.html         # Template tablet
+│   │   └── app-shell-nimbus.mobile.html         # Template mobile
+│   └── app-navbar/
+│       ├── app-navbar.component.ts
+│       ├── app-navbar.desktop.html              # NavBar desktop
+│       └── app-navbar.mobile.html               # NavBar mobile compact
+│
+├── features/
+│   ├── sidebar/
+│   │   ├── app-left-sidebar.component.ts        # Desktop sidebar
+│   │   ├── app-sidebar-drawer.component.ts      # Mobile drawer[39]
+│   │   └── app-sidebar-content.component.ts     # Contenu partagé
+│   │
+│   ├── search-bar/
+│   │   ├── app-search-bar.component.ts          # Responsive wrapper
+│   │   ├── app-search-desktop.component.ts      # Desktop full
+│   │   └── app-search-mobile.component.ts       # Mobile compact
+│   │
+│   ├── result-list/
+│   │   ├── app-result-list.component.ts         # Liste virtualisée
+│   │   └── app-result-list-item.component.ts    # Item responsive
+│   │
+│   ├── note-view/
+│   │   ├── app-markdown-viewer.component.ts     # Viewer responsive
+│   │   ├── app-toc-panel.component.ts           # ToC desktop fixe
+│   │   └── app-toc-overlay.component.ts         # ToC mobile overlay
+│   │
+│   ├── bottom-nav/ [NEW]
+│   │   ├── app-bottom-navigation.component.ts   # Navigation mobile[40]
+│   │   └── app-tab-navigation.component.ts      # Navigation tablet
+│   │
+│   └── mobile-content/ [NEW]
+│       ├── app-mobile-content.component.ts      # Container mobile
+│       └── app-tab-content.component.ts         # Container tablet
+│
+├── shared/
+│   ├── services/
+│   │   ├── ui-mode.service.ts                   # Toggle UI management
+│   │   ├── responsive.service.ts                # Breakpoint detection[25]
+│   │   └── mobile-nav.service.ts                # Tab/drawer state mobile
+│   │
+│   ├── directives/
+│   │   ├── swipe-nav.directive.ts               # Gesture detection[41]
+│   │   └── lazy-load.directive.ts               # Image lazy loading
+│   │
+│   └── components/
+│       ├── skeleton/
+│       │   └── app-skeleton.component.ts        # Loading states
+│       └── filter-chip/
+│           └── app-filter-chip.component.ts     # Chips réutilisables[1]
+│
+└── styles/
+    ├── tokens.scss                              # Variables Nimbus
+    ├── responsive.scss                          # Utilitaires responsive[21]
+    ├── mobile.scss                              # Styles mobile-specific
+    └── animations.scss                          # Transitions smooth
+```
+
+***
+
+## ✅ Critères d'Acceptation
+
+### ✅ Desktop (≥1024px)
+- Layout 3 colonnes (sidebar fixe/resizable, liste, page+ToC)[1][2]
+- Changement dossier/tag/tri reflété en URL
+- 1000+ items fluide (60fps virtual scroll)
+- ToC synchronisé + repliable côté droit
+- Navigation clavier-seule possible partout
+
+### ✅ Mobile (<768px)  
+- Drawer sidebar (80vw max) avec backdrop[16][15]
+- Bottom nav (4 onglets) sticky[12][11]
+- Search bar compact (menu + search + filters)
+- List items optimisés (titre + date + excerpt)
+- Markdown full-screen avec ToC overlay
+- Touch targets ≥ 44x44px[6]
+- Swipe navigation entre onglets[13]
+
+### ✅ Tablet (768-1023px)
+- Navigation par 3 onglets principaux  
+- Contenu full-width par tab
+- Drawer optionnel selon besoin
+- Bottom navigation hybride
+
+### ✅ Feature Flag
+- Toggle UI visible dans navbar
+- État persisté (localStorage)  
+- Pas de perte d'état lors du switch
+- Legacy UI reste intacte et fonctionnelle
+
+### ✅ Performance & Accessibilité
+- TTI < 2.5s cold start
+- Scroll 60fps sur 1000+ items
+- Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y[8][7]
+- WCAG 2.1 AA sur tous les breakpoints
+- Keyboard navigation complète (Tab, Arrow, Enter)
+- Focus visible partout, zoom ≤ 200% sans scroll horizontal
+
+***
+
+## 🚀 Scripts & Commandes
+
+```bash
+# Dev complet (Nimbus activé par défaut)
+npm run dev
+
+# Build production avec optimisations mobile
+npm run build:mobile
+
+# Tests responsifs (plusieurs breakpoints)  
+npm run test:responsive
+
+# Lighthouse audit mobile
+npm run audit:lighthouse:mobile
+
+# Feature flag override
+NIMBUS_UI=false npm run dev        # Force legacy UI
+NIMBUS_UI=true npm run dev         # Force Nimbus UI
+
+# Screenshots responsive pour tests visuels
+npm run screenshot:all-breakpoints
+```
+
+***
+
+## 📖 Documentation à Produire
+
+1. **README_UI_RESPONSIVE.md** : Architecture, breakpoints, captures d'écran 3 formats
+2. **MOBILE_GUIDE.md** : Navigation onglets, gestures, patterns drawer
+3. **RESPONSIVE_CHECKLIST.md** : Tests par breakpoint, device testing
+4. **DEPLOYMENT_PROGRESSIVE.md** : Feature flag pour migration douce
+5. **PERFORMANCE_MOBILE.md** : Optimisations, lazy loading, metrics
+
+***
+
+## 💡 Notes Cruciales
+
+- **Mobile First Absolu** : Développer mobile d'abord, puis enrichir tablet/desktop[5][6]
+- **Zero Regression** : L'interface legacy reste 100% intacte et fonctionnelle
+- **État Persistant** : Toggle UI, filtres actifs, tab mobile via localStorage  
+- **Performance** : Virtual scroll adapté mobile, lazy-load images, skeleton loaders[7]
+- **Accessibility** : 44px touch targets, ARIA labels complets, keyboard nav[6]
+- **Testing** : Visual regression sur 3 breakpoints clés (375px/768px/1440px)
+- **Gestures** : Swipe navigation fluide, long-press menus, pull-to-refresh optionnel[14][13]
+
+***
+
+**Exécute maintenant ce plan complet** : crée tous les composants responsifs, implémente les services de state management, configure les breakpoints Tailwind mobile-first, branche la navigation tactile avec gestures, et livre le MR conforme aux critères ci-dessus avec toggle UI et compatibilité 100% Desktop/Tablet/Mobile.[5][13]
+
+[1](https://nimbuslearning.com/team_member/aaron-lee/)
+[2](https://thefusebase.com/guides/android-ios/mobile-apps/)
+[3](https://thefusebase.com/guides/getting-started/structure-in-nimbus-note/)
+[4](https://blog.angular-university.io/angular-responsive-design/)
+[5](https://tailwindcss.com/docs/responsive-design)
+[6](https://dev.to/hitesh_developer/20-tips-for-designing-mobile-first-with-tailwind-css-36km)
+[7](https://www.youtube.com/watch?v=S2eyA3zk0BQ)
+[8](https://www.linkedin.com/pulse/designing-responsive-uis-angular-mobile-first-adaptive-yeturi-sx1wc)
+[9](https://material.angular.dev/cdk/layout/overview)
+[10](https://www.thisdot.co/blog/how-to-manage-breakpoints-using-breakpointobserver-in-angular)
+[11](https://m2.material.io/components/bottom-navigation)
+[12](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar)
+[13](https://stackoverflow.com/questions/42592156/what-is-the-best-way-to-implement-swipe-navigation-in-angular-2)
+[14](https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/List/End-User_Interaction/Touch-Screen_Gestures/)
+[15](https://material.angular.dev/components/sidenav/overview)
+[16](https://dev.to/davidihl/how-to-create-a-responsive-sidebar-and-mini-navigation-with-material-angular-o5l)
+[17](https://smart-interface-design-patterns.com)
+[18](https://www.reddit.com/r/angular/comments/1gjjkpt/responsive_design_best_practice/)
+[19](https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman-spring/)
+[20](https://www.youtube.com/watch?v=svetVZJewDk)
+[21](https://blog.pixelfreestudio.com/how-to-implement-mobile-first-design-in-angular/)
+[22](https://devoxsoftware.com/blog/improve-engagement-of-your-saas-with-ux-ui-design-best-practices/)
+[23](https://appsumo.com/products/fusebase/questions/pavel-1430723/)
+[24](https://thefusebase.com/note/)
+[25](https://www.youtube.com/watch?v=bGoemPZfQzk)
+[26](https://angular.love/responsive-angular-components)
+[27](https://www.thedesignership.com/blog/the-ultimate-guide-to-ux-ui-design-in-2024)
+[28](https://fivetaco.com/products/fusebase)
+[29](https://help.luware.com/best-practices-category/best-practices-designing-messages-and-adaptive-cards-in-ms-teams)
+[30](https://www.reddit.com/r/FlutterDev/comments/1alapqu/should_i_separate_the_codebase_for_desktop_and/)
+[31](https://stackoverflow.com/questions/65782044/without-media-queries-how-to-achieve-3-column-desktop-to-1-column-mobile-layout)
+[32](https://m2.material.io/design/layout/responsive-layout-grid.html)
+[33](https://tailwindcss.com/plus/templates/pocket)
+[34](https://www.w3schools.com/howto/howto_css_three_columns.asp)
+[35](https://stackoverflow.com/questions/78141479/how-to-change-desktop-first-design-code-to-mobile-first-with-tailwind-css-respo)
+[36](https://www.linkedin.com/posts/angular-material-dev_angular-angularmaterial-webdevelopment-activity-7354526847910445056-jqNb)
+[37](https://stackoverflow.com/questions/72945583/breakpointobserver-angular)
+[38](https://www.reddit.com/r/Frontend/comments/1fevx2e/anyone_switched_from_desktop_first_to_mobile/)
+[39](https://teamtreehouse.com/community/three-column-layout-that-is-responsive)
+[40](https://www.youtube.com/watch?v=I13uAoOGU_4)
+[41](https://dev.to/slyskillet/mobile-first-design-with-tailwind-css-3phd)
+[42](https://www.telerik.com/kendo-angular-ui/components/grid/styling-and-appearance/responsive-design)
+[43](https://www.digitalocean.com/community/tutorials/angular-breakpoints-angular-cdk)
+[44](https://www.bootstrapdash.com/blog/tailwind-responsive-design-tips)
+[45](https://www.reddit.com/r/Angular2/comments/w0co1t/how_to_implement_gestures_swipe_left_slider_in_an/)
+[46](https://www.youtube.com/watch?v=4CYuOiRHHA8)
+[47](https://www.telerik.com/kendo-angular-ui/bottomnavigation)
+[48](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
+[49](https://stackoverflow.com/questions/57885511/angular-material-nav-sidebar-only-shows-on-responsive-resizing)
+[50](https://stackoverflow.com/questions/50445545/create-mobile-bottom-navigation-with-angular-material)
+[51](https://material.angular.dev/components/sidenav)
+[52](https://material.angular.dev/components/tabs/overview)
+[53](https://30dayscoding.com/blog/angular-animations-and-gesture-support)
+[54](https://stackoverflow.com/questions/63642803/angular-material-sidenav-rail-mode-hidden-on-mobile)
+[55](https://demo.mobiscroll.com/angular/navigation/bottom-navigation)
+[56](https://angular.love/gestures-in-an-angular-application)
+[57](https://stackblitz.com/edit/angular-closing-side-nav-in-mobile?file=app%2Fsidenav-responsive-example.html)
+[58](https://www.reddit.com/r/ionic/comments/1jwmsnr/iontabbar_and_transparent_device_navbar/)
\ No newline at end of file
diff --git a/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_qwen3-max.md b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_qwen3-max.md
new file mode 100644
index 0000000..00d5cd1
--- /dev/null
+++ b/docs/PROMPTS/Nimbus_Interface/ObsiViewer_NewInterface_Nimbus_V2_qwen3-max.md
@@ -0,0 +1,151 @@
+Voici le **prompt Windsurf révisé**, enrichi et aligné avec la **lecture anatomique UX de Nimbus Notes / FuseBase**, tout en maintenant la **compatibilité 100 % Desktop + Mobile (téléphone + tablette)** et en intégrant fidèlement les **8 principes Nimbus** :
+
+---
+
+# 🎯 Prompt Windsurf — ObsiViewer Nimbus UI (Desktop + Mobile)
+
+## ObsiViewer → UI/UX “Nimbus-like” (simple, dense, rapide)
+
+**Rôle & mode** : Agis comme **Staff Frontend Engineer Angular 20 + UX Designer**. Tu as les pleins pouvoirs pour refactoriser l’UI, ajouter des composants, migrer vers Tailwind, et réorganiser l’architecture. **Toutes les fonctionnalités existantes doivent être conservées** (wikilinks, graph, bookmarks, etc.).
+
+**Contrainte majeure** : L’interface doit être **100 % responsive** (Desktop ≥1024px, Tablet 768–1023px, Mobile <768px). Un **bouton toggle UI** dans la navbar permet de basculer entre l’ancienne interface et la nouvelle **sans perte d’état**.
+
+---
+
+## 🧠 Philosophie Nimbus à reproduire (8 piliers)
+
+1. **Workspace-first** : chaque espace est un univers isolé. Le sélecteur d’espace doit être visible dans le footer du rail gauche.
+2. **Bi-axe organisationnel** : navigation par **dossiers (hiérarchie)** + **tags (multi-catégorisation)**.
+3. **Recherche d’abord** : champ central + **chips de filtres persistants** (“All folders ▾”, “All tags ▾”, “All pages ▾”) avec badges de comptage.
+4. **Progressive disclosure** : menus hover-reveal, overlays contextuels, panneau d’outline flottant activé *dans* la page.
+5. **Un contenu, plusieurs façades** : chaque note peut être **partagée** ou **publiée dans un Portal** via des boutons toujours visibles (`Share`, `Add to portal`).
+6. **CTA unique** : un seul bouton **+ Page** (turquoise) en haut, centré ou à droite selon le breakpoint.
+7. **Lisibilité & densité** : typographie hiérarchisée, espacements respirants, contrastes élevés en dark mode.
+8. **Feedback immédiat** : états visuels clairs (sélection, filtres actifs, compteurs), boutons `Clear` omniprésents.
+
+---
+
+## 🎯 Objectif final (résumé)
+
+### Desktop (≥1024px)
+**Layout 3 colonnes** :
+1. **Sidebar gauche** : Quick Links, arborescence dossiers/tags, création hover-reveal (+), sélecteur workspace dans le footer.
+2. **Colonne centrale** : barre de recherche + **trio de chips filtrables** → liste virtualisée de pages (titre, date, snippet, icônes bookmark).
+3. **Panneau droit** : vue markdown + **barre d’actions contextuelles** (`Ask AI`, `Add to portal`, `Share`, plein écran) + **outline flottant** (hamburger rond à droite du contenu).
+
+### Mobile/Tablet (<1024px)
+**Navigation par onglets/drawer** :
+- **Tab 1 : Sidebar** → drawer ou full-width (dossiers, tags, recherche, sélecteur workspace).
+- **Tab 2 : Liste** → full-width, chips de filtres scrollables, items optimisés (titre + date + tags + excerpt).
+- **Tab 3 : Page** → vue markdown plein écran, **ToC inline toggle** (bouton flottant), barre d’actions compacte.
+- **Gestures** : swipe horizontal entre onglets, long-press = menu contextuel, pull-to-refresh (optionnel).
+
+---
+
+## 🔧 Architecture Feature Flag & Toggle
+
+Identique au prompt initial :
+- `UiModeService` avec localStorage
+- `AppShellAdaptiveComponent`
+- Bouton toggle dans la navbar
+
+✅ **Garantir la persistance des filtres, sélection active, workspace, et thème lors du toggle.**
+
+---
+
+## 📱 Composants Nimbus Responsifs (ajouts clés)
+
+### 1. **Search & Filter Bar**
+- **Desktop** : champ large centré + icône filtre + **+ Page** (turquoise)
+- **Mobile** : [☰] + champ + [⚙️] → chips de filtres scrollables horizontalement sous la barre
+
+### 2. **Filter Chips**
+- Format : `All folders ▾ (+2)`, `All tags ▾ (+5)`
+- Clic → **overlay picker** :
+  - **Folders** : arbo hiérarchique, recherche interne, multi-sélection, Clear/Done
+  - **Tags** : liste à coches, recherche locale, Clear/Done
+
+### 3. **Sidebar**
+- **Desktop** : rail fixe, hover-reveal “+” pour sous-dossier, icônes colorées, emojis supportés
+- **Mobile** : drawer animé (80vw), accessible via [☰] ou swipe
+
+### 4. **Result List Item**
+- Compact mais lisible
+- Icône bookmark si lien externe (carte enrichie)
+- État sélectionné : fond + bordure turquoise
+
+### 5. **Note View Toolbar**
+- **Desktop** : `Ask AI` | `Add to portal` | `Share` | 🔍 | 📎 | 🖥️ | ⋮
+- **Mobile** : icônes uniquement, en haut ou en bottom sheet
+
+### 6. **Outline / ToC**
+- **Desktop** : rail fixe à droite (≥1024px)
+- **Mobile** : bouton flottant 📋 → overlay plein écran ou panneau repliable en haut
+
+### 7. **Workspace Selector**
+- Dans le **footer du rail gauche** (Desktop) ou dans le **menu avatar** (Mobile)
+- Options : changement d’espace, thème (Light/Dark), settings, logout
+
+---
+
+## 🎨 Responsive Strategy
+
+- **Mobile-first** : base mobile → enrichissements `md:`, `lg:`
+- **Breakpoints Tailwind** :
+  - `xs: 320px`, `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`
+- **Touch targets** ≥ 44×44px
+- **Dark/Light mode** : palettes calibrées, contrastes WCAG AA
+
+---
+
+## 🗂️ Arborescence mise à jour (ajouts clés)
+
+```diff
+src/app/features/
+├── sidebar/
+│   └── app-workspace-selector.component.ts   ← [NEW]
+├── search-bar/
+│   ├── app-filter-chip.component.ts          ← [NEW]
+│   └── app-picker-overlay.component.ts       ← [NEW]
+├── note-view/
+│   └── app-note-actions-bar.component.ts     ← [NEW: Share, Portal, AI]
+└── bookmarks/
+    └── app-bookmark-card.component.ts        ← [NEW: rich preview]
+```
+
+---
+
+## ✅ Critères d’acceptation mis à jour
+
+### Fonctionnels
+- [ ] Filtres **persistants** et **éditables** via chips
+- [ ] Pickers **avec recherche locale** et **Clear/Done**
+- [ ] Boutons **Share** et **Add to portal** toujours visibles dans l’éditeur
+- [ ] **Workspace switcher** dans le rail gauche (desktop) ou menu (mobile)
+- [ ] **Bookmark cards** enrichies (titre + description + vignette)
+
+### Techniques
+- [ ] Aucune régression sur les features legacy (graph, wikilinks…)
+- [ ] État UI (filtres, sélection, workspace) persisté **indépendamment du mode**
+- [ ] Virtual scroll fluide (≥60fps) sur 1000+ items
+- [ ] Lighthouse Mobile ≥ 85 perf, ≥ 95 a11y
+
+---
+
+## 📖 Documentation à produire
+
+- **README_UI.md** : schémas 3 breakpoints + explication des 8 principes Nimbus
+- **MOBILE_GUIDE.md** : flow de navigation tactile, gestures, drawer patterns
+- **NIMBUS_SPEC.md** : tokens couleur, tailles de typo, comportements exacts des pickers/chips
+
+---
+
+## 💡 Notes finales
+
+- **Ne pas surcharger l’écran** : cacher les actions rares (kebab menu, hover-reveal)
+- **Feedback utilisateur** : badges de comptage, messages “Found pages: N”, Clear partout
+- **Continuum édition → diffusion** : `Share` et `Add to portal` doivent être **immédiatement accessibles**
+
+---
+
+**Exécute ce plan** : implémente les composants, connecte les états (filtres, workspace, sélection), assure la compatibilité totale Desktop/Mobile, et livre un MR conforme aux 8 principes Nimbus + checklist qualité.
\ No newline at end of file
diff --git a/MEILISEARCH_SETUP.md b/docs/SEARCH/MEILISEARCH_SETUP.md
similarity index 100%
rename from MEILISEARCH_SETUP.md
rename to docs/SEARCH/MEILISEARCH_SETUP.md
diff --git a/docs/SEARCH_DEBUG_GUIDE.md b/docs/SEARCH/SEARCH_DEBUG_GUIDE.md
similarity index 100%
rename from docs/SEARCH_DEBUG_GUIDE.md
rename to docs/SEARCH/SEARCH_DEBUG_GUIDE.md
diff --git a/docs/SEARCH_OPTIMIZATION.md b/docs/SEARCH/SEARCH_OPTIMIZATION.md
similarity index 100%
rename from docs/SEARCH_OPTIMIZATION.md
rename to docs/SEARCH/SEARCH_OPTIMIZATION.md
diff --git a/docs/TAGS_VIEW_GUIDE_UTILISATEUR.md b/docs/TAGS/TAGS_VIEW_GUIDE_UTILISATEUR.md
similarity index 100%
rename from docs/TAGS_VIEW_GUIDE_UTILISATEUR.md
rename to docs/TAGS/TAGS_VIEW_GUIDE_UTILISATEUR.md
diff --git a/docs/TAGS_VIEW_REFONTE.md b/docs/TAGS/TAGS_VIEW_REFONTE.md
similarity index 100%
rename from docs/TAGS_VIEW_REFONTE.md
rename to docs/TAGS/TAGS_VIEW_REFONTE.md
diff --git a/docs/TAGS_VIEW_SUMMARY.md b/docs/TAGS/TAGS_VIEW_SUMMARY.md
similarity index 100%
rename from docs/TAGS_VIEW_SUMMARY.md
rename to docs/TAGS/TAGS_VIEW_SUMMARY.md