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/notebook/[id].tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react'
 import {
-  View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl,
+  View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { ArrowLeft } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
+import { C } from '../_layout'
 
 interface Note {
   id: string
@@ -39,40 +40,43 @@ export default function NotebookScreen() {
   useEffect(() => { load() }, [id])
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
-        <TouchableOpacity onPress={() => router.back()} className="p-1">
-          <ArrowLeft size={22} color="#1A1A18" />
+    <SafeAreaView style={s.safe}>
+      <View style={s.header}>
+        <TouchableOpacity onPress={() => router.back()} style={{ padding: 4 }}>
+          <ArrowLeft size={22} color={C.ink} />
         </TouchableOpacity>
-        <Text className="text-[17px] font-semibold text-ink flex-1">{notebookName || 'Carnet'}</Text>
+        <Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
       </View>
 
-      {loading ? (
-        <View className="flex-1 items-center justify-center">
-          <ActivityIndicator color="#A47148" />
-        </View>
-      ) : (
-        <FlatList
-          data={notes}
-          keyExtractor={(item) => item.id}
-          contentContainerClassName="px-5 pt-4 pb-8"
-          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
-          renderItem={({ item }) => (
-            <TouchableOpacity
-              onPress={() => router.push(`/note/${item.id}`)}
-              className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
-            >
-              <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
-                {item.title || 'Sans titre'}
-              </Text>
-              <Text className="text-[12px] text-concrete mt-0.5">
-                {new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
-              </Text>
-            </TouchableOpacity>
-          )}
-          ListEmptyComponent={<Text className="text-concrete text-center mt-12">Carnet vide.</Text>}
-        />
-      )}
+      {loading
+        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
+        : <FlatList
+            data={notes}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={s.list}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
+            renderItem={({ item }) => (
+              <TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
+                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
+                <Text style={s.cardDate}>
+                  {new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
+                </Text>
+              </TouchableOpacity>
+            )}
+            ListEmptyComponent={<Text style={s.empty}>Carnet vide.</Text>}
+          />}
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
+  headerTitle: { fontSize: 17, fontWeight: '600', color: C.ink, flex: 1 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  list: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32 },
+  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
+  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
+  cardDate: { fontSize: 12, color: C.concrete, marginTop: 4 },
+  empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
+})