fix(mobile): migrate to Expo SDK 54, replace NativeWind with StyleSheet

- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5
- Remove NativeWind/Tailwind dependencies
- Fix babel.config.js: presets babel-preset-expo only
- Rewrite all screens with StyleSheet.create (no className)
- Add lucide-react-native + react-native-svg
- Export design tokens C from _layout.tsx for shared usage
- Install node_modules (702 packages)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

memento-mobile/app/(tabs)/notebooks.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react'
 import {
   View, Text, FlatList, TouchableOpacity,
-  ActivityIndicator, RefreshControl,
+  ActivityIndicator, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
 import { ChevronRight } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
+import { C } from '../_layout'
 
 interface Notebook {
   id: string
@@ -39,40 +40,46 @@ export default function NotebooksScreen() {
 
   if (loading) {
     return (
-      <SafeAreaView className="flex-1 bg-paper items-center justify-center">
-        <ActivityIndicator color="#A47148" />
+      <SafeAreaView style={[s.safe, { alignItems: 'center', justifyContent: 'center' }]}>
+        <ActivityIndicator color={C.brand} />
       </SafeAreaView>
     )
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <View className="px-5 pt-4 pb-2">
-        <Text className="text-2xl font-serif italic text-ink">Carnets</Text>
+    <SafeAreaView style={s.safe}>
+      <View style={s.header}>
+        <Text style={s.title}>Carnets</Text>
       </View>
-
       <FlatList
         data={notebooks}
         keyExtractor={(item) => item.id}
-        contentContainerClassName="px-5 pb-8"
-        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+        contentContainerStyle={s.list}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
         renderItem={({ item }) => (
-          <TouchableOpacity
-            onPress={() => router.push(`/notebook/${item.id}`)}
-            className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
-          >
-            <Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
-            <View className="flex-1">
-              <Text className="text-[15px] font-semibold text-ink">{item.name}</Text>
-              <Text className="text-[12px] text-concrete">{item._count?.notes ?? 0} notes</Text>
+          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card}>
+            <Text style={s.icon}>{item.icon ?? '📓'}</Text>
+            <View style={{ flex: 1 }}>
+              <Text style={s.cardTitle}>{item.name}</Text>
+              <Text style={s.cardMeta}>{item._count?.notes ?? 0} notes</Text>
             </View>
-            <ChevronRight size={16} color="#8A8A82" />
+            <ChevronRight size={16} color={C.concrete} />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={
-          <Text className="text-concrete text-center mt-12">Aucun carnet.</Text>
-        }
+        ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
       />
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  header: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
+  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink },
+  list: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 32 },
+  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
+  icon: { fontSize: 24, marginRight: 12 },
+  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
+  cardMeta: { fontSize: 12, color: C.concrete, marginTop: 2 },
+  empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
+})