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)/profile.tsx

@@ -1,7 +1,8 @@
-import { View, Text, TouchableOpacity, ScrollView, Alert } from 'react-native'
+import { View, Text, TouchableOpacity, ScrollView, Alert, StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { LogOut, CreditCard, Globe } from 'lucide-react-native'
 import { useAuthStore } from '@/lib/store'
+import { C } from '../_layout'
 
 const TIER_LABELS: Record<string, string> = {
   FREE: 'Gratuit',
@@ -13,6 +14,7 @@ const TIER_LABELS: Record<string, string> = {
 
 export default function ProfileScreen() {
   const { user, logout } = useAuthStore()
+  const initial = (user?.name?.[0] ?? user?.email?.[0] ?? '?').toUpperCase()
 
   const handleLogout = () => {
     Alert.alert(
@@ -26,48 +28,57 @@ export default function ProfileScreen() {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <ScrollView className="flex-1 px-5">
-        <Text className="text-2xl font-serif italic text-ink pt-4 pb-6">Profil</Text>
+    <SafeAreaView style={s.safe}>
+      <ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
+        <Text style={s.title}>Profil</Text>
 
-        {/* User info */}
-        <View className="bg-white border border-border rounded-2xl p-5 mb-4">
-          <View className="w-14 h-14 rounded-full bg-brand/10 items-center justify-center mb-3">
-            <Text className="text-2xl font-bold text-brand">
-              {user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'}
-            </Text>
+        <View style={s.card}>
+          <View style={s.avatar}>
+            <Text style={s.avatarText}>{initial}</Text>
           </View>
-          <Text className="text-[17px] font-semibold text-ink">{user?.name ?? 'Utilisateur'}</Text>
-          <Text className="text-[13px] text-concrete mt-0.5">{user?.email}</Text>
+          <Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
+          <Text style={s.email}>{user?.email}</Text>
           {user?.tier && (
-            <View className="mt-3 self-start bg-brand/10 px-3 py-1 rounded-full">
-              <Text className="text-[11px] font-bold text-brand uppercase tracking-wider">
-                {TIER_LABELS[user.tier] ?? user.tier}
-              </Text>
+            <View style={s.badge}>
+              <Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
             </View>
           )}
         </View>
 
-        {/* Actions */}
-        <View className="bg-white border border-border rounded-2xl overflow-hidden mb-4">
-          <TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 border-b border-border active:bg-border/20">
-            <CreditCard size={18} color="#8A8A82" />
-            <Text className="text-[15px] text-ink flex-1">Abonnement</Text>
+        <View style={s.actionsCard}>
+          <TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
+            <CreditCard size={18} color={C.concrete} />
+            <Text style={s.actionText}>Abonnement</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 active:bg-border/20">
-            <Globe size={18} color="#8A8A82" />
-            <Text className="text-[15px] text-ink flex-1">Ouvrir memento-note.com</Text>
+          <TouchableOpacity style={s.actionRow}>
+            <Globe size={18} color={C.concrete} />
+            <Text style={s.actionText}>Ouvrir memento-note.com</Text>
           </TouchableOpacity>
         </View>
 
-        <TouchableOpacity
-          onPress={handleLogout}
-          className="bg-white border border-rose-200 rounded-2xl flex-row items-center gap-3 px-4 py-3.5 active:opacity-70"
-        >
-          <LogOut size={18} color="#e11d48" />
-          <Text className="text-[15px] text-rose-600 font-medium">Se déconnecter</Text>
+        <TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
+          <LogOut size={18} color={C.rose} />
+          <Text style={s.logoutText}>Se déconnecter</Text>
         </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, paddingTop: 16, paddingBottom: 24 },
+  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, padding: 20, marginBottom: 16 },
+  avatar: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
+  avatarText: { fontSize: 22, fontWeight: '700', color: C.brand },
+  name: { fontSize: 17, fontWeight: '600', color: C.ink },
+  email: { fontSize: 13, color: C.concrete, marginTop: 2 },
+  badge: { marginTop: 12, alignSelf: 'flex-start', backgroundColor: '#f3ece4', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 20 },
+  badgeText: { fontSize: 11, fontWeight: '800', color: C.brand, letterSpacing: 1, textTransform: 'uppercase' },
+  actionsCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, overflow: 'hidden', marginBottom: 16 },
+  actionRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  actionRowBorder: { borderBottomWidth: 1, borderBottomColor: C.border },
+  actionText: { fontSize: 15, color: C.ink, flex: 1 },
+  logoutBtn: { backgroundColor: C.white, borderWidth: 1, borderColor: C.roseBorder, borderRadius: 20, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  logoutText: { fontSize: 15, color: C.rose, fontWeight: '500' },
+})