feat: redesign UI with simplified header and enhanced mobile navigation

src/app/features/bottom-nav/app-bottom-navigation.component.ts

@@ -7,22 +7,38 @@ import { MobileNavService } from '../../shared/services/mobile-nav.service';
   standalone: true,
   imports: [CommonModule],
   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">
+    <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 safe-area-inset-bottom">
       <button *ngFor="let tab of tabs"
               (click)="setActiveTab(tab.id)"
-              class="flex-1 flex flex-col items-center justify-center gap-1 text-xs py-2 px-1 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
-              [class.text-nimbus-500]="mobileNav.activeTab() === tab.id">
-        <span class="text-lg">{{ tab.icon }}</span>
+              class="relative flex-1 flex flex-col items-center justify-center gap-1 text-xs py-2 px-1 text-gray-600 dark:text-gray-400 transition-all duration-200 active:scale-95 transform"
+              [class.text-nimbus-500]="mobileNav.activeTab() === tab.id"
+              [class.font-semibold]="mobileNav.activeTab() === tab.id">
+        <!-- Active indicator -->
+        <div 
+          class="absolute top-0 left-1/2 -translate-x-1/2 w-12 h-0.5 bg-nimbus-500 rounded-full transition-all duration-300"
+          [class.opacity-100]="mobileNav.activeTab() === tab.id"
+          [class.opacity-0]="mobileNav.activeTab() !== tab.id">
+        </div>
+        <span 
+          class="text-lg transition-transform duration-200"
+          [class.scale-110]="mobileNav.activeTab() === tab.id">
+          {{ tab.icon }}
+        </span>
         <span class="truncate">{{ tab.label }}</span>
       </button>
     </nav>
-  `
+  `,
+  styles: [`
+    .safe-area-inset-bottom {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  `]
 })
 export class AppBottomNavigationComponent {
   mobileNav = inject(MobileNavService);
 
   tabs = [
-    { id: 'sidebar', icon: '📁', label: 'Dossiers' },
+    { id: 'sidebar', icon: '🏠', label: 'Maison' },
     { id: 'list', icon: '🔍', label: 'Liste' },
     { id: 'page', icon: '📄', label: 'Page' },
     { id: 'toc', icon: '📋', label: 'Sommaire' }