feat: Implement an Apple-inspired design system with dark/light modes and introduce the initial dashboard layout including a heatmap grid component.

src/app/(dashboard)/layout.tsx

@@ -7,7 +7,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
             <Sidebar />
             <main className="flex-1 flex flex-col h-full min-w-0 overflow-hidden">
                 <Header />
-                <div className="flex-1 overflow-auto p-4 md:p-8">
+                <div className="flex-1 overflow-hidden flex flex-col p-4 md:p-8">
                     {children}
                 </div>
             </main>

src/app/globals.css

@@ -192,8 +192,8 @@
 
 /* ── Refined scrollbar ── */
 .overflow-auto::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 8px;
+  height: 8px;
 }
 
 .overflow-auto::-webkit-scrollbar-track {

src/features/grid/components/grid-client.tsx

@@ -78,9 +78,9 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
     const activeStoreNom = magasins.find(m => m.code === magasin)?.nom || "National (Total)";
 
     return (
-        <div className="space-y-3 pb-20">
+        <div className="flex flex-col h-full space-y-3 min-h-0 pb-12">
             {/* Header */}
-            <div className="flex items-end justify-between">
+            <div className="flex items-end justify-between shrink-0">
                 <div>
                     <h1 className="text-2xl font-bold tracking-tight">Révision d&apos;Assortiment</h1>
                     <p className="text-[13px] mt-0.5" style={{ color: "var(--text-secondary)" }}>
@@ -114,18 +114,24 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
             </div>
 
             {/* Filters */}
-            <GridFilterBar fournisseurs={fournisseurs} magasins={magasins} nomenclature={nomenclature} />
+            <div className="shrink-0">
+                <GridFilterBar fournisseurs={fournisseurs} magasins={magasins} nomenclature={nomenclature} />
+            </div>
 
             {/* Bulk toolbar (contextual) */}
-            <BulkActionToolbar
-                selectedCodeins={selectedCodeins}
-                onClearSelection={() => setSelectedCodeins([])}
-            />
+            <div className="shrink-0">
+                <BulkActionToolbar
+                    selectedCodeins={selectedCodeins}
+                    onClearSelection={() => setSelectedCodeins([])}
+                />
+            </div>
 
             {/* Main grid */}
-            <HeatmapGrid
-                onSelectionChange={setSelectedCodeins}
-            />
+            <div className="flex-1 min-h-0 min-w-0">
+                <HeatmapGrid
+                    onSelectionChange={setSelectedCodeins}
+                />
+            </div>
 
             {/* Summary bar */}
             <FloatingSummaryBar />

src/features/grid/components/heatmap-grid.tsx

@@ -441,9 +441,8 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     if (!isMounted) {
         return (
             <div
-                className="overflow-auto rounded-[12px] flex items-center justify-center"
+                className="h-full w-full overflow-auto rounded-[12px] flex items-center justify-center"
                 style={{
-                    height: "calc(100vh - 240px)",
                     background: "var(--bg-surface)",
                     border: "1px solid var(--border)",
                 }}
@@ -456,9 +455,8 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) {
     return (
         <div
             ref={tableContainerRef}
-            className="overflow-auto rounded-[12px] scroll-smooth"
+            className="h-full w-full overflow-auto rounded-[12px] scroll-smooth"
             style={{
-                height: "calc(100vh - 240px)",
                 background: "var(--bg-surface)",
                 border: "1px solid var(--border)",
                 boxShadow: "var(--shadow-sm)"