@pi-spi/app 1.5.0 → 1.6.0

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_notifications_son.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useState, type ComponentProps } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Images } from '../../../../../core/assets';
@@ -10,11 +10,12 @@ import { SoundManager } from '../../../../../core/sounds';
 import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { TextButton } from '../../../../../shared/material/buttons';
-import { Card } from '../../../../../shared/material/card';
+import { AppBar } from '../../../../../shared/material/scaffold';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { SettingToggle } from './settings_widgets';
+import { ProfileMenuTile, ProfilePageMenu } from '../profile_menu';
+import { SwitchThemed } from './settings_widgets';
 
 const NONE = 'NONE';
 
@@ -44,77 +45,106 @@ export function ProfileParametrePageNotificationsSon() {
     }
   };
 
+  const basculer = () => setSelectedSound(enabled ? NONE : (SoundManager.liste[0]?.path ?? null));
+
   return (
     <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
-      <View style={styles.bar}>
-        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
-        </Pressable>
-        <View style={styles.save}>
-          <TextButton onPress={save}>{traductions.btnTextSave}</TextButton>
-        </View>
-      </View>
+      {/* Titre dans la barre, comme les autres pages (dans la feuille : fond de la feuille) */}
+      <AppBar
+        backgroundColor="transparent"
+        onBack={() => AppRouter.pop(router)}
+        title={
+          <Text numberOfLines={1} style={theme.textTheme.headlineMedium}>
+            {traductions.appSettingPageMenuNotificationSonPageTitle}
+          </Text>
+        }
+        actions={
+          <View style={styles.save}>
+            <TextButton onPress={save}>{traductions.btnTextSave}</TextButton>
+          </View>
+        }
+      />
       <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonPageTitle}</Text>
-        <View style={styles.gap20} />
         {/* Son activé ou non */}
-        <SettingToggle
-          icon={Images.iconsCloche}
-          title={traductions.notificationPageTitle}
-          value={enabled}
-          onChange={(value) => setSelectedSound(value ? (SoundManager.liste[0]?.path ?? null) : NONE)}
+        <ProfilePageMenu
+          items={[
+            <ProfileMenuTile
+              key="son"
+              image={Images.iconsCloche}
+              titre={traductions.notificationPageTitle}
+              onPress={basculer}
+              trailing={<SwitchThemed value={enabled} onChange={basculer} />}
+            />,
+          ]}
         />
+
         {/* Sons disponibles */}
-        <View style={styles.gap20} />
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
-        <View style={styles.gap10} />
-        <Card>
-          {/* Aucun */}
-          <SoundRow
-            label={traductions.appSettingPageMenuNotificationStyleNone}
-            checked={selectedSound === NONE}
-            onPress={() => setSelectedSound(NONE)}
-          />
-          {SoundManager.liste.map((sound) => (
+        <View style={styles.gap24} />
+        <ProfilePageMenu
+          titre={traductions.appSettingPageMenuNotificationSonTitle}
+          items={[
+            // Aucun
             <SoundRow
-              key={sound.path}
-              label={sound.name}
-              checked={selectedSound === sound.path}
-              onPress={() => {
-                void SoundManager.playSound(sound.path);
-                setSelectedSound(sound.path);
-              }}
-            />
-          ))}
-        </Card>
+              key={NONE}
+              icone="music-off"
+              label={traductions.appSettingPageMenuNotificationStyleNone}
+              checked={selectedSound === NONE}
+              onPress={() => setSelectedSound(NONE)}
+            />,
+            ...SoundManager.liste.map((sound) => (
+              <SoundRow
+                key={sound.path}
+                icone="music-note"
+                label={sound.name}
+                checked={selectedSound === sound.path}
+                onPress={() => {
+                  void SoundManager.playSound(sound.path);
+                  setSelectedSound(sound.path);
+                }}
+              />
+            )),
+          ]}
+        />
         <View style={styles.gap20} />
       </ScrollView>
     </View>
   );
 }
 
-function SoundRow({ label, checked, onPress }: { label: string; checked: boolean; onPress: () => void }) {
+/** Son de la liste, coché quand il est choisi */
+function SoundRow({
+  icone,
+  label,
+  checked,
+  onPress,
+}: {
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  label: string;
+  checked: boolean;
+  onPress: () => void;
+}) {
   const theme = useTheme();
   return (
-    <Pressable
-      accessibilityRole="radio"
-      accessibilityState={{ checked }}
+    <ProfileMenuTile
+      icone={icone}
+      titre={label}
       onPress={onPress}
-      style={({ pressed }) => [styles.row, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-    >
-      <Text style={[theme.textTheme.bodyLarge, styles.flex]}>{label}</Text>
-      {checked && <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} />}
-    </Pressable>
+      trailing={
+        checked ? (
+          <MaterialIcons name="check-circle" size={22} color={theme.colorScheme.primary} />
+        ) : (
+          <View style={styles.vide} />
+        )
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  bar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-  back: { padding: 12 },
   save: { paddingRight: 12 },
-  content: { paddingTop: 12, paddingHorizontal: 12 },
-  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 52 },
-  gap10: { height: 10 },
+  content: { paddingTop: 8, paddingHorizontal: 20 },
+  vide: { width: 22 },
   gap20: { height: 20 },
+  gap24: { height: 24 },
 });

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_qrcode.tsx

@@ -1,52 +1,56 @@
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { SbSelectionSheet } from '../../../../../shared/widgets/selection';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { SettingToggle } from './settings_widgets';
+import { ProfileMenuTile, ProfilePageMenu } from '../profile_menu';
+import { SwitchThemed } from './settings_widgets';
 
 /** Feuille « Mon QR code » : afficher ou non le QR code de l'alias sur l'accueil. */
 export function ProfileParametrePageQRcode() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
     (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.showQRcode,
   );
   const showQRcode = state.configParams.params[ConfigKey.showQRcode] !== '0';
+  const basculer = () => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'));
 
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.5 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
-        <Text style={theme.textTheme.headlineLarge}>{traductions.appSettingPageMenuQrCodeTitle}</Text>
-        <View style={styles.gap8} />
-        <Text style={theme.textTheme.displaySmall}>
+    <SbSelectionSheet
+      titre={traductions.appSettingPageMenuQrCodeTitle}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
           {showQRcode ? traductions.appSettingPageMenuQrCodeDeselectTitle : traductions.appSettingPageMenuQrCodeSelectTitle}
         </Text>
-        <View style={styles.gap15} />
-        <SettingToggle
-          icon={Images.homeFooterQrcode}
-          title={traductions.appSettingPageMenuQrCodeTitle}
-          value={showQRcode}
-          onChange={() => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'))}
-        />
-      </ScrollView>
-    </View>
+      }
+      contenu={
+        <View style={styles.contenu}>
+          <ProfilePageMenu
+            items={[
+              <ProfileMenuTile
+                key="qrcode"
+                image={Images.homeFooterQrcode}
+                titre={traductions.appSettingPageMenuQrCodeTitle}
+                onPress={basculer}
+                trailing={<SwitchThemed value={showQRcode} onChange={basculer} />}
+              />,
+            ]}
+          />
+        </View>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  gap8: { height: 8 },
-  gap15: { height: 15 },
+  contenu: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 20 },
 });

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_theme.tsx

@@ -1,21 +1,22 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, Themes, useTheme, type ThemeData } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { CheckedDot } from './settings_widgets';
+import { ProfileAppBar } from '../profile_app_bar';
+import { ProfileSectionTitre } from '../profile_menu';
 
 function themeIcon(theme: Themes): number {
   switch (theme) {
@@ -49,8 +50,6 @@ function themeTitle(traductions: AppLocalizations, theme: Themes): string {
 /** Choix du thème de l'application (route `profileParametreTheme`). */
 export function ProfileParametrePageTheme() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
-  const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
@@ -58,34 +57,43 @@ export function ProfileParametrePageTheme() {
   );
   const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
 
+  const [largeurGrille, setLargeurGrille] = useState(0);
+  // Trois aperçus par ligne
+  // Arrondi vers le bas : sinon la troisième colonne peut passer à la ligne
+  const largeur = Math.floor((largeurGrille - 2 * ESPACE) / 3);
+
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.appSettingPageMenuThemePageTitle} />}>
       <MyPageContainer>
-        <ScrollView>
-          <Text style={theme.textTheme.titleSmall}>{traductions.appSettingPageMenuThemePageTitle}</Text>
-          <View style={styles.gap20} />
-          <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuThemeTitle}</Text>
-          <View style={styles.gap10} />
-          <Card>
-            <View style={styles.wrap}>
-              {/* Thème personnalisé de l'hôte, en tête */}
-              {Themer.customTheme != null && (
-                <ThemeOption
-                  title={traductions.appSettingPageMenuThemeCustom}
-                  selected={currentTheme === Themer.customThemeCode}
-                  onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, Themer.customThemeCode))}
-                  preview={<CustomThemePreview theme={Themer.customTheme} />}
-                />
+        <ScrollView contentContainerStyle={styles.contenu}>
+          {/* Thème */}
+          <ProfileSectionTitre titre={traductions.appSettingPageMenuThemeTitle} />
+          <Card style={styles.card}>
+            <View style={styles.grille} onLayout={(e) => setLargeurGrille(e.nativeEvent.layout.width - 2 * 14)}>
+              {largeurGrille > 0 && (
+                <>
+                  {/* Thème personnalisé de l'hôte, en tête */}
+                  {Themer.customTheme != null && (
+                    <ThemeOption
+                      largeur={largeur}
+                      title={traductions.appSettingPageMenuThemeCustom}
+                      selected={currentTheme === Themer.customThemeCode}
+                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, Themer.customThemeCode))}
+                      preview={<CustomThemePreview theme={Themer.customTheme} />}
+                    />
+                  )}
+                  {Themes.list().map((item) => (
+                    <ThemeOption
+                      key={item}
+                      largeur={largeur}
+                      title={themeTitle(traductions, item)}
+                      selected={currentTheme === item}
+                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
+                      preview={<Image source={themeIcon(item)} style={styles.flex} contentFit="cover" />}
+                    />
+                  ))}
+                </>
               )}
-              {Themes.list().map((item) => (
-                <ThemeOption
-                  key={item}
-                  title={themeTitle(traductions, item)}
-                  selected={currentTheme === item}
-                  onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
-                  preview={<Image source={themeIcon(item)} style={styles.flex} contentFit="cover" />}
-                />
-              ))}
             </View>
           </Card>
         </ScrollView>
@@ -94,13 +102,15 @@ export function ProfileParametrePageTheme() {
   );
 }
 
-/** Une option de thème : aperçu, nom et pastille de sélection */
+/** Une option de thème : aperçu, entouré et coché quand il est choisi, puis son nom */
 function ThemeOption({
+  largeur,
   title,
   selected,
   onSelect,
   preview,
 }: {
+  largeur: number;
   title: string;
   selected: boolean;
   onSelect: () => void;
@@ -108,13 +118,32 @@ function ThemeOption({
 }) {
   const theme = useTheme();
   return (
-    <Pressable accessibilityRole="button" disabled={selected} onPress={onSelect} style={styles.item}>
-      <View style={[styles.preview, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
-      <View style={styles.gap5} />
-      <Text style={theme.textTheme.displayMedium}>{title}</Text>
-      <View style={styles.gap5} />
-      <CheckedDot value={selected} />
-      <View style={styles.gap20} />
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      disabled={selected}
+      onPress={onSelect}
+      style={[styles.item, { width: largeur }]}
+    >
+      {/* Aperçu, entouré quand il est choisi */}
+      <View style={[styles.cadre, { borderColor: selected ? theme.colorScheme.primary : 'transparent' }]}>
+        <View style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
+      </View>
+      {selected && (
+        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
+          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
+        </View>
+      )}
+      <Text
+        style={[
+          theme.textTheme.displayMedium,
+          styles.libelle,
+          { fontWeight: selected ? '700' : '500' },
+          selected ? null : { color: Themer.neural03Color },
+        ]}
+      >
+        {title}
+      </Text>
     </Pressable>
   );
 }
@@ -159,6 +188,8 @@ function CustomThemePreview({ theme }: { theme: ThemeData }) {
   );
 }
 
+const ESPACE = 12;
+
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   mock: { padding: 10 },
@@ -172,10 +203,12 @@ const styles = StyleSheet.create({
   dot14: { width: 14, height: 14, borderRadius: 7 },
   gap12: { height: 12 },
   gap14: { height: 14 },
-  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', columnGap: 10, rowGap: 10 },
+  contenu: { paddingTop: 8, paddingBottom: 16 },
+  card: { margin: 0 },
+  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: ESPACE, rowGap: 16 },
   item: { alignItems: 'center' },
-  preview: { width: 120, height: 200, borderRadius: 8, overflow: 'hidden' },
-  gap5: { height: 5 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  cadre: { alignSelf: 'stretch', padding: 3, borderWidth: 2, borderRadius: 14 },
+  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10, overflow: 'hidden' },
+  coche: { position: 'absolute', top: 8, right: 8, borderRadius: 12, borderWidth: 2, padding: 1 },
+  libelle: { marginTop: 8, textAlign: 'center' },
 });

package/src/modules/profile/presentation/pages/profile_app_bar.tsx

@@ -0,0 +1,21 @@
+import { Text } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { AppBar } from '../../../../shared/material/scaffold';
+
+/** Barre des écrans du profil : bouton retour et [titre] de la page. */
+export function ProfileAppBar({ titre }: { titre: string }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <AppBar
+      onBack={() => AppRouter.pop(router)}
+      title={
+        <Text numberOfLines={1} style={[theme.textTheme.headlineMedium, { color: theme.appBarTheme.foregroundColor }]}>
+          {titre}
+        </Text>
+      }
+    />
+  );
+}

package/src/modules/profile/presentation/pages/profile_menu.tsx

@@ -1,11 +1,13 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+import { Fragment, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Platform, Pressable, StyleSheet, Switch, Text, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
+import { Themer, useTheme } from '../../../../core/theme';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { withAlpha } from '../../../../shared/utils/color';
 
 /** Une entrée du menu du profil : une route, une action, ou une feuille à ouvrir. */
 export class ProfileItem {
@@ -27,45 +29,136 @@ export class ProfileItem {
   }
 }
 
-/** Menu du profil : une carte avec une ligne (icône, titre, sous-titre) par entrée. */
-export function ProfilePageMenu({ items }: { items: ProfileItem[] }) {
+/**
+ * Groupe d'entrées du profil dans une carte : [titre] de section facultatif
+ * au-dessus, puis une ligne par élément, séparées par un trait. Les [items]
+ * sont des `ProfileItem` ou des composants déjà construits (ex. bouton de
+ * modification du code PIN, qui utilise `ProfileMenuTile`).
+ */
+export function ProfilePageMenu({ items, titre }: { items: (ProfileItem | ReactElement)[]; titre?: string }) {
   const theme = useTheme();
   const router = useAppRouter();
-  return (
-    <Card>
-      {items.map((item, i) => (
-        <Pressable
-          key={i}
-          accessibilityRole="button"
+  const lignes = items
+    .map((item) => {
+      if (!(item instanceof ProfileItem)) return isValidElement(item) ? item : null;
+      const aSwitch = item.action != null && item.value != null;
+      return (
+        <ProfileMenuTile
+          image={item.icon}
+          titre={item.title}
+          sousTitre={item.subtitle}
           onPress={() => {
             if (typeof item.page === 'string') void AppRouter.push(router, item.page);
             else if (typeof item.page === 'function') item.page();
             // Ouvrir une feuille
-            else if (item.sheet != null) void showModalBottomSheet(router, { themed: true, builder: item.sheet });
+            else if (item.sheet != null) void showModalBottomSheet(router, { builder: item.sheet });
           }}
-          style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-        >
-          <Image source={item.icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
-          <View style={styles.texts}>
-            <Text style={theme.textTheme.bodyLarge}>{item.title}</Text>
-            {item.subtitle != null && <Text style={theme.textTheme.displaySmall}>{item.subtitle}</Text>}
-          </View>
-          {item.action != null && item.value != null && (
-            <Switch
-              value={item.value}
-              onValueChange={item.action}
-              trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
-              thumbColor={theme.switchTheme.thumbColor}
-            />
-          )}
-        </Pressable>
-      ))}
-    </Card>
+          trailing={
+            aSwitch ? (
+              <Switch
+                value={item.value}
+                onValueChange={item.action}
+                trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
+                thumbColor={theme.switchTheme.thumbColor}
+              />
+            ) : undefined
+          }
+        />
+      );
+    })
+    .filter((ligne): ligne is ReactElement => ligne != null);
+
+  return (
+    <View>
+      {titre != null && <ProfileSectionTitre titre={titre} />}
+      <Card style={styles.card}>
+        {lignes.map((ligne, i) => (
+          <Fragment key={i}>
+            {i > 0 && <View style={styles.separateur} />}
+            {ligne}
+          </Fragment>
+        ))}
+      </Card>
+    </View>
+  );
+}
+
+/**
+ * Ligne d'un menu du profil : pastille avec l'icône, [titre], [sousTitre]
+ * facultatif et, à droite, [trailing] (ex. Switch) ou une flèche.
+ * [couleur] remplace la couleur principale (ex. rouge pour une action
+ * destructive).
+ */
+export function ProfileMenuTile({
+  image,
+  icone,
+  titre,
+  sousTitre,
+  onPress,
+  trailing,
+  couleur,
+  disabled,
+}: {
+  image?: number;
+  icone?: ComponentProps<typeof MaterialIcons>['name'];
+  titre: string;
+  sousTitre?: string;
+  onPress?: () => void;
+  trailing?: ReactNode;
+  couleur?: string;
+  disabled?: boolean;
+}) {
+  const theme = useTheme();
+  const principale = couleur ?? theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+    >
+      {/* Pastille */}
+      <View style={[styles.pastille, { backgroundColor: withAlpha(principale, 0.14) }]}>
+        {image != null ? (
+          <Image source={image} style={styles.icon} tintColor={couleur ?? theme.colorScheme.onSurface} />
+        ) : (
+          <MaterialIcons name={icone ?? 'circle'} size={20} color={principale} />
+        )}
+      </View>
+      <View style={styles.texts}>
+        <Text style={[theme.textTheme.displayLarge, styles.titre, couleur != null ? { color: couleur } : null]}>{titre}</Text>
+        {sousTitre != null && sousTitre.length > 0 && (
+          <Text style={[theme.textTheme.displaySmall, styles.sousTitre, { color: Themer.neural03Color }]}>{sousTitre}</Text>
+        )}
+      </View>
+      {trailing ?? (
+        <MaterialIcons
+          name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'}
+          size={18}
+          color={couleur ?? Themer.neural03Color}
+        />
+      )}
+    </Pressable>
+  );
+}
+
+/** Titre d'une section du profil, en petites capitales. */
+export function ProfileSectionTitre({ titre }: { titre: string }) {
+  const theme = useTheme();
+  return (
+    <Text style={[theme.textTheme.displaySmall, styles.section, { color: Themer.neural03Color }]}>{titre.toUpperCase()}</Text>
   );
 }
 
 const styles = StyleSheet.create({
-  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56, paddingVertical: 8 },
-  icon: { width: 24, height: 24 },
-  texts: { flex: 1, marginLeft: 16 },
+  card: { margin: 0 },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingVertical: 12 },
+  pastille: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  icon: { width: 20, height: 20 },
+  texts: { flex: 1, marginLeft: 14, marginRight: 8 },
+  titre: { fontWeight: '500' },
+  sousTitre: { marginTop: 2 },
+  section: { fontSize: 12, letterSpacing: 0.8, fontWeight: '600', marginLeft: 4, marginBottom: 8 },
+  // Trait aligné sur le texte (après la pastille)
+  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68, backgroundColor: withAlpha(Themer.neural03Color, 0.25) },
 });